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

package/hooks/useDataset.mjs

@@ -1,12 +1,12 @@
 'use client';
 
 import { useStore } from "../internals/store/useStore.mjs";
-import { selectorChartDataset } from "../internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors.mjs";
+import { selectorChartsDataset } from "../internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors.mjs";
 /**
  * Get access to the dataset used to populate series and axes data.
  * @returns {DatasetType | undefined} The dataset array if provided, otherwise undefined.
  */
 export function useDataset() {
   const store = useStore();
-  return store.use(selectorChartDataset);
+  return store.use(selectorChartsDataset);
 }

package/hooks/useInteractionItemProps.d.mts

@@ -5,7 +5,7 @@ import type { ChartSeriesType } from "../models/seriesType/config.mjs";
 import type { SeriesItemIdentifierWithType } from "../models/seriesType/index.mjs";
 import type { ChartInstance } from "../internals/plugins/models/index.mjs";
 import type { UseChartTooltipSignature } from "../internals/plugins/featurePlugins/useChartTooltip/index.mjs";
-export declare const useInteractionItemProps: <SeriesType extends ChartSeriesType>(data: SeriesItemIdentifierWithType<SeriesType>, skip?: boolean) => {
+export declare const useInteractionItemProps: <SeriesType extends ChartSeriesType>(data: SeriesItemIdentifierWithType<SeriesType>) => {
   onPointerEnter?: () => void;
   onPointerLeave?: () => void;
   onPointerDown?: (event: React.PointerEvent) => void;

package/hooks/useInteractionItemProps.d.ts

@@ -5,7 +5,7 @@ import type { ChartSeriesType } from "../models/seriesType/config.js";
 import type { SeriesItemIdentifierWithType } from "../models/seriesType/index.js";
 import type { ChartInstance } from "../internals/plugins/models/index.js";
 import type { UseChartTooltipSignature } from "../internals/plugins/featurePlugins/useChartTooltip/index.js";
-export declare const useInteractionItemProps: <SeriesType extends ChartSeriesType>(data: SeriesItemIdentifierWithType<SeriesType>, skip?: boolean) => {
+export declare const useInteractionItemProps: <SeriesType extends ChartSeriesType>(data: SeriesItemIdentifierWithType<SeriesType>) => {
   onPointerEnter?: () => void;
   onPointerLeave?: () => void;
   onPointerDown?: (event: React.PointerEvent) => void;

package/hooks/useInteractionItemProps.js

@@ -10,16 +10,16 @@ exports.getInteractionItemProps = getInteractionItemProps;
 exports.useInteractionItemProps = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
-var _ChartProvider = require("../context/ChartProvider");
+var _ChartsProvider = require("../context/ChartsProvider");
 function onPointerDown(event) {
   if ('hasPointerCapture' in event.currentTarget && event.currentTarget.hasPointerCapture(event.pointerId)) {
     event.currentTarget.releasePointerCapture(event.pointerId);
   }
 }
-const useInteractionItemProps = (data, skip) => {
+const useInteractionItemProps = data => {
   const {
     instance
-  } = (0, _ChartProvider.useChartContext)();
+  } = (0, _ChartsProvider.useChartsContext)();
   const interactionActive = React.useRef(false);
   const onPointerEnter = (0, _useEventCallback.default)(() => {
     interactionActive.current = true;
@@ -40,11 +40,11 @@ const useInteractionItemProps = (data, skip) => {
       }
     };
   }, [onPointerLeave]);
-  return React.useMemo(() => skip ? {} : {
+  return React.useMemo(() => ({
     onPointerEnter,
     onPointerLeave,
     onPointerDown
-  }, [skip, onPointerEnter, onPointerLeave]);
+  }), [onPointerEnter, onPointerLeave]);
 };
 exports.useInteractionItemProps = useInteractionItemProps;
 function getInteractionItemProps(instance, item) {

package/hooks/useInteractionItemProps.mjs

@@ -2,16 +2,16 @@
 
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
-import { useChartContext } from "../context/ChartProvider/index.mjs";
+import { useChartsContext } from "../context/ChartsProvider/index.mjs";
 function onPointerDown(event) {
   if ('hasPointerCapture' in event.currentTarget && event.currentTarget.hasPointerCapture(event.pointerId)) {
     event.currentTarget.releasePointerCapture(event.pointerId);
   }
 }
-export const useInteractionItemProps = (data, skip) => {
+export const useInteractionItemProps = data => {
   const {
     instance
-  } = useChartContext();
+  } = useChartsContext();
   const interactionActive = React.useRef(false);
   const onPointerEnter = useEventCallback(() => {
     interactionActive.current = true;
@@ -32,11 +32,11 @@ export const useInteractionItemProps = (data, skip) => {
       }
     };
   }, [onPointerLeave]);
-  return React.useMemo(() => skip ? {} : {
+  return React.useMemo(() => ({
     onPointerEnter,
     onPointerLeave,
     onPointerDown
-  }, [skip, onPointerEnter, onPointerLeave]);
+  }), [onPointerEnter, onPointerLeave]);
 };
 export function getInteractionItemProps(instance, item) {
   function onPointerEnter() {

package/hooks/useTicks.js

@@ -13,7 +13,7 @@ var _scaleGuards = require("../internals/scaleGuards");
 var _isInfinity = require("../internals/isInfinity");
 var _timeTicks = require("../utils/timeTicks");
 var _dateHelpers = require("../internals/dateHelpers");
-var _useChartContext = require("../context/ChartProvider/useChartContext");
+var _useChartsContext = require("../context/ChartsProvider/useChartsContext");
 const offsetRatio = {
   start: 0,
   extremities: 0,
@@ -252,7 +252,7 @@ function useTicks(options) {
   } = options;
   const {
     instance
-  } = (0, _useChartContext.useChartContext)();
+  } = (0, _useChartsContext.useChartsContext)();
   const isInside = direction === 'x' ? instance.isXInside : instance.isYInside;
   return React.useMemo(() => getTicks({
     scale,

package/hooks/useTicks.mjs

@@ -5,7 +5,7 @@ import { isOrdinalScale } from "../internals/scaleGuards.mjs";
 import { isInfinity } from "../internals/isInfinity.mjs";
 import { tickFrequencies } from "../utils/timeTicks.mjs";
 import { isDateData } from "../internals/dateHelpers.mjs";
-import { useChartContext } from "../context/ChartProvider/useChartContext.mjs";
+import { useChartsContext } from "../context/ChartsProvider/useChartsContext.mjs";
 const offsetRatio = {
   start: 0,
   extremities: 0,
@@ -244,7 +244,7 @@ export function useTicks(options) {
   } = options;
   const {
     instance
-  } = useChartContext();
+  } = useChartsContext();
   const isInside = direction === 'x' ? instance.isXInside : instance.isYInside;
   return React.useMemo(() => getTicks({
     scale,

package/index.d.mts

@@ -26,10 +26,7 @@ export * from "./RadarChart/index.mjs";
 export * from "./ChartsSurface/index.mjs";
 export { ChartsContainer } from "./ChartsContainer/index.mjs";
 export type { ChartsContainerProps, ChartsContainerSlots, ChartsContainerSlotProps } from "./ChartsContainer/index.mjs";
-export { ChartContainer } from "./ChartContainer/index.mjs";
-export type { ChartContainerProps, ChartContainerSlots, ChartContainerSlotProps } from "./ChartContainer/index.mjs";
 export * from "./ChartsDataProvider/index.mjs";
-export * from "./ChartDataProvider/index.mjs";
 export * from "./Toolbar/index.mjs";
 export * from "./ChartsWrapper/index.mjs";
 export * from "./ChartsBrushOverlay/index.mjs";

package/index.d.ts

@@ -26,10 +26,7 @@ export * from "./RadarChart/index.js";
 export * from "./ChartsSurface/index.js";
 export { ChartsContainer } from "./ChartsContainer/index.js";
 export type { ChartsContainerProps, ChartsContainerSlots, ChartsContainerSlotProps } from "./ChartsContainer/index.js";
-export { ChartContainer } from "./ChartContainer/index.js";
-export type { ChartContainerProps, ChartContainerSlots, ChartContainerSlotProps } from "./ChartContainer/index.js";
 export * from "./ChartsDataProvider/index.js";
-export * from "./ChartDataProvider/index.js";
 export * from "./Toolbar/index.js";
 export * from "./ChartsWrapper/index.js";
 export * from "./ChartsBrushOverlay/index.js";

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v9.0.0-alpha.3
+ * @mui/x-charts v9.0.0-beta.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -11,15 +11,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
-  ChartsContainer: true,
-  ChartContainer: true
+  ChartsContainer: true
 };
-Object.defineProperty(exports, "ChartContainer", {
-  enumerable: true,
-  get: function () {
-    return _ChartContainer.ChartContainer;
-  }
-});
 Object.defineProperty(exports, "ChartsContainer", {
   enumerable: true,
   get: function () {
@@ -339,7 +332,6 @@ Object.keys(_ChartsSurface).forEach(function (key) {
   });
 });
 var _ChartsContainer = require("./ChartsContainer");
-var _ChartContainer = require("./ChartContainer");
 var _ChartsDataProvider = require("./ChartsDataProvider");
 Object.keys(_ChartsDataProvider).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -352,18 +344,6 @@ Object.keys(_ChartsDataProvider).forEach(function (key) {
     }
   });
 });
-var _ChartDataProvider = require("./ChartDataProvider");
-Object.keys(_ChartDataProvider).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _ChartDataProvider[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _ChartDataProvider[key];
-    }
-  });
-});
 var _Toolbar = require("./Toolbar");
 Object.keys(_Toolbar).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/index.mjs

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v9.0.0-alpha.3
+ * @mui/x-charts v9.0.0-beta.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -32,9 +32,7 @@ export * from "./Gauge/index.mjs";
 export * from "./RadarChart/index.mjs";
 export * from "./ChartsSurface/index.mjs";
 export { ChartsContainer } from "./ChartsContainer/index.mjs";
-export { ChartContainer } from "./ChartContainer/index.mjs";
 export * from "./ChartsDataProvider/index.mjs";
-export * from "./ChartDataProvider/index.mjs";
 export * from "./Toolbar/index.mjs";
 export * from "./ChartsWrapper/index.mjs";
 export * from "./ChartsBrushOverlay/index.mjs";

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

@@ -0,0 +1,5 @@
+/**
+ * This component provides an accessibility proxy for charts.
+ * It uses two divs to let screen readers announce the focused content when it changes.
+ */
+export declare function ChartsAccessibilityProxy(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,5 @@
+/**
+ * This component provides an accessibility proxy for charts.
+ * It uses two divs to let screen readers announce the focused content when it changes.
+ */
+export declare function ChartsAccessibilityProxy(): import("react/jsx-runtime").JSX.Element;

package/internals/components/ChartsAccessibilityProxy/ChartsAccessibilityProxy.js

@@ -0,0 +1,100 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsAccessibilityProxy = ChartsAccessibilityProxy;
+var React = _interopRequireWildcard(require("react"));
+var _useChartId = require("../../../hooks/useChartId");
+var _useDescription = require("./useDescription");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Make the proxy looks like a layer.
+ * Having a non-zero size is important for some screen readers to announce the content.
+ */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.
+ */
+function ChartsAccessibilityProxy() {
+  const message = (0, _useDescription.useDescription)();
+  const chartId = (0, _useChartId.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__*/(0, _jsxRuntime.jsx)("div", {
+    role: "presentation",
+    tabIndex: message ? undefined : 0,
+    ref: containerRef,
+    style: fullSizeLayerStyle
+  });
+}

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/consumeSlots.d.mts

@@ -40,7 +40,7 @@ import * as React from 'react';
  * @param {Function} options.classesResolver A function that returns the classes for the component. It receives the props, after theme props and defaults have been applied. And the theme object as the second argument.
  * @param InComponent The component to render if the slot is not provided.
  */
-export declare const consumeSlots: <Props extends {}, Ref extends {}, RenderFunction = (props: Props, ref: React.Ref<Ref>) => React.ElementType>(name: string, slotPropName: string, options: {
+export declare const consumeSlots: <Props extends {}, Ref extends {}, RenderFunction = React.ForwardRefExoticComponent<Props & React.RefAttributes<Ref>>>(name: string, slotPropName: string, options: {
   propagateSlots?: boolean;
   defaultProps?: Omit<Partial<Props>, "slots" | "slotProps"> | ((props: Props) => Omit<Partial<Props>, "slots" | "slotProps">);
   omitProps?: Array<keyof Props>;

package/internals/consumeSlots.d.ts

@@ -40,7 +40,7 @@ import * as React from 'react';
  * @param {Function} options.classesResolver A function that returns the classes for the component. It receives the props, after theme props and defaults have been applied. And the theme object as the second argument.
  * @param InComponent The component to render if the slot is not provided.
  */
-export declare const consumeSlots: <Props extends {}, Ref extends {}, RenderFunction = (props: Props, ref: React.Ref<Ref>) => React.ElementType>(name: string, slotPropName: string, options: {
+export declare const consumeSlots: <Props extends {}, Ref extends {}, RenderFunction = React.ForwardRefExoticComponent<Props & React.RefAttributes<Ref>>>(name: string, slotPropName: string, options: {
   propagateSlots?: boolean;
   defaultProps?: Omit<Partial<Props>, "slots" | "slotProps"> | ((props: Props) => Omit<Partial<Props>, "slots" | "slotProps">);
   omitProps?: Array<keyof Props>;