Merge branch 'master' into header-filter-design

Author: KenanYusuf

.github/workflows/codeql.yml

@@ -19,7 +19,7 @@ jobs:
         uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@48ab28a6f5dbc2a99bf1e0131198dd8f1df78169 # v3.28.0
+        uses: github/codeql-action/init@b6a472f63d85b9c78a3ac5e89422239fc15e9b3c # v3.28.1
         with:
           languages: typescript
           # If you wish to specify custom queries, you can do so here or in a config file.
@@ -29,4 +29,4 @@ jobs:
           # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
           # queries: security-extended,security-and-quality
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@48ab28a6f5dbc2a99bf1e0131198dd8f1df78169 # v3.28.0
+        uses: github/codeql-action/analyze@b6a472f63d85b9c78a3ac5e89422239fc15e9b3c # v3.28.1

.github/workflows/maintenance.yml

@@ -25,7 +25,7 @@ jobs:
       pull-requests: write
     steps:
       - name: check if prs are dirty
-        uses: eps1lon/actions-label-merge-conflict@1b1b1fcde06a9b3d089f3464c96417961dde1168 # v3.0.2
+        uses: eps1lon/actions-label-merge-conflict@1df065ebe6e3310545d4f4c4e862e43bdca146f0 # v3.0.3
         with:
           dirtyLabel: 'PR: out-of-date'
           repoToken: '${{ secrets.GITHUB_TOKEN }}'

.github/workflows/scorecards.yml

@@ -44,6 +44,6 @@ jobs:
 
       # Upload the results to GitHub's code scanning dashboard.
       - name: Upload to code-scanning
-        uses: github/codeql-action/upload-sarif@48ab28a6f5dbc2a99bf1e0131198dd8f1df78169 # v3.28.0
+        uses: github/codeql-action/upload-sarif@b6a472f63d85b9c78a3ac5e89422239fc15e9b3c # v3.28.1
         with:
           sarif_file: results.sarif

CHANGELOG.md

@@ -5,6 +5,132 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.0.0-alpha.7
+
+_Jan 9, 2025_
+
+We'd like to offer a big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 Charts legend is now an HTML element which can be styled more easily
+- 💫 Support [aggregation with server-side data](/x/react-data-grid/server-side-data/aggregation/)
+- 🏎️ Improve Data Grid aggregation performance
+- 🌍 Add Chinese (Taiwan) (zh-TW) locale on the Date and Time Pickers
+- 🌍 Improve Norwegian (nb-NO) locale on the Date and Time Pickers
+- 🐞 Bugfixes
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@derek-0000, @josteinjhauge, @k-rajat19, @nusr, @tomashauser.
+Following are all team members who have contributed to this release:
+@cherniavskii, @flaviendelangle, @JCQuintas, @LukasTy, @MBilalShafi, @arminmeh, @romgrk, @oliviertassinari.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/[email protected]`
+
+- [DataGrid] Improve React 19 support (#15769) @LukasTy
+- [DataGrid] Add `name` attribute to the checkbox selection column (#15178) @derek-0000
+- [DataGrid] Fix number filter field formatting values while typing (#16062) @arminmeh
+- [DataGrid] Fix select all checkbox state reset with server side data (#16034) @MBilalShafi
+- [DataGrid] Refactor: create base button props (#15930) @romgrk
+- [DataGrid] Refactor: create tooltip props (#16086) @romgrk
+- [DataGrid] Fix TS error (#16046) @cherniavskii
+
+#### `@mui/[email protected]` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/[email protected]`.
+
+#### `@mui/[email protected]` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/[email protected]`, plus:
+
+- [DataGridPremium] Improve aggregation performance for multiple columns (#16097) @cherniavskii
+- [DataGridPremium] Make Aggregation keyboard accessible in the column menu (#15934) @k-rajat19
+- [DataGridPremium] Server-side aggregation with data source (#15741) @MBilalShafi
+
+### Date and Time Pickers
+
+#### Breaking changes
+
+- The `date-fns` and `date-fns-jalali` date library adapters have been renamed to better align with the current stable major versions — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#✅-rename-date-fns-adapter-imports)
+- Update default `closeOnSelect` and Action Bar `actions` values - [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#update-default-closeonselect-and-action-bar-actions-values)
+- The component passed to the `layout` slot no longer receives the `value`, `onChange` and `onSelectShortcut` props — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-layout).
+- The component passed to the `toolbar` slot no longer receives the `value`, `onChange` and `isLandscape` props — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-toolbar).
+- The component passed to the `shortcuts` slot no longer receives the `onChange`, `isValid` and `isLandscape` props — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-shortcuts).
+- The `PickerShortcutChangeImportance` type has been renamed `PickerChangeImportance` — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#renamed-variables-and-types).
+- The component passed to the `layout` slot no longer receives the `rangePosition` and `onRangePositionChange` on range pickers — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-layout).
+- The component passed to the `toolbar` slot no longer receives the `rangePosition` and `onRangePositionChange` on range pickers — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-toolbar).
+- The component passed to the `tabs` slot no longer receives the `rangePosition` and `onRangePositionChange` on range pickers — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-tabs).
+
+#### `@mui/[email protected]`
+
+- [fields] Handle focusing container with `inputRef.current.focus` on `accessibleFieldDOMStructure` (#15985) @LukasTy
+- [pickers] Always use `setValue` internally to update the picker value (#16056) @flaviendelangle
+- [pickers] Create a new context to pass the range position props to the layout components and to the views (#15846) @flaviendelangle
+- [pickers] Introduce a new concept of `manager` (#15339) @flaviendelangle
+- [pickers] Improve React 19 support (#15769) @LukasTy
+- [pickers] Memoize `<PickersActionBar />` (#16071) @LukasTy
+- [pickers] Remove `NonEmptyDateRange` type (#16035) @flaviendelangle
+- [pickers] Rename `AdapterDateFns` into `AdapterDateFnsV2` and `AdapterDateFnsV3` into `AdapterDateFns` (#16082) @LukasTy
+- [pickers] Rename `ctx.onViewChange` to `ctx.setView` and add it to the actions context (#16044) @flaviendelangle
+- [pickers] Support `date-fns-jalali` v4 (#16011) @LukasTy
+- [pickers] Update `closeOnSelect` and `actionBar.actions` default values (#15944) @LukasTy
+- [pickers] Use `usePickerContext()` and `usePickerActionsContext()` instead of passing props to the `shortcuts` and `toolbar` slots (#15948) @flaviendelangle
+- [l10n] Add Chinese (Taiwan) (zh-TW) locale (#16033) @nusr
+- [l10n] Improve Norwegian (nb-NO) locale (#16089) @josteinjhauge
+
+#### `@mui/[email protected]` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/[email protected]`.
+
+### Charts
+
+#### Breaking changes
+
+- Removed `DefaultChartsLegend` component, since it is now easier to create custom legends — [Learn more](https://next.mui.com/x/react-charts/components/#html-components).
+- The default legend is now an HTML element and can be styled more easily.
+- The `width` and `height` properties of the charts now only apply to the `svg` element, and not their wrappers, this might cause some layout shifts.
+- `slotProps.legend.direction` now accepts `'horizontal' | 'vertical'` instead of `'row' | 'column'` — [Learn more](https://next.mui.com/x/migration/migration-charts-v7/#legend-direction-value-change-✅).
+- The `getSeriesToDisplay` function was removed in favor of the `useLegend` hook. — [Learn more](https://next.mui.com/x/migration/migration-charts-v7/#the-getseriestodisplay-function-was-removed).
+
+#### `@mui/[email protected]`
+
+- [charts] New HTML legend & styles (#15733) @JCQuintas
+- [charts] Improve React 19 support (#15769) @LukasTy
+- [charts] Fix 301 redirection in the API documentation @oliviertassinari
+
+#### `@mui/[email protected]` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/[email protected]`.
+
+### Tree View
+
+#### `@mui/[email protected]`
+
+- [TreeView] Improve React 19 support (#15769) @LukasTy
+
+#### `@mui/[email protected]` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/[email protected]`.
+
+### Docs
+
+- [docs] Fix `EditingWithDatePickers` demo (#15967) @k-rajat19
+- [docs] Fix inconsistent multi input range field separators (#16043) @flaviendelangle
+- [docs] Fix non-existing "adapter" property of `LocalizationProvider` (#16084) @tomashauser
+- [docs] Refactor Data Grid with Date Pickers example (#15992) @LukasTy
+- [docs] Unify the wording of the pickers slots breaking changes (#16036) @flaviendelangle
+
+### Core
+
+- [core] Clarify the release strategy (#16014) @MBilalShafi
+- [core] Small fixes on docs @oliviertassinari
+- [core] Sync with other repos @oliviertassinari
+- [core] Update the `release:version` docs (#16038) @cherniavskii
+- [code-infra] Add `testSkipIf` and `describeSkipIf` (#16049) @JCQuintas
+- [test] Stabilize flaky Data Grid tests (#16053) @LukasTy
+
 ## 8.0.0-alpha.6
 
 _Dec 26, 2024_

babel.config.js

@@ -100,25 +100,23 @@ module.exports = function getBabelConfig(api) {
 
   if (process.env.NODE_ENV === 'test') {
     plugins.push(['@babel/plugin-transform-export-namespace-from']);
-    // We replace `date-fns` imports with an aliased `date-fns@v4` version installed as `date-fns-v4` for tests.
-    // The plugin is patched to only run on `AdapterDateFnsV3.ts`.
-    // TODO: remove when we upgrade to date-fns v4 by default.
+    // We replace `date-fns` imports with an aliased `date-fns@v2` version installed as `date-fns-v2` for tests.
     plugins.push([
       'babel-plugin-replace-imports',
       {
         test: /date-fns/i,
-        replacer: 'date-fns-v4',
+        replacer: 'date-fns-v2',
         // This option is provided by the `patches/[email protected]` patch
-        filenameIncludes: 'src/AdapterDateFnsV3/',
+        filenameIncludes: 'src/AdapterDateFnsV2/',
       },
     ]);
     plugins.push([
       'babel-plugin-replace-imports',
       {
         test: /date-fns-jalali/i,
-        replacer: 'date-fns-jalali-v4',
+        replacer: 'date-fns-jalali-v2',
         // This option is provided by the `patches/[email protected]` patch
-        filenameIncludes: 'src/AdapterDateFnsJalaliV3/',
+        filenameIncludes: 'src/AdapterDateFnsJalaliV2/',
       },
       'replace-date-fns-jalali-imports',
     ]);

docs/data/charts/axis/CustomDomainYAxis.js

@@ -5,10 +5,7 @@ import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';
 
 const settings = {
-  valueFormatter: (value) => `${value}%`,
   height: 200,
-  showTooltip: true,
-  showHighlight: true,
   series: [{ data: [60, -15, 66, 68, 87, 82, 83, 85, 92, 75, 76, 50, 91] }],
   margin: { top: 10, bottom: 20 },
 };

docs/data/charts/axis/CustomDomainYAxis.tsx

@@ -1,14 +1,11 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import { BarChart } from '@mui/x-charts/BarChart';
+import { BarChart, BarChartProps } from '@mui/x-charts/BarChart';
 import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';
 
-const settings = {
-  valueFormatter: (value: number | null) => `${value}%`,
+const settings: BarChartProps = {
   height: 200,
-  showTooltip: true,
-  showHighlight: true,
   series: [{ data: [60, -15, 66, 68, 87, 82, 83, 85, 92, 75, 76, 50, 91] }],
   margin: { top: 10, bottom: 20 },
 };

docs/data/charts/bars/BarGapNoSnap.js

@@ -35,7 +35,6 @@ export default function BarGapNoSnap() {
         <BarChart
           dataset={balanceSheet}
           series={series}
-          width={500}
           height={300}
           margin={{ top: 15 }}
           xAxis={[

docs/data/charts/bars/BarsDataset.js

@@ -11,6 +11,7 @@ const chartSetting = {
   ],
   width: 500,
   height: 300,
+  margin: { left: 60 },
   sx: {
     [`.${axisClasses.left} .${axisClasses.label}`]: {
       transform: 'translate(-20px, 0)',

docs/data/charts/bars/BarsDataset.tsx

@@ -11,6 +11,7 @@ const chartSetting = {
   ],
   width: 500,
   height: 300,
+  margin: { left: 60 },
   sx: {
     [`.${axisClasses.left} .${axisClasses.label}`]: {
       transform: 'translate(-20px, 0)',

docs/data/charts/bars/BorderRadius.js

@@ -77,9 +77,8 @@ const chartSettingsH = {
   },
   slotProps: {
     legend: {
-      direction: 'row',
+      direction: 'horizontal',
       position: { vertical: 'bottom', horizontal: 'middle' },
-      padding: -5,
     },
   },
 };

docs/data/charts/bars/BorderRadius.tsx

@@ -79,9 +79,8 @@ const chartSettingsH: Partial<BarChartProps> = {
   },
   slotProps: {
     legend: {
-      direction: 'row',
+      direction: 'horizontal',
       position: { vertical: 'bottom', horizontal: 'middle' },
-      padding: -5,
     },
   },
 };

docs/data/charts/bars/StackBars.js

@@ -16,9 +16,14 @@ export default function StackBars() {
         { dataKey: 'treas', stack: 'equity' },
       ])}
       xAxis={[{ scaleType: 'band', dataKey: 'year' }]}
-      hideLegend
-      width={600}
-      height={350}
+      {...config}
     />
   );
 }
+
+const config = {
+  width: 600,
+  height: 350,
+  margin: { left: 70 },
+  hideLegend: true,
+};

docs/data/charts/bars/StackBars.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BarChart } from '@mui/x-charts/BarChart';
+import { BarChart, BarChartProps } from '@mui/x-charts/BarChart';
 import { addLabels, balanceSheet } from './netflixsBalanceSheet';
 
 export default function StackBars() {
@@ -16,9 +16,14 @@ export default function StackBars() {
         { dataKey: 'treas', stack: 'equity' },
       ])}
       xAxis={[{ scaleType: 'band', dataKey: 'year' }]}
-      hideLegend
-      width={600}
-      height={350}
+      {...config}
     />
   );
 }
+
+const config: Partial<BarChartProps> = {
+  width: 600,
+  height: 350,
+  margin: { left: 70 },
+  hideLegend: true,
+};

docs/data/charts/bars/StackBars.tsx.preview

@@ -10,7 +10,5 @@
     { dataKey: 'treas', stack: 'equity' },
   ])}
   xAxis={[{ scaleType: 'band', dataKey: 'year' }]}
-  hideLegend
-  width={600}
-  height={350}
+  {...config}
 />

docs/data/charts/components/HtmlLegend.js

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import { unstable_useBarSeries } from '@mui/x-charts/hooks';
+import { useLegend } from '@mui/x-charts/hooks';
 import { ChartDataProvider } from '@mui/x-charts/context';
 import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
 import { BarPlot } from '@mui/x-charts/BarChart';
 import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
 import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
 
 function MyCustomLegend() {
-  const s = unstable_useBarSeries();
+  const { items } = useLegend();
   return (
     <table
       style={{
@@ -17,7 +17,7 @@ function MyCustomLegend() {
       }}
     >
       <tbody>
-        {Object.values(s?.series ?? []).map((v) => {
+        {items.map((v) => {
           return (
             <tr key={v.id}>
               <td aria-hidden>

docs/data/charts/components/HtmlLegend.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import { unstable_useBarSeries } from '@mui/x-charts/hooks';
+import { useLegend } from '@mui/x-charts/hooks';
 import { ChartDataProvider } from '@mui/x-charts/context';
 import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
 import { BarPlot } from '@mui/x-charts/BarChart';
 import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
 import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
 
 function MyCustomLegend() {
-  const s = unstable_useBarSeries();
+  const { items } = useLegend();
   return (
     <table
       style={{
@@ -17,7 +17,7 @@ function MyCustomLegend() {
       }}
     >
       <tbody>
-        {Object.values(s?.series ?? []).map((v) => {
+        {items.map((v) => {
           return (
             <tr key={v.id}>
               <td aria-hidden>

docs/data/charts/components/components.md

@@ -83,15 +83,15 @@ With the introduction of the `ChartDataProvider` in v8, the chart data can be ac
 This allows you to create HTML components that interact with the charts data.
 
 In the next example, notice that `MyCustomLegend` component displays the series names and colors.
-This creates an html `table` element, which handles long series names better than the default legend.
+This creates an html `table` element, which can be customized in any way.
 
 {{"demo": "HtmlLegend.js"}}
 
 :::warning
 Note that the HTML components are not part of the SVG hierarchy.
 Hence, they should be:
 
-- Outside the `<ChartsSurface />` component to avoid mixing HTAM and SVG.
+- Outside the `<ChartsSurface />` component to avoid mixing HTML and SVG.
 - Inside the `<ChartDataProvider />` component to get access to the data.
 
 :::