[DataGridPro] Only apply checkboxSelectionVisibleOnly when pagination…

… is enabled (#2443)

* [DataGridPro] Only apply checkboxSelectionVisibleOnly when pagination is enabled

docs/pages/api-docs/data-grid/data-grid-pro.md

@@ -25,7 +25,7 @@ The name <code>MuiDataGridPro</code> can be used when providing [default props](
 | <span class="prop-name">autoHeight</span> | <span class="prop-type">boolean</span> | false | If `true`, the grid height is dynamic and follow the number of rows in the grid. |
 | <span class="prop-name">autoPageSize</span> | <span class="prop-type">boolean</span> | false | If `true`, the pageSize is calculated according to the container size and the max number of rows to avoid rendering a vertical scroll bar. |
 | <span class="prop-name">checkboxSelection</span> | <span class="prop-type">boolean</span> | false | If `true`, the grid get a first column with a checkbox that allows to select rows. |
-| <span class="prop-name">checkboxSelectionVisibleOnly</span> | <span class="prop-type">boolean</span> | false | If `true`, the "Select All" header checkbox selects only the rows on the current page. To be used in combination with `checkboxSelection`. |
+| <span class="prop-name">checkboxSelectionVisibleOnly</span> | <span class="prop-type">boolean</span> | false | If `true`, the "Select All" header checkbox selects only the rows on the current page. To be used in combination with `checkboxSelection`. It only works if the pagination is enabled. |
 | <span class="prop-name">classes</span> | <span class="prop-type">GridClasses</span> |   | Override or extend the styles applied to the component. See [CSS API](/api/data-grid/x-grid/#css) below for more details. |
 | <span class="prop-name">className</span> | <span class="prop-type">string</span> |   | CSS classname to add on the outer container. |
 | <span class="prop-name">columnBuffer</span> | <span class="prop-type">number</span> | 2 | Number of columns rendered outside the grid viewport. |

packages/grid/_modules_/grid/components/columnSelection/GridHeaderCheckbox.tsx

@@ -36,7 +36,11 @@ export const GridHeaderCheckbox = React.forwardRef<HTMLInputElement, GridColumnH
 
     const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
       const checked = event.target.checked;
-      const rowsToBeSelected = rootProps.checkboxSelectionVisibleOnly
+
+      const shouldLimitSelectionToCurrentPage =
+        rootProps.checkboxSelectionVisibleOnly && rootProps.pagination;
+
+      const rowsToBeSelected = shouldLimitSelectionToCurrentPage
         ? gridPaginatedVisibleSortedGridRowIdsSelector(apiRef.current.state)
         : visibleSortedGridRowIdsSelector(apiRef.current.state);
       apiRef.current.selectRows(rowsToBeSelected, checked, !event.target.indeterminate);

packages/grid/_modules_/grid/models/gridOptions.tsx

@@ -53,6 +53,7 @@ export interface GridSimpleOptions {
   checkboxSelection: boolean;
   /**
    * If `true`, the "Select All" header checkbox selects only the rows on the current page. To be used in combination with `checkboxSelection`.
+   * It only works if the pagination is enabled.
    * @default false
    */
   checkboxSelectionVisibleOnly: boolean;

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

@@ -53,7 +53,7 @@ DataGrid.propTypes = {
     return null;
   }),
   checkboxSelectionVisibleOnly: chainPropTypes(PropTypes.bool, (props: any) => {
-    if (props.checkboxSelectionVisibleOnly === true) {
+    if (props.checkboxSelectionVisibleOnly) {
       return new Error(
         [
           `Material-UI: \`<DataGrid checkboxSelectionVisibleOnly={true} />\` is not a valid prop.`,

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { LicenseInfo } from '@mui/x-license-pro';
-import { ponyfillGlobal } from '@material-ui/utils';
+import { chainPropTypes, ponyfillGlobal } from '@material-ui/utils';
 import {
   GridBody,
   GridErrorHandler,
@@ -57,4 +57,12 @@ export const DataGridPro = React.memo(DataGridProRaw);
 DataGridProRaw.propTypes = {
   columns: PropTypes.array.isRequired,
   rows: PropTypes.array.isRequired,
+  checkboxSelectionVisibleOnly: chainPropTypes(PropTypes.bool, (props: any) => {
+    if (!props.pagination && props.checkboxSelectionVisibleOnly) {
+      return new Error(
+        'Material-UI: The `checkboxSelectionVisibleOnly` prop has no effect when the pagination is not enabled.',
+      );
+    }
+    return null;
+  }),
 } as any;

packages/grid/x-grid/src/tests/selection.DataGridPro.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { getColumnValues, getRow, getSelectedRowIndexes } from 'test/utils/helperFn';
+import { getColumnValues, getSelectedRowIndexes } from 'test/utils/helperFn';
 import {
   // @ts-expect-error need to migrate helpers to TypeScript
   screen,
@@ -26,23 +26,24 @@ describe('<DataGridPro /> - Selection', () => {
 
   let apiRef: GridApiRef;
 
-  const defaultData = getData(4, 2);
-
-  const TestDataGridSelection = (
-    props: Omit<DataGridProProps, 'rows' | 'columns' | 'apiRef'> &
-      Partial<Pick<DataGridProProps, 'rows' | 'columns'>>,
-  ) => {
+  const TestDataGridSelection = ({
+    rowLength = 4,
+    ...other
+  }: Omit<DataGridProProps, 'rows' | 'columns' | 'apiRef'> &
+    Partial<Pick<DataGridProProps, 'rows' | 'columns'>> & { rowLength?: number }) => {
     apiRef = useGridApiRef();
 
+    const data = React.useMemo(() => getData(rowLength, 2), [rowLength]);
+
     return (
       <div style={{ width: 300, height: 300 }}>
-        <DataGridPro {...defaultData} {...props} apiRef={apiRef} autoHeight={isJSDOM} />
+        <DataGridPro {...data} {...other} apiRef={apiRef} autoHeight={isJSDOM} />
       </div>
     );
   };
 
   describe('prop: checkboxSelectionVisibleOnly', () => {
-    it('should select all visible rows regardless of pagination if checkboxSelectionVisibleOnly = false', () => {
+    it('should select all visible rows of all pages if checkboxSelectionVisibleOnly = false', () => {
       render(
         <TestDataGridSelection
           checkboxSelection
@@ -53,12 +54,10 @@ describe('<DataGridPro /> - Selection', () => {
       );
       const selectAllCheckbox = document.querySelector('input[type="checkbox"]');
       fireEvent.click(selectAllCheckbox);
-      expect(getRow(0)).to.have.class('Mui-selected');
-      fireEvent.click(screen.getByRole('button', { name: /next page/i }));
-      expect(getRow(1)).to.have.class('Mui-selected');
+      expect(apiRef.current.getSelectedRows()).to.have.length(4);
     });
 
-    it('should select all visible rows of the current page if checkboxSelectionVisibleOnly = true', () => {
+    it('should select all visible rows of the current page if checkboxSelectionVisibleOnly = true and pagination is enabled', () => {
       render(
         <TestDataGridSelection
           checkboxSelection
@@ -70,9 +69,37 @@ describe('<DataGridPro /> - Selection', () => {
       );
       const selectAllCheckbox = document.querySelector('input[type="checkbox"]');
       fireEvent.click(selectAllCheckbox);
-      expect(getRow(0)).to.have.class('Mui-selected');
-      fireEvent.click(screen.getByRole('button', { name: /next page/i }));
-      expect(getRow(1)).not.to.have.class('Mui-selected');
+      expect(apiRef.current.getSelectedRows()).to.have.keys([0]);
+    });
+
+    it('should select all rows when if checkboxSelectionVisibleOnly = false and pagination is not enabled', () => {
+      const rowLength = 10;
+
+      render(
+        <TestDataGridSelection
+          checkboxSelection
+          checkboxSelectionVisibleOnly={false}
+          rowLength={rowLength}
+        />,
+      );
+
+      const selectAll = screen.getByRole('checkbox', {
+        name: /select all rows checkbox/i,
+      });
+      fireEvent.click(selectAll);
+      expect(apiRef.current.getSelectedRows()).to.have.length(rowLength);
+    });
+
+    it('should throw a console error if checkboxSelectionVisibleOnly is used without pagination', () => {
+      expect(() => {
+        render(
+          <TestDataGridSelection checkboxSelection checkboxSelectionVisibleOnly rowLength={100} />,
+        );
+      })
+        // @ts-expect-error need to migrate helpers to TypeScript
+        .toErrorDev(
+          'Material-UI: The `checkboxSelectionVisibleOnly` prop has no effect when the pagination is not enabled.',
+        );
     });
   });
 
@@ -81,12 +108,12 @@ describe('<DataGridPro /> - Selection', () => {
       render(
         <TestDataGridSelection
           onSelectionModelChange={(model) => {
-            expect(apiRef.current.getSelectedRows().size).to.equal(1);
+            expect(apiRef.current.getSelectedRows()).to.have.length(1);
             expect(model).to.deep.equal([1]);
           }}
         />,
       );
-      expect(apiRef.current.getSelectedRows().size).to.equal(0);
+      expect(apiRef.current.getSelectedRows()).to.have.length(0);
       apiRef.current.selectRow(1);
       expect(apiRef.current.getSelectedRows().get(1)).to.deep.equal({
         id: 1,