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

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderThumb.js

@@ -0,0 +1,112 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsAxisZoomSliderThumb = void 0;
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _styles = require("@mui/material/styles");
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _rafThrottle = require("@mui/x-internals/rafThrottle");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _chartsAxisZoomSliderThumbClasses = require("./chartsAxisZoomSliderThumbClasses");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["className", "onMove", "orientation", "placement", "rx", "ry"];
+const Rect = (0, _styles.styled)('rect', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})(({
+  theme
+}) => ({
+  [`&.${_chartsAxisZoomSliderThumbClasses.chartsAxisZoomSliderThumbClasses.root}`]: (0, _extends2.default)({
+    fill: (theme.vars || theme).palette.common.white,
+    stroke: (theme.vars || theme).palette.grey[500]
+  }, theme.applyStyles('dark', {
+    fill: (theme.vars || theme).palette.grey[300],
+    stroke: (theme.vars || theme).palette.grey[600]
+  })),
+  [`&.${_chartsAxisZoomSliderThumbClasses.chartsAxisZoomSliderThumbClasses.horizontal}`]: {
+    cursor: 'ew-resize'
+  },
+  [`&.${_chartsAxisZoomSliderThumbClasses.chartsAxisZoomSliderThumbClasses.vertical}`]: {
+    cursor: 'ns-resize'
+  }
+}));
+function preventDefault(event) {
+  event.preventDefault();
+}
+
+/**
+ * Renders the zoom slider thumb, which is responsible for resizing the zoom range.
+ * @internal
+ */
+const ChartsAxisZoomSliderThumb = exports.ChartsAxisZoomSliderThumb = /*#__PURE__*/React.forwardRef(function ChartsAxisZoomSliderThumb(_ref, forwardedRef) {
+  let {
+      className,
+      onMove,
+      orientation,
+      placement,
+      rx = 4,
+      ry = 4
+    } = _ref,
+    other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  const classes = (0, _chartsAxisZoomSliderThumbClasses.useUtilityClasses)({
+    onMove,
+    orientation,
+    placement
+  });
+  const thumbRef = React.useRef(null);
+  const ref = (0, _useForkRef.default)(thumbRef, forwardedRef);
+  const onMoveEvent = (0, _useEventCallback.default)(onMove);
+  React.useEffect(() => {
+    const thumb = thumbRef.current;
+    if (!thumb) {
+      return () => {};
+    }
+
+    // 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));
+});
+if (process.env.NODE_ENV !== "production") ChartsAxisZoomSliderThumb.displayName = "ChartsAxisZoomSliderThumb";

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderThumb.mjs

@@ -0,0 +1,105 @@
+'use client';
+
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["className", "onMove", "orientation", "placement", "rx", "ry"];
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import useForkRef from '@mui/utils/useForkRef';
+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";
+const Rect = styled('rect', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})(({
+  theme
+}) => ({
+  [`&.${chartsAxisZoomSliderThumbClasses.root}`]: _extends({
+    fill: (theme.vars || theme).palette.common.white,
+    stroke: (theme.vars || theme).palette.grey[500]
+  }, theme.applyStyles('dark', {
+    fill: (theme.vars || theme).palette.grey[300],
+    stroke: (theme.vars || theme).palette.grey[600]
+  })),
+  [`&.${chartsAxisZoomSliderThumbClasses.horizontal}`]: {
+    cursor: 'ew-resize'
+  },
+  [`&.${chartsAxisZoomSliderThumbClasses.vertical}`]: {
+    cursor: 'ns-resize'
+  }
+}));
+function preventDefault(event) {
+  event.preventDefault();
+}
+
+/**
+ * Renders the zoom slider thumb, which is responsible for resizing the zoom range.
+ * @internal
+ */
+export const ChartsAxisZoomSliderThumb = /*#__PURE__*/React.forwardRef(function ChartsAxisZoomSliderThumb(_ref, forwardedRef) {
+  let {
+      className,
+      onMove,
+      orientation,
+      placement,
+      rx = 4,
+      ry = 4
+    } = _ref,
+    other = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const classes = useUtilityClasses({
+    onMove,
+    orientation,
+    placement
+  });
+  const thumbRef = React.useRef(null);
+  const ref = useForkRef(thumbRef, forwardedRef);
+  const onMoveEvent = useEventCallback(onMove);
+  React.useEffect(() => {
+    const thumb = thumbRef.current;
+    if (!thumb) {
+      return () => {};
+    }
+
+    // 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));
+});
+if (process.env.NODE_ENV !== "production") ChartsAxisZoomSliderThumb.displayName = "ChartsAxisZoomSliderThumb";

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderTrack.d.mts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { type AxisId } from '@mui/x-charts/internals';
+interface ChartsAxisZoomSliderTrackProps extends React.ComponentProps<'rect'> {
+  axisId: AxisId;
+  axisDirection: 'x' | 'y';
+  reverse: boolean;
+  onSelectStart?: () => void;
+  onSelectEnd?: () => void;
+}
+export declare function ChartsAxisZoomSliderTrack({
+  axisId,
+  axisDirection,
+  reverse,
+  onSelectStart,
+  onSelectEnd,
+  ...other
+}: ChartsAxisZoomSliderTrackProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderTrack.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { type AxisId } from '@mui/x-charts/internals';
+interface ChartsAxisZoomSliderTrackProps extends React.ComponentProps<'rect'> {
+  axisId: AxisId;
+  axisDirection: 'x' | 'y';
+  reverse: boolean;
+  onSelectStart?: () => void;
+  onSelectEnd?: () => void;
+}
+export declare function ChartsAxisZoomSliderTrack({
+  axisId,
+  axisDirection,
+  reverse,
+  onSelectStart,
+  onSelectEnd,
+  ...other
+}: ChartsAxisZoomSliderTrackProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderTrack.js

@@ -0,0 +1,145 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsAxisZoomSliderTrack = ChartsAxisZoomSliderTrack;
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _internals = require("@mui/x-charts/internals");
+var _styles = require("@mui/material/styles");
+var _rafThrottle = require("@mui/x-internals/rafThrottle");
+var _system = require("@mui/system");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _zoomUtils = require("./zoom-utils");
+var _chartsAxisZoomSliderTrackClasses = require("./chartsAxisZoomSliderTrackClasses");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["axisId", "axisDirection", "reverse", "onSelectStart", "onSelectEnd"];
+const ZoomSliderTrack = (0, _styles.styled)('rect', {
+  slot: 'internal',
+  shouldForwardProp: prop => (0, _system.shouldForwardProp)(prop) && prop !== 'axisDirection' && prop !== 'isSelecting'
+})(({
+  theme
+}) => (0, _extends2.default)({
+  fill: (theme.vars || theme).palette.grey[300]
+}, theme.applyStyles('dark', {
+  fill: (theme.vars || theme).palette.grey[800]
+}), {
+  cursor: 'pointer',
+  variants: [{
+    props: {
+      axisDirection: 'x',
+      isSelecting: true
+    },
+    style: {
+      cursor: 'ew-resize'
+    }
+  }, {
+    props: {
+      axisDirection: 'y',
+      isSelecting: true
+    },
+    style: {
+      cursor: 'ns-resize'
+    }
+  }]
+}));
+function ChartsAxisZoomSliderTrack(_ref) {
+  let {
+      axisId,
+      axisDirection,
+      onSelectStart,
+      onSelectEnd
+    } = _ref,
+    other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  const ref = React.useRef(null);
+  const {
+    instance
+  } = (0, _internals.useChartContext)();
+  const {
+    chartsLayerContainerRef
+  } = instance;
+  const store = (0, _internals.useStore)();
+  const [isSelecting, setIsSelecting] = React.useState(false);
+  const classes = (0, _chartsAxisZoomSliderTrackClasses.useUtilityClasses)({
+    axisDirection
+  });
+  const onPointerDown = function onPointerDown(event) {
+    const rect = ref.current;
+    const element = chartsLayerContainerRef.current;
+    if (!rect || !element) {
+      return;
+    }
+    const pointerDownPoint = (0, _internals.getChartPoint)(element, event);
+    const zoomFromPointerDown = (0, _zoomUtils.calculateZoomFromPoint)(store.state, axisId, pointerDownPoint);
+    if (zoomFromPointerDown === null) {
+      return;
+    }
+    const onPointerMove = (0, _rafThrottle.rafThrottle)(function onPointerMove(pointerMoveEvent) {
+      const pointerMovePoint = (0, _internals.getChartPoint)(element, pointerMoveEvent);
+      const zoomFromPointerMove = (0, _zoomUtils.calculateZoomFromPoint)(store.state, axisId, pointerMovePoint);
+      if (zoomFromPointerMove === null) {
+        return;
+      }
+      const zoomOptions = (0, _internals.selectorChartAxisZoomOptionsLookup)(store.state, axisId);
+      instance.setAxisZoomData(axisId, prevZoomData => {
+        if (zoomFromPointerMove > zoomFromPointerDown) {
+          const end = (0, _zoomUtils.calculateZoomEnd)(zoomFromPointerMove, (0, _extends2.default)({}, prevZoomData, {
+            start: zoomFromPointerDown
+          }), zoomOptions);
+
+          /* If the starting point is too close to the end that minSpan wouldn't be respected, we need to update the
+           * start point. */
+          const start = (0, _zoomUtils.calculateZoomStart)(zoomFromPointerDown, (0, _extends2.default)({}, prevZoomData, {
+            start: zoomFromPointerDown,
+            end
+          }), zoomOptions);
+          return (0, _extends2.default)({}, prevZoomData, {
+            start,
+            end
+          });
+        }
+        const start = (0, _zoomUtils.calculateZoomStart)(zoomFromPointerMove, (0, _extends2.default)({}, prevZoomData, {
+          end: zoomFromPointerDown
+        }), zoomOptions);
+
+        /* If the starting point is too close to the start that minSpan wouldn't be respected, we need to update the
+         * start point. */
+        const end = (0, _zoomUtils.calculateZoomEnd)(zoomFromPointerDown, (0, _extends2.default)({}, prevZoomData, {
+          start,
+          end: zoomFromPointerDown
+        }), zoomOptions);
+        return (0, _extends2.default)({}, prevZoomData, {
+          start,
+          end
+        });
+      });
+    });
+    const onPointerUp = function onPointerUp(pointerUpEvent) {
+      rect.releasePointerCapture(pointerUpEvent.pointerId);
+      rect.removeEventListener('pointermove', onPointerMove);
+      document.removeEventListener('pointerup', onPointerUp);
+      setIsSelecting(false);
+      onSelectEnd?.();
+    };
+    event.preventDefault();
+    event.stopPropagation();
+    rect.setPointerCapture(event.pointerId);
+    document.addEventListener('pointerup', onPointerUp);
+    rect.addEventListener('pointermove', onPointerMove);
+    onSelectStart?.();
+    setIsSelecting(true);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ZoomSliderTrack, (0, _extends2.default)({
+    ref: ref,
+    onPointerDown: onPointerDown,
+    axisDirection: axisDirection,
+    isSelecting: isSelecting
+  }, other, {
+    className: (0, _clsx.default)(classes.background, other.className)
+  }));
+}

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderTrack.mjs

@@ -0,0 +1,138 @@
+'use client';
+
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["axisId", "axisDirection", "reverse", "onSelectStart", "onSelectEnd"];
+import * as React from 'react';
+import { useChartContext, getChartPoint, selectorChartAxisZoomOptionsLookup, useStore } from '@mui/x-charts/internals';
+import { styled } from '@mui/material/styles';
+import { rafThrottle } from '@mui/x-internals/rafThrottle';
+import { shouldForwardProp } from '@mui/system';
+import clsx from 'clsx';
+import { calculateZoomEnd, calculateZoomFromPoint, calculateZoomStart } from "./zoom-utils.mjs";
+import { useUtilityClasses } from "./chartsAxisZoomSliderTrackClasses.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+const ZoomSliderTrack = styled('rect', {
+  slot: 'internal',
+  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'axisDirection' && prop !== 'isSelecting'
+})(({
+  theme
+}) => _extends({
+  fill: (theme.vars || theme).palette.grey[300]
+}, theme.applyStyles('dark', {
+  fill: (theme.vars || theme).palette.grey[800]
+}), {
+  cursor: 'pointer',
+  variants: [{
+    props: {
+      axisDirection: 'x',
+      isSelecting: true
+    },
+    style: {
+      cursor: 'ew-resize'
+    }
+  }, {
+    props: {
+      axisDirection: 'y',
+      isSelecting: true
+    },
+    style: {
+      cursor: 'ns-resize'
+    }
+  }]
+}));
+export function ChartsAxisZoomSliderTrack(_ref) {
+  let {
+      axisId,
+      axisDirection,
+      onSelectStart,
+      onSelectEnd
+    } = _ref,
+    other = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const ref = React.useRef(null);
+  const {
+    instance
+  } = useChartContext();
+  const {
+    chartsLayerContainerRef
+  } = instance;
+  const store = useStore();
+  const [isSelecting, setIsSelecting] = React.useState(false);
+  const classes = useUtilityClasses({
+    axisDirection
+  });
+  const onPointerDown = function onPointerDown(event) {
+    const rect = ref.current;
+    const element = chartsLayerContainerRef.current;
+    if (!rect || !element) {
+      return;
+    }
+    const pointerDownPoint = getChartPoint(element, event);
+    const zoomFromPointerDown = calculateZoomFromPoint(store.state, axisId, pointerDownPoint);
+    if (zoomFromPointerDown === null) {
+      return;
+    }
+    const onPointerMove = rafThrottle(function onPointerMove(pointerMoveEvent) {
+      const pointerMovePoint = getChartPoint(element, pointerMoveEvent);
+      const zoomFromPointerMove = calculateZoomFromPoint(store.state, axisId, pointerMovePoint);
+      if (zoomFromPointerMove === null) {
+        return;
+      }
+      const zoomOptions = selectorChartAxisZoomOptionsLookup(store.state, axisId);
+      instance.setAxisZoomData(axisId, prevZoomData => {
+        if (zoomFromPointerMove > zoomFromPointerDown) {
+          const end = calculateZoomEnd(zoomFromPointerMove, _extends({}, prevZoomData, {
+            start: zoomFromPointerDown
+          }), zoomOptions);
+
+          /* If the starting point is too close to the end that minSpan wouldn't be respected, we need to update the
+           * start point. */
+          const start = calculateZoomStart(zoomFromPointerDown, _extends({}, prevZoomData, {
+            start: zoomFromPointerDown,
+            end
+          }), zoomOptions);
+          return _extends({}, prevZoomData, {
+            start,
+            end
+          });
+        }
+        const start = calculateZoomStart(zoomFromPointerMove, _extends({}, prevZoomData, {
+          end: zoomFromPointerDown
+        }), zoomOptions);
+
+        /* If the starting point is too close to the start that minSpan wouldn't be respected, we need to update the
+         * start point. */
+        const end = calculateZoomEnd(zoomFromPointerDown, _extends({}, prevZoomData, {
+          start,
+          end: zoomFromPointerDown
+        }), zoomOptions);
+        return _extends({}, prevZoomData, {
+          start,
+          end
+        });
+      });
+    });
+    const onPointerUp = function onPointerUp(pointerUpEvent) {
+      rect.releasePointerCapture(pointerUpEvent.pointerId);
+      rect.removeEventListener('pointermove', onPointerMove);
+      document.removeEventListener('pointerup', onPointerUp);
+      setIsSelecting(false);
+      onSelectEnd?.();
+    };
+    event.preventDefault();
+    event.stopPropagation();
+    rect.setPointerCapture(event.pointerId);
+    document.addEventListener('pointerup', onPointerUp);
+    rect.addEventListener('pointermove', onPointerMove);
+    onSelectStart?.();
+    setIsSelecting(true);
+  };
+  return /*#__PURE__*/_jsx(ZoomSliderTrack, _extends({
+    ref: ref,
+    onPointerDown: onPointerDown,
+    axisDirection: axisDirection,
+    isSelecting: isSelecting
+  }, other, {
+    className: clsx(classes.background, other.className)
+  }));
+}

package/ChartsZoomSlider/internals/chartsAxisZoomSliderThumbClasses.d.mts

@@ -0,0 +1,17 @@
+import type { ChartsZoomSliderThumbOwnerState } from "./ChartsAxisZoomSliderThumb.mjs";
+export interface ChartsAxisZoomSliderThumbClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element when it is horizontal. */
+  horizontal: string;
+  /** Styles applied to the root element when it is vertical. */
+  vertical: string;
+  /** Styles applied to the root element when it is a start thumb. */
+  start: string;
+  /** Styles applied to the root element when it is an end thumb. */
+  end: string;
+}
+export type ChartsAxisZoomSliderThumbClassKey = keyof ChartsAxisZoomSliderThumbClasses;
+export declare const chartsAxisZoomSliderThumbClasses: ChartsAxisZoomSliderThumbClasses;
+export declare function getAxisZoomSliderThumbUtilityClass(slot: string): string;
+export declare const useUtilityClasses: (ownerState: ChartsZoomSliderThumbOwnerState) => Record<"root", string>;

package/ChartsZoomSlider/internals/chartsAxisZoomSliderThumbClasses.d.ts

@@ -0,0 +1,17 @@
+import type { ChartsZoomSliderThumbOwnerState } from "./ChartsAxisZoomSliderThumb.js";
+export interface ChartsAxisZoomSliderThumbClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element when it is horizontal. */
+  horizontal: string;
+  /** Styles applied to the root element when it is vertical. */
+  vertical: string;
+  /** Styles applied to the root element when it is a start thumb. */
+  start: string;
+  /** Styles applied to the root element when it is an end thumb. */
+  end: string;
+}
+export type ChartsAxisZoomSliderThumbClassKey = keyof ChartsAxisZoomSliderThumbClasses;
+export declare const chartsAxisZoomSliderThumbClasses: ChartsAxisZoomSliderThumbClasses;
+export declare function getAxisZoomSliderThumbUtilityClass(slot: string): string;
+export declare const useUtilityClasses: (ownerState: ChartsZoomSliderThumbOwnerState) => Record<"root", string>;

package/ChartsZoomSlider/internals/chartsAxisZoomSliderThumbClasses.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.chartsAxisZoomSliderThumbClasses = void 0;
+exports.getAxisZoomSliderThumbUtilityClass = getAxisZoomSliderThumbUtilityClass;
+exports.useUtilityClasses = void 0;
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+const chartsAxisZoomSliderThumbClasses = exports.chartsAxisZoomSliderThumbClasses = (0, _generateUtilityClasses.default)('MuiChartAxisZoomSliderThumb', ['root', 'horizontal', 'vertical', 'start', 'end']);
+function getAxisZoomSliderThumbUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiChartAxisZoomSliderThumb', slot);
+}
+const useUtilityClasses = ownerState => {
+  const {
+    orientation,
+    placement
+  } = ownerState;
+  const slots = {
+    root: ['root', orientation === 'horizontal' ? 'horizontal' : 'vertical', placement === 'start' ? 'start' : 'end']
+  };
+  return (0, _composeClasses.default)(slots, getAxisZoomSliderThumbUtilityClass);
+};
+exports.useUtilityClasses = useUtilityClasses;

package/ChartsZoomSlider/internals/chartsAxisZoomSliderThumbClasses.mjs

@@ -0,0 +1,17 @@
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import composeClasses from '@mui/utils/composeClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+export const chartsAxisZoomSliderThumbClasses = generateUtilityClasses('MuiChartAxisZoomSliderThumb', ['root', 'horizontal', 'vertical', 'start', 'end']);
+export function getAxisZoomSliderThumbUtilityClass(slot) {
+  return generateUtilityClass('MuiChartAxisZoomSliderThumb', slot);
+}
+export const useUtilityClasses = ownerState => {
+  const {
+    orientation,
+    placement
+  } = ownerState;
+  const slots = {
+    root: ['root', orientation === 'horizontal' ? 'horizontal' : 'vertical', placement === 'start' ? 'start' : 'end']
+  };
+  return composeClasses(slots, getAxisZoomSliderThumbUtilityClass);
+};

package/ChartsZoomSlider/internals/chartsAxisZoomSliderTrackClasses.d.mts

@@ -0,0 +1,15 @@
+import type { ChartsAxisZoomSliderActiveTrackProps } from "./ChartsAxisZoomSliderActiveTrack.mjs";
+export interface ChartsAxisZoomSliderTrackClasses {
+  /** Styles applied to the root element when it is horizontal. */
+  horizontal: string;
+  /** Styles applied to the root element when it is vertical. */
+  vertical: string;
+  /** Styles applied to the root element to the active part of the track. */
+  active: string;
+  /** Styles applied to the root element to the background part of the track. */
+  background: string;
+}
+export type ChartsAxisZoomSliderTrackClassKey = keyof ChartsAxisZoomSliderTrackClasses;
+export declare const chartsAxisZoomSliderTrackClasses: ChartsAxisZoomSliderTrackClasses;
+export declare function getAxisZoomSliderTrackUtilityClass(slot: string): string;
+export declare const useUtilityClasses: (props: Partial<ChartsAxisZoomSliderActiveTrackProps>) => Record<"background" | "active", string>;

package/ChartsZoomSlider/internals/chartsAxisZoomSliderTrackClasses.d.ts

@@ -0,0 +1,15 @@
+import type { ChartsAxisZoomSliderActiveTrackProps } from "./ChartsAxisZoomSliderActiveTrack.js";
+export interface ChartsAxisZoomSliderTrackClasses {
+  /** Styles applied to the root element when it is horizontal. */
+  horizontal: string;
+  /** Styles applied to the root element when it is vertical. */
+  vertical: string;
+  /** Styles applied to the root element to the active part of the track. */
+  active: string;
+  /** Styles applied to the root element to the background part of the track. */
+  background: string;
+}
+export type ChartsAxisZoomSliderTrackClassKey = keyof ChartsAxisZoomSliderTrackClasses;
+export declare const chartsAxisZoomSliderTrackClasses: ChartsAxisZoomSliderTrackClasses;
+export declare function getAxisZoomSliderTrackUtilityClass(slot: string): string;
+export declare const useUtilityClasses: (props: Partial<ChartsAxisZoomSliderActiveTrackProps>) => Record<"background" | "active", string>;