@mui/x-charts 8.0.0-alpha.1 → 8.0.0-alpha.2

package/CHANGELOG.md

@@ -5,6 +5,133 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## v8.0.0-alpha.2
+
+_Nov 29, 2024_
+
+We'd like to offer a big thanks to the 17 contributors who made this release possible. Here are some highlights ✨:
+
+- 👨🏽‍💻 Improve resize performance on the Data Gird.
+- `<ChartDataProvider />` and `<ChartsSurface />` components are now fully divided — [Learn more](https://next.mui.com/x/react-charts/composition/#overview).
+- Users can create their own HTML components using chart data — [Learn more](https://next.mui.com/x/react-charts/components/#html-components).
+- 🌍 Improve Spanish, Portuguese, Chinese locales on the Data Grid component.
+- 🌍 Improve Dutch locale on the Date and Time Pickers components.
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@dloeda, @headironc, @jedesroches, @k-rajat19, @lauri865, @mathzdev, @nphmuller, @zinoroman.
+Following are all team members who have contributed to this release:
+@arminmeh, @alexfauquette, @cherniavskii, @flaviendelangle, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @oliviertassinari.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### Breaking changes
+
+- The `<GridOverlays />` component is not exported anymore.
+- The `indeterminateCheckboxAction` prop has been removed. Clicking on an indeterminate checkbox "selects" the unselected descendants.
+- The `apiRef.current.resize()` method was removed.
+- The default value of the `rowSelectionPropagation` prop has been changed to `{ parents: true, descendants: true }` which means that the selection will be propagated to the parents and descendants by default.
+  To revert to the previous behavior, pass `rowSelectionPropagation` as `{ parents: false, descendants: false }`.
+- If `estimatedRowCount` is used, the text provided to the [Table Pagination](/material-ui/api/table-pagination/) component from the Material UI library is updated and requires additional translations. Check the example at the end of [Index-based pagination section](/x/react-data-grid/pagination/#index-based-pagination).
+
+#### `@mui/x-data-grid@v8.0.0-alpha.2`
+
+- [DataGrid] Change test dom check from `/jsdom/` to `/jsdom|HappyDOM/`. (#15634) @jedesroches
+- [DataGrid] Clear timers on unmount (#15620) @cherniavskii
+- [DataGrid] Fix order of spread props on toolbar items (#15556) @KenanYusuf
+- [DataGrid] Improve resize performance (#15549) @lauri865
+- [DataGrid] Make estimation label more accurate (#15632) @arminmeh
+- [DataGrid] Remove `<GridOverlays />` export (#15573) @k-rajat19
+- [DataGrid] Remove `indeterminateCheckboxAction` prop (#15522) @MBilalShafi
+- [DataGrid] Remove try/catch from `<GridCell />` due to performance issues (#15616) @lauri865
+- [DataGrid] Remove unused `resize` method (#15599) @cherniavskii
+- [DataGrid] Support column virtualization with dynamic row height (#15541) @cherniavskii
+- [DataGrid] Update the default value for `rowSelectionPropagation` (#15523) @MBilalShafi
+- [l10n] Improve Chinese (zh-CN) locale (#15570) @headironc
+- [l10n] Improve Portuguese (pt-PT) locale (#15561) @mathzdev
+
+#### `@mui/x-data-grid-pro@v8.0.0-alpha.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@v8.0.0-alpha.2`, plus:
+
+- [DataGridPro] Fix header filtering with `boolean` column type (#15528) @k-rajat19
+- [DataGridPro] Fix pagination state not updating if the data source response has no rows (#15622) @zinoroman
+- [DataGridPro] Fix selection propagation issue on initialization (#15461) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@v8.0.0-alpha.2` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@v8.0.0-alpha.2`.
+
+### Date and Time Pickers
+
+#### Breaking changes
+
+- The props received by the `layout` and the `toolbar` slots have been reworked — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#do-not-pass-the-section-type-as-a-generic).
+
+- The `TSection` generic of the `FieldRef` type has been replaced with the `TValue` generic — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slots-breaking-changes).
+
+#### `@mui/x-date-pickers@v8.0.0-alpha.2`
+
+- [l10n] Improve Dutch (nl-NL) locale (#15564) @nphmuller
+- [pickers] Fix DST issue with `America/Asuncion` timezone and `AdapterMoment` (#15552) @flaviendelangle
+- [pickers] Improve validation internals (#15419) @flaviendelangle
+- [pickers] Remove `TSection` and strictly type `TValue` (#15434) @flaviendelangle
+- [pickers] Remove `orientation`, `isLandscape`, `isRtl`, `wrapperVariant` and `disabled` props from `PickersLayout` (#15494) @flaviendelangle
+- [pickers] Use the new `ownerState` in `<PickersCalendarHeader />`, `<PickersArrowSwitcher />` and `<DayCalendarSkeleton />` (#15499) @flaviendelangle
+- [pickers] Use the new `ownerState` object in all the field components (#15510) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@v8.0.0-alpha.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@v8.0.0-alpha.2`.
+
+### Charts
+
+#### Breaking changes
+
+- Charts Container don't have a `<div />` wrapping them anymore. All props are now passed to the root `<svg />` instead of the `<div />`.
+
+#### `@mui/x-charts@v8.0.0-alpha.2`
+
+- [charts] Allow the creation of custom HTML components using charts data (#15511) @JCQuintas
+- [charts] Flatten imports from `@mui/utils` and `@mui/system` (#15603) @alexfauquette
+- [charts] Introduce the plugin system (#15513) @alexfauquette
+- [charts] Prevent invalid `releasePointerCapture` (#15602) @alexfauquette
+- [charts] Fix custom Tooltip demos (#15631) @alexfauquette
+
+#### `@mui/x-charts-pro@v8.0.0-alpha.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@v8.0.0-alpha.2`.
+
+### Tree View
+
+#### `@mui/x-tree-view@v8.0.0-alpha.2`
+
+- [TreeView] Flatten import from `@mui/utils` and `@mui/system` (#15604) @alexfauquette
+
+#### `@mui/x-tree-view-pro@v8.0.0-alpha.2`
+
+Same changes as in `@mui/x-tree-view@v8.0.0-alpha.2`.
+
+### Docs
+
+- [docs] Fix 404 links (#15575) @oliviertassinari
+- [docs] Fix bash comments (#15571) @oliviertassinari
+- [docs] Fix Pickers theme augmentation example (#15672) @LukasTy
+- [docs] Replace use of "e.g." with "for example" (#15572) @oliviertassinari
+- [docs] Update stale `new` and `preview` tags in v8 docs (#15547) @JCQuintas
+- [docs] Fix layout shift image on Tree View docs (#15626) @oliviertassinari
+- [docs] Fix `anchorEl` API page for charts (#15625) @oliviertassinari
+- [docs] Add documentation for the list view feature (#15344) @KenanYusuf
+
+### Core
+
+- [core] Follow `()` function convention for docs @oliviertassinari
+- [core] Remove dead translation key (#15566) @oliviertassinari
+- [code-infra] Auto-merge `@types/node` bumps (#15591) @LukasTy
+
 ## v8.0.0-alpha.1
 
 _Nov 22, 2024_
@@ -17,8 +144,6 @@ We'd like to offer a big thanks to the 16 contributors who made this release pos
 - 🐞 Bugfixes
 - 📚 Documentation improvements
 
-### Breaking change
-
 Special thanks go out to the community contributors who have helped make this release possible:
 @CarlosLopezLg, @headironc, @hendrikpeilke, @k-rajat19, @lhilgert9, @viktormelin.
 Following are all team members who have contributed to this release:
@@ -56,7 +181,7 @@ Same changes as in `@mui/x-data-grid-pro@v8.0.0-alpha.1`, plus:
 #### Breaking change
 
 - The `FieldValueType` type has been renamed to `PickerValueType` — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#renamed-variables).
-- The `toolbar` and `layout` slots no longer receive the  `disabled` and `readOnly` props — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slots-breaking-changes).
+- The `toolbar` and `layout` slots no longer receive the `disabled` and `readOnly` props — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slots-breaking-changes).
 
 #### `@mui/x-date-pickers@v8.0.0-alpha.1`
 
@@ -64,9 +189,9 @@ Same changes as in `@mui/x-data-grid-pro@v8.0.0-alpha.1`, plus:
 - [pickers] React 19 support (#15342) @arminmeh
 - [pickers] Add new properties to `PickerOwnerState` and `PickerContextValue` (#15415) @flaviendelangle
 - [pickers] Always use `props.value` when it changes (#15490) @flaviendelangle
-- [pickers] Ensure internal value timezone is updated  (#15435) @LukasTy
+- [pickers] Ensure internal value timezone is updated (#15435) @LukasTy
 - [pickers] Fix unused code in `<PickersToolbar />` component (#15515) @LukasTy
-- [pickers] Remove  `FieldValueType` in favor of `PickerValueType` (#15259) @arthurbalduini
+- [pickers] Remove `FieldValueType` in favor of `PickerValueType` (#15259) @arthurbalduini
 - [pickers] Remove the form props from the layout and the toolbar slots (#15492) @flaviendelangle
 - [pickers] Use `props.referenceDate` timezone when `props.value` and `props.defaultValue` are not defined (#15532) @flaviendelangle
 - [TimePicker] Prevent mouse events after `touchend` event (#15346) @arthurbalduini
@@ -82,12 +207,14 @@ Same changes as in `@mui/x-date-pickers@v8.0.0-alpha.1`, plus:
 #### Breaking change
 
 - The DX of the Tooltip customization has been refactored
+
   - The `tooltip` prop has been removed in favor of `slotProps.tooltip` for consistency.
-  - The `popper`, `axisContent`,  and `itemContent` slots have been removed in favor of the `tooltip` slot which overrides the entire tooltip.
+  - The `popper`, `axisContent`, and `itemContent` slots have been removed in favor of the `tooltip` slot which overrides the entire tooltip.
     - To override the tooltip content, use the `useItemTooltip` or `useAxisTooltip` hook to get the data, and wrap your component in `ChartsTooltipContainer` to follow the pointer position.
     - To override the tooltip placement, use the `ChartsItemTooltipContent` or `ChartsItemTooltipContent` to get default data and place them in your custom tooltip.
 
 - The library now uses the SVG `filter` attribute instead of `d3-color` for color manipulation.
+
   - This modification impacts the `LinePlot`, `AreaPlot`, and `BarPlot` components.
     If you've customized the `fill` of those elements, you might need to override it by using the CSS `filter`.
   - The `theme.styleOverride` is removed for `MuiLineElement`, `MuiAreaElement`, and `MuiBarElement` to improve performance.
@@ -338,6 +465,100 @@ Same changes as in `@mui/x-charts@8.0.0-alpha.0`.
 - [release] v8 preparation (#15054) @michelengelen
 - [test] Fix advanced list view regression test snapshot (#15260) @KenanYusuf
 
+## 7.23.0
+
+_Nov 29, 2024_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- ✨ Support for a new display mode on the Data Grid with the [List View feature](https://mui.com/x/react-data-grid/list-view/), offering an extremely flexible way to render datasets and enabling developers to adapt how data is displayed across different screen sizes.
+
+  https://github.com/user-attachments/assets/61286adc-03fc-4323-9739-8ca726fcc16c
+
+- ⚛️ React 19 support
+- 📚 Documentation improvements
+- 🌍 Improve Spanish, Portuguese, Chinese locales on the Data Grid component.
+- 🌍 Improve Dutch locale on the Date and Time Picker components.
+- 🐞 Bugfixes
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@dloeda, @headironc, @mathzdev, @nphmuller, @lhilgert9, @lauri865.
+Following are all team members who have contributed to this release:
+@oliviertassinari, @arminmeh, @KenanYusuf, @flaviendelangle, @MBilalShafi.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@v7.23.0`
+
+- [DataGrid] React 19 support (#15557) @arminmeh
+- [DataGrid] Change test dom check from `/jsdom/` to `/jsdom|HappyDOM/`. (#15642) @jedesroches
+- [DataGrid] Fix last separator not being hidden when grid is scrollable (#15551) @KenanYusuf
+- [DataGrid] Fix order of spread props on toolbar items (#15556) @KenanYusuf
+- [DataGrid] Fix row-spanning in combination with column-pinning (#15460) @lhilgert9
+- [DataGrid] Improve resize performance (#15592) @lauri865
+- [DataGrid] Support column virtualization with dynamic row height (#15567) @cherniavskii
+- [DataGrid] Improve `GridCell` performance (#15621) @lauri865
+- [l10n] Improve Chinese (zh-CN) locale (#15570) @headironc
+- [l10n] Improve Portuguese (pt-PT) locale (#15561) @mathzdev
+
+#### `@mui/x-data-grid-pro@v7.23.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@v7.23.0`, plus:
+
+- [DataGridPro] Fix header filtering with `boolean` column type (#15640) @k-rajat19
+- [DataGridPro] Fix pagination state not updating if the data source response has no rows (#15643) @zinoroman
+- [DataGridPro] Fix selection propagation issue on initialization (#15593) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@v7.23.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@v7.23.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@v7.23.0`
+
+- [pickers] React 19 support (#15557) @arminmeh
+- [pickers] Fix DST issue with `America/Asuncion` timezone and `AdapterMoment` (#15653) @flaviendelangle
+- [pickers] Use `props.referenceDate` timezone when `props.value` and `props.defaultValue` are not defined (#15544) @flaviendelangle
+- [l10n] Improve Dutch (nl-NL) locale (#15564) @nphmuller
+
+#### `@mui/x-date-pickers-pro@v7.23.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@v7.23.0`.
+
+### Charts
+
+#### `@mui/x-charts@v7.23.0`
+
+- [charts] React 19 support (#15557) @arminmeh
+- [charts] Prevent invalid `releasePointerCapture` (#15609) @alexfauquette
+
+#### `@mui/x-charts-pro@v7.23.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-charts@v7.23.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@v7.23.0`
+
+- [TreeView] React 19 support (#15557) @arminmeh
+
+#### `@mui/x-tree-view-pro@7.23.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-tree-view@7.23.0`.
+
+### Docs
+
+- [docs] Add data caching to lazy loaded detail panel demo (#15555) @cherniavskii
+- [docs] Remove selectors section from list view docs (#15639) @KenanYusuf
+- [docs] Add documentation for the list view feature (#15344) @KenanYusuf
+
+### Core
+
+- [core] Update @mui/monorepo (#15574) @oliviertassinari
+
 ## v7.22.3
 
 _Nov 21, 2024_
@@ -4803,7 +5024,7 @@ Same changes as in `@mui/x-data-grid-pro@7.0.0-alpha.5`.
 
   The `useClearableField` hook API has been simplified to now take a `props` parameter instead of a `fieldProps`, `InputProps`, `clearable`, `onClear`, `slots` and `slotProps` parameters.
 
-  You should now be able to directly pass the returned value from your field hook (e.g: `useDateField`) to `useClearableField`
+  You should now be able to directly pass the returned value from your field hook (for example `useDateField`) to `useClearableField`
 
   ```diff
    const fieldResponse = useDateField(props);

package/ChartContainer/ChartContainer.d.ts

@@ -3,5 +3,29 @@ import { ChartDataProviderProps } from '../context/ChartDataProvider';
 import { ChartsSurfaceProps } from '../ChartsSurface';
 export interface ChartContainerProps extends ChartDataProviderProps, ChartsSurfaceProps {
 }
+/**
+ * It sets up the data providers as well as the `<svg>` for the chart.
+ *
+ * This is a combination of both the `ChartDataProvider` and `ChartsSurface` components.
+ *
+ * Demos:
+ *
+ * - [Composition](http://localhost:3001/x/react-charts/composition/)
+ *
+ * API:
+ *
+ * - [ChartContainer API](https://mui.com/x/api/charts/chart-container/)
+ *
+ * @example
+ * ```jsx
+ * <ChartContainer
+ *   series={[{ label: "Label", type: "bar", data: [10, 20] }]}
+ *   xAxis={[{ data: ["A", "B"], scaleType: "band", id: "x-axis" }]}
+ * >
+ *    <BarPlot />
+ *    <ChartsXAxis position="bottom" axisId="x-axis" />
+ * </ChartContainer>
+ * ```
+ */
 declare const ChartContainer: React.ForwardRefExoticComponent<ChartContainerProps & React.RefAttributes<SVGSVGElement>>;
 export { ChartContainer };

package/ChartContainer/ChartContainer.js

@@ -4,22 +4,42 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { ChartDataProvider } from "../context/ChartDataProvider/index.js";
-import { ResizableContainer } from "./ResizableContainer.js";
 import { useChartContainerProps } from "./useChartContainerProps.js";
 import { ChartsSurface } from "../ChartsSurface/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * It sets up the data providers as well as the `<svg>` for the chart.
+ *
+ * This is a combination of both the `ChartDataProvider` and `ChartsSurface` components.
+ *
+ * Demos:
+ *
+ * - [Composition](http://localhost:3001/x/react-charts/composition/)
+ *
+ * API:
+ *
+ * - [ChartContainer API](https://mui.com/x/api/charts/chart-container/)
+ *
+ * @example
+ * ```jsx
+ * <ChartContainer
+ *   series={[{ label: "Label", type: "bar", data: [10, 20] }]}
+ *   xAxis={[{ data: ["A", "B"], scaleType: "band", id: "x-axis" }]}
+ * >
+ *    <BarPlot />
+ *    <ChartsXAxis position="bottom" axisId="x-axis" />
+ * </ChartContainer>
+ * ```
+ */
 const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(props, ref) {
   const {
     chartDataProviderProps,
     children,
-    resizableContainerProps,
     chartsSurfaceProps
   } = useChartContainerProps(props, ref);
   return /*#__PURE__*/_jsx(ChartDataProvider, _extends({}, chartDataProviderProps, {
-    children: /*#__PURE__*/_jsx(ResizableContainer, _extends({}, resizableContainerProps, {
-      children: /*#__PURE__*/_jsx(ChartsSurface, _extends({}, chartsSurfaceProps, {
-        children: children
-      }))
+    children: /*#__PURE__*/_jsx(ChartsSurface, _extends({}, chartsSurfaceProps, {
+      children: children
     }))
   }));
 });
@@ -128,7 +148,6 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     label: PropTypes.string,
-    labelFontSize: PropTypes.number,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -139,7 +158,6 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     slots: PropTypes.object,
     stroke: PropTypes.string,
     sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-    tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
     tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
@@ -182,7 +200,6 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     label: PropTypes.string,
-    labelFontSize: PropTypes.number,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -193,7 +210,6 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     slots: PropTypes.object,
     stroke: PropTypes.string,
     sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-    tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
     tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),

package/ChartContainer/useChartContainerProps.d.ts

@@ -7,7 +7,6 @@ export type UseChartContainerPropsReturnValue = {
     chartsSurfaceProps: ChartsSurfaceProps & {
         ref: React.Ref<SVGSVGElement>;
     };
-    resizableContainerProps: any;
     children: React.ReactNode;
 };
 export declare const useChartContainerProps: (props: ChartContainerProps, ref: React.Ref<SVGSVGElement>) => UseChartContainerPropsReturnValue;

package/ChartContainer/useChartContainerProps.js

@@ -1,5 +1,6 @@
 'use client';
 
+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"];
 export const useChartContainerProps = (props, ref) => {
@@ -24,14 +25,13 @@ export const useChartContainerProps = (props, ref) => {
       skipAnimation
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const resizableContainerProps = other;
-  const chartsSurfaceProps = {
+  const chartsSurfaceProps = _extends({
     title,
     desc,
     sx,
     disableAxisListener,
     ref
-  };
+  }, other);
   const chartDataProviderProps = {
     margin,
     series,
@@ -49,7 +49,6 @@ export const useChartContainerProps = (props, ref) => {
   };
   return {
     chartDataProviderProps,
-    resizableContainerProps,
     chartsSurfaceProps,
     children
   };

package/ChartsAxis/axisClasses.js

@@ -1,4 +1,5 @@
-import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getAxisUtilityClass(slot) {
   return generateUtilityClass('MuiChartsAxis', slot);
 }

package/ChartsAxisHighlight/ChartsXAxisHighlight.js

@@ -3,9 +3,9 @@
 import * as React from 'react';
 import { getValueToPositionMapper, useXScale } from "../hooks/useScale.js";
 import { isBandScale } from "../internals/isBandScale.js";
-import { useSelector } from "../internals/useSelector.js";
-import { useStore } from "../internals/useStore.js";
-import { selectorChartsInteractionXAxis } from "../context/InteractionSelectors.js";
+import { useSelector } from "../internals/store/useSelector.js";
+import { useStore } from "../internals/store/useStore.js";
+import { selectorChartsInteractionXAxis } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 import { useDrawingArea } from "../hooks/index.js";
 import { ChartsAxisHighlightPath } from "./ChartsAxisHighlightPath.js";
 

package/ChartsAxisHighlight/ChartsYAxisHighlight.js

@@ -3,9 +3,9 @@
 import * as React from 'react';
 import { getValueToPositionMapper, useYScale } from "../hooks/useScale.js";
 import { isBandScale } from "../internals/isBandScale.js";
-import { useSelector } from "../internals/useSelector.js";
-import { useStore } from "../internals/useStore.js";
-import { selectorChartsInteractionYAxis } from "../context/InteractionSelectors.js";
+import { useSelector } from "../internals/store/useSelector.js";
+import { useStore } from "../internals/store/useStore.js";
+import { selectorChartsInteractionYAxis } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 import { useDrawingArea } from "../hooks/index.js";
 import { ChartsAxisHighlightPath } from "./ChartsAxisHighlightPath.js";
 

package/ChartsLegend/chartsLegendClasses.js

@@ -1,4 +1,5 @@
-import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getLegendUtilityClass(slot) {
   return generateUtilityClass('MuiChartsLegend', slot);
 }

package/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { useSeries } from "../hooks/useSeries.js";
 import { useSvgRef } from "../hooks/index.js";
 import { useCartesianContext } from "../context/CartesianProvider/index.js";
-import { useStore } from "../internals/useStore.js";
+import { useStore } from "../internals/store/useStore.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function ChartsOnAxisClickHandler(props) {
   const {

package/ChartsSurface/ChartsSurface.d.ts

@@ -13,5 +13,19 @@ export interface ChartsSurfaceProps {
      */
     disableAxisListener?: boolean;
 }
+/**
+ * It provides the drawing area for the chart elements.
+ * It is the root `<svg>` of all the chart elements.
+ *
+ * It also provides the `title` and `desc` elements for the chart.
+ *
+ * Demos:
+ *
+ * - [Composition](http://localhost:3001/x/react-charts/composition/)
+ *
+ * API:
+ *
+ * - [ChartsSurface API](https://mui.com/x/api/charts/charts-surface/)
+ */
 declare const ChartsSurface: React.ForwardRefExoticComponent<ChartsSurfaceProps & React.RefAttributes<SVGSVGElement>>;
 export { ChartsSurface };

package/ChartsSurface/ChartsSurface.js

@@ -9,18 +9,43 @@ import * as React from 'react';
 import useForkRef from '@mui/utils/useForkRef';
 import { useAxisEvents } from "../hooks/useAxisEvents.js";
 import { ChartsAxesGradients } from "../internals/components/ChartsAxesGradients/index.js";
-import { useDrawingArea } from "../hooks/index.js";
-import { useSurfaceRef } from "../context/SvgRefProvider/index.js";
+import { useDrawingArea, useSvgRef } from "../hooks/index.js";
 import { useSize } from "../context/SizeProvider/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ChartsSurfaceStyles = styled('svg', {
   name: 'MuiChartsSurface',
   slot: 'Root'
-})(() => ({
+})(({
+  ownerState
+}) => ({
+  width: ownerState.width ?? '100%',
+  height: ownerState.height ?? '100%',
+  display: 'flex',
+  position: 'relative',
+  flexGrow: 1,
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  overflow: 'hidden',
   // This prevents default touch actions when using the svg on mobile devices.
   // For example, prevent page scroll & zoom.
   touchAction: 'none'
 }));
+
+/**
+ * It provides the drawing area for the chart elements.
+ * It is the root `<svg>` of all the chart elements.
+ *
+ * It also provides the `title` and `desc` elements for the chart.
+ *
+ * Demos:
+ *
+ * - [Composition](http://localhost:3001/x/react-charts/composition/)
+ *
+ * API:
+ *
+ * - [ChartsSurface API](https://mui.com/x/api/charts/charts-surface/)
+ */
 const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(inProps, ref) {
   const {
     width,
@@ -31,10 +56,13 @@ const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(inPro
     bottom
   } = useDrawingArea();
   const {
-    hasIntrinsicSize
+    hasIntrinsicSize,
+    svgRef: containerRef,
+    inHeight,
+    inWidth
   } = useSize();
-  const surfaceRef = useSurfaceRef();
-  const handleRef = useForkRef(surfaceRef, ref);
+  const svgRef = useSvgRef();
+  const handleRef = useForkRef(containerRef, svgRef, ref);
   const themeProps = useThemeProps({
     props: inProps,
     name: 'MuiChartsSurface'
@@ -57,6 +85,10 @@ const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(inPro
   };
   useAxisEvents(disableAxisListener);
   return /*#__PURE__*/_jsxs(ChartsSurfaceStyles, _extends({
+    ownerState: {
+      width: inWidth,
+      height: inHeight
+    },
     viewBox: `${svgView.x} ${svgView.y} ${svgView.width} ${svgView.height}`,
     className: className
   }, other, {

package/ChartsTooltip/ChartsTooltip.js

@@ -3,6 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import HTMLElementType from '@mui/utils/HTMLElementType';
 import { ChartsItemTooltipContent } from "./ChartsItemTooltipContent.js";
 import { ChartsAxisTooltipContent } from "./ChartsAxisTooltipContent.js";
 import { ChartsTooltipContainer } from "./ChartsTooltipContainer.js";
@@ -43,26 +44,7 @@ process.env.NODE_ENV !== "production" ? ChartsTooltip.propTypes = {
    * It's used to set the position of the popper.
    * The return value will passed as the reference object of the Popper instance.
    */
-  anchorEl: PropTypes.oneOfType([(props, propName) => {
-    if (props[propName] == null) {
-      return new Error(`Prop '${propName}' is required but wasn't specified`);
-    }
-    if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
-      return new Error(`Expected prop '${propName}' to be of type Element`);
-    }
-    return null;
-  }, PropTypes.func, PropTypes.shape({
-    contextElement: (props, propName) => {
-      if (props[propName] == null) {
-        return null;
-      }
-      if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
-        return new Error(`Expected prop '${propName}' to be of type Element`);
-      }
-      return null;
-    },
-    getBoundingClientRect: PropTypes.func.isRequired
-  })]),
+  anchorEl: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([HTMLElementType, PropTypes.object, PropTypes.func]),
   /**
    * Override or extend the styles applied to the component.
    */