@mui/x-data-grid 7.22.2 → 7.22.3

package/locales/zhCN.js

@@ -34,6 +34,8 @@ const zhCNGrid = {
   columnsManagementNoColumns: '没有列',
   columnsManagementShowHideAllText: '显示/隐藏所有',
   columnsManagementReset: '重置',
+  // columnsManagementDeleteIconLabel: 'Clear',
+
   // Filter panel text
   filterPanelAddFilter: '添加筛选器',
   filterPanelRemoveAll: '清除全部',
@@ -47,9 +49,9 @@ const zhCNGrid = {
   filterPanelInputPlaceholder: '筛选值',
   // Filter operators text
   filterOperatorContains: '包含',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: '不包含',
   filterOperatorEquals: '等于',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: '不等于',
   filterOperatorStartsWith: '开始于',
   filterOperatorEndsWith: '结束于',
   filterOperatorIs: '是',
@@ -69,9 +71,9 @@ const zhCNGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: '包含',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: '不包含',
   headerFilterOperatorEquals: '等于',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: '不等于',
   headerFilterOperatorStartsWith: '开始于',
   headerFilterOperatorEndsWith: '结束于',
   headerFilterOperatorIs: '是',

package/locales/zhHK.js

@@ -34,6 +34,7 @@ const zhHKGrid = {
   // columnsManagementNoColumns: 'No columns',
   // columnsManagementShowHideAllText: 'Show/Hide All',
   // columnsManagementReset: 'Reset',
+  // columnsManagementDeleteIconLabel: 'Clear',
 
   // Filter panel text
   filterPanelAddFilter: '新增過濾器',

package/locales/zhTW.js

@@ -34,6 +34,7 @@ const zhTWGrid = {
   // columnsManagementNoColumns: 'No columns',
   // columnsManagementShowHideAllText: 'Show/Hide All',
   // columnsManagementReset: 'Reset',
+  // columnsManagementDeleteIconLabel: 'Clear',
 
   // Filter panel text
   filterPanelAddFilter: '增加篩選器',

package/models/api/gridLocaleTextApi.d.ts

@@ -35,6 +35,7 @@ export interface GridLocaleText {
     columnsManagementNoColumns: string;
     columnsManagementShowHideAllText: string;
     columnsManagementReset: string;
+    columnsManagementDeleteIconLabel: string;
     filterPanelAddFilter: React.ReactNode;
     filterPanelRemoveAll: React.ReactNode;
     filterPanelDeleteIconLabel: string;

package/models/props/DataGridProps.d.ts

@@ -613,7 +613,7 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
      * @param {GridPaginationModel} model Updated pagination model.
      * @param {GridCallbackDetails} details Additional details for this callback.
      */
-    onPaginationModelChange?: (model: GridPaginationModel, details: GridCallbackDetails) => void;
+    onPaginationModelChange?: (model: GridPaginationModel, details: GridCallbackDetails<'pagination'>) => void;
     /**
      * Callback fired when the row count has changed.
      * @param {number} count Updated row count.

package/modern/components/GridDetailPanels.js

@@ -1,4 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export function GridDetailPanels(_) {
   return null;
 }

package/modern/components/GridPinnedRows.js

@@ -1,4 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export function GridPinnedRows(_) {
   return null;
 }

package/modern/components/GridRow.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "pinnedColumns", "offsetTop", "offsetLeft", "dimensions", "renderContext", "focusedColumnIndex", "isFirstVisible", "isLastVisible", "isNotVisible", "showBottomBorder", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
+const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "pinnedColumns", "offsetTop", "offsetLeft", "dimensions", "renderContext", "focusedColumnIndex", "isFirstVisible", "isLastVisible", "isNotVisible", "showBottomBorder", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';

package/modern/components/base/GridOverlays.js

@@ -4,12 +4,11 @@ import PropTypes from 'prop-types';
 import { styled } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
 import clsx from 'clsx';
+import { minimalContentHeight } from "../../hooks/features/rows/gridRowsUtils.js";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { gridDimensionsSelector } from "../../hooks/features/dimensions/index.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
-import { useGridVisibleRows } from "../../hooks/utils/useGridVisibleRows.js";
-import { getMinimalContentHeight } from "../../hooks/features/rows/gridRowsUtils.js";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const GridOverlayWrapperRoot = styled('div', {
@@ -26,6 +25,7 @@ loadingOverlayVariant !== 'skeleton' ? {
   position: 'sticky',
   // To stay in place while scrolling
   top: 'var(--DataGrid-headersTotalHeight)',
+  // TODO: take pinned rows into account
   left: 0,
   width: 0,
   // To stay above the content instead of shifting it down
@@ -53,11 +53,10 @@ const useUtilityClasses = ownerState => {
 function GridOverlayWrapper(props) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
-  const currentPage = useGridVisibleRows(apiRef, rootProps);
   const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
-  let height = dimensions.viewportOuterSize.height - dimensions.topContainerHeight - dimensions.bottomContainerHeight - (dimensions.hasScrollX ? dimensions.scrollbarSize : 0);
-  if (rootProps.autoHeight && currentPage.rows.length === 0 || height === 0) {
-    height = getMinimalContentHeight(apiRef);
+  let height = Math.max(dimensions.viewportOuterSize.height - dimensions.topContainerHeight - dimensions.bottomContainerHeight - (dimensions.hasScrollX ? dimensions.scrollbarSize : 0), 0);
+  if (height === 0) {
+    height = minimalContentHeight;
   }
   const classes = useUtilityClasses(_extends({}, props, {
     classes: rootProps.classes

package/modern/components/cell/GridCell.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["column", "rowId", "editCellState", "align", "children", "colIndex", "width", "className", "style", "gridHasScrollX", "colSpan", "disableDragEvents", "isNotVisible", "pinnedOffset", "pinnedPosition", "sectionIndex", "sectionLength", "gridHasFiller", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
+const _excluded = ["column", "rowId", "editCellState", "align", "children", "colIndex", "width", "className", "style", "colSpan", "disableDragEvents", "isNotVisible", "pinnedOffset", "pinnedPosition", "sectionIndex", "sectionLength", "gridHasFiller", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
   _excluded2 = ["changeReason", "unstable_updateValueOnRender"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -342,7 +342,6 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   align: PropTypes.oneOf(['center', 'left', 'right']).isRequired,
-  className: PropTypes.string,
   colIndex: PropTypes.number.isRequired,
   colSpan: PropTypes.number,
   column: PropTypes.object.isRequired,
@@ -355,13 +354,6 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
   }),
   gridHasFiller: PropTypes.bool.isRequired,
   isNotVisible: PropTypes.bool.isRequired,
-  onClick: PropTypes.func,
-  onDoubleClick: PropTypes.func,
-  onDragEnter: PropTypes.func,
-  onDragOver: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  onMouseDown: PropTypes.func,
-  onMouseUp: PropTypes.func,
   pinnedOffset: PropTypes.number.isRequired,
   pinnedPosition: PropTypes.oneOf([0, 1, 2, 3]).isRequired,
   rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,

package/modern/components/cell/GridEditInputCell.js

@@ -2,7 +2,6 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "isValidating", "debounceMs", "isProcessingProps", "onValueChange"];
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import { styled } from '@mui/material/styles';
 import InputBase from '@mui/material/InputBase';
@@ -94,71 +93,5 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     }) : undefined
   }, other));
 });
-process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * GridApi that let you manipulate the grid.
-   */
-  api: PropTypes.object.isRequired,
-  /**
-   * The mode of the cell.
-   */
-  cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
-  changeReason: PropTypes.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']),
-  /**
-   * The column of the row that the current cell belongs to.
-   */
-  colDef: PropTypes.object.isRequired,
-  debounceMs: PropTypes.number,
-  /**
-   * The column field of the cell that triggered the event.
-   */
-  field: PropTypes.string.isRequired,
-  /**
-   * The cell value formatted with the column valueFormatter.
-   */
-  formattedValue: PropTypes.any,
-  /**
-   * If true, the cell is the active element.
-   */
-  hasFocus: PropTypes.bool.isRequired,
-  /**
-   * The grid row id.
-   */
-  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-  /**
-   * If true, the cell is editable.
-   */
-  isEditable: PropTypes.bool,
-  isProcessingProps: PropTypes.bool,
-  isValidating: PropTypes.bool,
-  /**
-   * Callback called when the value is changed by the user.
-   * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
-   * @param {Date | null} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
-   * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
-   */
-  onValueChange: PropTypes.func,
-  /**
-   * The row model of the row that the current cell belongs to.
-   */
-  row: PropTypes.any.isRequired,
-  /**
-   * The node of the row that the current cell belongs to.
-   */
-  rowNode: PropTypes.object.isRequired,
-  /**
-   * the tabIndex value.
-   */
-  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
-  /**
-   * The cell value.
-   * If the column has `valueGetter`, use `params.row` to directly access the fields.
-   */
-  value: PropTypes.any
-} : void 0;
 export { GridEditInputCell };
 export const renderEditInputCell = params => /*#__PURE__*/_jsx(GridEditInputCell, _extends({}, params));

package/modern/components/columnsManagement/GridColumnsManagement.js

@@ -5,6 +5,8 @@ import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import { styled } from '@mui/material/styles';
+import TextField from '@mui/material/TextField';
+import { inputBaseClasses } from '@mui/material/InputBase';
 import { gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector } from "../../hooks/features/columns/gridColumnsSelector.js";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
@@ -20,6 +22,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['columnsManagement'],
     header: ['columnsManagementHeader'],
+    searchInput: ['columnsManagementSearchInput'],
     footer: ['columnsManagementFooter'],
     row: ['columnsManagementRow']
   };
@@ -42,7 +45,8 @@ function GridColumnsManagement(props) {
     disableShowHideToggle = false,
     disableResetButton = false,
     toggleAllMode = 'all',
-    getTogglableColumns
+    getTogglableColumns,
+    searchInputProps
   } = props;
   const isResetDisabled = React.useMemo(() => checkColumnVisibilityModelsSame(columnVisibilityModel, initialColumnVisibilityModel), [columnVisibilityModel, initialColumnVisibilityModel]);
   const sortedColumns = React.useMemo(() => {
@@ -109,28 +113,52 @@ function GridColumnsManagement(props) {
     }
     return false;
   };
+  const handleSearchReset = React.useCallback(() => {
+    setSearchValue('');
+    searchInputRef.current.focus();
+  }, []);
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(GridColumnsManagementHeader, {
       className: classes.header,
       ownerState: rootProps,
-      children: /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({
+      children: /*#__PURE__*/_jsx(SearchInput, _extends({
+        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__*/_jsx(rootProps.slots.baseInputAdornment, {
             position: "start",
             children: /*#__PURE__*/_jsx(rootProps.slots.quickFilterIcon, {})
           }),
-          sx: {
-            pl: 1.5
-          }
+          endAdornment: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
+            "aria-label": apiRef.current.getLocaleText('columnsManagementDeleteIconLabel'),
+            size: "small",
+            sx: [searchValue ? {
+              visibility: 'visible'
+            } : {
+              visibility: 'hidden'
+            }],
+            tabIndex: -1,
+            onClick: handleSearchReset
+          }, rootProps.slotProps?.baseIconButton, {
+            children: /*#__PURE__*/_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__*/_jsxs(GridColumnsManagementBody, {
       className: classes.root,
       ownerState: rootProps,
@@ -205,6 +233,7 @@ process.env.NODE_ENV !== "production" ? GridColumnsManagement.propTypes = {
    * @returns {GridColDef['field'][]} The list of togglable columns' field names.
    */
   getTogglableColumns: PropTypes.func,
+  searchInputProps: PropTypes.object,
   searchPredicate: PropTypes.func,
   sort: PropTypes.oneOf(['asc', 'desc']),
   /**
@@ -239,6 +268,24 @@ const GridColumnsManagementHeader = styled('div', {
 }) => ({
   padding: theme.spacing(1.5, 3)
 }));
+const SearchInput = styled(TextField, {
+  name: 'MuiDataGrid',
+  slot: 'ColumnsManagementSearchInput',
+  overridesResolver: (props, styles) => styles.columnsManagementSearchInput
+})(({
+  theme
+}) => ({
+  [`& .${inputBaseClasses.root}`]: {
+    padding: theme.spacing(0, 1.5, 0, 1.5)
+  },
+  [`& .${inputBaseClasses.input}::-webkit-search-decoration,
+  & .${inputBaseClasses.input}::-webkit-search-cancel-button,
+  & .${inputBaseClasses.input}::-webkit-search-results-button,
+  & .${inputBaseClasses.input}::-webkit-search-results-decoration`]: {
+    /* clears the 'X' icon from Chrome */
+    display: 'none'
+  }
+}));
 const GridColumnsManagementFooter = styled('div', {
   name: 'MuiDataGrid',
   slot: 'ColumnsManagementFooter',

package/modern/components/toolbar/GridToolbar.js

@@ -14,14 +14,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const 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 = _objectWithoutPropertiesLoose(props, _excluded);
+    } = _ref,
+    other = _objectWithoutPropertiesLoose(_ref, _excluded);
   const rootProps = useGridRootProps();
   if (rootProps.disableColumnFilter && rootProps.disableColumnSelector && rootProps.disableDensitySelector && !showQuickFilter) {
     return null;
@@ -32,7 +33,7 @@ const GridToolbar = /*#__PURE__*/React.forwardRef(function GridToolbar(props, re
     children: [/*#__PURE__*/_jsx(GridToolbarColumnsButton, {}), /*#__PURE__*/_jsx(GridToolbarFilterButton, {}), /*#__PURE__*/_jsx(GridToolbarDensitySelector, {}), /*#__PURE__*/_jsx(GridToolbarExport, {
       csvOptions: csvOptions,
       printOptions: printOptions
-      // TODO: remove the reference to excelOptions in community package
+      // @ts-ignore
       ,
       excelOptions: excelOptions
     }), /*#__PURE__*/_jsx("div", {
@@ -47,6 +48,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.object,
+  printOptions: PropTypes.object,
   /**
    * Props passed to the quick filter component.
    */
@@ -56,6 +59,11 @@ process.env.NODE_ENV !== "production" ? GridToolbar.propTypes = {
    * @default false
    */
   showQuickFilter: PropTypes.bool,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
 export { GridToolbar };

package/modern/components/toolbar/GridToolbarExport.js

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

package/modern/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClasses as generateUtilityClasses, unstable_gen
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export const gridClasses = 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']);
+export const gridClasses = 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/modern/constants/localeTextConstants.js

@@ -32,6 +32,7 @@ export const 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/modern/hooks/features/columnHeaders/useGridColumnHeaders.js

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

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

@@ -5,7 +5,7 @@ import { exportAs } from "../../../utils/exportAs.js";
 import { buildCSV } from "./serializers/csvSerializer.js";
 import { getColumnsToExport, defaultGetRowsToExport } from "./utils.js";
 import { useGridRegisterPipeProcessor } from "../../core/pipeProcessing/index.js";
-import { GridCsvExportMenuItem } from "../../../components/toolbar/GridToolbarExport.js";
+import { GridCsvExportMenuItem } from "../../../components/toolbar/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @requires useGridColumns (state)

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

@@ -11,7 +11,7 @@ import { GRID_ID_AUTOGENERATED } from "../rows/gridRowsUtils.js";
 import { defaultGetRowsToExport, getColumnsToExport } from "./utils.js";
 import { getDerivedPaginationModel } from "../pagination/useGridPaginationModel.js";
 import { useGridRegisterPipeProcessor } from "../../core/pipeProcessing/index.js";
-import { GridPrintExportMenuItem } from "../../../components/toolbar/GridToolbarExport.js";
+import { GridPrintExportMenuItem } from "../../../components/toolbar/index.js";
 import { getTotalHeaderHeight } from "../columns/gridColumnsUtils.js";
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from "../../../colDef/gridCheckboxSelectionColDef.js";
 import { jsx as _jsx } from "react/jsx-runtime";

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

@@ -75,7 +75,7 @@ export const useGridPaginationModel = (apiRef, props) => {
       pagination: _extends({}, state.pagination, {
         paginationModel: getDerivedPaginationModel(state.pagination, props.signature, paginationModel)
       })
-    }));
+    }), 'setPaginationModel');
   }, [apiRef, logger, props.signature]);
   const paginationModelApi = {
     setPage,
@@ -113,7 +113,7 @@ export const useGridPaginationModel = (apiRef, props) => {
       pagination: _extends({}, state.pagination, {
         paginationModel: getDerivedPaginationModel(state.pagination, props.signature, paginationModel)
       })
-    }));
+    }), 'stateRestorePreProcessing');
     return params;
   }, [apiRef, props.autoPageSize, props.signature]);
   useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);

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

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { gridPinnedRowsSelector } from "./gridRowsSelector.js";
-import { gridDimensionsSelector } from "../dimensions/gridDimensionsSelectors.js";
 export const GRID_ROOT_GROUP_ID = `auto-generated-group-node-root`;
 export const GRID_ID_AUTOGENERATED = Symbol('mui.id_autogenerated');
 export const buildRootGroup = () => ({
@@ -285,10 +284,7 @@ export function calculatePinnedRowsHeight(apiRef) {
     bottom: bottomPinnedRowsHeight
   };
 }
-export function getMinimalContentHeight(apiRef) {
-  const dimensions = gridDimensionsSelector(apiRef.current.state);
-  return `var(--DataGrid-overlayHeight, ${2 * dimensions.rowHeight}px)`;
-}
+export const minimalContentHeight = 'var(--DataGrid-overlayHeight, calc(var(--height) * 2))';
 export function computeRowsUpdates(apiRef, updates, getRowId) {
   const nonPinnedRowsUpdates = [];
   updates.forEach(update => {

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

@@ -21,11 +21,11 @@ import { clamp, range } from "../../../utils/utils.js";
 import { selectedIdsLookupSelector } from "../rowSelection/gridRowSelectionSelector.js";
 import { gridRowsMetaSelector } from "../rows/gridRowsMetaSelector.js";
 import { getFirstNonSpannedColumnToRender } from "../columns/gridColumnsUtils.js";
-import { getMinimalContentHeight } from "../rows/gridRowsUtils.js";
 import { gridRenderContextSelector, gridVirtualizationRowEnabledSelector, gridVirtualizationColumnEnabledSelector } from "./gridVirtualizationSelectors.js";
 import { EMPTY_RENDER_CONTEXT } from "./useGridVirtualization.js";
 import { gridRowSpanningHiddenCellsOriginMapSelector } from "../rows/gridRowSpanningSelectors.js";
 import { gridListColumnSelector } from "../listView/gridListViewSelectors.js";
+import { minimalContentHeight } from "../rows/gridRowsUtils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const MINIMUM_COLUMN_WIDTH = 50;
 var ScrollDirection = /*#__PURE__*/function (ScrollDirection) {
@@ -381,11 +381,11 @@ export const useGridVirtualScroller = () => {
       flexBasis: contentHeight,
       flexShrink: 0
     };
-    if (rootProps.autoHeight && currentPage.rows.length === 0) {
-      size.flexBasis = getMinimalContentHeight(apiRef); // Give room to show the overlay when there no rows.
+    if (size.flexBasis === 0) {
+      size.flexBasis = 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/modern/hooks/utils/useGridSelector.js

@@ -23,10 +23,26 @@ function applySelectorV8(apiRef, selector, args, instanceId) {
 }
 const defaultCompare = Object.is;
 export const objectShallowCompare = fastObjectShallowCompare;
+const arrayShallowCompare = (a, b) => {
+  if (a === b) {
+    return true;
+  }
+  return a.length === b.length && a.every((v, i) => v === b[i]);
+};
+export 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);
+};
 const createRefs = () => ({
   state: null,
   equals: null,
-  selector: null
+  selector: null,
+  args: null
 });
 
 // TODO v8: Remove this function
@@ -71,9 +87,18 @@ export const useGridSelectorV8 = (apiRef, selector, args = undefined, equals = d
   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);
+    }
+  }
   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/modern/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/modern/locales/arSD.js

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

package/modern/locales/beBY.js

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