@mui/x-charts 7.10.0 → 7.11.1

package/BarChart/BarChart.js

@@ -52,8 +52,8 @@ const BarChart = exports.BarChart = /*#__PURE__*/React.forwardRef(function BarCh
     ref: ref
   }, chartContainerProps, {
     children: [props.onAxisClick && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOnAxisClickHandler.ChartsOnAxisClickHandler, (0, _extends2.default)({}, axisClickHandlerProps)), props.grid && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_BarPlot.BarPlot, (0, _extends2.default)({}, barPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps))]
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltipProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_BarPlot.BarPlot, (0, _extends2.default)({}, barPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps))]
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltipProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
   }));
 });
 process.env.NODE_ENV !== "production" ? BarChart.propTypes = {

package/BarChart/BarElement.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { AnimatedProps } from '@react-spring/web';
+import { SlotComponentPropsFromProps } from '../internals/SlotComponentPropsFromProps';
 import { SeriesId } from '../models/seriesType/common';
 export interface BarElementClasses {
     /** Styles applied to the root element. */
@@ -1365,7 +1366,7 @@ export interface BarElementSlots {
     bar?: React.ElementType<BarProps>;
 }
 export interface BarElementSlotProps {
-    bar?: Partial<BarProps>;
+    bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
 }
 export type BarElementProps = Omit<BarElementOwnerState, 'isFaded' | 'isHighlighted'> & Omit<React.SVGProps<SVGRectElement>, 'ref' | 'id'> & {
     /**

package/BarChart/BarLabel/BarLabelItem.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { SlotComponentPropsFromProps } from '../../internals/SlotComponentPropsFromProps';
 import { BarLabelOwnerState, BarItem, BarLabelContext } from './BarLabel.types';
 import { BarLabelProps } from './BarLabel';
 export interface BarLabelSlots {
@@ -9,7 +10,7 @@ export interface BarLabelSlots {
     barLabel?: React.JSXElementConstructor<BarLabelProps>;
 }
 export interface BarLabelSlotProps {
-    barLabel?: Partial<BarLabelProps>;
+    barLabel?: SlotComponentPropsFromProps<BarLabelProps, {}, BarLabelOwnerState>;
 }
 export type BarLabelItemProps = Omit<BarLabelOwnerState, 'isFaded' | 'isHighlighted'> & Pick<BarLabelProps, 'style'> & {
     /**

package/BarChart/BarPlot.js

@@ -74,16 +74,16 @@ const useAggregatedData = () => {
     ids: groupIds
   }, groupIndex) => {
     return groupIds.flatMap(seriesId => {
-      const xAxisKey = series[seriesId].xAxisKey ?? defaultXAxisId;
-      const yAxisKey = series[seriesId].yAxisKey ?? defaultYAxisId;
-      const xAxisConfig = xAxis[xAxisKey];
-      const yAxisConfig = yAxis[yAxisKey];
+      const xAxisId = series[seriesId].xAxisId ?? series[seriesId].xAxisKey ?? defaultXAxisId;
+      const yAxisId = series[seriesId].yAxisId ?? series[seriesId].yAxisKey ?? defaultYAxisId;
+      const xAxisConfig = xAxis[xAxisId];
+      const yAxisConfig = yAxis[yAxisId];
       const verticalLayout = series[seriesId].layout === 'vertical';
-      (0, _checkScaleErrors.checkScaleErrors)(verticalLayout, seriesId, xAxisKey, xAxis, yAxisKey, yAxis);
+      (0, _checkScaleErrors.checkScaleErrors)(verticalLayout, seriesId, xAxisId, xAxis, yAxisId, yAxis);
       const baseScaleConfig = verticalLayout ? xAxisConfig : yAxisConfig;
       const xScale = xAxisConfig.scale;
       const yScale = yAxisConfig.scale;
-      const colorGetter = (0, _getColor.default)(series[seriesId], xAxis[xAxisKey], yAxis[yAxisKey]);
+      const colorGetter = (0, _getColor.default)(series[seriesId], xAxis[xAxisId], yAxis[yAxisId]);
       const bandWidth = baseScaleConfig.scale.bandwidth();
       const {
         barWidth,
@@ -106,8 +106,8 @@ const useAggregatedData = () => {
           seriesId,
           dataIndex,
           layout: series[seriesId].layout,
-          x: verticalLayout ? xScale(xAxis[xAxisKey].data?.[dataIndex]) + barOffset : minValueCoord,
-          y: verticalLayout ? minValueCoord : yScale(yAxis[yAxisKey].data?.[dataIndex]) + barOffset,
+          x: verticalLayout ? xScale(xAxis[xAxisId].data?.[dataIndex]) + barOffset : minValueCoord,
+          y: verticalLayout ? minValueCoord : yScale(yAxis[yAxisId].data?.[dataIndex]) + barOffset,
           xOrigin: xScale(0),
           yOrigin: yScale(0),
           height: verticalLayout ? maxValueCoord - minValueCoord : barWidth,

package/BarChart/checkScaleErrors.d.ts

@@ -1,7 +1,7 @@
 import { AxisDefaultized, AxisId } from '../models/axis';
 import { SeriesId } from '../models/seriesType/common';
-export declare function checkScaleErrors(verticalLayout: boolean, seriesId: SeriesId, xAxisKey: AxisId, xAxis: {
-    [axisKey: AxisId]: AxisDefaultized;
-}, yAxisKey: AxisId, yAxis: {
-    [axisKey: AxisId]: AxisDefaultized;
+export declare function checkScaleErrors(verticalLayout: boolean, seriesId: SeriesId, xAxisId: AxisId, xAxis: {
+    [axisId: AxisId]: AxisDefaultized;
+}, yAxisId: AxisId, yAxis: {
+    [axisId: AxisId]: AxisDefaultized;
 }): void;

package/BarChart/checkScaleErrors.js

@@ -6,28 +6,28 @@ Object.defineProperty(exports, "__esModule", {
 exports.checkScaleErrors = checkScaleErrors;
 var _constants = require("../constants");
 var _axis = require("../models/axis");
-const getAxisMessage = (axisDirection, axisKey) => {
+const getAxisMessage = (axisDirection, axisId) => {
   const axisName = `${axisDirection}-axis`;
-  const axisKeyName = `${axisDirection}Axis`;
+  const axisIdName = `${axisDirection}Axis`;
   const axisDefaultKey = axisDirection === 'x' ? _constants.DEFAULT_X_AXIS_KEY : _constants.DEFAULT_Y_AXIS_KEY;
-  return axisKey === axisDefaultKey ? `The first \`${axisKeyName}\`` : `The ${axisName} with id "${axisKey}"`;
+  return axisId === axisDefaultKey ? `The first \`${axisIdName}\`` : `The ${axisName} with id "${axisId}"`;
 };
-function checkScaleErrors(verticalLayout, seriesId, xAxisKey, xAxis, yAxisKey, yAxis) {
-  const xAxisConfig = xAxis[xAxisKey];
-  const yAxisConfig = yAxis[yAxisKey];
+function checkScaleErrors(verticalLayout, seriesId, xAxisId, xAxis, yAxisId, yAxis) {
+  const xAxisConfig = xAxis[xAxisId];
+  const yAxisConfig = yAxis[yAxisId];
   const discreteAxisConfig = verticalLayout ? xAxisConfig : yAxisConfig;
   const continuousAxisConfig = verticalLayout ? yAxisConfig : xAxisConfig;
-  const discreteAxisKey = verticalLayout ? xAxisKey : yAxisKey;
-  const continuousAxisKey = verticalLayout ? yAxisKey : xAxisKey;
+  const discreteAxisId = verticalLayout ? xAxisId : yAxisId;
+  const continuousAxisId = verticalLayout ? yAxisId : xAxisId;
   const discreteAxisDirection = verticalLayout ? 'x' : 'y';
   const continuousAxisDirection = verticalLayout ? 'y' : 'x';
   if (!(0, _axis.isBandScaleConfig)(discreteAxisConfig)) {
-    throw new Error(`MUI X Charts: ${getAxisMessage(discreteAxisDirection, discreteAxisKey)} should be of type "band" to display the bar series of id "${seriesId}".`);
+    throw new Error(`MUI X: ${getAxisMessage(discreteAxisDirection, discreteAxisId)} should be of type "band" to display the bar series of id "${seriesId}".`);
   }
   if (discreteAxisConfig.data === undefined) {
-    throw new Error(`MUI X Charts: ${getAxisMessage(discreteAxisDirection, discreteAxisKey)} should have data property.`);
+    throw new Error(`MUI X: ${getAxisMessage(discreteAxisDirection, discreteAxisId)} should have data property.`);
   }
   if ((0, _axis.isBandScaleConfig)(continuousAxisConfig) || (0, _axis.isPointScaleConfig)(continuousAxisConfig)) {
-    throw new Error(`MUI X Charts: ${getAxisMessage(continuousAxisDirection, continuousAxisKey)} should be a continuous type to display the bar series of id "${seriesId}".`);
+    throw new Error(`MUI X: ${getAxisMessage(continuousAxisDirection, continuousAxisId)} should be a continuous type to display the bar series of id "${seriesId}".`);
   }
 }

package/BarChart/extremums.js

@@ -18,7 +18,10 @@ const getValueExtremum = params => {
     axis,
     isDefaultAxis
   } = params;
-  return Object.keys(series).filter(seriesId => series[seriesId].yAxisKey === axis.id || isDefaultAxis && series[seriesId].yAxisKey === undefined).reduce((acc, seriesId) => {
+  return Object.keys(series).filter(seriesId => {
+    const yAxisId = series[seriesId].yAxisId ?? series[seriesId].yAxisKey;
+    return yAxisId === axis.id || isDefaultAxis && yAxisId === undefined;
+  }).reduce((acc, seriesId) => {
     const [seriesMin, seriesMax] = series[seriesId].stackedData?.reduce((seriesAcc, values) => [Math.min(...values, ...(seriesAcc[0] === null ? [] : [seriesAcc[0]])), Math.max(...values, ...(seriesAcc[1] === null ? [] : [seriesAcc[1]]))], series[seriesId].stackedData[0]) ?? [null, null];
     return [acc[0] === null ? seriesMin : Math.min(seriesMin, acc[0]), acc[1] === null ? seriesMax : Math.max(seriesMax, acc[1])];
   }, [null, null]);

package/BarChart/formatter.js

@@ -32,7 +32,7 @@ const formatter = (params, dataset) => {
         }
       });
     } else if (dataset === undefined) {
-      throw new Error([`MUI X Charts: bar series with id='${id}' has no data.`, 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
+      throw new Error([`MUI X: bar series with id='${id}' has no data.`, 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
     }
   });
   const completedSeries = {};
@@ -59,7 +59,7 @@ const formatter = (params, dataset) => {
           if (typeof value !== 'number') {
             if (process.env.NODE_ENV !== 'production' && !warnOnce && value !== null) {
               warnOnce = true;
-              console.error([`MUI-X charts: your dataset key "${dataKey}" is used for plotting bars, but contains nonnumerical elements.`, 'Bar plots only support numbers and null values.']);
+              console.error([`MUI X charts: your dataset key "${dataKey}" is used for plotting bars, but contains nonnumerical elements.`, 'Bar plots only support numbers and null values.'].join('\n'));
             }
             return 0;
           }

package/BarChart/useBarChartProps.js

@@ -6,8 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useBarChartProps = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _constants = require("../constants");
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "tooltip", "onAxisClick", "axisHighlight", "legend", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "barLabel", "className"];
 /**
  * A helper function that extracts BarChartProps from the input props
  * and returns an object with props for the children components of BarChart.
@@ -17,36 +19,38 @@ var _constants = require("../constants");
  */
 const useBarChartProps = props => {
   const {
-    xAxis,
-    yAxis,
-    series,
-    width,
-    height,
-    margin,
-    colors,
-    dataset,
-    sx,
-    tooltip,
-    onAxisClick,
-    axisHighlight,
-    legend,
-    grid,
-    topAxis,
-    leftAxis,
-    rightAxis,
-    bottomAxis,
-    children,
-    slots,
-    slotProps,
-    skipAnimation,
-    loading,
-    layout,
-    onItemClick,
-    highlightedItem,
-    onHighlightChange,
-    borderRadius,
-    barLabel
-  } = props;
+      xAxis,
+      yAxis,
+      series,
+      width,
+      height,
+      margin,
+      colors,
+      dataset,
+      sx,
+      tooltip,
+      onAxisClick,
+      axisHighlight,
+      legend,
+      grid,
+      topAxis,
+      leftAxis,
+      rightAxis,
+      bottomAxis,
+      children,
+      slots,
+      slotProps,
+      skipAnimation,
+      loading,
+      layout,
+      onItemClick,
+      highlightedItem,
+      onHighlightChange,
+      borderRadius,
+      barLabel,
+      className
+    } = props,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const id = (0, _useId.default)();
   const clipPathId = `${id}-clip-path`;
   const hasHorizontalSeries = layout === 'horizontal' || layout === undefined && series.some(item => item.layout === 'horizontal');
@@ -56,7 +60,7 @@ const useBarChartProps = props => {
       length: Math.max(...series.map(s => (s.data ?? dataset ?? []).length))
     }, (_, index) => index)
   };
-  const chartContainerProps = {
+  const chartContainerProps = (0, _extends2.default)({}, rest, {
     series: series.map(s => (0, _extends2.default)({
       type: 'bar'
     }, s, {
@@ -76,8 +80,9 @@ const useBarChartProps = props => {
     sx,
     highlightedItem,
     onHighlightChange,
-    disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick
-  };
+    disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
+    className
+  });
   const barPlotProps = {
     onItemClick,
     slots,

package/CHANGELOG.md

@@ -3,6 +3,175 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.11.1
+
+_Jul 25, 2024_
+
+We'd like to offer a big thanks to the 18 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔎 Allow `Zoom` to be controllable for charts (#13858) @JCQuintas
+- 🌍 Add Icelandic (is-IS) and Norwegian Nynorsk (nn-NO) locales on the Data Grid
+- 🌍 Improve Norwegian Bokmål (nb-NO) and German (de-DE) locales on the Data Grid
+- 🌍 Add Norwegian Nynorsk (nn-NO) locale on the Date and Time Pickers
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.11.1`
+
+- [DataGrid] Remove dead code in internal `GridPreferencesPanel` (#13934) @k-rajat19
+- [DataGrid] Do not miss to escape formulas in CSV export (#13888) @arminmeh
+- [l10n] Add Icelandic (is-IS) locale (#13283) @magnimarels
+- [l10n] Add Norwegian nynorsk (nn-NO) locale and improve Norwegian bokmål (nb-NO) locale (#13588) @AnderzL7
+- [l10n] Improve German (de-DE) locale (#13910) @lhilgert9
+
+#### `@mui/x-data-grid-pro@7.11.1` [![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.11.1`.
+
+#### `@mui/x-data-grid-premium@7.11.1` [![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.11.1`, plus:
+
+- [DataGridPremium] Pass the `api` object to events (#13893) @pcorpet
+- [DataGridPremium] Fix paste to selected cells (#13967) @romgrk
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.11.1`
+
+- [fields] Prevent keyboard editing when disabled (#13900) @arthurbalduini
+- [l10n] Add Norwegian Nynorsk (nn-NO) locale (#13946) @AnderzL7
+
+#### `@mui/x-date-pickers-pro@7.11.1` [![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.11.1`.
+
+### Charts
+
+#### `@mui/x-charts@7.11.1`
+
+- [charts] Add `ownerState` function to `slotProps` typing when available (#13965) @alexfauquette
+- [charts] Allow `Zoom` to be controllable (#13858) @JCQuintas
+- [charts] Deprecate `xAxisKey` /`zAxisKey` in favor of `xAxisId`/`zAxisId` (#13940) @alexfauquette
+- [charts] Hide empty arcs in the PieChart (#13897) @alexfauquette
+- [charts] Limit the trigger of exit charts (#13682) @alexfauquette
+
+### Tree View
+
+#### `@mui/x-tree-view@7.11.1`
+
+- [TreeView] Allow the plugins to enrich the props passed to the item slots (#13953) @flaviendelangle
+
+### Docs
+
+- [docs] Bump pnpm priority as a package manager (#13894) @oliviertassinari
+- [docs] Explicitly mark charts pro as not released (#13905) @alexfauquette
+- [docs] Fix dot consistency a11y table @oliviertassinari
+- [docs] Fix some typos in charts docs (#13906) @cratiu222
+- [docs] Fix spelling (#13902) @nnsW3
+- [docs] Improve error message when moving between plans (#13874) @oliviertassinari
+- [docs] Update `SparkLineChart` reference not being correctly capitalised (#13960) @duckboy81
+- [docs] Fix scroll demos disorientation (#13909) @oliviertassinari
+
+### Core
+
+- [core] Add `@mui/material-nextjs` to `MUI Core` renovate group (#13966) @LukasTy
+- [core] Remove warning message in production (#13911) @oliviertassinari
+- [code-infra] Reuse `useReactVersion` script from the monorepo (#13710) @cherniavskii
+- [infra] Adds order id validation action (#13957) @michelengelen
+- [infra] Fix order id validator action (#13971) @michelengelen
+- [infra] Fix regex in order id validation (#13976) @michelengelen
+- [infra] Issue template improvement (#13954) @michelengelen
+
+## 7.11.0
+
+_Jul 18, 2024_
+
+We'd like to offer a big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎨 Add [color legend](https://mui.com/x/react-charts/legend/#color-legend) for charts (#13700) @alexfauquette
+- 🌍 Improve Korean (ko-KR) locale on the Date and Time Pickers
+- 🌍 Improve Russian (ru-RU) locale on the Date and Time Pickers and Data Grid
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.11.0`
+
+- [DataGrid] Expose `gridEditRowsStateSelector` (#13877) @romgrk
+- [DataGrid] Fix `columnResizeStop` event not emitted when column is not resized (#13307) @mateuseap
+- [DataGrid] Fix delete filter inconsistent behavior (#13353) @oukunan
+- [DataGrid] Enable flip on preferences panel (#13803) @romgrk
+- [DataGrid] Support `date` and `datetime-local` input types in `GridFilterInputMultipleValue` type (#13411) @karudedios
+- [l10n] Improve Russian (ru-RU) locale (#13735) @diro-atk
+
+#### `@mui/x-data-grid-pro@7.11.0` [![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.11.0`.
+
+#### `@mui/x-data-grid-premium@7.11.0` [![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.11.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.11.0`
+
+- [l10n] Improve Korean (ko-KR) locale (#13651) @100pearlcent
+- [l10n] Improve Russian (ru-RU) locale (#13871) @Inv1x
+- [pickers] Add more conformance tests improving API docs precision (#13800) @LukasTy
+- [TimePicker] Add `Mui-selected` class to `TimeClock` meridiem buttons (#13848) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.11.0` [![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.11.0`, plus:
+
+- [DateRangePicker] Fix `name` prop propagation regression (#13821) @LukasTy
+
+### Charts
+
+#### `@mui/x-charts@7.11.0`
+
+- [charts] Create color legend (#13700) @alexfauquette
+- [charts] Defaultize axis on top level `useChartContainerProps` (#13817) @JCQuintas
+- [charts] Fix charts not passing `className` to root element (#13647) @JCQuintas
+- [charts] Generate API documentation for pro components (#13822) @alexfauquette
+- [charts] Improve zoomed highlight behaviour (unreleased) (#13868) @JCQuintas
+- [charts] Allow zoom on Y axis and add zoom options to configure zooming behaviour (unreleased) (#13726) @JCQuintas
+- [charts] Disable animations while zooming (unreleased) (#13807) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@7.11.0`
+
+- [TreeView] Extract some logic outside of the `useTreeView` hook (#13845) @flaviendelangle
+
+### Docs
+
+- [docs] Add warning about `process.env.NODE_ENV` in production (#13869) @cherniavskii
+- [docs] Allow controlling the demo form from the example (#13796) @JCQuintas
+- [docs] Clarify Pickers clearable behavior not working on mobile (#13786) @lnhrdt
+- [docs] Improve the documentation of the picker's `onChange` and `onAccept` props (#13543) @flaviendelangle
+- [docs] Replace company name with project name @oliviertassinari
+- [docs] Sort Pickers & Charts API slots alphabetically (#13843) @LukasTy
+
+### Core
+
+- [core] Add MUI Internal `renovate` group (#13846) @LukasTy
+- [core] Link GitHub issue for `import/prefer-default-export` rule @oliviertassinari
+- [core] Normalize `...other` and test imports in charts (#13844) @JCQuintas
+- [core] Normalize rest / other to match the most common used @oliviertassinari
+- [code-infra] Follow `next` tag for `@mui/docs` package bumps (#13813) @LukasTy
+- [code-infra] Use specific version for `@mui/docs` dependency (#13760) @LukasTy
+- [internals] Move `EventManager` to `@mui/x-internals` package (#13815) @flaviendelangle
+
 ## 7.10.0
 
 _Jul 11, 2024_

package/ChartContainer/ChartContainer.d.ts

@@ -6,7 +6,21 @@ import { CartesianContextProviderProps } from '../context/CartesianProvider';
 import { HighlightedProviderProps, ZAxisContextProviderProps } from '../context';
 import { ChartsPluginType } from '../models/plugin';
 import { ChartSeriesType } from '../models/seriesType/config';
-export type ChartContainerProps = Omit<ChartsSurfaceProps & Omit<SeriesContextProviderProps, 'seriesFormatters'> & Omit<DrawingProviderProps, 'svgRef'> & Omit<CartesianContextProviderProps, 'xExtremumGetters' | 'yExtremumGetters'> & ZAxisContextProviderProps & HighlightedProviderProps, 'children'> & {
+import { AxisConfig, ChartsXAxisProps, ChartsYAxisProps, ScaleName } from '../models/axis';
+import { MakeOptional } from '../models/helpers';
+export type ChartContainerProps = Omit<ChartsSurfaceProps & Omit<SeriesContextProviderProps, 'seriesFormatters'> & Omit<DrawingProviderProps, 'svgRef'> & Pick<CartesianContextProviderProps, 'dataset'> & ZAxisContextProviderProps & HighlightedProviderProps, 'children'> & {
+    /**
+     * The configuration of the x-axes.
+     * If not provided, a default axis config is used.
+     * An array of [[AxisConfig]] objects.
+     */
+    xAxis?: MakeOptional<AxisConfig<ScaleName, any, ChartsXAxisProps>, 'id'>[];
+    /**
+     * The configuration of the y-axes.
+     * If not provided, a default axis config is used.
+     * An array of [[AxisConfig]] objects.
+     */
+    yAxis?: MakeOptional<AxisConfig<ScaleName, any, ChartsYAxisProps>, 'id'>[];
     children?: React.ReactNode;
     /**
      * An array of plugins defining how to preprocess data.
@@ -14,7 +28,19 @@ export type ChartContainerProps = Omit<ChartsSurfaceProps & Omit<SeriesContextPr
      */
     plugins?: ChartsPluginType<ChartSeriesType>[];
 };
-declare const ChartContainer: React.ForwardRefExoticComponent<Omit<ChartsSurfaceProps & Omit<SeriesContextProviderProps, "seriesFormatters"> & Omit<DrawingProviderProps, "svgRef"> & Omit<CartesianContextProviderProps, "xExtremumGetters" | "yExtremumGetters"> & ZAxisContextProviderProps & HighlightedProviderProps, "children"> & {
+declare const ChartContainer: React.ForwardRefExoticComponent<Omit<ChartsSurfaceProps & Omit<SeriesContextProviderProps, "seriesFormatters"> & Omit<DrawingProviderProps, "svgRef"> & Pick<CartesianContextProviderProps, "dataset"> & ZAxisContextProviderProps & HighlightedProviderProps, "children"> & {
+    /**
+     * The configuration of the x-axes.
+     * If not provided, a default axis config is used.
+     * An array of [[AxisConfig]] objects.
+     */
+    xAxis?: MakeOptional<AxisConfig<ScaleName, any, ChartsXAxisProps>, "id">[];
+    /**
+     * The configuration of the y-axes.
+     * If not provided, a default axis config is used.
+     * An array of [[AxisConfig]] objects.
+     */
+    yAxis?: MakeOptional<AxisConfig<ScaleName, any, ChartsYAxisProps>, "id">[];
     children?: React.ReactNode;
     /**
      * An array of plugins defining how to preprocess data.

package/ChartContainer/ChartContainer.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartContainer = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _DrawingProvider = require("../context/DrawingProvider");
@@ -15,80 +16,38 @@ var _ChartsSurface = require("../ChartsSurface");
 var _CartesianProvider = require("../context/CartesianProvider");
 var _ChartsAxesGradients = require("../internals/components/ChartsAxesGradients");
 var _context = require("../context");
-var _useChartContainerHooks = require("./useChartContainerHooks");
+var _useChartContainerProps = require("./useChartContainerProps");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const ChartContainer = exports.ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(props, ref) {
   const {
-    width,
-    height,
-    series,
-    margin,
-    xAxis,
-    yAxis,
-    zAxis,
-    colors,
-    dataset,
-    sx,
-    title,
-    desc,
-    disableAxisListener,
-    highlightedItem,
-    onHighlightChange,
-    plugins,
-    children
-  } = props;
-  const {
-    svgRef,
-    handleRef,
-    xExtremumGetters,
-    yExtremumGetters,
-    seriesFormatters,
-    colorProcessors
-  } = (0, _useChartContainerHooks.useChartContainerHooks)(ref, plugins);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawingProvider.DrawingProvider, {
-    width: width,
-    height: height,
-    margin: margin,
-    svgRef: svgRef,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColorProvider.ColorProvider, {
-      colorProcessors: colorProcessors,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SeriesContextProvider.SeriesContextProvider, {
-        series: series,
-        colors: colors,
-        dataset: dataset,
-        seriesFormatters: seriesFormatters,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CartesianProvider.CartesianContextProvider, {
-          xAxis: xAxis,
-          yAxis: yAxis,
-          dataset: dataset,
-          xExtremumGetters: xExtremumGetters,
-          yExtremumGetters: yExtremumGetters,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.ZAxisContextProvider, {
-            zAxis: zAxis,
-            dataset: dataset,
+    children,
+    drawingProviderProps,
+    colorProviderProps,
+    seriesContextProps,
+    cartesianContextProps,
+    zAxisContextProps,
+    highlightedProviderProps,
+    chartsSurfaceProps
+  } = (0, _useChartContainerProps.useChartContainerProps)(props, ref);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawingProvider.DrawingProvider, (0, _extends2.default)({}, drawingProviderProps, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColorProvider.ColorProvider, (0, _extends2.default)({}, colorProviderProps, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SeriesContextProvider.SeriesContextProvider, (0, _extends2.default)({}, seriesContextProps, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CartesianProvider.CartesianContextProvider, (0, _extends2.default)({}, cartesianContextProps, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.ZAxisContextProvider, (0, _extends2.default)({}, zAxisContextProps, {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InteractionProvider.InteractionProvider, {
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.HighlightedProvider, {
-                highlightedItem: highlightedItem,
-                onHighlightChange: onHighlightChange,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, {
-                  width: width,
-                  height: height,
-                  ref: handleRef,
-                  sx: sx,
-                  title: title,
-                  desc: desc,
-                  disableAxisListener: disableAxisListener,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.HighlightedProvider, (0, _extends2.default)({}, highlightedProviderProps, {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
                   children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxesGradients.ChartsAxesGradients, {}), children]
-                })
-              })
+                }))
+              }))
             })
-          })
-        })
-      })
-    })
-  });
+          }))
+        }))
+      }))
+    }))
+  }));
 });
 process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
   // ----------------------------- Warning --------------------------------

package/ChartContainer/useChartContainerHooks.d.ts

@@ -3,7 +3,7 @@ import { ChartsPluginType } from '../models';
 import { ChartSeriesType } from '../models/seriesType/config';
 export declare const useChartContainerHooks: (ref: React.ForwardedRef<unknown> | null, plugins?: ChartsPluginType<ChartSeriesType>[]) => {
     svgRef: React.RefObject<SVGSVGElement>;
-    handleRef: ((instance: unknown) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null;
+    chartSurfaceRef: ((instance: unknown) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null;
     xExtremumGetters: import("../models").ExtremumGettersConfig<keyof import("../models/seriesType/config").ChartsSeriesConfig>;
     yExtremumGetters: import("../models").ExtremumGettersConfig<keyof import("../models/seriesType/config").ChartsSeriesConfig>;
     seriesFormatters: import("../internals").SeriesFormatterConfig<keyof import("../models/seriesType/config").ChartsSeriesConfig>;

package/ChartContainer/useChartContainerHooks.js

@@ -13,7 +13,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useChartContainerHooks = (ref, plugins) => {
   const svgRef = React.useRef(null);
-  const handleRef = (0, _useForkRef.default)(ref, svgRef);
+  const chartSurfaceRef = (0, _useForkRef.default)(ref, svgRef);
   const {
     xExtremumGetters,
     yExtremumGetters,
@@ -24,7 +24,7 @@ const useChartContainerHooks = (ref, plugins) => {
 
   return {
     svgRef,
-    handleRef,
+    chartSurfaceRef,
     xExtremumGetters,
     yExtremumGetters,
     seriesFormatters,