@mui/x-data-grid 7.8.0 → 7.10.0

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -4,11 +4,11 @@ import * as ReactDOM from 'react-dom';
 import { unstable_useEnhancedEffect as useEnhancedEffect, unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import useLazyRef from '@mui/utils/useLazyRef';
 import useTimeout from '@mui/utils/useTimeout';
+import { useResizeObserver } from '@mui/x-internals/useResizeObserver';
 import { useTheme } from '@mui/material/styles';
 import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext';
 import { useGridRootProps } from '../../utils/useGridRootProps';
 import { useGridSelector } from '../../utils/useGridSelector';
-import { useResizeObserver } from '../../utils/useResizeObserver';
 import { useRunOnce } from '../../utils/useRunOnce';
 import { gridVisibleColumnDefinitionsSelector, gridVisiblePinnedColumnDefinitionsSelector, gridColumnPositionsSelector, gridHasColSpanSelector } from '../columns/gridColumnsSelector';
 import { gridDimensionsSelector } from '../dimensions/gridDimensionsSelectors';
@@ -361,20 +361,12 @@ export const useGridVirtualScroller = () => {
     overflowY: rootProps.autoHeight ? 'hidden' : undefined
   }), [needsHorizontalScrollbar, rootProps.autoHeight]);
   const contentSize = React.useMemo(() => {
-    // In cases where the columns exceed the available width,
-    // the horizontal scrollbar should be shown even when there're no rows.
-    // Keeping 1px as minimum height ensures that the scrollbar will visible if necessary.
-    const height = Math.max(contentHeight, 1);
     const size = {
       width: needsHorizontalScrollbar ? columnsTotalWidth : 'auto',
-      height
+      height: contentHeight
     };
-    if (rootProps.autoHeight) {
-      if (currentPage.rows.length === 0) {
-        size.height = getMinimalContentHeight(apiRef); // Give room to show the overlay when there no rows.
-      } else {
-        size.height = contentHeight;
-      }
+    if (rootProps.autoHeight && currentPage.rows.length === 0) {
+      size.height = getMinimalContentHeight(apiRef); // Give room to show the overlay when there no rows.
     }
     return size;
   }, [apiRef, columnsTotalWidth, contentHeight, needsHorizontalScrollbar, rootProps.autoHeight, currentPage.rows.length]);

package/hooks/utils/index.d.ts

@@ -5,5 +5,4 @@ export { useGridSelector } from './useGridSelector';
 export * from './useGridNativeEventListener';
 export * from './useFirstRender';
 export * from './useOnMount';
-export * from './useResizeObserver';
 export * from './useRunOnce';

package/hooks/utils/index.js

@@ -5,5 +5,4 @@ export { useGridSelector } from './useGridSelector';
 export * from './useGridNativeEventListener';
 export * from './useFirstRender';
 export * from './useOnMount';
-export * from './useResizeObserver';
 export * from './useRunOnce';

package/index.js

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

package/locales/esES.js

@@ -33,8 +33,7 @@ const esESGrid = {
   columnsManagementSearchTitle: 'Buscar',
   columnsManagementNoColumns: 'Sin columnas',
   columnsManagementShowHideAllText: 'Mostrar/Ocultar todas',
-  // columnsManagementReset: 'Reset',
-
+  columnsManagementReset: 'Restablecer',
   // Filter panel text
   filterPanelAddFilter: 'Agregar filtro',
   filterPanelRemoveAll: 'Remover todos',

package/models/api/gridRowSelectionApi.d.ts

@@ -30,9 +30,9 @@ export interface GridRowSelectionApi {
     /**
      * Updates the selected rows to be those passed to the `rowIds` argument.
      * Any row already selected will be unselected.
-     * @param {GridRowId[]} rowIds The row ids to select.
+     * @param {readonly GridRowId[]} rowIds The row ids to select.
      */
-    setRowSelectionModel: (rowIds: GridRowId[]) => void;
+    setRowSelectionModel: (rowIds: readonly GridRowId[]) => void;
 }
 export interface GridRowMultiSelectionApi {
     /**

package/models/colDef/gridColDef.d.ts

@@ -79,7 +79,7 @@ export interface GridBaseColDef<R extends GridValidRowModel = GridValidRowModel,
     /**
      * The order of the sorting sequence.
      */
-    sortingOrder?: GridSortDirection[];
+    sortingOrder?: readonly GridSortDirection[];
     /**
      * If `true`, the column is resizable.
      * @default true
@@ -207,7 +207,7 @@ export interface GridBaseColDef<R extends GridValidRowModel = GridValidRowModel,
     /**
      * Allows setting the filter operators for this column.
      */
-    filterOperators?: GridFilterOperator<R, V, F>[];
+    filterOperators?: readonly GridFilterOperator<R, V, F>[];
     /**
      * The callback that generates a filtering function for a given quick filter value.
      * This function can return `null` to skip filtering for this value and column.
@@ -247,9 +247,9 @@ export interface GridActionsColDef<R extends GridValidRowModel = any, V = any, F
     /**
      * Function that returns the actions to be shown.
      * @param {GridRowParams} params The params for each row.
-     * @returns {React.ReactElement<GridActionsCellItemProps>[]} An array of [[GridActionsCell]] elements.
+     * @returns {readonly React.ReactElement<GridActionsCellItemProps>[]} An array of [[GridActionsCell]] elements.
      */
-    getActions: (params: GridRowParams<R>) => React.ReactElement<GridActionsCellItemProps>[];
+    getActions: (params: GridRowParams<R>) => readonly React.ReactElement<GridActionsCellItemProps>[];
 }
 /**
  * Column Definition interface used for columns with the `singleSelect` type.

package/models/gridRowSelectionModel.d.ts

@@ -1,3 +1,3 @@
 import { GridRowId } from './gridRows';
-export type GridInputRowSelectionModel = GridRowId[] | GridRowId;
-export type GridRowSelectionModel = GridRowId[];
+export type GridInputRowSelectionModel = readonly GridRowId[] | GridRowId;
+export type GridRowSelectionModel = readonly GridRowId[];

package/models/gridSlotsComponentsProps.d.ts

@@ -27,6 +27,7 @@ import type { GridColumnHeadersProps } from '../components/GridColumnHeaders';
 import type { GridDetailPanelsProps } from '../components/GridDetailPanels';
 import type { GridPinnedRowsProps } from '../components/GridPinnedRows';
 import type { GridColumnsManagementProps } from '../components/columnsManagement/GridColumnsManagement';
+import type { GridLoadingOverlayProps } from '../components/GridLoadingOverlay';
 import type { GridRowCountProps } from '../components/GridRowCount';
 import type { GridColumnHeaderSortIconProps } from '../components/columnHeaders/GridColumnHeaderSortIcon';
 export interface BaseCheckboxPropsOverrides {
@@ -122,7 +123,7 @@ export interface GridSlotProps {
     filterPanel: GridFilterPanelProps & FilterPanelPropsOverrides;
     footer: GridFooterContainerProps & FooterPropsOverrides;
     footerRowCount: GridRowCountProps & FooterRowCountOverrides;
-    loadingOverlay: GridOverlayProps & LoadingOverlayPropsOverrides;
+    loadingOverlay: GridLoadingOverlayProps & LoadingOverlayPropsOverrides;
     noResultsOverlay: GridOverlayProps & NoResultsOverlayPropsOverrides;
     noRowsOverlay: GridOverlayProps & NoRowsOverlayPropsOverrides;
     pagination: Partial<TablePaginationProps> & PaginationPropsOverrides;

package/models/props/DataGridProps.d.ts

@@ -234,6 +234,11 @@ export interface DataGridPropsWithDefaultValues<R extends GridValidRowModel = an
      * @default "error" ("warn" in dev mode)
      */
     logLevel: keyof Logger | false;
+    /**
+     * If `true`, a loading overlay is displayed.
+     * @default false
+     */
+    loading: boolean;
     /**
      * If `true`, pagination is enabled.
      * @default false
@@ -698,10 +703,6 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
      * Return the id of a given [[GridRowModel]].
      */
     getRowId?: GridRowIdGetter<R>;
-    /**
-     * If `true`, a loading overlay is displayed.
-     */
-    loading?: boolean;
     /**
      * Nonce of the inline styles for [Content Security Policy](https://www.w3.org/TR/2016/REC-CSP2-20161215/#script-src-the-nonce-attribute).
      */

package/modern/DataGrid/DataGrid.js

@@ -333,6 +333,7 @@ DataGridRaw.propTypes = {
   keepNonExistentRowsSelected: PropTypes.bool,
   /**
    * If `true`, a loading overlay is displayed.
+   * @default false
    */
   loading: PropTypes.bool,
   /**

package/modern/DataGrid/useDataGridProps.js

@@ -23,54 +23,55 @@ const DATA_GRID_FORCED_PROPS = {
 export const DATA_GRID_PROPS_DEFAULT_VALUES = {
   autoHeight: false,
   autoPageSize: false,
+  autosizeOnMount: false,
   checkboxSelection: false,
   checkboxSelectionVisibleOnly: false,
+  clipboardCopyCellDelimiter: '\t',
   columnBufferPx: 150,
-  rowBufferPx: 150,
-  rows: [],
-  rowSelection: true,
+  columnHeaderHeight: 56,
+  disableAutosize: false,
   disableColumnFilter: false,
   disableColumnMenu: false,
+  disableColumnReorder: false,
+  disableColumnResize: false,
   disableColumnSelector: false,
+  disableColumnSorting: false,
   disableDensitySelector: false,
   disableEval: false,
   disableMultipleColumnsFiltering: false,
-  disableMultipleRowSelection: false,
-  disableColumnSorting: false,
   disableMultipleColumnsSorting: false,
+  disableMultipleRowSelection: false,
   disableRowSelectionOnClick: false,
   disableVirtualization: false,
   editMode: GridEditModes.Cell,
-  filterMode: 'client',
   filterDebounceMs: 150,
-  columnHeaderHeight: 56,
+  filterMode: 'client',
   hideFooter: false,
   hideFooterPagination: false,
   hideFooterRowCount: false,
   hideFooterSelectedRowCount: false,
   ignoreDiacritics: false,
+  ignoreValueFormatterDuringExport: false,
+  keepColumnPositionIfDraggedOutside: false,
+  keepNonExistentRowsSelected: false,
+  loading: false,
   logger: console,
   logLevel: process.env.NODE_ENV === 'production' ? 'error' : 'warn',
+  pageSizeOptions: [25, 50, 100],
   pagination: false,
   paginationMode: 'client',
-  rowHeight: 52,
   resizeThrottleMs: 60,
-  pageSizeOptions: [25, 50, 100],
+  rowBufferPx: 150,
+  rowHeight: 52,
+  rowPositionsDebounceMs: 166,
+  rows: [],
+  rowSelection: true,
   rowSpacingType: 'margin',
   showCellVerticalBorder: false,
   showColumnVerticalBorder: false,
-  sortingOrder: ['asc', 'desc', null],
   sortingMode: 'client',
-  throttleRowsMs: 0,
-  disableColumnReorder: false,
-  disableColumnResize: false,
-  keepNonExistentRowsSelected: false,
-  keepColumnPositionIfDraggedOutside: false,
-  ignoreValueFormatterDuringExport: false,
-  clipboardCopyCellDelimiter: '\t',
-  rowPositionsDebounceMs: 166,
-  autosizeOnMount: false,
-  disableAutosize: false
+  sortingOrder: ['asc', 'desc', null],
+  throttleRowsMs: 0
 };
 const defaultSlots = DATA_GRID_DEFAULT_SLOTS_COMPONENTS;
 export const useDataGridProps = inProps => {
@@ -85,8 +86,15 @@ export const useDataGridProps = inProps => {
     defaultSlots,
     slots: themedProps.slots
   }), [themedProps.slots]);
-  return React.useMemo(() => _extends({}, DATA_GRID_PROPS_DEFAULT_VALUES, themedProps, {
+  const injectDefaultProps = React.useMemo(() => {
+    return Object.keys(DATA_GRID_PROPS_DEFAULT_VALUES).reduce((acc, key) => {
+      // @ts-ignore
+      acc[key] = themedProps[key] ?? DATA_GRID_PROPS_DEFAULT_VALUES[key];
+      return acc;
+    }, {});
+  }, [themedProps]);
+  return React.useMemo(() => _extends({}, themedProps, injectDefaultProps, {
     localeText,
     slots
-  }, DATA_GRID_FORCED_PROPS), [themedProps, localeText, slots]);
+  }, DATA_GRID_FORCED_PROPS), [themedProps, localeText, slots, injectDefaultProps]);
 };

package/modern/components/GridLoadingOverlay.js

@@ -1,14 +1,48 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["variant", "noRowsVariant", "style"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import LinearProgress from '@mui/material/LinearProgress';
 import CircularProgress from '@mui/material/CircularProgress';
 import { GridOverlay } from './containers/GridOverlay';
+import { GridSkeletonLoadingOverlay } from './GridSkeletonLoadingOverlay';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { gridRowCountSelector, useGridSelector } from '../hooks';
 import { jsx as _jsx } from "react/jsx-runtime";
+const LOADING_VARIANTS = {
+  'circular-progress': {
+    component: CircularProgress,
+    style: {}
+  },
+  'linear-progress': {
+    component: LinearProgress,
+    style: {
+      display: 'block'
+    }
+  },
+  skeleton: {
+    component: GridSkeletonLoadingOverlay,
+    style: {
+      display: 'block'
+    }
+  }
+};
 const GridLoadingOverlay = /*#__PURE__*/React.forwardRef(function GridLoadingOverlay(props, ref) {
+  const {
+      variant = 'circular-progress',
+      noRowsVariant = 'circular-progress',
+      style
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const apiRef = useGridApiContext();
+  const rowsCount = useGridSelector(apiRef, gridRowCountSelector);
+  const activeVariant = LOADING_VARIANTS[rowsCount === 0 ? noRowsVariant : variant];
   return /*#__PURE__*/_jsx(GridOverlay, _extends({
-    ref: ref
-  }, props, {
-    children: /*#__PURE__*/_jsx(CircularProgress, {})
+    ref: ref,
+    style: _extends({}, activeVariant.style, style)
+  }, other, {
+    children: /*#__PURE__*/_jsx(activeVariant.component, {})
   }));
 });
 process.env.NODE_ENV !== "production" ? GridLoadingOverlay.propTypes = {
@@ -16,6 +50,16 @@ 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.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+  /**
+   * The variant of the overlay when no rows are displayed.
+   * @default 'circular-progress'
+   */
+  noRowsVariant: PropTypes.oneOf(['circular-progress', 'linear-progress', 'skeleton']),
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * The variant of the overlay.
+   * @default 'circular-progress'
+   */
+  variant: PropTypes.oneOf(['circular-progress', 'linear-progress', 'skeleton'])
 } : void 0;
 export { GridLoadingOverlay };

package/modern/components/GridRow.js

@@ -249,10 +249,11 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     const pinnedOffset = getPinnedCellOffset(gridPinnedColumnPositionLookup[pinnedPosition], column.computedWidth, indexRelativeToAllColumns, columnPositions, dimensions);
     if (rowNode?.type === 'skeletonRow') {
       return /*#__PURE__*/_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/modern/components/GridSkeletonLoadingOverlay.js

@@ -0,0 +1,181 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import clsx from 'clsx';
+import { styled } from '@mui/system';
+import useForkRef from '@mui/utils/useForkRef';
+import composeClasses from '@mui/utils/composeClasses';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { GridPinnedColumnPosition, gridColumnPositionsSelector, gridColumnsTotalWidthSelector, gridDimensionsSelector, gridVisibleColumnDefinitionsSelector, gridVisiblePinnedColumnDefinitionsSelector, useGridApiEventHandler, useGridSelector } from '../hooks';
+import { getDataGridUtilityClass, gridClasses } from '../constants/gridClasses';
+import { getPinnedCellOffset } from '../internals/utils/getPinnedCellOffset';
+import { shouldCellShowLeftBorder, shouldCellShowRightBorder } from '../utils/cellBorderUtils';
+import { escapeOperandAttributeSelector } from '../utils/domUtils';
+import { GridScrollbarFillerCell } from './GridScrollbarFillerCell';
+import { jsx as _jsx } from "react/jsx-runtime";
+const SkeletonOverlay = 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 composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const getColIndex = el => parseInt(el.getAttribute('data-colindex'), 10);
+const GridSkeletonLoadingOverlay = /*#__PURE__*/React.forwardRef(function GridSkeletonLoadingOverlay(props, forwardedRef) {
+  const rootProps = useGridRootProps();
+  const {
+    slots
+  } = rootProps;
+  const classes = useUtilityClasses({
+    classes: rootProps.classes
+  });
+  const ref = React.useRef(null);
+  const handleRef = useForkRef(ref, forwardedRef);
+  const apiRef = useGridApiContext();
+  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
+  const viewportHeight = dimensions?.viewportInnerSize.height ?? 0;
+  const skeletonRowsCount = Math.ceil(viewportHeight / dimensions.rowHeight);
+  const totalWidth = useGridSelector(apiRef, gridColumnsTotalWidthSelector);
+  const positions = useGridSelector(apiRef, gridColumnPositionsSelector);
+  const inViewportCount = React.useMemo(() => positions.filter(value => value <= totalWidth).length, [totalWidth, positions]);
+  const allVisibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
+  const columns = React.useMemo(() => allVisibleColumns.slice(0, inViewportCount), [allVisibleColumns, inViewportCount]);
+  const pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
+  const getPinnedStyle = React.useCallback((computedWidth, index, position) => {
+    const pinnedOffset = 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 GridPinnedColumnPosition.LEFT;
+    }
+    if (pinnedColumns.right.findIndex(col => col.field === field) !== -1) {
+      return 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 === GridPinnedColumnPosition.LEFT;
+        const isPinnedRight = pinnedPosition === 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 = shouldCellShowRightBorder(pinnedPosition, sectionIndex, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller);
+        const showLeftBorder = 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__*/_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__*/_jsx(slots.skeletonCell, {
+          field: column.field,
+          type: column.type,
+          align: column.align,
+          width: "var(--width)",
+          height: dimensions.rowHeight,
+          "data-colindex": colIndex,
+          className: clsx(isPinnedLeft && gridClasses['cell--pinnedLeft'], isPinnedRight && gridClasses['cell--pinnedRight'], showRightBorder && gridClasses['cell--withRightBorder'], showLeftBorder && gridClasses['cell--withLeftBorder']),
+          style: _extends({
+            '--width': `${column.computedWidth}px`
+          }, pinnedStyle)
+        }, `skeleton-column-${i}-${column.field}`));
+        if (hasFillerAfter) {
+          rowCells.push(emptyCell);
+        }
+        if (hasScrollbarFiller) {
+          rowCells.push( /*#__PURE__*/_jsx(GridScrollbarFillerCell, {
+            pinnedRight: pinnedColumns.right.length > 0
+          }));
+        }
+      }
+      array.push( /*#__PURE__*/_jsx("div", {
+        className: clsx(gridClasses.row, gridClasses.rowSkeleton, i === 0 && 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="${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 === GridPinnedColumnPosition.LEFT;
+    const isPinnedRight = pinnedPosition === 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['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['cell--pinnedRight']}`);
+      pinnedCells?.forEach(element => {
+        const colIndex = getColIndex(element);
+        if (colIndex < resizedColIndex) {
+          element.style.right = `${parseInt(getComputedStyle(element).right, 10) + delta}px`;
+        }
+      });
+    }
+  };
+  useGridApiEventHandler(apiRef, 'columnResize', handleColumnResize);
+  return /*#__PURE__*/_jsx(SkeletonOverlay, _extends({
+    className: classes.root,
+    ref: handleRef
+  }, props, {
+    children: children
+  }));
+});
+export { GridSkeletonLoadingOverlay };

package/modern/components/base/GridOverlays.js

@@ -5,8 +5,6 @@ import { styled } from '@mui/system';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import clsx from 'clsx';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
-import { gridExpandedRowCountSelector } from '../../hooks/features/filter/gridFilterSelector';
-import { gridRowCountSelector, gridRowsLoadingSelector } from '../../hooks/features/rows/gridRowsSelector';
 import { gridDimensionsSelector } from '../../hooks/features/dimensions';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
@@ -17,11 +15,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const GridOverlayWrapperRoot = 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)',
@@ -32,11 +33,11 @@ const GridOverlayWrapperRoot = 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 = styled('div', {
   name: 'MuiDataGrid',
   slot: 'OverlayWrapperInner',
-  shouldForwardProp: prop => prop !== 'overlayType',
+  shouldForwardProp: prop => prop !== 'overlayType' && prop !== 'loadingOverlayVariant',
   overridesResolver: (props, styles) => styles.overlayWrapperInner
 })({});
 const useUtilityClasses = ownerState => {
@@ -54,16 +55,16 @@ function GridOverlayWrapper(props) {
   const rootProps = useGridRootProps();
   const currentPage = useGridVisibleRows(apiRef, rootProps);
   const dimensions = useGridSelector(apiRef, 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 = getMinimalContentHeight(apiRef);
   }
   const classes = useUtilityClasses(_extends({}, props, {
     classes: rootProps.classes
   }));
-  return /*#__PURE__*/_jsx(GridOverlayWrapperRoot, {
-    className: clsx(classes.root),
-    overlayType: props.overlayType,
+  return /*#__PURE__*/_jsx(GridOverlayWrapperRoot, _extends({
+    className: clsx(classes.root)
+  }, props, {
     children: /*#__PURE__*/_jsx(GridOverlayWrapperInner, _extends({
       className: clsx(classes.inner),
       style: {
@@ -71,42 +72,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.string.isRequired
+  loadingOverlayVariant: PropTypes.oneOf(['circular-progress', 'linear-progress', 'skeleton']),
+  overlayType: PropTypes.oneOf(['loadingOverlay', 'noResultsOverlay', 'noRowsOverlay'])
 } : void 0;
-export function GridOverlays() {
-  const apiRef = useGridApiContext();
+export function GridOverlays(props) {
+  const {
+    overlayType
+  } = props;
   const rootProps = useGridRootProps();
-  const totalRowCount = useGridSelector(apiRef, gridRowCountSelector);
-  const visibleRowCount = useGridSelector(apiRef, gridExpandedRowCountSelector);
-  const loading = useGridSelector(apiRef, gridRowsLoadingSelector);
-  const showNoRowsOverlay = !loading && totalRowCount === 0;
-  const showNoResultsOverlay = !loading && totalRowCount > 0 && visibleRowCount === 0;
-  let overlay = null;
-  let overlayType = '';
-  if (showNoRowsOverlay) {
-    overlay = /*#__PURE__*/_jsx(rootProps.slots.noRowsOverlay, _extends({}, rootProps.slotProps?.noRowsOverlay));
-    overlayType = 'noRowsOverlay';
-  }
-  if (showNoResultsOverlay) {
-    overlay = /*#__PURE__*/_jsx(rootProps.slots.noResultsOverlay, _extends({}, rootProps.slotProps?.noResultsOverlay));
-    overlayType = 'noResultsOverlay';
-  }
-  if (loading) {
-    overlay = /*#__PURE__*/_jsx(rootProps.slots.loadingOverlay, _extends({}, rootProps.slotProps?.loadingOverlay));
-    overlayType = 'loadingOverlay';
-  }
-  if (overlay === null) {
+  if (!overlayType) {
     return null;
   }
-  return /*#__PURE__*/_jsx(GridOverlayWrapper, {
-    overlayType: overlayType,
-    children: overlay
-  });
+  const Overlay = rootProps.slots?.[overlayType];
+  const overlayProps = rootProps.slotProps?.[overlayType];
+  return /*#__PURE__*/_jsx(GridOverlayWrapper, _extends({}, props, {
+    children: /*#__PURE__*/_jsx(Overlay, _extends({}, overlayProps))
+  }));
 }