@mui/x-charts 8.13.1 → 8.14.1

package/esm/Gauge/Gauge.js

@@ -18,10 +18,7 @@ const useUtilityClasses = props => {
     classes
   } = props;
   const slots = {
-    root: ['root'],
-    valueArc: ['valueArc'],
-    referenceArc: ['referenceArc'],
-    valueText: ['valueText']
+    root: ['root']
   };
   return composeClasses(slots, getGaugeUtilityClass, classes);
 };
@@ -37,13 +34,9 @@ const Gauge = /*#__PURE__*/React.forwardRef(function Gauge(props, ref) {
   return /*#__PURE__*/_jsxs(GaugeContainer, _extends({}, other, {
     className: clsx(classes.root, className),
     ref: ref,
-    children: [/*#__PURE__*/_jsx(GaugeReferenceArc, {
-      className: classes.referenceArc
-    }), /*#__PURE__*/_jsx(GaugeValueArc, {
-      className: classes.valueArc,
+    children: [/*#__PURE__*/_jsx(GaugeReferenceArc, {}), /*#__PURE__*/_jsx(GaugeValueArc, {
       skipAnimation: skipAnimation
     }), /*#__PURE__*/_jsx(GaugeValueText, {
-      className: classes.valueText,
       text: text
     }), children]
   }));

package/esm/Gauge/GaugeReferenceArc.d.ts

@@ -1,2 +1,5 @@
 import * as React from 'react';
-export declare function GaugeReferenceArc(props: React.ComponentProps<'path'>): React.JSX.Element;
+export declare function GaugeReferenceArc({
+  className,
+  ...other
+}: React.ComponentProps<'path'>): React.JSX.Element;

package/esm/Gauge/GaugeReferenceArc.js

@@ -1,10 +1,14 @@
 'use client';
 
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className"];
 import * as React from 'react';
 import { arc as d3Arc } from '@mui/x-charts-vendor/d3-shape';
 import { styled } from '@mui/material/styles';
+import clsx from 'clsx';
 import { useGaugeState } from "./GaugeProvider.js";
+import { gaugeClasses } from "./gaugeClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const StyledPath = styled('path', {
   name: 'MuiGauge',
@@ -14,7 +18,11 @@ const StyledPath = styled('path', {
 }) => ({
   fill: (theme.vars || theme).palette.divider
 }));
-export function GaugeReferenceArc(props) {
+export function GaugeReferenceArc(_ref) {
+  let {
+      className
+    } = _ref,
+    other = _objectWithoutPropertiesLoose(_ref, _excluded);
   const {
     startAngle,
     endAngle,
@@ -25,6 +33,7 @@ export function GaugeReferenceArc(props) {
     cy
   } = useGaugeState();
   return /*#__PURE__*/_jsx(StyledPath, _extends({
+    className: clsx(gaugeClasses.referenceArc, className),
     transform: `translate(${cx}, ${cy})`,
     d: d3Arc().cornerRadius(cornerRadius)({
       startAngle,
@@ -32,5 +41,5 @@ export function GaugeReferenceArc(props) {
       innerRadius,
       outerRadius
     })
-  }, props));
+  }, other));
 }

package/esm/Gauge/GaugeValueArc.d.ts

@@ -1,5 +1,8 @@
 import * as React from 'react';
-declare function GaugeValueArc(props: React.ComponentProps<'path'> & {
+declare function GaugeValueArc({
+  className,
+  ...other
+}: React.ComponentProps<'path'> & {
   skipAnimation?: boolean;
 }): React.JSX.Element | null;
 declare namespace GaugeValueArc {

package/esm/Gauge/GaugeValueArc.js

@@ -1,24 +1,31 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["cx", "cy", "startAngle", "endAngle", "cornerRadius", "innerRadius", "outerRadius", "skipAnimation"];
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className"],
+  _excluded2 = ["cx", "cy", "startAngle", "endAngle", "cornerRadius", "innerRadius", "outerRadius", "skipAnimation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
+import clsx from 'clsx';
 import { useSkipAnimation } from "../hooks/useSkipAnimation.js";
 import { useAnimateGaugeValueArc } from "../hooks/animation/useAnimateGaugeValueArc.js";
 import { useGaugeState } from "./GaugeProvider.js";
+import { gaugeClasses } from "./gaugeClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const StyledPath = styled('path', {
   name: 'MuiGauge',
-  slot: 'ReferenceArc'
+  slot: 'ValueArc'
 })(({
   theme
 }) => ({
   fill: (theme.vars || theme).palette.primary.main
 }));
-function GaugeValueArc(props) {
+function GaugeValueArc(_ref) {
+  let {
+      className
+    } = _ref,
+    other = _objectWithoutPropertiesLoose(_ref, _excluded);
   const {
     value,
     valueMin,
@@ -35,7 +42,8 @@ function GaugeValueArc(props) {
     return null;
   }
   const valueAngle = startAngle + (value - valueMin) / (valueMax - valueMin) * (endAngle - startAngle);
-  return /*#__PURE__*/_jsx(AnimatedGaugeValueArc, _extends({}, props, {
+  return /*#__PURE__*/_jsx(AnimatedGaugeValueArc, _extends({}, other, {
+    className: clsx(gaugeClasses.valueArc, className),
     cx: cx,
     cy: cy,
     startAngle: startAngle,
@@ -53,7 +61,7 @@ process.env.NODE_ENV !== "production" ? GaugeValueArc.propTypes = {
   skipAnimation: PropTypes.bool
 } : void 0;
 export { GaugeValueArc };
-function AnimatedGaugeValueArc(_ref) {
+function AnimatedGaugeValueArc(_ref2) {
   let {
       cx,
       cy,
@@ -63,8 +71,8 @@ function AnimatedGaugeValueArc(_ref) {
       innerRadius,
       outerRadius,
       skipAnimation: inSkipAnimation
-    } = _ref,
-    other = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = _ref2,
+    other = _objectWithoutPropertiesLoose(_ref2, _excluded2);
   const skipAnimation = useSkipAnimation(inSkipAnimation);
   const animatedProps = useAnimateGaugeValueArc({
     startAngle,

package/esm/Gauge/GaugeValueText.js

@@ -5,8 +5,10 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["text", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import { useGaugeState } from "./GaugeProvider.js";
 import { ChartsText } from "../ChartsText/index.js";
+import { gaugeClasses } from "./gaugeClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function defaultFormatter({
   value
@@ -35,7 +37,7 @@ function GaugeValueText(props) {
     return null;
   }
   return /*#__PURE__*/_jsx("g", {
-    className: className,
+    className: clsx(gaugeClasses.valueText, className),
     children: /*#__PURE__*/_jsx(ChartsText, _extends({
       x: cx,
       y: cy,

package/esm/LineChart/LineChart.js

@@ -282,8 +282,6 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     ignoreTooltip: PropTypes.bool,
     label: PropTypes.string,
     labelStyle: PropTypes.object,
-    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     offset: PropTypes.number,
     position: PropTypes.oneOf(['bottom', 'none', 'top']),
     reverse: PropTypes.bool,
@@ -336,8 +334,6 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     ignoreTooltip: PropTypes.bool,
     label: PropTypes.string,
     labelStyle: PropTypes.object,
-    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     offset: PropTypes.number,
     position: PropTypes.oneOf(['bottom', 'none', 'top']),
     reverse: PropTypes.bool,
@@ -380,8 +376,8 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     ignoreTooltip: PropTypes.bool,
     label: PropTypes.string,
     labelStyle: PropTypes.object,
-    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    max: PropTypes.number,
+    min: PropTypes.number,
     offset: PropTypes.number,
     position: PropTypes.oneOf(['bottom', 'none', 'top']),
     reverse: PropTypes.bool,
@@ -425,8 +421,8 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     ignoreTooltip: PropTypes.bool,
     label: PropTypes.string,
     labelStyle: PropTypes.object,
-    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    max: PropTypes.number,
+    min: PropTypes.number,
     offset: PropTypes.number,
     position: PropTypes.oneOf(['bottom', 'none', 'top']),
     reverse: PropTypes.bool,
@@ -469,8 +465,8 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     ignoreTooltip: PropTypes.bool,
     label: PropTypes.string,
     labelStyle: PropTypes.object,
-    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    max: PropTypes.number,
+    min: PropTypes.number,
     offset: PropTypes.number,
     position: PropTypes.oneOf(['bottom', 'none', 'top']),
     reverse: PropTypes.bool,
@@ -513,8 +509,8 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     ignoreTooltip: PropTypes.bool,
     label: PropTypes.string,
     labelStyle: PropTypes.object,
-    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    max: PropTypes.number,
+    min: PropTypes.number,
     offset: PropTypes.number,
     position: PropTypes.oneOf(['bottom', 'none', 'top']),
     reverse: PropTypes.bool,
@@ -557,8 +553,12 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     ignoreTooltip: PropTypes.bool,
     label: PropTypes.string,
     labelStyle: PropTypes.object,
-    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    max: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+      valueOf: PropTypes.func.isRequired
+    })]),
+    min: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+      valueOf: PropTypes.func.isRequired
+    })]),
     offset: PropTypes.number,
     position: PropTypes.oneOf(['bottom', 'none', 'top']),
     reverse: PropTypes.bool,
@@ -601,8 +601,12 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     ignoreTooltip: PropTypes.bool,
     label: PropTypes.string,
     labelStyle: PropTypes.object,
-    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    max: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+      valueOf: PropTypes.func.isRequired
+    })]),
+    min: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+      valueOf: PropTypes.func.isRequired
+    })]),
     offset: PropTypes.number,
     position: PropTypes.oneOf(['bottom', 'none', 'top']),
     reverse: PropTypes.bool,
@@ -645,8 +649,8 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     ignoreTooltip: PropTypes.bool,
     label: PropTypes.string,
     labelStyle: PropTypes.object,
-    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    max: PropTypes.number,
+    min: PropTypes.number,
     offset: PropTypes.number,
     position: PropTypes.oneOf(['bottom', 'none', 'top']),
     reverse: PropTypes.bool,
@@ -706,8 +710,6 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     ignoreTooltip: PropTypes.bool,
     label: PropTypes.string,
     labelStyle: PropTypes.object,
-    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     offset: PropTypes.number,
     position: PropTypes.oneOf(['left', 'none', 'right']),
     reverse: PropTypes.bool,
@@ -759,8 +761,6 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     ignoreTooltip: PropTypes.bool,
     label: PropTypes.string,
     labelStyle: PropTypes.object,
-    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     offset: PropTypes.number,
     position: PropTypes.oneOf(['left', 'none', 'right']),
     reverse: PropTypes.bool,
@@ -802,8 +802,8 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     ignoreTooltip: PropTypes.bool,
     label: PropTypes.string,
     labelStyle: PropTypes.object,
-    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    max: PropTypes.number,
+    min: PropTypes.number,
     offset: PropTypes.number,
     position: PropTypes.oneOf(['left', 'none', 'right']),
     reverse: PropTypes.bool,
@@ -846,8 +846,8 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     ignoreTooltip: PropTypes.bool,
     label: PropTypes.string,
     labelStyle: PropTypes.object,
-    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    max: PropTypes.number,
+    min: PropTypes.number,
     offset: PropTypes.number,
     position: PropTypes.oneOf(['left', 'none', 'right']),
     reverse: PropTypes.bool,
@@ -889,8 +889,8 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     ignoreTooltip: PropTypes.bool,
     label: PropTypes.string,
     labelStyle: PropTypes.object,
-    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    max: PropTypes.number,
+    min: PropTypes.number,
     offset: PropTypes.number,
     position: PropTypes.oneOf(['left', 'none', 'right']),
     reverse: PropTypes.bool,
@@ -932,8 +932,8 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     ignoreTooltip: PropTypes.bool,
     label: PropTypes.string,
     labelStyle: PropTypes.object,
-    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    max: PropTypes.number,
+    min: PropTypes.number,
     offset: PropTypes.number,
     position: PropTypes.oneOf(['left', 'none', 'right']),
     reverse: PropTypes.bool,
@@ -975,8 +975,12 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     ignoreTooltip: PropTypes.bool,
     label: PropTypes.string,
     labelStyle: PropTypes.object,
-    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    max: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+      valueOf: PropTypes.func.isRequired
+    })]),
+    min: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+      valueOf: PropTypes.func.isRequired
+    })]),
     offset: PropTypes.number,
     position: PropTypes.oneOf(['left', 'none', 'right']),
     reverse: PropTypes.bool,
@@ -1018,8 +1022,12 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     ignoreTooltip: PropTypes.bool,
     label: PropTypes.string,
     labelStyle: PropTypes.object,
-    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    max: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+      valueOf: PropTypes.func.isRequired
+    })]),
+    min: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+      valueOf: PropTypes.func.isRequired
+    })]),
     offset: PropTypes.number,
     position: PropTypes.oneOf(['left', 'none', 'right']),
     reverse: PropTypes.bool,
@@ -1061,8 +1069,8 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     ignoreTooltip: PropTypes.bool,
     label: PropTypes.string,
     labelStyle: PropTypes.object,
-    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    max: PropTypes.number,
+    min: PropTypes.number,
     offset: PropTypes.number,
     position: PropTypes.oneOf(['left', 'none', 'right']),
     reverse: PropTypes.bool,

package/esm/PieChart/PieArc.d.ts

@@ -36,8 +36,15 @@ export type PieArcProps = Omit<React.SVGProps<SVGPathElement>, 'ref' | 'id'> & P
   outerRadius: number;
   paddingAngle: number;
   startAngle: number;
-  /** @default false */
-  skipAnimation: boolean;
+  /**
+   * If `true`, the animation is disabled.
+   */
+  skipAnimation?: boolean;
+  /**
+   * If `true`, the default event handlers are disabled.
+   * Those are used, for example, to display a tooltip or highlight the arc on hover.
+   */
+  skipInteraction?: boolean;
 };
 declare const PieArc: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGPathElement>, "ref" | "id"> & PieArcOwnerState & {
   cornerRadius: number;
@@ -47,7 +54,14 @@ declare const PieArc: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGPat
   outerRadius: number;
   paddingAngle: number;
   startAngle: number;
-  /** @default false */
-  skipAnimation: boolean;
+  /**
+   * If `true`, the animation is disabled.
+   */
+  skipAnimation?: boolean;
+  /**
+   * If `true`, the default event handlers are disabled.
+   * Those are used, for example, to display a tooltip or highlight the arc on hover.
+   */
+  skipInteraction?: boolean;
 } & React.RefAttributes<SVGPathElement>>;
 export { PieArc };

package/esm/PieChart/PieArc.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className", "classes", "color", "dataIndex", "id", "isFaded", "isHighlighted", "isFocused", "onClick", "cornerRadius", "startAngle", "endAngle", "innerRadius", "outerRadius", "paddingAngle", "skipAnimation", "stroke"];
+const _excluded = ["className", "classes", "color", "dataIndex", "id", "isFaded", "isHighlighted", "isFocused", "onClick", "cornerRadius", "startAngle", "endAngle", "innerRadius", "outerRadius", "paddingAngle", "skipAnimation", "stroke", "skipInteraction"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -58,7 +58,8 @@ const PieArc = /*#__PURE__*/React.forwardRef(function PieArc(props, ref) {
       outerRadius,
       paddingAngle,
       skipAnimation,
-      stroke: strokeProp
+      stroke: strokeProp,
+      skipInteraction
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const theme = useTheme();
@@ -77,7 +78,7 @@ const PieArc = /*#__PURE__*/React.forwardRef(function PieArc(props, ref) {
     type: 'pie',
     seriesId: id,
     dataIndex
-  });
+  }, skipInteraction);
   const animatedProps = useAnimatePieArc({
     cornerRadius,
     startAngle,
@@ -121,9 +122,14 @@ process.env.NODE_ENV !== "production" ? PieArc.propTypes = {
   outerRadius: PropTypes.number.isRequired,
   paddingAngle: PropTypes.number.isRequired,
   /**
-   * @default false
+   * If `true`, the animation is disabled.
+   */
+  skipAnimation: PropTypes.bool,
+  /**
+   * If `true`, the default event handlers are disabled.
+   * Those are used, for example, to display a tooltip or highlight the arc on hover.
    */
-  skipAnimation: PropTypes.bool.isRequired,
+  skipInteraction: PropTypes.bool,
   startAngle: PropTypes.number.isRequired
 } : void 0;
 export { PieArc };

package/esm/PieChart/PieArcPlot.js

@@ -74,7 +74,9 @@ function PieArcPlot(props) {
       endAngle: focusedItem.endAngle,
       paddingAngle: focusedItem.paddingAngle,
       innerRadius: focusedItem.innerRadius,
-      color: focusedItem.color,
+      color: "transparent",
+      pointerEvents: "none",
+      skipInteraction: true,
       outerRadius: focusedItem.outerRadius,
       cornerRadius: focusedItem.cornerRadius,
       skipAnimation: true,