@mui/x-data-grid 8.0.0-alpha.1 → 8.0.0-alpha.11

package/models/gridFilterInputComponent.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
+import { GridFilterItem } from './gridFilterItem';
+import type { GridApiCommon } from './api/gridApiCommon';
+import type { GridApiCommunity } from './api/gridApiCommunity';
+export type GridFilterInputSlotProps = {
+    size?: 'small' | 'medium';
+    label?: React.ReactNode;
+    placeholder?: string;
+};
+export type GridFilterInputValueProps<T extends GridFilterInputSlotProps = GridFilterInputSlotProps, Api extends GridApiCommon = GridApiCommunity> = {
+    item: GridFilterItem;
+    applyValue: (value: GridFilterItem) => void;
+    apiRef: RefObject<Api>;
+    inputRef?: React.Ref<HTMLElement | null>;
+    focusElementRef?: React.Ref<any>;
+    headerFilterMenu?: React.ReactNode;
+    clearButton?: React.ReactNode | null;
+    /**
+     * It is `true` if the filter either has a value or an operator with no value
+     * required is selected (for example `isEmpty`)
+     */
+    isFilterActive?: boolean;
+    onFocus?: React.FocusEventHandler;
+    onBlur?: React.FocusEventHandler;
+    tabIndex?: number;
+    disabled?: boolean;
+    className?: string;
+    slotProps?: {
+        root: T;
+    };
+};

package/models/gridFilterOperator.d.ts

@@ -1,16 +1,18 @@
 import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridFilterItem } from './gridFilterItem';
 import type { GridColDef } from './colDef/gridColDef';
 import type { GridValidRowModel } from './gridRows';
 import type { GridApiCommunity } from './api/gridApiCommunity';
-type ApplyFilterFn<R extends GridValidRowModel = any, V = any, F = V> = (value: V, row: R, column: GridColDef<R, V, F>, apiRef: React.MutableRefObject<GridApiCommunity>) => boolean;
+import type { GridFilterInputValueProps } from './gridFilterInputComponent';
+type ApplyFilterFn<R extends GridValidRowModel = any, V = any, F = V> = (value: V, row: R, column: GridColDef<R, V, F>, apiRef: RefObject<GridApiCommunity>) => boolean;
 export type GetApplyFilterFn<R extends GridValidRowModel = any, V = any, F = V> = (filterItem: GridFilterItem, column: GridColDef<R, V, F>) => null | ApplyFilterFn<R, V, F>;
 /**
  * Filter operator definition interface.
  * @demos
  *   - [Custom filter operator](/x/react-data-grid/filtering/customization/#create-a-custom-operator)
  */
-export interface GridFilterOperator<R extends GridValidRowModel = any, V = any, F = V> {
+export interface GridFilterOperator<R extends GridValidRowModel = any, V = any, F = V, I extends GridFilterInputValueProps<any> = GridFilterInputValueProps> {
     /**
      * The label of the filter operator.
      */
@@ -35,11 +37,11 @@ export interface GridFilterOperator<R extends GridValidRowModel = any, V = any,
     /**
      * The input component to render in the filter panel for this filter operator.
      */
-    InputComponent?: React.JSXElementConstructor<any>;
+    InputComponent?: React.JSXElementConstructor<I>;
     /**
      * The props to pass to the input component in the filter panel for this filter operator.
      */
-    InputComponentProps?: Record<string, any>;
+    InputComponentProps?: Partial<I>;
     /**
      * Converts the value of a filter item to a human-readable form.
      * @param {GridFilterItem['value']} value The filter item value.

package/models/gridIconSlotsComponent.d.ts

@@ -178,4 +178,9 @@ export interface GridIconSlotsComponent {
      * @default GridDragIcon
      */
     columnReorderIcon: React.JSXElementConstructor<any>;
+    /**
+     * Icon displayed to indicate that a menu item is selected.
+     * @default GridCheckIcon
+     */
+    menuItemCheckIcon: React.JSXElementConstructor<any>;
 }

package/models/gridSlotsComponent.d.ts

@@ -13,6 +13,11 @@ export interface GridBaseSlots {
      * @default Checkbox
      */
     baseCheckbox: React.JSXElementConstructor<GridSlotProps['baseCheckbox']>;
+    /**
+     * The custom CircularProgress component used in the grid.
+     * @default CircularProgress
+     */
+    baseCircularProgress: React.JSXElementConstructor<GridSlotProps['baseCircularProgress']>;
     /**
      * The custom Chip component used in the grid.
      * @default Chip
@@ -23,6 +28,11 @@ export interface GridBaseSlots {
      * @default Divider
      */
     baseDivider: React.JSXElementConstructor<GridSlotProps['baseDivider']>;
+    /**
+     * The custom LinearProgress component used in the grid.
+     * @default LinearProgress
+     */
+    baseLinearProgress: React.JSXElementConstructor<GridSlotProps['baseLinearProgress']>;
     /**
      * The custom MenuList component used in the grid.
      * @default MenuList
@@ -80,9 +90,14 @@ export interface GridBaseSlots {
     baseInputLabel: React.JSXElementConstructor<GridSlotProps['baseInputLabel']>;
     /**
      * The custom SelectOption component used in the grid.
-     * @default MenuItem
+     * @default SelectOption
      */
     baseSelectOption: React.JSXElementConstructor<GridSlotProps['baseSelectOption']>;
+    /**
+     * The custom Skeleton component used in the grid.
+     * @default Skeleton
+     */
+    baseSkeleton: React.JSXElementConstructor<GridSlotProps['baseSkeleton']>;
 }
 /**
  * Grid components React prop interface containing all the overridable components.

package/models/gridSlotsComponentsProps.d.ts

@@ -1,16 +1,17 @@
 import * as React from 'react';
-import type { BadgeProps } from '@mui/material/Badge';
+import type { BadgeProps as MUIBadgeProps } from '@mui/material/Badge';
+import type { ButtonProps as MUIButtonProps } from '@mui/material/Button';
 import type { CheckboxProps } from '@mui/material/Checkbox';
+import type { CircularProgressProps as MUICircularProgressProps } from '@mui/material/CircularProgress';
+import type { LinearProgressProps as MUILinearProgressProps } from '@mui/material/LinearProgress';
 import type { MenuListProps } from '@mui/material/MenuList';
-import type { MenuItemProps } from '@mui/material/MenuItem';
-import type { TextFieldProps } from '@mui/material/TextField';
+import type { MenuItemProps as MUIMenuItemProps } from '@mui/material/MenuItem';
 import type { FormControlProps } from '@mui/material/FormControl';
 import type { SelectProps } from '@mui/material/Select';
 import type { SwitchProps } from '@mui/material/Switch';
-import type { ButtonProps } from '@mui/material/Button';
-import type { IconButtonProps } from '@mui/material/IconButton';
+import type { IconButtonProps as MUIIconButtonProps } from '@mui/material/IconButton';
 import type { InputAdornmentProps } from '@mui/material/InputAdornment';
-import type { TooltipProps } from '@mui/material/Tooltip';
+import type { TooltipProps as MUITooltipProps } from '@mui/material/Tooltip';
 import type { InputLabelProps } from '@mui/material/InputLabel';
 import type { PopperProps } from '@mui/material/Popper';
 import type { TablePaginationProps } from '@mui/material/TablePagination';
@@ -33,13 +34,19 @@ import type { GridColumnsManagementProps } from '../components/columnsManagement
 import type { GridLoadingOverlayProps } from '../components/GridLoadingOverlay';
 import type { GridRowCountProps } from '../components/GridRowCount';
 import type { GridColumnHeaderSortIconProps } from '../components/columnHeaders/GridColumnHeaderSortIcon';
-type DividerProps = {};
+import type { BadgeProps, ButtonProps, CircularProgressProps, DividerProps, IconButtonProps, LinearProgressProps, MenuItemProps, SkeletonProps, TooltipProps, TextFieldProps } from './gridBaseSlots';
+type RootProps = React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>;
+type MainProps = React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>;
 export interface BaseBadgePropsOverrides {
 }
 export interface BaseCheckboxPropsOverrides {
 }
+export interface BaseCircularProgressPropsOverrides {
+}
 export interface BaseDividerPropsOverrides {
 }
+export interface BaseLinearProgressPropsOverrides {
+}
 export interface BaseMenuListPropsOverrides {
 }
 export interface BaseMenuItemPropsOverrides {
@@ -66,6 +73,8 @@ export interface BaseInputLabelPropsOverrides {
 }
 export interface BaseSelectOptionPropsOverrides {
 }
+export interface BaseSkeletonPropsOverrides {
+}
 export interface BaseChipPropsOverrides {
 }
 export interface CellPropsOverrides {
@@ -106,10 +115,12 @@ export interface SkeletonCellPropsOverrides {
 }
 export interface RowPropsOverrides {
 }
-export interface GridSlotProps {
+interface BaseSlotProps {
     baseBadge: BadgeProps & BaseBadgePropsOverrides;
     baseCheckbox: CheckboxProps & BaseCheckboxPropsOverrides;
+    baseCircularProgress: CircularProgressProps & BaseCircularProgressPropsOverrides;
     baseDivider: DividerProps & BaseDividerPropsOverrides;
+    baseLinearProgress: LinearProgressProps & BaseLinearProgressPropsOverrides;
     baseMenuList: MenuListProps & BaseMenuListPropsOverrides;
     baseMenuItem: MenuItemProps & BaseMenuItemPropsOverrides;
     baseTextField: TextFieldProps & BaseTextFieldPropsOverrides;
@@ -127,7 +138,19 @@ export interface GridSlotProps {
         value: any;
         children?: React.ReactNode;
     } & BaseSelectOptionPropsOverrides;
+    baseSkeleton: SkeletonProps & BaseSkeletonPropsOverrides;
     baseChip: ChipProps & BaseChipPropsOverrides;
+}
+interface MaterialSlotProps {
+    baseBadge: MUIBadgeProps;
+    baseButton: MUIButtonProps;
+    baseIconButton: MUIIconButtonProps;
+    baseLinearProgress: MUILinearProgressProps;
+    baseCircularProgress: MUICircularProgressProps;
+    baseMenuItem: MUIMenuItemProps;
+    baseTooltip: MUITooltipProps;
+}
+interface ElementSlotProps {
     cell: GridCellProps & CellPropsOverrides;
     columnHeaders: GridColumnHeadersProps;
     columnHeaderFilterIconButton: ColumnHeaderFilterIconButtonProps & ColumnHeaderFilterIconButtonPropsOverrides;
@@ -148,7 +171,20 @@ export interface GridSlotProps {
     row: GridRowProps & RowPropsOverrides;
     skeletonCell: GridSkeletonCellProps & SkeletonCellPropsOverrides;
     toolbar: GridToolbarProps & ToolbarPropsOverrides;
-}
+    /**
+     * Props passed to the `.main` (role="grid") element.
+     */
+    main: MainProps;
+    /**
+     * Props passed to the `.root` element.
+     */
+    root: RootProps;
+}
+type Select<A, B, K> = K extends keyof A ? A[K] : K extends keyof B ? B[K] : never;
+type Merge<A, B> = {
+    [K in keyof A | keyof B]: K extends 'ref' ? Select<A, B, 'ref'> : K extends keyof A & keyof B ? A[K] & B[K] : K extends keyof B ? B[K] : K extends keyof A ? A[K] : never;
+};
+export type GridSlotProps = Merge<BaseSlotProps, MaterialSlotProps> & ElementSlotProps;
 /**
  * Overridable components props dynamically passed to the component at rendering.
  */

package/models/gridStateCommunity.d.ts

@@ -45,4 +45,8 @@ export interface GridInitialStateCommunity {
     columns?: GridColumnsInitialState;
     preferencePanel?: GridPreferencePanelInitialState;
     density?: GridDensityState;
+    scroll?: {
+        top: number;
+        left: number;
+    };
 }

package/models/index.d.ts

@@ -5,6 +5,7 @@ export * from './gridEditRowModel';
 export * from './gridFeatureMode';
 export * from './gridFilterItem';
 export * from './gridFilterModel';
+export type { GridFilterInputValueProps } from './gridFilterInputComponent';
 export * from './gridPaginationProps';
 export * from './gridRenderContextProps';
 export * from './gridRows';

package/models/props/DataGridProps.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { SxProps } from '@mui/system';
 import { Theme } from '@mui/material/styles';
 import { CommonProps } from '@mui/material/OverridableComponent';
@@ -223,14 +224,6 @@ export interface DataGridPropsWithDefaultValues<R extends GridValidRowModel = an
      * @default false
      */
     ignoreDiacritics: boolean;
-    /**
-     * If `select`, a group header checkbox in indeterminate state (like "Select All" checkbox)
-     * will select all the rows under it.
-     * If `deselect`, it will deselect all the rows under it.
-     * Works only if `checkboxSelection` is enabled.
-     * @default "deselect"
-     */
-    indeterminateCheckboxAction: 'select' | 'deselect';
     /**
      * If `true`, the selection model will retain selected rows that do not exist.
      * Useful when using server side pagination and row selections need to be retained
@@ -346,14 +339,6 @@ export interface DataGridPropsWithDefaultValues<R extends GridValidRowModel = an
      * @default '\t'
      */
     clipboardCopyCellDelimiter: string;
-    /**
-     * The milliseconds delay to wait after measuring the row height before recalculating row positions.
-     * Setting it to a lower value could be useful when using dynamic row height,
-     * but might reduce performance when displaying a large number of rows.
-     * @default 166
-     * @deprecated
-     */
-    rowPositionsDebounceMs: number;
     /**
      * If `true`, columns are autosized after the datagrid is mounted.
      * @default false
@@ -368,7 +353,15 @@ export interface DataGridPropsWithDefaultValues<R extends GridValidRowModel = an
      * If `true`, the Data Grid will auto span the cells over the rows having the same value.
      * @default false
      */
-    unstable_rowSpanning: boolean;
+    rowSpanning: boolean;
+    /**
+     * If `true`, the Data Grid enables column virtualization when `getRowHeight` is set to `() => 'auto'`.
+     * By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly.
+     * For datasets with a large number of columns, this can cause performance issues.
+     * The downside of enabling this prop is that the row height will be estimated based the cells that are currently rendered, which can cause row height change when scrolling horizontally.
+     * @default false
+     */
+    virtualizeColumnsWithAutoRowHeight: boolean;
 }
 /**
  * The Data Grid props with no default value.
@@ -377,12 +370,7 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
     /**
      * The ref object that allows Data Grid manipulation. Can be instantiated with `useGridApiRef()`.
      */
-    apiRef?: React.MutableRefObject<GridApiCommunity>;
-    /**
-     * Forwarded props for the Data Grid root element.
-     * @ignore - do not document.
-     */
-    forwardedProps?: Record<string, unknown>;
+    apiRef?: RefObject<GridApiCommunity | null>;
     /**
      * Signal to the underlying logic what version of the public component API
      * of the Data Grid is exposed [[GridSignature]].
@@ -814,7 +802,7 @@ export interface DataGridProSharedPropsWithDefaultValue {
      * - Deselecting a descendant of a selected parent deselects the parent automatically.
      *
      * Works with tree data and row grouping on the client-side only.
-     * @default { parents: false, descendants: false }
+     * @default { parents: true, descendants: true }
      */
     rowSelectionPropagation: GridRowSelectionPropagation;
     /**

package/modern/DataGrid/DataGrid.js

@@ -3,43 +3,37 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { GridBody, GridFooterPlaceholder, GridHeader, GridRoot } from "../components/index.js";
+import { forwardRef } from '@mui/x-internals/forwardRef';
+import { GridRoot } from "../components/index.js";
 import { useGridAriaAttributes } from "../hooks/utils/useGridAriaAttributes.js";
 import { useGridRowAriaAttributes } from "../hooks/features/rows/useGridRowAriaAttributes.js";
 import { GridContextProvider } from "../context/GridContextProvider.js";
 import { useDataGridComponent } from "./useDataGridComponent.js";
 import { useDataGridProps } from "./useDataGridProps.js";
 import { propValidatorsDataGrid, validateProps } from "../internals/utils/propValidation.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 const configuration = {
   hooks: {
     useGridAriaAttributes,
     useGridRowAriaAttributes
   }
 };
-let propValidators;
-if (process.env.NODE_ENV !== 'production') {
-  propValidators = [...propValidatorsDataGrid,
-  // Only validate in MIT version
-  props => props.columns && props.columns.some(column => column.resizable) && [`MUI X: \`column.resizable = true\` is not a valid prop.`, 'Column resizing is not available in the MIT version.', '', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n') || undefined];
-}
-const DataGridRaw = /*#__PURE__*/React.forwardRef(function DataGrid(inProps, ref) {
+const DataGridRaw = forwardRef(function DataGrid(inProps, ref) {
   const props = useDataGridProps(inProps);
   const privateApiRef = useDataGridComponent(props.apiRef, props);
   if (process.env.NODE_ENV !== 'production') {
-    validateProps(props, propValidators);
+    validateProps(props, propValidatorsDataGrid);
   }
   return /*#__PURE__*/_jsx(GridContextProvider, {
     privateApiRef: privateApiRef,
     configuration: configuration,
     props: props,
-    children: /*#__PURE__*/_jsxs(GridRoot, _extends({
+    children: /*#__PURE__*/_jsx(GridRoot, _extends({
       className: props.className,
       style: props.style,
-      sx: props.sx,
+      sx: props.sx
+    }, props.slotProps?.root, {
       ref: ref
-    }, props.forwardedProps, {
-      children: [/*#__PURE__*/_jsx(GridHeader, {}), /*#__PURE__*/_jsx(GridBody, {}), /*#__PURE__*/_jsx(GridFooterPlaceholder, {})]
     }))
   });
 });
@@ -60,7 +54,7 @@ DataGridRaw.propTypes = {
    * The ref object that allows Data Grid manipulation. Can be instantiated with `useGridApiRef()`.
    */
   apiRef: PropTypes.shape({
-    current: PropTypes.object.isRequired
+    current: PropTypes.object
   }),
   /**
    * The label of the Data Grid.
@@ -95,6 +89,7 @@ DataGridRaw.propTypes = {
    */
   autosizeOptions: PropTypes.shape({
     columns: PropTypes.arrayOf(PropTypes.string),
+    disableColumnVirtualization: PropTypes.bool,
     expand: PropTypes.bool,
     includeHeaders: PropTypes.bool,
     includeOutliers: PropTypes.bool,
@@ -248,11 +243,6 @@ DataGridRaw.propTypes = {
     quickFilterLogicOperator: PropTypes.oneOf(['and', 'or']),
     quickFilterValues: PropTypes.array
   }),
-  /**
-   * Forwarded props for the Data Grid root element.
-   * @ignore - do not document.
-   */
-  forwardedProps: PropTypes.object,
   /**
    * Function that applies CSS classes dynamically on cells.
    * @param {GridCellParams} params With all properties from [[GridCellParams]].
@@ -325,14 +315,6 @@ DataGridRaw.propTypes = {
     clipboardExport: PropTypes.bool,
     csvExport: PropTypes.bool
   }), PropTypes.bool]),
-  /**
-   * If `select`, a group header checkbox in indeterminate state (like "Select All" checkbox)
-   * will select all the rows under it.
-   * If `deselect`, it will deselect all the rows under it.
-   * Works only if `checkboxSelection` is enabled.
-   * @default "deselect"
-   */
-  indeterminateCheckboxAction: PropTypes.oneOf(['deselect', 'select']),
   /**
    * The initial state of the DataGrid.
    * The data in it will be set in the state on initialization but will not be controlled.
@@ -690,14 +672,6 @@ DataGridRaw.propTypes = {
    * Controls the modes of the rows.
    */
   rowModesModel: PropTypes.object,
-  /**
-   * The milliseconds delay to wait after measuring the row height before recalculating row positions.
-   * Setting it to a lower value could be useful when using dynamic row height,
-   * but might reduce performance when displaying a large number of rows.
-   * @default 166
-   * @deprecated
-   */
-  rowPositionsDebounceMs: PropTypes.number,
   /**
    * Set of rows of type [[GridRowsProp]].
    * @default []
@@ -717,6 +691,11 @@ DataGridRaw.propTypes = {
    * @default "margin"
    */
   rowSpacingType: PropTypes.oneOf(['border', 'margin']),
+  /**
+   * If `true`, the Data Grid will auto span the cells over the rows having the same value.
+   * @default false
+   */
+  rowSpanning: PropTypes.bool,
   /**
    * Override the height/width of the Data Grid inner scrollbar.
    */
@@ -763,8 +742,11 @@ DataGridRaw.propTypes = {
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   /**
-   * If `true`, the Data Grid will auto span the cells over the rows having the same value.
+   * If `true`, the Data Grid enables column virtualization when `getRowHeight` is set to `() => 'auto'`.
+   * By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly.
+   * For datasets with a large number of columns, this can cause performance issues.
+   * The downside of enabling this prop is that the row height will be estimated based the cells that are currently rendered, which can cause row height change when scrolling horizontally.
    * @default false
    */
-  unstable_rowSpanning: PropTypes.bool
+  virtualizeColumnsWithAutoRowHeight: PropTypes.bool
 };

package/modern/DataGrid/useDataGridComponent.js

@@ -41,9 +41,9 @@ export const useDataGridComponent = (inputApiRef, props) => {
   /**
    * Register all state initializers here.
    */
-  useGridInitializeState(dimensionsStateInitializer, apiRef, props);
   useGridInitializeState(rowSelectionStateInitializer, apiRef, props);
   useGridInitializeState(columnsStateInitializer, apiRef, props);
+  useGridInitializeState(paginationStateInitializer, apiRef, props);
   useGridInitializeState(rowsStateInitializer, apiRef, props);
   useGridInitializeState(editingStateInitializer, apiRef, props);
   useGridInitializeState(focusStateInitializer, apiRef, props);
@@ -53,11 +53,11 @@ export const useDataGridComponent = (inputApiRef, props) => {
   useGridInitializeState(rowSpanningStateInitializer, apiRef, props);
   useGridInitializeState(densityStateInitializer, apiRef, props);
   useGridInitializeState(columnResizeStateInitializer, apiRef, props);
-  useGridInitializeState(paginationStateInitializer, apiRef, props);
-  useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(columnMenuStateInitializer, apiRef, props);
   useGridInitializeState(columnGroupsStateInitializer, apiRef, props);
   useGridInitializeState(virtualizationStateInitializer, apiRef, props);
+  useGridInitializeState(dimensionsStateInitializer, apiRef, props);
+  useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(listViewStateInitializer, apiRef, props);
   useGridKeyboardNavigation(apiRef, props);
   useGridRowSelection(apiRef, props);

package/modern/DataGrid/useDataGridProps.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
 import { GRID_DEFAULT_LOCALE_TEXT } from "../constants/index.js";
 import { DATA_GRID_DEFAULT_SLOTS_COMPONENTS } from "../constants/defaultGridSlotsComponents.js";
-import { computeSlots, useProps } from "../internals/utils/index.js";
+import { computeSlots } from "../internals/utils/index.js";
 import { DATA_GRID_PROPS_DEFAULT_VALUES } from "../constants/dataGridPropsDefaultValues.js";
 const DATA_GRID_FORCED_PROPS = {
   disableMultipleColumnsFiltering: true,
@@ -19,12 +19,12 @@ const DATA_GRID_FORCED_PROPS = {
 };
 const defaultSlots = DATA_GRID_DEFAULT_SLOTS_COMPONENTS;
 export const useDataGridProps = inProps => {
-  const themedProps = useProps(
+  const themedProps =
   // eslint-disable-next-line material-ui/mui-name-matches-component-name
   useThemeProps({
     props: inProps,
     name: 'MuiDataGrid'
-  }));
+  });
   const localeText = React.useMemo(() => _extends({}, GRID_DEFAULT_LOCALE_TEXT, themedProps.localeText), [themedProps.localeText]);
   const slots = React.useMemo(() => computeSlots({
     defaultSlots,

package/modern/components/GridApiContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 export const GridApiContext = /*#__PURE__*/React.createContext(undefined);
 if (process.env.NODE_ENV !== 'production') {

package/modern/components/GridColumnHeaders.js

@@ -4,10 +4,11 @@ const _excluded = ["className", "visibleColumns", "sortColumnLookup", "filterCol
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { fastMemo } from '@mui/x-internals/fastMemo';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridColumnHeaders } from "../hooks/features/columnHeaders/useGridColumnHeaders.js";
 import { GridBaseColumnHeaders } from "./columnHeaders/GridBaseColumnHeaders.js";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders(props, ref) {
+const GridColumnHeaders = forwardRef(function GridColumnHeaders(props, ref) {
   const {
       visibleColumns,
       sortColumnLookup,
@@ -41,9 +42,8 @@ const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeade
     columnGroupsHeaderStructure,
     hasOtherElementInTabSequence
   });
-  return /*#__PURE__*/_jsxs(GridBaseColumnHeaders, _extends({
-    ref: ref
-  }, other, getInnerProps(), {
+  return /*#__PURE__*/_jsxs(GridBaseColumnHeaders, _extends({}, other, getInnerProps(), {
+    ref: ref,
     children: [getColumnGroupHeadersRows(), getColumnHeadersRow()]
   }));
 });

package/modern/components/GridConfigurationContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 export const GridConfigurationContext = /*#__PURE__*/React.createContext(undefined);
 if (process.env.NODE_ENV !== 'production') {

package/modern/components/GridFooter.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridSelector } from "../hooks/utils/useGridSelector.js";
 import { gridTopLevelRowCountSelector } from "../hooks/features/rows/gridRowsSelector.js";
 import { selectedGridRowsCountSelector } from "../hooks/features/rowSelection/gridRowSelectionSelector.js";
@@ -10,7 +11,7 @@ import { GridSelectedRowCount } from "./GridSelectedRowCount.js";
 import { GridFooterContainer } from "./containers/GridFooterContainer.js";
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const GridFooter = /*#__PURE__*/React.forwardRef(function GridFooter(props, ref) {
+const GridFooter = forwardRef(function GridFooter(props, ref) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const totalTopLevelRowCount = useGridSelector(apiRef, gridTopLevelRowCountSelector);
@@ -24,9 +25,8 @@ const GridFooter = /*#__PURE__*/React.forwardRef(function GridFooter(props, ref)
     visibleRowCount: visibleTopLevelRowCount
   })) : null;
   const paginationElement = rootProps.pagination && !rootProps.hideFooterPagination && rootProps.slots.pagination && /*#__PURE__*/_jsx(rootProps.slots.pagination, _extends({}, rootProps.slotProps?.pagination));
-  return /*#__PURE__*/_jsxs(GridFooterContainer, _extends({
-    ref: ref
-  }, props, {
+  return /*#__PURE__*/_jsxs(GridFooterContainer, _extends({}, props, {
+    ref: ref,
     children: [selectedRowCountElement, rowCountElement, paginationElement]
   }));
 });

package/modern/components/GridHeaders.js

@@ -18,7 +18,7 @@ function GridHeaders() {
   const filterColumnLookup = useGridSelector(apiRef, gridFilterActiveItemsLookupSelector);
   const sortColumnLookup = useGridSelector(apiRef, gridSortColumnLookupSelector);
   const columnHeaderTabIndexState = useGridSelector(apiRef, gridTabIndexColumnHeaderSelector);
-  const cellTabIndexState = useGridSelector(apiRef, gridTabIndexCellSelector);
+  const hasNoCellTabIndexState = useGridSelector(apiRef, () => gridTabIndexCellSelector(apiRef) === null);
   const columnGroupHeaderTabIndexState = useGridSelector(apiRef, gridTabIndexColumnGroupHeaderSelector);
   const columnHeaderFocus = useGridSelector(apiRef, gridFocusColumnHeaderSelector);
   const columnGroupHeaderFocus = useGridSelector(apiRef, gridFocusColumnGroupHeaderSelector);
@@ -26,7 +26,7 @@ function GridHeaders() {
   const columnMenuState = useGridSelector(apiRef, gridColumnMenuSelector);
   const columnVisibility = useGridSelector(apiRef, gridColumnVisibilityModelSelector);
   const columnGroupsHeaderStructure = useGridSelector(apiRef, gridColumnGroupsHeaderStructureSelector);
-  const hasOtherElementInTabSequence = !(columnGroupHeaderTabIndexState === null && columnHeaderTabIndexState === null && cellTabIndexState === null);
+  const hasOtherElementInTabSequence = !(columnGroupHeaderTabIndexState === null && columnHeaderTabIndexState === null && hasNoCellTabIndexState);
   const columnsContainerRef = apiRef.current.columnHeadersContainerRef;
   return /*#__PURE__*/_jsx(rootProps.slots.columnHeaders, _extends({
     ref: columnsContainerRef,

package/modern/components/GridLoadingOverlay.js

@@ -3,8 +3,8 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["variant", "noRowsVariant", "style"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import LinearProgress from '@mui/material/LinearProgress';
-import CircularProgress from '@mui/material/CircularProgress';
+import { forwardRef } from '@mui/x-internals/forwardRef';
+import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
 import { GridOverlay } from "./containers/GridOverlay.js";
 import { GridSkeletonLoadingOverlay } from "./GridSkeletonLoadingOverlay.js";
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
@@ -12,23 +12,23 @@ import { gridRowCountSelector, useGridSelector } from "../hooks/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const LOADING_VARIANTS = {
   'circular-progress': {
-    component: CircularProgress,
+    component: rootProps => rootProps.slots.baseCircularProgress,
     style: {}
   },
   'linear-progress': {
-    component: LinearProgress,
+    component: rootProps => rootProps.slots.baseLinearProgress,
     style: {
       display: 'block'
     }
   },
   skeleton: {
-    component: GridSkeletonLoadingOverlay,
+    component: () => GridSkeletonLoadingOverlay,
     style: {
       display: 'block'
     }
   }
 };
-const GridLoadingOverlay = /*#__PURE__*/React.forwardRef(function GridLoadingOverlay(props, ref) {
+const GridLoadingOverlay = forwardRef(function GridLoadingOverlay(props, ref) {
   const {
       variant = 'linear-progress',
       noRowsVariant = 'skeleton',
@@ -36,13 +36,15 @@ const GridLoadingOverlay = /*#__PURE__*/React.forwardRef(function GridLoadingOve
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
   const rowsCount = useGridSelector(apiRef, gridRowCountSelector);
   const activeVariant = LOADING_VARIANTS[rowsCount === 0 ? noRowsVariant : variant];
+  const Component = activeVariant.component(rootProps);
   return /*#__PURE__*/_jsx(GridOverlay, _extends({
-    ref: ref,
     style: _extends({}, activeVariant.style, style)
   }, other, {
-    children: /*#__PURE__*/_jsx(activeVariant.component, {})
+    ref: ref,
+    children: /*#__PURE__*/_jsx(Component, {})
   }));
 });
 process.env.NODE_ENV !== "production" ? GridLoadingOverlay.propTypes = {