@mui/x-data-grid 9.11.0 → 9.13.0

package/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -23,12 +23,23 @@ const renderSingleSelectOptions = ({
   getOptionLabel,
   getOptionValue,
   isSelectNative,
-  baseSelectOptionProps
+  baseSelectOptionProps,
+  blankOptionLabel
 }) => {
-  const iterableColumnValues = ['', ...((0, _filterPanelUtils.getValueOptions)(column) || [])];
-  return iterableColumnValues.map(option => {
-    const value = getOptionValue(option);
-    let label = getOptionLabel(option);
+  const valueOptions = (0, _filterPanelUtils.getValueOptions)(column) || [];
+
+  // A column that declares its own blank entry already offers a way to reset the filter.
+  // Prepending another one would render two options sharing the same `''` key.
+  const declaresBlankOption = valueOptions.some(option => {
+    const optionValue = getOptionValue(option);
+    return optionValue === '' || optionValue === null || optionValue === undefined;
+  });
+  const iterableColumnValues = declaresBlankOption ? valueOptions : ['', ...valueOptions];
+  return iterableColumnValues.map((option, index) => {
+    // The prepended entry is ours, not a value option, so it skips the column accessors.
+    const isBlankOption = !declaresBlankOption && index === 0;
+    const value = isBlankOption ? '' : getOptionValue(option);
+    let label = isBlankOption ? blankOptionLabel : getOptionLabel(option);
     if (label === '') {
       label = ' '; // To force the height of the empty option
     }
@@ -98,7 +109,8 @@ function GridFilterInputSingleSelect(props) {
         getOptionLabel,
         getOptionValue,
         isSelectNative,
-        baseSelectOptionProps: rootProps.slotProps?.baseSelectOption
+        baseSelectOptionProps: rootProps.slotProps?.baseSelectOption,
+        blankOptionLabel: apiRef.current.getLocaleText('filterValueAny')
       })
     })), headerFilterMenu, clearButton]
   });

package/components/panel/filterPanel/GridFilterInputSingleSelect.mjs

@@ -15,12 +15,23 @@ const renderSingleSelectOptions = ({
   getOptionLabel,
   getOptionValue,
   isSelectNative,
-  baseSelectOptionProps
+  baseSelectOptionProps,
+  blankOptionLabel
 }) => {
-  const iterableColumnValues = ['', ...(getValueOptions(column) || [])];
-  return iterableColumnValues.map(option => {
-    const value = getOptionValue(option);
-    let label = getOptionLabel(option);
+  const valueOptions = getValueOptions(column) || [];
+
+  // A column that declares its own blank entry already offers a way to reset the filter.
+  // Prepending another one would render two options sharing the same `''` key.
+  const declaresBlankOption = valueOptions.some(option => {
+    const optionValue = getOptionValue(option);
+    return optionValue === '' || optionValue === null || optionValue === undefined;
+  });
+  const iterableColumnValues = declaresBlankOption ? valueOptions : ['', ...valueOptions];
+  return iterableColumnValues.map((option, index) => {
+    // The prepended entry is ours, not a value option, so it skips the column accessors.
+    const isBlankOption = !declaresBlankOption && index === 0;
+    const value = isBlankOption ? '' : getOptionValue(option);
+    let label = isBlankOption ? blankOptionLabel : getOptionLabel(option);
     if (label === '') {
       label = ' '; // To force the height of the empty option
     }
@@ -90,7 +101,8 @@ function GridFilterInputSingleSelect(props) {
         getOptionLabel,
         getOptionValue,
         isSelectNative,
-        baseSelectOptionProps: rootProps.slotProps?.baseSelectOption
+        baseSelectOptionProps: rootProps.slotProps?.baseSelectOption,
+        blankOptionLabel: apiRef.current.getLocaleText('filterValueAny')
       })
     })), headerFilterMenu, clearButton]
   });

package/components/toolbarV8/Toolbar.d.mts

@@ -6,6 +6,10 @@ export type ToolbarProps = React.HTMLAttributes<HTMLDivElement> & {
    */
   render?: RenderProp<React.ComponentProps<typeof ToolbarRoot>>;
 };
+/**
+ * The styled `<div />` element rendered by the `<Toolbar />` component.
+ * Use it to apply the toolbar styles to other elements, inside or outside of a Data Grid.
+ */
 declare const ToolbarRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
 /**
  * The top level Toolbar component that provides context to child components.
@@ -25,4 +29,4 @@ declare const Toolbar: React.ForwardRefExoticComponent<ToolbarProps> | React.For
    */
   render?: RenderProp<React.ComponentProps<typeof ToolbarRoot>>;
 } & React.RefAttributes<HTMLDivElement>>;
-export { Toolbar };
+export { Toolbar, ToolbarRoot };

package/components/toolbarV8/Toolbar.d.ts

@@ -6,6 +6,10 @@ export type ToolbarProps = React.HTMLAttributes<HTMLDivElement> & {
    */
   render?: RenderProp<React.ComponentProps<typeof ToolbarRoot>>;
 };
+/**
+ * The styled `<div />` element rendered by the `<Toolbar />` component.
+ * Use it to apply the toolbar styles to other elements, inside or outside of a Data Grid.
+ */
 declare const ToolbarRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
 /**
  * The top level Toolbar component that provides context to child components.
@@ -25,4 +29,4 @@ declare const Toolbar: React.ForwardRefExoticComponent<ToolbarProps> | React.For
    */
   render?: RenderProp<React.ComponentProps<typeof ToolbarRoot>>;
 } & React.RefAttributes<HTMLDivElement>>;
-export { Toolbar };
+export { Toolbar, ToolbarRoot };

package/components/toolbarV8/Toolbar.js

@@ -6,7 +6,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Toolbar = void 0;
+exports.ToolbarRoot = exports.Toolbar = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
@@ -18,6 +18,7 @@ var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useComponentRenderer = require("@mui/x-internals/useComponentRenderer");
 var _ToolbarContext = require("@mui/x-internals/ToolbarContext");
 var _cssVariables = require("../../constants/cssVariables");
+var _variables = require("../../material/variables");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -31,19 +32,40 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
-const ToolbarRoot = (0, _styles.styled)('div', {
+
+/**
+ * The styled `<div />` element rendered by the `<Toolbar />` component.
+ * Use it to apply the toolbar styles to other elements, inside or outside of a Data Grid.
+ */
+const ToolbarRoot = exports.ToolbarRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'Toolbar'
-})({
-  flex: '0 1 1px',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'end',
-  gap: _cssVariables.vars.spacing(0.25),
-  padding: _cssVariables.vars.spacing(0.75),
-  minHeight: 52,
-  boxSizing: 'border-box',
-  borderBottom: `1px solid ${_cssVariables.vars.colors.border.base}`
+})(({
+  theme
+}) => {
+  // The Data Grid CSS variables are only defined on the Data Grid root element, so they are
+  // declared with a fallback to keep the styles working when rendered outside of a Data Grid.
+  const spacingUnit = `var(${_cssVariables.vars.keys.spacingUnit}, ${(0, _variables.getSpacingUnit)(theme)})`;
+  const borderColor = `var(${_cssVariables.vars.keys.colors.border.base}, ${(0, _variables.getBorderColor)(theme)})`;
+  const background = `var(${_cssVariables.vars.keys.colors.background.base}, ${(0, _variables.getBackgroundBase)(theme)})`;
+  const foreground = `var(${_cssVariables.vars.keys.colors.foreground.base}, ${(theme.vars || theme).palette.text.primary})`;
+  const fontBody = (0, _variables.getFontBody)(theme);
+  return {
+    flex: '0 1 1px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'end',
+    gap: `calc(${spacingUnit} * 0.25)`,
+    padding: `calc(${spacingUnit} * 0.75)`,
+    minHeight: 52,
+    boxSizing: 'border-box',
+    borderBottom: `1px solid ${borderColor}`,
+    // Inherited from the Data Grid root inside a grid, declared here so the component keeps
+    // matching it when rendered on its own.
+    backgroundColor: background,
+    color: foreground,
+    font: fontBody ? `var(${_cssVariables.vars.keys.typography.font.body}, ${fontBody})` : undefined
+  };
 });
 
 /**

package/components/toolbarV8/Toolbar.mjs

@@ -12,6 +12,7 @@ import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
 import { ToolbarContextProvider } from '@mui/x-internals/ToolbarContext';
 import { vars } from "../../constants/cssVariables.mjs";
+import { getBackgroundBase, getBorderColor, getFontBody, getSpacingUnit } from "../../material/variables.mjs";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.mjs";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -24,19 +25,40 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
+
+/**
+ * The styled `<div />` element rendered by the `<Toolbar />` component.
+ * Use it to apply the toolbar styles to other elements, inside or outside of a Data Grid.
+ */
 const ToolbarRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'Toolbar'
-})({
-  flex: '0 1 1px',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'end',
-  gap: vars.spacing(0.25),
-  padding: vars.spacing(0.75),
-  minHeight: 52,
-  boxSizing: 'border-box',
-  borderBottom: `1px solid ${vars.colors.border.base}`
+})(({
+  theme
+}) => {
+  // The Data Grid CSS variables are only defined on the Data Grid root element, so they are
+  // declared with a fallback to keep the styles working when rendered outside of a Data Grid.
+  const spacingUnit = `var(${vars.keys.spacingUnit}, ${getSpacingUnit(theme)})`;
+  const borderColor = `var(${vars.keys.colors.border.base}, ${getBorderColor(theme)})`;
+  const background = `var(${vars.keys.colors.background.base}, ${getBackgroundBase(theme)})`;
+  const foreground = `var(${vars.keys.colors.foreground.base}, ${(theme.vars || theme).palette.text.primary})`;
+  const fontBody = getFontBody(theme);
+  return {
+    flex: '0 1 1px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'end',
+    gap: `calc(${spacingUnit} * 0.25)`,
+    padding: `calc(${spacingUnit} * 0.75)`,
+    minHeight: 52,
+    boxSizing: 'border-box',
+    borderBottom: `1px solid ${borderColor}`,
+    // Inherited from the Data Grid root inside a grid, declared here so the component keeps
+    // matching it when rendered on its own.
+    backgroundColor: background,
+    color: foreground,
+    font: fontBody ? `var(${vars.keys.typography.font.body}, ${fontBody})` : undefined
+  };
 });
 
 /**
@@ -82,4 +104,4 @@ process.env.NODE_ENV !== "production" ? Toolbar.propTypes /* remove-proptypes */
    */
   render: PropTypes.oneOfType([PropTypes.element, PropTypes.func])
 } : void 0;
-export { Toolbar };
+export { Toolbar, ToolbarRoot };

package/constants/gridClasses.d.mts

@@ -83,6 +83,18 @@ export interface GridClasses {
    * Styles applied to the aggregation row overlay wrapper.
    */
   aggregationRowOverlayWrapper: string;
+  /**
+   * Styles applied to the A1-notation column-letter adornment in the column header (Premium formulas).
+   */
+  formulaColumnHeaderLetter: string;
+  /**
+   * Styles applied to the cells of the A1-notation row-number column (Premium formulas).
+   */
+  formulaRowNumberCell: string;
+  /**
+   * Styles applied to the formula bar root element (Premium formulas).
+   */
+  formulaBar: string;
   /**
    * Styles applied to the root element if `autoHeight={true}`.
    */

package/constants/gridClasses.d.ts

@@ -83,6 +83,18 @@ export interface GridClasses {
    * Styles applied to the aggregation row overlay wrapper.
    */
   aggregationRowOverlayWrapper: string;
+  /**
+   * Styles applied to the A1-notation column-letter adornment in the column header (Premium formulas).
+   */
+  formulaColumnHeaderLetter: string;
+  /**
+   * Styles applied to the cells of the A1-notation row-number column (Premium formulas).
+   */
+  formulaRowNumberCell: string;
+  /**
+   * Styles applied to the formula bar root element (Premium formulas).
+   */
+  formulaBar: string;
   /**
    * Styles applied to the root element if `autoHeight={true}`.
    */

package/constants/gridClasses.js

@@ -30,4 +30,4 @@ const gridClassesOverrides = exports.gridClassesOverrides = {
   // TODO v9: Rename to `cell--dragging`
   'row--dragging', 'row--dynamicHeight', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'rowReorderCell', 'rowReorderCell--draggable', 'rowReorderCellContainer', 'rowReorderCellPlaceholder', 'rowSkeleton', 'scrollbar', 'scrollbar--horizontal', 'scrollbar--vertical', 'scrollbarFiller', 'scrollbarFiller--pinnedRight', 'sortIcon', 'treeDataGroupingCell', 'treeDataGroupingCellLoadingContainer', 'treeDataGroupingCellToggle', 'withBorderColor', 'row--beingDragged']
 };
-const gridClasses = exports.gridClasses = (0, _generateUtilityClasses.default)('MuiDataGrid', [...gridClassesOverrides.root, ...gridClassesOverrides.children, 'aiAssistantPanel', 'aiAssistantPanelHeader', 'aiAssistantPanelTitleContainer', 'aiAssistantPanelTitle', 'aiAssistantPanelBody', 'aiAssistantPanelEmptyText', 'aiAssistantPanelFooter', 'aiAssistantPanelConversation', 'aiAssistantPanelConversationList', 'aiAssistantPanelConversationTitle', 'aiAssistantPanelSuggestions', 'aiAssistantPanelSuggestionsList', 'aiAssistantPanelSuggestionsItem', 'aiAssistantPanelSuggestionsLabel', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'aggregationRowOverlayWrapper', 'mainContent', 'withSidePanel', 'collapsible', 'collapsibleTrigger', 'collapsibleIcon', 'collapsiblePanel', 'columnHeader--filter', 'columnHeaderFilterInput', 'columnHeaderFilterOperatorLabel', 'columnHeaderTitle', 'columnHeaders', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'columnsManagementScrollArea', 'columnsManagementEmptyText', 'contentFiller', 'detailPanel', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editInputCell', 'longTextCell', 'longTextCellContent', 'longTextCellExpandButton', 'longTextCellCollapseButton', 'longTextCellPopup', 'longTextCellPopperContent', 'editLongTextCell', 'editLongTextCellValue', 'editLongTextCellPopup', 'editLongTextCellPopperContent', 'editLongTextCellTextarea', 'multiSelectCell', 'multiSelectCellChip', 'multiSelectCellChip--hidden', 'multiSelectCellOverflow', 'multiSelectCellPopup', 'multiSelectCellPopperContent', 'editMultiSelectCell', 'editMultiSelectCellChip', 'editMultiSelectCellChip--hidden', 'editMultiSelectCellOverflow', 'editMultiSelectCellPopup', 'editMultiSelectCellPopperContent', 'filler', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filler--horizontal', 'footerContainer', 'iconButtonContainer', 'main', 'main--hasPinnedRight', 'main--hiddenContent', 'menu', 'overlay', 'overlayWrapper', 'root', 'virtualizer--layoutControlled', 'rowCount', 'rowReorderIcon', 'scrollArea--left', 'scrollArea--right', 'scrollArea--up', 'scrollArea--down', 'scrollArea', 'scrollShadow', 'scrollShadow--vertical', 'scrollShadow--horizontal', 'selectedRowCount', 'sortButton', 'shadowScrollArea', 'sidebar', 'sidebarHeader', 'toolbarContainer', 'toolbar', 'toolbarLabel', 'toolbarDivider', 'toolbarFilterList', 'toolbarQuickFilter', 'toolbarQuickFilterTrigger', 'toolbarQuickFilterControl', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pivotPanelAvailableFields', 'pivotPanelField', 'pivotPanelField--sorted', 'pivotPanelFieldActionContainer', 'pivotPanelFieldCheckbox', 'pivotPanelFieldDragIcon', 'pivotPanelFieldList', 'pivotPanelFieldName', 'pivotPanelHeader', 'pivotPanelPlaceholder', 'pivotPanelScrollArea', 'pivotPanelSearchContainer', 'pivotPanelSection', 'pivotPanelSectionTitle', 'pivotPanelSections', 'pivotPanelSwitch', 'pivotPanelSwitchLabel', 'prompt', 'promptContent', 'promptText', 'promptFeedback', 'promptChangeList', 'promptChangesToggle', 'promptChangesToggleIcon', 'promptIcon', 'promptIconContainer', 'promptError', 'promptAction', 'resizablePanelHandle', 'resizablePanelHandle--horizontal', 'resizablePanelHandle--vertical']);
+const gridClasses = exports.gridClasses = (0, _generateUtilityClasses.default)('MuiDataGrid', [...gridClassesOverrides.root, ...gridClassesOverrides.children, 'aiAssistantPanel', 'aiAssistantPanelHeader', 'aiAssistantPanelTitleContainer', 'aiAssistantPanelTitle', 'aiAssistantPanelBody', 'aiAssistantPanelEmptyText', 'aiAssistantPanelFooter', 'aiAssistantPanelConversation', 'aiAssistantPanelConversationList', 'aiAssistantPanelConversationTitle', 'aiAssistantPanelSuggestions', 'aiAssistantPanelSuggestionsList', 'aiAssistantPanelSuggestionsItem', 'aiAssistantPanelSuggestionsLabel', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'aggregationRowOverlayWrapper', 'formulaColumnHeaderLetter', 'formulaRowNumberCell', 'formulaBar', 'mainContent', 'withSidePanel', 'collapsible', 'collapsibleTrigger', 'collapsibleIcon', 'collapsiblePanel', 'columnHeader--filter', 'columnHeaderFilterInput', 'columnHeaderFilterOperatorLabel', 'columnHeaderTitle', 'columnHeaders', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'columnsManagementScrollArea', 'columnsManagementEmptyText', 'contentFiller', 'detailPanel', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editInputCell', 'longTextCell', 'longTextCellContent', 'longTextCellExpandButton', 'longTextCellCollapseButton', 'longTextCellPopup', 'longTextCellPopperContent', 'editLongTextCell', 'editLongTextCellValue', 'editLongTextCellPopup', 'editLongTextCellPopperContent', 'editLongTextCellTextarea', 'multiSelectCell', 'multiSelectCellChip', 'multiSelectCellChip--hidden', 'multiSelectCellOverflow', 'multiSelectCellPopup', 'multiSelectCellPopperContent', 'editMultiSelectCell', 'editMultiSelectCellChip', 'editMultiSelectCellChip--hidden', 'editMultiSelectCellOverflow', 'editMultiSelectCellPopup', 'editMultiSelectCellPopperContent', 'filler', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filler--horizontal', 'footerContainer', 'iconButtonContainer', 'main', 'main--hasPinnedRight', 'main--hiddenContent', 'menu', 'overlay', 'overlayWrapper', 'root', 'virtualizer--layoutControlled', 'rowCount', 'rowReorderIcon', 'scrollArea--left', 'scrollArea--right', 'scrollArea--up', 'scrollArea--down', 'scrollArea', 'scrollShadow', 'scrollShadow--vertical', 'scrollShadow--horizontal', 'selectedRowCount', 'sortButton', 'shadowScrollArea', 'sidebar', 'sidebarHeader', 'toolbarContainer', 'toolbar', 'toolbarLabel', 'toolbarDivider', 'toolbarFilterList', 'toolbarQuickFilter', 'toolbarQuickFilterTrigger', 'toolbarQuickFilterControl', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pivotPanelAvailableFields', 'pivotPanelField', 'pivotPanelField--sorted', 'pivotPanelFieldActionContainer', 'pivotPanelFieldCheckbox', 'pivotPanelFieldDragIcon', 'pivotPanelFieldList', 'pivotPanelFieldName', 'pivotPanelHeader', 'pivotPanelPlaceholder', 'pivotPanelScrollArea', 'pivotPanelSearchContainer', 'pivotPanelSection', 'pivotPanelSectionTitle', 'pivotPanelSections', 'pivotPanelSwitch', 'pivotPanelSwitchLabel', 'prompt', 'promptContent', 'promptText', 'promptFeedback', 'promptChangeList', 'promptChangesToggle', 'promptChangesToggleIcon', 'promptIcon', 'promptIconContainer', 'promptError', 'promptAction', 'resizablePanelHandle', 'resizablePanelHandle--horizontal', 'resizablePanelHandle--vertical']);

package/constants/gridClasses.mjs

@@ -22,4 +22,4 @@ export const gridClassesOverrides = {
   // TODO v9: Rename to `cell--dragging`
   'row--dragging', 'row--dynamicHeight', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'rowReorderCell', 'rowReorderCell--draggable', 'rowReorderCellContainer', 'rowReorderCellPlaceholder', 'rowSkeleton', 'scrollbar', 'scrollbar--horizontal', 'scrollbar--vertical', 'scrollbarFiller', 'scrollbarFiller--pinnedRight', 'sortIcon', 'treeDataGroupingCell', 'treeDataGroupingCellLoadingContainer', 'treeDataGroupingCellToggle', 'withBorderColor', 'row--beingDragged']
 };
-export const gridClasses = generateUtilityClasses('MuiDataGrid', [...gridClassesOverrides.root, ...gridClassesOverrides.children, 'aiAssistantPanel', 'aiAssistantPanelHeader', 'aiAssistantPanelTitleContainer', 'aiAssistantPanelTitle', 'aiAssistantPanelBody', 'aiAssistantPanelEmptyText', 'aiAssistantPanelFooter', 'aiAssistantPanelConversation', 'aiAssistantPanelConversationList', 'aiAssistantPanelConversationTitle', 'aiAssistantPanelSuggestions', 'aiAssistantPanelSuggestionsList', 'aiAssistantPanelSuggestionsItem', 'aiAssistantPanelSuggestionsLabel', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'aggregationRowOverlayWrapper', 'mainContent', 'withSidePanel', 'collapsible', 'collapsibleTrigger', 'collapsibleIcon', 'collapsiblePanel', 'columnHeader--filter', 'columnHeaderFilterInput', 'columnHeaderFilterOperatorLabel', 'columnHeaderTitle', 'columnHeaders', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'columnsManagementScrollArea', 'columnsManagementEmptyText', 'contentFiller', 'detailPanel', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editInputCell', 'longTextCell', 'longTextCellContent', 'longTextCellExpandButton', 'longTextCellCollapseButton', 'longTextCellPopup', 'longTextCellPopperContent', 'editLongTextCell', 'editLongTextCellValue', 'editLongTextCellPopup', 'editLongTextCellPopperContent', 'editLongTextCellTextarea', 'multiSelectCell', 'multiSelectCellChip', 'multiSelectCellChip--hidden', 'multiSelectCellOverflow', 'multiSelectCellPopup', 'multiSelectCellPopperContent', 'editMultiSelectCell', 'editMultiSelectCellChip', 'editMultiSelectCellChip--hidden', 'editMultiSelectCellOverflow', 'editMultiSelectCellPopup', 'editMultiSelectCellPopperContent', 'filler', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filler--horizontal', 'footerContainer', 'iconButtonContainer', 'main', 'main--hasPinnedRight', 'main--hiddenContent', 'menu', 'overlay', 'overlayWrapper', 'root', 'virtualizer--layoutControlled', 'rowCount', 'rowReorderIcon', 'scrollArea--left', 'scrollArea--right', 'scrollArea--up', 'scrollArea--down', 'scrollArea', 'scrollShadow', 'scrollShadow--vertical', 'scrollShadow--horizontal', 'selectedRowCount', 'sortButton', 'shadowScrollArea', 'sidebar', 'sidebarHeader', 'toolbarContainer', 'toolbar', 'toolbarLabel', 'toolbarDivider', 'toolbarFilterList', 'toolbarQuickFilter', 'toolbarQuickFilterTrigger', 'toolbarQuickFilterControl', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pivotPanelAvailableFields', 'pivotPanelField', 'pivotPanelField--sorted', 'pivotPanelFieldActionContainer', 'pivotPanelFieldCheckbox', 'pivotPanelFieldDragIcon', 'pivotPanelFieldList', 'pivotPanelFieldName', 'pivotPanelHeader', 'pivotPanelPlaceholder', 'pivotPanelScrollArea', 'pivotPanelSearchContainer', 'pivotPanelSection', 'pivotPanelSectionTitle', 'pivotPanelSections', 'pivotPanelSwitch', 'pivotPanelSwitchLabel', 'prompt', 'promptContent', 'promptText', 'promptFeedback', 'promptChangeList', 'promptChangesToggle', 'promptChangesToggleIcon', 'promptIcon', 'promptIconContainer', 'promptError', 'promptAction', 'resizablePanelHandle', 'resizablePanelHandle--horizontal', 'resizablePanelHandle--vertical']);
+export const gridClasses = generateUtilityClasses('MuiDataGrid', [...gridClassesOverrides.root, ...gridClassesOverrides.children, 'aiAssistantPanel', 'aiAssistantPanelHeader', 'aiAssistantPanelTitleContainer', 'aiAssistantPanelTitle', 'aiAssistantPanelBody', 'aiAssistantPanelEmptyText', 'aiAssistantPanelFooter', 'aiAssistantPanelConversation', 'aiAssistantPanelConversationList', 'aiAssistantPanelConversationTitle', 'aiAssistantPanelSuggestions', 'aiAssistantPanelSuggestionsList', 'aiAssistantPanelSuggestionsItem', 'aiAssistantPanelSuggestionsLabel', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'aggregationRowOverlayWrapper', 'formulaColumnHeaderLetter', 'formulaRowNumberCell', 'formulaBar', 'mainContent', 'withSidePanel', 'collapsible', 'collapsibleTrigger', 'collapsibleIcon', 'collapsiblePanel', 'columnHeader--filter', 'columnHeaderFilterInput', 'columnHeaderFilterOperatorLabel', 'columnHeaderTitle', 'columnHeaders', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'columnsManagementScrollArea', 'columnsManagementEmptyText', 'contentFiller', 'detailPanel', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editInputCell', 'longTextCell', 'longTextCellContent', 'longTextCellExpandButton', 'longTextCellCollapseButton', 'longTextCellPopup', 'longTextCellPopperContent', 'editLongTextCell', 'editLongTextCellValue', 'editLongTextCellPopup', 'editLongTextCellPopperContent', 'editLongTextCellTextarea', 'multiSelectCell', 'multiSelectCellChip', 'multiSelectCellChip--hidden', 'multiSelectCellOverflow', 'multiSelectCellPopup', 'multiSelectCellPopperContent', 'editMultiSelectCell', 'editMultiSelectCellChip', 'editMultiSelectCellChip--hidden', 'editMultiSelectCellOverflow', 'editMultiSelectCellPopup', 'editMultiSelectCellPopperContent', 'filler', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filler--horizontal', 'footerContainer', 'iconButtonContainer', 'main', 'main--hasPinnedRight', 'main--hiddenContent', 'menu', 'overlay', 'overlayWrapper', 'root', 'virtualizer--layoutControlled', 'rowCount', 'rowReorderIcon', 'scrollArea--left', 'scrollArea--right', 'scrollArea--up', 'scrollArea--down', 'scrollArea', 'scrollShadow', 'scrollShadow--vertical', 'scrollShadow--horizontal', 'selectedRowCount', 'sortButton', 'shadowScrollArea', 'sidebar', 'sidebarHeader', 'toolbarContainer', 'toolbar', 'toolbarLabel', 'toolbarDivider', 'toolbarFilterList', 'toolbarQuickFilter', 'toolbarQuickFilterTrigger', 'toolbarQuickFilterControl', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pivotPanelAvailableFields', 'pivotPanelField', 'pivotPanelField--sorted', 'pivotPanelFieldActionContainer', 'pivotPanelFieldCheckbox', 'pivotPanelFieldDragIcon', 'pivotPanelFieldList', 'pivotPanelFieldName', 'pivotPanelHeader', 'pivotPanelPlaceholder', 'pivotPanelScrollArea', 'pivotPanelSearchContainer', 'pivotPanelSection', 'pivotPanelSectionTitle', 'pivotPanelSections', 'pivotPanelSwitch', 'pivotPanelSwitchLabel', 'prompt', 'promptContent', 'promptText', 'promptFeedback', 'promptChangeList', 'promptChangesToggle', 'promptChangesToggleIcon', 'promptIcon', 'promptIconContainer', 'promptError', 'promptAction', 'resizablePanelHandle', 'resizablePanelHandle--horizontal', 'resizablePanelHandle--vertical']);

package/constants/localeTextConstants.js

@@ -47,6 +47,10 @@ const GRID_DEFAULT_LOCALE_TEXT = exports.GRID_DEFAULT_LOCALE_TEXT = {
   toolbarCharts: 'Charts',
   // Toolbar AI Assistant button
   toolbarAssistant: 'AI Assistant',
+  // Formula bar (Premium formulas)
+  formulaBarLabel: 'Formula bar',
+  formulaBarInputLabel: 'Formula',
+  formulaBarAddressLabel: 'Active cell',
   // Columns management text
   columnsManagementSearchTitle: 'Search',
   columnsManagementNoColumns: 'No columns',

package/constants/localeTextConstants.mjs

@@ -41,6 +41,10 @@ export const GRID_DEFAULT_LOCALE_TEXT = {
   toolbarCharts: 'Charts',
   // Toolbar AI Assistant button
   toolbarAssistant: 'AI Assistant',
+  // Formula bar (Premium formulas)
+  formulaBarLabel: 'Formula bar',
+  formulaBarInputLabel: 'Formula',
+  formulaBarAddressLabel: 'Active cell',
   // Columns management text
   columnsManagementSearchTitle: 'Search',
   columnsManagementNoColumns: 'No columns',

package/hooks/core/useGridApiInitialization.js

@@ -12,6 +12,7 @@ var _EventManager = require("@mui/x-internals/EventManager");
 var _store = require("@mui/x-internals/store");
 var _useGridApiMethod = require("../utils/useGridApiMethod");
 var _signature = require("../../constants/signature");
+var _getPublicApiRef = require("../../utils/getPublicApiRef");
 const SYMBOL_API_PRIVATE = Symbol('mui.api_private');
 const isSyntheticEvent = event => {
   return event.isPropagationStopped !== undefined;
@@ -92,8 +93,11 @@ function useGridApiInitialization(inputApiRef, props) {
       return;
     }
     const details = props.signature === _signature.GridSignature.DataGridPro || props.signature === _signature.GridSignature.DataGridPremium ? {
+      apiRef: (0, _getPublicApiRef.getPublicApiRef)(privateApiRef),
       api: privateApiRef.current.getPublicApi()
-    } : {};
+    } : {
+      apiRef: (0, _getPublicApiRef.getPublicApiRef)(privateApiRef)
+    };
     privateApiRef.current.eventManager.emit(name, params, event, details);
   }, [privateApiRef, props.signature]);
   const subscribeEvent = React.useCallback((event, handler, options) => {

package/hooks/core/useGridApiInitialization.mjs

@@ -5,6 +5,7 @@ import { EventManager } from '@mui/x-internals/EventManager';
 import { Store } from '@mui/x-internals/store';
 import { useGridApiMethod } from "../utils/useGridApiMethod.mjs";
 import { GridSignature } from "../../constants/signature.mjs";
+import { getPublicApiRef } from "../../utils/getPublicApiRef.mjs";
 const SYMBOL_API_PRIVATE = Symbol('mui.api_private');
 const isSyntheticEvent = event => {
   return event.isPropagationStopped !== undefined;
@@ -85,8 +86,11 @@ export function useGridApiInitialization(inputApiRef, props) {
       return;
     }
     const details = props.signature === GridSignature.DataGridPro || props.signature === GridSignature.DataGridPremium ? {
+      apiRef: getPublicApiRef(privateApiRef),
       api: privateApiRef.current.getPublicApi()
-    } : {};
+    } : {
+      apiRef: getPublicApiRef(privateApiRef)
+    };
     privateApiRef.current.eventManager.emit(name, params, event, details);
   }, [privateApiRef, props.signature]);
   const subscribeEvent = React.useCallback((event, handler, options) => {

package/hooks/core/useGridStateInitialization.js

@@ -12,6 +12,7 @@ var _formatErrorMessage2 = _interopRequireDefault(require("@mui/x-internals/form
 var React = _interopRequireWildcard(require("react"));
 var _utils = require("../utils");
 var _utils2 = require("../../utils/utils");
+var _getPublicApiRef = require("../../utils/getPublicApiRef");
 const useGridStateInitialization = apiRef => {
   const controlStateMapRef = React.useRef({});
   const registerControlState = React.useCallback(controlStateItem => {
@@ -75,7 +76,8 @@ const useGridStateInitialization = apiRef => {
       if (controlState.propOnChange && hasPropChanged) {
         controlState.propOnChange(model, {
           reason,
-          api: apiRef.current
+          api: apiRef.current,
+          apiRef: (0, _getPublicApiRef.getPublicApiRef)(apiRef)
         });
       }
       if (!ignoreSetState) {

package/hooks/core/useGridStateInitialization.mjs

@@ -5,6 +5,7 @@ import _formatErrorMessage from "@mui/x-internals/formatErrorMessage";
 import * as React from 'react';
 import { useGridApiMethod } from "../utils/index.mjs";
 import { isFunction } from "../../utils/utils.mjs";
+import { getPublicApiRef } from "../../utils/getPublicApiRef.mjs";
 export const useGridStateInitialization = apiRef => {
   const controlStateMapRef = React.useRef({});
   const registerControlState = React.useCallback(controlStateItem => {
@@ -68,7 +69,8 @@ export const useGridStateInitialization = apiRef => {
       if (controlState.propOnChange && hasPropChanged) {
         controlState.propOnChange(model, {
           reason,
-          api: apiRef.current
+          api: apiRef.current,
+          apiRef: getPublicApiRef(apiRef)
         });
       }
       if (!ignoreSetState) {

package/hooks/core/useGridVirtualizer.js

@@ -26,6 +26,7 @@ var _useGridVisibleRows = require("../utils/useGridVisibleRows");
 var _pagination = require("../features/pagination");
 var _gridFocusedVirtualCellSelector = require("../features/virtualization/gridFocusedVirtualCellSelector");
 var _rowSelection = require("../features/rowSelection");
+var _gridColumnGroupsSelector = require("../features/columnGrouping/gridColumnGroupsSelector");
 var _dataGridPropsDefaultValues = require("../../constants/dataGridPropsDefaultValues");
 var _gridRowsUtils = require("../features/rows/gridRowsUtils");
 var _gridColumnsUtils = require("../features/columns/gridColumnsUtils");
@@ -66,6 +67,18 @@ function useGridVirtualizer() {
     listView
   } = rootProps;
   const visibleColumns = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector);
+  // Convert visible row-header columns to their indexes once per column-model change. Each GridRow
+  // uses this ordered list to render those cells even when they fall outside its horizontal render
+  // context. This keeps the row-identifying cells available to assistive technology while scrolling.
+  const retainedColumnIndexes = React.useMemo(() => {
+    const indexes = [];
+    visibleColumns.forEach((column, index) => {
+      if (column.rowHeader) {
+        indexes.push(index);
+      }
+    });
+    return indexes;
+  }, [visibleColumns]);
   const pinnedRows = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridPinnedRowsSelector);
   const pinnedColumns = (0, _gridColumnsSelector.gridVisiblePinnedColumnDefinitionsSelector)(apiRef);
   const rowSelectionManager = (0, _useGridSelector.useGridSelector)(apiRef, _rowSelection.gridRowSelectionManagerSelector);
@@ -87,6 +100,8 @@ function useGridVirtualizer() {
   const groupHeaderHeight = Math.floor((rootProps.columnGroupHeaderHeight ?? rootProps.columnHeaderHeight) * density);
   const headerFilterHeight = Math.floor((rootProps.headerFilterHeight ?? rootProps.columnHeaderHeight) * density);
   const columnsTotalWidth = (0, _useGridSelector.useGridSelector)(apiRef, columnsTotalWidthSelector);
+  // `getTotalHeaderHeight` reads the group depth imperatively, subscribe so it re-renders when it changes.
+  (0, _utils.eslintUseValue)((0, _useGridSelector.useGridSelector)(apiRef, _gridColumnGroupsSelector.gridColumnGroupsHeaderMaxDepthSelector));
   const headersTotalHeight = (0, _gridColumnsUtils.getTotalHeaderHeight)(apiRef, rootProps);
   const leftPinnedWidth = pinnedColumns.left.reduce((w, col) => w + col.computedWidth, 0);
   const rightPinnedWidth = pinnedColumns.right.reduce((w, col) => w + col.computedWidth, 0);
@@ -216,6 +231,7 @@ function useGridVirtualizer() {
       rowHeight: params.baseRowHeight,
       pinnedColumns: pinnedColumns,
       visibleColumns: visibleColumns,
+      retainedColumnIndexes: retainedColumnIndexes,
       firstColumnIndex: params.firstColumnIndex,
       lastColumnIndex: params.lastColumnIndex,
       focusedColumnIndex: params.focusedColumnIndex,
@@ -225,7 +241,7 @@ function useGridVirtualizer() {
       showBottomBorder: params.showBottomBorder,
       scrollbarWidth: verticalScrollbarWidth,
       gridHasFiller: hasFiller
-    }, rowSlotProps), params.id), [columnsTotalWidth, hasFiller, isRowSelected, pinnedColumns, RowSlot, rowSlotProps, verticalScrollbarWidth, visibleColumns]),
+    }, rowSlotProps), params.id), [columnsTotalWidth, hasFiller, isRowSelected, pinnedColumns, retainedColumnIndexes, RowSlot, rowSlotProps, verticalScrollbarWidth, visibleColumns]),
     renderInfiniteLoadingTrigger: React.useCallback(id => apiRef.current.getInfiniteLoadingTriggerElement?.({
       lastRowId: id
     }), [apiRef])

package/hooks/core/useGridVirtualizer.mjs

@@ -18,6 +18,7 @@ import { useGridVisibleRows } from "../utils/useGridVisibleRows.mjs";
 import { gridPaginationSelector } from "../features/pagination/index.mjs";
 import { gridFocusedVirtualCellSelector } from "../features/virtualization/gridFocusedVirtualCellSelector.mjs";
 import { gridRowSelectionManagerSelector } from "../features/rowSelection/index.mjs";
+import { gridColumnGroupsHeaderMaxDepthSelector } from "../features/columnGrouping/gridColumnGroupsSelector.mjs";
 import { DATA_GRID_PROPS_DEFAULT_VALUES } from "../../constants/dataGridPropsDefaultValues.mjs";
 import { getValidRowHeight, minimalContentHeight, rowHeightWarning } from "../features/rows/gridRowsUtils.mjs";
 import { getTotalHeaderHeight } from "../features/columns/gridColumnsUtils.mjs";
@@ -58,6 +59,18 @@ export function useGridVirtualizer() {
     listView
   } = rootProps;
   const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
+  // Convert visible row-header columns to their indexes once per column-model change. Each GridRow
+  // uses this ordered list to render those cells even when they fall outside its horizontal render
+  // context. This keeps the row-identifying cells available to assistive technology while scrolling.
+  const retainedColumnIndexes = React.useMemo(() => {
+    const indexes = [];
+    visibleColumns.forEach((column, index) => {
+      if (column.rowHeader) {
+        indexes.push(index);
+      }
+    });
+    return indexes;
+  }, [visibleColumns]);
   const pinnedRows = useGridSelector(apiRef, gridPinnedRowsSelector);
   const pinnedColumns = gridVisiblePinnedColumnDefinitionsSelector(apiRef);
   const rowSelectionManager = useGridSelector(apiRef, gridRowSelectionManagerSelector);
@@ -79,6 +92,8 @@ export function useGridVirtualizer() {
   const groupHeaderHeight = Math.floor((rootProps.columnGroupHeaderHeight ?? rootProps.columnHeaderHeight) * density);
   const headerFilterHeight = Math.floor((rootProps.headerFilterHeight ?? rootProps.columnHeaderHeight) * density);
   const columnsTotalWidth = useGridSelector(apiRef, columnsTotalWidthSelector);
+  // `getTotalHeaderHeight` reads the group depth imperatively, subscribe so it re-renders when it changes.
+  eslintUseValue(useGridSelector(apiRef, gridColumnGroupsHeaderMaxDepthSelector));
   const headersTotalHeight = getTotalHeaderHeight(apiRef, rootProps);
   const leftPinnedWidth = pinnedColumns.left.reduce((w, col) => w + col.computedWidth, 0);
   const rightPinnedWidth = pinnedColumns.right.reduce((w, col) => w + col.computedWidth, 0);
@@ -208,6 +223,7 @@ export function useGridVirtualizer() {
       rowHeight: params.baseRowHeight,
       pinnedColumns: pinnedColumns,
       visibleColumns: visibleColumns,
+      retainedColumnIndexes: retainedColumnIndexes,
       firstColumnIndex: params.firstColumnIndex,
       lastColumnIndex: params.lastColumnIndex,
       focusedColumnIndex: params.focusedColumnIndex,
@@ -217,7 +233,7 @@ export function useGridVirtualizer() {
       showBottomBorder: params.showBottomBorder,
       scrollbarWidth: verticalScrollbarWidth,
       gridHasFiller: hasFiller
-    }, rowSlotProps), params.id), [columnsTotalWidth, hasFiller, isRowSelected, pinnedColumns, RowSlot, rowSlotProps, verticalScrollbarWidth, visibleColumns]),
+    }, rowSlotProps), params.id), [columnsTotalWidth, hasFiller, isRowSelected, pinnedColumns, retainedColumnIndexes, RowSlot, rowSlotProps, verticalScrollbarWidth, visibleColumns]),
     renderInfiniteLoadingTrigger: React.useCallback(id => apiRef.current.getInfiniteLoadingTriggerElement?.({
       lastRowId: id
     }), [apiRef])

package/hooks/features/columnResize/useGridColumnResize.js

@@ -568,6 +568,11 @@ const useGridColumnResize = (apiRef, props) => {
       if (!props.disableVirtualization && options.disableColumnVirtualization) {
         apiRef.current.unstable_setColumnVirtualization(false);
         await columnVirtualizationDisabled();
+
+        // The grid may have unmounted while awaiting, which nulls the root element ref.
+        if (!apiRef.current.rootElementRef?.current) {
+          return;
+        }
       }
       const widthByField = extractColumnWidths(apiRef, options, columns);
       const newColumns = columns.map(column => (0, _extends2.default)({}, column, {

package/hooks/features/columnResize/useGridColumnResize.mjs

@@ -560,6 +560,11 @@ export const useGridColumnResize = (apiRef, props) => {
       if (!props.disableVirtualization && options.disableColumnVirtualization) {
         apiRef.current.unstable_setColumnVirtualization(false);
         await columnVirtualizationDisabled();
+
+        // The grid may have unmounted while awaiting, which nulls the root element ref.
+        if (!apiRef.current.rootElementRef?.current) {
+          return;
+        }
       }
       const widthByField = extractColumnWidths(apiRef, options, columns);
       const newColumns = columns.map(column => _extends({}, column, {

package/hooks/features/columns/gridColumnsUtils.d.mts

@@ -67,4 +67,4 @@ export declare function getFirstNonSpannedColumnToRender({
   lastRowToRender: number;
   visibleRows: GridRowEntry[];
 }): number;
-export declare function getTotalHeaderHeight(apiRef: RefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'columnHeaderHeight' | 'headerFilterHeight' | 'listView' | 'columnGroupHeaderHeight'>): number;
+export declare function getTotalHeaderHeight(apiRef: RefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'columnHeaderHeight' | 'headerFilterHeight' | 'listView' | 'columnGroupHeaderHeight' | 'signature' | 'headerFilters'>): number;

package/hooks/features/columns/gridColumnsUtils.d.ts

@@ -67,4 +67,4 @@ export declare function getFirstNonSpannedColumnToRender({
   lastRowToRender: number;
   visibleRows: GridRowEntry[];
 }): number;
-export declare function getTotalHeaderHeight(apiRef: RefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'columnHeaderHeight' | 'headerFilterHeight' | 'listView' | 'columnGroupHeaderHeight'>): number;
+export declare function getTotalHeaderHeight(apiRef: RefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'columnHeaderHeight' | 'headerFilterHeight' | 'listView' | 'columnGroupHeaderHeight' | 'signature' | 'headerFilters'>): number;

package/hooks/features/columns/gridColumnsUtils.js

@@ -19,7 +19,6 @@ var _signature = require("../../../constants/signature");
 var _gridColumnsSelector = require("./gridColumnsSelector");
 var _utils = require("../../../utils/utils");
 var _densitySelector = require("../density/densitySelector");
-var _gridHeaderFilteringSelectors = require("../headerFiltering/gridHeaderFilteringSelectors");
 var _gridColumnGroupsSelector = require("../columnGrouping/gridColumnGroupsSelector");
 const COLUMNS_DIMENSION_PROPERTIES = exports.COLUMNS_DIMENSION_PROPERTIES = ['maxWidth', 'minWidth', 'width', 'flex'];
 /**
@@ -360,7 +359,8 @@ function getTotalHeaderHeight(apiRef, props) {
   }
   const densityFactor = (0, _densitySelector.gridDensityFactorSelector)(apiRef);
   const maxDepth = (0, _gridColumnGroupsSelector.gridColumnGroupsHeaderMaxDepthSelector)(apiRef);
-  const isHeaderFilteringEnabled = (0, _gridHeaderFilteringSelectors.gridHeaderFilteringEnabledSelector)(apiRef);
+  // Not `gridHeaderFilteringEnabledSelector`: that state is synced in an effect, so it lags one render behind `props.headerFilters`.
+  const isHeaderFilteringEnabled = props.signature !== 'DataGrid' && (props.headerFilters ?? false);
   const columnHeadersHeight = Math.floor(props.columnHeaderHeight * densityFactor);
   const columnGroupHeadersHeight = Math.floor((props.columnGroupHeaderHeight ?? props.columnHeaderHeight) * densityFactor);
   const filterHeadersHeight = isHeaderFilteringEnabled ? Math.floor((props.headerFilterHeight ?? props.columnHeaderHeight) * densityFactor) : 0;