@mui/x-charts 8.22.1 → 8.24.0

package/esm/RadarChart/RadarChart.plugins.js

@@ -2,4 +2,5 @@ import { useChartPolarAxis } from "../internals/plugins/featurePlugins/useChartP
 import { useChartTooltip } from "../internals/plugins/featurePlugins/useChartTooltip/index.js";
 import { useChartInteraction } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 import { useChartHighlight } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
-export const RADAR_PLUGINS = [useChartTooltip, useChartInteraction, useChartPolarAxis, useChartHighlight];
+import { useChartVisibilityManager } from "../internals/plugins/featurePlugins/useChartVisibilityManager/index.js";
+export const RADAR_PLUGINS = [useChartTooltip, useChartInteraction, useChartPolarAxis, useChartHighlight, useChartVisibilityManager];

package/esm/RadarChart/seriesConfig/index.js

@@ -5,6 +5,7 @@ import legendGetter from "./legend.js";
 import tooltipGetter, { axisTooltipGetter } from "./tooltip.js";
 import getSeriesWithDefaultValues from "./getSeriesWithDefaultValues.js";
 import tooltipItemPositionGetter from "./tooltipPosition.js";
+import { identifierSerializerSeriesIdDataIndex } from "../../internals/identifierSerializer.js";
 export const radarSeriesConfig = {
   colorProcessor: getColor,
   seriesProcessor,
@@ -14,5 +15,6 @@ export const radarSeriesConfig = {
   axisTooltipGetter,
   getSeriesWithDefaultValues,
   radiusExtremumGetter,
-  rotationExtremumGetter
+  rotationExtremumGetter,
+  identifierSerializer: identifierSerializerSeriesIdDataIndex
 };

package/esm/RadarChart/seriesConfig/legend.js

@@ -10,6 +10,7 @@ const legendGetter = params => {
       return acc;
     }
     acc.push({
+      type: 'radar',
       id: seriesId,
       seriesId,
       color: series[seriesId].color,

package/esm/ScatterChart/BatchScatter.js

@@ -6,21 +6,12 @@ import { useUtilityClasses } from "./scatterClasses.js";
 import { useChartContext } from "../context/ChartProvider/index.js";
 import { getValueToPositionMapper } from "../hooks/useScale.js";
 import { selectorChartIsSeriesFaded, selectorChartIsSeriesHighlighted, selectorChartSeriesUnfadedItem, selectorChartSeriesHighlightedItem } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
+import { appendAtKey } from "../internals/appendAtKey.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const MAX_POINTS_PER_PATH = 1000;
 /* In an SVG arc, if the arc starts and ends at the same point, it is not rendered, so we add a tiny
  * value to one of the coordinates to ensure that the arc is rendered. */
 const ALMOST_ZERO = 0.01;
-function appendAtKey(map, key, value) {
-  let bucket = map.get(key);
-  if (!bucket) {
-    bucket = [value];
-    map.set(key, bucket);
-  } else {
-    bucket.push(value);
-  }
-  return bucket;
-}
 function createPath(x, y, markerSize) {
   return `M${x - markerSize} ${y} a${markerSize} ${markerSize} 0 1 1 0 ${ALMOST_ZERO}`;
 }
@@ -81,7 +72,10 @@ function BatchScatterPaths(props) {
 }
 const MemoBatchScatterPaths = /*#__PURE__*/React.memo(BatchScatterPaths);
 if (process.env.NODE_ENV !== "production") MemoBatchScatterPaths.displayName = "MemoBatchScatterPaths";
-const Group = styled('g')({
+const Group = styled('g', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})({
   '&[data-faded="true"]': {
     opacity: 0.3
   },

package/esm/ScatterChart/FocusedScatterMark.js

@@ -18,7 +18,7 @@ export function FocusedScatterMark(props) {
     yAxis,
     yAxisIds
   } = useYAxes();
-  if (focusedItem === null || focusedItem.seriesType !== 'scatter' || !scatterSeries) {
+  if (focusedItem === null || focusedItem.type !== 'scatter' || !scatterSeries) {
     return null;
   }
   const series = scatterSeries?.series[focusedItem.seriesId];

package/esm/ScatterChart/ScatterChart.js

@@ -124,6 +124,31 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
   height: PropTypes.number,
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   *
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems: PropTypes.arrayOf(PropTypes.shape({
+    dataIndex: PropTypes.number,
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    type: PropTypes.oneOf(['scatter']).isRequired
+  })),
   /**
    * If `true`, the legend is not rendered.
    */
@@ -169,6 +194,11 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: PropTypes.func,
+  /**
+   * Callback fired when any hidden identifiers change.
+   * @param {VisibilityIdentifier[]} hiddenItems The new list of hidden identifiers.
+   */
+  onHiddenItemsChange: PropTypes.func,
   /**
    * The callback fired when the highlighted item changes.
    *

package/esm/ScatterChart/ScatterChart.plugins.d.ts

@@ -7,5 +7,6 @@ import { type ConvertSignaturesIntoPlugins } from "../internals/plugins/models/h
 import { type UseChartClosestPointSignature } from "../internals/plugins/featurePlugins/useChartClosestPoint/index.js";
 import { type UseChartKeyboardNavigationSignature } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
 import { type UseChartBrushSignature } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
-export type ScatterChartPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<'scatter'>, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature];
+import { type UseChartVisibilityManagerSignature } from "../internals/plugins/featurePlugins/useChartVisibilityManager/index.js";
+export type ScatterChartPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<'scatter'>, UseChartHighlightSignature, UseChartVisibilityManagerSignature<'scatter'>, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature];
 export declare const SCATTER_CHART_PLUGINS: ConvertSignaturesIntoPlugins<ScatterChartPluginSignatures>;

package/esm/ScatterChart/ScatterChart.plugins.js

@@ -6,4 +6,5 @@ import { useChartHighlight } from "../internals/plugins/featurePlugins/useChartH
 import { useChartClosestPoint } from "../internals/plugins/featurePlugins/useChartClosestPoint/index.js";
 import { useChartKeyboardNavigation } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
 import { useChartBrush } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
-export const SCATTER_CHART_PLUGINS = [useChartZAxis, useChartBrush, useChartTooltip, useChartInteraction, useChartCartesianAxis, useChartHighlight, useChartClosestPoint, useChartKeyboardNavigation];
+import { useChartVisibilityManager } from "../internals/plugins/featurePlugins/useChartVisibilityManager/index.js";
+export const SCATTER_CHART_PLUGINS = [useChartZAxis, useChartBrush, useChartTooltip, useChartInteraction, useChartCartesianAxis, useChartHighlight, useChartVisibilityManager, useChartClosestPoint, useChartKeyboardNavigation];

package/esm/ScatterChart/seriesConfig/index.js

@@ -5,6 +5,8 @@ import legendGetter from "./legend.js";
 import tooltipGetter from "./tooltip.js";
 import getSeriesWithDefaultValues from "./getSeriesWithDefaultValues.js";
 import tooltipItemPositionGetter from "./tooltipPosition.js";
+import keyboardFocusHandler from "./keyboardFocusHandler.js";
+import { identifierSerializerSeriesIdDataIndex } from "../../internals/identifierSerializer.js";
 export const scatterSeriesConfig = {
   seriesProcessor,
   colorProcessor: getColor,
@@ -13,5 +15,7 @@ export const scatterSeriesConfig = {
   tooltipItemPositionGetter,
   xExtremumGetter: getExtremumX,
   yExtremumGetter: getExtremumY,
-  getSeriesWithDefaultValues
+  getSeriesWithDefaultValues,
+  keyboardFocusHandler,
+  identifierSerializer: identifierSerializerSeriesIdDataIndex
 };

package/esm/ScatterChart/seriesConfig/keyboardFocusHandler.d.ts

@@ -0,0 +1,3 @@
+import type { KeyboardFocusHandler } from "../../internals/plugins/featurePlugins/useChartKeyboardNavigation/keyboardFocusHandler.types.js";
+declare const keyboardFocusHandler: KeyboardFocusHandler<'scatter', 'bar' | 'line' | 'scatter'>;
+export default keyboardFocusHandler;

package/esm/ScatterChart/seriesConfig/keyboardFocusHandler.js

@@ -0,0 +1,17 @@
+import { createGetNextIndexFocusedItem, createGetPreviousIndexFocusedItem, createGetNextSeriesFocusedItem, createGetPreviousSeriesFocusedItem } from "../../internals/commonNextFocusItem.js";
+const outSeriesTypes = new Set(['bar', 'line', 'scatter']);
+const keyboardFocusHandler = event => {
+  switch (event.key) {
+    case 'ArrowRight':
+      return createGetNextIndexFocusedItem(outSeriesTypes);
+    case 'ArrowLeft':
+      return createGetPreviousIndexFocusedItem(outSeriesTypes);
+    case 'ArrowDown':
+      return createGetPreviousSeriesFocusedItem(outSeriesTypes);
+    case 'ArrowUp':
+      return createGetNextSeriesFocusedItem(outSeriesTypes);
+    default:
+      return null;
+  }
+};
+export default keyboardFocusHandler;

package/esm/ScatterChart/seriesConfig/legend.js

@@ -10,6 +10,7 @@ const legendGetter = params => {
       return acc;
     }
     acc.push({
+      type: 'scatter',
       markType: series[seriesId].labelMarkType,
       id: seriesId,
       seriesId,

package/esm/SparkLineChart/SparkLineChart.js

@@ -241,6 +241,47 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
   height: PropTypes.number,
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   *
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape({
+    dataIndex: PropTypes.number,
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    type: PropTypes.oneOf(['bar']).isRequired
+  }), PropTypes.shape({
+    dataIndex: PropTypes.number,
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    type: PropTypes.oneOf(['line']).isRequired
+  }), PropTypes.shape({
+    dataIndex: PropTypes.number,
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    type: PropTypes.oneOf(['scatter']).isRequired
+  }), PropTypes.shape({
+    dataIndex: PropTypes.number,
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    type: PropTypes.oneOf(['pie']).isRequired
+  }), PropTypes.shape({
+    dataIndex: PropTypes.number,
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    type: PropTypes.oneOf(['radar']).isRequired
+  })]).isRequired),
   /**
    * The controlled axis highlight.
    * Identified by the axis id, and data index.
@@ -286,6 +327,11 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: PropTypes.func,
+  /**
+   * Callback fired when any hidden identifiers change.
+   * @param {VisibilityIdentifier[]} hiddenItems The new list of hidden identifiers.
+   */
+  onHiddenItemsChange: PropTypes.func,
   /**
    * The callback fired when the highlighted item changes.
    *

package/esm/hooks/useFocusedItem.d.ts

@@ -1,15 +1,4 @@
-import { type ChartSeriesType } from "../models/seriesType/config.js";
-import { type SeriesId } from "../models/seriesType/common.js";
-export type FocusedItemData = {
-  seriesType: ChartSeriesType;
-  seriesId: SeriesId;
-  dataIndex: number;
-};
 /**
  * Get the focused item from keyboard navigation.
  */
-export declare function useFocusedItem(): {
-  seriesType: "line" | "bar" | "scatter" | "pie";
-  seriesId: SeriesId;
-  dataIndex: number;
-} | null;
+export declare function useFocusedItem(): import("../index.js").FocusedItemIdentifier<keyof import("../internals/index.js").ChartsSeriesConfig> | null;

package/esm/hooks/useFocusedItem.js

@@ -1,19 +1,12 @@
 'use client';
 
-import * as React from 'react';
 import { useStore } from "../internals/store/useStore.js";
-import { selectorChartsFocusedSeriesType, selectorChartsFocusedSeriesId, selectorChartsFocusedDataIndex } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
+import { selectorChartsFocusedItem } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
+
 /**
  * Get the focused item from keyboard navigation.
  */
 export function useFocusedItem() {
   const store = useStore();
-  const focusedSeriesType = store.use(selectorChartsFocusedSeriesType);
-  const focusedSeriesId = store.use(selectorChartsFocusedSeriesId);
-  const focusedDataIndex = store.use(selectorChartsFocusedDataIndex);
-  return React.useMemo(() => focusedSeriesType === undefined || focusedSeriesId === undefined || focusedDataIndex === undefined ? null : {
-    seriesType: focusedSeriesType,
-    seriesId: focusedSeriesId,
-    dataIndex: focusedDataIndex
-  }, [focusedSeriesType, focusedSeriesId, focusedDataIndex]);
+  return store.use(selectorChartsFocusedItem);
 }

package/esm/hooks/useIsItemFocused.d.ts

@@ -1,11 +1,12 @@
-import { type FocusedItemData } from "./useFocusedItem.js";
-type UseItemFocusedParams = FocusedItemData;
+import type { ChartSeriesType } from "../models/seriesType/config.js";
+import type { FocusedItemIdentifier } from "../models/seriesType/index.js";
+type UseItemFocusedParams = FocusedItemIdentifier<ChartSeriesType>;
 /**
  * A hook to check if an item has the focus.
  *
  * If you need to process multiple points, use the `useIsItemFocusedGetter` hook instead.
  *
- * @param {FocusedItemData} item is the item to check
+ * @param {FocusedItemIdentifier} item is the item to check
  * @returns {boolean} the focus state
  */
 export declare function useIsItemFocused(item: UseItemFocusedParams): boolean;

package/esm/hooks/useIsItemFocused.js

@@ -7,7 +7,7 @@ import { selectorChartsItemIsFocused } from "../internals/plugins/featurePlugins
  *
  * If you need to process multiple points, use the `useIsItemFocusedGetter` hook instead.
  *
- * @param {FocusedItemData} item is the item to check
+ * @param {FocusedItemIdentifier} item is the item to check
  * @returns {boolean} the focus state
  */
 export function useIsItemFocused(item) {

package/esm/hooks/useIsItemFocusedGetter.d.ts

@@ -1,8 +1,9 @@
-import { type FocusedItemData } from "./useFocusedItem.js";
+import type { FocusedItemIdentifier } from "../models/seriesType/index.js";
+import type { ChartSeriesType } from "../models/seriesType/config.js";
 /**
  * A hook to check focus state of multiple items.
  * If you're interested by a single one, consider using `useIsItemFocused`.
  *
  * @returns {(item: FocusedItemData) => boolean} callback to get the state of the item.
  */
-export declare function useIsItemFocusedGetter(): (item: FocusedItemData) => boolean;
+export declare function useIsItemFocusedGetter(): (item: FocusedItemIdentifier<ChartSeriesType>) => boolean;

package/esm/hooks/useIsItemFocusedGetter.js

@@ -1,5 +1,6 @@
 'use client';
 
+import { fastObjectShallowCompare } from '@mui/x-internals/fastObjectShallowCompare';
 import { useFocusedItem } from "./useFocusedItem.js";
 
 /**
@@ -10,5 +11,5 @@ import { useFocusedItem } from "./useFocusedItem.js";
  */
 export function useIsItemFocusedGetter() {
   const focusedItem = useFocusedItem();
-  return item => focusedItem !== null && focusedItem.seriesType === item.seriesType && focusedItem.seriesId === item.seriesId && focusedItem.dataIndex === item.dataIndex;
+  return item => focusedItem !== null && fastObjectShallowCompare(focusedItem, item);
 }

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.22.1
+ * @mui/x-charts v8.24.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/internals/appendAtKey.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Given a map of arrays, appends a value to the array at the given key.
+ * If no array exists at that key, one is created and the value appended.
+ * @param map Map of arrays
+ * @param key Key to append the value at
+ * @param value Value to append
+ */
+export declare function appendAtKey<K, V>(map: Map<K, V[]>, key: K, value: V): V[];

package/esm/internals/appendAtKey.js

@@ -0,0 +1,17 @@
+/**
+ * Given a map of arrays, appends a value to the array at the given key.
+ * If no array exists at that key, one is created and the value appended.
+ * @param map Map of arrays
+ * @param key Key to append the value at
+ * @param value Value to append
+ */
+export function appendAtKey(map, key, value) {
+  let bucket = map.get(key);
+  if (!bucket) {
+    bucket = [value];
+    map.set(key, bucket);
+  } else {
+    bucket.push(value);
+  }
+  return bucket;
+}

package/esm/internals/commonNextFocusItem.d.ts

@@ -0,0 +1,14 @@
+import type { UseChartKeyboardNavigationSignature } from "./plugins/featurePlugins/useChartKeyboardNavigation/index.js";
+import type { ChartState } from "./plugins/models/chart.js";
+import type { ChartSeriesType } from "../models/seriesType/config.js";
+import type { FocusedItemIdentifier, SeriesId, SeriesItemIdentifier } from "../models/seriesType/index.js";
+type ReturnedItem<OutSeriesType extends ChartSeriesType> = {
+  type: OutSeriesType;
+  seriesId: SeriesId;
+  dataIndex: number;
+} | null;
+export declare function createGetNextIndexFocusedItem<InSeriesType extends Exclude<ChartSeriesType, 'sankey'>, OutSeriesType extends Exclude<ChartSeriesType, 'sankey'> = InSeriesType>(compatibleSeriesTypes: Set<OutSeriesType>): (currentItem: FocusedItemIdentifier<InSeriesType> | null, state: ChartState<[UseChartKeyboardNavigationSignature], []>) => ReturnedItem<OutSeriesType>;
+export declare function createGetPreviousIndexFocusedItem<InSeriesType extends Exclude<ChartSeriesType, 'sankey'>, OutSeriesType extends Exclude<ChartSeriesType, 'sankey'> = InSeriesType>(compatibleSeriesTypes: Set<OutSeriesType>): (currentItem: SeriesItemIdentifier<InSeriesType> | null, state: ChartState<[UseChartKeyboardNavigationSignature], []>) => ReturnedItem<OutSeriesType>;
+export declare function createGetNextSeriesFocusedItem<InSeriesType extends Exclude<ChartSeriesType, 'sankey'>, OutSeriesType extends Exclude<ChartSeriesType, 'sankey'> = InSeriesType>(compatibleSeriesTypes: Set<OutSeriesType>): (currentItem: SeriesItemIdentifier<InSeriesType> | null, state: ChartState<[UseChartKeyboardNavigationSignature], []>) => ReturnedItem<OutSeriesType>;
+export declare function createGetPreviousSeriesFocusedItem<InSeriesType extends Exclude<ChartSeriesType, 'sankey'>, OutSeriesType extends Exclude<ChartSeriesType, 'sankey'> = InSeriesType>(compatibleSeriesTypes: Set<OutSeriesType>): (currentItem: SeriesItemIdentifier<InSeriesType> | null, state: ChartState<[UseChartKeyboardNavigationSignature], []>) => ReturnedItem<OutSeriesType>;
+export {};

package/esm/internals/commonNextFocusItem.js

@@ -0,0 +1,88 @@
+import { getPreviousNonEmptySeries } from "./plugins/featurePlugins/useChartKeyboardNavigation/utils/getPreviousNonEmptySeries.js";
+import { getMaxSeriesLength } from "./plugins/featurePlugins/useChartKeyboardNavigation/utils/getMaxSeriesLength.js";
+import { selectorChartSeriesProcessed } from "./plugins/corePlugins/useChartSeries/index.js";
+import { getNextNonEmptySeries } from "./plugins/featurePlugins/useChartKeyboardNavigation/utils/getNextNonEmptySeries.js";
+import { seriesHasData } from "./seriesHasData.js";
+export function createGetNextIndexFocusedItem(compatibleSeriesTypes) {
+  return function getNextIndexFocusedItem(currentItem, state) {
+    const processedSeries = selectorChartSeriesProcessed(state);
+    let seriesId = currentItem?.seriesId;
+    let type = currentItem?.type;
+    if (!type || seriesId == null || !seriesHasData(processedSeries, type, seriesId)) {
+      const nextSeries = getNextNonEmptySeries(processedSeries, compatibleSeriesTypes, type, seriesId);
+      if (nextSeries === null) {
+        return null;
+      }
+      type = nextSeries.type;
+      seriesId = nextSeries.seriesId;
+    }
+    const maxLength = getMaxSeriesLength(processedSeries, compatibleSeriesTypes);
+    const dataIndex = Math.min(maxLength - 1, currentItem?.dataIndex == null ? 0 : currentItem.dataIndex + 1);
+    return {
+      type,
+      seriesId,
+      dataIndex
+    };
+  };
+}
+export function createGetPreviousIndexFocusedItem(compatibleSeriesTypes) {
+  return function getPreviousIndexFocusedItem(currentItem, state) {
+    const processedSeries = selectorChartSeriesProcessed(state);
+    let seriesId = currentItem?.seriesId;
+    let type = currentItem?.type;
+    if (!type || seriesId == null || !seriesHasData(processedSeries, type, seriesId)) {
+      const previousSeries = getPreviousNonEmptySeries(processedSeries, compatibleSeriesTypes, type, seriesId);
+      if (previousSeries === null) {
+        return null;
+      }
+      type = previousSeries.type;
+      seriesId = previousSeries.seriesId;
+    }
+    const maxLength = getMaxSeriesLength(processedSeries, compatibleSeriesTypes);
+    const dataIndex = Math.max(0, currentItem?.dataIndex == null ? maxLength - 1 : currentItem.dataIndex - 1);
+    return {
+      type,
+      seriesId,
+      dataIndex
+    };
+  };
+}
+export function createGetNextSeriesFocusedItem(compatibleSeriesTypes) {
+  return function getNextSeriesFocusedItem(currentItem, state) {
+    const processedSeries = selectorChartSeriesProcessed(state);
+    let seriesId = currentItem?.seriesId;
+    let type = currentItem?.type;
+    const nextSeries = getNextNonEmptySeries(processedSeries, compatibleSeriesTypes, type, seriesId);
+    if (nextSeries === null) {
+      return null; // No series to move the focus to.
+    }
+    type = nextSeries.type;
+    seriesId = nextSeries.seriesId;
+    const dataIndex = currentItem?.dataIndex == null ? 0 : currentItem.dataIndex;
+    return {
+      type,
+      seriesId,
+      dataIndex
+    };
+  };
+}
+export function createGetPreviousSeriesFocusedItem(compatibleSeriesTypes) {
+  return function getPreviousSeriesFocusedItem(currentItem, state) {
+    const processedSeries = selectorChartSeriesProcessed(state);
+    let seriesId = currentItem?.seriesId;
+    let type = currentItem?.type;
+    const previousSeries = getPreviousNonEmptySeries(processedSeries, compatibleSeriesTypes, type, seriesId);
+    if (previousSeries === null) {
+      return null; // No series to move the focus to.
+    }
+    type = previousSeries.type;
+    seriesId = previousSeries.seriesId;
+    const data = processedSeries[type].series[seriesId].data;
+    const dataIndex = currentItem?.dataIndex == null ? data.length - 1 : currentItem.dataIndex;
+    return {
+      type,
+      seriesId,
+      dataIndex
+    };
+  };
+}

package/esm/internals/getBarDimensions.d.ts

@@ -1,5 +1,4 @@
-import type { ScaleName, ChartsXAxisProps, ChartsYAxisProps } from "../models/index.js";
-import type { ComputedAxis } from "../models/axis.js";
+import type { ChartsXAxisProps, ChartsYAxisProps, ComputedAxis, ScaleName } from "../models/axis.js";
 import type { ChartSeriesDefaultized } from "../models/seriesType/config.js";
 export declare function getBarDimensions(params: {
   verticalLayout: boolean;

package/esm/internals/identifierSerializer.d.ts

@@ -0,0 +1,9 @@
+import type { SeriesId } from "../models/index.js";
+export declare const typeSerializer: (type: string) => string;
+export declare const seriesIdSerializer: (id: SeriesId) => string;
+export declare const dataIndexSerializer: (dataIndex?: number) => string;
+export declare const identifierSerializerSeriesIdDataIndex: (identifier: {
+  type: string;
+  seriesId: SeriesId;
+  dataIndex?: number;
+}) => string;

package/esm/internals/identifierSerializer.js

@@ -0,0 +1,6 @@
+export const typeSerializer = type => `Type(${type})`;
+export const seriesIdSerializer = id => `Series(${id})`;
+export const dataIndexSerializer = dataIndex => dataIndex === undefined ? '' : `Index(${dataIndex})`;
+export const identifierSerializerSeriesIdDataIndex = identifier => {
+  return `${typeSerializer(identifier.type)}${seriesIdSerializer(identifier.seriesId)}${dataIndexSerializer(identifier.dataIndex)}`;
+};

package/esm/internals/index.d.ts

@@ -12,13 +12,14 @@ export { scatterSeriesConfig } from "../ScatterChart/seriesConfig/index.js";
 export { useLineChartProps } from "../LineChart/useLineChartProps.js";
 export { useAreaPlotData } from "../LineChart/useAreaPlotData.js";
 export { useLinePlotData } from "../LineChart/useLinePlotData.js";
-export { useBarChartProps } from "../BarChart/useBarChartProps.js";
+export * from "../BarChart/useBarChartProps.js";
 export { useBarPlotData } from "../BarChart/useBarPlotData.js";
 export { useRadarChartProps } from "../RadarChart/useRadarChartProps.js";
 export * from "../ChartContainer/useChartContainerProps.js";
 export * from "../ChartDataProvider/useChartDataProviderProps.js";
 export * from "./seriesSelectorOfType.js";
 export { useSkipAnimation } from "../hooks/useSkipAnimation.js";
+export { useRegisterPointerInteractions } from "./plugins/featurePlugins/shared/useRegisterPointerInteractions.js";
 export * from "./plugins/corePlugins/useChartId/index.js";
 export * from "./plugins/corePlugins/useChartSeries/index.js";
 export * from "./plugins/corePlugins/useChartDimensions/index.js";
@@ -29,6 +30,7 @@ export * from "./plugins/featurePlugins/useChartPolarAxis/index.js";
 export * from "./plugins/featurePlugins/useChartTooltip/index.js";
 export * from "./plugins/featurePlugins/useChartInteraction/index.js";
 export * from "./plugins/featurePlugins/useChartHighlight/index.js";
+export * from "./plugins/featurePlugins/useChartVisibilityManager/index.js";
 export * from "./plugins/featurePlugins/useChartKeyboardNavigation/index.js";
 export * from "./plugins/featurePlugins/useChartClosestPoint/index.js";
 export * from "./plugins/featurePlugins/useChartBrush/index.js";
@@ -47,7 +49,7 @@ export * from "./getLabel.js";
 export * from "./getSVGPoint.js";
 export * from "./isDefined.js";
 export * from "./getScale.js";
-export * from "./stackSeries.js";
+export * from "./stacking/index.js";
 export * from "./getCurve.js";
 export * from "./consumeSlots.js";
 export * from "./consumeThemeProps.js";
@@ -58,6 +60,7 @@ export * from "./dateHelpers.js";
 export * from "./invertScale.js";
 export * from "./scaleGuards.js";
 export * from "./findMinMax.js";
+export { getSeriesColorFn } from "./getSeriesColorFn.js";
 export { checkBarChartScaleErrors } from "../BarChart/checkBarChartScaleErrors.js";
 export { getBandSize } from "./getBandSize.js";
 export { getAxisExtrema } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisExtrema.js";
@@ -71,4 +74,5 @@ export * from "./plugins/models/index.js";
 export * from "./material/index.js";
 export * from "./createSvgIcon.js";
 export * from "./constants.js";
-export * from "./scales/index.js";
+export * from "./scales/index.js";
+export * from "./identifierSerializer.js";

package/esm/internals/index.js

@@ -15,13 +15,14 @@ export { scatterSeriesConfig } from "../ScatterChart/seriesConfig/index.js";
 export { useLineChartProps } from "../LineChart/useLineChartProps.js";
 export { useAreaPlotData } from "../LineChart/useAreaPlotData.js";
 export { useLinePlotData } from "../LineChart/useLinePlotData.js";
-export { useBarChartProps } from "../BarChart/useBarChartProps.js";
+export * from "../BarChart/useBarChartProps.js";
 export { useBarPlotData } from "../BarChart/useBarPlotData.js";
 export { useRadarChartProps } from "../RadarChart/useRadarChartProps.js";
 export * from "../ChartContainer/useChartContainerProps.js";
 export * from "../ChartDataProvider/useChartDataProviderProps.js";
 export * from "./seriesSelectorOfType.js";
 export { useSkipAnimation } from "../hooks/useSkipAnimation.js";
+export { useRegisterPointerInteractions } from "./plugins/featurePlugins/shared/useRegisterPointerInteractions.js";
 
 // plugins
 export * from "./plugins/corePlugins/useChartId/index.js";
@@ -34,6 +35,7 @@ export * from "./plugins/featurePlugins/useChartPolarAxis/index.js";
 export * from "./plugins/featurePlugins/useChartTooltip/index.js";
 export * from "./plugins/featurePlugins/useChartInteraction/index.js";
 export * from "./plugins/featurePlugins/useChartHighlight/index.js";
+export * from "./plugins/featurePlugins/useChartVisibilityManager/index.js";
 export * from "./plugins/featurePlugins/useChartKeyboardNavigation/index.js";
 export * from "./plugins/featurePlugins/useChartClosestPoint/index.js";
 export * from "./plugins/featurePlugins/useChartBrush/index.js";
@@ -57,7 +59,7 @@ export * from "./getLabel.js";
 export * from "./getSVGPoint.js";
 export * from "./isDefined.js";
 export * from "./getScale.js";
-export * from "./stackSeries.js";
+export * from "./stacking/index.js";
 export * from "./getCurve.js";
 export * from "./consumeSlots.js";
 export * from "./consumeThemeProps.js";
@@ -68,6 +70,7 @@ export * from "./dateHelpers.js";
 export * from "./invertScale.js";
 export * from "./scaleGuards.js";
 export * from "./findMinMax.js";
+export { getSeriesColorFn } from "./getSeriesColorFn.js";
 export { checkBarChartScaleErrors } from "../BarChart/checkBarChartScaleErrors.js";
 export { getBandSize } from "./getBandSize.js";
 
@@ -85,4 +88,5 @@ export * from "./plugins/models/index.js";
 export * from "./material/index.js";
 export * from "./createSvgIcon.js";
 export * from "./constants.js";
-export * from "./scales/index.js";
+export * from "./scales/index.js";
+export * from "./identifierSerializer.js";

package/esm/internals/invertScale.d.ts

@@ -1,2 +1,6 @@
-import { type D3Scale } from "../models/axis.js";
-export declare function invertScale<T>(scale: D3Scale, data: readonly T[], value: number): number | Date | T;
+import { type D3OrdinalScale, type D3Scale } from "../models/axis.js";
+export declare function invertScale<T>(scale: D3Scale, data: readonly T[], value: number): number | Date | T;
+/**
+ * Get the data index for a given value on an ordinal scale.
+ */
+export declare function getDataIndexForOrdinalScaleValue(scale: D3OrdinalScale, value: number): number;