@mui/x-charts-pro 8.5.0 → 8.5.1

package/PieChartPro/PieChartPro.js

@@ -0,0 +1,204 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PieChartPro = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _internals = require("@mui/x-charts/internals");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
+var _ChartsOverlay = require("@mui/x-charts/ChartsOverlay");
+var React = _interopRequireWildcard(require("react"));
+var _ChartsTooltip = require("@mui/x-charts/ChartsTooltip");
+var _ChartsLegend = require("@mui/x-charts/ChartsLegend");
+var _ChartsSurface = require("@mui/x-charts/ChartsSurface");
+var _PieChart = require("@mui/x-charts/PieChart");
+var _useChartContainerProProps = require("../ChartContainerPro/useChartContainerProProps");
+var _ChartDataProviderPro = require("../ChartDataProviderPro");
+var _ChartsToolbarPro = require("../ChartsToolbarPro");
+var _PieChartPro2 = require("./PieChartPro.plugins");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["series", "width", "height", "margin", "colors", "sx", "skipAnimation", "hideLegend", "children", "slots", "slotProps", "onItemClick", "loading", "highlightedItem", "onHighlightChange", "className", "showToolbar"];
+const PieChartPro = exports.PieChartPro = /*#__PURE__*/React.forwardRef(function PieChartPro(inProps, ref) {
+  const props = (0, _styles.useThemeProps)({
+    props: inProps,
+    name: 'MuiPieChartPro'
+  });
+  const {
+      series,
+      width,
+      height,
+      margin: marginProps,
+      colors,
+      sx,
+      skipAnimation,
+      hideLegend,
+      children,
+      slots,
+      slotProps,
+      onItemClick,
+      loading,
+      highlightedItem,
+      onHighlightChange,
+      className,
+      showToolbar
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const margin = (0, _internals.defaultizeMargin)(marginProps, _internals.DEFAULT_PIE_CHART_MARGIN);
+  const {
+    chartDataProviderProProps,
+    chartsSurfaceProps
+  } = (0, _useChartContainerProProps.useChartContainerProProps)((0, _extends2.default)({}, other, {
+    series: series.map(s => (0, _extends2.default)({
+      type: 'pie'
+    }, s)),
+    width,
+    height,
+    margin,
+    colors,
+    highlightedItem,
+    onHighlightChange,
+    className,
+    skipAnimation,
+    plugins: _PieChartPro2.PIE_CHART_PRO_PLUGINS
+  }), ref);
+  const Tooltip = slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
+  const Toolbar = props.slots?.toolbar ?? _ChartsToolbarPro.ChartsToolbarPro;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProviderPro.ChartDataProviderPro, (0, _extends2.default)({}, chartDataProviderProProps, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.ChartsWrapper, {
+      legendPosition: props.slotProps?.legend?.position,
+      legendDirection: props?.slotProps?.legend?.direction ?? 'vertical',
+      sx: sx,
+      children: [showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, {}) : null, !hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, {
+        direction: props?.slotProps?.legend?.direction ?? 'vertical',
+        slots: slots,
+        slotProps: slotProps
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PieChart.PiePlot, {
+          slots: slots,
+          slotProps: slotProps,
+          onItemClick: onItemClick
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, {
+          loading: loading,
+          slots: slots,
+          slotProps: slotProps
+        }), children]
+      })), !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({
+        trigger: "item"
+      }, slotProps?.tooltip))]
+    })
+  }));
+});
+if (process.env.NODE_ENV !== "production") PieChartPro.displayName = "PieChartPro";
+process.env.NODE_ENV !== "production" ? PieChartPro.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  apiRef: _propTypes.default.shape({
+    current: _propTypes.default.shape({
+      exportAsImage: _propTypes.default.func.isRequired,
+      exportAsPrint: _propTypes.default.func.isRequired
+    })
+  }),
+  children: _propTypes.default.node,
+  className: _propTypes.default.string,
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.func]),
+  /**
+   * An array of objects that can be used to populate series and axes data using their `dataKey` property.
+   */
+  dataset: _propTypes.default.arrayOf(_propTypes.default.object),
+  desc: _propTypes.default.string,
+  /**
+   * The height of the chart in px. If not defined, it takes the height of the parent element.
+   */
+  height: _propTypes.default.number,
+  /**
+   * If `true`, the legend is not rendered.
+   */
+  hideLegend: _propTypes.default.bool,
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem: _propTypes.default.shape({
+    dataIndex: _propTypes.default.number,
+    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired
+  }),
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id: _propTypes.default.string,
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading: _propTypes.default.bool,
+  /**
+   * Localized text for chart components.
+   */
+  localeText: _propTypes.default.object,
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
+    bottom: _propTypes.default.number,
+    left: _propTypes.default.number,
+    right: _propTypes.default.number,
+    top: _propTypes.default.number
+  })]),
+  /**
+   * The callback fired when the highlighted item changes.
+   *
+   * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
+   */
+  onHighlightChange: _propTypes.default.func,
+  /**
+   * Callback fired when a pie arc is clicked.
+   */
+  onItemClick: _propTypes.default.func,
+  /**
+   * The series to display in the pie chart.
+   * An array of [[PieSeriesType]] objects.
+   */
+  series: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar: _propTypes.default.bool,
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation: _propTypes.default.bool,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: _propTypes.default.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: _propTypes.default.object,
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+  theme: _propTypes.default.oneOf(['dark', 'light']),
+  title: _propTypes.default.string,
+  /**
+   * The width of the chart in px. If not defined, it takes the width of the parent element.
+   */
+  width: _propTypes.default.number
+} : void 0;

package/PieChartPro/PieChartPro.plugins.d.ts

@@ -0,0 +1,4 @@
+import { ConvertSignaturesIntoPlugins, UseChartHighlightSignature, UseChartInteractionSignature } from '@mui/x-charts/internals';
+import { UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
+export type PieChartProPluginSignatures = [UseChartInteractionSignature, UseChartHighlightSignature, UseChartProExportSignature];
+export declare const PIE_CHART_PRO_PLUGINS: ConvertSignaturesIntoPlugins<PieChartProPluginSignatures>;

package/PieChartPro/PieChartPro.plugins.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PIE_CHART_PRO_PLUGINS = void 0;
+var _internals = require("@mui/x-charts/internals");
+var _useChartProExport = require("../internals/plugins/useChartProExport");
+const PIE_CHART_PRO_PLUGINS = exports.PIE_CHART_PRO_PLUGINS = [..._internals.PIE_CHART_PLUGINS, _useChartProExport.useChartProExport];

package/PieChartPro/index.d.ts

@@ -0,0 +1 @@
+export * from "./PieChartPro.js";

package/PieChartPro/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _PieChartPro = require("./PieChartPro");
+Object.keys(_PieChartPro).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _PieChartPro[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PieChartPro[key];
+    }
+  });
+});

package/RadarChartPro/RadarChartPro.js

@@ -51,7 +51,7 @@ const RadarChartPro = exports.RadarChartPro = /*#__PURE__*/React.forwardRef(func
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarChart.RadarDataProvider, (0, _extends2.default)({}, radarDataProviderProProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.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 ? /*#__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)(_RadarChart.RadarGrid, (0, _extends2.default)({}, radarGrid)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarChart.RadarMetricLabels, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarChart.RadarSeriesArea, {}), highlight === 'axis' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarChart.RadarAxisHighlight, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarChart.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/ScatterChartPro/ScatterChartPro.js

@@ -76,7 +76,7 @@ const ScatterChartPro = exports.ScatterChartPro = /*#__PURE__*/React.forwardRef(
   const Toolbar = props.slots?.toolbar ?? _ChartsToolbarPro.ChartsToolbarPro;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProviderPro.ChartDataProviderPro, (0, _extends2.default)({}, chartDataProviderProProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
-      children: [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: [showToolbar ? /*#__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)(_ChartZoomSlider.ChartZoomSlider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
           "data-drawing-container": true,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScatterChart.ScatterPlot, (0, _extends2.default)({}, scatterPlotProps))

package/esm/BarChartPro/BarChartPro.js

@@ -73,7 +73,7 @@ const BarChartPro = /*#__PURE__*/React.forwardRef(function BarChartPro(inProps,
   const Toolbar = props.slots?.toolbar ?? ChartsToolbarPro;
   return /*#__PURE__*/_jsx(ChartDataProviderPro, _extends({}, chartDataProviderProProps, {
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
-      children: [showToolbar ? /*#__PURE__*/_jsx(Toolbar, {}) : null, !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
+      children: [showToolbar ? /*#__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(ChartZoomSlider, {}), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]

package/esm/ChartContainerPro/ChartProApi.d.ts

@@ -6,6 +6,7 @@ import { BarChartProPluginsSignatures } from "../BarChartPro/BarChartPro.plugins
 import { AllPluginSignatures, DefaultPluginSignatures } from "../internals/plugins/allPlugins.js";
 import { FunnelChartPluginsSignatures } from "../FunnelChart/FunnelChart.plugins.js";
 import { RadarChartProPluginsSignatures } from "../RadarChartPro/RadarChartPro.plugins.js";
+import { PieChartProPluginSignatures } from "../PieChartPro/PieChartPro.plugins.js";
 type PluginsPerSeriesType = {
   heatmap: HeatmapPluginsSignatures;
   line: LineChartProPluginsSignatures;
@@ -13,6 +14,7 @@ type PluginsPerSeriesType = {
   bar: BarChartProPluginsSignatures;
   funnel: FunnelChartPluginsSignatures;
   radar: RadarChartProPluginsSignatures;
+  pie: PieChartProPluginSignatures;
   composition: DefaultPluginSignatures;
 };
 /**

package/esm/ChartDataProviderPro/ChartDataProviderPro.js

@@ -11,7 +11,7 @@ import { defaultSlotsMaterial } from "../internals/material/index.js";
 import { DEFAULT_PLUGINS } from "../internals/plugins/allPlugins.js";
 import { useChartDataProviderProProps } from "./useChartDataProviderProProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const releaseInfo = "MTc0ODQ2OTYwMDAwMA==";
+const releaseInfo = "MTc0OTA3MDgwMDAwMA==";
 const packageIdentifier = 'x-charts-pro';
 /**
  * Orchestrates the data providers for the chart components and hooks.

package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.d.ts

@@ -6,7 +6,6 @@ export interface ChartAxisZoomSliderActiveTrackProps {
   axisPosition: 'top' | 'bottom' | 'left' | 'right';
   zoomData: ZoomData;
   reverse?: boolean;
-  valueFormatter?: (value: number) => string;
   showTooltip: boolean;
   onPointerEnter?: () => void;
   onPointerLeave?: () => void;
@@ -17,7 +16,6 @@ export declare function ChartAxisZoomSliderActiveTrack({
   axisPosition,
   zoomData,
   reverse,
-  valueFormatter,
   showTooltip,
   onPointerEnter,
   onPointerLeave

package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { styled } from '@mui/material/styles';
-import { getSVGPoint, selectorChartAxisZoomOptionsLookup, selectorChartDrawingArea, useChartContext, useDrawingArea, useStore } from '@mui/x-charts/internals';
+import { getSVGPoint, invertScale, selectorChartAxis, selectorChartAxisZoomOptionsLookup, selectorChartDrawingArea, useChartContext, useDrawingArea, useSelector, useStore } from '@mui/x-charts/internals';
 import * as React from 'react';
 import { rafThrottle } from '@mui/x-internals/rafThrottle';
 import { selectorChartAxisZoomData } from "../../internals/plugins/useChartProZoom/index.js";
@@ -17,17 +17,12 @@ const ZoomSliderActiveTrackRect = styled('rect')(({
     cursor: 'grab'
   }
 }));
-const formatter = Intl.NumberFormat(undefined, {
-  maximumFractionDigits: 0
-});
-const zoomValueFormatter = value => formatter.format(value);
 export function ChartAxisZoomSliderActiveTrack({
   axisId,
   axisDirection,
   axisPosition,
   zoomData,
   reverse,
-  valueFormatter = zoomValueFormatter,
   showTooltip,
   onPointerEnter,
   onPointerLeave
@@ -37,10 +32,15 @@ export function ChartAxisZoomSliderActiveTrack({
     svgRef
   } = useChartContext();
   const store = useStore();
+  const axis = useSelector(store, selectorChartAxis, axisId);
   const drawingArea = useDrawingArea();
   const activePreviewRectRef = React.useRef(null);
   const [startThumbEl, setStartThumbEl] = React.useState(null);
   const [endThumbEl, setEndThumbEl] = React.useState(null);
+  const {
+    tooltipStart,
+    tooltipEnd
+  } = getZoomSliderTooltipsText(axis, drawingArea);
   const previewThumbWidth = axisDirection === 'x' ? ZOOM_SLIDER_THUMB_WIDTH : ZOOM_SLIDER_THUMB_HEIGHT;
   const previewThumbHeight = axisDirection === 'x' ? ZOOM_SLIDER_THUMB_HEIGHT : ZOOM_SLIDER_THUMB_WIDTH;
   React.useEffect(() => {
@@ -230,14 +230,46 @@ export function ChartAxisZoomSliderActiveTrack({
       placement: "end"
     }), /*#__PURE__*/_jsx(ChartsTooltipZoomSliderValue, {
       anchorEl: startThumbEl,
-      open: showTooltip,
+      open: showTooltip && tooltipStart !== '',
       placement: axisPosition,
-      children: valueFormatter(zoomData.start)
+      children: tooltipStart
     }), /*#__PURE__*/_jsx(ChartsTooltipZoomSliderValue, {
       anchorEl: endThumbEl,
-      open: showTooltip,
+      open: showTooltip && tooltipEnd !== '',
       placement: axisPosition,
-      children: valueFormatter(zoomData.end)
+      children: tooltipEnd
     })]
   });
+}
+
+/**
+ * Returns the text for the tooltips on the thumbs of the zoom slider.
+ */
+function getZoomSliderTooltipsText(axis, drawingArea) {
+  const formatValue = value => {
+    if (axis.valueFormatter) {
+      return axis.valueFormatter(value, {
+        location: 'zoom-slider-tooltip'
+      });
+    }
+    return `${value}`;
+  };
+  const axisDirection = axis.position === 'top' || axis.position === 'bottom' ? 'x' : 'y';
+  let start = axisDirection === 'x' ? drawingArea.left : drawingArea.top;
+  const size = axisDirection === 'x' ? drawingArea.width : drawingArea.height;
+  let end = start + size;
+  if (axisDirection === 'y') {
+    [start, end] = [end, start]; // Invert for y-axis
+  }
+  if (axis.reverse) {
+    [start, end] = [end, start]; // Reverse the start and end if the axis is reversed
+  }
+  const startValue = invertScale(axis.scale, axis.data ?? [], start) ?? axis.data?.at(0);
+  const endValue = invertScale(axis.scale, axis.data ?? [], end) ?? axis.data?.at(-1);
+  const tooltipStart = formatValue(startValue);
+  const tooltipEnd = formatValue(endValue);
+  return {
+    tooltipStart,
+    tooltipEnd
+  };
 }

package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderTrack.js

@@ -66,14 +66,12 @@ export function ChartAxisZoomSliderTrack(_ref) {
 
     // Ensure the zoomFromPointerDown is within the min and max range
     zoomFromPointerDown = Math.max(Math.min(zoomFromPointerDown, maxEnd), minStart);
-    let pointerMoved = false;
     const onPointerMove = rafThrottle(function onPointerMove(pointerMoveEvent) {
       const pointerMovePoint = getSVGPoint(element, pointerMoveEvent);
       const zoomFromPointerMove = calculateZoomFromPoint(store.getSnapshot(), axisId, pointerMovePoint);
       if (zoomFromPointerMove === null) {
         return;
       }
-      pointerMoved = true;
       const zoomOptions = selectorChartAxisZoomOptionsLookup(store.getSnapshot(), axisId);
       instance.setAxisZoomData(axisId, prevZoomData => {
         if (zoomFromPointerMove > zoomFromPointerDown) {
@@ -114,22 +112,6 @@ export function ChartAxisZoomSliderTrack(_ref) {
       document.removeEventListener('pointerup', onPointerUp);
       setIsSelecting(false);
       onSelectEnd?.();
-      if (pointerMoved) {
-        return;
-      }
-
-      // If the pointer didn't move, we still need to respect the zoom constraints (minSpan, etc.)
-      // In that case, we assume the start to be the pointerZoom and calculate the end.
-      const pointerUpPoint = getSVGPoint(element, pointerUpEvent);
-      const zoomFromPointerUp = calculateZoomFromPoint(store.getSnapshot(), axisId, pointerUpPoint);
-      if (zoomFromPointerUp === null) {
-        return;
-      }
-      const zoomOptions = selectorChartAxisZoomOptionsLookup(store.getSnapshot(), axisId);
-      instance.setAxisZoomData(axisId, prev => _extends({}, prev, {
-        start: zoomFromPointerUp,
-        end: calculateZoomEnd(zoomFromPointerUp, prev, zoomOptions)
-      }));
     };
     event.preventDefault();
     event.stopPropagation();
@@ -138,10 +120,6 @@ export function ChartAxisZoomSliderTrack(_ref) {
     rect.addEventListener('pointermove', onPointerMove);
     onSelectStart?.();
     setIsSelecting(true);
-    instance.setAxisZoomData(axisId, prev => _extends({}, prev, {
-      start: zoomFromPointerDown,
-      end: zoomFromPointerDown
-    }));
   };
   return /*#__PURE__*/_jsx(ZoomSliderTrack, _extends({
     ref: ref,

package/esm/ChartsToolbarPro/ChartsToolbarPro.d.ts

@@ -3,7 +3,4 @@ import * as React from 'react';
 /**
  * The chart toolbar component for the pro package.
  */
-export declare function ChartsToolbarPro(props: React.PropsWithChildren<ChartsToolbarProps>): React.JSX.Element | null;
-export declare namespace ChartsToolbarPro {
-  var propTypes: any;
-}
+export declare function ChartsToolbarPro(props: ChartsToolbarProps): React.JSX.Element | null;

package/esm/ChartsToolbarPro/ChartsToolbarPro.js

@@ -1,12 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { Toolbar } from '@mui/x-charts/Toolbar';
-import PropTypes from 'prop-types';
+import { Toolbar, ToolbarButton } from '@mui/x-charts/Toolbar';
 import * as React from 'react';
 import { useChartContext, useSelector, useChartsSlots } from '@mui/x-charts/internals';
 import { useChartsLocalization } from '@mui/x-charts/hooks';
 import { selectorChartZoomIsEnabled } from "../internals/plugins/useChartProZoom/index.js";
-import { ChartsToolbarZoomInButton } from "./ChartsToolbarZoomInButton.js";
-import { ChartsToolbarZoomOutButton } from "./ChartsToolbarZoomOutButton.js";
+import { ChartsToolbarZoomInTrigger } from "./ChartsToolbarZoomInTrigger.js";
+import { ChartsToolbarZoomOutTrigger } from "./ChartsToolbarZoomOutTrigger.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * The chart toolbar component for the pro package.
@@ -30,13 +29,15 @@ export function ChartsToolbarPro(props) {
     const ZoomInIcon = slots.zoomInIcon;
     children.push(/*#__PURE__*/_jsx(Tooltip, _extends({}, slotProps.baseTooltip, {
       title: localeText.zoomIn,
-      children: /*#__PURE__*/_jsx(ChartsToolbarZoomInButton, {
+      children: /*#__PURE__*/_jsx(ChartsToolbarZoomInTrigger, {
+        render: /*#__PURE__*/_jsx(ToolbarButton, {}),
         children: /*#__PURE__*/_jsx(ZoomInIcon, _extends({}, slotProps.zoomInIcon))
       })
     }), "zoom-in"));
     children.push(/*#__PURE__*/_jsx(Tooltip, _extends({}, slotProps.baseTooltip, {
       title: localeText.zoomOut,
-      children: /*#__PURE__*/_jsx(ChartsToolbarZoomOutButton, {
+      children: /*#__PURE__*/_jsx(ChartsToolbarZoomOutTrigger, {
+        render: /*#__PURE__*/_jsx(ToolbarButton, {}),
         children: /*#__PURE__*/_jsx(ZoomOutIcon, _extends({}, slotProps.zoomOutIcon))
       })
     }), "zoom-out"));
@@ -47,11 +48,4 @@ export function ChartsToolbarPro(props) {
   return /*#__PURE__*/_jsx(Toolbar, _extends({}, props, {
     children: children
   }));
-}
-process.env.NODE_ENV !== "production" ? ChartsToolbarPro.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/ChartsToolbarPro/{ChartsToolbarZoomInButton.d.ts → ChartsToolbarZoomInTrigger.d.ts}

@@ -1,16 +1,17 @@
 import * as React from 'react';
 import { ChartsSlotProps } from '@mui/x-charts/internals';
 import { RenderProp } from '@mui/x-internals/useComponentRenderer';
-interface ChartsToolbarZoomInButtonProps {
+interface ChartsToolbarZoomInTriggerProps {
   /**
    * A function to customize the rendering of the component.
    */
-  render?: RenderProp<ChartsSlotProps['baseIconButton']>;
+  render?: RenderProp<ChartsSlotProps['baseButton']>;
 }
 /**
- * The zoom-in button for the chart toolbar.
+ * A button that zooms the chart in.
+ * It renders the `baseButton` slot.
  */
-declare const ChartsToolbarZoomInButton: React.ForwardRefExoticComponent<ChartsToolbarZoomInButtonProps & {
+declare const ChartsToolbarZoomInTrigger: React.ForwardRefExoticComponent<ChartsToolbarZoomInTriggerProps & {
   children?: React.ReactNode | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;
-export { ChartsToolbarZoomInButton };
+export { ChartsToolbarZoomInTrigger };

package/esm/ChartsToolbarPro/{ChartsToolbarZoomInButton.js → ChartsToolbarZoomInTrigger.js}

@@ -5,14 +5,15 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["render"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useChartContext, useChartsSlots, useSelector } from '@mui/x-charts/internals';
+import { useChartContext, useSelector, useChartsSlots } from '@mui/x-charts/internals';
 import { useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
 import { selectorChartCanZoomIn } from "../internals/plugins/useChartProZoom/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * The zoom-in button for the chart toolbar.
+ * A button that zooms the chart in.
+ * It renders the `baseButton` slot.
  */
-const ChartsToolbarZoomInButton = /*#__PURE__*/React.forwardRef(function ChartsToolbarZoomInButton(_ref, ref) {
+const ChartsToolbarZoomInTrigger = /*#__PURE__*/React.forwardRef(function ChartsToolbarZoomInTrigger(_ref, ref) {
   let {
       render
     } = _ref,
@@ -26,7 +27,7 @@ const ChartsToolbarZoomInButton = /*#__PURE__*/React.forwardRef(function ChartsT
     store
   } = useChartContext();
   const disabled = useSelector(store, selectorChartCanZoomIn);
-  const element = useComponentRenderer(slots.baseIconButton, render, _extends({}, slotProps?.baseIconButton, {
+  const element = useComponentRenderer(slots.baseButton, render, _extends({}, slotProps.baseButton, {
     onClick: () => instance.zoomIn(),
     disabled
   }, other, {
@@ -36,8 +37,8 @@ const ChartsToolbarZoomInButton = /*#__PURE__*/React.forwardRef(function ChartsT
     children: element
   });
 });
-if (process.env.NODE_ENV !== "production") ChartsToolbarZoomInButton.displayName = "ChartsToolbarZoomInButton";
-process.env.NODE_ENV !== "production" ? ChartsToolbarZoomInButton.propTypes = {
+if (process.env.NODE_ENV !== "production") ChartsToolbarZoomInTrigger.displayName = "ChartsToolbarZoomInTrigger";
+process.env.NODE_ENV !== "production" ? ChartsToolbarZoomInTrigger.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
@@ -47,4 +48,4 @@ process.env.NODE_ENV !== "production" ? ChartsToolbarZoomInButton.propTypes = {
    */
   render: PropTypes.oneOfType([PropTypes.element, PropTypes.func])
 } : void 0;
-export { ChartsToolbarZoomInButton };
+export { ChartsToolbarZoomInTrigger };

package/esm/ChartsToolbarPro/{ChartsToolbarZoomOutButton.d.ts → ChartsToolbarZoomOutTrigger.d.ts}

@@ -1,16 +1,17 @@
 import * as React from 'react';
 import { ChartsSlotProps } from '@mui/x-charts/internals';
 import { RenderProp } from '@mui/x-internals/useComponentRenderer';
-interface ChartsToolbarZoomOutButtonProps {
+interface ChartsToolbarZoomOutTriggerProps {
   /**
    * A function to customize the rendering of the component.
    */
-  render?: RenderProp<ChartsSlotProps['baseIconButton']>;
+  render?: RenderProp<ChartsSlotProps['baseButton']>;
 }
 /**
- * The zoom-out button for the chart toolbar.
+ * A button that zooms the chart out.
+ * It renders the `baseButton` slot.
  */
-declare const ChartsToolbarZoomOutButton: React.ForwardRefExoticComponent<ChartsToolbarZoomOutButtonProps & {
+declare const ChartsToolbarZoomOutTrigger: React.ForwardRefExoticComponent<ChartsToolbarZoomOutTriggerProps & {
   children?: React.ReactNode | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;
-export { ChartsToolbarZoomOutButton };
+export { ChartsToolbarZoomOutTrigger };