@mui/x-charts-pro 9.0.0-alpha.0 → 9.0.0-alpha.2

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderActiveTrack.mjs

@@ -0,0 +1,296 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { styled } from '@mui/material/styles';
+import { getChartPoint, invertScale, selectorChartAxis, selectorChartAxisZoomOptionsLookup, useChartContext, useDrawingArea, useStore } from '@mui/x-charts/internals';
+import * as React from 'react';
+import { rafThrottle } from '@mui/x-internals/rafThrottle';
+import { shouldForwardProp } from '@mui/system';
+import { selectorChartAxisZoomData } from "../../internals/plugins/useChartProZoom/index.mjs";
+import { ChartsAxisZoomSliderThumb } from "./ChartsAxisZoomSliderThumb.mjs";
+import { ChartsTooltipZoomSliderValue } from "./ChartsTooltipZoomSliderValue.mjs";
+import { calculateZoomEnd, calculateZoomFromPoint, calculateZoomStart } from "./zoom-utils.mjs";
+import { ZOOM_SLIDER_THUMB_HEIGHT, ZOOM_SLIDER_THUMB_WIDTH } from "./constants.mjs";
+import { useUtilityClasses } from "./chartsAxisZoomSliderTrackClasses.mjs";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ZoomSliderActiveTrackRect = styled('rect', {
+  slot: 'internal',
+  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'preview'
+})(({
+  theme
+}) => _extends({
+  fill: (theme.vars || theme).palette.grey[600]
+}, theme.applyStyles('dark', {
+  fill: (theme.vars || theme).palette.grey[500]
+}), {
+  cursor: 'grab',
+  variants: [{
+    props: {
+      preview: true
+    },
+    style: _extends({
+      fill: 'transparent'
+    }, theme.applyStyles('dark', {
+      fill: 'transparent'
+    }), {
+      rx: 4,
+      ry: 4,
+      stroke: theme.palette.grey[500]
+    })
+  }]
+}));
+export function ChartsAxisZoomSliderActiveTrack({
+  axisId,
+  axisDirection,
+  axisPosition,
+  size,
+  preview,
+  zoomData,
+  reverse,
+  showTooltip,
+  onPointerEnter,
+  onPointerLeave
+}) {
+  const {
+    instance
+  } = useChartContext();
+  const {
+    chartsLayerContainerRef
+  } = instance;
+  const store = useStore();
+  const axis = store.use(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 classes = useUtilityClasses({
+    axisDirection
+  });
+  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(() => {
+    const activePreviewRect = activePreviewRectRef.current;
+    if (!activePreviewRect) {
+      return;
+    }
+    let prevPointerZoom = 0;
+    const onPointerMove = rafThrottle(event => {
+      const element = chartsLayerContainerRef.current;
+      if (!element) {
+        return;
+      }
+      const point = getChartPoint(element, event);
+      const pointerZoom = calculateZoomFromPoint(store.state, axisId, point);
+      if (pointerZoom === null) {
+        return;
+      }
+      const deltaZoom = pointerZoom - prevPointerZoom;
+      prevPointerZoom = pointerZoom;
+      instance.moveZoomRange(axisId, deltaZoom);
+    });
+    const onPointerUp = () => {
+      activePreviewRect.removeEventListener('pointermove', onPointerMove);
+      document.removeEventListener('pointerup', onPointerUp);
+    };
+    const onPointerDown = event => {
+      // Prevent text selection when dragging
+      event.preventDefault();
+      activePreviewRect.setPointerCapture(event.pointerId);
+      const axisZoomData = selectorChartAxisZoomData(store.state, axisId);
+      const element = chartsLayerContainerRef.current;
+      if (!axisZoomData || !element) {
+        return;
+      }
+      const point = getChartPoint(element, event);
+      const pointerDownZoom = calculateZoomFromPoint(store.state, axisId, point);
+      if (pointerDownZoom === null) {
+        return;
+      }
+      prevPointerZoom = pointerDownZoom;
+      document.addEventListener('pointerup', onPointerUp);
+      activePreviewRect.addEventListener('pointermove', onPointerMove);
+    };
+    activePreviewRect.addEventListener('pointerdown', onPointerDown);
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      activePreviewRect.removeEventListener('pointerdown', onPointerDown);
+      onPointerMove.clear();
+    };
+  }, [axisDirection, axisId, instance, reverse, store, chartsLayerContainerRef]);
+  const onStartThumbMove = event => {
+    const element = chartsLayerContainerRef.current;
+    if (!element) {
+      return;
+    }
+    const point = getChartPoint(element, event);
+    instance.setZoomData(prevZoomData => {
+      const zoomOptions = selectorChartAxisZoomOptionsLookup(store.state, axisId);
+      return prevZoomData.map(zoom => {
+        if (zoom.axisId === axisId) {
+          const newStart = calculateZoomFromPoint(store.state, axisId, point);
+          if (newStart === null) {
+            return zoom;
+          }
+          return _extends({}, zoom, {
+            start: calculateZoomStart(newStart, zoom, zoomOptions)
+          });
+        }
+        return zoom;
+      });
+    });
+  };
+  const onEndThumbMove = event => {
+    const element = chartsLayerContainerRef.current;
+    if (!element) {
+      return;
+    }
+    const point = getChartPoint(element, event);
+    instance.setZoomData(prevZoomData => {
+      const zoomOptions = selectorChartAxisZoomOptionsLookup(store.state, axisId);
+      return prevZoomData.map(zoom => {
+        if (zoom.axisId === axisId) {
+          const newEnd = calculateZoomFromPoint(store.state, axisId, point);
+          if (newEnd === null) {
+            return zoom;
+          }
+          return _extends({}, zoom, {
+            end: calculateZoomEnd(newEnd, zoom, zoomOptions)
+          });
+        }
+        return zoom;
+      });
+    });
+  };
+  let previewX;
+  let previewY;
+  let previewWidth;
+  let previewHeight;
+  let startThumbX;
+  let startThumbY;
+  let endThumbX;
+  let endThumbY;
+  const {
+    minStart,
+    maxEnd
+  } = selectorChartAxisZoomOptionsLookup(store.state, axisId);
+  const range = maxEnd - minStart;
+  const zoomStart = Math.max(minStart, zoomData.start);
+  const zoomEnd = Math.min(zoomData.end, maxEnd);
+  if (axisDirection === 'x') {
+    previewX = (zoomStart - minStart) / range * drawingArea.width;
+    previewY = 0;
+    previewWidth = drawingArea.width * (zoomEnd - zoomStart) / range;
+    previewHeight = size;
+    startThumbX = (zoomStart - minStart) / range * drawingArea.width;
+    startThumbY = ZOOM_SLIDER_THUMB_HEIGHT < size ? (size - ZOOM_SLIDER_THUMB_HEIGHT) / 2 : 0;
+    endThumbX = (zoomEnd - minStart) / range * drawingArea.width;
+    endThumbY = ZOOM_SLIDER_THUMB_HEIGHT < size ? (size - ZOOM_SLIDER_THUMB_HEIGHT) / 2 : 0;
+    if (reverse) {
+      previewX = drawingArea.width - previewX - previewWidth;
+      startThumbX = drawingArea.width - startThumbX;
+      endThumbX = drawingArea.width - endThumbX;
+    }
+    startThumbX -= previewThumbWidth / 2;
+    endThumbX -= previewThumbWidth / 2;
+  } else {
+    previewX = 0;
+    previewY = drawingArea.height - (zoomEnd - minStart) / range * drawingArea.height;
+    previewWidth = size;
+    previewHeight = drawingArea.height * (zoomEnd - zoomStart) / range;
+    startThumbX = ZOOM_SLIDER_THUMB_HEIGHT < size ? (size - ZOOM_SLIDER_THUMB_HEIGHT) / 2 : 0;
+    startThumbY = drawingArea.height - (zoomStart - minStart) / range * drawingArea.height;
+    endThumbX = ZOOM_SLIDER_THUMB_HEIGHT < size ? (size - ZOOM_SLIDER_THUMB_HEIGHT) / 2 : 0;
+    endThumbY = drawingArea.height - (zoomEnd - minStart) / range * drawingArea.height;
+    if (reverse) {
+      previewY = drawingArea.height - previewY - previewHeight;
+      startThumbY = drawingArea.height - startThumbY;
+      endThumbY = drawingArea.height - endThumbY;
+    }
+    startThumbY -= previewThumbHeight / 2;
+    endThumbY -= previewThumbHeight / 2;
+  }
+  const previewOffset = ZOOM_SLIDER_THUMB_HEIGHT > size ? (ZOOM_SLIDER_THUMB_HEIGHT - size) / 2 : 0;
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx(ZoomSliderActiveTrackRect, {
+      ref: activePreviewRectRef,
+      x: previewX + (axisDirection === 'x' ? 0 : previewOffset),
+      y: previewY + (axisDirection === 'x' ? previewOffset : 0),
+      preview: preview,
+      width: previewWidth,
+      height: previewHeight,
+      onPointerEnter: onPointerEnter,
+      onPointerLeave: onPointerLeave,
+      className: classes.active
+    }), /*#__PURE__*/_jsx(ChartsAxisZoomSliderThumb, {
+      ref: setStartThumbEl,
+      x: startThumbX,
+      y: startThumbY,
+      width: previewThumbWidth,
+      height: previewThumbHeight,
+      orientation: axisDirection === 'x' ? 'horizontal' : 'vertical',
+      onMove: onStartThumbMove,
+      onPointerEnter: onPointerEnter,
+      onPointerLeave: onPointerLeave,
+      placement: "start"
+    }), /*#__PURE__*/_jsx(ChartsAxisZoomSliderThumb, {
+      ref: setEndThumbEl,
+      x: endThumbX,
+      y: endThumbY,
+      width: previewThumbWidth,
+      height: previewThumbHeight,
+      orientation: axisDirection === 'x' ? 'horizontal' : 'vertical',
+      onMove: onEndThumbMove,
+      onPointerEnter: onPointerEnter,
+      onPointerLeave: onPointerLeave,
+      placement: "end"
+    }), /*#__PURE__*/_jsx(ChartsTooltipZoomSliderValue, {
+      anchorEl: startThumbEl,
+      open: showTooltip && tooltipStart !== '',
+      placement: axisPosition,
+      children: tooltipStart
+    }), /*#__PURE__*/_jsx(ChartsTooltipZoomSliderValue, {
+      anchorEl: endThumbEl,
+      open: showTooltip && tooltipEnd !== '',
+      placement: axisPosition,
+      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',
+        scale: axis.scale
+      });
+    }
+    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/ChartsZoomSlider/internals/ChartsAxisZoomSliderPreview.d.mts

@@ -0,0 +1,17 @@
+import { type AxisId } from '@mui/x-charts/internals';
+interface ChartsAxisZoomSliderPreviewProps {
+  axisId: AxisId;
+  axisDirection: 'x' | 'y';
+  reverse: boolean;
+  x: number;
+  y: number;
+  height: number;
+  width: number;
+}
+export declare function ChartsAxisZoomSliderPreview({
+  axisId,
+  axisDirection,
+  reverse,
+  ...props
+}: ChartsAxisZoomSliderPreviewProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderPreview.d.ts

@@ -0,0 +1,17 @@
+import { type AxisId } from '@mui/x-charts/internals';
+interface ChartsAxisZoomSliderPreviewProps {
+  axisId: AxisId;
+  axisDirection: 'x' | 'y';
+  reverse: boolean;
+  x: number;
+  y: number;
+  height: number;
+  width: number;
+}
+export declare function ChartsAxisZoomSliderPreview({
+  axisId,
+  axisDirection,
+  reverse,
+  ...props
+}: ChartsAxisZoomSliderPreviewProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderPreview.js

@@ -0,0 +1,105 @@
+"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.ChartsAxisZoomSliderPreview = ChartsAxisZoomSliderPreview;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _styles = require("@mui/material/styles");
+var _internals = require("@mui/x-charts/internals");
+var _system = require("@mui/system");
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _useChartProZoom = require("../../internals/plugins/useChartProZoom");
+var _ChartsAxisZoomSliderPreviewContent = require("./ChartsAxisZoomSliderPreviewContent");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["axisId", "axisDirection", "reverse"];
+const PreviewBackgroundRect = (0, _styles.styled)('rect', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})(({
+  theme
+}) => ({
+  rx: 4,
+  ry: 4,
+  stroke: theme.palette.grey[700],
+  fill: (0, _system.alpha)(theme.palette.grey[700], 0.4)
+}));
+function ChartsAxisZoomSliderPreview(_ref) {
+  let {
+      axisId,
+      axisDirection
+    } = _ref,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, props, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PreviewRectangles, (0, _extends2.default)({}, props, {
+      axisId: axisId,
+      axisDirection: axisDirection
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", (0, _extends2.default)({}, props, {
+      fill: "transparent",
+      rx: 4,
+      ry: 4
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisZoomSliderPreviewContent.ChartsAxisZoomSliderPreviewContent, (0, _extends2.default)({
+      axisId: axisId
+    }, props))]
+  }));
+}
+function PreviewRectangles(props) {
+  const {
+    axisId,
+    axisDirection
+  } = props;
+  const store = (0, _internals.useStore)();
+  const zoomData = store.use(_useChartProZoom.selectorChartAxisZoomData, axisId);
+  const zoomOptions = store.use(_internals.selectorChartAxisZoomOptionsLookup, axisId);
+  const id = (0, _useId.default)();
+  if (!zoomData) {
+    return null;
+  }
+  const maskId = `zoom-preview-mask-${axisId}-${id}`;
+  let x;
+  let y;
+  let width;
+  let height;
+  const range = zoomOptions.maxEnd - zoomOptions.minStart;
+  if (axisDirection === 'x') {
+    x = props.x + (zoomData.start - zoomOptions.minStart) / range * props.width;
+    y = props.y;
+    width = (zoomData.end - zoomData.start) / range * props.width;
+    height = props.height;
+  } else {
+    x = props.x;
+    y = props.y + (1 - zoomData.end / range) * props.height;
+    width = props.width;
+    height = (zoomData.end - zoomData.start) / range * props.height;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("mask", {
+      id: maskId,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+        x: props.x,
+        y: props.y,
+        width: props.width,
+        height: props.height,
+        fill: "white"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+        x: x,
+        y: y,
+        width: width,
+        height: height,
+        fill: "black",
+        rx: 4,
+        ry: 4
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(PreviewBackgroundRect, {
+      x: props.x,
+      y: props.y,
+      width: props.width,
+      height: props.height,
+      mask: `url(#${maskId})`
+    })]
+  });
+}

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderPreview.mjs

@@ -0,0 +1,97 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["axisId", "axisDirection", "reverse"];
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import { selectorChartAxisZoomOptionsLookup, useStore } from '@mui/x-charts/internals';
+import { alpha } from '@mui/system';
+import useId from '@mui/utils/useId';
+import { selectorChartAxisZoomData } from "../../internals/plugins/useChartProZoom/index.mjs";
+import { ChartsAxisZoomSliderPreviewContent } from "./ChartsAxisZoomSliderPreviewContent.mjs";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const PreviewBackgroundRect = styled('rect', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})(({
+  theme
+}) => ({
+  rx: 4,
+  ry: 4,
+  stroke: theme.palette.grey[700],
+  fill: alpha(theme.palette.grey[700], 0.4)
+}));
+export function ChartsAxisZoomSliderPreview(_ref) {
+  let {
+      axisId,
+      axisDirection
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/_jsxs("g", _extends({}, props, {
+    children: [/*#__PURE__*/_jsx(PreviewRectangles, _extends({}, props, {
+      axisId: axisId,
+      axisDirection: axisDirection
+    })), /*#__PURE__*/_jsx("rect", _extends({}, props, {
+      fill: "transparent",
+      rx: 4,
+      ry: 4
+    })), /*#__PURE__*/_jsx(ChartsAxisZoomSliderPreviewContent, _extends({
+      axisId: axisId
+    }, props))]
+  }));
+}
+function PreviewRectangles(props) {
+  const {
+    axisId,
+    axisDirection
+  } = props;
+  const store = useStore();
+  const zoomData = store.use(selectorChartAxisZoomData, axisId);
+  const zoomOptions = store.use(selectorChartAxisZoomOptionsLookup, axisId);
+  const id = useId();
+  if (!zoomData) {
+    return null;
+  }
+  const maskId = `zoom-preview-mask-${axisId}-${id}`;
+  let x;
+  let y;
+  let width;
+  let height;
+  const range = zoomOptions.maxEnd - zoomOptions.minStart;
+  if (axisDirection === 'x') {
+    x = props.x + (zoomData.start - zoomOptions.minStart) / range * props.width;
+    y = props.y;
+    width = (zoomData.end - zoomData.start) / range * props.width;
+    height = props.height;
+  } else {
+    x = props.x;
+    y = props.y + (1 - zoomData.end / range) * props.height;
+    width = props.width;
+    height = (zoomData.end - zoomData.start) / range * props.height;
+  }
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsxs("mask", {
+      id: maskId,
+      children: [/*#__PURE__*/_jsx("rect", {
+        x: props.x,
+        y: props.y,
+        width: props.width,
+        height: props.height,
+        fill: "white"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: x,
+        y: y,
+        width: width,
+        height: height,
+        fill: "black",
+        rx: 4,
+        ry: 4
+      })]
+    }), /*#__PURE__*/_jsx(PreviewBackgroundRect, {
+      x: props.x,
+      y: props.y,
+      width: props.width,
+      height: props.height,
+      mask: `url(#${maskId})`
+    })]
+  });
+}

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderPreviewContent.d.mts

@@ -0,0 +1,9 @@
+import { type AxisId } from '@mui/x-charts/internals';
+export interface ChartsAxisZoomSliderPreviewContentProps {
+  axisId: AxisId;
+  x: number;
+  y: number;
+  height: number;
+  width: number;
+}
+export declare function ChartsAxisZoomSliderPreviewContent(props: ChartsAxisZoomSliderPreviewContentProps): import("react/jsx-runtime").JSX.Element;

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderPreviewContent.d.ts

@@ -0,0 +1,9 @@
+import { type AxisId } from '@mui/x-charts/internals';
+export interface ChartsAxisZoomSliderPreviewContentProps {
+  axisId: AxisId;
+  x: number;
+  y: number;
+  height: number;
+  width: number;
+}
+export declare function ChartsAxisZoomSliderPreviewContent(props: ChartsAxisZoomSliderPreviewContentProps): import("react/jsx-runtime").JSX.Element;

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderPreviewContent.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsAxisZoomSliderPreviewContent = ChartsAxisZoomSliderPreviewContent;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _internals = require("@mui/x-charts/internals");
+var _seriesPreviewPlotMap = require("./seriesPreviewPlotMap");
+var _jsxRuntime = require("react/jsx-runtime");
+function ChartsAxisZoomSliderPreviewContent(props) {
+  const {
+    axisId,
+    x,
+    y,
+    width,
+    height
+  } = props;
+  const store = (0, _internals.useStore)();
+  const processedSeries = store.use(_internals.selectorChartSeriesProcessed);
+  const children = [];
+  const clipId = `zoom-preview-mask-${axisId}`;
+  for (const [seriesType, Component] of _seriesPreviewPlotMap.seriesPreviewPlotMap) {
+    const hasSeries = (processedSeries[seriesType]?.seriesOrder?.length ?? 0) > 0;
+    if (hasSeries) {
+      children.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, (0, _extends2.default)({}, props), seriesType));
+    }
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("clipPath", {
+      id: clipId,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+        x: x,
+        y: y,
+        width: width,
+        height: height
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+      clipPath: `url(#${clipId})`,
+      children: children
+    })]
+  });
+}

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderPreviewContent.mjs

@@ -0,0 +1,38 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { selectorChartSeriesProcessed, useStore } from '@mui/x-charts/internals';
+import { seriesPreviewPlotMap } from "./seriesPreviewPlotMap.mjs";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function ChartsAxisZoomSliderPreviewContent(props) {
+  const {
+    axisId,
+    x,
+    y,
+    width,
+    height
+  } = props;
+  const store = useStore();
+  const processedSeries = store.use(selectorChartSeriesProcessed);
+  const children = [];
+  const clipId = `zoom-preview-mask-${axisId}`;
+  for (const [seriesType, Component] of seriesPreviewPlotMap) {
+    const hasSeries = (processedSeries[seriesType]?.seriesOrder?.length ?? 0) > 0;
+    if (hasSeries) {
+      children.push(/*#__PURE__*/_jsx(Component, _extends({}, props), seriesType));
+    }
+  }
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx("clipPath", {
+      id: clipId,
+      children: /*#__PURE__*/_jsx("rect", {
+        x: x,
+        y: y,
+        width: width,
+        height: height
+      })
+    }), /*#__PURE__*/_jsx("g", {
+      clipPath: `url(#${clipId})`,
+      children: children
+    })]
+  });
+}

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderThumb.d.mts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export interface ChartsZoomSliderThumbOwnerState {
+  onMove: (event: PointerEvent) => void;
+  orientation: 'horizontal' | 'vertical';
+  placement: 'start' | 'end';
+}
+export interface ChartsZoomSliderThumbProps extends Omit<React.ComponentProps<'rect'>, 'orientation'>, ChartsZoomSliderThumbOwnerState {}
+/**
+ * Renders the zoom slider thumb, which is responsible for resizing the zoom range.
+ * @internal
+ */
+export declare const ChartsAxisZoomSliderThumb: React.ForwardRefExoticComponent<Omit<ChartsZoomSliderThumbProps, "ref"> & React.RefAttributes<SVGRectElement>>;

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderThumb.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export interface ChartsZoomSliderThumbOwnerState {
+  onMove: (event: PointerEvent) => void;
+  orientation: 'horizontal' | 'vertical';
+  placement: 'start' | 'end';
+}
+export interface ChartsZoomSliderThumbProps extends Omit<React.ComponentProps<'rect'>, 'orientation'>, ChartsZoomSliderThumbOwnerState {}
+/**
+ * Renders the zoom slider thumb, which is responsible for resizing the zoom range.
+ * @internal
+ */
+export declare const ChartsAxisZoomSliderThumb: React.ForwardRefExoticComponent<Omit<ChartsZoomSliderThumbProps, "ref"> & React.RefAttributes<SVGRectElement>>;