@mui/x-data-grid 6.10.0 → 6.10.1

package/CHANGELOG.md

@@ -3,6 +3,75 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.10.1
+
+_Jul 20, 2023_
+
+We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Fix CSV export for values containing double quotes
+- 🚀 Improve tree data performance
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@v6.10.1`
+
+- [DataGrid] Filtering performance: compile filter applier with `eval` (#9635) @romgrk
+- [DataGrid] Fix CSV export for values containing double quotes (#9667) @cherniavskii
+- [DataGrid] Fix column type change not working correctly (#9594) @cherniavskii
+- [DataGrid] Fix quick filter `undefined` row error (#9708) @romgrk
+- [DataGrid] Prevent `viewportOuterSize.height` going negative (#9664) @gitstart
+- [DataGrid] Update focused cell on page change via keyboard (#9203) @m4theushw
+- [DataGrid] Wait for remote stylesheets to load before print (#9665) @cherniavskii
+
+#### `@mui/x-data-grid-pro@v6.10.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link)
+
+Same changes as in `@mui/x-data-grid@v6.10.1`, plus:
+
+- [DataGridPro] Improve tree data performance (#9682) @cherniavskii
+- [DataGridPro] Prevent affecting cells from child DataGrid when resizing a column (#9670) @m4theushw
+
+#### `@mui/x-data-grid-premium@v6.10.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link)
+
+Same changes as in `@mui/x-data-grid-pro@v6.10.1`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@v6.10.1`
+
+- [fields] Fix `format` and `value` update order (#9715) @LukasTy
+- [pickers] Remove `require` usage in comment (#9675) @LukasTy
+
+#### `@mui/x-date-pickers-pro@v6.10.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link)
+
+Same changes as in `@mui/x-date-pickers@v6.10.1`.
+
+### Charts / `@mui/x-charts@v6.0.0-alpha.4`
+
+- [charts] Fix blinking in responsive charts and extremums computation for line charts (#9734) @alexfauquette
+- [charts] Use ESM with imports (#9645) @alexfauquette
+
+### Docs
+
+- [docs] Add additional note for license key installation on Next.js (#9575) @joserodolfofreitas
+- [docs] Add paragraph about managing focus of custom edit components (#9658) @m4theushw
+- [docs] Add unsorted icon slot to the custom sort icons demo (#9169) @d4rekanguok
+- [docs] Disable ad for onboarding pages (#9700) @oliviertassinari
+- [docs] Disabling ads without toolbar has no effect @oliviertassinari
+- [docs] Fix Date Pickers usage to Title Case (#9680) @richbustos
+- [docs] Fix sorting in `CustomSortIcons` demo (#9656) @MBilalShafi
+- [docs] Improve the UI for pickers introduction (#9644) @alexfauquette
+- [docs] Improve the demo design @oliviertassinari
+- [docs] Localization progress, polish (#9672) @oliviertassinari
+- [docs] Normalize the WIP items (#9671) @oliviertassinari
+
+### Core
+
+- [core] Add `validate` command (#9714) @romgrk
+- [CHANGELOG] Update generator to new format @oliviertassinari
+
 ## 6.10.0
 
 _Jul 13, 2023_
@@ -26,11 +95,11 @@ We'd like to offer a big thanks to the 10 contributors who made this release pos
 - [DataGrid] Make `rowExpansionChange` event public (#9611) @MBilalShafi
 - [l10n] Improve Polish (pl-PL) locale (#9625) @ch1llysense
 
-#### `@mui/x-data-grid-pro@6.10.0`
+#### `@mui/x-data-grid-pro@6.10.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link)
 
 Same changes as in `@mui/x-data-grid@6.10.0`.
 
-#### `@mui/x-data-grid-premium@6.10.0`
+#### `@mui/x-data-grid-premium@6.10.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link)
 
 Same changes as in `@mui/x-data-grid-pro@6.10.0`.
 
@@ -41,7 +110,7 @@ Same changes as in `@mui/x-data-grid-pro@6.10.0`.
 - [pickers] Fix date calendar issues (#9652) @LukasTy
 - [l10n] Improve Norwegian (nb-NO) locale (#9608) @JosteinBrevik
 
-#### `@mui/x-date-pickers-pro@6.10.0`
+#### `@mui/x-date-pickers-pro@6.10.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link)
 
 Same changes as in `@mui/x-date-pickers@6.10.0`.
 

package/components/panel/GridPanel.js

@@ -70,8 +70,8 @@ const GridPanel = /*#__PURE__*/React.forwardRef((props, ref) => {
   }], []);
   const [anchorEl, setAnchorEl] = React.useState(null);
   React.useEffect(() => {
-    var _apiRef$current$rootE, _apiRef$current$rootE2;
-    const columnHeadersElement = (_apiRef$current$rootE = apiRef.current.rootElementRef) == null ? void 0 : (_apiRef$current$rootE2 = _apiRef$current$rootE.current) == null ? void 0 : _apiRef$current$rootE2.querySelector(`.${gridClasses.columnHeaders}`);
+    var _apiRef$current$rootE;
+    const columnHeadersElement = (_apiRef$current$rootE = apiRef.current.rootElementRef) == null || (_apiRef$current$rootE = _apiRef$current$rootE.current) == null ? void 0 : _apiRef$current$rootE.querySelector(`.${gridClasses.columnHeaders}`);
     if (columnHeadersElement) {
       setAnchorEl(columnHeadersElement);
     }

package/components/panel/filterPanel/GridFilterForm.js

@@ -217,7 +217,7 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
     focus: () => {
       if (currentOperator != null && currentOperator.InputComponent) {
         var _valueRef$current;
-        valueRef == null ? void 0 : (_valueRef$current = valueRef.current) == null ? void 0 : _valueRef$current.focus();
+        valueRef == null || (_valueRef$current = valueRef.current) == null ? void 0 : _valueRef$current.focus();
       } else {
         filterSelectorRef.current.focus();
       }
@@ -313,7 +313,7 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
         native: isBaseSelectNative,
         inputRef: filterSelectorRef
       }, (_rootProps$slotProps8 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps8.baseSelect, {
-        children: currentColumn == null ? void 0 : (_currentColumn$filter2 = currentColumn.filterOperators) == null ? void 0 : _currentColumn$filter2.map(operator => /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
+        children: currentColumn == null || (_currentColumn$filter2 = currentColumn.filterOperators) == null ? void 0 : _currentColumn$filter2.map(operator => /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
           native: isBaseSelectNative,
           key: operator.value,
           value: operator.value

package/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -43,7 +43,7 @@ const SingleSelectOperatorContainer = styled('div')({
   }
 });
 function GridFilterInputSingleSelect(props) {
-  var _item$value, _rootProps$slotProps$, _rootProps$slotProps, _rootProps$slotProps$2, _resolvedColumn, _resolvedColumn2, _rootProps$slotProps2, _rootProps$slotProps3, _rootProps$slotProps4;
+  var _item$value, _rootProps$slotProps$, _rootProps$slotProps, _resolvedColumn, _resolvedColumn2, _rootProps$slotProps2, _rootProps$slotProps3, _rootProps$slotProps4;
   const {
       item,
       applyValue,
@@ -62,7 +62,7 @@ function GridFilterInputSingleSelect(props) {
   const id = useId();
   const labelId = useId();
   const rootProps = useGridRootProps();
-  const isSelectNative = (_rootProps$slotProps$ = (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : (_rootProps$slotProps$2 = _rootProps$slotProps.baseSelect) == null ? void 0 : _rootProps$slotProps$2.native) != null ? _rootProps$slotProps$ : true;
+  const isSelectNative = (_rootProps$slotProps$ = (_rootProps$slotProps = rootProps.slotProps) == null || (_rootProps$slotProps = _rootProps$slotProps.baseSelect) == null ? void 0 : _rootProps$slotProps.native) != null ? _rootProps$slotProps$ : true;
   let resolvedColumn = null;
   if (item.field) {
     const column = apiRef.current.getColumn(item.field);

package/hooks/features/columns/gridColumnsUtils.js

@@ -197,6 +197,13 @@ export const applyInitialState = (columnsState, initialState) => {
   });
   return newColumnsState;
 };
+function getDefaultColTypeDef(columnTypes, type) {
+  let colDef = columnTypes[DEFAULT_GRID_COL_TYPE_KEY];
+  if (type && columnTypes[type]) {
+    colDef = columnTypes[type];
+  }
+  return colDef;
+}
 export const createColumnsState = ({
   apiRef,
   columnsToUpsert,
@@ -205,7 +212,7 @@ export const createColumnsState = ({
   columnVisibilityModel = gridColumnVisibilityModelSelector(apiRef),
   keepOnlyColumnsToUpsert = false
 }) => {
-  var _apiRef$current$getRo, _apiRef$current$getRo2, _apiRef$current, _apiRef$current$getRo3;
+  var _apiRef$current$getRo, _apiRef$current$getRo2, _apiRef$current;
   const isInsideStateInitializer = !apiRef.current.state.columns;
   let columnsState;
   if (isInsideStateInitializer) {
@@ -238,11 +245,7 @@ export const createColumnsState = ({
     columnsToKeep[field] = true;
     let existingState = columnsState.lookup[field];
     if (existingState == null) {
-      let colDef = columnTypes[DEFAULT_GRID_COL_TYPE_KEY];
-      if (newColumn.type && columnTypes[newColumn.type]) {
-        colDef = columnTypes[newColumn.type];
-      }
-      existingState = _extends({}, colDef, {
+      existingState = _extends({}, getDefaultColTypeDef(columnTypes, newColumn.type), {
         field,
         hasBeenResized: false
       });
@@ -250,6 +253,13 @@ export const createColumnsState = ({
     } else if (keepOnlyColumnsToUpsert) {
       columnsState.orderedFields.push(field);
     }
+
+    // If the column type has changed - merge the existing state with the default column type definition
+    if (existingState && existingState.type !== newColumn.type) {
+      existingState = _extends({}, existingState, getDefaultColTypeDef(columnTypes, newColumn.type), {
+        field
+      });
+    }
     let hasBeenResized = existingState.hasBeenResized;
     COLUMNS_DIMENSION_PROPERTIES.forEach(key => {
       if (newColumn[key] !== undefined) {
@@ -272,7 +282,7 @@ export const createColumnsState = ({
   }
   const columnsStateWithPreProcessing = apiRef.current.unstable_applyPipeProcessors('hydrateColumns', columnsState);
   const columnsStateWithPortableColumns = applyInitialState(columnsStateWithPreProcessing, initialState);
-  return hydrateColumnsWidth(columnsStateWithPortableColumns, (_apiRef$current$getRo = (_apiRef$current$getRo2 = (_apiRef$current = apiRef.current).getRootDimensions) == null ? void 0 : (_apiRef$current$getRo3 = _apiRef$current$getRo2.call(_apiRef$current)) == null ? void 0 : _apiRef$current$getRo3.viewportInnerSize.width) != null ? _apiRef$current$getRo : 0);
+  return hydrateColumnsWidth(columnsStateWithPortableColumns, (_apiRef$current$getRo = (_apiRef$current$getRo2 = (_apiRef$current = apiRef.current).getRootDimensions) == null || (_apiRef$current$getRo2 = _apiRef$current$getRo2.call(_apiRef$current)) == null ? void 0 : _apiRef$current$getRo2.viewportInnerSize.width) != null ? _apiRef$current$getRo : 0);
 };
 export const mergeColumnsState = columnsState => state => _extends({}, state, {
   columns: columnsState

package/hooks/features/columns/useGridColumns.js

@@ -11,13 +11,13 @@ import { getGridDefaultColumnTypes } from '../../../colDef';
 import { jsx as _jsx } from "react/jsx-runtime";
 const defaultColumnTypes = getGridDefaultColumnTypes();
 export const columnsStateInitializer = (state, props, apiRef) => {
-  var _props$initialState, _ref, _props$columnVisibili, _props$initialState2, _props$initialState2$;
+  var _props$initialState, _ref, _props$columnVisibili, _props$initialState2;
   const columnsState = createColumnsState({
     apiRef,
     columnTypes: defaultColumnTypes,
     columnsToUpsert: props.columns,
     initialState: (_props$initialState = props.initialState) == null ? void 0 : _props$initialState.columns,
-    columnVisibilityModel: (_ref = (_props$columnVisibili = props.columnVisibilityModel) != null ? _props$columnVisibili : (_props$initialState2 = props.initialState) == null ? void 0 : (_props$initialState2$ = _props$initialState2.columns) == null ? void 0 : _props$initialState2$.columnVisibilityModel) != null ? _ref : {},
+    columnVisibilityModel: (_ref = (_props$columnVisibili = props.columnVisibilityModel) != null ? _props$columnVisibili : (_props$initialState2 = props.initialState) == null || (_props$initialState2 = _props$initialState2.columns) == null ? void 0 : _props$initialState2.columnVisibilityModel) != null ? _ref : {},
     keepOnlyColumnsToUpsert: true
   });
   return _extends({}, state, {
@@ -160,7 +160,7 @@ export function useGridColumns(apiRef, props) {
    * PRE-PROCESSING
    */
   const stateExportPreProcessing = React.useCallback((prevState, context) => {
-    var _props$initialState$c, _props$initialState3, _props$initialState3$;
+    var _props$initialState$c, _props$initialState3;
     const columnsStateToExport = {};
     const columnVisibilityModelToExport = gridColumnVisibilityModelSelector(apiRef);
     const shouldExportColumnVisibilityModel =
@@ -170,7 +170,7 @@ export function useGridColumns(apiRef, props) {
     props.columnVisibilityModel != null ||
     // Always export if the model has been initialized
     // TODO v6 Do a nullish check instead to export even if the initial model equals "{}"
-    Object.keys((_props$initialState$c = (_props$initialState3 = props.initialState) == null ? void 0 : (_props$initialState3$ = _props$initialState3.columns) == null ? void 0 : _props$initialState3$.columnVisibilityModel) != null ? _props$initialState$c : {}).length > 0 ||
+    Object.keys((_props$initialState$c = (_props$initialState3 = props.initialState) == null || (_props$initialState3 = _props$initialState3.columns) == null ? void 0 : _props$initialState3.columnVisibilityModel) != null ? _props$initialState$c : {}).length > 0 ||
     // Always export if the model is not empty
     Object.keys(columnVisibilityModelToExport).length > 0;
     if (shouldExportColumnVisibilityModel) {

package/hooks/features/dimensions/useGridDimensions.js

@@ -81,7 +81,7 @@ export function useGridDimensions(apiRef, props) {
     } else {
       viewportOuterSize = {
         width: rootDimensionsRef.current.width,
-        height: rootDimensionsRef.current.height - totalHeaderHeight
+        height: Math.max(rootDimensionsRef.current.height - totalHeaderHeight, 0)
       };
       const scrollInformation = hasScroll({
         content: {

package/hooks/features/editing/useGridCellEditing.js

@@ -338,7 +338,7 @@ export const useGridCellEditing = (apiRef, props) => {
     }
   });
   const setCellEditingEditCellValue = React.useCallback(async params => {
-    var _editingState$id, _editingState$id$fiel;
+    var _editingState$id;
     const {
       id,
       field,
@@ -388,7 +388,7 @@ export const useGridCellEditing = (apiRef, props) => {
     newProps.value = column.preProcessEditCellProps ? editingState[id][field].value : parsedValue;
     updateOrDeleteFieldState(id, field, newProps);
     editingState = gridEditRowsStateSelector(apiRef.current.state);
-    return !((_editingState$id = editingState[id]) != null && (_editingState$id$fiel = _editingState$id[field]) != null && _editingState$id$fiel.error);
+    return !((_editingState$id = editingState[id]) != null && (_editingState$id = _editingState$id[field]) != null && _editingState$id.error);
   }, [apiRef, throwIfNotEditable, throwIfNotInMode, updateOrDeleteFieldState]);
   const getRowWithUpdatedValuesFromCellEditing = React.useCallback((id, field) => {
     const column = apiRef.current.getColumn(field);
@@ -432,8 +432,8 @@ export const useGridCellEditing = (apiRef, props) => {
 
     Object.entries(cellModesModel).forEach(([id, fields]) => {
       Object.entries(fields).forEach(([field, params]) => {
-        var _copyOfPrevCellModes$, _copyOfPrevCellModes$2, _idToIdLookup$id;
-        const prevMode = ((_copyOfPrevCellModes$ = copyOfPrevCellModes[id]) == null ? void 0 : (_copyOfPrevCellModes$2 = _copyOfPrevCellModes$[field]) == null ? void 0 : _copyOfPrevCellModes$2.mode) || GridCellModes.View;
+        var _copyOfPrevCellModes$, _idToIdLookup$id;
+        const prevMode = ((_copyOfPrevCellModes$ = copyOfPrevCellModes[id]) == null || (_copyOfPrevCellModes$ = _copyOfPrevCellModes$[field]) == null ? void 0 : _copyOfPrevCellModes$.mode) || GridCellModes.View;
         const originalId = (_idToIdLookup$id = idToIdLookup[id]) != null ? _idToIdLookup$id : id;
         if (params.mode === GridCellModes.Edit && prevMode === GridCellModes.View) {
           updateStateToStartCellEditMode(_extends({

package/hooks/features/export/serializers/csvSerializer.js

@@ -2,13 +2,11 @@ import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../../../../colDef';
 import { buildWarning } from '../../../../utils/warning';
 function sanitizeCellValue(value, delimiterCharacter) {
   if (typeof value === 'string') {
-    const formattedValue = value.replace(/"/g, '""');
-
     // Make sure value containing delimiter or line break won't be split into multiple rows
-    if ([delimiterCharacter, '\n', '\r'].some(delimiter => formattedValue.includes(delimiter))) {
-      return `"${formattedValue}"`;
+    if ([delimiterCharacter, '\n', '\r', '"'].some(delimiter => value.includes(delimiter))) {
+      return `"${value.replace(/"/g, '""')}"`;
     }
-    return formattedValue;
+    return value;
   }
   return value;
 }

package/hooks/features/export/useGridPrintExport.js

@@ -123,6 +123,7 @@ export const useGridPrintExport = (apiRef, props) => {
     if (normalizeOptions.bodyClassName) {
       printDoc.body.classList.add(...normalizeOptions.bodyClassName.split(' '));
     }
+    const stylesheetLoadPromises = [];
     if (normalizeOptions.copyStyles) {
       const rootCandidate = gridRootElement.getRootNode();
       const root = rootCandidate.constructor.name === 'ShadowRoot' ? rootCandidate : doc.current;
@@ -153,6 +154,9 @@ export const useGridPrintExport = (apiRef, props) => {
               newHeadStyleElements.setAttribute(attr.nodeName, attr.nodeValue || '');
             }
           }
+          stylesheetLoadPromises.push(new Promise(resolve => {
+            newHeadStyleElements.addEventListener('load', () => resolve());
+          }));
           printDoc.head.appendChild(newHeadStyleElements);
         }
       }
@@ -160,17 +164,20 @@ export const useGridPrintExport = (apiRef, props) => {
 
     // Trigger print
     if (process.env.NODE_ENV !== 'test') {
-      printWindow.contentWindow.print();
+      // wait for remote stylesheets to load
+      Promise.all(stylesheetLoadPromises).then(() => {
+        printWindow.contentWindow.print();
+      });
     }
   }, [apiRef, doc, props.columnHeaderHeight]);
   const handlePrintWindowAfterPrint = React.useCallback(printWindow => {
-    var _previousGridState$cu, _previousGridState$cu2;
+    var _previousGridState$cu;
     // Remove the print iframe
     doc.current.body.removeChild(printWindow);
 
     // Revert grid to previous state
     apiRef.current.restoreState(previousGridState.current || {});
-    if (!((_previousGridState$cu = previousGridState.current) != null && (_previousGridState$cu2 = _previousGridState$cu.columns) != null && _previousGridState$cu2.columnVisibilityModel)) {
+    if (!((_previousGridState$cu = previousGridState.current) != null && (_previousGridState$cu = _previousGridState$cu.columns) != null && _previousGridState$cu.columnVisibilityModel)) {
       // if the apiRef.current.exportState(); did not exported the column visibility, we update it
       apiRef.current.setColumnVisibilityModel(previousColumnVisibility.current);
     }

package/hooks/features/export/utils.js

@@ -21,8 +21,8 @@ export const defaultGetRowsToExport = ({
   const selectedRows = apiRef.current.getSelectedRows();
   const bodyRows = filteredSortedRowIds.filter(id => rowTree[id].type !== 'footer');
   const pinnedRows = gridPinnedRowsSelector(apiRef);
-  const topPinnedRowsIds = (pinnedRows == null ? void 0 : (_pinnedRows$top = pinnedRows.top) == null ? void 0 : _pinnedRows$top.map(row => row.id)) || [];
-  const bottomPinnedRowsIds = (pinnedRows == null ? void 0 : (_pinnedRows$bottom = pinnedRows.bottom) == null ? void 0 : _pinnedRows$bottom.map(row => row.id)) || [];
+  const topPinnedRowsIds = (pinnedRows == null || (_pinnedRows$top = pinnedRows.top) == null ? void 0 : _pinnedRows$top.map(row => row.id)) || [];
+  const bottomPinnedRowsIds = (pinnedRows == null || (_pinnedRows$bottom = pinnedRows.bottom) == null ? void 0 : _pinnedRows$bottom.map(row => row.id)) || [];
   bodyRows.unshift(...topPinnedRowsIds);
   bodyRows.push(...bottomPinnedRowsIds);
   if (selectedRows.size > 0) {

package/hooks/features/filter/gridFilterSelector.js

@@ -104,7 +104,7 @@ export const gridFilterActiveItemsSelector = createSelectorMemoized(gridFilterMo
       return false;
     }
     const column = columnLookup[item.field];
-    if (!(column != null && column.filterOperators) || (column == null ? void 0 : (_column$filterOperato = column.filterOperators) == null ? void 0 : _column$filterOperato.length) === 0) {
+    if (!(column != null && column.filterOperators) || (column == null || (_column$filterOperato = column.filterOperators) == null ? void 0 : _column$filterOperato.length) === 0) {
       return false;
     }
     const filterOperator = column.filterOperators.find(operator => operator.value === item.operator);

package/hooks/features/filter/gridFilterUtils.js

@@ -118,6 +118,7 @@ const getFilterCallbackFromItem = (filterItem, apiRef) => {
     }
   };
 };
+let filterItemsApplierId = 1;
 
 /**
  * Generates a method to easily check if a row is matching the current filter model.
@@ -134,16 +135,42 @@ export const buildAggregatedFilterItemsApplier = (getRowId, filterModel, apiRef)
   if (appliers.length === 0) {
     return null;
   }
-  return (row, shouldApplyFilter) => {
-    const resultPerItemId = {};
-    for (let i = 0; i < appliers.length; i += 1) {
-      const applier = appliers[i];
-      if (!shouldApplyFilter || shouldApplyFilter(applier.item.field)) {
-        resultPerItemId[applier.item.id] = applier.v7 ? applier.fn(row) : applier.fn(getRowId ? getRowId(row) : row.id);
-      }
-    }
-    return resultPerItemId;
-  };
+
+  // Original logic:
+  // return (row, shouldApplyFilter) => {
+  //   const resultPerItemId: GridFilterItemResult = {};
+  //
+  //   for (let i = 0; i < appliers.length; i += 1) {
+  //     const applier = appliers[i];
+  //     if (!shouldApplyFilter || shouldApplyFilter(applier.item.field)) {
+  //       resultPerItemId[applier.item.id!] = applier.v7
+  //         ? applier.fn(row)
+  //         : applier.fn(getRowId ? getRowId(row) : row.id);
+  //     }
+  //   }
+  //
+  //   return resultPerItemId;
+  // };
+
+  // We generate a new function with `eval()` to avoid expensive patterns for JS engines
+  // such as a dynamic object assignment, e.g. `{ [dynamicKey]: value }`.
+  const filterItemTemplate = `(function filterItem$$(row, shouldApplyFilter) {
+      ${appliers.map((applier, i) => `const shouldApply${i} = !shouldApplyFilter || shouldApplyFilter(${JSON.stringify(applier.item.field)});`).join('\n')}
+
+      const result$$ = {
+      ${appliers.map((applier, i) => `${JSON.stringify(String(applier.item.id))}:
+          !shouldApply${i} ?
+            false :
+            ${applier.v7 ? `appliers[${i}].fn(row)` : `appliers[${i}].fn(${getRowId ? 'getRowId(row)' : 'row.id'})`},
+      `).join('\n')}};
+
+      return result$$;
+    })`;
+
+  // eslint-disable-next-line no-eval
+  const filterItem = eval(filterItemTemplate.replaceAll('$$', String(filterItemsApplierId)));
+  filterItemsApplierId += 1;
+  return filterItem;
 };
 
 /**

package/hooks/features/filter/useGridFilter.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { defaultMemoize } from 'reselect';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import { useLazyRef } from '../../utils/useLazyRef';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
@@ -16,8 +18,8 @@ import { buildAggregatedFilterApplier, sanitizeFilterModel, mergeStateWithFilter
 import { isDeepEqual } from '../../../utils/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const filterStateInitializer = (state, props, apiRef) => {
-  var _ref, _props$filterModel, _props$initialState, _props$initialState$f;
-  const filterModel = (_ref = (_props$filterModel = props.filterModel) != null ? _props$filterModel : (_props$initialState = props.initialState) == null ? void 0 : (_props$initialState$f = _props$initialState.filter) == null ? void 0 : _props$initialState$f.filterModel) != null ? _ref : getDefaultGridFilterModel();
+  var _ref, _props$filterModel, _props$initialState;
+  const filterModel = (_ref = (_props$filterModel = props.filterModel) != null ? _props$filterModel : (_props$initialState = props.initialState) == null || (_props$initialState = _props$initialState.filter) == null ? void 0 : _props$initialState.filterModel) != null ? _ref : getDefaultGridFilterModel();
   return _extends({}, state, {
     filter: {
       filterModel: sanitizeFilterModel(filterModel, props.disableMultipleColumnsFiltering, apiRef),
@@ -37,6 +39,9 @@ function getVisibleRowsLookupState(apiRef, state) {
     filteredRowsLookup: state.filter.filteredRowsLookup
   });
 }
+function createMemoizedValues() {
+  return defaultMemoize(Object.values);
+}
 
 /**
  * @requires useGridColumns (method, event)
@@ -44,7 +49,7 @@ function getVisibleRowsLookupState(apiRef, state) {
  * @requires useGridRows (event)
  */
 export const useGridFilter = (apiRef, props) => {
-  var _props$initialState3, _props$initialState3$, _props$slotProps2;
+  var _props$initialState3, _props$slotProps2;
   const logger = useGridLogger(apiRef, 'useGridFilter');
   apiRef.current.registerControlState({
     stateId: 'filter',
@@ -218,7 +223,7 @@ export const useGridFilter = (apiRef, props) => {
    * PRE-PROCESSING
    */
   const stateExportPreProcessing = React.useCallback((prevState, context) => {
-    var _props$initialState2, _props$initialState2$;
+    var _props$initialState2;
     const filterModelToExport = gridFilterModelSelector(apiRef);
     const shouldExportFilterModel =
     // Always export if the `exportOnlyDirtyModels` property is not activated
@@ -226,7 +231,7 @@ export const useGridFilter = (apiRef, props) => {
     // Always export if the model is controlled
     props.filterModel != null ||
     // Always export if the model has been initialized
-    ((_props$initialState2 = props.initialState) == null ? void 0 : (_props$initialState2$ = _props$initialState2.filter) == null ? void 0 : _props$initialState2$.filterModel) != null ||
+    ((_props$initialState2 = props.initialState) == null || (_props$initialState2 = _props$initialState2.filter) == null ? void 0 : _props$initialState2.filterModel) != null ||
     // Export if the model is not equal to the default value
     !isDeepEqual(filterModelToExport, getDefaultGridFilterModel());
     if (!shouldExportFilterModel) {
@@ -237,7 +242,7 @@ export const useGridFilter = (apiRef, props) => {
         filterModel: filterModelToExport
       }
     });
-  }, [apiRef, props.filterModel, (_props$initialState3 = props.initialState) == null ? void 0 : (_props$initialState3$ = _props$initialState3.filter) == null ? void 0 : _props$initialState3$.filterModel]);
+  }, [apiRef, props.filterModel, (_props$initialState3 = props.initialState) == null || (_props$initialState3 = _props$initialState3.filter) == null ? void 0 : _props$initialState3.filterModel]);
   const stateRestorePreProcessing = React.useCallback((params, context) => {
     var _context$stateToResto;
     const filterModel = (_context$stateToResto = context.stateToRestore.filter) == null ? void 0 : _context$stateToResto.filterModel;
@@ -257,11 +262,10 @@ export const useGridFilter = (apiRef, props) => {
     }
     return initialValue;
   }, [props.slots.filterPanel, (_props$slotProps2 = props.slotProps) == null ? void 0 : _props$slotProps2.filterPanel]);
-  const dataRowIdToIdLookup = apiRef.current.state.rows.dataRowIdToModelLookup;
-  const rows = React.useMemo(() => Object.values(dataRowIdToIdLookup), [dataRowIdToIdLookup]);
   const {
     getRowId
   } = props;
+  const getRowsRef = useLazyRef(createMemoizedValues);
   const flatFilteringMethod = React.useCallback(params => {
     if (props.filterMode !== 'client' || !params.isRowMatchingFilters) {
       return {
@@ -279,6 +283,7 @@ export const useGridFilter = (apiRef, props) => {
       passingFilterItems: null,
       passingQuickFilterValues: null
     };
+    const rows = getRowsRef.current(apiRef.current.state.rows.dataRowIdToModelLookup);
     for (let i = 0; i < rows.length; i += 1) {
       const row = rows[i];
       const id = getRowId ? getRowId(row) : row.id;
@@ -295,7 +300,7 @@ export const useGridFilter = (apiRef, props) => {
       filteredRowsLookup,
       filteredDescendantCountLookup: {}
     };
-  }, [apiRef, rows, props.filterMode, getRowId]);
+  }, [apiRef, props.filterMode, getRowId, getRowsRef]);
   useGridRegisterPipeProcessor(apiRef, 'columnMenu', addColumnMenuItem);
   useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
   useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);

package/hooks/features/focus/useGridFocus.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { unstable_ownerDocument as ownerDocument } from '@mui/utils';
+import { unstable_ownerDocument as ownerDocument, unstable_useEventCallback as useEventcallback } from '@mui/utils';
 import { gridClasses } from '../../../constants/gridClasses';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
@@ -335,6 +335,34 @@ export const useGridFocus = (apiRef, props) => {
       }));
     }
   }, [apiRef]);
+  const handlePaginationModelChange = useEventcallback(() => {
+    const currentFocusedCell = gridFocusCellSelector(apiRef);
+    if (!currentFocusedCell) {
+      return;
+    }
+    const currentPage = getVisibleRows(apiRef, {
+      pagination: props.pagination,
+      paginationMode: props.paginationMode
+    });
+    const rowIsInCurrentPage = currentPage.rows.find(row => row.id === currentFocusedCell.id);
+    if (rowIsInCurrentPage) {
+      return;
+    }
+    const visibleColumns = gridVisibleColumnDefinitionsSelector(apiRef);
+    apiRef.current.setState(state => {
+      return _extends({}, state, {
+        tabIndex: {
+          cell: {
+            id: currentPage.rows[0].id,
+            field: visibleColumns[0].field
+          },
+          columnGroupHeader: null,
+          columnHeader: null,
+          columnHeaderFilter: null
+        }
+      });
+    });
+  });
   const focusApi = {
     setCellFocus,
     setColumnHeaderFocus,
@@ -363,4 +391,5 @@ export const useGridFocus = (apiRef, props) => {
   useGridApiEventHandler(apiRef, 'columnHeaderFocus', handleColumnHeaderFocus);
   useGridApiEventHandler(apiRef, 'columnGroupHeaderFocus', handleColumnGroupHeaderFocus);
   useGridApiEventHandler(apiRef, 'rowsSet', handleRowSet);
+  useGridApiEventHandler(apiRef, 'paginationModelChange', handlePaginationModelChange);
 };

package/hooks/features/pagination/useGridPagination.js

@@ -8,8 +8,8 @@ import { gridPaginationModelSelector } from './gridPaginationSelector';
 import { calculatePinnedRowsHeight } from '../rows/gridRowsUtils';
 import { getPageCount, noRowCountInServerMode, defaultPageSize, throwIfPageSizeExceedsTheLimit, getDefaultGridPaginationModel, getValidPage } from './gridPaginationUtils';
 export const paginationStateInitializer = (state, props) => {
-  var _props$paginationMode, _props$initialState, _props$initialState$p;
-  const paginationModel = _extends({}, getDefaultGridPaginationModel(props.autoPageSize), (_props$paginationMode = props.paginationModel) != null ? _props$paginationMode : (_props$initialState = props.initialState) == null ? void 0 : (_props$initialState$p = _props$initialState.pagination) == null ? void 0 : _props$initialState$p.paginationModel);
+  var _props$paginationMode, _props$initialState;
+  const paginationModel = _extends({}, getDefaultGridPaginationModel(props.autoPageSize), (_props$paginationMode = props.paginationModel) != null ? _props$paginationMode : (_props$initialState = props.initialState) == null || (_props$initialState = _props$initialState.pagination) == null ? void 0 : _props$initialState.paginationModel);
   throwIfPageSizeExceedsTheLimit(paginationModel.pageSize, props.signature);
   return _extends({}, state, {
     pagination: {
@@ -42,7 +42,7 @@ const mergeStateWithPaginationModel = (rowCount, signature, paginationModelProp)
  * @requires useGridDimensions (event) - can be after
  */
 export const useGridPagination = (apiRef, props) => {
-  var _props$initialState3, _props$initialState3$;
+  var _props$initialState3;
   const logger = useGridLogger(apiRef, 'useGridPagination');
   const visibleTopLevelRowCount = useGridSelector(apiRef, gridFilteredTopLevelRowCountSelector);
   const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
@@ -101,7 +101,7 @@ export const useGridPagination = (apiRef, props) => {
    * PRE-PROCESSING
    */
   const stateExportPreProcessing = React.useCallback((prevState, context) => {
-    var _props$initialState2, _props$initialState2$;
+    var _props$initialState2;
     const paginationModel = gridPaginationModelSelector(apiRef);
     const shouldExportPaginationModel =
     // Always export if the `exportOnlyDirtyModels` property is not activated
@@ -109,7 +109,7 @@ export const useGridPagination = (apiRef, props) => {
     // Always export if the `paginationModel` is controlled
     props.paginationModel != null ||
     // Always export if the `paginationModel` has been initialized
-    ((_props$initialState2 = props.initialState) == null ? void 0 : (_props$initialState2$ = _props$initialState2.pagination) == null ? void 0 : _props$initialState2$.paginationModel) != null ||
+    ((_props$initialState2 = props.initialState) == null || (_props$initialState2 = _props$initialState2.pagination) == null ? void 0 : _props$initialState2.paginationModel) != null ||
     // Export if `page` or `pageSize` is not equal to the default value
     paginationModel.page !== 0 && paginationModel.pageSize !== defaultPageSize(props.autoPageSize);
     if (!shouldExportPaginationModel) {
@@ -120,7 +120,7 @@ export const useGridPagination = (apiRef, props) => {
         paginationModel
       })
     });
-  }, [apiRef, props.paginationModel, (_props$initialState3 = props.initialState) == null ? void 0 : (_props$initialState3$ = _props$initialState3.pagination) == null ? void 0 : _props$initialState3$.paginationModel, props.autoPageSize]);
+  }, [apiRef, props.paginationModel, (_props$initialState3 = props.initialState) == null || (_props$initialState3 = _props$initialState3.pagination) == null ? void 0 : _props$initialState3.paginationModel, props.autoPageSize]);
   const stateRestorePreProcessing = React.useCallback((params, context) => {
     var _context$stateToResto, _context$stateToResto2, _props$rowCount2;
     const paginationModel = (_context$stateToResto = context.stateToRestore.pagination) != null && _context$stateToResto.paginationModel ? _extends({}, getDefaultGridPaginationModel(props.autoPageSize), (_context$stateToResto2 = context.stateToRestore.pagination) == null ? void 0 : _context$stateToResto2.paginationModel) : gridPaginationModelSelector(apiRef);

package/hooks/features/rows/gridRowsSelector.js

@@ -31,14 +31,14 @@ export const gridPinnedRowsSelector = createSelectorMemoized(gridAdditionalRowGr
   var _rawPinnedRows$bottom, _rawPinnedRows$top;
   const rawPinnedRows = additionalRowGroups == null ? void 0 : additionalRowGroups.pinnedRows;
   return {
-    bottom: rawPinnedRows == null ? void 0 : (_rawPinnedRows$bottom = rawPinnedRows.bottom) == null ? void 0 : _rawPinnedRows$bottom.map(rowEntry => {
+    bottom: rawPinnedRows == null || (_rawPinnedRows$bottom = rawPinnedRows.bottom) == null ? void 0 : _rawPinnedRows$bottom.map(rowEntry => {
       var _rowEntry$model;
       return {
         id: rowEntry.id,
         model: (_rowEntry$model = rowEntry.model) != null ? _rowEntry$model : {}
       };
     }),
-    top: rawPinnedRows == null ? void 0 : (_rawPinnedRows$top = rawPinnedRows.top) == null ? void 0 : _rawPinnedRows$top.map(rowEntry => {
+    top: rawPinnedRows == null || (_rawPinnedRows$top = rawPinnedRows.top) == null ? void 0 : _rawPinnedRows$top.map(rowEntry => {
       var _rowEntry$model2;
       return {
         id: rowEntry.id,
@@ -53,5 +53,5 @@ export const gridPinnedRowsSelector = createSelectorMemoized(gridAdditionalRowGr
  */
 export const gridPinnedRowsCountSelector = createSelector(gridPinnedRowsSelector, pinnedRows => {
   var _pinnedRows$top, _pinnedRows$bottom;
-  return ((pinnedRows == null ? void 0 : (_pinnedRows$top = pinnedRows.top) == null ? void 0 : _pinnedRows$top.length) || 0) + ((pinnedRows == null ? void 0 : (_pinnedRows$bottom = pinnedRows.bottom) == null ? void 0 : _pinnedRows$bottom.length) || 0);
+  return ((pinnedRows == null || (_pinnedRows$top = pinnedRows.top) == null ? void 0 : _pinnedRows$top.length) || 0) + ((pinnedRows == null || (_pinnedRows$bottom = pinnedRows.bottom) == null ? void 0 : _pinnedRows$bottom.length) || 0);
 });