@mui/x-charts 8.20.0 → 8.22.0

package/BarChart/AnimatedBarElement.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { SeriesId } from "../models/seriesType/common.js";
-import { BarElementOwnerState } from "./barElementClasses.js";
+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;
   dataIndex: number;

package/BarChart/BarChart.d.ts

@@ -1,18 +1,18 @@
 import * as React from 'react';
-import { MakeOptional } from '@mui/x-internals/types';
-import { ChartsSlotProps, ChartsSlots } from "../internals/material/index.js";
-import { ChartsToolbarSlotProps, ChartsToolbarSlots } from "../Toolbar/index.js";
-import { BarPlotProps, BarPlotSlotProps, BarPlotSlots } from "./BarPlot.js";
-import { ChartContainerProps } from "../ChartContainer/index.js";
-import { ChartsAxisProps } from "../ChartsAxis/index.js";
-import { BarSeriesType } from "../models/seriesType/bar.js";
-import { ChartsTooltipSlots, ChartsTooltipSlotProps } from "../ChartsTooltip/ChartTooltip.types.js";
-import { ChartsLegendSlots, ChartsLegendSlotProps } from "../ChartsLegend/index.js";
-import { ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.js";
-import { ChartsAxisSlots, ChartsAxisSlotProps } from "../models/axis.js";
-import { ChartsGridProps } from "../ChartsGrid/index.js";
-import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from "../ChartsOverlay/ChartsOverlay.js";
-import { BarChartPluginSignatures } from "./BarChart.plugins.js";
+import { type MakeOptional } from '@mui/x-internals/types';
+import { type ChartsSlotProps, type ChartsSlots } from "../internals/material/index.js";
+import { type ChartsToolbarSlotProps, type ChartsToolbarSlots } from "../Toolbar/index.js";
+import { type BarPlotProps, type BarPlotSlotProps, type BarPlotSlots } from "./BarPlot.js";
+import { type ChartContainerProps } from "../ChartContainer/index.js";
+import { type ChartsAxisProps } from "../ChartsAxis/index.js";
+import { type BarSeriesType } from "../models/seriesType/bar.js";
+import { type ChartsTooltipSlots, type ChartsTooltipSlotProps } from "../ChartsTooltip/ChartTooltip.types.js";
+import { type ChartsLegendSlots, type ChartsLegendSlotProps } from "../ChartsLegend/index.js";
+import { type ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.js";
+import { type ChartsAxisSlots, type ChartsAxisSlotProps } from "../models/axis.js";
+import { type ChartsGridProps } from "../ChartsGrid/index.js";
+import { type ChartsOverlayProps, type ChartsOverlaySlotProps, type ChartsOverlaySlots } from "../ChartsOverlay/ChartsOverlay.js";
+import type { BarChartPluginSignatures } from "./BarChart.plugins.js";
 export interface BarChartSlots extends ChartsAxisSlots, BarPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
 export interface BarChartSlotProps extends ChartsAxisSlotProps, BarPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
 export type BarSeries = MakeOptional<BarSeriesType, 'type'>;
@@ -21,7 +21,7 @@ export interface BarChartProps extends Omit<ChartContainerProps<'bar', BarChartP
    * The series to display in the bar chart.
    * An array of [[BarSeries]] objects.
    */
-  series: Readonly<BarSeries[]>;
+  series: ReadonlyArray<BarSeries>;
   /**
    * Option to display a cartesian grid in the background.
    */

package/BarChart/BarChart.js

@@ -24,6 +24,7 @@ var _ChartDataProvider = require("../ChartDataProvider");
 var _ChartsSurface = require("../ChartsSurface");
 var _useChartContainerProps = require("../ChartContainer/useChartContainerProps");
 var _ChartsWrapper = require("../ChartsWrapper");
+var _FocusedBar = require("./FocusedBar");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Demos:
@@ -64,7 +65,7 @@ const BarChart = exports.BarChart = /*#__PURE__*/React.forwardRef(function BarCh
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWrapper.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
       children: [props.showToolbar && Toolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_BarPlot.BarPlot, (0, _extends2.default)({}, barPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps))]
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_BarPlot.BarPlot, (0, _extends2.default)({}, barPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusedBar.FocusedBar, {})]
         })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
       })), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props.slotProps?.tooltip))]
     }))
@@ -292,6 +293,11 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
     offset: _propTypes.default.number,
+    ordinalTimeTicks: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['biweekly', 'days', 'hours', 'months', 'quarterly', 'weeks', 'years']), _propTypes.default.shape({
+      format: _propTypes.default.func.isRequired,
+      getTickNumber: _propTypes.default.func.isRequired,
+      isTick: _propTypes.default.func.isRequired
+    })]).isRequired),
     position: _propTypes.default.oneOf(['bottom', 'none', 'top']),
     reverse: _propTypes.default.bool,
     scaleType: _propTypes.default.oneOf(['band']),
@@ -308,6 +314,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
@@ -344,6 +351,11 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
     offset: _propTypes.default.number,
+    ordinalTimeTicks: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['biweekly', 'days', 'hours', 'months', 'quarterly', 'weeks', 'years']), _propTypes.default.shape({
+      format: _propTypes.default.func.isRequired,
+      getTickNumber: _propTypes.default.func.isRequired,
+      isTick: _propTypes.default.func.isRequired
+    })]).isRequired),
     position: _propTypes.default.oneOf(['bottom', 'none', 'top']),
     reverse: _propTypes.default.bool,
     scaleType: _propTypes.default.oneOf(['point']),
@@ -360,6 +372,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
@@ -404,6 +417,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
@@ -449,6 +463,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
@@ -493,6 +508,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
@@ -537,6 +553,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
@@ -585,6 +602,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
@@ -633,6 +651,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
@@ -677,6 +696,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func
   })]).isRequired),
   /**
@@ -720,6 +740,11 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
     offset: _propTypes.default.number,
+    ordinalTimeTicks: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['biweekly', 'days', 'hours', 'months', 'quarterly', 'weeks', 'years']), _propTypes.default.shape({
+      format: _propTypes.default.func.isRequired,
+      getTickNumber: _propTypes.default.func.isRequired,
+      isTick: _propTypes.default.func.isRequired
+    })]).isRequired),
     position: _propTypes.default.oneOf(['left', 'none', 'right']),
     reverse: _propTypes.default.bool,
     scaleType: _propTypes.default.oneOf(['band']),
@@ -735,6 +760,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     width: _propTypes.default.number
   }), _propTypes.default.shape({
@@ -771,6 +797,11 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
     offset: _propTypes.default.number,
+    ordinalTimeTicks: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['biweekly', 'days', 'hours', 'months', 'quarterly', 'weeks', 'years']), _propTypes.default.shape({
+      format: _propTypes.default.func.isRequired,
+      getTickNumber: _propTypes.default.func.isRequired,
+      isTick: _propTypes.default.func.isRequired
+    })]).isRequired),
     position: _propTypes.default.oneOf(['left', 'none', 'right']),
     reverse: _propTypes.default.bool,
     scaleType: _propTypes.default.oneOf(['point']),
@@ -786,6 +817,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     width: _propTypes.default.number
   }), _propTypes.default.shape({
@@ -829,6 +861,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     width: _propTypes.default.number
   }), _propTypes.default.shape({
@@ -873,6 +906,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     width: _propTypes.default.number
   }), _propTypes.default.shape({
@@ -916,6 +950,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     width: _propTypes.default.number
   }), _propTypes.default.shape({
@@ -959,6 +994,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     width: _propTypes.default.number
   }), _propTypes.default.shape({
@@ -1006,6 +1042,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     width: _propTypes.default.number
   }), _propTypes.default.shape({
@@ -1053,6 +1090,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     width: _propTypes.default.number
   }), _propTypes.default.shape({
@@ -1096,6 +1134,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     width: _propTypes.default.number
   })]).isRequired)

package/BarChart/BarChart.plugins.d.ts

@@ -1,9 +1,10 @@
-import { UseChartZAxisSignature } from "../internals/plugins/featurePlugins/useChartZAxis/index.js";
-import { UseChartCartesianAxisSignature } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
-import { UseChartInteractionSignature } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
-import { UseChartHighlightSignature } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
-import { UseChartKeyboardNavigationSignature } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
-import { ConvertSignaturesIntoPlugins } from "../internals/plugins/models/helpers.js";
-import { UseChartBrushSignature } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
-export type BarChartPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<'bar'>, UseChartHighlightSignature, UseChartKeyboardNavigationSignature];
+import { type UseChartZAxisSignature } from "../internals/plugins/featurePlugins/useChartZAxis/index.js";
+import { type UseChartCartesianAxisSignature } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+import { type UseChartTooltipSignature } from "../internals/plugins/featurePlugins/useChartTooltip/index.js";
+import { type UseChartInteractionSignature } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { type UseChartHighlightSignature } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
+import { type UseChartKeyboardNavigationSignature } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
+import { type ConvertSignaturesIntoPlugins } from "../internals/plugins/models/helpers.js";
+import { type UseChartBrushSignature } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
+export type BarChartPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<'bar'>, UseChartHighlightSignature, UseChartKeyboardNavigationSignature];
 export declare const BAR_CHART_PLUGINS: ConvertSignaturesIntoPlugins<BarChartPluginSignatures>;

package/BarChart/BarChart.plugins.js

@@ -6,8 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.BAR_CHART_PLUGINS = void 0;
 var _useChartZAxis = require("../internals/plugins/featurePlugins/useChartZAxis");
 var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
+var _useChartTooltip = require("../internals/plugins/featurePlugins/useChartTooltip");
 var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
 var _useChartHighlight = require("../internals/plugins/featurePlugins/useChartHighlight");
 var _useChartKeyboardNavigation = require("../internals/plugins/featurePlugins/useChartKeyboardNavigation");
 var _useChartBrush = require("../internals/plugins/featurePlugins/useChartBrush");
-const BAR_CHART_PLUGINS = exports.BAR_CHART_PLUGINS = [_useChartZAxis.useChartZAxis, _useChartBrush.useChartBrush, _useChartInteraction.useChartInteraction, _useChartCartesianAxis.useChartCartesianAxis, _useChartHighlight.useChartHighlight, _useChartKeyboardNavigation.useChartKeyboardNavigation];
+const BAR_CHART_PLUGINS = exports.BAR_CHART_PLUGINS = [_useChartZAxis.useChartZAxis, _useChartBrush.useChartBrush, _useChartTooltip.useChartTooltip, _useChartInteraction.useChartInteraction, _useChartCartesianAxis.useChartCartesianAxis, _useChartHighlight.useChartHighlight, _useChartKeyboardNavigation.useChartKeyboardNavigation];

package/BarChart/BarElement.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
-import { BarElementOwnerState } from "./barElementClasses.js";
-import { BarProps } from "./AnimatedBarElement.js";
+import { type SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import { type BarElementOwnerState } from "./barElementClasses.js";
+import { type BarProps } from "./AnimatedBarElement.js";
 export interface BarElementSlots {
   /**
    * The component that renders the bar.

package/BarChart/BarElement.js

@@ -85,8 +85,7 @@ function BarElement(props) {
       stroke: 'none',
       fill: color,
       skipAnimation,
-      layout,
-      'data-focused': isFocused || undefined
+      layout
     }),
     className: classes.root,
     ownerState

package/BarChart/BarLabel/BarLabel.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BarLabelOwnerState } from "./BarLabel.types.js";
+import { type BarLabelOwnerState } from "./BarLabel.types.js";
 export declare const BarLabelComponent: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.SVGTextElementAttributes<SVGTextElement>, keyof React.SVGTextElementAttributes<SVGTextElement>>, {}>;
 export type BarLabelProps = Omit<React.SVGProps<SVGTextElement>, 'ref' | 'id' | 'x' | 'y' | 'width' | 'height'> & BarLabelOwnerState & {
   /**

package/BarChart/BarLabel/BarLabel.js

@@ -15,6 +15,7 @@ var _styles = require("@mui/material/styles");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useAnimateBarLabel = require("../../hooks/animation/useAnimateBarLabel");
 var _barLabelClasses = require("./barLabelClasses");
+var _animation = require("../../internals/animation/animation");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["seriesId", "dataIndex", "color", "isFaded", "isHighlighted", "classes", "skipAnimation", "layout", "xOrigin", "yOrigin", "placement"];
 const BarLabelComponent = exports.BarLabelComponent = (0, _styles.styled)('text', {
@@ -30,25 +31,28 @@ const BarLabelComponent = exports.BarLabelComponent = (0, _styles.styled)('text'
 }) => (0, _extends2.default)({}, theme?.typography?.body2, {
   stroke: 'none',
   fill: (theme.vars || theme)?.palette?.text?.primary,
-  transition: 'opacity 0.2s ease-in, fill 0.2s ease-in',
-  pointerEvents: 'none',
-  opacity: 1,
-  [`&.${_barLabelClasses.barLabelClasses.faded}`]: {
-    opacity: 0.3
-  }
+  transitionProperty: 'opacity, fill',
+  transitionDuration: `${_animation.ANIMATION_DURATION_MS}ms`,
+  transitionTimingFunction: _animation.ANIMATION_TIMING_FUNCTION,
+  pointerEvents: 'none'
 }));
 function BarLabel(inProps) {
   const props = (0, _styles.useThemeProps)({
     props: inProps,
     name: 'MuiBarLabel'
   });
-  const otherProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const {
+      isFaded
+    } = props,
+    otherProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const animatedProps = (0, _useAnimateBarLabel.useAnimateBarLabel)(props);
   const textAnchor = getTextAnchor(props);
   const dominantBaseline = getDominantBaseline(props);
+  const fadedOpacity = isFaded ? 0.3 : 1;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(BarLabelComponent, (0, _extends2.default)({
     textAnchor: textAnchor,
-    dominantBaseline: dominantBaseline
+    dominantBaseline: dominantBaseline,
+    opacity: fadedOpacity
   }, otherProps, animatedProps));
 }
 function getTextAnchor({

package/BarChart/BarLabel/BarLabel.types.d.ts

@@ -1,5 +1,6 @@
-import { SeriesId } from "../../models/seriesType/common.js";
+import { type SeriesId } from "../../models/seriesType/common.js";
 import type { BarLabelClasses } from "./barLabelClasses.js";
+import { type BarValueType } from "../../models/index.js";
 export interface BarLabelOwnerState {
   seriesId: SeriesId;
   dataIndex: number;
@@ -10,7 +11,7 @@ export interface BarLabelOwnerState {
   layout: 'vertical' | 'horizontal';
   classes?: Partial<BarLabelClasses>;
 }
-export type BarItem = {
+export type BarItem<V extends BarValueType | null = BarValueType | null> = {
   /**
    * The series id of the bar.
    */
@@ -22,7 +23,7 @@ export type BarItem = {
   /**
    * The value of the data point.
    */
-  value: number | null;
+  value: V;
 };
 export type BarLabelContext = {
   bar: {
@@ -38,4 +39,4 @@ export type BarLabelContext = {
     width: number;
   };
 };
-export type BarLabelFunction = (item: BarItem, context: BarLabelContext) => string | null | undefined;
+export type BarLabelFunction<V extends BarValueType | null = BarValueType | null> = (item: BarItem<V>, context: BarLabelContext) => string | null | undefined;

package/BarChart/BarLabel/BarLabelItem.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
-import { BarLabelOwnerState, BarItem, BarLabelContext } from "./BarLabel.types.js";
-import { BarLabelProps } from "./BarLabel.js";
+import { type SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import { type BarLabelOwnerState, type BarItem, type BarLabelContext } from "./BarLabel.types.js";
+import { type BarLabelProps } from "./BarLabel.js";
+import { type BarValueType } from "../../models/index.js";
 export interface BarLabelSlots {
   /**
    * The component that renders the bar label.
@@ -12,7 +13,7 @@ export interface BarLabelSlots {
 export interface BarLabelSlotProps {
   barLabel?: SlotComponentPropsFromProps<BarLabelProps, {}, BarLabelOwnerState>;
 }
-export type BarLabelItemProps = Omit<BarLabelOwnerState, 'isFaded' | 'isHighlighted'> & Pick<BarLabelProps, 'style'> & {
+export type BarLabelItemProps<V extends BarValueType | null> = Omit<BarLabelOwnerState, 'isFaded' | 'isHighlighted'> & Pick<BarLabelProps, 'style'> & {
   /**
    * The props used for each component slot.
    * @default {}
@@ -54,7 +55,7 @@ export type BarLabelItemProps = Omit<BarLabelOwnerState, 'isFaded' | 'isHighligh
   /**
    * The value of the data point.
    */
-  value: number | null;
+  value: V;
   /**
    * If true, no animations should be applied.
    */
@@ -66,7 +67,7 @@ export type BarLabelItemProps = Omit<BarLabelOwnerState, 'isFaded' | 'isHighligh
    * @param {BarLabelContext} context data about the bar.
    * @returns {string} The formatted label.
    */
-  barLabel?: 'value' | ((item: BarItem, context: BarLabelContext) => string | null | undefined);
+  barLabel?: 'value' | ((item: BarItem<V>, context: BarLabelContext) => string | null | undefined);
   /**
    * The placement of the bar label.
    * It controls whether the label is rendered in the center or outside the bar.
@@ -77,7 +78,7 @@ export type BarLabelItemProps = Omit<BarLabelOwnerState, 'isFaded' | 'isHighligh
 /**
  * @ignore - internal component.
  */
-declare function BarLabelItem(props: BarLabelItemProps): import("react/jsx-runtime").JSX.Element | null;
+declare function BarLabelItem<V extends BarValueType | null = BarValueType | null>(props: BarLabelItemProps<V>): import("react/jsx-runtime").JSX.Element | null;
 declare namespace BarLabelItem {
   var propTypes: any;
 }

package/BarChart/BarLabel/BarLabelPlot.d.ts

@@ -1,12 +1,31 @@
-import type { ProcessedBarSeriesData } from "../types.js";
-import { BarLabelItemProps } from "./BarLabelItem.js";
-type BarLabelPlotProps = {
-  processedSeries: ProcessedBarSeriesData;
+import { type AnimationData } from "../types.js";
+import { type BarLabelItemProps } from "./BarLabelItem.js";
+import type { SeriesId } from "../../models/seriesType/common.js";
+import { type BarSeriesType, type BarValueType } from "../../models/seriesType/bar.js";
+import { type BarLabelFunction } from "./BarLabel.types.js";
+interface BarLabelPlotProps<V extends BarValueType | null = BarValueType | null> {
+  processedSeries: ProcessedBarLabelSeriesData<V>;
+  className: string;
   skipAnimation?: boolean;
-  barLabel?: BarLabelItemProps['barLabel'];
-};
+  barLabel?: BarLabelItemProps<V | null>['barLabel'];
+}
+export interface ProcessedBarLabelSeriesData<V extends BarValueType | null> {
+  seriesId: SeriesId;
+  data: ProcessedBarLabelData<V>[];
+  barLabel?: 'value' | BarLabelFunction<V>;
+  barLabelPlacement?: BarSeriesType['barLabelPlacement'];
+  layout?: 'vertical' | 'horizontal';
+  xOrigin: number;
+  yOrigin: number;
+}
+export interface ProcessedBarLabelData<V extends BarValueType | null> extends AnimationData {
+  seriesId: SeriesId;
+  dataIndex: number;
+  color: string;
+  value: V;
+}
 /**
  * @ignore - internal component.
  */
-declare function BarLabelPlot(props: BarLabelPlotProps): import("react/jsx-runtime").JSX.Element | null;
+declare function BarLabelPlot<V extends BarValueType | null = BarValueType | null>(props: BarLabelPlotProps<V>): import("react/jsx-runtime").JSX.Element | null;
 export { BarLabelPlot };

package/BarChart/BarLabel/BarLabelPlot.js

@@ -1,48 +1,49 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BarLabelPlot = BarLabelPlot;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
 var _BarLabelItem = require("./BarLabelItem");
-var _barClasses = require("../barClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["processedSeries", "skipAnimation"];
+const _excluded = ["processedSeries", "className", "skipAnimation"];
 /**
  * @ignore - internal component.
  */
 function BarLabelPlot(props) {
   const {
       processedSeries,
+      className,
       skipAnimation
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const {
     seriesId,
-    data
+    data,
+    layout,
+    xOrigin,
+    yOrigin
   } = processedSeries;
-  const classes = (0, _barClasses.useUtilityClasses)();
   const barLabel = processedSeries.barLabel ?? props.barLabel;
   if (!barLabel) {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
-    className: classes.seriesLabels,
+    className: className,
     "data-series": seriesId,
     children: data.map(({
-      xOrigin,
-      yOrigin,
       x,
       y,
       dataIndex,
       color,
       value,
       width,
-      height,
-      layout
+      height
     }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarLabelItem.BarLabelItem, (0, _extends2.default)({
       seriesId: seriesId,
       dataIndex: dataIndex,

package/BarChart/BarLabel/getBarLabel.d.ts

@@ -1,10 +1,11 @@
-import { SeriesId } from "../../models/seriesType/common.js";
-import { BarLabelFunction } from "./BarLabel.types.js";
-export declare const getBarLabel: (options: {
-  barLabel: "value" | BarLabelFunction;
-  value: number | null;
+import { type SeriesId } from "../../models/seriesType/common.js";
+import { type BarLabelFunction } from "./BarLabel.types.js";
+import { type BarValueType } from "../../models/seriesType/bar.js";
+export declare function getBarLabel<V extends BarValueType | null = BarValueType | null>(options: {
+  barLabel: 'value' | BarLabelFunction<V>;
+  value: V;
   dataIndex: number;
   seriesId: SeriesId;
   height: number;
   width: number;
-}) => string | null | undefined;
+}): string | null | undefined;

package/BarChart/BarLabel/getBarLabel.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getBarLabel = void 0;
-const getBarLabel = options => {
+exports.getBarLabel = getBarLabel;
+function getBarLabel(options) {
   const {
     barLabel,
     value,
@@ -27,5 +27,4 @@ const getBarLabel = options => {
       width
     }
   });
-};
-exports.getBarLabel = getBarLabel;
+}

package/BarChart/BarPlot.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { BarElementSlotProps, BarElementSlots } from "./BarElement.js";
-import { BarItemIdentifier } from "../models/index.js";
-import { BarLabelSlotProps, BarLabelSlots } from "./BarLabel/BarLabelItem.js";
-import { BarItem, BarLabelContext } from "./BarLabel/index.js";
+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";
 export interface BarPlotSlots extends BarElementSlots, BarLabelSlots {}
 export interface BarPlotSlotProps extends BarElementSlotProps, BarLabelSlotProps {}
 export interface BarPlotProps {