Merge branch 'master' into field-private-context

mui · Jan 10, 2025 · 1eb5669 · 1eb5669
2 parents 2a6bf27 + 6412b8c
commit 1eb5669
Show file tree

Hide file tree

Showing 73 changed files with 1,720 additions and 138 deletions.
diff --git a/CHANGELOG.md b/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_

diff --git a/docs/data/data-grid/aggregation/aggregation.md b/docs/data/data-grid/aggregation/aggregation.md
@@ -12,6 +12,10 @@ The aggregated values are rendered in a footer row at the bottom of the Data Gri
 
 {{"demo": "AggregationInitialState.js", "bg": "inline", "defaultCodeOpen": false}}
 
+:::info
+If you're looking for aggregation on the server side, see [Server-side data—Aggregation](/x/react-data-grid/server-side-data/aggregation/).
+:::
+
 ## Pass aggregation to the Data Grid
 
 ### Structure of the model

diff --git a/docs/data/data-grid/server-side-data/ServerSideDataGridAggregation.js b/docs/data/data-grid/server-side-data/ServerSideDataGridAggregation.js
@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { DataGridPremium } from '@mui/x-data-grid-premium';
+import { useMockServer } from '@mui/x-data-grid-generator';
+
+const aggregationFunctions = {
+  sum: { columnTypes: ['number'] },
+  avg: { columnTypes: ['number'] },
+  min: { columnTypes: ['number', 'date', 'dateTime'] },
+  max: { columnTypes: ['number', 'date', 'dateTime'] },
+  size: {},
+};
+
+export default function ServerSideDataGridAggregation() {
+  const { columns, initialState, fetchRows } = useMockServer(
+    {},
+    { useCursorPagination: false },
+  );
+
+  const dataSource = React.useMemo(
+    () => ({
+      getRows: async (params) => {
+        const urlParams = new URLSearchParams({
+          paginationModel: JSON.stringify(params.paginationModel),
+          filterModel: JSON.stringify(params.filterModel),
+          sortModel: JSON.stringify(params.sortModel),
+          aggregationModel: JSON.stringify(params.aggregationModel),
+        });
+        const getRowsResponse = await fetchRows(
+          `https://mui.com/x/api/data-grid?${urlParams.toString()}`,
+        );
+        return {
+          rows: getRowsResponse.rows,
+          rowCount: getRowsResponse.rowCount,
+          aggregateRow: getRowsResponse.aggregateRow,
+        };
+      },
+      getAggregatedValue: (row, field) => {
+        return row[`${field}Aggregate`];
+      },
+    }),
+    [fetchRows],
+  );
+
+  const initialStateWithPagination = React.useMemo(
+    () => ({
+      ...initialState,
+      pagination: {
+        paginationModel: { pageSize: 10, page: 0 },
+        rowCount: 0,
+      },
+      aggregation: {
+        model: { commodity: 'size', quantity: 'sum' },
+      },
+    }),
+    [initialState],
+  );
+
+  return (
+    <div style={{ width: '100%', height: 400 }}>
+      <DataGridPremium
+        columns={columns}
+        unstable_dataSource={dataSource}
+        pagination
+        initialState={initialStateWithPagination}
+        pageSizeOptions={[10, 20, 50]}
+        aggregationFunctions={aggregationFunctions}
+      />
+    </div>
+  );
+}
diff --git a/docs/data/data-grid/server-side-data/ServerSideDataGridAggregation.tsx b/docs/data/data-grid/server-side-data/ServerSideDataGridAggregation.tsx
@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { DataGridPremium, GridDataSource } from '@mui/x-data-grid-premium';
+import { useMockServer } from '@mui/x-data-grid-generator';
+
+const aggregationFunctions = {
+  sum: { columnTypes: ['number'] },
+  avg: { columnTypes: ['number'] },
+  min: { columnTypes: ['number', 'date', 'dateTime'] },
+  max: { columnTypes: ['number', 'date', 'dateTime'] },
+  size: {},
+};
+
+export default function ServerSideDataGridAggregation() {
+  const { columns, initialState, fetchRows } = useMockServer(
+    {},
+    { useCursorPagination: false },
+  );
+
+  const dataSource: GridDataSource = React.useMemo(
+    () => ({
+      getRows: async (params) => {
+        const urlParams = new URLSearchParams({
+          paginationModel: JSON.stringify(params.paginationModel),
+          filterModel: JSON.stringify(params.filterModel),
+          sortModel: JSON.stringify(params.sortModel),
+          aggregationModel: JSON.stringify(params.aggregationModel),
+        });
+        const getRowsResponse = await fetchRows(
+          `https://mui.com/x/api/data-grid?${urlParams.toString()}`,
+        );
+        return {
+          rows: getRowsResponse.rows,
+          rowCount: getRowsResponse.rowCount,
+          aggregateRow: getRowsResponse.aggregateRow,
+        };
+      },
+      getAggregatedValue: (row, field) => {
+        return row[`${field}Aggregate`];
+      },
+    }),
+    [fetchRows],
+  );
+
+  const initialStateWithPagination = React.useMemo(
+    () => ({
+      ...initialState,
+      pagination: {
+        paginationModel: { pageSize: 10, page: 0 },
+        rowCount: 0,
+      },
+      aggregation: {
+        model: { commodity: 'size', quantity: 'sum' },
+      },
+    }),
+    [initialState],
+  );
+
+  return (
+    <div style={{ width: '100%', height: 400 }}>
+      <DataGridPremium
+        columns={columns}
+        unstable_dataSource={dataSource}
+        pagination
+        initialState={initialStateWithPagination}
+        pageSizeOptions={[10, 20, 50]}
+        aggregationFunctions={aggregationFunctions}
+      />
+    </div>
+  );
+}
diff --git a/docs/data/data-grid/server-side-data/ServerSideDataGridAggregation.tsx.preview b/docs/data/data-grid/server-side-data/ServerSideDataGridAggregation.tsx.preview
@@ -0,0 +1,8 @@
+<DataGridPremium
+  columns={columns}
+  unstable_dataSource={dataSource}
+  pagination
+  initialState={initialStateWithPagination}
+  pageSizeOptions={[10, 20, 50]}
+  aggregationFunctions={aggregationFunctions}
+/>
diff --git a/docs/data/data-grid/server-side-data/ServerSideDataGridAggregationLazyLoading.js b/docs/data/data-grid/server-side-data/ServerSideDataGridAggregationLazyLoading.js
@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { DataGridPremium } from '@mui/x-data-grid-premium';
+import { useMockServer } from '@mui/x-data-grid-generator';
+
+const aggregationFunctions = {
+  sum: { columnTypes: ['number'] },
+  avg: { columnTypes: ['number'] },
+  min: { columnTypes: ['number', 'date', 'dateTime'] },
+  max: { columnTypes: ['number', 'date', 'dateTime'] },
+  size: {},
+};
+
+export default function ServerSideDataGridAggregationLazyLoading() {
+  const {
+    columns,
+    initialState: initState,
+    fetchRows,
+  } = useMockServer({}, { useCursorPagination: false });
+
+  const dataSource = React.useMemo(
+    () => ({
+      getRows: async (params) => {
+        const urlParams = new URLSearchParams({
+          filterModel: JSON.stringify(params.filterModel),
+          sortModel: JSON.stringify(params.sortModel),
+          aggregationModel: JSON.stringify(params.aggregationModel),
+          start: `${params.start}`,
+          end: `${params.end}`,
+        });
+        const getRowsResponse = await fetchRows(
+          `https://mui.com/x/api/data-grid?${urlParams.toString()}`,
+        );
+        return {
+          rows: getRowsResponse.rows,
+          rowCount: getRowsResponse.rowCount,
+          aggregateRow: getRowsResponse.aggregateRow,
+        };
+      },
+      getAggregatedValue: (row, field) => {
+        return row[`${field}Aggregate`];
+      },
+    }),
+    [fetchRows],
+  );
+
+  const initialState = React.useMemo(
+    () => ({
+      ...initState,
+      pagination: {
+        paginationModel: { pageSize: 10, page: 0 },
+        rowCount: 0,
+      },
+      aggregation: {
+        model: { commodity: 'size', quantity: 'sum' },
+      },
+    }),
+    [initState],
+  );
+
+  return (
+    <div style={{ width: '100%', height: 400 }}>
+      <DataGridPremium
+        columns={columns}
+        unstable_dataSource={dataSource}
+        initialState={initialState}
+        unstable_lazyLoading
+        aggregationFunctions={aggregationFunctions}
+      />
+    </div>
+  );
+}