@mui/x-charts 8.27.0 → 9.0.0-alpha.1

package/SparkLineChart/SparkLineChart.js

@@ -270,24 +270,24 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    */
   hiddenItems: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-    type: _propTypes.default.oneOf(['bar']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['bar'])
   }), _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-    type: _propTypes.default.oneOf(['line']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['line'])
   }), _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-    type: _propTypes.default.oneOf(['scatter']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['scatter'])
   }), _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-    type: _propTypes.default.oneOf(['pie']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['pie'])
   }), _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-    type: _propTypes.default.oneOf(['radar']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['radar'])
   })]).isRequired),
   /**
    * The controlled axis highlight.
@@ -303,7 +303,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    */
   highlightedItem: _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired
+    seriesId: _propTypes.default.string.isRequired
   }),
   /**
    * This prop is used to help implement the accessibility logic.
@@ -333,24 +333,24 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    */
   initialHiddenItems: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-    type: _propTypes.default.oneOf(['bar']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['bar'])
   }), _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-    type: _propTypes.default.oneOf(['line']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['line'])
   }), _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-    type: _propTypes.default.oneOf(['scatter']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['scatter'])
   }), _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-    type: _propTypes.default.oneOf(['pie']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['pie'])
   }), _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-    type: _propTypes.default.oneOf(['radar']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['radar'])
   })]).isRequired),
   /**
    * Localized text for chart components.
@@ -402,6 +402,14 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * @param {ScatterItemIdentifier} scatterItemIdentifier Identify which item got clicked
    */
   onItemClick: _propTypes.default.func,
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   * @param {AxisItemIdentifier[]} axisItems The array of axes item identifiers.
+   */
+  onTooltipAxisChange: _propTypes.default.func,
   /**
    * The callback fired when the tooltip item changes.
    *
@@ -443,30 +451,38 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
   theme: _propTypes.default.oneOf(['dark', 'light']),
   title: _propTypes.default.string,
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
+    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    dataIndex: _propTypes.default.number.isRequired
+  })),
   /**
    * The tooltip item.
    * Used when the tooltip is controlled.
    */
   tooltipItem: _propTypes.default.oneOfType([_propTypes.default.shape({
     dataIndex: _propTypes.default.number.isRequired,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
-    type: _propTypes.default.oneOf(['bar']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['bar'])
   }), _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
-    type: _propTypes.default.oneOf(['line']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['line'])
   }), _propTypes.default.shape({
     dataIndex: _propTypes.default.number.isRequired,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
-    type: _propTypes.default.oneOf(['scatter']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['scatter'])
   }), _propTypes.default.shape({
     dataIndex: _propTypes.default.number.isRequired,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
-    type: _propTypes.default.oneOf(['pie']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['pie'])
   }), _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
-    type: _propTypes.default.oneOf(['radar']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['radar'])
   })]),
   /**
    * Formatter used by the tooltip.

package/context/ChartProvider/ChartProvider.d.ts

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import type { ChartProviderProps } from "./ChartProvider.types.js";
 import { type ChartAnyPluginSignature } from "../../internals/plugins/models/index.js";
-import { type ChartSeriesConfig } from "../../internals/plugins/models/seriesConfig/index.js";
-import { type ChartSeriesType } from "../../models/seriesType/config.js";
-export declare const defaultSeriesConfig: ChartSeriesConfig<'bar' | 'scatter' | 'line' | 'pie'>;
-declare function ChartProvider<TSeriesType extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[]>(props: React.PropsWithChildren<ChartProviderProps<TSeriesType, TSignatures>>): import("react/jsx-runtime").JSX.Element;
+import type { ChartSeriesType } from "../../models/seriesType/config.js";
+import type { ChartCorePluginSignatures } from "../../internals/plugins/corePlugins/index.js";
+declare function ChartProvider<TSeriesType extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = ChartCorePluginSignatures<TSeriesType>>(props: React.PropsWithChildren<ChartProviderProps<TSeriesType, TSignatures>>): import("react/jsx-runtime").JSX.Element;
 export { ChartProvider };

package/context/ChartProvider/ChartProvider.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartProvider = ChartProvider;
-exports.defaultSeriesConfig = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useCharts = require("../../internals/store/useCharts");
 var _ChartContext = require("./ChartContext");
@@ -15,18 +14,7 @@ var _useChartTooltip = require("../../internals/plugins/featurePlugins/useChartT
 var _useChartInteraction = require("../../internals/plugins/featurePlugins/useChartInteraction");
 var _useChartZAxis = require("../../internals/plugins/featurePlugins/useChartZAxis");
 var _useChartHighlight = require("../../internals/plugins/featurePlugins/useChartHighlight/useChartHighlight");
-var _seriesConfig = require("../../BarChart/seriesConfig");
-var _seriesConfig2 = require("../../ScatterChart/seriesConfig");
-var _seriesConfig3 = require("../../LineChart/seriesConfig");
-var _seriesConfig4 = require("../../PieChart/seriesConfig");
 var _jsxRuntime = require("react/jsx-runtime");
-const defaultSeriesConfig = exports.defaultSeriesConfig = {
-  bar: _seriesConfig.barSeriesConfig,
-  scatter: _seriesConfig2.scatterSeriesConfig,
-  line: _seriesConfig3.lineSeriesConfig,
-  pie: _seriesConfig4.pieSeriesConfig
-};
-
 // For consistency with the v7, the cartesian axes are set by default.
 // To remove them, you can provide a `plugins` props.
 const defaultPlugins = [_useChartZAxis.useChartZAxis, _useChartTooltip.useChartTooltip, _useChartInteraction.useChartInteraction, _useChartCartesianAxis.useChartCartesianAxis, _useChartHighlight.useChartHighlight];
@@ -34,12 +22,11 @@ function ChartProvider(props) {
   const {
     children,
     plugins = defaultPlugins,
-    pluginParams = {},
-    seriesConfig = defaultSeriesConfig
+    pluginParams = {}
   } = props;
   const {
     contextValue
-  } = (0, _useCharts.useCharts)(plugins, pluginParams, seriesConfig);
+  } = (0, _useCharts.useCharts)(plugins, pluginParams);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartContext.ChartContext.Provider, {
     value: contextValue,
     children: children

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

@@ -1,8 +1,6 @@
-import type * as React from 'react';
 import { type Store } from '@mui/x-internals/store';
 import type { ChartAnyPluginSignature, ChartInstance, ChartPublicAPI, ChartState, ConvertSignaturesIntoPlugins, MergeSignaturesProperty } from "../../internals/plugins/models/index.js";
 import type { ChartCorePluginSignatures } from "../../internals/plugins/corePlugins/index.js";
-import type { ChartSeriesConfig } from "../../internals/plugins/models/seriesConfig/index.js";
 import type { UseChartBaseProps } from "../../internals/store/useCharts.types.js";
 import type { ChartSeriesType } from "../../models/seriesType/config.js";
 export type ChartContextValue<TSignatures extends readonly ChartAnyPluginSignature[], TOptionalSignatures extends readonly ChartAnyPluginSignature[] = []> = {
@@ -18,25 +16,12 @@ export type ChartContextValue<TSignatures extends readonly ChartAnyPluginSignatu
    * The internal state of the chart.
    */
   store: Store<ChartState<TSignatures, TOptionalSignatures>>;
-  /**
-   * The ref to the <svg />.
-   */
-  svgRef: React.RefObject<SVGSVGElement | null>;
-  /**
-   * The ref to the chart root element.
-   */
-  chartRootRef: React.RefObject<HTMLDivElement | null>;
 };
-export type ChartPluginParams<TSignatures extends readonly ChartAnyPluginSignature[]> = UseChartBaseProps<TSignatures> & MergeSignaturesProperty<[...ChartCorePluginSignatures, ...TSignatures], 'params'>;
-export interface ChartProviderProps<TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = []> {
+export type ChartPluginParams<TSeriesType extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[]> = UseChartBaseProps<TSignatures> & MergeSignaturesProperty<[...ChartCorePluginSignatures<TSeriesType>, ...TSignatures], 'params'>;
+export interface ChartProviderProps<TSeriesType extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[]> {
   /**
    * Array of plugins used to add features to the chart.
    */
   plugins?: ConvertSignaturesIntoPlugins<TSignatures>;
-  pluginParams?: ChartPluginParams<TSignatures>;
-  /**
-   * The configuration helpers used to compute attributes according to the series type.
-   * @ignore Unstable props for internal usage.
-   */
-  seriesConfig?: ChartSeriesConfig<TSeries>;
+  pluginParams?: ChartPluginParams<TSeriesType, TSignatures>;
 }

package/context/index.d.ts

@@ -1,3 +1,4 @@
-export type { HighlightScope, FadeOptions, HighlightItemData, HighlightOptions } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
+export type { FadeOptions, HighlightItemData, HighlightOptions } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
+export type { HighlightScope } from "../models/seriesType/config.js";
 export * from "./useChartApiContext.js";
 export type { ChartApi } from "./ChartApi.js";

package/esm/BarChart/AnimatedBarElement.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { type SeriesId } from "../models/seriesType/common.js";
 import { type BarElementOwnerState } from "./barElementClasses.js";
-export interface BarProps extends Omit<React.SVGProps<SVGRectElement>, 'id' | 'color' | 'ref' | 'x' | 'y' | 'height' | 'width'> {
-  id: SeriesId;
+export interface BarProps extends Omit<React.SVGProps<SVGRectElement>, 'color' | 'ref' | 'x' | 'y' | 'height' | 'width'> {
+  seriesId: SeriesId;
   dataIndex: number;
   color: string;
   ownerState: BarElementOwnerState;

package/esm/BarChart/AnimatedBarElement.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["ownerState", "skipAnimation", "id", "dataIndex", "xOrigin", "yOrigin"];
+const _excluded = ["ownerState", "skipAnimation", "seriesId", "dataIndex", "xOrigin", "yOrigin"];
 import * as React from 'react';
 import { useAnimateBar } from "../hooks/animation/useAnimateBar.js";
 import { jsx as _jsx } from "react/jsx-runtime";

package/esm/BarChart/BarChart.d.ts

@@ -70,5 +70,5 @@ export interface BarChartProps extends Omit<ChartContainerProps<'bar', BarChartP
  *
  * - [BarChart API](https://mui.com/x/api/charts/bar-chart/)
  */
-declare const BarChart: React.ForwardRefExoticComponent<BarChartProps & React.RefAttributes<SVGSVGElement>>;
+declare const BarChart: React.ForwardRefExoticComponent<BarChartProps & React.RefAttributes<HTMLDivElement>>;
 export { BarChart };

package/esm/BarChart/BarChart.js

@@ -51,11 +51,12 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(inProps, ref) {
   const {
     chartDataProviderProps,
     chartsSurfaceProps
-  } = useChartContainerProps(chartContainerProps, ref);
+  } = useChartContainerProps(chartContainerProps);
   const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
   const Toolbar = props.slots?.toolbar;
   return /*#__PURE__*/_jsx(ChartDataProvider, _extends({}, chartDataProviderProps, {
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
+      ref: ref,
       children: [props.showToolbar && Toolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
           children: [/*#__PURE__*/_jsx(BarPlot, _extends({}, barPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), /*#__PURE__*/_jsx(FocusedBar, {})]
@@ -73,6 +74,11 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   apiRef: PropTypes.shape({
     current: PropTypes.object
   }),
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap: PropTypes.number,
   /**
    * The configuration of axes highlight.
    * Default is set to 'band' in the bar direction.
@@ -156,8 +162,8 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    */
   hiddenItems: PropTypes.arrayOf(PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    type: PropTypes.oneOf(['bar']).isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['bar'])
   })),
   /**
    * If `true`, the legend is not rendered.
@@ -177,7 +183,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    */
   highlightedItem: PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
+    seriesId: PropTypes.string.isRequired
   }),
   /**
    * This prop is used to help implement the accessibility logic.
@@ -207,8 +213,8 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    */
   initialHiddenItems: PropTypes.arrayOf(PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    type: PropTypes.oneOf(['bar']).isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['bar'])
   })),
   /**
    * The direction of the bar elements.
@@ -268,6 +274,14 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
    */
   onItemClick: PropTypes.func,
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   * @param {AxisItemIdentifier[]} axisItems The array of axes item identifiers.
+   */
+  onTooltipAxisChange: PropTypes.func,
   /**
    * The callback fired when the tooltip item changes.
    *
@@ -311,14 +325,22 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   theme: PropTypes.oneOf(['dark', 'light']),
   title: PropTypes.string,
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis: PropTypes.arrayOf(PropTypes.shape({
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    dataIndex: PropTypes.number.isRequired
+  })),
   /**
    * The tooltip item.
    * Used when the tooltip is controlled.
    */
   tooltipItem: PropTypes.shape({
     dataIndex: PropTypes.number.isRequired,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-    type: PropTypes.oneOf(['bar']).isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['bar'])
   }),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.

package/esm/BarChart/BarElement.d.ts

@@ -7,12 +7,12 @@ export interface BarElementSlots {
    * The component that renders the bar.
    * @default BarElementPath
    */
-  bar?: React.ElementType<BarProps>;
+  bar?: React.JSXElementConstructor<BarProps>;
 }
 export interface BarElementSlotProps {
   bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
 }
-export type BarElementProps = Omit<BarElementOwnerState, 'isFaded' | 'isHighlighted'> & Omit<React.SVGProps<SVGRectElement>, 'ref' | 'id'> & {
+export type BarElementProps = Omit<BarElementOwnerState, 'isFaded' | 'isHighlighted' | 'isFocused'> & Omit<React.SVGProps<SVGRectElement>, 'ref'> & {
   /**
    * The props used for each component slot.
    * @default {}

package/esm/BarChart/BarElement.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "dataIndex", "classes", "color", "slots", "slotProps", "style", "onClick", "skipAnimation", "layout", "x", "xOrigin", "y", "yOrigin", "width", "height", "hidden"];
+const _excluded = ["seriesId", "dataIndex", "classes", "color", "slots", "slotProps", "style", "onClick", "skipAnimation", "layout", "x", "xOrigin", "y", "yOrigin", "width", "height", "hidden"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import useSlotProps from '@mui/utils/useSlotProps';
@@ -14,7 +14,7 @@ import { useIsItemFocused } from "../hooks/useIsItemFocused.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function BarElement(props) {
   const {
-      id,
+      seriesId,
       dataIndex,
       classes: innerClasses,
       color,
@@ -35,9 +35,9 @@ function BarElement(props) {
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const itemIdentifier = React.useMemo(() => ({
     type: 'bar',
-    seriesId: id,
+    seriesId,
     dataIndex
-  }), [id, dataIndex]);
+  }), [seriesId, dataIndex]);
   const interactionProps = useInteractionItemProps(itemIdentifier);
   const {
     isFaded,
@@ -45,11 +45,11 @@ function BarElement(props) {
   } = useItemHighlighted(itemIdentifier);
   const isFocused = useIsItemFocused(React.useMemo(() => ({
     type: 'bar',
-    seriesId: id,
+    seriesId,
     dataIndex
-  }), [id, dataIndex]));
+  }), [seriesId, dataIndex]));
   const ownerState = {
-    id,
+    seriesId,
     dataIndex,
     classes: innerClasses,
     color,
@@ -64,7 +64,7 @@ function BarElement(props) {
     externalSlotProps: slotProps?.bar,
     externalForwardedProps: other,
     additionalProps: _extends({}, interactionProps, {
-      id,
+      seriesId,
       dataIndex,
       color,
       x,
@@ -94,8 +94,8 @@ process.env.NODE_ENV !== "production" ? BarElement.propTypes = {
   // ----------------------------------------------------------------------
   classes: PropTypes.object,
   dataIndex: PropTypes.number.isRequired,
-  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   layout: PropTypes.oneOf(['horizontal', 'vertical']).isRequired,
+  seriesId: PropTypes.string.isRequired,
   skipAnimation: PropTypes.bool.isRequired,
   /**
    * The props used for each component slot.

package/esm/BarChart/BarLabel/BarLabel.js

@@ -100,7 +100,7 @@ process.env.NODE_ENV !== "production" ? BarLabel.propTypes = {
    * @default 'center'
    */
   placement: PropTypes.oneOf(['center', 'outside']),
-  seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  seriesId: PropTypes.string.isRequired,
   skipAnimation: PropTypes.bool.isRequired,
   /**
    * Width of the bar this label belongs to.

package/esm/BarChart/FocusedBar.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import { useTheme } from '@mui/material/styles';
 import { useFocusedItem } from "../hooks/useFocusedItem.js";
 import { useBarSeriesContext, useXAxes, useYAxes } from "../hooks/index.js";
-import { getBarDimensions } from "../internals/getBarDimensions.js";
+import { createGetBarDimensions } from "../internals/createGetBarDimensions.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function FocusedBar(props) {
   const theme = useTheme();
@@ -33,15 +33,13 @@ export function FocusedBar(props) {
   const yAxisConfig = yAxis[yAxisId];
   const verticalLayout = barSeries.series[focusedItem.seriesId].layout === 'vertical';
   const groupIndex = barSeries.stackingGroups.findIndex(group => group.ids.includes(focusedItem.seriesId));
-  const barDimensions = getBarDimensions({
+  const barDimensions = createGetBarDimensions({
     verticalLayout,
     xAxisConfig,
     yAxisConfig,
     series,
-    dataIndex: focusedItem.dataIndex,
-    numberOfGroups: barSeries.stackingGroups.length,
-    groupIndex
-  });
+    numberOfGroups: barSeries.stackingGroups.length
+  })(focusedItem.dataIndex, groupIndex);
   if (barDimensions === null) {
     return null;
   }

package/esm/BarChart/IndividualBarPlot.js

@@ -64,7 +64,7 @@ export function IndividualBarPlot(_ref) {
           height
         }) => {
           const barElement = /*#__PURE__*/_jsx(BarElement, _extends({
-            id: seriesId,
+            seriesId: seriesId,
             dataIndex: dataIndex,
             color: color,
             skipAnimation: skipAnimation ?? false,

package/esm/BarChart/barClasses.d.ts

@@ -9,4 +9,4 @@ export interface BarClasses {
 export type BarClassKey = keyof BarClasses;
 export declare function getBarUtilityClass(slot: string): string;
 export declare const barClasses: BarClasses;
-export declare const useUtilityClasses: (classes?: Partial<BarClasses>) => Record<"series" | "root" | "seriesLabels", string>;
+export declare const useUtilityClasses: (classes?: Partial<BarClasses>) => Record<"root" | "series" | "seriesLabels", string>;

package/esm/BarChart/barClasses.js

@@ -2,9 +2,9 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getBarUtilityClass(slot) {
-  return generateUtilityClass('MuiBar', slot);
+  return generateUtilityClass('MuiBarChart', slot);
 }
-export const barClasses = generateUtilityClasses('MuiBar', ['root', 'series', 'seriesLabels']);
+export const barClasses = generateUtilityClasses('MuiBarChart', ['root', 'series', 'seriesLabels']);
 export const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],

package/esm/BarChart/barElementClasses.d.ts

@@ -14,11 +14,12 @@ export interface BarElementClasses {
 }
 export type BarElementClassKey = keyof BarElementClasses;
 export interface BarElementOwnerState {
-  id: SeriesId;
+  seriesId: SeriesId;
   dataIndex: number;
   color: string;
   isFaded: boolean;
   isHighlighted: boolean;
+  isFocused: boolean;
   classes?: Partial<BarElementClasses>;
 }
 export declare function getBarElementUtilityClass(slot: string): string;

package/esm/BarChart/barElementClasses.js

@@ -8,12 +8,12 @@ export const barElementClasses = generateUtilityClasses('MuiBarElement', ['root'
 export const useUtilityClasses = ownerState => {
   const {
     classes,
-    id,
+    seriesId,
     isHighlighted,
     isFaded
   } = ownerState;
   const slots = {
-    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded']
+    root: ['root', `series-${seriesId}`, isHighlighted && 'highlighted', isFaded && 'faded']
   };
   return composeClasses(slots, getBarElementUtilityClass, classes);
 };

package/esm/BarChart/seriesConfig/bar/extremums.d.ts

@@ -1,3 +1,3 @@
-import { type CartesianExtremumGetter } from "../../../internals/plugins/models/seriesConfig/index.js";
+import type { CartesianExtremumGetter } from "../../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 export declare const getExtremumX: CartesianExtremumGetter<'bar'>;
 export declare const getExtremumY: CartesianExtremumGetter<'bar'>;

package/esm/BarChart/seriesConfig/bar/getColor.d.ts

@@ -1,3 +1,3 @@
-import { type ColorProcessor } from "../../../internals/plugins/models/index.js";
+import type { ColorProcessor } from "../../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const getColor: ColorProcessor<'bar'>;
 export default getColor;

package/esm/BarChart/seriesConfig/bar/getSeriesWithDefaultValues.d.ts

@@ -1,6 +1,6 @@
 import { type AllSeriesType } from "../../../models/seriesType/index.js";
 export declare function getSeriesWithDefaultValues(seriesData: AllSeriesType<'bar'>, seriesIndex: number, colors: readonly string[]): {
-  id: import("../../../index.js").SeriesId;
+  id: string;
   color: string;
   type: "bar";
   data?: ReadonlyArray<import("../../../index.js").BarValueType | null>;
@@ -12,7 +12,7 @@ export declare function getSeriesWithDefaultValues(seriesData: AllSeriesType<'ba
   barLabel?: "value" | ((item: import("@mui/x-charts/BarChart").BarItem, context: import("@mui/x-charts/BarChart").BarLabelContext) => string | null | undefined);
   barLabelPlacement?: "center" | "outside";
   valueFormatter?: import("../../../internals/index.js").SeriesValueFormatter<number | null> | undefined;
-  highlightScope?: import("../../../index.js").HighlightScope;
+  highlightScope?: import("../../../internals/index.js").CommonHighlightScope | undefined;
   labelMarkType?: import("../../../internals/index.js").ChartsLabelMarkType;
   colorGetter?: ((data: import("../../../internals/index.js").ColorCallbackValue<number | null>) => string) | undefined;
   xAxisId?: import("../../../internals/index.js").AxisId;

package/esm/BarChart/seriesConfig/bar/keyboardFocusHandler.d.ts

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

package/esm/BarChart/seriesConfig/bar/keyboardFocusHandler.js

@@ -1,17 +1,4 @@
-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;
-  }
-};
+import { createCommonKeyboardFocusHandler } from "../../../internals/createCommonKeyboardFocusHandler.js";
+import { composableCartesianSeriesTypes } from "../../../internals/commonNextFocusItem.js";
+const keyboardFocusHandler = createCommonKeyboardFocusHandler(composableCartesianSeriesTypes);
 export default keyboardFocusHandler;

package/esm/BarChart/seriesConfig/bar/legend.d.ts

@@ -1,3 +1,3 @@
-import { type LegendGetter } from "../../../internals/plugins/models/index.js";
+import type { LegendGetter } from "../../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const legendGetter: LegendGetter<'bar'>;
 export default legendGetter;

package/esm/BarChart/seriesConfig/bar/legend.js

@@ -12,7 +12,6 @@ const legendGetter = params => {
     acc.push({
       type: 'bar',
       markType: series[seriesId].labelMarkType,
-      id: seriesId,
       seriesId,
       color: series[seriesId].color,
       label: formattedLabel

package/esm/BarChart/seriesConfig/bar/seriesProcessor.d.ts

@@ -1,3 +1,3 @@
-import { type SeriesProcessor } from "../../../internals/plugins/models/index.js";
+import type { SeriesProcessor } from "../../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const seriesProcessor: SeriesProcessor<'bar'>;
 export default seriesProcessor;