@mui/x-data-grid 5.16.0 → 5.17.2

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

@@ -1,6 +1,7 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { debounce } from '@mui/material/utils';
+import { debounce, capitalize } from '@mui/material/utils';
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridSelector } from '../../utils/useGridSelector';
@@ -47,7 +48,7 @@ export var useGridRowsMeta = function useGridRowsMeta(apiRef, props) {
       if (!rowsHeightLookup.current[row.id]) {
         rowsHeightLookup.current[row.id] = {
           sizes: {
-            base: rowHeightFromDensity
+            baseCenter: rowHeightFromDensity
           },
           isResized: false,
           autoHeight: false,
@@ -61,7 +62,7 @@ export var useGridRowsMeta = function useGridRowsMeta(apiRef, props) {
           needsFirstMeasurement = _rowsHeightLookup$cur.needsFirstMeasurement,
           sizes = _rowsHeightLookup$cur.sizes;
       var baseRowHeight = rowHeightFromDensity;
-      var existingBaseRowHeight = sizes.base;
+      var existingBaseRowHeight = sizes.baseCenter;
 
       if (isResized) {
         // Do not recalculate resized row height and use the value from the lookup
@@ -92,12 +93,23 @@ export var useGridRowsMeta = function 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
+      }
+
+      var existingBaseSizes = Object.entries(sizes).reduce(function (acc, _ref) {
+        var _ref2 = _slicedToArray(_ref, 2),
+            key = _ref2[0],
+            size = _ref2[1];
+
+        if (/^base[A-Z]/.test(key)) {
+          acc[key] = size;
+        }
 
+        return acc;
+      }, {}); // We use an object to make simple to check if a height is already added or not
 
-      var initialHeights = {
-        base: baseRowHeight
-      };
+      var initialHeights = _extends({}, existingBaseSizes, {
+        baseCenter: baseRowHeight
+      });
 
       if (getRowSpacing) {
         var _spacing$top, _spacing$bottom;
@@ -120,11 +132,21 @@ export var useGridRowsMeta = function useGridRowsMeta(apiRef, props) {
     var positions = [];
     var currentPageTotalHeight = currentPage.rows.reduce(function (acc, row) {
       positions.push(acc);
+      var maximumBaseSize = 0;
+      var otherSizes = 0;
       var processedSizes = calculateRowProcessedSizes(row);
-      var finalRowHeight = Object.values(processedSizes).reduce(function (acc2, value) {
-        return acc2 + value;
-      }, 0);
-      return acc + finalRowHeight;
+      Object.entries(processedSizes).forEach(function (_ref3) {
+        var _ref4 = _slicedToArray(_ref3, 2),
+            size = _ref4[0],
+            value = _ref4[1];
+
+        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(function (row) {
       calculateRowProcessedSizes(row);
@@ -150,7 +172,7 @@ export var useGridRowsMeta = function useGridRowsMeta(apiRef, props) {
   }, [apiRef, currentPage.rows, rowHeightFromDensity, getRowHeightProp, getRowSpacing, getEstimatedRowHeight, pinnedRows]);
   var getRowHeight = React.useCallback(function (rowId) {
     var height = rowsHeightLookup.current[rowId];
-    return height ? height.sizes.base : rowHeightFromDensity;
+    return height ? height.sizes.baseCenter : rowHeightFromDensity;
   }, [rowHeightFromDensity]);
 
   var getRowInternalSizes = function getRowInternalSizes(rowId) {
@@ -160,7 +182,7 @@ export var useGridRowsMeta = function useGridRowsMeta(apiRef, props) {
   };
 
   var setRowHeight = React.useCallback(function (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();
@@ -168,15 +190,15 @@ export var useGridRowsMeta = function useGridRowsMeta(apiRef, props) {
   var debouncedHydrateRowsMeta = React.useMemo(function () {
     return debounce(hydrateRowsMeta);
   }, [hydrateRowsMeta]);
-  var storeMeasuredRowHeight = React.useCallback(function (id, height) {
+  var storeMeasuredRowHeight = React.useCallback(function (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
 
 
-    var needsHydration = rowsHeightLookup.current[id].sizes.base !== height;
+    var needsHydration = rowsHeightLookup.current[id].sizes["base".concat(capitalize(position))] !== height;
     rowsHeightLookup.current[id].needsFirstMeasurement = false;
-    rowsHeightLookup.current[id].sizes.base = height;
+    rowsHeightLookup.current[id].sizes["base".concat(capitalize(position))] = height;
 
     if (needsHydration) {
       debouncedHydrateRowsMeta();
@@ -194,7 +216,11 @@ export var useGridRowsMeta = function 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.
+  }, []);
+  var resetRowHeights = React.useCallback(function () {
+    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(function () {
@@ -208,7 +234,8 @@ export var useGridRowsMeta = function useGridRowsMeta(apiRef, props) {
     unstable_getRowHeight: getRowHeight,
     unstable_getRowInternalSizes: getRowInternalSizes,
     unstable_setRowHeight: setRowHeight,
-    unstable_storeRowHeightMeasurement: storeMeasuredRowHeight
+    unstable_storeRowHeightMeasurement: storeMeasuredRowHeight,
+    resetRowHeights: resetRowHeights
   };
   useGridApiMethod(apiRef, rowsMetaApi, 'GridRowsMetaApi');
 };

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

@@ -238,8 +238,24 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
   }, [renderContext, updateRenderZonePosition]);
   var updateRenderContext = React.useCallback(function (nextRenderContext) {
     setRenderContext(nextRenderContext);
+
+    var _getRenderableIndexes7 = getRenderableIndexes({
+      firstIndex: nextRenderContext.firstRowIndex,
+      lastIndex: nextRenderContext.lastRowIndex,
+      minFirstIndex: 0,
+      maxLastIndex: currentPage.rows.length,
+      buffer: rootProps.rowBuffer
+    }),
+        _getRenderableIndexes8 = _slicedToArray(_getRenderableIndexes7, 2),
+        firstRowToRender = _getRenderableIndexes8[0],
+        lastRowToRender = _getRenderableIndexes8[1];
+
+    apiRef.current.publishEvent('renderedRowsIntervalChange', {
+      firstRowToRender: firstRowToRender,
+      lastRowToRender: lastRowToRender
+    });
     prevRenderContext.current = nextRenderContext;
-  }, [setRenderContext, prevRenderContext]);
+  }, [apiRef, setRenderContext, prevRenderContext, currentPage.rows.length, rootProps.rowBuffer]);
   React.useEffect(function () {
     if (containerWidth == null) {
       return;
@@ -311,9 +327,10 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
         maxLastColumn = _params$maxLastColumn === void 0 ? renderZoneMaxColumnIndex : _params$maxLastColumn,
         _params$availableSpac = params.availableSpace,
         availableSpace = _params$availableSpac === void 0 ? containerWidth : _params$availableSpac,
-        ignoreAutoHeight = params.ignoreAutoHeight,
         _params$rowIndexOffse = params.rowIndexOffset,
-        rowIndexOffset = _params$rowIndexOffse === void 0 ? 0 : _params$rowIndexOffse;
+        rowIndexOffset = _params$rowIndexOffse === void 0 ? 0 : _params$rowIndexOffse,
+        _params$position = params.position,
+        position = _params$position === void 0 ? 'center' : _params$position;
 
     if (!nextRenderContext || availableSpace == null) {
       return null;
@@ -322,16 +339,16 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
     var rowBuffer = !disableVirtualization ? rootProps.rowBuffer : 0;
     var columnBuffer = !disableVirtualization ? rootProps.columnBuffer : 0;
 
-    var _getRenderableIndexes7 = getRenderableIndexes({
+    var _getRenderableIndexes9 = getRenderableIndexes({
       firstIndex: nextRenderContext.firstRowIndex,
       lastIndex: nextRenderContext.lastRowIndex,
       minFirstIndex: 0,
       maxLastIndex: currentPage.rows.length,
       buffer: rowBuffer
     }),
-        _getRenderableIndexes8 = _slicedToArray(_getRenderableIndexes7, 2),
-        firstRowToRender = _getRenderableIndexes8[0],
-        lastRowToRender = _getRenderableIndexes8[1];
+        _getRenderableIndexes10 = _slicedToArray(_getRenderableIndexes9, 2),
+        firstRowToRender = _getRenderableIndexes10[0],
+        lastRowToRender = _getRenderableIndexes10[1];
 
     var renderedRows = [];
 
@@ -362,16 +379,16 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
       }
     }
 
-    var _getRenderableIndexes9 = getRenderableIndexes({
+    var _getRenderableIndexes11 = getRenderableIndexes({
       firstIndex: nextRenderContext.firstColumnIndex,
       lastIndex: nextRenderContext.lastColumnIndex,
       minFirstIndex: minFirstColumn,
       maxLastIndex: maxLastColumn,
       buffer: columnBuffer
     }),
-        _getRenderableIndexes10 = _slicedToArray(_getRenderableIndexes9, 2),
-        initialFirstColumnToRender = _getRenderableIndexes10[0],
-        lastColumnToRender = _getRenderableIndexes10[1];
+        _getRenderableIndexes12 = _slicedToArray(_getRenderableIndexes11, 2),
+        initialFirstColumnToRender = _getRenderableIndexes12[0],
+        lastColumnToRender = _getRenderableIndexes12[1];
 
     var firstColumnToRender = getFirstNonSpannedColumnToRender({
       firstColumnToRender: initialFirstColumnToRender,
@@ -390,7 +407,7 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
           _id = _renderedRows$i.id,
           _model = _renderedRows$i.model;
       var lastVisibleRowIndex = firstRowToRender + i === currentPage.rows.length - 1;
-      var baseRowHeight = !apiRef.current.unstable_rowHasAutoHeight(_id) || ignoreAutoHeight ? apiRef.current.unstable_getRowHeight(_id) : 'auto';
+      var baseRowHeight = !apiRef.current.unstable_rowHasAutoHeight(_id) ? apiRef.current.unstable_getRowHeight(_id) : 'auto';
       var isSelected = void 0;
 
       if (selectedRowsLookup[_id] == null) {
@@ -416,7 +433,8 @@ export var useGridVirtualScroller = function 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/legacy/index.js

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

package/legacy/internals/index.js

@@ -38,7 +38,7 @@ export { useGridScroll } from '../hooks/features/scroll/useGridScroll';
 export { useGridEvents } from '../hooks/features/events/useGridEvents';
 export { useGridDimensions } from '../hooks/features/dimensions/useGridDimensions';
 export { useGridStatePersistence } from '../hooks/features/statePersistence/useGridStatePersistence';
-export { useGridVirtualScroller } from '../hooks/features/virtualization/useGridVirtualScroller';
+export { useGridVirtualScroller, getRenderableIndexes } from '../hooks/features/virtualization/useGridVirtualScroller';
 export { useGridVisibleRows } from '../hooks/utils/useGridVisibleRows';
 export { useGridInitializeState } from '../hooks/utils/useGridInitializeState';
 export { getColumnsToExport, defaultGetRowsToExport } from '../hooks/features/export/utils';

package/legacy/models/events/gridEvents.js

@@ -85,6 +85,8 @@ var GridEvents;
   GridEvents["preferencePanelOpen"] = "preferencePanelOpen";
   GridEvents["menuOpen"] = "menuOpen";
   GridEvents["menuClose"] = "menuClose";
+  GridEvents["renderedRowsIntervalChange"] = "renderedRowsIntervalChange";
+  GridEvents["fetchRows"] = "fetchRows";
 })(GridEvents || (GridEvents = {}));
 
 export { GridEvents };

package/legacy/models/params/gridRenderedRowsIntervalChangeParams.js

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

package/legacy/models/params/index.js

@@ -11,4 +11,5 @@ export * from './gridValueOptionsParams';
 export * from './gridCellParams';
 export * from './gridSortModelParams';
 export * from './gridPreferencePanelParams';
-export * from './gridMenuParams';
+export * from './gridMenuParams';
+export * from './gridRenderedRowsIntervalChangeParams';

package/legacy/utils/utils.js

@@ -180,4 +180,29 @@ export function isDeepEqual(a, b) {
 
 
   return a !== a && b !== b;
+} // Pseudo random number. See https://stackoverflow.com/a/47593316
+
+function mulberry32(a) {
+  return function () {
+    /* eslint-disable */
+    var 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) {
+  var random = mulberry32(seed);
+  return function () {
+    return min + (max - min) * random();
+  };
+}
+export function deepClone(obj) {
+  if (typeof structuredClone === 'function') {
+    return structuredClone(obj);
+  }
+
+  return JSON.parse(JSON.stringify(obj));
 }

package/models/api/gridParamsApi.d.ts

@@ -24,7 +24,7 @@ export interface GridParamsApi {
      * @param {string} field The column field.
      * @returns {GridCellParams} The cell params.
      */
-    getCellParams: <V = any, R extends GridValidRowModel = any, F = V>(id: GridRowId, field: string) => GridCellParams<R, V, F>;
+    getCellParams: <V = any, R extends GridValidRowModel = any, F = V>(id: GridRowId, field: string) => GridCellParams<V, R, F>;
     /**
      * Gets the [[GridRowParams]] object that is passed as argument in events.
      * @param {GridRowId} id The id of the row.

package/models/api/gridRowApi.d.ts

@@ -86,4 +86,10 @@ export interface GridRowApi {
      * @returns {GridRowId[]} The id of each row in the grouping criteria.
      */
     getRowGroupChildren: (params: GridRowGroupChildrenGetterParams) => GridRowId[];
+    /**
+     * Replace a set of rows with new rows.
+     * @param {number} firstRowToReplace The index of the first row to be replaced.
+     * @param {GridRowModel[]} newRows The new rows.
+     */
+    unstable_replaceRows: (firstRowToReplace: number, newRows: GridRowModel[]) => void;
 }

package/models/api/gridRowsMetaApi.d.ts

@@ -28,9 +28,10 @@ export interface GridRowsMetaApi {
      * Stores the row height measurement and triggers an hydration, if needed.
      * @param {GridRowId} id The id of the row.
      * @param {number} height The new height.
+     * @param {string} position The position to it the row belongs to.
      * @ignore - do not document.
      */
-    unstable_storeRowHeightMeasurement: (id: GridRowId, height: number) => void;
+    unstable_storeRowHeightMeasurement: (id: GridRowId, height: number, position: 'left' | 'center' | 'right') => void;
     /**
      * Determines if the height of a row is "auto".
      * @ignore - do not document.
@@ -48,4 +49,8 @@ export interface GridRowsMetaApi {
      * @ignore - do not document.
      */
     unstable_setLastMeasuredRowIndex: (index: number) => void;
+    /**
+     * Forces the recalculation of the heights of all rows.
+     */
+    resetRowHeights: () => void;
 }

package/models/events/gridEventLookup.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { GridCellEditCommitParams, GridColumnHeaderParams, GridColumnOrderChangeParams, GridColumnResizeParams, GridColumnVisibilityChangeParams, GridEditCellPropsParams, GridHeaderSelectionCheckboxParams, GridMenuParams, GridPreferencePanelParams, GridRowParams, GridRowSelectionCheckboxParams, GridScrollParams } from '../params';
+import type { GridCellEditCommitParams, GridColumnHeaderParams, GridColumnOrderChangeParams, GridColumnResizeParams, GridColumnVisibilityChangeParams, GridEditCellPropsParams, GridHeaderSelectionCheckboxParams, GridMenuParams, GridPreferencePanelParams, GridRenderedRowsIntervalChangeParams, GridRowParams, GridRowSelectionCheckboxParams, GridScrollParams } from '../params';
 import { GridCellEditStartParams, GridCellEditStopParams } from '../params/gridEditCellParams';
 import { GridCellParams } from '../params/gridCellParams';
 import type { GridFilterModel } from '../gridFilterModel';
@@ -403,6 +403,12 @@ export interface GridEventLookup extends GridRowEventLookup, GridColumnHeaderEve
     rowExpansionChange: {
         params: GridRowTreeNodeConfig;
     };
+    /**
+     * Fired when the rendered rows index interval changes. Called with a [[GridRenderedRowsIntervalChangeParams]] object.
+     */
+    renderedRowsIntervalChange: {
+        params: GridRenderedRowsIntervalChangeParams;
+    };
     /**
      * Fired when the mode of a cell changes.
      * @ignore - do not document

package/models/events/gridEvents.d.ts

@@ -83,7 +83,9 @@ declare enum GridEvents {
     preferencePanelClose = "preferencePanelClose",
     preferencePanelOpen = "preferencePanelOpen",
     menuOpen = "menuOpen",
-    menuClose = "menuClose"
+    menuClose = "menuClose",
+    renderedRowsIntervalChange = "renderedRowsIntervalChange",
+    fetchRows = "fetchRows"
 }
 export declare type GridEventsStr = keyof GridEventLookup;
 export { GridEvents };

package/models/events/gridEvents.js

@@ -85,6 +85,8 @@ var GridEvents;
   GridEvents["preferencePanelOpen"] = "preferencePanelOpen";
   GridEvents["menuOpen"] = "menuOpen";
   GridEvents["menuClose"] = "menuClose";
+  GridEvents["renderedRowsIntervalChange"] = "renderedRowsIntervalChange";
+  GridEvents["fetchRows"] = "fetchRows";
 })(GridEvents || (GridEvents = {}));
 
 export { GridEvents };

package/models/gridSlotsComponent.d.ts

@@ -50,6 +50,11 @@ export interface GridSlotsComponent extends GridIconSlotsComponent {
      * @default GridCell
      */
     Cell: React.JSXElementConstructor<any>;
+    /**
+     * Component rendered for each skeleton cell.
+     * @default GridSkeletonCell
+     */
+    SkeletonCell: React.JSXElementConstructor<any>;
     /**
      * Filter icon component rendered in each column header.
      * @default GridColumnHeaderFilterIconButton

package/models/params/gridCellParams.d.ts

@@ -16,7 +16,8 @@ export interface GridCellParams<V = any, R extends GridValidRowModel = any, F =
      */
     field: string;
     /**
-     * The cell value, but if the column has valueGetter, use getValue.
+     * The cell value.
+     * If the column has `valueGetter`, use `params.row` to directly access the fields.
      */
     value?: V | undefined;
     /**
@@ -92,12 +93,16 @@ export interface GridRenderEditCellParams<V = any, R extends GridValidRowModel =
 /**
  * Parameters passed to `colDef.valueGetter`.
  */
-export interface GridValueGetterParams<V = any, R = any> extends Omit<GridCellParams<V, R, any>, 'formattedValue' | 'isEditable'> {
+export interface GridValueGetterParams<V = any, R extends GridValidRowModel = GridValidRowModel> extends Omit<GridCellParams<V, R, any>, 'formattedValue' | 'isEditable'> {
     /**
      * GridApi that let you manipulate the grid.
      * @deprecated Use the `apiRef` returned by `useGridApiContext` or `useGridApiRef` (only available in `@mui/x-data-grid-pro`)
      */
     api: any;
+    /**
+     * The default value for the cell that the `valueGetter` is overriding.
+     */
+    value: GridCellParams<V, R, any>['value'];
 }
 /**
  * @deprecated Use `GridValueGetterParams` instead.

package/models/params/gridRenderedRowsIntervalChangeParams.d.ts

@@ -0,0 +1,10 @@
+export interface GridRenderedRowsIntervalChangeParams {
+    /**
+     * The index of the first row to render.
+     */
+    firstRowToRender: number;
+    /**
+     * The index of the last row to render.
+     */
+    lastRowToRender: number;
+}

package/models/params/gridRenderedRowsIntervalChangeParams.js

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

package/models/params/index.d.ts

@@ -12,3 +12,4 @@ export * from './gridCellParams';
 export * from './gridSortModelParams';
 export * from './gridPreferencePanelParams';
 export * from './gridMenuParams';
+export * from './gridRenderedRowsIntervalChangeParams';

package/models/params/index.js

@@ -11,4 +11,5 @@ export * from './gridValueOptionsParams';
 export * from './gridCellParams';
 export * from './gridSortModelParams';
 export * from './gridPreferencePanelParams';
-export * from './gridMenuParams';
+export * from './gridMenuParams';
+export * from './gridRenderedRowsIntervalChangeParams';