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

package/RadarChart/RadarAxisHighlight/useRadarAxisHighlight.js

@@ -11,7 +11,7 @@ var _useSelector = require("../../internals/store/useSelector");
 var _useStore = require("../../internals/store/useStore");
 var _useChartContext = require("../../context/ChartProvider/useChartContext");
 var _useChartPolarAxis = require("../../internals/plugins/featurePlugins/useChartPolarAxis");
-var _useChartInteraction = require("../../internals/plugins/featurePlugins/useChartInteraction");
+var _useChartPolarInteraction = require("../../internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors");
 function useRadarAxisHighlight(params) {
   const {
     includesNeighbors = false
@@ -26,10 +26,14 @@ function useRadarAxisHighlight(params) {
     instance
   } = (0, _useChartContext.useChartContext)();
   const store = (0, _useStore.useStore)();
-  const xAxisIdentifier = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsInteractionXAxis);
+  const rotationAxisIndex = (0, _useSelector.useSelector)(store, _useChartPolarInteraction.selectorChartsInteractionRotationAxisIndex);
+  const rotationAxisValue = (0, _useSelector.useSelector)(store, _useChartPolarInteraction.selectorChartsInteractionRotationAxisValue);
   const center = (0, _useSelector.useSelector)(store, _useChartPolarAxis.selectorChartPolarCenter);
-  const highlightedIndex = xAxisIdentifier?.index;
-  if (highlightedIndex === undefined) {
+  const highlightedIndex = rotationAxisIndex;
+  if (!rotationScale) {
+    return null;
+  }
+  if (highlightedIndex === null || highlightedIndex === -1) {
     return null;
   }
   if (radarSeries === undefined || radarSeries.length === 0) {
@@ -37,7 +41,7 @@ function useRadarAxisHighlight(params) {
   }
   const metric = radiusAxisIds[highlightedIndex];
   const radiusScale = radiusAxis[metric].scale;
-  const angle = rotationScale(xAxisIdentifier?.value);
+  const angle = rotationScale(rotationAxisValue);
   const radius = radiusScale.range()[1];
   return {
     center,

package/RadarChart/RadarGrid/RadarGrid.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { RadarGridProps } from "./RadarGrid.types.js";
-declare function RadarGrid(props: RadarGridProps): React.JSX.Element;
+declare function RadarGrid(props: RadarGridProps): React.JSX.Element | null;
 declare namespace RadarGrid {
   var propTypes: any;
 }

package/RadarChart/RadarGrid/RadarGrid.js

@@ -17,11 +17,15 @@ function RadarGrid(props) {
     divisions = 5,
     shape = 'sharp'
   } = props;
+  const gridData = (0, _useRadarGridData.useRadarGridData)();
+  if (gridData === null) {
+    return null;
+  }
   const {
     center,
     corners,
     radius
-  } = (0, _useRadarGridData.useRadarGridData)();
+  } = gridData;
   return shape === 'sharp' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SharpRadarGrid.SharpRadarGrid, {
     divisions: divisions,
     corners: corners,

package/RadarChart/RadarGrid/useRadarGridData.d.ts

@@ -8,4 +8,4 @@ export declare function useRadarGridData(): {
     y: number;
   }[];
   radius: number;
-};
+} | null;

package/RadarChart/RadarGrid/useRadarGridData.js

@@ -19,6 +19,9 @@ function useRadarGridData() {
   const drawingArea = (0, _useDrawingArea.useDrawingArea)();
   const cx = drawingArea.left + drawingArea.width / 2;
   const cy = drawingArea.top + drawingArea.height / 2;
+  if (!rotationScale || rotationScale.domain().length === 0) {
+    return null;
+  }
   const metrics = rotationScale.domain();
   const angles = metrics.map(key => rotationScale(key));
   return {

package/RadarChart/RadarSeriesPlot/useRadarSeriesData.js

@@ -29,8 +29,8 @@ function useRadarSeriesData(querySeriesId) {
     isFaded: isItemFaded,
     isHighlighted: isItemHighlighted
   } = (0, _useItemHighlightedGetter.useItemHighlightedGetter)();
-  const metrics = rotationScale.domain();
-  const angles = metrics.map(key => rotationScale(key));
+  const metrics = rotationScale?.domain() ?? [];
+  const angles = metrics.map(key => rotationScale?.(key));
   return radarSeries.map(series => {
     const seriesId = series.id;
     const isSeriesHighlighted = isItemHighlighted({

package/ScatterChart/ScatterChart.js

@@ -236,6 +236,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     height: _propTypes.default.number,
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    ignoreTooltip: _propTypes.default.bool,
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -291,6 +292,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     fill: _propTypes.default.string,
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    ignoreTooltip: _propTypes.default.bool,
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),

package/ScatterChart/useScatterChartProps.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { ChartsAxisProps } from "../ChartsAxis/index.js";
 import { ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.js";
 import { ChartsGridProps } from "../ChartsGrid/index.js";
@@ -24,5 +25,5 @@ export declare const useScatterChartProps: (props: ScatterChartProps) => {
   overlayProps: ChartsOverlayProps;
   legendProps: ChartsLegendSlotExtension;
   axisHighlightProps: ChartsAxisHighlightProps;
-  children: import("react").ReactNode;
+  children: React.ReactNode;
 };

package/ScatterChart/useScatterChartProps.js

@@ -2,12 +2,14 @@
 'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useScatterChartProps = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
 var _ScatterChart = require("./ScatterChart.plugins");
 const _excluded = ["xAxis", "yAxis", "zAxis", "series", "axisHighlight", "voronoiMaxRadius", "disableVoronoi", "hideLegend", "width", "height", "margin", "colors", "sx", "grid", "onItemClick", "children", "slots", "slotProps", "loading", "highlightedItem", "onHighlightChange", "className"];
 /**
@@ -42,10 +44,11 @@ const useScatterChartProps = props => {
       className
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const seriesWithDefault = React.useMemo(() => series.map(s => (0, _extends2.default)({
+    type: 'scatter'
+  }, s)), [series]);
   const chartContainerProps = (0, _extends2.default)({}, other, {
-    series: series.map(s => (0, _extends2.default)({
-      type: 'scatter'
-    }, s)),
+    series: seriesWithDefault,
     width,
     height,
     margin,

package/SparkLineChart/SparkLineChart.js

@@ -299,6 +299,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     height: _propTypes.default.number,
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    ignoreTooltip: _propTypes.default.bool,
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -353,6 +354,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     fill: _propTypes.default.string,
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    ignoreTooltip: _propTypes.default.bool,
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),

package/colorPalettes/colorPalettes.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.rainbowSurgePaletteLight = exports.rainbowSurgePaletteDark = exports.rainbowSurgePalette = exports.mangoFusionPaletteLight = exports.mangoFusionPaletteDark = exports.mangoFusionPalette = exports.cheerfulFiestaPaletteLight = exports.cheerfulFiestaPaletteDark = exports.cheerfulFiestaPalette = exports.blueberryTwilightPaletteLight = exports.blueberryTwilightPaletteDark = exports.blueberryTwilightPalette = void 0;
-const rainbowSurgePaletteLight = exports.rainbowSurgePaletteLight = ['#4254FB', '#FFB219', '#54C690', '#FF5463', '#F287B3', '#2EAFFF', '#FD8731'];
-const rainbowSurgePaletteDark = exports.rainbowSurgePaletteDark = ['#273DFF', '#FAC04E', '#32ae6a', '#F3616E', '#F286B3', '#2EAFFF', '#FD8731'];
+const rainbowSurgePaletteLight = exports.rainbowSurgePaletteLight = ['#4254FB', '#FFB422', '#FA4F58', '#0DBEFF', '#22BF75', '#FA83B4', '#FF7511'];
+const rainbowSurgePaletteDark = exports.rainbowSurgePaletteDark = ['#495AFB', '#FFC758', '#F35865', '#30C8FF', '#44CE8D', '#F286B3', '#FF8C39'];
 const rainbowSurgePalette = mode => mode === 'dark' ? rainbowSurgePaletteDark : rainbowSurgePaletteLight;
 exports.rainbowSurgePalette = rainbowSurgePalette;
 const blueberryTwilightPaletteLight = exports.blueberryTwilightPaletteLight = ['#02B2AF', '#2E96FF', '#B800D8', '#60009B', '#2731C8', '#03008D'];

package/constants/index.d.ts

@@ -8,6 +8,6 @@ export declare const DEFAULT_MARGINS: {
   left: number;
   right: number;
 };
-export declare const DEFAULT_AXIS_SIZE_WIDTH = 30;
+export declare const DEFAULT_AXIS_SIZE_WIDTH = 45;
 export declare const DEFAULT_AXIS_SIZE_HEIGHT = 25;
 export declare const AXIS_LABEL_DEFAULT_HEIGHT = 20;

package/constants/index.js

@@ -14,7 +14,7 @@ const DEFAULT_MARGINS = exports.DEFAULT_MARGINS = {
   left: 20,
   right: 20
 };
-const DEFAULT_AXIS_SIZE_WIDTH = exports.DEFAULT_AXIS_SIZE_WIDTH = 30;
+const DEFAULT_AXIS_SIZE_WIDTH = exports.DEFAULT_AXIS_SIZE_WIDTH = 45;
 const DEFAULT_AXIS_SIZE_HEIGHT = exports.DEFAULT_AXIS_SIZE_HEIGHT = 25;
 
 // How many pixels to add to the default axis size if that axis has a label

package/context/AnimationProvider/AnimationProvider.js

@@ -1,13 +1,14 @@
 "use strict";
 'use client';
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AnimationProvider = AnimationProvider;
-var _web = require("@react-spring/web");
 var React = _interopRequireWildcard(require("react"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _AnimationContext = require("./AnimationContext");
 var _jsxRuntime = require("react/jsx-runtime");
 function AnimationProvider(props) {
@@ -24,7 +25,7 @@ function AnimationProvider(props) {
   // We use the value of `isAnimationDisabledEnvironment` as the initial value of `skipAnimation` to avoid
   // re-rendering the component on environments where matchMedia is not supported, hence skipAnimation will always be true.
   const [skipAnimation, setSkipAnimation] = React.useState(process.env.NODE_ENV === 'test' ? isAnimationDisabledEnvironment || undefined : undefined);
-  (0, _web.useIsomorphicLayoutEffect)(() => {
+  (0, _useEnhancedEffect.default)(() => {
     if (isAnimationDisabledEnvironment) {
       return undefined;
     }
@@ -32,9 +33,6 @@ function AnimationProvider(props) {
       // This hook can remove animation but never activate it.
       const inputValue = event.matches || undefined;
       setSkipAnimation(inputValue);
-      _web.Globals.assign({
-        skipAnimation: inputValue
-      });
     };
     const mql = window.matchMedia('(prefers-reduced-motion)');
     handleMediaChange(mql);
@@ -44,7 +42,7 @@ function AnimationProvider(props) {
     return () => {
       mql?.removeEventListener?.('change', handleMediaChange);
     };
-  }, []);
+  }, [isAnimationDisabledEnvironment]);
   const value = React.useMemo(() => ({
     isInitialized: true,
     data: {

package/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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 };