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

package/ChartsToolbarPro/ChartsToolbarImageExportTrigger.mjs

@@ -0,0 +1,73 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["render", "options", "onClick"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { forwardRef } from '@mui/x-internals/forwardRef';
+import { useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
+import { useChartsSlots } from '@mui/x-charts/internals';
+import { useChartProApiContext } from "../context/index.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A button that triggers an image export.
+ * It renders the `baseButton` slot.
+ *
+ * Demos:
+ *
+ * - [Export](https://mui.com/x/react-charts/export/)
+ */
+const ChartsToolbarImageExportTrigger = forwardRef(function ChartsToolbarImageExportTrigger(props, ref) {
+  const {
+      render,
+      options,
+      onClick
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    slots,
+    slotProps
+  } = useChartsSlots();
+  const apiRef = useChartProApiContext();
+  const handleClick = event => {
+    apiRef.current.exportAsImage(options);
+    onClick?.(event);
+  };
+  const element = useComponentRenderer(slots.baseButton, render, _extends({}, slotProps?.baseButton, {
+    onClick: handleClick
+  }, other, {
+    ref
+  }));
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: element
+  });
+});
+if (process.env.NODE_ENV !== "production") ChartsToolbarImageExportTrigger.displayName = "ChartsToolbarImageExportTrigger";
+process.env.NODE_ENV !== "production" ? ChartsToolbarImageExportTrigger.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,
+  disabled: PropTypes.bool,
+  id: PropTypes.string,
+  /**
+   * The options to apply on the image export.
+   * @demos
+   *   - [Export as Image](https://mui.com/x/react-charts/export/#export-as-image)
+   */
+  options: PropTypes.shape({
+    copyStyles: PropTypes.bool,
+    fileName: PropTypes.string,
+    nonce: PropTypes.string,
+    onBeforeExport: PropTypes.func,
+    quality: PropTypes.number,
+    type: PropTypes.string.isRequired
+  }),
+  /**
+   * A function to customize the rendering of the component.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  style: PropTypes.object,
+  tabIndex: PropTypes.number
+} : void 0;
+export { ChartsToolbarImageExportTrigger };

package/ChartsToolbarPro/ChartsToolbarPrintExportTrigger.d.mts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { type RenderProp } from '@mui/x-internals/useComponentRenderer';
+import { type ChartPrintExportOptions } from "../internals/plugins/useChartProExport/index.mjs";
+import { type ChartsSlotPropsPro } from "../internals/material/index.mjs";
+export interface ChartsToolbarPrintExportOptions extends ChartPrintExportOptions {
+  /**
+   * If `true`, this export option will be removed from the ChartsToolbarExport menu.
+   * @default false
+   */
+  disableToolbarButton?: boolean;
+}
+export type ChartsToolbarPrintExportTriggerProps = ChartsSlotPropsPro['baseButton'] & {
+  /**
+   * A function to customize the rendering of the component.
+   */
+  render?: RenderProp<ChartsSlotPropsPro['baseButton']>;
+  /**
+   * The options to apply on the Print export.
+   * @demos
+   *   - [Print/Export as PDF](https://mui.com/x/react-charts/export/#print-export-as-pdf)
+   */
+  options?: ChartPrintExportOptions;
+};
+/**
+ * A button that triggers a print export.
+ * It renders the `baseButton` slot.
+ *
+ * Demos:
+ *
+ * - [Export](https://mui.com/x/react-charts/export/)
+ */
+declare const ChartsToolbarPrintExportTrigger: React.ForwardRefExoticComponent<ChartsToolbarPrintExportTriggerProps> | React.ForwardRefExoticComponent<Omit<ChartsToolbarPrintExportTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { ChartsToolbarPrintExportTrigger };

package/ChartsToolbarPro/ChartsToolbarPrintExportTrigger.mjs

@@ -0,0 +1,71 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["render", "options", "onClick"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { forwardRef } from '@mui/x-internals/forwardRef';
+import { useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
+import { useChartsSlots } from '@mui/x-charts/internals';
+import { useChartProApiContext } from "../context/index.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A button that triggers a print export.
+ * It renders the `baseButton` slot.
+ *
+ * Demos:
+ *
+ * - [Export](https://mui.com/x/react-charts/export/)
+ */
+const ChartsToolbarPrintExportTrigger = forwardRef(function ChartsToolbarPrintExportTrigger(props, ref) {
+  const {
+      render,
+      options,
+      onClick
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    slots,
+    slotProps
+  } = useChartsSlots();
+  const apiRef = useChartProApiContext();
+  const handleClick = event => {
+    apiRef.current.exportAsPrint(options);
+    onClick?.(event);
+  };
+  const element = useComponentRenderer(slots.baseButton, render, _extends({}, slotProps?.baseButton, {
+    onClick: handleClick
+  }, other, {
+    ref
+  }));
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: element
+  });
+});
+if (process.env.NODE_ENV !== "production") ChartsToolbarPrintExportTrigger.displayName = "ChartsToolbarPrintExportTrigger";
+process.env.NODE_ENV !== "production" ? ChartsToolbarPrintExportTrigger.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,
+  disabled: PropTypes.bool,
+  id: PropTypes.string,
+  /**
+   * The options to apply on the Print export.
+   * @demos
+   *   - [Print/Export as PDF](https://mui.com/x/react-charts/export/#print-export-as-pdf)
+   */
+  options: PropTypes.shape({
+    copyStyles: PropTypes.bool,
+    fileName: PropTypes.string,
+    nonce: PropTypes.string,
+    onBeforeExport: PropTypes.func
+  }),
+  /**
+   * A function to customize the rendering of the component.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  style: PropTypes.object,
+  tabIndex: PropTypes.number
+} : void 0;
+export { ChartsToolbarPrintExportTrigger };

package/ChartsToolbarPro/ChartsToolbarPro.d.mts

@@ -0,0 +1,19 @@
+import { type ChartsToolbarProps } from '@mui/x-charts/Toolbar';
+import { type ChartsToolbarPrintExportOptions } from "./ChartsToolbarPrintExportTrigger.mjs";
+import { type ChartsToolbarImageExportOptions } from "./ChartsToolbarImageExportTrigger.mjs";
+export interface ChartsToolbarProProps extends ChartsToolbarProps {
+  printOptions?: ChartsToolbarPrintExportOptions;
+  imageExportOptions?: ChartsToolbarImageExportOptions[];
+}
+/**
+ * The chart toolbar component for the pro package.
+ */
+declare function ChartsToolbarPro({
+  printOptions,
+  imageExportOptions: rawImageExportOptions,
+  ...other
+}: ChartsToolbarProProps): import("react/jsx-runtime").JSX.Element | null;
+declare namespace ChartsToolbarPro {
+  var propTypes: any;
+}
+export { ChartsToolbarPro };

package/ChartsToolbarPro/ChartsToolbarPro.mjs

@@ -0,0 +1,166 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["printOptions", "imageExportOptions"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { Toolbar, ToolbarButton } from '@mui/x-charts/Toolbar';
+import { useChartContext, useChartsSlots } from '@mui/x-charts/internals';
+import { useChartsLocalization } from '@mui/x-charts/hooks';
+import useId from '@mui/utils/useId';
+import { ChartsToolbarDivider } from "./internals/ChartsToolbarDivider.mjs";
+import { ChartsMenu } from "./internals/ChartsMenu.mjs";
+import { selectorChartZoomIsEnabled } from "../internals/plugins/useChartProZoom/index.mjs";
+import { ChartsToolbarZoomInTrigger } from "./ChartsToolbarZoomInTrigger.mjs";
+import { ChartsToolbarZoomOutTrigger } from "./ChartsToolbarZoomOutTrigger.mjs";
+import { ChartsToolbarPrintExportTrigger } from "./ChartsToolbarPrintExportTrigger.mjs";
+import { ChartsToolbarImageExportTrigger } from "./ChartsToolbarImageExportTrigger.mjs";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_IMAGE_EXPORT_OPTIONS = [{
+  type: 'image/png'
+}];
+
+/**
+ * The chart toolbar component for the pro package.
+ */
+function ChartsToolbarPro(_ref) {
+  let {
+      printOptions,
+      imageExportOptions: rawImageExportOptions
+    } = _ref,
+    other = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const {
+    slots,
+    slotProps
+  } = useChartsSlots();
+  const {
+    store
+  } = useChartContext();
+  const {
+    localeText
+  } = useChartsLocalization();
+  const [exportMenuOpen, setExportMenuOpen] = React.useState(false);
+  const exportMenuTriggerRef = React.useRef(null);
+  const exportMenuId = useId();
+  const exportMenuTriggerId = useId();
+  const isZoomEnabled = store.use(selectorChartZoomIsEnabled);
+  const imageExportOptionList = rawImageExportOptions ?? DEFAULT_IMAGE_EXPORT_OPTIONS;
+  const showExportMenu = !printOptions?.disableToolbarButton || imageExportOptionList.length > 0;
+  const children = [];
+  if (isZoomEnabled) {
+    const Tooltip = slots.baseTooltip;
+    const ZoomOutIcon = slots.zoomOutIcon;
+    const ZoomInIcon = slots.zoomInIcon;
+    children.push(/*#__PURE__*/_jsx(Tooltip, _extends({}, slotProps.baseTooltip, {
+      title: localeText.zoomIn,
+      children: /*#__PURE__*/_jsx(ChartsToolbarZoomInTrigger, {
+        render: /*#__PURE__*/_jsx(ToolbarButton, {
+          size: "small"
+        }),
+        children: /*#__PURE__*/_jsx(ZoomInIcon, _extends({
+          fontSize: "small"
+        }, slotProps.zoomInIcon))
+      })
+    }), "zoom-in"));
+    children.push(/*#__PURE__*/_jsx(Tooltip, _extends({}, slotProps.baseTooltip, {
+      title: localeText.zoomOut,
+      children: /*#__PURE__*/_jsx(ChartsToolbarZoomOutTrigger, {
+        render: /*#__PURE__*/_jsx(ToolbarButton, {
+          size: "small"
+        }),
+        children: /*#__PURE__*/_jsx(ZoomOutIcon, _extends({
+          fontSize: "small"
+        }, slotProps.zoomOutIcon))
+      })
+    }), "zoom-out"));
+  }
+  if (showExportMenu) {
+    const Tooltip = slots.baseTooltip;
+    const MenuList = slots.baseMenuList;
+    const MenuItem = slots.baseMenuItem;
+    const ExportIcon = slots.exportIcon;
+    const closeExportMenu = () => setExportMenuOpen(false);
+    const handleListKeyDown = event => {
+      if (event.key === 'Tab') {
+        event.preventDefault();
+      }
+      if (isHideMenuKey(event.key)) {
+        closeExportMenu();
+      }
+    };
+    if (children.length > 0) {
+      children.push(/*#__PURE__*/_jsx(ChartsToolbarDivider, {}, "divider"));
+    }
+    children.push(/*#__PURE__*/_jsxs(React.Fragment, {
+      children: [/*#__PURE__*/_jsx(Tooltip, {
+        title: localeText.toolbarExport,
+        disableInteractive: exportMenuOpen,
+        children: /*#__PURE__*/_jsx(ToolbarButton, {
+          ref: exportMenuTriggerRef,
+          id: exportMenuTriggerId,
+          "aria-controls": exportMenuId,
+          "aria-haspopup": "true",
+          "aria-expanded": exportMenuOpen ? 'true' : undefined,
+          onClick: () => setExportMenuOpen(!exportMenuOpen),
+          size: "small",
+          children: /*#__PURE__*/_jsx(ExportIcon, {
+            fontSize: "small"
+          })
+        })
+      }), /*#__PURE__*/_jsx(ChartsMenu, {
+        target: exportMenuTriggerRef.current,
+        open: exportMenuOpen,
+        onClose: closeExportMenu,
+        position: "bottom-end",
+        children: /*#__PURE__*/_jsxs(MenuList, _extends({
+          id: exportMenuId,
+          "aria-labelledby": exportMenuTriggerId,
+          onKeyDown: handleListKeyDown,
+          autoFocusItem: true
+        }, slotProps?.baseMenuList, {
+          children: [!printOptions?.disableToolbarButton && /*#__PURE__*/_jsx(ChartsToolbarPrintExportTrigger, {
+            render: /*#__PURE__*/_jsx(MenuItem, _extends({
+              dense: true
+            }, slotProps?.baseMenuItem)),
+            options: printOptions,
+            onClick: closeExportMenu,
+            children: localeText.toolbarExportPrint
+          }), imageExportOptionList.map(imageExportOptions => /*#__PURE__*/_jsx(ChartsToolbarImageExportTrigger, {
+            render: /*#__PURE__*/_jsx(MenuItem, _extends({
+              dense: true
+            }, slotProps?.baseMenuItem)),
+            options: imageExportOptions,
+            onClick: closeExportMenu,
+            children: localeText.toolbarExportImage(imageExportOptions.type)
+          }, imageExportOptions.type))]
+        }))
+      })]
+    }, "export-menu"));
+  }
+  if (children.length === 0) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(Toolbar, _extends({}, other, {
+    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"  |
+  // ----------------------------------------------------------------------
+  imageExportOptions: PropTypes.arrayOf(PropTypes.shape({
+    copyStyles: PropTypes.bool,
+    fileName: PropTypes.string,
+    nonce: PropTypes.string,
+    onBeforeExport: PropTypes.func,
+    quality: PropTypes.number,
+    type: PropTypes.string.isRequired
+  })),
+  printOptions: PropTypes.object
+} : void 0;
+export { ChartsToolbarPro };
+function isHideMenuKey(key) {
+  return key === 'Tab' || key === 'Escape';
+}

package/ChartsToolbarPro/ChartsToolbarZoomInTrigger.mjs

@@ -0,0 +1,51 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["render"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useChartContext, useChartsSlots } from '@mui/x-charts/internals';
+import { useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
+import { selectorChartCanZoomIn } from "../internals/plugins/useChartProZoom/index.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A button that zooms the chart in.
+ * It renders the `baseButton` slot.
+ */
+const ChartsToolbarZoomInTrigger = /*#__PURE__*/React.forwardRef(function ChartsToolbarZoomInTrigger(_ref, ref) {
+  let {
+      render
+    } = _ref,
+    other = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const {
+    slots,
+    slotProps
+  } = useChartsSlots();
+  const {
+    instance,
+    store
+  } = useChartContext();
+  const disabled = store.use(selectorChartCanZoomIn);
+  const element = useComponentRenderer(slots.baseButton, render, _extends({}, slotProps.baseButton, {
+    onClick: () => instance.zoomIn(),
+    disabled
+  }, other, {
+    ref
+  }));
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: element
+  });
+});
+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"  |
+  // ----------------------------------------------------------------------
+  /**
+   * A function to customize the rendering of the component.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func])
+} : void 0;
+export { ChartsToolbarZoomInTrigger };

package/ChartsToolbarPro/ChartsToolbarZoomOutTrigger.mjs

@@ -0,0 +1,51 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["render"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useChartContext, useChartsSlots } from '@mui/x-charts/internals';
+import { useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
+import { selectorChartCanZoomOut } from "../internals/plugins/useChartProZoom/index.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A button that zooms the chart out.
+ * It renders the `baseButton` slot.
+ */
+const ChartsToolbarZoomOutTrigger = /*#__PURE__*/React.forwardRef(function ChartsToolbarZoomOutTrigger(_ref, ref) {
+  let {
+      render
+    } = _ref,
+    other = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const {
+    slots,
+    slotProps
+  } = useChartsSlots();
+  const {
+    instance,
+    store
+  } = useChartContext();
+  const disabled = store.use(selectorChartCanZoomOut);
+  const element = useComponentRenderer(slots.baseButton, render, _extends({}, slotProps.baseButton, {
+    onClick: () => instance.zoomOut(),
+    disabled
+  }, other, {
+    ref
+  }));
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: element
+  });
+});
+if (process.env.NODE_ENV !== "production") ChartsToolbarZoomOutTrigger.displayName = "ChartsToolbarZoomOutTrigger";
+process.env.NODE_ENV !== "production" ? ChartsToolbarZoomOutTrigger.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * A function to customize the rendering of the component.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func])
+} : void 0;
+export { ChartsToolbarZoomOutTrigger };

package/ChartsToolbarPro/Toolbar.types.d.mts

@@ -0,0 +1,15 @@
+import type * as React from 'react';
+import { type ChartsToolbarProProps } from "./ChartsToolbarPro.mjs";
+export interface ChartsToolbarProSlots {
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<ChartsToolbarProProps>;
+}
+export interface ChartsToolbarProSlotProps {
+  /**
+   * Props for the toolbar component.
+   */
+  toolbar?: Partial<ChartsToolbarProProps>;
+}

package/ChartsToolbarPro/index.d.mts

@@ -0,0 +1,5 @@
+export * from "./ChartsToolbarPro.mjs";
+export * from "./ChartsToolbarZoomInTrigger.mjs";
+export * from "./ChartsToolbarZoomOutTrigger.mjs";
+export * from "./ChartsToolbarPrintExportTrigger.mjs";
+export * from "./ChartsToolbarImageExportTrigger.mjs";

package/ChartsToolbarPro/index.mjs

@@ -0,0 +1,5 @@
+export * from "./ChartsToolbarPro.mjs";
+export * from "./ChartsToolbarZoomInTrigger.mjs";
+export * from "./ChartsToolbarZoomOutTrigger.mjs";
+export * from "./ChartsToolbarPrintExportTrigger.mjs";
+export * from "./ChartsToolbarImageExportTrigger.mjs";

package/ChartsToolbarPro/internals/ChartsMenu.d.mts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { type ChartBasePopperProps, type Placement } from "../../internals/slots/chartBaseSlotProps.mjs";
+export interface ChartsMenuProps extends Pick<ChartBasePopperProps, 'className' | 'onExited'> {
+  open: boolean;
+  target: HTMLElement | null;
+  onClose: (event?: Event) => void;
+  position?: Placement;
+  children: React.ReactNode;
+}
+declare function ChartsMenu(props: ChartsMenuProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ChartsMenu {
+  var propTypes: any;
+}
+export { ChartsMenu };

package/ChartsToolbarPro/internals/ChartsToolbarDivider.d.mts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { type ChartBaseDividerProps } from "../../internals/slots/chartBaseSlotProps.mjs";
+export interface ChartsToolbarDividerProps extends ChartBaseDividerProps {}
+declare const ChartsToolbarDivider: React.ForwardRefExoticComponent<Omit<ChartsToolbarDividerProps, "ref"> & React.RefAttributes<HTMLHRElement>>;
+export { ChartsToolbarDivider };

package/ChartsZoomSlider/ChartsZoomSlider.d.mts

@@ -0,0 +1,4 @@
+/**
+ * Renders the zoom slider for all x and y axes that have it enabled.
+ */
+export declare function ChartsZoomSlider(): import("react/jsx-runtime").JSX.Element;

package/ChartsZoomSlider/ChartsZoomSlider.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Renders the zoom slider for all x and y axes that have it enabled.
+ */
+export declare function ChartsZoomSlider(): import("react/jsx-runtime").JSX.Element;

package/ChartsZoomSlider/ChartsZoomSlider.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsZoomSlider = ChartsZoomSlider;
+var React = _interopRequireWildcard(require("react"));
+var _hooks = require("@mui/x-charts/hooks");
+var _ChartsAxisZoomSlider = require("./internals/ChartsAxisZoomSlider");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Renders the zoom slider for all x and y axes that have it enabled.
+ */
+function ChartsZoomSlider() {
+  const {
+    xAxisIds,
+    xAxis: xAxes
+  } = (0, _hooks.useXAxes)();
+  const {
+    yAxisIds,
+    yAxis: yAxes
+  } = (0, _hooks.useYAxes)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [xAxisIds.map(axisId => {
+      const xAxis = xAxes[axisId];
+      const slider = xAxis.zoom?.slider;
+      if (!slider?.enabled) {
+        return null;
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisZoomSlider.ChartsAxisZoomSlider, {
+        axisId: axisId,
+        axisDirection: "x"
+      }, axisId);
+    }), yAxisIds.map(axisId => {
+      const yAxis = yAxes[axisId];
+      const slider = yAxis.zoom?.slider;
+      if (!slider?.enabled) {
+        return null;
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisZoomSlider.ChartsAxisZoomSlider, {
+        axisId: axisId,
+        axisDirection: "y"
+      }, axisId);
+    })]
+  });
+}

package/ChartsZoomSlider/ChartsZoomSlider.mjs

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { useXAxes, useYAxes } from '@mui/x-charts/hooks';
+import { ChartsAxisZoomSlider } from "./internals/ChartsAxisZoomSlider.mjs";
+
+/**
+ * Renders the zoom slider for all x and y axes that have it enabled.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function ChartsZoomSlider() {
+  const {
+    xAxisIds,
+    xAxis: xAxes
+  } = useXAxes();
+  const {
+    yAxisIds,
+    yAxis: yAxes
+  } = useYAxes();
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [xAxisIds.map(axisId => {
+      const xAxis = xAxes[axisId];
+      const slider = xAxis.zoom?.slider;
+      if (!slider?.enabled) {
+        return null;
+      }
+      return /*#__PURE__*/_jsx(ChartsAxisZoomSlider, {
+        axisId: axisId,
+        axisDirection: "x"
+      }, axisId);
+    }), yAxisIds.map(axisId => {
+      const yAxis = yAxes[axisId];
+      const slider = yAxis.zoom?.slider;
+      if (!slider?.enabled) {
+        return null;
+      }
+      return /*#__PURE__*/_jsx(ChartsAxisZoomSlider, {
+        axisId: axisId,
+        axisDirection: "y"
+      }, axisId);
+    })]
+  });
+}

package/ChartsZoomSlider/index.d.mts

@@ -0,0 +1,3 @@
+export { ChartsZoomSlider } from "./ChartsZoomSlider.mjs";
+export { type ChartsAxisZoomSliderThumbClasses, type ChartsAxisZoomSliderThumbClassKey, chartsAxisZoomSliderThumbClasses } from "./internals/chartsAxisZoomSliderThumbClasses.mjs";
+export { type ChartsAxisZoomSliderTrackClasses, type ChartsAxisZoomSliderTrackClassKey, chartsAxisZoomSliderTrackClasses } from "./internals/chartsAxisZoomSliderTrackClasses.mjs";

package/ChartsZoomSlider/index.d.ts

@@ -0,0 +1,3 @@
+export { ChartsZoomSlider } from "./ChartsZoomSlider.js";
+export { type ChartsAxisZoomSliderThumbClasses, type ChartsAxisZoomSliderThumbClassKey, chartsAxisZoomSliderThumbClasses } from "./internals/chartsAxisZoomSliderThumbClasses.js";
+export { type ChartsAxisZoomSliderTrackClasses, type ChartsAxisZoomSliderTrackClassKey, chartsAxisZoomSliderTrackClasses } from "./internals/chartsAxisZoomSliderTrackClasses.js";

package/ChartsZoomSlider/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ChartsZoomSlider", {
+  enumerable: true,
+  get: function () {
+    return _ChartsZoomSlider.ChartsZoomSlider;
+  }
+});
+Object.defineProperty(exports, "chartsAxisZoomSliderThumbClasses", {
+  enumerable: true,
+  get: function () {
+    return _chartsAxisZoomSliderThumbClasses.chartsAxisZoomSliderThumbClasses;
+  }
+});
+Object.defineProperty(exports, "chartsAxisZoomSliderTrackClasses", {
+  enumerable: true,
+  get: function () {
+    return _chartsAxisZoomSliderTrackClasses.chartsAxisZoomSliderTrackClasses;
+  }
+});
+var _ChartsZoomSlider = require("./ChartsZoomSlider");
+var _chartsAxisZoomSliderThumbClasses = require("./internals/chartsAxisZoomSliderThumbClasses");
+var _chartsAxisZoomSliderTrackClasses = require("./internals/chartsAxisZoomSliderTrackClasses");

package/ChartsZoomSlider/index.mjs

@@ -0,0 +1,3 @@
+export { ChartsZoomSlider } from "./ChartsZoomSlider.mjs";
+export { chartsAxisZoomSliderThumbClasses } from "./internals/chartsAxisZoomSliderThumbClasses.mjs";
+export { chartsAxisZoomSliderTrackClasses } from "./internals/chartsAxisZoomSliderTrackClasses.mjs";