Merge branch 'master' into release/v8.22.1-2025-12-17

flaviendelangle · web-flow · commit e17d27f2c721 · 2025-12-18T15:55:48.000+01:00
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -1,7 +1,7 @@
 version: 2.1
 
 orbs:
-  code-infra: https://raw.githubusercontent.com/mui/mui-public/e9d744b33c485bca1d29a3eeb285fd7509845684/.circleci/orbs/code-infra.yml
+  code-infra: https://raw.githubusercontent.com/mui/mui-public/e95855c7cc16bc19c8c0c2dee435ec3ed2cc3e8a/.circleci/orbs/code-infra.yml
 
 parameters:
   browserstack-force:
diff --git a/docs/package.json b/docs/package.json
@@ -29,7 +29,7 @@
     "@emotion/styled": "catalog:",
     "@mui/docs": "7.3.6",
     "@mui/icons-material": "catalog:",
-    "@mui/internal-docs-infra": "^0.2.3-canary.16",
+    "@mui/internal-docs-infra": "^0.3.1-canary.4",
     "@mui/joy": "^5.0.0-beta.52",
     "@mui/lab": "^7.0.0-beta.17",
     "@mui/material": "catalog:",
diff --git a/docs/src/sw.js b/docs/src/sw.js
@@ -1,4 +1,3 @@
-/* eslint-env serviceworker */
 // https://github.com/airbnb/javascript/issues/1632
 
 // See https://developer.chrome.com/docs/workbox/remove-buggy-service-workers/
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -302,6 +302,14 @@ export default defineConfig(
     extends: createDocsConfig(),
     rules: {
       '@next/next/no-img-element': 'off',
+      'react/jsx-filename-extension': 'off',
+    },
+  },
+
+  {
+    files: [`test/regressions/**/*${EXTENSION_TS}`],
+    rules: {
+      'react/jsx-filename-extension': 'off',
     },
   },
 
diff --git a/package.json b/package.json
@@ -70,8 +70,8 @@
     "@emotion/cache": "catalog:",
     "@inquirer/prompts": "^7.10.1",
     "@mui/internal-babel-plugin-display-name": "^1.0.4-canary.8",
-    "@mui/internal-bundle-size-checker": "^1.0.9-canary.56",
-    "@mui/internal-code-infra": "^0.0.3-canary.55",
+    "@mui/internal-bundle-size-checker": "^1.0.9-canary.57",
+    "@mui/internal-code-infra": "^0.0.3-canary.61",
     "@mui/internal-markdown": "^2.0.13",
     "@mui/internal-netlify-cache": "^0.0.2-canary.1",
     "@mui/internal-test-utils": "catalog:",
diff --git a/packages/x-charts/src/hooks/useInteractionItemProps.ts b/packages/x-charts/src/hooks/useInteractionItemProps.ts
@@ -5,7 +5,8 @@ import { type SeriesItemIdentifierWithData } from '../models';
 import { useChartContext } from '../context/ChartProvider';
 import type { UseChartHighlightSignature } from '../internals/plugins/featurePlugins/useChartHighlight';
 import type { UseChartInteractionSignature } from '../internals/plugins/featurePlugins/useChartInteraction';
-import type { ChartSeriesType, ChartItemIdentifier } from '../models/seriesType/config';
+import type { ChartSeriesType } from '../models/seriesType/config';
+import type { SeriesItemIdentifier } from '../models/seriesType';
 import type { ChartInstance } from '../internals/plugins/models';
 import type { UseChartTooltipSignature } from '../internals/plugins/featurePlugins/useChartTooltip';
 
@@ -74,7 +75,7 @@ export function getInteractionItemProps(
   instance: ChartInstance<
     [UseChartInteractionSignature, UseChartHighlightSignature, UseChartTooltipSignature]
   >,
-  item: ChartItemIdentifier<ChartSeriesType>,
+  item: SeriesItemIdentifier<ChartSeriesType>,
 ): {
   onPointerEnter?: () => void;
   onPointerLeave?: () => void;
diff --git a/packages/x-charts/src/internals/plugins/featurePlugins/useChartTooltip/useChartTooltip.selectors.ts b/packages/x-charts/src/internals/plugins/featurePlugins/useChartTooltip/useChartTooltip.selectors.ts
@@ -1,9 +1,6 @@
 import { createSelector, createSelectorMemoized } from '@mui/x-internals/store';
-import type {
-  ChartItemIdentifier,
-  ChartSeriesDefaultized,
-  ChartSeriesType,
-} from '../../../../models/seriesType/config';
+import type { SeriesItemIdentifier } from '../../../../models/seriesType';
+import type { ChartSeriesDefaultized, ChartSeriesType } from '../../../../models/seriesType/config';
 import {
   type ProcessedSeries,
   selectorChartSeriesConfig,
@@ -78,7 +75,7 @@ const selectorChartsTooltipAxisConfig = createSelectorMemoized(
   selectorChartRadiusAxis,
   selectorChartSeriesProcessed,
   function selectorChartsTooltipAxisConfig<T extends ChartSeriesType>(
-    identifier: ChartItemIdentifier<T> | null,
+    identifier: SeriesItemIdentifier<T> | null,
     { axis: xAxis, axisIds: xAxisIds }: ComputeResult<ChartsXAxisProps>,
     { axis: yAxis, axisIds: yAxisIds }: ComputeResult<ChartsYAxisProps>,
     rotationAxes: ComputePolarResult<ChartsRotationAxisProps>,
@@ -128,7 +125,7 @@ export const selectorChartsTooltipItemPosition = createSelectorMemoized(
   selectorChartsTooltipAxisConfig,
 
   function selectorChartsTooltipItemPosition<T extends ChartSeriesType>(
-    identifier: ChartItemIdentifier<T> | null,
+    identifier: SeriesItemIdentifier<T> | null,
     drawingArea: ChartDrawingArea,
     seriesConfig: ChartSeriesConfig<T>,
     series: ProcessedSeries<T>,
diff --git a/packages/x-charts/src/internals/plugins/featurePlugins/useChartTooltip/useChartTooltip.ts b/packages/x-charts/src/internals/plugins/featurePlugins/useChartTooltip/useChartTooltip.ts
@@ -2,11 +2,12 @@ import useEventCallback from '@mui/utils/useEventCallback';
 import { fastObjectShallowCompare } from '@mui/x-internals/fastObjectShallowCompare';
 import type { ChartPlugin } from '../../models';
 import type { UseChartTooltipSignature } from './useChartTooltip.types';
-import type { ChartItemIdentifier, ChartSeriesType } from '../../../../models/seriesType/config';
+import type { SeriesItemIdentifier } from '../../../../models/seriesType';
+import type { ChartSeriesType } from '../../../../models/seriesType/config';
 
 export const useChartTooltip: ChartPlugin<UseChartTooltipSignature> = ({ store }) => {
   const removeTooltipItem = useEventCallback(function removeTooltipItem(
-    itemToRemove?: ChartItemIdentifier<ChartSeriesType>,
+    itemToRemove?: SeriesItemIdentifier<ChartSeriesType>,
   ) {
     const prevItem = store.state.tooltip.item;
 
@@ -27,7 +28,7 @@ export const useChartTooltip: ChartPlugin<UseChartTooltipSignature> = ({ store }
   });
 
   const setTooltipItem = useEventCallback(function setTooltipItem(
-    newItem: ChartItemIdentifier<ChartSeriesType>,
+    newItem: SeriesItemIdentifier<ChartSeriesType>,
   ) {
     if (!fastObjectShallowCompare(store.state.tooltip.item, newItem)) {
       store.set('tooltip', { item: newItem });
diff --git a/packages/x-charts/src/internals/plugins/featurePlugins/useChartTooltip/useChartTooltip.types.ts b/packages/x-charts/src/internals/plugins/featurePlugins/useChartTooltip/useChartTooltip.types.ts
@@ -1,28 +1,29 @@
 import type { ChartPluginSignature } from '../../models';
-import type { ChartItemIdentifier, ChartSeriesType } from '../../../../models/seriesType/config';
+import type { SeriesItemIdentifier } from '../../../../models/seriesType';
+import type { ChartSeriesType } from '../../../../models/seriesType/config';
 
 export interface UseChartTooltipInstance {
   /**
    * Setter for the item the user is pointing at.
-   * @param {ChartItemIdentifier} newItem The identifier of the item.
+   * @param {SeriesItemIdentifier} newItem The identifier of the item.
    */
-  setTooltipItem: (newItem: ChartItemIdentifier<ChartSeriesType>) => void;
+  setTooltipItem: (newItem: SeriesItemIdentifier<ChartSeriesType>) => void;
   /**
    * Remove the item the user was pointing at.
    * - If `itemToRemove` is provided, it removes the item only if it matches the current one.
    *   Otherwise it assumes the item got already updated and does nothing.
    * - If `itemToRemove` is not provided, it removes the current item unconditionally.
-   * @param {ChartItemIdentifier} itemToRemove The identifier of the item.
+   * @param {SeriesItemIdentifier} itemToRemove The identifier of the item.
    */
-  removeTooltipItem: (itemToRemove?: ChartItemIdentifier<ChartSeriesType>) => void;
+  removeTooltipItem: (itemToRemove?: SeriesItemIdentifier<ChartSeriesType>) => void;
 }
 
 export interface UseChartTooltipState {
   tooltip: {
     /**
      * The item currently under the pointer.
      */
-    item: null | ChartItemIdentifier<ChartSeriesType>;
+    item: null | SeriesItemIdentifier<ChartSeriesType>;
   };
 }
 
diff --git a/packages/x-charts/src/internals/plugins/models/seriesConfig/tooltipGetter.types.ts b/packages/x-charts/src/internals/plugins/models/seriesConfig/tooltipGetter.types.ts
@@ -1,5 +1,5 @@
+import type { SeriesItemIdentifier } from '../../../../models/seriesType';
 import type {
-  ChartItemIdentifier,
   ChartSeriesDefaultized,
   ChartSeriesType,
   ChartsSeriesConfig,
@@ -20,7 +20,7 @@ export interface ItemTooltip<T extends ChartSeriesType> {
   /**
    * An object that identifies the item to display.
    */
-  identifier: ChartItemIdentifier<T>;
+  identifier: SeriesItemIdentifier<T>;
   /**
    * The color associated with the item.
    */
@@ -78,7 +78,7 @@ export type TooltipGetter<TSeriesType extends ChartSeriesType> = (params: {
   series: ChartSeriesDefaultized<TSeriesType>;
   axesConfig: TooltipGetterAxesConfig;
   getColor: ColorGetter<TSeriesType>;
-  identifier: ChartItemIdentifier<TSeriesType> | null;
+  identifier: SeriesItemIdentifier<TSeriesType> | null;
 }) =>
   | (TSeriesType extends 'radar'
       ? ItemTooltipWithMultipleValues<TSeriesType>
diff --git a/packages/x-charts/src/internals/plugins/models/seriesConfig/tooltipItemPositionGetter.types.ts b/packages/x-charts/src/internals/plugins/models/seriesConfig/tooltipItemPositionGetter.types.ts
@@ -1,4 +1,5 @@
-import type { ChartItemIdentifier, ChartSeriesType } from '../../../../models/seriesType/config';
+import type { SeriesItemIdentifier } from '../../../../models/seriesType';
+import type { ChartSeriesType } from '../../../../models/seriesType/config';
 import {
   type ChartsRotationAxisProps,
   type ChartsRadiusAxisProps,
@@ -20,7 +21,7 @@ export type TooltipItemPositionGetter<TSeriesType extends ChartSeriesType> = (pa
   series: ProcessedSeries<TSeriesType>;
   axesConfig: TooltipPositionGetterAxesConfig;
   drawingArea: ChartDrawingArea;
-  identifier: ChartItemIdentifier<TSeriesType> | null;
+  identifier: SeriesItemIdentifier<TSeriesType> | null;
   seriesLayout: SeriesLayout<TSeriesType>;
   /**
    * The preferred placement of the tooltip related to the element.
diff --git a/packages/x-charts/src/models/seriesType/config.ts b/packages/x-charts/src/models/seriesType/config.ts
@@ -130,12 +130,6 @@ export type ChartSeriesLayout<T extends ChartSeriesType> = ChartsSeriesConfig[T]
   ? ChartsSeriesConfig[T]['seriesLayout']
   : never;
 
-export type ChartItemIdentifier<T extends ChartSeriesType> =
-  ChartsSeriesConfig[T]['itemIdentifier'];
-
-export type ChartItemIdentifierWithData<T extends ChartSeriesType> =
-  ChartsSeriesConfig[T]['itemIdentifierWithData'];
-
 export type DatasetElementType<T> = {
   [key: string]: T;
 };
diff --git a/packages/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx
@@ -337,6 +337,49 @@ describe('<DataGridPro /> - Columns', () => {
       );
     });
 
+    // https://github.com/mui/mui-x/pull/20676
+    it('should resize new rows correctly when they are added during column resize', async () => {
+      const { user } = render(
+        <Test rows={[{ id: 1, brand: 'Nike' }]} columns={[{ field: 'brand', width: 100 }]} />,
+      );
+
+      // Get initial cell width
+      expect(getCell(0, 0).getBoundingClientRect().width).to.equal(100);
+
+      // Find the separator and start resizing
+      const separator = document.querySelector(
+        `.${gridClasses['columnSeparator--resizable']}`,
+      ) as HTMLElement;
+
+      // Start resizing
+      await user.pointer([
+        { keys: '[MouseLeft>]', target: separator, coords: { x: 100 } },
+        { target: separator, coords: { x: 150 } },
+      ]);
+
+      // Verify cells are resized during the resize operation
+      expect(getCell(0, 0).getBoundingClientRect().width).to.equal(150);
+
+      // Update rows while resize is in progress
+      act(() =>
+        apiRef.current?.updateRows([
+          { id: 1, brand: 'Nike' },
+          { id: 2, brand: 'Adidas' },
+        ]),
+      );
+
+      // Verify that the new rows are added with the resized width
+      expect(getCell(0, 0).getBoundingClientRect().width).to.equal(150);
+      expect(getCell(1, 0).getBoundingClientRect().width).to.equal(150);
+
+      // Resize column back
+      await user.pointer([{ target: separator, coords: { x: 120 } }]);
+
+      // Verify all cells (old and new) have the new width
+      expect(getCell(0, 0).getBoundingClientRect().width).to.equal(120);
+      expect(getCell(1, 0).getBoundingClientRect().width).to.equal(120);
+    });
+
     // https://github.com/mui/mui-x/issues/13548
     it('should fill remaining horizontal space in a row with an empty cell', () => {
       render(<Test columns={[{ field: 'id', width: 100 }]} />);
diff --git a/packages/x-data-grid/src/hooks/features/columnResize/useGridColumnResize.tsx b/packages/x-data-grid/src/hooks/features/columnResize/useGridColumnResize.tsx
@@ -54,6 +54,7 @@ import type { GridColumnResizeParams } from '../../../models/params/gridColumnRe
 import type { GridStateColDef } from '../../../models/colDef/gridColDef';
 import type { GridEventListener } from '../../../models/events/gridEventListener';
 import type { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
+import { gridResizingColumnFieldSelector } from './columnResizeSelector';
 
 type AutosizeOptionsRequired = Required<GridAutosizeOptions>;
 
@@ -472,6 +473,12 @@ export const useGridColumnResize = (
     });
   };
 
+  const setCellElementsRef = () => {
+    if (refs.columnHeaderElement) {
+      refs.cellElements = findGridCellElementsFromCol(refs.columnHeaderElement, apiRef.current);
+    }
+  };
+
   const storeReferences = (colDef: GridStateColDef, separator: HTMLElement, xStart: number) => {
     const root = apiRef.current.rootElementRef.current!;
 
@@ -497,7 +504,7 @@ export const useGridColumnResize = (
       colDef.field,
     );
 
-    refs.cellElements = findGridCellElementsFromCol(refs.columnHeaderElement, apiRef.current);
+    setCellElementsRef();
 
     refs.fillerLeft = findGridElement(
       apiRef.current,
@@ -854,6 +861,16 @@ export const useGridColumnResize = (
   useGridEvent(apiRef, 'columnSeparatorMouseDown', handleColumnResizeMouseDown);
   useGridEvent(apiRef, 'columnSeparatorDoubleClick', handleColumnSeparatorDoubleClick);
 
+  useGridEvent(apiRef, 'rowsSet', () => {
+    // if the user is still resizing the column, update the cell references included in the resize action
+    if (gridResizingColumnFieldSelector(apiRef) !== '') {
+      // wait until the rows are in the DOM
+      requestAnimationFrame(() => {
+        setCellElementsRef();
+      });
+    }
+  });
+
   useGridEventPriority(apiRef, 'columnResize', props.onColumnResize);
   useGridEventPriority(apiRef, 'columnWidthChange', props.onColumnWidthChange);
 };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/test/performance-charts/tests/Heatmap.bench.tsx b/test/performance-charts/tests/Heatmap.bench.tsx
diff --git a/test/utils/pickers/describeValidation/testMinutesViewValidation.tsx b/test/utils/pickers/describeValidation/testMinutesViewValidation.tsx

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-/* eslint-env serviceworker */`
`2`	`1`	`// https://github.com/airbnb/javascript/issues/1632`
`3`	`2`
`4`	`3`	`// See https://developer.chrome.com/docs/workbox/remove-buggy-service-workers/`