Merge branch 'master' into allow-non-mit-props-in-mit

.circleci/config.yml

@@ -229,7 +229,7 @@ jobs:
           name: Tests TypeScript definitions
           command: yarn typescript:ci
           environment:
-            NODE_OPTIONS: --max-old-space-size=3072
+            NODE_OPTIONS: --max-old-space-size=2048
   test_e2e:
     <<: *default-job
     docker:

.github/workflows/cherry-pick-master-to-v6.yml

@@ -0,0 +1,34 @@
+name: Cherry pick master to v6
+
+on:
+  pull_request_target:
+    branches:
+      - master
+    types: ['closed']
+
+permissions: {}
+
+jobs:
+  cherry_pick_to_v6:
+    runs-on: ubuntu-latest
+    name: Cherry pick into v6
+    permissions:
+      pull-requests: write
+      contents: write
+    if: ${{ contains(github.event.pull_request.labels.*.name, 'needs cherry-pick') && github.event.pull_request.merged == true }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
+        with:
+          fetch-depth: 0
+      - name: Cherry pick and create the new PR
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        uses: carloscastrojumo/github-cherry-pick-action@a145da1b8142e752d3cbc11aaaa46a535690f0c5 # v1.0.9
+        with:
+          branch: v6.x
+          body: 'Cherry-pick of #{old_pull_request_id}'
+          cherry-pick-branch: ${{ format('cherry-pick-{0}', github.event.number) }}
+          title: '{old_title} (@${{ github.event.pull_request.user.login }})'
+          labels: |
+            cherry-pick

docs/data/data-grid/row-selection/CheckboxSelectionVisibleOnlyGrid.js

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { DataGridPro } from '@mui/x-data-grid-pro';
+import { useDemoData } from '@mui/x-data-grid-generator';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Switch from '@mui/material/Switch';
+import Box from '@mui/material/Box';
+
+export default function CheckboxSelectionVisibleOnlyGrid() {
+  const [checkboxSelectionVisibleOnly, setCheckboxSelectionVisibleOnly] =
+    React.useState(false);
+
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 300,
+    maxColumns: 5,
+  });
+
+  return (
+    <div style={{ width: '100%' }}>
+      <Box sx={{ mb: 1 }}>
+        <FormControlLabel
+          label="checkboxSelectionVisibleOnly"
+          control={
+            <Switch
+              checked={checkboxSelectionVisibleOnly}
+              onChange={(event) =>
+                setCheckboxSelectionVisibleOnly(event.target.checked)
+              }
+            />
+          }
+        />
+      </Box>
+      <div style={{ height: 400 }}>
+        <DataGridPro
+          {...data}
+          initialState={{
+            ...data.initialState,
+            pagination: { paginationModel: { pageSize: 50 } },
+          }}
+          pageSizeOptions={[5, 10, 25, 50, 100]}
+          pagination
+          checkboxSelection
+          checkboxSelectionVisibleOnly={checkboxSelectionVisibleOnly}
+        />
+      </div>
+    </div>
+  );
+}

docs/data/data-grid/row-selection/CheckboxSelectionVisibleOnlyGrid.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { DataGridPro } from '@mui/x-data-grid-pro';
+import { useDemoData } from '@mui/x-data-grid-generator';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Switch from '@mui/material/Switch';
+import Box from '@mui/material/Box';
+
+export default function CheckboxSelectionVisibleOnlyGrid() {
+  const [checkboxSelectionVisibleOnly, setCheckboxSelectionVisibleOnly] =
+    React.useState(false);
+
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 300,
+    maxColumns: 5,
+  });
+
+  return (
+    <div style={{ width: '100%' }}>
+      <Box sx={{ mb: 1 }}>
+        <FormControlLabel
+          label="checkboxSelectionVisibleOnly"
+          control={
+            <Switch
+              checked={checkboxSelectionVisibleOnly}
+              onChange={(event) =>
+                setCheckboxSelectionVisibleOnly(event.target.checked)
+              }
+            />
+          }
+        />
+      </Box>
+      <div style={{ height: 400 }}>
+        <DataGridPro
+          {...data}
+          initialState={{
+            ...data.initialState,
+            pagination: { paginationModel: { pageSize: 50 } },
+          }}
+          pageSizeOptions={[5, 10, 25, 50, 100]}
+          pagination
+          checkboxSelection
+          checkboxSelectionVisibleOnly={checkboxSelectionVisibleOnly}
+        />
+      </div>
+    </div>
+  );
+}

docs/data/data-grid/row-selection/row-selection.md

@@ -64,6 +64,13 @@ Always set the `checkboxSelection` prop to `true` even when providing a custom c
 Otherwise, the data grid might remove your column.
 :::
 
+### 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.
+If you want to change this behavior and only select the rows that are currently visible on the page, you can use the `checkboxSelectionVisibleOnly` prop.
+
+{{"demo": "CheckboxSelectionVisibleOnlyGrid.js", "bg": "inline"}}
+
 ## Usage with server-side pagination
 
 Using the controlled selection with `paginationMode="server"` may result in selected rows being lost when the page is changed.