@mui/x-data-grid 7.0.0-beta.4 → 7.0.0-beta.6

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

@@ -1,10 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
-export const EMPTY_OFFSETS = {
-  top: 0,
-  left: 0
-};
 export const EMPTY_RENDER_CONTEXT = {
   firstRowIndex: 0,
   lastRowIndex: 0,
@@ -15,8 +11,7 @@ export const virtualizationStateInitializer = (state, props) => {
   const virtualization = {
     enabled: !props.disableVirtualization,
     enabledForColumns: true,
-    renderContext: EMPTY_RENDER_CONTEXT,
-    offsets: EMPTY_OFFSETS
+    renderContext: EMPTY_RENDER_CONTEXT
   };
   return _extends({}, state, {
     virtualization

package/modern/hooks/utils/useTimeout.js

@@ -1,12 +1,14 @@
+'use client';
+
 import { useLazyRef } from './useLazyRef';
 import { useOnMount } from './useOnMount';
-class Timeout {
+export class Timeout {
   constructor() {
-    this.currentId = 0;
+    this.currentId = null;
     this.clear = () => {
-      if (this.currentId !== 0) {
+      if (this.currentId !== null) {
         clearTimeout(this.currentId);
-        this.currentId = 0;
+        this.currentId = null;
       }
     };
     this.disposeEffect = () => {
@@ -16,9 +18,15 @@ class Timeout {
   static create() {
     return new Timeout();
   }
+  /**
+   * Executes `fn` after `delay`, clearing any previously scheduled call.
+   */
   start(delay, fn) {
     this.clear();
-    this.currentId = setTimeout(fn, delay);
+    this.currentId = setTimeout(() => {
+      this.currentId = null;
+      fn();
+    }, delay);
   }
 }
 export function useTimeout() {

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.0.0-beta.4
+ * @mui/x-data-grid v7.0.0-beta.6
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/internals/index.js

@@ -54,7 +54,7 @@ export { useGridVisibleRows, getVisibleRows } from '../hooks/utils/useGridVisibl
 export { useGridInitializeState } from '../hooks/utils/useGridInitializeState';
 export { getColumnsToExport, defaultGetRowsToExport } from '../hooks/features/export/utils';
 export * from '../utils/createControllablePromise';
-export { createSelector, createSelectorMemoized, unstable_resetCreateSelectorCache } from '../utils/createSelector';
+export { createSelector, createSelectorMemoized } from '../utils/createSelector';
 export { findParentElementFromClassName, getActiveElement, isEventTargetInPortal } from '../utils/domUtils';
 export { isNavigationKey, isPasteShortcut } from '../utils/keyboardUtils';
 export * from '../utils/utils';

package/modern/models/api/gridInfiniteLoaderApi.js

@@ -0,0 +1 @@
+export {};

package/modern/utils/createSelector.js

@@ -1,8 +1,6 @@
 import { createSelector as reselectCreateSelector } from 'reselect';
 import { buildWarning } from './warning';
-const cacheContainer = {
-  cache: new WeakMap()
-};
+const cache = new WeakMap();
 const missingInstanceIdWarning = buildWarning(['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`, e.g. `mySelector(apiRef)`, or pass the instance ID explicitly, e.g. `mySelector(state, apiRef.current.instanceId)`.']);
 function checkIsAPIRef(value) {
   return 'current' in value && 'instanceId' in value.current;
@@ -75,8 +73,7 @@ export const createSelector = (a, b, c, d, e, f, ...rest) => {
   return selector;
 };
 export const createSelectorMemoized = (...args) => {
-  const selector = (...selectorArgs) => {
-    const [stateOrApiRef, instanceId] = selectorArgs;
+  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;
@@ -85,29 +82,24 @@ export const createSelectorMemoized = (...args) => {
         missingInstanceIdWarning();
       }
     }
-    const {
-      cache
-    } = cacheContainer;
-    if (cache.get(cacheKey) && cache.get(cacheKey)?.get(args)) {
+    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 cache.get(cacheKey)?.get(args)(state, cacheKey);
+      return cacheFn(state, cacheKey);
     }
-    const newSelector = reselectCreateSelector(...args);
-    if (!cache.get(cacheKey)) {
-      cache.set(cacheKey, new Map());
+    const fn = reselectCreateSelector(...args);
+    if (!cacheArgsInit) {
+      cache.set(cacheKey, cacheArgs);
     }
-    cache.get(cacheKey)?.set(args, newSelector);
-    return newSelector(state, cacheKey);
+    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;
-};
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export const unstable_resetCreateSelectorCache = () => {
-  cacheContainer.cache = new WeakMap();
 };

package/modern/utils/utils.js

@@ -30,6 +30,15 @@ export function escapeRegExp(value) {
  */
 export const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
 
+/**
+ * Create an array containing the range [from, to[
+ */
+export function range(from, to) {
+  return Array.from({
+    length: to - from
+  }).map((_, i) => from + i);
+}
+
 /**
  * Based on `fast-deep-equal`
  *

package/node/DataGrid/DataGrid.js

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

package/node/colDef/gridBooleanOperators.js

@@ -11,7 +11,7 @@ const getGridBooleanOperators = () => [{
     if (!filterItem.value) {
       return null;
     }
-    const valueAsBoolean = filterItem.value === 'true';
+    const valueAsBoolean = String(filterItem.value) === 'true';
     return value => {
       return Boolean(value) === valueAsBoolean;
     };

package/node/components/GridRow.js

@@ -27,11 +27,10 @@ var _gridSortingSelector = require("../hooks/features/sorting/gridSortingSelecto
 var _gridRowsSelector = require("../hooks/features/rows/gridRowsSelector");
 var _gridColumnGroupsSelector = require("../hooks/features/columnGrouping/gridColumnGroupsSelector");
 var _gridEditingSelectors = require("../hooks/features/editing/gridEditingSelectors");
-var _utils2 = require("../utils/utils");
 var _GridCell = require("./cell/GridCell");
 var _GridScrollbarFillerCell = require("./GridScrollbarFillerCell");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "renderedColumns", "pinnedColumns", "offsets", "dimensions", "firstColumnToRender", "lastColumnToRender", "isFirstVisible", "isLastVisible", "focusedCellColumnIndexNotInRange", "isNotVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
+const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "pinnedColumns", "offsetTop", "offsetLeft", "dimensions", "renderContext", "focusedColumnIndex", "isFirstVisible", "isLastVisible", "isNotVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useUtilityClasses = ownerState => {
@@ -73,16 +72,14 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       rowHeight,
       className,
       visibleColumns,
-      renderedColumns,
       pinnedColumns,
-      offsets,
+      offsetLeft,
       dimensions,
-      firstColumnToRender,
+      renderContext,
+      focusedColumnIndex,
       isFirstVisible,
       isLastVisible,
-      focusedCellColumnIndexNotInRange,
       isNotVisible,
-      focusedCell,
       onClick,
       onDoubleClick,
       onMouseEnter,
@@ -103,6 +100,9 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const handleRef = (0, _utils.unstable_useForkRef)(ref, refProp);
   const rowNode = apiRef.current.getRowNode(rowId);
   const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
+  const hasFocusCell = focusedColumnIndex !== undefined;
+  const hasVirtualFocusCellLeft = hasFocusCell && focusedColumnIndex >= pinnedColumns.left.length && focusedColumnIndex < renderContext.firstColumnIndex;
+  const hasVirtualFocusCellRight = hasFocusCell && focusedColumnIndex < visibleColumns.length - pinnedColumns.right.length && focusedColumnIndex >= renderContext.lastColumnIndex;
   const ariaRowIndex = index + headerGroupingMaxDepth + 2; // 1 for the header row and 1 as it's 1-based
 
   const ownerState = {
@@ -223,7 +223,8 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     const rowStyle = (0, _extends2.default)({}, styleProp, {
       maxHeight: rowHeight === 'auto' ? 'none' : rowHeight,
       // max-height doesn't support "auto"
-      minHeight
+      minHeight,
+      '--height': typeof rowHeight === 'number' ? `${rowHeight}px` : rowHeight
     });
     if (sizes?.spacingTop) {
       const property = rootProps.rowSpacingType === 'border' ? 'borderTopWidth' : 'marginTop';
@@ -251,12 +252,13 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     });
     rowClassNames.push(rootProps.getRowClassName(rowParams));
   }
-  const randomNumber = (0, _utils2.randomNumberBetween)(10000, 20, 80);
   const getCell = (column, indexInSection, indexRelativeToAllColumns, sectionLength, pinnedPosition = _GridCell.PinnedPosition.NONE) => {
     const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
-    if (!cellColSpanInfo || cellColSpanInfo.spannedByColSpan) {
+    if (cellColSpanInfo?.spannedByColSpan) {
       return null;
     }
+    const width = cellColSpanInfo?.cellProps.width ?? column.computedWidth;
+    const colSpan = cellColSpanInfo?.cellProps.colSpan ?? 1;
     let pinnedOffset;
     // FIXME: Why is the switch check exhaustiveness not validated with typescript-eslint?
     // eslint-disable-next-line default-case
@@ -268,25 +270,18 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
         pinnedOffset = dimensions.columnsTotalWidth - columnPositions[indexRelativeToAllColumns] - column.computedWidth + scrollbarWidth;
         break;
       case _GridCell.PinnedPosition.NONE:
+      case _GridCell.PinnedPosition.VIRTUAL:
         pinnedOffset = 0;
         break;
     }
     if (rowNode?.type === 'skeletonRow') {
-      const {
-        width
-      } = cellColSpanInfo.cellProps;
-      const contentWidth = Math.round(randomNumber());
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(slots.skeletonCell, {
         width: width,
-        contentWidth: contentWidth,
+        height: rowHeight,
         field: column.field,
         align: column.align ?? 'left'
       }, column.field);
     }
-    const {
-      colSpan,
-      width
-    } = cellColSpanInfo.cellProps;
     const editCellState = editRowsState[rowId]?.[column.field] ?? null;
 
     // when the cell is a reorder cell we are not allowing to reorder the col
@@ -296,28 +291,22 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     const canReorderColumn = !(disableColumnReorder || column.disableReorder);
     const canReorderRow = rowReordering && !sortModel.length && treeDepth <= 1 && !isEditingRows;
     const disableDragEvents = !(canReorderColumn || isReorderCell && canReorderRow);
-    let cellIsNotVisible = false;
-    if (focusedCellColumnIndexNotInRange !== undefined && visibleColumns[focusedCellColumnIndexNotInRange].field === column.field) {
-      cellIsNotVisible = true;
-    }
+    const cellIsNotVisible = pinnedPosition === _GridCell.PinnedPosition.VIRTUAL;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(slots.cell, (0, _extends2.default)({
       column: column,
       width: width,
       rowId: rowId,
-      height: rowHeight,
       align: column.align || 'left',
       colIndex: indexRelativeToAllColumns,
       colSpan: colSpan,
       disableDragEvents: disableDragEvents,
       editCellState: editCellState,
-      isNotVisible: cellIsNotVisible
-    }, slotProps?.cell, {
+      isNotVisible: cellIsNotVisible,
       pinnedOffset: pinnedOffset,
       pinnedPosition: pinnedPosition,
       sectionIndex: indexInSection,
-      sectionLength: sectionLength,
-      gridHasScrollX: dimensions.hasScrollX
-    }), column.field);
+      sectionLength: sectionLength
+    }, slotProps?.cell), column.field);
   };
 
   /* Start of rendering */
@@ -335,18 +324,16 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   });
   const middleColumnsLength = visibleColumns.length - pinnedColumns.left.length - pinnedColumns.right.length;
   const cells = [];
-  for (let i = 0; i < renderedColumns.length; i += 1) {
-    const column = renderedColumns[i];
-    let indexRelativeToAllColumns = firstColumnToRender + i;
-    if (focusedCellColumnIndexNotInRange !== undefined && focusedCell) {
-      if (visibleColumns[focusedCellColumnIndexNotInRange].field === column.field) {
-        indexRelativeToAllColumns = focusedCellColumnIndexNotInRange;
-      } else {
-        indexRelativeToAllColumns -= 1;
-      }
-    }
-    const indexInSection = indexRelativeToAllColumns - pinnedColumns.left.length;
-    cells.push(getCell(column, indexInSection, indexRelativeToAllColumns, middleColumnsLength));
+  if (hasVirtualFocusCellLeft) {
+    cells.push(getCell(visibleColumns[focusedColumnIndex], focusedColumnIndex - pinnedColumns.left.length, focusedColumnIndex, middleColumnsLength, _GridCell.PinnedPosition.VIRTUAL));
+  }
+  for (let i = renderContext.firstColumnIndex; i < renderContext.lastColumnIndex; i += 1) {
+    const column = visibleColumns[i];
+    const indexInSection = i - pinnedColumns.left.length;
+    cells.push(getCell(column, indexInSection, i, middleColumnsLength));
+  }
+  if (hasVirtualFocusCellRight) {
+    cells.push(getCell(visibleColumns[focusedColumnIndex], focusedColumnIndex - pinnedColumns.left.length, focusedColumnIndex, middleColumnsLength, _GridCell.PinnedPosition.VIRTUAL));
   }
   const eventHandlers = row ? {
     onClick: publishClick,
@@ -372,7 +359,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       role: "presentation",
       className: _gridClasses.gridClasses.cellOffsetLeft,
       style: {
-        width: offsets.left
+        width: offsetLeft
       }
     }), cells, emptyCellWidth > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyCell, {
       width: emptyCellWidth
@@ -426,13 +413,11 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
       width: _propTypes.default.number.isRequired
     }).isRequired
   }).isRequired,
-  firstColumnToRender: _propTypes.default.number.isRequired,
   /**
    * Determines which cell has focus.
    * If `null`, no cell in this row has focus.
    */
-  focusedCell: _propTypes.default.string,
-  focusedCellColumnIndexNotInRange: _propTypes.default.number,
+  focusedColumnIndex: _propTypes.default.number,
   /**
    * Index of the row in the whole sorted and filtered dataset.
    * If some rows above have expanded children, this index also take those children into account.
@@ -440,19 +425,21 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   index: _propTypes.default.number.isRequired,
   isFirstVisible: _propTypes.default.bool.isRequired,
   isLastVisible: _propTypes.default.bool.isRequired,
-  isNotVisible: _propTypes.default.bool,
-  lastColumnToRender: _propTypes.default.number.isRequired,
-  offsets: _propTypes.default.shape({
-    left: _propTypes.default.number.isRequired,
-    top: _propTypes.default.number.isRequired
-  }).isRequired,
+  isNotVisible: _propTypes.default.bool.isRequired,
+  offsetLeft: _propTypes.default.number.isRequired,
+  offsetTop: _propTypes.default.number,
   onClick: _propTypes.default.func,
   onDoubleClick: _propTypes.default.func,
   onMouseEnter: _propTypes.default.func,
   onMouseLeave: _propTypes.default.func,
   pinnedColumns: _propTypes.default.object.isRequired,
-  renderedColumns: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
-  row: _propTypes.default.object,
+  renderContext: _propTypes.default.shape({
+    firstColumnIndex: _propTypes.default.number.isRequired,
+    firstRowIndex: _propTypes.default.number.isRequired,
+    lastColumnIndex: _propTypes.default.number.isRequired,
+    lastRowIndex: _propTypes.default.number.isRequired
+  }).isRequired,
+  row: _propTypes.default.object.isRequired,
   rowHeight: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]).isRequired,
   rowId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
   selected: _propTypes.default.bool.isRequired,

package/node/components/cell/GridCell.js

@@ -21,7 +21,7 @@ var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridFocusStateSelector = require("../../hooks/features/focus/gridFocusStateSelector");
 var _useGridParamsApi = require("../../hooks/features/rows/useGridParamsApi");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["column", "rowId", "editCellState", "align", "children", "colIndex", "height", "width", "className", "style", "gridHasScrollX", "colSpan", "disableDragEvents", "isNotVisible", "pinnedOffset", "pinnedPosition", "sectionIndex", "sectionLength", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
+const _excluded = ["column", "rowId", "editCellState", "align", "children", "colIndex", "width", "className", "style", "gridHasScrollX", "colSpan", "disableDragEvents", "isNotVisible", "pinnedOffset", "pinnedPosition", "sectionIndex", "sectionLength", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
   _excluded2 = ["changeReason", "unstable_updateValueOnRender"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -29,6 +29,7 @@ let PinnedPosition = exports.PinnedPosition = /*#__PURE__*/function (PinnedPosit
   PinnedPosition[PinnedPosition["NONE"] = 0] = "NONE";
   PinnedPosition[PinnedPosition["LEFT"] = 1] = "LEFT";
   PinnedPosition[PinnedPosition["RIGHT"] = 2] = "RIGHT";
+  PinnedPosition[PinnedPosition["VIRTUAL"] = 3] = "VIRTUAL";
   return PinnedPosition;
 }({});
 const EMPTY_CELL_PARAMS = {
@@ -82,7 +83,6 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       editCellState,
       align,
       colIndex,
-      height,
       width,
       className,
       style: styleProp,
@@ -140,10 +140,13 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     classes: rootClasses,
     getCellClassName
   } = rootProps;
-  const classNames = apiRef.current.unstable_applyPipeProcessors('cellClassName', [], {
+
+  // There is a hidden grid state access in `applyPipeProcessor('cellClassName', ...)`
+  const pipesClassName = (0, _useGridSelector.useGridSelector)(apiRef, () => apiRef.current.unstable_applyPipeProcessors('cellClassName', [], {
     id: rowId,
     field
-  });
+  }).filter(Boolean).join(' '));
+  const classNames = [pipesClassName];
   if (column.cellClassName) {
     classNames.push(typeof column.cellClassName === 'function' ? column.cellClassName(cellParamsWithAPI) : column.cellClassName);
   }
@@ -208,8 +211,7 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       };
     }
     const cellStyle = (0, _extends2.default)({
-      '--width': `${width}px`,
-      '--height': typeof height === 'number' ? `${height}px` : height
+      '--width': `${width}px`
     }, styleProp);
     if (pinnedPosition === PinnedPosition.LEFT) {
       cellStyle.left = pinnedOffset;
@@ -218,7 +220,7 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       cellStyle.right = pinnedOffset;
     }
     return cellStyle;
-  }, [width, height, isNotVisible, styleProp, pinnedOffset, pinnedPosition]);
+  }, [width, isNotVisible, styleProp, pinnedOffset, pinnedPosition]);
   React.useEffect(() => {
     if (!hasFocus || cellMode === _models.GridCellModes.Edit) {
       return;
@@ -328,8 +330,6 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
     isValidating: _propTypes.default.bool,
     value: _propTypes.default.any
   }),
-  gridHasScrollX: _propTypes.default.bool.isRequired,
-  height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]).isRequired,
   isNotVisible: _propTypes.default.bool.isRequired,
   onClick: _propTypes.default.func,
   onDoubleClick: _propTypes.default.func,
@@ -339,7 +339,7 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
   onMouseDown: _propTypes.default.func,
   onMouseUp: _propTypes.default.func,
   pinnedOffset: _propTypes.default.number.isRequired,
-  pinnedPosition: _propTypes.default.oneOf([0, 1, 2]).isRequired,
+  pinnedPosition: _propTypes.default.oneOf([0, 1, 2, 3]).isRequired,
   rowId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
   sectionIndex: _propTypes.default.number.isRequired,
   sectionLength: _propTypes.default.number.isRequired,

package/node/components/cell/GridSkeletonCell.js

@@ -4,19 +4,22 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GridSkeletonCell = GridSkeletonCell;
+exports.GridSkeletonCell = void 0;
 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 _Skeleton = _interopRequireDefault(require("@mui/material/Skeleton"));
 var _utils = require("@mui/utils");
+var _fastMemo = require("../../utils/fastMemo");
+var _utils2 = require("../../utils/utils");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["field", "align", "width", "contentWidth"];
+const _excluded = ["field", "align", "width", "height"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const randomWidth = (0, _utils2.randomNumberBetween)(10000, 20, 80);
 const useUtilityClasses = ownerState => {
   const {
     align,
@@ -31,7 +34,7 @@ function GridSkeletonCell(props) {
   const {
       align,
       width,
-      contentWidth
+      height
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
@@ -40,14 +43,18 @@ function GridSkeletonCell(props) {
     align
   };
   const classes = useUtilityClasses(ownerState);
+  const contentWidth = Math.round(randomWidth());
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _extends2.default)({
     className: classes.root,
     style: {
-      width
+      height,
+      maxWidth: width,
+      minWidth: width
     }
   }, other, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
-      width: `${contentWidth}%`
+      width: `${contentWidth}%`,
+      height: 25
     })
   }));
 }
@@ -57,7 +64,8 @@ process.env.NODE_ENV !== "production" ? GridSkeletonCell.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   align: _propTypes.default.string.isRequired,
-  contentWidth: _propTypes.default.number.isRequired,
   field: _propTypes.default.string.isRequired,
+  height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]).isRequired,
   width: _propTypes.default.number.isRequired
-} : void 0;
+} : void 0;
+const Memoized = exports.GridSkeletonCell = (0, _fastMemo.fastMemo)(GridSkeletonCell);

package/node/components/columnSelection/GridCellCheckboxRenderer.js

@@ -45,7 +45,6 @@ const GridCellCheckboxForwardRef = exports.GridCellCheckboxForwardRef = /*#__PUR
   const checkboxElement = React.useRef(null);
   const rippleRef = React.useRef(null);
   const handleRef = (0, _utils.unstable_useForkRef)(checkboxElement, ref);
-  const element = apiRef.current.getCellElement(id, field);
   const handleChange = event => {
     const params = {
       value: event.target.checked,
@@ -54,10 +53,13 @@ const GridCellCheckboxForwardRef = exports.GridCellCheckboxForwardRef = /*#__PUR
     apiRef.current.publishEvent('rowSelectionCheckboxChange', params, event);
   };
   React.useLayoutEffect(() => {
-    if (tabIndex === 0 && element) {
-      element.tabIndex = -1;
+    if (tabIndex === 0) {
+      const element = apiRef.current.getCellElement(id, field);
+      if (element) {
+        element.tabIndex = -1;
+      }
     }
-  }, [element, tabIndex]);
+  }, [apiRef, tabIndex, id, field]);
   React.useEffect(() => {
     if (hasFocus) {
       const input = checkboxElement.current?.querySelector('input');

package/node/components/columnsManagement/GridColumnsManagement.js

@@ -161,7 +161,7 @@ function GridColumnsManagement(props) {
         ownerState: rootProps,
         children: apiRef.current.getLocaleText('columnsManagementNoColumns')
       })]
-    }), !disableShowHideToggle && !disableResetButton && currentColumns.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridColumnsManagementFooter, {
+    }), (!disableShowHideToggle || !disableResetButton) && currentColumns.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridColumnsManagementFooter, {
       ownerState: rootProps,
       className: classes.footer,
       children: [!disableShowHideToggle ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControlLabel.default, {

package/node/components/containers/GridRootStyles.js

@@ -348,7 +348,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses.columnSeparator}`]: {
       visibility: 'hidden',
       position: 'absolute',
-      zIndex: 100,
+      zIndex: 3,
       display: 'flex',
       flexDirection: 'column',
       justifyContent: 'center',
@@ -448,8 +448,6 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       lineHeight: 'calc(var(--height) - 1px)',
       // -1px for the border
 
-      '--width': '0px',
-      '--height': '0px',
       boxSizing: 'border-box',
       borderTop: `1px solid var(--rowBorderColor)`,
       overflow: 'hidden',
@@ -469,7 +467,8 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       lineHeight: 'inherit'
     },
     [`& .${_gridClasses.gridClasses.cellEmpty}`]: {
-      padding: 0
+      padding: 0,
+      height: 'unset'
     },
     [`& .${_gridClasses.gridClasses.cell}.${_gridClasses.gridClasses['cell--selectionMode']}`]: {
       cursor: 'default'
@@ -585,6 +584,12 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       flex: '0 0 auto',
       display: 'inline-block'
     },
+    [`& .${_gridClasses.gridClasses.cellSkeleton}`]: {
+      flex: '0 0 auto',
+      height: '100%',
+      display: 'inline-flex',
+      alignItems: 'center'
+    },
     [`& .${_gridClasses.gridClasses.columnHeaderDraggableContainer}`]: {
       display: 'flex',
       width: '100%',

package/node/components/virtualization/GridBottomContainer.js

@@ -22,7 +22,7 @@ const useUtilityClasses = () => {
 };
 const Element = (0, _system.styled)('div')({
   position: 'sticky',
-  zIndex: 2,
+  zIndex: 4,
   bottom: 'calc(var(--DataGrid-hasScrollX) * var(--DataGrid-scrollbarSize))'
 });
 function GridBottomContainer(props) {

package/node/components/virtualization/GridTopContainer.js

@@ -22,7 +22,7 @@ const useUtilityClasses = () => {
 };
 const Element = (0, _system.styled)('div')({
   position: 'sticky',
-  zIndex: 2,
+  zIndex: 4,
   top: 0,
   '&::after': {
     content: '" "',