Merge remote-tracking branch 'upstream/master' into watermark

.eslintrc.js

@@ -1,6 +1,36 @@
 const baseline = require('@mui/monorepo/.eslintrc');
 const path = require('path');
 
+// Enable React Compiler Plugin rules globally
+const ENABLE_REACT_COMPILER_PLUGIN = process.env.ENABLE_REACT_COMPILER_PLUGIN ?? false;
+
+// Enable React Compiler Plugin rules per package
+const ENABLE_REACT_COMPILER_PLUGIN_CHARTS =
+  process.env.ENABLE_REACT_COMPILER_PLUGIN_CHARTS ?? false;
+const ENABLE_REACT_COMPILER_PLUGIN_DATA_GRID =
+  process.env.ENABLE_REACT_COMPILER_PLUGIN_DATA_GRID ?? false;
+const ENABLE_REACT_COMPILER_PLUGIN_DATE_PICKERS =
+  process.env.ENABLE_REACT_COMPILER_PLUGIN_DATE_PICKERS ?? false;
+const ENABLE_REACT_COMPILER_PLUGIN_TREE_VIEW =
+  process.env.ENABLE_REACT_COMPILER_PLUGIN_TREE_VIEW ?? false;
+
+const isAnyReactCompilerPluginEnabled =
+  ENABLE_REACT_COMPILER_PLUGIN ||
+  ENABLE_REACT_COMPILER_PLUGIN_CHARTS ||
+  ENABLE_REACT_COMPILER_PLUGIN_DATA_GRID ||
+  ENABLE_REACT_COMPILER_PLUGIN_DATE_PICKERS ||
+  ENABLE_REACT_COMPILER_PLUGIN_TREE_VIEW;
+
+const addReactCompilerRule = (packagesNames, isEnabled) =>
+  !isEnabled
+    ? []
+    : packagesNames.map((packageName) => ({
+        files: [`packages/${packageName}/src/**/*{.ts,.tsx,.js}`],
+        rules: {
+          'react-compiler/react-compiler': 'error',
+        },
+      }));
+
 // TODO move this helper to @mui/monorepo/.eslintrc
 // It needs to know about the parent "no-restricted-imports" to not override them.
 const buildPackageRestrictedImports = (packageName, root, allowRootImports = true) => [
@@ -89,7 +119,11 @@ const buildPackageRestrictedImports = (packageName, root, allowRootImports = tru
 
 module.exports = {
   ...baseline,
-  plugins: [...baseline.plugins, 'eslint-plugin-jsdoc'],
+  plugins: [
+    ...baseline.plugins,
+    'eslint-plugin-jsdoc',
+    ...(isAnyReactCompilerPluginEnabled ? ['eslint-plugin-react-compiler'] : []),
+  ],
   settings: {
     'import/resolver': {
       webpack: {
@@ -103,6 +137,7 @@ module.exports = {
    */
   rules: {
     ...baseline.rules,
+    ...(ENABLE_REACT_COMPILER_PLUGIN ? { 'react-compiler/react-compiler': 'error' } : {}),
     // TODO move to @mui/monorepo/.eslintrc, codebase is moving away from default exports
     'import/prefer-default-export': 'off',
     // TODO move rule into the main repo once it has upgraded
@@ -222,5 +257,19 @@ module.exports = {
     ...buildPackageRestrictedImports('@mui/x-tree-view', 'x-tree-view', false),
     ...buildPackageRestrictedImports('@mui/x-tree-view-pro', 'x-tree-view-pro', false),
     ...buildPackageRestrictedImports('@mui/x-license', 'x-license'),
+
+    ...addReactCompilerRule(['x-charts', 'x-charts-pro'], ENABLE_REACT_COMPILER_PLUGIN_CHARTS),
+    ...addReactCompilerRule(
+      ['x-data-grid', 'x-data-grid-pro', 'x-data-grid-premium', 'x-data-grid-generator'],
+      ENABLE_REACT_COMPILER_PLUGIN_DATA_GRID,
+    ),
+    ...addReactCompilerRule(
+      ['x-date-pickers', 'x-date-pickers-pro'],
+      ENABLE_REACT_COMPILER_PLUGIN_DATE_PICKERS,
+    ),
+    ...addReactCompilerRule(
+      ['x-tree-view', 'x-tree-view-pro'],
+      ENABLE_REACT_COMPILER_PLUGIN_TREE_VIEW,
+    ),
   ],
 };

CHANGELOG.md

@@ -3,6 +3,72 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.6.2
+
+_Jun 6, 2024_
+
+We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- 📚 Adds Date and Time Pickers accessibility page
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.6.2`
+
+- [DataGrid] Add the `areElementSizesEqual` utility to improve code readability (#13254) @layerok
+- [DataGrid] Clean up IE remnants from the codebase (#13390) @MBilalShafi
+
+#### `@mui/x-data-grid-pro@7.6.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.6.2`.
+
+#### `@mui/x-data-grid-premium@7.6.2` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.6.2`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.6.2`
+
+- [fields] Fix `PageUp` and `PageDown` editing on letter sections (#13310) @arthurbalduini
+- [pickers] Fix `AdapterDayjs` timezone behavior (#13362) @LukasTy
+- [pickers] Use `useRtl` instead of `useTheme` to access direction (#13363) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@7.6.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.6.2`.
+
+### Charts
+
+#### `@mui/x-charts@7.6.2`
+
+- [charts] Add `Initializable` type and behaviour to allow checking if a complex context has been initialized. (#13365) @JCQuintas
+- [charts] Fix some props not working in `xAxis` and `yAxis` (#13372) @Valyok26
+- [charts] Harmonize charts types (#13366) @alexfauquette
+- [charts] Introduce plugins system (#13367) @alexfauquette
+- [charts] Simplify plugin types (#13396) @JCQuintas
+
+### Docs
+
+- [docs] Add badges like in Material UI @oliviertassinari
+- [docs] Update twitter.com to x.com @oliviertassinari
+- [docs] Fix the description of `tickInterval` (#13355) @alexfauquette
+- [docs] Adjust the code example for `quickFilterValues` (#12919) @michelengelen
+- [docs] Create Pickers accessibility page (#13274) @arthurbalduini
+
+### Core
+
+- [core] Comment on `CSS.escape` for the future @oliviertassinari
+- [core] Fix `l10n` action setup (#13382) @LukasTy
+- [core] Fixes in preparation for React 18.3 (#13378) @LukasTy
+- [core] Remove explicit `marked` dependency (#13383) @LukasTy
+- [core] Remove unused `@types/prettier` dependency (#13389) @LukasTy
+- [core] Add `docs/.env.local` to `.gitignore` (#13377) @KenanYusuf
+
 ## 7.6.1
 
 _May 31, 2024_

docs/data/charts/sparkline/CustomYAxis.js

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import { SparkLineChart } from '@mui/x-charts/SparkLineChart';
+
+const settings = {
+  valueFormatter: (v) => `${v}%`,
+  height: 100,
+  showTooltip: true,
+  showHighlight: true,
+};
+
+const smallValues = [0, 2, 3, 4, 6, 8, 7, 9, 15, 6, 8, 7, 12];
+const largeValues = [60, 65, 66, 68, 87, 82, 83, 89, 92, 75, 76, 77, 91];
+export default function CustomYAxis() {
+  return (
+    <Stack sx={{ width: '100%' }}>
+      <Typography>Without fixed y-range</Typography>
+      <Stack sx={{ width: '100%', mb: 2 }} direction="row" spacing={2}>
+        <Box sx={{ flexGrow: 1 }}>
+          <SparkLineChart data={smallValues} colors={['red']} {...settings} />
+        </Box>
+        <Box sx={{ flexGrow: 1 }}>
+          <SparkLineChart data={largeValues} {...settings} />
+        </Box>
+      </Stack>
+      <Typography>With y-range fixed to [0, 100]</Typography>
+      <Stack sx={{ width: '100%' }} direction="row" spacing={2}>
+        <Box sx={{ flexGrow: 1 }}>
+          <SparkLineChart
+            data={smallValues}
+            yAxis={{
+              min: 0,
+              max: 100,
+            }}
+            colors={['red']}
+            {...settings}
+          />
+        </Box>
+        <Box sx={{ flexGrow: 1 }}>
+          <SparkLineChart
+            data={largeValues}
+            yAxis={{
+              min: 0,
+              max: 100,
+            }}
+            {...settings}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  );
+}

docs/data/charts/sparkline/CustomYAxis.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import { SparkLineChart } from '@mui/x-charts/SparkLineChart';
+
+const settings = {
+  valueFormatter: (v: number | null) => `${v}%`,
+  height: 100,
+  showTooltip: true,
+  showHighlight: true,
+} as const;
+
+const smallValues = [0, 2, 3, 4, 6, 8, 7, 9, 15, 6, 8, 7, 12];
+const largeValues = [60, 65, 66, 68, 87, 82, 83, 89, 92, 75, 76, 77, 91];
+export default function CustomYAxis() {
+  return (
+    <Stack sx={{ width: '100%' }}>
+      <Typography>Without fixed y-range</Typography>
+      <Stack sx={{ width: '100%', mb: 2 }} direction="row" spacing={2}>
+        <Box sx={{ flexGrow: 1 }}>
+          <SparkLineChart data={smallValues} colors={['red']} {...settings} />
+        </Box>
+        <Box sx={{ flexGrow: 1 }}>
+          <SparkLineChart data={largeValues} {...settings} />
+        </Box>
+      </Stack>
+      <Typography>With y-range fixed to [0, 100]</Typography>
+      <Stack sx={{ width: '100%' }} direction="row" spacing={2}>
+        <Box sx={{ flexGrow: 1 }}>
+          <SparkLineChart
+            data={smallValues}
+            yAxis={{
+              min: 0,
+              max: 100,
+            }}
+            colors={['red']}
+            {...settings}
+          />
+        </Box>
+        <Box sx={{ flexGrow: 1 }}>
+          <SparkLineChart
+            data={largeValues}
+            yAxis={{
+              min: 0,
+              max: 100,
+            }}
+            {...settings}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  );
+}

docs/data/charts/sparkline/sparkline.md

@@ -35,6 +35,8 @@ If you need more advanced customization, you can provide custom props for `toolt
 
 ## Axis management
 
+### X-axis data
+
 By default, the sparkline assigns `xAxis` values as an ascending integer sequence starting from 0 (0, 1, 2,...). These values are, in this case, hidden in the tooltip.
 You can override this behavior if your data are not evenly distributed, or if you need to label them.
 
@@ -47,3 +49,12 @@ Whereas most of the other charts expect an array of axis configuration objects.
 ```
 
 {{"demo": "CustomAxis.js"}}
+
+### Y-axis range
+
+You can fix the y-range of the sparkline by providing `min`/`max` values to the `yAxis` configuration.
+
+The following demo shows two sparklines, one with small and another with large values.
+The first row has the default y-axis values, while on the second row a fixed range from `0` to `100` has been set.
+
+{{"demo": "CustomYAxis.js"}}

docs/data/data-grid/accessibility/accessibility.md

@@ -1,10 +1,10 @@
 # Data Grid - Accessibility
 
-<p class="description">The Data Grid has complete accessibility support, including built-in keyboard navigation that follows international standards.</p>
+<p class="description">Learn how the Data Grid implements accessibility features and guidelines, including keyboard navigation that follows international standards.</p>
 
 ## Guidelines
 
-The most commonly encountered conformance guidelines for accessibility are:
+Common conformance guidelines for accessibility include:
 
 - Globally accepted standard: [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/)
 - US:
@@ -13,8 +13,7 @@ The most commonly encountered conformance guidelines for accessibility are:
 - Europe: [EAA](https://ec.europa.eu/social/main.jsp?catId=1202) (European Accessibility Act)
 
 WCAG 2.1 has three levels of conformance: A, AA, and AAA.
-Level AA meets the most commonly encountered conformance guidelines.
-This is the most common target for organizations so what we aims to support very well.
+Level AA exceeds the basic criteria for accessibility and is a common target for most organizations, so this is what we aim to support.
 
 The [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/grid/) provide valuable information on how to optimize the accessibility of a data grid.
 

docs/data/data-grid/filtering-recipes/filtering-recipes.md

@@ -8,8 +8,10 @@ title: Data Grid - Filtering customization recipes
 
 ## Quick filter outside of the grid
 
-Currently if you want to use the [Quick filter](/x/react-data-grid/filtering/quick-filter/) feature you need to use from the toolbar component slot.
+The [Quick Filter](/x/react-data-grid/filtering/quick-filter/) component is typically used in the Data Grid's Toolbar component slot.
 
-A common use case is to have certain components positioned outside of the grid. Because of the way the grid context works this might not be a straightforward thing to do. The example below illustrates how this use case can be achieved.
+Some use cases may call for placing components like the Quick Filter outside of the Grid.
+This requires certain considerations due to the Grid's context structure.
+The following example shows how to accomplish this:
 
 {{"demo": "QuickFilterOutsideOfGrid.js", "bg": "inline", "defaultCodeOpen": false}}

docs/data/data-grid/master-detail/master-detail.md

@@ -135,6 +135,31 @@ This approach can also be used to change the location of the toggle column, as s
 As any ordinary cell renderer, the `value` prop is also available, and it corresponds to the state of the row: `true` when expanded and `false` when collapsed.
 :::
 
+## Custom header for detail panel column
+
+To render a custom header for the detail panel column, use the [`renderHeader`](/x/react-data-grid/column-header/#custom-header-renderer) property in the column definition.
+This property receives a `GridRenderHeaderParams` object that contains `colDef` (the column definition) and `field`.
+The following example demonstrates how to render a custom header for the detail panel column:
+
+```tsx
+const columns = [
+  {
+    ...GRID_DETAIL_PANEL_TOGGLE_COL_DEF,
+    renderHeader: (params) => (
+      <div>
+        <span>{params.colDef.headerName}</span>
+        <button onClick={() => console.log('Custom action')}>Custom action</button>
+      </div>
+    ),
+  },
+  //... other columns
+];
+```
+
+:::info
+For a more advanced example check out the [Expand or collapse all detail panels](/x/react-data-grid/row-recipes/#expand-or-collapse-all-detail-panels) recipe.
+:::
+
 ## Disable detail panel content scroll
 
 By default, the detail panel has a width that is the sum of the widths of all columns.
@@ -153,6 +178,7 @@ Notice that the toggle column is pinned to make sure that it will always be visi
 More examples of how to customize the detail panel:
 
 - [One expanded detail panel at a time](/x/react-data-grid/row-recipes/#one-expanded-detail-panel-at-a-time)
+- [Expand or collapse all detail panels](/x/react-data-grid/row-recipes/#expand-or-collapse-all-detail-panels)
 
 ## apiRef