@mui/x-data-grid 7.8.0 → 7.10.0

package/node/components/GridLoadingOverlay.js

@@ -6,18 +6,52 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.GridLoadingOverlay = 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 _LinearProgress = _interopRequireDefault(require("@mui/material/LinearProgress"));
 var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
 var _GridOverlay = require("./containers/GridOverlay");
+var _GridSkeletonLoadingOverlay = require("./GridSkeletonLoadingOverlay");
+var _useGridApiContext = require("../hooks/utils/useGridApiContext");
+var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["variant", "noRowsVariant", "style"];
 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 && {}.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 LOADING_VARIANTS = {
+  'circular-progress': {
+    component: _CircularProgress.default,
+    style: {}
+  },
+  'linear-progress': {
+    component: _LinearProgress.default,
+    style: {
+      display: 'block'
+    }
+  },
+  skeleton: {
+    component: _GridSkeletonLoadingOverlay.GridSkeletonLoadingOverlay,
+    style: {
+      display: 'block'
+    }
+  }
+};
 const GridLoadingOverlay = exports.GridLoadingOverlay = /*#__PURE__*/React.forwardRef(function GridLoadingOverlay(props, ref) {
+  const {
+      variant = 'circular-progress',
+      noRowsVariant = 'circular-progress',
+      style
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const rowsCount = (0, _hooks.useGridSelector)(apiRef, _hooks.gridRowCountSelector);
+  const activeVariant = LOADING_VARIANTS[rowsCount === 0 ? noRowsVariant : variant];
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridOverlay.GridOverlay, (0, _extends2.default)({
-    ref: ref
-  }, props, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {})
+    ref: ref,
+    style: (0, _extends2.default)({}, activeVariant.style, style)
+  }, other, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(activeVariant.component, {})
   }));
 });
 process.env.NODE_ENV !== "production" ? GridLoadingOverlay.propTypes = {
@@ -25,5 +59,15 @@ process.env.NODE_ENV !== "production" ? GridLoadingOverlay.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm 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])
+  /**
+   * The variant of the overlay when no rows are displayed.
+   * @default 'circular-progress'
+   */
+  noRowsVariant: _propTypes.default.oneOf(['circular-progress', 'linear-progress', 'skeleton']),
+  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]),
+  /**
+   * The variant of the overlay.
+   * @default 'circular-progress'
+   */
+  variant: _propTypes.default.oneOf(['circular-progress', 'linear-progress', 'skeleton'])
 } : void 0;

package/node/components/GridRow.js

@@ -258,10 +258,11 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     const pinnedOffset = (0, _getPinnedCellOffset.getPinnedCellOffset)(_GridCell.gridPinnedColumnPositionLookup[pinnedPosition], column.computedWidth, indexRelativeToAllColumns, columnPositions, dimensions);
     if (rowNode?.type === 'skeletonRow') {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(slots.skeletonCell, {
+        type: column.type,
         width: width,
         height: rowHeight,
         field: column.field,
-        align: column.align ?? 'left'
+        align: column.align
       }, column.field);
     }
     const editCellState = editRowsState[rowId]?.[column.field] ?? null;

package/node/components/GridSkeletonLoadingOverlay.js

@@ -0,0 +1,189 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridSkeletonLoadingOverlay = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _system = require("@mui/system");
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _useGridApiContext = require("../hooks/utils/useGridApiContext");
+var _useGridRootProps = require("../hooks/utils/useGridRootProps");
+var _hooks = require("../hooks");
+var _gridClasses = require("../constants/gridClasses");
+var _getPinnedCellOffset = require("../internals/utils/getPinnedCellOffset");
+var _cellBorderUtils = require("../utils/cellBorderUtils");
+var _domUtils = require("../utils/domUtils");
+var _GridScrollbarFillerCell = require("./GridScrollbarFillerCell");
+var _jsxRuntime = require("react/jsx-runtime");
+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 && {}.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 SkeletonOverlay = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'SkeletonLoadingOverlay',
+  overridesResolver: (props, styles) => styles.skeletonLoadingOverlay
+})({
+  minWidth: '100%',
+  width: 'max-content',
+  // prevents overflow: clip; cutting off the x axis
+  height: '100%',
+  overflow: 'clip' // y axis is hidden while the x axis is allowed to overflow
+});
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['skeletonLoadingOverlay']
+  };
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
+};
+const getColIndex = el => parseInt(el.getAttribute('data-colindex'), 10);
+const GridSkeletonLoadingOverlay = exports.GridSkeletonLoadingOverlay = /*#__PURE__*/React.forwardRef(function GridSkeletonLoadingOverlay(props, forwardedRef) {
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const {
+    slots
+  } = rootProps;
+  const classes = useUtilityClasses({
+    classes: rootProps.classes
+  });
+  const ref = React.useRef(null);
+  const handleRef = (0, _useForkRef.default)(ref, forwardedRef);
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const dimensions = (0, _hooks.useGridSelector)(apiRef, _hooks.gridDimensionsSelector);
+  const viewportHeight = dimensions?.viewportInnerSize.height ?? 0;
+  const skeletonRowsCount = Math.ceil(viewportHeight / dimensions.rowHeight);
+  const totalWidth = (0, _hooks.useGridSelector)(apiRef, _hooks.gridColumnsTotalWidthSelector);
+  const positions = (0, _hooks.useGridSelector)(apiRef, _hooks.gridColumnPositionsSelector);
+  const inViewportCount = React.useMemo(() => positions.filter(value => value <= totalWidth).length, [totalWidth, positions]);
+  const allVisibleColumns = (0, _hooks.useGridSelector)(apiRef, _hooks.gridVisibleColumnDefinitionsSelector);
+  const columns = React.useMemo(() => allVisibleColumns.slice(0, inViewportCount), [allVisibleColumns, inViewportCount]);
+  const pinnedColumns = (0, _hooks.useGridSelector)(apiRef, _hooks.gridVisiblePinnedColumnDefinitionsSelector);
+  const getPinnedStyle = React.useCallback((computedWidth, index, position) => {
+    const pinnedOffset = (0, _getPinnedCellOffset.getPinnedCellOffset)(position, computedWidth, index, positions, dimensions);
+    return {
+      [position]: pinnedOffset
+    };
+  }, [dimensions, positions]);
+  const getPinnedPosition = React.useCallback(field => {
+    if (pinnedColumns.left.findIndex(col => col.field === field) !== -1) {
+      return _hooks.GridPinnedColumnPosition.LEFT;
+    }
+    if (pinnedColumns.right.findIndex(col => col.field === field) !== -1) {
+      return _hooks.GridPinnedColumnPosition.RIGHT;
+    }
+    return undefined;
+  }, [pinnedColumns.left, pinnedColumns.right]);
+  const children = React.useMemo(() => {
+    const array = [];
+    for (let i = 0; i < skeletonRowsCount; i += 1) {
+      const rowCells = [];
+      for (let colIndex = 0; colIndex < columns.length; colIndex += 1) {
+        const column = columns[colIndex];
+        const pinnedPosition = getPinnedPosition(column.field);
+        const isPinnedLeft = pinnedPosition === _hooks.GridPinnedColumnPosition.LEFT;
+        const isPinnedRight = pinnedPosition === _hooks.GridPinnedColumnPosition.RIGHT;
+        const sectionLength = pinnedPosition ? pinnedColumns[pinnedPosition].length // pinned section
+        : columns.length - pinnedColumns.left.length - pinnedColumns.right.length; // middle section
+        const sectionIndex = pinnedPosition ? pinnedColumns[pinnedPosition].findIndex(col => col.field === column.field) // pinned section
+        : colIndex - pinnedColumns.left.length; // middle section
+        const pinnedStyle = pinnedPosition && getPinnedStyle(column.computedWidth, colIndex, pinnedPosition);
+        const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
+        const showRightBorder = (0, _cellBorderUtils.shouldCellShowRightBorder)(pinnedPosition, sectionIndex, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller);
+        const showLeftBorder = (0, _cellBorderUtils.shouldCellShowLeftBorder)(pinnedPosition, sectionIndex);
+        const isLastColumn = colIndex === columns.length - 1;
+        const isFirstPinnedRight = isPinnedRight && sectionIndex === 0;
+        const hasFillerBefore = isFirstPinnedRight && gridHasFiller;
+        const hasFillerAfter = isLastColumn && !isFirstPinnedRight && gridHasFiller;
+        const expandedWidth = dimensions.viewportOuterSize.width - dimensions.columnsTotalWidth;
+        const emptyCellWidth = Math.max(0, expandedWidth);
+        const emptyCell = /*#__PURE__*/(0, _jsxRuntime.jsx)(slots.skeletonCell, {
+          width: emptyCellWidth,
+          empty: true
+        }, `skeleton-filler-column-${i}`);
+        const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
+        const hasScrollbarFiller = isLastColumn && scrollbarWidth !== 0;
+        if (hasFillerBefore) {
+          rowCells.push(emptyCell);
+        }
+        rowCells.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(slots.skeletonCell, {
+          field: column.field,
+          type: column.type,
+          align: column.align,
+          width: "var(--width)",
+          height: dimensions.rowHeight,
+          "data-colindex": colIndex,
+          className: (0, _clsx.default)(isPinnedLeft && _gridClasses.gridClasses['cell--pinnedLeft'], isPinnedRight && _gridClasses.gridClasses['cell--pinnedRight'], showRightBorder && _gridClasses.gridClasses['cell--withRightBorder'], showLeftBorder && _gridClasses.gridClasses['cell--withLeftBorder']),
+          style: (0, _extends2.default)({
+            '--width': `${column.computedWidth}px`
+          }, pinnedStyle)
+        }, `skeleton-column-${i}-${column.field}`));
+        if (hasFillerAfter) {
+          rowCells.push(emptyCell);
+        }
+        if (hasScrollbarFiller) {
+          rowCells.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollbarFillerCell.GridScrollbarFillerCell, {
+            pinnedRight: pinnedColumns.right.length > 0
+          }));
+        }
+      }
+      array.push( /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _clsx.default)(_gridClasses.gridClasses.row, _gridClasses.gridClasses.rowSkeleton, i === 0 && _gridClasses.gridClasses['row--firstVisible']),
+        children: rowCells
+      }, `skeleton-row-${i}`));
+    }
+    return array;
+  }, [slots, columns, pinnedColumns, skeletonRowsCount, rootProps.showCellVerticalBorder, dimensions.columnsTotalWidth, dimensions.viewportOuterSize.width, dimensions.rowHeight, dimensions.hasScrollY, dimensions.scrollbarSize, getPinnedPosition, getPinnedStyle]);
+
+  // Sync the column resize of the overlay columns with the grid
+  const handleColumnResize = params => {
+    const {
+      colDef,
+      width
+    } = params;
+    const cells = ref.current?.querySelectorAll(`[data-field="${(0, _domUtils.escapeOperandAttributeSelector)(colDef.field)}"]`);
+    if (!cells) {
+      throw new Error('MUI X: Expected skeleton cells to be defined with `data-field` attribute.');
+    }
+    const resizedColIndex = columns.findIndex(col => col.field === colDef.field);
+    const pinnedPosition = getPinnedPosition(colDef.field);
+    const isPinnedLeft = pinnedPosition === _hooks.GridPinnedColumnPosition.LEFT;
+    const isPinnedRight = pinnedPosition === _hooks.GridPinnedColumnPosition.RIGHT;
+    const currentWidth = getComputedStyle(cells[0]).getPropertyValue('--width');
+    const delta = parseInt(currentWidth, 10) - width;
+    if (cells) {
+      cells.forEach(element => {
+        element.style.setProperty('--width', `${width}px`);
+      });
+    }
+    if (isPinnedLeft) {
+      const pinnedCells = ref.current?.querySelectorAll(`.${_gridClasses.gridClasses['cell--pinnedLeft']}`);
+      pinnedCells?.forEach(element => {
+        const colIndex = getColIndex(element);
+        if (colIndex > resizedColIndex) {
+          element.style.left = `${parseInt(getComputedStyle(element).left, 10) - delta}px`;
+        }
+      });
+    }
+    if (isPinnedRight) {
+      const pinnedCells = ref.current?.querySelectorAll(`.${_gridClasses.gridClasses['cell--pinnedRight']}`);
+      pinnedCells?.forEach(element => {
+        const colIndex = getColIndex(element);
+        if (colIndex < resizedColIndex) {
+          element.style.right = `${parseInt(getComputedStyle(element).right, 10) + delta}px`;
+        }
+      });
+    }
+  };
+  (0, _hooks.useGridApiEventHandler)(apiRef, 'columnResize', handleColumnResize);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(SkeletonOverlay, (0, _extends2.default)({
+    className: classes.root,
+    ref: handleRef
+  }, props, {
+    children: children
+  }));
+});

package/node/components/base/GridOverlays.js

@@ -12,8 +12,6 @@ var _system = require("@mui/system");
 var _utils = require("@mui/utils");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
-var _gridFilterSelector = require("../../hooks/features/filter/gridFilterSelector");
-var _gridRowsSelector = require("../../hooks/features/rows/gridRowsSelector");
 var _dimensions = require("../../hooks/features/dimensions");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
@@ -26,11 +24,14 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const GridOverlayWrapperRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'OverlayWrapper',
-  shouldForwardProp: prop => prop !== 'overlayType',
+  shouldForwardProp: prop => prop !== 'overlayType' && prop !== 'loadingOverlayVariant',
   overridesResolver: (props, styles) => styles.overlayWrapper
 })(({
-  overlayType
-}) => ({
+  overlayType,
+  loadingOverlayVariant
+}) =>
+// Skeleton overlay should flow with the scroll container and not be sticky
+loadingOverlayVariant !== 'skeleton' ? {
   position: 'sticky',
   // To stay in place while scrolling
   top: 'var(--DataGrid-headersTotalHeight)',
@@ -41,11 +42,11 @@ const GridOverlayWrapperRoot = (0, _system.styled)('div', {
   // To stay above the content instead of shifting it down
   zIndex: overlayType === 'loadingOverlay' ? 5 // Should be above pinned columns, pinned rows, and detail panel
   : 4 // Should be above pinned columns and detail panel
-}));
+} : {});
 const GridOverlayWrapperInner = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'OverlayWrapperInner',
-  shouldForwardProp: prop => prop !== 'overlayType',
+  shouldForwardProp: prop => prop !== 'overlayType' && prop !== 'loadingOverlayVariant',
   overridesResolver: (props, styles) => styles.overlayWrapperInner
 })({});
 const useUtilityClasses = ownerState => {
@@ -63,16 +64,16 @@ function GridOverlayWrapper(props) {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const currentPage = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, rootProps);
   const dimensions = (0, _useGridSelector.useGridSelector)(apiRef, _dimensions.gridDimensionsSelector);
-  let height = dimensions.viewportOuterSize.height - dimensions.headersTotalHeight - (dimensions.hasScrollX ? dimensions.scrollbarSize : 0);
+  let height = dimensions.viewportOuterSize.height - dimensions.topContainerHeight - dimensions.bottomContainerHeight - (dimensions.hasScrollX ? dimensions.scrollbarSize : 0);
   if (rootProps.autoHeight && currentPage.rows.length === 0 || height === 0) {
     height = (0, _gridRowsUtils.getMinimalContentHeight)(apiRef);
   }
   const classes = useUtilityClasses((0, _extends2.default)({}, props, {
     classes: rootProps.classes
   }));
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridOverlayWrapperRoot, {
-    className: (0, _clsx.default)(classes.root),
-    overlayType: props.overlayType,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridOverlayWrapperRoot, (0, _extends2.default)({
+    className: (0, _clsx.default)(classes.root)
+  }, props, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GridOverlayWrapperInner, (0, _extends2.default)({
       className: (0, _clsx.default)(classes.inner),
       style: {
@@ -80,42 +81,27 @@ function GridOverlayWrapper(props) {
         width: dimensions.viewportOuterSize.width
       }
     }, props))
-  });
+  }));
 }
-process.env.NODE_ENV !== "production" ? GridOverlayWrapper.propTypes = {
+process.env.NODE_ENV !== "production" ? GridOverlays.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
-  overlayType: _propTypes.default.string.isRequired
+  loadingOverlayVariant: _propTypes.default.oneOf(['circular-progress', 'linear-progress', 'skeleton']),
+  overlayType: _propTypes.default.oneOf(['loadingOverlay', 'noResultsOverlay', 'noRowsOverlay'])
 } : void 0;
-function GridOverlays() {
-  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+function GridOverlays(props) {
+  const {
+    overlayType
+  } = props;
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const totalRowCount = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridRowCountSelector);
-  const visibleRowCount = (0, _useGridSelector.useGridSelector)(apiRef, _gridFilterSelector.gridExpandedRowCountSelector);
-  const loading = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridRowsLoadingSelector);
-  const showNoRowsOverlay = !loading && totalRowCount === 0;
-  const showNoResultsOverlay = !loading && totalRowCount > 0 && visibleRowCount === 0;
-  let overlay = null;
-  let overlayType = '';
-  if (showNoRowsOverlay) {
-    overlay = /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.noRowsOverlay, (0, _extends2.default)({}, rootProps.slotProps?.noRowsOverlay));
-    overlayType = 'noRowsOverlay';
-  }
-  if (showNoResultsOverlay) {
-    overlay = /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.noResultsOverlay, (0, _extends2.default)({}, rootProps.slotProps?.noResultsOverlay));
-    overlayType = 'noResultsOverlay';
-  }
-  if (loading) {
-    overlay = /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.loadingOverlay, (0, _extends2.default)({}, rootProps.slotProps?.loadingOverlay));
-    overlayType = 'loadingOverlay';
-  }
-  if (overlay === null) {
+  if (!overlayType) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridOverlayWrapper, {
-    overlayType: overlayType,
-    children: overlay
-  });
+  const Overlay = rootProps.slots?.[overlayType];
+  const overlayProps = rootProps.slotProps?.[overlayType];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridOverlayWrapper, (0, _extends2.default)({}, props, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Overlay, (0, _extends2.default)({}, overlayProps))
+  }));
 }

package/node/components/cell/GridSkeletonCell.js

@@ -11,51 +11,87 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Skeleton = _interopRequireDefault(require("@mui/material/Skeleton"));
 var _utils = require("@mui/utils");
+var _clsx = _interopRequireDefault(require("clsx"));
 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", "height"];
+const _excluded = ["field", "type", "align", "width", "height", "empty", "style", "className"];
 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 && {}.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 CIRCULAR_CONTENT_SIZE = '1.3em';
+const CONTENT_HEIGHT = '1.2em';
+const DEFAULT_CONTENT_WIDTH_RANGE = [40, 80];
+const CONTENT_WIDTH_RANGE_BY_TYPE = {
+  number: [40, 60],
+  string: [40, 80],
+  date: [40, 60],
+  dateTime: [60, 80],
+  singleSelect: [40, 80]
+};
 const useUtilityClasses = ownerState => {
   const {
     align,
-    classes
+    classes,
+    empty
   } = ownerState;
   const slots = {
-    root: ['cell', 'cellSkeleton', `cell--text${(0, _utils.unstable_capitalize)(align)}`, 'withBorderColor']
+    root: ['cell', 'cellSkeleton', `cell--text${align ? (0, _utils.unstable_capitalize)(align) : 'Left'}`, empty && 'cellEmpty']
   };
   return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
+const randomNumberGenerator = (0, _utils2.createRandomNumberGenerator)(12345);
 function GridSkeletonCell(props) {
   const {
+      field,
+      type,
       align,
       width,
-      height
+      height,
+      empty = false,
+      style,
+      className
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const ownerState = {
     classes: rootProps.classes,
-    align
+    align,
+    empty
   };
   const classes = useUtilityClasses(ownerState);
-  const contentWidth = Math.round(randomWidth());
+
+  // Memo prevents the non-circular skeleton widths changing to random widths on every render
+  const skeletonProps = React.useMemo(() => {
+    const isCircularContent = type === 'boolean' || type === 'actions';
+    if (isCircularContent) {
+      return {
+        variant: 'circular',
+        width: CIRCULAR_CONTENT_SIZE,
+        height: CIRCULAR_CONTENT_SIZE
+      };
+    }
+
+    // The width of the skeleton is a random number between the min and max values
+    // The min and max values are determined by the type of the column
+    const [min, max] = type ? CONTENT_WIDTH_RANGE_BY_TYPE[type] ?? DEFAULT_CONTENT_WIDTH_RANGE : DEFAULT_CONTENT_WIDTH_RANGE;
+    return {
+      variant: 'text',
+      width: `${Math.round(randomNumberGenerator(min, max))}%`,
+      height: CONTENT_HEIGHT
+    };
+  }, [type]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _extends2.default)({
-    className: classes.root,
-    style: {
+    "data-field": field,
+    className: (0, _clsx.default)(classes.root, className),
+    style: (0, _extends2.default)({
       height,
       maxWidth: width,
       minWidth: width
-    }
+    }, style)
   }, other, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
-      width: `${contentWidth}%`,
-      height: 25
-    })
+    children: !empty && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, (0, _extends2.default)({}, skeletonProps))
   }));
 }
 process.env.NODE_ENV !== "production" ? GridSkeletonCell.propTypes = {
@@ -63,9 +99,15 @@ process.env.NODE_ENV !== "production" ? GridSkeletonCell.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
-  align: _propTypes.default.string.isRequired,
-  field: _propTypes.default.string.isRequired,
-  height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]).isRequired,
-  width: _propTypes.default.number.isRequired
+  align: _propTypes.default.string,
+  /**
+   * If `true`, the cell will not display the skeleton but still reserve the cell space.
+   * @default false
+   */
+  empty: _propTypes.default.bool,
+  field: _propTypes.default.string,
+  height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
+  type: _propTypes.default.oneOf(['actions', 'boolean', 'custom', 'date', 'dateTime', 'number', 'singleSelect', 'string']),
+  width: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
 } : void 0;
 const Memoized = exports.GridSkeletonCell = (0, _fastMemo.fastMemo)(GridSkeletonCell);

package/node/components/containers/GridRoot.js

@@ -11,7 +11,6 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
-var _system = require("@mui/system");
 var _GridRootStyles = require("./GridRootStyles");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
@@ -19,7 +18,7 @@ var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
 var _densitySelector = require("../../hooks/features/density/densitySelector");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "className"];
+const _excluded = ["className"];
 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 && {}.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 => {
@@ -34,15 +33,9 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
-const GridPanelAnchor = (0, _system.styled)('div')({
-  position: 'absolute',
-  top: `var(--DataGrid-headersTotalHeight)`,
-  left: 0
-});
 const GridRoot = exports.GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const {
-      children,
       className
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
@@ -63,16 +56,11 @@ const GridRoot = exports.GridRoot = /*#__PURE__*/React.forwardRef(function GridR
   if (!mountedState) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridRootStyles.GridRootStyles, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridRootStyles.GridRootStyles, (0, _extends2.default)({
     ref: handleRef,
     className: (0, _clsx.default)(className, classes.root),
     ownerState: ownerState
-  }, other, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(GridPanelAnchor, {
-      role: "presentation",
-      "data-id": "gridPanelAnchor"
-    }), children]
-  }));
+  }, other));
 });
 process.env.NODE_ENV !== "production" ? GridRoot.propTypes = {
   // ----------------------------- Warning --------------------------------

package/node/components/containers/GridRootStyles.js

@@ -168,7 +168,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
   const selectedOpacity = (t.vars || t).palette.action.selectedOpacity;
   const selectedBackground = t.vars ? `rgba(${t.vars.palette.primary.mainChannel} / ${selectedOpacity})` : (0, _styles.alpha)(t.palette.primary.main, selectedOpacity);
   const selectedHoverBackground = t.vars ? `rgba(${t.vars.palette.primary.mainChannel} / calc(
-                ${t.vars.palette.action.selectedOpacity} + 
+                ${t.vars.palette.action.selectedOpacity} +
                 ${t.vars.palette.action.hoverOpacity}
               ))` : (0, _styles.alpha)(t.palette.primary.main, t.palette.action.selectedOpacity + t.palette.action.hoverOpacity);
   const pinnedHoverBackground = t.vars ? hoverColor : blend(pinnedBackground, hoverColor, hoverOpacity);
@@ -432,6 +432,9 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
           backgroundColor: 'transparent'
         }
       },
+      [`&.${_gridClasses.gridClasses.rowSkeleton}:hover`]: {
+        backgroundColor: 'transparent'
+      },
       '&.Mui-selected': selectedStyles
     },
     [`& .${_gridClasses.gridClasses['container--top']}, & .${_gridClasses.gridClasses['container--bottom']}`]: {
@@ -638,7 +641,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       minWidth: 'calc(var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize))',
       alignSelf: 'stretch',
       [`&.${_gridClasses.gridClasses['scrollbarFiller--borderTop']}`]: {
-        borderTop: '1px solid var(--DataGrid-rowBorderColor)'
+        borderTop: '1px solid var(--rowBorderColor)'
       },
       [`&.${_gridClasses.gridClasses['scrollbarFiller--pinnedRight']}`]: {
         backgroundColor: 'var(--DataGrid-pinnedBackground)',
@@ -651,6 +654,12 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     },
     [`& .${_gridClasses.gridClasses['filler--borderTop']}`]: {
       borderTop: '1px solid var(--DataGrid-rowBorderColor)'
+    },
+    /* Hide grid rows and vertical scrollbar when skeleton overlay is visible */
+    [`& .${_gridClasses.gridClasses['main--hasSkeletonLoadingOverlay']}`]: {
+      [`& .${_gridClasses.gridClasses.virtualScrollerContent}, & .${_gridClasses.gridClasses['scrollbar--vertical']}, & .${_gridClasses.gridClasses.pinnedRows}`]: {
+        display: 'none'
+      }
     }
   });
   return gridStyle;

package/node/components/panel/filterPanel/GridFilterInputMultipleValue.js

@@ -27,7 +27,7 @@ function GridFilterInputMultipleValue(props) {
       error,
       helperText,
       size,
-      variant
+      variant = 'standard'
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const TextFieldProps = {

package/node/components/virtualization/GridMainContainer.js

@@ -13,6 +13,11 @@ var _useGridAriaAttributes = require("../../hooks/utils/useGridAriaAttributes");
 var _jsxRuntime = require("react/jsx-runtime");
 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 && {}.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 GridPanelAnchor = (0, _system.styled)('div')({
+  position: 'absolute',
+  top: `var(--DataGrid-headersTotalHeight)`,
+  left: 0
+});
 const Element = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'Main',
@@ -25,12 +30,15 @@ const Element = (0, _system.styled)('div', {
 const GridMainContainer = exports.GridMainContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
   const ariaAttributes = (0, _useGridAriaAttributes.useGridAriaAttributes)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Element, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Element, (0, _extends2.default)({
     ref: ref,
     ownerState: rootProps,
     className: props.className,
     tabIndex: -1
   }, ariaAttributes, {
-    children: props.children
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(GridPanelAnchor, {
+      role: "presentation",
+      "data-id": "gridPanelAnchor"
+    }), props.children]
   }));
 });