- Row selection', () => {
});
});
+ describe('prop: rowSelectionPropagation = { descendants: false, parents: false }', () => {
+ function SelectionPropagationGrid(props: Partial
) {
+ return (
+
+ );
+ }
+
+ it('should select the parent only when selecting it', () => {
+ render();
+
+ fireEvent.click(getCell(1, 0).querySelector('input')!);
+ expect(apiRef.current.getSelectedRows()).to.have.keys([1]);
+ });
+
+ it('should deselect the parent only when deselecting it', () => {
+ render();
+
+ fireEvent.click(getCell(1, 0).querySelector('input')!);
+ fireEvent.click(getCell(2, 0).querySelector('input')!);
+ expect(apiRef.current.getSelectedRows()).to.have.keys([1, 2]);
+ fireEvent.click(getCell(1, 0).querySelector('input')!);
+ expect(apiRef.current.getSelectedRows()).to.have.keys([2]);
+ });
+
+ it('should not auto select the parent if all the children are selected', () => {
+ render();
+
+ fireEvent.click(getCell(2, 0).querySelector('input')!);
+ fireEvent.click(getCell(3, 0).querySelector('input')!);
+ fireEvent.click(getCell(4, 0).querySelector('input')!);
+ fireEvent.click(getCell(5, 0).querySelector('input')!);
+ fireEvent.click(getCell(6, 0).querySelector('input')!);
+ fireEvent.click(getCell(7, 0).querySelector('input')!);
+ // The parent row (Thomas, id: 1) should not be among the selected rows
+ expect(apiRef.current.getSelectedRows()).to.have.keys([2, 3, 4, 5, 6, 7]);
+ });
+
+ it('should not deselect selected parent if one of the children is deselected', () => {
+ render();
+
+ fireEvent.click(getCell(1, 0).querySelector('input')!);
+ fireEvent.click(getCell(2, 0).querySelector('input')!);
+ fireEvent.click(getCell(3, 0).querySelector('input')!);
+ fireEvent.click(getCell(4, 0).querySelector('input')!);
+ fireEvent.click(getCell(5, 0).querySelector('input')!);
+ fireEvent.click(getCell(6, 0).querySelector('input')!);
+ fireEvent.click(getCell(7, 0).querySelector('input')!);
+ expect(apiRef.current.getSelectedRows()).to.have.keys([1, 2, 3, 4, 5, 6, 7]);
+ fireEvent.click(getCell(2, 0).querySelector('input')!);
+ // The parent row (Thomas, id: 1) should still be among the selected rows
+ expect(apiRef.current.getSelectedRows()).to.have.keys([1, 3, 4, 5, 6, 7]);
+ });
+
+ it('should select only the unwrapped rows when clicking "Select All" checkbox', () => {
+ render();
+
+ fireEvent.click(screen.getByRole('checkbox', { name: /select all rows/i }));
+ expect(apiRef.current.getSelectedRows()).to.have.keys([0, 1, 8]);
+ });
+
+ it('should deselect only the unwrapped rows when clicking "Select All" checkbox', () => {
+ render();
+
+ fireEvent.click(screen.getByRole('checkbox', { name: /select all rows/i }));
+ expect(apiRef.current.getSelectedRows()).to.have.keys([0, 1, 8]);
+ fireEvent.click(screen.getByRole('checkbox', { name: /select all rows/i }));
+ expect(apiRef.current.getSelectedRows().size).to.equal(0);
+ });
+ });
+
+ describe('prop: rowSelectionPropagation = { descendants: true, parents: false }', () => {
+ function SelectionPropagationGrid(props: Partial) {
+ return (
+
+ );
+ }
+
+ it('should select all the children when selecting a parent', () => {
+ render();
+
+ fireEvent.click(getCell(1, 0).querySelector('input')!);
+ expect(apiRef.current.getSelectedRows()).to.have.keys([1, 2, 3, 4, 5, 6, 7]);
+ });
+
+ it('should deselect all the children when deselecting a parent', () => {
+ render();
+
+ fireEvent.click(getCell(1, 0).querySelector('input')!);
+ expect(apiRef.current.getSelectedRows()).to.have.keys([1, 2, 3, 4, 5, 6, 7]);
+ fireEvent.click(getCell(1, 0).querySelector('input')!);
+ expect(apiRef.current.getSelectedRows().size).to.equal(0);
+ });
+
+ it('should not auto select the parent if all the children are selected', () => {
+ render();
+
+ fireEvent.click(getCell(2, 0).querySelector('input')!);
+ fireEvent.click(getCell(3, 0).querySelector('input')!);
+ fireEvent.click(getCell(4, 0).querySelector('input')!);
+ fireEvent.click(getCell(5, 0).querySelector('input')!);
+ fireEvent.click(getCell(6, 0).querySelector('input')!);
+ fireEvent.click(getCell(7, 0).querySelector('input')!);
+ // The parent row (Thomas, id: 1) should not be among the selected rows
+ expect(apiRef.current.getSelectedRows()).to.have.keys([2, 3, 4, 5, 6, 7]);
+ });
+
+ it('should not deselect selected parent if one of the children is deselected', () => {
+ render();
+
+ fireEvent.click(getCell(1, 0).querySelector('input')!);
+ expect(apiRef.current.getSelectedRows()).to.have.keys([1, 2, 3, 4, 5, 6, 7]);
+ fireEvent.click(getCell(2, 0).querySelector('input')!);
+ // The parent row (Thomas, id: 1) should still be among the selected rows
+ expect(apiRef.current.getSelectedRows()).to.have.keys([1, 3, 4, 5, 6, 7]);
+ });
+
+ it('should select all the nested rows when clicking "Select All" checkbox', () => {
+ render();
+
+ fireEvent.click(screen.getByRole('checkbox', { name: /select all rows/i }));
+ expect(apiRef.current.getSelectedRows().size).to.equal(15);
+ });
+
+ it('should deselect all the nested rows when clicking "Select All" checkbox', () => {
+ render();
+
+ fireEvent.click(screen.getByRole('checkbox', { name: /select all rows/i }));
+ expect(apiRef.current.getSelectedRows().size).to.equal(15);
+ fireEvent.click(screen.getByRole('checkbox', { name: /select all rows/i }));
+ expect(apiRef.current.getSelectedRows().size).to.equal(0);
+ });
+
+ describe('prop: isRowSelectable', () => {
+ it("should not select a parent or it's descendants if not allowed", () => {
+ render(
+ params.id !== 1}
+ />,
+ );
+
+ fireEvent.click(getCell(1, 0).querySelector('input')!);
+ expect(apiRef.current.getSelectedRows().size).to.equal(0);
+ });
+
+ it('should not auto-select a descendant if not allowed', () => {
+ render(
+ params.id !== 2}
+ />,
+ );
+
+ fireEvent.click(getCell(1, 0).querySelector('input')!);
+ expect(apiRef.current.getSelectedRows()).to.have.keys([1, 3, 4, 5, 6, 7]);
+ });
+ });
+ });
+
+ describe('prop: rowSelectionPropagation = { descendants: false, parents: true }', () => {
+ function SelectionPropagationGrid(props: Partial) {
+ return (
+
+ );
+ }
+
+ it('should select the parent only when selecting it', () => {
+ render();
+
+ fireEvent.click(getCell(1, 0).querySelector('input')!);
+ expect(apiRef.current.getSelectedRows()).to.have.keys([1]);
+ });
+
+ it('should deselect the parent only when deselecting it', () => {
+ render();
+
+ fireEvent.click(getCell(1, 0).querySelector('input')!);
+ fireEvent.click(getCell(2, 0).querySelector('input')!);
+ expect(apiRef.current.getSelectedRows()).to.have.keys([1, 2]);
+ fireEvent.click(getCell(1, 0).querySelector('input')!);
+ expect(apiRef.current.getSelectedRows()).to.have.keys([2]);
+ });
+
+ it('should auto select the parent if all the children are selected', () => {
+ render();
+
+ fireEvent.click(getCell(2, 0).querySelector('input')!);
+ fireEvent.click(getCell(3, 0).querySelector('input')!);
+ fireEvent.click(getCell(4, 0).querySelector('input')!);
+ fireEvent.click(getCell(5, 0).querySelector('input')!);
+ fireEvent.click(getCell(6, 0).querySelector('input')!);
+ fireEvent.click(getCell(7, 0).querySelector('input')!);
+ // The parent row (Thomas, id: 1) should be among the selected rows
+ expect(apiRef.current.getSelectedRows()).to.have.keys([2, 3, 4, 5, 6, 7, 1]);
+ });
+
+ it('should deselect selected parent if one of the children is deselected', () => {
+ render();
+
+ fireEvent.click(getCell(2, 0).querySelector('input')!);
+ fireEvent.click(getCell(3, 0).querySelector('input')!);
+ fireEvent.click(getCell(4, 0).querySelector('input')!);
+ fireEvent.click(getCell(5, 0).querySelector('input')!);
+ fireEvent.click(getCell(6, 0).querySelector('input')!);
+ fireEvent.click(getCell(7, 0).querySelector('input')!);
+ expect(apiRef.current.getSelectedRows()).to.have.keys([2, 3, 4, 5, 6, 7, 1]);
+ fireEvent.click(getCell(2, 0).querySelector('input')!);
+ // The parent row (Thomas, id: 1) should not be among the selected rows
+ expect(apiRef.current.getSelectedRows()).to.have.keys([3, 4, 5, 6, 7]);
+ });
+
+ describe('prop: isRowSelectable', () => {
+ it('should not auto select a parent if not allowed', () => {
+ render(
+ params.id !== 1}
+ />,
+ );
+
+ fireEvent.click(getCell(2, 0).querySelector('input')!);
+ fireEvent.click(getCell(3, 0).querySelector('input')!);
+ fireEvent.click(getCell(4, 0).querySelector('input')!);
+ fireEvent.click(getCell(5, 0).querySelector('input')!);
+ fireEvent.click(getCell(6, 0).querySelector('input')!);
+ fireEvent.click(getCell(7, 0).querySelector('input')!);
+ // The parent row (Thomas, id: 1) should still not be among the selected rows
+ expect(apiRef.current.getSelectedRows()).to.have.keys([2, 3, 4, 5, 6, 7]);
+ });
+ });
+ });
+
+ describe('prop: rowSelectionPropagation = { descendants: true, parents: true }', () => {
+ function SelectionPropagationGrid(props: Partial) {
+ return (
+
+ );
+ }
+
+ it('should select all the children when selecting a parent', () => {
+ render();
+
+ fireEvent.click(getCell(1, 0).querySelector('input')!);
+ expect(apiRef.current.getSelectedRows()).to.have.keys([1, 2, 3, 4, 5, 6, 7]);
+ });
+
+ it('should deselect all the children when deselecting a parent', () => {
+ render();
+
+ fireEvent.click(getCell(1, 0).querySelector('input')!);
+ expect(apiRef.current.getSelectedRows()).to.have.keys([1, 2, 3, 4, 5, 6, 7]);
+ fireEvent.click(getCell(1, 0).querySelector('input')!);
+ expect(apiRef.current.getSelectedRows().size).to.equal(0);
+ });
+
+ it('should auto select the parent if all the children are selected', () => {
+ render();
+
+ fireEvent.click(getCell(9, 0).querySelector('input')!);
+ fireEvent.click(getCell(11, 0).querySelector('input')!);
+ fireEvent.click(getCell(12, 0).querySelector('input')!);
+
+ // The parent row (Mary, id: 8) should be among the selected rows
+ expect(apiRef.current.getSelectedRows()).to.have.keys([9, 10, 11, 12, 8, 13, 14]);
+ });
+
+ it('should deselect auto selected parent if one of the children is deselected', () => {
+ render();
+
+ fireEvent.click(getCell(9, 0).querySelector('input')!);
+ fireEvent.click(getCell(11, 0).querySelector('input')!);
+ fireEvent.click(getCell(12, 0).querySelector('input')!);
+ expect(apiRef.current.getSelectedRows()).to.have.keys([9, 10, 11, 12, 8, 13, 14]);
+ fireEvent.click(getCell(9, 0).querySelector('input')!);
+ 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(
+ ,
+ );
+
+ 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(
+ ,
+ );
+
+ 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);
+ });
+ });
+
+ describe('prop: keepNonExistentRowsSelected = true', () => {
+ it('should keep non-existent rows selected on filtering', () => {
+ render();
+
+ fireEvent.click(getCell(1, 0).querySelector('input')!);
+ expect(apiRef.current.getSelectedRows()).to.have.keys([1, 2, 3, 4, 5, 6, 7]);
+
+ act(() => {
+ apiRef.current.setFilterModel({
+ items: [
+ {
+ field: 'jobTitle',
+ value: 'Head of Human Resources',
+ operator: 'equals',
+ },
+ ],
+ });
+ });
+
+ fireEvent.click(getCell(0, 0).querySelector('input')!);
+
+ expect(apiRef.current.getSelectedRows()).to.have.keys([0, 1, 2, 3, 4, 5, 6, 7]);
+ });
+ });
+ });
+
describe('apiRef: getSelectedRows', () => {
it('should handle the event internally before triggering onRowSelectionModelChange', () => {
render(
diff --git a/packages/x-data-grid/src/components/columnSelection/GridCellCheckboxRenderer.tsx b/packages/x-data-grid/src/components/columnSelection/GridCellCheckboxRenderer.tsx
index 377713f3bb3b..5bfadd9b96f7 100644
--- a/packages/x-data-grid/src/components/columnSelection/GridCellCheckboxRenderer.tsx
+++ b/packages/x-data-grid/src/components/columnSelection/GridCellCheckboxRenderer.tsx
@@ -4,12 +4,14 @@ import {
unstable_composeClasses as composeClasses,
unstable_useForkRef as useForkRef,
} from '@mui/utils';
-import type { GridRenderCellParams } from '../../models/params/gridCellParams';
import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridSelector } from '../../hooks/utils/useGridSelector';
+import { getCheckboxPropsSelector } from '../../hooks/features/rowSelection/utils';
import type { DataGridProcessedProps } from '../../models/props/DataGridProps';
import type { GridRowSelectionCheckboxParams } from '../../models/params/gridRowSelectionCheckboxParams';
+import type { GridRenderCellParams } from '../../models/params/gridCellParams';
type OwnerState = { classes: DataGridProcessedProps['classes'] };
@@ -32,7 +34,6 @@ const GridCellCheckboxForwardRef = React.forwardRef,
): void => {
const logger = useGridLogger(apiRef, 'useGridSelection');
- const runIfRowSelectionIsEnabled =
+ const runIfRowSelectionIsEnabled = React.useCallback(
(callback: (...args: Args) => void) =>
- (...args: Args) => {
- if (props.rowSelection) {
- callback(...args);
- }
- };
+ (...args: Args) => {
+ if (props.rowSelection) {
+ callback(...args);
+ }
+ },
+ [props.rowSelection],
+ );
+
+ const applyAutoSelection =
+ props.signature !== GridSignature.DataGrid &&
+ (props.rowSelectionPropagation?.parents || props.rowSelectionPropagation?.descendants);
const propRowSelectionModel = React.useMemo(() => {
return getSelectionModelPropValue(
@@ -120,6 +129,8 @@ export const useGridRowSelection = (
const canHaveMultipleSelection = isMultipleRowSelectionEnabled(props);
const visibleRows = useGridVisibleRows(apiRef, props);
+ const tree = useGridSelector(apiRef, gridRowTreeSelector);
+ const isNestedData = useGridSelector(apiRef, gridRowMaximumTreeDepthSelector) > 1;
const expandMouseRowRangeSelection = React.useCallback(
(id: GridRowId) => {
@@ -147,7 +158,7 @@ export const useGridRowSelection = (
[apiRef],
);
- /**
+ /*
* API METHODS
*/
const setRowSelectionModel = React.useCallback(
@@ -219,24 +230,77 @@ export const useGridRowSelection = (
if (resetSelection) {
logger.debug(`Setting selection for row ${id}`);
- apiRef.current.setRowSelectionModel(isSelected ? [id] : []);
+ const newSelection: GridRowId[] = [];
+ const addRow = (rowId: GridRowId) => {
+ newSelection.push(rowId);
+ };
+ if (isSelected) {
+ addRow(id);
+ if (applyAutoSelection) {
+ findRowsToSelect(
+ apiRef,
+ tree,
+ id,
+ props.rowSelectionPropagation?.descendants ?? false,
+ props.rowSelectionPropagation?.parents ?? false,
+ addRow,
+ );
+ }
+ }
+
+ apiRef.current.setRowSelectionModel(newSelection);
} else {
logger.debug(`Toggling selection for row ${id}`);
const selection = gridRowSelectionStateSelector(apiRef.current.state);
- const newSelection: GridRowId[] = selection.filter((el) => el !== id);
+ const newSelection: Set = new Set(selection);
+ newSelection.delete(id);
+
+ const addRow = (rowId: GridRowId) => {
+ newSelection.add(rowId);
+ };
+ const removeRow = (rowId: GridRowId) => {
+ newSelection.delete(rowId);
+ };
if (isSelected) {
- newSelection.push(id);
+ addRow(id);
+ if (applyAutoSelection) {
+ findRowsToSelect(
+ apiRef,
+ tree,
+ id,
+ props.rowSelectionPropagation?.descendants ?? false,
+ props.rowSelectionPropagation?.parents ?? false,
+ addRow,
+ );
+ }
+ } else if (applyAutoSelection) {
+ findRowsToDeselect(
+ apiRef,
+ tree,
+ id,
+ props.rowSelectionPropagation?.descendants ?? false,
+ props.rowSelectionPropagation?.parents ?? false,
+ removeRow,
+ );
}
- const isSelectionValid = newSelection.length < 2 || canHaveMultipleSelection;
+ const isSelectionValid = newSelection.size < 2 || canHaveMultipleSelection;
if (isSelectionValid) {
- apiRef.current.setRowSelectionModel(newSelection);
+ apiRef.current.setRowSelectionModel(Array.from(newSelection));
}
}
},
- [apiRef, logger, canHaveMultipleSelection],
+ [
+ apiRef,
+ logger,
+ applyAutoSelection,
+ tree,
+ props.rowSelectionPropagation?.descendants,
+ props.rowSelectionPropagation?.parents,
+ canHaveMultipleSelection,
+ ],
);
const selectRows = React.useCallback(
@@ -247,18 +311,63 @@ export const useGridRowSelection = (
let newSelection: GridRowId[];
if (resetSelection) {
- newSelection = isSelected ? selectableIds : [];
+ if (isSelected) {
+ newSelection = selectableIds;
+ if (applyAutoSelection) {
+ const addRow = (rowId: GridRowId) => {
+ newSelection.push(rowId);
+ };
+ selectableIds.forEach((id) => {
+ findRowsToSelect(
+ apiRef,
+ tree,
+ id,
+ props.rowSelectionPropagation?.descendants ?? false,
+ props.rowSelectionPropagation?.parents ?? false,
+ addRow,
+ );
+ });
+ }
+ } else {
+ newSelection = [];
+ }
} else {
// We clone the existing object to avoid mutating the same object returned by the selector to others part of the project
const selectionLookup = {
...selectedIdsLookupSelector(apiRef),
};
+ const addRow = (rowId: GridRowId) => {
+ selectionLookup[rowId] = rowId;
+ };
+ const removeRow = (rowId: GridRowId) => {
+ delete selectionLookup[rowId];
+ };
selectableIds.forEach((id) => {
if (isSelected) {
selectionLookup[id] = id;
+ if (applyAutoSelection) {
+ findRowsToSelect(
+ apiRef,
+ tree,
+ id,
+ props.rowSelectionPropagation?.descendants ?? false,
+ props.rowSelectionPropagation?.parents ?? false,
+ addRow,
+ );
+ }
} else {
- delete selectionLookup[id];
+ removeRow(id);
+ if (applyAutoSelection) {
+ findRowsToDeselect(
+ apiRef,
+ tree,
+ id,
+ props.rowSelectionPropagation?.descendants ?? false,
+ props.rowSelectionPropagation?.parents ?? false,
+ removeRow,
+ );
+ }
}
});
@@ -270,7 +379,15 @@ export const useGridRowSelection = (
apiRef.current.setRowSelectionModel(newSelection);
}
},
- [apiRef, logger, canHaveMultipleSelection],
+ [
+ logger,
+ applyAutoSelection,
+ canHaveMultipleSelection,
+ apiRef,
+ tree,
+ props.rowSelectionPropagation?.descendants,
+ props.rowSelectionPropagation?.parents,
+ ],
);
const selectRowRange = React.useCallback(
@@ -322,31 +439,63 @@ export const useGridRowSelection = (
props.signature === GridSignature.DataGrid ? 'private' : 'public',
);
- /**
+ /*
* EVENTS
*/
- const removeOutdatedSelection = React.useCallback(() => {
- if (props.keepNonExistentRowsSelected) {
- return;
- }
- const currentSelection = gridRowSelectionStateSelector(apiRef.current.state);
- const filteredRowsLookup = gridFilteredRowsLookupSelector(apiRef);
-
- // We clone the existing object to avoid mutating the same object returned by the selector to others part of the project
- const selectionLookup = { ...selectedIdsLookupSelector(apiRef) };
+ const removeOutdatedSelection = React.useCallback(
+ (sortModelUpdated = false) => {
+ const currentSelection = gridRowSelectionStateSelector(apiRef.current.state);
+ const filteredRowsLookup = gridFilteredRowsLookupSelector(apiRef);
+
+ // We clone the existing object to avoid mutating the same object returned by the selector to others part of the project
+ const selectionLookup = { ...selectedIdsLookupSelector(apiRef) };
+
+ let hasChanged = false;
+ currentSelection.forEach((id: GridRowId) => {
+ if (filteredRowsLookup[id] === false) {
+ if (props.keepNonExistentRowsSelected) {
+ return;
+ }
+ delete selectionLookup[id];
+ hasChanged = true;
+ return;
+ }
+ if (!props.rowSelectionPropagation?.parents) {
+ return;
+ }
+ const node = tree[id];
+ if (node.type === 'group') {
+ const isAutoGenerated = (node as GridGroupNode).isAutoGenerated;
+ if (isAutoGenerated) {
+ delete selectionLookup[id];
+ hasChanged = true;
+ return;
+ }
+ // Keep previously selected tree data parents selected if all their children are filtered out
+ if (!node.children.every((childId) => filteredRowsLookup[childId] === false)) {
+ delete selectionLookup[id];
+ hasChanged = true;
+ }
+ }
+ });
- let hasChanged = false;
- currentSelection.forEach((id: GridRowId) => {
- if (!filteredRowsLookup[id]) {
- delete selectionLookup[id];
- hasChanged = true;
+ if (hasChanged || (isNestedData && !sortModelUpdated)) {
+ const newSelection = Object.values(selectionLookup);
+ if (isNestedData) {
+ apiRef.current.selectRows(newSelection, true, true);
+ } else {
+ apiRef.current.setRowSelectionModel(newSelection);
+ }
}
- });
-
- if (hasChanged) {
- apiRef.current.setRowSelectionModel(Object.values(selectionLookup));
- }
- }, [apiRef, props.keepNonExistentRowsSelected]);
+ },
+ [
+ apiRef,
+ isNestedData,
+ props.rowSelectionPropagation?.parents,
+ props.keepNonExistentRowsSelected,
+ tree,
+ ],
+ );
const handleSingleRowSelection = React.useCallback(
(id: GridRowId, event: React.MouseEvent | React.KeyboardEvent) => {
@@ -535,7 +684,7 @@ export const useGridRowSelection = (
useGridApiEventHandler(
apiRef,
'sortedRowsSet',
- runIfRowSelectionIsEnabled(removeOutdatedSelection),
+ runIfRowSelectionIsEnabled(() => removeOutdatedSelection(true)),
);
useGridApiEventHandler(
apiRef,
@@ -560,7 +709,7 @@ export const useGridRowSelection = (
);
useGridApiEventHandler(apiRef, 'cellKeyDown', runIfRowSelectionIsEnabled(handleCellKeyDown));
- /**
+ /*
* EFFECTS
*/
React.useEffect(() => {
@@ -604,4 +753,8 @@ export const useGridRowSelection = (
apiRef.current.setRowSelectionModel([]);
}
}, [apiRef, canHaveMultipleSelection, checkboxSelection, isStateControlled, props.rowSelection]);
+
+ React.useEffect(() => {
+ runIfRowSelectionIsEnabled(removeOutdatedSelection);
+ }, [removeOutdatedSelection, runIfRowSelectionIsEnabled]);
};
diff --git a/packages/x-data-grid/src/hooks/features/rowSelection/utils.ts b/packages/x-data-grid/src/hooks/features/rowSelection/utils.ts
index 908dc4260d1e..ba1ff85f77be 100644
--- a/packages/x-data-grid/src/hooks/features/rowSelection/utils.ts
+++ b/packages/x-data-grid/src/hooks/features/rowSelection/utils.ts
@@ -1,5 +1,102 @@
-import type { DataGridProcessedProps } from '../../../models/props/DataGridProps';
import { GridSignature } from '../../utils/useGridApiEventHandler';
+import { GRID_ROOT_GROUP_ID } from '../rows/gridRowsUtils';
+import { gridFilteredRowsLookupSelector } from '../filter/gridFilterSelector';
+import { gridSortedRowIdsSelector } from '../sorting/gridSortingSelector';
+import { selectedIdsLookupSelector } from './gridRowSelectionSelector';
+import { gridRowTreeSelector } from '../rows/gridRowsSelector';
+import { createSelector } from '../../../utils/createSelector';
+import type { GridGroupNode, GridRowId, GridRowTreeConfig } from '../../../models/gridRows';
+import type { DataGridProcessedProps } from '../../../models/props/DataGridProps';
+import type {
+ GridPrivateApiCommunity,
+ GridApiCommunity,
+} from '../../../models/api/gridApiCommunity';
+import type { GridRowSelectionPropagation } from '../../../models/gridRowSelectionModel';
+
+export const ROW_SELECTION_PROPAGATION_DEFAULT: GridRowSelectionPropagation = {
+ parents: false,
+ descendants: false,
+};
+
+function getGridRowGroupSelectableDescendants(
+ apiRef: React.MutableRefObject,
+ groupId: GridRowId,
+) {
+ const rowTree = gridRowTreeSelector(apiRef);
+ const sortedRowIds = gridSortedRowIdsSelector(apiRef);
+ const filteredRowsLookup = gridFilteredRowsLookupSelector(apiRef);
+ const groupNode = rowTree[groupId];
+ if (!groupNode || groupNode.type !== 'group') {
+ return [];
+ }
+
+ const descendants: GridRowId[] = [];
+
+ const startIndex = sortedRowIds.findIndex((id) => id === groupId) + 1;
+ for (
+ let index = startIndex;
+ index < sortedRowIds.length && rowTree[sortedRowIds[index]]?.depth > groupNode.depth;
+ index += 1
+ ) {
+ const id = sortedRowIds[index];
+ if (filteredRowsLookup[id] !== false && apiRef.current.isRowSelectable(id)) {
+ descendants.push(id);
+ }
+ }
+ return descendants;
+}
+
+// TODO v8: Use `createSelectorV8`
+export function getCheckboxPropsSelector(groupId: GridRowId, autoSelectParents: boolean) {
+ return createSelector(
+ gridRowTreeSelector,
+ gridSortedRowIdsSelector,
+ gridFilteredRowsLookupSelector,
+ selectedIdsLookupSelector,
+ (rowTree, sortedRowIds, filteredRowsLookup, rowSelectionLookup) => {
+ const groupNode = rowTree[groupId];
+ if (!groupNode || groupNode.type !== 'group') {
+ return {
+ isIndeterminate: false,
+ isChecked: rowSelectionLookup[groupId] === groupId,
+ };
+ }
+
+ if (rowSelectionLookup[groupId] === groupId) {
+ return {
+ isIndeterminate: false,
+ isChecked: true,
+ };
+ }
+
+ let selectableDescendentsCount = 0;
+ let selectedDescendentsCount = 0;
+ const startIndex = sortedRowIds.findIndex((id) => id === groupId) + 1;
+ for (
+ let index = startIndex;
+ index < sortedRowIds.length && rowTree[sortedRowIds[index]]?.depth > groupNode.depth;
+ index += 1
+ ) {
+ const id = sortedRowIds[index];
+ if (filteredRowsLookup[id] !== false) {
+ selectableDescendentsCount += 1;
+ if (rowSelectionLookup[id] !== undefined) {
+ selectedDescendentsCount += 1;
+ }
+ }
+ }
+ return {
+ isIndeterminate:
+ (selectedDescendentsCount > 0 && selectedDescendentsCount < selectableDescendentsCount) ||
+ (selectedDescendentsCount === selectableDescendentsCount &&
+ rowSelectionLookup[groupId] === undefined),
+ isChecked: autoSelectParents
+ ? selectedDescendentsCount > 0
+ : rowSelectionLookup[groupId] === groupId,
+ };
+ },
+ );
+}
export function isMultipleRowSelectionEnabled(
props: Pick<
@@ -13,3 +110,134 @@ export function isMultipleRowSelectionEnabled(
}
return !props.disableMultipleRowSelection;
}
+
+const getRowNodeParents = (tree: GridRowTreeConfig, id: GridRowId) => {
+ const parents: GridRowId[] = [];
+
+ let parent: GridRowId | null = id;
+
+ while (parent != null && parent !== GRID_ROOT_GROUP_ID) {
+ const node = tree[parent] as GridGroupNode;
+ if (!node) {
+ return parents;
+ }
+ parents.push(parent);
+ parent = node.parent;
+ }
+ return parents;
+};
+
+const getFilteredRowNodeSiblings = (
+ tree: GridRowTreeConfig,
+ filteredRows: Record,
+ id: GridRowId,
+) => {
+ const node = tree[id];
+ if (!node) {
+ return [];
+ }
+
+ const parent = node.parent;
+ if (parent == null) {
+ return [];
+ }
+
+ const parentNode = tree[parent] as GridGroupNode;
+
+ return parentNode.children.filter((childId) => childId !== id && filteredRows[childId]);
+};
+
+export const findRowsToSelect = (
+ apiRef: React.MutableRefObject,
+ tree: GridRowTreeConfig,
+ selectedRow: GridRowId,
+ autoSelectDescendants: boolean,
+ autoSelectParents: boolean,
+ addRow: (rowId: GridRowId) => void,
+) => {
+ const filteredRows = gridFilteredRowsLookupSelector(apiRef);
+ const selectedIdsLookup = selectedIdsLookupSelector(apiRef);
+ const selectedDescendants: Set = new Set([]);
+
+ if (!autoSelectDescendants && !autoSelectParents) {
+ return;
+ }
+
+ if (autoSelectDescendants) {
+ const rowNode = tree[selectedRow];
+
+ if (rowNode?.type === 'group') {
+ const descendants = getGridRowGroupSelectableDescendants(apiRef, selectedRow);
+ descendants.forEach((rowId) => {
+ addRow(rowId);
+ selectedDescendants.add(rowId);
+ });
+ }
+ }
+
+ if (autoSelectParents) {
+ const checkAllDescendantsSelected = (rowId: GridRowId): boolean => {
+ if (selectedIdsLookup[rowId] !== rowId && !selectedDescendants.has(rowId)) {
+ return false;
+ }
+ const node = tree[rowId];
+ if (node?.type !== 'group') {
+ return true;
+ }
+ return node.children.every(checkAllDescendantsSelected);
+ };
+
+ const traverseParents = (rowId: GridRowId) => {
+ const siblings: GridRowId[] = getFilteredRowNodeSiblings(tree, filteredRows, rowId);
+ if (siblings.length === 0 || siblings.every(checkAllDescendantsSelected)) {
+ const rowNode = tree[rowId] as GridGroupNode;
+ const parent = rowNode.parent;
+ if (
+ parent != null &&
+ parent !== GRID_ROOT_GROUP_ID &&
+ apiRef.current.isRowSelectable(parent)
+ ) {
+ addRow(parent);
+ selectedDescendants.add(parent);
+ traverseParents(parent);
+ }
+ }
+ };
+ traverseParents(selectedRow);
+ }
+};
+
+export const findRowsToDeselect = (
+ apiRef: React.MutableRefObject,
+ tree: GridRowTreeConfig,
+ deselectedRow: GridRowId,
+ autoSelectDescendants: boolean,
+ autoSelectParents: boolean,
+ removeRow: (rowId: GridRowId) => void,
+) => {
+ const selectedIdsLookup = selectedIdsLookupSelector(apiRef);
+
+ if (!autoSelectParents && !autoSelectDescendants) {
+ return;
+ }
+
+ if (autoSelectParents) {
+ const allParents = getRowNodeParents(tree, deselectedRow);
+ allParents.forEach((parent) => {
+ const isSelected = selectedIdsLookup[parent] === parent;
+ if (isSelected) {
+ removeRow(parent);
+ }
+ });
+ }
+
+ if (autoSelectDescendants) {
+ const rowNode = tree[deselectedRow];
+ if (rowNode?.type === 'group') {
+ const descendants = getGridRowGroupSelectableDescendants(apiRef, deselectedRow);
+ descendants.forEach((descendant) => {
+ removeRow(descendant);
+ });
+ }
+ }
+};
diff --git a/packages/x-data-grid/src/internals/index.ts b/packages/x-data-grid/src/internals/index.ts
index 6d0b8e5b91b6..7463a879c2f6 100644
--- a/packages/x-data-grid/src/internals/index.ts
+++ b/packages/x-data-grid/src/internals/index.ts
@@ -133,6 +133,7 @@ export {
useGridColumnResize,
columnResizeStateInitializer,
} from '../hooks/features/columnResize/useGridColumnResize';
+export { ROW_SELECTION_PROPAGATION_DEFAULT } from '../hooks/features/rowSelection/utils';
export { useTimeout } from '../hooks/utils/useTimeout';
export { useGridVisibleRows, getVisibleRows } from '../hooks/utils/useGridVisibleRows';
diff --git a/packages/x-data-grid/src/models/gridRowSelectionModel.ts b/packages/x-data-grid/src/models/gridRowSelectionModel.ts
index 599d21df8b8f..92b98a2b8dca 100644
--- a/packages/x-data-grid/src/models/gridRowSelectionModel.ts
+++ b/packages/x-data-grid/src/models/gridRowSelectionModel.ts
@@ -1,5 +1,10 @@
import { GridRowId } from './gridRows';
+export type GridRowSelectionPropagation = {
+ descendants?: boolean;
+ parents?: boolean;
+};
+
export type GridInputRowSelectionModel = readonly GridRowId[] | GridRowId;
export type GridRowSelectionModel = readonly GridRowId[];
diff --git a/packages/x-data-grid/src/models/props/DataGridProps.ts b/packages/x-data-grid/src/models/props/DataGridProps.ts
index 449f56046587..8d4495333596 100644
--- a/packages/x-data-grid/src/models/props/DataGridProps.ts
+++ b/packages/x-data-grid/src/models/props/DataGridProps.ts
@@ -33,6 +33,7 @@ import { GridColumnGroupingModel } from '../gridColumnGrouping';
import { GridPaginationMeta, GridPaginationModel } from '../gridPaginationProps';
import type { GridAutosizeOptions } from '../../hooks/features/columnResize';
import type { GridDataSource } from '../gridDataSource';
+import type { GridRowSelectionPropagation } from '../gridRowSelectionModel';
export interface GridExperimentalFeatures {
/**
@@ -827,10 +828,23 @@ export interface DataGridPropsWithoutDefaultValue