@mui/x-charts 8.0.0 → 8.1.0

package/esm/ChartsYAxis/ChartsYAxis.js

@@ -83,8 +83,7 @@ function shortenLabels(visibleLabels, drawingArea, maxWidth, isRtl, tickLabelSty
 }
 const YAxisRoot = styled(AxisRoot, {
   name: 'MuiChartsYAxis',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  slot: 'Root'
 })({});
 const defaultProps = {
   disableLine: false,

package/esm/Gauge/GaugeReferenceArc.js

@@ -8,8 +8,7 @@ import { useGaugeState } from "./GaugeProvider.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const StyledPath = styled('path', {
   name: 'MuiGauge',
-  slot: 'ReferenceArc',
-  overridesResolver: (props, styles) => styles.referenceArc
+  slot: 'ReferenceArc'
 })(({
   theme
 }) => ({

package/esm/Gauge/GaugeValueArc.js

@@ -12,8 +12,7 @@ import { useGaugeState } from "./GaugeProvider.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const StyledPath = styled('path', {
   name: 'MuiGauge',
-  slot: 'ReferenceArc',
-  overridesResolver: (props, styles) => styles.referenceArc
+  slot: 'ReferenceArc'
 })(({
   theme
 }) => ({

package/esm/LineChart/AreaPlot.js

@@ -20,8 +20,7 @@ import { useInternalIsZoomInteracting } from "../internals/plugins/featurePlugin
 import { jsx as _jsx } from "react/jsx-runtime";
 const AreaPlotRoot = styled('g', {
   name: 'MuiAreaPlot',
-  slot: 'Root',
-  overridesResolver: (_, styles) => styles.root
+  slot: 'Root'
 })({
   [`& .${areaElementClasses.root}`]: {
     transition: 'opacity 0.2s ease-in, fill 0.2s ease-in'

package/esm/LineChart/LineChart.js

@@ -142,6 +142,10 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * @default false
    */
   loading: PropTypes.bool,
+  /**
+   * Localized text for chart components.
+   */
+  localeText: PropTypes.object,
   /**
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.

package/esm/LineChart/LinePlot.js

@@ -21,8 +21,7 @@ import { useInternalIsZoomInteracting } from "../internals/plugins/featurePlugin
 import { jsx as _jsx } from "react/jsx-runtime";
 const LinePlotRoot = styled('g', {
   name: 'MuiAreaPlot',
-  slot: 'Root',
-  overridesResolver: (_, styles) => styles.root
+  slot: 'Root'
 })({
   [`& .${lineElementClasses.root}`]: {
     transition: 'opacity 0.2s ease-in, fill 0.2s ease-in'

package/esm/LineChart/MarkElement.js

@@ -18,8 +18,7 @@ import { useStore } from "../internals/store/useStore.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const MarkElementPath = styled('path', {
   name: 'MuiMarkElement',
-  slot: 'Root',
-  overridesResolver: (_, styles) => styles.root
+  slot: 'Root'
 })(({
   ownerState,
   theme

package/esm/PieChart/PieArc.js

@@ -33,7 +33,7 @@ const useUtilityClasses = ownerState => {
 const PieArcRoot = styled('path', {
   name: 'MuiPieArc',
   slot: 'Root',
-  overridesResolver: (_, styles) => styles.arc
+  overridesResolver: (_, styles) => styles.arc // FIXME: Inconsistent naming with slot
 })(({
   theme
 }) => ({

package/esm/PieChart/PieArcLabel.js

@@ -31,8 +31,7 @@ const useUtilityClasses = ownerState => {
 };
 const PieArcLabelRoot = styled('text', {
   name: 'MuiPieArcLabel',
-  slot: 'Root',
-  overridesResolver: (_, styles) => styles.root
+  slot: 'Root'
 })(({
   theme
 }) => ({

package/esm/PieChart/PieChart.js

@@ -148,6 +148,10 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * @default false
    */
   loading: PropTypes.bool,
+  /**
+   * Localized text for chart components.
+   */
+  localeText: PropTypes.object,
   /**
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.

package/esm/RadarChart/RadarChart.js

@@ -99,6 +99,10 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes = {
    * @default false
    */
   loading: PropTypes.bool,
+  /**
+   * Localized text for chart components.
+   */
+  localeText: PropTypes.object,
   /**
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.

package/esm/RadarChart/RadarDataProvider/RadarDataProvider.js

@@ -134,6 +134,10 @@ process.env.NODE_ENV !== "production" ? RadarDataProvider.propTypes = {
    * If you don't provide this prop. It falls back to a randomly generated id.
    */
   id: PropTypes.string,
+  /**
+   * Localized text for chart components.
+   */
+  localeText: PropTypes.object,
   /**
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.

package/esm/ScatterChart/ScatterChart.js

@@ -134,6 +134,10 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * @default false
    */
   loading: PropTypes.bool,
+  /**
+   * Localized text for chart components.
+   */
+  localeText: PropTypes.object,
   /**
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.

package/esm/SparkLineChart/SparkLineChart.js

@@ -177,6 +177,10 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * If you don't provide this prop. It falls back to a randomly generated id.
    */
   id: PropTypes.string,
+  /**
+   * Localized text for chart components.
+   */
+  localeText: PropTypes.object,
   /**
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.

package/esm/context/ChartProvider/ChartProvider.types.d.ts

@@ -22,6 +22,10 @@ export type ChartContextValue<TSignatures extends readonly ChartAnyPluginSignatu
    * The ref to the <svg />.
    */
   svgRef: React.RefObject<SVGSVGElement | null>;
+  /**
+   * The ref to the chart root element.
+   */
+  chartRootRef: React.RefObject<HTMLDivElement | null>;
 };
 export type ChartPluginParams<TSignatures extends readonly ChartAnyPluginSignature[]> = UseChartBaseProps<TSignatures> & MergeSignaturesProperty<[...ChartCorePluginSignatures, ...TSignatures], 'params'>;
 export interface ChartProviderProps<TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = []> {

package/esm/hooks/index.d.ts

@@ -14,4 +14,6 @@ export * from "./useItemHighlighted.js";
 export * from "./useItemHighlightedGetter.js";
 export * from "./useLegend.js";
 export { useChartGradientId, useChartGradientIdObjectBound } from "./useChartGradientId.js";
-export * from "./animation/index.js";
+export * from "./animation/index.js";
+export * from "./useChartRootRef.js";
+export * from "./useChartsLocalization.js";

package/esm/hooks/index.js

@@ -14,4 +14,6 @@ export * from "./useItemHighlighted.js";
 export * from "./useItemHighlightedGetter.js";
 export * from "./useLegend.js";
 export { useChartGradientId, useChartGradientIdObjectBound } from "./useChartGradientId.js";
-export * from "./animation/index.js";
+export * from "./animation/index.js";
+export * from "./useChartRootRef.js";
+export * from "./useChartsLocalization.js";

package/esm/hooks/useChartRootRef.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+/**
+ * Get the ref for the root chart element.
+ * @returns The root chart element ref.
+ */
+export declare function useChartRootRef(): React.RefObject<HTMLDivElement | null>;

package/esm/hooks/useChartRootRef.js

@@ -0,0 +1,12 @@
+'use client';
+
+import { useChartContext } from "../context/ChartProvider/index.js";
+
+/**
+ * Get the ref for the root chart element.
+ * @returns The root chart element ref.
+ */
+export function useChartRootRef() {
+  const context = useChartContext();
+  return context.chartRootRef;
+}

package/esm/hooks/useChartsLocalization.d.ts

@@ -0,0 +1 @@
+export declare const useChartsLocalization: () => import("../ChartsLocalizationProvider/ChartsLocalizationProvider").ChartsLocalizationContextValue;

package/esm/hooks/useChartsLocalization.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { ChartsLocalizationContext } from "../ChartsLocalizationProvider/ChartsLocalizationProvider.js";
+export const useChartsLocalization = () => {
+  const localization = React.useContext(ChartsLocalizationContext);
+  if (localization === null) {
+    throw new Error(['MUI X: Can not find the charts localization context.', 'It looks like you forgot to wrap your component in ChartsLocalizationProvider.', 'This can also happen if you are bundling multiple versions of the `@mui/x-charts` package'].join('\n'));
+  }
+  return localization;
+};

package/esm/index.d.ts

@@ -13,6 +13,7 @@ export * from "./ChartsText/index.js";
 export * from "./ChartsTooltip/index.js";
 export * from "./ChartsLabel/index.js";
 export * from "./ChartsLegend/index.js";
+export * from "./ChartsLocalizationProvider/index.js";
 export * from "./ChartsAxisHighlight/index.js";
 export * from "./BarChart/index.js";
 export * from "./LineChart/index.js";

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.0.0
+ * @mui/x-charts v8.1.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -20,6 +20,7 @@ export * from "./ChartsText/index.js";
 export * from "./ChartsTooltip/index.js";
 export * from "./ChartsLabel/index.js";
 export * from "./ChartsLegend/index.js";
+export * from "./ChartsLocalizationProvider/index.js";
 export * from "./ChartsAxisHighlight/index.js";
 export * from "./BarChart/index.js";
 export * from "./LineChart/index.js";

package/esm/internals/components/AxisSharedComponents.js

@@ -3,8 +3,7 @@ import { styled } from '@mui/material/styles';
 import { axisClasses } from "../../ChartsAxis/axisClasses.js";
 export const AxisRoot = styled('g', {
   name: 'MuiChartsAxis',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  slot: 'Root'
 })(({
   theme
 }) => ({

package/esm/internals/components/ChartsWrapper/ChartsWrapper.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
+import { useChartRootRef } from "../../../hooks/useChartRootRef.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getDirection = (direction, position) => {
   if (direction === 'vertical') {
@@ -34,8 +35,7 @@ const getAlign = (direction, position) => {
 };
 const Root = styled('div', {
   name: 'MuiChartsWrapper',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  slot: 'Root'
 })(({
   ownerState
 }) => ({
@@ -57,7 +57,9 @@ function ChartsWrapper(props) {
     children,
     sx
   } = props;
+  const chartRootRef = useChartRootRef();
   return /*#__PURE__*/_jsx(Root, {
+    ref: chartRootRef,
     ownerState: props,
     sx: sx,
     children: children

package/esm/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.js

@@ -1,6 +1,5 @@
 'use client';
 
-/* eslint-disable react-compiler/react-compiler */
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';