[DataGrid] Make checkboxSelection respect the disableMultipleRowSelection prop

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

@@ -121,6 +121,18 @@ describe('<DataGridPro /> - Row selection', () => {
       fireEvent.click(screen.getByRole('button', { name: /next page/i }));
       expect(selectAllCheckbox).to.have.attr('data-indeterminate', 'true');
     });
+
+    it('should not select more than one row when disableMultipleRowSelection = true', () => {
+      render(<TestDataGridSelection checkboxSelection disableMultipleRowSelection />);
+      const input1 = getCell(0, 0).querySelector('input')!;
+      fireEvent.click(input1);
+      expect(input1.checked).to.equal(true);
+
+      const input2 = getCell(1, 0).querySelector('input')!;
+      fireEvent.click(input2);
+      expect(input1.checked).to.equal(false);
+      expect(input2.checked).to.equal(true);
+    });
   });
 
   describe('prop: checkboxSelectionVisibleOnly = true', () => {

packages/grid/x-data-grid/src/DataGrid/useDataGridProps.ts

@@ -14,7 +14,6 @@ import { computeSlots, useProps } from '../internals/utils';
 const DATA_GRID_FORCED_PROPS: { [key in DataGridForcedPropsKey]?: DataGridProcessedProps[key] } = {
   disableMultipleColumnsFiltering: true,
   disableMultipleColumnsSorting: true,
-  disableMultipleRowSelection: true,
   throttleRowsMs: undefined,
   hideFooterRowCount: false,
   pagination: true,

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { isMultipleRowSelectionEnabled } from '../../hooks/features/rowSelection/utils';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { gridTabIndexColumnHeaderSelector } from '../../hooks/features/focus/gridFocusStateSelector';
 import { gridRowSelectionStateSelector } from '../../hooks/features/rowSelection/gridRowSelectionSelector';
@@ -138,6 +139,7 @@ const GridHeaderCheckbox = React.forwardRef<HTMLInputElement, GridColumnHeaderPa
         inputProps={{ 'aria-label': label }}
         tabIndex={tabIndex}
         onKeyDown={handleKeyDown}
+        disabled={!isMultipleRowSelectionEnabled(rootProps)}
         {...rootProps.slotProps?.baseCheckbox}
         {...other}
       />

packages/grid/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts

@@ -28,6 +28,7 @@ import { GridRowSelectionModel } from '../../../models';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../../../constants/gridDetailPanelToggleField';
 import { gridClasses } from '../../../constants/gridClasses';
 import { isEventTargetInPortal } from '../../../utils/domUtils';
+import { isMultipleRowSelectionEnabled } from './utils';
 
 const getSelectionModelPropValue = (
   selectionModelProp: DataGridProcessedProps['rowSelectionModel'],
@@ -109,12 +110,11 @@ export const useGridRowSelection = (
 
   const {
     checkboxSelection,
-    disableMultipleRowSelection,
     disableRowSelectionOnClick,
     isRowSelectable: propIsRowSelectable,
   } = props;
 
-  const canHaveMultipleSelection = !disableMultipleRowSelection || checkboxSelection;
+  const canHaveMultipleSelection = isMultipleRowSelectionEnabled(props);
   const visibleRows = useGridVisibleRows(apiRef, props);
 
   const expandMouseRowRangeSelection = React.useCallback(
@@ -150,7 +150,7 @@ export const useGridRowSelection = (
     (model) => {
       if (
         props.signature === GridSignature.DataGrid &&
-        !props.checkboxSelection &&
+        !canHaveMultipleSelection &&
         Array.isArray(model) &&
         model.length > 1
       ) {
@@ -171,7 +171,7 @@ export const useGridRowSelection = (
         apiRef.current.forceUpdate();
       }
     },
-    [apiRef, logger, props.rowSelection, props.signature, props.checkboxSelection],
+    [apiRef, logger, props.rowSelection, props.signature, canHaveMultipleSelection],
   );
 
   const isRowSelected = React.useCallback<GridRowSelectionApi['isRowSelected']>(
@@ -397,7 +397,7 @@ export const useGridRowSelection = (
         return;
       }
 
-      if (event.shiftKey && (canHaveMultipleSelection || checkboxSelection)) {
+      if (event.shiftKey && canHaveMultipleSelection) {
         expandMouseRowRangeSelection(params.id);
       } else {
         handleSingleRowSelection(params.id, event);
@@ -406,7 +406,6 @@ export const useGridRowSelection = (
     [
       disableRowSelectionOnClick,
       canHaveMultipleSelection,
-      checkboxSelection,
       apiRef,
       expandMouseRowRangeSelection,
       handleSingleRowSelection,
@@ -426,13 +425,13 @@ export const useGridRowSelection = (
     GridEventListener<'rowSelectionCheckboxChange'>
   >(
     (params, event) => {
-      if ((event.nativeEvent as any).shiftKey) {
+      if (canHaveMultipleSelection && (event.nativeEvent as any).shiftKey) {
         expandMouseRowRangeSelection(params.id);
       } else {
-        apiRef.current.selectRow(params.id, params.value);
+        apiRef.current.selectRow(params.id, params.value, !canHaveMultipleSelection);
       }
     },
-    [apiRef, expandMouseRowRangeSelection],
+    [apiRef, expandMouseRowRangeSelection, canHaveMultipleSelection],
   );
 
   const handleHeaderSelectionCheckboxChange = React.useCallback<

packages/grid/x-data-grid/src/hooks/features/rowSelection/utils.ts

@@ -0,0 +1,15 @@
+import type { DataGridProcessedProps } from '../../../models/props/DataGridProps';
+import { GridSignature } from '../../utils/useGridApiEventHandler';
+
+export function isMultipleRowSelectionEnabled(
+  props: Pick<
+    DataGridProcessedProps,
+    'signature' | 'disableMultipleRowSelection' | 'checkboxSelection'
+  >,
+) {
+  if (props.signature === GridSignature.DataGrid) {
+    // DataGrid Community has multiple row selection enabled only if checkbox selection is enabled.
+    return props.checkboxSelection && props.disableMultipleRowSelection !== true;
+  }
+  return !props.disableMultipleRowSelection;
+}

packages/grid/x-data-grid/src/hooks/utils/useGridAriaAttributes.tsx

@@ -7,6 +7,7 @@ import {
   gridRowCountSelector,
 } from '../features/rows/gridRowsSelector';
 import { useGridPrivateApiContext } from './useGridPrivateApiContext';
+import { isMultipleRowSelectionEnabled } from '../features/rowSelection/utils';
 
 export const useGridAriaAttributes = () => {
   const apiRef = useGridPrivateApiContext();
@@ -25,6 +26,6 @@ export const useGridAriaAttributes = () => {
     role,
     'aria-colcount': visibleColumns.length,
     'aria-rowcount': headerGroupingMaxDepth + 1 + pinnedRowsCount + totalRowCount,
-    'aria-multiselectable': !rootProps.disableMultipleRowSelection,
+    'aria-multiselectable': isMultipleRowSelectionEnabled(rootProps),
   };
 };

packages/grid/x-data-grid/src/models/props/DataGridProps.ts

@@ -78,7 +78,6 @@ export type DataGridForcedPropsKey =
   | 'checkboxSelectionVisibleOnly'
   | 'disableMultipleColumnsFiltering'
   | 'disableMultipleColumnsSorting'
-  | 'disableMultipleRowSelection'
   | 'disableColumnReorder'
   | 'disableColumnResize'
   | 'keepColumnPositionIfDraggedOutside'

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

@@ -342,6 +342,18 @@ describe('<DataGrid /> - Row selection', () => {
       expect(screen.queryByRole('checkbox', { name: 'Select row' })).to.equal(null);
       expect(screen.queryByRole('checkbox', { name: 'Unselect row' })).not.to.equal(null);
     });
+
+    it('should not select more than one row when disableMultipleRowSelection = true', () => {
+      render(<TestDataGridSelection checkboxSelection disableMultipleRowSelection />);
+      const input1 = getCell(0, 0).querySelector('input')!;
+      fireEvent.click(input1);
+      expect(input1.checked).to.equal(true);
+
+      const input2 = getCell(1, 0).querySelector('input')!;
+      fireEvent.click(input2);
+      expect(input1.checked).to.equal(false);
+      expect(input2.checked).to.equal(true);
+    });
   });
 
   describe('prop: checkboxSelection = true (multi selection), with keyboard events', () => {