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

package/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/BarChart/AnimatedBarElement.js

@@ -10,17 +10,17 @@ exports.AnimatedBarElement = AnimatedBarElement;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
-var _web = require("@react-spring/web");
+var _useAnimateBar = require("../hooks/animation/useAnimateBar");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["ownerState"];
+const _excluded = ["ownerState", "skipAnimation", "id", "dataIndex", "xOrigin", "yOrigin"];
 function AnimatedBarElement(props) {
   const {
       ownerState
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_web.animated.rect, (0, _extends2.default)({}, other, {
-    // @ts-expect-error
+  const animatedProps = (0, _useAnimateBar.useAnimateBar)(props);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", (0, _extends2.default)({}, other, {
     filter: ownerState.isHighlighted ? 'brightness(120%)' : undefined,
     opacity: ownerState.isFaded ? 0.3 : 1
-  }));
+  }, animatedProps));
 }

package/BarChart/BarChart.js

@@ -245,6 +245,7 @@ process.env.NODE_ENV !== "production" ? BarChart.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]),
@@ -300,6 +301,7 @@ process.env.NODE_ENV !== "production" ? BarChart.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/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/BarChart/BarClipPath.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
@@ -6,34 +7,96 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BarClipPath = BarClipPath;
+exports.useAnimateBarClipRect = useAnimateBarClipRect;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _web = require("@react-spring/web");
+var _d3Interpolate = require("@mui/x-charts-vendor/d3-interpolate");
+var _useAnimate = require("../internals/animation/useAnimate");
 var _getRadius = require("./getRadius");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["style", "maskId"];
-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__*/(0, _jsxRuntime.jsx)(_web.animated.rect, {
-    style: (0, _extends2.default)({}, props.style, {
-      clipPath: (props.ownerState.layout === 'vertical' ? props.style?.height : props.style?.width).to(value => buildInset({
-        topLeft: Math.min(value, (0, _getRadius.getRadius)('top-left', radiusData)),
-        topRight: Math.min(value, (0, _getRadius.getRadius)('top-right', radiusData)),
-        bottomRight: Math.min(value, (0, _getRadius.getRadius)('bottom-right', radiusData)),
-        bottomLeft: Math.min(value, (0, _getRadius.getRadius)('bottom-left', radiusData))
-      }))
-    })
+const _excluded = ["maskId", "x", "y", "width", "height", "skipAnimation"];
+function buildClipPath(size, borderRadius, ownerState) {
+  const radiusData = (0, _extends2.default)({}, ownerState, {
+    borderRadius
   });
+  const topLeft = Math.min(size, (0, _getRadius.getRadius)('top-left', radiusData));
+  const topRight = Math.min(size, (0, _getRadius.getRadius)('top-right', radiusData));
+  const bottomRight = Math.min(size, (0, _getRadius.getRadius)('bottom-right', radiusData));
+  const bottomLeft = Math.min(size, (0, _getRadius.getRadius)('bottom-left', radiusData));
+  return `inset(0px round ${topLeft}px ${topRight}px ${bottomRight}px ${bottomLeft}px)`;
+}
+function barClipRectPropsInterpolator(from, to) {
+  const interpolateX = (0, _d3Interpolate.interpolateNumber)(from.x, to.x);
+  const interpolateY = (0, _d3Interpolate.interpolateNumber)(from.y, to.y);
+  const interpolateWidth = (0, _d3Interpolate.interpolateNumber)(from.width, to.width);
+  const interpolateHeight = (0, _d3Interpolate.interpolateNumber)(from.height, to.height);
+  const interpolateBorderRadius = (0, _d3Interpolate.interpolateNumber)(from.borderRadius, to.borderRadius);
+  return t => {
+    return {
+      x: interpolateX(t),
+      y: interpolateY(t),
+      width: interpolateWidth(t),
+      height: interpolateHeight(t),
+      borderRadius: interpolateBorderRadius(t)
+    };
+  };
+}
+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 = (0, _useAnimate.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((0, _extends2.default)({}, props, {
+    borderRadius: props.ownerState.borderRadius ?? 0
+  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", (0, _extends2.default)({}, animatedProps));
 }
 /**
  * @ignore - internal component.
  */
 function BarClipPath(props) {
   const {
-      style,
-      maskId
+      maskId,
+      x,
+      y,
+      width,
+      height,
+      skipAnimation
     } = props,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   if (!props.borderRadius || props.borderRadius <= 0) {
@@ -43,7 +106,11 @@ function BarClipPath(props) {
     id: maskId,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BarClipRect, {
       ownerState: rest,
-      style: style
+      x: x,
+      y: y,
+      width: width,
+      height: height,
+      skipAnimation: skipAnimation
     })
   });
 }

package/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/BarChart/BarElement.js

@@ -7,37 +7,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BarElement = BarElement;
-exports.barElementClasses = void 0;
-exports.getBarElementUtilityClass = getBarElementUtilityClass;
 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 _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
-var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
-var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+var _barElementClasses = require("./barElementClasses");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _useItemHighlighted = require("../hooks/useItemHighlighted");
 var _AnimatedBarElement = require("./AnimatedBarElement");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["id", "dataIndex", "classes", "color", "slots", "slotProps", "style", "onClick"];
-function getBarElementUtilityClass(slot) {
-  return (0, _generateUtilityClass.default)('MuiBarElement', slot);
-}
-const barElementClasses = exports.barElementClasses = (0, _generateUtilityClasses.default)('MuiBarElement', ['root', 'highlighted', 'faded']);
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    id,
-    isHighlighted,
-    isFaded
-  } = ownerState;
-  const slots = {
-    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded']
-  };
-  return (0, _composeClasses.default)(slots, getBarElementUtilityClass, classes);
-};
+const _excluded = ["id", "dataIndex", "classes", "color", "slots", "slotProps", "style", "onClick", "skipAnimation", "layout", "x", "xOrigin", "y", "yOrigin", "width", "height"];
 function BarElement(props) {
   const {
       id,
@@ -47,7 +27,15 @@ function BarElement(props) {
       slots,
       slotProps,
       style,
-      onClick
+      onClick,
+      skipAnimation,
+      layout,
+      x,
+      xOrigin,
+      y,
+      yOrigin,
+      width,
+      height
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const interactionProps = (0, _useInteractionItemProps.useInteractionItemProps)({
@@ -70,18 +58,29 @@ function BarElement(props) {
     isFaded,
     isHighlighted
   };
-  const classes = useUtilityClasses(ownerState);
+  const classes = (0, _barElementClasses.useUtilityClasses)(ownerState);
   const Bar = slots?.bar ?? _AnimatedBarElement.AnimatedBarElement;
   const barProps = (0, _useSlotProps.default)({
     elementType: Bar,
     externalSlotProps: slotProps?.bar,
     externalForwardedProps: other,
     additionalProps: (0, _extends2.default)({}, 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
@@ -96,6 +95,8 @@ process.env.NODE_ENV !== "production" ? BarElement.propTypes = {
   classes: _propTypes.default.object,
   dataIndex: _propTypes.default.number.isRequired,
   id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+  layout: _propTypes.default.oneOf(['horizontal', 'vertical']).isRequired,
+  skipAnimation: _propTypes.default.bool.isRequired,
   /**
    * The props used for each component slot.
    * @default {}
@@ -105,5 +106,7 @@ process.env.NODE_ENV !== "production" ? BarElement.propTypes = {
    * Overridable component slots.
    * @default {}
    */
-  slots: _propTypes.default.object
+  slots: _propTypes.default.object,
+  xOrigin: _propTypes.default.number.isRequired,
+  yOrigin: _propTypes.default.number.isRequired
 } : void 0;