@mui/x-charts 9.0.0-alpha.4 → 9.0.0-beta.0

package/internals/components/ChartsAccessibilityProxy/ChartsAccessibilityProxy.mjs

@@ -0,0 +1,96 @@
+'use client';
+
+import * as React from 'react';
+import { useChartId } from "../../../hooks/useChartId.mjs";
+import { useDescription } from "./useDescription.mjs";
+
+/**
+ * Make the proxy looks like a layer.
+ * Having a non-zero size is important for some screen readers to announce the content.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const fullSizeLayerStyle = {
+  borderWidth: 0,
+  width: '100%',
+  height: '100%',
+  overflow: 'hidden',
+  position: 'absolute',
+  inset: 0,
+  padding: 0,
+  outline: 'none',
+  pointerEvents: 'none'
+};
+
+// The proxy is implemented by having two divs with the same content, and toggling the visibility of each one when the content changes.
+// The idea is to imitate the behavior of the focus moving from a list element to another, but with the minimal number of DOM elements.
+
+/**
+ * This component provides an accessibility proxy for charts.
+ * It uses two divs to let screen readers announce the focused content when it changes.
+ */
+export function ChartsAccessibilityProxy() {
+  const message = useDescription();
+  const chartId = useChartId();
+  const currentFormatRef = React.useRef(null);
+  const currentIndexRef = React.useRef(0);
+  const containerRef = React.useRef(null);
+  React.useEffect(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+
+    // Initialize children if not present
+    if (container.children.length === 0) {
+      for (let i = 0; i < 2; i += 1) {
+        const div = document.createElement('div');
+        div.setAttribute('id', i === 0 ? `voiceover-${chartId}-1` : `voiceover-${chartId}-2`);
+        div.style.display = 'none';
+        container.appendChild(div);
+      }
+
+      // The divs with the message content
+      for (let i = 0; i < 2; i += 1) {
+        const div = document.createElement('div');
+        if (i === (currentIndexRef.current + 1) % 2 && message) {
+          div.setAttribute('tabindex', '0');
+        }
+        div.setAttribute('role', 'img');
+        div.setAttribute('aria-labelledby', i === 0 ? `voiceover-${chartId}-1` : `voiceover-${chartId}-2`);
+        div.style.width = '100%';
+        div.style.height = '100%';
+        div.style.outline = 'none';
+        container.appendChild(div);
+      }
+    }
+    if (message && message !== currentFormatRef.current) {
+      currentFormatRef.current = message;
+      const inactiveIndex = currentIndexRef.current;
+      currentIndexRef.current = (currentIndexRef.current + 1) % 2;
+      const activeIndex = currentIndexRef.current;
+      const activeDiv = container.children[2 + activeIndex];
+      const inactiveDiv = container.children[2 + inactiveIndex];
+      const activeTextDiv = container.children[activeIndex];
+      const inactiveTextDiv = container.children[inactiveIndex];
+
+      // Both get text update
+      activeTextDiv.textContent = message ?? '';
+      inactiveTextDiv.textContent = message ?? '';
+      activeDiv.setAttribute('aria-hidden', 'false');
+      activeDiv.setAttribute('aria-labelledby', activeIndex === 0 ? `voiceover-${chartId}-1` : `voiceover-${chartId}-2`);
+      if (message) {
+        activeDiv.setAttribute('tabindex', '0');
+      }
+      inactiveDiv.setAttribute('aria-hidden', 'true');
+      inactiveDiv.setAttribute('aria-labelledby', activeIndex === 0 ? `voiceover-${chartId}-1` : `voiceover-${chartId}-2`);
+      inactiveDiv.removeAttribute('tabindex');
+      activeDiv.focus();
+    }
+  }, [message, chartId]);
+  return /*#__PURE__*/_jsx("div", {
+    role: "presentation",
+    tabIndex: message ? undefined : 0,
+    ref: containerRef,
+    style: fullSizeLayerStyle
+  });
+}

package/internals/components/ChartsAccessibilityProxy/index.d.mts

@@ -0,0 +1 @@
+export * from "./ChartsAccessibilityProxy.mjs";

package/internals/components/ChartsAccessibilityProxy/index.d.ts

@@ -0,0 +1 @@
+export * from "./ChartsAccessibilityProxy.js";

package/internals/components/ChartsAccessibilityProxy/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ChartsAccessibilityProxy = require("./ChartsAccessibilityProxy");
+Object.keys(_ChartsAccessibilityProxy).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsAccessibilityProxy[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsAccessibilityProxy[key];
+    }
+  });
+});

package/internals/components/ChartsAccessibilityProxy/index.mjs

@@ -0,0 +1 @@
+export * from "./ChartsAccessibilityProxy.mjs";

package/internals/components/ChartsAccessibilityProxy/useDescription.d.mts

@@ -0,0 +1,5 @@
+/**
+ * Get the message associated to the focused item.
+ * @returns {string | null} the accessibility description linked to the focused item
+ */
+export declare function useDescription(): string | null;

package/internals/components/ChartsAccessibilityProxy/useDescription.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Get the message associated to the focused item.
+ * @returns {string | null} the accessibility description linked to the focused item
+ */
+export declare function useDescription(): string | null;

package/internals/components/ChartsAccessibilityProxy/useDescription.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDescription = useDescription;
+var _hooks = require("../../../hooks");
+var _useStore = require("../../store/useStore");
+var _useChartSeriesConfig = require("../../plugins/corePlugins/useChartSeriesConfig");
+var _isCartesian = require("../../isCartesian");
+var _isPolar = require("../../isPolar");
+var _useChartKeyboardNavigation = require("../../plugins/featurePlugins/useChartKeyboardNavigation");
+/**
+ * Get the message associated to the focused item.
+ * @returns {string | null} the accessibility description linked to the focused item
+ */
+function useDescription() {
+  const store = (0, _useStore.useStore)();
+  const focusedItem = store.use(_useChartKeyboardNavigation.selectorChartsFocusedOrToFocusedItem);
+  const seriesConfig = store.use(_useChartSeriesConfig.selectorChartSeriesConfig);
+  const seriesState = (0, _hooks.useSeries)();
+  const {
+    localeText
+  } = (0, _hooks.useChartsLocalization)();
+  const {
+    xAxis,
+    xAxisIds
+  } = (0, _hooks.useXAxes)();
+  const {
+    yAxis,
+    yAxisIds
+  } = (0, _hooks.useYAxes)();
+  const {
+    rotationAxis,
+    rotationAxisIds
+  } = (0, _hooks.useRotationAxes)();
+  const {
+    radiusAxis,
+    radiusAxisIds
+  } = (0, _hooks.useRadiusAxes)();
+  if (focusedItem === null) {
+    return null;
+  }
+  const {
+    type,
+    seriesId
+  } = focusedItem;
+  const focusedSeries = seriesState[type]?.series[seriesId];
+  if (!focusedSeries) {
+    return null;
+  }
+  const descriptionGetter = seriesConfig[type]?.descriptionGetter;
+  if (!descriptionGetter) {
+    return null;
+  }
+  const descriptionParams = {
+    identifier: focusedItem,
+    series: focusedSeries,
+    localeText
+  };
+  if ((0, _isCartesian.isCartesianSeries)(focusedSeries)) {
+    const xAxisId = focusedSeries.xAxisId ?? xAxisIds[0];
+    const yAxisId = focusedSeries.yAxisId ?? yAxisIds[0];
+    descriptionParams.xAxis = xAxis[xAxisId];
+    descriptionParams.yAxis = yAxis[yAxisId];
+  } else if ((0, _isPolar.isPolarSeriesType)(type)) {
+    descriptionParams.rotationAxis = rotationAxis[rotationAxisIds[0]];
+    descriptionParams.radiusAxis = radiusAxis[radiusAxisIds[0]];
+  }
+  return descriptionGetter(descriptionParams);
+}

package/internals/components/ChartsAccessibilityProxy/useDescription.mjs

@@ -0,0 +1,66 @@
+import { useChartsLocalization, useRadiusAxes, useRotationAxes, useSeries, useXAxes, useYAxes } from "../../../hooks/index.mjs";
+import { useStore } from "../../store/useStore.mjs";
+import { selectorChartSeriesConfig } from "../../plugins/corePlugins/useChartSeriesConfig/index.mjs";
+import { isCartesianSeries } from "../../isCartesian.mjs";
+import { isPolarSeriesType } from "../../isPolar.mjs";
+import { selectorChartsFocusedOrToFocusedItem } from "../../plugins/featurePlugins/useChartKeyboardNavigation/index.mjs";
+
+/**
+ * Get the message associated to the focused item.
+ * @returns {string | null} the accessibility description linked to the focused item
+ */
+export function useDescription() {
+  const store = useStore();
+  const focusedItem = store.use(selectorChartsFocusedOrToFocusedItem);
+  const seriesConfig = store.use(selectorChartSeriesConfig);
+  const seriesState = useSeries();
+  const {
+    localeText
+  } = useChartsLocalization();
+  const {
+    xAxis,
+    xAxisIds
+  } = useXAxes();
+  const {
+    yAxis,
+    yAxisIds
+  } = useYAxes();
+  const {
+    rotationAxis,
+    rotationAxisIds
+  } = useRotationAxes();
+  const {
+    radiusAxis,
+    radiusAxisIds
+  } = useRadiusAxes();
+  if (focusedItem === null) {
+    return null;
+  }
+  const {
+    type,
+    seriesId
+  } = focusedItem;
+  const focusedSeries = seriesState[type]?.series[seriesId];
+  if (!focusedSeries) {
+    return null;
+  }
+  const descriptionGetter = seriesConfig[type]?.descriptionGetter;
+  if (!descriptionGetter) {
+    return null;
+  }
+  const descriptionParams = {
+    identifier: focusedItem,
+    series: focusedSeries,
+    localeText
+  };
+  if (isCartesianSeries(focusedSeries)) {
+    const xAxisId = focusedSeries.xAxisId ?? xAxisIds[0];
+    const yAxisId = focusedSeries.yAxisId ?? yAxisIds[0];
+    descriptionParams.xAxis = xAxis[xAxisId];
+    descriptionParams.yAxis = yAxis[yAxisId];
+  } else if (isPolarSeriesType(type)) {
+    descriptionParams.rotationAxis = rotationAxis[rotationAxisIds[0]];
+    descriptionParams.radiusAxis = radiusAxis[radiusAxisIds[0]];
+  }
+  return descriptionGetter(descriptionParams);
+}

package/internals/getChartPoint.js

@@ -12,8 +12,25 @@ exports.getChartPoint = getChartPoint;
  */
 function getChartPoint(element, event) {
   const rect = element.getBoundingClientRect();
+  const x = event.clientX - rect.left;
+  const y = event.clientY - rect.top;
+  if (typeof DOMMatrix === 'undefined') {
+    // Fallback for environments like JSDOM where DOMMatrix is not available.
+    return {
+      x,
+      y,
+      z: 0,
+      w: 1,
+      matrixTransform: () => ({
+        x,
+        y,
+        z: 0,
+        w: 1
+      })
+    };
+  }
   const style = getComputedStyle(element);
   const transform = new DOMMatrix(style.transform);
-  const point = new DOMPoint(event.clientX - rect.left, event.clientY - rect.top);
+  const point = new DOMPoint(x, y);
   return point.matrixTransform(transform.inverse());
 }

package/internals/getChartPoint.mjs

@@ -6,8 +6,25 @@
  */
 export function getChartPoint(element, event) {
   const rect = element.getBoundingClientRect();
+  const x = event.clientX - rect.left;
+  const y = event.clientY - rect.top;
+  if (typeof DOMMatrix === 'undefined') {
+    // Fallback for environments like JSDOM where DOMMatrix is not available.
+    return {
+      x,
+      y,
+      z: 0,
+      w: 1,
+      matrixTransform: () => ({
+        x,
+        y,
+        z: 0,
+        w: 1
+      })
+    };
+  }
   const style = getComputedStyle(element);
   const transform = new DOMMatrix(style.transform);
-  const point = new DOMPoint(event.clientX - rect.left, event.clientY - rect.top);
+  const point = new DOMPoint(x, y);
   return point.matrixTransform(transform.inverse());
 }

package/internals/plugins/corePlugins/corePlugins.d.mts

@@ -11,6 +11,6 @@ import type { ChartSeriesType } from "../../../models/seriesType/config.mjs";
  * Internal plugins that create the tools used by the other plugins.
  * These plugins are used by the Charts components.
  */
-export declare const CHART_CORE_PLUGINS: readonly [import("../models/index.mjs").ChartPlugin<UseChartElementRefSignature>, import("../models/index.mjs").ChartPlugin<UseChartIdSignature>, import("../models/index.mjs").ChartPlugin<UseChartSeriesConfigSignature>, import("../models/index.mjs").ChartPlugin<UseChartExperimentalFeaturesSignature>, import("../models/index.mjs").ChartPlugin<UseChartDimensionsSignature>, import("../models/index.mjs").ChartPlugin<UseChartSeriesSignature>, import("../models/index.mjs").ChartPlugin<UseChartInteractionListenerSignature>, import("../models/index.mjs").ChartPlugin<UseChartAnimationSignature>];
-export type ChartCorePluginSignatures<SeriesType extends ChartSeriesType = ChartSeriesType> = [UseChartElementRefSignature, UseChartIdSignature, UseChartSeriesConfigSignature<SeriesType>, UseChartExperimentalFeaturesSignature, UseChartDimensionsSignature, UseChartSeriesSignature<SeriesType>, UseChartAnimationSignature, UseChartInteractionListenerSignature];
+export declare const CHART_CORE_PLUGINS: readonly [import("../models/index.mjs").ChartPlugin<UseChartElementRefSignature>, import("../models/index.mjs").ChartPlugin<UseChartIdSignature>, import("../models/index.mjs").ChartPlugin<UseChartSeriesConfigSignature>, import("../models/index.mjs").ChartPlugin<UseChartExperimentalFeaturesSignature<keyof import("../../index.mjs").ChartsSeriesConfig>>, import("../models/index.mjs").ChartPlugin<UseChartDimensionsSignature>, import("../models/index.mjs").ChartPlugin<UseChartSeriesSignature>, import("../models/index.mjs").ChartPlugin<UseChartInteractionListenerSignature>, import("../models/index.mjs").ChartPlugin<UseChartAnimationSignature>];
+export type ChartCorePluginSignatures<SeriesType extends ChartSeriesType = ChartSeriesType> = [UseChartElementRefSignature, UseChartIdSignature, UseChartSeriesConfigSignature<SeriesType>, UseChartExperimentalFeaturesSignature<SeriesType>, UseChartDimensionsSignature, UseChartSeriesSignature<SeriesType>, UseChartAnimationSignature, UseChartInteractionListenerSignature];
 export interface ChartCorePluginParameters extends UseChartIdParameters, UseChartSeriesConfigParameters {}

package/internals/plugins/corePlugins/corePlugins.d.ts

@@ -11,6 +11,6 @@ import type { ChartSeriesType } from "../../../models/seriesType/config.js";
  * Internal plugins that create the tools used by the other plugins.
  * These plugins are used by the Charts components.
  */
-export declare const CHART_CORE_PLUGINS: readonly [import("../models/index.js").ChartPlugin<UseChartElementRefSignature>, import("../models/index.js").ChartPlugin<UseChartIdSignature>, import("../models/index.js").ChartPlugin<UseChartSeriesConfigSignature>, import("../models/index.js").ChartPlugin<UseChartExperimentalFeaturesSignature>, import("../models/index.js").ChartPlugin<UseChartDimensionsSignature>, import("../models/index.js").ChartPlugin<UseChartSeriesSignature>, import("../models/index.js").ChartPlugin<UseChartInteractionListenerSignature>, import("../models/index.js").ChartPlugin<UseChartAnimationSignature>];
-export type ChartCorePluginSignatures<SeriesType extends ChartSeriesType = ChartSeriesType> = [UseChartElementRefSignature, UseChartIdSignature, UseChartSeriesConfigSignature<SeriesType>, UseChartExperimentalFeaturesSignature, UseChartDimensionsSignature, UseChartSeriesSignature<SeriesType>, UseChartAnimationSignature, UseChartInteractionListenerSignature];
+export declare const CHART_CORE_PLUGINS: readonly [import("../models/index.js").ChartPlugin<UseChartElementRefSignature>, import("../models/index.js").ChartPlugin<UseChartIdSignature>, import("../models/index.js").ChartPlugin<UseChartSeriesConfigSignature>, import("../models/index.js").ChartPlugin<UseChartExperimentalFeaturesSignature<keyof import("../../index.js").ChartsSeriesConfig>>, import("../models/index.js").ChartPlugin<UseChartDimensionsSignature>, import("../models/index.js").ChartPlugin<UseChartSeriesSignature>, import("../models/index.js").ChartPlugin<UseChartInteractionListenerSignature>, import("../models/index.js").ChartPlugin<UseChartAnimationSignature>];
+export type ChartCorePluginSignatures<SeriesType extends ChartSeriesType = ChartSeriesType> = [UseChartElementRefSignature, UseChartIdSignature, UseChartSeriesConfigSignature<SeriesType>, UseChartExperimentalFeaturesSignature<SeriesType>, UseChartDimensionsSignature, UseChartSeriesSignature<SeriesType>, UseChartAnimationSignature, UseChartInteractionListenerSignature];
 export interface ChartCorePluginParameters extends UseChartIdParameters, UseChartSeriesConfigParameters {}

package/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.d.mts

@@ -1,3 +1,4 @@
 import { type ChartPlugin } from "../../models/index.mjs";
 import type { UseChartExperimentalFeaturesSignature } from "./useChartExperimentalFeature.types.mjs";
-export declare const useChartExperimentalFeatures: ChartPlugin<UseChartExperimentalFeaturesSignature>;
+import type { ChartSeriesType } from "../../../../models/seriesType/config.mjs";
+export declare const useChartExperimentalFeatures: ChartPlugin<UseChartExperimentalFeaturesSignature<ChartSeriesType>>;

package/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.d.ts

@@ -1,3 +1,4 @@
 import { type ChartPlugin } from "../../models/index.js";
 import type { UseChartExperimentalFeaturesSignature } from "./useChartExperimentalFeature.types.js";
-export declare const useChartExperimentalFeatures: ChartPlugin<UseChartExperimentalFeaturesSignature>;
+import type { ChartSeriesType } from "../../../../models/seriesType/config.js";
+export declare const useChartExperimentalFeatures: ChartPlugin<UseChartExperimentalFeaturesSignature<ChartSeriesType>>;

package/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.selectors.d.mts

@@ -1,3 +1,4 @@
+import type { ChartSeriesType } from "../../../../models/seriesType/config.mjs";
 import { type ChartRootSelector } from "../../utils/selectors.mjs";
 import type { UseChartExperimentalFeaturesSignature } from "./useChartExperimentalFeature.types.mjs";
-export declare const selectorChartExperimentalFeaturesState: ChartRootSelector<UseChartExperimentalFeaturesSignature>;
+export declare const selectorChartExperimentalFeaturesState: ChartRootSelector<UseChartExperimentalFeaturesSignature<ChartSeriesType>>;

package/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.selectors.d.ts

@@ -1,3 +1,4 @@
+import type { ChartSeriesType } from "../../../../models/seriesType/config.js";
 import { type ChartRootSelector } from "../../utils/selectors.js";
 import type { UseChartExperimentalFeaturesSignature } from "./useChartExperimentalFeature.types.js";
-export declare const selectorChartExperimentalFeaturesState: ChartRootSelector<UseChartExperimentalFeaturesSignature>;
+export declare const selectorChartExperimentalFeaturesState: ChartRootSelector<UseChartExperimentalFeaturesSignature<ChartSeriesType>>;

package/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.d.mts

@@ -1,16 +1,31 @@
 import { type ChartPluginSignature } from "../../models/index.mjs";
-export interface ChartExperimentalFeatures {}
-export interface UseChartExperimentalFeaturesParameters {
+import type { ChartSeriesType } from "../../../../models/seriesType/config.mjs";
+interface LineExperimentalFeatures {
+  /**
+   * Enables pointer-based interaction detection for line and area series.
+   *
+   * When enabled, the chart uses pointer position to determine which series
+   * is closest to the cursor, rather than relying on SVG element hover events.
+   *
+   * This provides finer control over highlighting and clicking the closest
+   * line or point, but uses an approximation (linear interpolation between
+   * data points) rather than exact SVG geometry.
+   */
+  enablePositionBasedPointerInteraction?: boolean;
+}
+export type ChartExperimentalFeatures<SeriesType extends ChartSeriesType = ChartSeriesType> = 'line' extends SeriesType ? LineExperimentalFeatures : {};
+export interface UseChartExperimentalFeaturesParameters<SeriesType extends ChartSeriesType = ChartSeriesType> {
   /**
    * Options to enable features planned for the next major.
    */
-  experimentalFeatures?: ChartExperimentalFeatures;
+  experimentalFeatures?: ChartExperimentalFeatures<SeriesType>;
 }
 export interface UseChartExperimentalFeaturesState {
   experimentalFeatures?: ChartExperimentalFeatures;
 }
-export type UseChartExperimentalFeaturesSignature = ChartPluginSignature<{
-  params: UseChartExperimentalFeaturesParameters;
-  defaultizedParams: UseChartExperimentalFeaturesParameters;
+export type UseChartExperimentalFeaturesSignature<SeriesType extends ChartSeriesType> = ChartPluginSignature<{
+  params: UseChartExperimentalFeaturesParameters<SeriesType>;
+  defaultizedParams: UseChartExperimentalFeaturesParameters<SeriesType>;
   state: UseChartExperimentalFeaturesState;
-}>;
+}>;
+export {};

package/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.d.ts

@@ -1,16 +1,31 @@
 import { type ChartPluginSignature } from "../../models/index.js";
-export interface ChartExperimentalFeatures {}
-export interface UseChartExperimentalFeaturesParameters {
+import type { ChartSeriesType } from "../../../../models/seriesType/config.js";
+interface LineExperimentalFeatures {
+  /**
+   * Enables pointer-based interaction detection for line and area series.
+   *
+   * When enabled, the chart uses pointer position to determine which series
+   * is closest to the cursor, rather than relying on SVG element hover events.
+   *
+   * This provides finer control over highlighting and clicking the closest
+   * line or point, but uses an approximation (linear interpolation between
+   * data points) rather than exact SVG geometry.
+   */
+  enablePositionBasedPointerInteraction?: boolean;
+}
+export type ChartExperimentalFeatures<SeriesType extends ChartSeriesType = ChartSeriesType> = 'line' extends SeriesType ? LineExperimentalFeatures : {};
+export interface UseChartExperimentalFeaturesParameters<SeriesType extends ChartSeriesType = ChartSeriesType> {
   /**
    * Options to enable features planned for the next major.
    */
-  experimentalFeatures?: ChartExperimentalFeatures;
+  experimentalFeatures?: ChartExperimentalFeatures<SeriesType>;
 }
 export interface UseChartExperimentalFeaturesState {
   experimentalFeatures?: ChartExperimentalFeatures;
 }
-export type UseChartExperimentalFeaturesSignature = ChartPluginSignature<{
-  params: UseChartExperimentalFeaturesParameters;
-  defaultizedParams: UseChartExperimentalFeaturesParameters;
+export type UseChartExperimentalFeaturesSignature<SeriesType extends ChartSeriesType> = ChartPluginSignature<{
+  params: UseChartExperimentalFeaturesParameters<SeriesType>;
+  defaultizedParams: UseChartExperimentalFeaturesParameters<SeriesType>;
   state: UseChartExperimentalFeaturesState;
-}>;
+}>;
+export {};

package/internals/plugins/corePlugins/useChartSeries/index.d.mts

@@ -1,3 +1,4 @@
 export { useChartSeries } from "./useChartSeries.mjs";
 export type { UseChartSeriesSignature, UseChartSeriesParameters, UseChartSeriesDefaultizedParameters, ProcessedSeries, SeriesIdToType, SeriesLayout } from "./useChartSeries.types.mjs";
-export * from "./useChartSeries.selectors.mjs";
+export * from "./useChartSeries.selectors.mjs";
+export * from "./useChartSeriesLayout.selectors.mjs";

package/internals/plugins/corePlugins/useChartSeries/index.d.ts

@@ -1,3 +1,4 @@
 export { useChartSeries } from "./useChartSeries.js";
 export type { UseChartSeriesSignature, UseChartSeriesParameters, UseChartSeriesDefaultizedParameters, ProcessedSeries, SeriesIdToType, SeriesLayout } from "./useChartSeries.types.js";
-export * from "./useChartSeries.selectors.js";
+export * from "./useChartSeries.selectors.js";
+export * from "./useChartSeriesLayout.selectors.js";

package/internals/plugins/corePlugins/useChartSeries/index.js

@@ -24,4 +24,16 @@ Object.keys(_useChartSeries2).forEach(function (key) {
       return _useChartSeries2[key];
     }
   });
+});
+var _useChartSeriesLayout = require("./useChartSeriesLayout.selectors");
+Object.keys(_useChartSeriesLayout).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useChartSeriesLayout[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useChartSeriesLayout[key];
+    }
+  });
 });

package/internals/plugins/corePlugins/useChartSeries/index.mjs

@@ -1,2 +1,3 @@
 export { useChartSeries } from "./useChartSeries.mjs";
-export * from "./useChartSeries.selectors.mjs";
+export * from "./useChartSeries.selectors.mjs";
+export * from "./useChartSeriesLayout.selectors.mjs";

package/internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors.d.mts

@@ -20,14 +20,6 @@ export declare const selectorChartsDataset: (args_0: import("../useChartId/useCh
 export declare const selectorChartSeriesProcessed: (args_0: import("../useChartId/useChartId.types.mjs").UseChartIdState & import("../useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("./useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../useChartInteractionListener/index.mjs").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
 }) => import("./useChartSeries.types.mjs").ProcessedSeries<keyof import("../../../index.mjs").ChartsSeriesConfig>;
-/**
- * Get the processed series after applying series processors.
- * This selector computes the processed series on-demand from the defaultized series.
- * @returns {ProcessedSeries} The processed series.
- */
-export declare const selectorChartSeriesLayout: (args_0: import("../useChartId/useChartId.types.mjs").UseChartIdState & import("../useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("./useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../useChartInteractionListener/index.mjs").UseChartInteractionListenerState & Partial<{}> & {
-  cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
-}) => import("./useChartSeries.types.mjs").SeriesLayout<keyof import("../../../index.mjs").ChartsSeriesConfig>;
 /**
  * Returns a function that returns the series configuration for a given series id.
  */
@@ -46,6 +38,7 @@ export declare const selectorChartSeriesConfigGetter: (args_0: import("../useCha
   identifierSerializer: import("../useChartSeriesConfig/index.mjs").IdentifierSerializer<"pie">;
   identifierCleaner: import("../useChartSeriesConfig/index.mjs").IdentifierCleaner<"pie">;
   getItemAtPosition?: import("../useChartSeriesConfig/index.mjs").GetItemAtPosition<"pie"> | undefined;
+  descriptionGetter: import("../useChartSeriesConfig/index.mjs").DescriptionGetter<"pie">;
   isHighlightedCreator: import("../../featurePlugins/useChartHighlight/highlightCreator.types.mjs").HighlightCreator<"pie">;
   isFadedCreator: import("../../featurePlugins/useChartHighlight/highlightCreator.types.mjs").HighlightCreator<"pie">;
 } | import("../useChartSeriesConfig/index.mjs").ChartSeriesTypeConfig<"radar"> | null;

package/internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors.d.ts

@@ -20,14 +20,6 @@ export declare const selectorChartsDataset: (args_0: import("../useChartId/useCh
 export declare const selectorChartSeriesProcessed: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => import("./useChartSeries.types.js").ProcessedSeries<keyof import("../../../index.js").ChartsSeriesConfig>;
-/**
- * Get the processed series after applying series processors.
- * This selector computes the processed series on-demand from the defaultized series.
- * @returns {ProcessedSeries} The processed series.
- */
-export declare const selectorChartSeriesLayout: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
-  cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}) => import("./useChartSeries.types.js").SeriesLayout<keyof import("../../../index.js").ChartsSeriesConfig>;
 /**
  * Returns a function that returns the series configuration for a given series id.
  */
@@ -46,6 +38,7 @@ export declare const selectorChartSeriesConfigGetter: (args_0: import("../useCha
   identifierSerializer: import("../useChartSeriesConfig/index.js").IdentifierSerializer<"pie">;
   identifierCleaner: import("../useChartSeriesConfig/index.js").IdentifierCleaner<"pie">;
   getItemAtPosition?: import("../useChartSeriesConfig/index.js").GetItemAtPosition<"pie"> | undefined;
+  descriptionGetter: import("../useChartSeriesConfig/index.js").DescriptionGetter<"pie">;
   isHighlightedCreator: import("../../featurePlugins/useChartHighlight/highlightCreator.types.js").HighlightCreator<"pie">;
   isFadedCreator: import("../../featurePlugins/useChartHighlight/highlightCreator.types.js").HighlightCreator<"pie">;
 } | import("../useChartSeriesConfig/index.js").ChartSeriesTypeConfig<"radar"> | null;

package/internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors.js

@@ -3,10 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectorChartsDataset = exports.selectorChartSeriesState = exports.selectorChartSeriesProcessed = exports.selectorChartSeriesLayout = exports.selectorChartSeriesConfigGetter = exports.selectorChartDefaultizedSeries = void 0;
+exports.selectorChartsDataset = exports.selectorChartSeriesState = exports.selectorChartSeriesProcessed = exports.selectorChartSeriesConfigGetter = exports.selectorChartDefaultizedSeries = void 0;
 var _store = require("@mui/x-internals/store");
 var _processSeries = require("./processSeries");
-var _useChartDimensions = require("../useChartDimensions");
 var _useChartVisibilityManager = require("../../featurePlugins/useChartVisibilityManager");
 var _useChartSeriesConfig = require("../useChartSeriesConfig/useChartSeriesConfig.selectors");
 const selectorChartSeriesState = state => state.series;
@@ -28,15 +27,6 @@ const selectorChartSeriesProcessed = exports.selectorChartSeriesProcessed = (0,
   return (0, _processSeries.applySeriesProcessors)(defaultizedSeries, seriesConfig, dataset, isItemVisible);
 });
 
-/**
- * Get the processed series after applying series processors.
- * This selector computes the processed series on-demand from the defaultized series.
- * @returns {ProcessedSeries} The processed series.
- */
-const selectorChartSeriesLayout = exports.selectorChartSeriesLayout = (0, _store.createSelectorMemoized)(selectorChartSeriesProcessed, _useChartSeriesConfig.selectorChartSeriesConfig, _useChartDimensions.selectorChartDrawingArea, function selectorChartSeriesLayout(processedSeries, seriesConfig, drawingArea) {
-  return (0, _processSeries.applySeriesLayout)(processedSeries, seriesConfig, drawingArea);
-});
-
 /**
  * Returns a function that returns the series configuration for a given series id.
  */

package/internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors.mjs

@@ -1,6 +1,5 @@
 import { createSelectorMemoized, createSelector } from '@mui/x-internals/store';
-import { applySeriesLayout, applySeriesProcessors } from "./processSeries.mjs";
-import { selectorChartDrawingArea } from "../useChartDimensions/index.mjs";
+import { applySeriesProcessors } from "./processSeries.mjs";
 import { selectorIsItemVisibleGetter } from "../../featurePlugins/useChartVisibilityManager/index.mjs";
 import { selectorChartSeriesConfig } from "../useChartSeriesConfig/useChartSeriesConfig.selectors.mjs";
 export const selectorChartSeriesState = state => state.series;
@@ -21,15 +20,6 @@ export const selectorChartSeriesProcessed = createSelectorMemoized(selectorChart
   return applySeriesProcessors(defaultizedSeries, seriesConfig, dataset, isItemVisible);
 });
 
-/**
- * Get the processed series after applying series processors.
- * This selector computes the processed series on-demand from the defaultized series.
- * @returns {ProcessedSeries} The processed series.
- */
-export const selectorChartSeriesLayout = createSelectorMemoized(selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartDrawingArea, function selectorChartSeriesLayout(processedSeries, seriesConfig, drawingArea) {
-  return applySeriesLayout(processedSeries, seriesConfig, drawingArea);
-});
-
 /**
  * Returns a function that returns the series configuration for a given series id.
  */

package/internals/plugins/corePlugins/useChartSeries/useChartSeriesLayout.selectors.d.mts

@@ -0,0 +1,8 @@
+/**
+ * Get the processed series after applying series layout.
+ * This selector computes the series layout on-demand from the processed series.
+ * @returns {SeriesLayout} The series with layout applied.
+ */
+export declare const selectorChartSeriesLayout: (args_0: import("../useChartId/useChartId.types.mjs").UseChartIdState & import("../useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("./useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../useChartInteractionListener/index.mjs").UseChartInteractionListenerState & Partial<{}> & {
+  cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
+}) => import("./useChartSeries.types.mjs").SeriesLayout<keyof import("../../../index.mjs").ChartsSeriesConfig>;

package/internals/plugins/corePlugins/useChartSeries/useChartSeriesLayout.selectors.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Get the processed series after applying series layout.
+ * This selector computes the series layout on-demand from the processed series.
+ * @returns {SeriesLayout} The series with layout applied.
+ */
+export declare const selectorChartSeriesLayout: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}) => import("./useChartSeries.types.js").SeriesLayout<keyof import("../../../index.js").ChartsSeriesConfig>;