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

package/BarChart/BarLabel/index.mjs

@@ -1,2 +1 @@
-export { BarLabel } from "./BarLabel.mjs";
-export { barLabelClasses, getBarLabelUtilityClass } from "./barLabelClasses.mjs";
+export { BarLabel } from "./BarLabel.mjs";

package/BarChart/BarPlot.d.mts

@@ -2,11 +2,14 @@ import * as React from 'react';
 import { type BarElementSlotProps, type BarElementSlots } from "./BarElement.mjs";
 import { type BarItemIdentifier } from "../models/index.mjs";
 import { type BarLabelSlotProps, type BarLabelSlots } from "./BarLabel/BarLabelItem.mjs";
-import type { BarItem, BarLabelContext } from "./BarLabel/index.mjs";
 import { type RendererType } from "../ScatterChart/index.mjs";
 export interface BarPlotSlots extends BarElementSlots, BarLabelSlots {}
 export interface BarPlotSlotProps extends BarElementSlotProps, BarLabelSlotProps {}
 export interface BarPlotProps {
+  /**
+   * A CSS class name applied to the root element.
+   */
+  className?: string;
   /**
    * If `true`, animations are skipped.
    * @default undefined
@@ -14,23 +17,14 @@ export interface BarPlotProps {
   skipAnimation?: boolean;
   /**
    * Callback fired when a bar item is clicked.
-   * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.
+   * @param {MouseEvent} event The event source of the callback.
    * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
    */
-  onItemClick?(event: React.MouseEvent<SVGElement, MouseEvent>, barItemIdentifier: BarItemIdentifier): void;
+  onItemClick?(event: MouseEvent, barItemIdentifier: BarItemIdentifier): void;
   /**
    * Defines the border radius of the bar element.
    */
   borderRadius?: number;
-  /**
-   * @deprecated Use `barLabel` in the chart series instead.
-   * If provided, the function will be used to format the label of the bar.
-   * It can be set to 'value' to display the current value.
-   * @param {BarItem} item The item to format.
-   * @param {BarLabelContext} context data about the bar.
-   * @returns {string} The formatted label.
-   */
-  barLabel?: 'value' | ((item: BarItem, context: BarLabelContext) => string | null | undefined);
   /**
    * The type of renderer to use for the bar plot.
    * - `svg-single`: Renders every bar in a `<rect />` element.

package/BarChart/BarPlot.d.ts

@@ -2,11 +2,14 @@ import * as React from 'react';
 import { type BarElementSlotProps, type BarElementSlots } from "./BarElement.js";
 import { type BarItemIdentifier } from "../models/index.js";
 import { type BarLabelSlotProps, type BarLabelSlots } from "./BarLabel/BarLabelItem.js";
-import type { BarItem, BarLabelContext } from "./BarLabel/index.js";
 import { type RendererType } from "../ScatterChart/index.js";
 export interface BarPlotSlots extends BarElementSlots, BarLabelSlots {}
 export interface BarPlotSlotProps extends BarElementSlotProps, BarLabelSlotProps {}
 export interface BarPlotProps {
+  /**
+   * A CSS class name applied to the root element.
+   */
+  className?: string;
   /**
    * If `true`, animations are skipped.
    * @default undefined
@@ -14,23 +17,14 @@ export interface BarPlotProps {
   skipAnimation?: boolean;
   /**
    * Callback fired when a bar item is clicked.
-   * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.
+   * @param {MouseEvent} event The event source of the callback.
    * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
    */
-  onItemClick?(event: React.MouseEvent<SVGElement, MouseEvent>, barItemIdentifier: BarItemIdentifier): void;
+  onItemClick?(event: MouseEvent, barItemIdentifier: BarItemIdentifier): void;
   /**
    * Defines the border radius of the bar element.
    */
   borderRadius?: number;
-  /**
-   * @deprecated Use `barLabel` in the chart series instead.
-   * If provided, the function will be used to format the label of the bar.
-   * It can be set to 'value' to display the current value.
-   * @param {BarItem} item The item to format.
-   * @param {BarLabelContext} context data about the bar.
-   * @returns {string} The formatted label.
-   */
-  barLabel?: 'value' | ((item: BarItem, context: BarLabelContext) => string | null | undefined);
   /**
    * The type of renderer to use for the bar plot.
    * - `svg-single`: Renders every bar in a `<rect />` element.

package/BarChart/BarPlot.js

@@ -11,6 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _styles = require("@mui/material/styles");
 var _hooks = require("../hooks");
 var _BarLabelPlot = require("./BarLabel/BarLabelPlot");
@@ -22,7 +23,7 @@ var _animation = require("../internals/animation/animation");
 var _IndividualBarPlot = require("./IndividualBarPlot");
 var _BatchBarPlot = require("./BatchBarPlot");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["skipAnimation", "onItemClick", "borderRadius", "barLabel", "renderer"];
+const _excluded = ["className", "skipAnimation", "onItemClick", "borderRadius", "renderer"];
 const BarPlotRoot = (0, _styles.styled)('g', {
   name: 'MuiBarPlot',
   slot: 'Root'
@@ -47,10 +48,10 @@ const BarPlotRoot = (0, _styles.styled)('g', {
  */
 function BarPlot(props) {
   const {
+      className,
       skipAnimation: inSkipAnimation,
       onItemClick,
       borderRadius,
-      barLabel,
       renderer
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
@@ -70,23 +71,19 @@ function BarPlot(props) {
   const classes = (0, _barClasses.useUtilityClasses)();
   const BarElementPlot = renderer === 'svg-batch' ? _BatchBarPlot.BatchBarPlot : _IndividualBarPlot.IndividualBarPlot;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(BarPlotRoot, {
-    className: classes.root,
+    className: (0, _clsx.default)(classes.root, className),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(BarElementPlot, (0, _extends2.default)({
       completedData: completedData,
       masksData: masksData
       /* The batch renderer doesn't animate bars after the initial mount. Providing skipAnimation was causing an issue
        * where bars would animate again after a zoom interaction because skipAnimation would change from true to false. */,
       skipAnimation: renderer === 'svg-batch' ? batchSkipAnimation : skipAnimation,
-      onItemClick:
-      /* `onItemClick` accepts a `MouseEvent` when the renderer is "svg-batch" and a `React.MouseEvent` otherwise,
-       * so we need this cast to prevent TypeScript from complaining. */
-      onItemClick,
+      onItemClick: onItemClick,
       borderRadius: borderRadius
     }, other)), completedData.map(processedSeries => /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarLabelPlot.BarLabelPlot, (0, _extends2.default)({
       className: classes.seriesLabels,
       processedSeries: processedSeries,
-      skipAnimation: skipAnimation,
-      barLabel: barLabel
+      skipAnimation: skipAnimation
     }, other), processedSeries.seriesId))]
   });
 }
@@ -95,22 +92,17 @@ process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
-  /**
-   * @deprecated Use `barLabel` in the chart series instead.
-   * If provided, the function will be used to format the label of the bar.
-   * It can be set to 'value' to display the current value.
-   * @param {BarItem} item The item to format.
-   * @param {BarLabelContext} context data about the bar.
-   * @returns {string} The formatted label.
-   */
-  barLabel: _propTypes.default.oneOfType([_propTypes.default.oneOf(['value']), _propTypes.default.func]),
   /**
    * Defines the border radius of the bar element.
    */
   borderRadius: _propTypes.default.number,
+  /**
+   * A CSS class name applied to the root element.
+   */
+  className: _propTypes.default.string,
   /**
    * Callback fired when a bar item is clicked.
-   * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.
+   * @param {MouseEvent} event The event source of the callback.
    * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
    */
   onItemClick: _propTypes.default.func,

package/BarChart/BarPlot.mjs

@@ -2,9 +2,10 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["skipAnimation", "onItemClick", "borderRadius", "barLabel", "renderer"];
+const _excluded = ["className", "skipAnimation", "onItemClick", "borderRadius", "renderer"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import { styled } from '@mui/material/styles';
 import { useDrawingArea, useXAxes, useYAxes } from "../hooks/index.mjs";
 import { BarLabelPlot } from "./BarLabel/BarLabelPlot.mjs";
@@ -40,10 +41,10 @@ const BarPlotRoot = styled('g', {
  */
 function BarPlot(props) {
   const {
+      className,
       skipAnimation: inSkipAnimation,
       onItemClick,
       borderRadius,
-      barLabel,
       renderer
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
@@ -63,23 +64,19 @@ function BarPlot(props) {
   const classes = useUtilityClasses();
   const BarElementPlot = renderer === 'svg-batch' ? BatchBarPlot : IndividualBarPlot;
   return /*#__PURE__*/_jsxs(BarPlotRoot, {
-    className: classes.root,
+    className: clsx(classes.root, className),
     children: [/*#__PURE__*/_jsx(BarElementPlot, _extends({
       completedData: completedData,
       masksData: masksData
       /* The batch renderer doesn't animate bars after the initial mount. Providing skipAnimation was causing an issue
        * where bars would animate again after a zoom interaction because skipAnimation would change from true to false. */,
       skipAnimation: renderer === 'svg-batch' ? batchSkipAnimation : skipAnimation,
-      onItemClick:
-      /* `onItemClick` accepts a `MouseEvent` when the renderer is "svg-batch" and a `React.MouseEvent` otherwise,
-       * so we need this cast to prevent TypeScript from complaining. */
-      onItemClick,
+      onItemClick: onItemClick,
       borderRadius: borderRadius
     }, other)), completedData.map(processedSeries => /*#__PURE__*/_jsx(BarLabelPlot, _extends({
       className: classes.seriesLabels,
       processedSeries: processedSeries,
-      skipAnimation: skipAnimation,
-      barLabel: barLabel
+      skipAnimation: skipAnimation
     }, other), processedSeries.seriesId))]
   });
 }
@@ -88,22 +85,17 @@ process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
-  /**
-   * @deprecated Use `barLabel` in the chart series instead.
-   * If provided, the function will be used to format the label of the bar.
-   * It can be set to 'value' to display the current value.
-   * @param {BarItem} item The item to format.
-   * @param {BarLabelContext} context data about the bar.
-   * @returns {string} The formatted label.
-   */
-  barLabel: PropTypes.oneOfType([PropTypes.oneOf(['value']), PropTypes.func]),
   /**
    * Defines the border radius of the bar element.
    */
   borderRadius: PropTypes.number,
+  /**
+   * A CSS class name applied to the root element.
+   */
+  className: PropTypes.string,
   /**
    * Callback fired when a bar item is clicked.
-   * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.
+   * @param {MouseEvent} event The event source of the callback.
    * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
    */
   onItemClick: PropTypes.func,

package/BarChart/BatchBarPlot/BatchBarPlot.js

@@ -7,15 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.BatchBarPlot = BatchBarPlot;
 var React = _interopRequireWildcard(require("react"));
-var _hooks = require("../../hooks");
 var _barClasses = require("../barClasses");
-var _useChartContext = require("../../context/ChartProvider/useChartContext");
+var _useChartsContext = require("../../context/ChartsProvider/useChartsContext");
 var _useChartHighlight = require("../../internals/plugins/featurePlugins/useChartHighlight");
 var _useRegisterItemClickHandlers = require("../useRegisterItemClickHandlers");
 var _useCreateBarPaths = require("./useCreateBarPaths");
 var _BarGroup = require("./BarGroup");
-var _useRegisterPointerInteractions = require("../../internals/plugins/featurePlugins/shared/useRegisterPointerInteractions");
-var _useChartCartesianAxisPosition = require("../../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisPosition.selectors");
 var _jsxRuntime = require("react/jsx-runtime");
 function BatchBarPlot({
   completedData,
@@ -23,30 +20,6 @@ function BatchBarPlot({
   onItemClick,
   skipAnimation = false
 }) {
-  const prevCursorRef = React.useRef(null);
-  const chartsLayerContainerRef = (0, _hooks.useChartsLayerContainerRef)();
-  const onItemEnter = onItemClick ? () => {
-    const svg = chartsLayerContainerRef.current;
-    if (!svg) {
-      return;
-    }
-    if (prevCursorRef.current == null) {
-      prevCursorRef.current = svg.style.cursor;
-      // eslint-disable-next-line react-compiler/react-compiler
-      svg.style.cursor = 'pointer';
-    }
-  } : undefined;
-  const onItemLeave = onItemClick ? () => {
-    const svg = chartsLayerContainerRef.current;
-    if (!svg) {
-      return;
-    }
-    if (prevCursorRef.current != null) {
-      svg.style.cursor = prevCursorRef.current;
-      prevCursorRef.current = null;
-    }
-  } : undefined;
-  (0, _useRegisterPointerInteractions.useRegisterPointerInteractions)(_useChartCartesianAxisPosition.selectorBarItemAtPosition, onItemEnter, onItemLeave);
   (0, _useRegisterItemClickHandlers.useRegisterItemClickHandlers)(onItemClick);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
     children: completedData.map(series => /*#__PURE__*/(0, _jsxRuntime.jsx)(SeriesBatchPlot, {
@@ -66,7 +39,7 @@ function SeriesBatchPlot({
   const classes = (0, _barClasses.useUtilityClasses)();
   const {
     store
-  } = (0, _useChartContext.useChartContext)();
+  } = (0, _useChartsContext.useChartsContext)();
   const isSeriesHighlighted = store.use(_useChartHighlight.selectorChartIsSeriesHighlighted, series.seriesId);
   const isSeriesFaded = store.use(_useChartHighlight.selectorChartIsSeriesFaded, series.seriesId);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
@@ -115,7 +88,7 @@ function FadedHighlightedBars({
 }) {
   const {
     store
-  } = (0, _useChartContext.useChartContext)();
+  } = (0, _useChartsContext.useChartsContext)();
   const seriesHighlightedDataIndex = store.use(_useChartHighlight.selectorChartSeriesHighlightedItem, processedSeries.seriesId);
   const seriesUnfadedDataIndex = store.use(_useChartHighlight.selectorChartSeriesUnfadedItem, processedSeries.seriesId);
   const seriesHighlightedItem = seriesHighlightedDataIndex != null ? processedSeries.data.find(v => v.dataIndex === seriesHighlightedDataIndex) || null : null;

package/BarChart/BatchBarPlot/BatchBarPlot.mjs

@@ -1,15 +1,12 @@
 'use client';
 
 import * as React from 'react';
-import { useChartsLayerContainerRef } from "../../hooks/index.mjs";
 import { useUtilityClasses } from "../barClasses.mjs";
-import { useChartContext } from "../../context/ChartProvider/useChartContext.mjs";
+import { useChartsContext } from "../../context/ChartsProvider/useChartsContext.mjs";
 import { selectorChartIsSeriesFaded, selectorChartIsSeriesHighlighted, selectorChartSeriesHighlightedItem, selectorChartSeriesUnfadedItem } from "../../internals/plugins/featurePlugins/useChartHighlight/index.mjs";
 import { useRegisterItemClickHandlers } from "../useRegisterItemClickHandlers.mjs";
 import { createPath, useCreateBarPaths } from "./useCreateBarPaths.mjs";
 import { BarGroup } from "./BarGroup.mjs";
-import { useRegisterPointerInteractions } from "../../internals/plugins/featurePlugins/shared/useRegisterPointerInteractions.mjs";
-import { selectorBarItemAtPosition } from "../../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisPosition.selectors.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function BatchBarPlot({
   completedData,
@@ -17,30 +14,6 @@ export function BatchBarPlot({
   onItemClick,
   skipAnimation = false
 }) {
-  const prevCursorRef = React.useRef(null);
-  const chartsLayerContainerRef = useChartsLayerContainerRef();
-  const onItemEnter = onItemClick ? () => {
-    const svg = chartsLayerContainerRef.current;
-    if (!svg) {
-      return;
-    }
-    if (prevCursorRef.current == null) {
-      prevCursorRef.current = svg.style.cursor;
-      // eslint-disable-next-line react-compiler/react-compiler
-      svg.style.cursor = 'pointer';
-    }
-  } : undefined;
-  const onItemLeave = onItemClick ? () => {
-    const svg = chartsLayerContainerRef.current;
-    if (!svg) {
-      return;
-    }
-    if (prevCursorRef.current != null) {
-      svg.style.cursor = prevCursorRef.current;
-      prevCursorRef.current = null;
-    }
-  } : undefined;
-  useRegisterPointerInteractions(selectorBarItemAtPosition, onItemEnter, onItemLeave);
   useRegisterItemClickHandlers(onItemClick);
   return /*#__PURE__*/_jsx(React.Fragment, {
     children: completedData.map(series => /*#__PURE__*/_jsx(SeriesBatchPlot, {
@@ -60,7 +33,7 @@ function SeriesBatchPlot({
   const classes = useUtilityClasses();
   const {
     store
-  } = useChartContext();
+  } = useChartsContext();
   const isSeriesHighlighted = store.use(selectorChartIsSeriesHighlighted, series.seriesId);
   const isSeriesFaded = store.use(selectorChartIsSeriesFaded, series.seriesId);
   return /*#__PURE__*/_jsxs(React.Fragment, {
@@ -109,7 +82,7 @@ function FadedHighlightedBars({
 }) {
   const {
     store
-  } = useChartContext();
+  } = useChartsContext();
   const seriesHighlightedDataIndex = store.use(selectorChartSeriesHighlightedItem, processedSeries.seriesId);
   const seriesUnfadedDataIndex = store.use(selectorChartSeriesUnfadedItem, processedSeries.seriesId);
   const seriesHighlightedItem = seriesHighlightedDataIndex != null ? processedSeries.data.find(v => v.dataIndex === seriesHighlightedDataIndex) || null : null;

package/BarChart/IndividualBarPlot.d.mts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { type BarPlotSlotProps, type BarPlotSlots } from "./BarPlot.mjs";
 import { type BarItemIdentifier } from "../models/index.mjs";
 import { type MaskData, type ProcessedBarSeriesData } from "./types.mjs";
@@ -7,7 +6,7 @@ export interface IndividualBarPlotProps {
   masksData: MaskData[];
   borderRadius?: number;
   skipAnimation?: boolean;
-  onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, barItemIdentifier: BarItemIdentifier) => void;
+  onItemClick?: (event: MouseEvent, barItemIdentifier: BarItemIdentifier) => void;
   slotProps?: BarPlotSlotProps;
   slots?: BarPlotSlots;
 }

package/BarChart/IndividualBarPlot.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { type BarPlotSlotProps, type BarPlotSlots } from "./BarPlot.js";
 import { type BarItemIdentifier } from "../models/index.js";
 import { type MaskData, type ProcessedBarSeriesData } from "./types.js";
@@ -7,7 +6,7 @@ export interface IndividualBarPlotProps {
   masksData: MaskData[];
   borderRadius?: number;
   skipAnimation?: boolean;
-  onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, barItemIdentifier: BarItemIdentifier) => void;
+  onItemClick?: (event: MouseEvent, barItemIdentifier: BarItemIdentifier) => void;
   slotProps?: BarPlotSlotProps;
   slots?: BarPlotSlots;
 }

package/BarChart/IndividualBarPlot.js

@@ -12,6 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _BarElement = require("./BarElement");
 var _barClasses = require("./barClasses");
 var _BarClipPath = require("./BarClipPath");
+var _useRegisterItemClickHandlers = require("./useRegisterItemClickHandlers");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["completedData", "masksData", "borderRadius", "onItemClick", "skipAnimation"];
 function IndividualBarPlot(_ref) {
@@ -23,6 +24,7 @@ function IndividualBarPlot(_ref) {
       skipAnimation
     } = _ref,
     other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  (0, _useRegisterItemClickHandlers.useRegisterItemClickHandlers)(onItemClick);
   const classes = (0, _barClasses.useUtilityClasses)();
   const withoutBorderRadius = !borderRadius || borderRadius <= 0;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
@@ -82,16 +84,9 @@ function IndividualBarPlot(_ref) {
             y: y,
             yOrigin: yOrigin,
             width: width,
-            height: height
-          }, other, {
-            onClick: onItemClick && (event => {
-              onItemClick(event, {
-                type: 'bar',
-                seriesId,
-                dataIndex
-              });
-            })
-          }), dataIndex);
+            height: height,
+            cursor: onItemClick ? 'pointer' : undefined
+          }, other), dataIndex);
           if (withoutBorderRadius) {
             return barElement;
           }

package/BarChart/IndividualBarPlot.mjs

@@ -5,6 +5,7 @@ import * as React from 'react';
 import { BarElement } from "./BarElement.mjs";
 import { useUtilityClasses } from "./barClasses.mjs";
 import { BarClipPath } from "./BarClipPath.mjs";
+import { useRegisterItemClickHandlers } from "./useRegisterItemClickHandlers.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function IndividualBarPlot(_ref) {
   let {
@@ -15,6 +16,7 @@ export function IndividualBarPlot(_ref) {
       skipAnimation
     } = _ref,
     other = _objectWithoutPropertiesLoose(_ref, _excluded);
+  useRegisterItemClickHandlers(onItemClick);
   const classes = useUtilityClasses();
   const withoutBorderRadius = !borderRadius || borderRadius <= 0;
   return /*#__PURE__*/_jsxs(React.Fragment, {
@@ -74,16 +76,9 @@ export function IndividualBarPlot(_ref) {
             y: y,
             yOrigin: yOrigin,
             width: width,
-            height: height
-          }, other, {
-            onClick: onItemClick && (event => {
-              onItemClick(event, {
-                type: 'bar',
-                seriesId,
-                dataIndex
-              });
-            })
-          }), dataIndex);
+            height: height,
+            cursor: onItemClick ? 'pointer' : undefined
+          }, other), dataIndex);
           if (withoutBorderRadius) {
             return barElement;
           }

package/BarChart/index.d.mts

@@ -3,7 +3,6 @@ export * from "./BarPlot.mjs";
 export * from "./BarElement.mjs";
 export * from "./BarLabel/index.mjs";
 export * from "./FocusedBar.mjs";
-export * from "./barElementClasses.mjs";
 export * from "./BarChart.plugins.mjs";
 export { type BarProps } from "./AnimatedBarElement.mjs";
 export { barClasses } from "./barClasses.mjs";

package/BarChart/index.d.ts

@@ -3,7 +3,6 @@ export * from "./BarPlot.js";
 export * from "./BarElement.js";
 export * from "./BarLabel/index.js";
 export * from "./FocusedBar.js";
-export * from "./barElementClasses.js";
 export * from "./BarChart.plugins.js";
 export { type BarProps } from "./AnimatedBarElement.js";
 export { barClasses } from "./barClasses.js";

package/BarChart/index.js

@@ -72,18 +72,6 @@ Object.keys(_FocusedBar).forEach(function (key) {
     }
   });
 });
-var _barElementClasses = require("./barElementClasses");
-Object.keys(_barElementClasses).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _barElementClasses[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _barElementClasses[key];
-    }
-  });
-});
 var _BarChart2 = require("./BarChart.plugins");
 Object.keys(_BarChart2).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/BarChart/index.mjs

@@ -3,6 +3,5 @@ export * from "./BarPlot.mjs";
 export * from "./BarElement.mjs";
 export * from "./BarLabel/index.mjs";
 export * from "./FocusedBar.mjs";
-export * from "./barElementClasses.mjs";
 export * from "./BarChart.plugins.mjs";
 export { barClasses } from "./barClasses.mjs";

package/BarChart/seriesConfig/bar/descriptionGetter.d.mts

@@ -0,0 +1,3 @@
+import type { DescriptionGetter } from "../../../internals/plugins/corePlugins/useChartSeriesConfig/index.mjs";
+declare const descriptionGetter: DescriptionGetter<'bar'>;
+export default descriptionGetter;

package/BarChart/seriesConfig/bar/descriptionGetter.d.ts

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

package/BarChart/seriesConfig/bar/descriptionGetter.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _getLabel = require("../../../internals/getLabel");
+const descriptionGetter = params => {
+  const {
+    identifier,
+    series,
+    xAxis,
+    yAxis,
+    localeText
+  } = params;
+  const label = (0, _getLabel.getLabel)(series.label, 'tooltip');
+  const value = series.data[identifier.dataIndex] ?? null;
+  const isHorizontal = series.layout === 'horizontal';
+  const categoryAxis = isHorizontal ? yAxis : xAxis;
+  const categoryValue = categoryAxis.data?.[identifier.dataIndex] ?? null;
+  const formattedValue = series.valueFormatter(value, {
+    dataIndex: identifier.dataIndex
+  });
+  const formattedCategory = categoryAxis.valueFormatter?.(categoryValue, {
+    location: 'tooltip',
+    scale: categoryAxis.scale
+  });
+  return localeText.barDescription({
+    value,
+    formattedValue: formattedValue ?? '',
+    categoryValue,
+    formattedCategoryValue: formattedCategory ?? '',
+    seriesLabel: label
+  });
+};
+var _default = exports.default = descriptionGetter;

package/BarChart/seriesConfig/bar/descriptionGetter.mjs

@@ -0,0 +1,30 @@
+import { getLabel } from "../../../internals/getLabel.mjs";
+const descriptionGetter = params => {
+  const {
+    identifier,
+    series,
+    xAxis,
+    yAxis,
+    localeText
+  } = params;
+  const label = getLabel(series.label, 'tooltip');
+  const value = series.data[identifier.dataIndex] ?? null;
+  const isHorizontal = series.layout === 'horizontal';
+  const categoryAxis = isHorizontal ? yAxis : xAxis;
+  const categoryValue = categoryAxis.data?.[identifier.dataIndex] ?? null;
+  const formattedValue = series.valueFormatter(value, {
+    dataIndex: identifier.dataIndex
+  });
+  const formattedCategory = categoryAxis.valueFormatter?.(categoryValue, {
+    location: 'tooltip',
+    scale: categoryAxis.scale
+  });
+  return localeText.barDescription({
+    value,
+    formattedValue: formattedValue ?? '',
+    categoryValue,
+    formattedCategoryValue: formattedCategory ?? '',
+    seriesLabel: label
+  });
+};
+export default descriptionGetter;

package/BarChart/seriesConfig/bar/legend.js

@@ -4,25 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _getLabel = require("../../../internals/getLabel");
-const legendGetter = params => {
-  const {
-    seriesOrder,
-    series
-  } = params;
-  return seriesOrder.reduce((acc, seriesId) => {
-    const formattedLabel = (0, _getLabel.getLabel)(series[seriesId].label, 'legend');
-    if (formattedLabel === undefined) {
-      return acc;
-    }
-    acc.push({
-      type: 'bar',
-      markType: series[seriesId].labelMarkType,
-      seriesId,
-      color: series[seriesId].color,
-      label: formattedLabel
-    });
-    return acc;
-  }, []);
-};
+var _legendUtils = require("../../../internals/legendUtils");
+const legendGetter = series => (0, _legendUtils.getSeriesLegendItems)('bar', series);
 var _default = exports.default = legendGetter;