@mui/x-charts 9.0.0-alpha.2 → 9.0.0-alpha.3

package/BarChart/AnimatedBarElement.d.mts

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

package/BarChart/AnimatedBarElement.d.ts

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

package/BarChart/BarChart.js

@@ -135,7 +135,10 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @default false
    */
   disableAxisListener: _propTypes.default.bool,
-  enableKeyboardNavigation: _propTypes.default.bool,
+  /**
+   * If `true`, disables keyboard navigation for the chart.
+   */
+  disableKeyboardNavigation: _propTypes.default.bool,
   /**
    * Option to display a cartesian grid in the background.
    */
@@ -304,7 +307,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   /**
    * The callback fired when the tooltip item changes.
    *
-   * @param {SeriesItemIdentifier<TSeries> | null} tooltipItem  The newly highlighted item.
+   * @param {SeriesItemIdentifier<SeriesType> | null} tooltipItem  The newly highlighted item.
    */
   onTooltipItemChange: _propTypes.default.func,
   /**

package/BarChart/BarChart.mjs

@@ -128,7 +128,10 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @default false
    */
   disableAxisListener: PropTypes.bool,
-  enableKeyboardNavigation: PropTypes.bool,
+  /**
+   * If `true`, disables keyboard navigation for the chart.
+   */
+  disableKeyboardNavigation: PropTypes.bool,
   /**
    * Option to display a cartesian grid in the background.
    */
@@ -297,7 +300,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   /**
    * The callback fired when the tooltip item changes.
    *
-   * @param {SeriesItemIdentifier<TSeries> | null} tooltipItem  The newly highlighted item.
+   * @param {SeriesItemIdentifier<SeriesType> | null} tooltipItem  The newly highlighted item.
    */
   onTooltipItemChange: PropTypes.func,
   /**

package/BarChart/BarElement.d.mts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type SlotComponentPropsFromProps } from '@mui/x-internals/types';
-import { type BarElementOwnerState } from "./barElementClasses.mjs";
+import { type BarElementOwnerState } from "./barClasses.mjs";
 import { type BarProps } from "./AnimatedBarElement.mjs";
 export interface BarElementSlots {
   /**

package/BarChart/BarElement.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type SlotComponentPropsFromProps } from '@mui/x-internals/types';
-import { type BarElementOwnerState } from "./barElementClasses.js";
+import { type BarElementOwnerState } from "./barClasses.js";
 import { type BarProps } from "./AnimatedBarElement.js";
 export interface BarElementSlots {
   /**

package/BarChart/BarElement.js

@@ -12,9 +12,10 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
+var _barClasses = require("./barClasses");
 var _barElementClasses = require("./barElementClasses");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
-var _useItemHighlighted = require("../hooks/useItemHighlighted");
+var _useItemHighlightState = require("../hooks/useItemHighlightState");
 var _AnimatedBarElement = require("./AnimatedBarElement");
 var _useIsItemFocused = require("../hooks/useIsItemFocused");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -46,10 +47,9 @@ function BarElement(props) {
     dataIndex
   }), [seriesId, dataIndex]);
   const interactionProps = (0, _useInteractionItemProps.useInteractionItemProps)(itemIdentifier);
-  const {
-    isFaded,
-    isHighlighted
-  } = (0, _useItemHighlighted.useItemHighlighted)(itemIdentifier);
+  const highlightState = (0, _useItemHighlightState.useItemHighlightState)(itemIdentifier);
+  const isHighlighted = highlightState === 'highlighted';
+  const isFaded = highlightState === 'faded';
   const isFocused = (0, _useIsItemFocused.useIsItemFocused)(React.useMemo(() => ({
     type: 'bar',
     seriesId,
@@ -64,7 +64,8 @@ function BarElement(props) {
     isHighlighted,
     isFocused
   };
-  const classes = (0, _barElementClasses.useUtilityClasses)(ownerState);
+  const classes = (0, _barClasses.useUtilityClasses)(ownerState);
+  const deprecatedClasses = (0, _barElementClasses.useUtilityClasses)(ownerState);
   const Bar = slots?.bar ?? _AnimatedBarElement.AnimatedBarElement;
   const barProps = (0, _useSlotProps.default)({
     elementType: Bar,
@@ -89,7 +90,7 @@ function BarElement(props) {
       layout,
       hidden
     }),
-    className: classes.root,
+    className: `${classes.element} ${deprecatedClasses.root}`,
     ownerState
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Bar, (0, _extends2.default)({}, barProps));

package/BarChart/BarElement.mjs

@@ -6,9 +6,10 @@ const _excluded = ["seriesId", "dataIndex", "classes", "color", "slots", "slotPr
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import useSlotProps from '@mui/utils/useSlotProps';
-import { useUtilityClasses } from "./barElementClasses.mjs";
+import { useUtilityClasses } from "./barClasses.mjs";
+import { useUtilityClasses as useDeprecatedUtilityClasses } from "./barElementClasses.mjs";
 import { useInteractionItemProps } from "../hooks/useInteractionItemProps.mjs";
-import { useItemHighlighted } from "../hooks/useItemHighlighted.mjs";
+import { useItemHighlightState } from "../hooks/useItemHighlightState.mjs";
 import { AnimatedBarElement } from "./AnimatedBarElement.mjs";
 import { useIsItemFocused } from "../hooks/useIsItemFocused.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -39,10 +40,9 @@ function BarElement(props) {
     dataIndex
   }), [seriesId, dataIndex]);
   const interactionProps = useInteractionItemProps(itemIdentifier);
-  const {
-    isFaded,
-    isHighlighted
-  } = useItemHighlighted(itemIdentifier);
+  const highlightState = useItemHighlightState(itemIdentifier);
+  const isHighlighted = highlightState === 'highlighted';
+  const isFaded = highlightState === 'faded';
   const isFocused = useIsItemFocused(React.useMemo(() => ({
     type: 'bar',
     seriesId,
@@ -58,6 +58,7 @@ function BarElement(props) {
     isFocused
   };
   const classes = useUtilityClasses(ownerState);
+  const deprecatedClasses = useDeprecatedUtilityClasses(ownerState);
   const Bar = slots?.bar ?? AnimatedBarElement;
   const barProps = useSlotProps({
     elementType: Bar,
@@ -82,7 +83,7 @@ function BarElement(props) {
       layout,
       hidden
     }),
-    className: classes.root,
+    className: `${classes.element} ${deprecatedClasses.root}`,
     ownerState
   });
   return /*#__PURE__*/_jsx(Bar, _extends({}, barProps));

package/BarChart/BarLabel/BarLabel.js

@@ -25,6 +25,10 @@ const BarLabelComponent = exports.BarLabelComponent = (0, _styles.styled)('text'
     [`&.${_barLabelClasses.barLabelClasses.faded}`]: styles.faded
   }, {
     [`&.${_barLabelClasses.barLabelClasses.highlighted}`]: styles.highlighted
+  }, {
+    [`&[data-faded]`]: styles.faded
+  }, {
+    [`&[data-highlighted]`]: styles.highlighted
   }, styles.root]
 })(({
   theme

package/BarChart/BarLabel/BarLabel.mjs

@@ -17,6 +17,10 @@ export const BarLabelComponent = styled('text', {
     [`&.${barLabelClasses.faded}`]: styles.faded
   }, {
     [`&.${barLabelClasses.highlighted}`]: styles.highlighted
+  }, {
+    [`&[data-faded]`]: styles.faded
+  }, {
+    [`&[data-highlighted]`]: styles.highlighted
   }, styles.root]
 })(({
   theme

package/BarChart/BarLabel/BarLabel.types.d.mts

@@ -1,5 +1,5 @@
 import { type SeriesId } from "../../models/seriesType/common.mjs";
-import type { BarLabelClasses } from "./barLabelClasses.mjs";
+import type { BarClasses } from "../barClasses.mjs";
 import { type BarValueType } from "../../models/index.mjs";
 export interface BarLabelOwnerState {
   seriesId: SeriesId;
@@ -9,7 +9,7 @@ export interface BarLabelOwnerState {
   isHighlighted: boolean;
   skipAnimation: boolean;
   layout: 'vertical' | 'horizontal';
-  classes?: Partial<BarLabelClasses>;
+  classes?: Partial<BarClasses>;
 }
 export type BarItem = {
   /**

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

@@ -1,5 +1,5 @@
 import { type SeriesId } from "../../models/seriesType/common.js";
-import type { BarLabelClasses } from "./barLabelClasses.js";
+import type { BarClasses } from "../barClasses.js";
 import { type BarValueType } from "../../models/index.js";
 export interface BarLabelOwnerState {
   seriesId: SeriesId;
@@ -9,7 +9,7 @@ export interface BarLabelOwnerState {
   isHighlighted: boolean;
   skipAnimation: boolean;
   layout: 'vertical' | 'horizontal';
-  classes?: Partial<BarLabelClasses>;
+  classes?: Partial<BarClasses>;
 }
 export type BarItem = {
   /**

package/BarChart/BarLabel/BarLabelItem.js

@@ -11,10 +11,11 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _useSlotProps2 = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _barClasses = require("../barClasses");
 var _barLabelClasses = require("./barLabelClasses");
 var _getBarLabel = require("./getBarLabel");
 var _BarLabel = require("./BarLabel");
-var _useItemHighlighted = require("../../hooks/useItemHighlighted");
+var _useItemHighlightState = require("../../hooks/useItemHighlightState");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["seriesId", "classes", "color", "dataIndex", "barLabel", "slots", "slotProps", "xOrigin", "yOrigin", "x", "y", "width", "height", "value", "skipAnimation", "layout", "barLabelPlacement", "hidden"],
   _excluded2 = ["ownerState"];
@@ -43,14 +44,13 @@ function BarLabelItem(props) {
       hidden
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const {
-    isFaded,
-    isHighlighted
-  } = (0, _useItemHighlighted.useItemHighlighted)({
+  const highlightState = (0, _useItemHighlightState.useItemHighlightState)({
     type: 'bar',
     seriesId,
     dataIndex
   });
+  const isHighlighted = highlightState === 'highlighted';
+  const isFaded = highlightState === 'faded';
   const ownerState = {
     seriesId,
     classes: innerClasses,
@@ -61,7 +61,8 @@ function BarLabelItem(props) {
     skipAnimation,
     layout
   };
-  const classes = (0, _barLabelClasses.useUtilityClasses)(ownerState);
+  const classes = (0, _barClasses.useUtilityClasses)(ownerState);
+  const deprecatedClasses = (0, _barLabelClasses.useUtilityClasses)(ownerState);
   const Component = slots?.barLabel ?? _BarLabel.BarLabel;
   const _useSlotProps = (0, _useSlotProps2.default)({
       elementType: Component,
@@ -74,7 +75,7 @@ function BarLabelItem(props) {
         width,
         height,
         placement: barLabelPlacement,
-        className: classes.root,
+        className: `${classes.label} ${deprecatedClasses.root}`,
         'data-highlighted': isHighlighted || undefined,
         'data-faded': isFaded || undefined
       }),

package/BarChart/BarLabel/BarLabelItem.mjs

@@ -5,10 +5,11 @@ const _excluded = ["seriesId", "classes", "color", "dataIndex", "barLabel", "slo
 import * as React from 'react';
 import useSlotProps from '@mui/utils/useSlotProps';
 import PropTypes from 'prop-types';
-import { useUtilityClasses } from "./barLabelClasses.mjs";
+import { useUtilityClasses } from "../barClasses.mjs";
+import { useUtilityClasses as useDeprecatedUtilityClasses } from "./barLabelClasses.mjs";
 import { getBarLabel } from "./getBarLabel.mjs";
 import { BarLabel } from "./BarLabel.mjs";
-import { useItemHighlighted } from "../../hooks/useItemHighlighted.mjs";
+import { useItemHighlightState } from "../../hooks/useItemHighlightState.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @ignore - internal component.
@@ -35,14 +36,13 @@ function BarLabelItem(props) {
       hidden
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const {
-    isFaded,
-    isHighlighted
-  } = useItemHighlighted({
+  const highlightState = useItemHighlightState({
     type: 'bar',
     seriesId,
     dataIndex
   });
+  const isHighlighted = highlightState === 'highlighted';
+  const isFaded = highlightState === 'faded';
   const ownerState = {
     seriesId,
     classes: innerClasses,
@@ -54,6 +54,7 @@ function BarLabelItem(props) {
     layout
   };
   const classes = useUtilityClasses(ownerState);
+  const deprecatedClasses = useDeprecatedUtilityClasses(ownerState);
   const Component = slots?.barLabel ?? BarLabel;
   const _useSlotProps = useSlotProps({
       elementType: Component,
@@ -66,7 +67,7 @@ function BarLabelItem(props) {
         width,
         height,
         placement: barLabelPlacement,
-        className: classes.root,
+        className: `${classes.label} ${deprecatedClasses.root}`,
         'data-highlighted': isHighlighted || undefined,
         'data-faded': isFaded || undefined
       }),

package/BarChart/BarLabel/barLabelClasses.d.mts

@@ -1,4 +1,7 @@
 import type { BarLabelOwnerState } from "./BarLabel.types.mjs";
+/**
+ * @deprecated Use `BarClasses` from `../barClasses` instead.
+ */
 export interface BarLabelClasses {
   /** Styles applied to the root element. */
   root: string;
@@ -20,7 +23,19 @@ export interface BarLabelClasses {
    */
   series: string;
 }
+/**
+ * @deprecated Use `BarClassKey` from `../barClasses` instead.
+ */
 export type BarLabelClassKey = keyof BarLabelClasses;
+/**
+ * @deprecated Use `getBarUtilityClass` from `../barClasses` instead.
+ */
 export declare function getBarLabelUtilityClass(slot: string): string;
+/**
+ * @deprecated Use `barClasses` from `../barClasses` instead.
+ */
 export declare const barLabelClasses: Record<"root" | "animate" | "highlighted" | "faded", string>;
+/**
+ * @deprecated Use `useBarLabelUtilityClasses` from `../barClasses` instead.
+ */
 export declare const useUtilityClasses: (ownerState: BarLabelOwnerState) => Record<"root", string>;

package/BarChart/BarLabel/barLabelClasses.d.ts

@@ -1,4 +1,7 @@
 import type { BarLabelOwnerState } from "./BarLabel.types.js";
+/**
+ * @deprecated Use `BarClasses` from `../barClasses` instead.
+ */
 export interface BarLabelClasses {
   /** Styles applied to the root element. */
   root: string;
@@ -20,7 +23,19 @@ export interface BarLabelClasses {
    */
   series: string;
 }
+/**
+ * @deprecated Use `BarClassKey` from `../barClasses` instead.
+ */
 export type BarLabelClassKey = keyof BarLabelClasses;
+/**
+ * @deprecated Use `getBarUtilityClass` from `../barClasses` instead.
+ */
 export declare function getBarLabelUtilityClass(slot: string): string;
+/**
+ * @deprecated Use `barClasses` from `../barClasses` instead.
+ */
 export declare const barLabelClasses: Record<"root" | "animate" | "highlighted" | "faded", string>;
+/**
+ * @deprecated Use `useBarLabelUtilityClasses` from `../barClasses` instead.
+ */
 export declare const useUtilityClasses: (ownerState: BarLabelOwnerState) => Record<"root", string>;

package/BarChart/BarLabel/barLabelClasses.js

@@ -10,10 +10,29 @@ exports.useUtilityClasses = void 0;
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+/**
+ * @deprecated Use `BarClasses` from `../barClasses` instead.
+ */
+
+/**
+ * @deprecated Use `BarClassKey` from `../barClasses` instead.
+ */
+
+/**
+ * @deprecated Use `getBarUtilityClass` from `../barClasses` instead.
+ */
 function getBarLabelUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiBarLabel', slot);
 }
+
+/**
+ * @deprecated Use `barClasses` from `../barClasses` instead.
+ */
 const barLabelClasses = exports.barLabelClasses = (0, _generateUtilityClasses.default)('MuiBarLabel', ['root', 'highlighted', 'faded', 'animate']);
+
+/**
+ * @deprecated Use `useBarLabelUtilityClasses` from `../barClasses` instead.
+ */
 const useUtilityClasses = ownerState => {
   const {
     classes,

package/BarChart/BarLabel/barLabelClasses.mjs

@@ -1,10 +1,30 @@
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import composeClasses from '@mui/utils/composeClasses';
+
+/**
+ * @deprecated Use `BarClasses` from `../barClasses` instead.
+ */
+
+/**
+ * @deprecated Use `BarClassKey` from `../barClasses` instead.
+ */
+
+/**
+ * @deprecated Use `getBarUtilityClass` from `../barClasses` instead.
+ */
 export function getBarLabelUtilityClass(slot) {
   return generateUtilityClass('MuiBarLabel', slot);
 }
+
+/**
+ * @deprecated Use `barClasses` from `../barClasses` instead.
+ */
 export const barLabelClasses = generateUtilityClasses('MuiBarLabel', ['root', 'highlighted', 'faded', 'animate']);
+
+/**
+ * @deprecated Use `useBarLabelUtilityClasses` from `../barClasses` instead.
+ */
 export const useUtilityClasses = ownerState => {
   const {
     classes,

package/BarChart/BarPlot.js

@@ -12,7 +12,6 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
-var _barElementClasses = require("./barElementClasses");
 var _hooks = require("../hooks");
 var _BarLabelPlot = require("./BarLabel/BarLabelPlot");
 var _useSkipAnimation = require("../hooks/useSkipAnimation");
@@ -28,7 +27,7 @@ const BarPlotRoot = (0, _styles.styled)('g', {
   name: 'MuiBarPlot',
   slot: 'Root'
 })({
-  [`& .${_barElementClasses.barElementClasses.root}`]: {
+  [`& .${_barClasses.barClasses.element}`]: {
     transitionProperty: 'opacity, fill',
     transitionDuration: `${_animation.ANIMATION_DURATION_MS}ms`,
     transitionTimingFunction: _animation.ANIMATION_TIMING_FUNCTION

package/BarChart/BarPlot.mjs

@@ -6,13 +6,12 @@ const _excluded = ["skipAnimation", "onItemClick", "borderRadius", "barLabel", "
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
-import { barElementClasses } from "./barElementClasses.mjs";
 import { useDrawingArea, useXAxes, useYAxes } from "../hooks/index.mjs";
 import { BarLabelPlot } from "./BarLabel/BarLabelPlot.mjs";
 import { useSkipAnimation } from "../hooks/useSkipAnimation.mjs";
 import { useInternalIsZoomInteracting } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting.mjs";
 import { useBarPlotData } from "./useBarPlotData.mjs";
-import { useUtilityClasses } from "./barClasses.mjs";
+import { barClasses, useUtilityClasses } from "./barClasses.mjs";
 import { ANIMATION_DURATION_MS, ANIMATION_TIMING_FUNCTION } from "../internals/animation/animation.mjs";
 import { IndividualBarPlot } from "./IndividualBarPlot.mjs";
 import { BatchBarPlot } from "./BatchBarPlot/index.mjs";
@@ -21,7 +20,7 @@ const BarPlotRoot = styled('g', {
   name: 'MuiBarPlot',
   slot: 'Root'
 })({
-  [`& .${barElementClasses.root}`]: {
+  [`& .${barClasses.element}`]: {
     transitionProperty: 'opacity, fill',
     transitionDuration: `${ANIMATION_DURATION_MS}ms`,
     transitionTimingFunction: ANIMATION_TIMING_FUNCTION

package/BarChart/barClasses.d.mts

@@ -1,3 +1,4 @@
+import { type SeriesId } from "../models/seriesType/common.mjs";
 export interface BarClasses {
   /** Styles applied to the bar plot element. */
   root: string;
@@ -5,8 +6,27 @@ export interface BarClasses {
   series: string;
   /** Styles applied to the group surrounding a series' labels. */
   seriesLabels: string;
+  /** Styles applied to an individual bar element. */
+  element: string;
+  /** Styles applied to an individual bar label. */
+  label: string;
+  /** Styles applied to a bar label when it is animated. */
+  labelAnimate: string;
 }
 export type BarClassKey = keyof BarClasses;
+export interface BarElementOwnerState {
+  seriesId: SeriesId;
+  dataIndex: number;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  isFocused: boolean;
+  classes?: Partial<BarClasses>;
+}
 export declare function getBarUtilityClass(slot: string): string;
 export declare const barClasses: BarClasses;
-export declare const useUtilityClasses: (classes?: Partial<BarClasses>) => Record<"root" | "series" | "seriesLabels", string>;
+export interface UseUtilityClassesOptions {
+  skipAnimation?: boolean;
+  classes?: Partial<BarClasses>;
+}
+export declare const useUtilityClasses: (options?: UseUtilityClassesOptions) => Record<"root" | "label" | "series" | "seriesLabels" | "element", string>;

package/BarChart/barClasses.d.ts

@@ -1,3 +1,4 @@
+import { type SeriesId } from "../models/seriesType/common.js";
 export interface BarClasses {
   /** Styles applied to the bar plot element. */
   root: string;
@@ -5,8 +6,27 @@ export interface BarClasses {
   series: string;
   /** Styles applied to the group surrounding a series' labels. */
   seriesLabels: string;
+  /** Styles applied to an individual bar element. */
+  element: string;
+  /** Styles applied to an individual bar label. */
+  label: string;
+  /** Styles applied to a bar label when it is animated. */
+  labelAnimate: string;
 }
 export type BarClassKey = keyof BarClasses;
+export interface BarElementOwnerState {
+  seriesId: SeriesId;
+  dataIndex: number;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  isFocused: boolean;
+  classes?: Partial<BarClasses>;
+}
 export declare function getBarUtilityClass(slot: string): string;
 export declare const barClasses: BarClasses;
-export declare const useUtilityClasses: (classes?: Partial<BarClasses>) => Record<"root" | "series" | "seriesLabels", string>;
+export interface UseUtilityClassesOptions {
+  skipAnimation?: boolean;
+  classes?: Partial<BarClasses>;
+}
+export declare const useUtilityClasses: (options?: UseUtilityClassesOptions) => Record<"root" | "label" | "series" | "seriesLabels" | "element", string>;

package/BarChart/barClasses.js

@@ -13,12 +13,18 @@ var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generat
 function getBarUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiBarChart', slot);
 }
-const barClasses = exports.barClasses = (0, _generateUtilityClasses.default)('MuiBarChart', ['root', 'series', 'seriesLabels']);
-const useUtilityClasses = classes => {
+const barClasses = exports.barClasses = (0, _generateUtilityClasses.default)('MuiBarChart', ['root', 'series', 'seriesLabels', 'element', 'label', 'labelAnimate']);
+const useUtilityClasses = options => {
+  const {
+    skipAnimation,
+    classes
+  } = options ?? {};
   const slots = {
     root: ['root'],
     series: ['series'],
-    seriesLabels: ['seriesLabels']
+    seriesLabels: ['seriesLabels'],
+    element: ['element'],
+    label: ['label', !skipAnimation && 'labelAnimate']
   };
   return (0, _composeClasses.default)(slots, getBarUtilityClass, classes);
 };

package/BarChart/barClasses.mjs

@@ -4,12 +4,18 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getBarUtilityClass(slot) {
   return generateUtilityClass('MuiBarChart', slot);
 }
-export const barClasses = generateUtilityClasses('MuiBarChart', ['root', 'series', 'seriesLabels']);
-export const useUtilityClasses = classes => {
+export const barClasses = generateUtilityClasses('MuiBarChart', ['root', 'series', 'seriesLabels', 'element', 'label', 'labelAnimate']);
+export const useUtilityClasses = options => {
+  const {
+    skipAnimation,
+    classes
+  } = options ?? {};
   const slots = {
     root: ['root'],
     series: ['series'],
-    seriesLabels: ['seriesLabels']
+    seriesLabels: ['seriesLabels'],
+    element: ['element'],
+    label: ['label', !skipAnimation && 'labelAnimate']
   };
   return composeClasses(slots, getBarUtilityClass, classes);
 };

package/BarChart/barElementClasses.d.mts

@@ -1,4 +1,8 @@
-import { type SeriesId } from "../models/seriesType/common.mjs";
+import type { BarElementOwnerState } from "./barClasses.mjs";
+export { type BarElementOwnerState };
+/**
+ * @deprecated Use `BarClasses` from `./barClasses` instead.
+ */
 export interface BarElementClasses {
   /** Styles applied to the root element. */
   root: string;
@@ -18,16 +22,19 @@ export interface BarElementClasses {
    */
   series: string;
 }
+/**
+ * @deprecated Use `BarClassKey` from `./barClasses` instead.
+ */
 export type BarElementClassKey = keyof BarElementClasses;
-export interface BarElementOwnerState {
-  seriesId: SeriesId;
-  dataIndex: number;
-  color: string;
-  isFaded: boolean;
-  isHighlighted: boolean;
-  isFocused: boolean;
-  classes?: Partial<BarElementClasses>;
-}
+/**
+ * @deprecated Use `getBarUtilityClass` from `./barClasses` instead.
+ */
 export declare function getBarElementUtilityClass(slot: string): string;
+/**
+ * @deprecated Use `barClasses` from `./barClasses` instead.
+ */
 export declare const barElementClasses: BarElementClasses;
+/**
+ * @deprecated Use `useBarElementUtilityClasses` from `./barClasses` instead.
+ */
 export declare const useUtilityClasses: (ownerState: BarElementOwnerState) => Record<"root", string>;