mui · flaviendelangle · Oct 5, 2021 · Aug 26, 2021 · Aug 26, 2021 · Aug 27, 2021
diff --git a/docs/pages/api-docs/data-grid/grid-api.md b/docs/pages/api-docs/data-grid/grid-api.md
@@ -61,6 +61,7 @@ import { GridApi } from '@mui/x-data-grid-pro';
 | <span class="prop-name">scroll</span>                  | <span class="prop-type">(params: Partial&lt;GridScrollParams&gt;) =&gt; void</span>                                                                                                                                                                                                                                                                                                                                                                        | Triggers the viewport to scroll to the given positions (in pixels).                                                                                            |
 | <span class="prop-name">scrollToIndexes</span>         | <span class="prop-type">(params: Partial&lt;GridCellIndexCoordinates&gt;) =&gt; boolean</span>                                                                                                                                                                                                                                                                                                                                                             | Triggers the viewport to scroll to the cell at indexes given by `params`.<br />Returns `true` if the grid had to scroll to reach the target.                   |
 | <span class="prop-name">selectRow</span>               | <span class="prop-type">(id: GridRowId, isSelected?: boolean, resetSelection?: boolean) =&gt; void</span>                                                                                                                                                                                                                                                                                                                                                  | Change the selection state of a row.                                                                                                                           |
+| <span class="prop-name">selectRowRange</span>          | <span class="prop-type">(range: { endId: GridRowId; startId: GridRowId }, isSelected?: boolean, resetSelection?: boolean) =&gt; void</span>                                                                                                                                                                                                                                                                                                                | Change the selection state of all the selectable rows in a range.                                                                                              |
 | <span class="prop-name">selectRows</span>              | <span class="prop-type">(ids: GridRowId[], isSelected?: boolean, resetSelection?: boolean) =&gt; void</span>                                                                                                                                                                                                                                                                                                                                               | Change the selection state of multiple rows.                                                                                                                   |
 | <span class="prop-name">setCellFocus</span>            | <span class="prop-type">(id: GridRowId, field: string) =&gt; void</span>                                                                                                                                                                                                                                                                                                                                                                                   | Sets the focus to the cell at the given `id` and `field`.                                                                                                      |
 | <span class="prop-name">setCellMode</span>             | <span class="prop-type">(id: GridRowId, field: string, mode: GridCellMode) =&gt; void</span>                                                                                                                                                                                                                                                                                                                                                               | Sets the mode of a cell.                                                                                                                                       |

diff --git a/docs/pages/api-docs/data-grid/grid-selection-api.json b/docs/pages/api-docs/data-grid/grid-selection-api.json
@@ -17,6 +17,11 @@
       "description": "Change the selection state of a row.",
       "type": "(id: GridRowId, isSelected?: boolean, resetSelection?: boolean) => void"
     },
+    {
+      "name": "selectRowRange",
+      "description": "Change the selection state of all the selectable rows in a range.",
+      "type": "(range: { endId: GridRowId; startId: GridRowId }, isSelected?: boolean, resetSelection?: boolean) => void"
+    },
     {
       "name": "selectRows",
       "description": "Change the selection state of multiple rows.",

diff --git a/docs/src/pages/components/data-grid/accessibility/accessibility.md b/docs/src/pages/components/data-grid/accessibility/accessibility.md
@@ -65,17 +65,18 @@ Use the arrow keys to move the focus.
 
 ### Selection
 
-|                                                                                               Keys | Description                                          |
-| -------------------------------------------------------------------------------------------------: | :--------------------------------------------------- |
-|                                        <kbd class="key">Shift</kbd> + <kbd class="key">Space</kbd> | Select the current row                               |
-| <kbd class="key">Shift</kbd> + <kbd class="key">Space</kbd> + <kbd class="key">Arrow Up/Down</kbd> | Select the current row and the row above or below    |
-|                                             <kbd class="key">CTRL</kbd> + <kbd class="key">A</kbd> | Select all rows                                      |
-|                                             <kbd class="key">CTRL</kbd> + <kbd class="key">C</kbd> | Copy the currently selected row(s)                   |
-|                                              <kbd class="key">ALT</kbd> + <kbd class="key">C</kbd> | Copy the currently selected row(s) including headers |
-|                                                        <kbd class="key">CTRL</kbd> + Click on cell | Enable multi-selection                               |
-|                                              <kbd class="key">CTRL</kbd> + Click on a selected row | Deselect the row                                     |
-|                                                                       <kbd class="key">Enter</kbd> | Sort column when column header is focused            |
-|                                         <kbd class="key">CTRL</kbd> + <kbd class="key">Enter</kbd> | Open column menu when column header is focused       |
+|                                                                                               Keys | Description                                                          |
+| -------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------- |
+|                                        <kbd class="key">Shift</kbd> + <kbd class="key">Space</kbd> | Select the current row                                               |
+| <kbd class="key">Shift</kbd> + <kbd class="key">Space</kbd> + <kbd class="key">Arrow Up/Down</kbd> | Select the current row and the row above or below                    |
+|                                                       <kbd class="key">Shift</kbd> + Click on cell | Select the range of rows between the first and the last clicked rows |
+|                                             <kbd class="key">CTRL</kbd> + <kbd class="key">A</kbd> | Select all rows                                                      |
+|                                             <kbd class="key">CTRL</kbd> + <kbd class="key">C</kbd> | Copy the currently selected row(s)                                   |
+|                                              <kbd class="key">ALT</kbd> + <kbd class="key">C</kbd> | Copy the currently selected row(s) including headers                 |
+|                                                        <kbd class="key">CTRL</kbd> + Click on cell | Enable multi-selection                                               |
+|                                              <kbd class="key">CTRL</kbd> + Click on a selected row | Deselect the row                                                     |
+|                                                                       <kbd class="key">Enter</kbd> | Sort column when column header is focused                            |
+|                                         <kbd class="key">CTRL</kbd> + <kbd class="key">Enter</kbd> | Open column menu when column header is focused                       |
 
 ### Sorting
 

diff --git a/docs/src/pages/components/data-grid/events/events.json b/docs/src/pages/components/data-grid/events/events.json
@@ -117,6 +117,10 @@
     "name": "filterModelChange",
     "description": "Fired when the filter model changes.\nCalled with a GridFilterModel object."
   },
+  {
+    "name": "headerSelectionCheckboxChange",
+    "description": "Fired when the value of the selection checkbox of the header is changed\nCalled with a GridHeaderSelectionCheckboxParams object"
+  },
   { "name": "pageChange", "description": "Fired when the page changes." },
   { "name": "pageSizeChange", "description": "Fired when the page size changes." },
   {
@@ -159,6 +163,10 @@
     "name": "rowOver",
     "description": "Fired when a <code>mouseover</code> event happens in a row.  Called with a <a href=\"/api/data-grid/grid-row-params/\">GridRowParams</a> object."
   },
+  {
+    "name": "rowSelectionCheckboxChange",
+    "description": "Fired when the value of the selection checkbox of a row is changed\nCalled with a GridRowSelectionCheckboxParams object"
+  },
   {
     "name": "rowsScroll",
     "description": "Fired during the scroll of the grid viewport. Called with a GridScrollParams object."

diff --git a/docs/src/pages/components/data-grid/getting-started/getting-started.md b/docs/src/pages/components/data-grid/getting-started/getting-started.md
@@ -165,9 +165,10 @@ The enterprise components come in two plans: Pro and Premium.
 | [Row spanning](/components/data-grid/rows/#row-spanning)                                  |    🚧     |              🚧               |                  🚧                   |
 | [Row reordering](/components/data-grid/rows/#row-reorder)                                 |    ❌     |              🚧               |                  🚧                   |
 | **Selection**                                                                             |           |                               |                                       |
-| [Row selection](/components/data-grid/selection/#single-row-selection)                    |    ✅     |              ✅               |                  ✅                   |
-| [Multi-row selection](/components/data-grid/selection/#multiple-row-selection)            |    ❌     |              ✅               |                  ✅                   |
-| [Range selection](/components/data-grid/selection/#range-selection)                       |    ❌     |              ❌               |                  🚧                   |
+| [Single row selection](/components/data-grid/selection/#single-row-selection)             |    ✅     |              ✅               |                  ✅                   |
+| [Checkbox selection](/components/data-grid/selection/#checkbox-selection)                 |    ✅     |              ✅               |                  ✅                   |
+| [Multiple row selection](/components/data-grid/selection/#multiple-row-selection)         |    ❌     |              ✅               |                  ✅                   |
+| [Cell range selection](/components/data-grid/selection/#range-selection)                  |    ❌     |              ❌               |                  🚧                   |
 | **Filtering**                                                                             |           |                               |                                       |
 | [Quick filter](/components/data-grid/filtering/#quick-filter)                             |    🚧     |              🚧               |                  🚧                   |
 | [Column filters](/components/data-grid/filtering/#column-filters)                         |    ✅     |              ✅               |                  ✅                   |

diff --git a/docs/src/pages/components/data-grid/selection/MultipleRowSelectionGrid.js b/docs/src/pages/components/data-grid/selection/MultipleRowSelectionGrid.js
@@ -5,13 +5,13 @@ import { useDemoData } from '@mui/x-data-grid-generator';
 export default function MultipleRowSelectionGrid() {
   const { data } = useDemoData({
     dataSet: 'Commodity',
-    rowLength: 10,
+    rowLength: 100,
     maxColumns: 6,
   });
 
   return (
     <div style={{ height: 400, width: '100%' }}>
-      <DataGridPro {...data} />
+      <DataGridPro {...data} pagination pageSize={10} />
     </div>
   );
 }
diff --git a/docs/src/pages/components/data-grid/selection/MultipleRowSelectionGrid.tsx b/docs/src/pages/components/data-grid/selection/MultipleRowSelectionGrid.tsx
@@ -5,13 +5,13 @@ import { useDemoData } from '@mui/x-data-grid-generator';
 export default function MultipleRowSelectionGrid() {
   const { data } = useDemoData({
     dataSet: 'Commodity',
-    rowLength: 10,
+    rowLength: 100,
     maxColumns: 6,
   });
 
   return (
     <div style={{ height: 400, width: '100%' }}>
-      <DataGridPro {...data} />
+      <DataGridPro {...data} pagination pageSize={10} />
     </div>
   );
 }
diff --git a/docs/src/pages/components/data-grid/selection/selection.md b/docs/src/pages/components/data-grid/selection/selection.md
@@ -34,7 +34,10 @@ For the `DataGridPro`, you need to disable multiple row selection with `disableM
 
 ### Multiple row selection [<span class="pro"></span>](https://material-ui.com/store/items/material-ui-pro/)
 
-To select multiple rows on the `DataGridPro` component, hold the <kbd class="key">CTRL</kbd> key while selecting rows.
+On the `DataGridPro` component, you can select multiple rows in two ways:
+
+- To select multiple independent rows, hold the <kbd class="key">CTRL</kbd> key while selecting rows.
+- To select a range of rows, hold the <kbd class="key">SHIFT</kbd> key while selecting rows.
 
 {{"demo": "pages/components/data-grid/selection/MultipleRowSelectionGrid.js", "disableAd": true, "bg": "inline"}}
 

diff --git a/packages/grid/_modules_/grid/components/GridRow.tsx b/packages/grid/_modules_/grid/components/GridRow.tsx
@@ -73,7 +73,7 @@ function GridRow(props: GridRowProps) {
     [apiRef, id],
   );
 
-  const mouseEventsHandlers = React.useMemo(
+  const mouseEventsHandlers = React.useMemo<Partial<React.HTMLAttributes<HTMLDivElement>>>(
     () => ({
       onClick: publish(GridEvents.rowClick),
       onDoubleClick: publish(GridEvents.rowDoubleClick),

diff --git a/packages/grid/_modules_/grid/components/columnSelection/GridCellCheckboxRenderer.tsx b/packages/grid/_modules_/grid/components/columnSelection/GridCellCheckboxRenderer.tsx
@@ -9,6 +9,7 @@ import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../gridClasses';
 import { composeClasses } from '../../utils/material-ui-utils';
 import { GridComponentProps } from '../../GridComponentProps';
+import { GridRowSelectionCheckboxParams } from '../../models/params/gridRowSelectionCheckboxParams';
 
 type OwnerState = { classes: GridComponentProps['classes'] };
 
@@ -35,7 +36,8 @@ const GridCellCheckboxForwardRef = React.forwardRef<HTMLInputElement, GridCellPa
     const element = apiRef.current.getCellElement(id, field);
 
     const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-      apiRef.current.selectRow(id, event.target.checked, false);
+      const params: GridRowSelectionCheckboxParams = { value: event.target.checked, id };
+      apiRef.current.publishEvent(GridEvents.rowSelectionCheckboxChange, params, event);
     };
 
     const handleClick = (event: React.MouseEvent<HTMLInputElement>) => {

diff --git a/packages/grid/_modules_/grid/components/columnSelection/GridHeaderCheckbox.tsx b/packages/grid/_modules_/grid/components/columnSelection/GridHeaderCheckbox.tsx
@@ -2,8 +2,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { GridEvents } from '../../constants/eventsConstants';
 import { useGridSelector } from '../../hooks/features/core/useGridSelector';
-import { gridPaginatedVisibleSortedGridRowIdsSelector } from '../../hooks/features/pagination/gridPaginationSelector';
-import { visibleSortedGridRowIdsSelector } from '../../hooks/features/filter/gridFilterSelector';
 import { gridTabIndexColumnHeaderSelector } from '../../hooks/features/focus/gridFocusStateSelector';
 import { gridRowCountSelector } from '../../hooks/features/rows/gridRowsSelector';
 import { gridSelectionStateSelector } from '../../hooks/features/selection/gridSelectionSelector';
@@ -14,6 +12,7 @@ import { getDataGridUtilityClass } from '../../gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { composeClasses } from '../../utils/material-ui-utils';
 import { GridComponentProps } from '../../GridComponentProps';
+import { GridHeaderSelectionCheckboxParams } from '../../models/params/gridHeaderSelectionCheckboxParams';
 
 type OwnerState = { classes: GridComponentProps['classes'] };
 
@@ -52,15 +51,12 @@ const GridHeaderCheckbox = React.forwardRef<HTMLInputElement, GridColumnHeaderPa
     const isChecked = (totalSelectedRows > 0 && totalSelectedRows === totalRows) || isIndeterminate;
 
     const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-      const checked = event.target.checked;
+      const params: GridHeaderSelectionCheckboxParams = {
+        value: event.target.checked,
+        indeterminate: event.target.indeterminate,
+      };
 
-      const shouldLimitSelectionToCurrentPage =
-        rootProps.checkboxSelectionVisibleOnly && rootProps.pagination;
-
-      const rowsToBeSelected = shouldLimitSelectionToCurrentPage
-        ? gridPaginatedVisibleSortedGridRowIdsSelector(apiRef.current.state)
-        : visibleSortedGridRowIdsSelector(apiRef.current.state);
-      apiRef.current.selectRows(rowsToBeSelected, checked, !event.target.indeterminate);
+      apiRef.current.publishEvent(GridEvents.headerSelectionCheckboxChange, params);
     };
 
     const tabIndex = tabIndexState !== null && tabIndexState.field === props.field ? 0 : -1;

diff --git a/packages/grid/_modules_/grid/constants/eventsConstants.ts b/packages/grid/_modules_/grid/constants/eventsConstants.ts
@@ -28,7 +28,6 @@ export enum GridEvents {
    * Fired when a cell is double-clicked. Called with a [[GridCellParams]] object.
    */
   cellDoubleClick = 'cellDoubleClick',
-
   /**
    * Fired when a `mousedown` event happens in a cell. Called with a [[GridCellParams]] object.
    */
@@ -238,6 +237,16 @@ export enum GridEvents {
    * Called with a [[GridSelectionModelChangeParams]] object.
    */
   selectionChange = 'selectionChange',
+  /**
+   * Fired when the value of the selection checkbox of a row is changed
+   * Called with a [[GridRowSelectionCheckboxParams]] object
+   */
+  rowSelectionCheckboxChange = 'rowSelectionCheckboxChange',
+  /**
+   * Fired when the value of the selection checkbox of the header is changed
+   * Called with a [[GridHeaderSelectionCheckboxParams]] object
+   */
+  headerSelectionCheckboxChange = 'headerSelectionCheckboxChange',
   /**
    * Fired when the page changes.
    */