@mui/x-data-grid 7.22.2 → 7.22.3

package/node/components/columnsManagement/GridColumnsManagement.js

@@ -12,6 +12,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _FormControlLabel = _interopRequireDefault(require("@mui/material/FormControlLabel"));
 var _styles = require("@mui/material/styles");
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
+var _InputBase = require("@mui/material/InputBase");
 var _gridColumnsSelector = require("../../hooks/features/columns/gridColumnsSelector");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
@@ -29,6 +31,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['columnsManagement'],
     header: ['columnsManagementHeader'],
+    searchInput: ['columnsManagementSearchInput'],
     footer: ['columnsManagementFooter'],
     row: ['columnsManagementRow']
   };
@@ -51,7 +54,8 @@ function GridColumnsManagement(props) {
     disableShowHideToggle = false,
     disableResetButton = false,
     toggleAllMode = 'all',
-    getTogglableColumns
+    getTogglableColumns,
+    searchInputProps
   } = props;
   const isResetDisabled = React.useMemo(() => (0, _utils.checkColumnVisibilityModelsSame)(columnVisibilityModel, initialColumnVisibilityModel), [columnVisibilityModel, initialColumnVisibilityModel]);
   const sortedColumns = React.useMemo(() => {
@@ -118,28 +122,52 @@ function GridColumnsManagement(props) {
     }
     return false;
   };
+  const handleSearchReset = React.useCallback(() => {
+    setSearchValue('');
+    searchInputRef.current.focus();
+  }, []);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnsManagementHeader, {
       className: classes.header,
       ownerState: rootProps,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTextField, (0, _extends2.default)({
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SearchInput, (0, _extends2.default)({
+        as: rootProps.slots.baseTextField,
+        ownerState: rootProps,
         placeholder: apiRef.current.getLocaleText('columnsManagementSearchTitle'),
         inputRef: searchInputRef,
+        className: classes.searchInput,
         value: searchValue,
         onChange: handleSearchValueChange,
         variant: "outlined",
         size: "small",
+        type: "search",
         InputProps: {
           startAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseInputAdornment, {
             position: "start",
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.quickFilterIcon, {})
           }),
-          sx: {
-            pl: 1.5
-          }
+          endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
+            "aria-label": apiRef.current.getLocaleText('columnsManagementDeleteIconLabel'),
+            size: "small",
+            sx: [searchValue ? {
+              visibility: 'visible'
+            } : {
+              visibility: 'hidden'
+            }],
+            tabIndex: -1,
+            onClick: handleSearchReset
+          }, rootProps.slotProps?.baseIconButton, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.quickFilterClearIcon, {
+              fontSize: "small"
+            })
+          }))
+        },
+        inputProps: {
+          'aria-label': apiRef.current.getLocaleText('columnsManagementSearchTitle')
         },
+        autoComplete: "off",
         fullWidth: true
-      }, rootProps.slotProps?.baseTextField))
+      }, rootProps.slotProps?.baseTextField, searchInputProps))
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridColumnsManagementBody, {
       className: classes.root,
       ownerState: rootProps,
@@ -214,6 +242,7 @@ process.env.NODE_ENV !== "production" ? GridColumnsManagement.propTypes = {
    * @returns {GridColDef['field'][]} The list of togglable columns' field names.
    */
   getTogglableColumns: _propTypes.default.func,
+  searchInputProps: _propTypes.default.object,
   searchPredicate: _propTypes.default.func,
   sort: _propTypes.default.oneOf(['asc', 'desc']),
   /**
@@ -248,6 +277,24 @@ const GridColumnsManagementHeader = (0, _styles.styled)('div', {
 }) => ({
   padding: theme.spacing(1.5, 3)
 }));
+const SearchInput = (0, _styles.styled)(_TextField.default, {
+  name: 'MuiDataGrid',
+  slot: 'ColumnsManagementSearchInput',
+  overridesResolver: (props, styles) => styles.columnsManagementSearchInput
+})(({
+  theme
+}) => ({
+  [`& .${_InputBase.inputBaseClasses.root}`]: {
+    padding: theme.spacing(0, 1.5, 0, 1.5)
+  },
+  [`& .${_InputBase.inputBaseClasses.input}::-webkit-search-decoration,
+  & .${_InputBase.inputBaseClasses.input}::-webkit-search-cancel-button,
+  & .${_InputBase.inputBaseClasses.input}::-webkit-search-results-button,
+  & .${_InputBase.inputBaseClasses.input}::-webkit-search-results-decoration`]: {
+    /* clears the 'X' icon from Chrome */
+    display: 'none'
+  }
+}));
 const GridColumnsManagementFooter = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'ColumnsManagementFooter',

package/node/components/toolbar/GridToolbar.js

@@ -22,14 +22,15 @@ const _excluded = ["className", "csvOptions", "printOptions", "excelOptions", "s
 const GridToolbar = exports.GridToolbar = /*#__PURE__*/React.forwardRef(function GridToolbar(props, ref) {
   // TODO v7: think about where export option should be passed.
   // from slotProps={{ toolbarExport: { ...exportOption } }} seems to be more appropriate
-  const {
+  const _ref = props,
+    {
       csvOptions,
       printOptions,
       excelOptions,
       showQuickFilter = false,
       quickFilterProps = {}
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    } = _ref,
+    other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   if (rootProps.disableColumnFilter && rootProps.disableColumnSelector && rootProps.disableDensitySelector && !showQuickFilter) {
     return null;
@@ -40,7 +41,7 @@ const GridToolbar = exports.GridToolbar = /*#__PURE__*/React.forwardRef(function
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarColumnsButton.GridToolbarColumnsButton, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarFilterButton.GridToolbarFilterButton, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarDensitySelector.GridToolbarDensitySelector, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarExport.GridToolbarExport, {
       csvOptions: csvOptions,
       printOptions: printOptions
-      // TODO: remove the reference to excelOptions in community package
+      // @ts-ignore
       ,
       excelOptions: excelOptions
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -55,6 +56,8 @@ process.env.NODE_ENV !== "production" ? GridToolbar.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  csvOptions: _propTypes.default.object,
+  printOptions: _propTypes.default.object,
   /**
    * Props passed to the quick filter component.
    */
@@ -64,5 +67,10 @@ process.env.NODE_ENV !== "production" ? GridToolbar.propTypes = {
    * @default false
    */
   showQuickFilter: _propTypes.default.bool,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: _propTypes.default.object,
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;

package/node/components/toolbar/GridToolbarExport.js

@@ -92,12 +92,13 @@ process.env.NODE_ENV !== "production" ? GridPrintExportMenuItem.propTypes = {
   })
 } : void 0;
 const GridToolbarExport = exports.GridToolbarExport = /*#__PURE__*/React.forwardRef(function GridToolbarExport(props, ref) {
-  const {
+  const _ref = props,
+    {
       csvOptions = {},
       printOptions = {},
       excelOptions
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded3);
+    } = _ref,
+    other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded3);
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const preProcessedButtons = apiRef.current.unstable_applyPipeProcessors('exportMenu', [], {
     excelOptions,

package/node/constants/gridClasses.js

@@ -9,4 +9,4 @@ var _utils = require("@mui/utils");
 function getDataGridUtilityClass(slot) {
   return (0, _utils.unstable_generateUtilityClass)('MuiDataGrid', slot);
 }
-const gridClasses = exports.gridClasses = (0, _utils.unstable_generateUtilityClasses)('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeader--lastUnpinned', 'columnHeader--siblingFocused', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hasSkeletonLoadingOverlay', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--borderBottom', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
+const gridClasses = exports.gridClasses = (0, _utils.unstable_generateUtilityClasses)('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeader--lastUnpinned', 'columnHeader--siblingFocused', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hasSkeletonLoadingOverlay', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--borderBottom', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

package/node/constants/localeTextConstants.js

@@ -38,6 +38,7 @@ const GRID_DEFAULT_LOCALE_TEXT = exports.GRID_DEFAULT_LOCALE_TEXT = {
   columnsManagementNoColumns: 'No columns',
   columnsManagementShowHideAllText: 'Show/Hide All',
   columnsManagementReset: 'Reset',
+  columnsManagementDeleteIconLabel: 'Clear',
   // Filter panel text
   filterPanelAddFilter: 'Add filter',
   filterPanelRemoveAll: 'Remove all',

package/node/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -299,7 +299,7 @@ const useGridColumnHeaders = props => {
         pinnedPosition: pinnedPosition,
         style: style,
         indexInSection: indexInSection,
-        sectionLength: rowStructure.length,
+        sectionLength: visibleColumnGroupHeader.length,
         gridHasFiller: gridHasFiller
       }, index);
     });

package/node/hooks/features/export/useGridCsvExport.js

@@ -12,7 +12,7 @@ var _exportAs = require("../../../utils/exportAs");
 var _csvSerializer = require("./serializers/csvSerializer");
 var _utils = require("./utils");
 var _pipeProcessing = require("../../core/pipeProcessing");
-var _GridToolbarExport = require("../../../components/toolbar/GridToolbarExport");
+var _toolbar = require("../../../components/toolbar");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @requires useGridColumns (state)
@@ -71,7 +71,7 @@ const useGridCsvExport = (apiRef, props) => {
       return initialValue;
     }
     return [...initialValue, {
-      component: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarExport.GridCsvExportMenuItem, {
+      component: /*#__PURE__*/(0, _jsxRuntime.jsx)(_toolbar.GridCsvExportMenuItem, {
         options: options.csvOptions
       }),
       componentName: 'csvExport'

package/node/hooks/features/export/useGridPrintExport.js

@@ -19,7 +19,7 @@ var _gridRowsUtils = require("../rows/gridRowsUtils");
 var _utils2 = require("./utils");
 var _useGridPaginationModel = require("../pagination/useGridPaginationModel");
 var _pipeProcessing = require("../../core/pipeProcessing");
-var _GridToolbarExport = require("../../../components/toolbar/GridToolbarExport");
+var _toolbar = require("../../../components/toolbar");
 var _gridColumnsUtils = require("../columns/gridColumnsUtils");
 var _gridCheckboxSelectionColDef = require("../../../colDef/gridCheckboxSelectionColDef");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -288,7 +288,7 @@ const useGridPrintExport = (apiRef, props) => {
       return initialValue;
     }
     return [...initialValue, {
-      component: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarExport.GridPrintExportMenuItem, {
+      component: /*#__PURE__*/(0, _jsxRuntime.jsx)(_toolbar.GridPrintExportMenuItem, {
         options: options.printOptions
       }),
       componentName: 'printExport'

package/node/hooks/features/pagination/useGridPaginationModel.js

@@ -84,7 +84,7 @@ const useGridPaginationModel = (apiRef, props) => {
       pagination: (0, _extends2.default)({}, state.pagination, {
         paginationModel: getDerivedPaginationModel(state.pagination, props.signature, paginationModel)
       })
-    }));
+    }), 'setPaginationModel');
   }, [apiRef, logger, props.signature]);
   const paginationModelApi = {
     setPage,
@@ -122,7 +122,7 @@ const useGridPaginationModel = (apiRef, props) => {
       pagination: (0, _extends2.default)({}, state.pagination, {
         paginationModel: getDerivedPaginationModel(state.pagination, props.signature, paginationModel)
       })
-    }));
+    }), 'stateRestorePreProcessing');
     return params;
   }, [apiRef, props.autoPageSize, props.signature]);
   (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'exportState', stateExportPreProcessing);

package/node/hooks/features/rows/gridRowsUtils.js

@@ -8,12 +8,9 @@ exports.buildRootGroup = exports.GRID_ROOT_GROUP_ID = exports.GRID_ID_AUTOGENERA
 exports.calculatePinnedRowsHeight = calculatePinnedRowsHeight;
 exports.checkGridRowIdIsValid = checkGridRowIdIsValid;
 exports.computeRowsUpdates = computeRowsUpdates;
-exports.createRowsInternalCache = void 0;
-exports.getMinimalContentHeight = getMinimalContentHeight;
-exports.updateCacheWithNewRows = exports.rowHeightWarning = exports.isAutogeneratedRowNode = exports.isAutogeneratedRow = exports.getValidRowHeight = exports.getTreeNodeDescendants = exports.getTopLevelRowCount = exports.getRowsStateFromCache = exports.getRowIdFromRowModel = exports.getRowHeightWarning = void 0;
+exports.updateCacheWithNewRows = exports.rowHeightWarning = exports.minimalContentHeight = exports.isAutogeneratedRowNode = exports.isAutogeneratedRow = exports.getValidRowHeight = exports.getTreeNodeDescendants = exports.getTopLevelRowCount = exports.getRowsStateFromCache = exports.getRowIdFromRowModel = exports.getRowHeightWarning = exports.createRowsInternalCache = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _gridRowsSelector = require("./gridRowsSelector");
-var _gridDimensionsSelectors = require("../dimensions/gridDimensionsSelectors");
 const GRID_ROOT_GROUP_ID = exports.GRID_ROOT_GROUP_ID = `auto-generated-group-node-root`;
 const GRID_ID_AUTOGENERATED = exports.GRID_ID_AUTOGENERATED = Symbol('mui.id_autogenerated');
 const buildRootGroup = () => ({
@@ -307,10 +304,7 @@ function calculatePinnedRowsHeight(apiRef) {
     bottom: bottomPinnedRowsHeight
   };
 }
-function getMinimalContentHeight(apiRef) {
-  const dimensions = (0, _gridDimensionsSelectors.gridDimensionsSelector)(apiRef.current.state);
-  return `var(--DataGrid-overlayHeight, ${2 * dimensions.rowHeight}px)`;
-}
+const minimalContentHeight = exports.minimalContentHeight = 'var(--DataGrid-overlayHeight, calc(var(--height) * 2))';
 function computeRowsUpdates(apiRef, updates, getRowId) {
   const nonPinnedRowsUpdates = [];
   updates.forEach(update => {

package/node/hooks/features/virtualization/useGridVirtualScroller.js

@@ -32,11 +32,11 @@ var _utils3 = require("../../../utils/utils");
 var _gridRowSelectionSelector = require("../rowSelection/gridRowSelectionSelector");
 var _gridRowsMetaSelector = require("../rows/gridRowsMetaSelector");
 var _gridColumnsUtils = require("../columns/gridColumnsUtils");
-var _gridRowsUtils = require("../rows/gridRowsUtils");
 var _gridVirtualizationSelectors = require("./gridVirtualizationSelectors");
 var _useGridVirtualization = require("./useGridVirtualization");
 var _gridRowSpanningSelectors = require("../rows/gridRowSpanningSelectors");
 var _gridListViewSelectors = require("../listView/gridListViewSelectors");
+var _gridRowsUtils = require("../rows/gridRowsUtils");
 var _jsxRuntime = require("react/jsx-runtime");
 const MINIMUM_COLUMN_WIDTH = 50;
 var ScrollDirection = /*#__PURE__*/function (ScrollDirection) {
@@ -392,11 +392,11 @@ const useGridVirtualScroller = () => {
       flexBasis: contentHeight,
       flexShrink: 0
     };
-    if (rootProps.autoHeight && currentPage.rows.length === 0) {
-      size.flexBasis = (0, _gridRowsUtils.getMinimalContentHeight)(apiRef); // Give room to show the overlay when there no rows.
+    if (size.flexBasis === 0) {
+      size.flexBasis = _gridRowsUtils.minimalContentHeight; // Give room to show the overlay when there no rows.
     }
     return size;
-  }, [apiRef, columnsTotalWidth, contentHeight, needsHorizontalScrollbar, rootProps.autoHeight, currentPage.rows.length]);
+  }, [columnsTotalWidth, contentHeight, needsHorizontalScrollbar]);
   React.useEffect(() => {
     apiRef.current.publishEvent('virtualScrollerContentSizeChange');
   }, [apiRef, contentSize]);

package/node/hooks/utils/useGridSelector.js

@@ -4,7 +4,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useGridSelectorV8 = exports.useGridSelector = exports.objectShallowCompare = void 0;
+exports.useGridSelectorV8 = exports.useGridSelector = exports.objectShallowCompare = exports.argsEqual = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _fastObjectShallowCompare = require("@mui/x-internals/fastObjectShallowCompare");
 var _warning = require("@mui/x-internals/warning");
@@ -30,10 +30,27 @@ function applySelectorV8(apiRef, selector, args, instanceId) {
 }
 const defaultCompare = Object.is;
 const objectShallowCompare = exports.objectShallowCompare = _fastObjectShallowCompare.fastObjectShallowCompare;
+const arrayShallowCompare = (a, b) => {
+  if (a === b) {
+    return true;
+  }
+  return a.length === b.length && a.every((v, i) => v === b[i]);
+};
+const argsEqual = (prev, curr) => {
+  let fn = Object.is;
+  if (curr instanceof Array) {
+    fn = arrayShallowCompare;
+  } else if (curr instanceof Object) {
+    fn = objectShallowCompare;
+  }
+  return fn(prev, curr);
+};
+exports.argsEqual = argsEqual;
 const createRefs = () => ({
   state: null,
   equals: null,
-  selector: null
+  selector: null,
+  args: null
 });
 
 // TODO v8: Remove this function
@@ -79,9 +96,18 @@ const useGridSelectorV8 = (apiRef, selector, args = undefined, equals = defaultC
   refs.current.state = state;
   refs.current.equals = equals;
   refs.current.selector = selector;
+  const prevArgs = refs.current.args;
+  refs.current.args = args;
+  if (didInit && !argsEqual(prevArgs, args)) {
+    const newState = applySelectorV8(apiRef, refs.current.selector, refs.current.args, apiRef.current.instanceId);
+    if (!refs.current.equals(refs.current.state, newState)) {
+      refs.current.state = newState;
+      setState(newState);
+    }
+  }
   (0, _useOnMount.useOnMount)(() => {
     return apiRef.current.store.subscribe(() => {
-      const newState = applySelectorV8(apiRef, refs.current.selector, args, apiRef.current.instanceId);
+      const newState = applySelectorV8(apiRef, refs.current.selector, refs.current.args, apiRef.current.instanceId);
       if (!refs.current.equals(refs.current.state, newState)) {
         refs.current.state = newState;
         setState(newState);

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.22.2
+ * @mui/x-data-grid v7.22.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/locales/arSD.js

@@ -40,6 +40,7 @@ const arSDGrid = {
   // columnsManagementNoColumns: 'No columns',
   // columnsManagementShowHideAllText: 'Show/Hide All',
   // columnsManagementReset: 'Reset',
+  // columnsManagementDeleteIconLabel: 'Clear',
 
   // Filter panel text
   filterPanelAddFilter: 'إضافة مرشِح',

package/node/locales/beBY.js

@@ -54,6 +54,7 @@ const beBYGrid = {
   // columnsManagementNoColumns: 'No columns',
   // columnsManagementShowHideAllText: 'Show/Hide All',
   // columnsManagementReset: 'Reset',
+  // columnsManagementDeleteIconLabel: 'Clear',
 
   // Filter panel text
   filterPanelAddFilter: 'Дадаць фільтр',

package/node/locales/bgBG.js

@@ -40,6 +40,8 @@ const bgBGGrid = {
   columnsManagementNoColumns: 'Няма колони',
   columnsManagementShowHideAllText: 'Покажи/Скрий Всичко',
   columnsManagementReset: 'Нулирай',
+  // columnsManagementDeleteIconLabel: 'Clear',
+
   // Filter panel text
   filterPanelAddFilter: 'Добави Филтър',
   filterPanelRemoveAll: 'Премахни всички',

package/node/locales/csCZ.js

@@ -48,6 +48,8 @@ const csCZGrid = {
   columnsManagementNoColumns: 'Žádné sloupce',
   columnsManagementShowHideAllText: 'Zobrazit/skrýt vše',
   columnsManagementReset: 'Resetovat',
+  // columnsManagementDeleteIconLabel: 'Clear',
+
   // Filter panel text
   filterPanelAddFilter: 'Přidat filtr',
   filterPanelRemoveAll: 'Odstranit vše',

package/node/locales/daDK.js

@@ -40,6 +40,8 @@ const daDKGrid = {
   columnsManagementNoColumns: 'Ingen søjler',
   columnsManagementShowHideAllText: 'Vis/Skjul Alle',
   columnsManagementReset: 'Nulstil',
+  // columnsManagementDeleteIconLabel: 'Clear',
+
   // Filter panel text
   filterPanelAddFilter: 'Tilføj filter',
   filterPanelRemoveAll: 'Fjern alle',

package/node/locales/deDE.js

@@ -40,6 +40,8 @@ const deDEGrid = {
   columnsManagementNoColumns: 'Keine Spalten',
   columnsManagementShowHideAllText: 'Alle anzeigen/verbergen',
   columnsManagementReset: 'Zurücksetzen',
+  // columnsManagementDeleteIconLabel: 'Clear',
+
   // Filter panel text
   filterPanelAddFilter: 'Filter hinzufügen',
   filterPanelRemoveAll: 'Alle entfernen',

package/node/locales/elGR.js

@@ -40,6 +40,7 @@ const elGRGrid = {
   // columnsManagementNoColumns: 'No columns',
   // columnsManagementShowHideAllText: 'Show/Hide All',
   // columnsManagementReset: 'Reset',
+  // columnsManagementDeleteIconLabel: 'Clear',
 
   // Filter panel text
   filterPanelAddFilter: 'Προσθήκη φίλτρου',

package/node/locales/esES.js

@@ -40,6 +40,8 @@ const esESGrid = {
   columnsManagementNoColumns: 'Sin columnas',
   columnsManagementShowHideAllText: 'Mostrar/Ocultar todas',
   columnsManagementReset: 'Restablecer',
+  // columnsManagementDeleteIconLabel: 'Clear',
+
   // Filter panel text
   filterPanelAddFilter: 'Agregar filtro',
   filterPanelRemoveAll: 'Remover todos',
@@ -53,9 +55,9 @@ const esESGrid = {
   filterPanelInputPlaceholder: 'Valor de filtro',
   // Filter operators text
   filterOperatorContains: 'contiene',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: 'no contiene',
   filterOperatorEquals: 'es igual',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: 'es diferente a',
   filterOperatorStartsWith: 'comienza con',
   filterOperatorEndsWith: 'termina con',
   filterOperatorIs: 'es',
@@ -75,9 +77,9 @@ const esESGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'Contiene',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: 'No contiene',
   headerFilterOperatorEquals: 'Es igual a',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: 'Es diferente a',
   headerFilterOperatorStartsWith: 'Comienza con',
   headerFilterOperatorEndsWith: 'Termina con',
   headerFilterOperatorIs: 'Es',

package/node/locales/faIR.js

@@ -40,6 +40,8 @@ const faIRGrid = {
   columnsManagementNoColumns: 'بدون سطر',
   columnsManagementShowHideAllText: 'نمایش/مخفی کردن همه',
   columnsManagementReset: 'بازنشانی',
+  // columnsManagementDeleteIconLabel: 'Clear',
+
   // Filter panel text
   filterPanelAddFilter: 'افزودن فیلتر',
   filterPanelRemoveAll: 'حذف همه',

package/node/locales/fiFI.js

@@ -40,6 +40,8 @@ const fiFIGrid = {
   columnsManagementNoColumns: 'Ei sarakkeita näytettäväksi',
   columnsManagementShowHideAllText: 'Näytä/Piilota kaikki',
   columnsManagementReset: 'Palauta',
+  // columnsManagementDeleteIconLabel: 'Clear',
+
   // Filter panel text
   filterPanelAddFilter: 'Lisää suodatin',
   filterPanelRemoveAll: 'Poista kaikki',

package/node/locales/frFR.js

@@ -40,6 +40,8 @@ const frFRGrid = {
   columnsManagementNoColumns: 'Pas de colonnes',
   columnsManagementShowHideAllText: 'Afficher/masquer toutes',
   columnsManagementReset: 'Réinitialiser',
+  // columnsManagementDeleteIconLabel: 'Clear',
+
   // Filter panel text
   filterPanelAddFilter: 'Ajouter un filtre',
   filterPanelRemoveAll: 'Tout supprimer',

package/node/locales/heIL.js

@@ -40,6 +40,8 @@ const heILGrid = {
   columnsManagementNoColumns: 'אין עמודות',
   columnsManagementShowHideAllText: 'הצג/הסתר הכל',
   columnsManagementReset: 'אתחול',
+  // columnsManagementDeleteIconLabel: 'Clear',
+
   // Filter panel text
   filterPanelAddFilter: 'הוסף מסנן',
   filterPanelRemoveAll: 'מחק הכל',

package/node/locales/hrHR.js

@@ -48,6 +48,8 @@ const hrHRGrid = {
   columnsManagementNoColumns: 'Nema stupaca',
   columnsManagementShowHideAllText: 'Prikaži/Sakrij sve',
   columnsManagementReset: 'Ponovno namjesti',
+  // columnsManagementDeleteIconLabel: 'Clear',
+
   // Filter panel text
   filterPanelAddFilter: 'Dodaj filter',
   filterPanelRemoveAll: 'Ukloni sve',

package/node/locales/huHU.js

@@ -40,6 +40,8 @@ const huHUGrid = {
   columnsManagementNoColumns: 'Nincsenek oszlopok',
   columnsManagementShowHideAllText: 'Összes',
   columnsManagementReset: 'Visszavon',
+  // columnsManagementDeleteIconLabel: 'Clear',
+
   // Filter panel text
   filterPanelAddFilter: 'Szűrő hozzáadása',
   filterPanelRemoveAll: 'Összes törlése',

package/node/locales/isIS.js

@@ -40,6 +40,7 @@ const isISGrid = {
   // columnsManagementNoColumns: 'No columns',
   // columnsManagementShowHideAllText: 'Show/Hide All',
   // columnsManagementReset: 'Reset',
+  // columnsManagementDeleteIconLabel: 'Clear',
 
   // Filter panel text
   filterPanelAddFilter: 'Bæta síu',

package/node/locales/itIT.js

@@ -40,6 +40,8 @@ const itITGrid = {
   columnsManagementNoColumns: 'Nessuna colonna',
   columnsManagementShowHideAllText: 'Mostra/Nascondi Tutto',
   columnsManagementReset: 'Resetta',
+  // columnsManagementDeleteIconLabel: 'Clear',
+
   // Filter panel text
   filterPanelAddFilter: 'Aggiungi un filtro',
   filterPanelRemoveAll: 'Rimuovi filtri',

package/node/locales/jaJP.js

@@ -40,6 +40,8 @@ const jaJPGrid = {
   columnsManagementNoColumns: 'カラムなし',
   columnsManagementShowHideAllText: 'すべて表示/非表示',
   columnsManagementReset: 'リセット',
+  // columnsManagementDeleteIconLabel: 'Clear',
+
   // Filter panel text
   filterPanelAddFilter: 'フィルター追加',
   filterPanelRemoveAll: 'すべて削除',

package/node/locales/koKR.js

@@ -40,6 +40,7 @@ const koKRGrid = {
   // columnsManagementNoColumns: 'No columns',
   // columnsManagementShowHideAllText: 'Show/Hide All',
   // columnsManagementReset: 'Reset',
+  // columnsManagementDeleteIconLabel: 'Clear',
 
   // Filter panel text
   filterPanelAddFilter: '필터 추가',

package/node/locales/nbNO.js

@@ -40,6 +40,8 @@ const nbNOGrid = {
   columnsManagementNoColumns: 'Ingen kolonner',
   columnsManagementShowHideAllText: 'Vis/skjul alle',
   columnsManagementReset: 'Nullstill',
+  // columnsManagementDeleteIconLabel: 'Clear',
+
   // Filter panel text
   filterPanelAddFilter: 'Legg til filter',
   filterPanelRemoveAll: 'Fjern alle',

package/node/locales/nlNL.js

@@ -40,6 +40,8 @@ const nlNLGrid = {
   columnsManagementNoColumns: 'Geen kolommen',
   columnsManagementShowHideAllText: 'Toon/Verberg Alle',
   columnsManagementReset: 'Reset',
+  // columnsManagementDeleteIconLabel: 'Clear',
+
   // Filter panel text
   filterPanelAddFilter: 'Filter toevoegen',
   filterPanelRemoveAll: 'Alles verwijderen',