@mui/x-data-grid 5.5.1 → 5.7.0

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

@@ -0,0 +1,311 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { GridEvents } from '../../../models/events';
+import { checkGridRowIdIsValid } from '../../../models/gridRows';
+import { useGridApiMethod } from '../../utils/useGridApiMethod';
+import { useGridLogger } from '../../utils/useGridLogger';
+import { gridRowCountSelector, gridRowsLookupSelector, gridRowTreeSelector, gridRowIdsSelector, gridRowGroupingNameSelector } from './gridRowsSelector';
+import { GridSignature, useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
+import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
+
+function getGridRowId(rowModel, getRowId, detailErrorMessage) {
+  const id = getRowId ? getRowId(rowModel) : rowModel.id;
+  checkGridRowIdIsValid(id, rowModel, detailErrorMessage);
+  return id;
+}
+
+const convertGridRowsPropToState = ({
+  prevState,
+  rows,
+  getRowId
+}) => {
+  let value;
+
+  if (rows) {
+    value = {
+      idRowsLookup: {},
+      ids: []
+    };
+
+    for (let i = 0; i < rows.length; i += 1) {
+      const row = rows[i];
+      const id = getGridRowId(row, getRowId);
+      value.idRowsLookup[id] = row;
+      value.ids.push(id);
+    }
+  } else {
+    value = prevState.value;
+  }
+
+  return {
+    value,
+    rowsBeforePartialUpdates: rows ?? prevState.rowsBeforePartialUpdates
+  };
+};
+
+const getRowsStateFromCache = (rowsCache, previousTree, apiRef, rowCountProp) => {
+  const {
+    value
+  } = rowsCache.state;
+  const rowCount = rowCountProp ?? 0;
+  const groupingResponse = apiRef.current.unstable_applyStrategyProcessor('rowTreeCreation', _extends({}, value, {
+    previousTree
+  }));
+  const dataTopLevelRowCount = groupingResponse.treeDepth === 1 ? groupingResponse.ids.length : Object.values(groupingResponse.tree).filter(node => node.parent == null).length;
+  return _extends({}, groupingResponse, {
+    totalRowCount: Math.max(rowCount, groupingResponse.ids.length),
+    totalTopLevelRowCount: Math.max(rowCount, dataTopLevelRowCount)
+  });
+};
+
+export const rowsStateInitializer = (state, props, apiRef) => {
+  const rowsCache = {
+    state: convertGridRowsPropToState({
+      rows: props.rows,
+      getRowId: props.getRowId,
+      prevState: {
+        value: {
+          idRowsLookup: {},
+          ids: []
+        },
+        rowsBeforePartialUpdates: []
+      }
+    }),
+    timeout: null,
+    lastUpdateMs: Date.now()
+  };
+  return _extends({}, state, {
+    rows: getRowsStateFromCache(rowsCache, null, apiRef, props.rowCount),
+    rowsCache // TODO remove from state
+
+  });
+};
+export const useGridRows = (apiRef, props) => {
+  if (process.env.NODE_ENV !== 'production') {
+    // Freeze rows for immutability
+    Object.freeze(props.rows);
+  }
+
+  const logger = useGridLogger(apiRef, 'useGridRows');
+  const rowsCache = React.useRef(apiRef.current.state.rowsCache); // To avoid listing rowsCache as useEffect dep
+
+  const currentPage = useGridVisibleRows(apiRef, props);
+  const getRow = React.useCallback(id => gridRowsLookupSelector(apiRef)[id] ?? null, [apiRef]);
+  const lookup = React.useMemo(() => currentPage.rows.reduce((acc, {
+    id
+  }, index) => {
+    acc[id] = index;
+    return acc;
+  }, {}), [currentPage.rows]);
+  const throttledRowsChange = React.useCallback((newState, throttle) => {
+    const run = () => {
+      rowsCache.current.timeout = null;
+      rowsCache.current.lastUpdateMs = Date.now();
+      apiRef.current.setState(state => _extends({}, state, {
+        rows: getRowsStateFromCache(rowsCache.current, gridRowTreeSelector(apiRef), apiRef, props.rowCount)
+      }));
+      apiRef.current.publishEvent(GridEvents.rowsSet);
+      apiRef.current.forceUpdate();
+    };
+
+    if (rowsCache.current.timeout) {
+      clearTimeout(rowsCache.current.timeout);
+    }
+
+    rowsCache.current.state = newState;
+    rowsCache.current.timeout = null;
+
+    if (!throttle) {
+      run();
+      return;
+    }
+
+    const throttleRemainingTimeMs = props.throttleRowsMs - (Date.now() - rowsCache.current.lastUpdateMs);
+
+    if (throttleRemainingTimeMs > 0) {
+      rowsCache.current.timeout = setTimeout(run, throttleRemainingTimeMs);
+      return;
+    }
+
+    run();
+  }, [props.throttleRowsMs, props.rowCount, apiRef]);
+  /**
+   * API METHODS
+   */
+
+  const setRows = React.useCallback(rows => {
+    logger.debug(`Updating all rows, new length ${rows.length}`);
+    throttledRowsChange(convertGridRowsPropToState({
+      rows,
+      prevState: rowsCache.current.state,
+      getRowId: props.getRowId
+    }), true);
+  }, [logger, props.getRowId, throttledRowsChange]);
+  const updateRows = React.useCallback(updates => {
+    if (props.signature === GridSignature.DataGrid && updates.length > 1) {
+      // TODO: Add test with direct call to `apiRef.current.updateRows` in DataGrid after enabling the `apiRef` on the free plan.
+      throw new Error(["MUI: You can't update several rows at once in `apiRef.current.updateRows` on the DataGrid.", 'You need to upgrade to the DataGridPro component to unlock this feature.'].join('\n'));
+    } // we remove duplicate updates. A server can batch updates, and send several updates for the same row in one fn call.
+
+
+    const uniqUpdates = new Map();
+    updates.forEach(update => {
+      const id = getGridRowId(update, props.getRowId, 'A row was provided without id when calling updateRows():');
+
+      if (uniqUpdates.has(id)) {
+        uniqUpdates.set(id, _extends({}, uniqUpdates.get(id), update));
+      } else {
+        uniqUpdates.set(id, update);
+      }
+    });
+    const deletedRowIds = [];
+    const newStateValue = {
+      idRowsLookup: _extends({}, rowsCache.current.state.value.idRowsLookup),
+      ids: [...rowsCache.current.state.value.ids]
+    };
+    uniqUpdates.forEach((partialRow, id) => {
+      // eslint-disable-next-line no-underscore-dangle
+      if (partialRow._action === 'delete') {
+        delete newStateValue.idRowsLookup[id];
+        deletedRowIds.push(id);
+        return;
+      }
+
+      const oldRow = apiRef.current.getRow(id);
+
+      if (!oldRow) {
+        newStateValue.idRowsLookup[id] = partialRow;
+        newStateValue.ids.push(id);
+        return;
+      }
+
+      newStateValue.idRowsLookup[id] = _extends({}, apiRef.current.getRow(id), partialRow);
+    });
+
+    if (deletedRowIds.length > 0) {
+      newStateValue.ids = newStateValue.ids.filter(id => !deletedRowIds.includes(id));
+    }
+
+    const state = _extends({}, rowsCache.current.state, {
+      value: newStateValue
+    });
+
+    throttledRowsChange(state, true);
+  }, [apiRef, props.getRowId, throttledRowsChange, props.signature]);
+  const getRowModels = React.useCallback(() => {
+    const allRows = gridRowIdsSelector(apiRef);
+    const idRowsLookup = gridRowsLookupSelector(apiRef);
+    return new Map(allRows.map(id => [id, idRowsLookup[id]]));
+  }, [apiRef]);
+  const getRowsCount = React.useCallback(() => gridRowCountSelector(apiRef), [apiRef]);
+  const getAllRowIds = React.useCallback(() => gridRowIdsSelector(apiRef), [apiRef]);
+  const getRowIndexRelativeToVisibleRows = React.useCallback(id => lookup[id], [lookup]);
+  const setRowChildrenExpansion = React.useCallback((id, isExpanded) => {
+    const currentNode = apiRef.current.getRowNode(id);
+
+    if (!currentNode) {
+      throw new Error(`MUI: No row with id #${id} found`);
+    }
+
+    const newNode = _extends({}, currentNode, {
+      childrenExpanded: isExpanded
+    });
+
+    apiRef.current.setState(state => {
+      return _extends({}, state, {
+        rows: _extends({}, state.rows, {
+          tree: _extends({}, state.rows.tree, {
+            [id]: newNode
+          })
+        })
+      });
+    });
+    apiRef.current.forceUpdate();
+    apiRef.current.publishEvent(GridEvents.rowExpansionChange, newNode);
+  }, [apiRef]);
+  const getRowNode = React.useCallback(id => gridRowTreeSelector(apiRef)[id] ?? null, [apiRef]);
+  const rowApi = {
+    getRow,
+    getRowModels,
+    getRowsCount,
+    getAllRowIds,
+    setRows,
+    updateRows,
+    setRowChildrenExpansion,
+    getRowNode,
+    getRowIndexRelativeToVisibleRows
+  };
+  /**
+   * EVENTS
+   */
+
+  const groupRows = React.useCallback(() => {
+    logger.info(`Row grouping pre-processing have changed, regenerating the row tree`);
+    let rows;
+
+    if (rowsCache.current.state.rowsBeforePartialUpdates === props.rows) {
+      // The `props.rows` has not changed since the last row grouping
+      // We can keep the potential updates stored in `inputRowsAfterUpdates` on the new grouping
+      rows = undefined;
+    } else {
+      // The `props.rows` has changed since the last row grouping
+      // We must use the new `props.rows` on the new grouping
+      // This occurs because this event is triggered before the `useEffect` on the rows when both the grouping pre-processing and the rows changes on the same render
+      rows = props.rows;
+    }
+
+    throttledRowsChange(convertGridRowsPropToState({
+      rows,
+      getRowId: props.getRowId,
+      prevState: rowsCache.current.state
+    }), false);
+  }, [logger, throttledRowsChange, props.getRowId, props.rows]);
+  const handleStrategyProcessorChange = React.useCallback(methodName => {
+    if (methodName === 'rowTreeCreation') {
+      groupRows();
+    }
+  }, [groupRows]);
+  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.unstable_getActiveStrategy('rowTree') !== gridRowGroupingNameSelector(apiRef)) {
+      groupRows();
+    }
+  }, [apiRef, groupRows]);
+  useGridApiEventHandler(apiRef, GridEvents.activeStrategyProcessorChange, handleStrategyProcessorChange);
+  useGridApiEventHandler(apiRef, GridEvents.strategyAvailabilityChange, handleStrategyActivityChange);
+  useGridApiMethod(apiRef, rowApi, 'GridRowApi');
+  /**
+   * EFFECTS
+   */
+
+  React.useEffect(() => {
+    return () => {
+      if (rowsCache.current.timeout !== null) {
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        clearTimeout(rowsCache.current.timeout);
+      }
+    };
+  }, []); // The effect do not track any value defined synchronously during the 1st render by hooks called after `useGridRows`
+  // As a consequence, the state generated by the 1st run of this useEffect will always be equal to the initialization one
+
+  const isFirstRender = React.useRef(true);
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    } // The new rows have already been applied (most likely in the `GridEvents.rowGroupsPreProcessingChange` listener)
+
+
+    if (rowsCache.current.state.rowsBeforePartialUpdates === props.rows) {
+      return;
+    }
+
+    logger.debug(`Updating all rows, new length ${props.rows.length}`);
+    throttledRowsChange(convertGridRowsPropToState({
+      rows: props.rows,
+      getRowId: props.getRowId,
+      prevState: rowsCache.current.state
+    }), false);
+  }, [props.rows, props.rowCount, props.getRowId, logger, throttledRowsChange]);
+};

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

@@ -0,0 +1,125 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
+import { useGridApiMethod } from '../../utils/useGridApiMethod';
+import { useGridSelector } from '../../utils/useGridSelector';
+import { gridDensityRowHeightSelector, gridDensityFactorSelector } from '../density/densitySelector';
+import { gridFilterStateSelector } from '../filter/gridFilterSelector';
+import { gridPaginationSelector } from '../pagination/gridPaginationSelector';
+import { gridSortingStateSelector } from '../sorting/gridSortingSelector';
+import { GridEvents } from '../../../models/events/gridEvents';
+import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
+export const rowsMetaStateInitializer = state => _extends({}, state, {
+  rowsMeta: {
+    currentPageTotalHeight: 0,
+    positions: []
+  }
+});
+/**
+ * @requires useGridPageSize (method)
+ * @requires useGridPage (method)
+ */
+
+export const useGridRowsMeta = (apiRef, props) => {
+  const {
+    getRowHeight,
+    getRowSpacing
+  } = props;
+  const rowsHeightLookup = React.useRef({});
+  const rowHeight = useGridSelector(apiRef, gridDensityRowHeightSelector);
+  const filterState = useGridSelector(apiRef, gridFilterStateSelector);
+  const paginationState = useGridSelector(apiRef, gridPaginationSelector);
+  const sortingState = useGridSelector(apiRef, gridSortingStateSelector);
+  const currentPage = useGridVisibleRows(apiRef, props);
+  const hydrateRowsMeta = React.useCallback(() => {
+    apiRef.current.setState(state => {
+      const positions = [];
+      const densityFactor = gridDensityFactorSelector(state, apiRef.current.instanceId);
+      const currentRowHeight = gridDensityRowHeightSelector(state, apiRef.current.instanceId);
+      const currentPageTotalHeight = currentPage.rows.reduce((acc, row) => {
+        positions.push(acc);
+        let baseRowHeight;
+        const isResized = rowsHeightLookup.current[row.id] && rowsHeightLookup.current[row.id].isResized || false;
+
+        if (isResized) {
+          // do not recalculate resized row height and use the value from the lookup
+          baseRowHeight = rowsHeightLookup.current[row.id].value;
+        } else {
+          baseRowHeight = currentRowHeight;
+
+          if (getRowHeight) {
+            // Default back to base rowHeight if getRowHeight returns null or undefined.
+            baseRowHeight = getRowHeight(_extends({}, row, {
+              densityFactor
+            })) ?? currentRowHeight;
+          }
+        } // We use an object to make simple to check if a height is already added or not
+
+
+        const initialHeights = {
+          base: baseRowHeight
+        };
+
+        if (getRowSpacing) {
+          const index = apiRef.current.getRowIndexRelativeToVisibleRows(row.id);
+          const spacing = getRowSpacing(_extends({}, row, {
+            isFirstVisible: index === 0,
+            isLastVisible: index === currentPage.rows.length - 1
+          }));
+          initialHeights.spacingTop = spacing.top ?? 0;
+          initialHeights.spacingBottom = spacing.bottom ?? 0;
+        }
+
+        const sizes = apiRef.current.unstable_applyPreProcessors('rowHeight', initialHeights, row);
+        const finalRowHeight = Object.values(sizes).reduce((acc2, value) => acc2 + value, 0);
+        rowsHeightLookup.current[row.id] = {
+          value: baseRowHeight,
+          sizes,
+          isResized
+        };
+        return acc + finalRowHeight;
+      }, 0);
+      return _extends({}, state, {
+        rowsMeta: {
+          currentPageTotalHeight,
+          positions
+        }
+      });
+    });
+    apiRef.current.forceUpdate();
+  }, [apiRef, currentPage.rows, getRowSpacing, getRowHeight]);
+
+  const getTargetRowHeight = rowId => rowsHeightLookup.current[rowId]?.value || rowHeight;
+
+  const getRowInternalSizes = rowId => rowsHeightLookup.current[rowId]?.sizes;
+
+  const setRowHeight = React.useCallback((id, height) => {
+    rowsHeightLookup.current[id] = {
+      value: height,
+      isResized: true,
+      sizes: _extends({}, rowsHeightLookup.current[id].sizes, {
+        base: height
+      })
+    };
+    hydrateRowsMeta();
+  }, [hydrateRowsMeta]); // 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(() => {
+    hydrateRowsMeta();
+  }, [rowHeight, filterState, paginationState, sortingState, hydrateRowsMeta]);
+  const handlePreProcessorRegister = React.useCallback(name => {
+    if (name !== 'rowHeight') {
+      return;
+    }
+
+    hydrateRowsMeta();
+  }, [hydrateRowsMeta]);
+  useGridApiEventHandler(apiRef, GridEvents.preProcessorRegister, handlePreProcessorRegister);
+  const rowsMetaApi = {
+    unstable_getRowHeight: getTargetRowHeight,
+    unstable_getRowInternalSizes: getRowInternalSizes,
+    unstable_setRowHeight: setRowHeight
+  };
+  useGridApiMethod(apiRef, rowsMetaApi, 'GridRowsMetaApi');
+};

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

@@ -0,0 +1,37 @@
+import { GRID_DEFAULT_STRATEGY, useGridRegisterStrategyProcessor } from '../../core/strategyProcessing';
+
+const flatRowTreeCreationMethod = ({
+  ids,
+  idRowsLookup,
+  previousTree
+}) => {
+  const tree = {};
+
+  for (let i = 0; i < ids.length; i += 1) {
+    const rowId = ids[i];
+
+    if (previousTree && previousTree[rowId]) {
+      tree[rowId] = previousTree[rowId];
+    } else {
+      tree[rowId] = {
+        id: rowId,
+        depth: 0,
+        parent: null,
+        groupingKey: '',
+        groupingField: null
+      };
+    }
+  }
+
+  return {
+    groupingName: GRID_DEFAULT_STRATEGY,
+    tree,
+    treeDepth: 1,
+    idRowsLookup,
+    ids
+  };
+};
+
+export const useGridRowsPreProcessors = apiRef => {
+  useGridRegisterStrategyProcessor(apiRef, GRID_DEFAULT_STRATEGY, 'rowTreeCreation', flatRowTreeCreationMethod);
+};

package/modern/hooks/features/scroll/useGridScroll.js

@@ -0,0 +1,124 @@
+import * as React from 'react';
+import { useGridLogger } from '../../utils/useGridLogger';
+import { gridColumnPositionsSelector, gridVisibleColumnDefinitionsSelector } from '../columns/gridColumnsSelector';
+import { gridPageSelector, gridPageSizeSelector } from '../pagination/gridPaginationSelector';
+import { gridRowCountSelector } from '../rows/gridRowsSelector';
+import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
+import { useGridApiMethod } from '../../utils/useGridApiMethod';
+import { useGridNativeEventListener } from '../../utils/useGridNativeEventListener'; // Logic copied from https://www.w3.org/TR/wai-aria-practices/examples/listbox/js/listbox.js
+// Similar to https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
+
+function scrollIntoView(dimensions) {
+  const {
+    clientHeight,
+    scrollTop,
+    offsetHeight,
+    offsetTop
+  } = dimensions;
+  const elementBottom = offsetTop + offsetHeight;
+
+  if (elementBottom - clientHeight > scrollTop) {
+    return elementBottom - clientHeight;
+  }
+
+  if (offsetTop < scrollTop) {
+    return offsetTop;
+  }
+
+  return undefined;
+}
+/**
+ * @requires useGridPagination (state) - can be after, async only
+ * @requires useGridColumns (state) - can be after, async only
+ * @requires useGridRows (state) - can be after, async only
+ * @requires useGridRowsMeta (state) - can be after, async only
+ */
+
+
+export const useGridScroll = (apiRef, props) => {
+  const logger = useGridLogger(apiRef, 'useGridScroll');
+  const colRef = apiRef.current.columnHeadersElementRef;
+  const windowRef = apiRef.current.windowRef;
+  const scrollToIndexes = React.useCallback(params => {
+    const totalRowCount = gridRowCountSelector(apiRef);
+    const visibleColumns = gridVisibleColumnDefinitionsSelector(apiRef);
+
+    if (totalRowCount === 0 || visibleColumns.length === 0) {
+      return false;
+    }
+
+    logger.debug(`Scrolling to cell at row ${params.rowIndex}, col: ${params.colIndex} `);
+    let scrollCoordinates = {};
+
+    if (params.colIndex != null) {
+      const columnPositions = gridColumnPositionsSelector(apiRef);
+      scrollCoordinates.left = scrollIntoView({
+        clientHeight: windowRef.current.clientWidth,
+        scrollTop: windowRef.current.scrollLeft,
+        offsetHeight: visibleColumns[params.colIndex].computedWidth,
+        offsetTop: columnPositions[params.colIndex]
+      });
+    }
+
+    if (params.rowIndex != null) {
+      const rowsMeta = gridRowsMetaSelector(apiRef.current.state);
+      const page = gridPageSelector(apiRef);
+      const pageSize = gridPageSizeSelector(apiRef);
+      const elementIndex = !props.pagination ? params.rowIndex : params.rowIndex - page * pageSize;
+      const targetOffsetHeight = rowsMeta.positions[elementIndex + 1] ? rowsMeta.positions[elementIndex + 1] - rowsMeta.positions[elementIndex] : rowsMeta.currentPageTotalHeight - rowsMeta.positions[elementIndex];
+      scrollCoordinates.top = scrollIntoView({
+        clientHeight: windowRef.current.clientHeight,
+        scrollTop: windowRef.current.scrollTop,
+        offsetHeight: targetOffsetHeight,
+        offsetTop: rowsMeta.positions[elementIndex]
+      });
+    }
+
+    scrollCoordinates = apiRef.current.unstable_applyPreProcessors('scrollToIndexes', scrollCoordinates, params);
+
+    if (typeof scrollCoordinates.left !== undefined || typeof scrollCoordinates.top !== undefined) {
+      apiRef.current.scroll(scrollCoordinates);
+      return true;
+    }
+
+    return false;
+  }, [logger, apiRef, windowRef, props.pagination]);
+  const scroll = React.useCallback(params => {
+    if (windowRef.current && params.left != null && colRef.current) {
+      colRef.current.scrollLeft = params.left;
+      windowRef.current.scrollLeft = params.left;
+      logger.debug(`Scrolling left: ${params.left}`);
+    }
+
+    if (windowRef.current && params.top != null) {
+      windowRef.current.scrollTop = params.top;
+      logger.debug(`Scrolling top: ${params.top}`);
+    }
+
+    logger.debug(`Scrolling, updating container, and viewport`);
+  }, [windowRef, colRef, logger]);
+  const getScrollPosition = React.useCallback(() => {
+    if (!windowRef?.current) {
+      return {
+        top: 0,
+        left: 0
+      };
+    }
+
+    return {
+      top: windowRef.current.scrollTop,
+      left: windowRef.current.scrollLeft
+    };
+  }, [windowRef]);
+  const scrollApi = {
+    scroll,
+    scrollToIndexes,
+    getScrollPosition
+  };
+  useGridApiMethod(apiRef, scrollApi, 'GridScrollApi');
+  const preventScroll = React.useCallback(event => {
+    event.target.scrollLeft = 0;
+    event.target.scrollTop = 0;
+  }, []);
+  useGridNativeEventListener(apiRef, () => apiRef.current?.renderingZoneRef?.current?.parentElement, 'scroll', preventScroll);
+};

package/modern/hooks/features/selection/gridSelectionSelector.js

@@ -0,0 +1,9 @@
+import { createSelector } from '../../../utils/createSelector';
+import { gridRowsLookupSelector } from '../rows/gridRowsSelector';
+export const gridSelectionStateSelector = state => state.selection;
+export const selectedGridRowsCountSelector = createSelector(gridSelectionStateSelector, selection => selection.length);
+export const selectedGridRowsSelector = createSelector(gridSelectionStateSelector, gridRowsLookupSelector, (selectedRows, rowsLookup) => new Map(selectedRows.map(id => [id, rowsLookup[id]])));
+export const selectedIdsLookupSelector = createSelector(gridSelectionStateSelector, selection => selection.reduce((lookup, rowId) => {
+  lookup[rowId] = rowId;
+  return lookup;
+}, {}));

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

@@ -0,0 +1 @@
+export * from './gridSelectionSelector';