Merge branch 'mui:master' into master

mui · Oct 4, 2024 · 8b217ec · 8b217ec
2 parents ec328fa + eb5b6fd
commit 8b217ec
Show file tree

Hide file tree

Showing 57 changed files with 1,600 additions and 300 deletions.
diff --git a/docs/data/charts/bars/BorderRadius.js b/docs/data/charts/bars/BorderRadius.js
@@ -19,7 +19,7 @@ export default function BorderRadius() {
           <Typography gutterBottom>Border Radius</Typography>
           <Slider
             value={radius}
-            onChange={(e, v) => setRadius(v)}
+            onChange={(event, value) => setRadius(value)}
             valueLabelDisplay="auto"
             min={0}
             max={50}

diff --git a/docs/data/charts/bars/BorderRadius.tsx b/docs/data/charts/bars/BorderRadius.tsx
@@ -19,7 +19,7 @@ export default function BorderRadius() {
           <Typography gutterBottom>Border Radius</Typography>
           <Slider
             value={radius}
-            onChange={(e, v) => setRadius(v as number)}
+            onChange={(event, value) => setRadius(value as number)}
             valueLabelDisplay="auto"
             min={0}
             max={50}

diff --git a/docs/data/data-grid/row-grouping/RowGroupingPropagateSelection.js b/docs/data/data-grid/row-grouping/RowGroupingPropagateSelection.js
@@ -0,0 +1,72 @@
+import * as React from 'react';
+import {
+  DataGridPremium,
+  useGridApiRef,
+  useKeepGroupedColumnsHidden,
+} from '@mui/x-data-grid-premium';
+import { useMovieData } from '@mui/x-data-grid-generator';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import Stack from '@mui/material/Stack';
+
+export default function RowGroupingPropagateSelection() {
+  const data = useMovieData();
+  const apiRef = useGridApiRef();
+  const [rowSelectionPropagation, setRowSelectionPropagation] = React.useState({
+    parents: true,
+    descendants: true,
+  });
+
+  const initialState = useKeepGroupedColumnsHidden({
+    apiRef,
+    initialState: {
+      rowGrouping: {
+        model: ['company', 'director'],
+      },
+    },
+  });
+
+  return (
+    <div style={{ width: '100%' }}>
+      <Stack direction="row" spacing={2}>
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={rowSelectionPropagation.descendants}
+              onChange={(event) =>
+                setRowSelectionPropagation((prev) => ({
+                  ...prev,
+                  descendants: event.target.checked,
+                }))
+              }
+            />
+          }
+          label="Auto select descendants"
+        />
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={rowSelectionPropagation.parents}
+              onChange={(event) =>
+                setRowSelectionPropagation((prev) => ({
+                  ...prev,
+                  parents: event.target.checked,
+                }))
+              }
+            />
+          }
+          label="Auto select parents"
+        />
+      </Stack>
+      <div style={{ height: 400 }}>
+        <DataGridPremium
+          {...data}
+          apiRef={apiRef}
+          initialState={initialState}
+          checkboxSelection
+          rowSelectionPropagation={rowSelectionPropagation}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/docs/data/data-grid/row-grouping/RowGroupingPropagateSelection.tsx b/docs/data/data-grid/row-grouping/RowGroupingPropagateSelection.tsx
@@ -0,0 +1,74 @@
+import * as React from 'react';
+import {
+  DataGridPremium,
+  useGridApiRef,
+  useKeepGroupedColumnsHidden,
+  GridRowSelectionPropagation,
+} from '@mui/x-data-grid-premium';
+import { useMovieData } from '@mui/x-data-grid-generator';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import Stack from '@mui/material/Stack';
+
+export default function RowGroupingPropagateSelection() {
+  const data = useMovieData();
+  const apiRef = useGridApiRef();
+  const [rowSelectionPropagation, setRowSelectionPropagation] =
+    React.useState<GridRowSelectionPropagation>({
+      parents: true,
+      descendants: true,
+    });
+
+  const initialState = useKeepGroupedColumnsHidden({
+    apiRef,
+    initialState: {
+      rowGrouping: {
+        model: ['company', 'director'],
+      },
+    },
+  });
+
+  return (
+    <div style={{ width: '100%' }}>
+      <Stack direction="row" spacing={2}>
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={rowSelectionPropagation.descendants}
+              onChange={(event) =>
+                setRowSelectionPropagation((prev) => ({
+                  ...prev,
+                  descendants: event.target.checked,
+                }))
+              }
+            />
+          }
+          label="Auto select descendants"
+        />
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={rowSelectionPropagation.parents}
+              onChange={(event) =>
+                setRowSelectionPropagation((prev) => ({
+                  ...prev,
+                  parents: event.target.checked,
+                }))
+              }
+            />
+          }
+          label="Auto select parents"
+        />
+      </Stack>
+      <div style={{ height: 400 }}>
+        <DataGridPremium
+          {...data}
+          apiRef={apiRef}
+          initialState={initialState}
+          checkboxSelection
+          rowSelectionPropagation={rowSelectionPropagation}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/docs/data/data-grid/row-grouping/row-grouping.md b/docs/data/data-grid/row-grouping/row-grouping.md
@@ -305,6 +305,50 @@ In the example below:
 If you are dynamically switching the `leafField` or `mainGroupingCriteria`, the sorting and filtering models will not be cleaned up automatically, and the sorting/filtering will not be re-applied.
 :::
 
+## Automatic parents and children selection
+
+By default, selecting a parent row does not select its children.
+You can override this behavior by using the `rowSelectionPropagation` prop.
+
+Here's how it's structured:
+
+```ts
+type GridRowSelectionPropagation = {
+  descendants?: boolean; // default: false
+  parents?: boolean; // default: false
+};
+```
+
+When `rowSelectionPropagation.descendants` is set to `true`.
+
+- Selecting a parent would auto-select all its filtered descendants.
+- Deselecting a parent row would auto-deselect all its filtered descendants.
+
+When `rowSelectionPropagation.parents` is set to `true`.
+
+- Selecting all the filtered descendants of a parent would auto-select the parent.
+- Deselecting a descendant of a selected parent would auto-deselect the parent.
+
+The example below demonstrates the usage of the `rowSelectionPropagation` prop.
+
+{{"demo": "RowGroupingPropagateSelection.js", "bg": "inline", "defaultCodeOpen": false}}
+
+:::info
+The row selection propagation also affects the "Select all" checkbox like any other group checkbox.
+:::
+
+:::info
+The selected rows that do not pass the filtering criteria are automatically deselected when the filter is applied. Row selection propagation is not applied to the unfiltered rows.
+:::
+
+:::warning
+If `props.disableMultipleRowSelection` is set to `true`, the row selection propagation doesn't apply.
+:::
+
+:::warning
+Row selection propagation is a client-side feature and is not supported with the [server-side data source](/x/react-data-grid/server-side-data/).
+:::
+
 ## Get the rows in a group
 
 You can use the `apiRef.current.getRowGroupChildren` method to get the id of all rows contained in a group.

diff --git a/docs/data/data-grid/server-side-data/ServerSideErrorHandling.js b/docs/data/data-grid/server-side-data/ServerSideErrorHandling.js
@@ -104,7 +104,9 @@ export default function ServerSideErrorHandling() {
         <DataGridPro
           {...props}
           unstable_dataSource={dataSource}
-          unstable_onDataSourceError={(e) => setError(e.message)}
+          unstable_onDataSourceError={(dataSourceError) =>
+            setError(dataSourceError.message)
+          }
           unstable_dataSourceCache={null}
           apiRef={apiRef}
           pagination

diff --git a/docs/data/data-grid/server-side-data/ServerSideErrorHandling.tsx b/docs/data/data-grid/server-side-data/ServerSideErrorHandling.tsx
@@ -110,7 +110,9 @@ export default function ServerSideErrorHandling() {
         <DataGridPro
           {...props}
           unstable_dataSource={dataSource}
-          unstable_onDataSourceError={(e) => setError(e.message)}
+          unstable_onDataSourceError={(dataSourceError) =>
+            setError(dataSourceError.message)
+          }
           unstable_dataSourceCache={null}
           apiRef={apiRef}
           pagination

diff --git a/docs/data/data-grid/server-side-data/ServerSideTreeDataErrorHandling.js b/docs/data/data-grid/server-side-data/ServerSideTreeDataErrorHandling.js
@@ -89,12 +89,12 @@ export default function ServerSideTreeDataErrorHandling() {
           {...props}
           treeData
           unstable_dataSource={dataSource}
-          unstable_onDataSourceError={(e, params) => {
+          unstable_onDataSourceError={(error, params) => {
             if (!params.groupKeys || params.groupKeys.length === 0) {
-              setRootError(e.message);
+              setRootError(error.message);
             } else {
               setChildrenError(
-                `${e.message} (Requested level: ${params.groupKeys.join(' > ')})`,
+                `${error.message} (Requested level: ${params.groupKeys.join(' > ')})`,
               );
             }
           }}

diff --git a/docs/data/data-grid/server-side-data/ServerSideTreeDataErrorHandling.tsx b/docs/data/data-grid/server-side-data/ServerSideTreeDataErrorHandling.tsx
@@ -94,12 +94,12 @@ export default function ServerSideTreeDataErrorHandling() {
           {...props}
           treeData
           unstable_dataSource={dataSource}
-          unstable_onDataSourceError={(e, params) => {
+          unstable_onDataSourceError={(error, params) => {
             if (!params.groupKeys || params.groupKeys.length === 0) {
-              setRootError(e.message);
+              setRootError(error.message);
             } else {
               setChildrenError(
-                `${e.message} (Requested level: ${params.groupKeys.join(' > ')})`,
+                `${error.message} (Requested level: ${params.groupKeys.join(' > ')})`,
               );
             }
           }}

diff --git a/docs/data/data-grid/tree-data/tree-data.md b/docs/data/data-grid/tree-data/tree-data.md
@@ -87,6 +87,10 @@ If you want to access the grouping column field, for instance, to use it with co
 
 Same behavior as for the [Row grouping](/x/react-data-grid/row-grouping/#group-expansion).
 
+## Automatic parents and children selection
+
+Same behavior as for the [Row grouping](/x/react-data-grid/row-grouping/#automatic-parents-and-children-selection).
+
 ## Gaps in the tree
 
 If some entries are missing to build the full tree, the `DataGridPro` will automatically create rows to fill those gaps.

diff --git a/docs/pages/x/api/data-grid/data-grid-premium.json b/docs/pages/x/api/data-grid/data-grid-premium.json
@@ -601,6 +601,10 @@
         "description": "Array&lt;number<br>&#124;&nbsp;string&gt;<br>&#124;&nbsp;number<br>&#124;&nbsp;string"
       }
     },
+    "rowSelectionPropagation": {
+      "type": { "name": "shape", "description": "{ descendants?: bool, parents?: bool }" },
+      "default": "{ parents: false, descendants: false }"
+    },
     "rowsLoadingMode": {
       "type": { "name": "enum", "description": "'client'<br>&#124;&nbsp;'server'" }
     },

diff --git a/docs/pages/x/api/data-grid/data-grid-pro.json b/docs/pages/x/api/data-grid/data-grid-pro.json
@@ -536,6 +536,10 @@
         "description": "Array&lt;number<br>&#124;&nbsp;string&gt;<br>&#124;&nbsp;number<br>&#124;&nbsp;string"
       }
     },
+    "rowSelectionPropagation": {
+      "type": { "name": "shape", "description": "{ descendants?: bool, parents?: bool }" },
+      "default": "{ parents: false, descendants: false }"
+    },
     "rowsLoadingMode": {
       "type": { "name": "enum", "description": "'client'<br>&#124;&nbsp;'server'" }
     },

diff --git a/docs/src/modules/components/CustomizationPlayground.tsx b/docs/src/modules/components/CustomizationPlayground.tsx
@@ -134,7 +134,7 @@ const StyledTabs = styled(Tabs)(({ theme }) => ({
 
 type TabsProps = {
   value: string;
-  onChange: (e: React.SyntheticEvent, value: any) => void;
+  onChange: (event: React.SyntheticEvent, value: any) => void;
   options: Partial<CustomizationLabelType>;
 };
 

diff --git a/docs/src/modules/components/overview/Internationalization.tsx b/docs/src/modules/components/overview/Internationalization.tsx
@@ -102,7 +102,7 @@ function TimezonesDemo() {
   const brandingTheme = useTheme();
   const theme = createTheme({ palette: { mode: brandingTheme.palette.mode } });
 
-  const handleContinentClick: ContinentClickHandler = (e, newTimezone) => {
+  const handleContinentClick: ContinentClickHandler = (event, newTimezone) => {
     if (selectedTimezone === newTimezone) {
       setSelectedTimezone(null);
     } else {

diff --git a/docs/src/modules/components/overview/Keyboard.tsx b/docs/src/modules/components/overview/Keyboard.tsx
@@ -410,20 +410,20 @@ export default function Keyboard() {
   const brandingTheme = useTheme();
   const theme = createTheme({ palette: { mode: brandingTheme.palette.mode } });
 
-  const handleKeySelection = (e: React.SyntheticEvent, key: SelectedKey | null) => {
+  const handleKeySelection = (event: React.SyntheticEvent, key: SelectedKey | null) => {
     const sectionContent = (ref.current as any).querySelector(
       `.MuiPickersSectionList-section[data-sectionindex="${selectedSection.current || 0}"] .MuiPickersSectionList-sectionContent`,
     );
     sectionContent.focus();
 
     if (key) {
-      const event = new KeyboardEvent('keydown', {
+      const keydownEvent = new KeyboardEvent('keydown', {
         ...key,
         bubbles: true,
         cancelable: true,
       });
 
-      sectionContent.dispatchEvent(event);
+      sectionContent.dispatchEvent(keydownEvent);
 
       if (key.key === 'Backspace') {
         sectionContent.textContent = '';

diff --git a/docs/src/modules/components/overview/WorldMapSvg.tsx b/docs/src/modules/components/overview/WorldMapSvg.tsx
diff --git a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json
@@ -187,7 +187,7 @@
     "groupingColDef": { "description": "The grouping column used by the tree data." },
     "headerFilterHeight": { "description": "Override the height of the header filters." },
     "headerFilters": {
-      "description": "If <code>true</code>, enables the data grid filtering on header feature."
+      "description": "If <code>true</code>, the header filters feature is enabled."
     },
     "hideFooter": { "description": "If <code>true</code>, the footer component is hidden." },
     "hideFooterPagination": {
@@ -618,6 +618,9 @@
     "rows": { "description": "Set of rows of type GridRowsProp." },
     "rowSelection": { "description": "If <code>false</code>, the row selection mode is disabled." },
     "rowSelectionModel": { "description": "Sets the row selection model of the Data Grid." },
+    "rowSelectionPropagation": {
+      "description": "When <code>rowSelectionPropagation.descendants</code> is set to <code>true</code>. - Selecting a parent will auto-select all its filtered descendants. - Deselecting a parent will auto-deselect all its filtered descendants.<br>When <code>rowSelectionPropagation.parents=true</code> - Selecting all descendants of a parent would auto-select it. - Deselecting a descendant of a selected parent would deselect the parent.<br>Works with tree data and row grouping on the client-side only."
+    },
     "rowsLoadingMode": {
       "description": "Loading rows can be processed on the server or client-side. Set it to &#39;client&#39; if you would like enable infnite loading. Set it to &#39;server&#39; if you would like to enable lazy loading. * @default &quot;client&quot;"
     },

diff --git a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json
@@ -168,7 +168,7 @@
     "groupingColDef": { "description": "The grouping column used by the tree data." },
     "headerFilterHeight": { "description": "Override the height of the header filters." },
     "headerFilters": {
-      "description": "If <code>true</code>, enables the data grid filtering on header feature."
+      "description": "If <code>true</code>, the header filters feature is enabled."
     },
     "hideFooter": { "description": "If <code>true</code>, the footer component is hidden." },
     "hideFooterPagination": {
@@ -560,6 +560,9 @@
     "rows": { "description": "Set of rows of type GridRowsProp." },
     "rowSelection": { "description": "If <code>false</code>, the row selection mode is disabled." },
     "rowSelectionModel": { "description": "Sets the row selection model of the Data Grid." },
+    "rowSelectionPropagation": {
+      "description": "When <code>rowSelectionPropagation.descendants</code> is set to <code>true</code>. - Selecting a parent will auto-select all its filtered descendants. - Deselecting a parent will auto-deselect all its filtered descendants.<br>When <code>rowSelectionPropagation.parents=true</code> - Selecting all descendants of a parent would auto-select it. - Deselecting a descendant of a selected parent would deselect the parent.<br>Works with tree data and row grouping on the client-side only."
+    },
     "rowsLoadingMode": {
       "description": "Loading rows can be processed on the server or client-side. Set it to &#39;client&#39; if you would like enable infnite loading. Set it to &#39;server&#39; if you would like to enable lazy loading. * @default &quot;client&quot;"
     },

diff --git a/package.json b/package.json
@@ -95,10 +95,10 @@
     "@mui/internal-markdown": "^1.0.14",
     "@mui/internal-test-utils": "^1.0.14",
     "@mui/material": "^5.16.7",
-    "@mui/monorepo": "github:mui/material-ui#263c7259451d5b928bbdfd299c9c0afc89dfec02",
+    "@mui/monorepo": "github:mui/material-ui#95fd6b5c97aca84f1f8b02bfeefddf4a55baea5c",
     "@mui/utils": "^5.16.6",
     "@next/eslint-plugin-next": "14.2.13",
-    "@octokit/plugin-retry": "^7.1.1",
+    "@octokit/plugin-retry": "^7.1.2",
     "@octokit/rest": "^21.0.2",
     "@playwright/test": "^1.44.1",
     "@types/babel__core": "^7.20.5",