@mui/x-charts 8.2.0 → 8.3.0

package/esm/ChartsClipPath/ChartsClipPath.js

@@ -42,7 +42,15 @@ process.env.NODE_ENV !== "production" ? ChartsClipPath.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * The id of the clip path.
+   */
   id: PropTypes.string.isRequired,
+  /**
+   * Offset, in pixels, of the clip path rectangle from the drawing area.
+   *
+   * A positive value will move the rectangle outside the drawing area.
+   */
   offset: PropTypes.shape({
     bottom: PropTypes.number,
     left: PropTypes.number,

package/esm/LineChart/AppearingMask.js

@@ -3,7 +3,6 @@
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-import clsx from 'clsx';
 import { ANIMATION_DURATION_MS, ANIMATION_TIMING_FUNCTION } from "../internals/animation/animation.js";
 import { cleanId } from "../internals/cleanId.js";
 import { useChartId, useDrawingArea } from "../hooks/index.js";
@@ -34,7 +33,7 @@ export function AppearingMask(props) {
     children: [/*#__PURE__*/_jsx("clipPath", {
       id: clipId,
       children: /*#__PURE__*/_jsx(AnimatedRect, {
-        className: clsx(!props.skipAnimation && appearingMaskClasses.animate),
+        className: props.skipAnimation ? '' : appearingMaskClasses.animate,
         x: 0,
         y: 0,
         width: drawingArea.left + drawingArea.width + drawingArea.right,

package/esm/LineChart/CircleMarkElement.d.ts

@@ -10,6 +10,16 @@ export type CircleMarkElementProps = Omit<MarkElementOwnerState, 'isFaded' | 'is
    * The index to the element in the series' data array.
    */
   dataIndex: number;
+  /**
+   * If `true`, the marker is faded.
+   * @default false
+   */
+  isFaded?: boolean;
+  /**
+   * If `true`, the marker is highlighted.
+   * @default false
+   */
+  isHighlighted?: boolean;
 };
 /**
  * The line mark element that only render circle for performance improvement.

package/esm/LineChart/CircleMarkElement.js

@@ -2,17 +2,13 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["x", "y", "id", "classes", "color", "dataIndex", "onClick", "skipAnimation"];
+const _excluded = ["x", "y", "id", "classes", "color", "dataIndex", "onClick", "skipAnimation", "isFaded", "isHighlighted"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled, useTheme } from '@mui/material/styles';
 import { ANIMATION_DURATION_MS, ANIMATION_TIMING_FUNCTION } from "../internals/animation/animation.js";
 import { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
-import { useItemHighlighted } from "../hooks/useItemHighlighted.js";
 import { markElementClasses, useUtilityClasses } from "./markElementClasses.js";
-import { useSelector } from "../internals/store/useSelector.js";
-import { selectorChartsInteractionXAxisIndex } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
-import { useStore } from "../internals/store/useStore.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const Circle = styled('circle')({
   [`&.${markElementClasses.animate}`]: {
@@ -43,7 +39,9 @@ function CircleMarkElement(props) {
       color,
       dataIndex,
       onClick,
-      skipAnimation
+      skipAnimation,
+      isFaded = false,
+      isHighlighted = false
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const theme = useTheme();
@@ -52,18 +50,10 @@ function CircleMarkElement(props) {
     seriesId: id,
     dataIndex
   });
-  const {
-    isFaded,
-    isHighlighted
-  } = useItemHighlighted({
-    seriesId: id
-  });
-  const store = useStore();
-  const xAxisInteractionIndex = useSelector(store, selectorChartsInteractionXAxisIndex);
   const ownerState = {
     id,
     classes: innerClasses,
-    isHighlighted: xAxisInteractionIndex === dataIndex || isHighlighted,
+    isHighlighted,
     isFaded,
     color,
     skipAnimation

package/esm/LineChart/MarkElement.d.ts

@@ -14,6 +14,16 @@ export type MarkElementProps = Omit<MarkElementOwnerState, 'isFaded' | 'isHighli
    * The index to the element in the series' data array.
    */
   dataIndex: number;
+  /**
+   * If `true`, the marker is faded.
+   * @default false
+   */
+  isFaded?: boolean;
+  /**
+   * If `true`, the marker is highlighted.
+   * @default false
+   */
+  isHighlighted?: boolean;
 };
 /**
  * Demos:

package/esm/LineChart/MarkElement.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["x", "y", "id", "classes", "color", "shape", "dataIndex", "onClick", "skipAnimation"];
+const _excluded = ["x", "y", "id", "classes", "color", "shape", "dataIndex", "onClick", "skipAnimation", "isFaded", "isHighlighted"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
@@ -10,11 +10,7 @@ import { symbol as d3Symbol, symbolsFill as d3SymbolsFill } from '@mui/x-charts-
 import { ANIMATION_DURATION_MS, ANIMATION_TIMING_FUNCTION } from "../internals/animation/animation.js";
 import { getSymbol } from "../internals/getSymbol.js";
 import { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
-import { useItemHighlighted } from "../hooks/useItemHighlighted.js";
-import { selectorChartsInteractionXAxisIndex } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
 import { markElementClasses, useUtilityClasses } from "./markElementClasses.js";
-import { useSelector } from "../internals/store/useSelector.js";
-import { useStore } from "../internals/store/useStore.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const MarkElementPath = styled('path', {
   name: 'MuiMarkElement',
@@ -52,7 +48,9 @@ function MarkElement(props) {
       shape,
       dataIndex,
       onClick,
-      skipAnimation
+      skipAnimation,
+      isFaded = false,
+      isHighlighted = false
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const interactionProps = useInteractionItemProps({
@@ -60,18 +58,10 @@ function MarkElement(props) {
     seriesId: id,
     dataIndex
   });
-  const {
-    isFaded,
-    isHighlighted
-  } = useItemHighlighted({
-    seriesId: id
-  });
-  const store = useStore();
-  const xAxisInteractionIndex = useSelector(store, selectorChartsInteractionXAxisIndex);
   const ownerState = {
     id,
     classes: innerClasses,
-    isHighlighted: xAxisInteractionIndex === dataIndex || isHighlighted,
+    isHighlighted,
     isFaded,
     color,
     skipAnimation
@@ -100,6 +90,16 @@ process.env.NODE_ENV !== "production" ? MarkElement.propTypes = {
    */
   dataIndex: PropTypes.number.isRequired,
   id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  /**
+   * If `true`, the marker is faded.
+   * @default false
+   */
+  isFaded: PropTypes.bool,
+  /**
+   * If `true`, the marker is highlighted.
+   * @default false
+   */
+  isHighlighted: PropTypes.bool,
   /**
    * The shape of the marker.
    */

package/esm/LineChart/MarkPlot.js

@@ -5,6 +5,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
 import PropTypes from 'prop-types';
 import * as React from 'react';
+import { selectorChartsInteractionXAxisIndex } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianInteraction.selectors.js";
 import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
 import { useSkipAnimation } from "../hooks/useSkipAnimation.js";
 import { useChartId } from "../hooks/useChartId.js";
@@ -15,8 +16,9 @@ import { CircleMarkElement } from "./CircleMarkElement.js";
 import getColor from "./seriesConfig/getColor.js";
 import { MarkElement } from "./MarkElement.js";
 import { useChartContext } from "../context/ChartProvider/index.js";
-import { useXAxes, useYAxes } from "../hooks/index.js";
+import { useItemHighlightedGetter, useXAxes, useYAxes } from "../hooks/index.js";
 import { useInternalIsZoomInteracting } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting.js";
+import { useSelector } from "../internals/store/useSelector.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -49,8 +51,14 @@ function MarkPlot(props) {
   } = useYAxes();
   const chartId = useChartId();
   const {
-    instance
+    instance,
+    store
   } = useChartContext();
+  const {
+    isFaded,
+    isHighlighted
+  } = useItemHighlightedGetter();
+  const xAxisInteractionIndex = useSelector(store, selectorChartsInteractionXAxisIndex);
   if (seriesData === undefined) {
     return null;
   }
@@ -86,6 +94,12 @@ function MarkPlot(props) {
 
         const colorGetter = getColor(series[seriesId], xAxis[xAxisId], yAxis[yAxisId]);
         const Mark = slots?.mark ?? (shape === 'circle' ? CircleMarkElement : MarkElement);
+        const isSeriesHighlighted = isHighlighted({
+          seriesId
+        });
+        const isSeriesFaded = !isSeriesHighlighted && isFaded({
+          seriesId
+        });
         return /*#__PURE__*/_jsx("g", {
           clipPath: `url(#${clipId})`,
           children: xData?.map((x, index) => {
@@ -143,7 +157,9 @@ function MarkPlot(props) {
                 type: 'line',
                 seriesId,
                 dataIndex: index
-              }))
+              })),
+              isHighlighted: xAxisInteractionIndex === index || isSeriesHighlighted,
+              isFaded: isSeriesFaded
             }, slotProps?.mark), `${seriesId}-${index}`);
           })
         }, seriesId);

package/esm/PieChart/PieArcLabel.js

@@ -59,8 +59,7 @@ const PieArcLabel = /*#__PURE__*/React.forwardRef(function PieArcLabel(props, re
       startAngle,
       endAngle,
       paddingAngle,
-      innerRadius,
-      outerRadius,
+      arcLabelRadius,
       cornerRadius,
       formattedArcLabel,
       isHighlighted,
@@ -81,8 +80,8 @@ const PieArcLabel = /*#__PURE__*/React.forwardRef(function PieArcLabel(props, re
     cornerRadius,
     startAngle,
     endAngle,
-    innerRadius,
-    outerRadius,
+    innerRadius: arcLabelRadius,
+    outerRadius: arcLabelRadius,
     paddingAngle,
     skipAnimation,
     ref

package/esm/SparkLineChart/SparkLineChart.d.ts

@@ -86,6 +86,25 @@ export interface SparkLineChartProps extends Omit<ChartContainerProps, 'series'
    * @default rainbowSurgePalette[0]
    */
   color?: ChartsColor;
+  /**
+   * When `true`, the chart's drawing area will not be clipped and elements within can visually overflow the chart.
+   *
+   * @default false
+   */
+  disableClipping?: boolean;
+  /**
+   * The clipped area offset in pixels.
+   *
+   * This prevents partial clipping of lines when they are drawn on the edge of the drawing area.
+   *
+   * @default { top: 1, right: 1, bottom: 1, left: 1 }
+   */
+  clipAreaOffset?: {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+  };
 }
 /**
  * Demos:

package/esm/SparkLineChart/SparkLineChart.js

@@ -2,9 +2,11 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["xAxis", "yAxis", "width", "height", "margin", "color", "sx", "showTooltip", "showHighlight", "axisHighlight", "children", "slots", "slotProps", "data", "plotType", "valueFormatter", "area", "curve", "className"];
+const _excluded = ["xAxis", "yAxis", "width", "height", "margin", "color", "sx", "showTooltip", "showHighlight", "axisHighlight", "children", "slots", "slotProps", "data", "plotType", "valueFormatter", "area", "curve", "className", "disableClipping", "clipAreaOffset"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import useId from '@mui/utils/useId';
+import { ChartsClipPath } from "../ChartsClipPath/index.js";
 import { BarPlot } from "../BarChart/index.js";
 import { LinePlot, AreaPlot, LineHighlightPlot } from "../LineChart/index.js";
 import { ChartContainer } from "../ChartContainer/index.js";
@@ -43,9 +45,19 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
       valueFormatter = value => value === null ? '' : value.toString(),
       area,
       curve = 'linear',
-      className
+      className,
+      disableClipping,
+      clipAreaOffset
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const id = useId();
+  const clipPathId = `${id}-clip-path`;
+  const clipPathOffset = {
+    top: clipAreaOffset?.top ?? 1,
+    right: clipAreaOffset?.right ?? 1,
+    bottom: clipAreaOffset?.bottom ?? 1,
+    left: clipAreaOffset?.left ?? 1
+  };
   const defaultXHighlight = showHighlight && plotType === 'bar' ? {
     x: 'band'
   } : {
@@ -92,23 +104,29 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
     colors: colors,
     sx: sx,
     disableAxisListener: (!showTooltip || slotProps?.tooltip?.trigger !== 'axis') && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
-    children: [plotType === 'bar' && /*#__PURE__*/_jsx(BarPlot, {
-      skipAnimation: true,
-      slots: slots,
-      slotProps: slotProps
-    }), plotType === 'line' && /*#__PURE__*/_jsxs(React.Fragment, {
-      children: [/*#__PURE__*/_jsx(AreaPlot, {
-        skipAnimation: true,
-        slots: slots,
-        slotProps: slotProps
-      }), /*#__PURE__*/_jsx(LinePlot, {
+    children: [/*#__PURE__*/_jsxs("g", {
+      clipPath: `url(#${clipPathId})`,
+      children: [plotType === 'bar' && /*#__PURE__*/_jsx(BarPlot, {
         skipAnimation: true,
         slots: slots,
         slotProps: slotProps
-      }), /*#__PURE__*/_jsx(LineHighlightPlot, {
-        slots: slots,
-        slotProps: slotProps
+      }), plotType === 'line' && /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [/*#__PURE__*/_jsx(AreaPlot, {
+          skipAnimation: true,
+          slots: slots,
+          slotProps: slotProps
+        }), /*#__PURE__*/_jsx(LinePlot, {
+          skipAnimation: true,
+          slots: slots,
+          slotProps: slotProps
+        })]
       })]
+    }), plotType === 'line' && /*#__PURE__*/_jsx(LineHighlightPlot, {
+      slots: slots,
+      slotProps: slotProps
+    }), disableClipping ? null : /*#__PURE__*/_jsx(ChartsClipPath, {
+      id: clipPathId,
+      offset: clipPathOffset
     }), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), showTooltip && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip)), children]
   }));
 });
@@ -132,6 +150,19 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   }),
   children: PropTypes.node,
   className: PropTypes.string,
+  /**
+   * The clipped area offset in pixels.
+   *
+   * This prevents partial clipping of lines when they are drawn on the edge of the drawing area.
+   *
+   * @default { top: 1, right: 1, bottom: 1, left: 1 }
+   */
+  clipAreaOffset: PropTypes.shape({
+    bottom: PropTypes.number,
+    left: PropTypes.number,
+    right: PropTypes.number,
+    top: PropTypes.number
+  }),
   /**
    * Color used to colorize the sparkline.
    * @default rainbowSurgePalette[0]
@@ -156,6 +187,12 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * @default false
    */
   disableAxisListener: PropTypes.bool,
+  /**
+   * When `true`, the chart's drawing area will not be clipped and elements within can visually overflow the chart.
+   *
+   * @default false
+   */
+  disableClipping: PropTypes.bool,
   /**
    * If true, the voronoi interaction are ignored.
    */

package/esm/Toolbar/Toolbar.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export interface ToolbarProps extends React.PropsWithChildren {}
+export declare function Toolbar({
+  children
+}: ToolbarProps): React.JSX.Element;

package/esm/Toolbar/Toolbar.js

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const ToolbarRoot = styled('div', {
+  name: 'MuiChartsToolbar',
+  slot: 'Root'
+})(({
+  theme
+}) => ({
+  flex: 0,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'end',
+  gap: theme.spacing(0.25),
+  padding: theme.spacing(0.5),
+  minHeight: 44,
+  boxSizing: 'border-box',
+  border: `1px solid ${(theme.vars || theme).palette.divider}`,
+  borderRadius: 4
+}));
+export function Toolbar({
+  children
+}) {
+  return /*#__PURE__*/_jsx(ToolbarRoot, {
+    children: children
+  });
+}

package/esm/Toolbar/ToolbarButton.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { ChartBaseIconButtonProps } from "../models/slots/chartsBaseSlotProps.js";
+export interface ToolbarButtonProps extends ChartBaseIconButtonProps {}
+declare const ToolbarButton: React.ForwardRefExoticComponent<Omit<ToolbarButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { ToolbarButton };

package/esm/Toolbar/ToolbarButton.js

@@ -0,0 +1,20 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import { defaultSlotsMaterial } from "../internals/material/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const ToolbarButton = /*#__PURE__*/React.forwardRef(function ToolbarButton(props, ref) {
+  const IconButton = defaultSlotsMaterial.baseIconButton;
+  return /*#__PURE__*/_jsx(IconButton, _extends({
+    ref: ref
+  }, props));
+});
+process.env.NODE_ENV !== "production" ? ToolbarButton.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  className: PropTypes.string,
+  style: PropTypes.object
+} : void 0;
+export { ToolbarButton };

package/esm/Toolbar/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Toolbar.js";
+export * from "./ToolbarButton.js";

package/esm/Toolbar/index.js

@@ -0,0 +1,2 @@
+export * from "./Toolbar.js";
+export * from "./ToolbarButton.js";

package/esm/hooks/animation/useAnimatePieArcLabel.d.ts

@@ -1,7 +1,16 @@
 import * as React from 'react';
 import type { PieArcLabelProps } from "../../PieChart/index.js";
-type UseAnimatePieArcLabelParams = Pick<PieArcLabelProps, 'startAngle' | 'endAngle' | 'cornerRadius' | 'paddingAngle' | 'innerRadius' | 'outerRadius' | 'skipAnimation'> & {
+type UseAnimatePieArcLabelParams = Pick<PieArcLabelProps, 'startAngle' | 'endAngle' | 'cornerRadius' | 'paddingAngle' | 'skipAnimation'> & {
   ref?: React.Ref<SVGTextElement>;
+  arcLabelRadius?: number;
+  /**
+   * @deprecated Use `arcLabelRadius` instead. This prop will be removed in the next major version.
+   */
+  innerRadius: PieArcLabelProps['innerRadius'];
+  /**
+   * @deprecated Use `arcLabelRadius` instead. This prop will be removed in the next major version.
+   */
+  outerRadius: PieArcLabelProps['outerRadius'];
 };
 type UseAnimatePieArcLabelReturn = {
   ref: React.Ref<SVGTextElement>;

package/esm/hooks/animation/useAnimatePieArcLabel.js

@@ -27,16 +27,16 @@ export function useAnimatePieArcLabel(props) {
   const initialProps = {
     startAngle: (props.startAngle + props.endAngle) / 2,
     endAngle: (props.startAngle + props.endAngle) / 2,
-    innerRadius: props.innerRadius,
-    outerRadius: props.outerRadius,
+    innerRadius: props.arcLabelRadius ?? props.innerRadius,
+    outerRadius: props.arcLabelRadius ?? props.outerRadius,
     paddingAngle: props.paddingAngle,
     cornerRadius: props.cornerRadius
   };
   return useAnimate({
     startAngle: props.startAngle,
     endAngle: props.endAngle,
-    innerRadius: props.innerRadius,
-    outerRadius: props.outerRadius,
+    innerRadius: props?.arcLabelRadius ?? props.innerRadius,
+    outerRadius: props?.arcLabelRadius ?? props.outerRadius,
     paddingAngle: props.paddingAngle,
     cornerRadius: props.cornerRadius
   }, {

package/esm/index.d.ts

@@ -24,4 +24,5 @@ export * from "./Gauge/index.js";
 export * from "./RadarChart/index.js";
 export * from "./ChartsSurface/index.js";
 export * from "./ChartContainer/index.js";
-export * from "./ChartDataProvider/index.js";
+export * from "./ChartDataProvider/index.js";
+export * from "./Toolbar/index.js";

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.2.0
+ * @mui/x-charts v8.3.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -31,4 +31,5 @@ export * from "./Gauge/index.js";
 export * from "./RadarChart/index.js";
 export * from "./ChartsSurface/index.js";
 export * from "./ChartContainer/index.js";
-export * from "./ChartDataProvider/index.js";
+export * from "./ChartDataProvider/index.js";
+export * from "./Toolbar/index.js";

package/esm/internals/constants.d.ts

@@ -0,0 +1,4 @@
+/** Margin in the opposite direction of the axis, i.e., horizontal if the axis is vertical and vice versa. */
+export declare const ZOOM_SLIDER_MARGIN = 4;
+/** Size reserved for the zoom slider. The actual size of the slider might be smaller. */
+export declare const ZOOM_SLIDER_SIZE: number;

package/esm/internals/constants.js

@@ -0,0 +1,5 @@
+/** Margin in the opposite direction of the axis, i.e., horizontal if the axis is vertical and vice versa. */
+export const ZOOM_SLIDER_MARGIN = 4;
+
+/** Size reserved for the zoom slider. The actual size of the slider might be smaller. */
+export const ZOOM_SLIDER_SIZE = 20 + 2 * ZOOM_SLIDER_MARGIN;

package/esm/internals/createSvgIcon.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { ChartBaseIconProps } from "../models/slots/chartsBaseSlotProps.js";
+export declare const createSvgIcon: (path: React.ReactNode, displayName?: string) => (props: ChartBaseIconProps) => React.ReactNode;

package/esm/internals/createSvgIcon.js

@@ -0,0 +1,2 @@
+import { createSvgIcon as createSvgIconMaterial } from '@mui/material/utils';
+export const createSvgIcon = createSvgIconMaterial;

package/esm/internals/index.d.ts

@@ -44,4 +44,7 @@ export * from "../models/seriesType/config.js";
 export * from "../models/seriesType/common.js";
 export * from "../models/z-axis.js";
 export * from "../models/axis.js";
-export * from "./plugins/models/index.js";
+export * from "./plugins/models/index.js";
+export * from "./material/index.js";
+export * from "./createSvgIcon.js";
+export * from "./constants.js";

package/esm/internals/index.js

@@ -58,4 +58,7 @@ export * from "../models/seriesType/config.js";
 export * from "../models/seriesType/common.js";
 export * from "../models/z-axis.js";
 export * from "../models/axis.js";
-export * from "./plugins/models/index.js";
+export * from "./plugins/models/index.js";
+export * from "./material/index.js";
+export * from "./createSvgIcon.js";
+export * from "./constants.js";

package/esm/internals/material/index.d.ts

@@ -0,0 +1,4 @@
+import { ChartsBaseSlots } from "../../models/slots/chartsBaseSlots.js";
+import { ChartsIconSlots } from "../../models/slots/chartsIconSlots.js";
+export type ChartsSlots = ChartsBaseSlots & ChartsIconSlots;
+export declare const defaultSlotsMaterial: ChartsSlots;

package/esm/internals/material/index.js

@@ -0,0 +1,7 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import IconButton from '@mui/material/IconButton';
+const baseSlots = {
+  baseIconButton: IconButton
+};
+const iconSlots = {};
+export const defaultSlotsMaterial = _extends({}, baseSlots, iconSlots);

package/esm/internals/plugins/corePlugins/corePlugins.d.ts

@@ -1,9 +1,11 @@
-import { ConvertPluginsIntoSignatures } from "../models/helpers.js";
-import { UseChartIdParameters } from "./useChartId/index.js";
+import { type UseChartAnimationSignature } from "./useChartAnimation/index.js";
+import { type UseChartDimensionsSignature } from "./useChartDimensions/index.js";
+import { type UseChartIdSignature, UseChartIdParameters } from "./useChartId/index.js";
+import { type UseChartSeriesSignature } from "./useChartSeries/index.js";
 /**
  * Internal plugins that create the tools used by the other plugins.
  * These plugins are used by the Charts components.
  */
-export declare const CHART_CORE_PLUGINS: readonly [import("../models/index.js").ChartPlugin<import("./useChartId/index.js").UseChartIdSignature>, import("../models/index.js").ChartPlugin<import("./useChartDimensions/index.js").UseChartDimensionsSignature>, import("../models/index.js").ChartPlugin<import("./useChartSeries/index.js").UseChartSeriesSignature>, import("../models/index.js").ChartPlugin<import("./useChartAnimation/index.js").UseChartAnimationSignature>];
-export type ChartCorePluginSignatures = ConvertPluginsIntoSignatures<typeof CHART_CORE_PLUGINS>;
+export declare const CHART_CORE_PLUGINS: readonly [import("../models/index.js").ChartPlugin<UseChartIdSignature>, import("../models/index.js").ChartPlugin<UseChartDimensionsSignature>, import("../models/index.js").ChartPlugin<UseChartSeriesSignature>, import("../models/index.js").ChartPlugin<UseChartAnimationSignature>];
+export type ChartCorePluginSignatures = [UseChartIdSignature, UseChartDimensionsSignature, UseChartSeriesSignature, UseChartAnimationSignature];
 export interface ChartCorePluginParameters extends UseChartIdParameters {}

package/esm/internals/plugins/corePlugins/corePlugins.js

@@ -1,5 +1,5 @@
 import { useChartAnimation } from "./useChartAnimation/index.js";
-import { useChartDimensions } from "./useChartDimensions/useChartDimensions.js";
+import { useChartDimensions } from "./useChartDimensions/index.js";
 import { useChartId } from "./useChartId/index.js";
 import { useChartSeries } from "./useChartSeries/index.js";