@mui/x-data-grid 5.5.1 → 5.7.0

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

@@ -0,0 +1,284 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { GridEvents } from '../../../models/events';
+import { GridFeatureModeConstant } from '../../../models/gridFeatureMode';
+import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
+import { useGridApiMethod } from '../../utils/useGridApiMethod';
+import { useGridLogger } from '../../utils/useGridLogger';
+import { gridFilterableColumnLookupSelector } from '../columns/gridColumnsSelector';
+import { GridPreferencePanelsValue } from '../preferencesPanel/gridPreferencePanelsValue';
+import { getDefaultGridFilterModel } from './gridFilterState';
+import { gridFilterModelSelector, gridVisibleSortedRowEntriesSelector } from './gridFilterSelector';
+import { useFirstRender } from '../../utils/useFirstRender';
+import { gridRowIdsSelector } from '../rows';
+import { useGridRegisterPreProcessor } from '../../core/preProcessing';
+import { GRID_DEFAULT_STRATEGY, useGridRegisterStrategyProcessor } from '../../core/strategyProcessing';
+import { buildAggregatedFilterApplier, sanitizeFilterModel, mergeStateWithFilterModel } from './gridFilterUtils';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var filterStateInitializer = function filterStateInitializer(state, props, apiRef) {
+  var _ref, _props$filterModel, _props$initialState, _props$initialState$f;
+
+  var filterModel = (_ref = (_props$filterModel = props.filterModel) != null ? _props$filterModel : (_props$initialState = props.initialState) == null ? void 0 : (_props$initialState$f = _props$initialState.filter) == null ? void 0 : _props$initialState$f.filterModel) != null ? _ref : getDefaultGridFilterModel();
+  return _extends({}, state, {
+    filter: {
+      filterModel: sanitizeFilterModel(filterModel, props.disableMultipleColumnsFiltering, apiRef),
+      visibleRowsLookup: {},
+      filteredDescendantCountLookup: {}
+    }
+  });
+};
+/**
+ * @requires useGridColumns (method, event)
+ * @requires useGridParamsApi (method)
+ * @requires useGridRows (event)
+ */
+
+export var useGridFilter = function useGridFilter(apiRef, props) {
+  var _props$componentsProp2;
+
+  var logger = useGridLogger(apiRef, 'useGridFilter');
+  apiRef.current.unstable_updateControlState({
+    stateId: 'filter',
+    propModel: props.filterModel,
+    propOnChange: props.onFilterModelChange,
+    stateSelector: gridFilterModelSelector,
+    changeEvent: GridEvents.filterModelChange
+  });
+  /**
+   * API METHODS
+   */
+
+  var applyFilters = React.useCallback(function () {
+    apiRef.current.setState(function (state) {
+      var filterModel = gridFilterModelSelector(state, apiRef.current.instanceId);
+      var isRowMatchingFilters = props.filterMode === GridFeatureModeConstant.client ? buildAggregatedFilterApplier(filterModel, apiRef) : null;
+      var filteringResult = apiRef.current.unstable_applyStrategyProcessor('filtering', {
+        isRowMatchingFilters: isRowMatchingFilters
+      });
+      return _extends({}, state, {
+        filter: _extends({}, state.filter, filteringResult)
+      });
+    });
+    apiRef.current.publishEvent(GridEvents.visibleRowsSet);
+    apiRef.current.forceUpdate();
+  }, [apiRef, props.filterMode]);
+  var upsertFilterItem = React.useCallback(function (item) {
+    var filterModel = gridFilterModelSelector(apiRef);
+
+    var items = _toConsumableArray(filterModel.items);
+
+    var itemIndex = items.findIndex(function (filterItem) {
+      return filterItem.id === item.id;
+    });
+
+    if (itemIndex === -1) {
+      items.push(item);
+    } else {
+      items[itemIndex] = item;
+    }
+
+    apiRef.current.setFilterModel(_extends({}, filterModel, {
+      items: items
+    }));
+  }, [apiRef]);
+  var deleteFilterItem = React.useCallback(function (itemToDelete) {
+    var filterModel = gridFilterModelSelector(apiRef);
+    var items = filterModel.items.filter(function (item) {
+      return item.id !== itemToDelete.id;
+    });
+
+    if (items.length === filterModel.items.length) {
+      return;
+    }
+
+    apiRef.current.setFilterModel(_extends({}, filterModel, {
+      items: items
+    }));
+  }, [apiRef]);
+  var showFilterPanel = React.useCallback(function (targetColumnField) {
+    logger.debug('Displaying filter panel');
+
+    if (targetColumnField) {
+      var filterModel = gridFilterModelSelector(apiRef);
+      var filterItemsWithValue = filterModel.items.filter(function (item) {
+        return item.value !== undefined;
+      });
+      var newFilterItems;
+      var filterItemOnTarget = filterItemsWithValue.find(function (item) {
+        return item.columnField === targetColumnField;
+      });
+
+      if (filterItemOnTarget) {
+        newFilterItems = filterItemsWithValue;
+      } else if (props.disableMultipleColumnsFiltering) {
+        newFilterItems = [{
+          columnField: targetColumnField
+        }];
+      } else {
+        newFilterItems = [].concat(_toConsumableArray(filterItemsWithValue), [{
+          columnField: targetColumnField
+        }]);
+      }
+
+      apiRef.current.setFilterModel(_extends({}, filterModel, {
+        items: newFilterItems
+      }));
+    }
+
+    apiRef.current.showPreferences(GridPreferencePanelsValue.filters);
+  }, [apiRef, logger, props.disableMultipleColumnsFiltering]);
+  var hideFilterPanel = React.useCallback(function () {
+    logger.debug('Hiding filter panel');
+    apiRef.current.hidePreferences();
+  }, [apiRef, logger]);
+  var setFilterLinkOperator = React.useCallback(function (linkOperator) {
+    var filterModel = gridFilterModelSelector(apiRef);
+
+    if (filterModel.linkOperator === linkOperator) {
+      return;
+    }
+
+    apiRef.current.setFilterModel(_extends({}, filterModel, {
+      linkOperator: linkOperator
+    }));
+  }, [apiRef]);
+  var setFilterModel = React.useCallback(function (model) {
+    var currentModel = gridFilterModelSelector(apiRef);
+
+    if (currentModel !== model) {
+      logger.debug('Setting filter model');
+      apiRef.current.setState(mergeStateWithFilterModel(model, props.disableMultipleColumnsFiltering, apiRef));
+      apiRef.current.unstable_applyFilters();
+    }
+  }, [apiRef, logger, props.disableMultipleColumnsFiltering]);
+  var getVisibleRowModels = React.useCallback(function () {
+    var visibleSortedRows = gridVisibleSortedRowEntriesSelector(apiRef);
+    return new Map(visibleSortedRows.map(function (row) {
+      return [row.id, row.model];
+    }));
+  }, [apiRef]);
+  var filterApi = {
+    setFilterLinkOperator: setFilterLinkOperator,
+    unstable_applyFilters: applyFilters,
+    deleteFilterItem: deleteFilterItem,
+    upsertFilterItem: upsertFilterItem,
+    setFilterModel: setFilterModel,
+    showFilterPanel: showFilterPanel,
+    hideFilterPanel: hideFilterPanel,
+    getVisibleRowModels: getVisibleRowModels
+  };
+  useGridApiMethod(apiRef, filterApi, 'GridFilterApi');
+  /**
+   * PRE-PROCESSING
+   */
+
+  var stateExportPreProcessing = React.useCallback(function (prevState) {
+    var filterModelToExport = gridFilterModelSelector(apiRef);
+
+    if (filterModelToExport.items.length === 0 && filterModelToExport.linkOperator === getDefaultGridFilterModel().linkOperator) {
+      return prevState;
+    }
+
+    return _extends({}, prevState, {
+      filter: {
+        filterModel: filterModelToExport
+      }
+    });
+  }, [apiRef]);
+  var stateRestorePreProcessing = React.useCallback(function (params, context) {
+    var _context$stateToResto;
+
+    var filterModel = (_context$stateToResto = context.stateToRestore.filter) == null ? void 0 : _context$stateToResto.filterModel;
+
+    if (filterModel == null) {
+      return params;
+    }
+
+    apiRef.current.setState(mergeStateWithFilterModel(filterModel, props.disableMultipleColumnsFiltering, apiRef));
+    return _extends({}, params, {
+      callbacks: [].concat(_toConsumableArray(params.callbacks), [apiRef.current.unstable_applyFilters])
+    });
+  }, [apiRef, props.disableMultipleColumnsFiltering]);
+  var preferencePanelPreProcessing = React.useCallback(function (initialValue, value) {
+    if (value === GridPreferencePanelsValue.filters) {
+      var _props$componentsProp;
+
+      var FilterPanel = props.components.FilterPanel;
+      return /*#__PURE__*/_jsx(FilterPanel, _extends({}, (_props$componentsProp = props.componentsProps) == null ? void 0 : _props$componentsProp.filterPanel));
+    }
+
+    return initialValue;
+  }, [props.components.FilterPanel, (_props$componentsProp2 = props.componentsProps) == null ? void 0 : _props$componentsProp2.filterPanel]);
+  var flatFilteringMethod = React.useCallback(function (params) {
+    if (props.filterMode === GridFeatureModeConstant.client && params.isRowMatchingFilters) {
+      var rowIds = gridRowIdsSelector(apiRef);
+      var filteredRowsLookup = {};
+
+      for (var i = 0; i < rowIds.length; i += 1) {
+        var rowId = rowIds[i];
+        filteredRowsLookup[rowId] = params.isRowMatchingFilters(rowId);
+      }
+
+      return {
+        filteredRowsLookup: filteredRowsLookup,
+        // For flat tree, the `visibleRowsLookup` and the `filteredRowsLookup` since no row is collapsed.
+        visibleRowsLookup: filteredRowsLookup,
+        filteredDescendantCountLookup: {}
+      };
+    }
+
+    return {
+      visibleRowsLookup: {},
+      filteredRowsLookup: {},
+      filteredDescendantCountLookup: {}
+    };
+  }, [apiRef, props.filterMode]);
+  useGridRegisterPreProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPreProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+  useGridRegisterPreProcessor(apiRef, 'preferencePanel', preferencePanelPreProcessing);
+  useGridRegisterStrategyProcessor(apiRef, GRID_DEFAULT_STRATEGY, 'filtering', flatFilteringMethod);
+  /**
+   * EVENTS
+   */
+
+  var handleColumnsChange = React.useCallback(function () {
+    logger.debug('onColUpdated - GridColumns changed, applying filters');
+    var filterModel = gridFilterModelSelector(apiRef);
+    var filterableColumnsLookup = gridFilterableColumnLookupSelector(apiRef);
+    var newFilterItems = filterModel.items.filter(function (item) {
+      return item.columnField && filterableColumnsLookup[item.columnField];
+    });
+
+    if (newFilterItems.length < filterModel.items.length) {
+      apiRef.current.setFilterModel(_extends({}, filterModel, {
+        items: newFilterItems
+      }));
+    }
+  }, [apiRef, logger]);
+  var handleStrategyProcessorChange = React.useCallback(function (methodName) {
+    if (methodName === 'filtering') {
+      apiRef.current.unstable_applyFilters();
+    }
+  }, [apiRef]);
+  useGridApiEventHandler(apiRef, GridEvents.rowsSet, apiRef.current.unstable_applyFilters);
+  useGridApiEventHandler(apiRef, GridEvents.rowExpansionChange, apiRef.current.unstable_applyFilters);
+  useGridApiEventHandler(apiRef, GridEvents.columnsChange, handleColumnsChange);
+  useGridApiEventHandler(apiRef, GridEvents.activeStrategyProcessorChange, handleStrategyProcessorChange);
+  /**
+   * 1ST RENDER
+   */
+
+  useFirstRender(function () {
+    apiRef.current.unstable_applyFilters();
+  });
+  /**
+   * EFFECTS
+   */
+
+  React.useEffect(function () {
+    if (props.filterModel !== undefined) {
+      apiRef.current.setFilterModel(props.filterModel);
+    }
+  }, [apiRef, logger, props.filterModel]);
+};

package/legacy/hooks/features/focus/gridFocusState.js

@@ -0,0 +1 @@
+export {};

package/legacy/hooks/features/focus/gridFocusStateSelector.js

@@ -0,0 +1,19 @@
+import { createSelector } from '../../../utils/createSelector';
+export var gridFocusStateSelector = function gridFocusStateSelector(state) {
+  return state.focus;
+};
+export var gridFocusCellSelector = createSelector(gridFocusStateSelector, function (focusState) {
+  return focusState.cell;
+});
+export var gridFocusColumnHeaderSelector = createSelector(gridFocusStateSelector, function (focusState) {
+  return focusState.columnHeader;
+});
+export var gridTabIndexStateSelector = function gridTabIndexStateSelector(state) {
+  return state.tabIndex;
+};
+export var gridTabIndexCellSelector = createSelector(gridTabIndexStateSelector, function (state) {
+  return state.cell;
+});
+export var gridTabIndexColumnHeaderSelector = createSelector(gridTabIndexStateSelector, function (state) {
+  return state.columnHeader;
+});

package/legacy/hooks/features/focus/index.js

@@ -0,0 +1,2 @@
+export * from './gridFocusStateSelector';
+export * from './gridFocusState';

package/legacy/hooks/features/focus/useGridFocus.js

@@ -0,0 +1,256 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { ownerDocument } from '@mui/material/utils';
+import { GridEvents } from '../../../models/events';
+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 { gridVisibleColumnDefinitionsSelector } from '../columns/gridColumnsSelector';
+import { getVisibleRows } from '../../utils/useGridVisibleRows';
+import { clamp } from '../../../utils/utils';
+export var focusStateInitializer = function focusStateInitializer(state) {
+  return _extends({}, state, {
+    focus: {
+      cell: null,
+      columnHeader: null
+    },
+    tabIndex: {
+      cell: null,
+      columnHeader: null
+    }
+  });
+};
+/**
+ * @requires useGridParamsApi (method)
+ * @requires useGridRows (method)
+ * @requires useGridEditing (event)
+ */
+
+export var useGridFocus = function useGridFocus(apiRef, props) {
+  var logger = useGridLogger(apiRef, 'useGridFocus');
+  var lastClickedCell = React.useRef(null);
+  var setCellFocus = React.useCallback(function (id, field) {
+    // The row might have been deleted
+    if (!apiRef.current.getRow(id)) {
+      return;
+    }
+
+    var focusedCell = gridFocusCellSelector(apiRef);
+
+    if ((focusedCell == null ? void 0 : focusedCell.id) === id && focusedCell.field === field) {
+      return;
+    }
+
+    apiRef.current.setState(function (state) {
+      logger.debug("Focusing on cell with id=".concat(id, " and field=").concat(field));
+      return _extends({}, state, {
+        tabIndex: {
+          cell: {
+            id: id,
+            field: field
+          },
+          columnHeader: null
+        },
+        focus: {
+          cell: {
+            id: id,
+            field: field
+          },
+          columnHeader: null
+        }
+      });
+    });
+    apiRef.current.forceUpdate();
+    apiRef.current.publishEvent(GridEvents.cellFocusIn, apiRef.current.getCellParams(id, field));
+  }, [apiRef, logger]);
+  var setColumnHeaderFocus = React.useCallback(function (field) {
+    var event = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var cell = gridFocusCellSelector(apiRef);
+
+    if (cell) {
+      apiRef.current.publishEvent(GridEvents.cellFocusOut, apiRef.current.getCellParams(cell.id, cell.field), event);
+    }
+
+    apiRef.current.setState(function (state) {
+      logger.debug("Focusing on column header with colIndex=".concat(field));
+      return _extends({}, state, {
+        tabIndex: {
+          columnHeader: {
+            field: field
+          },
+          cell: null
+        },
+        focus: {
+          columnHeader: {
+            field: field
+          },
+          cell: null
+        }
+      });
+    });
+    apiRef.current.forceUpdate();
+  }, [apiRef, logger]);
+  var moveFocusToRelativeCell = React.useCallback(function (id, field, direction) {
+    var columnIndexToFocus = apiRef.current.getColumnIndex(field);
+    var rowIndexToFocus = apiRef.current.getRowIndexRelativeToVisibleRows(id);
+    var visibleColumns = gridVisibleColumnDefinitionsSelector(apiRef);
+
+    if (direction === 'right') {
+      columnIndexToFocus += 1;
+    } else if (direction === 'left') {
+      columnIndexToFocus -= 1;
+    } else {
+      rowIndexToFocus += 1;
+    }
+
+    if (columnIndexToFocus >= visibleColumns.length) {
+      // Go to next row if we are at the last column
+      rowIndexToFocus += 1;
+      columnIndexToFocus = 0;
+    } else if (columnIndexToFocus < 0) {
+      // Go to previous row if we are at the first column
+      rowIndexToFocus -= 1;
+      columnIndexToFocus = visibleColumns.length - 1;
+    }
+
+    var currentPage = getVisibleRows(apiRef, {
+      pagination: props.pagination,
+      paginationMode: props.paginationMode
+    });
+    rowIndexToFocus = clamp(rowIndexToFocus, currentPage.range.firstRowIndex, currentPage.range.lastRowIndex);
+    var rowToFocus = currentPage.rows[rowIndexToFocus];
+    var columnToFocus = visibleColumns[columnIndexToFocus];
+    apiRef.current.setCellFocus(rowToFocus.id, columnToFocus.field);
+  }, [apiRef, props.pagination, props.paginationMode]);
+  var handleCellDoubleClick = React.useCallback(function (_ref) {
+    var id = _ref.id,
+        field = _ref.field;
+    apiRef.current.setCellFocus(id, field);
+  }, [apiRef]);
+  var handleCellKeyDown = React.useCallback(function (params, event) {
+    // GRID_CELL_NAVIGATION_KEY_DOWN handles the focus on Enter, Tab and navigation keys
+    if (event.key === 'Enter' || event.key === 'Tab' || isNavigationKey(event.key)) {
+      return;
+    }
+
+    apiRef.current.setCellFocus(params.id, params.field);
+  }, [apiRef]);
+  var handleColumnHeaderFocus = React.useCallback(function (_ref2, event) {
+    var field = _ref2.field;
+
+    if (event.target !== event.currentTarget) {
+      return;
+    }
+
+    apiRef.current.setColumnHeaderFocus(field, event);
+  }, [apiRef]);
+  var handleBlur = React.useCallback(function () {
+    logger.debug("Clearing focus");
+    apiRef.current.setState(function (state) {
+      return _extends({}, state, {
+        focus: {
+          cell: null,
+          columnHeader: null
+        }
+      });
+    });
+  }, [logger, apiRef]);
+  var handleCellMouseUp = React.useCallback(function (params) {
+    lastClickedCell.current = params;
+  }, []);
+  var handleDocumentClick = React.useCallback(function (event) {
+    var cellParams = lastClickedCell.current;
+    lastClickedCell.current = null;
+    var focusedCell = gridFocusCellSelector(apiRef);
+
+    if (!focusedCell) {
+      if (cellParams) {
+        apiRef.current.setCellFocus(cellParams.id, cellParams.field);
+      }
+
+      return;
+    }
+
+    if ((cellParams == null ? void 0 : cellParams.id) === focusedCell.id && (cellParams == null ? void 0 : cellParams.field) === focusedCell.field) {
+      return;
+    }
+
+    var cellElement = apiRef.current.getCellElement(focusedCell.id, focusedCell.field);
+
+    if (cellElement != null && cellElement.contains(event.target)) {
+      return;
+    } // The row might have been deleted during the click
+
+
+    if (!apiRef.current.getRow(focusedCell.id)) {
+      return;
+    } // There's a focused cell but another cell was clicked
+    // Publishes an event to notify that the focus was lost
+
+
+    apiRef.current.publishEvent(GridEvents.cellFocusOut, apiRef.current.getCellParams(focusedCell.id, focusedCell.field), event);
+
+    if (cellParams) {
+      apiRef.current.setCellFocus(cellParams.id, cellParams.field);
+    } else {
+      apiRef.current.setState(function (state) {
+        return _extends({}, state, {
+          focus: {
+            cell: null,
+            columnHeader: null
+          }
+        });
+      });
+      apiRef.current.forceUpdate();
+    }
+  }, [apiRef]);
+  var handleCellModeChange = React.useCallback(function (params) {
+    if (params.cellMode === 'view') {
+      return;
+    }
+
+    var cell = gridFocusCellSelector(apiRef);
+
+    if ((cell == null ? void 0 : cell.id) !== params.id || (cell == null ? void 0 : cell.field) !== params.field) {
+      apiRef.current.setCellFocus(params.id, params.field);
+    }
+  }, [apiRef]);
+  useGridApiMethod(apiRef, {
+    setCellFocus: setCellFocus,
+    setColumnHeaderFocus: setColumnHeaderFocus,
+    unstable_moveFocusToRelativeCell: moveFocusToRelativeCell
+  }, 'GridFocusApi');
+  React.useEffect(function () {
+    var cell = gridFocusCellSelector(apiRef);
+
+    if (cell) {
+      var updatedRow = apiRef.current.getRow(cell.id);
+
+      if (!updatedRow) {
+        apiRef.current.setState(function (state) {
+          return _extends({}, state, {
+            focus: {
+              cell: null,
+              columnHeader: null
+            }
+          });
+        });
+      }
+    }
+  }, [apiRef, props.rows]);
+  React.useEffect(function () {
+    var doc = ownerDocument(apiRef.current.rootElementRef.current);
+    doc.addEventListener('click', handleDocumentClick);
+    return function () {
+      doc.removeEventListener('click', handleDocumentClick);
+    };
+  }, [apiRef, handleDocumentClick]);
+  useGridApiEventHandler(apiRef, GridEvents.columnHeaderBlur, handleBlur);
+  useGridApiEventHandler(apiRef, GridEvents.cellDoubleClick, handleCellDoubleClick);
+  useGridApiEventHandler(apiRef, GridEvents.cellMouseUp, handleCellMouseUp);
+  useGridApiEventHandler(apiRef, GridEvents.cellKeyDown, handleCellKeyDown);
+  useGridApiEventHandler(apiRef, GridEvents.cellModeChange, handleCellModeChange);
+  useGridApiEventHandler(apiRef, GridEvents.columnHeaderFocus, handleColumnHeaderFocus);
+};

package/legacy/hooks/features/index.js

@@ -0,0 +1,14 @@
+// Only export the variable and types that should be publicly exposed and re-exported from `@mui/x-data-grid-pro`
+export * from './columnMenu';
+export * from './columns';
+export * from './density';
+export * from './editRows';
+export * from './filter';
+export * from './focus';
+export * from './pagination';
+export * from './preferencesPanel';
+export * from './rows';
+export * from './selection';
+export * from './sorting';
+export * from './dimensions';
+export * from './statePersistence';

package/legacy/hooks/features/keyboard/useGridKeyboard.js

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { gridClasses } from '../../../constants/gridClasses';
+import { GridEvents } from '../../../models/events';
+import { findParentElementFromClassName } from '../../../utils/domUtils';
+import { isNavigationKey } from '../../../utils/keyboardUtils';
+import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
+import { GridCellModes } from '../../../models/gridEditRowModel';
+import { gridVisibleSortedRowIdsSelector } from '../filter/gridFilterSelector';
+import { gridFocusCellSelector } from '../focus/gridFocusStateSelector';
+/**
+ * @requires useGridSelection (method)
+ * @requires useGridRows (method)
+ * @requires useGridFocus (state)
+ * @requires useGridParamsApi (method)
+ * @requires useGridColumnMenu (method)
+ */
+
+export var useGridKeyboard = function useGridKeyboard(apiRef) {
+  var expandSelection = React.useCallback(function (params, event) {
+    apiRef.current.publishEvent(GridEvents.cellNavigationKeyDown, params, event);
+    var focusCell = gridFocusCellSelector(apiRef);
+
+    if (!focusCell) {
+      return;
+    }
+
+    var rowEl = findParentElementFromClassName(event.target, gridClasses.row);
+    var startRowIndex = Number(rowEl.getAttribute('data-rowindex'));
+    var startId = gridVisibleSortedRowIdsSelector(apiRef)[startRowIndex];
+
+    if (startId === focusCell.id) {
+      return;
+    }
+
+    apiRef.current.selectRowRange({
+      startId: startId,
+      endId: focusCell.id
+    }, !apiRef.current.isRowSelected(focusCell.id));
+  }, [apiRef]);
+  var handleCellKeyDown = React.useCallback(function (params, event) {
+    // Ignore portal
+    if (!event.currentTarget.contains(event.target)) {
+      return;
+    } // Get the most recent params because the cell mode may have changed by another listener
+
+
+    var cellParams = apiRef.current.getCellParams(params.id, params.field);
+    var isEditMode = cellParams.cellMode === GridCellModes.Edit;
+
+    if (isEditMode) {
+      return;
+    }
+
+    if (event.key === ' ' && event.shiftKey) {
+      // This is a select event, so it's handled by the selection hook
+      return;
+    }
+
+    if (isNavigationKey(event.key) && !event.shiftKey) {
+      apiRef.current.publishEvent(GridEvents.cellNavigationKeyDown, cellParams, event);
+      return;
+    }
+
+    if (isNavigationKey(event.key) && event.shiftKey) {
+      event.preventDefault();
+      expandSelection(cellParams, event);
+    }
+  }, [apiRef, expandSelection]);
+  useGridApiEventHandler(apiRef, GridEvents.cellKeyDown, handleCellKeyDown);
+};