@mui/x-charts 8.0.0-alpha.6 → 8.0.0-alpha.8

package/BarChart/BarLabel/barLabelClasses.d.ts

@@ -9,5 +9,5 @@ export interface BarLabelClasses {
 }
 export type BarLabelClassKey = keyof BarLabelClasses;
 export declare function getBarLabelUtilityClass(slot: string): string;
-export declare const barLabelClasses: Record<"highlighted" | "faded" | "root", string>;
+export declare const barLabelClasses: Record<"root" | "highlighted" | "faded", string>;
 export declare const useUtilityClasses: (ownerState: BarLabelOwnerState) => Record<"root", string>;

package/BarChart/BarPlot.js

@@ -7,16 +7,15 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTransition } from '@react-spring/web';
 import { styled } from '@mui/material/styles';
-import { useCartesianContext } from "../context/CartesianProvider/index.js";
 import { BarElement, barElementClasses } from "./BarElement.js";
 import getColor from "./getColor.js";
-import { useChartId, useDrawingArea } from "../hooks/index.js";
+import { useChartId, useDrawingArea, useXAxes, useYAxes } from "../hooks/index.js";
 import { BarClipPath } from "./BarClipPath.js";
 import { BarLabelPlot } from "./BarLabel/BarLabelPlot.js";
 import { checkScaleErrors } from "./checkScaleErrors.js";
 import { useBarSeries } from "../hooks/useSeries.js";
 import { useSkipAnimation } from "../context/AnimationProvider/index.js";
-
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Solution of the equations
  * W = barWidth * N + offset * (N-1)
@@ -26,7 +25,6 @@ import { useSkipAnimation } from "../context/AnimationProvider/index.js";
  * @param gapRatio The ratio of the gap between bars over the bar width.
  * @returns The bar width and the offset between bars.
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function getBandSize({
   bandWidth: W,
   numberOfGroups: N,
@@ -51,7 +49,6 @@ const useAggregatedData = () => {
     stackingGroups: [],
     seriesOrder: []
   };
-  const axisData = useCartesianContext();
   const drawingArea = useDrawingArea();
   const chartId = useChartId();
   const {
@@ -60,10 +57,12 @@ const useAggregatedData = () => {
   } = seriesData;
   const {
     xAxis,
+    xAxisIds
+  } = useXAxes();
+  const {
     yAxis,
-    xAxisIds,
     yAxisIds
-  } = axisData;
+  } = useYAxes();
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
   const masks = {};
@@ -217,7 +216,7 @@ function BarPlot(props) {
   const withoutBorderRadius = !borderRadius || borderRadius <= 0;
   const transition = useTransition(completedData, {
     keys: bar => `${bar.seriesId}-${bar.dataIndex}`,
-    from: leaveStyle,
+    from: skipAnimation ? undefined : leaveStyle,
     leave: leaveStyle,
     enter: enterStyle,
     update: enterStyle,
@@ -225,7 +224,7 @@ function BarPlot(props) {
   });
   const maskTransition = useTransition(withoutBorderRadius ? [] : masksData, {
     keys: v => v.id,
-    from: leaveStyle,
+    from: skipAnimation ? undefined : leaveStyle,
     leave: leaveStyle,
     enter: enterStyle,
     update: enterStyle,

package/BarChart/extremums.d.ts

@@ -1,3 +1,3 @@
-import { ExtremumGetter } from '../context/PluginProvider/ExtremumGetter.types';
-export declare const getExtremumX: ExtremumGetter<'bar'>;
-export declare const getExtremumY: ExtremumGetter<'bar'>;
+import { CartesianExtremumGetter } from '../internals/plugins/models/seriesConfig/extremumGetter.types';
+export declare const getExtremumX: CartesianExtremumGetter<'bar'>;
+export declare const getExtremumY: CartesianExtremumGetter<'bar'>;

package/BarChart/formatter.d.ts

@@ -1,3 +1,3 @@
-import { SeriesFormatter } from '../context/PluginProvider/SeriesFormatter.types';
-declare const formatter: SeriesFormatter<'bar'>;
+import { SeriesProcessor } from '../internals/plugins/models';
+declare const formatter: SeriesProcessor<'bar'>;
 export default formatter;

package/BarChart/formatter.js

@@ -45,7 +45,8 @@ const formatter = (params, dataset) => {
     ids.forEach((id, index) => {
       const dataKey = series[id].dataKey;
       completedSeries[id] = _extends({
-        layout: 'vertical'
+        layout: 'vertical',
+        labelMarkType: 'square'
       }, series[id], {
         data: dataKey ? dataset.map(data => {
           const value = data[dataKey];

package/BarChart/getColor.d.ts

@@ -1,3 +1,3 @@
-import { ColorProcessor } from '../context/PluginProvider/ColorProcessor.types';
+import { ColorProcessor } from '../internals/plugins/models';
 declare const getColor: ColorProcessor<'bar'>;
 export default getColor;

package/BarChart/legend.d.ts

@@ -1,3 +1,3 @@
-import { LegendGetter } from '../context/PluginProvider';
+import { LegendGetter } from '../internals/plugins/models';
 declare const legendGetter: LegendGetter<'bar'>;
 export default legendGetter;

package/BarChart/legend.js

@@ -10,6 +10,7 @@ const legendGetter = params => {
       return acc;
     }
     acc.push({
+      markType: series[seriesId].labelMarkType,
       id: seriesId,
       seriesId,
       color: series[seriesId].color,

package/BarChart/plugin.d.ts

@@ -1,2 +1,2 @@
-import type { ChartsPlugin } from '../context/PluginProvider';
-export declare const plugin: ChartsPlugin<'bar'>;
+import { ChartSeriesTypeConfig } from '../internals/plugins/models/seriesConfig';
+export declare const plugin: ChartSeriesTypeConfig<'bar'>;

package/BarChart/plugin.js

@@ -2,8 +2,7 @@ import { getExtremumX, getExtremumY } from "./extremums.js";
 import formatter from "./formatter.js";
 import getColor from "./getColor.js";
 export const plugin = {
-  seriesType: 'bar',
-  seriesFormatter: formatter,
+  seriesProcessor: formatter,
   colorProcessor: getColor,
   xExtremumGetter: getExtremumX,
   yExtremumGetter: getExtremumY

package/BarChart/useBarChartProps.d.ts

@@ -7,7 +7,8 @@ import { ChartsClipPathProps } from '../ChartsClipPath';
 import { ChartsOverlayProps } from '../ChartsOverlay';
 import { ChartsAxisProps } from '../ChartsAxis';
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
-import { ChartsLegendProps } from '../ChartsLegend';
+import { ChartsLegendSlotExtension } from '../ChartsLegend';
+import type { ChartsWrapperProps } from '../internals/components/ChartsWrapper';
 /**
  * A helper function that extracts BarChartProps from the input props
  * and returns an object with props for the children components of BarChart.
@@ -16,7 +17,8 @@ import { ChartsLegendProps } from '../ChartsLegend';
  * @returns An object with props for the children components of BarChart
  */
 export declare const useBarChartProps: (props: BarChartProps) => {
-    chartContainerProps: ChartContainerProps;
+    chartsWrapperProps: Omit<ChartsWrapperProps, "children">;
+    chartContainerProps: Omit<ChartContainerProps<"bar">, "plugins">;
     barPlotProps: BarPlotProps;
     axisClickHandlerProps: ChartsOnAxisClickHandlerProps;
     gridProps: ChartsGridProps;
@@ -27,6 +29,6 @@ export declare const useBarChartProps: (props: BarChartProps) => {
     overlayProps: ChartsOverlayProps;
     chartsAxisProps: ChartsAxisProps;
     axisHighlightProps: ChartsAxisHighlightProps;
-    legendProps: ChartsLegendProps;
+    legendProps: ChartsLegendSlotExtension;
     children: import("react").ReactNode;
 };

package/BarChart/useBarChartProps.js

@@ -5,6 +5,8 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "onAxisClick", "axisHighlight", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "barLabel", "className", "hideLegend"];
 import useId from '@mui/utils/useId';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from "../constants/index.js";
+import { calculateMargins } from "../internals/calculateMargins.js";
+
 /**
  * A helper function that extracts BarChartProps from the input props
  * and returns an object with props for the children components of BarChart.
@@ -41,7 +43,8 @@ export const useBarChartProps = props => {
       onHighlightChange,
       borderRadius,
       barLabel,
-      className
+      className,
+      hideLegend
     } = props,
     rest = _objectWithoutPropertiesLoose(props, _excluded);
   const id = useId();
@@ -61,7 +64,12 @@ export const useBarChartProps = props => {
     })),
     width,
     height,
-    margin,
+    margin: calculateMargins({
+      margin,
+      hideLegend,
+      slotProps,
+      series
+    }),
     colors,
     dataset,
     xAxis: xAxis ?? (hasHorizontalSeries ? undefined : [_extends({
@@ -70,7 +78,6 @@ export const useBarChartProps = props => {
     yAxis: yAxis ?? (hasHorizontalSeries ? [_extends({
       id: DEFAULT_Y_AXIS_KEY
     }, defaultAxisConfig)] : undefined),
-    sx,
     highlightedItem,
     onHighlightChange,
     disableAxisListener: slotProps?.tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
@@ -119,7 +126,13 @@ export const useBarChartProps = props => {
     slots,
     slotProps
   };
+  const chartsWrapperProps = {
+    sx,
+    legendPosition: props.slotProps?.legend?.position,
+    legendDirection: props.slotProps?.legend?.direction
+  };
   return {
+    chartsWrapperProps,
     chartContainerProps,
     barPlotProps,
     axisClickHandlerProps,

package/CHANGELOG.md

@@ -5,6 +5,247 @@
 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.8
+
+_Jan 16, 2025_
+
+We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- 🍬 Improved design for Data Grid [Header filters](https://next.mui.com/x/react-data-grid/filtering/header-filters/)
+
+  <img width="100%" alt="Data Grid Header filters" src="https://github.com/user-attachments/assets/74a50cd9-7a55-41fc-a2b8-f8a0d5b9120e" />
+
+- 🔄 Data Grid [Scroll restoration](https://next.mui.com/x/react-data-grid/scrolling/#scroll-restoration)
+- 📊 Charts support server-side rendering under [some conditions](https://next.mui.com/x/react-charts/getting-started/#server-side-rendering)
+- 🐞 Bugfixes
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@lauri865.
+Following are all team members who have contributed to this release:
+@arminmeh, @romgrk, @samuelsycamore, @alexfauquette, @cherniavskii, @flaviendelangle, @JCQuintas, @KenanYusuf, @LukasTy, @michelengelen.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### Breaking changes
+
+- The clear button in header filter cells has been moved to the header filter menu. Use `slotProps={{ headerFilterCell: { showClearIcon: true } }}` to restore the clear button in the cell.
+
+#### `@mui/x-data-grid@8.0.0-alpha.8`
+
+- [DataGrid] Improve scrollbar deadzone with overlay scrollbars (#15961) @lauri865
+- [DataGrid] Header filter design improvements (#15991) @KenanYusuf
+- [DataGrid] Scroll restoration (#15623) @lauri865
+- [DataGrid] Fix row, cell and header memoizations (#15666) @lauri865
+
+#### `@mui/x-data-grid-pro@8.0.0-alpha.8` [![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@8.0.0-alpha.8`, plus:
+
+- [DataGridPro] Add test for column pinning with disabled column virtualization (#16176) @cherniavskii
+- [DataGridPro] Fix width of right-pinned column group during resize (#16199) @cherniavskii
+
+#### `@mui/x-data-grid-premium@8.0.0-alpha.8` [![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@8.0.0-alpha.8`.
+
+### Date and Time Pickers
+
+#### Breaking changes
+
+- The field is now editable if rendered inside a mobile Picker — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#field-editing-on-mobile-pickers)
+- The `useMultiInputDateRangeField`, `useMultiInputTimeRangeField`, and `useMultiInputDateTimeRangeField` hooks have been removed in favor of the new `useMultiInputRangeField` hook — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#usemultiinputdaterangefield)
+- The component passed to the `field` slot no longer receives the `value`, `onChange`, `timezone`, `format`, `disabled`, `formatDensity`, `enableAccessibleFieldDOMStructure`, `selectedSections` and `onSelectedSectionsChange` props — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-field)
+
+#### `@mui/x-date-pickers@8.0.0-alpha.8`
+
+- [pickers] Let the field components handle their opening UI, and allow field editing on mobile pickers (#15671) @flaviendelangle
+- [pickers] Remove code duplication for the multi input range fields (#15505) @flaviendelangle
+- [pickers] Rename `onRangePositionChange` into `setRangePosition` in `usePickerRangePositionContext` (#16189) @flaviendelangle
+- [pickers] Use context to pass props from the picker to the field (#16042) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@8.0.0-alpha.8` [![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@8.0.0-alpha.8`.
+
+### Charts
+
+#### Breaking changes
+
+- Charts tooltip markers now have different styles for each chart type. The tooltip and legend marks are now the same.
+- Duplicate axis id's across `x` and `y` axis now log a warning in dev mode. Axis ids should be unique to prevent internal issues.
+
+#### `@mui/x-charts@8.0.0-alpha.8`
+
+- [charts] Fix flaky charts tests (#16180) @JCQuintas
+- [charts] Handle case where gradient stop `offset` could be `Infinite` (#16131) @JCQuintas
+- [charts] Make `useChartGradientId` public (#16106) @JCQuintas
+- [charts] Move z-axis to plugin (#16130) @alexfauquette
+- [charts] Plot data at first render if `skipAnimation` is set to `true` (#16166) @alexfauquette
+- [charts] Replace tooltip mark with style (#16117) @JCQuintas
+- [charts] Support `rtl` for gradient legend (#16115) @JCQuintas
+- [charts] Use plugin system for series and axes (#15865) @alexfauquette
+
+#### `@mui/x-charts-pro@8.0.0-alpha.8` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.0.0-alpha.8`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.0.0-alpha.8`
+
+No changes since `@mui/x-tree-view-pro@v8.0.0-alpha.7`.
+
+#### `@mui/x-tree-view-pro@8.0.0-alpha.8` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.0.0-alpha.8`.
+
+### Docs
+
+- [docs] Add example for custom legend (#16169) @alexfauquette
+- [docs] Add full custom field creation example (#15194) @flaviendelangle
+- [docs] Copyedit the Data Grid cell selection page (#16099) @samuelsycamore
+- [docs] Fix demo rendering issue on Codesandbox (#16118) @arminmeh
+- [docs] Remove broken links (#16167) @alexfauquette
+- [docs] Split the Data Grid editing page (#14931) @MBilalShafi
+- [docs] Fix wrong props warnings (#16119) @JCQuintas
+
+### Core
+
+- [core] Type all references as `RefObject` (#16124) @arminmeh
+- [code-infra] Refactor `react` and `react-dom` definitions to simplify dep resolving (#16160) @LukasTy
+- [code-infra] Stop renovate from updating `date-fns-v2` (#16158) @LukasTy
+- [infra] Improve cherry-pick action target list (#16184) @michelengelen
+- [test] Fix flaky column pinning unit test (#16202) @cherniavskii
+- [test] Fix flaky screenshot (#16182) @cherniavskii
+
+## 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/x-data-grid@8.0.0-alpha.7`
+
+- [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/x-data-grid-pro@8.0.0-alpha.7` [![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@8.0.0-alpha.7`.
+
+#### `@mui/x-data-grid-premium@8.0.0-alpha.7` [![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@8.0.0-alpha.7`, 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/x-date-pickers@8.0.0-alpha.7`
+
+- [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/x-date-pickers-pro@8.0.0-alpha.7` [![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@8.0.0-alpha.7`.
+
+### 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/x-charts@8.0.0-alpha.7`
+
+- [charts] New HTML legend & styles (#15733) @JCQuintas
+- [charts] Improve React 19 support (#15769) @LukasTy
+- [charts] Fix 301 redirection in the API documentation @oliviertassinari
+
+#### `@mui/x-charts-pro@8.0.0-alpha.7` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.0.0-alpha.7`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.0.0-alpha.7`
+
+- [TreeView] Improve React 19 support (#15769) @LukasTy
+
+#### `@mui/x-tree-view-pro@8.0.0-alpha.7` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.0.0-alpha.7`.
+
+### 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_
@@ -104,7 +345,7 @@ Following are all team members who have contributed to this release:
 
 #### Breaking changes
 
-- Passing additional props (like `data-*`, `aria-*`) directly on the Data Grid component is no longer supported. To pass the props, use `slotProps`.
+- Passing additional props (like `data-*`, `aria-*`) directly on the Data Grid component is no longer supported. To pass the props, use `slotProps`:
 
   - For `.root` element, use `slotProps.root`.
   - For `.main` element (the one with `role="grid"`), use `slotProps.main`.

package/ChartContainer/ChartContainer.d.ts

@@ -1,7 +1,9 @@
 import * as React from 'react';
+import { ChartSeriesType } from '../models/seriesType/config';
 import { ChartDataProviderProps } from '../context/ChartDataProvider';
 import { ChartsSurfaceProps } from '../ChartsSurface';
-export interface ChartContainerProps extends ChartDataProviderProps, ChartsSurfaceProps {
+import { AllPluginSignatures } from '../internals/plugins/allPlugins';
+export interface ChartContainerProps<SeriesType extends ChartSeriesType = ChartSeriesType> extends Omit<ChartDataProviderProps<SeriesType, AllPluginSignatures<SeriesType>>, 'children'>, ChartsSurfaceProps {
 }
 /**
  * It sets up the data providers as well as the `<svg>` for the chart.
@@ -27,5 +29,7 @@ export interface ChartContainerProps extends ChartDataProviderProps, ChartsSurfa
  * </ChartContainer>
  * ```
  */
-declare const ChartContainer: React.ForwardRefExoticComponent<ChartContainerProps & React.RefAttributes<SVGSVGElement>>;
+declare const ChartContainer: <TSeries extends ChartSeriesType>(props: ChartContainerProps<TSeries> & {
+    ref?: React.ForwardedRef<SVGSVGElement>;
+}) => React.JSX.Element;
 export { ChartContainer };

package/ChartContainer/ChartContainer.js

@@ -43,11 +43,17 @@ const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(pro
     }))
   }));
 });
+
+// @ts-ignore
+
 process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  apiRef: PropTypes.shape({
+    current: PropTypes.object
+  }),
   children: PropTypes.node,
   className: PropTypes.string,
   /**
@@ -77,11 +83,15 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     dataIndex: PropTypes.number,
     seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
   }),
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id: PropTypes.string,
   /**
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.
    * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
-   * @default object Depends on the charts type.
    */
   margin: PropTypes.shape({
     bottom: PropTypes.number,
@@ -95,23 +105,19 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
    * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
    */
   onHighlightChange: PropTypes.func,
-  /**
-   * An array of plugins defining how to preprocess data.
-   * If not provided, the container supports line, bar, scatter and pie charts.
-   */
-  plugins: PropTypes.arrayOf(PropTypes.object),
   /**
    * The array of series to display.
    * Each type of series has its own specificity.
    * Please refer to the appropriate docs page to learn more about it.
    */
-  series: PropTypes.arrayOf(PropTypes.object).isRequired,
+  series: PropTypes.arrayOf(PropTypes.object),
   /**
    * If `true`, animations are skipped.
    * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
    */
   skipAnimation: PropTypes.bool,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  theme: PropTypes.oneOf(['dark', 'light']),
   title: PropTypes.string,
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.

package/ChartContainer/useChartContainerProps.d.ts

@@ -2,11 +2,13 @@ import * as React from 'react';
 import { ChartsSurfaceProps } from '../ChartsSurface';
 import { ChartDataProviderProps } from '../context/ChartDataProvider';
 import type { ChartContainerProps } from './ChartContainer';
-export type UseChartContainerPropsReturnValue = {
-    chartDataProviderProps: ChartDataProviderProps;
+import { ChartSeriesType } from '../models/seriesType/config';
+import { AllPluginSignatures } from '../internals/plugins/allPlugins';
+export type UseChartContainerPropsReturnValue<TSeries extends ChartSeriesType> = {
+    chartDataProviderProps: ChartDataProviderProps<TSeries, AllPluginSignatures<TSeries>>;
     chartsSurfaceProps: ChartsSurfaceProps & {
         ref: React.Ref<SVGSVGElement>;
     };
     children: React.ReactNode;
 };
-export declare const useChartContainerProps: (props: ChartContainerProps, ref: React.Ref<SVGSVGElement>) => UseChartContainerPropsReturnValue;
+export declare const useChartContainerProps: <TSeries extends ChartSeriesType = keyof import("../internals").ChartsSeriesConfig>(props: ChartContainerProps<TSeries>, ref: React.Ref<SVGSVGElement>) => UseChartContainerPropsReturnValue<TSeries>;

package/ChartContainer/useChartContainerProps.js

@@ -2,7 +2,8 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "plugins", "sx", "title", "xAxis", "yAxis", "zAxis", "skipAnimation"];
+const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "xAxis", "yAxis", "zAxis", "skipAnimation", "seriesConfig"];
+import { ALL_PLUGINS } from "../internals/plugins/allPlugins.js";
 export const useChartContainerProps = (props, ref) => {
   const {
       width,
@@ -16,13 +17,13 @@ export const useChartContainerProps = (props, ref) => {
       disableAxisListener,
       highlightedItem,
       onHighlightChange,
-      plugins,
       sx,
       title,
       xAxis,
       yAxis,
       zAxis,
-      skipAnimation
+      skipAnimation,
+      seriesConfig
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const chartsSurfaceProps = _extends({
@@ -39,13 +40,14 @@ export const useChartContainerProps = (props, ref) => {
     dataset,
     highlightedItem,
     onHighlightChange,
-    plugins,
     xAxis,
     yAxis,
     zAxis,
     skipAnimation,
     width,
-    height
+    height,
+    seriesConfig,
+    plugins: ALL_PLUGINS
   };
   return {
     chartDataProviderProps,

package/ChartsAxis/ChartsAxis.js

@@ -3,9 +3,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useCartesianContext } from "../context/CartesianProvider/index.js";
 import { ChartsXAxis } from "../ChartsXAxis/index.js";
 import { ChartsYAxis } from "../ChartsYAxis/index.js";
+import { useXAxes, useYAxes } from "../hooks/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getAxisId = (propsValue, defaultAxisId) => {
   if (propsValue == null) {
@@ -46,10 +46,12 @@ function ChartsAxis(props) {
   } = props;
   const {
     xAxis,
-    xAxisIds,
+    xAxisIds
+  } = useXAxes();
+  const {
     yAxis,
     yAxisIds
-  } = useCartesianContext();
+  } = useYAxes();
   const leftId = getAxisId(leftAxis === undefined ? yAxisIds[0] : leftAxis, yAxisIds[0]);
   const bottomId = getAxisId(bottomAxis === undefined ? xAxisIds[0] : bottomAxis, xAxisIds[0]);
   const topId = getAxisId(topAxis, xAxisIds[0]);