@mui/x-data-grid 8.0.0-alpha.0 → 8.0.0-alpha.10

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

@@ -3,14 +3,15 @@ import * as React from 'react';
 import useLazyRef from '@mui/utils/useLazyRef';
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
 import { useGridLogger } from "../../utils/useGridLogger.js";
-import { gridRowCountSelector, gridRowsLookupSelector, gridRowTreeSelector, gridRowGroupingNameSelector, gridRowTreeDepthsSelector, gridDataRowIdsSelector, gridRowsDataRowIdToIdLookupSelector, gridRowMaximumTreeDepthSelector, gridRowGroupsToFetchSelector } from "./gridRowsSelector.js";
+import { gridRowCountSelector, gridRowsLookupSelector, gridRowTreeSelector, gridRowGroupingNameSelector, gridRowTreeDepthsSelector, gridDataRowIdsSelector, gridRowMaximumTreeDepthSelector, gridRowGroupsToFetchSelector } from "./gridRowsSelector.js";
 import { useTimeout } from "../../utils/useTimeout.js";
 import { GridSignature, useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
-import { useGridVisibleRows } from "../../utils/useGridVisibleRows.js";
+import { getVisibleRows } from "../../utils/useGridVisibleRows.js";
 import { gridSortedRowIdsSelector } from "../sorting/gridSortingSelector.js";
 import { gridFilteredRowsLookupSelector } from "../filter/gridFilterSelector.js";
 import { getTreeNodeDescendants, createRowsInternalCache, getRowsStateFromCache, isAutogeneratedRowNode, GRID_ROOT_GROUP_ID, GRID_ID_AUTOGENERATED, updateCacheWithNewRows, getTopLevelRowCount, getRowIdFromRowModel, computeRowsUpdates } from "./gridRowsUtils.js";
 import { useGridRegisterPipeApplier } from "../../core/pipeProcessing/index.js";
+import { GridStrategyGroup } from "../../core/strategyProcessing/index.js";
 export const rowsStateInitializer = (state, props, apiRef) => {
   const isDataSourceAvailable = !!props.unstable_dataSource;
   apiRef.current.caches.rows = createRowsInternalCache({
@@ -39,7 +40,6 @@ export const useGridRows = (apiRef, props) => {
     }
   }
   const logger = useGridLogger(apiRef, 'useGridRows');
-  const currentPage = useGridVisibleRows(apiRef, props);
   const lastUpdateMs = React.useRef(Date.now());
   const lastRowCount = React.useRef(props.rowCount);
   const timeout = useTimeout();
@@ -66,12 +66,6 @@ export const useGridRows = (apiRef, props) => {
     }
     return row.id;
   }, [getRowIdProp]);
-  const lookup = React.useMemo(() => currentPage.rows.reduce((acc, {
-    id
-  }, index) => {
-    acc[id] = index;
-    return acc;
-  }, {}), [currentPage.rows]);
   const throttledRowsChange = React.useCallback(({
     cache,
     throttle
@@ -170,7 +164,12 @@ export const useGridRows = (apiRef, props) => {
   }, [apiRef]);
   const getRowsCount = React.useCallback(() => gridRowCountSelector(apiRef), [apiRef]);
   const getAllRowIds = React.useCallback(() => gridDataRowIdsSelector(apiRef), [apiRef]);
-  const getRowIndexRelativeToVisibleRows = React.useCallback(id => lookup[id], [lookup]);
+  const getRowIndexRelativeToVisibleRows = React.useCallback(id => {
+    const {
+      rowIdToIndexMap
+    } = getVisibleRows(apiRef);
+    return rowIdToIndexMap.get(id);
+  }, [apiRef]);
   const setRowChildrenExpansion = React.useCallback((id, isExpanded) => {
     const currentNode = apiRef.current.getRowNode(id);
     if (!currentNode) {
@@ -238,7 +237,7 @@ export const useGridRows = (apiRef, props) => {
       throw new Error(`MUI X: The row reordering do not support reordering of footer or grouping rows.`);
     }
     apiRef.current.setState(state => {
-      const group = gridRowTreeSelector(state, apiRef.current.instanceId)[GRID_ROOT_GROUP_ID];
+      const group = gridRowTreeSelector(state, undefined, apiRef.current.instanceId)[GRID_ROOT_GROUP_ID];
       const allRows = group.children;
       const oldIndex = allRows.findIndex(row => row === rowId);
       if (oldIndex === -1 || oldIndex === targetIndex) {
@@ -272,7 +271,6 @@ export const useGridRows = (apiRef, props) => {
     }
     const tree = _extends({}, gridRowTreeSelector(apiRef));
     const dataRowIdToModelLookup = _extends({}, gridRowsLookupSelector(apiRef));
-    const dataRowIdToIdLookup = _extends({}, gridRowsDataRowIdToIdLookupSelector(apiRef));
     const rootGroup = tree[GRID_ROOT_GROUP_ID];
     const rootGroupChildren = [...rootGroup.children];
     const seenIds = new Set();
@@ -282,7 +280,6 @@ export const useGridRows = (apiRef, props) => {
       const [removedRowId] = rootGroupChildren.splice(firstRowToRender + i, 1, rowId);
       if (!seenIds.has(removedRowId)) {
         delete dataRowIdToModelLookup[removedRowId];
-        delete dataRowIdToIdLookup[removedRowId];
         delete tree[removedRowId];
       }
       const rowTreeNodeConfig = {
@@ -293,7 +290,6 @@ export const useGridRows = (apiRef, props) => {
         groupingKey: null
       };
       dataRowIdToModelLookup[rowId] = rowModel;
-      dataRowIdToIdLookup[rowId] = rowId;
       tree[rowId] = rowTreeNodeConfig;
       seenIds.add(rowId);
     }
@@ -304,17 +300,17 @@ export const useGridRows = (apiRef, props) => {
     // Removes potential remaining skeleton rows from the dataRowIds.
     const dataRowIds = rootGroupChildren.filter(childId => tree[childId]?.type === 'leaf');
     apiRef.current.caches.rows.dataRowIdToModelLookup = dataRowIdToModelLookup;
-    apiRef.current.caches.rows.dataRowIdToIdLookup = dataRowIdToIdLookup;
     apiRef.current.setState(state => _extends({}, state, {
       rows: _extends({}, state.rows, {
+        loading: props.loading,
+        totalRowCount: Math.max(props.rowCount || 0, rootGroupChildren.length),
         dataRowIdToModelLookup,
-        dataRowIdToIdLookup,
         dataRowIds,
         tree
       })
     }));
     apiRef.current.publishEvent('rowsSet');
-  }, [apiRef, props.signature, props.getRowId]);
+  }, [apiRef, props.signature, props.getRowId, props.loading, props.rowCount]);
   const rowApi = {
     getRow,
     setLoading,
@@ -381,7 +377,7 @@ export const useGridRows = (apiRef, props) => {
   const handleStrategyActivityChange = React.useCallback(() => {
     // `rowTreeCreation` is the only processor ran when `strategyAvailabilityChange` is fired.
     // All the other processors listen to `rowsSet` which will be published by the `groupRows` method below.
-    if (apiRef.current.getActiveStrategy('rowTree') !== gridRowGroupingNameSelector(apiRef)) {
+    if (apiRef.current.getActiveStrategy(GridStrategyGroup.RowTree) !== gridRowGroupingNameSelector(apiRef)) {
       groupRows();
     }
   }, [apiRef, groupRows]);
@@ -394,11 +390,10 @@ export const useGridRows = (apiRef, props) => {
   const applyHydrateRowsProcessor = React.useCallback(() => {
     apiRef.current.setState(state => {
       const response = apiRef.current.unstable_applyPipeProcessors('hydrateRows', {
-        tree: gridRowTreeSelector(state, apiRef.current.instanceId),
-        treeDepths: gridRowTreeDepthsSelector(state, apiRef.current.instanceId),
-        dataRowIds: gridDataRowIdsSelector(state, apiRef.current.instanceId),
-        dataRowIdToModelLookup: gridRowsLookupSelector(state, apiRef.current.instanceId),
-        dataRowIdToIdLookup: gridRowsDataRowIdToIdLookupSelector(state, apiRef.current.instanceId)
+        tree: gridRowTreeSelector(state, undefined, apiRef.current.instanceId),
+        treeDepths: gridRowTreeDepthsSelector(state, undefined, apiRef.current.instanceId),
+        dataRowIds: gridDataRowIdsSelector(state, undefined, apiRef.current.instanceId),
+        dataRowIdToModelLookup: gridRowsLookupSelector(state, undefined, apiRef.current.instanceId)
       });
       return _extends({}, state, {
         rows: _extends({}, state.rows, response, {
@@ -430,7 +425,8 @@ export const useGridRows = (apiRef, props) => {
       isRowCountPropUpdated = true;
       lastRowCount.current = props.rowCount;
     }
-    const areNewRowsAlreadyInState = apiRef.current.caches.rows.rowsBeforePartialUpdates === props.rows;
+    const currentRows = props.unstable_dataSource ? Array.from(apiRef.current.getRowModels().values()) : props.rows;
+    const areNewRowsAlreadyInState = apiRef.current.caches.rows.rowsBeforePartialUpdates === currentRows;
     const isNewLoadingAlreadyInState = apiRef.current.caches.rows.loadingPropBeforePartialUpdates === props.loading;
     const isNewRowCountAlreadyInState = apiRef.current.caches.rows.rowCountPropBeforePartialUpdates === props.rowCount;
 
@@ -460,15 +456,15 @@ export const useGridRows = (apiRef, props) => {
         return;
       }
     }
-    logger.debug(`Updating all rows, new length ${props.rows?.length}`);
+    logger.debug(`Updating all rows, new length ${currentRows?.length}`);
     throttledRowsChange({
       cache: createRowsInternalCache({
-        rows: props.rows,
+        rows: currentRows,
         getRowId: props.getRowId,
         loading: props.loading,
         rowCount: props.rowCount
       }),
       throttle: false
     });
-  }, [props.rows, props.rowCount, props.getRowId, props.loading, logger, throttledRowsChange, apiRef]);
+  }, [props.rows, props.rowCount, props.getRowId, props.loading, props.unstable_dataSource, logger, throttledRowsChange, apiRef]);
 };

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

@@ -1,6 +1,7 @@
 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";
@@ -110,7 +111,7 @@ 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);
@@ -181,7 +182,7 @@ 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]);
   const rowsMetaApi = {

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

@@ -55,4 +55,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
+  });
+});