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

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 };