@mui/x-data-grid 7.7.1 → 7.9.0

package/modern/hooks/features/dimensions/useGridDimensions.js

@@ -49,6 +49,7 @@ export function useGridDimensions(apiRef, props) {
   const logger = useGridLogger(apiRef, 'useResizeContainer');
   const errorShown = React.useRef(false);
   const rootDimensionsRef = React.useRef(EMPTY_SIZE);
+  const dimensionsState = useGridSelector(apiRef, gridDimensionsSelector);
   const rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
   const pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
   const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
@@ -208,26 +209,25 @@ export function useGridDimensions(apiRef, props) {
     }
   }, [apiRef, savedSize, updateDimensions]);
   const root = apiRef.current.rootElementRef.current;
-  const dimensions = apiRef.current.state.dimensions;
   useEnhancedEffect(() => {
     if (!root) {
       return;
     }
     const set = (k, v) => root.style.setProperty(k, v);
-    set('--DataGrid-width', `${dimensions.viewportOuterSize.width}px`);
-    set('--DataGrid-hasScrollX', `${Number(dimensions.hasScrollX)}`);
-    set('--DataGrid-hasScrollY', `${Number(dimensions.hasScrollY)}`);
-    set('--DataGrid-scrollbarSize', `${dimensions.scrollbarSize}px`);
-    set('--DataGrid-rowWidth', `${dimensions.rowWidth}px`);
-    set('--DataGrid-columnsTotalWidth', `${dimensions.columnsTotalWidth}px`);
-    set('--DataGrid-leftPinnedWidth', `${dimensions.leftPinnedWidth}px`);
-    set('--DataGrid-rightPinnedWidth', `${dimensions.rightPinnedWidth}px`);
-    set('--DataGrid-headerHeight', `${dimensions.headerHeight}px`);
-    set('--DataGrid-headersTotalHeight', `${dimensions.headersTotalHeight}px`);
-    set('--DataGrid-topContainerHeight', `${dimensions.topContainerHeight}px`);
-    set('--DataGrid-bottomContainerHeight', `${dimensions.bottomContainerHeight}px`);
-    set('--height', `${dimensions.rowHeight}px`);
-  }, [root, dimensions]);
+    set('--DataGrid-width', `${dimensionsState.viewportOuterSize.width}px`);
+    set('--DataGrid-hasScrollX', `${Number(dimensionsState.hasScrollX)}`);
+    set('--DataGrid-hasScrollY', `${Number(dimensionsState.hasScrollY)}`);
+    set('--DataGrid-scrollbarSize', `${dimensionsState.scrollbarSize}px`);
+    set('--DataGrid-rowWidth', `${dimensionsState.rowWidth}px`);
+    set('--DataGrid-columnsTotalWidth', `${dimensionsState.columnsTotalWidth}px`);
+    set('--DataGrid-leftPinnedWidth', `${dimensionsState.leftPinnedWidth}px`);
+    set('--DataGrid-rightPinnedWidth', `${dimensionsState.rightPinnedWidth}px`);
+    set('--DataGrid-headerHeight', `${dimensionsState.headerHeight}px`);
+    set('--DataGrid-headersTotalHeight', `${dimensionsState.headersTotalHeight}px`);
+    set('--DataGrid-topContainerHeight', `${dimensionsState.topContainerHeight}px`);
+    set('--DataGrid-bottomContainerHeight', `${dimensionsState.bottomContainerHeight}px`);
+    set('--height', `${dimensionsState.rowHeight}px`);
+  }, [root, dimensionsState]);
   const isFirstSizing = React.useRef(true);
   const handleResize = React.useCallback(size => {
     rootDimensionsRef.current = size;

package/modern/hooks/features/export/useGridPrintExport.js

@@ -119,14 +119,15 @@ export const useGridPrintExport = (apiRef, props) => {
     gridClone.style.height = `${computedTotalHeight}px`;
     // The height above does not include grid border width, so we need to exclude it
     gridClone.style.boxSizing = 'content-box';
-
-    // the footer is always being placed at the bottom of the page as if all rows are exported
-    // so if getRowsToExport is being used to only export a subset of rows then we need to
-    // adjust the footer position to be correctly placed at the bottom of the grid
-    const gridFooterElement = gridClone.querySelector(`.${gridClasses.footerContainer}`);
-    gridFooterElement.style.position = 'absolute';
-    gridFooterElement.style.width = '100%';
-    gridFooterElement.style.top = `${computedTotalHeight - gridFooterElementHeight}px`;
+    if (!normalizeOptions.hideFooter) {
+      // the footer is always being placed at the bottom of the page as if all rows are exported
+      // so if getRowsToExport is being used to only export a subset of rows then we need to
+      // adjust the footer position to be correctly placed at the bottom of the grid
+      const gridFooterElement = gridClone.querySelector(`.${gridClasses.footerContainer}`);
+      gridFooterElement.style.position = 'absolute';
+      gridFooterElement.style.width = '100%';
+      gridFooterElement.style.top = `${computedTotalHeight - gridFooterElementHeight}px`;
+    }
 
     // printDoc.body.appendChild(gridClone); should be enough but a clone isolation bug in Safari
     // prevents us to do it

package/modern/hooks/features/overlays/useGridOverlays.js

@@ -0,0 +1,35 @@
+import { useGridSelector } from '../../utils';
+import { useGridApiContext } from '../../utils/useGridApiContext';
+import { useGridRootProps } from '../../utils/useGridRootProps';
+import { gridExpandedRowCountSelector } from '../filter';
+import { gridRowCountSelector, gridRowsLoadingSelector } from '../rows';
+/**
+ * Uses the grid state to determine which overlay to display.
+ * Returns the active overlay type and the active loading overlay variant.
+ */
+export const useGridOverlays = () => {
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const totalRowCount = useGridSelector(apiRef, gridRowCountSelector);
+  const visibleRowCount = useGridSelector(apiRef, gridExpandedRowCountSelector);
+  const noRows = totalRowCount === 0;
+  const loading = useGridSelector(apiRef, gridRowsLoadingSelector);
+  const showNoRowsOverlay = !loading && noRows;
+  const showNoResultsOverlay = !loading && totalRowCount > 0 && visibleRowCount === 0;
+  let overlayType = null;
+  let loadingOverlayVariant = null;
+  if (showNoRowsOverlay) {
+    overlayType = 'noRowsOverlay';
+  }
+  if (showNoResultsOverlay) {
+    overlayType = 'noResultsOverlay';
+  }
+  if (loading) {
+    overlayType = 'loadingOverlay';
+    loadingOverlayVariant = rootProps.slotProps?.loadingOverlay?.[noRows ? 'noRowsVariant' : 'variant'] || null;
+  }
+  return {
+    overlayType,
+    loadingOverlayVariant
+  };
+};

package/modern/hooks/features/rows/gridRowsSelector.js

@@ -8,6 +8,7 @@ export const gridTopLevelRowCountSelector = createSelector(gridRowsStateSelector
 export const gridRowsLookupSelector = createSelector(gridRowsStateSelector, rows => rows.dataRowIdToModelLookup);
 export const gridRowsDataRowIdToIdLookupSelector = createSelector(gridRowsStateSelector, rows => rows.dataRowIdToIdLookup);
 export const gridRowTreeSelector = createSelector(gridRowsStateSelector, rows => rows.tree);
+export const gridRowGroupsToFetchSelector = createSelector(gridRowsStateSelector, rows => rows.groupsToFetch);
 export const gridRowGroupingNameSelector = createSelector(gridRowsStateSelector, rows => rows.groupingName);
 export const gridRowTreeDepthsSelector = createSelector(gridRowsStateSelector, rows => rows.treeDepths);
 export const gridRowMaximumTreeDepthSelector = createSelectorMemoized(gridRowsStateSelector, rows => {

package/modern/hooks/features/rows/gridRowsUtils.js

@@ -72,7 +72,8 @@ export const getRowsStateFromCache = ({
   rowCountProp = 0,
   loadingProp,
   previousTree,
-  previousTreeDepths
+  previousTreeDepths,
+  previousGroupsToFetch
 }) => {
   const cache = apiRef.current.caches.rows;
 
@@ -81,13 +82,15 @@ export const getRowsStateFromCache = ({
     tree: unProcessedTree,
     treeDepths: unProcessedTreeDepths,
     dataRowIds: unProcessedDataRowIds,
-    groupingName
+    groupingName,
+    groupsToFetch = []
   } = apiRef.current.applyStrategyProcessor('rowTreeCreation', {
     previousTree,
     previousTreeDepths,
     updates: cache.updates,
     dataRowIdToIdLookup: cache.dataRowIdToIdLookup,
-    dataRowIdToModelLookup: cache.dataRowIdToModelLookup
+    dataRowIdToModelLookup: cache.dataRowIdToModelLookup,
+    previousGroupsToFetch
   });
 
   // 2. Apply the "hydrateRows" pipe-processing.
@@ -116,7 +119,8 @@ export const getRowsStateFromCache = ({
       rowCountProp
     }),
     groupingName,
-    loading: loadingProp
+    loading: loadingProp,
+    groupsToFetch
   });
 };
 export const isAutoGeneratedRow = rowNode => rowNode.type === 'skeletonRow' || rowNode.type === 'footer' || rowNode.type === 'group' && rowNode.isAutoGenerated || rowNode.type === 'pinnedRow' && rowNode.isAutoGenerated;
@@ -144,7 +148,8 @@ export const getTreeNodeDescendants = (tree, parentId, skipAutoGeneratedRows) =>
 export const updateCacheWithNewRows = ({
   previousCache,
   getRowId,
-  updates
+  updates,
+  groupKeys
 }) => {
   if (previousCache.updates.type === 'full') {
     throw new Error('MUI X: Unable to prepare a partial update if a full update is not applied yet.');
@@ -168,7 +173,8 @@ export const updateCacheWithNewRows = ({
       modify: [...(previousCache.updates.actions.modify ?? [])],
       remove: [...(previousCache.updates.actions.remove ?? [])]
     },
-    idToActionLookup: _extends({}, previousCache.updates.idToActionLookup)
+    idToActionLookup: _extends({}, previousCache.updates.idToActionLookup),
+    groupKeys
   };
   const dataRowIdToModelLookup = _extends({}, previousCache.dataRowIdToModelLookup);
   const dataRowIdToIdLookup = _extends({}, previousCache.dataRowIdToIdLookup);
@@ -281,4 +287,22 @@ export function calculatePinnedRowsHeight(apiRef) {
 export function getMinimalContentHeight(apiRef) {
   const dimensions = gridDimensionsSelector(apiRef.current.state);
   return `var(--DataGrid-overlayHeight, ${2 * dimensions.rowHeight}px)`;
+}
+export function computeRowsUpdates(apiRef, updates, getRowId) {
+  const nonPinnedRowsUpdates = [];
+  updates.forEach(update => {
+    const id = getRowIdFromRowModel(update, getRowId, 'A row was provided without id when calling updateRows():');
+    const rowNode = apiRef.current.getRowNode(id);
+    if (rowNode?.type === 'pinnedRow') {
+      // @ts-ignore because otherwise `release:build` doesn't work
+      const pinnedRowsCache = apiRef.current.caches.pinnedRows;
+      const prevModel = pinnedRowsCache.idLookup[id];
+      if (prevModel) {
+        pinnedRowsCache.idLookup[id] = _extends({}, prevModel, update);
+      }
+    } else {
+      nonPinnedRowsUpdates.push(update);
+    }
+  });
+  return nonPinnedRowsUpdates;
 }

package/modern/hooks/features/rows/useGridRows.js

@@ -2,17 +2,18 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
-import { gridRowCountSelector, gridRowsLookupSelector, gridRowTreeSelector, gridRowGroupingNameSelector, gridRowTreeDepthsSelector, gridDataRowIdsSelector, gridRowsDataRowIdToIdLookupSelector, gridRowMaximumTreeDepthSelector } from './gridRowsSelector';
+import { gridRowCountSelector, gridRowsLookupSelector, gridRowTreeSelector, gridRowGroupingNameSelector, gridRowTreeDepthsSelector, gridDataRowIdsSelector, gridRowsDataRowIdToIdLookupSelector, gridRowMaximumTreeDepthSelector, gridRowGroupsToFetchSelector } from './gridRowsSelector';
 import { useTimeout } from '../../utils/useTimeout';
 import { GridSignature, useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
 import { gridSortedRowIdsSelector } from '../sorting/gridSortingSelector';
 import { gridFilteredRowsLookupSelector } from '../filter/gridFilterSelector';
-import { getTreeNodeDescendants, createRowsInternalCache, getRowsStateFromCache, isAutoGeneratedRow, GRID_ROOT_GROUP_ID, GRID_ID_AUTOGENERATED, updateCacheWithNewRows, getTopLevelRowCount, getRowIdFromRowModel } from './gridRowsUtils';
+import { getTreeNodeDescendants, createRowsInternalCache, getRowsStateFromCache, isAutoGeneratedRow, GRID_ROOT_GROUP_ID, GRID_ID_AUTOGENERATED, updateCacheWithNewRows, getTopLevelRowCount, getRowIdFromRowModel, computeRowsUpdates } from './gridRowsUtils';
 import { useGridRegisterPipeApplier } from '../../core/pipeProcessing';
 export const rowsStateInitializer = (state, props, apiRef) => {
+  const isDataSourceAvailable = !!props.unstable_dataSource;
   apiRef.current.caches.rows = createRowsInternalCache({
-    rows: props.rows,
+    rows: isDataSourceAvailable ? [] : props.rows,
     getRowId: props.getRowId,
     loading: props.loading,
     rowCount: props.rowCount
@@ -21,7 +22,7 @@ export const rowsStateInitializer = (state, props, apiRef) => {
     rows: getRowsStateFromCache({
       apiRef,
       rowCountProp: props.rowCount,
-      loadingProp: props.loading,
+      loadingProp: isDataSourceAvailable ? true : props.loading,
       previousTree: null,
       previousTreeDepths: null
     })
@@ -82,7 +83,8 @@ export const useGridRows = (apiRef, props) => {
           rowCountProp: props.rowCount,
           loadingProp: props.loading,
           previousTree: gridRowTreeSelector(apiRef),
-          previousTreeDepths: gridRowTreeDepthsSelector(apiRef)
+          previousTreeDepths: gridRowTreeDepthsSelector(apiRef),
+          previousGroupsToFetch: gridRowGroupsToFetchSelector(apiRef)
         })
       }));
       apiRef.current.publishEvent('rowsSet');
@@ -124,21 +126,7 @@ export const useGridRows = (apiRef, props) => {
     if (props.signature === GridSignature.DataGrid && updates.length > 1) {
       throw new Error(['MUI X: You cannot update several rows at once in `apiRef.current.updateRows` on the DataGrid.', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
     }
-    const nonPinnedRowsUpdates = [];
-    updates.forEach(update => {
-      const id = getRowIdFromRowModel(update, props.getRowId, 'A row was provided without id when calling updateRows():');
-      const rowNode = apiRef.current.getRowNode(id);
-      if (rowNode?.type === 'pinnedRow') {
-        // @ts-ignore because otherwise `release:build` doesn't work
-        const pinnedRowsCache = apiRef.current.caches.pinnedRows;
-        const prevModel = pinnedRowsCache.idLookup[id];
-        if (prevModel) {
-          pinnedRowsCache.idLookup[id] = _extends({}, prevModel, update);
-        }
-      } else {
-        nonPinnedRowsUpdates.push(update);
-      }
-    });
+    const nonPinnedRowsUpdates = computeRowsUpdates(apiRef, updates, props.getRowId);
     const cache = updateCacheWithNewRows({
       updates: nonPinnedRowsUpdates,
       getRowId: props.getRowId,
@@ -149,6 +137,31 @@ export const useGridRows = (apiRef, props) => {
       throttle: true
     });
   }, [props.signature, props.getRowId, throttledRowsChange, apiRef]);
+  const updateServerRows = React.useCallback((updates, groupKeys) => {
+    const nonPinnedRowsUpdates = computeRowsUpdates(apiRef, updates, props.getRowId);
+    const cache = updateCacheWithNewRows({
+      updates: nonPinnedRowsUpdates,
+      getRowId: props.getRowId,
+      previousCache: apiRef.current.caches.rows,
+      groupKeys: groupKeys ?? []
+    });
+    throttledRowsChange({
+      cache,
+      throttle: false
+    });
+  }, [props.getRowId, throttledRowsChange, apiRef]);
+  const setLoading = React.useCallback(loading => {
+    if (loading === props.loading) {
+      return;
+    }
+    logger.debug(`Setting loading to ${loading}`);
+    apiRef.current.setState(state => _extends({}, state, {
+      rows: _extends({}, state.rows, {
+        loading
+      })
+    }));
+    apiRef.current.caches.rows.loadingPropBeforePartialUpdates = loading;
+  }, [props.loading, apiRef, logger]);
   const getRowModels = React.useCallback(() => {
     const dataRows = gridDataRowIdsSelector(apiRef);
     const idRowsLookup = gridRowsLookupSelector(apiRef);
@@ -303,6 +316,7 @@ export const useGridRows = (apiRef, props) => {
   }, [apiRef, props.signature, props.getRowId]);
   const rowApi = {
     getRow,
+    setLoading,
     getRowId,
     getRowModels,
     getRowsCount,
@@ -318,6 +332,9 @@ export const useGridRows = (apiRef, props) => {
     setRowChildrenExpansion,
     getRowGroupChildren
   };
+  const rowProPrivateApi = {
+    updateServerRows
+  };
 
   /**
    * EVENTS
@@ -392,6 +409,7 @@ export const useGridRows = (apiRef, props) => {
   useGridRegisterPipeApplier(apiRef, 'hydrateRows', applyHydrateRowsProcessor);
   useGridApiMethod(apiRef, rowApi, 'public');
   useGridApiMethod(apiRef, rowProApi, props.signature === GridSignature.DataGrid ? 'private' : 'public');
+  useGridApiMethod(apiRef, rowProPrivateApi, 'private');
 
   // The effect do not track any value defined synchronously during the 1st render by hooks called after `useGridRows`
   // As a consequence, the state generated by the 1st run of this useEffect will always be equal to the initialization one
@@ -436,7 +454,7 @@ export const useGridRows = (apiRef, props) => {
         return;
       }
     }
-    logger.debug(`Updating all rows, new length ${props.rows.length}`);
+    logger.debug(`Updating all rows, new length ${props.rows?.length}`);
     throttledRowsChange({
       cache: createRowsInternalCache({
         rows: props.rows,

package/modern/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';

package/modern/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/modern/index.js

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

package/modern/internals/index.js

@@ -55,6 +55,7 @@ export { useGridInitializeState } from '../hooks/utils/useGridInitializeState';
 export { getColumnsToExport, defaultGetRowsToExport } from '../hooks/features/export/utils';
 export * from '../utils/createControllablePromise';
 export { createSelector, createSelectorMemoized } from '../utils/createSelector';
+export { gridRowGroupsToFetchSelector } from '../hooks/features/rows/gridRowsSelector';
 export { findParentElementFromClassName, getActiveElement, isEventTargetInPortal } from '../utils/domUtils';
 export { isNavigationKey, isPasteShortcut } from '../utils/keyboardUtils';
 export * from '../utils/utils';

package/modern/internals/utils/propValidation.js

@@ -1,6 +1,6 @@
 import { isNumber } from '../../utils/utils';
 import { GridSignature } from '../../hooks/utils/useGridApiEventHandler';
-export const propValidatorsDataGrid = [props => props.autoPageSize && props.autoHeight && ['MUI X: `<DataGrid autoPageSize={true} autoHeight={true} />` are not valid props.', 'You cannot use both the `autoPageSize` and `autoHeight` props at the same time because `autoHeight` scales the height of the Data Grid according to the `pageSize`.', '', 'Please remove one of these two props.'].join('\n') || undefined, props => props.paginationMode === 'client' && props.paginationMeta != null && ['MUI X: Usage of the `paginationMeta` prop with client-side pagination (`paginationMode="client"`) has no effect.', '`paginationMeta` is only meant to be used with `paginationMode="server"`.'].join('\n') || undefined, props => props.signature === GridSignature.DataGrid && props.paginationMode === 'client' && isNumber(props.rowCount) && ['MUI X: Usage of the `rowCount` prop with client side pagination (`paginationMode="client"`) has no effect.', '`rowCount` is only meant to be used with `paginationMode="server"`.'].join('\n') || undefined, props => props.paginationMode === 'server' && props.rowCount == null && ["MUI X: The `rowCount` prop must be passed using `paginationMode='server'`", 'For more detail, see http://mui.com/components/data-grid/pagination/#index-based-pagination'].join('\n') || undefined];
+export const propValidatorsDataGrid = [props => props.autoPageSize && props.autoHeight && ['MUI X: `<DataGrid autoPageSize={true} autoHeight={true} />` are not valid props.', 'You cannot use both the `autoPageSize` and `autoHeight` props at the same time because `autoHeight` scales the height of the Data Grid according to the `pageSize`.', '', 'Please remove one of these two props.'].join('\n') || undefined, props => props.paginationMode === 'client' && props.paginationMeta != null && ['MUI X: Usage of the `paginationMeta` prop with client-side pagination (`paginationMode="client"`) has no effect.', '`paginationMeta` is only meant to be used with `paginationMode="server"`.'].join('\n') || undefined, props => props.signature === GridSignature.DataGrid && props.paginationMode === 'client' && isNumber(props.rowCount) && ['MUI X: Usage of the `rowCount` prop with client side pagination (`paginationMode="client"`) has no effect.', '`rowCount` is only meant to be used with `paginationMode="server"`.'].join('\n') || undefined, props => props.paginationMode === 'server' && props.rowCount == null && !props.unstable_dataSource && ["MUI X: The `rowCount` prop must be passed using `paginationMode='server'`", 'For more detail, see http://mui.com/components/data-grid/pagination/#index-based-pagination'].join('\n') || undefined];
 const warnedOnceCache = new Set();
 function warnOnce(message) {
   if (!warnedOnceCache.has(message)) {

package/modern/models/gridDataSource.js

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

package/modern/utils/utils.js

@@ -172,9 +172,17 @@ function mulberry32(a) {
     /* eslint-enable */
   };
 }
-export function randomNumberBetween(seed, min, max) {
+
+/**
+ * Create a random number generator from a seed. The seed
+ * ensures that the random number generator produces the
+ * same sequence of 'random' numbers on every render. It
+ * returns a function that generates a random number between
+ * a specified min and max.
+ */
+export function createRandomNumberGenerator(seed) {
   const random = mulberry32(seed);
-  return () => min + (max - min) * random();
+  return (min, max) => min + (max - min) * random();
 }
 export function deepClone(obj) {
   if (typeof structuredClone === 'function') {

package/node/DataGrid/useDataGridProps.js

@@ -94,9 +94,16 @@ const useDataGridProps = inProps => {
     defaultSlots,
     slots: themedProps.slots
   }), [themedProps.slots]);
-  return React.useMemo(() => (0, _extends2.default)({}, 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(() => (0, _extends2.default)({}, themedProps, injectDefaultProps, {
     localeText,
     slots
-  }, DATA_GRID_FORCED_PROPS), [themedProps, localeText, slots]);
+  }, DATA_GRID_FORCED_PROPS), [themedProps, localeText, slots, injectDefaultProps]);
 };
 exports.useDataGridProps = useDataGridProps;

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;