@mui/x-data-grid 8.0.0 → 8.2.0

package/components/filterPanel/FilterPanelTrigger.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
-import type { GridSlotProps } from '../../models';
+import type { GridSlotProps } from "../../models/index.js";
 export interface FilterPanelState {
   /**
    * If `true`, the filter panel is open.

package/components/panel/GridPanel.js

@@ -38,7 +38,6 @@ const GridPanelContent = (0, _styles.styled)('div', {
   boxShadow: _cssVariables.vars.shadows.overlay,
   display: 'flex',
   maxWidth: `calc(100vw - ${_cssVariables.vars.spacing(2)})`,
-  margin: _cssVariables.vars.spacing(1),
   overflow: 'auto'
 });
 const GridPanel = exports.GridPanel = (0, _forwardRef.forwardRef)((props, ref) => {

package/components/panel/GridPanelFooter.js

@@ -29,8 +29,7 @@ const useUtilityClasses = ownerState => {
 };
 const GridPanelFooterRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
-  slot: 'PanelFooter',
-  overridesResolver: (props, styles) => styles.panelFooter
+  slot: 'PanelFooter'
 })({
   padding: _cssVariables.vars.spacing(1),
   display: 'flex',

package/components/panel/GridPanelHeader.js

@@ -29,8 +29,7 @@ const useUtilityClasses = ownerState => {
 };
 const GridPanelHeaderRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
-  slot: 'PanelHeader',
-  overridesResolver: (props, styles) => styles.panelHeader
+  slot: 'PanelHeader'
 })({
   padding: _cssVariables.vars.spacing(1)
 });

package/components/panel/filterPanel/GridFilterForm.js

@@ -44,16 +44,14 @@ const useUtilityClasses = ownerState => {
 };
 const GridFilterFormRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
-  slot: 'FilterForm',
-  overridesResolver: (props, styles) => styles.filterForm
+  slot: 'FilterForm'
 })({
   display: 'flex',
   gap: _cssVariables.vars.spacing(1.5)
 });
 const FilterFormDeleteIcon = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
-  slot: 'FilterFormDeleteIcon',
-  overridesResolver: (_, styles) => styles.filterFormDeleteIcon
+  slot: 'FilterFormDeleteIcon'
 })({
   flexShrink: 0,
   display: 'flex',
@@ -62,30 +60,26 @@ const FilterFormDeleteIcon = (0, _styles.styled)('div', {
 });
 const FilterFormLogicOperatorInput = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
-  slot: 'FilterFormLogicOperatorInput',
-  overridesResolver: (_, styles) => styles.filterFormLogicOperatorInput
+  slot: 'FilterFormLogicOperatorInput'
 })({
   minWidth: 75,
   justifyContent: 'end'
 });
 const FilterFormColumnInput = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
-  slot: 'FilterFormColumnInput',
-  overridesResolver: (_, styles) => styles.filterFormColumnInput
+  slot: 'FilterFormColumnInput'
 })({
   width: 150
 });
 const FilterFormOperatorInput = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
-  slot: 'FilterFormOperatorInput',
-  overridesResolver: (_, styles) => styles.filterFormOperatorInput
+  slot: 'FilterFormOperatorInput'
 })({
   width: 150
 });
 const FilterFormValueInput = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
-  slot: 'FilterFormValueInput',
-  overridesResolver: (_, styles) => styles.filterFormValueInput
+  slot: 'FilterFormValueInput'
 })({
   width: 190
 });

package/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { AutocompleteProps } from "../../../models/gridBaseSlots.js";
 import { GridFilterInputValueProps } from "../../../models/gridFilterInputComponent.js";
-import type { ValueOptions } from '../../../models/colDef/gridColDef';
+import type { ValueOptions } from "../../../models/colDef/gridColDef.js";
 export type GridFilterInputMultipleSingleSelectProps = GridFilterInputValueProps<Omit<AutocompleteProps<ValueOptions, true, false, true>, 'options'>> & {
   type?: 'singleSelect';
 };

package/components/panel/filterPanel/filterPanelUtils.d.ts

@@ -1,5 +1,5 @@
-import type { GridColDef, GridSingleSelectColDef } from '../../../models/colDef/gridColDef';
-import type { GridValueOptionsParams } from '../../../models/params/gridValueOptionsParams';
+import type { GridColDef, GridSingleSelectColDef } from "../../../models/colDef/gridColDef.js";
+import type { GridValueOptionsParams } from "../../../models/params/gridValueOptionsParams.js";
 export declare function isSingleSelectColDef(colDef: GridColDef | null): colDef is GridSingleSelectColDef;
 export declare function getValueOptions(column: GridSingleSelectColDef, additionalParams?: Omit<GridValueOptionsParams, 'field'>): import("@mui/x-data-grid").ValueOptions[] | undefined;
 export declare function getValueFromValueOptions(value: string, valueOptions: any[] | undefined, getOptionValue: NonNullable<GridSingleSelectColDef['getOptionValue']>): any;

package/components/panel/filterPanel/index.d.ts

@@ -3,8 +3,8 @@ export { GridFilterInputValue, type GridTypeFilterInputValueProps } from "./Grid
 export * from "./GridFilterInputDate.js";
 export * from "./GridFilterInputSingleSelect.js";
 export { GridFilterInputBoolean } from "./GridFilterInputBoolean.js";
-export type { GridFilterInputBooleanProps } from './GridFilterInputBoolean';
+export type { GridFilterInputBooleanProps } from "./GridFilterInputBoolean.js";
 export { GridFilterPanel } from "./GridFilterPanel.js";
-export type { GetColumnForNewFilterArgs } from './GridFilterPanel';
+export type { GetColumnForNewFilterArgs } from "./GridFilterPanel.js";
 export * from "./GridFilterInputMultipleValue.js";
 export * from "./GridFilterInputMultipleSingleSelect.js";

package/components/quickFilter/QuickFilter.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { QuickFilterState } from "./QuickFilterContext.js";
 import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
-import type { GridFilterModel } from '../../models';
+import type { GridFilterModel } from "../../models/index.js";
 export type QuickFilterProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> & {
   /**
    * Function responsible for parsing text input in an array of independent values for quick filtering.

package/components/quickFilter/QuickFilterClear.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
-import type { GridSlotProps } from '../../models';
+import type { GridSlotProps } from "../../models/index.js";
 import { QuickFilterState } from "./QuickFilterContext.js";
 export type QuickFilterClearProps = Omit<GridSlotProps['baseIconButton'], 'className'> & {
   /**

package/components/quickFilter/QuickFilterControl.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
-import type { GridSlotProps } from '../../models';
+import type { GridSlotProps } from "../../models/index.js";
 import { QuickFilterState } from "./QuickFilterContext.js";
 export type QuickFilterControlProps = Omit<GridSlotProps['baseTextField'], 'className'> & {
   /**

package/components/quickFilter/QuickFilterTrigger.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
-import type { GridSlotProps } from '../../models';
+import type { GridSlotProps } from "../../models/index.js";
 import { QuickFilterState } from "./QuickFilterContext.js";
 export type QuickFilterTriggerProps = Omit<GridSlotProps['baseButton'], 'className'> & {
   /**

package/components/toolbar/GridToolbarColumnsButton.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { GridSlotProps } from '../../models/gridSlotsComponentsProps';
+import type { GridSlotProps } from "../../models/gridSlotsComponentsProps.js";
 interface GridToolbarColumnsButtonProps {
   /**
    * The props used for each slot inside.

package/components/toolbar/GridToolbarDensitySelector.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { GridSlotProps } from '../../models/gridSlotsComponentsProps';
+import type { GridSlotProps } from "../../models/gridSlotsComponentsProps.js";
 interface GridToolbarDensitySelectorProps {
   /**
    * The props used for each slot inside.

package/components/toolbar/GridToolbarExport.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { GridSlotProps } from '../../models/gridSlotsComponentsProps';
+import type { GridSlotProps } from "../../models/gridSlotsComponentsProps.js";
 import { GridCsvExportOptions, GridPrintExportOptions } from "../../models/gridExport.js";
 export interface GridExportDisplayOptions {
   /**

package/components/toolbar/GridToolbarExportContainer.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { GridSlotProps } from '../../models/gridSlotsComponentsProps';
+import type { GridSlotProps } from "../../models/gridSlotsComponentsProps.js";
 interface GridToolbarExportContainerProps {
   /**
    * The props used for each slot inside.

package/components/toolbar/GridToolbarFilterButton.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { GridSlotProps } from '../../models/gridSlotsComponentsProps';
+import type { GridSlotProps } from "../../models/gridSlotsComponentsProps.js";
 export interface GridToolbarFilterButtonProps {
   /**
    * The props used for each slot inside.

package/components/toolbar/GridToolbarFilterButton.js

@@ -35,8 +35,7 @@ const useUtilityClasses = ownerState => {
 };
 const GridToolbarFilterListRoot = (0, _styles.styled)('ul', {
   name: 'MuiDataGrid',
-  slot: 'ToolbarFilterList',
-  overridesResolver: (_props, styles) => styles.toolbarFilterList
+  slot: 'ToolbarFilterList'
 })({
   margin: _cssVariables.vars.spacing(1, 1, 0.5),
   padding: _cssVariables.vars.spacing(0, 1)

package/components/toolbar/index.d.ts

@@ -1,7 +1,7 @@
 export * from "./GridToolbar.js";
 export * from "./GridToolbarColumnsButton.js";
 export * from "./GridToolbarDensitySelector.js";
-export type { GridExportDisplayOptions, GridExportMenuItemProps, GridCsvExportMenuItemProps, GridPrintExportMenuItemProps, GridToolbarExportProps } from './GridToolbarExport';
+export type { GridExportDisplayOptions, GridExportMenuItemProps, GridCsvExportMenuItemProps, GridPrintExportMenuItemProps, GridToolbarExportProps } from "./GridToolbarExport.js";
 export { GridCsvExportMenuItem, GridPrintExportMenuItem, GridToolbarExport } from "./GridToolbarExport.js";
 export * from "./GridToolbarFilterButton.js";
 export * from "./GridToolbarExportContainer.js";

package/components/toolbarV8/ToolbarButton.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
-import type { GridSlotProps } from '../../models';
+import type { GridSlotProps } from "../../models/index.js";
 export type ToolbarButtonProps = GridSlotProps['baseIconButton'] & {
   /**
    * A function to customize rendering of the component.

package/components/virtualization/GridVirtualScrollerRenderZone.js

@@ -32,8 +32,7 @@ const useUtilityClasses = ownerState => {
 };
 const VirtualScrollerRenderZoneRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
-  slot: 'VirtualScrollerRenderZone',
-  overridesResolver: (props, styles) => styles.virtualScrollerRenderZone
+  slot: 'VirtualScrollerRenderZone'
 })({
   position: 'absolute',
   display: 'flex',

package/constants/dataGridPropsDefaultValues.d.ts

@@ -1,4 +1,4 @@
-import type { DataGridPropsWithDefaultValues } from '../models/props/DataGridProps';
+import type { DataGridPropsWithDefaultValues } from "../models/props/DataGridProps.js";
 /**
  * The default values of `DataGridPropsWithDefaultValues` to inject in the props of DataGrid.
  */

package/esm/DataGrid/DataGrid.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { DataGridProps } from "../models/props/DataGridProps.js";
 import { GridValidRowModel } from "../models/gridRows.js";
-export type { GridSlotsComponent as GridSlots } from '../models';
+export type { GridSlotsComponent as GridSlots } from "../models/index.js";
 interface DataGridComponent {
   <R extends GridValidRowModel = any>(props: DataGridProps<R> & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
   propTypes?: any;

package/esm/DataGrid/useDataGridProps.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useThemeProps } from '@mui/material/styles';
+import { useTheme } from '@mui/material/styles';
+import { getThemeProps } from '@mui/system';
 import { GRID_DEFAULT_LOCALE_TEXT } from "../constants/index.js";
 import { DATA_GRID_DEFAULT_SLOTS_COMPONENTS } from "../constants/defaultGridSlotsComponents.js";
 import { computeSlots } from "../internals/utils/index.js";
@@ -24,12 +25,12 @@ const getDataGridForcedProps = themedProps => _extends({}, DATA_GRID_FORCED_PROP
 } : {});
 const defaultSlots = DATA_GRID_DEFAULT_SLOTS_COMPONENTS;
 export const useDataGridProps = inProps => {
-  const themedProps =
-  // eslint-disable-next-line material-ui/mui-name-matches-component-name
-  useThemeProps({
+  const theme = useTheme();
+  const themedProps = React.useMemo(() => getThemeProps({
     props: inProps,
+    theme,
     name: 'MuiDataGrid'
-  });
+  }), [theme, inProps]);
   const localeText = React.useMemo(() => _extends({}, GRID_DEFAULT_LOCALE_TEXT, themedProps.localeText), [themedProps.localeText]);
   const slots = React.useMemo(() => computeSlots({
     defaultSlots,

package/esm/colDef/gridDefaultColumnTypes.d.ts

@@ -1,3 +1,3 @@
-import type { GridColumnTypesRecord } from '../models/colDef/gridColumnTypesRecord';
+import type { GridColumnTypesRecord } from "../models/colDef/gridColumnTypesRecord.js";
 export declare const DEFAULT_GRID_COL_TYPE_KEY = "string";
 export declare const getGridDefaultColumnTypes: () => GridColumnTypesRecord;

package/esm/colDef/gridNumericOperators.d.ts

@@ -1,6 +1,6 @@
 import { GridFilterOperator } from "../models/gridFilterOperator.js";
-import type { GridFilterInputValueProps } from '../models/gridFilterInputComponent';
-import type { GetApplyQuickFilterFn } from '../models/colDef/gridColDef';
+import type { GridFilterInputValueProps } from "../models/gridFilterInputComponent.js";
+import type { GetApplyQuickFilterFn } from "../models/colDef/gridColDef.js";
 export declare const getGridNumericQuickFilterFn: GetApplyQuickFilterFn<any, number | string | null>;
 export declare const getGridNumericOperators: () => GridFilterOperator<any, number | string | null, any, GridFilterInputValueProps & {
   type?: "number";

package/esm/colDef/gridStringOperators.d.ts

@@ -1,4 +1,4 @@
-import type { GetApplyQuickFilterFn } from '../models/colDef/gridColDef';
+import type { GetApplyQuickFilterFn } from "../models/colDef/gridColDef.js";
 import { GridFilterOperator } from "../models/gridFilterOperator.js";
 export declare const getGridStringQuickFilterFn: GetApplyQuickFilterFn<any, unknown>;
 export declare const getGridStringOperators: (disableTrim?: boolean) => GridFilterOperator<any, number | string | null, any>[];

package/esm/components/GridDetailPanels.d.ts

@@ -1,4 +1,4 @@
-import type { VirtualScroller } from '../hooks/features/virtualization/useGridVirtualScroller';
+import type { VirtualScroller } from "../hooks/features/virtualization/useGridVirtualScroller.js";
 export interface GridDetailPanelsProps {
   virtualScroller: VirtualScroller;
 }

package/esm/components/GridPinnedRows.d.ts

@@ -1,4 +1,4 @@
-import type { VirtualScroller } from '../hooks/features/virtualization/useGridVirtualScroller';
+import type { VirtualScroller } from "../hooks/features/virtualization/useGridVirtualScroller.js";
 export interface GridPinnedRowsProps {
   position: 'top' | 'bottom';
   virtualScroller: VirtualScroller;

package/esm/components/GridRow.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { GridRowId, GridRowModel } from "../models/gridRows.js";
 import { GridPinnedColumns } from "../hooks/features/columns/index.js";
-import type { GridStateColDef } from '../models/colDef/gridColDef';
+import type { GridStateColDef } from "../models/colDef/gridColDef.js";
 export interface GridRowProps extends React.HTMLAttributes<HTMLDivElement> {
   row: GridRowModel;
   rowId: GridRowId;

package/esm/components/GridRowCount.js

@@ -23,8 +23,7 @@ const useUtilityClasses = ownerState => {
 };
 const GridRowCountRoot = styled('div', {
   name: 'MuiDataGrid',
-  slot: 'RowCount',
-  overridesResolver: (props, styles) => styles.rowCount
+  slot: 'RowCount'
 })({
   alignItems: 'center',
   display: 'flex',

package/esm/components/GridSelectedRowCount.js

@@ -23,8 +23,7 @@ const useUtilityClasses = ownerState => {
 };
 const GridSelectedRowCountRoot = styled('div', {
   name: 'MuiDataGrid',
-  slot: 'SelectedRowCount',
-  overridesResolver: (props, styles) => styles.selectedRowCount
+  slot: 'SelectedRowCount'
 })({
   alignItems: 'center',
   display: 'flex',

package/esm/components/GridSkeletonLoadingOverlay.js

@@ -23,8 +23,7 @@ import { attachPinnedStyle } from "../internals/utils/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const SkeletonOverlay = styled('div', {
   name: 'MuiDataGrid',
-  slot: 'SkeletonLoadingOverlay',
-  overridesResolver: (props, styles) => styles.skeletonLoadingOverlay
+  slot: 'SkeletonLoadingOverlay'
 })({
   minWidth: '100%',
   width: 'max-content',

package/esm/components/base/GridOverlays.js

@@ -14,8 +14,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const GridOverlayWrapperRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'OverlayWrapper',
-  shouldForwardProp: prop => prop !== 'overlayType' && prop !== 'loadingOverlayVariant' && prop !== 'right',
-  overridesResolver: (props, styles) => styles.overlayWrapper
+  shouldForwardProp: prop => prop !== 'overlayType' && prop !== 'loadingOverlayVariant' && prop !== 'right'
 })(({
   overlayType,
   loadingOverlayVariant,
@@ -39,8 +38,7 @@ loadingOverlayVariant !== 'skeleton' ? {
 const GridOverlayWrapperInner = styled('div', {
   name: 'MuiDataGrid',
   slot: 'OverlayWrapperInner',
-  shouldForwardProp: prop => prop !== 'overlayType' && prop !== 'loadingOverlayVariant',
-  overridesResolver: (props, styles) => styles.overlayWrapperInner
+  shouldForwardProp: prop => prop !== 'overlayType' && prop !== 'loadingOverlayVariant'
 })({});
 const useUtilityClasses = ownerState => {
   const {

package/esm/components/cell/GridActionsCellItem.d.ts

@@ -44,7 +44,7 @@ declare const GridActionsCellItem: React.ForwardRefExoticComponent<GridActionsCe
 } & import("@mui/x-data-grid").BaseMenuItemPropsOverrides, "component">) | Omit<GridActionsCellItemCommonProps & {
   showInMenu?: false;
   icon: React.ReactElement<any>;
-} & Omit<Omit<import("../../models/gridBaseSlots").ButtonProps, "startIcon"> & {
+} & Omit<Omit<import("../../models/gridBaseSlots.js").ButtonProps, "startIcon"> & {
   label?: string;
   color?: "default" | "inherit" | "primary";
   edge?: "start" | "end" | false;

package/esm/components/cell/GridBooleanCell.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { GridColDef } from '../../models/colDef/gridColDef';
-import type { GridRenderCellParams } from '../../models/params/gridCellParams';
+import type { GridColDef } from "../../models/colDef/gridColDef.js";
+import type { GridRenderCellParams } from "../../models/params/gridCellParams.js";
 interface GridBooleanCellProps extends GridRenderCellParams {
   hideDescendantCount?: boolean;
 }

package/esm/components/cell/GridEditInputCell.js

@@ -52,9 +52,6 @@ const GridEditInputCell = forwardRef((props, ref) => {
   const classes = useUtilityClasses(rootProps);
   const handleChange = React.useCallback(async event => {
     const newValue = event.target.value;
-    if (onValueChange) {
-      await onValueChange(event, newValue);
-    }
     const column = apiRef.current.getColumn(field);
     let parsedValue = newValue;
     if (column.valueParser) {
@@ -68,6 +65,9 @@ const GridEditInputCell = forwardRef((props, ref) => {
       debounceMs,
       unstable_skipValueParser: true
     }, event);
+    if (onValueChange) {
+      await onValueChange(event, newValue);
+    }
   }, [apiRef, debounceMs, field, id, onValueChange]);
   const meta = apiRef.current.unstable_getEditCellMeta(id, field);
   React.useEffect(() => {

package/esm/components/cell/GridEditSingleSelectCell.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { GridSlotProps } from '../../models/gridSlotsComponentsProps';
+import type { GridSlotProps } from "../../models/gridSlotsComponentsProps.js";
 import { GridRenderEditCellParams } from "../../models/params/gridCellParams.js";
 export interface GridEditSingleSelectCellProps extends GridRenderEditCellParams {
   /**

package/esm/components/cell/index.d.ts

@@ -1,5 +1,5 @@
 export { GridCell } from "./GridCell.js";
-export type { GridCellProps } from './GridCell';
+export type { GridCellProps } from "./GridCell.js";
 export * from "./GridBooleanCell.js";
 export * from "./GridEditBooleanCell.js";
 export * from "./GridEditDateCell.js";

package/esm/components/columnHeaders/GridBaseColumnHeaders.js

@@ -20,8 +20,7 @@ const useUtilityClasses = ownerState => {
 };
 const GridColumnHeadersRoot = styled('div', {
   name: 'MuiDataGrid',
-  slot: 'ColumnHeaders',
-  overridesResolver: (props, styles) => styles.columnHeaders
+  slot: 'ColumnHeaders'
 })({
   display: 'flex',
   flexDirection: 'column',

package/esm/components/columnHeaders/GridColumnHeaderTitle.js

@@ -22,8 +22,7 @@ const useUtilityClasses = ownerState => {
 };
 const GridColumnHeaderTitleRoot = styled('div', {
   name: 'MuiDataGrid',
-  slot: 'ColumnHeaderTitle',
-  overridesResolver: (props, styles) => styles.columnHeaderTitle
+  slot: 'ColumnHeaderTitle'
 })({
   textOverflow: 'ellipsis',
   overflow: 'hidden',

package/esm/components/columnHeaders/GridIconButtonContainer.js

@@ -20,8 +20,7 @@ const useUtilityClasses = ownerState => {
 };
 const GridIconButtonContainerRoot = styled('div', {
   name: 'MuiDataGrid',
-  slot: 'IconButtonContainer',
-  overridesResolver: (props, styles) => styles.iconButtonContainer
+  slot: 'IconButtonContainer'
 })(() => ({
   display: 'flex',
   visibility: 'hidden',

package/esm/components/columnSelection/GridCellCheckboxRenderer.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { GridRenderCellParams } from '../../models/params/gridCellParams';
+import type { GridRenderCellParams } from "../../models/params/gridCellParams.js";
 declare const GridCellCheckboxForwardRef: React.ForwardRefExoticComponent<GridRenderCellParams<any, any, any, import("@mui/x-data-grid").GridTreeNodeWithRender>> | React.ForwardRefExoticComponent<GridRenderCellParams<any, any, any, import("@mui/x-data-grid").GridTreeNodeWithRender> & React.RefAttributes<HTMLInputElement>>;
 export { GridCellCheckboxForwardRef };
 export declare const GridCellCheckboxRenderer: React.ForwardRefExoticComponent<GridRenderCellParams<any, any, any, import("@mui/x-data-grid").GridTreeNodeWithRender>> | React.ForwardRefExoticComponent<GridRenderCellParams<any, any, any, import("@mui/x-data-grid").GridTreeNodeWithRender> & React.RefAttributes<HTMLInputElement>>;

package/esm/components/columnSelection/GridHeaderCheckbox.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
-import type { GridColumnHeaderParams } from '../../models/params/gridColumnHeaderParams';
+import type { GridColumnHeaderParams } from "../../models/params/gridColumnHeaderParams.js";
 declare const GridHeaderCheckbox: React.ForwardRefExoticComponent<GridColumnHeaderParams<import("@mui/x-data-grid").GridValidRowModel, any, any>> | React.ForwardRefExoticComponent<GridColumnHeaderParams<import("@mui/x-data-grid").GridValidRowModel, any, any> & React.RefAttributes<HTMLButtonElement>>;
 export { GridHeaderCheckbox };

package/esm/components/columnsManagement/GridColumnsManagement.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { TextFieldProps } from "../../models/gridBaseSlots.js";
-import type { GridColDef } from '../../models/colDef/gridColDef';
+import type { GridColDef } from "../../models/colDef/gridColDef.js";
 export interface GridColumnsManagementProps {
   sort?: 'asc' | 'desc';
   searchPredicate?: (column: GridColDef, searchValue: string) => boolean;

package/esm/components/columnsManagement/utils.d.ts

@@ -1,4 +1,4 @@
 import { GridColumnVisibilityModel } from "../../hooks/features/columns/gridColumnsInterfaces.js";
-import type { GridColumnsManagementProps } from './GridColumnsManagement';
+import type { GridColumnsManagementProps } from "./GridColumnsManagement.js";
 export declare const checkColumnVisibilityModelsSame: (a: GridColumnVisibilityModel, b: GridColumnVisibilityModel) => boolean;
 export declare const defaultSearchPredicate: NonNullable<GridColumnsManagementProps['searchPredicate']>;

package/esm/components/columnsPanel/ColumnsPanelTrigger.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
-import type { GridSlotProps } from '../../models';
+import type { GridSlotProps } from "../../models/index.js";
 export interface ColumnsPanelState {
   /**
    * If `true`, the columns panel is open.

package/esm/components/containers/GridFooterContainer.js

@@ -21,8 +21,7 @@ const useUtilityClasses = ownerState => {
 };
 const GridFooterContainerRoot = styled('div', {
   name: 'MuiDataGrid',
-  slot: 'FooterContainer',
-  overridesResolver: (props, styles) => styles.footerContainer
+  slot: 'FooterContainer'
 })({
   display: 'flex',
   justifyContent: 'space-between',

package/esm/components/containers/GridRootStyles.js

@@ -3,16 +3,6 @@ import { gridClasses as c } from "../../constants/gridClasses.js";
 import { vars } from "../../constants/cssVariables.js";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.js";
-const columnHeaderStyles = {
-  [`& .${c.iconButtonContainer}`]: {
-    visibility: 'visible',
-    width: 'auto'
-  },
-  [`& .${c.menuIcon}`]: {
-    width: 'auto',
-    visibility: 'visible'
-  }
-};
 const columnSeparatorTargetSize = 10;
 const columnSeparatorOffset = -5;
 const focusOutlineWidth = 1;
@@ -514,7 +504,16 @@ export const GridRootStyles = styled('div', {
       backgroundColor: headerBackground
     },
     '@media (hover: hover)': {
-      [`& .${c.columnHeader}:hover`]: columnHeaderStyles,
+      [`& .${c.columnHeader}:hover`]: {
+        [`& .${c.menuIcon}`]: {
+          width: 'auto',
+          visibility: 'visible'
+        },
+        [`& .${c.iconButtonContainer}`]: {
+          visibility: 'visible',
+          width: 'auto'
+        }
+      },
       [`& .${c.columnHeader}:not(.${c['columnHeader--sorted']}):hover .${c.sortButton},
         & .${c.pivotPanelField}:not(.${c['pivotPanelField--sorted']}):hover .${c.sortButton},
         & .${c.pivotPanelField}:not(.${c['pivotPanelField--sorted']}) .${c.sortButton}:focus-visible`]: {
@@ -522,7 +521,10 @@ export const GridRootStyles = styled('div', {
       }
     },
     '@media (hover: none)': {
-      [`& .${c.columnHeader}`]: columnHeaderStyles,
+      [`& .${c.columnHeader} .${c.menuIcon}`]: {
+        width: 'auto',
+        visibility: 'visible'
+      },
       [`& .${c.columnHeader}:focus,
         & .${c['columnHeader--siblingFocused']}`]: {
         [`.${c['columnSeparator--resizable']}`]: {

package/esm/components/export/ExportCsv.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
 import { GridCsvExportOptions } from "../../models/gridExport.js";
-import type { GridSlotProps } from '../../models';
+import type { GridSlotProps } from "../../models/index.js";
 export type ExportCsvProps = GridSlotProps['baseButton'] & {
   /**
    * A function to customize rendering of the component.

package/esm/components/export/ExportPrint.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
 import { GridPrintExportOptions } from "../../models/gridExport.js";
-import type { GridSlotProps } from '../../models';
+import type { GridSlotProps } from "../../models/index.js";
 export type ExportPrintProps = GridSlotProps['baseButton'] & {
   /**
    * A function to customize rendering of the component.

package/esm/components/filterPanel/FilterPanelTrigger.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
-import type { GridSlotProps } from '../../models';
+import type { GridSlotProps } from "../../models/index.js";
 export interface FilterPanelState {
   /**
    * If `true`, the filter panel is open.