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

package/PieChart/PieArcLabel.js

@@ -6,38 +6,39 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PieArcLabel = PieArcLabel;
+exports.PieArcLabel = void 0;
 exports.getPieArcLabelUtilityClass = getPieArcLabelUtilityClass;
 exports.pieArcLabelClasses = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _web = require("@react-spring/web");
-var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 var _styles = require("@mui/material/styles");
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+var _animation = require("../internals/animation/animation");
+var _useAnimatePieArcLabel = require("../hooks/animation/useAnimatePieArcLabel");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingAngle", "arcLabelRadius", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "style"];
+const _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingAngle", "arcLabelRadius", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "style", "skipAnimation"];
 function getPieArcLabelUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiPieArcLabel', slot);
 }
-const pieArcLabelClasses = exports.pieArcLabelClasses = (0, _generateUtilityClasses.default)('MuiPieArcLabel', ['root', 'highlighted', 'faded']);
+const pieArcLabelClasses = exports.pieArcLabelClasses = (0, _generateUtilityClasses.default)('MuiPieArcLabel', ['root', 'highlighted', 'faded', 'animate']);
 const useUtilityClasses = ownerState => {
   const {
     classes,
     id,
     isFaded,
-    isHighlighted
+    isHighlighted,
+    skipAnimation
   } = ownerState;
   const slots = {
-    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded']
+    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded', !skipAnimation && 'animate']
   };
   return (0, _composeClasses.default)(slots, getPieArcLabelUtilityClass, classes);
 };
-const PieArcLabelRoot = (0, _styles.styled)(_web.animated.text, {
+const PieArcLabelRoot = (0, _styles.styled)('text', {
   name: 'MuiPieArcLabel',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root
@@ -47,29 +48,20 @@ const PieArcLabelRoot = (0, _styles.styled)(_web.animated.text, {
   fill: (theme.vars || theme).palette.text.primary,
   textAnchor: 'middle',
   dominantBaseline: 'middle',
-  pointerEvents: 'none'
-}));
-/**
- * Helper to compute label position.
- * It's not an inline function because we need it in interpolation.
- */
-const getLabelPosition = (formattedArcLabel, variable) => (startAngle, endAngle, padAngle, arcLabelRadius, cornerRadius) => {
-  if (!formattedArcLabel) {
-    return 0;
-  }
-  const [x, y] = (0, _d3Shape.arc)().cornerRadius(cornerRadius).centroid({
-    padAngle,
-    startAngle,
-    endAngle,
-    innerRadius: arcLabelRadius,
-    outerRadius: arcLabelRadius
-  });
-  if (variable === 'x') {
-    return x;
+  pointerEvents: 'none',
+  animationName: 'animate-opacity',
+  animationDuration: '0s',
+  animationTimingFunction: _animation.ANIMATION_TIMING_FUNCTION,
+  [`&.${pieArcLabelClasses.animate}`]: {
+    animationDuration: `${_animation.ANIMATION_DURATION_MS}ms`
+  },
+  '@keyframes animate-opacity': {
+    from: {
+      opacity: 0
+    }
   }
-  return y;
-};
-function PieArcLabel(props) {
+}));
+const PieArcLabel = exports.PieArcLabel = /*#__PURE__*/React.forwardRef(function PieArcLabel(props, ref) {
   const {
       id,
       classes: innerClasses,
@@ -77,12 +69,13 @@ function PieArcLabel(props) {
       startAngle,
       endAngle,
       paddingAngle,
-      arcLabelRadius,
+      innerRadius,
+      outerRadius,
       cornerRadius,
       formattedArcLabel,
       isHighlighted,
       isFaded,
-      style
+      skipAnimation
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const ownerState = {
@@ -90,32 +83,43 @@ function PieArcLabel(props) {
     classes: innerClasses,
     color,
     isFaded,
-    isHighlighted
+    isHighlighted,
+    skipAnimation
   };
   const classes = useUtilityClasses(ownerState);
-  return (
-    /*#__PURE__*/
-    // @ts-expect-error
-    (0, _jsxRuntime.jsx)(PieArcLabelRoot, (0, _extends2.default)({
-      className: classes.root
-    }, other, {
-      style: (0, _extends2.default)({
-        x: (0, _web.to)([startAngle, endAngle, paddingAngle, arcLabelRadius, cornerRadius], getLabelPosition(formattedArcLabel, 'x')),
-        y: (0, _web.to)([startAngle, endAngle, paddingAngle, arcLabelRadius, cornerRadius], getLabelPosition(formattedArcLabel, 'y'))
-      }, style),
-      children: formattedArcLabel
-    }))
-  );
-}
+  const animatedProps = (0, _useAnimatePieArcLabel.useAnimatePieArcLabel)({
+    cornerRadius,
+    startAngle,
+    endAngle,
+    innerRadius,
+    outerRadius,
+    paddingAngle,
+    skipAnimation,
+    ref
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PieArcLabelRoot, (0, _extends2.default)({
+    className: classes.root
+  }, other, animatedProps, {
+    children: formattedArcLabel
+  }));
+});
 process.env.NODE_ENV !== "production" ? PieArcLabel.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  arcLabelRadius: _propTypes.default.number.isRequired,
   classes: _propTypes.default.object,
   color: _propTypes.default.string.isRequired,
+  cornerRadius: _propTypes.default.number.isRequired,
+  endAngle: _propTypes.default.number.isRequired,
   formattedArcLabel: _propTypes.default.string,
   id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+  innerRadius: _propTypes.default.number.isRequired,
   isFaded: _propTypes.default.bool.isRequired,
-  isHighlighted: _propTypes.default.bool.isRequired
+  isHighlighted: _propTypes.default.bool.isRequired,
+  outerRadius: _propTypes.default.number.isRequired,
+  paddingAngle: _propTypes.default.number.isRequired,
+  skipAnimation: _propTypes.default.bool.isRequired,
+  startAngle: _propTypes.default.number.isRequired
 } : void 0;

package/PieChart/PieArcLabelPlot.js

@@ -11,14 +11,11 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _web = require("@react-spring/web");
-var _transition = require("./dataTransform/transition");
 var _useTransformData = require("./dataTransform/useTransformData");
 var _PieArcLabel = require("./PieArcLabel");
 var _getLabel = require("../internals/getLabel");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["arcLabel", "arcLabelMinAngle", "arcLabelRadius", "cornerRadius", "data", "faded", "highlighted", "id", "innerRadius", "outerRadius", "paddingAngle", "skipAnimation", "slotProps", "slots"],
-  _excluded2 = ["startAngle", "endAngle", "paddingAngle", "innerRadius", "outerRadius", "arcLabelRadius", "cornerRadius"];
+const _excluded = ["arcLabel", "arcLabelMinAngle", "arcLabelRadius", "cornerRadius", "data", "faded", "highlighted", "id", "innerRadius", "outerRadius", "paddingAngle", "skipAnimation", "slotProps", "slots"];
 const RATIO = 180 / Math.PI;
 function getItemLabel(arcLabel, arcLabelMinAngle, item) {
   if (!arcLabel) {
@@ -72,41 +69,26 @@ function PieArcLabelPlot(props) {
     faded,
     data
   });
-  const transition = (0, _web.useTransition)(transformedData, (0, _extends2.default)({}, (0, _transition.getDefaultLabelTransitionConfig)(skipAnimation), {
-    immediate: skipAnimation
-  }));
   if (data.length === 0) {
     return null;
   }
   const ArcLabel = slots?.pieArcLabel ?? _PieArcLabel.PieArcLabel;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", (0, _extends2.default)({}, other, {
-    children: transition((_ref, item) => {
-      let {
-          startAngle,
-          endAngle,
-          paddingAngle: pA,
-          innerRadius: iR,
-          outerRadius: oR,
-          arcLabelRadius: aLR,
-          cornerRadius: cR
-        } = _ref,
-        style = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded2);
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(ArcLabel, (0, _extends2.default)({
-        startAngle: startAngle,
-        endAngle: endAngle,
-        paddingAngle: pA,
-        innerRadius: iR,
-        outerRadius: oR,
-        arcLabelRadius: aLR,
-        cornerRadius: cR,
-        style: style,
-        id: id,
-        color: item.color,
-        isFaded: item.isFaded,
-        isHighlighted: item.isHighlighted,
-        formattedArcLabel: getItemLabel(arcLabel, arcLabelMinAngle, item)
-      }, slotProps?.pieArcLabel));
-    })
+    children: transformedData.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(ArcLabel, (0, _extends2.default)({
+      startAngle: item.startAngle,
+      endAngle: item.endAngle,
+      paddingAngle: item.paddingAngle,
+      innerRadius: item.innerRadius,
+      outerRadius: item.outerRadius,
+      arcLabelRadius: item.arcLabelRadius,
+      cornerRadius: item.cornerRadius,
+      id: id,
+      color: item.color,
+      isFaded: item.isFaded,
+      isHighlighted: item.isHighlighted,
+      formattedArcLabel: getItemLabel(arcLabel, arcLabelMinAngle, item),
+      skipAnimation: skipAnimation ?? false
+    }, slotProps?.pieArcLabel), item.id ?? item.dataIndex))
   }));
 }
 process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {

package/PieChart/PieArcPlot.js

@@ -11,9 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _web = require("@react-spring/web");
 var _PieArc = require("./PieArc");
-var _transition = require("./dataTransform/transition");
 var _useTransformData = require("./dataTransform/useTransformData");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlighted", "faded", "data", "onItemClick", "skipAnimation"];
@@ -45,43 +43,32 @@ function PieArcPlot(props) {
     faded,
     data
   });
-  const transition = (0, _web.useTransition)(transformedData, (0, _extends2.default)({}, (0, _transition.getDefaultTransitionConfig)(skipAnimation), {
-    immediate: skipAnimation
-  }));
   if (data.length === 0) {
     return null;
   }
   const Arc = slots?.pieArc ?? _PieArc.PieArc;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", (0, _extends2.default)({}, other, {
-    children: transition(({
-      startAngle,
-      endAngle,
-      paddingAngle: pA,
-      innerRadius: iR,
-      outerRadius: oR,
-      cornerRadius: cR
-    }, item, _, index) => {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Arc, (0, _extends2.default)({
-        startAngle: startAngle,
-        endAngle: endAngle,
-        paddingAngle: pA,
-        innerRadius: iR,
-        outerRadius: oR,
-        cornerRadius: cR,
-        id: id,
-        color: item.color,
-        dataIndex: index,
-        isFaded: item.isFaded,
-        isHighlighted: item.isHighlighted,
-        onClick: onItemClick && (event => {
-          onItemClick(event, {
-            type: 'pie',
-            seriesId: id,
-            dataIndex: index
-          }, item);
-        })
-      }, slotProps?.pieArc));
-    })
+    children: transformedData.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Arc, (0, _extends2.default)({
+      startAngle: item.startAngle,
+      endAngle: item.endAngle,
+      paddingAngle: item.paddingAngle,
+      innerRadius: item.innerRadius,
+      outerRadius: item.outerRadius,
+      cornerRadius: item.cornerRadius,
+      skipAnimation: skipAnimation ?? false,
+      id: id,
+      color: item.color,
+      dataIndex: index,
+      isFaded: item.isFaded,
+      isHighlighted: item.isHighlighted,
+      onClick: onItemClick && (event => {
+        onItemClick(event, {
+          type: 'pie',
+          seriesId: id,
+          dataIndex: index
+        }, item);
+      })
+    }, slotProps?.pieArc), item.dataIndex))
   }));
 }
 process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {

package/PieChart/seriesConfig/tooltip.js

@@ -17,6 +17,9 @@ const tooltipGetter = params => {
     return null;
   }
   const point = series.data[identifier.dataIndex];
+  if (point == null) {
+    return null;
+  }
   const label = (0, _getLabel.getLabel)(point.label, 'tooltip');
   const value = (0, _extends2.default)({}, point, {
     label

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/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.