@mui/x-charts-pro 9.0.0-beta.0 → 9.0.0

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderPreview.js

@@ -16,7 +16,7 @@ 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 _excluded = ["axisId", "axisDirection", "reverse", "seriesIds"];
 const PreviewBackgroundRect = (0, _styles.styled)('rect', {
   slot: 'internal',
   shouldForwardProp: undefined
@@ -25,13 +25,14 @@ const PreviewBackgroundRect = (0, _styles.styled)('rect', {
 }) => ({
   rx: 4,
   ry: 4,
-  stroke: theme.palette.grey[700],
+  stroke: (theme.vars || theme).palette.grey[700],
   fill: (0, _system.alpha)(theme.palette.grey[700], 0.4)
 }));
 function ChartsAxisZoomSliderPreview(_ref) {
   let {
       axisId,
-      axisDirection
+      axisDirection,
+      seriesIds
     } = _ref,
     props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, props, {
@@ -43,7 +44,8 @@ function ChartsAxisZoomSliderPreview(_ref) {
       rx: 4,
       ry: 4
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisZoomSliderPreviewContent.ChartsAxisZoomSliderPreviewContent, (0, _extends2.default)({
-      axisId: axisId
+      axisId: axisId,
+      seriesIds: seriesIds
     }, props))]
   }));
 }

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderPreview.mjs

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["axisId", "axisDirection", "reverse"];
+const _excluded = ["axisId", "axisDirection", "reverse", "seriesIds"];
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import { selectorChartAxisZoomOptionsLookup, useStore } from '@mui/x-charts/internals';
@@ -17,13 +17,14 @@ const PreviewBackgroundRect = styled('rect', {
 }) => ({
   rx: 4,
   ry: 4,
-  stroke: theme.palette.grey[700],
+  stroke: (theme.vars || theme).palette.grey[700],
   fill: alpha(theme.palette.grey[700], 0.4)
 }));
 export function ChartsAxisZoomSliderPreview(_ref) {
   let {
       axisId,
-      axisDirection
+      axisDirection,
+      seriesIds
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   return /*#__PURE__*/_jsxs("g", _extends({}, props, {
@@ -35,7 +36,8 @@ export function ChartsAxisZoomSliderPreview(_ref) {
       rx: 4,
       ry: 4
     })), /*#__PURE__*/_jsx(ChartsAxisZoomSliderPreviewContent, _extends({
-      axisId: axisId
+      axisId: axisId,
+      seriesIds: seriesIds
     }, props))]
   }));
 }

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderPreviewContent.d.mts

@@ -1,9 +1,13 @@
-import { type AxisId } from '@mui/x-charts/internals';
+import { type AxisId, type SeriesId } from '@mui/x-charts/internals';
 export interface ChartsAxisZoomSliderPreviewContentProps {
   axisId: AxisId;
   x: number;
   y: number;
   height: number;
   width: number;
+  /**
+   * If provided, only the series with these IDs will be shown in the preview.
+   */
+  seriesIds?: SeriesId[];
 }
 export declare function ChartsAxisZoomSliderPreviewContent(props: ChartsAxisZoomSliderPreviewContentProps): import("react/jsx-runtime").JSX.Element;

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderPreviewContent.d.ts

@@ -1,9 +1,13 @@
-import { type AxisId } from '@mui/x-charts/internals';
+import { type AxisId, type SeriesId } from '@mui/x-charts/internals';
 export interface ChartsAxisZoomSliderPreviewContentProps {
   axisId: AxisId;
   x: number;
   y: number;
   height: number;
   width: number;
+  /**
+   * If provided, only the series with these IDs will be shown in the preview.
+   */
+  seriesIds?: SeriesId[];
 }
 export declare function ChartsAxisZoomSliderPreviewContent(props: ChartsAxisZoomSliderPreviewContentProps): import("react/jsx-runtime").JSX.Element;

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderThumb.d.mts

@@ -4,7 +4,10 @@ export interface ChartsZoomSliderThumbOwnerState {
   orientation: 'horizontal' | 'vertical';
   placement: 'start' | 'end';
 }
-export interface ChartsZoomSliderThumbProps extends Omit<React.ComponentProps<'rect'>, 'orientation'>, ChartsZoomSliderThumbOwnerState {}
+export interface ChartsZoomSliderThumbProps extends Omit<React.ComponentProps<'rect'>, 'orientation'>, ChartsZoomSliderThumbOwnerState {
+  onInteractionStart?: () => void;
+  onInteractionEnd?: () => void;
+}
 /**
  * Renders the zoom slider thumb, which is responsible for resizing the zoom range.
  * @internal

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderThumb.d.ts

@@ -4,7 +4,10 @@ export interface ChartsZoomSliderThumbOwnerState {
   orientation: 'horizontal' | 'vertical';
   placement: 'start' | 'end';
 }
-export interface ChartsZoomSliderThumbProps extends Omit<React.ComponentProps<'rect'>, 'orientation'>, ChartsZoomSliderThumbOwnerState {}
+export interface ChartsZoomSliderThumbProps extends Omit<React.ComponentProps<'rect'>, 'orientation'>, ChartsZoomSliderThumbOwnerState {
+  onInteractionStart?: () => void;
+  onInteractionEnd?: () => void;
+}
 /**
  * Renders the zoom slider thumb, which is responsible for resizing the zoom range.
  * @internal

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderThumb.js

@@ -16,8 +16,9 @@ var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallb
 var _rafThrottle = require("@mui/x-internals/rafThrottle");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _chartsAxisZoomSliderThumbClasses = require("./chartsAxisZoomSliderThumbClasses");
+var _constants = require("./constants");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className", "onMove", "orientation", "placement", "rx", "ry"];
+const _excluded = ["className", "onMove", "orientation", "placement", "rx", "ry", "x", "y", "width", "height", "onInteractionStart", "onInteractionEnd", "onPointerEnter", "onPointerLeave"];
 const Rect = (0, _styles.styled)('rect', {
   slot: 'internal',
   shouldForwardProp: undefined
@@ -38,10 +39,17 @@ const Rect = (0, _styles.styled)('rect', {
     cursor: 'ns-resize'
   }
 }));
-function preventDefault(event) {
-  event.preventDefault();
-}
 
+/**
+ * Invisible touch target that is only active on coarse pointer devices (touch).
+ * On fine pointer devices (mouse), it disables pointer events so it doesn't
+ * interfere with precise interactions on small zoom ranges.
+ */
+const TouchTarget = (0, _styles.styled)('rect')({
+  '@media (pointer: fine)': {
+    pointerEvents: 'none'
+  }
+});
 /**
  * Renders the zoom slider thumb, which is responsible for resizing the zoom range.
  * @internal
@@ -53,7 +61,15 @@ const ChartsAxisZoomSliderThumb = exports.ChartsAxisZoomSliderThumb = /*#__PURE_
       orientation,
       placement,
       rx = 4,
-      ry = 4
+      ry = 4,
+      x,
+      y,
+      width,
+      height,
+      onInteractionStart,
+      onInteractionEnd,
+      onPointerEnter,
+      onPointerLeave
     } = _ref,
     other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   const classes = (0, _chartsAxisZoomSliderThumbClasses.useUtilityClasses)({
@@ -61,52 +77,82 @@ const ChartsAxisZoomSliderThumb = exports.ChartsAxisZoomSliderThumb = /*#__PURE_
     orientation,
     placement
   });
+  const groupRef = React.useRef(null);
   const thumbRef = React.useRef(null);
   const ref = (0, _useForkRef.default)(thumbRef, forwardedRef);
+  const isDraggingRef = React.useRef(false);
   const onMoveEvent = (0, _useEventCallback.default)(onMove);
-  React.useEffect(() => {
-    const thumb = thumbRef.current;
-    if (!thumb) {
-      return () => {};
+  const throttledMove = React.useMemo(() => (0, _rafThrottle.rafThrottle)(event => onMoveEvent(event)), [onMoveEvent]);
+  React.useEffect(() => () => throttledMove.clear(), [throttledMove]);
+  const handlePointerDown = (0, _useEventCallback.default)(event => {
+    event.preventDefault();
+    event.stopPropagation();
+    try {
+      event.currentTarget.setPointerCapture(event.pointerId);
+    } catch {
+      // setPointerCapture can fail if the pointer is no longer active,
+      // e.g., during touch→mouse compatibility events.
+      return;
+    }
+    isDraggingRef.current = true;
+    onInteractionStart?.();
+  });
+  const handlePointerMove = (0, _useEventCallback.default)(event => {
+    if (!isDraggingRef.current) {
+      return;
     }
+    throttledMove(event.nativeEvent);
+  });
+  const handlePointerEnd = (0, _useEventCallback.default)(event => {
+    if (!isDraggingRef.current) {
+      return;
+    }
+    try {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    } catch {
+      // Ignore if pointer is no longer active
+    }
+    isDraggingRef.current = false;
+    onInteractionEnd?.();
+  });
+  const numX = Number(x) || 0;
+  const numY = Number(y) || 0;
+  const numWidth = Number(width) || 0;
+  const numHeight = Number(height) || 0;
 
-    // Prevent scrolling on touch devices when dragging the thumb
-    thumb.addEventListener('touchmove', preventDefault, {
-      passive: false
-    });
-    const onPointerMove = (0, _rafThrottle.rafThrottle)(event => {
-      onMoveEvent(event);
-    });
-    const onPointerEnd = event => {
-      thumb.removeEventListener('pointermove', onPointerMove);
-      thumb.removeEventListener('pointerup', onPointerEnd);
-      thumb.removeEventListener('pointercancel', onPointerEnd);
-      thumb.releasePointerCapture(event.pointerId);
-    };
-    const onPointerDown = event => {
-      // Prevent text selection when dragging the thumb
-      event.preventDefault();
-      event.stopPropagation();
-      thumb.setPointerCapture(event.pointerId);
-      thumb.addEventListener('pointermove', onPointerMove);
-      thumb.addEventListener('pointercancel', onPointerEnd);
-      thumb.addEventListener('pointerup', onPointerEnd);
-    };
-    thumb.addEventListener('pointerdown', onPointerDown);
-    return () => {
-      thumb.removeEventListener('pointerdown', onPointerDown);
-      thumb.removeEventListener('pointermove', onPointerMove);
-      thumb.removeEventListener('pointercancel', onPointerEnd);
-      thumb.removeEventListener('pointerup', onPointerEnd);
-      thumb.removeEventListener('touchmove', preventDefault);
-      onPointerMove.clear();
-    };
-  }, [onMoveEvent, orientation]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Rect, (0, _extends2.default)({
-    className: (0, _clsx.default)(classes.root, className),
-    ref: ref,
-    rx: rx,
-    ry: ry
-  }, other));
+  // Compute a larger invisible touch target centered on the visible thumb
+  const touchWidth = Math.max(numWidth, _constants.ZOOM_SLIDER_TOUCH_TARGET);
+  const touchHeight = Math.max(numHeight, _constants.ZOOM_SLIDER_TOUCH_TARGET);
+  const touchX = numX - (touchWidth - numWidth) / 2;
+  const touchY = numY - (touchHeight - numHeight) / 2;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+    ref: groupRef,
+    onPointerDown: handlePointerDown,
+    onPointerMove: handlePointerMove,
+    onPointerUp: handlePointerEnd,
+    onPointerCancel: handlePointerEnd,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Rect, (0, _extends2.default)({
+      ref: ref,
+      className: (0, _clsx.default)(classes.root, className),
+      rx: rx,
+      ry: ry,
+      x: x,
+      y: y,
+      width: width,
+      height: height,
+      onPointerEnter: onPointerEnter,
+      onPointerLeave: onPointerLeave
+    }, other)), /*#__PURE__*/(0, _jsxRuntime.jsx)(TouchTarget, {
+      x: touchX,
+      y: touchY,
+      width: touchWidth,
+      height: touchHeight,
+      fill: "transparent",
+      stroke: "none",
+      cursor: orientation === 'horizontal' ? 'ew-resize' : 'ns-resize',
+      onPointerEnter: onPointerEnter,
+      onPointerLeave: onPointerLeave
+    })]
+  });
 });
 if (process.env.NODE_ENV !== "production") ChartsAxisZoomSliderThumb.displayName = "ChartsAxisZoomSliderThumb";

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderThumb.mjs

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "onMove", "orientation", "placement", "rx", "ry"];
+const _excluded = ["className", "onMove", "orientation", "placement", "rx", "ry", "x", "y", "width", "height", "onInteractionStart", "onInteractionEnd", "onPointerEnter", "onPointerLeave"];
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import useForkRef from '@mui/utils/useForkRef';
@@ -10,7 +10,8 @@ import useEventCallback from '@mui/utils/useEventCallback';
 import { rafThrottle } from '@mui/x-internals/rafThrottle';
 import clsx from 'clsx';
 import { chartsAxisZoomSliderThumbClasses, useUtilityClasses } from "./chartsAxisZoomSliderThumbClasses.mjs";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { ZOOM_SLIDER_TOUCH_TARGET } from "./constants.mjs";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Rect = styled('rect', {
   slot: 'internal',
   shouldForwardProp: undefined
@@ -31,10 +32,17 @@ const Rect = styled('rect', {
     cursor: 'ns-resize'
   }
 }));
-function preventDefault(event) {
-  event.preventDefault();
-}
 
+/**
+ * Invisible touch target that is only active on coarse pointer devices (touch).
+ * On fine pointer devices (mouse), it disables pointer events so it doesn't
+ * interfere with precise interactions on small zoom ranges.
+ */
+const TouchTarget = styled('rect')({
+  '@media (pointer: fine)': {
+    pointerEvents: 'none'
+  }
+});
 /**
  * Renders the zoom slider thumb, which is responsible for resizing the zoom range.
  * @internal
@@ -46,7 +54,15 @@ export const ChartsAxisZoomSliderThumb = /*#__PURE__*/React.forwardRef(function
       orientation,
       placement,
       rx = 4,
-      ry = 4
+      ry = 4,
+      x,
+      y,
+      width,
+      height,
+      onInteractionStart,
+      onInteractionEnd,
+      onPointerEnter,
+      onPointerLeave
     } = _ref,
     other = _objectWithoutPropertiesLoose(_ref, _excluded);
   const classes = useUtilityClasses({
@@ -54,52 +70,82 @@ export const ChartsAxisZoomSliderThumb = /*#__PURE__*/React.forwardRef(function
     orientation,
     placement
   });
+  const groupRef = React.useRef(null);
   const thumbRef = React.useRef(null);
   const ref = useForkRef(thumbRef, forwardedRef);
+  const isDraggingRef = React.useRef(false);
   const onMoveEvent = useEventCallback(onMove);
-  React.useEffect(() => {
-    const thumb = thumbRef.current;
-    if (!thumb) {
-      return () => {};
+  const throttledMove = React.useMemo(() => rafThrottle(event => onMoveEvent(event)), [onMoveEvent]);
+  React.useEffect(() => () => throttledMove.clear(), [throttledMove]);
+  const handlePointerDown = useEventCallback(event => {
+    event.preventDefault();
+    event.stopPropagation();
+    try {
+      event.currentTarget.setPointerCapture(event.pointerId);
+    } catch {
+      // setPointerCapture can fail if the pointer is no longer active,
+      // e.g., during touch→mouse compatibility events.
+      return;
+    }
+    isDraggingRef.current = true;
+    onInteractionStart?.();
+  });
+  const handlePointerMove = useEventCallback(event => {
+    if (!isDraggingRef.current) {
+      return;
     }
+    throttledMove(event.nativeEvent);
+  });
+  const handlePointerEnd = useEventCallback(event => {
+    if (!isDraggingRef.current) {
+      return;
+    }
+    try {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    } catch {
+      // Ignore if pointer is no longer active
+    }
+    isDraggingRef.current = false;
+    onInteractionEnd?.();
+  });
+  const numX = Number(x) || 0;
+  const numY = Number(y) || 0;
+  const numWidth = Number(width) || 0;
+  const numHeight = Number(height) || 0;
 
-    // Prevent scrolling on touch devices when dragging the thumb
-    thumb.addEventListener('touchmove', preventDefault, {
-      passive: false
-    });
-    const onPointerMove = rafThrottle(event => {
-      onMoveEvent(event);
-    });
-    const onPointerEnd = event => {
-      thumb.removeEventListener('pointermove', onPointerMove);
-      thumb.removeEventListener('pointerup', onPointerEnd);
-      thumb.removeEventListener('pointercancel', onPointerEnd);
-      thumb.releasePointerCapture(event.pointerId);
-    };
-    const onPointerDown = event => {
-      // Prevent text selection when dragging the thumb
-      event.preventDefault();
-      event.stopPropagation();
-      thumb.setPointerCapture(event.pointerId);
-      thumb.addEventListener('pointermove', onPointerMove);
-      thumb.addEventListener('pointercancel', onPointerEnd);
-      thumb.addEventListener('pointerup', onPointerEnd);
-    };
-    thumb.addEventListener('pointerdown', onPointerDown);
-    return () => {
-      thumb.removeEventListener('pointerdown', onPointerDown);
-      thumb.removeEventListener('pointermove', onPointerMove);
-      thumb.removeEventListener('pointercancel', onPointerEnd);
-      thumb.removeEventListener('pointerup', onPointerEnd);
-      thumb.removeEventListener('touchmove', preventDefault);
-      onPointerMove.clear();
-    };
-  }, [onMoveEvent, orientation]);
-  return /*#__PURE__*/_jsx(Rect, _extends({
-    className: clsx(classes.root, className),
-    ref: ref,
-    rx: rx,
-    ry: ry
-  }, other));
+  // Compute a larger invisible touch target centered on the visible thumb
+  const touchWidth = Math.max(numWidth, ZOOM_SLIDER_TOUCH_TARGET);
+  const touchHeight = Math.max(numHeight, ZOOM_SLIDER_TOUCH_TARGET);
+  const touchX = numX - (touchWidth - numWidth) / 2;
+  const touchY = numY - (touchHeight - numHeight) / 2;
+  return /*#__PURE__*/_jsxs("g", {
+    ref: groupRef,
+    onPointerDown: handlePointerDown,
+    onPointerMove: handlePointerMove,
+    onPointerUp: handlePointerEnd,
+    onPointerCancel: handlePointerEnd,
+    children: [/*#__PURE__*/_jsx(Rect, _extends({
+      ref: ref,
+      className: clsx(classes.root, className),
+      rx: rx,
+      ry: ry,
+      x: x,
+      y: y,
+      width: width,
+      height: height,
+      onPointerEnter: onPointerEnter,
+      onPointerLeave: onPointerLeave
+    }, other)), /*#__PURE__*/_jsx(TouchTarget, {
+      x: touchX,
+      y: touchY,
+      width: touchWidth,
+      height: touchHeight,
+      fill: "transparent",
+      stroke: "none",
+      cursor: orientation === 'horizontal' ? 'ew-resize' : 'ns-resize',
+      onPointerEnter: onPointerEnter,
+      onPointerLeave: onPointerLeave
+    })]
+  });
 });
 if (process.env.NODE_ENV !== "production") ChartsAxisZoomSliderThumb.displayName = "ChartsAxisZoomSliderThumb";

package/ChartsZoomSlider/internals/constants.d.mts

@@ -2,4 +2,9 @@ export declare const ZOOM_SLIDER_TRACK_SIZE = 8;
 export declare const ZOOM_SLIDER_ACTIVE_TRACK_SIZE = 10;
 export declare const ZOOM_SLIDER_THUMB_HEIGHT = 20;
 export declare const ZOOM_SLIDER_THUMB_WIDTH = 10;
+/**
+ * Minimum touch target size for interactive elements (thumbs, track).
+ * This is larger than the visible elements to make them easier to interact with on touch devices.
+ */
+export declare const ZOOM_SLIDER_TOUCH_TARGET = 44;
 export declare const ZOOM_SLIDER_SIZE: number;

package/ChartsZoomSlider/internals/constants.d.ts

@@ -2,4 +2,9 @@ export declare const ZOOM_SLIDER_TRACK_SIZE = 8;
 export declare const ZOOM_SLIDER_ACTIVE_TRACK_SIZE = 10;
 export declare const ZOOM_SLIDER_THUMB_HEIGHT = 20;
 export declare const ZOOM_SLIDER_THUMB_WIDTH = 10;
+/**
+ * Minimum touch target size for interactive elements (thumbs, track).
+ * This is larger than the visible elements to make them easier to interact with on touch devices.
+ */
+export declare const ZOOM_SLIDER_TOUCH_TARGET = 44;
 export declare const ZOOM_SLIDER_SIZE: number;

package/ChartsZoomSlider/internals/constants.js

@@ -3,9 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ZOOM_SLIDER_TRACK_SIZE = exports.ZOOM_SLIDER_THUMB_WIDTH = exports.ZOOM_SLIDER_THUMB_HEIGHT = exports.ZOOM_SLIDER_SIZE = exports.ZOOM_SLIDER_ACTIVE_TRACK_SIZE = void 0;
+exports.ZOOM_SLIDER_TRACK_SIZE = exports.ZOOM_SLIDER_TOUCH_TARGET = exports.ZOOM_SLIDER_THUMB_WIDTH = exports.ZOOM_SLIDER_THUMB_HEIGHT = exports.ZOOM_SLIDER_SIZE = exports.ZOOM_SLIDER_ACTIVE_TRACK_SIZE = void 0;
 const ZOOM_SLIDER_TRACK_SIZE = exports.ZOOM_SLIDER_TRACK_SIZE = 8;
 const ZOOM_SLIDER_ACTIVE_TRACK_SIZE = exports.ZOOM_SLIDER_ACTIVE_TRACK_SIZE = 10;
 const ZOOM_SLIDER_THUMB_HEIGHT = exports.ZOOM_SLIDER_THUMB_HEIGHT = 20;
 const ZOOM_SLIDER_THUMB_WIDTH = exports.ZOOM_SLIDER_THUMB_WIDTH = 10;
+/**
+ * Minimum touch target size for interactive elements (thumbs, track).
+ * This is larger than the visible elements to make them easier to interact with on touch devices.
+ */
+const ZOOM_SLIDER_TOUCH_TARGET = exports.ZOOM_SLIDER_TOUCH_TARGET = 44;
 const ZOOM_SLIDER_SIZE = exports.ZOOM_SLIDER_SIZE = Math.max(ZOOM_SLIDER_TRACK_SIZE, ZOOM_SLIDER_ACTIVE_TRACK_SIZE, ZOOM_SLIDER_THUMB_HEIGHT, ZOOM_SLIDER_THUMB_WIDTH);

package/ChartsZoomSlider/internals/constants.mjs

@@ -2,4 +2,9 @@ export const ZOOM_SLIDER_TRACK_SIZE = 8;
 export const ZOOM_SLIDER_ACTIVE_TRACK_SIZE = 10;
 export const ZOOM_SLIDER_THUMB_HEIGHT = 20;
 export const ZOOM_SLIDER_THUMB_WIDTH = 10;
+/**
+ * Minimum touch target size for interactive elements (thumbs, track).
+ * This is larger than the visible elements to make them easier to interact with on touch devices.
+ */
+export const ZOOM_SLIDER_TOUCH_TARGET = 44;
 export const ZOOM_SLIDER_SIZE = Math.max(ZOOM_SLIDER_TRACK_SIZE, ZOOM_SLIDER_ACTIVE_TRACK_SIZE, ZOOM_SLIDER_THUMB_HEIGHT, ZOOM_SLIDER_THUMB_WIDTH);

package/ChartsZoomSlider/internals/previews/AreaPreviewPlot.d.mts

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { type SeriesId } from '@mui/x-charts/internals';
 import { type PreviewPlotProps } from "./PreviewPlot.types.mjs";
-interface AreaPreviewPlotProps extends Pick<PreviewPlotProps, 'axisId'> {}
+interface AreaPreviewPlotProps extends Pick<PreviewPlotProps, 'axisId' | 'seriesIds'> {}
 export declare function AreaPreviewPlot({
-  axisId
+  axisId,
+  seriesIds
 }: AreaPreviewPlotProps): import("react/jsx-runtime").JSX.Element;
 export interface PreviewAreaElementProps extends Omit<React.SVGProps<SVGPathElement>, 'ref' | 'color' | 'id'> {
   seriesId: SeriesId;

package/ChartsZoomSlider/internals/previews/AreaPreviewPlot.d.ts

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { type SeriesId } from '@mui/x-charts/internals';
 import { type PreviewPlotProps } from "./PreviewPlot.types.js";
-interface AreaPreviewPlotProps extends Pick<PreviewPlotProps, 'axisId'> {}
+interface AreaPreviewPlotProps extends Pick<PreviewPlotProps, 'axisId' | 'seriesIds'> {}
 export declare function AreaPreviewPlot({
-  axisId
+  axisId,
+  seriesIds
 }: AreaPreviewPlotProps): import("react/jsx-runtime").JSX.Element;
 export interface PreviewAreaElementProps extends Omit<React.SVGProps<SVGPathElement>, 'ref' | 'color' | 'id'> {
   seriesId: SeriesId;

package/ChartsZoomSlider/internals/previews/AreaPreviewPlot.js

@@ -18,9 +18,11 @@ const AreaPlotRoot = (0, _styles.styled)('g', {
   slot: 'Root'
 })({});
 function AreaPreviewPlot({
-  axisId
+  axisId,
+  seriesIds
 }) {
   const completedData = useAreaPreviewData(axisId);
+  const seriesIdsSet = seriesIds ? new Set(seriesIds) : undefined;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(AreaPlotRoot, {
     children: completedData.map(({
       d,
@@ -28,7 +30,7 @@ function AreaPreviewPlot({
       color,
       area,
       gradientId
-    }) => !!area && /*#__PURE__*/(0, _jsxRuntime.jsx)(PreviewAreaElement, {
+    }) => !!area && (!seriesIdsSet || seriesIdsSet.has(seriesId)) && /*#__PURE__*/(0, _jsxRuntime.jsx)(PreviewAreaElement, {
       seriesId: seriesId,
       d: d,
       color: color,

package/ChartsZoomSlider/internals/previews/AreaPreviewPlot.mjs

@@ -10,9 +10,11 @@ const AreaPlotRoot = styled('g', {
   slot: 'Root'
 })({});
 export function AreaPreviewPlot({
-  axisId
+  axisId,
+  seriesIds
 }) {
   const completedData = useAreaPreviewData(axisId);
+  const seriesIdsSet = seriesIds ? new Set(seriesIds) : undefined;
   return /*#__PURE__*/_jsx(AreaPlotRoot, {
     children: completedData.map(({
       d,
@@ -20,7 +22,7 @@ export function AreaPreviewPlot({
       color,
       area,
       gradientId
-    }) => !!area && /*#__PURE__*/_jsx(PreviewAreaElement, {
+    }) => !!area && (!seriesIdsSet || seriesIdsSet.has(seriesId)) && /*#__PURE__*/_jsx(PreviewAreaElement, {
       seriesId: seriesId,
       d: d,
       color: color,