@mui/x-data-grid 7.7.1 → 7.9.0

package/CHANGELOG.md

@@ -3,6 +3,171 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.9.0
+
+_Jul 5, 2024_
+
+We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔄 Add loading overlay variants, including a skeleton loader option to the Data Grid component. See [Loading overlay docs](https://mui.com/x/react-data-grid/overlays/#loading-overlay) for more details.
+- 🌳 Add `selectItem` and `getItemDOMElement` methods to the TreeView component public API
+- ⛏️ Make the `usePickersTranslations` hook public in the pickers component
+- 🐞 Bugfixes
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.9.0`
+
+- [DataGrid] Add skeleton loading overlay support (#13293) @KenanYusuf
+- [DataGrid] Fix pagination when `pagination={undefined}` (#13349) @sai6855
+
+#### `@mui/x-data-grid-pro@7.9.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.9.0`.
+
+#### `@mui/x-data-grid-premium@7.9.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.9.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.9.0`
+
+- [pickers] Make the `usePickersTranslations` hook public (#13657) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@7.9.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.9.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.9.0`
+
+- [charts] Add Heatmap (unreleased) (#13209) @alexfauquette
+- [charts] Add initial `Zoom&Pan` to the Pro charts (unreleased) (#13405) @JCQuintas
+- [charts] Fix Axis Highlight on horizontal bar charts regression (#13717) @JCQuintas
+- [charts] Improve charts interaction for mobile users (#13692) @JCQuintas
+- [charts] Add documentation on how to disable the tooltip on charts (#13724) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@7.9.0`
+
+- [TreeView] Add `selectItem` and `getItemDOMElement` methods to the public API (#13485) @flaviendelangle
+
+### Docs
+
+- [docs] Fix custom "no results overlay" demo in dark mode (#13715) @KenanYusuf
+
+### Core
+
+- [core] Add `react_next` workflow in CircleCI (#13360) @cherniavskii
+- [core] Create a new package to share utils across X packages (#13528) @flaviendelangle
+- [core] Fix dependency setup (#13684) @LukasTy
+- [core] Remove `jscodeshift-add-imports` package (#13720) @LukasTy
+- [code-infra] Cleanup monorepo and `@mui/docs` usage (#13713) @LukasTy
+
+## 7.8.0
+
+_Jun 28, 2024_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 🛰 Introduce server-side data source for improved server integration in the Data Grid.
+
+  Supports server-side pagination, sorting and filtering on plain and tree data, and automatic caching.
+
+  To enable, provide a `getRows` function to the `unstable_dataSource` prop on the Data Grid component.
+
+  ```tsx
+  const dataSource = {
+    getRows: async (params: GridServerGetRowsParams) => {
+      const data = await fetch(
+        `https://api.example.com/data?${new URLSearchParams({
+          page: params.page,
+          pageSize: params.pageSize,
+          sortModel: JSON.stringify(params.sortModel),
+          filterModel: JSON.stringify(params.filterModel),
+        }).toString()}`,
+      );
+      return {
+        rows: data.rows,
+        totalRows: data.totalRows,
+      };
+    },
+  }
+  <DataGridPro
+    unstable_dataSource={dataSource}
+    {...otherProps}
+  />
+  ```
+
+  See [server-side data documentation](https://mui.com/x/react-data-grid/server-side-data/) for more details.
+
+- 📈 Support Date data on the BarChart component
+- ↕️ Support custom column sort icons on the Data Grid
+- 🖱️ Support modifying the expansion trigger on the Tree View components
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.8.0`
+
+- [DataGrid] Add `columnHeaderSortIcon` slot (#13563) @arminmeh
+- [DataGrid] Fix dimensions lag issue after autosize (#13587) @MBilalShafi
+- [DataGrid] Fix print export failure when `hideFooter` option is set (#13034) @tarunrajput
+
+#### `@mui/x-data-grid-pro@7.8.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.8.0`, plus:
+
+- [DataGridPro] Fix multi-sorting indicator being cut off (#13625) @KenanYusuf
+- [DataGridPro] Server-side tree data support (#12317) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@7.8.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.8.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.8.0`
+
+- [fields] Fix section clearing behavior on Android (#13652) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.8.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.8.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.8.0`
+
+- [charts] Fix line chart props not passing correct event handlers (#13609) @JCQuintas
+- [charts] Support BarChart with `Date` data (#13471) @alexfauquette
+- [charts] Support RTL for y-axis (#13614) @alexfauquette
+- [charts] Use default values instead of non-null assertion to prevent error being thrown (#13637) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@7.8.0`
+
+- [TreeView] Add `expansionTrigger` prop (#13533) @noraleonte
+- [TreeView] Support experimental features from plugin's dependencies (#13632) @flaviendelangle
+
+### Docs
+
+- [docs] Add callout for `Luxon` `throwOnInvalid` support (#13621) @LukasTy
+- [docs] Add "Overlays" section to the Data Grid documentation (#13624) @KenanYusuf
+
+### Core
+
+- [core] Add eslint rule to restrict import from `../internals` root (#13633) @JCQuintas
+- [docs-infra] Sync `\_app` folder with monorepo (#13582) @Janpot
+- [license] Allow usage of charts and tree view pro package for old premium licenses (#13619) @flaviendelangle
+
 ## 7.7.1
 
 _Jun 21, 2024_
@@ -44,7 +209,7 @@ Same changes as in `@mui/x-data-grid-pro@7.7.1`.
 - [pickers] Always use the same timezone in the field, the view and the layout components (#13481) @flaviendelangle
 - [pickers] Fix `AdapterDateFnsV3` generated method types (#13464) @alexey-kozlenkov
 - [pickers] Fix controlled `view` behavior (#13552) @LukasTy
-- [TimePicker] Improves RTL verification for the time pickers default views  (#13447) @arthurbalduini
+- [TimePicker] Improves RTL verification for the time pickers default views (#13447) @arthurbalduini
 
 #### `@mui/x-date-pickers-pro@7.7.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
 

package/DataGrid/useDataGridComponent.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DataGridProcessedProps } from '../models/props/DataGridProps';
 import { GridApiCommunity, GridPrivateApiCommunity } from '../models/api/gridApiCommunity';
 export declare const useDataGridComponent: (inputApiRef: React.MutableRefObject<GridApiCommunity> | undefined, props: DataGridProcessedProps) => import("react").MutableRefObject<GridPrivateApiCommunity>;

package/DataGrid/useDataGridProps.js

@@ -85,8 +85,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/components/GridFooter.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
 declare const GridFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    sx?: import("@mui/system").SxProps<import("@mui/system").Theme> | undefined;
+    sx?: import("@mui/system").SxProps<import("@mui/system").Theme>;
 } & React.RefAttributes<HTMLDivElement>>;
 export { GridFooter };

package/components/GridLoadingOverlay.d.ts

@@ -1,5 +1,17 @@
 import * as React from 'react';
-declare const GridLoadingOverlay: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    sx?: import("@mui/system").SxProps<import("@mui/system").Theme> | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
+import { GridOverlayProps } from './containers/GridOverlay';
+export type GridLoadingOverlayVariant = 'circular-progress' | 'linear-progress' | 'skeleton';
+export interface GridLoadingOverlayProps extends GridOverlayProps {
+    /**
+     * The variant of the overlay.
+     * @default 'circular-progress'
+     */
+    variant?: GridLoadingOverlayVariant;
+    /**
+     * The variant of the overlay when no rows are displayed.
+     * @default 'circular-progress'
+     */
+    noRowsVariant?: GridLoadingOverlayVariant;
+}
+declare const GridLoadingOverlay: React.ForwardRefExoticComponent<GridLoadingOverlayProps & React.RefAttributes<HTMLDivElement>>;
 export { GridLoadingOverlay };

package/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/components/GridNoResultsOverlay.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 export declare const GridNoResultsOverlay: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    sx?: import("@mui/system").SxProps<import("@mui/system").Theme> | undefined;
+    sx?: import("@mui/system").SxProps<import("@mui/system").Theme>;
 } & React.RefAttributes<HTMLDivElement>>;

package/components/GridNoRowsOverlay.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
 declare const GridNoRowsOverlay: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    sx?: import("@mui/system").SxProps<import("@mui/system").Theme> | undefined;
+    sx?: import("@mui/system").SxProps<import("@mui/system").Theme>;
 } & React.RefAttributes<HTMLDivElement>>;
 export { GridNoRowsOverlay };

package/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/components/GridRowCount.d.ts

@@ -8,6 +8,6 @@ export type GridRowCountProps = React.HTMLAttributes<HTMLDivElement> & RowCountP
     sx?: SxProps<Theme>;
 };
 declare const GridRowCount: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & RowCountProps & {
-    sx?: SxProps<Theme> | undefined;
+    sx?: SxProps<Theme>;
 } & React.RefAttributes<HTMLDivElement>>;
 export { GridRowCount };

package/components/GridSelectedRowCount.d.ts

@@ -4,6 +4,6 @@ interface SelectedRowCountProps {
     selectedRowCount: number;
 }
 declare const GridSelectedRowCount: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & SelectedRowCountProps & {
-    sx?: SxProps<Theme> | undefined;
+    sx?: SxProps<Theme>;
 } & React.RefAttributes<HTMLDivElement>>;
 export { GridSelectedRowCount };

package/components/GridSkeletonLoadingOverlay.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const GridSkeletonLoadingOverlay: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { GridSkeletonLoadingOverlay };

package/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/components/base/GridOverlays.d.ts

@@ -1,2 +1,12 @@
 import * as React from 'react';
-export declare function GridOverlays(): React.JSX.Element | null;
+import { GridOverlayType } from '../../hooks/features/overlays/useGridOverlays';
+import { GridLoadingOverlayVariant } from '../GridLoadingOverlay';
+interface GridOverlaysProps {
+    overlayType: GridOverlayType;
+    loadingOverlayVariant: GridLoadingOverlayVariant | null;
+}
+export declare function GridOverlays(props: GridOverlaysProps): React.JSX.Element | null;
+export declare namespace GridOverlays {
+    var propTypes: any;
+}
+export {};

package/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 => {
@@ -61,9 +62,9 @@ function GridOverlayWrapper(props) {
   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))
+  }));
 }