[DataGridPro] Only apply checkboxSelectionVisibleOnly when pagination…

… is enabled (#2731)

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

@@ -27,7 +27,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/hooks/features/selection/useGridSelection.ts

@@ -236,6 +236,7 @@ export const useGridSelection = (apiRef: GridApiRef, props: GridComponentProps):
           hasChanged = true;
         }
       });
+
       if (hasChanged) {
         return { ...state, selection: Object.values(selectionLookup) };
       }

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

@@ -52,6 +52,7 @@ export interface GridOptions {
   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

@@ -56,7 +56,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/data-grid/src/tests/pagination.DataGrid.test.tsx

@@ -34,7 +34,7 @@ describe('<DataGrid /> - Pagination', () => {
     );
   };
 
-  describe('prop: page and onPageChange', () => {
+  describe('props: page and onPageChange', () => {
     it('should display the rows of page given in props', () => {
       render(<BaselineTestCase page={1} pageSize={1} rowsPerPageOptions={[1]} />);
       expect(getColumnValues()).to.deep.equal(['1']);
@@ -200,7 +200,7 @@ describe('<DataGrid /> - Pagination', () => {
     });
   });
 
-  describe('prop: pageSize and onPageSizeChange', () => {
+  describe('props: pageSize and onPageSizeChange', () => {
     it('should display the amount of rows given in props', () => {
       render(<BaselineTestCase page={0} pageSize={2} rowsPerPageOptions={[2]} />);
       expect(getColumnValues()).to.deep.equal(['0', '1']);
@@ -359,7 +359,7 @@ describe('<DataGrid /> - Pagination', () => {
     });
   });
 
-  describe('prop: autoPageSize', () => {
+  describe('props: autoPageSize', () => {
     before(function beforeHook() {
       if (isJSDOM) {
         // Need layouting