@mui/x-charts 8.5.0 → 8.5.2

package/RadarChart/RadarChart.js

@@ -11,7 +11,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
-var _ChartsToolbar = require("../Toolbar/internals/ChartsToolbar");
 var _ChartsLegend = require("../ChartsLegend");
 var _ChartsOverlay = require("../ChartsOverlay/ChartsOverlay");
 var _useRadarChartProps = require("./useRadarChartProps");
@@ -49,10 +48,10 @@ const RadarChart = exports.RadarChart = /*#__PURE__*/React.forwardRef(function R
     children
   } = (0, _useRadarChartProps.useRadarChartProps)(props);
   const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
-  const Toolbar = props.slots?.toolbar ?? _ChartsToolbar.ChartsToolbar;
+  const Toolbar = props.slots?.toolbar;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarDataProvider.RadarDataProvider, (0, _extends2.default)({}, radarDataProviderProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWrapper.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
-      children: [props.showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, {}) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
+      children: [props.showToolbar && Toolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
         ref: ref,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarGrid.RadarGrid, (0, _extends2.default)({}, radarGrid)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarMetricLabels.RadarMetricLabels, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarSeriesPlot.RadarSeriesArea, {}), highlight === 'axis' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarAxisHighlight.RadarAxisHighlight, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarSeriesPlot.RadarSeriesMarks, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), children]
       })), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props.slotProps?.tooltip))]

package/RadarChart/index.d.ts

@@ -2,7 +2,7 @@ export { RadarChart as Unstable_RadarChart } from "./RadarChart.js";
 export { RadarChart } from "./RadarChart.js";
 export { RadarDataProvider as Unstable_RadarDataProvider } from "./RadarDataProvider/index.js";
 export { RadarDataProvider } from "./RadarDataProvider/index.js";
-export type { RadarChartProps } from "./RadarChart.js";
+export type { RadarChartProps, RadarChartSlots, RadarChartSlotProps } from "./RadarChart.js";
 export type { RadarDataProviderProps } from "./RadarDataProvider/index.js";
 export * from "./RadarGrid/index.js";
 export * from "./RadarAxisHighlight/index.js";

package/ScatterChart/ScatterChart.js

@@ -23,7 +23,6 @@ var _useChartContainerProps = require("../ChartContainer/useChartContainerProps"
 var _ChartDataProvider = require("../ChartDataProvider");
 var _ChartsSurface = require("../ChartsSurface");
 var _ChartsWrapper = require("../internals/components/ChartsWrapper");
-var _ChartsToolbar = require("../Toolbar/internals/ChartsToolbar");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Demos:
@@ -56,10 +55,10 @@ const ScatterChart = exports.ScatterChart = /*#__PURE__*/React.forwardRef(functi
     chartsSurfaceProps
   } = (0, _useChartContainerProps.useChartContainerProps)(chartContainerProps, ref);
   const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
-  const Toolbar = props.slots?.toolbar ?? _ChartsToolbar.ChartsToolbar;
+  const Toolbar = props.slots?.toolbar;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProvider.ChartDataProvider, (0, _extends2.default)({}, chartDataProviderProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWrapper.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
-      children: [props.showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, {}) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
+      children: [props.showToolbar && Toolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
           "data-drawing-container": true,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScatterPlot.ScatterPlot, (0, _extends2.default)({}, scatterPlotProps))

package/Toolbar/Toolbar.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
-export interface ChartsToolbarProps extends React.ComponentProps<'div'> {
+import { RenderProp } from '@mui/x-internals/useComponentRenderer';
+declare const ToolbarRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
+export interface ToolbarProps extends React.ComponentProps<'div'> {
   className?: string;
+  /**
+   * A function to customize rendering of the component.
+   */
+  render?: RenderProp<React.ComponentProps<typeof ToolbarRoot>>;
 }
-export declare function Toolbar({
-  className,
-  ...other
-}: ChartsToolbarProps): React.JSX.Element;
-export declare namespace Toolbar {
-  var propTypes: any;
-}
+export declare const Toolbar: React.ForwardRefExoticComponent<Omit<ToolbarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export {};

package/Toolbar/Toolbar.js

@@ -5,16 +5,18 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Toolbar = Toolbar;
+exports.Toolbar = void 0;
 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 _styles = require("@mui/material/styles");
 var _clsx = _interopRequireDefault(require("clsx"));
+var _useComponentRenderer = require("@mui/x-internals/useComponentRenderer");
+var _ToolbarContext = require("@mui/x-internals/ToolbarContext");
 var _chartToolbarClasses = require("./chartToolbarClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className"];
+const _excluded = ["className", "render"];
 const ToolbarRoot = (0, _styles.styled)('div', {
   name: 'MuiChartsToolbar',
   slot: 'Root'
@@ -27,24 +29,38 @@ const ToolbarRoot = (0, _styles.styled)('div', {
   justifyContent: 'end',
   gap: theme.spacing(0.25),
   padding: theme.spacing(0.5),
+  marginBottom: theme.spacing(1.5),
   minHeight: 44,
   boxSizing: 'border-box',
   border: `1px solid ${(theme.vars || theme).palette.divider}`,
   borderRadius: 4
 }));
-function Toolbar(_ref) {
+const Toolbar = exports.Toolbar = /*#__PURE__*/React.forwardRef(function Toolbar(_ref, ref) {
   let {
-      className
+      className,
+      render
     } = _ref,
     other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ToolbarRoot, (0, _extends2.default)({
+  const element = (0, _useComponentRenderer.useComponentRenderer)(ToolbarRoot, render, (0, _extends2.default)({
+    role: 'toolbar',
+    'aria-orientation': 'horizontal',
     className: (0, _clsx.default)(_chartToolbarClasses.chartsToolbarClasses.root, className)
-  }, other));
-}
+  }, other, {
+    ref
+  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolbarContext.ToolbarContextProvider, {
+    children: element
+  });
+});
+if (process.env.NODE_ENV !== "production") Toolbar.displayName = "Toolbar";
 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.default.string
+  className: _propTypes.default.string,
+  /**
+   * A function to customize rendering of the component.
+   */
+  render: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func])
 } : void 0;

package/Toolbar/Toolbar.types.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ChartsToolbarProps } from "./Toolbar.js";
+export interface ChartsToolbarProps {}
 export interface ChartsToolbarSlots {
   /**
    * Custom component for the toolbar.

package/Toolbar/ToolbarButton.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;
@@ -11,9 +12,12 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
 var _useComponentRenderer = require("@mui/x-internals/useComponentRenderer");
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+var _ToolbarContext = require("@mui/x-internals/ToolbarContext");
 var _ChartsSlotsContext = require("../context/ChartsSlotsContext");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["render"];
+const _excluded = ["render", "onKeyDown", "onFocus", "disabled", "aria-disabled"],
+  _excluded2 = ["tabIndex"];
 const ToolbarButton = exports.ToolbarButton = /*#__PURE__*/React.forwardRef(function ToolbarButton(props, ref) {
   const {
       render
@@ -23,8 +27,17 @@ const ToolbarButton = exports.ToolbarButton = /*#__PURE__*/React.forwardRef(func
     slots,
     slotProps
   } = (0, _ChartsSlotsContext.useChartsSlots)();
-  const element = (0, _useComponentRenderer.useComponentRenderer)(slots.baseIconButton, render, (0, _extends2.default)({}, slotProps?.baseIconButton, other, {
-    ref
+  const buttonRef = React.useRef(null);
+  const handleRef = (0, _useForkRef.default)(buttonRef, ref);
+  const _useRegisterToolbarBu = (0, _ToolbarContext.useRegisterToolbarButton)(props, buttonRef),
+    {
+      tabIndex
+    } = _useRegisterToolbarBu,
+    toolbarButtonProps = (0, _objectWithoutPropertiesLoose2.default)(_useRegisterToolbarBu, _excluded2);
+  const element = (0, _useComponentRenderer.useComponentRenderer)(slots.baseIconButton, render, (0, _extends2.default)({}, slotProps?.baseIconButton, {
+    tabIndex
+  }, other, toolbarButtonProps, {
+    ref: handleRef
   }));
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
     children: element
@@ -42,5 +55,6 @@ process.env.NODE_ENV !== "production" ? ToolbarButton.propTypes = {
    * A function to customize the rendering of the component.
    */
   render: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
-  style: _propTypes.default.object
+  style: _propTypes.default.object,
+  tabIndex: _propTypes.default.number
 } : void 0;

package/esm/BarChart/BarChart.js

@@ -17,7 +17,6 @@ import { ChartDataProvider } from "../ChartDataProvider/index.js";
 import { ChartsSurface } from "../ChartsSurface/index.js";
 import { useChartContainerProps } from "../ChartContainer/useChartContainerProps.js";
 import { ChartsWrapper } from "../internals/components/ChartsWrapper/index.js";
-import { ChartsToolbar } from "../Toolbar/internals/ChartsToolbar.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Demos:
@@ -53,10 +52,10 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(inProps, ref) {
     chartsSurfaceProps
   } = useChartContainerProps(chartContainerProps, ref);
   const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
-  const Toolbar = props.slots?.toolbar ?? ChartsToolbar;
+  const Toolbar = props.slots?.toolbar;
   return /*#__PURE__*/_jsx(ChartDataProvider, _extends({}, chartDataProviderProps, {
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
-      children: [props.showToolbar ? /*#__PURE__*/_jsx(Toolbar, {}) : null, !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
+      children: [props.showToolbar && Toolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
           children: [/*#__PURE__*/_jsx(BarPlot, _extends({}, barPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
         })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]

package/esm/BarChart/BarLabel/BarLabel.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BarLabelOwnerState } from "./BarLabel.types.js";
-export declare const BarLabelComponent: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<React.SVGTextElementAttributes<SVGTextElement>, keyof React.SVGTextElementAttributes<SVGTextElement>>, {}>;
+export declare const BarLabelComponent: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.SVGTextElementAttributes<SVGTextElement>, keyof React.SVGTextElementAttributes<SVGTextElement>>, {}>;
 export type BarLabelProps = Omit<React.SVGProps<SVGTextElement>, 'ref' | 'id' | 'x' | 'y' | 'width' | 'height'> & BarLabelOwnerState & {
   /**
    * The x-coordinate of the stack this bar label belongs to.

package/esm/BarChart/seriesConfig/seriesProcessor.js

@@ -56,7 +56,7 @@ const seriesProcessor = (params, dataset) => {
                 warnOnce([`MUI X Charts: your dataset key "${dataKey}" is used for plotting bars, but contains nonnumerical elements.`, 'Bar plots only support numbers and null values.']);
               }
             }
-            return 0;
+            return null;
           }
           return value;
         }) : series[id].data,

package/esm/ChartsAxisHighlight/ChartsAxisHighlightPath.d.ts

@@ -1,5 +1,5 @@
 import { ChartsAxisHighlightType } from "./ChartsAxisHighlight.types.js";
-export declare const ChartsAxisHighlightPath: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+export declare const ChartsAxisHighlightPath: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
   ownerState: {
     axisHighlight: ChartsAxisHighlightType;
   };

package/esm/ChartsGrid/ChartsHorizontalGrid.js

@@ -33,6 +33,6 @@ export function ChartsGridHorizontal(props) {
       x1: start,
       x2: end,
       className: classes.horizontalLine
-    }, `horizontal-${value.getTime?.() ?? value}`))
+    }, `horizontal-${value?.getTime?.() ?? value}`))
   });
 }

package/esm/ChartsGrid/ChartsVerticalGrid.js

@@ -33,6 +33,6 @@ export function ChartsGridVertical(props) {
       x1: offset,
       x2: offset,
       className: classes.verticalLine
-    }, `vertical-${value.getTime?.() ?? value}`))
+    }, `vertical-${value?.getTime?.() ?? value}`))
   });
 }

package/esm/ChartsGrid/styledComponents.d.ts

@@ -1,2 +1,2 @@
-export declare const GridRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<import("react").SVGProps<SVGGElement>, keyof import("react").SVGProps<SVGGElement>>, {}>;
-export declare const GridLine: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<import("react").SVGLineElementAttributes<SVGLineElement>, keyof import("react").SVGLineElementAttributes<SVGLineElement>>, {}>;
+export declare const GridRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").SVGProps<SVGGElement>, keyof import("react").SVGProps<SVGGElement>>, {}>;
+export declare const GridLine: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").SVGLineElementAttributes<SVGLineElement>, keyof import("react").SVGLineElementAttributes<SVGLineElement>>, {}>;

package/esm/ChartsReferenceLine/common.d.ts

@@ -38,4 +38,4 @@ export type CommonChartsReferenceLineProps = {
    */
   classes?: Partial<ChartsReferenceLineClasses>;
 };
-export declare const ReferenceLineRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").SVGProps<SVGGElement>, {}>;
+export declare const ReferenceLineRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").SVGProps<SVGGElement>, {}>;

package/esm/ChartsTooltip/ChartsTooltip.js

@@ -25,7 +25,7 @@ function ChartsTooltip(props) {
   } = props;
   const classes = useUtilityClasses(propClasses);
   return /*#__PURE__*/_jsx(ChartsTooltipContainer, _extends({}, props, {
-    classes: classes,
+    classes: propClasses,
     children: trigger === 'axis' ? /*#__PURE__*/_jsx(ChartsAxisTooltipContent, {
       classes: classes
     }) : /*#__PURE__*/_jsx(ChartsItemTooltipContent, {

package/esm/ChartsTooltip/ChartsTooltipContainer.js

@@ -11,7 +11,8 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import Popper from '@mui/material/Popper';
 import NoSsr from '@mui/material/NoSsr';
 import { useSvgRef } from "../hooks/useSvgRef.js";
-import { usePointerType } from "./utils.js";
+import { useIsFineMainPointer, usePointerType } from "./utils.js";
+import { useUtilityClasses } from "./chartsTooltipClasses.js";
 import { useSelector } from "../internals/store/useSelector.js";
 import { useStore } from "../internals/store/useStore.js";
 import { selectorChartsInteractionItemIsDefined } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
@@ -46,12 +47,14 @@ function ChartsTooltipContainer(inProps) {
   });
   const {
       trigger = 'axis',
-      classes,
+      classes: propClasses,
       children
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const classes = useUtilityClasses(propClasses);
   const svgRef = useSvgRef();
   const pointerType = usePointerType();
+  const isFineMainPointer = useIsFineMainPointer();
   const popperRef = React.useRef(null);
   const positionRef = useLazyRef(() => ({
     x: 0,
@@ -60,14 +63,12 @@ function ChartsTooltipContainer(inProps) {
   const axisSystem = useAxisSystem();
   const store = useStore();
   const isOpen = useSelector(store, trigger === 'axis' ? axisSystem === 'polar' && selectorChartsInteractionPolarAxisTooltip || axisSystem === 'cartesian' && selectorChartsInteractionAxisTooltip || noAxis : selectorChartsInteractionItemIsDefined);
-  const popperOpen = pointerType !== null && isOpen; // tooltipHasData;
-
   React.useEffect(() => {
     const element = svgRef.current;
     if (element === null) {
       return () => {};
     }
-    const handleMove = event => {
+    const handlePointerEvent = event => {
       // eslint-disable-next-line react-compiler/react-compiler
       positionRef.current = {
         x: event.clientX,
@@ -75,9 +76,11 @@ function ChartsTooltipContainer(inProps) {
       };
       popperRef.current?.update();
     };
-    element.addEventListener('pointermove', handleMove);
+    element.addEventListener('pointerdown', handlePointerEvent);
+    element.addEventListener('pointermove', handlePointerEvent);
     return () => {
-      element.removeEventListener('pointermove', handleMove);
+      element.removeEventListener('pointerdown', handlePointerEvent);
+      element.removeEventListener('pointermove', handlePointerEvent);
     };
   }, [svgRef, positionRef]);
   const anchorEl = React.useMemo(() => ({
@@ -93,32 +96,34 @@ function ChartsTooltipContainer(inProps) {
       toJSON: () => ''
     })
   }), [positionRef]);
+  const isMouse = pointerType?.pointerType === 'mouse' || isFineMainPointer;
+  const isTouch = pointerType?.pointerType === 'touch' || !isFineMainPointer;
   const modifiers = React.useMemo(() => [{
     name: 'offset',
     options: {
       offset: () => {
-        if (pointerType?.pointerType !== 'touch') {
-          // The popper offset: [skidding, distance]
-          return [0, 8];
+        if (isTouch) {
+          return [0, 64];
         }
-        return [0, 64];
+        // The popper offset: [skidding, distance]
+        return [0, 8];
       }
     }
-  }, ...(pointerType?.pointerType === 'mouse' ? [] // Keep default behavior
-  : [{
+  }, ...(!isMouse ? [{
     name: 'flip',
     options: {
       fallbackPlacements: ['top-end', 'top-start', 'bottom-end', 'bottom']
     }
-  }])], [pointerType]);
+  }] : []) // Keep default behavior
+  ], [isMouse, isTouch]);
   if (trigger === 'none') {
     return null;
   }
   return /*#__PURE__*/_jsx(NoSsr, {
-    children: popperOpen && /*#__PURE__*/_jsx(ChartsTooltipRoot, _extends({
+    children: isOpen && /*#__PURE__*/_jsx(ChartsTooltipRoot, _extends({
       className: classes?.root,
-      open: popperOpen,
-      placement: pointerType?.pointerType === 'mouse' ? 'right-start' : 'top',
+      open: isOpen,
+      placement: isMouse ? 'right-start' : 'top',
       popperRef: popperRef,
       anchorEl: anchorEl,
       modifiers: modifiers

package/esm/ChartsTooltip/ChartsTooltipTable.d.ts

@@ -1,18 +1,18 @@
 /**
  * @ignore - internal component.
  */
-export declare const ChartsTooltipPaper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const ChartsTooltipPaper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;
 /**
  * @ignore - internal component.
  */
-export declare const ChartsTooltipTable: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, keyof import("react").ClassAttributes<HTMLTableElement> | keyof import("react").TableHTMLAttributes<HTMLTableElement>>, {}>;
+export declare const ChartsTooltipTable: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, keyof import("react").ClassAttributes<HTMLTableElement> | keyof import("react").TableHTMLAttributes<HTMLTableElement>>, {}>;
 /**
  * @ignore - internal component.
  */
-export declare const ChartsTooltipRow: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, keyof import("react").ClassAttributes<HTMLTableRowElement> | keyof import("react").HTMLAttributes<HTMLTableRowElement>>, {}>;
+export declare const ChartsTooltipRow: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, keyof import("react").ClassAttributes<HTMLTableRowElement> | keyof import("react").HTMLAttributes<HTMLTableRowElement>>, {}>;
 /**
  * @ignore - internal component.
  */
-export declare const ChartsTooltipCell: import("@emotion/styled").StyledComponent<Pick<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "p" | "style" | "typography" | "zIndex" | "classes" | "border" | "boxShadow" | "fontWeight" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "className" | "children" | "sx" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variant" | "variantMapping">, "p" | "slot" | "style" | "title" | "ref" | "typography" | "zIndex" | "classes" | "border" | "boxShadow" | "fontWeight" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "content" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "translate" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "sx" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variant" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+export declare const ChartsTooltipCell: import("@emotion/styled").StyledComponent<Pick<import("@mui/material/Typography").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "p" | "style" | "typography" | "zIndex" | "classes" | "border" | "boxShadow" | "fontWeight" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "className" | "children" | "sx" | "align" | "variant" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping">, "p" | "slot" | "style" | "title" | "ref" | "typography" | "zIndex" | "classes" | "border" | "boxShadow" | "fontWeight" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "content" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "translate" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "sx" | "align" | "variant" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
   component?: React.ElementType;
 }, {}, {}>;

package/esm/ChartsTooltip/utils.d.ts

@@ -13,4 +13,10 @@ type PointerType = Pick<MousePosition, 'pointerType'>;
 export declare function usePointerType(): null | PointerType;
 export type TriggerOptions = 'item' | 'axis' | 'none';
 export declare function utcFormatter(v: string | number | Date): string;
+/**
+ * Returns true if the main pointer is fine (e.g. mouse).
+ * This is useful for determining how to position tooltips or other UI elements based on the type of input device.
+ * @returns true if the main pointer is fine, false otherwise.
+ */
+export declare const useIsFineMainPointer: () => boolean;
 export {};

package/esm/ChartsTooltip/utils.js

@@ -1,6 +1,7 @@
 'use client';
 
 import * as React from 'react';
+import useMediaQuery from '@mui/material/useMediaQuery';
 import { useSvgRef } from "../hooks/index.js";
 /**
  * @deprecated We recommend using vanilla JS to let popper track mouse position.
@@ -80,4 +81,18 @@ export function utcFormatter(v) {
     return v.toUTCString();
   }
   return v.toLocaleString();
-}
+}
+
+// Taken from @mui/x-date-time-pickers
+const mainPointerFineMediaQuery = '@media (pointer: fine)';
+
+/**
+ * Returns true if the main pointer is fine (e.g. mouse).
+ * This is useful for determining how to position tooltips or other UI elements based on the type of input device.
+ * @returns true if the main pointer is fine, false otherwise.
+ */
+export const useIsFineMainPointer = () => {
+  return useMediaQuery(mainPointerFineMediaQuery, {
+    defaultMatches: true
+  });
+};

package/esm/LineChart/LineChart.js

@@ -4,7 +4,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
-import { ChartsToolbar } from "../Toolbar/internals/ChartsToolbar.js";
 import { AreaPlot } from "./AreaPlot.js";
 import { LinePlot } from "./LinePlot.js";
 import { MarkPlot } from "./MarkPlot.js";
@@ -58,10 +57,10 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(inProps, ref)
     chartsSurfaceProps
   } = useChartContainerProps(chartContainerProps, ref);
   const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
-  const Toolbar = props.slots?.toolbar ?? ChartsToolbar;
+  const Toolbar = props.slots?.toolbar;
   return /*#__PURE__*/_jsx(ChartDataProvider, _extends({}, chartDataProviderProps, {
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
-      children: [props.showToolbar ? /*#__PURE__*/_jsx(Toolbar, {}) : null, !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
+      children: [props.showToolbar && Toolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
           children: [/*#__PURE__*/_jsx(AreaPlot, _extends({}, areaPlotProps)), /*#__PURE__*/_jsx(LinePlot, _extends({}, linePlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
         })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx("g", {

package/esm/PieChart/PieChart.js

@@ -6,7 +6,7 @@ const _excluded = ["series", "width", "height", "margin", "colors", "sx", "skipA
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
-import { ChartsToolbar } from "../Toolbar/internals/ChartsToolbar.js";
+import { DEFAULT_PIE_CHART_MARGIN } from "../internals/constants.js";
 import { ChartsTooltip } from "../ChartsTooltip/index.js";
 import { ChartsLegend } from "../ChartsLegend/index.js";
 import { PiePlot } from "./PiePlot.js";
@@ -18,13 +18,6 @@ import { ChartsWrapper } from "../internals/components/ChartsWrapper/index.js";
 import { PIE_CHART_PLUGINS } from "./PieChart.plugins.js";
 import { defaultizeMargin } from "../internals/defaultizeMargin.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const defaultMargin = {
-  top: 5,
-  bottom: 5,
-  left: 5,
-  right: 5
-};
-
 /**
  * Demos:
  *
@@ -60,7 +53,7 @@ const PieChart = /*#__PURE__*/React.forwardRef(function PieChart(inProps, ref) {
       showToolbar
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const margin = defaultizeMargin(marginProps, defaultMargin);
+  const margin = defaultizeMargin(marginProps, DEFAULT_PIE_CHART_MARGIN);
   const {
     chartDataProviderProps,
     chartsSurfaceProps
@@ -79,13 +72,13 @@ const PieChart = /*#__PURE__*/React.forwardRef(function PieChart(inProps, ref) {
     plugins: PIE_CHART_PLUGINS
   }), ref);
   const Tooltip = slots?.tooltip ?? ChartsTooltip;
-  const Toolbar = props.slots?.toolbar ?? ChartsToolbar;
+  const Toolbar = props.slots?.toolbar;
   return /*#__PURE__*/_jsx(ChartDataProvider, _extends({}, chartDataProviderProps, {
     children: /*#__PURE__*/_jsxs(ChartsWrapper, {
       legendPosition: props.slotProps?.legend?.position,
       legendDirection: props?.slotProps?.legend?.direction ?? 'vertical',
       sx: sx,
-      children: [showToolbar ? /*#__PURE__*/_jsx(Toolbar, {}) : null, !hideLegend && /*#__PURE__*/_jsx(ChartsLegend, {
+      children: [showToolbar && Toolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, props.slotProps?.toolbar)) : null, !hideLegend && /*#__PURE__*/_jsx(ChartsLegend, {
         direction: props?.slotProps?.legend?.direction ?? 'vertical',
         slots: slots,
         slotProps: slotProps

package/esm/RadarChart/RadarChart.js

@@ -4,7 +4,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
-import { ChartsToolbar } from "../Toolbar/internals/ChartsToolbar.js";
 import { ChartsLegend } from "../ChartsLegend/index.js";
 import { ChartsOverlay } from "../ChartsOverlay/ChartsOverlay.js";
 import { useRadarChartProps } from "./useRadarChartProps.js";
@@ -42,10 +41,10 @@ const RadarChart = /*#__PURE__*/React.forwardRef(function RadarChart(inProps, re
     children
   } = useRadarChartProps(props);
   const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
-  const Toolbar = props.slots?.toolbar ?? ChartsToolbar;
+  const Toolbar = props.slots?.toolbar;
   return /*#__PURE__*/_jsx(RadarDataProvider, _extends({}, radarDataProviderProps, {
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
-      children: [props.showToolbar ? /*#__PURE__*/_jsx(Toolbar, {}) : null, !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
+      children: [props.showToolbar && Toolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
         ref: ref,
         children: [/*#__PURE__*/_jsx(RadarGrid, _extends({}, radarGrid)), /*#__PURE__*/_jsx(RadarMetricLabels, {}), /*#__PURE__*/_jsx(RadarSeriesArea, {}), highlight === 'axis' && /*#__PURE__*/_jsx(RadarAxisHighlight, {}), /*#__PURE__*/_jsx(RadarSeriesMarks, {}), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), children]
       })), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip))]