@mui/x-data-grid 7.8.0 → 7.10.0

package/node/components/virtualization/GridVirtualScroller.js

@@ -16,6 +16,7 @@ var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _gridClasses = require("../../constants/gridClasses");
 var _dimensions = require("../../hooks/features/dimensions");
 var _useGridVirtualScroller = require("../../hooks/features/virtualization/useGridVirtualScroller");
+var _useGridOverlays = require("../../hooks/features/overlays/useGridOverlays");
 var _GridOverlays = require("../base/GridOverlays");
 var _GridHeaders = require("../GridHeaders");
 var _GridMainContainer = require("./GridMainContainer");
@@ -28,12 +29,12 @@ var _GridVirtualScrollbar = require("./GridVirtualScrollbar");
 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 useUtilityClasses = (ownerState, dimensions) => {
+const useUtilityClasses = (ownerState, dimensions, loadingOverlayVariant) => {
   const {
     classes
   } = ownerState;
   const slots = {
-    root: ['main', dimensions.rightPinnedWidth > 0 && 'main--hasPinnedRight'],
+    root: ['main', dimensions.rightPinnedWidth > 0 && 'main--hasPinnedRight', loadingOverlayVariant === 'skeleton' && 'main--hasSkeletonLoadingOverlay'],
     scroller: ['virtualScroller']
   };
   return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
@@ -60,7 +61,8 @@ function GridVirtualScroller(props) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const dimensions = (0, _useGridSelector.useGridSelector)(apiRef, _dimensions.gridDimensionsSelector);
-  const classes = useUtilityClasses(rootProps, dimensions);
+  const overlaysProps = (0, _useGridOverlays.useGridOverlays)();
+  const classes = useUtilityClasses(rootProps, dimensions, overlaysProps.loadingOverlayVariant);
   const virtualScroller = (0, _useGridVirtualScroller.useGridVirtualScroller)();
   const {
     getContainerProps,
@@ -88,13 +90,15 @@ function GridVirtualScroller(props) {
           position: "top",
           virtualScroller: virtualScroller
         })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridOverlays.GridOverlays, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollerContent.GridVirtualScrollerContent, (0, _extends2.default)({}, getContentProps(), {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridOverlays.GridOverlays, (0, _extends2.default)({}, overlaysProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollerContent.GridVirtualScrollerContent, (0, _extends2.default)({}, getContentProps(), {
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridVirtualScrollerRenderZone.GridVirtualScrollerRenderZone, (0, _extends2.default)({}, getRenderZoneProps(), {
           children: [rows, /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.detailPanels, {
             virtualScroller: virtualScroller
           })]
         }))
-      })), rows.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollerFiller.GridVirtualScrollerFiller, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridBottomContainer.GridBottomContainer, {
+      })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollerFiller.GridVirtualScrollerFiller, {
+        rowsLength: rows.length
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridBottomContainer.GridBottomContainer, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.pinnedRows, {
           position: "bottom",
           virtualScroller: virtualScroller

package/node/components/virtualization/GridVirtualScrollerFiller.js

@@ -24,22 +24,24 @@ const Pinned = (0, _system.styled)('div')({
   position: 'sticky',
   height: '100%',
   boxSizing: 'border-box',
-  borderTop: '1px solid var(--DataGrid-rowBorderColor)',
+  borderTop: '1px solid var(--rowBorderColor)',
   backgroundColor: 'var(--DataGrid-pinnedBackground)'
 });
 const PinnedLeft = (0, _system.styled)(Pinned)({
   left: 0,
-  borderRight: '1px solid var(--DataGrid-rowBorderColor)'
+  borderRight: '1px solid var(--rowBorderColor)'
 });
 const PinnedRight = (0, _system.styled)(Pinned)({
   right: 0,
-  borderLeft: '1px solid var(--DataGrid-rowBorderColor)'
+  borderLeft: '1px solid var(--rowBorderColor)'
 });
 const Main = (0, _system.styled)('div')({
   flexGrow: 1,
-  borderTop: '1px solid var(--DataGrid-rowBorderColor)'
+  borderTop: '1px solid var(--rowBorderColor)'
 });
-function GridVirtualScrollerFiller() {
+function GridVirtualScrollerFiller({
+  rowsLength
+}) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const {
     viewportOuterSize,
@@ -60,7 +62,8 @@ function GridVirtualScrollerFiller() {
     className: _constants.gridClasses.filler,
     role: "presentation",
     style: {
-      height
+      height,
+      '--rowBorderColor': rowsLength === 0 ? 'transparent' : 'var(--DataGrid-rowBorderColor)'
     },
     children: [leftPinnedWidth > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(PinnedLeft, {
       className: _constants.gridClasses['filler--pinnedLeft'],

package/node/constants/gridClasses.js

@@ -9,4 +9,4 @@ var _utils = require("@mui/utils");
 function getDataGridUtilityClass(slot) {
   return (0, _utils.unstable_generateUtilityClass)('MuiDataGrid', slot);
 }
-const gridClasses = exports.gridClasses = (0, _utils.unstable_generateUtilityClasses)('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderTop', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
+const gridClasses = exports.gridClasses = (0, _utils.unstable_generateUtilityClasses)('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderTop', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hasSkeletonLoadingOverlay', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

package/node/hooks/features/filter/gridFilterSelector.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridVisibleRowsLookupSelector = exports.gridQuickFilterValuesSelector = exports.gridFilteredTopLevelRowCountSelector = exports.gridFilteredSortedTopLevelRowEntriesSelector = exports.gridFilteredSortedRowIdsSelector = exports.gridFilteredSortedRowEntriesSelector = exports.gridFilteredRowsLookupSelector = exports.gridFilteredDescendantCountLookupSelector = exports.gridFilterModelSelector = exports.gridFilterActiveItemsSelector = exports.gridFilterActiveItemsLookupSelector = exports.gridExpandedSortedRowIdsSelector = exports.gridExpandedSortedRowEntriesSelector = exports.gridExpandedRowCountSelector = void 0;
+exports.gridVisibleRowsLookupSelector = exports.gridQuickFilterValuesSelector = exports.gridFilteredTopLevelRowCountSelector = exports.gridFilteredSortedTopLevelRowEntriesSelector = exports.gridFilteredSortedRowIdsSelector = exports.gridFilteredSortedRowEntriesSelector = exports.gridFilteredRowsLookupSelector = exports.gridFilteredRowCountSelector = exports.gridFilteredDescendantRowCountSelector = exports.gridFilteredDescendantCountLookupSelector = exports.gridFilterModelSelector = exports.gridFilterActiveItemsSelector = exports.gridFilterActiveItemsLookupSelector = exports.gridExpandedSortedRowIdsSelector = exports.gridExpandedSortedRowEntriesSelector = exports.gridExpandedRowCountSelector = void 0;
 var _createSelector = require("../../../utils/createSelector");
 var _gridSortingSelector = require("../sorting/gridSortingSelector");
 var _gridColumnsSelector = require("../columns/gridColumnsSelector");
@@ -95,6 +95,19 @@ const gridExpandedRowCountSelector = exports.gridExpandedRowCountSelector = (0,
  */
 const gridFilteredTopLevelRowCountSelector = exports.gridFilteredTopLevelRowCountSelector = (0, _createSelector.createSelector)(gridFilteredSortedTopLevelRowEntriesSelector, visibleSortedTopLevelRows => visibleSortedTopLevelRows.length);
 
+/**
+ * Get the amount of rows accessible after the filtering process.
+ * Includes top level and descendant rows.
+ * @category Filtering
+ */
+const gridFilteredRowCountSelector = exports.gridFilteredRowCountSelector = (0, _createSelector.createSelector)(gridFilteredSortedRowEntriesSelector, filteredSortedRowEntries => filteredSortedRowEntries.length);
+
+/**
+ * Get the amount of descendant rows accessible after the filtering process.
+ * @category Filtering
+ */
+const gridFilteredDescendantRowCountSelector = exports.gridFilteredDescendantRowCountSelector = (0, _createSelector.createSelector)(gridFilteredRowCountSelector, gridFilteredTopLevelRowCountSelector, (totalRowCount, topLevelRowCount) => totalRowCount - topLevelRowCount);
+
 /**
  * @category Filtering
  * @ignore - do not document.

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

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridOverlays = void 0;
+var _utils = require("../../utils");
+var _useGridApiContext = require("../../utils/useGridApiContext");
+var _useGridRootProps = require("../../utils/useGridRootProps");
+var _filter = require("../filter");
+var _rows = require("../rows");
+/**
+ * Uses the grid state to determine which overlay to display.
+ * Returns the active overlay type and the active loading overlay variant.
+ */
+const useGridOverlays = () => {
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const totalRowCount = (0, _utils.useGridSelector)(apiRef, _rows.gridRowCountSelector);
+  const visibleRowCount = (0, _utils.useGridSelector)(apiRef, _filter.gridExpandedRowCountSelector);
+  const noRows = totalRowCount === 0;
+  const loading = (0, _utils.useGridSelector)(apiRef, _rows.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
+  };
+};
+exports.useGridOverlays = useGridOverlays;

package/node/hooks/features/virtualization/useGridVirtualScroller.js

@@ -14,11 +14,11 @@ var ReactDOM = _interopRequireWildcard(require("react-dom"));
 var _utils = require("@mui/utils");
 var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));
 var _useTimeout = _interopRequireDefault(require("@mui/utils/useTimeout"));
+var _useResizeObserver = require("@mui/x-internals/useResizeObserver");
 var _styles = require("@mui/material/styles");
 var _useGridPrivateApiContext = require("../../utils/useGridPrivateApiContext");
 var _useGridRootProps = require("../../utils/useGridRootProps");
 var _useGridSelector = require("../../utils/useGridSelector");
-var _useResizeObserver = require("../../utils/useResizeObserver");
 var _useRunOnce = require("../../utils/useRunOnce");
 var _gridColumnsSelector = require("../columns/gridColumnsSelector");
 var _gridDimensionsSelectors = require("../dimensions/gridDimensionsSelectors");
@@ -373,20 +373,12 @@ 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 = (0, _gridRowsUtils.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 = (0, _gridRowsUtils.getMinimalContentHeight)(apiRef); // Give room to show the overlay when there no rows.
     }
     return size;
   }, [apiRef, columnsTotalWidth, contentHeight, needsHorizontalScrollbar, rootProps.autoHeight, currentPage.rows.length]);

package/node/hooks/utils/index.js

@@ -85,18 +85,6 @@ Object.keys(_useOnMount).forEach(function (key) {
     }
   });
 });
-var _useResizeObserver = require("./useResizeObserver");
-Object.keys(_useResizeObserver).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _useResizeObserver[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _useResizeObserver[key];
-    }
-  });
-});
 var _useRunOnce = require("./useRunOnce");
 Object.keys(_useRunOnce).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/node/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/node/locales/esES.js

@@ -39,8 +39,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/node/utils/utils.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.clamp = void 0;
+exports.createRandomNumberGenerator = createRandomNumberGenerator;
 exports.deepClone = deepClone;
 exports.escapeRegExp = escapeRegExp;
 exports.eslintUseValue = eslintUseValue;
@@ -12,7 +13,6 @@ exports.isFunction = isFunction;
 exports.isNumber = isNumber;
 exports.isObject = isObject;
 exports.localStorageAvailable = localStorageAvailable;
-exports.randomNumberBetween = randomNumberBetween;
 exports.range = range;
 function isNumber(value) {
   return typeof value === 'number' && !Number.isNaN(value);
@@ -189,9 +189,17 @@ function mulberry32(a) {
     /* eslint-enable */
   };
 }
-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.
+ */
+function createRandomNumberGenerator(seed) {
   const random = mulberry32(seed);
-  return () => min + (max - min) * random();
+  return (min, max) => min + (max - min) * random();
 }
 function deepClone(obj) {
   if (typeof structuredClone === 'function') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "7.8.0",
+  "version": "7.10.0",
   "description": "The Community plan edition of the Data Grid components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -38,11 +38,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.7",
-    "@mui/system": "^5.15.20",
-    "@mui/utils": "^5.15.20",
+    "@mui/system": "^5.16.0",
+    "@mui/utils": "^5.16.0",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
-    "reselect": "^4.1.8"
+    "reselect": "^4.1.8",
+    "@mui/x-internals": "7.10.0"
   },
   "peerDependencies": {
     "@mui/material": "^5.15.14",

package/utils/utils.d.ts

@@ -39,7 +39,14 @@ export declare function range(from: number, to: number): number[];
  * We only type the public interface to avoid dozens of `as` in the function.
  */
 export declare function isDeepEqual<T>(actual: any, expected: T): actual is T;
-export declare function randomNumberBetween(seed: number, min: number, max: number): () => number;
+/**
+ * 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 declare function createRandomNumberGenerator(seed: number): (min: number, max: number) => number;
 export declare function deepClone(obj: Record<string, any>): any;
 /**
  * Mark a value as used so eslint doesn't complain. Use this instead

package/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/hooks/utils/useResizeObserver.d.ts

@@ -1,2 +0,0 @@
-import * as React from 'react';
-export declare function useResizeObserver(ref: React.MutableRefObject<HTMLElement | undefined | null>, fn: (entries: ResizeObserverEntry[]) => void, enabled?: boolean): void;

package/hooks/utils/useResizeObserver.js

@@ -1,36 +0,0 @@
-import * as React from 'react';
-import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
-const isDevEnvironment = process.env.NODE_ENV === 'development';
-const noop = () => {};
-export function useResizeObserver(ref, fn, enabled) {
-  const fnRef = React.useRef(null);
-  fnRef.current = fn;
-  useEnhancedEffect(() => {
-    if (enabled === false || typeof ResizeObserver === 'undefined') {
-      return noop;
-    }
-    let frameID = 0;
-    const target = ref.current;
-    const observer = new ResizeObserver(entries => {
-      // See https://github.com/mui/mui-x/issues/8733
-      // In dev, we avoid the React warning by moving the task to the next frame.
-      // In prod, we want the task to run in the same frame as to avoid tear.
-      if (isDevEnvironment) {
-        frameID = requestAnimationFrame(() => {
-          fnRef.current(entries);
-        });
-      } else {
-        fnRef.current(entries);
-      }
-    });
-    if (target) {
-      observer.observe(target);
-    }
-    return () => {
-      if (frameID) {
-        cancelAnimationFrame(frameID);
-      }
-      observer.disconnect();
-    };
-  }, [ref, enabled]);
-}

package/modern/hooks/utils/useResizeObserver.js

@@ -1,36 +0,0 @@
-import * as React from 'react';
-import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
-const isDevEnvironment = process.env.NODE_ENV === 'development';
-const noop = () => {};
-export function useResizeObserver(ref, fn, enabled) {
-  const fnRef = React.useRef(null);
-  fnRef.current = fn;
-  useEnhancedEffect(() => {
-    if (enabled === false || typeof ResizeObserver === 'undefined') {
-      return noop;
-    }
-    let frameID = 0;
-    const target = ref.current;
-    const observer = new ResizeObserver(entries => {
-      // See https://github.com/mui/mui-x/issues/8733
-      // In dev, we avoid the React warning by moving the task to the next frame.
-      // In prod, we want the task to run in the same frame as to avoid tear.
-      if (isDevEnvironment) {
-        frameID = requestAnimationFrame(() => {
-          fnRef.current(entries);
-        });
-      } else {
-        fnRef.current(entries);
-      }
-    });
-    if (target) {
-      observer.observe(target);
-    }
-    return () => {
-      if (frameID) {
-        cancelAnimationFrame(frameID);
-      }
-      observer.disconnect();
-    };
-  }, [ref, enabled]);
-}

package/node/hooks/utils/useResizeObserver.js

@@ -1,44 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useResizeObserver = useResizeObserver;
-var React = _interopRequireWildcard(require("react"));
-var _utils = require("@mui/utils");
-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 isDevEnvironment = process.env.NODE_ENV === 'development';
-const noop = () => {};
-function useResizeObserver(ref, fn, enabled) {
-  const fnRef = React.useRef(null);
-  fnRef.current = fn;
-  (0, _utils.unstable_useEnhancedEffect)(() => {
-    if (enabled === false || typeof ResizeObserver === 'undefined') {
-      return noop;
-    }
-    let frameID = 0;
-    const target = ref.current;
-    const observer = new ResizeObserver(entries => {
-      // See https://github.com/mui/mui-x/issues/8733
-      // In dev, we avoid the React warning by moving the task to the next frame.
-      // In prod, we want the task to run in the same frame as to avoid tear.
-      if (isDevEnvironment) {
-        frameID = requestAnimationFrame(() => {
-          fnRef.current(entries);
-        });
-      } else {
-        fnRef.current(entries);
-      }
-    });
-    if (target) {
-      observer.observe(target);
-    }
-    return () => {
-      if (frameID) {
-        cancelAnimationFrame(frameID);
-      }
-      observer.disconnect();
-    };
-  }, [ref, enabled]);
-}