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

package/modern/utils/createSelector.js

@@ -8,19 +8,6 @@ const reselectCreateSelector = createSelectorCreator({
     equalityCheck: Object.is
   }
 });
-
-// TODO v8: Remove this type
-
-// TODO v8: Rename this type to `OutputSelector`
-
-// TODO v8: Remove this type
-
-// TODO v8: Rename this type to `SelectorArgs`
-
-// TODO v8: Remove this type
-
-// TODO v8: Rename this type to `CreateSelectorFunction`
-
 const cache = new WeakMap();
 function checkIsAPIRef(value) {
   return 'current' in value && 'instanceId' in value.current;
@@ -28,83 +15,12 @@ function checkIsAPIRef(value) {
 const DEFAULT_INSTANCE_ID = {
   id: 'default'
 };
-
-// TODO v8: Remove this function
 export const createSelector = (a, b, c, d, e, f, ...other) => {
   if (other.length > 0) {
     throw new Error('Unsupported number of selectors');
   }
   let selector;
 
-  // eslint-disable-next-line id-denylist
-  if (a && b && c && d && e && f) {
-    selector = (stateOrApiRef, instanceIdParam) => {
-      const isAPIRef = checkIsAPIRef(stateOrApiRef);
-      const instanceId = instanceIdParam ?? (isAPIRef ? stateOrApiRef.current.instanceId : DEFAULT_INSTANCE_ID);
-      const state = isAPIRef ? stateOrApiRef.current.state : stateOrApiRef;
-      const va = a(state, instanceId);
-      const vb = b(state, instanceId);
-      const vc = c(state, instanceId);
-      const vd = d(state, instanceId);
-      const ve = e(state, instanceId);
-      return f(va, vb, vc, vd, ve);
-    };
-    // eslint-disable-next-line id-denylist
-  } else if (a && b && c && d && e) {
-    selector = (stateOrApiRef, instanceIdParam) => {
-      const isAPIRef = checkIsAPIRef(stateOrApiRef);
-      const instanceId = instanceIdParam ?? (isAPIRef ? stateOrApiRef.current.instanceId : DEFAULT_INSTANCE_ID);
-      const state = isAPIRef ? stateOrApiRef.current.state : stateOrApiRef;
-      const va = a(state, instanceId);
-      const vb = b(state, instanceId);
-      const vc = c(state, instanceId);
-      const vd = d(state, instanceId);
-      return e(va, vb, vc, vd);
-    };
-  } else if (a && b && c && d) {
-    selector = (stateOrApiRef, instanceIdParam) => {
-      const isAPIRef = checkIsAPIRef(stateOrApiRef);
-      const instanceId = instanceIdParam ?? (isAPIRef ? stateOrApiRef.current.instanceId : DEFAULT_INSTANCE_ID);
-      const state = isAPIRef ? stateOrApiRef.current.state : stateOrApiRef;
-      const va = a(state, instanceId);
-      const vb = b(state, instanceId);
-      const vc = c(state, instanceId);
-      return d(va, vb, vc);
-    };
-  } else if (a && b && c) {
-    selector = (stateOrApiRef, instanceIdParam) => {
-      const isAPIRef = checkIsAPIRef(stateOrApiRef);
-      const instanceId = instanceIdParam ?? (isAPIRef ? stateOrApiRef.current.instanceId : DEFAULT_INSTANCE_ID);
-      const state = isAPIRef ? stateOrApiRef.current.state : stateOrApiRef;
-      const va = a(state, instanceId);
-      const vb = b(state, instanceId);
-      return c(va, vb);
-    };
-  } else if (a && b) {
-    selector = (stateOrApiRef, instanceIdParam) => {
-      const isAPIRef = checkIsAPIRef(stateOrApiRef);
-      const instanceId = instanceIdParam ?? (isAPIRef ? stateOrApiRef.current.instanceId : DEFAULT_INSTANCE_ID);
-      const state = isAPIRef ? stateOrApiRef.current.state : stateOrApiRef;
-      const va = a(state, instanceId);
-      return b(va);
-    };
-  } else {
-    throw new Error('Missing arguments');
-  }
-
-  // We use this property to detect if the selector was created with createSelector
-  // or it's only a simple function the receives the state and returns part of it.
-  selector.acceptsApiRef = true;
-  return selector;
-};
-
-// TODO v8: Rename this function to `createSelector`
-export const createSelectorV8 = (a, b, c, d, e, f, ...other) => {
-  if (other.length > 0) {
-    throw new Error('Unsupported number of selectors');
-  }
-  let selector;
-
   // eslint-disable-next-line id-denylist
   if (a && b && c && d && e && f) {
     selector = (stateOrApiRef, args, instanceIdParam) => {
@@ -166,49 +82,14 @@ export const createSelectorV8 = (a, b, c, d, e, f, ...other) => {
   selector.acceptsApiRef = true;
   return selector;
 };
-
-// TODO v8: Remove this function
 export const createSelectorMemoized = (...args) => {
-  const selector = (stateOrApiRef, instanceId) => {
-    const isAPIRef = checkIsAPIRef(stateOrApiRef);
-    const cacheKey = isAPIRef ? stateOrApiRef.current.instanceId : instanceId ?? DEFAULT_INSTANCE_ID;
-    const state = isAPIRef ? stateOrApiRef.current.state : stateOrApiRef;
-    if (process.env.NODE_ENV !== 'production') {
-      if (cacheKey.id === 'default') {
-        warnOnce(['MUI X: A selector was called without passing the instance ID, which may impact the performance of the grid.', 'To fix, call it with `apiRef`, for example `mySelector(apiRef)`, or pass the instance ID explicitly, for example `mySelector(state, apiRef.current.instanceId)`.']);
-      }
-    }
-    const cacheArgsInit = cache.get(cacheKey);
-    const cacheArgs = cacheArgsInit ?? new Map();
-    const cacheFn = cacheArgs?.get(args);
-    if (cacheArgs && cacheFn) {
-      // We pass the cache key because the called selector might have as
-      // dependency another selector created with this `createSelector`.
-      return cacheFn(state, cacheKey);
-    }
-    const fn = reselectCreateSelector(...args);
-    if (!cacheArgsInit) {
-      cache.set(cacheKey, cacheArgs);
-    }
-    cacheArgs.set(args, fn);
-    return fn(state, cacheKey);
-  };
-
-  // We use this property to detect if the selector was created with createSelector
-  // or it's only a simple function the receives the state and returns part of it.
-  selector.acceptsApiRef = true;
-  return selector;
-};
-
-// TODO v8: Rename this function to `createSelectorMemoized`
-export const createSelectorMemoizedV8 = (...args) => {
   const selector = (stateOrApiRef, selectorArgs, instanceId) => {
     const isAPIRef = checkIsAPIRef(stateOrApiRef);
     const cacheKey = isAPIRef ? stateOrApiRef.current.instanceId : instanceId ?? DEFAULT_INSTANCE_ID;
     const state = isAPIRef ? stateOrApiRef.current.state : stateOrApiRef;
     if (process.env.NODE_ENV !== 'production') {
       if (cacheKey.id === 'default') {
-        warnOnce(['MUI X: A selector was called without passing the instance ID, which may impact the performance of the grid.', 'To fix, call it with `apiRef`, for example `mySelector(apiRef)`, or pass the instance ID explicitly, for example `mySelector(state, apiRef.current.instanceId)`.']);
+        warnOnce(['MUI X: A selector was called without passing the instance ID, which may impact the performance of the grid.', 'To fix, call it with `apiRef`, for example `mySelector(apiRef)`, or pass the instance ID explicitly, for example `mySelector(state, args, apiRef.current.instanceId)`.']);
       }
     }
     const cacheArgsInit = cache.get(cacheKey);

package/modern/utils/domUtils.js

@@ -153,7 +153,7 @@ const findPinnedHeaders = ({
   const elements = [];
   api.columnHeadersContainerRef.current.querySelectorAll(`.${gridClasses[position === 'left' ? 'columnHeader--pinnedLeft' : 'columnHeader--pinnedRight']}`).forEach(element => {
     const currentColIndex = parseCellColIndex(element);
-    if (currentColIndex !== null && filterFn(currentColIndex)) {
+    if (currentColIndex !== null && filterFn(currentColIndex, element)) {
       elements.push(element);
     }
   });
@@ -174,7 +174,12 @@ export function findRightPinnedHeadersBeforeCol(api, col, isRtl) {
     api,
     position: isRtl ? 'left' : 'right',
     colIndex,
-    filterFn: index => isRtl ? index > colIndex : index < colIndex
+    filterFn: (index, element) => {
+      if (element.classList.contains(gridClasses['columnHeader--last'])) {
+        return false;
+      }
+      return isRtl ? index > colIndex : index < colIndex;
+    }
   });
 }
 export function findGridHeader(api, field) {

package/modern/utils/isJSDOM.js

@@ -0,0 +1 @@
+export const isJSDOM = typeof window !== 'undefined' && /jsdom|HappyDOM/.test(window.navigator.userAgent);

package/modern/utils/roundToDecimalPlaces.js

@@ -0,0 +1,3 @@
+export function roundToDecimalPlaces(value, decimals) {
+  return Math.round(value * 10 ** decimals) / 10 ** decimals;
+}

package/modern/utils/rtlFlipSide.js

@@ -0,0 +1,22 @@
+import { PinnedColumnPosition } from "../internals/constants.js";
+export const rtlFlipSide = (position, isRtl) => {
+  if (!position) {
+    return undefined;
+  }
+  if (!isRtl) {
+    if (position === PinnedColumnPosition.LEFT) {
+      return 'left';
+    }
+    if (position === PinnedColumnPosition.RIGHT) {
+      return 'right';
+    }
+  } else {
+    if (position === PinnedColumnPosition.LEFT) {
+      return 'right';
+    }
+    if (position === PinnedColumnPosition.RIGHT) {
+      return 'left';
+    }
+  }
+  return undefined;
+};

package/modern/utils/utils.js

@@ -196,4 +196,9 @@ export function deepClone(obj) {
  * of a `eslint-disable-next-line react-hooks/exhaustive-deps` because
  * that hint disables checks on all values instead of just one.
  */
-export function eslintUseValue(_) {}
+export function eslintUseValue(_) {}
+export const runIf = (condition, fn) => params => {
+  if (condition) {
+    fn(params);
+  }
+};

package/node/DataGrid/DataGrid.js

@@ -10,6 +10,7 @@ exports.DataGrid = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _components = require("../components");
 var _useGridAriaAttributes = require("../hooks/utils/useGridAriaAttributes");
 var _useGridRowAriaAttributes = require("../hooks/features/rows/useGridRowAriaAttributes");
@@ -24,29 +25,22 @@ const configuration = {
     useGridRowAriaAttributes: _useGridRowAriaAttributes.useGridRowAriaAttributes
   }
 };
-let propValidators;
-if (process.env.NODE_ENV !== 'production') {
-  propValidators = [..._propValidation.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 = (0, _forwardRef.forwardRef)(function DataGrid(inProps, ref) {
   const props = (0, _useDataGridProps.useDataGridProps)(inProps);
   const privateApiRef = (0, _useDataGridComponent.useDataGridComponent)(props.apiRef, props);
   if (process.env.NODE_ENV !== 'production') {
-    (0, _propValidation.validateProps)(props, propValidators);
+    (0, _propValidation.validateProps)(props, _propValidation.propValidatorsDataGrid);
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridContextProvider.GridContextProvider, {
     privateApiRef: privateApiRef,
     configuration: configuration,
     props: props,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.GridRoot, (0, _extends2.default)({
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GridRoot, (0, _extends2.default)({
       className: props.className,
       style: props.style,
-      sx: props.sx,
+      sx: props.sx
+    }, props.slotProps?.root, {
       ref: ref
-    }, props.forwardedProps, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GridHeader, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GridBody, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GridFooterPlaceholder, {})]
     }))
   });
 });
@@ -67,7 +61,7 @@ DataGridRaw.propTypes = {
    * The ref object that allows Data Grid manipulation. Can be instantiated with `useGridApiRef()`.
    */
   apiRef: _propTypes.default.shape({
-    current: _propTypes.default.object.isRequired
+    current: _propTypes.default.object
   }),
   /**
    * The label of the Data Grid.
@@ -102,6 +96,7 @@ DataGridRaw.propTypes = {
    */
   autosizeOptions: _propTypes.default.shape({
     columns: _propTypes.default.arrayOf(_propTypes.default.string),
+    disableColumnVirtualization: _propTypes.default.bool,
     expand: _propTypes.default.bool,
     includeHeaders: _propTypes.default.bool,
     includeOutliers: _propTypes.default.bool,
@@ -255,11 +250,6 @@ DataGridRaw.propTypes = {
     quickFilterLogicOperator: _propTypes.default.oneOf(['and', 'or']),
     quickFilterValues: _propTypes.default.array
   }),
-  /**
-   * Forwarded props for the Data Grid root element.
-   * @ignore - do not document.
-   */
-  forwardedProps: _propTypes.default.object,
   /**
    * Function that applies CSS classes dynamically on cells.
    * @param {GridCellParams} params With all properties from [[GridCellParams]].
@@ -332,14 +322,6 @@ DataGridRaw.propTypes = {
     clipboardExport: _propTypes.default.bool,
     csvExport: _propTypes.default.bool
   }), _propTypes.default.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.default.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.
@@ -697,14 +679,6 @@ DataGridRaw.propTypes = {
    * Controls the modes of the rows.
    */
   rowModesModel: _propTypes.default.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.default.number,
   /**
    * Set of rows of type [[GridRowsProp]].
    * @default []
@@ -724,6 +698,11 @@ DataGridRaw.propTypes = {
    * @default "margin"
    */
   rowSpacingType: _propTypes.default.oneOf(['border', 'margin']),
+  /**
+   * If `true`, the Data Grid will auto span the cells over the rows having the same value.
+   * @default false
+   */
+  rowSpanning: _propTypes.default.bool,
   /**
    * Override the height/width of the Data Grid inner scrollbar.
    */
@@ -770,8 +749,11 @@ DataGridRaw.propTypes = {
    */
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
   /**
-   * 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.default.bool
+  virtualizeColumnsWithAutoRowHeight: _propTypes.default.bool
 };

package/node/DataGrid/useDataGridComponent.js

@@ -47,9 +47,9 @@ const useDataGridComponent = (inputApiRef, props) => {
   /**
    * Register all state initializers here.
    */
-  (0, _useGridInitializeState.useGridInitializeState)(_useGridDimensions.dimensionsStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridRowSelection.rowSelectionStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridColumns.columnsStateInitializer, apiRef, props);
+  (0, _useGridInitializeState.useGridInitializeState)(_useGridPagination.paginationStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridRows.rowsStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridEditing.editingStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridFocus.focusStateInitializer, apiRef, props);
@@ -59,11 +59,11 @@ const useDataGridComponent = (inputApiRef, props) => {
   (0, _useGridInitializeState.useGridInitializeState)(_useGridRowSpanning.rowSpanningStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridDensity.densityStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridColumnResize.columnResizeStateInitializer, apiRef, props);
-  (0, _useGridInitializeState.useGridInitializeState)(_useGridPagination.paginationStateInitializer, apiRef, props);
-  (0, _useGridInitializeState.useGridInitializeState)(_useGridRowsMeta.rowsMetaStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridColumnMenu.columnMenuStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridColumnGrouping.columnGroupsStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_virtualization.virtualizationStateInitializer, apiRef, props);
+  (0, _useGridInitializeState.useGridInitializeState)(_useGridDimensions.dimensionsStateInitializer, apiRef, props);
+  (0, _useGridInitializeState.useGridInitializeState)(_useGridRowsMeta.rowsMetaStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridListView.listViewStateInitializer, apiRef, props);
   (0, _useGridKeyboardNavigation.useGridKeyboardNavigation)(apiRef, props);
   (0, _useGridRowSelection.useGridRowSelection)(apiRef, props);

package/node/DataGrid/useDataGridProps.js

@@ -27,12 +27,12 @@ const DATA_GRID_FORCED_PROPS = {
 };
 const defaultSlots = _defaultGridSlotsComponents.DATA_GRID_DEFAULT_SLOTS_COMPONENTS;
 const useDataGridProps = inProps => {
-  const themedProps = (0, _utils.useProps)(
+  const themedProps =
   // eslint-disable-next-line material-ui/mui-name-matches-component-name
   (0, _styles.useThemeProps)({
     props: inProps,
     name: 'MuiDataGrid'
-  }));
+  });
   const localeText = React.useMemo(() => (0, _extends2.default)({}, _constants.GRID_DEFAULT_LOCALE_TEXT, themedProps.localeText), [themedProps.localeText]);
   const slots = React.useMemo(() => (0, _utils.computeSlots)({
     defaultSlots,

package/node/components/GridApiContext.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {

package/node/components/GridColumnHeaders.js

@@ -11,11 +11,12 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _fastMemo = require("@mui/x-internals/fastMemo");
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridColumnHeaders = require("../hooks/features/columnHeaders/useGridColumnHeaders");
 var _GridBaseColumnHeaders = require("./columnHeaders/GridBaseColumnHeaders");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["className", "visibleColumns", "sortColumnLookup", "filterColumnLookup", "columnHeaderTabIndexState", "columnGroupHeaderTabIndexState", "columnHeaderFocus", "columnGroupHeaderFocus", "headerGroupingMaxDepth", "columnMenuState", "columnVisibility", "columnGroupsHeaderStructure", "hasOtherElementInTabSequence"];
-const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders(props, ref) {
+const GridColumnHeaders = (0, _forwardRef.forwardRef)(function GridColumnHeaders(props, ref) {
   const {
       visibleColumns,
       sortColumnLookup,
@@ -49,9 +50,8 @@ const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeade
     columnGroupsHeaderStructure,
     hasOtherElementInTabSequence
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridBaseColumnHeaders.GridBaseColumnHeaders, (0, _extends2.default)({
-    ref: ref
-  }, other, getInnerProps(), {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridBaseColumnHeaders.GridBaseColumnHeaders, (0, _extends2.default)({}, other, getInnerProps(), {
+    ref: ref,
     children: [getColumnGroupHeadersRows(), getColumnHeadersRow()]
   }));
 });

package/node/components/GridConfigurationContext.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {

package/node/components/GridFooter.js

@@ -9,6 +9,7 @@ exports.GridFooter = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridSelector = require("../hooks/utils/useGridSelector");
 var _gridRowsSelector = require("../hooks/features/rows/gridRowsSelector");
 var _gridRowSelectionSelector = require("../hooks/features/rowSelection/gridRowSelectionSelector");
@@ -18,7 +19,7 @@ var _GridSelectedRowCount = require("./GridSelectedRowCount");
 var _GridFooterContainer = require("./containers/GridFooterContainer");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const GridFooter = exports.GridFooter = /*#__PURE__*/React.forwardRef(function GridFooter(props, ref) {
+const GridFooter = exports.GridFooter = (0, _forwardRef.forwardRef)(function GridFooter(props, ref) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const totalTopLevelRowCount = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridTopLevelRowCountSelector);
@@ -32,9 +33,8 @@ const GridFooter = exports.GridFooter = /*#__PURE__*/React.forwardRef(function G
     visibleRowCount: visibleTopLevelRowCount
   })) : null;
   const paginationElement = rootProps.pagination && !rootProps.hideFooterPagination && rootProps.slots.pagination && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.pagination, (0, _extends2.default)({}, rootProps.slotProps?.pagination));
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridFooterContainer.GridFooterContainer, (0, _extends2.default)({
-    ref: ref
-  }, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridFooterContainer.GridFooterContainer, (0, _extends2.default)({}, props, {
+    ref: ref,
     children: [selectedRowCountElement, rowCountElement, paginationElement]
   }));
 });

package/node/components/GridHeaders.js

@@ -26,7 +26,7 @@ function GridHeaders() {
   const filterColumnLookup = (0, _useGridSelector.useGridSelector)(apiRef, _gridFilterSelector.gridFilterActiveItemsLookupSelector);
   const sortColumnLookup = (0, _useGridSelector.useGridSelector)(apiRef, _gridSortingSelector.gridSortColumnLookupSelector);
   const columnHeaderTabIndexState = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusStateSelector.gridTabIndexColumnHeaderSelector);
-  const cellTabIndexState = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusStateSelector.gridTabIndexCellSelector);
+  const hasNoCellTabIndexState = (0, _useGridSelector.useGridSelector)(apiRef, () => (0, _gridFocusStateSelector.gridTabIndexCellSelector)(apiRef) === null);
   const columnGroupHeaderTabIndexState = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusStateSelector.gridTabIndexColumnGroupHeaderSelector);
   const columnHeaderFocus = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusStateSelector.gridFocusColumnHeaderSelector);
   const columnGroupHeaderFocus = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusStateSelector.gridFocusColumnGroupHeaderSelector);
@@ -34,7 +34,7 @@ function GridHeaders() {
   const columnMenuState = (0, _useGridSelector.useGridSelector)(apiRef, _columnMenuSelector.gridColumnMenuSelector);
   const columnVisibility = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnVisibilityModelSelector);
   const columnGroupsHeaderStructure = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnGroupsSelector.gridColumnGroupsHeaderStructureSelector);
-  const hasOtherElementInTabSequence = !(columnGroupHeaderTabIndexState === null && columnHeaderTabIndexState === null && cellTabIndexState === null);
+  const hasOtherElementInTabSequence = !(columnGroupHeaderTabIndexState === null && columnHeaderTabIndexState === null && hasNoCellTabIndexState);
   const columnsContainerRef = apiRef.current.columnHeadersContainerRef;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnHeaders, (0, _extends2.default)({
     ref: columnsContainerRef,

package/node/components/GridLoadingOverlay.js

@@ -10,8 +10,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _LinearProgress = _interopRequireDefault(require("@mui/material/LinearProgress"));
-var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
+var _useGridRootProps = require("../hooks/utils/useGridRootProps");
 var _GridOverlay = require("./containers/GridOverlay");
 var _GridSkeletonLoadingOverlay = require("./GridSkeletonLoadingOverlay");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
@@ -20,23 +20,23 @@ var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["variant", "noRowsVariant", "style"];
 const LOADING_VARIANTS = {
   'circular-progress': {
-    component: _CircularProgress.default,
+    component: rootProps => rootProps.slots.baseCircularProgress,
     style: {}
   },
   'linear-progress': {
-    component: _LinearProgress.default,
+    component: rootProps => rootProps.slots.baseLinearProgress,
     style: {
       display: 'block'
     }
   },
   skeleton: {
-    component: _GridSkeletonLoadingOverlay.GridSkeletonLoadingOverlay,
+    component: () => _GridSkeletonLoadingOverlay.GridSkeletonLoadingOverlay,
     style: {
       display: 'block'
     }
   }
 };
-const GridLoadingOverlay = exports.GridLoadingOverlay = /*#__PURE__*/React.forwardRef(function GridLoadingOverlay(props, ref) {
+const GridLoadingOverlay = exports.GridLoadingOverlay = (0, _forwardRef.forwardRef)(function GridLoadingOverlay(props, ref) {
   const {
       variant = 'linear-progress',
       noRowsVariant = 'skeleton',
@@ -44,13 +44,15 @@ const GridLoadingOverlay = exports.GridLoadingOverlay = /*#__PURE__*/React.forwa
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const rowsCount = (0, _hooks.useGridSelector)(apiRef, _hooks.gridRowCountSelector);
   const activeVariant = LOADING_VARIANTS[rowsCount === 0 ? noRowsVariant : variant];
+  const Component = activeVariant.component(rootProps);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridOverlay.GridOverlay, (0, _extends2.default)({
-    ref: ref,
     style: (0, _extends2.default)({}, activeVariant.style, style)
   }, other, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(activeVariant.component, {})
+    ref: ref,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {})
   }));
 });
 process.env.NODE_ENV !== "production" ? GridLoadingOverlay.propTypes = {

package/node/components/GridNoResultsOverlay.js

@@ -8,15 +8,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridNoResultsOverlay = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _GridOverlay = require("./containers/GridOverlay");
 var _jsxRuntime = require("react/jsx-runtime");
-const GridNoResultsOverlay = exports.GridNoResultsOverlay = /*#__PURE__*/React.forwardRef(function GridNoResultsOverlay(props, ref) {
+const GridNoResultsOverlay = exports.GridNoResultsOverlay = (0, _forwardRef.forwardRef)(function GridNoResultsOverlay(props, ref) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const noResultsOverlayLabel = apiRef.current.getLocaleText('noResultsOverlayLabel');
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridOverlay.GridOverlay, (0, _extends2.default)({
-    ref: ref
-  }, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridOverlay.GridOverlay, (0, _extends2.default)({}, props, {
+    ref: ref,
     children: noResultsOverlayLabel
   }));
 });

package/node/components/GridNoRowsOverlay.js

@@ -9,15 +9,15 @@ exports.GridNoRowsOverlay = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _GridOverlay = require("./containers/GridOverlay");
 var _jsxRuntime = require("react/jsx-runtime");
-const GridNoRowsOverlay = exports.GridNoRowsOverlay = /*#__PURE__*/React.forwardRef(function GridNoRowsOverlay(props, ref) {
+const GridNoRowsOverlay = exports.GridNoRowsOverlay = (0, _forwardRef.forwardRef)(function GridNoRowsOverlay(props, ref) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const noRowsLabel = apiRef.current.getLocaleText('noRowsLabel');
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridOverlay.GridOverlay, (0, _extends2.default)({
-    ref: ref
-  }, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridOverlay.GridOverlay, (0, _extends2.default)({}, props, {
+    ref: ref,
     children: noRowsLabel
   }));
 });

package/node/components/GridPagination.js

@@ -11,6 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _TablePagination = _interopRequireWildcard(require("@mui/material/TablePagination"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridSelector = require("../hooks/utils/useGridSelector");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
@@ -58,12 +59,13 @@ const defaultLabelDisplayedRows = ({
   if (!estimated) {
     return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
   }
-  return `${from}–${to} of ${count !== -1 ? count : `more than ${estimated > to ? estimated : to}`}`;
+  const estimateLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`;
+  return `${from}–${to} of ${count !== -1 ? count : estimateLabel}`;
 };
 
 // A mutable version of a readonly array.
 
-const GridPagination = exports.GridPagination = /*#__PURE__*/React.forwardRef(function GridPagination(props, ref) {
+const GridPagination = exports.GridPagination = (0, _forwardRef.forwardRef)(function GridPagination(props, ref) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const paginationModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridPaginationSelector.gridPaginationModelSelector);
@@ -127,7 +129,6 @@ const GridPagination = exports.GridPagination = /*#__PURE__*/React.forwardRef(fu
   const locales = apiRef.current.getLocaleText('MuiTablePagination');
   const wrappedLabelDisplayedRows = wrapLabelDisplayedRows(locales.labelDisplayedRows || defaultLabelDisplayedRows, estimatedRowCount);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPaginationRoot, (0, _extends2.default)({
-    ref: ref,
     component: "div",
     count: rowCount,
     page: computedPage
@@ -141,7 +142,9 @@ const GridPagination = exports.GridPagination = /*#__PURE__*/React.forwardRef(fu
     onRowsPerPageChange: handlePageSizeChange
   }, computedProps, locales, {
     labelDisplayedRows: wrappedLabelDisplayedRows
-  }, props));
+  }, props, {
+    ref: ref
+  }));
 });
 process.env.NODE_ENV !== "production" ? GridPagination.propTypes = {
   // ----------------------------- Warning --------------------------------