@mui/x-data-grid 8.9.1 → 8.9.2

package/hooks/features/dimensions/useGridDimensions.js

@@ -10,11 +10,8 @@ exports.dimensionsStateInitializer = void 0;
 exports.useGridDimensions = useGridDimensions;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
-var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
-var _ownerDocument = _interopRequireDefault(require("@mui/utils/ownerDocument"));
-var _throttle = require("@mui/x-internals/throttle");
-var _isDeepEqual = require("@mui/x-internals/isDeepEqual");
+var _store = require("@mui/x-internals/store");
+var _xVirtualizer = require("@mui/x-virtualizer");
 var _useGridEvent = require("../../utils/useGridEvent");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _createSelector = require("../../../utils/createSelector");
@@ -22,10 +19,6 @@ var _useGridLogger = require("../../utils/useGridLogger");
 var _columns = require("../columns");
 var _gridDimensionsSelectors = require("./gridDimensionsSelectors");
 var _density = require("../density");
-var _virtualization = require("../virtualization");
-var _utils = require("../../utils");
-var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
-var _gridRowsMetaSelector = require("../rows/gridRowsMetaSelector");
 var _gridRowsUtils = require("../rows/gridRowsUtils");
 var _gridColumnsUtils = require("../columns/gridColumnsUtils");
 var _dataGridPropsDefaultValues = require("../../../constants/dataGridPropsDefaultValues");
@@ -75,148 +68,10 @@ const columnsTotalWidthSelector = (0, _createSelector.createSelector)(_columns.g
 function useGridDimensions(apiRef, props) {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useResizeContainer');
   const errorShown = React.useRef(false);
-  const rootDimensionsRef = React.useRef(EMPTY_SIZE);
-  const pinnedColumns = (0, _utils.useGridSelector)(apiRef, _columns.gridVisiblePinnedColumnDefinitionsSelector);
-  const densityFactor = (0, _utils.useGridSelector)(apiRef, _density.gridDensityFactorSelector);
-  const columnsTotalWidth = (0, _utils.useGridSelector)(apiRef, columnsTotalWidthSelector);
-  const isFirstSizing = React.useRef(true);
-  const {
-    rowHeight,
-    headerHeight,
-    groupHeaderHeight,
-    headerFilterHeight,
-    headersTotalHeight,
-    leftPinnedWidth,
-    rightPinnedWidth
-  } = getStaticDimensions(props, apiRef, densityFactor, pinnedColumns);
+  const virtualizer = apiRef.current.virtualizer;
+  const updateDimensions = virtualizer.api.updateDimensions;
+  const getViewportPageSize = virtualizer.api.getViewportPageSize;
   const getRootDimensions = React.useCallback(() => (0, _gridDimensionsSelectors.gridDimensionsSelector)(apiRef), [apiRef]);
-  const setDimensions = React.useCallback(dimensions => {
-    apiRef.current.setState(state => (0, _extends2.default)({}, state, {
-      dimensions
-    }));
-    if (apiRef.current.rootElementRef.current) {
-      setCSSVariables(apiRef.current.rootElementRef.current, (0, _gridDimensionsSelectors.gridDimensionsSelector)(apiRef));
-    }
-  }, [apiRef]);
-  const getViewportPageSize = React.useCallback(() => {
-    const dimensions = (0, _gridDimensionsSelectors.gridDimensionsSelector)(apiRef);
-    if (!dimensions.isReady) {
-      return 0;
-    }
-    const currentPage = (0, _useGridVisibleRows.getVisibleRows)(apiRef);
-
-    // TODO: Use a combination of scrollTop, dimensions.viewportInnerSize.height and rowsMeta.possitions
-    // to find out the maximum number of rows that can fit in the visible part of the grid
-    if (props.getRowHeight) {
-      const renderContext = (0, _virtualization.gridRenderContextSelector)(apiRef);
-      const viewportPageSize = renderContext.lastRowIndex - renderContext.firstRowIndex;
-      return Math.min(viewportPageSize - 1, currentPage.rows.length);
-    }
-    const maximumPageSizeWithoutScrollBar = Math.floor(dimensions.viewportInnerSize.height / rowHeight);
-    return Math.min(maximumPageSizeWithoutScrollBar, currentPage.rows.length);
-  }, [apiRef, props.getRowHeight, rowHeight]);
-  const updateDimensions = React.useCallback(() => {
-    if (isFirstSizing.current) {
-      return;
-    }
-    // All the floating point dimensions should be rounded to .1 decimal places to avoid subpixel rendering issues
-    // https://github.com/mui/mui-x/issues/9550#issuecomment-1619020477
-    // https://github.com/mui/mui-x/issues/15721
-    const scrollbarSize = measureScrollbarSize(apiRef.current.mainElementRef.current, props.scrollbarSize);
-    const rowsMeta = (0, _gridRowsMetaSelector.gridRowsMetaSelector)(apiRef);
-    const topContainerHeight = headersTotalHeight + rowsMeta.pinnedTopRowsTotalHeight;
-    const bottomContainerHeight = rowsMeta.pinnedBottomRowsTotalHeight;
-    const contentSize = {
-      width: columnsTotalWidth,
-      height: (0, _roundToDecimalPlaces.roundToDecimalPlaces)(rowsMeta.currentPageTotalHeight, 1)
-    };
-    let viewportOuterSize;
-    let viewportInnerSize;
-    let hasScrollX = false;
-    let hasScrollY = false;
-    if (props.autoHeight) {
-      hasScrollY = false;
-      hasScrollX = Math.round(columnsTotalWidth) > Math.round(rootDimensionsRef.current.width);
-      viewportOuterSize = {
-        width: rootDimensionsRef.current.width,
-        height: topContainerHeight + bottomContainerHeight + contentSize.height
-      };
-      viewportInnerSize = {
-        width: Math.max(0, viewportOuterSize.width - (hasScrollY ? scrollbarSize : 0)),
-        height: Math.max(0, viewportOuterSize.height - (hasScrollX ? scrollbarSize : 0))
-      };
-    } else {
-      viewportOuterSize = {
-        width: rootDimensionsRef.current.width,
-        height: rootDimensionsRef.current.height
-      };
-      viewportInnerSize = {
-        width: Math.max(0, viewportOuterSize.width),
-        height: Math.max(0, viewportOuterSize.height - topContainerHeight - bottomContainerHeight)
-      };
-      const content = contentSize;
-      const container = viewportInnerSize;
-      const hasScrollXIfNoYScrollBar = content.width > container.width;
-      const hasScrollYIfNoXScrollBar = content.height > container.height;
-      if (hasScrollXIfNoYScrollBar || hasScrollYIfNoXScrollBar) {
-        hasScrollY = hasScrollYIfNoXScrollBar;
-        hasScrollX = content.width + (hasScrollY ? scrollbarSize : 0) > container.width;
-
-        // We recalculate the scroll y to consider the size of the x scrollbar.
-        if (hasScrollX) {
-          hasScrollY = content.height + scrollbarSize > container.height;
-        }
-      }
-      if (hasScrollY) {
-        viewportInnerSize.width -= scrollbarSize;
-      }
-      if (hasScrollX) {
-        viewportInnerSize.height -= scrollbarSize;
-      }
-    }
-    const rowWidth = Math.max(viewportOuterSize.width, columnsTotalWidth + (hasScrollY ? scrollbarSize : 0));
-    const minimumSize = {
-      width: columnsTotalWidth,
-      height: topContainerHeight + contentSize.height + bottomContainerHeight
-    };
-    const newDimensions = {
-      isReady: true,
-      root: rootDimensionsRef.current,
-      viewportOuterSize,
-      viewportInnerSize,
-      contentSize,
-      minimumSize,
-      hasScrollX,
-      hasScrollY,
-      scrollbarSize,
-      headerHeight,
-      groupHeaderHeight,
-      headerFilterHeight,
-      rowWidth,
-      rowHeight,
-      columnsTotalWidth,
-      leftPinnedWidth,
-      rightPinnedWidth,
-      headersTotalHeight,
-      topContainerHeight,
-      bottomContainerHeight
-    };
-    const prevDimensions = apiRef.current.state.dimensions;
-    if ((0, _isDeepEqual.isDeepEqual)(prevDimensions, newDimensions)) {
-      return;
-    }
-    setDimensions(newDimensions);
-    if (!areElementSizesEqual(newDimensions.viewportInnerSize, prevDimensions.viewportInnerSize)) {
-      apiRef.current.publishEvent('viewportInnerSizeChange', newDimensions.viewportInnerSize);
-    }
-    apiRef.current.updateRenderContext?.();
-  }, [apiRef, setDimensions, props.scrollbarSize, props.autoHeight, rowHeight, headerHeight, groupHeaderHeight, headerFilterHeight, columnsTotalWidth, headersTotalHeight, leftPinnedWidth, rightPinnedWidth]);
-  const updateDimensionCallback = (0, _useEventCallback.default)(updateDimensions);
-  const debouncedUpdateDimensions = React.useMemo(() => props.resizeThrottleMs > 0 ? (0, _throttle.throttle)(() => {
-    updateDimensionCallback();
-    apiRef.current.publishEvent('debouncedResize', rootDimensionsRef.current);
-  }, props.resizeThrottleMs) : undefined, [apiRef, props.resizeThrottleMs, updateDimensionCallback]);
-  React.useEffect(() => debouncedUpdateDimensions?.clear, [debouncedUpdateDimensions]);
   const apiPublic = {
     getRootDimensions
   };
@@ -224,14 +79,12 @@ function useGridDimensions(apiRef, props) {
     updateDimensions,
     getViewportPageSize
   };
-  (0, _useEnhancedEffect.default)(updateDimensions, [updateDimensions]);
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, apiPublic, 'public');
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, apiPrivate, 'private');
-  const handleRootMount = React.useCallback(root => {
+  const handleRootMount = root => {
     setCSSVariables(root, (0, _gridDimensionsSelectors.gridDimensionsSelector)(apiRef));
-  }, [apiRef]);
-  const handleResize = React.useCallback(size => {
-    rootDimensionsRef.current = size;
+  };
+  const handleResize = size => {
     if (size.height === 0 && !errorShown.current && !props.autoHeight && !_isJSDOM.isJSDOM) {
       logger.error(['The parent DOM element of the Data Grid has an empty height.', 'Please make sure that this element has an intrinsic height.', 'The grid displays with a height of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
       errorShown.current = true;
@@ -240,17 +93,19 @@ function useGridDimensions(apiRef, props) {
       logger.error(['The parent DOM element of the Data Grid has an empty width.', 'Please make sure that this element has an intrinsic width.', 'The grid displays with a width of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
       errorShown.current = true;
     }
-    if (isFirstSizing.current || !debouncedUpdateDimensions) {
-      // We want to initialize the grid dimensions as soon as possible to avoid flickering
-      isFirstSizing.current = false;
-      updateDimensions();
-      return;
-    }
-    debouncedUpdateDimensions();
-  }, [updateDimensions, props.autoHeight, debouncedUpdateDimensions, logger]);
+  };
   (0, _useGridEvent.useGridEventPriority)(apiRef, 'rootMount', handleRootMount);
   (0, _useGridEvent.useGridEventPriority)(apiRef, 'resize', handleResize);
   (0, _useGridEvent.useGridEventPriority)(apiRef, 'debouncedResize', props.onResize);
+  (0, _store.useStoreEffect)(virtualizer.store, _xVirtualizer.Dimensions.selectors.dimensions, (previous, next) => {
+    if (apiRef.current.rootElementRef.current) {
+      setCSSVariables(apiRef.current.rootElementRef.current, next);
+    }
+    if (!areElementSizesEqual(next.viewportInnerSize, previous.viewportInnerSize)) {
+      apiRef.current.publishEvent('viewportInnerSizeChange', next.viewportInnerSize);
+    }
+    apiRef.current.publishEvent('debouncedResize', next.root);
+  });
 }
 function setCSSVariables(root, dimensions) {
   const set = (k, v) => root.style.setProperty(k, v);
@@ -280,31 +135,6 @@ function getStaticDimensions(props, apiRef, density, pinnedColumnns) {
     rightPinnedWidth: pinnedColumnns.right.reduce((w, col) => w + col.computedWidth, 0)
   };
 }
-const scrollbarSizeCache = new WeakMap();
-function measureScrollbarSize(element, scrollbarSize) {
-  if (scrollbarSize !== undefined) {
-    return scrollbarSize;
-  }
-  if (element === null) {
-    return 0;
-  }
-  const cachedSize = scrollbarSizeCache.get(element);
-  if (cachedSize !== undefined) {
-    return cachedSize;
-  }
-  const doc = (0, _ownerDocument.default)(element);
-  const scrollDiv = doc.createElement('div');
-  scrollDiv.style.width = '99px';
-  scrollDiv.style.height = '99px';
-  scrollDiv.style.position = 'absolute';
-  scrollDiv.style.overflow = 'scroll';
-  scrollDiv.className = 'scrollDiv';
-  element.appendChild(scrollDiv);
-  const size = scrollDiv.offsetWidth - scrollDiv.clientWidth;
-  element.removeChild(scrollDiv);
-  scrollbarSizeCache.set(element, size);
-  return size;
-}
 function areElementSizesEqual(a, b) {
   return a.width === b.width && a.height === b.height;
 }

package/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js

@@ -65,7 +65,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
       }
     }
     const field = (0, _gridColumnsSelector.gridVisibleColumnFieldsSelector)(apiRef)[colIndex];
-    const nonRowSpannedRowId = (0, _utils.findNonRowSpannedCell)(apiRef, rowId, field, rowSpanScanDirection);
+    const nonRowSpannedRowId = (0, _utils.findNonRowSpannedCell)(apiRef, rowId, colIndex, rowSpanScanDirection);
     // `scrollToIndexes` requires a rowIndex relative to all visible rows.
     // Those rows do not include pinned rows, but pinned rows do not need scroll anyway.
     const rowIndexRelativeToAllRows = visibleSortedRows.findIndex(row => row.id === nonRowSpannedRowId);

package/hooks/features/keyboardNavigation/utils.d.ts

@@ -1,6 +1,6 @@
 import { RefObject } from '@mui/x-internals/types';
-import { GridColDef, GridRowId } from "../../../models/index.js";
-import { GridApiCommunity } from "../../../models/api/gridApiCommunity.js";
+import { GridRowId } from "../../../models/index.js";
+import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
 export declare const getLeftColumnIndex: ({
   currentColIndex,
   firstColIndex,
@@ -23,4 +23,4 @@ export declare const getRightColumnIndex: ({
   lastColIndex: number;
   isRtl: boolean;
 }) => number | null;
-export declare function findNonRowSpannedCell(apiRef: RefObject<GridApiCommunity>, rowId: GridRowId, field: GridColDef['field'], rowSpanScanDirection: 'up' | 'down'): GridRowId;
+export declare function findNonRowSpannedCell(apiRef: RefObject<GridPrivateApiCommunity>, rowId: GridRowId, colIndex: number, rowSpanScanDirection: 'up' | 'down'): GridRowId;

package/hooks/features/keyboardNavigation/utils.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.findNonRowSpannedCell = findNonRowSpannedCell;
 exports.getRightColumnIndex = exports.getLeftColumnIndex = void 0;
+var _xVirtualizer = require("@mui/x-virtualizer");
 var _gridFilterSelector = require("../filter/gridFilterSelector");
-var _gridRowSpanningSelectors = require("../rows/gridRowSpanningSelectors");
 const getLeftColumnIndex = ({
   currentColIndex,
   firstColIndex,
@@ -43,9 +43,9 @@ const getRightColumnIndex = ({
   return null;
 };
 exports.getRightColumnIndex = getRightColumnIndex;
-function findNonRowSpannedCell(apiRef, rowId, field, rowSpanScanDirection) {
-  const rowSpanHiddenCells = (0, _gridRowSpanningSelectors.gridRowSpanningHiddenCellsSelector)(apiRef);
-  if (!rowSpanHiddenCells[rowId]?.[field]) {
+function findNonRowSpannedCell(apiRef, rowId, colIndex, rowSpanScanDirection) {
+  const rowSpanHiddenCells = _xVirtualizer.Rowspan.selectors.hiddenCells(apiRef.current.virtualizer.store.state);
+  if (!rowSpanHiddenCells[rowId]?.[colIndex]) {
     return rowId;
   }
   const filteredSortedRowIds = (0, _gridFilterSelector.gridFilteredSortedRowIdsSelector)(apiRef);
@@ -53,7 +53,7 @@ function findNonRowSpannedCell(apiRef, rowId, field, rowSpanScanDirection) {
   let nextRowIndex = filteredSortedRowIds.indexOf(rowId) + (rowSpanScanDirection === 'down' ? 1 : -1);
   while (nextRowIndex >= 0 && nextRowIndex < filteredSortedRowIds.length) {
     const nextRowId = filteredSortedRowIds[nextRowIndex];
-    if (!rowSpanHiddenCells[nextRowId]?.[field]) {
+    if (!rowSpanHiddenCells[nextRowId]?.[colIndex]) {
       return nextRowId;
     }
     nextRowIndex += rowSpanScanDirection === 'down' ? 1 : -1;

package/hooks/features/pivoting/gridPivotingInterfaces.d.ts

@@ -2,7 +2,6 @@ import type { GridRowModelUpdate } from '@mui/x-data-grid';
 import type { GridColDef } from "../../../models/colDef/index.js";
 export interface GridPivotingStatePartial {
   active: boolean;
-  panelOpen: boolean;
   initialColumns: Map<string, GridColDef> | undefined;
 }
 export interface GridPivotingPrivateApiCommunity {

package/hooks/features/pivoting/gridPivotingSelectors.d.ts

@@ -5,7 +5,4 @@ export declare const gridPivotActiveSelector: (args_0: import("react").RefObject
 } | null>) => boolean;
 export declare const gridPivotInitialColumnsSelector: (args_0: import("react").RefObject<{
   state: GridStateCommunity;
-} | null>) => Map<string, GridColDef>;
-export declare const gridPivotPanelOpenSelector: (args_0: import("react").RefObject<{
-  state: GridStateCommunity;
-} | null>) => boolean;
+} | null>) => Map<string, GridColDef>;

package/hooks/features/pivoting/gridPivotingSelectors.js

@@ -3,12 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridPivotPanelOpenSelector = exports.gridPivotInitialColumnsSelector = exports.gridPivotActiveSelector = void 0;
+exports.gridPivotInitialColumnsSelector = exports.gridPivotActiveSelector = void 0;
 var _createSelector = require("../../../utils/createSelector");
 const gridPivotingStateSelector = (0, _createSelector.createRootSelector)(
 // @ts-ignore
 state => state.pivoting);
 const gridPivotActiveSelector = exports.gridPivotActiveSelector = (0, _createSelector.createSelector)(gridPivotingStateSelector, pivoting => pivoting?.active);
 const emptyColumns = new Map();
-const gridPivotInitialColumnsSelector = exports.gridPivotInitialColumnsSelector = (0, _createSelector.createSelector)(gridPivotingStateSelector, pivoting => pivoting?.initialColumns || emptyColumns);
-const gridPivotPanelOpenSelector = exports.gridPivotPanelOpenSelector = (0, _createSelector.createSelector)(gridPivotingStateSelector, pivoting => pivoting?.panelOpen);
+const gridPivotInitialColumnsSelector = exports.gridPivotInitialColumnsSelector = (0, _createSelector.createSelector)(gridPivotingStateSelector, pivoting => pivoting?.initialColumns || emptyColumns);

package/hooks/features/rows/gridRowsMetaInterfaces.d.ts

@@ -1,12 +1,6 @@
+import type { HeightEntry } from '@mui/x-virtualizer/models';
 import { GridRowId } from "../../../models/gridRows.js";
-export type HeightEntry = {
-  content: number;
-  spacingTop: number;
-  spacingBottom: number;
-  detail: number;
-  autoHeight: boolean;
-  needsFirstMeasurement: boolean;
-};
+export type { HeightEntry } from '@mui/x-virtualizer/models';
 export type HeightCache = Map<GridRowId, HeightEntry>;
 export interface GridRowsMetaInternalCache {
   /**

package/hooks/features/rows/gridRowsMetaState.d.ts

@@ -1,21 +1,5 @@
+import { RowsMetaState } from '@mui/x-virtualizer/models';
 /**
  * The grid rows total height and row positions.
  */
-export interface GridRowsMetaState {
-  /**
-   * The sum of all visible grid rows in the current rows.
-   */
-  currentPageTotalHeight: number;
-  /**
-   * The grid rows positions.
-   */
-  positions: number[];
-  /**
-   * The total height of the pinned top rows.
-   */
-  pinnedTopRowsTotalHeight: number;
-  /**
-   * The total height of the pinned bottom rows.
-   */
-  pinnedBottomRowsTotalHeight: number;
-}
+export interface GridRowsMetaState extends RowsMetaState {}

package/hooks/features/rows/useGridRowAriaAttributes.js

@@ -16,7 +16,9 @@ const useGridRowAriaAttributes = () => {
     const ariaAttributes = {};
     const ariaRowIndex = index + headerGroupingMaxDepth + 2; // 1 for the header row and 1 as it's 1-based
     ariaAttributes['aria-rowindex'] = ariaRowIndex;
-    if (apiRef.current.isRowSelectable(rowNode.id)) {
+
+    // XXX: fix this properly
+    if (rowNode && apiRef.current.isRowSelectable(rowNode.id)) {
       ariaAttributes['aria-selected'] = apiRef.current.isRowSelected(rowNode.id);
     }
     return ariaAttributes;

package/hooks/features/rows/useGridRowSpanning.d.ts

@@ -1,19 +1,9 @@
 import { RefObject } from '@mui/x-internals/types';
-import type { GridColDef } from "../../../models/colDef/index.js";
-import type { GridRowId } from "../../../models/gridRows.js";
+import { RowSpanningState } from '@mui/x-virtualizer/models';
 import type { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
 import type { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
 import type { GridStateInitializer } from "../../utils/useGridInitializeState.js";
-export interface GridRowSpanningState {
-  spannedCells: Record<GridRowId, Record<GridColDef['field'], number>>;
-  hiddenCells: Record<GridRowId, Record<GridColDef['field'], boolean>>;
-  /**
-   * For each hidden cell, it contains the row index corresponding to the cell that is
-   * the origin of the hidden cell. i.e. the cell which is spanned.
-   * Used by the virtualization to properly keep the spanned cells in view.
-   */
-  hiddenCellOriginMap: Record<number, Record<GridColDef['field'], number>>;
-}
+export interface GridRowSpanningState extends RowSpanningState {}
 export type RowRange = {
   firstRowIndex: number;
   lastRowIndex: number;