@mui/x-charts 8.0.0-beta.2 → 8.0.0-beta.3

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianInteraction.selectors.js

@@ -3,45 +3,79 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectorChartsInteractionYAxisValue = exports.selectorChartsInteractionYAxisIsDefined = exports.selectorChartsInteractionYAxisIndex = exports.selectorChartsInteractionYAxis = exports.selectorChartsInteractionXAxisValue = exports.selectorChartsInteractionXAxisIsDefined = exports.selectorChartsInteractionXAxisIndex = exports.selectorChartsInteractionXAxis = void 0;
+exports.selectorChartsInteractionYAxisValues = exports.selectorChartsInteractionYAxisValue = exports.selectorChartsInteractionYAxisIndexes = exports.selectorChartsInteractionYAxisIndex = exports.selectorChartsInteractionXAxisValues = exports.selectorChartsInteractionXAxisValue = exports.selectorChartsInteractionXAxisIndexes = exports.selectorChartsInteractionXAxisIndex = exports.selectorChartsInteractionTooltipYAxes = exports.selectorChartsInteractionTooltipXAxes = exports.selectorChartsInteractionAxisTooltip = void 0;
 var _selectors = require("../../utils/selectors");
 var _useChartInteraction = require("../useChartInteraction/useChartInteraction.selectors");
 var _getAxisValue = require("./getAxisValue");
 var _useChartCartesianAxisRendering = require("./useChartCartesianAxisRendering.selectors");
-const selectorChartsInteractionXAxisIndex = exports.selectorChartsInteractionXAxisIndex = (0, _selectors.createSelector)([_useChartInteraction.selectorChartsInteractionPointerX, _useChartCartesianAxisRendering.selectorChartXAxis], (x, xAxes) => {
-  if (x === null || !xAxes.axis[xAxes.axisIds[0]]) {
+const optionalGetAxisId = (_, id) => id;
+const optionalGetAxisIds = (_, ids) => ids;
+
+/**
+ * Get interaction indexes
+ */
+
+function indexGetter(value, axes, ids = axes.axisIds[0]) {
+  return Array.isArray(ids) ? ids.map(id => (0, _getAxisValue.getAxisIndex)(axes.axis[id], value)) : (0, _getAxisValue.getAxisIndex)(axes.axis[ids], value);
+}
+const selectorChartsInteractionXAxisIndex = exports.selectorChartsInteractionXAxisIndex = (0, _selectors.createSelector)([_useChartInteraction.selectorChartsInteractionPointerX, _useChartCartesianAxisRendering.selectorChartXAxis, optionalGetAxisId], (value, axes, id) => value === null ? null : indexGetter(value, axes, id));
+const selectorChartsInteractionXAxisIndexes = exports.selectorChartsInteractionXAxisIndexes = (0, _selectors.createSelector)([_useChartInteraction.selectorChartsInteractionPointerX, _useChartCartesianAxisRendering.selectorChartXAxis, optionalGetAxisIds], (value, axes, ids) => value === null ? null : indexGetter(value, axes, ids));
+const selectorChartsInteractionYAxisIndex = exports.selectorChartsInteractionYAxisIndex = (0, _selectors.createSelector)([_useChartInteraction.selectorChartsInteractionPointerY, _useChartCartesianAxisRendering.selectorChartYAxis, optionalGetAxisId], (value, axes, id) => value === null ? null : indexGetter(value, axes, id));
+const selectorChartsInteractionYAxisIndexes = exports.selectorChartsInteractionYAxisIndexes = (0, _selectors.createSelector)([_useChartInteraction.selectorChartsInteractionPointerY, _useChartCartesianAxisRendering.selectorChartYAxis, optionalGetAxisIds], (value, axes, ids) => value === null ? null : indexGetter(value, axes, ids));
+
+/**
+ * Get interaction values
+ */
+
+function valueGetter(value, axes, indexes, ids = axes.axisIds[0]) {
+  return Array.isArray(ids) ? ids.map((id, axisIndex) => (0, _getAxisValue.getAxisValue)(axes.axis[id], value, indexes[axisIndex])) : (0, _getAxisValue.getAxisValue)(axes.axis[ids], value, indexes);
+}
+const selectorChartsInteractionXAxisValues = exports.selectorChartsInteractionXAxisValues = (0, _selectors.createSelector)([_useChartInteraction.selectorChartsInteractionPointerX, _useChartCartesianAxisRendering.selectorChartXAxis, selectorChartsInteractionXAxisIndexes, optionalGetAxisIds], (value, axes, indexes, ids) => value === null ? null : valueGetter(value, axes, indexes, ids));
+const selectorChartsInteractionXAxisValue = exports.selectorChartsInteractionXAxisValue = (0, _selectors.createSelector)([_useChartInteraction.selectorChartsInteractionPointerX, _useChartCartesianAxisRendering.selectorChartXAxis, selectorChartsInteractionXAxisIndex, optionalGetAxisId], (x, xAxes, xIndex, id) => {
+  if (x === null || xIndex === null || xAxes.axisIds.length === 0) {
     return null;
   }
-  return (0, _getAxisValue.getAxisIndex)(xAxes.axis[xAxes.axisIds[0]], x);
+  return valueGetter(x, xAxes, xIndex, id);
 });
-const selectorChartsInteractionXAxisValue = exports.selectorChartsInteractionXAxisValue = (0, _selectors.createSelector)([_useChartInteraction.selectorChartsInteractionPointerX, _useChartCartesianAxisRendering.selectorChartXAxis, selectorChartsInteractionXAxisIndex], (x, xAxes, xIndex) => {
-  if (x === null || xIndex === null || !xAxes.axis[xAxes.axisIds[0]]) {
+const selectorChartsInteractionYAxisValues = exports.selectorChartsInteractionYAxisValues = (0, _selectors.createSelector)([_useChartInteraction.selectorChartsInteractionPointerY, _useChartCartesianAxisRendering.selectorChartYAxis, selectorChartsInteractionYAxisIndexes, optionalGetAxisIds], (value, axes, indexes, ids) => value === null ? null : valueGetter(value, axes, indexes, ids));
+const selectorChartsInteractionYAxisValue = exports.selectorChartsInteractionYAxisValue = (0, _selectors.createSelector)([_useChartInteraction.selectorChartsInteractionPointerY, _useChartCartesianAxisRendering.selectorChartYAxis, selectorChartsInteractionYAxisIndex, optionalGetAxisId], (y, yAxes, yIndex, id) => {
+  if (y === null || yIndex === null || yAxes.axisIds.length === 0) {
     return null;
   }
-  return (0, _getAxisValue.getAxisValue)(xAxes.axis[xAxes.axisIds[0]], x, xIndex);
+  return valueGetter(y, yAxes, yIndex, id);
 });
-const selectorChartsInteractionYAxisIndex = exports.selectorChartsInteractionYAxisIndex = (0, _selectors.createSelector)([_useChartInteraction.selectorChartsInteractionPointerY, _useChartCartesianAxisRendering.selectorChartYAxis], (y, yAxes) => {
-  if (y === null || !yAxes.axis[yAxes.axisIds[0]]) {
-    return null;
+
+/**
+ * Get x-axis ids and corresponding data index that should be display in the tooltip.
+ */
+const selectorChartsInteractionTooltipXAxes = exports.selectorChartsInteractionTooltipXAxes = (0, _selectors.createSelector)([_useChartInteraction.selectorChartsInteractionPointerX, _useChartCartesianAxisRendering.selectorChartXAxis], (value, axes) => {
+  if (value === null) {
+    return [];
   }
-  return (0, _getAxisValue.getAxisIndex)(yAxes.axis[yAxes.axisIds[0]], y);
+  return axes.axisIds.filter(id => axes.axis[id].triggerTooltip).map(axisId => ({
+    axisId,
+    dataIndex: (0, _getAxisValue.getAxisIndex)(axes.axis[axisId], value)
+  })).filter(({
+    dataIndex
+  }) => dataIndex >= 0);
 });
-const selectorChartsInteractionYAxisValue = exports.selectorChartsInteractionYAxisValue = (0, _selectors.createSelector)([_useChartInteraction.selectorChartsInteractionPointerY, _useChartCartesianAxisRendering.selectorChartYAxis, selectorChartsInteractionYAxisIndex], (y, yAxes, yIndex) => {
-  if (y === null || yIndex === null || !yAxes.axis[yAxes.axisIds[0]]) {
-    return null;
+
+/**
+ * Get y-axis ids and corresponding data index that should be display in the tooltip.
+ */
+const selectorChartsInteractionTooltipYAxes = exports.selectorChartsInteractionTooltipYAxes = (0, _selectors.createSelector)([_useChartInteraction.selectorChartsInteractionPointerY, _useChartCartesianAxisRendering.selectorChartYAxis], (value, axes) => {
+  if (value === null) {
+    return [];
   }
-  return (0, _getAxisValue.getAxisValue)(yAxes.axis[yAxes.axisIds[0]], y, yIndex);
-});
-// TODO: probably remove in favor of the two more specific.
-const selectorChartsInteractionXAxis = exports.selectorChartsInteractionXAxis = (0, _selectors.createSelector)([selectorChartsInteractionXAxisIndex, selectorChartsInteractionXAxisValue], (index, value) => index === null || value === null ? null : {
-  index,
-  value
-});
-const selectorChartsInteractionYAxis = exports.selectorChartsInteractionYAxis = (0, _selectors.createSelector)([selectorChartsInteractionYAxisIndex, selectorChartsInteractionYAxisValue], (index, value) => index === null || value === null ? null : {
-  index,
-  value
+  return axes.axisIds.filter(id => axes.axis[id].triggerTooltip).map(axisId => ({
+    axisId,
+    dataIndex: (0, _getAxisValue.getAxisIndex)(axes.axis[axisId], value)
+  })).filter(({
+    dataIndex
+  }) => dataIndex >= 0);
 });
 
-// TODO: probably remove in favor of the two more specific.
-const selectorChartsInteractionXAxisIsDefined = exports.selectorChartsInteractionXAxisIsDefined = (0, _selectors.createSelector)([selectorChartsInteractionXAxisIndex], index => index !== null && index >= 0);
-const selectorChartsInteractionYAxisIsDefined = exports.selectorChartsInteractionYAxisIsDefined = (0, _selectors.createSelector)([selectorChartsInteractionYAxisIndex], index => index !== null && index >= 0);
+/**
+ * Return `true` if the axis tooltip has something to display.
+ */
+const selectorChartsInteractionAxisTooltip = exports.selectorChartsInteractionAxisTooltip = (0, _selectors.createSelector)([selectorChartsInteractionTooltipXAxes, selectorChartsInteractionTooltipYAxes], (xTooltip, yTooltip) => xTooltip.length > 0 || yTooltip.length > 0);

package/internals/plugins/models/seriesConfig/seriesConfig.types.d.ts

@@ -3,7 +3,7 @@ import type { CartesianChartSeriesType, ChartSeriesType, PolarChartSeriesType }
 import type { ColorProcessor } from './colorProcessor.types';
 import type { CartesianExtremumGetter } from './cartesianExtremumGetter.types';
 import type { LegendGetter } from './legendGetter.types';
-import type { TooltipGetter } from './tooltipGetter.types';
+import type { AxisTooltipGetter, TooltipGetter } from './tooltipGetter.types';
 import { PolarExtremumGetter } from "./polarExtremumGetter.types.js";
 import { GetSeriesWithDefaultValues } from "./getSeriesWithDefaultValues.types.js";
 export type ChartSeriesTypeConfig<TSeriesType extends ChartSeriesType> = {
@@ -15,8 +15,10 @@ export type ChartSeriesTypeConfig<TSeriesType extends ChartSeriesType> = {
 } & (TSeriesType extends CartesianChartSeriesType ? {
   xExtremumGetter: CartesianExtremumGetter<TSeriesType>;
   yExtremumGetter: CartesianExtremumGetter<TSeriesType>;
+  axisTooltipGetter?: AxisTooltipGetter<TSeriesType, 'x' | 'y'>;
 } : {}) & (TSeriesType extends PolarChartSeriesType ? {
   rotationExtremumGetter: PolarExtremumGetter<TSeriesType>;
   radiusExtremumGetter: PolarExtremumGetter<TSeriesType>;
+  axisTooltipGetter?: AxisTooltipGetter<TSeriesType, 'rotation' | 'radius'>;
 } : {});
 export type ChartSeriesConfig<TSeriesType extends ChartSeriesType> = { [Key in TSeriesType]: ChartSeriesTypeConfig<Key> };

package/internals/plugins/models/seriesConfig/tooltipGetter.types.d.ts

@@ -1,7 +1,13 @@
 import type { ItemTooltip } from '../../../../ChartsTooltip';
 import type { ChartItemIdentifier, ChartSeriesDefaultized, ChartSeriesType } from '../../../../models/seriesType/config';
-export type TooltipGetter<T extends ChartSeriesType> = (params: {
-  series: ChartSeriesDefaultized<T>;
+import { SeriesId } from "../../../../models/seriesType/common.js";
+import { AxisId } from "../../../../models/axis.js";
+export type TooltipGetter<TSeriesType extends ChartSeriesType> = (params: {
+  series: ChartSeriesDefaultized<TSeriesType>;
   getColor: (dataIndex: number) => string;
-  identifier: ChartItemIdentifier<T> | null;
-}) => ItemTooltip<T> | null;
+  identifier: ChartItemIdentifier<TSeriesType> | null;
+}) => ItemTooltip<TSeriesType> | null;
+export type AxisTooltipGetter<TSeriesType extends ChartSeriesType, Directions extends 'x' | 'y' | 'rotation' | 'radius' = 'x' | 'y'> = (series: Record<SeriesId, ChartSeriesDefaultized<TSeriesType>>) => {
+  direction: Directions;
+  axisId: AxisId | undefined;
+}[];

package/internals/shallowEqual.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Performs equality by iterating through keys on an object and returning false
+ * when any key has values which are not strictly equal between the arguments.
+ * Returns true when the values of all keys are strictly equal.
+ *
+ * Source: https://github.com/facebook/react/blob/c2a196174763e0b4f16ed1c512ed4442b062395e/packages/shared/shallowEqual.js#L18
+ */
+export declare function shallowEqual(objA: unknown, objB: unknown): boolean;

package/internals/shallowEqual.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shallowEqual = shallowEqual;
+/**
+ * Performs equality by iterating through keys on an object and returning false
+ * when any key has values which are not strictly equal between the arguments.
+ * Returns true when the values of all keys are strictly equal.
+ *
+ * Source: https://github.com/facebook/react/blob/c2a196174763e0b4f16ed1c512ed4442b062395e/packages/shared/shallowEqual.js#L18
+ */
+function shallowEqual(objA, objB) {
+  if (Object.is(objA, objB)) {
+    return true;
+  }
+  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
+    return false;
+  }
+  const keysA = Object.keys(objA);
+  const keysB = Object.keys(objB);
+  if (keysA.length !== keysB.length) {
+    return false;
+  }
+
+  // Test for A's keys different from B.
+  for (let i = 0; i < keysA.length; i += 1) {
+    const currentKey = keysA[i];
+    if (!Object.prototype.hasOwnProperty.call(objB, currentKey) ||
+    // @ts-ignore
+    !Object.is(objA[currentKey], objB[currentKey])) {
+      return false;
+    }
+  }
+  return true;
+}

package/models/axis.d.ts

@@ -335,6 +335,10 @@ type CommonAxisConfig<S extends ScaleName = ScaleName, V = any> = {
     min: number;
     max: number;
   });
+  /**
+   * If `true`, the axis will be ignored by the tooltip with `trigger='axis'`.
+   */
+  ignoreTooltip?: boolean;
 };
 export type PolarAxisConfig<S extends ScaleName = ScaleName, V = any, AxisProps extends ChartsAxisProps = ChartsRotationAxisProps | ChartsRadiusAxisProps> = {
   /**
@@ -361,6 +365,10 @@ export type AxisDefaultized<S extends ScaleName = ScaleName, V = any, AxisProps
    * An indication of the expected number of ticks.
    */
   tickNumber: number;
+  /**
+   * Indicate if the axis should be consider by a tooltip with `trigger='axis'`.
+   */
+  triggerTooltip?: boolean;
 } & (AxisProps extends ChartsXAxisProps ? MakeRequired<AxisSideConfig<AxisProps>, 'height'> : AxisProps extends ChartsYAxisProps ? MakeRequired<AxisSideConfig<AxisProps>, 'width'> : AxisSideConfig<AxisProps>);
 export declare function isBandScaleConfig(scaleConfig: AxisConfig<ScaleName>): scaleConfig is AxisConfig<'band'> & {
   scaleType: 'band';

package/modern/BarChart/AnimatedBarElement.d.ts

@@ -1,12 +1,42 @@
 import * as React from 'react';
-import { AnimatedProps } from '@react-spring/web';
-import type { BarElementOwnerState } from './BarElement';
-export interface BarProps extends Omit<React.SVGProps<SVGRectElement>, 'id' | 'color' | 'ref' | 'x' | 'y' | 'height' | 'width'>, AnimatedProps<{
-  x?: string | number | undefined;
-  y?: string | number | undefined;
-  height?: string | number | undefined;
-  width?: string | number | undefined;
-}> {
+import { SeriesId } from "../models/seriesType/common.js";
+import { BarElementOwnerState } from "./barElementClasses.js";
+export interface BarProps extends Omit<React.SVGProps<SVGRectElement>, 'id' | 'color' | 'ref' | 'x' | 'y' | 'height' | 'width'> {
+  id: SeriesId;
+  dataIndex: number;
+  color: string;
   ownerState: BarElementOwnerState;
+  /**
+   * The position in the x-axis of the stack this bar belongs to.
+   */
+  xOrigin: number;
+  /**
+   * The position in the y-axis of the stack this bar belongs to.
+   */
+  yOrigin: number;
+  /**
+   * The position of the bar in the x-axis.
+   */
+  x: number;
+  /**
+   * The position of the bar in the y-axis.
+   */
+  y: number;
+  /**
+   * The height of the bar.
+   */
+  height: number;
+  /**
+   * The width of the bar.
+   */
+  width: number;
+  /**
+   * The orientation of the bar.
+   */
+  layout: 'vertical' | 'horizontal';
+  /**
+   * If true, no animations should be applied.
+   */
+  skipAnimation: boolean;
 }
 export declare function AnimatedBarElement(props: BarProps): React.JSX.Element;

package/modern/BarChart/AnimatedBarElement.js

@@ -2,18 +2,18 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["ownerState"];
+const _excluded = ["ownerState", "skipAnimation", "id", "dataIndex", "xOrigin", "yOrigin"];
 import * as React from 'react';
-import { animated } from '@react-spring/web';
+import { useAnimateBar } from "../hooks/animation/useAnimateBar.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function AnimatedBarElement(props) {
   const {
       ownerState
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  return /*#__PURE__*/_jsx(animated.rect, _extends({}, other, {
-    // @ts-expect-error
+  const animatedProps = useAnimateBar(props);
+  return /*#__PURE__*/_jsx("rect", _extends({}, other, {
     filter: ownerState.isHighlighted ? 'brightness(120%)' : undefined,
     opacity: ownerState.isFaded ? 0.3 : 1
-  }));
+  }, animatedProps));
 }

package/modern/BarChart/BarChart.js

@@ -238,6 +238,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     height: PropTypes.number,
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    ignoreTooltip: PropTypes.bool,
     label: PropTypes.string,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -293,6 +294,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     fill: PropTypes.string,
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    ignoreTooltip: PropTypes.bool,
     label: PropTypes.string,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),

package/modern/BarChart/BarClipPath.d.ts

@@ -1,11 +1,29 @@
 import * as React from 'react';
+import { GetRadiusData } from "./getRadius.js";
+type UseAnimateBarClipRectParams = Pick<BarClipRectProps, 'x' | 'y' | 'width' | 'height' | 'skipAnimation'> & {
+  ref?: React.Ref<SVGRectElement>;
+  borderRadius: number;
+  ownerState: Omit<GetRadiusData, 'borderRadius'>;
+};
+type UseAnimateBarClipRectReturn = {
+  ref: React.Ref<SVGRectElement>;
+  style: React.CSSProperties;
+} & Pick<BarClipRectProps, 'x' | 'y' | 'width' | 'height'>;
+export declare function useAnimateBarClipRect(props: UseAnimateBarClipRectParams): UseAnimateBarClipRectReturn;
+interface BarClipRectProps extends Pick<BarClipPathProps, 'x' | 'y' | 'width' | 'height' | 'skipAnimation'> {
+  ownerState: GetRadiusData;
+}
 export interface BarClipPathProps {
   maskId: string;
   borderRadius?: number;
   hasNegative: boolean;
   hasPositive: boolean;
   layout?: 'vertical' | 'horizontal';
-  style: {};
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  skipAnimation: boolean;
 }
 /**
  * @ignore - internal component.

package/modern/BarChart/BarClipPath.js

@@ -1,31 +1,94 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["style", "maskId"];
+const _excluded = ["maskId", "x", "y", "width", "height", "skipAnimation"];
 import * as React from 'react';
-import { animated } from '@react-spring/web';
+import { interpolateNumber } from '@mui/x-charts-vendor/d3-interpolate';
+import { useAnimate } from "../internals/animation/useAnimate.js";
 import { getRadius } from "./getRadius.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const buildInset = corners => `inset(0px round ${corners.topLeft}px ${corners.topRight}px ${corners.bottomRight}px ${corners.bottomLeft}px)`;
-function BarClipRect(props) {
-  const radiusData = props.ownerState;
-  return /*#__PURE__*/_jsx(animated.rect, {
-    style: _extends({}, props.style, {
-      clipPath: (props.ownerState.layout === 'vertical' ? props.style?.height : props.style?.width).to(value => buildInset({
-        topLeft: Math.min(value, getRadius('top-left', radiusData)),
-        topRight: Math.min(value, getRadius('top-right', radiusData)),
-        bottomRight: Math.min(value, getRadius('bottom-right', radiusData)),
-        bottomLeft: Math.min(value, getRadius('bottom-left', radiusData))
-      }))
-    })
+function buildClipPath(size, borderRadius, ownerState) {
+  const radiusData = _extends({}, ownerState, {
+    borderRadius
   });
+  const topLeft = Math.min(size, getRadius('top-left', radiusData));
+  const topRight = Math.min(size, getRadius('top-right', radiusData));
+  const bottomRight = Math.min(size, getRadius('bottom-right', radiusData));
+  const bottomLeft = Math.min(size, getRadius('bottom-left', radiusData));
+  return `inset(0px round ${topLeft}px ${topRight}px ${bottomRight}px ${bottomLeft}px)`;
+}
+function barClipRectPropsInterpolator(from, to) {
+  const interpolateX = interpolateNumber(from.x, to.x);
+  const interpolateY = interpolateNumber(from.y, to.y);
+  const interpolateWidth = interpolateNumber(from.width, to.width);
+  const interpolateHeight = interpolateNumber(from.height, to.height);
+  const interpolateBorderRadius = interpolateNumber(from.borderRadius, to.borderRadius);
+  return t => {
+    return {
+      x: interpolateX(t),
+      y: interpolateY(t),
+      width: interpolateWidth(t),
+      height: interpolateHeight(t),
+      borderRadius: interpolateBorderRadius(t)
+    };
+  };
+}
+export function useAnimateBarClipRect(props) {
+  const initialProps = {
+    x: props.x,
+    y: props.y + (props.ownerState.layout === 'vertical' ? props.height : 0),
+    width: props.ownerState.layout === 'vertical' ? props.width : 0,
+    height: props.ownerState.layout === 'vertical' ? 0 : props.height,
+    borderRadius: props.borderRadius
+  };
+  const ref = useAnimate({
+    x: props.x,
+    y: props.y,
+    width: props.width,
+    height: props.height,
+    borderRadius: props.borderRadius
+  }, {
+    createInterpolator: barClipRectPropsInterpolator,
+    applyProps(element, animatedProps) {
+      element.setAttribute('x', animatedProps.x.toString());
+      element.setAttribute('y', animatedProps.y.toString());
+      element.setAttribute('width', animatedProps.width.toString());
+      element.setAttribute('height', animatedProps.height.toString());
+      element.style.clipPath = buildClipPath(props.ownerState.layout === 'vertical' ? animatedProps.height : animatedProps.width, animatedProps.borderRadius, props.ownerState);
+    },
+    initialProps,
+    skip: props.skipAnimation
+  });
+  const usedProps = props.skipAnimation ? props : initialProps;
+  return {
+    ref,
+    x: usedProps.x,
+    y: usedProps.y,
+    width: usedProps.width,
+    height: usedProps.height,
+    style: {
+      clipPath: buildClipPath(props.ownerState.layout === 'vertical' ? usedProps.height : usedProps.width, usedProps.borderRadius, props.ownerState)
+    }
+  };
+}
+function BarClipRect(props) {
+  const animatedProps = useAnimateBarClipRect(_extends({}, props, {
+    borderRadius: props.ownerState.borderRadius ?? 0
+  }));
+  return /*#__PURE__*/_jsx("rect", _extends({}, animatedProps));
 }
 /**
  * @ignore - internal component.
  */
 function BarClipPath(props) {
   const {
-      style,
-      maskId
+      maskId,
+      x,
+      y,
+      width,
+      height,
+      skipAnimation
     } = props,
     rest = _objectWithoutPropertiesLoose(props, _excluded);
   if (!props.borderRadius || props.borderRadius <= 0) {
@@ -35,7 +98,11 @@ function BarClipPath(props) {
     id: maskId,
     children: /*#__PURE__*/_jsx(BarClipRect, {
       ownerState: rest,
-      style: style
+      x: x,
+      y: y,
+      width: width,
+      height: height,
+      skipAnimation: skipAnimation
     })
   });
 }

package/modern/BarChart/BarElement.d.ts

@@ -1,26 +1,7 @@
 import * as React from 'react';
 import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
-import { SeriesId } from "../models/seriesType/common.js";
+import { BarElementOwnerState } from "./barElementClasses.js";
 import { BarProps } from "./AnimatedBarElement.js";
-export interface BarElementClasses {
-  /** Styles applied to the root element. */
-  root: string;
-  /** Styles applied to the root element if it is highlighted. */
-  highlighted: string;
-  /** Styles applied to the root element if it is faded. */
-  faded: string;
-}
-export type BarElementClassKey = keyof BarElementClasses;
-export interface BarElementOwnerState {
-  id: SeriesId;
-  dataIndex: number;
-  color: string;
-  isFaded: boolean;
-  isHighlighted: boolean;
-  classes?: Partial<BarElementClasses>;
-}
-export declare function getBarElementUtilityClass(slot: string): string;
-export declare const barElementClasses: BarElementClasses;
 export interface BarElementSlots {
   /**
    * The component that renders the bar.
@@ -42,6 +23,14 @@ export type BarElementProps = Omit<BarElementOwnerState, 'isFaded' | 'isHighligh
    * @default {}
    */
   slots?: BarElementSlots;
+  x: number;
+  xOrigin: number;
+  y: number;
+  yOrigin: number;
+  width: number;
+  height: number;
+  layout: 'horizontal' | 'vertical';
+  skipAnimation: boolean;
 };
 declare function BarElement(props: BarElementProps): React.JSX.Element;
 declare namespace BarElement {

package/modern/BarChart/BarElement.js

@@ -2,33 +2,15 @@
 
 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"];
+const _excluded = ["id", "dataIndex", "classes", "color", "slots", "slotProps", "style", "onClick", "skipAnimation", "layout", "x", "xOrigin", "y", "yOrigin", "width", "height"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import composeClasses from '@mui/utils/composeClasses';
 import useSlotProps from '@mui/utils/useSlotProps';
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import { useUtilityClasses } from "./barElementClasses.js";
 import { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
 import { useItemHighlighted } from "../hooks/useItemHighlighted.js";
 import { AnimatedBarElement } from "./AnimatedBarElement.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export function getBarElementUtilityClass(slot) {
-  return generateUtilityClass('MuiBarElement', slot);
-}
-export const barElementClasses = generateUtilityClasses('MuiBarElement', ['root', 'highlighted', 'faded']);
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    id,
-    isHighlighted,
-    isFaded
-  } = ownerState;
-  const slots = {
-    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded']
-  };
-  return composeClasses(slots, getBarElementUtilityClass, classes);
-};
 function BarElement(props) {
   const {
       id,
@@ -38,7 +20,15 @@ function BarElement(props) {
       slots,
       slotProps,
       style,
-      onClick
+      onClick,
+      skipAnimation,
+      layout,
+      x,
+      xOrigin,
+      y,
+      yOrigin,
+      width,
+      height
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const interactionProps = useInteractionItemProps({
@@ -68,11 +58,22 @@ function BarElement(props) {
     externalSlotProps: slotProps?.bar,
     externalForwardedProps: other,
     additionalProps: _extends({}, interactionProps, {
+      id,
+      dataIndex,
+      color,
+      x,
+      xOrigin,
+      y,
+      yOrigin,
+      width,
+      height,
       style,
       onClick,
       cursor: onClick ? 'pointer' : 'unset',
       stroke: 'none',
-      fill: color
+      fill: color,
+      skipAnimation,
+      layout
     }),
     className: classes.root,
     ownerState
@@ -87,6 +88,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,
+  skipAnimation: PropTypes.bool.isRequired,
   /**
    * The props used for each component slot.
    * @default {}
@@ -96,6 +99,8 @@ process.env.NODE_ENV !== "production" ? BarElement.propTypes = {
    * Overridable component slots.
    * @default {}
    */
-  slots: PropTypes.object
+  slots: PropTypes.object,
+  xOrigin: PropTypes.number.isRequired,
+  yOrigin: PropTypes.number.isRequired
 } : void 0;
 export { BarElement };