Skip to content

Commit

Permalink
[DataGrid] Remove indeterminateCheckboxAction prop (#15522)
Browse files Browse the repository at this point in the history
MBilalShafi authored Nov 26, 2024

Verified

This commit was signed with the committer’s verified signature. The key has expired.
universalmind303 Cory Grinstead
1 parent d20eaca commit 3fa5b49
Showing 21 changed files with 37 additions and 220 deletions.

This file was deleted.

This file was deleted.

This file was deleted.

7 changes: 0 additions & 7 deletions docs/data/data-grid/row-selection/row-selection.md
Original file line number Diff line number Diff line change
@@ -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.
Original file line number Diff line number Diff line change
@@ -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
4 changes: 0 additions & 4 deletions docs/pages/x/api/data-grid/data-grid-premium.json
Original file line number Diff line number Diff line change
@@ -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" },
4 changes: 0 additions & 4 deletions docs/pages/x/api/data-grid/data-grid-pro.json
Original file line number Diff line number Diff line change
@@ -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" },
4 changes: 0 additions & 4 deletions docs/pages/x/api/data-grid/data-grid.json
Original file line number Diff line number Diff line change
@@ -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" },
Original file line number Diff line number Diff line change
@@ -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."
},
Original file line number Diff line number Diff line change
@@ -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."
},
3 changes: 0 additions & 3 deletions docs/translations/api-docs/data-grid/data-grid/data-grid.json
Original file line number Diff line number Diff line change
@@ -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."
},
Original file line number Diff line number Diff line change
@@ -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.
Original file line number Diff line number Diff line change
@@ -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',
]);
});
});
});
8 changes: 0 additions & 8 deletions packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx
Original file line number Diff line number Diff line change
@@ -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.
Original file line number Diff line number Diff line change
@@ -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', () => {
8 changes: 0 additions & 8 deletions packages/x-data-grid/src/DataGrid/DataGrid.tsx
Original file line number Diff line number Diff line change
@@ -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.
Original file line number Diff line number Diff line change
@@ -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 }}
Original file line number Diff line number Diff line change
@@ -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 }}
Original file line number Diff line number Diff line change
@@ -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,
Loading

0 comments on commit 3fa5b49

Please sign in to comment.