Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DataGrid] Remove indeterminateCheckboxAction prop #15522

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view

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
Expand Up @@ -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.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
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
Expand Up @@ -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" },
Expand Down
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
Expand Up @@ -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" },
Expand Down
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
Expand Up @@ -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" },
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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."
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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."
},
Expand Down
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
Expand Up @@ -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."
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Up @@ -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.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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', () => {
Expand Down Expand Up @@ -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
Expand All @@ -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', () => {
Expand Down Expand Up @@ -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', () => {
Expand Down
8 changes: 0 additions & 8 deletions packages/x-data-grid/src/DataGrid/DataGrid.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 }}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 }}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Loading