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

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

@@ -19,6 +19,7 @@ var _gridSortingSelector = require("../sorting/gridSortingSelector");
 var _gridFilterSelector = require("../filter/gridFilterSelector");
 var _gridRowsUtils = require("./gridRowsUtils");
 var _pipeProcessing = require("../../core/pipeProcessing");
+var _strategyProcessing = require("../../core/strategyProcessing");
 const rowsStateInitializer = (state, props, apiRef) => {
   const isDataSourceAvailable = !!props.unstable_dataSource;
   apiRef.current.caches.rows = (0, _gridRowsUtils.createRowsInternalCache)({
@@ -48,7 +49,6 @@ const useGridRows = (apiRef, props) => {
     }
   }
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridRows');
-  const currentPage = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, props);
   const lastUpdateMs = React.useRef(Date.now());
   const lastRowCount = React.useRef(props.rowCount);
   const timeout = (0, _useTimeout.useTimeout)();
@@ -75,12 +75,6 @@ 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
@@ -179,7 +173,12 @@ const useGridRows = (apiRef, props) => {
   }, [apiRef]);
   const getRowsCount = React.useCallback(() => (0, _gridRowsSelector.gridRowCountSelector)(apiRef), [apiRef]);
   const getAllRowIds = React.useCallback(() => (0, _gridRowsSelector.gridDataRowIdsSelector)(apiRef), [apiRef]);
-  const getRowIndexRelativeToVisibleRows = React.useCallback(id => lookup[id], [lookup]);
+  const getRowIndexRelativeToVisibleRows = React.useCallback(id => {
+    const {
+      rowIdToIndexMap
+    } = (0, _useGridVisibleRows.getVisibleRows)(apiRef);
+    return rowIdToIndexMap.get(id);
+  }, [apiRef]);
   const setRowChildrenExpansion = React.useCallback((id, isExpanded) => {
     const currentNode = apiRef.current.getRowNode(id);
     if (!currentNode) {
@@ -247,7 +246,7 @@ 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 = (0, _gridRowsSelector.gridRowTreeSelector)(state, apiRef.current.instanceId)[_gridRowsUtils.GRID_ROOT_GROUP_ID];
+      const group = (0, _gridRowsSelector.gridRowTreeSelector)(state, undefined, apiRef.current.instanceId)[_gridRowsUtils.GRID_ROOT_GROUP_ID];
       const allRows = group.children;
       const oldIndex = allRows.findIndex(row => row === rowId);
       if (oldIndex === -1 || oldIndex === targetIndex) {
@@ -281,7 +280,6 @@ const useGridRows = (apiRef, props) => {
     }
     const tree = (0, _extends2.default)({}, (0, _gridRowsSelector.gridRowTreeSelector)(apiRef));
     const dataRowIdToModelLookup = (0, _extends2.default)({}, (0, _gridRowsSelector.gridRowsLookupSelector)(apiRef));
-    const dataRowIdToIdLookup = (0, _extends2.default)({}, (0, _gridRowsSelector.gridRowsDataRowIdToIdLookupSelector)(apiRef));
     const rootGroup = tree[_gridRowsUtils.GRID_ROOT_GROUP_ID];
     const rootGroupChildren = [...rootGroup.children];
     const seenIds = new Set();
@@ -291,7 +289,6 @@ 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 = {
@@ -302,7 +299,6 @@ const useGridRows = (apiRef, props) => {
         groupingKey: null
       };
       dataRowIdToModelLookup[rowId] = rowModel;
-      dataRowIdToIdLookup[rowId] = rowId;
       tree[rowId] = rowTreeNodeConfig;
       seenIds.add(rowId);
     }
@@ -313,17 +309,17 @@ 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 => (0, _extends2.default)({}, state, {
       rows: (0, _extends2.default)({}, 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,
@@ -390,7 +386,7 @@ 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') !== (0, _gridRowsSelector.gridRowGroupingNameSelector)(apiRef)) {
+    if (apiRef.current.getActiveStrategy(_strategyProcessing.GridStrategyGroup.RowTree) !== (0, _gridRowsSelector.gridRowGroupingNameSelector)(apiRef)) {
       groupRows();
     }
   }, [apiRef, groupRows]);
@@ -403,11 +399,10 @@ const useGridRows = (apiRef, props) => {
   const applyHydrateRowsProcessor = React.useCallback(() => {
     apiRef.current.setState(state => {
       const response = apiRef.current.unstable_applyPipeProcessors('hydrateRows', {
-        tree: (0, _gridRowsSelector.gridRowTreeSelector)(state, apiRef.current.instanceId),
-        treeDepths: (0, _gridRowsSelector.gridRowTreeDepthsSelector)(state, apiRef.current.instanceId),
-        dataRowIds: (0, _gridRowsSelector.gridDataRowIdsSelector)(state, apiRef.current.instanceId),
-        dataRowIdToModelLookup: (0, _gridRowsSelector.gridRowsLookupSelector)(state, apiRef.current.instanceId),
-        dataRowIdToIdLookup: (0, _gridRowsSelector.gridRowsDataRowIdToIdLookupSelector)(state, apiRef.current.instanceId)
+        tree: (0, _gridRowsSelector.gridRowTreeSelector)(state, undefined, apiRef.current.instanceId),
+        treeDepths: (0, _gridRowsSelector.gridRowTreeDepthsSelector)(state, undefined, apiRef.current.instanceId),
+        dataRowIds: (0, _gridRowsSelector.gridDataRowIdsSelector)(state, undefined, apiRef.current.instanceId),
+        dataRowIdToModelLookup: (0, _gridRowsSelector.gridRowsLookupSelector)(state, undefined, apiRef.current.instanceId)
       });
       return (0, _extends2.default)({}, state, {
         rows: (0, _extends2.default)({}, state.rows, response, {
@@ -439,7 +434,8 @@ 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;
 
@@ -469,16 +465,16 @@ 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: (0, _gridRowsUtils.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]);
 };
 exports.useGridRows = useGridRows;

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

@@ -9,9 +9,10 @@ exports.useGridRowsMeta = exports.rowsMetaStateInitializer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));
+var _utils = require("@mui/utils");
 var _ResizeObserver = require("../../../utils/ResizeObserver");
 var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
-var _utils = require("../../../utils/utils");
+var _utils2 = require("../../../utils/utils");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _useGridSelector = require("../../utils/useGridSelector");
 var _densitySelector = require("../density/densitySelector");
@@ -77,7 +78,7 @@ const useGridRowsMeta = (apiRef, props) => {
     // HACK: rowHeight trails behind the most up-to-date value just enough to
     // mess the initial rowsMeta hydration :/
     const baseRowHeight = (0, _gridDimensionsSelectors.gridDimensionsSelector)(apiRef.current.state).rowHeight;
-    (0, _utils.eslintUseValue)(rowHeight);
+    (0, _utils2.eslintUseValue)(rowHeight);
     const entry = apiRef.current.getRowHeightEntry(row.id);
     if (!getRowHeightProp) {
       entry.content = baseRowHeight;
@@ -119,7 +120,7 @@ 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);
@@ -190,7 +191,7 @@ 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(() => {
+  (0, _utils.unstable_useEnhancedEffect)(() => {
     hydrateRowsMeta();
   }, [filterModel, paginationState, sortModel, hydrateRowsMeta]);
   const rowsMetaApi = {

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridSortedRowIdsSelector = exports.gridSortedRowEntriesSelector = exports.gridSortModelSelector = exports.gridSortColumnLookupSelector = void 0;
+exports.gridSortedRowIndexLookupSelector = exports.gridSortedRowIdsSelector = exports.gridSortedRowEntriesSelector = exports.gridSortModelSelector = exports.gridSortColumnLookupSelector = void 0;
 var _createSelector = require("../../../utils/createSelector");
 var _gridRowsSelector = require("../rows/gridRowsSelector");
 var _gridRowsUtils = require("../rows/gridRowsUtils");
@@ -61,4 +61,15 @@ const gridSortColumnLookupSelector = exports.gridSortColumnLookupSelector = (0,
     return res;
   }, {});
   return result;
+});
+
+/**
+ * @category Sorting
+ * @ignore - do not document.
+ */
+const gridSortedRowIndexLookupSelector = exports.gridSortedRowIndexLookupSelector = (0, _createSelector.createSelectorMemoized)(gridSortedRowIdsSelector, sortedIds => {
+  return sortedIds.reduce((acc, id, index) => {
+    acc[id] = index;
+    return acc;
+  }, Object.create(null));
 });

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

@@ -28,7 +28,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) => {
@@ -81,7 +81,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.
  */
 const buildAggregatedSortingApplier = (sortModel, apiRef) => {

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

@@ -3,11 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {
-  gridDateComparator: true,
-  gridNumberComparator: true,
-  gridStringOrNumberComparator: true
-};
 Object.defineProperty(exports, "gridDateComparator", {
   enumerable: true,
   get: function () {
@@ -20,6 +15,30 @@ Object.defineProperty(exports, "gridNumberComparator", {
     return _gridSortingUtils.gridNumberComparator;
   }
 });
+Object.defineProperty(exports, "gridSortColumnLookupSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridSortingSelector.gridSortColumnLookupSelector;
+  }
+});
+Object.defineProperty(exports, "gridSortModelSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridSortingSelector.gridSortModelSelector;
+  }
+});
+Object.defineProperty(exports, "gridSortedRowEntriesSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridSortingSelector.gridSortedRowEntriesSelector;
+  }
+});
+Object.defineProperty(exports, "gridSortedRowIdsSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridSortingSelector.gridSortedRowIdsSelector;
+  }
+});
 Object.defineProperty(exports, "gridStringOrNumberComparator", {
   enumerable: true,
   get: function () {
@@ -27,15 +46,4 @@ Object.defineProperty(exports, "gridStringOrNumberComparator", {
   }
 });
 var _gridSortingSelector = require("./gridSortingSelector");
-Object.keys(_gridSortingSelector).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _gridSortingSelector[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _gridSortingSelector[key];
-    }
-  });
-});
 var _gridSortingUtils = require("./gridSortingUtils");

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

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

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

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.gridFocusedVirtualCellSelector = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _reselect = require("reselect");
+var _createSelector = require("../../../utils/createSelector");
+var _gridColumnsSelector = require("../columns/gridColumnsSelector");
+var _gridVirtualizationSelectors = require("./gridVirtualizationSelectors");
+var _focus = require("../focus");
+var _pagination = require("../pagination");
+const gridIsFocusedCellOutOfContext = (0, _reselect.createSelector)(_focus.gridFocusCellSelector, _gridVirtualizationSelectors.gridRenderContextSelector, _pagination.gridVisibleRowsSelector, _gridColumnsSelector.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;
+});
+const gridFocusedVirtualCellSelector = exports.gridFocusedVirtualCellSelector = (0, _createSelector.createSelectorMemoized)(gridIsFocusedCellOutOfContext, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector, _pagination.gridVisibleRowsSelector, _focus.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 (0, _extends2.default)({}, focusedCell, {
+    rowIndex,
+    columnIndex
+  });
+});