[DataGrid] Remove indeterminateCheckboxAction prop (#15522)

docs/data/data-grid/row-selection/row-selection.md

@@ -71,13 +71,6 @@ Always set the `checkboxSelection` prop to `true` even when providing a custom c
 Otherwise, the Data Grid might remove your column.
 :::
 
-### Customize indeterminate checkbox behavior
-
-The parent checkboxes (like "Select All" checkbox) when clicked in an indeterminate state will deselect the selected rows.
-You can customize this behavior by using the [`indeterminateCheckboxAction` prop](/x/api/data-grid/data-grid/#data-grid-prop-indeterminateCheckboxAction).
-
-{{"demo": "CheckboxSelectionIndeterminateGrid.js", "bg": "inline"}}
-
 ### Visible rows selection [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')
 
 By default, when you click the "Select All" checkbox, all rows in the Data Grid are selected.

docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md

@@ -33,27 +33,11 @@ Since v8 is a major release, it contains some changes that affect the public API
 These changes were done for consistency, improve stability and make room for new features.
 Below are described the steps you need to make to migrate from v7 to v8.
 
-:::info
-The list is currently empty, but as we move forward with development during the alpha and beta phases, we'll feed this page with all changes in the API.
-:::
-
-<!-- ### Columns
-
-TBD
-
-### Rows
-
-TBD
-
-### `apiRef` methods
-
-TBD
-
 ### Selection
 
-TBD
+- The prop `indeterminateCheckboxAction` has been removed. Clicking on an indeterminate checkbox "selects" the unselected descendants.
 
-### Accessibility
+<!-- ### Accessibility
 
 TBD
 

docs/pages/x/api/data-grid/data-grid-premium.json

@@ -187,10 +187,6 @@
       },
       "default": "false"
     },
-    "indeterminateCheckboxAction": {
-      "type": { "name": "enum", "description": "'deselect'<br>&#124;&nbsp;'select'" },
-      "default": "\"deselect\""
-    },
     "initialState": { "type": { "name": "object" } },
     "isCellEditable": {
       "type": { "name": "func" },

docs/pages/x/api/data-grid/data-grid-pro.json

@@ -161,10 +161,6 @@
       },
       "default": "false"
     },
-    "indeterminateCheckboxAction": {
-      "type": { "name": "enum", "description": "'deselect'<br>&#124;&nbsp;'select'" },
-      "default": "\"deselect\""
-    },
     "initialState": { "type": { "name": "object" } },
     "isCellEditable": {
       "type": { "name": "func" },

docs/pages/x/api/data-grid/data-grid.json

@@ -129,10 +129,6 @@
       },
       "default": "false"
     },
-    "indeterminateCheckboxAction": {
-      "type": { "name": "enum", "description": "'deselect'<br>&#124;&nbsp;'select'" },
-      "default": "\"deselect\""
-    },
     "initialState": { "type": { "name": "object" } },
     "isCellEditable": {
       "type": { "name": "func" },

docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json

@@ -205,9 +205,6 @@
     "ignoreValueFormatterDuringExport": {
       "description": "If <code>true</code>, the Data Grid will not use <code>valueFormatter</code> when exporting to CSV or copying to clipboard. If an object is provided, you can choose to ignore the <code>valueFormatter</code> for CSV export or clipboard export."
     },
-    "indeterminateCheckboxAction": {
-      "description": "If <code>select</code>, a group header checkbox in indeterminate state (like &quot;Select All&quot; checkbox) will select all the rows under it. If <code>deselect</code>, it will deselect all the rows under it. Works only if <code>checkboxSelection</code> is enabled."
-    },
     "initialState": {
       "description": "The initial state of the DataGridPremium. The data in it is set in the state on initialization but isn&#39;t controlled. If one of the data in <code>initialState</code> is also being controlled, then the control state wins."
     },

docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json

@@ -186,9 +186,6 @@
     "ignoreValueFormatterDuringExport": {
       "description": "If <code>true</code>, the Data Grid will not use <code>valueFormatter</code> when exporting to CSV or copying to clipboard. If an object is provided, you can choose to ignore the <code>valueFormatter</code> for CSV export or clipboard export."
     },
-    "indeterminateCheckboxAction": {
-      "description": "If <code>select</code>, a group header checkbox in indeterminate state (like &quot;Select All&quot; checkbox) will select all the rows under it. If <code>deselect</code>, it will deselect all the rows under it. Works only if <code>checkboxSelection</code> is enabled."
-    },
     "initialState": {
       "description": "The initial state of the DataGridPro. The data in it will be set in the state on initialization but will not be controlled. If one of the data in <code>initialState</code> is also being controlled, then the control state wins."
     },

docs/translations/api-docs/data-grid/data-grid/data-grid.json

@@ -139,9 +139,6 @@
     "ignoreValueFormatterDuringExport": {
       "description": "If <code>true</code>, the Data Grid will not use <code>valueFormatter</code> when exporting to CSV or copying to clipboard. If an object is provided, you can choose to ignore the <code>valueFormatter</code> for CSV export or clipboard export."
     },
-    "indeterminateCheckboxAction": {
-      "description": "If <code>select</code>, a group header checkbox in indeterminate state (like &quot;Select All&quot; checkbox) will select all the rows under it. If <code>deselect</code>, it will deselect all the rows under it. Works only if <code>checkboxSelection</code> is enabled."
-    },
     "initialState": {
       "description": "The initial state of the DataGrid. The data in it will be set in the state on initialization but will not be controlled. If one of the data in <code>initialState</code> is also being controlled, then the control state wins."
     },

packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx

@@ -482,14 +482,6 @@ DataGridPremiumRaw.propTypes = {
     }),
     PropTypes.bool,
   ]),
-  /**
-   * If `select`, a group header checkbox in indeterminate state (like "Select All" checkbox)
-   * will select all the rows under it.
-   * If `deselect`, it will deselect all the rows under it.
-   * Works only if `checkboxSelection` is enabled.
-   * @default "deselect"
-   */
-  indeterminateCheckboxAction: PropTypes.oneOf(['deselect', 'select']),
   /**
    * The initial state of the DataGridPremium.
    * The data in it is set in the state on initialization but isn't controlled.

packages/x-data-grid-premium/src/tests/rowSelection.DataGridPremium.test.tsx

@@ -154,43 +154,18 @@ describe('<DataGridPremium /> - Row selection', () => {
       expect(apiRef.current.state.rowSelection.length).to.equal(expectedCount);
     });
 
-    describe("prop: indeterminateCheckboxAction = 'select'", () => {
-      it('should select all the children when selecting an indeterminate parent', () => {
-        render(
-          <Test
-            defaultGroupingExpansionDepth={-1}
-            density="compact"
-            indeterminateCheckboxAction="select"
-          />,
-        );
-
-        fireEvent.click(getCell(2, 0).querySelector('input')!);
-        expect(getCell(0, 0).querySelector('input')!).to.have.attr('data-indeterminate', 'true');
-        fireEvent.click(getCell(0, 0).querySelector('input')!);
-        expect(apiRef.current.getSelectedRows()).to.have.keys([
-          0,
-          1,
-          2,
-          'auto-generated-row-category1/Cat A',
-        ]);
-      });
-    });
+    it('should select all the children when selecting an indeterminate parent', () => {
+      render(<Test defaultGroupingExpansionDepth={-1} density="compact" />);
 
-    describe("prop: indeterminateCheckboxAction = 'deselect'", () => {
-      it('should deselect all the children when selecting an indeterminate parent', () => {
-        render(
-          <Test
-            defaultGroupingExpansionDepth={-1}
-            density="compact"
-            indeterminateCheckboxAction="deselect"
-          />,
-        );
-
-        fireEvent.click(getCell(2, 0).querySelector('input')!);
-        expect(getCell(0, 0).querySelector('input')!).to.have.attr('data-indeterminate', 'true');
-        fireEvent.click(getCell(0, 0).querySelector('input')!);
-        expect(apiRef.current.getSelectedRows().size).to.equal(0);
-      });
+      fireEvent.click(getCell(2, 0).querySelector('input')!);
+      expect(getCell(0, 0).querySelector('input')!).to.have.attr('data-indeterminate', 'true');
+      fireEvent.click(getCell(0, 0).querySelector('input')!);
+      expect(apiRef.current.getSelectedRows()).to.have.keys([
+        0,
+        1,
+        2,
+        'auto-generated-row-category1/Cat A',
+      ]);
     });
   });
 });

packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx

@@ -437,14 +437,6 @@ DataGridProRaw.propTypes = {
     }),
     PropTypes.bool,
   ]),
-  /**
-   * If `select`, a group header checkbox in indeterminate state (like "Select All" checkbox)
-   * will select all the rows under it.
-   * If `deselect`, it will deselect all the rows under it.
-   * Works only if `checkboxSelection` is enabled.
-   * @default "deselect"
-   */
-  indeterminateCheckboxAction: PropTypes.oneOf(['deselect', 'select']),
   /**
    * The initial state of the DataGridPro.
    * The data in it will be set in the state on initialization but will not be controlled.

packages/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx

@@ -299,7 +299,7 @@ describe('<DataGridPro /> - Row selection', () => {
       expect(selectAllCheckbox.checked).to.equal(true);
     });
 
-    it('should unselect all rows of all the pages if 1 row of another page is selected', () => {
+    it('should select all rows of all the pages if 1 row of another page is selected', () => {
       render(
         <TestDataGridSelection
           checkboxSelection
@@ -315,8 +315,8 @@ describe('<DataGridPro /> - Row selection', () => {
         name: /select all rows/i,
       });
       fireEvent.click(selectAllCheckbox);
-      expect(apiRef.current.getSelectedRows()).to.have.length(0);
-      expect(selectAllCheckbox.checked).to.equal(false);
+      expect(apiRef.current.getSelectedRows()).to.have.length(4);
+      expect(selectAllCheckbox.checked).to.equal(true);
     });
 
     it('should select all visible rows if pagination is not enabled', () => {
@@ -405,7 +405,7 @@ describe('<DataGridPro /> - Row selection', () => {
       expect(selectAllCheckbox.checked).to.equal(true);
     });
 
-    it('should unselect all the rows of the current page if 1 row of the current page is selected', () => {
+    it('should select all the rows of the current page if 1 row of the current page is selected', () => {
       render(
         <TestDataGridSelection
           checkboxSelection
@@ -425,8 +425,8 @@ describe('<DataGridPro /> - Row selection', () => {
         name: /select all rows/i,
       });
       fireEvent.click(selectAllCheckbox);
-      expect(apiRef.current.getSelectedRows()).to.have.keys([0]);
-      expect(selectAllCheckbox.checked).to.equal(false);
+      expect(apiRef.current.getSelectedRows()).to.have.keys([0, 2, 3]);
+      expect(selectAllCheckbox.checked).to.equal(true);
     });
 
     it('should not set the header checkbox in a indeterminate state when some rows of other pages are not selected', () => {
@@ -832,38 +832,13 @@ describe('<DataGridPro /> - Row selection', () => {
       expect(apiRef.current.getSelectedRows()).to.have.keys([11, 12, 13, 14]);
     });
 
-    describe("prop: indeterminateCheckboxAction = 'select'", () => {
-      it('should select all the children when selecting an indeterminate parent', () => {
-        render(
-          <SelectionPropagationGrid
-            defaultGroupingExpansionDepth={-1}
-            density="compact"
-            indeterminateCheckboxAction="select"
-          />,
-        );
-
-        fireEvent.click(getCell(2, 0).querySelector('input')!);
-        expect(getCell(1, 0).querySelector('input')!).to.have.attr('data-indeterminate', 'true');
-        fireEvent.click(getCell(1, 0).querySelector('input')!);
-        expect(apiRef.current.getSelectedRows()).to.have.keys([1, 2, 3, 4, 5, 6, 7]);
-      });
-    });
-
-    describe("prop: indeterminateCheckboxAction = 'deselect'", () => {
-      it('should deselect all the children when selecting an indeterminate parent', () => {
-        render(
-          <SelectionPropagationGrid
-            defaultGroupingExpansionDepth={-1}
-            density="compact"
-            indeterminateCheckboxAction="deselect"
-          />,
-        );
+    it('should select all the children when selecting an indeterminate parent', () => {
+      render(<SelectionPropagationGrid defaultGroupingExpansionDepth={-1} density="compact" />);
 
-        fireEvent.click(getCell(2, 0).querySelector('input')!);
-        expect(getCell(1, 0).querySelector('input')!).to.have.attr('data-indeterminate', 'true');
-        fireEvent.click(getCell(1, 0).querySelector('input')!);
-        expect(apiRef.current.getSelectedRows().size).to.equal(0);
-      });
+      fireEvent.click(getCell(2, 0).querySelector('input')!);
+      expect(getCell(1, 0).querySelector('input')!).to.have.attr('data-indeterminate', 'true');
+      fireEvent.click(getCell(1, 0).querySelector('input')!);
+      expect(apiRef.current.getSelectedRows()).to.have.keys([1, 2, 3, 4, 5, 6, 7]);
     });
 
     describe('prop: keepNonExistentRowsSelected = true', () => {

packages/x-data-grid/src/DataGrid/DataGrid.tsx

@@ -364,14 +364,6 @@ DataGridRaw.propTypes = {
     }),
     PropTypes.bool,
   ]),
-  /**
-   * If `select`, a group header checkbox in indeterminate state (like "Select All" checkbox)
-   * will select all the rows under it.
-   * If `deselect`, it will deselect all the rows under it.
-   * Works only if `checkboxSelection` is enabled.
-   * @default "deselect"
-   */
-  indeterminateCheckboxAction: PropTypes.oneOf(['deselect', 'select']),
   /**
    * The initial state of the DataGrid.
    * The data in it will be set in the state on initialization but will not be controlled.

packages/x-data-grid/src/components/columnSelection/GridCellCheckboxRenderer.tsx

@@ -99,19 +99,14 @@ const GridCellCheckboxForwardRef = React.forwardRef<HTMLInputElement, GridRender
     }
 
     const label = apiRef.current.getLocaleText(
-      isChecked ? 'checkboxSelectionUnselectRow' : 'checkboxSelectionSelectRow',
+      isChecked && !isIndeterminate ? 'checkboxSelectionUnselectRow' : 'checkboxSelectionSelectRow',
     );
 
-    const checked =
-      rootProps.indeterminateCheckboxAction === 'select'
-        ? isChecked && !isIndeterminate
-        : isChecked;
-
     return (
       <rootProps.slots.baseCheckbox
         ref={handleRef}
         tabIndex={tabIndex}
-        checked={checked}
+        checked={isChecked && !isIndeterminate}
         onChange={handleChange}
         className={classes.root}
         inputProps={{ 'aria-label': label }}

packages/x-data-grid/src/components/columnSelection/GridHeaderCheckbox.tsx

@@ -126,19 +126,16 @@ const GridHeaderCheckbox = React.forwardRef<HTMLButtonElement, GridColumnHeaderP
     }, [apiRef, handleSelectionChange]);
 
     const label = apiRef.current.getLocaleText(
-      isChecked ? 'checkboxSelectionUnselectAllRows' : 'checkboxSelectionSelectAllRows',
+      isChecked && !isIndeterminate
+        ? 'checkboxSelectionUnselectAllRows'
+        : 'checkboxSelectionSelectAllRows',
     );
 
-    const checked =
-      rootProps.indeterminateCheckboxAction === 'select'
-        ? isChecked && !isIndeterminate
-        : isChecked;
-
     return (
       <rootProps.slots.baseCheckbox
         ref={ref}
         indeterminate={isIndeterminate}
-        checked={checked}
+        checked={isChecked && !isIndeterminate}
         onChange={handleChange}
         className={classes.root}
         inputProps={{ 'aria-label': label }}

packages/x-data-grid/src/constants/dataGridPropsDefaultValues.ts

@@ -36,8 +36,6 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES: DataGridPropsWithDefaultValues = {
   hideFooterSelectedRowCount: false,
   ignoreDiacritics: false,
   ignoreValueFormatterDuringExport: false,
-  // TODO v8: Update to 'select'
-  indeterminateCheckboxAction: 'deselect',
   keepColumnPositionIfDraggedOutside: false,
   keepNonExistentRowsSelected: false,
   loading: false,