@mui/x-data-grid 5.15.2 → 5.17.0

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

@@ -131,14 +131,14 @@ const useGridRows = (apiRef, props) => {
     } // we remove duplicate updates. A server can batch updates, and send several updates for the same row in one fn call.
 
 
-    const uniqUpdates = new Map();
+    const uniqueUpdates = new Map();
     updates.forEach(update => {
       const id = (0, _gridRowsUtils.getRowIdFromRowModel)(update, props.getRowId, 'A row was provided without id when calling updateRows():');
 
-      if (uniqUpdates.has(id)) {
-        uniqUpdates.set(id, (0, _extends2.default)({}, uniqUpdates.get(id), update));
+      if (uniqueUpdates.has(id)) {
+        uniqueUpdates.set(id, (0, _extends2.default)({}, uniqueUpdates.get(id), update));
       } else {
-        uniqUpdates.set(id, update);
+        uniqueUpdates.set(id, update);
       }
     });
     const deletedRowIds = [];
@@ -150,7 +150,7 @@ const useGridRows = (apiRef, props) => {
       idToIdLookup: (0, _extends2.default)({}, prevCache.idToIdLookup),
       ids: [...prevCache.ids]
     };
-    uniqUpdates.forEach((partialRow, id) => {
+    uniqueUpdates.forEach((partialRow, id) => {
       // eslint-disable-next-line no-underscore-dangle
       if (partialRow._action === 'delete') {
         delete newCache.idRowsLookup[id];
@@ -267,8 +267,60 @@ const useGridRows = (apiRef, props) => {
         ids: updatedRows
       })
     }));
-    apiRef.current.applySorting();
+    apiRef.current.publishEvent('rowsSet');
   }, [apiRef, logger]);
+  const replaceRows = React.useCallback((firstRowToRender, newRows) => {
+    if (props.signature === _useGridApiEventHandler.GridSignature.DataGrid && newRows.length > 1) {
+      throw new Error(["MUI: You can't replace rows using `apiRef.current.unstable_replaceRows` on the DataGrid.", 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
+    }
+
+    if (newRows.length === 0) {
+      return;
+    }
+
+    const allRows = (0, _gridRowsSelector.gridRowIdsSelector)(apiRef);
+    const updatedRows = [...allRows];
+    const idRowsLookup = (0, _gridRowsSelector.gridRowsLookupSelector)(apiRef);
+    const idToIdLookup = (0, _gridRowsSelector.gridRowsIdToIdLookupSelector)(apiRef);
+    const tree = (0, _gridRowsSelector.gridRowTreeSelector)(apiRef);
+    const updatedIdRowsLookup = (0, _extends2.default)({}, idRowsLookup);
+    const updatedIdToIdLookup = (0, _extends2.default)({}, idToIdLookup);
+    const updatedTree = (0, _extends2.default)({}, tree);
+    const newRowEntries = newRows.map(newRowModel => {
+      const rowId = (0, _gridRowsUtils.getRowIdFromRowModel)(newRowModel, props.getRowId, 'A row was provided without id when calling replaceRows().');
+      return {
+        id: rowId,
+        model: newRowModel
+      };
+    });
+    newRowEntries.forEach((row, index) => {
+      const [replacedRowId] = updatedRows.splice(firstRowToRender + index, 1, row.id);
+      delete updatedIdRowsLookup[replacedRowId];
+      delete updatedIdToIdLookup[replacedRowId];
+      delete updatedTree[replacedRowId];
+    });
+    newRowEntries.forEach(row => {
+      const rowTreeNodeConfig = {
+        id: row.id,
+        parent: null,
+        depth: 0,
+        groupingKey: null,
+        groupingField: null
+      };
+      updatedIdRowsLookup[row.id] = row.model;
+      updatedIdToIdLookup[row.id] = row.id;
+      updatedTree[row.id] = rowTreeNodeConfig;
+    });
+    apiRef.current.setState(state => (0, _extends2.default)({}, state, {
+      rows: (0, _extends2.default)({}, state.rows, {
+        idRowsLookup: updatedIdRowsLookup,
+        idToIdLookup: updatedIdToIdLookup,
+        tree: updatedTree,
+        ids: updatedRows
+      })
+    }));
+    apiRef.current.publishEvent('rowsSet');
+  }, [apiRef, props.signature, props.getRowId]);
   const rowApi = {
     getRow,
     getRowModels,
@@ -280,7 +332,8 @@ const useGridRows = (apiRef, props) => {
     setRowChildrenExpansion,
     getRowNode,
     getRowIndexRelativeToVisibleRows,
-    getRowGroupChildren
+    getRowGroupChildren,
+    unstable_replaceRows: replaceRows
   };
   /**
    * EVENTS

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

@@ -75,7 +75,7 @@ const useGridRowsMeta = (apiRef, props) => {
       if (!rowsHeightLookup.current[row.id]) {
         rowsHeightLookup.current[row.id] = {
           sizes: {
-            base: rowHeightFromDensity
+            baseCenter: rowHeightFromDensity
           },
           isResized: false,
           autoHeight: false,
@@ -90,7 +90,7 @@ const useGridRowsMeta = (apiRef, props) => {
         sizes
       } = rowsHeightLookup.current[row.id];
       let baseRowHeight = rowHeightFromDensity;
-      const existingBaseRowHeight = sizes.base;
+      const existingBaseRowHeight = sizes.baseCenter;
 
       if (isResized) {
         // Do not recalculate resized row height and use the value from the lookup
@@ -121,12 +121,19 @@ const useGridRowsMeta = (apiRef, props) => {
         }
       } else {
         rowsHeightLookup.current[row.id].needsFirstMeasurement = false;
-      } // We use an object to make simple to check if a height is already added or not
+      }
 
+      const existingBaseSizes = Object.entries(sizes).reduce((acc, [key, size]) => {
+        if (/^base[A-Z]/.test(key)) {
+          acc[key] = size;
+        }
 
-      const initialHeights = {
-        base: baseRowHeight
-      };
+        return acc;
+      }, {}); // We use an object to make simple to check if a height is already added or not
+
+      const initialHeights = (0, _extends2.default)({}, existingBaseSizes, {
+        baseCenter: baseRowHeight
+      });
 
       if (getRowSpacing) {
         var _spacing$top, _spacing$bottom;
@@ -149,9 +156,17 @@ const useGridRowsMeta = (apiRef, props) => {
     const positions = [];
     const currentPageTotalHeight = currentPage.rows.reduce((acc, row) => {
       positions.push(acc);
+      let maximumBaseSize = 0;
+      let otherSizes = 0;
       const processedSizes = calculateRowProcessedSizes(row);
-      const finalRowHeight = Object.values(processedSizes).reduce((acc2, value) => acc2 + value, 0);
-      return acc + finalRowHeight;
+      Object.entries(processedSizes).forEach(([size, value]) => {
+        if (/^base[A-Z]/.test(size)) {
+          maximumBaseSize = value > maximumBaseSize ? value : maximumBaseSize;
+        } else {
+          otherSizes += value;
+        }
+      });
+      return acc + maximumBaseSize + otherSizes;
     }, 0);
     pinnedRows == null ? void 0 : (_pinnedRows$top = pinnedRows.top) == null ? void 0 : _pinnedRows$top.forEach(row => {
       calculateRowProcessedSizes(row);
@@ -177,7 +192,7 @@ const useGridRowsMeta = (apiRef, props) => {
   }, [apiRef, currentPage.rows, rowHeightFromDensity, getRowHeightProp, getRowSpacing, getEstimatedRowHeight, pinnedRows]);
   const getRowHeight = React.useCallback(rowId => {
     const height = rowsHeightLookup.current[rowId];
-    return height ? height.sizes.base : rowHeightFromDensity;
+    return height ? height.sizes.baseCenter : rowHeightFromDensity;
   }, [rowHeightFromDensity]);
 
   const getRowInternalSizes = rowId => {
@@ -187,21 +202,21 @@ const useGridRowsMeta = (apiRef, props) => {
   };
 
   const setRowHeight = React.useCallback((id, height) => {
-    rowsHeightLookup.current[id].sizes.base = height;
+    rowsHeightLookup.current[id].sizes.baseCenter = height;
     rowsHeightLookup.current[id].isResized = true;
     rowsHeightLookup.current[id].needsFirstMeasurement = false;
     hydrateRowsMeta();
   }, [hydrateRowsMeta]);
   const debouncedHydrateRowsMeta = React.useMemo(() => (0, _utils.debounce)(hydrateRowsMeta), [hydrateRowsMeta]);
-  const storeMeasuredRowHeight = React.useCallback((id, height) => {
+  const storeMeasuredRowHeight = React.useCallback((id, height, position) => {
     if (!rowsHeightLookup.current[id] || !rowsHeightLookup.current[id].autoHeight) {
       return;
     } // Only trigger hydration if the value is different, otherwise we trigger a loop
 
 
-    const needsHydration = rowsHeightLookup.current[id].sizes.base !== height;
+    const needsHydration = rowsHeightLookup.current[id].sizes[`base${(0, _utils.capitalize)(position)}`] !== height;
     rowsHeightLookup.current[id].needsFirstMeasurement = false;
-    rowsHeightLookup.current[id].sizes.base = height;
+    rowsHeightLookup.current[id].sizes[`base${(0, _utils.capitalize)(position)}`] = height;
 
     if (needsHydration) {
       debouncedHydrateRowsMeta();
@@ -219,7 +234,11 @@ const useGridRowsMeta = (apiRef, props) => {
     if (hasRowWithAutoHeight.current && index > lastMeasuredRowIndex.current) {
       lastMeasuredRowIndex.current = index;
     }
-  }, []); // The effect is used to build the rows meta data - currentPageTotalHeight and positions.
+  }, []);
+  const resetRowHeights = React.useCallback(() => {
+    rowsHeightLookup.current = {};
+    hydrateRowsMeta();
+  }, [hydrateRowsMeta]); // The effect is used to build the rows meta data - currentPageTotalHeight and positions.
   // Because of variable row height this is needed for the virtualization
 
   React.useEffect(() => {
@@ -233,7 +252,8 @@ const useGridRowsMeta = (apiRef, props) => {
     unstable_getRowHeight: getRowHeight,
     unstable_getRowInternalSizes: getRowInternalSizes,
     unstable_setRowHeight: setRowHeight,
-    unstable_storeRowHeightMeasurement: storeMeasuredRowHeight
+    unstable_storeRowHeightMeasurement: storeMeasuredRowHeight,
+    resetRowHeights
   };
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, rowsMetaApi, 'GridRowsMetaApi');
 };

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

@@ -252,8 +252,19 @@ const useGridVirtualScroller = props => {
   }, [renderContext, updateRenderZonePosition]);
   const updateRenderContext = React.useCallback(nextRenderContext => {
     setRenderContext(nextRenderContext);
+    const [firstRowToRender, lastRowToRender] = getRenderableIndexes({
+      firstIndex: nextRenderContext.firstRowIndex,
+      lastIndex: nextRenderContext.lastRowIndex,
+      minFirstIndex: 0,
+      maxLastIndex: currentPage.rows.length,
+      buffer: rootProps.rowBuffer
+    });
+    apiRef.current.publishEvent('renderedRowsIntervalChange', {
+      firstRowToRender,
+      lastRowToRender
+    });
     prevRenderContext.current = nextRenderContext;
-  }, [setRenderContext, prevRenderContext]);
+  }, [apiRef, setRenderContext, prevRenderContext, currentPage.rows.length, rootProps.rowBuffer]);
   React.useEffect(() => {
     if (containerWidth == null) {
       return;
@@ -324,8 +335,8 @@ const useGridVirtualScroller = props => {
       minFirstColumn = renderZoneMinColumnIndex,
       maxLastColumn = renderZoneMaxColumnIndex,
       availableSpace = containerWidth,
-      ignoreAutoHeight,
-      rowIndexOffset = 0
+      rowIndexOffset = 0,
+      position = 'center'
     } = params;
 
     if (!nextRenderContext || availableSpace == null) {
@@ -395,7 +406,7 @@ const useGridVirtualScroller = props => {
         model
       } = renderedRows[i];
       const lastVisibleRowIndex = firstRowToRender + i === currentPage.rows.length - 1;
-      const baseRowHeight = !apiRef.current.unstable_rowHasAutoHeight(id) || ignoreAutoHeight ? apiRef.current.unstable_getRowHeight(id) : 'auto';
+      const baseRowHeight = !apiRef.current.unstable_rowHasAutoHeight(id) ? apiRef.current.unstable_getRowHeight(id) : 'auto';
       let isSelected;
 
       if (selectedRowsLookup[id] == null) {
@@ -421,7 +432,8 @@ const useGridVirtualScroller = props => {
         selected: isSelected,
         index: rowIndexOffset + ((currentPage == null ? void 0 : (_currentPage$range5 = currentPage.range) == null ? void 0 : _currentPage$range5.firstRowIndex) || 0) + firstRowToRender + i,
         containerWidth: availableSpace,
-        isLastVisible: lastVisibleRowIndex
+        isLastVisible: lastVisibleRowIndex,
+        position: position
       }, typeof getRowProps === 'function' ? getRowProps(id, model) : {}, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.row), id));
     }
 

package/node/hooks/utils/useGridNativeEventListener.js

@@ -19,8 +19,8 @@ const useGridNativeEventListener = (apiRef, ref, eventName, handler, options) =>
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useNativeEventListener');
   const [added, setAdded] = React.useState(false);
   const handlerRef = React.useRef(handler);
-  const wrapHandler = React.useCallback(args => {
-    return handlerRef.current && handlerRef.current(args);
+  const wrapHandler = React.useCallback(event => {
+    return handlerRef.current && handlerRef.current(event);
   }, []);
   React.useEffect(() => {
     handlerRef.current = handler;

package/node/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.15.2
+/** @license MUI v5.17.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/node/internals/index.js

@@ -57,6 +57,12 @@ Object.defineProperty(exports, "clamp", {
     return _utils2.clamp;
   }
 });
+Object.defineProperty(exports, "columnGroupsStateInitializer", {
+  enumerable: true,
+  get: function () {
+    return _useGridColumnGrouping.columnGroupsStateInitializer;
+  }
+});
 Object.defineProperty(exports, "columnMenuStateInitializer", {
   enumerable: true,
   get: function () {
@@ -225,6 +231,18 @@ Object.defineProperty(exports, "useGridClipboard", {
     return _useGridClipboard.useGridClipboard;
   }
 });
+Object.defineProperty(exports, "useGridColumnGrouping", {
+  enumerable: true,
+  get: function () {
+    return _useGridColumnGrouping.useGridColumnGrouping;
+  }
+});
+Object.defineProperty(exports, "useGridColumnGroupingPreProcessors", {
+  enumerable: true,
+  get: function () {
+    return _useGridColumnGroupingPreProcessors.useGridColumnGroupingPreProcessors;
+  }
+});
 Object.defineProperty(exports, "useGridColumnHeaders", {
   enumerable: true,
   get: function () {
@@ -438,6 +456,10 @@ var _useGridColumns = require("../hooks/features/columns/useGridColumns");
 
 var _useGridColumnSpanning = require("../hooks/features/columns/useGridColumnSpanning");
 
+var _useGridColumnGrouping = require("../hooks/features/columnGrouping/useGridColumnGrouping");
+
+var _useGridColumnGroupingPreProcessors = require("../hooks/features/columnGrouping/useGridColumnGroupingPreProcessors");
+
 var _useGridDensity = require("../hooks/features/density/useGridDensity");
 
 var _useGridCsvExport = require("../hooks/features/export/useGridCsvExport");

package/node/models/api/gridColumnGroupingApi.js

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

package/node/models/events/gridEvents.js

@@ -92,4 +92,6 @@ exports.GridEvents = GridEvents;
   GridEvents["preferencePanelOpen"] = "preferencePanelOpen";
   GridEvents["menuOpen"] = "menuOpen";
   GridEvents["menuClose"] = "menuClose";
+  GridEvents["renderedRowsIntervalChange"] = "renderedRowsIntervalChange";
+  GridEvents["fetchRows"] = "fetchRows";
 })(GridEvents || (exports.GridEvents = GridEvents = {}));

package/node/models/gridColumnGrouping.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isLeaf = isLeaf;
+
+function isLeaf(node) {
+  return node.field !== undefined;
+}
+/**
+ * A function used to process headerClassName params.
+ */

package/node/models/index.js

@@ -316,6 +316,19 @@ Object.keys(_gridSortModel).forEach(function (key) {
   });
 });
 
+var _gridColumnGrouping = require("./gridColumnGrouping");
+
+Object.keys(_gridColumnGrouping).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _gridColumnGrouping[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _gridColumnGrouping[key];
+    }
+  });
+});
+
 var _gridFilterOperator = require("./gridFilterOperator");
 
 Object.keys(_gridFilterOperator).forEach(function (key) {

package/node/models/params/gridRenderedRowsIntervalChangeParams.js

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

package/node/models/params/index.js

@@ -184,4 +184,17 @@ Object.keys(_gridMenuParams).forEach(function (key) {
       return _gridMenuParams[key];
     }
   });
+});
+
+var _gridRenderedRowsIntervalChangeParams = require("./gridRenderedRowsIntervalChangeParams");
+
+Object.keys(_gridRenderedRowsIntervalChangeParams).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _gridRenderedRowsIntervalChangeParams[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _gridRenderedRowsIntervalChangeParams[key];
+    }
+  });
 });

package/node/utils/utils.js

@@ -10,6 +10,7 @@ exports.isFunction = isFunction;
 exports.isNumber = isNumber;
 exports.isObject = isObject;
 exports.localStorageAvailable = localStorageAvailable;
+exports.randomNumberBetween = randomNumberBetween;
 
 function isNumber(value) {
   return typeof value === 'number';
@@ -198,4 +199,21 @@ function isDeepEqual(a, b) {
 
 
   return a !== a && b !== b;
+} // Pseudo random number. See https://stackoverflow.com/a/47593316
+
+
+function mulberry32(a) {
+  return () => {
+    /* eslint-disable */
+    let t = a += 0x6d2b79f5;
+    t = Math.imul(t ^ t >>> 15, t | 1);
+    t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+    /* eslint-enable */
+  };
+}
+
+function randomNumberBetween(seed, min, max) {
+  const random = mulberry32(seed);
+  return () => min + (max - min) * random();
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "5.15.2",
+  "version": "5.17.0",
   "description": "The community edition of the data grid component (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -35,8 +35,8 @@
     "directory": "packages/grid/x-data-grid"
   },
   "dependencies": {
-    "@babel/runtime": "^7.18.6",
-    "@mui/utils": "^5.4.1",
+    "@babel/runtime": "^7.18.9",
+    "@mui/utils": "^5.9.3",
     "clsx": "^1.2.1",
     "prop-types": "^15.8.1",
     "reselect": "^4.1.6"

package/utils/utils.d.ts

@@ -35,3 +35,4 @@ export declare const clamp: (value: number, min: number, max: 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;

package/utils/utils.js

@@ -177,4 +177,20 @@ export function isDeepEqual(a, b) {
 
 
   return a !== a && b !== b;
+} // Pseudo random number. See https://stackoverflow.com/a/47593316
+
+function mulberry32(a) {
+  return () => {
+    /* eslint-disable */
+    let t = a += 0x6d2b79f5;
+    t = Math.imul(t ^ t >>> 15, t | 1);
+    t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+    /* eslint-enable */
+  };
+}
+
+export function randomNumberBetween(seed, min, max) {
+  const random = mulberry32(seed);
+  return () => min + (max - min) * random();
 }