@mui/x-data-grid 6.0.0-alpha.0 → 6.0.0-alpha.2

package/modern/hooks/features/filter/useGridFilter.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { GridFeatureModeConstant } from '../../../models/gridFeatureMode';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
@@ -9,7 +8,7 @@ import { GridPreferencePanelsValue } from '../preferencesPanel/gridPreferencePan
 import { getDefaultGridFilterModel } from './gridFilterState';
 import { gridFilterModelSelector, gridVisibleSortedRowEntriesSelector } from './gridFilterSelector';
 import { useFirstRender } from '../../utils/useFirstRender';
-import { gridRowIdsSelector } from '../rows';
+import { GRID_ROOT_GROUP_ID, gridRowTreeSelector } from '../rows';
 import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 import { GRID_DEFAULT_STRATEGY, useGridRegisterStrategyProcessor } from '../../core/strategyProcessing';
 import { buildAggregatedFilterApplier, sanitizeFilterModel, mergeStateWithFilterModel, cleanFilterItem, passFilterLogic } from './gridFilterUtils';
@@ -43,7 +42,7 @@ export const useGridFilter = (apiRef, props) => {
   const updateFilteredRows = React.useCallback(() => {
     apiRef.current.setState(state => {
       const filterModel = gridFilterModelSelector(state, apiRef.current.instanceId);
-      const isRowMatchingFilters = props.filterMode === GridFeatureModeConstant.client ? buildAggregatedFilterApplier(filterModel, apiRef) : null;
+      const isRowMatchingFilters = props.filterMode === 'client' ? buildAggregatedFilterApplier(filterModel, apiRef) : null;
       const filteringResult = apiRef.current.unstable_applyStrategyProcessor('filtering', {
         isRowMatchingFilters,
         filterModel: filterModel ?? getDefaultGridFilterModel()
@@ -244,8 +243,9 @@ export const useGridFilter = (apiRef, props) => {
     return initialValue;
   }, [props.components.FilterPanel, props.componentsProps?.filterPanel]);
   const flatFilteringMethod = React.useCallback(params => {
-    if (props.filterMode === GridFeatureModeConstant.client && params.isRowMatchingFilters) {
-      const rowIds = gridRowIdsSelector(apiRef);
+    if (props.filterMode === 'client' && params.isRowMatchingFilters) {
+      const tree = gridRowTreeSelector(apiRef);
+      const rowIds = tree[GRID_ROOT_GROUP_ID].children;
       const filteredRowsLookup = {};
 
       for (let i = 0; i < rowIds.length; i += 1) {
@@ -267,7 +267,7 @@ export const useGridFilter = (apiRef, props) => {
 
       return {
         filteredRowsLookup,
-        // For flat tree, the `visibleRowsLookup` and the `filteredRowsLookup` since no row is collapsed.
+        // For flat tree, the `visibleRowsLookup` and the `filteredRowsLookup` are equals since no row is collapsed.
         visibleRowsLookup: filteredRowsLookup,
         filteredDescendantCountLookup: {}
       };

package/modern/hooks/features/pagination/gridPaginationSelector.js

@@ -1,6 +1,6 @@
 import { createSelector } from '../../../utils/createSelector';
 import { gridVisibleSortedRowEntriesSelector, gridVisibleSortedRowIdsSelector, gridVisibleSortedTopLevelRowEntriesSelector } from '../filter/gridFilterSelector';
-import { gridRowTreeDepthSelector, gridRowTreeSelector } from '../rows/gridRowsSelector';
+import { gridRowMaximumTreeDepthSelector, gridRowTreeSelector } from '../rows/gridRowsSelector';
 /**
  * @category Pagination
  * @ignore - do not document.
@@ -30,7 +30,7 @@ export const gridPageCountSelector = createSelector(gridPaginationSelector, pagi
  * @category Pagination
  */
 
-export const gridPaginationRowRangeSelector = createSelector(gridPaginationSelector, gridRowTreeSelector, gridRowTreeDepthSelector, gridVisibleSortedRowEntriesSelector, gridVisibleSortedTopLevelRowEntriesSelector, (pagination, rowTree, rowTreeDepth, visibleSortedRowEntries, visibleSortedTopLevelRowEntries) => {
+export const gridPaginationRowRangeSelector = createSelector(gridPaginationSelector, gridRowTreeSelector, gridRowMaximumTreeDepthSelector, gridVisibleSortedRowEntriesSelector, gridVisibleSortedTopLevelRowEntriesSelector, (pagination, rowTree, rowTreeDepth, visibleSortedRowEntries, visibleSortedTopLevelRowEntries) => {
   const visibleTopLevelRowCount = visibleSortedTopLevelRowEntries.length;
   const topLevelFirstRowIndex = Math.min(pagination.pageSize * pagination.page, visibleTopLevelRowCount - 1);
   const topLevelLastRowIndex = Math.min(topLevelFirstRowIndex + pagination.pageSize - 1, visibleTopLevelRowCount - 1); // The range contains no element

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

@@ -2,13 +2,23 @@ import { createSelector } from '../../../utils/createSelector';
 export const gridRowsStateSelector = state => state.rows;
 export const gridRowCountSelector = createSelector(gridRowsStateSelector, rows => rows.totalRowCount);
 export const gridRowsLoadingSelector = createSelector(gridRowsStateSelector, rows => rows.loading);
-export const gridTopLevelRowCountSelector = createSelector(gridRowsStateSelector, rows => rows.totalTopLevelRowCount);
-export const gridRowsLookupSelector = createSelector(gridRowsStateSelector, rows => rows.idRowsLookup);
-export const gridRowsIdToIdLookupSelector = createSelector(gridRowsStateSelector, rows => rows.idToIdLookup);
+export const gridTopLevelRowCountSelector = createSelector(gridRowsStateSelector, rows => rows.totalTopLevelRowCount); // TODO rows v6: Rename
+
+export const gridRowsLookupSelector = createSelector(gridRowsStateSelector, rows => rows.dataRowIdToModelLookup);
+export const gridRowsDataRowIdToIdLookupSelector = createSelector(gridRowsStateSelector, rows => rows.dataRowIdToIdLookup);
 export const gridRowTreeSelector = createSelector(gridRowsStateSelector, rows => rows.tree);
 export const gridRowGroupingNameSelector = createSelector(gridRowsStateSelector, rows => rows.groupingName);
-export const gridRowTreeDepthSelector = createSelector(gridRowsStateSelector, rows => rows.treeDepth);
-export const gridRowIdsSelector = createSelector(gridRowsStateSelector, rows => rows.ids);
+export const gridRowTreeDepthsSelector = createSelector(gridRowsStateSelector, rows => rows.treeDepths);
+export const gridRowMaximumTreeDepthSelector = createSelector(gridRowsStateSelector, rows => {
+  const entries = Object.entries(rows.treeDepths);
+
+  if (entries.length === 0) {
+    return 1;
+  }
+
+  return entries.filter(([, nodeCount]) => nodeCount > 0).map(([depth]) => Number(depth)).sort((a, b) => b - a)[0] + 1;
+});
+export const gridDataRowIdsSelector = createSelector(gridRowsStateSelector, rows => rows.dataRowIds);
 /**
  * @ignore - do not document.
  */
@@ -18,7 +28,19 @@ export const gridAdditionalRowGroupsSelector = createSelector(gridRowsStateSelec
  * @ignore - do not document.
  */
 
-export const gridPinnedRowsSelector = createSelector(gridAdditionalRowGroupsSelector, additionalRowGroups => additionalRowGroups?.pinnedRows);
+export const gridPinnedRowsSelector = createSelector(gridAdditionalRowGroupsSelector, additionalRowGroups => {
+  const rawPinnedRows = additionalRowGroups?.pinnedRows;
+  return {
+    bottom: rawPinnedRows?.bottom?.map(rowEntry => ({
+      id: rowEntry.id,
+      model: rowEntry.model ?? {}
+    })),
+    top: rawPinnedRows?.top?.map(rowEntry => ({
+      id: rowEntry.id,
+      model: rowEntry.model ?? {}
+    }))
+  };
+});
 /**
  * @ignore - do not document.
  */

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

@@ -1,7 +1,19 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["rowsBeforePartialUpdates"];
 import { gridPinnedRowsSelector } from './gridRowsSelector';
+import { gridDensityRowHeightSelector } from '../density/densitySelector';
+export const GRID_ROOT_GROUP_ID = `auto-generated-group-node-root`;
+export const buildRootGroup = () => ({
+  type: 'group',
+  id: GRID_ROOT_GROUP_ID,
+  depth: -1,
+  groupingField: null,
+  groupingKey: null,
+  isAutoGenerated: true,
+  children: [],
+  childrenFromPath: {},
+  childrenExpanded: true,
+  parent: null
+});
 /**
  * A helper function to check if the id provided is valid.
  * @param {GridRowId} id Id as [[GridRowId]].
@@ -24,68 +36,235 @@ export const createRowsInternalCache = ({
   getRowId,
   loading
 }) => {
-  const cache = {
-    rowsBeforePartialUpdates: rows,
-    loadingPropBeforePartialUpdates: loading,
-    idRowsLookup: {},
-    idToIdLookup: {},
-    ids: []
+  const updates = {
+    type: 'full',
+    rows: []
   };
+  const dataRowIdToModelLookup = {};
+  const dataRowIdToIdLookup = {};
 
   for (let i = 0; i < rows.length; i += 1) {
-    const row = rows[i];
-    const id = getRowIdFromRowModel(row, getRowId);
-    cache.idRowsLookup[id] = row;
-    cache.idToIdLookup[id] = id;
-    cache.ids.push(id);
+    const model = rows[i];
+    const id = getRowIdFromRowModel(model, getRowId);
+    dataRowIdToModelLookup[id] = model;
+    dataRowIdToIdLookup[id] = id;
+    updates.rows.push(id);
   }
 
-  return cache;
+  return {
+    rowsBeforePartialUpdates: rows,
+    loadingPropBeforePartialUpdates: loading,
+    updates,
+    dataRowIdToIdLookup,
+    dataRowIdToModelLookup
+  };
+};
+export const getTopLevelRowCount = ({
+  tree,
+  rowCountProp = 0
+}) => {
+  const rootGroupNode = tree[GRID_ROOT_GROUP_ID];
+  return Math.max(rowCountProp, rootGroupNode.children.length + (rootGroupNode.footerId == null ? 0 : 1));
 };
 export const getRowsStateFromCache = ({
   apiRef,
+  rowCountProp = 0,
+  loadingProp,
   previousTree,
-  rowCountProp,
-  loadingProp
+  previousTreeDepths
 }) => {
-  const _apiRef$current$unsta = apiRef.current.unstable_caches.rows,
-        cacheForGrouping = _objectWithoutPropertiesLoose(_apiRef$current$unsta, _excluded);
-
-  const rowCount = rowCountProp ?? 0;
-  const groupingResponse = apiRef.current.unstable_applyStrategyProcessor('rowTreeCreation', _extends({}, cacheForGrouping, {
-    previousTree
-  }));
-  const processedGroupingResponse = apiRef.current.unstable_applyPipeProcessors('hydrateRows', groupingResponse);
-  const dataTopLevelRowCount = processedGroupingResponse.treeDepth === 1 ? processedGroupingResponse.ids.length : Object.values(processedGroupingResponse.tree).filter(node => node.parent == null && !node.isPinned).length;
-  return _extends({}, processedGroupingResponse, {
-    groupingResponseBeforeRowHydration: groupingResponse,
-    loading: loadingProp,
-    totalRowCount: Math.max(rowCount, processedGroupingResponse.ids.length),
-    totalTopLevelRowCount: Math.max(rowCount, dataTopLevelRowCount)
+  const cache = apiRef.current.unstable_caches.rows; // 1. Apply the "rowTreeCreation" family processing.
+
+  const {
+    tree: unProcessedTree,
+    treeDepths: unProcessedTreeDepths,
+    dataRowIds: unProcessedDataRowIds,
+    groupingName
+  } = apiRef.current.unstable_applyStrategyProcessor('rowTreeCreation', {
+    previousTree,
+    previousTreeDepths,
+    updates: cache.updates,
+    dataRowIdToIdLookup: cache.dataRowIdToIdLookup,
+    dataRowIdToModelLookup: cache.dataRowIdToModelLookup
+  }); // 2. Apply the "hydrateRows" pipe-processing.
+
+  const groupingParamsWithHydrateRows = apiRef.current.unstable_applyPipeProcessors('hydrateRows', {
+    tree: unProcessedTree,
+    treeDepths: unProcessedTreeDepths,
+    dataRowIdToIdLookup: cache.dataRowIdToIdLookup,
+    dataRowIds: unProcessedDataRowIds,
+    dataRowIdToModelLookup: cache.dataRowIdToModelLookup
+  }); // 3. Reset the cache updates
+
+  apiRef.current.unstable_caches.rows.updates = {
+    type: 'partial',
+    actions: {
+      insert: [],
+      modify: [],
+      remove: []
+    },
+    idToActionLookup: {}
+  };
+  return _extends({}, groupingParamsWithHydrateRows, {
+    totalRowCount: Math.max(rowCountProp, groupingParamsWithHydrateRows.dataRowIds.length),
+    totalTopLevelRowCount: getTopLevelRowCount({
+      tree: groupingParamsWithHydrateRows.tree,
+      rowCountProp
+    }),
+    groupingName,
+    loading: loadingProp
   });
 };
+export const isAutoGeneratedRow = rowNode => rowNode.type === 'skeletonRow' || rowNode.type === 'footer' || rowNode.type === 'group' && rowNode.isAutoGenerated || rowNode.type === 'pinnedRow' && rowNode.isAutoGenerated;
 export const getTreeNodeDescendants = (tree, parentId, skipAutoGeneratedRows) => {
-  const children = tree[parentId]?.children;
+  const node = tree[parentId];
 
-  if (children == null) {
+  if (node.type !== 'group') {
     return [];
   }
 
   const validDescendants = [];
 
-  for (let i = 0; i < children.length; i += 1) {
-    const child = children[i];
-    const childNode = tree[child];
+  for (let i = 0; i < node.children.length; i += 1) {
+    const child = node.children[i];
 
-    if (!skipAutoGeneratedRows || !childNode.isAutoGenerated) {
+    if (!skipAutoGeneratedRows || !isAutoGeneratedRow(tree[child])) {
       validDescendants.push(child);
     }
 
-    validDescendants.push(...getTreeNodeDescendants(tree, childNode.id, skipAutoGeneratedRows));
+    validDescendants.push(...getTreeNodeDescendants(tree, child, skipAutoGeneratedRows));
+  }
+
+  if (!skipAutoGeneratedRows && node.footerId != null) {
+    validDescendants.push(node.footerId);
   }
 
   return validDescendants;
 };
+export const updateCacheWithNewRows = ({
+  previousCache,
+  getRowId,
+  updates
+}) => {
+  if (previousCache.updates.type === 'full') {
+    throw new Error('MUI: Unable to prepare a partial update if a full update is not applied yet');
+  } // Remove duplicate updates.
+  // A server can batch updates, and send several updates for the same row in one fn call.
+
+
+  const uniqueUpdates = new Map();
+  updates.forEach(update => {
+    const id = getRowIdFromRowModel(update, getRowId, 'A row was provided without id when calling updateRows():');
+
+    if (uniqueUpdates.has(id)) {
+      uniqueUpdates.set(id, _extends({}, uniqueUpdates.get(id), update));
+    } else {
+      uniqueUpdates.set(id, update);
+    }
+  });
+  const partialUpdates = {
+    type: 'partial',
+    actions: {
+      insert: [...(previousCache.updates.actions.insert ?? [])],
+      modify: [...(previousCache.updates.actions.modify ?? [])],
+      remove: [...(previousCache.updates.actions.remove ?? [])]
+    },
+    idToActionLookup: _extends({}, previousCache.updates.idToActionLookup)
+  };
+
+  const dataRowIdToModelLookup = _extends({}, previousCache.dataRowIdToModelLookup);
+
+  const dataRowIdToIdLookup = _extends({}, previousCache.dataRowIdToIdLookup);
+
+  const alreadyAppliedActionsToRemove = {
+    insert: {},
+    modify: {},
+    remove: {}
+  }; // Depending on the action already applied to the data row,
+  // We might want drop the already-applied-update.
+  // For instance:
+  // - if you delete then insert, then you don't want to apply the deletion in the tree.
+  // - if you insert, then modify, then you just want to apply the insertion in the tree.
+
+  uniqueUpdates.forEach((partialRow, id) => {
+    const actionAlreadyAppliedToRow = partialUpdates.idToActionLookup[id]; // Action === "delete"
+    // eslint-disable-next-line no-underscore-dangle
+
+    if (partialRow._action === 'delete') {
+      // If the data row has been removed since the last state update,
+      // Then do nothing.
+      if (actionAlreadyAppliedToRow === 'remove' || !dataRowIdToModelLookup[id]) {
+        return;
+      } // If the data row has been inserted / modified since the last state update,
+      // Then drop this "insert" / "modify" update.
+
+
+      if (actionAlreadyAppliedToRow != null) {
+        alreadyAppliedActionsToRemove[actionAlreadyAppliedToRow][id] = true;
+      } // Remove the data row from the lookups and add it to the "delete" update.
+
+
+      partialUpdates.actions.remove.push(id);
+      delete dataRowIdToModelLookup[id];
+      delete dataRowIdToIdLookup[id];
+      return;
+    }
+
+    const oldRow = dataRowIdToModelLookup[id]; // Action === "modify"
+
+    if (oldRow) {
+      // If the data row has been removed since the last state update,
+      // Then drop this "remove" update and add it to the "modify" update instead.
+      if (actionAlreadyAppliedToRow === 'remove') {
+        alreadyAppliedActionsToRemove.remove[id] = true;
+        partialUpdates.actions.modify.push(id);
+      } // If the date has not been inserted / modified since the last state update,
+      // Then add it to the "modify" update (if it has been inserted it should just remain "inserted").
+      else if (actionAlreadyAppliedToRow == null) {
+        partialUpdates.actions.modify.push(id);
+      } // Update the data row lookups.
+
+
+      dataRowIdToModelLookup[id] = _extends({}, oldRow, partialRow);
+      return;
+    } // Action === "insert"
+    // If the data row has been removed since the last state update,
+    // Then drop the "remove" update and add it to the "insert" update instead.
+
+
+    if (actionAlreadyAppliedToRow === 'remove') {
+      alreadyAppliedActionsToRemove.remove[id] = true;
+      partialUpdates.actions.insert.push(id);
+    } // If the data row has not been inserted since the last state update,
+    // Then add it to the "insert" update.
+    // `actionAlreadyAppliedToRow` can't be equal to "modify", otherwise we would have an `oldRow` above.
+    else if (actionAlreadyAppliedToRow == null) {
+      partialUpdates.actions.insert.push(id);
+    } // Update the data row lookups.
+
+
+    dataRowIdToModelLookup[id] = partialRow;
+    dataRowIdToIdLookup[id] = id;
+  });
+  const actionTypeWithActionsToRemove = Object.keys(alreadyAppliedActionsToRemove);
+
+  for (let i = 0; i < actionTypeWithActionsToRemove.length; i += 1) {
+    const actionType = actionTypeWithActionsToRemove[i];
+    const idsToRemove = alreadyAppliedActionsToRemove[actionType];
+
+    if (Object.keys(idsToRemove).length > 0) {
+      partialUpdates.actions[actionType] = partialUpdates.actions[actionType].filter(id => !idsToRemove[id]);
+    }
+  }
+
+  return {
+    dataRowIdToModelLookup,
+    dataRowIdToIdLookup,
+    updates: partialUpdates,
+    rowsBeforePartialUpdates: previousCache.rowsBeforePartialUpdates,
+    loadingPropBeforePartialUpdates: previousCache.loadingPropBeforePartialUpdates
+  };
+};
 export function calculatePinnedRowsHeight(apiRef) {
   const pinnedRows = gridPinnedRowsSelector(apiRef);
   const topPinnedRowsHeight = pinnedRows?.top?.reduce((acc, value) => {
@@ -100,4 +279,8 @@ export function calculatePinnedRowsHeight(apiRef) {
     top: topPinnedRowsHeight,
     bottom: bottomPinnedRowsHeight
   };
+}
+export function getMinimalContentHeight(apiRef) {
+  const rowHeight = gridDensityRowHeightSelector(apiRef);
+  return 2 * rowHeight;
 }

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

@@ -1,4 +1,4 @@
 export * from './gridRowsMetaSelector';
 export * from './gridRowsMetaState';
-export { gridRowsStateSelector, gridRowCountSelector, gridRowsLoadingSelector, gridTopLevelRowCountSelector, gridRowsLookupSelector, gridRowsIdToIdLookupSelector, gridRowTreeSelector, gridRowGroupingNameSelector, gridRowTreeDepthSelector, gridRowIdsSelector } from './gridRowsSelector';
-export { checkGridRowIdIsValid } from './gridRowsUtils';
+export { gridRowsStateSelector, gridRowCountSelector, gridRowsLoadingSelector, gridTopLevelRowCountSelector, gridRowsLookupSelector, gridRowsDataRowIdToIdLookupSelector, gridRowTreeSelector, gridRowGroupingNameSelector, gridRowTreeDepthsSelector, gridRowMaximumTreeDepthSelector, gridDataRowIdsSelector } from './gridRowsSelector';
+export { GRID_ROOT_GROUP_ID, checkGridRowIdIsValid } from './gridRowsUtils';