@mui/x-charts 8.16.0 → 8.18.0

package/CHANGELOG.md

@@ -5,6 +5,213 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.18.0
+
+<!-- generated comparing v8.17.0..master -->
+
+_Nov 13, 2025_
+
+We'd like to extend a big thank you to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- Add `barLabelPlacement` property to customize the bar label position in bar charts, enabling labels to be placed above bars.
+
+  ![image](https://github.com/user-attachments/assets/4bc3a75b-74b8-4c6d-896b-5f5bf837bcda)
+
+- Add `source` property to the date/time picker lifecycle and event handler context, enabling clearer differentiation between changes initiated by the picker UI and those from direct field input.
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to these community members for their valuable contributions:
+@htollefsen, @sai6855, @Sigdriv
+
+The following team members contributed to this release:
+@arminmeh, @bernardobelchior, @brijeshb42, @cherniavskii, @flaviendelangle, @JCQuintas, @michelengelen, @noraleonte, @prakhargupta1, @rita-codes, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.18.0`
+
+- [DataGrid] Allow default event in the column action cell item click event handler (#20272) @arminmeh
+- [DataGrid] Remove unnecessary generic from `useGridApiRef` (#20277) @cherniavskii
+
+#### `@mui/x-data-grid-pro@8.18.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@8.18.0`.
+
+#### `@mui/x-data-grid-premium@8.18.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@8.18.0`, plus:
+
+- [DataGridPremium] Return the correct `cellParams` value from the aggregation cells (#20224) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.18.0`
+
+- [pickers] Keep invalid date state consistent (#20040) @michelengelen
+- [pickers] Adds new `source` property to `onChange` and `onAccept` context object (#20234) @michelengelen
+
+#### `@mui/x-date-pickers-pro@8.18.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@8.18.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.18.0`
+
+- [charts] Add prop for positioning a bar label (#20194) @Sigdriv
+- [charts] Fix applying dark mode styles in `ChartAxisZoomSliderThumb` (#20232) @sai6855
+
+#### `@mui/x-charts-pro@8.18.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@8.18.0`, plus:
+
+- [charts-pro] Allow specifying Content Security Policy nonce on export (#20053) @bernardobelchior
+- [charts-pro] Fix applying dark mode styles to slider (#20220) @sai6855
+- [charts-pro] Sankey should respect node order (#20065) @JCQuintas
+
+#### `@mui/x-charts-premium@8.18.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-charts-pro@8.18.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.18.0`
+
+- [tree view] Prepare tests for the new store structure (#20225) @flaviendelangle
+- [tree view] Prepare the item plugin files for the store migration (#20240) @flaviendelangle
+- [tree view] Use `TreeItemId` type instead of raw string (#20233) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.18.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@8.18.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.18.0`
+
+Internal changes.
+
+### Docs
+
+- [charts] Add a demo for a custom tick label (#20073) @prakhargupta1
+- [charts] Create `useAxes()` hook documentation page (#20229) @JCQuintas
+- [charts] Fix logo alignment (#20228) @JCQuintas
+- [charts] Fixes typo in import example (#20236) @htollefsen
+- [Data Grid] Add recipe for cursor pagination with data source (#19700) @siriwatknp
+- [Data Grid] Add a demo for pinned rows aggregation (#20198) @cherniavskii
+
+### Core
+
+- [docs-infra] Use deployment config from docs-infra package (#20243) @brijeshb42
+
+## 8.17.0
+
+_Nov 5, 2025_
+
+We'd like to extend a big thank you to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- Add `colorGetter` prop to cartesian charts series
+
+  <img width="400" alt="Image" src="https://github.com/user-attachments/assets/d8b1263f-794e-4939-b17e-87350fdd1746" />
+
+- 🌎 Add Catalan (ca-ES) locale on the Data Grid
+- 🌎 Add Norwegian Bokmål (nb-NO) locale on the Charts
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to these community members for their valuable contributions:
+@frncesc, @Methuselah96, @samuelwalk, @htollefsen
+
+The following team members contributed to this release:
+@alexfauquette, @bernardobelchior, @flaviendelangle, @Janpot, @JCQuintas, @mnajdova, @rita-codes, @arminmeh, @brijeshb42
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.17.0`
+
+- [DataGrid] Stop event propagation on data grid action buttons (GridActionsCellItem) (#19513) @Copilot
+- [DataGrid] Update cell editable state if `editable` prop is updated in the column definition (#20147) @arminmeh
+- [DataGrid] Wait for external model updates before resetting pagination after sort/filter (#20162) @arminmeh
+- [l10n] Add Catalan (ca-ES) locale (#20154) @frncesc
+- [l10n] Improve Arabic (ar-SD) locale (#20185) @samuelwalk
+
+#### `@mui/x-data-grid-pro@8.17.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@8.17.0`.
+
+#### `@mui/x-data-grid-premium@8.17.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@8.17.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.17.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.17.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@8.17.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.17.0`
+
+- [charts] Add `barLabel` to bar series. Deprecate `barLabel` in `BarPlot`. (#20184) @bernardobelchior
+- [charts] Add series color callback (#20084) @bernardobelchior
+- [charts] Expose `ChartsSurface` classes (#20180) @bernardobelchior
+- [charts] Fix chart cut off when inside `overflow: scroll` container (#20182) @bernardobelchior
+- [charts] Fix tick label overflow on multiple axes and series demo (#20152) @bernardobelchior
+- [charts] Organize series config (#20155) @bernardobelchior
+- [charts] Use selectors from `@mui/x-internals` (#20052) @alexfauquette
+- [charts] Use store from `@mui/x-internals` (#20121) @alexfauquette
+- [charts] Add `useDataset` hook (#20205) @JCQuintas
+- [l10n] Add Norwegian Bokmål (nb-NO) locale (#20197) @htollefsen
+
+#### `@mui/x-charts-pro@8.17.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@8.17.0`, plus:
+
+- [charts-pro] Fix zoom pan issue when controlled (#20163) @JCQuintas
+
+#### `@mui/x-charts-premium@8.17.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-charts-pro@8.17.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.17.0`
+
+- [tree view] Accept read only arrays in `expandedItems` prop (#20181) @Methuselah96
+- [tree view] Use `aria-checked` instead of `aria-selected` on items (#19851) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.17.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@8.17.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.17.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Fix focus issues in the action column demo (#20178) @arminmeh
+- [docs] Remove hidden Tree View headless page (#20119) @flaviendelangle
+- [docs] Fix some external redirects (#20211) @Janpot
+
+### Core
+
+- [code-infra] Fix cci job timeout due to buffered test output (#20193) @Janpot
+- [code-infra] Fix publish workflow (#20140) @bernardobelchior
+- [code-infra] Increase JSDOM test parallelism (#20179) @Janpot
+- [code-infra] Remove React import requirement for jsx (#20144) @brijeshb42
+- [code-infra] Replace `getInitialProps` with `getStaticProps` (#20192) @Janpot
+- [code-infra] git-ignore next-env.d.ts (#20177) @Janpot
+- [code-infra] Stabilize screenshot testing (#19868) @Janpot
+
 ## 8.16.0
 
 _Oct 29, 2025_
@@ -39,7 +246,7 @@ Same changes as in `@mui/x-data-grid@8.16.0`, plus:
 Same changes as in `@mui/x-data-grid-pro@8.16.0`, plus:
 
 - [DataGridPremium] Export and restore chart integration state (#20079) @arminmeh
-- [DataGridPremium] Fix grouping column `valueFormatter()` crash  (#20070) @sai6855
+- [DataGridPremium] Fix grouping column `valueFormatter()` crash (#20070) @sai6855
 - [DataGridPremium] Refetch aggregation data after row update with server-side aggregation (#20039) @arminmeh
 
 ### Date and Time Pickers

package/ChartDataProvider/ChartDataProvider.d.ts

@@ -42,7 +42,7 @@ export type ChartDataProviderProps<TSeries extends ChartSeriesType = ChartSeries
  * </ChartDataProvider>
  * ```
  */
-declare function ChartDataProvider<TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartDataProviderProps<TSeries, TSignatures>): React.JSX.Element;
+declare function ChartDataProvider<TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartDataProviderProps<TSeries, TSignatures>): import("react/jsx-runtime").JSX.Element;
 declare namespace ChartDataProvider {
   var propTypes: any;
 }

package/ChartsAxis/ChartsAxis.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { ChartsAxisSlotProps, ChartsAxisSlots } from "../models/axis.js";
 export interface ChartsAxisProps {
   /**
@@ -21,7 +20,7 @@ export interface ChartsAxisProps {
  *
  * - [ChartsAxis API](https://mui.com/x/api/charts/charts-axis/)
  */
-declare function ChartsAxis(props: ChartsAxisProps): React.JSX.Element;
+declare function ChartsAxis(props: ChartsAxisProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ChartsAxis {
   var propTypes: any;
 }

package/ChartsAxisHighlight/ChartsAxisHighlight.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { ChartsAxisHighlightProps } from "./ChartsAxisHighlight.types.js";
 /**
  * Demos:
@@ -9,7 +8,7 @@ import { ChartsAxisHighlightProps } from "./ChartsAxisHighlight.types.js";
  *
  * - [ChartsAxisHighlight API](https://mui.com/x/api/charts/charts-axis-highlight/)
  */
-declare function ChartsAxisHighlight(props: ChartsAxisHighlightProps): React.JSX.Element;
+declare function ChartsAxisHighlight(props: ChartsAxisHighlightProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ChartsAxisHighlight {
   var propTypes: any;
 }

package/ChartsAxisHighlight/ChartsXAxisHighlight.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { ChartsAxisHighlightType } from "./ChartsAxisHighlight.types.js";
 import { ChartsAxisHighlightClasses } from "./chartsAxisHighlightClasses.js";
 /**
@@ -7,4 +6,4 @@ import { ChartsAxisHighlightClasses } from "./chartsAxisHighlightClasses.js";
 export default function ChartsXHighlight(props: {
   type: ChartsAxisHighlightType;
   classes: ChartsAxisHighlightClasses;
-}): React.JSX.Element[] | null;
+}): import("react/jsx-runtime").JSX.Element[] | null;

package/ChartsAxisHighlight/ChartsYAxisHighlight.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { ChartsAxisHighlightType } from "./ChartsAxisHighlight.types.js";
 import { ChartsAxisHighlightClasses } from "./chartsAxisHighlightClasses.js";
 /**
@@ -7,4 +6,4 @@ import { ChartsAxisHighlightClasses } from "./chartsAxisHighlightClasses.js";
 export default function ChartsYHighlight(props: {
   type: ChartsAxisHighlightType;
   classes: ChartsAxisHighlightClasses;
-}): React.JSX.Element[] | null;
+}): import("react/jsx-runtime").JSX.Element[] | null;

package/ChartsBrushOverlay/ChartsBrushOverlay.d.ts

@@ -1,6 +1,5 @@
-import * as React from 'react';
 export interface ChartsBrushOverlayProps {}
 /**
  * Component that renders visual feedback during brush interaction
  */
-export declare function ChartsBrushOverlay(props: ChartsBrushOverlayProps): React.JSX.Element | null;
+export declare function ChartsBrushOverlay(props: ChartsBrushOverlayProps): import("react/jsx-runtime").JSX.Element | null;

package/ChartsClipPath/ChartsClipPath.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 export type ChartsClipPathProps = {
   /**
    * The id of the clip path.
@@ -21,7 +20,7 @@ export type ChartsClipPathProps = {
  *
  * - [ChartsClipPath API](https://mui.com/x/api/charts/charts-clip-path/)
  */
-declare function ChartsClipPath(props: ChartsClipPathProps): React.JSX.Element;
+declare function ChartsClipPath(props: ChartsClipPathProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ChartsClipPath {
   var propTypes: any;
 }

package/ChartsClipPath/ChartsClipPath.js

@@ -1,14 +1,12 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartsClipPath = ChartsClipPath;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useDrawingArea = require("../hooks/useDrawingArea");
 var _jsxRuntime = require("react/jsx-runtime");

package/ChartsGrid/ChartsGrid.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { ChartsGridClasses } from "./chartsGridClasses.js";
 export interface ChartsGridProps {
   /**
@@ -23,7 +22,7 @@ export interface ChartsGridProps {
  *
  * - [ChartsGrid API](https://mui.com/x/api/charts/charts-axis/)
  */
-declare function ChartsGrid(inProps: ChartsGridProps): React.JSX.Element;
+declare function ChartsGrid(inProps: ChartsGridProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ChartsGrid {
   var propTypes: any;
 }

package/ChartsGrid/ChartsGrid.js

@@ -2,14 +2,12 @@
 'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartsGrid = ChartsGrid;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _styles = require("@mui/material/styles");

package/ChartsGrid/ChartsHorizontalGrid.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { ComputedYAxis } from "../models/axis.js";
 import { ChartsGridClasses } from "./chartsGridClasses.js";
 interface ChartsGridHorizontalProps {
@@ -10,5 +9,5 @@ interface ChartsGridHorizontalProps {
 /**
  * @ignore - internal component.
  */
-export declare function ChartsGridHorizontal(props: ChartsGridHorizontalProps): React.JSX.Element;
+export declare function ChartsGridHorizontal(props: ChartsGridHorizontalProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/ChartsGrid/ChartsVerticalGrid.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { ComputedXAxis } from "../models/axis.js";
 import { ChartsGridClasses } from "./chartsGridClasses.js";
 interface ChartsGridVerticalProps {
@@ -10,5 +9,5 @@ interface ChartsGridVerticalProps {
 /**
  * @ignore - internal component.
  */
-export declare function ChartsGridVertical(props: ChartsGridVerticalProps): React.JSX.Element;
+export declare function ChartsGridVertical(props: ChartsGridVerticalProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/ChartsLegend/continuousColorLegendClasses.d.ts

@@ -22,5 +22,5 @@ export interface ContinuousColorLegendClasses {
   /** Styles applied to the series label. */
   label: string;
 }
-export declare const useUtilityClasses: (props: ContinuousColorLegendProps & ChartsLegendSlotExtension) => Record<"root" | "label" | "mark" | "gradient" | "minLabel" | "maxLabel", string>;
+export declare const useUtilityClasses: (props: ContinuousColorLegendProps & ChartsLegendSlotExtension) => Record<"root" | "label" | "mark" | "minLabel" | "maxLabel" | "gradient", string>;
 export declare const continuousColorLegendClasses: ContinuousColorLegendClasses;

package/ChartsLocalizationProvider/ChartsLocalizationProvider.d.ts

@@ -20,7 +20,7 @@ export interface ChartsLocalizationProviderProps {
  *
  * - [ChartsLocalizationProvider API](https://mui.com/x/api/charts/charts-localization-provider/)
  */
-declare function ChartsLocalizationProvider(inProps: ChartsLocalizationProviderProps): React.JSX.Element;
+declare function ChartsLocalizationProvider(inProps: ChartsLocalizationProviderProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ChartsLocalizationProvider {
   var propTypes: any;
 }

package/ChartsOverlay/ChartsLoadingOverlay.d.ts

@@ -1,3 +1,2 @@
-import * as React from 'react';
 import type { CommonOverlayProps } from "./ChartsOverlay.js";
-export declare function ChartsLoadingOverlay(props: CommonOverlayProps): React.JSX.Element;
+export declare function ChartsLoadingOverlay(props: CommonOverlayProps): import("react/jsx-runtime").JSX.Element;

package/ChartsOverlay/ChartsLoadingOverlay.js

@@ -2,14 +2,12 @@
 'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartsLoadingOverlay = ChartsLoadingOverlay;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
 var _useDrawingArea = require("../hooks/useDrawingArea");
 var _useChartsLocalization = require("../hooks/useChartsLocalization");

package/ChartsOverlay/ChartsNoDataOverlay.d.ts

@@ -1,3 +1,2 @@
-import * as React from 'react';
 import type { CommonOverlayProps } from "./ChartsOverlay.js";
-export declare function ChartsNoDataOverlay(props: CommonOverlayProps): React.JSX.Element;
+export declare function ChartsNoDataOverlay(props: CommonOverlayProps): import("react/jsx-runtime").JSX.Element;

package/ChartsOverlay/ChartsNoDataOverlay.js

@@ -2,14 +2,12 @@
 'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartsNoDataOverlay = ChartsNoDataOverlay;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
 var _useDrawingArea = require("../hooks/useDrawingArea");
 var _useChartsLocalization = require("../hooks/useChartsLocalization");

package/ChartsOverlay/ChartsOverlay.d.ts

@@ -44,4 +44,4 @@ export interface ChartsOverlayProps {
    */
   slotProps?: ChartsOverlaySlotProps;
 }
-export declare function ChartsOverlay(props: ChartsOverlayProps): React.JSX.Element | null;
+export declare function ChartsOverlay(props: ChartsOverlayProps): import("react/jsx-runtime").JSX.Element | null;

package/ChartsReferenceLine/ChartsReferenceLine.d.ts

@@ -1,9 +1,8 @@
-import * as React from 'react';
 import { ChartsXReferenceLineProps } from "./ChartsXReferenceLine.js";
 import { ChartsYReferenceLineProps } from "./ChartsYReferenceLine.js";
 import { XOR } from "../internals/ts-generic.js";
 type ChartsReferenceLineProps<TValue extends string | number | Date = string | number | Date> = XOR<ChartsXReferenceLineProps<TValue>, ChartsYReferenceLineProps<TValue>>;
-declare function ChartsReferenceLine(props: ChartsReferenceLineProps): React.JSX.Element;
+declare function ChartsReferenceLine(props: ChartsReferenceLineProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ChartsReferenceLine {
   var propTypes: any;
 }

package/ChartsReferenceLine/ChartsReferenceLine.js

@@ -1,14 +1,12 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartsReferenceLine = ChartsReferenceLine;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ChartsXReferenceLine = require("./ChartsXReferenceLine");
 var _ChartsYReferenceLine = require("./ChartsYReferenceLine");

package/ChartsReferenceLine/ChartsXReferenceLine.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { CommonChartsReferenceLineProps } from "./common.js";
 import { ChartsReferenceLineClasses } from "./chartsReferenceLineClasses.js";
 export type ChartsXReferenceLineProps<TValue extends string | number | Date = string | number | Date> = CommonChartsReferenceLineProps & {
@@ -9,7 +8,7 @@ export type ChartsXReferenceLineProps<TValue extends string | number | Date = st
   x: TValue;
 };
 export declare function getXReferenceLineClasses(classes?: Partial<ChartsReferenceLineClasses>): Record<"root" | "line" | "label", string>;
-declare function ChartsXReferenceLine(props: ChartsXReferenceLineProps): React.JSX.Element | null;
+declare function ChartsXReferenceLine(props: ChartsXReferenceLineProps): import("react/jsx-runtime").JSX.Element | null;
 declare namespace ChartsXReferenceLine {
   var propTypes: any;
 }

package/ChartsReferenceLine/ChartsXReferenceLine.js

@@ -1,7 +1,6 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -9,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.ChartsXReferenceLine = ChartsXReferenceLine;
 exports.getXReferenceLineClasses = getXReferenceLineClasses;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _warning = require("@mui/x-internals/warning");

package/ChartsReferenceLine/ChartsYReferenceLine.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { CommonChartsReferenceLineProps } from "./common.js";
 import { ChartsReferenceLineClasses } from "./chartsReferenceLineClasses.js";
 export type ChartsYReferenceLineProps<TValue extends string | number | Date = string | number | Date> = CommonChartsReferenceLineProps & {
@@ -9,7 +8,7 @@ export type ChartsYReferenceLineProps<TValue extends string | number | Date = st
   y: TValue;
 };
 export declare function getYReferenceLineClasses(classes?: Partial<ChartsReferenceLineClasses>): Record<"root" | "line" | "label", string>;
-declare function ChartsYReferenceLine(props: ChartsYReferenceLineProps): React.JSX.Element | null;
+declare function ChartsYReferenceLine(props: ChartsYReferenceLineProps): import("react/jsx-runtime").JSX.Element | null;
 declare namespace ChartsYReferenceLine {
   var propTypes: any;
 }

package/ChartsReferenceLine/ChartsYReferenceLine.js

@@ -1,7 +1,6 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -9,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.ChartsYReferenceLine = ChartsYReferenceLine;
 exports.getYReferenceLineClasses = getYReferenceLineClasses;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _warning = require("@mui/x-internals/warning");

package/ChartsSurface/ChartsSurface.js

@@ -13,12 +13,14 @@ var _styles = require("@mui/material/styles");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _ChartsAxesGradients = require("../internals/components/ChartsAxesGradients");
 var _useSvgRef = require("../hooks/useSvgRef");
 var _useSelector = require("../internals/store/useSelector");
 var _useStore = require("../internals/store/useStore");
 var _useChartDimensions = require("../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors");
 var _useChartKeyboardNavigation = require("../internals/plugins/featurePlugins/useChartKeyboardNavigation");
+var _chartsSurfaceClasses = require("./chartsSurfaceClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children", "className", "title", "desc"];
 const ChartsSurfaceStyles = (0, _styles.styled)('svg', {
@@ -73,14 +75,10 @@ const ChartsSurfaceStyles = (0, _styles.styled)('svg', {
  */
 const ChartsSurface = exports.ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(inProps, ref) {
   const store = (0, _useStore.useStore)();
-  const {
-    width: svgWidth,
-    height: svgHeight
-  } = (0, _useSelector.useSelector)(store, _useChartDimensions.selectorChartContainerSize);
-  const {
-    width: propsWidth,
-    height: propsHeight
-  } = (0, _useSelector.useSelector)(store, _useChartDimensions.selectorChartPropsSize);
+  const svgWidth = (0, _useSelector.useSelector)(store, _useChartDimensions.selectorChartSvgWidth);
+  const svgHeight = (0, _useSelector.useSelector)(store, _useChartDimensions.selectorChartSvgHeight);
+  const propsWidth = (0, _useSelector.useSelector)(store, _useChartDimensions.selectorChartPropsWidth);
+  const propsHeight = (0, _useSelector.useSelector)(store, _useChartDimensions.selectorChartPropsHeight);
   const isKeyboardNavigationEnabled = (0, _useSelector.useSelector)(store, _useChartKeyboardNavigation.selectorChartsIsKeyboardNavigationEnabled);
   const hasFocusedItem = (0, _useSelector.useSelector)(store, _useChartKeyboardNavigation.selectorChartsHasFocusedItem);
   const svgRef = (0, _useSvgRef.useSvgRef)();
@@ -96,6 +94,7 @@ const ChartsSurface = exports.ChartsSurface = /*#__PURE__*/React.forwardRef(func
       desc
     } = themeProps,
     other = (0, _objectWithoutPropertiesLoose2.default)(themeProps, _excluded);
+  const classes = (0, _chartsSurfaceClasses.useUtilityClasses)();
   const hasIntrinsicSize = svgHeight > 0 && svgWidth > 0;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ChartsSurfaceStyles, (0, _extends2.default)({
     ownerState: {
@@ -103,7 +102,7 @@ const ChartsSurface = exports.ChartsSurface = /*#__PURE__*/React.forwardRef(func
       height: propsHeight
     },
     viewBox: `${0} ${0} ${svgWidth} ${svgHeight}`,
-    className: className,
+    className: (0, _clsx.default)(classes.root, className),
     tabIndex: isKeyboardNavigationEnabled ? 0 : undefined,
     "data-has-focused-item": hasFocusedItem || undefined
   }, other, {

package/ChartsSurface/chartsSurfaceClasses.d.ts

@@ -0,0 +1,6 @@
+export interface ChartsSurfaceClasses {
+  /** Styles applied to the root element. */
+  root: string;
+}
+export declare const useUtilityClasses: () => Record<"root", string>;
+export declare const chartsSurfaceClasses: ChartsSurfaceClasses;

package/ChartsSurface/chartsSurfaceClasses.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useUtilityClasses = exports.chartsSurfaceClasses = void 0;
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+function getSurfaceUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiChartsSurface', slot);
+}
+const useUtilityClasses = () => {
+  const slots = {
+    root: ['root']
+  };
+  return (0, _composeClasses.default)(slots, getSurfaceUtilityClass);
+};
+exports.useUtilityClasses = useUtilityClasses;
+const chartsSurfaceClasses = exports.chartsSurfaceClasses = (0, _generateUtilityClasses.default)('MuiChartsSurface', ['root']);

package/ChartsSurface/index.d.ts

@@ -1 +1,2 @@
-export * from "./ChartsSurface.js";
+export * from "./ChartsSurface.js";
+export { chartsSurfaceClasses, type ChartsSurfaceClasses } from "./chartsSurfaceClasses.js";