@mui/x-data-grid 7.7.1 → 7.9.0

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

@@ -60,6 +60,7 @@ function useGridDimensions(apiRef, props) {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useResizeContainer');
   const errorShown = React.useRef(false);
   const rootDimensionsRef = React.useRef(EMPTY_SIZE);
+  const dimensionsState = (0, _utils2.useGridSelector)(apiRef, _gridDimensionsSelectors.gridDimensionsSelector);
   const rowsMeta = (0, _utils2.useGridSelector)(apiRef, _gridRowsMetaSelector.gridRowsMetaSelector);
   const pinnedColumns = (0, _utils2.useGridSelector)(apiRef, _columns.gridVisiblePinnedColumnDefinitionsSelector);
   const densityFactor = (0, _utils2.useGridSelector)(apiRef, _density.gridDensityFactorSelector);
@@ -219,26 +220,25 @@ function useGridDimensions(apiRef, props) {
     }
   }, [apiRef, savedSize, updateDimensions]);
   const root = apiRef.current.rootElementRef.current;
-  const dimensions = apiRef.current.state.dimensions;
   (0, _utils.unstable_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/node/hooks/features/export/useGridPrintExport.js

@@ -128,14 +128,15 @@ 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.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.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/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/rows/gridRowsSelector.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridTopLevelRowCountSelector = exports.gridRowsLookupSelector = exports.gridRowsLoadingSelector = exports.gridRowsDataRowIdToIdLookupSelector = exports.gridRowTreeSelector = exports.gridRowTreeDepthsSelector = exports.gridRowMaximumTreeDepthSelector = exports.gridRowGroupingNameSelector = exports.gridRowCountSelector = exports.gridPinnedRowsSelector = exports.gridPinnedRowsCountSelector = exports.gridDataRowIdsSelector = exports.gridAdditionalRowGroupsSelector = void 0;
+exports.gridTopLevelRowCountSelector = exports.gridRowsLookupSelector = exports.gridRowsLoadingSelector = exports.gridRowsDataRowIdToIdLookupSelector = exports.gridRowTreeSelector = exports.gridRowTreeDepthsSelector = exports.gridRowMaximumTreeDepthSelector = exports.gridRowGroupsToFetchSelector = exports.gridRowGroupingNameSelector = exports.gridRowCountSelector = exports.gridPinnedRowsSelector = exports.gridPinnedRowsCountSelector = exports.gridDataRowIdsSelector = exports.gridAdditionalRowGroupsSelector = void 0;
 var _createSelector = require("../../../utils/createSelector");
 const gridRowsStateSelector = state => state.rows;
 const gridRowCountSelector = exports.gridRowCountSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.totalRowCount);
@@ -14,6 +14,7 @@ const gridTopLevelRowCountSelector = exports.gridTopLevelRowCountSelector = (0,
 const gridRowsLookupSelector = exports.gridRowsLookupSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.dataRowIdToModelLookup);
 const gridRowsDataRowIdToIdLookupSelector = exports.gridRowsDataRowIdToIdLookupSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.dataRowIdToIdLookup);
 const gridRowTreeSelector = exports.gridRowTreeSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.tree);
+const gridRowGroupsToFetchSelector = exports.gridRowGroupsToFetchSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.groupsToFetch);
 const gridRowGroupingNameSelector = exports.gridRowGroupingNameSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.groupingName);
 const gridRowTreeDepthsSelector = exports.gridRowTreeDepthsSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.treeDepths);
 const gridRowMaximumTreeDepthSelector = exports.gridRowMaximumTreeDepthSelector = (0, _createSelector.createSelectorMemoized)(gridRowsStateSelector, rows => {

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.buildRootGroup = exports.GRID_ROOT_GROUP_ID = exports.GRID_ID_AUTOGENERATED = void 0;
 exports.calculatePinnedRowsHeight = calculatePinnedRowsHeight;
 exports.checkGridRowIdIsValid = checkGridRowIdIsValid;
+exports.computeRowsUpdates = computeRowsUpdates;
 exports.createRowsInternalCache = void 0;
 exports.getMinimalContentHeight = getMinimalContentHeight;
 exports.updateCacheWithNewRows = exports.isAutoGeneratedRow = exports.getTreeNodeDescendants = exports.getTopLevelRowCount = exports.getRowsStateFromCache = exports.getRowIdFromRowModel = void 0;
@@ -88,7 +89,8 @@ const getRowsStateFromCache = ({
   rowCountProp = 0,
   loadingProp,
   previousTree,
-  previousTreeDepths
+  previousTreeDepths,
+  previousGroupsToFetch
 }) => {
   const cache = apiRef.current.caches.rows;
 
@@ -97,13 +99,15 @@ 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.
@@ -132,7 +136,8 @@ const getRowsStateFromCache = ({
       rowCountProp
     }),
     groupingName,
-    loading: loadingProp
+    loading: loadingProp,
+    groupsToFetch
   });
 };
 exports.getRowsStateFromCache = getRowsStateFromCache;
@@ -163,7 +168,8 @@ exports.getTreeNodeDescendants = getTreeNodeDescendants;
 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.');
@@ -187,7 +193,8 @@ const updateCacheWithNewRows = ({
       modify: [...(previousCache.updates.actions.modify ?? [])],
       remove: [...(previousCache.updates.actions.remove ?? [])]
     },
-    idToActionLookup: (0, _extends2.default)({}, previousCache.updates.idToActionLookup)
+    idToActionLookup: (0, _extends2.default)({}, previousCache.updates.idToActionLookup),
+    groupKeys
   };
   const dataRowIdToModelLookup = (0, _extends2.default)({}, previousCache.dataRowIdToModelLookup);
   const dataRowIdToIdLookup = (0, _extends2.default)({}, previousCache.dataRowIdToIdLookup);
@@ -301,4 +308,22 @@ function calculatePinnedRowsHeight(apiRef) {
 function getMinimalContentHeight(apiRef) {
   const dimensions = (0, _gridDimensionsSelectors.gridDimensionsSelector)(apiRef.current.state);
   return `var(--DataGrid-overlayHeight, ${2 * dimensions.rowHeight}px)`;
+}
+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] = (0, _extends2.default)({}, prevModel, update);
+      }
+    } else {
+      nonPinnedRowsUpdates.push(update);
+    }
+  });
+  return nonPinnedRowsUpdates;
 }

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

@@ -20,8 +20,9 @@ var _pipeProcessing = require("../../core/pipeProcessing");
 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 rowsStateInitializer = (state, props, apiRef) => {
+  const isDataSourceAvailable = !!props.unstable_dataSource;
   apiRef.current.caches.rows = (0, _gridRowsUtils.createRowsInternalCache)({
-    rows: props.rows,
+    rows: isDataSourceAvailable ? [] : props.rows,
     getRowId: props.getRowId,
     loading: props.loading,
     rowCount: props.rowCount
@@ -30,7 +31,7 @@ const rowsStateInitializer = (state, props, apiRef) => {
     rows: (0, _gridRowsUtils.getRowsStateFromCache)({
       apiRef,
       rowCountProp: props.rowCount,
-      loadingProp: props.loading,
+      loadingProp: isDataSourceAvailable ? true : props.loading,
       previousTree: null,
       previousTreeDepths: null
     })
@@ -92,7 +93,8 @@ const useGridRows = (apiRef, props) => {
           rowCountProp: props.rowCount,
           loadingProp: props.loading,
           previousTree: (0, _gridRowsSelector.gridRowTreeSelector)(apiRef),
-          previousTreeDepths: (0, _gridRowsSelector.gridRowTreeDepthsSelector)(apiRef)
+          previousTreeDepths: (0, _gridRowsSelector.gridRowTreeDepthsSelector)(apiRef),
+          previousGroupsToFetch: (0, _gridRowsSelector.gridRowGroupsToFetchSelector)(apiRef)
         })
       }));
       apiRef.current.publishEvent('rowsSet');
@@ -134,21 +136,7 @@ const useGridRows = (apiRef, props) => {
     if (props.signature === _useGridApiEventHandler.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 = (0, _gridRowsUtils.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] = (0, _extends2.default)({}, prevModel, update);
-        }
-      } else {
-        nonPinnedRowsUpdates.push(update);
-      }
-    });
+    const nonPinnedRowsUpdates = (0, _gridRowsUtils.computeRowsUpdates)(apiRef, updates, props.getRowId);
     const cache = (0, _gridRowsUtils.updateCacheWithNewRows)({
       updates: nonPinnedRowsUpdates,
       getRowId: props.getRowId,
@@ -159,6 +147,31 @@ const useGridRows = (apiRef, props) => {
       throttle: true
     });
   }, [props.signature, props.getRowId, throttledRowsChange, apiRef]);
+  const updateServerRows = React.useCallback((updates, groupKeys) => {
+    const nonPinnedRowsUpdates = (0, _gridRowsUtils.computeRowsUpdates)(apiRef, updates, props.getRowId);
+    const cache = (0, _gridRowsUtils.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 => (0, _extends2.default)({}, state, {
+      rows: (0, _extends2.default)({}, state.rows, {
+        loading
+      })
+    }));
+    apiRef.current.caches.rows.loadingPropBeforePartialUpdates = loading;
+  }, [props.loading, apiRef, logger]);
   const getRowModels = React.useCallback(() => {
     const dataRows = (0, _gridRowsSelector.gridDataRowIdsSelector)(apiRef);
     const idRowsLookup = (0, _gridRowsSelector.gridRowsLookupSelector)(apiRef);
@@ -313,6 +326,7 @@ const useGridRows = (apiRef, props) => {
   }, [apiRef, props.signature, props.getRowId]);
   const rowApi = {
     getRow,
+    setLoading,
     getRowId,
     getRowModels,
     getRowsCount,
@@ -328,6 +342,9 @@ const useGridRows = (apiRef, props) => {
     setRowChildrenExpansion,
     getRowGroupChildren
   };
+  const rowProPrivateApi = {
+    updateServerRows
+  };
 
   /**
    * EVENTS
@@ -402,6 +419,7 @@ const useGridRows = (apiRef, props) => {
   (0, _pipeProcessing.useGridRegisterPipeApplier)(apiRef, 'hydrateRows', applyHydrateRowsProcessor);
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, rowApi, 'public');
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, rowProApi, props.signature === _useGridApiEventHandler.GridSignature.DataGrid ? 'private' : 'public');
+  (0, _useGridApiMethod.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
@@ -446,7 +464,7 @@ 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: (0, _gridRowsUtils.createRowsInternalCache)({
         rows: props.rows,

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");

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.7.1
+ * @mui/x-data-grid v7.9.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/internals/index.js

@@ -57,6 +57,7 @@ var _exportNames = {
   useGridParamsApi: true,
   gridAdditionalRowGroupsSelector: true,
   gridPinnedRowsSelector: true,
+  gridRowGroupsToFetchSelector: true,
   headerFilteringStateInitializer: true,
   useGridHeaderFiltering: true,
   useGridRowSelection: true,
@@ -313,6 +314,12 @@ Object.defineProperty(exports, "gridPinnedRowsSelector", {
     return _gridRowsSelector.gridPinnedRowsSelector;
   }
 });
+Object.defineProperty(exports, "gridRowGroupsToFetchSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridRowsSelector.gridRowGroupsToFetchSelector;
+  }
+});
 Object.defineProperty(exports, "headerFilteringStateInitializer", {
   enumerable: true,
   get: function () {

package/node/internals/utils/propValidation.js

@@ -8,7 +8,7 @@ exports.propValidatorsDataGrid = void 0;
 exports.validateProps = validateProps;
 var _utils = require("../../utils/utils");
 var _useGridApiEventHandler = require("../../hooks/utils/useGridApiEventHandler");
-const propValidatorsDataGrid = exports.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 === _useGridApiEventHandler.GridSignature.DataGrid && props.paginationMode === 'client' && (0, _utils.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];
+const propValidatorsDataGrid = exports.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 === _useGridApiEventHandler.GridSignature.DataGrid && props.paginationMode === 'client' && (0, _utils.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/node/models/gridDataSource.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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.7.1",
+  "version": "7.9.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.9.0"
   },
   "peerDependencies": {
     "@mui/material": "^5.15.14",

package/utils/cleanupTracking/TimerBasedCleanupTracking.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="node" />
 import { CleanupTracking, UnregisterToken, UnsubscribeFn } from './CleanupTracking';
 export declare class TimerBasedCleanupTracking implements CleanupTracking {
     timeouts?: Map<number, NodeJS.Timeout> | undefined;

package/utils/domUtils.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { gridClasses } from '../constants/gridClasses';
 import type { GridPrivateApiCommunity } from '../models/api/gridApiCommunity';
 import type { GridRowId } from '../models/gridRows';

package/utils/getPublicApiRef.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type { GridPrivateApiCommunity } from '../models/api/gridApiCommunity';
-export declare function getPublicApiRef<PrivateApi extends GridPrivateApiCommunity>(apiRef: React.MutableRefObject<PrivateApi>): import("react").MutableRefObject<ReturnType<PrivateApi["getPublicApi"]>>;
+export declare function getPublicApiRef<PrivateApi extends GridPrivateApiCommunity>(apiRef: React.MutableRefObject<PrivateApi>): React.MutableRefObject<ReturnType<PrivateApi["getPublicApi"]>>;

package/utils/keyboardUtils.d.ts

@@ -17,5 +17,5 @@ export declare const isCellExitEditModeKeys: (key: string) => boolean;
 export declare const isCellEditCommitKeys: (key: string) => boolean;
 export declare const isNavigationKey: (key: string) => boolean;
 export declare const isKeyboardEvent: (event: any) => event is React.KeyboardEvent<HTMLElement>;
-export declare const isHideMenuKey: (key: React.KeyboardEvent['key']) => boolean;
+export declare const isHideMenuKey: (key: React.KeyboardEvent["key"]) => boolean;
 export declare function isPasteShortcut(event: React.KeyboardEvent): boolean;

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/utils/warning.d.ts

@@ -1,2 +1,2 @@
-export declare const buildWarning: (message: string | string[], gravity?: 'warning' | 'error') => () => void;
+export declare const buildWarning: (message: string | string[], gravity?: "warning" | "error") => () => void;
 export declare const wrapWithWarningOnCall: <F extends Function>(method: F, message: string | string[]) => F | ((...args: any[]) => any);

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]);
-}