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

package/hooks/features/{editRows/useGridCellEditing.new.js → editing/useGridCellEditing.js}

@@ -8,7 +8,7 @@ import { unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import { useGridApiEventHandler, useGridApiOptionHandler, GridSignature } from '../../utils/useGridApiEventHandler';
 import { GridEditModes, GridCellModes } from '../../../models/gridEditRowModel';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { gridEditRowsStateSelector } from './gridEditRowsSelector';
+import { gridEditRowsStateSelector } from './gridEditingSelectors';
 import { isPrintableKey } from '../../../utils/keyboardUtils';
 import { buildWarning } from '../../../utils/warning';
 import { gridRowsDataRowIdToIdLookupSelector } from '../rows/gridRowsSelector';
@@ -121,7 +121,8 @@ export const useGridCellEditing = (apiRef, props) => {
 
       if (reason) {
         const newParams = _extends({}, params, {
-          reason
+          reason,
+          key: event.key
         });
 
         apiRef.current.publishEvent('cellEditStart', newParams, event);
@@ -132,14 +133,21 @@ export const useGridCellEditing = (apiRef, props) => {
     const {
       id,
       field,
-      reason
+      reason,
+      key
     } = params;
     const startCellEditModeParams = {
       id,
       field
     };
 
-    if (reason === GridCellEditStartReasons.deleteKeyDown || reason === GridCellEditStartReasons.printableKeyDown) {
+    if (reason === GridCellEditStartReasons.printableKeyDown) {
+      if (React.version.startsWith('18')) {
+        startCellEditModeParams.initialValue = key; // In React 17, cleaning the input is enough
+      } else {
+        startCellEditModeParams.deleteValue = true;
+      }
+    } else if (reason === GridCellEditStartReasons.deleteKeyDown) {
       startCellEditModeParams.deleteValue = true;
     }
 
@@ -270,10 +278,17 @@ export const useGridCellEditing = (apiRef, props) => {
     const {
       id,
       field,
-      deleteValue
+      deleteValue,
+      initialValue
     } = params;
+    let newValue = apiRef.current.getCellValue(id, field);
+
+    if (deleteValue || initialValue) {
+      newValue = deleteValue ? '' : initialValue;
+    }
+
     const newProps = {
-      value: deleteValue ? '' : apiRef.current.getCellValue(id, field),
+      value: newValue,
       error: false,
       isProcessingProps: false
     };

package/hooks/features/{editRows/useGridEditing.new.js → editing/useGridEditing.js}

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { useGridCellEditing } from './useGridCellEditing.new';
+import { useGridCellEditing } from './useGridCellEditing';
 import { GridCellModes, GridEditModes } from '../../../models/gridEditRowModel';
-import { useGridRowEditing } from './useGridRowEditing.new';
-import { gridEditRowsStateSelector } from './gridEditRowsSelector';
+import { useGridRowEditing } from './useGridRowEditing';
+import { gridEditRowsStateSelector } from './gridEditingSelectors';
 import { isAutoGeneratedRow } from '../rows/gridRowsUtils';
 export const editingStateInitializer = state => _extends({}, state, {
   editRows: {}

package/hooks/features/{editRows/useGridRowEditing.new.js → editing/useGridRowEditing.js}

@@ -8,7 +8,7 @@ import { unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import { useGridApiEventHandler, useGridApiOptionHandler, GridSignature } from '../../utils/useGridApiEventHandler';
 import { GridEditModes, GridRowModes } from '../../../models/gridEditRowModel';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { gridEditRowsStateSelector } from './gridEditRowsSelector';
+import { gridEditRowsStateSelector } from './gridEditingSelectors';
 import { isPrintableKey } from '../../../utils/keyboardUtils';
 import { gridColumnFieldsSelector } from '../columns/gridColumnsSelector';
 import { buildWarning } from '../../../utils/warning';
@@ -181,6 +181,7 @@ export const useGridRowEditing = (apiRef, props) => {
 
         const newParams = _extends({}, rowParams, {
           field: params.field,
+          key: event.key,
           reason
         });
 
@@ -192,14 +193,21 @@ export const useGridRowEditing = (apiRef, props) => {
     const {
       id,
       field,
-      reason
+      reason,
+      key
     } = params;
     const startRowEditModeParams = {
       id,
       fieldToFocus: field
     };
 
-    if (reason === GridRowEditStartReasons.deleteKeyDown || reason === GridRowEditStartReasons.printableKeyDown) {
+    if (reason === GridRowEditStartReasons.printableKeyDown) {
+      if (React.version.startsWith('18')) {
+        startRowEditModeParams.initialValue = key; // In React 17, cleaning the input is enough
+      } else {
+        startRowEditModeParams.deleteValue = !!field;
+      }
+    } else if (reason === GridRowEditStartReasons.deleteKeyDown) {
       startRowEditModeParams.deleteValue = !!field;
     }
 
@@ -339,7 +347,8 @@ export const useGridRowEditing = (apiRef, props) => {
     const {
       id,
       fieldToFocus,
-      deleteValue
+      deleteValue,
+      initialValue
     } = params;
     const columnFields = gridColumnFieldsSelector(apiRef);
     const newProps = columnFields.reduce((acc, field) => {
@@ -349,9 +358,14 @@ export const useGridRowEditing = (apiRef, props) => {
         return acc;
       }
 
-      const shouldDeleteValue = deleteValue && fieldToFocus === field;
+      let newValue = apiRef.current.getCellValue(id, field);
+
+      if (fieldToFocus === field && (deleteValue || initialValue)) {
+        newValue = deleteValue ? '' : initialValue;
+      }
+
       acc[field] = {
-        value: shouldDeleteValue ? '' : apiRef.current.getCellValue(id, field),
+        value: newValue,
         error: false,
         isProcessingProps: false
       };

package/hooks/features/export/useGridPrintExport.js

@@ -4,7 +4,7 @@ import { ownerDocument } from '@mui/material/utils';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { gridVisibleRowCountSelector } from '../filter/gridFilterSelector';
 import { gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector } from '../columns/gridColumnsSelector';
-import { gridDensityTotalHeaderHeightSelector } from '../density/densitySelector';
+import { gridTotalHeaderHeightSelector } from '../columnGrouping/gridColumnGroupsSelector';
 import { gridClasses } from '../../../constants/gridClasses';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
@@ -83,7 +83,7 @@ export const useGridPrintExport = (apiRef, props) => {
       return;
     }
 
-    const totalHeaderHeight = gridDensityTotalHeaderHeightSelector(apiRef);
+    const totalHeaderHeight = gridTotalHeaderHeightSelector(apiRef);
     const rowsMeta = gridRowsMetaSelector(apiRef.current.state);
     const gridRootElement = apiRef.current.rootElementRef.current;
     const gridClone = gridRootElement.cloneNode(true);

package/hooks/features/focus/gridFocusState.d.ts

@@ -6,11 +6,17 @@ export declare type GridCellIdentifier = {
 export declare type GridColumnIdentifier = {
     field: string;
 };
+export declare type GridColumnGroupIdentifier = {
+    field: string;
+    depth: number;
+};
 export interface GridFocusState {
     cell: GridCellIdentifier | null;
     columnHeader: GridColumnIdentifier | null;
+    columnGroupHeader: GridColumnGroupIdentifier | null;
 }
 export interface GridTabIndexState {
     cell: GridCellIdentifier | null;
     columnHeader: GridColumnIdentifier | null;
+    columnGroupHeader: GridColumnGroupIdentifier | null;
 }

package/hooks/features/focus/gridFocusStateSelector.d.ts

@@ -3,6 +3,8 @@ import { GridFocusState, GridTabIndexState } from './gridFocusState';
 export declare const gridFocusStateSelector: (state: GridStateCommunity) => GridFocusState;
 export declare const gridFocusCellSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("./gridFocusState").GridCellIdentifier | null>;
 export declare const gridFocusColumnHeaderSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("./gridFocusState").GridColumnIdentifier | null>;
+export declare const unstable_gridFocusColumnGroupHeaderSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("./gridFocusState").GridColumnGroupIdentifier | null>;
 export declare const gridTabIndexStateSelector: (state: GridStateCommunity) => GridTabIndexState;
 export declare const gridTabIndexCellSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("./gridFocusState").GridCellIdentifier | null>;
 export declare const gridTabIndexColumnHeaderSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("./gridFocusState").GridColumnIdentifier | null>;
+export declare const unstable_gridTabIndexColumnGroupHeaderSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("./gridFocusState").GridColumnGroupIdentifier | null>;

package/hooks/features/focus/gridFocusStateSelector.js

@@ -1,7 +1,11 @@
 import { createSelector } from '../../../utils/createSelector';
 export const gridFocusStateSelector = state => state.focus;
 export const gridFocusCellSelector = createSelector(gridFocusStateSelector, focusState => focusState.cell);
-export const gridFocusColumnHeaderSelector = createSelector(gridFocusStateSelector, focusState => focusState.columnHeader);
+export const gridFocusColumnHeaderSelector = createSelector(gridFocusStateSelector, focusState => focusState.columnHeader); // eslint-disable-next-line @typescript-eslint/naming-convention
+
+export const unstable_gridFocusColumnGroupHeaderSelector = createSelector(gridFocusStateSelector, focusState => focusState.columnGroupHeader);
 export const gridTabIndexStateSelector = state => state.tabIndex;
 export const gridTabIndexCellSelector = createSelector(gridTabIndexStateSelector, state => state.cell);
-export const gridTabIndexColumnHeaderSelector = createSelector(gridTabIndexStateSelector, state => state.columnHeader);
+export const gridTabIndexColumnHeaderSelector = createSelector(gridTabIndexStateSelector, state => state.columnHeader); // eslint-disable-next-line @typescript-eslint/naming-convention
+
+export const unstable_gridTabIndexColumnGroupHeaderSelector = createSelector(gridTabIndexStateSelector, state => state.columnGroupHeader);

package/hooks/features/focus/useGridFocus.js

@@ -5,18 +5,20 @@ import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { isNavigationKey } from '../../../utils/keyboardUtils';
-import { gridFocusCellSelector } from './gridFocusStateSelector';
+import { gridFocusCellSelector, unstable_gridFocusColumnGroupHeaderSelector } from './gridFocusStateSelector';
 import { gridVisibleColumnDefinitionsSelector } from '../columns/gridColumnsSelector';
 import { getVisibleRows } from '../../utils/useGridVisibleRows';
 import { clamp } from '../../../utils/utils';
 export const focusStateInitializer = state => _extends({}, state, {
   focus: {
     cell: null,
-    columnHeader: null
+    columnHeader: null,
+    columnGroupHeader: null
   },
   tabIndex: {
     cell: null,
-    columnHeader: null
+    columnHeader: null,
+    columnGroupHeader: null
   }
 });
 /**
@@ -51,14 +53,16 @@ export const useGridFocus = (apiRef, props) => {
             id,
             field
           },
-          columnHeader: null
+          columnHeader: null,
+          columnGroupHeader: null
         },
         focus: {
           cell: {
             id,
             field
           },
-          columnHeader: null
+          columnHeader: null,
+          columnGroupHeader: null
         }
       });
     });
@@ -86,18 +90,50 @@ export const useGridFocus = (apiRef, props) => {
           columnHeader: {
             field
           },
-          cell: null
+          cell: null,
+          columnGroupHeader: null
         },
         focus: {
           columnHeader: {
             field
           },
-          cell: null
+          cell: null,
+          columnGroupHeader: null
         }
       });
     });
     apiRef.current.forceUpdate();
   }, [apiRef, logger, publishCellFocusOut]);
+  const setColumnGroupHeaderFocus = React.useCallback((field, depth, event = {}) => {
+    const cell = gridFocusCellSelector(apiRef);
+
+    if (cell) {
+      apiRef.current.publishEvent('cellFocusOut', apiRef.current.getCellParams(cell.id, cell.field), event);
+    }
+
+    apiRef.current.setState(state => {
+      return _extends({}, state, {
+        tabIndex: {
+          columnGroupHeader: {
+            field,
+            depth
+          },
+          columnHeader: null,
+          cell: null
+        },
+        focus: {
+          columnGroupHeader: {
+            field,
+            depth
+          },
+          columnHeader: null,
+          cell: null
+        }
+      });
+    });
+    apiRef.current.forceUpdate();
+  }, [apiRef]);
+  const getColumnGroupHeaderFocus = React.useCallback(() => unstable_gridFocusColumnGroupHeaderSelector(apiRef), [apiRef]);
   const moveFocusToRelativeCell = React.useCallback((id, field, direction) => {
     let columnIndexToFocus = apiRef.current.getColumnIndex(field);
     let rowIndexToFocus = apiRef.current.getRowIndexRelativeToVisibleRows(id);
@@ -173,12 +209,29 @@ export const useGridFocus = (apiRef, props) => {
 
     apiRef.current.setColumnHeaderFocus(field, event);
   }, [apiRef]);
+  const focussedColumnGroup = unstable_gridFocusColumnGroupHeaderSelector(apiRef);
+  const handleColumnGroupHeaderFocus = React.useCallback(({
+    fields,
+    depth
+  }, event) => {
+    if (event.target !== event.currentTarget) {
+      return;
+    }
+
+    if (focussedColumnGroup !== null && focussedColumnGroup.depth === depth && fields.includes(focussedColumnGroup.field)) {
+      // This group cell has already been focused
+      return;
+    }
+
+    apiRef.current.unstable_setColumnGroupHeaderFocus(fields[0], depth, event);
+  }, [apiRef, focussedColumnGroup]);
   const handleBlur = React.useCallback(() => {
     logger.debug(`Clearing focus`);
     apiRef.current.setState(state => _extends({}, state, {
       focus: {
         cell: null,
-        columnHeader: null
+        columnHeader: null,
+        columnGroupHeader: null
       }
     }));
   }, [logger, apiRef]);
@@ -214,7 +267,8 @@ export const useGridFocus = (apiRef, props) => {
       apiRef.current.setState(state => _extends({}, state, {
         focus: {
           cell: null,
-          columnHeader: null
+          columnHeader: null,
+          columnGroupHeader: null
         }
       }));
       apiRef.current.forceUpdate(); // There's a focused cell but another element (not a cell) was clicked
@@ -241,7 +295,8 @@ export const useGridFocus = (apiRef, props) => {
       apiRef.current.setState(state => _extends({}, state, {
         focus: {
           cell: null,
-          columnHeader: null
+          columnHeader: null,
+          columnGroupHeader: null
         }
       }));
     }
@@ -249,7 +304,9 @@ export const useGridFocus = (apiRef, props) => {
   useGridApiMethod(apiRef, {
     setCellFocus,
     setColumnHeaderFocus,
-    unstable_moveFocusToRelativeCell: moveFocusToRelativeCell
+    unstable_moveFocusToRelativeCell: moveFocusToRelativeCell,
+    unstable_setColumnGroupHeaderFocus: setColumnGroupHeaderFocus,
+    unstable_getColumnGroupHeaderFocus: getColumnGroupHeaderFocus
   }, 'GridFocusApi');
   React.useEffect(() => {
     const doc = ownerDocument(apiRef.current.rootElementRef.current);
@@ -264,5 +321,6 @@ export const useGridFocus = (apiRef, props) => {
   useGridApiEventHandler(apiRef, 'cellKeyDown', handleCellKeyDown);
   useGridApiEventHandler(apiRef, 'cellModeChange', handleCellModeChange);
   useGridApiEventHandler(apiRef, 'columnHeaderFocus', handleColumnHeaderFocus);
+  useGridApiEventHandler(apiRef, 'columnGroupHeaderFocus', handleColumnGroupHeaderFocus);
   useGridApiEventHandler(apiRef, 'rowsSet', handleRowSet);
 };

package/hooks/features/index.d.ts

@@ -2,13 +2,13 @@ export * from './columnMenu';
 export * from './columns';
 export * from './columnGrouping';
 export * from './density';
-export * from './editRows';
+export * from './editing';
 export * from './filter';
 export * from './focus';
 export * from './pagination';
 export * from './preferencesPanel';
 export * from './rows';
-export * from './selection';
+export * from './rowSelection';
 export * from './sorting';
 export * from './dimensions';
 export * from './statePersistence';

package/hooks/features/index.js

@@ -3,13 +3,13 @@ export * from './columnMenu';
 export * from './columns';
 export * from './columnGrouping';
 export * from './density';
-export * from './editRows';
+export * from './editing';
 export * from './filter';
 export * from './focus';
 export * from './pagination';
 export * from './preferencesPanel';
 export * from './rows';
-export * from './selection';
+export * from './rowSelection';
 export * from './sorting';
 export * from './dimensions';
 export * from './statePersistence';

package/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js

@@ -10,6 +10,9 @@ import { GridCellModes } from '../../../models/gridEditRowModel';
 import { isNavigationKey } from '../../../utils/keyboardUtils';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../../../constants/gridDetailPanelToggleField';
 import { gridPinnedRowsSelector } from '../rows/gridRowsSelector';
+import { unstable_gridFocusColumnGroupHeaderSelector } from '../focus';
+import { gridColumnGroupsHeaderMaxDepthSelector } from '../columnGrouping/gridColumnGroupsSelector';
+import { useGridSelector } from '../../utils/useGridSelector';
 
 function enrichPageRowsWithPinnedRows(apiRef, rows) {
   const pinnedRows = gridPinnedRowsSelector(apiRef) || {};
@@ -68,6 +71,16 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     const field = apiRef.current.getVisibleColumns()[colIndex].field;
     apiRef.current.setColumnHeaderFocus(field, event);
   }, [apiRef, logger]);
+  const goToGroupHeader = React.useCallback((colIndex, depth, event) => {
+    logger.debug(`Navigating to header col ${colIndex}`);
+    apiRef.current.scrollToIndexes({
+      colIndex
+    });
+    const {
+      field
+    } = apiRef.current.getVisibleColumns()[colIndex];
+    apiRef.current.unstable_setColumnGroupHeaderFocus(field, depth, event);
+  }, [apiRef, logger]);
   const getRowIdFromIndex = React.useCallback(rowIndex => {
     return currentPageRows[rowIndex].id;
   }, [currentPageRows]);
@@ -239,6 +252,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     const lastRowIndexInPage = currentPageRows.length - 1;
     const firstColIndex = 0;
     const lastColIndex = gridVisibleColumnDefinitionsSelector(apiRef).length - 1;
+    const columnGroupMaxDepth = gridColumnGroupsHeaderMaxDepthSelector(apiRef);
     let shouldPreventDefault = true;
 
     switch (event.key) {
@@ -269,6 +283,15 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
           break;
         }
 
+      case 'ArrowUp':
+        {
+          if (columnGroupMaxDepth > 0) {
+            goToGroupHeader(colIndexBefore, columnGroupMaxDepth - 1, event);
+          }
+
+          break;
+        }
+
       case 'PageDown':
         {
           if (firstRowIndexInPage !== null && lastRowIndexInPage !== null) {
@@ -314,7 +337,117 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, currentPageRows, goToCell, goToHeader, getRowIdFromIndex]);
+  }, [apiRef, currentPageRows.length, goToCell, getRowIdFromIndex, goToHeader, goToGroupHeader]);
+  const focusedColumnGroup = useGridSelector(apiRef, unstable_gridFocusColumnGroupHeaderSelector);
+  const handleColumnGroupHeaderKeyDown = React.useCallback((params, event) => {
+    const dimensions = apiRef.current.getRootDimensions();
+
+    if (!dimensions) {
+      return;
+    }
+
+    if (focusedColumnGroup === null) {
+      return;
+    }
+
+    const {
+      field: currentField,
+      depth: currentDepth
+    } = focusedColumnGroup;
+    const {
+      fields,
+      depth,
+      maxDepth
+    } = params;
+    const viewportPageSize = apiRef.current.unstable_getViewportPageSize();
+    const currentColIndex = apiRef.current.getColumnIndex(currentField);
+    const colIndexBefore = currentField ? apiRef.current.getColumnIndex(currentField) : 0;
+    const firstRowIndexInPage = 0;
+    const lastRowIndexInPage = currentPageRows.length - 1;
+    const firstColIndex = 0;
+    const lastColIndex = gridVisibleColumnDefinitionsSelector(apiRef).length - 1;
+    let shouldPreventDefault = true;
+
+    switch (event.key) {
+      case 'ArrowDown':
+        {
+          if (depth === maxDepth - 1) {
+            goToHeader(currentColIndex, event);
+          } else {
+            goToGroupHeader(currentColIndex, currentDepth + 1, event);
+          }
+
+          break;
+        }
+
+      case 'ArrowUp':
+        {
+          if (depth > 0) {
+            goToGroupHeader(currentColIndex, currentDepth - 1, event);
+          }
+
+          break;
+        }
+
+      case 'ArrowRight':
+        {
+          const remainingRightColumns = fields.length - fields.indexOf(currentField) - 1;
+
+          if (currentColIndex + remainingRightColumns + 1 <= lastColIndex) {
+            goToGroupHeader(currentColIndex + remainingRightColumns + 1, currentDepth, event);
+          }
+
+          break;
+        }
+
+      case 'ArrowLeft':
+        {
+          const remainingLeftColumns = fields.indexOf(currentField);
+
+          if (currentColIndex - remainingLeftColumns - 1 >= firstColIndex) {
+            goToGroupHeader(currentColIndex - remainingLeftColumns - 1, currentDepth, event);
+          }
+
+          break;
+        }
+
+      case 'PageDown':
+        {
+          if (firstRowIndexInPage !== null && lastRowIndexInPage !== null) {
+            goToCell(colIndexBefore, getRowIdFromIndex(Math.min(firstRowIndexInPage + viewportPageSize, lastRowIndexInPage)));
+          }
+
+          break;
+        }
+
+      case 'Home':
+        {
+          goToGroupHeader(firstColIndex, currentDepth, event);
+          break;
+        }
+
+      case 'End':
+        {
+          goToGroupHeader(lastColIndex, currentDepth, event);
+          break;
+        }
+
+      case ' ':
+        {
+          // prevent Space event from scrolling
+          break;
+        }
+
+      default:
+        {
+          shouldPreventDefault = false;
+        }
+    }
+
+    if (shouldPreventDefault) {
+      event.preventDefault();
+    }
+  }, [apiRef, focusedColumnGroup, currentPageRows.length, goToHeader, goToGroupHeader, goToCell, getRowIdFromIndex]);
   const handleCellKeyDown = React.useCallback((params, event) => {
     // Ignore portal
     if (!event.currentTarget.contains(event.target)) {
@@ -330,5 +463,6 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
   }, [apiRef]);
   useGridApiEventHandler(apiRef, 'cellNavigationKeyDown', handleCellNavigationKeyDown);
   useGridApiEventHandler(apiRef, 'columnHeaderKeyDown', handleColumnHeaderKeyDown);
+  useGridApiEventHandler(apiRef, 'columnGroupHeaderKeyDown', handleColumnGroupHeaderKeyDown);
   useGridApiEventHandler(apiRef, 'cellKeyDown', handleCellKeyDown);
 };

package/hooks/features/{selection/gridSelectionSelector.d.ts → rowSelection/gridRowSelectionSelector.d.ts}

@@ -1,6 +1,6 @@
 import { GridStateCommunity } from '../../../models/gridStateCommunity';
 import { GridRowId } from '../../../models/gridRows';
-export declare const gridSelectionStateSelector: (state: GridStateCommunity) => import("../../..").GridSelectionModel;
+export declare const gridRowSelectionStateSelector: (state: GridStateCommunity) => import("../../..").GridRowSelectionModel;
 export declare const selectedGridRowsCountSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, number>;
 export declare const selectedGridRowsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, Map<GridRowId, import("../../../models/gridRows").GridValidRowModel>>;
 export declare const selectedIdsLookupSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, Record<GridRowId, GridRowId>>;

package/hooks/features/rowSelection/gridRowSelectionSelector.js

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

package/hooks/features/rowSelection/index.d.ts

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

package/hooks/features/rowSelection/index.js

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

package/hooks/features/rowSelection/useGridRowSelection.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
+import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
+import { GridStateInitializer } from '../../utils/useGridInitializeState';
+export declare const rowSelectionStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'rowSelectionModel'>>;
+/**
+ * @requires useGridRows (state, method) - can be after
+ * @requires useGridParamsApi (method) - can be after
+ * @requires useGridFocus (state) - can be after
+ * @requires useGridKeyboardNavigation (`cellKeyDown` event must first be consumed by it)
+ */
+export declare const useGridRowSelection: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'checkboxSelection' | 'rowSelectionModel' | 'onRowSelectionModelChange' | 'disableMultipleRowSelection' | 'disableRowSelectionOnClick' | 'isRowSelectable' | 'checkboxSelectionVisibleOnly' | 'pagination' | 'paginationMode' | 'classes' | 'keepNonExistentRowsSelected'>) => void;