@mui/x-data-grid-premium 6.0.0-alpha.11 → 6.0.0-alpha.12

package/CHANGELOG.md

@@ -3,6 +3,80 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.0.0-alpha.12
+
+_Dec 16, 2022_
+
+We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 The `apiRef` prop is now available in the `@mui/x-data-grid` package:
+
+  ```tsx
+  const apiRef = useGridApiRef();
+
+  return (
+    <DataGrid apiRef={apiRef} {...other} />
+  )
+  ```
+
+  See [the documentation](https://next.mui.com/x/react-data-grid/api-object/) for more information.
+
+- 🎁 The `DataGridPremium` now supports cell selection:
+
+  ```tsx
+  <DataGridPremium unstable_cellSelection />
+  ```
+
+  See [the documentation](https://next.mui.com/x/react-data-grid/selection/#cell-selection) for more information
+
+- 🌍 Support the Right To Left orientation on the fields components
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v6.0.0-alpha.12` / `@mui/x-data-grid-pro@v6.0.0-alpha.12` / `@mui/x-data-grid-premium@v6.0.0-alpha.12`
+
+#### Breaking changes
+
+- The `showCellRightBorder` was renamed to `showCellVerticalBorder`
+- The `showColumnRightBorder` was renamed to `showColumnVerticalBorder`
+- The `.MuiDataGrid-withBorder` CSS class was renamed to `.MuiDataGrid-withBorderColor` and it only sets `border-color` CSS property now.
+- The following undocumented properties from `apiRef` were removed: `footerRef`, `headerRef`, `columnHeadersElementRef`, `columnHeadersContainerElementRef`
+- The `GridHeaderPlaceholder` component was removed.
+- The `MAX_PAGE_SIZE` constant was removed.
+- The `useGridScrollFn` hook was removed.
+
+#### Changes
+
+- [DataGrid] Display sort column menu items as per `sortingOrder` prop (#7180) @MBilalShafi
+- [DataGrid] Support `apiRef` in Community package (#6773) @cherniavskii
+- [DataGridPremium] Add support for cell selection (#6567) @m4theushw
+- [DataGridPremium] Use separate cache for aggregation columns pre-processor (#7142) @m4theushw
+- [DataGridPro] Fix missing border in right-pinned columns (#4197) @cherniavskii
+- [DataGridPro] Fix wrong border color on skeleton cells (#7202) @cherniavskii
+
+### `@mui/x-date-pickers@v6.0.0-alpha.12` / `@mui/x-date-pickers-pro@v6.0.0-alpha.12`
+
+#### Changes
+
+- [fields] Fix bug introduced by RTL in single input range fields (#7189) @alexfauquette
+- [fields] Support RTL out of the box (#6715) @alexfauquette
+- [pickers] Clean `autoFocus` behavior on fields and new pickers (#7153) @flaviendelangle
+- [pickers] Fix label on the new range pickers (#7210) @flaviendelangle
+- [pickers] Fix wrong component name on `StaticNextDateTime` (#7187) @flaviendelangle
+
+### Docs
+
+- [docs] Add docs section about field placeholders' localization (#7139) @flaviendelangle
+- [docs] Create a `DemoGrid` component to unify demos with several components (#7057) @flaviendelangle
+- [docs] Document aggregation selectors (#7148) @cherniavskii
+- [docs] Fix 301 links to demo pages in API pages (#7197) @oliviertassinari
+- [docs] Fix errors and warning in demos (#7209) @LukasTy
+- [docs] Use `DemoContainer` and `DemoItem` on every picker demo (#7149) @flaviendelangle
+
+### Core
+
+- [core] Fix broken test (#7179) @flaviendelangle
+
 ## 6.0.0-alpha.11
 
 _Dec 8, 2022_
@@ -1301,6 +1375,60 @@ You can find more information about the new api, including how to set those tran
 - [test] Skip tests for column pinning and dynamic row height (#5997) @m4theushw
 - [website] Improve security header @oliviertassinari
 
+## 5.17.16
+
+_Dec 16, 2022_
+
+We'd like to offer a big thanks to the 4 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.16` / `@mui/x-data-grid-pro@v5.17.16` / `@mui/x-data-grid-premium@v5.17.16`
+
+#### Changes
+
+- [DataGrid] Display sort column menu items as per `sortingOrder` prop (#7125) @hanbin9775
+- [DataGrid] Fix flickering on mount (#7155) @cherniavskii
+- [DataGridPremium] Use separate cache for aggregation columns pre-processor (#7174) @m4theushw
+
+### `@mui/x-date-pickers@v5.0.11` / `@mui/x-date-pickers-pro@v5.0.11`
+
+#### Changes
+
+- [DateTimePicker] Update export pattern (#7172) @kealjones-wk
+
+### Docs
+
+- [docs] Document aggregation selectors (#7151) @cherniavskii
+
+## 5.17.15
+
+_Dec 8, 2022_
+
+We'd like to offer a big thanks to the 4 contributors who made this release possible. Here are some highlights ✨:
+
+- ✨ Fix lazy-loading not working in `DataGridPremium` (#7130) @m4theushw
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.15` / `@mui/x-data-grid-pro@v5.17.15` / `@mui/x-data-grid-premium@v5.17.15`
+
+#### Changes
+
+- [DataGridPremium] Add support for lazy-loading (#7130) @m4theushw
+- [DataGridPremium] Pass `groupId` to the aggregation function (#7143) @m4theushw
+
+### `@mui/x-date-pickers@v5.0.10` / `@mui/x-date-pickers-pro@v5.0.10`
+
+#### Changes
+
+- [pickers] Initialize date without time when selecting year or month (#7136) @LukasTy
+
+### Docs
+
+- [docs] Fix the nested import on the api pages (#7134) @flaviendelangle
+- [docs] Keep track of the localization completion (#7099) @alexfauquette
+- [docs] Update localization doc to use existing locale (#7104) @LukasTy
+
 ## 5.17.14
 
 _Dec 1, 2022_

package/DataGridPremium/DataGridPremium.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useLicenseVerifier, Watermark } from '@mui/x-license-pro';
 import { chainPropTypes } from '@mui/utils';
-import { GridBody, GridErrorHandler, GridFooterPlaceholder, GridHeaderPlaceholder, GridRoot, GridContextProvider } from '@mui/x-data-grid-pro';
+import { GridBody, GridErrorHandler, GridFooterPlaceholder, GridHeader, GridRoot, GridContextProvider } from '@mui/x-data-grid-pro';
 import { DataGridProVirtualScroller, DataGridProColumnHeaders } from '@mui/x-data-grid-pro/internals';
 import { useDataGridPremiumComponent } from './useDataGridPremiumComponent';
 import { useDataGridPremiumProps } from './useDataGridPremiumProps';
@@ -23,7 +23,7 @@ const DataGridPremiumRaw = /*#__PURE__*/React.forwardRef(function DataGridPremiu
       sx: props.sx,
       ref: ref,
       children: /*#__PURE__*/_jsxs(GridErrorHandler, {
-        children: [/*#__PURE__*/_jsx(GridHeaderPlaceholder, {}), /*#__PURE__*/_jsx(GridBody, {
+        children: [/*#__PURE__*/_jsx(GridHeader, {}), /*#__PURE__*/_jsx(GridBody, {
           ColumnHeadersComponent: DataGridProColumnHeaders,
           VirtualScrollerComponent: DataGridProVirtualScroller,
           children: /*#__PURE__*/_jsx(Watermark, {
@@ -58,7 +58,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    */
   aggregationRowsScope: PropTypes.oneOf(['all', 'filtered']),
   /**
-   * The ref object that allows grid manipulation. Can be instantiated with [[useGridApiRef()]].
+   * The ref object that allows grid manipulation. Can be instantiated with `useGridApiRef()`.
    */
   apiRef: PropTypes.shape({
     current: PropTypes.object.isRequired
@@ -865,15 +865,15 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    */
   scrollEndThreshold: PropTypes.number,
   /**
-   * If `true`, the right border of the cells are displayed.
+   * If `true`, the vertical borders of the cells are displayed.
    * @default false
    */
-  showCellRightBorder: PropTypes.bool,
+  showCellVerticalBorder: PropTypes.bool,
   /**
    * If `true`, the right border of the column headers are displayed.
    * @default false
    */
-  showColumnRightBorder: PropTypes.bool,
+  showColumnVerticalBorder: PropTypes.bool,
   /**
    * Sorting can be processed on the server or client-side.
    * Set it to 'client' if you would like to handle sorting on the client-side.
@@ -907,5 +907,20 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * If `true`, the rows will be gathered in a tree structure according to the `getTreeDataPath` prop.
    * @default false
    */
-  treeData: PropTypes.bool
+  treeData: PropTypes.bool,
+  /**
+   * If `true`, the cell selection mode is enabled.
+   * @default false
+   */
+  unstable_cellSelection: PropTypes.bool,
+  /**
+   * Set the cell selection model of the grid.
+   */
+  unstable_cellSelectionModel: PropTypes.object,
+  /**
+   * Callback fired when the selection state of one or multiple cells changes.
+   * @param {GridCellSelectionModel} cellSelectionModel Object in the shape of [[GridCellSelectionModel]] containg the selected cells.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  unstable_onCellSelectionModelChange: PropTypes.func
 } : void 0;

package/DataGridPremium/useDataGridPremiumComponent.js

@@ -5,6 +5,7 @@ import { useGridAggregationPreProcessors } from '../hooks/features/aggregation/u
 import { useGridRowGrouping, rowGroupingStateInitializer } from '../hooks/features/rowGrouping/useGridRowGrouping';
 import { useGridRowGroupingPreProcessors } from '../hooks/features/rowGrouping/useGridRowGroupingPreProcessors';
 import { useGridExcelExport } from '../hooks/features/export/useGridExcelExport';
+import { cellSelectionStateInitializer, useGridCellSelection } from '../hooks/features/cellSelection/useGridCellSelection';
 export const useDataGridPremiumComponent = (inputApiRef, props) => {
   const privateApiRef = useGridInitialization(inputApiRef, props);
 
@@ -30,6 +31,7 @@ export const useDataGridPremiumComponent = (inputApiRef, props) => {
   useGridInitializeState(rowGroupingStateInitializer, privateApiRef, props);
   useGridInitializeState(aggregationStateInitializer, privateApiRef, props);
   useGridInitializeState(rowSelectionStateInitializer, privateApiRef, props);
+  useGridInitializeState(cellSelectionStateInitializer, privateApiRef, props);
   useGridInitializeState(detailPanelStateInitializer, privateApiRef, props);
   useGridInitializeState(columnPinningStateInitializer, privateApiRef, props);
   useGridInitializeState(columnsStateInitializer, privateApiRef, props);
@@ -52,6 +54,7 @@ export const useDataGridPremiumComponent = (inputApiRef, props) => {
   useGridAggregation(privateApiRef, props);
   useGridKeyboardNavigation(privateApiRef, props);
   useGridRowSelection(privateApiRef, props);
+  useGridCellSelection(privateApiRef, props);
   useGridColumnPinning(privateApiRef, props);
   useGridRowPinning(privateApiRef, props);
   useGridColumns(privateApiRef, props);

package/DataGridPremium/useDataGridPremiumProps.js

@@ -8,6 +8,7 @@ import { GRID_AGGREGATION_FUNCTIONS } from '../hooks/features/aggregation';
  * The default values of `DataGridPremiumPropsWithDefaultValue` to inject in the props of DataGridPremium.
  */
 export const DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES = _extends({}, DATA_GRID_PRO_PROPS_DEFAULT_VALUES, {
+  unstable_cellSelection: false,
   disableAggregation: false,
   disableRowGrouping: false,
   rowGroupingColumnMode: 'single',

package/hooks/features/aggregation/gridAggregationSelectors.d.ts

@@ -1,4 +1,13 @@
 import { GridStatePremium } from '../../../models/gridStatePremium';
 export declare const gridAggregationStateSelector: (state: GridStatePremium) => import("./gridAggregationInterfaces").GridAggregationState;
+/**
+ * Get the aggregation model, containing the aggregation function of each column.
+ * If a column is not in the model, it is not aggregated.
+ * @category Aggregation
+ */
 export declare const gridAggregationModelSelector: import("@mui/x-data-grid").OutputSelector<GridStatePremium, import("./gridAggregationInterfaces").GridAggregationModel>;
+/**
+ * Get the aggregation results as a lookup.
+ * @category Aggregation
+ */
 export declare const gridAggregationLookupSelector: import("@mui/x-data-grid").OutputSelector<GridStatePremium, import("./gridAggregationInterfaces").GridAggregationLookup>;

package/hooks/features/aggregation/gridAggregationSelectors.js

@@ -1,4 +1,15 @@
 import { createSelector } from '@mui/x-data-grid-pro/internals';
 export const gridAggregationStateSelector = state => state.aggregation;
+
+/**
+ * Get the aggregation model, containing the aggregation function of each column.
+ * If a column is not in the model, it is not aggregated.
+ * @category Aggregation
+ */
 export const gridAggregationModelSelector = createSelector(gridAggregationStateSelector, aggregationState => aggregationState.model);
+
+/**
+ * Get the aggregation results as a lookup.
+ * @category Aggregation
+ */
 export const gridAggregationLookupSelector = createSelector(gridAggregationStateSelector, aggregationState => aggregationState.lookup);

package/hooks/features/aggregation/useGridAggregationPreProcessors.js

@@ -14,10 +14,10 @@ function Divider() {
   });
 }
 export const useGridAggregationPreProcessors = (apiRef, props) => {
+  // apiRef.current.caches.aggregation.rulesOnLastColumnHydration is not used because by the time
+  // that the pre-processor is called it will already have been updated with the current rules.
+  const rulesOnLastColumnHydration = React.useRef({});
   const updateAggregatedColumns = React.useCallback(columnsState => {
-    const {
-      rulesOnLastColumnHydration
-    } = apiRef.current.caches.aggregation;
     const aggregationRules = props.disableAggregation ? {} : getAggregationRules({
       columnsLookup: columnsState.lookup,
       aggregationModel: gridAggregationModelSelector(apiRef),
@@ -25,7 +25,7 @@ export const useGridAggregationPreProcessors = (apiRef, props) => {
     });
     columnsState.orderedFields.forEach(field => {
       const shouldHaveAggregationValue = !!aggregationRules[field];
-      const haveAggregationColumnValue = !!rulesOnLastColumnHydration[field];
+      const haveAggregationColumnValue = !!rulesOnLastColumnHydration.current[field];
       let column = columnsState.lookup[field];
       if (haveAggregationColumnValue) {
         column = unwrapColumnFromAggregation({
@@ -41,6 +41,7 @@ export const useGridAggregationPreProcessors = (apiRef, props) => {
       }
       columnsState.lookup[field] = column;
     });
+    rulesOnLastColumnHydration.current = aggregationRules;
     return columnsState;
   }, [apiRef, props.aggregationFunctions, props.disableAggregation]);
   const addGroupFooterRows = React.useCallback(value => {

package/hooks/features/cellSelection/gridCellSelectionInterfaces.d.ts

@@ -0,0 +1,40 @@
+import { GridCellCoordinates, GridColDef, GridRowId } from '@mui/x-data-grid-pro';
+export type GridCellSelectionModel = Record<GridRowId, Record<GridColDef['field'], boolean>>;
+/**
+ * The cell selection API interface that is available in the grid [[apiRef]].
+ */
+export interface GridCellSelectionApi {
+    /**
+     * Determines if a cell is selected or not.
+     * @param {GridRowId} id The id of the row.
+     * @param {GridColDef['field']} field The field.
+     * @returns {boolean} A boolean indicating if the cell is selected.
+     */
+    unstable_isCellSelected: (id: GridRowId, field: GridColDef['field']) => boolean;
+    /**
+     * Returns an object containing the selection state of the cells.
+     * The keys of the object correpond to the row IDs.
+     * The value of each key is another object whose keys are the fields and values are the selection state.
+     * @returns {GridCellSelectionModel} Object containing the selection state of the cells
+     */
+    unstable_getCellSelectionModel: () => GridCellSelectionModel;
+    /**
+     * Updates the selected cells to be those passed to the `newModel` argument.
+     * Any cell already selected will be unselected.
+     * @param {GridCellSelectionModel} newModel The cells to select.
+     */
+    unstable_setCellSelectionModel: (newModel: GridCellSelectionModel) => void;
+    /**
+     * Selects all cells that are inside the range given by `start` and `end` coordinates.
+     * @param {GridCellCoordinates} start Object containg the row ID and field of the first cell to select.
+     * @param {GridCellCoordinates} end Object containg the row ID and field of the last cell to select.
+     * @param {boolean} keepOtherSelected Whether to keep current selected cells or discard. Default is false.
+     */
+    unstable_selectCellRange: (start: GridCellCoordinates, end: GridCellCoordinates, keepOtherSelected?: boolean) => void;
+    /**
+     * Returns an array containg only the selected cells.
+     * Each item is an object with the ID and field of the cell.
+     * @returns {GridCellCoordinates[]} Array with the selected cells.
+     */
+    unstable_getSelectedCellsAsArray: () => GridCellCoordinates[];
+}

package/hooks/features/cellSelection/gridCellSelectionInterfaces.js

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

package/hooks/features/cellSelection/gridCellSelectionSelector.d.ts

@@ -0,0 +1,2 @@
+import { GridStatePremium } from '../../../models/gridStatePremium';
+export declare const gridCellSelectionStateSelector: (state: GridStatePremium) => import("./gridCellSelectionInterfaces").GridCellSelectionModel;

package/hooks/features/cellSelection/gridCellSelectionSelector.js

@@ -0,0 +1 @@
+export const gridCellSelectionStateSelector = state => state.cellSelection;

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

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

package/hooks/features/cellSelection/index.js

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

package/hooks/features/cellSelection/useGridCellSelection.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { GridStateInitializer } from '@mui/x-data-grid-pro/internals';
+import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
+import { GridPrivateApiPremium } from '../../../models/gridApiPremium';
+export declare const cellSelectionStateInitializer: GridStateInitializer<Pick<DataGridPremiumProcessedProps, 'unstable_cellSelectionModel' | 'initialState'>>;
+export declare const useGridCellSelection: (apiRef: React.MutableRefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, 'unstable_cellSelection' | 'unstable_cellSelectionModel' | 'unstable_onCellSelectionModelChange' | 'pagination' | 'paginationMode'>) => void;

package/hooks/features/cellSelection/useGridCellSelection.js

@@ -0,0 +1,295 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useEventCallback } from '@mui/material/utils';
+import { isNavigationKey, useGridRegisterPipeProcessor, useGridVisibleRows } from '@mui/x-data-grid-pro/internals';
+import { useGridApiEventHandler, useGridApiMethod, GRID_ACTIONS_COLUMN_TYPE, GRID_CHECKBOX_SELECTION_COL_DEF, GRID_DETAIL_PANEL_TOGGLE_FIELD, gridRowsDataRowIdToIdLookupSelector, gridClasses } from '@mui/x-data-grid-pro';
+import { gridCellSelectionStateSelector } from './gridCellSelectionSelector';
+export const cellSelectionStateInitializer = (state, props) => {
+  var _props$unstable_cellS, _props$initialState;
+  return _extends({}, state, {
+    cellSelection: _extends({}, (_props$unstable_cellS = props.unstable_cellSelectionModel) != null ? _props$unstable_cellS : (_props$initialState = props.initialState) == null ? void 0 : _props$initialState.cellSelection)
+  });
+};
+export const useGridCellSelection = (apiRef, props) => {
+  const visibleRows = useGridVisibleRows(apiRef, props);
+  const lastClickedCell = React.useRef();
+  const lastMouseDownCell = React.useRef();
+  const focusedCellWhenShiftWasPressed = React.useRef(null);
+  apiRef.current.registerControlState({
+    stateId: 'cellSelection',
+    propModel: props.unstable_cellSelectionModel,
+    propOnChange: props.unstable_onCellSelectionModelChange,
+    stateSelector: gridCellSelectionStateSelector,
+    changeEvent: 'cellSelectionChange'
+  });
+  const runIfCellSelectionIsEnabled = callback => (...args) => {
+    if (props.unstable_cellSelection) {
+      callback(...args);
+    }
+  };
+  const isCellSelected = React.useCallback((id, field) => {
+    if (!props.unstable_cellSelection) {
+      return false;
+    }
+    const cellSelectionModel = gridCellSelectionStateSelector(apiRef.current.state);
+    return cellSelectionModel[id] ? !!cellSelectionModel[id][field] : false;
+  }, [apiRef, props.unstable_cellSelection]);
+  const getCellSelectionModel = React.useCallback(() => {
+    return gridCellSelectionStateSelector(apiRef.current.state);
+  }, [apiRef]);
+  const setCellSelectionModel = React.useCallback(newModel => {
+    if (!props.unstable_cellSelection) {
+      return;
+    }
+    apiRef.current.setState(prevState => _extends({}, prevState, {
+      cellSelection: newModel
+    }));
+    apiRef.current.forceUpdate();
+  }, [apiRef, props.unstable_cellSelection]);
+  const selectCellRange = React.useCallback((start, end, keepOtherSelected = false) => {
+    const startRowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(start.id);
+    const startColumnIndex = apiRef.current.getColumnIndex(start.field);
+    const endRowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(end.id);
+    const endColumnIndex = apiRef.current.getColumnIndex(end.field);
+    let finalStartRowIndex = startRowIndex;
+    let finalStartColumnIndex = startColumnIndex;
+    let finalEndRowIndex = endRowIndex;
+    let finalEndColumnIndex = endColumnIndex;
+    if (finalStartRowIndex > finalEndRowIndex) {
+      finalStartRowIndex = endRowIndex;
+      finalEndRowIndex = startRowIndex;
+    }
+    if (finalStartColumnIndex > finalEndColumnIndex) {
+      finalStartColumnIndex = endColumnIndex;
+      finalEndColumnIndex = startColumnIndex;
+    }
+    const visibleColumns = apiRef.current.getVisibleColumns();
+    const rowsInRange = visibleRows.rows.slice(finalStartRowIndex, finalEndRowIndex + 1);
+    const columnsInRange = visibleColumns.slice(finalStartColumnIndex, finalEndColumnIndex + 1);
+    const newModel = keepOtherSelected ? apiRef.current.unstable_getCellSelectionModel() : {};
+    rowsInRange.forEach(row => {
+      if (!newModel[row.id]) {
+        newModel[row.id] = {};
+      }
+      columnsInRange.forEach(column => {
+        newModel[row.id][column.field] = true;
+      }, {});
+    });
+    apiRef.current.unstable_setCellSelectionModel(newModel);
+  }, [apiRef, visibleRows.rows]);
+  const getSelectedCellsAsArray = React.useCallback(() => {
+    const model = apiRef.current.unstable_getCellSelectionModel();
+    const idToIdLookup = gridRowsDataRowIdToIdLookupSelector(apiRef);
+    return Object.entries(model).reduce((acc, [id, fields]) => [...acc, ...Object.entries(fields).reduce((acc2, [field, isSelected]) => {
+      return isSelected ? [...acc2, {
+        id: idToIdLookup[id],
+        field
+      }] : acc2;
+    }, [])], []);
+  }, [apiRef]);
+  const cellSelectionApi = {
+    unstable_isCellSelected: isCellSelected,
+    unstable_getCellSelectionModel: getCellSelectionModel,
+    unstable_setCellSelectionModel: setCellSelectionModel,
+    unstable_selectCellRange: selectCellRange,
+    unstable_getSelectedCellsAsArray: getSelectedCellsAsArray
+  };
+  useGridApiMethod(apiRef, cellSelectionApi, 'public');
+  const handleCellMouseDown = React.useCallback((params, event) => {
+    var _apiRef$current$rootE, _apiRef$current$rootE2;
+    // Skip if the click comes from the right-button or, only on macOS, Ctrl is pressed
+    // Fix for https://github.com/mui/mui-x/pull/6567#issuecomment-1329155578
+    const isMacOs = window.navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+    if (event.button !== 0 || event.ctrlKey && isMacOs) {
+      return;
+    }
+    lastMouseDownCell.current = {
+      id: params.id,
+      field: params.field
+    };
+    (_apiRef$current$rootE = apiRef.current.rootElementRef) == null ? void 0 : (_apiRef$current$rootE2 = _apiRef$current$rootE.current) == null ? void 0 : _apiRef$current$rootE2.classList.add(gridClasses['root--disableUserSelection']);
+  }, [apiRef]);
+  const handleCellMouseUp = React.useCallback(() => {
+    var _apiRef$current$rootE3, _apiRef$current$rootE4;
+    lastMouseDownCell.current = null;
+    (_apiRef$current$rootE3 = apiRef.current.rootElementRef) == null ? void 0 : (_apiRef$current$rootE4 = _apiRef$current$rootE3.current) == null ? void 0 : _apiRef$current$rootE4.classList.remove(gridClasses['root--disableUserSelection']);
+  }, [apiRef]);
+  const handleCellMouseOver = React.useCallback((params, event) => {
+    if (!lastMouseDownCell.current) {
+      return;
+    }
+    const {
+      id,
+      field
+    } = params;
+    apiRef.current.unstable_selectCellRange(lastMouseDownCell.current, {
+      id,
+      field
+    }, event.ctrlKey || event.metaKey);
+  }, [apiRef]);
+  const handleCellClick = useEventCallback((params, event) => {
+    const {
+      id,
+      field
+    } = params;
+    if (params.field === GRID_CHECKBOX_SELECTION_COL_DEF.field) {
+      return;
+    }
+    if (params.field === GRID_DETAIL_PANEL_TOGGLE_FIELD) {
+      return;
+    }
+    const column = apiRef.current.getColumn(params.field);
+    if (column.type === GRID_ACTIONS_COLUMN_TYPE) {
+      return;
+    }
+    if (params.rowNode.type === 'pinnedRow') {
+      return;
+    }
+    if (event.shiftKey && lastClickedCell.current) {
+      apiRef.current.unstable_selectCellRange(lastClickedCell.current, {
+        id,
+        field
+      });
+      lastClickedCell.current = {
+        id,
+        field
+      };
+      return;
+    }
+    lastClickedCell.current = {
+      id,
+      field
+    };
+    if (event.ctrlKey || event.metaKey) {
+      // Add the clicked cell to the selection
+      const prevModel = apiRef.current.unstable_getCellSelectionModel();
+      apiRef.current.unstable_setCellSelectionModel(_extends({}, prevModel, {
+        [id]: _extends({}, prevModel[id], {
+          [field]: !apiRef.current.unstable_isCellSelected(id, field)
+        })
+      }));
+    } else {
+      // Clear the selection and keep only the clicked cell selected
+      apiRef.current.unstable_setCellSelectionModel({
+        [id]: {
+          [field]: true
+        }
+      });
+    }
+  });
+  const handleCellKeyDown = useEventCallback((params, event) => {
+    const {
+      id,
+      field
+    } = params;
+    if (event.key === 'Shift') {
+      focusedCellWhenShiftWasPressed.current = {
+        id,
+        field
+      };
+      return;
+    }
+    if (!focusedCellWhenShiftWasPressed.current || !isNavigationKey(event.key) || !event.shiftKey) {
+      return;
+    }
+    let endRowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(id);
+    let endColumnIndex = apiRef.current.getColumnIndex(field);
+    if (event.key === 'ArrowDown') {
+      endRowIndex += 1;
+    } else if (event.key === 'ArrowUp') {
+      endRowIndex -= 1;
+    } else if (event.key === 'ArrowRight') {
+      endColumnIndex += 1;
+    } else if (event.key === 'ArrowLeft') {
+      endColumnIndex -= 1;
+    }
+    if (endRowIndex < 0 || endRowIndex >= visibleRows.rows.length) {
+      return;
+    }
+    const visibleColumns = apiRef.current.getVisibleColumns();
+    if (endColumnIndex < 0 || endColumnIndex >= visibleColumns.length) {
+      return;
+    }
+    apiRef.current.unstable_selectCellRange(focusedCellWhenShiftWasPressed.current, {
+      id: visibleRows.rows[endRowIndex].id,
+      field: visibleColumns[endColumnIndex].field
+    });
+  });
+  const handleCellKeyUp = useEventCallback((params, event) => {
+    if (event.key === 'Shift') {
+      focusedCellWhenShiftWasPressed.current = null;
+    }
+  });
+  useGridApiEventHandler(apiRef, 'cellClick', runIfCellSelectionIsEnabled(handleCellClick));
+  useGridApiEventHandler(apiRef, 'cellKeyDown', runIfCellSelectionIsEnabled(handleCellKeyDown));
+  useGridApiEventHandler(apiRef, 'cellKeyUp', runIfCellSelectionIsEnabled(handleCellKeyUp));
+  useGridApiEventHandler(apiRef, 'cellMouseDown', runIfCellSelectionIsEnabled(handleCellMouseDown));
+  useGridApiEventHandler(apiRef, 'cellMouseUp', runIfCellSelectionIsEnabled(handleCellMouseUp));
+  useGridApiEventHandler(apiRef, 'cellMouseOver', runIfCellSelectionIsEnabled(handleCellMouseOver));
+  React.useEffect(() => {
+    if (props.unstable_cellSelectionModel) {
+      apiRef.current.unstable_setCellSelectionModel(props.unstable_cellSelectionModel);
+    }
+  }, [apiRef, props.unstable_cellSelectionModel]);
+  const checkIfCellIsSelected = React.useCallback((isSelected, {
+    id,
+    field
+  }) => {
+    return apiRef.current.unstable_isCellSelected(id, field);
+  }, [apiRef]);
+  const addClassesToCells = React.useCallback((classes, {
+    id,
+    field
+  }) => {
+    const newClasses = [...classes];
+    if (!visibleRows.range || !apiRef.current.unstable_isCellSelected(id, field)) {
+      return classes;
+    }
+    const rowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(id);
+    const columnIndex = apiRef.current.getColumnIndex(field);
+    const visibleColumns = apiRef.current.getVisibleColumns();
+    if (rowIndex > 0) {
+      const {
+        id: previousRowId
+      } = visibleRows.rows[rowIndex - 1];
+      if (!apiRef.current.unstable_isCellSelected(previousRowId, field)) {
+        newClasses.push(gridClasses['cell--rangeTop']);
+      }
+    } else {
+      newClasses.push(gridClasses['cell--rangeTop']);
+    }
+    if (rowIndex < visibleRows.range.lastRowIndex) {
+      const {
+        id: nextRowId
+      } = visibleRows.rows[rowIndex + 1];
+      if (!apiRef.current.unstable_isCellSelected(nextRowId, field)) {
+        newClasses.push(gridClasses['cell--rangeBottom']);
+      }
+    } else {
+      newClasses.push(gridClasses['cell--rangeBottom']);
+    }
+    if (columnIndex > 0) {
+      const {
+        field: previousColumnField
+      } = visibleColumns[columnIndex - 1];
+      if (!apiRef.current.unstable_isCellSelected(id, previousColumnField)) {
+        newClasses.push(gridClasses['cell--rangeLeft']);
+      }
+    } else {
+      newClasses.push(gridClasses['cell--rangeLeft']);
+    }
+    if (columnIndex < visibleColumns.length - 1) {
+      const {
+        field: nextColumnField
+      } = visibleColumns[columnIndex + 1];
+      if (!apiRef.current.unstable_isCellSelected(id, nextColumnField)) {
+        newClasses.push(gridClasses['cell--rangeRight']);
+      }
+    } else {
+      newClasses.push(gridClasses['cell--rangeRight']);
+    }
+    return newClasses;
+  }, [apiRef, visibleRows.range, visibleRows.rows]);
+  useGridRegisterPipeProcessor(apiRef, 'isCellSelected', checkIfCellIsSelected);
+  useGridRegisterPipeProcessor(apiRef, 'cellClassName', addClassesToCells);
+};

package/hooks/features/index.d.ts

@@ -1,3 +1,4 @@
 export * from './aggregation';
 export * from './rowGrouping';
 export * from './export';
+export * from './cellSelection';