@mui/x-data-grid 8.0.0-alpha.1 → 8.0.0-alpha.11

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

@@ -1,18 +1,17 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useLazyRef from '@mui/utils/useLazyRef';
+import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import { ResizeObserver } from "../../../utils/ResizeObserver.js";
 import { useGridVisibleRows } from "../../utils/useGridVisibleRows.js";
 import { eslintUseValue } from "../../../utils/utils.js";
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
 import { useGridSelector } from "../../utils/useGridSelector.js";
 import { gridDensityFactorSelector } from "../density/densitySelector.js";
-import { gridFilterModelSelector } from "../filter/gridFilterSelector.js";
 import { gridPaginationSelector } from "../pagination/gridPaginationSelector.js";
-import { gridSortModelSelector } from "../sorting/gridSortingSelector.js";
 import { useGridRegisterPipeApplier } from "../../core/pipeProcessing/index.js";
-import { gridPinnedRowsSelector } from "./gridRowsSelector.js";
-import { gridDimensionsSelector } from "../dimensions/gridDimensionsSelectors.js";
+import { gridPinnedRowsSelector, gridRowCountSelector } from "./gridRowsSelector.js";
+import { gridDimensionsSelector, gridRowHeightSelector } from "../dimensions/gridDimensionsSelectors.js";
 import { getValidRowHeight, getRowHeightWarning } from "./gridRowsUtils.js";
 /* eslint-disable no-underscore-dangle */
 
@@ -20,10 +19,18 @@ export const rowsMetaStateInitializer = (state, props, apiRef) => {
   apiRef.current.caches.rowsMeta = {
     heights: new Map()
   };
+  const baseRowHeight = gridRowHeightSelector(apiRef.current.state);
+  const dataRowCount = gridRowCountSelector(apiRef.current.state);
+  const pagination = gridPaginationSelector(apiRef.current.state);
+  const rowCount = Math.min(pagination.enabled ? pagination.paginationModel.pageSize : dataRowCount, dataRowCount);
   return _extends({}, state, {
     rowsMeta: {
-      currentPageTotalHeight: 0,
-      positions: []
+      currentPageTotalHeight: rowCount * baseRowHeight,
+      positions: Array.from({
+        length: rowCount
+      }, (_, i) => i * baseRowHeight),
+      pinnedTopRowsTotalHeight: 0,
+      pinnedBottomRowsTotalHeight: 0
     }
   });
 };
@@ -43,12 +50,9 @@ export const useGridRowsMeta = (apiRef, props) => {
   const hasRowWithAutoHeight = React.useRef(false);
   const isHeightMetaValid = React.useRef(false);
   const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
-  const filterModel = useGridSelector(apiRef, gridFilterModelSelector);
-  const paginationState = useGridSelector(apiRef, gridPaginationSelector);
-  const sortModel = useGridSelector(apiRef, gridSortModelSelector);
   const currentPage = useGridVisibleRows(apiRef, props);
   const pinnedRows = useGridSelector(apiRef, gridPinnedRowsSelector);
-  const rowHeight = useGridSelector(apiRef, () => gridDimensionsSelector(apiRef.current.state).rowHeight);
+  const rowHeight = useGridSelector(apiRef, gridRowHeightSelector);
   const getRowHeightEntry = rowId => {
     let entry = heightCache.get(rowId);
     if (entry === undefined) {
@@ -110,11 +114,17 @@ export const useGridRowsMeta = (apiRef, props) => {
     }
     apiRef.current.unstable_applyPipeProcessors('rowHeight', entry, row);
     return entry;
-  }, [apiRef, currentPage.rows.length, getRowHeightProp, getEstimatedRowHeight, rowHeight, getRowSpacing, densityFactor]);
+  }, [apiRef, currentPage.rows, getRowHeightProp, getEstimatedRowHeight, rowHeight, getRowSpacing, densityFactor]);
   const hydrateRowsMeta = React.useCallback(() => {
     hasRowWithAutoHeight.current = false;
-    pinnedRows.top.forEach(processHeightEntry);
-    pinnedRows.bottom.forEach(processHeightEntry);
+    const pinnedTopRowsTotalHeight = pinnedRows.top.reduce((acc, row) => {
+      const entry = processHeightEntry(row);
+      return acc + entry.content + entry.spacingTop + entry.spacingBottom + entry.detail;
+    }, 0);
+    const pinnedBottomRowsTotalHeight = pinnedRows.bottom.reduce((acc, row) => {
+      const entry = processHeightEntry(row);
+      return acc + entry.content + entry.spacingTop + entry.spacingBottom + entry.detail;
+    }, 0);
     const positions = [];
     const currentPageTotalHeight = currentPage.rows.reduce((acc, row) => {
       positions.push(acc);
@@ -126,14 +136,21 @@ export const useGridRowsMeta = (apiRef, props) => {
       // No row has height=auto, so all rows are already measured
       lastMeasuredRowIndex.current = Infinity;
     }
+    const didHeightsChange = pinnedTopRowsTotalHeight !== apiRef.current.state.rowsMeta.pinnedTopRowsTotalHeight || pinnedBottomRowsTotalHeight !== apiRef.current.state.rowsMeta.pinnedBottomRowsTotalHeight || currentPageTotalHeight !== apiRef.current.state.rowsMeta.currentPageTotalHeight;
+    const rowsMeta = {
+      currentPageTotalHeight,
+      positions,
+      pinnedTopRowsTotalHeight,
+      pinnedBottomRowsTotalHeight
+    };
     apiRef.current.setState(state => {
       return _extends({}, state, {
-        rowsMeta: {
-          currentPageTotalHeight,
-          positions
-        }
+        rowsMeta
       });
     });
+    if (didHeightsChange) {
+      apiRef.current.updateDimensions();
+    }
     isHeightMetaValid.current = true;
   }, [apiRef, pinnedRows, currentPage.rows, processHeightEntry]);
   const getRowHeight = rowId => {
@@ -181,9 +198,9 @@ export const useGridRowsMeta = (apiRef, props) => {
 
   // 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(() => {
+  useEnhancedEffect(() => {
     hydrateRowsMeta();
-  }, [filterModel, paginationState, sortModel, hydrateRowsMeta]);
+  }, [hydrateRowsMeta]);
   const rowsMetaApi = {
     unstable_getRowHeight: getRowHeight,
     unstable_setLastMeasuredRowIndex: setLastMeasuredRowIndex,

package/modern/hooks/features/sorting/gridSortingSelector.js

@@ -24,15 +24,16 @@ export const gridSortedRowEntriesSelector = createSelectorMemoized(gridSortedRow
       id,
       model
     });
-  }
-  const rowNode = rowTree[id];
-  if (rowNode && isAutogeneratedRowNode(rowNode)) {
-    acc.push({
-      id,
-      model: {
-        [GRID_ID_AUTOGENERATED]: id
-      }
-    });
+  } else {
+    const rowNode = rowTree[id];
+    if (rowNode && isAutogeneratedRowNode(rowNode)) {
+      acc.push({
+        id,
+        model: {
+          [GRID_ID_AUTOGENERATED]: id
+        }
+      });
+    }
   }
   return acc;
 }, []));
@@ -55,4 +56,15 @@ export const gridSortColumnLookupSelector = createSelectorMemoized(gridSortModel
     return res;
   }, {});
   return result;
+});
+
+/**
+ * @category Sorting
+ * @ignore - do not document.
+ */
+export const gridSortedRowIndexLookupSelector = createSelectorMemoized(gridSortedRowIdsSelector, sortedIds => {
+  return sortedIds.reduce((acc, id, index) => {
+    acc[id] = index;
+    return acc;
+  }, Object.create(null));
 });

package/modern/hooks/features/sorting/gridSortingUtils.js

@@ -19,7 +19,7 @@ const isDesc = direction => direction === 'desc';
 /**
  * Transform an item of the sorting model into a method comparing two rows.
  * @param {GridSortItem} sortItem The sort item we want to apply.
- * @param {React.MutableRefObject<GridApiCommunity>} apiRef The API of the grid.
+ * @param {RefObject<GridApiCommunity>} apiRef The API of the grid.
  * @returns {GridParsedSortItem | null} The parsed sort item. Returns `null` is the sort item is not valid.
  */
 const parseSortItem = (sortItem, apiRef) => {
@@ -72,7 +72,7 @@ const compareRows = (parsedSortItems, row1, row2) => {
 /**
  * Generates a method to easily sort a list of rows according to the current sort model.
  * @param {GridSortModel} sortModel The model with which we want to sort the rows.
- * @param {React.MutableRefObject<GridApiCommunity>} apiRef The API of the grid.
+ * @param {RefObject<GridApiCommunity>} apiRef The API of the grid.
  * @returns {GridSortingModelApplier | null} A method that generates a list of sorted row ids from a list of rows according to the current sort model. If `null`, we consider that the rows should remain in the order there were provided.
  */
 export const buildAggregatedSortingApplier = (sortModel, apiRef) => {

package/modern/hooks/features/sorting/index.js

@@ -1,2 +1,2 @@
-export * from "./gridSortingSelector.js";
+export { gridSortedRowIdsSelector, gridSortedRowEntriesSelector, gridSortModelSelector, gridSortColumnLookupSelector } from "./gridSortingSelector.js";
 export { gridDateComparator, gridNumberComparator, gridStringOrNumberComparator } from "./gridSortingUtils.js";

package/modern/hooks/features/sorting/useGridSorting.js

@@ -88,7 +88,7 @@ export const useGridSorting = (apiRef, props) => {
           })
         });
       }
-      const sortModel = gridSortModelSelector(state, apiRef.current.instanceId);
+      const sortModel = gridSortModelSelector(state, undefined, apiRef.current.instanceId);
       const sortRowList = buildAggregatedSortingApplier(sortModel, apiRef);
       const sortedRows = apiRef.current.applyStrategyProcessor('sorting', {
         sortRowList

package/modern/hooks/features/virtualization/gridFocusedVirtualCellSelector.js

@@ -0,0 +1,33 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { createSelector } from 'reselect';
+import { createSelectorMemoized } from "../../../utils/createSelector.js";
+import { gridVisibleColumnDefinitionsSelector } from "../columns/gridColumnsSelector.js";
+import { gridRenderContextSelector } from "./gridVirtualizationSelectors.js";
+import { gridFocusCellSelector } from "../focus/index.js";
+import { gridVisibleRowsSelector } from "../pagination/index.js";
+const gridIsFocusedCellOutOfContext = createSelector(gridFocusCellSelector, gridRenderContextSelector, gridVisibleRowsSelector, gridVisibleColumnDefinitionsSelector, (focusedCell, renderContext, currentPage, visibleColumns) => {
+  if (!focusedCell) {
+    return false;
+  }
+  const rowIndex = currentPage.rowIdToIndexMap.get(focusedCell.id);
+  const columnIndex = visibleColumns.slice(renderContext.firstColumnIndex, renderContext.lastColumnIndex).findIndex(column => column.field === focusedCell.field);
+  const isInRenderContext = rowIndex !== undefined && columnIndex !== -1 && rowIndex >= renderContext.firstRowIndex && rowIndex <= renderContext.lastRowIndex;
+  return !isInRenderContext;
+});
+export const gridFocusedVirtualCellSelector = createSelectorMemoized(gridIsFocusedCellOutOfContext, gridVisibleColumnDefinitionsSelector, gridVisibleRowsSelector, gridFocusCellSelector, (isFocusedCellOutOfRenderContext, visibleColumns, currentPage, focusedCell) => {
+  if (!isFocusedCellOutOfRenderContext) {
+    return null;
+  }
+  const rowIndex = currentPage.rowIdToIndexMap.get(focusedCell.id);
+  if (rowIndex === undefined) {
+    return null;
+  }
+  const columnIndex = visibleColumns.findIndex(column => column.field === focusedCell.field);
+  if (columnIndex === -1) {
+    return null;
+  }
+  return _extends({}, focusedCell, {
+    rowIndex,
+    columnIndex
+  });
+});