@mui/x-charts 8.3.1 → 8.5.0

package/esm/SparkLineChart/SparkLineChart.js

@@ -9,7 +9,8 @@ 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";
+import { ChartDataProvider } from "../ChartDataProvider/index.js";
+import { ChartsSurface } from "../ChartsSurface/index.js";
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from "../constants/index.js";
 import { ChartsTooltip } from "../ChartsTooltip/index.js";
 import { ChartsAxisHighlight } from "../ChartsAxisHighlight/index.js";
@@ -71,8 +72,7 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
     }
     return typeof color === 'function' ? mode => [color(mode)] : [color];
   }, [color]);
-  return /*#__PURE__*/_jsxs(ChartContainer, _extends({}, other, {
-    ref: ref,
+  return /*#__PURE__*/_jsxs(ChartDataProvider, {
     series: [_extends({
       type: plotType,
       data,
@@ -85,7 +85,6 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
     width: width,
     height: height,
     margin: margin,
-    className: className,
     xAxis: [_extends({
       id: DEFAULT_X_AXIS_KEY,
       scaleType: plotType === 'bar' ? 'band' : 'point',
@@ -102,34 +101,40 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
       position: 'none'
     })],
     colors: colors,
-    sx: sx,
     disableAxisListener: (!showTooltip || slotProps?.tooltip?.trigger !== 'axis') && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
-    children: [/*#__PURE__*/_jsxs("g", {
-      clipPath: `url(#${clipPathId})`,
-      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(ChartsSurface, _extends({
+      className: className,
+      ref: ref,
+      sx: sx
+    }, other, {
+      children: [/*#__PURE__*/_jsxs("g", {
+        clipPath: `url(#${clipPathId})`,
+        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, {
+            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]
-  }));
+      }), plotType === 'line' && /*#__PURE__*/_jsx(LineHighlightPlot, {
+        slots: slots,
+        slotProps: slotProps
+      }), disableClipping ? null : /*#__PURE__*/_jsx(ChartsClipPath, {
+        id: clipPathId,
+        offset: clipPathOffset
+      }), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), children]
+    })), showTooltip && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip))]
+  });
 });
+if (process.env.NODE_ENV !== "production") SparkLineChart.displayName = "SparkLineChart";
 process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/Toolbar/Toolbar.d.ts

@@ -1,5 +1,11 @@
 import * as React from 'react';
-export interface ToolbarProps extends React.PropsWithChildren {}
+export interface ChartsToolbarProps extends React.ComponentProps<'div'> {
+  className?: string;
+}
 export declare function Toolbar({
-  children
-}: ToolbarProps): React.JSX.Element;
+  className,
+  ...other
+}: ChartsToolbarProps): React.JSX.Element;
+export declare namespace Toolbar {
+  var propTypes: any;
+}

package/esm/Toolbar/Toolbar.js

@@ -1,5 +1,11 @@
+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 PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
+import clsx from 'clsx';
+import { chartsToolbarClasses } from "./chartToolbarClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const ToolbarRoot = styled('div', {
   name: 'MuiChartsToolbar',
@@ -18,10 +24,19 @@ const ToolbarRoot = styled('div', {
   border: `1px solid ${(theme.vars || theme).palette.divider}`,
   borderRadius: 4
 }));
-export function Toolbar({
-  children
-}) {
-  return /*#__PURE__*/_jsx(ToolbarRoot, {
-    children: children
-  });
-}
+export function Toolbar(_ref) {
+  let {
+      className
+    } = _ref,
+    other = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/_jsx(ToolbarRoot, _extends({
+    className: clsx(chartsToolbarClasses.root, className)
+  }, other));
+}
+process.env.NODE_ENV !== "production" ? Toolbar.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
+} : void 0;

package/esm/Toolbar/Toolbar.types.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { ChartsToolbarProps } from "./Toolbar.js";
+export interface ChartsToolbarSlots {
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<ChartsToolbarProps>;
+}
+export interface ChartsToolbarSlotProps {
+  /**
+   * Props for the toolbar component.
+   */
+  toolbar?: Partial<ChartsToolbarProps>;
+}

package/esm/Toolbar/Toolbar.types.js

@@ -0,0 +1 @@
+export {};

package/esm/Toolbar/ToolbarButton.d.ts

@@ -1,5 +1,11 @@
 import * as React from 'react';
-import { ChartBaseIconButtonProps } from "../models/slots/chartsBaseSlotProps.js";
-export interface ToolbarButtonProps extends ChartBaseIconButtonProps {}
+import { RenderProp } from '@mui/x-internals/useComponentRenderer';
+import { ChartsSlotProps } from "../internals/material/index.js";
+export type ToolbarButtonProps = ChartsSlotProps['baseIconButton'] & {
+  /**
+   * A function to customize the rendering of the component.
+   */
+  render?: RenderProp<ChartsSlotProps['baseIconButton']>;
+};
 declare const ToolbarButton: React.ForwardRefExoticComponent<Omit<ToolbarButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export { ToolbarButton };

package/esm/Toolbar/ToolbarButton.js

@@ -1,20 +1,39 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["render"];
 import PropTypes from 'prop-types';
 import * as React from 'react';
-import { defaultSlotsMaterial } from "../internals/material/index.js";
+import { useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
+import { useChartsSlots } from "../context/ChartsSlotsContext.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));
+  const {
+      render
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    slots,
+    slotProps
+  } = useChartsSlots();
+  const element = useComponentRenderer(slots.baseIconButton, render, _extends({}, slotProps?.baseIconButton, other, {
+    ref
+  }));
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: element
+  });
 });
+if (process.env.NODE_ENV !== "production") ToolbarButton.displayName = "ToolbarButton";
 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,
+  disabled: PropTypes.bool,
+  /**
+   * A function to customize the rendering of the component.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
   style: PropTypes.object
 } : void 0;
 export { ToolbarButton };

package/esm/Toolbar/chartToolbarClasses.d.ts

@@ -0,0 +1,6 @@
+export interface ChartsToolbarClasses {
+  /** Styles applied to the root element. */
+  root: string;
+}
+export type ChartsToolbarClassKey = keyof ChartsToolbarClasses;
+export declare const chartsToolbarClasses: ChartsToolbarClasses;

package/esm/Toolbar/chartToolbarClasses.js

@@ -0,0 +1,2 @@
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+export const chartsToolbarClasses = generateUtilityClasses('MuiChartsToolbar', ['root']);

package/esm/Toolbar/index.d.ts

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

package/esm/Toolbar/index.js

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

package/esm/Toolbar/internals/ChartsToolbar.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The chart toolbar component.
+ *
+ * In the community package, this component is empty and does not render anything.
+ */
+export declare function ChartsToolbar(): null;

package/esm/Toolbar/internals/ChartsToolbar.js

@@ -0,0 +1,8 @@
+/**
+ * The chart toolbar component.
+ *
+ * In the community package, this component is empty and does not render anything.
+ */
+export function ChartsToolbar() {
+  return null;
+}

package/esm/context/ChartProvider/ChartContext.js

@@ -3,6 +3,4 @@ import * as React from 'react';
  * @ignore - internal component.
  */
 export const ChartContext = /*#__PURE__*/React.createContext(null);
-if (process.env.NODE_ENV !== 'production') {
-  ChartContext.displayName = 'ChartContext';
-}
+if (process.env.NODE_ENV !== "production") ChartContext.displayName = "ChartContext";

package/esm/context/ChartsSlotsContext.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { ChartsSlotProps, ChartsSlots } from "../internals/material/index.js";
+type SlotProps<T extends Record<keyof T, React.ComponentType<any>>> = { [key in keyof T]: React.ComponentProps<T[key]> };
+export interface ChartsSlotsContextValue<T extends ChartsSlots & Record<keyof T, React.ComponentType<any>> = ChartsSlots> {
+  slots: T;
+  slotProps: Partial<SlotProps<T>>;
+}
+export declare const ChartsSlotsContext: React.Context<ChartsSlotsContextValue<ChartsSlots> | null>;
+/**
+ * Get the slots and slotProps from the nearest `ChartDataProvider` or `ChartDataProviderPro`.
+ * @returns {ChartsSlotsContextValue} The slots and slotProps from the context.
+ */
+export declare function useChartsSlots<T extends ChartsSlots & Record<keyof T, React.ComponentType<any>> = ChartsSlots>(): ChartsSlotsContextValue<T>;
+interface ChartsSlotsProviderProps {
+  slots?: Partial<ChartsSlots>;
+  slotProps?: Partial<ChartsSlotProps>;
+  defaultSlots: ChartsSlots;
+}
+export declare function ChartsSlotsProvider(props: React.PropsWithChildren<ChartsSlotsProviderProps>): React.JSX.Element;
+export {};

package/esm/context/ChartsSlotsContext.js

@@ -0,0 +1,35 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ChartsSlotsContext = /*#__PURE__*/React.createContext(null);
+
+/**
+ * Get the slots and slotProps from the nearest `ChartDataProvider` or `ChartDataProviderPro`.
+ * @returns {ChartsSlotsContextValue} The slots and slotProps from the context.
+ */
+if (process.env.NODE_ENV !== "production") ChartsSlotsContext.displayName = "ChartsSlotsContext";
+export function useChartsSlots() {
+  const context = React.useContext(ChartsSlotsContext);
+  if (context == null) {
+    throw new Error(['MUI X Charts: Could not find the Charts Slots context.', 'It looks like you rendered your component outside of a ChartDataProvider.', 'This can also happen if you are bundling multiple versions of the library.'].join('\n'));
+  }
+  return context;
+}
+export function ChartsSlotsProvider(props) {
+  const {
+    slots,
+    slotProps = {},
+    defaultSlots,
+    children
+  } = props;
+  const value = React.useMemo(() => ({
+    slots: _extends({}, defaultSlots, slots),
+    slotProps
+  }), [defaultSlots, slots, slotProps]);
+  return /*#__PURE__*/_jsx(ChartsSlotsContext.Provider, {
+    value: value,
+    children: children
+  });
+}

package/esm/context/index.d.ts

@@ -1 +1,2 @@
-export type { HighlightScope, FadeOptions, HighlightItemData, HighlightOptions } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
+export type { HighlightScope, FadeOptions, HighlightItemData, HighlightOptions } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
+export * from "./useChartApiContext.js";

package/esm/context/index.js

@@ -1 +1,2 @@
+export * from "./useChartApiContext.js";
 export {};

package/esm/context/useChartApiContext.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { ChartApi } from "../ChartContainer/index.js";
+/**
+ * The `useChartApiContext` hook provides access to the chart API.
+ * This is only available when the chart is rendered within a chart or a `ChartDataProvider` component.
+ * If you want to access the chart API outside those components, you should use the `apiRef` prop instead.
+ * @example
+ * const apiRef = useChartApiContext<ChartApi<'bar'>>();
+ */
+export declare function useChartApiContext<Api extends ChartApi>(): React.RefObject<Api>;

package/esm/context/useChartApiContext.js

@@ -0,0 +1,21 @@
+'use client';
+
+import * as React from 'react';
+import { useChartContext } from "./ChartProvider/index.js";
+/**
+ * The `useChartApiContext` hook provides access to the chart API.
+ * This is only available when the chart is rendered within a chart or a `ChartDataProvider` component.
+ * If you want to access the chart API outside those components, you should use the `apiRef` prop instead.
+ * @example
+ * const apiRef = useChartApiContext<ChartApi<'bar'>>();
+ */
+export function useChartApiContext() {
+  const {
+    publicAPI
+  } = useChartContext();
+  const apiRef = React.useRef(publicAPI);
+  React.useEffect(() => {
+    apiRef.current = publicAPI;
+  }, [publicAPI]);
+  return apiRef;
+}

package/esm/hooks/index.d.ts

@@ -10,6 +10,7 @@ export * from "./useScatterSeries.js";
 export * from "./usePieSeries.js";
 export * from "./useBarSeries.js";
 export * from "./useLineSeries.js";
+export * from "./useRadarSeries.js";
 export * from "./useItemHighlighted.js";
 export * from "./useItemHighlightedGetter.js";
 export * from "./useLegend.js";

package/esm/hooks/index.js

@@ -10,6 +10,7 @@ export * from "./useScatterSeries.js";
 export * from "./usePieSeries.js";
 export * from "./useBarSeries.js";
 export * from "./useLineSeries.js";
+export * from "./useRadarSeries.js";
 export * from "./useItemHighlighted.js";
 export * from "./useItemHighlightedGetter.js";
 export * from "./useLegend.js";

package/esm/hooks/useTicks.js

@@ -72,12 +72,8 @@ export function useTicks(options) {
     for (let i = 0; i < ticks.length; i += 1) {
       const value = ticks[i];
       const offset = scale(value);
-      if (instance.isPointInside({
-        x: offset,
-        y: offset
-      }, {
-        direction
-      })) {
+      const isInside = direction === 'x' ? instance.isXInside(offset) : instance.isYInside(offset);
+      if (isInside) {
         visibleTicks.push({
           value,
           formattedValue: valueFormatter?.(value, {

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.3.1
+ * @mui/x-charts v8.5.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/internals/constants.d.ts

@@ -1,4 +1,6 @@
+import type { ZoomSliderShowTooltip } from "./plugins/featurePlugins/useChartCartesianAxis/zoom.types.js";
 /** 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;
+export declare const DEFAULT_ZOOM_SLIDER_SIZE: number;
+export declare const DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP: ZoomSliderShowTooltip;

package/esm/internals/constants.js

@@ -2,4 +2,5 @@
 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;
+export const DEFAULT_ZOOM_SLIDER_SIZE = 20 + 2 * ZOOM_SLIDER_MARGIN;
+export const DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP = 'hover';

package/esm/internals/consumeSlots.js

@@ -94,4 +94,5 @@ export const consumeSlots = (name, slotPropName, options, InComponent) => {
     }));
   }
   return /*#__PURE__*/React.forwardRef(ConsumeSlotsInternal);
-};
+};
+if (process.env.NODE_ENV !== "production") consumeSlots.displayName = "consumeSlots";

package/esm/internals/consumeThemeProps.js

@@ -60,6 +60,7 @@ export const consumeThemeProps = (name, options, InComponent) => /*#__PURE__*/Re
   const theme = useTheme();
   const classes = options.classesResolver?.(outProps, theme);
   const OutComponent = /*#__PURE__*/React.forwardRef(InComponent);
+  if (process.env.NODE_ENV !== "production") OutComponent.displayName = "OutComponent";
   if (process.env.NODE_ENV !== 'production') {
     OutComponent.displayName = `consumeThemeProps(${name})`;
   }
@@ -67,4 +68,5 @@ export const consumeThemeProps = (name, options, InComponent) => /*#__PURE__*/Re
     classes: classes,
     ref: ref
   }));
-});
+});
+if (process.env.NODE_ENV !== "production") consumeThemeProps.displayName = "consumeThemeProps";

package/esm/internals/dateHelpers.d.ts

@@ -0,0 +1,15 @@
+import { AxisConfig } from "../models/index.js";
+import { ChartsAxisProps } from "../models/axis.js";
+/**
+ * Checks if the provided data array contains Date objects.
+ * @param data The data array to check.
+ * @returns A type predicate indicating if the data is an array of Date objects.
+ */
+export declare const isDateData: (data?: readonly any[]) => data is Date[];
+/**
+ * Creates a formatter function for date values.
+ * @param axis The axis configuration.
+ * @param range The range for the time scale.
+ * @returns A formatter function for date values.
+ */
+export declare function createDateFormatter(axis: AxisConfig<'band' | 'point', any, ChartsAxisProps>, range: number[]): AxisConfig<'band' | 'point', any, ChartsAxisProps>['valueFormatter'];

package/esm/internals/dateHelpers.js

@@ -0,0 +1,20 @@
+import { scaleTime } from '@mui/x-charts-vendor/d3-scale';
+/**
+ * Checks if the provided data array contains Date objects.
+ * @param data The data array to check.
+ * @returns A type predicate indicating if the data is an array of Date objects.
+ */
+export const isDateData = data => data?.[0] instanceof Date;
+
+/**
+ * Creates a formatter function for date values.
+ * @param axis The axis configuration.
+ * @param range The range for the time scale.
+ * @returns A formatter function for date values.
+ */
+export function createDateFormatter(axis, range) {
+  const timeScale = scaleTime(axis.data, range);
+  return (v, {
+    location
+  }) => location === 'tick' ? timeScale.tickFormat(axis.tickNumber)(v) : `${v.toLocaleString()}`;
+}

package/esm/internals/domUtils.d.ts

@@ -14,5 +14,4 @@ export declare const getStyleString: (style: React.CSSProperties) => string;
 export declare const getStringSize: (text: string | number, style?: React.CSSProperties) => {
   width: number;
   height: number;
-};
-export declare function unstable_cleanupDOM(): void;
+};

package/esm/internals/domUtils.js

@@ -5,10 +5,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 function isSsr() {
   return typeof window === 'undefined';
 }
-const stringCache = {
-  widthCache: {},
-  cacheCount: 0
-};
+const stringCache = new Map();
 const MAX_CACHE_NUM = 2000;
 const SPAN_STYLE = {
   position: 'absolute',
@@ -75,8 +72,9 @@ export const getStringSize = (text, style = {}) => {
   const str = `${text}`;
   const styleString = getStyleString(style);
   const cacheKey = `${str}-${styleString}`;
-  if (stringCache.widthCache[cacheKey]) {
-    return stringCache.widthCache[cacheKey];
+  const size = stringCache.get(cacheKey);
+  if (size) {
+    return size;
   }
   try {
     let measurementSpan = document.getElementById(MEASUREMENT_SPAN_ID);
@@ -99,12 +97,9 @@ export const getStringSize = (text, style = {}) => {
       width: rect.width,
       height: rect.height
     };
-    stringCache.widthCache[cacheKey] = result;
-    if (stringCache.cacheCount + 1 > MAX_CACHE_NUM) {
-      stringCache.cacheCount = 0;
-      stringCache.widthCache = {};
-    } else {
-      stringCache.cacheCount += 1;
+    stringCache.set(cacheKey, result);
+    if (stringCache.size + 1 > MAX_CACHE_NUM) {
+      stringCache.clear();
     }
     if (process.env.NODE_ENV === 'test') {
       // In test environment, we clean the measurement span immediately
@@ -125,10 +120,4 @@ export const getStringSize = (text, style = {}) => {
       height: 0
     };
   }
-};
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export function unstable_cleanupDOM() {
-  // const measurementSpan = document.getElementById(MEASUREMENT_SPAN_ID);
-  // measurementSpan?.remove();
-}
+};

package/esm/internals/index.d.ts

@@ -7,6 +7,7 @@ export { useDrawingArea } from "../hooks/useDrawingArea.js";
 export { useScatterChartProps } from "../ScatterChart/useScatterChartProps.js";
 export { useLineChartProps } from "../LineChart/useLineChartProps.js";
 export { useBarChartProps } from "../BarChart/useBarChartProps.js";
+export { useRadarChartProps } from "../RadarChart/useRadarChartProps.js";
 export * from "../ChartContainer/useChartContainerProps.js";
 export * from "../ChartDataProvider/useChartDataProviderProps.js";
 export * from "./createSeriesSelectorOfType.js";
@@ -26,20 +27,22 @@ export * from "./store/useSelector.js";
 export * from "../BarChart/BarChart.plugins.js";
 export * from "../LineChart/LineChart.plugins.js";
 export * from "../ScatterChart/ScatterChart.plugins.js";
+export * from "../RadarChart/RadarChart.plugins.js";
 export * from "./defaultizeValueFormatter.js";
 export * from "./configInit.js";
 export * from "./getLabel.js";
 export * from "./getSVGPoint.js";
 export * from "./isDefined.js";
-export { unstable_cleanupDOM } from "./domUtils.js";
 export * from "./getScale.js";
 export * from "./stackSeries.js";
 export * from "./getCurve.js";
 export * from "./consumeSlots.js";
 export * from "./consumeThemeProps.js";
 export * from "./defaultizeMargin.js";
+export * from "./dateHelpers.js";
 export { getAxisExtremum } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisExtremum.js";
 export * from "../context/ChartProvider/index.js";
+export * from "../context/ChartsSlotsContext.js";
 export * from "../models/seriesType/config.js";
 export * from "../models/seriesType/common.js";
 export * from "../models/z-axis.js";

package/esm/internals/index.js

@@ -10,6 +10,7 @@ export { useDrawingArea } from "../hooks/useDrawingArea.js";
 export { useScatterChartProps } from "../ScatterChart/useScatterChartProps.js";
 export { useLineChartProps } from "../LineChart/useLineChartProps.js";
 export { useBarChartProps } from "../BarChart/useBarChartProps.js";
+export { useRadarChartProps } from "../RadarChart/useRadarChartProps.js";
 export * from "../ChartContainer/useChartContainerProps.js";
 export * from "../ChartDataProvider/useChartDataProviderProps.js";
 export * from "./createSeriesSelectorOfType.js";
@@ -34,6 +35,7 @@ export * from "./store/useSelector.js";
 export * from "../BarChart/BarChart.plugins.js";
 export * from "../LineChart/LineChart.plugins.js";
 export * from "../ScatterChart/ScatterChart.plugins.js";
+export * from "../RadarChart/RadarChart.plugins.js";
 
 // utils
 export * from "./defaultizeValueFormatter.js";
@@ -41,17 +43,18 @@ export * from "./configInit.js";
 export * from "./getLabel.js";
 export * from "./getSVGPoint.js";
 export * from "./isDefined.js";
-export { unstable_cleanupDOM } from "./domUtils.js";
 export * from "./getScale.js";
 export * from "./stackSeries.js";
 export * from "./getCurve.js";
 export * from "./consumeSlots.js";
 export * from "./consumeThemeProps.js";
 export * from "./defaultizeMargin.js";
+export * from "./dateHelpers.js";
 
 // contexts
 export { getAxisExtremum } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisExtremum.js";
 export * from "../context/ChartProvider/index.js";
+export * from "../context/ChartsSlotsContext.js";
 
 // series configuration
 export * from "../models/seriesType/config.js";

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

@@ -1,4 +1,6 @@
+import type * as React from 'react';
 import { ChartsBaseSlots } from "../../models/slots/chartsBaseSlots.js";
 import { ChartsIconSlots } from "../../models/slots/chartsIconSlots.js";
 export type ChartsSlots = ChartsBaseSlots & ChartsIconSlots;
+export type ChartsSlotProps = { [key in keyof ChartsSlots]: React.ComponentProps<ChartsSlots[key]> };
 export declare const defaultSlotsMaterial: ChartsSlots;