@mui/x-charts-pro 8.4.0 → 8.5.1

package/context/index.d.ts

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

package/context/index.js

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

package/context/useChartApiContext.d.ts

@@ -0,0 +1,9 @@
+import { ChartProApi } from "../ChartContainerPro/index.js";
+/**
+ * The `useChartApiContext` hook provides access to the chart API.
+ * This is only available when the chart is rendered within a chart or a `ChartDataProvider` component.
+ * If you want to access the chart API outside those components, you should use the `apiRef` prop instead.
+ * @example
+ * const apiRef = useChartApiContext<ChartProApi<'bar'>>();
+ */
+export declare function useChartApiContext<Api extends ChartProApi>(): import("react").RefObject<Api>;

package/context/useChartApiContext.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartApiContext = useChartApiContext;
+var _context = require("@mui/x-charts/context");
+/**
+ * The `useChartApiContext` hook provides access to the chart API.
+ * This is only available when the chart is rendered within a chart or a `ChartDataProvider` component.
+ * If you want to access the chart API outside those components, you should use the `apiRef` prop instead.
+ * @example
+ * const apiRef = useChartApiContext<ChartProApi<'bar'>>();
+ */
+function useChartApiContext() {
+  return (0, _context.useChartApiContext)();
+}

package/esm/BarChartPro/BarChartPro.d.ts

@@ -1,13 +1,21 @@
 import * as React from 'react';
-import { BarChartProps } from '@mui/x-charts/BarChart';
+import { BarChartProps, BarChartSlotProps, BarChartSlots } from '@mui/x-charts/BarChart';
+import { ChartsSlotPropsPro, ChartsSlotsPro } from "../internals/material/index.js";
 import { ChartContainerProProps } from "../ChartContainerPro/index.js";
 import { BarChartProPluginsSignatures } from "./BarChartPro.plugins.js";
-export interface BarChartProProps extends Omit<BarChartProps, 'apiRef'>, Omit<ChartContainerProProps<'bar', BarChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig'> {
+export interface BarChartProSlots extends BarChartSlots, Partial<ChartsSlotsPro> {}
+export interface BarChartProSlotProps extends BarChartSlotProps, Partial<ChartsSlotPropsPro> {}
+export interface BarChartProProps extends Omit<BarChartProps, 'apiRef' | 'slots' | 'slotProps'>, Omit<ChartContainerProProps<'bar', BarChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig' | 'slots' | 'slotProps'> {
   /**
-   * If true, shows the default chart toolbar.
-   * @default false
+   * Overridable component slots.
+   * @default {}
    */
-  showToolbar?: boolean;
+  slots?: BarChartProSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: BarChartProSlotProps;
 }
 /**
  * Demos:

package/esm/BarChartPro/BarChartPro.js

@@ -70,9 +70,10 @@ const BarChartPro = /*#__PURE__*/React.forwardRef(function BarChartPro(inProps,
     plugins: BAR_CHART_PRO_PLUGINS
   }), ref);
   const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
+  const Toolbar = props.slots?.toolbar ?? ChartsToolbarPro;
   return /*#__PURE__*/_jsx(ChartDataProviderPro, _extends({}, chartDataProviderProProps, {
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
-      children: [showToolbar ? /*#__PURE__*/_jsx(ChartsToolbarPro, {}) : null, !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
+      children: [showToolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
           children: [/*#__PURE__*/_jsx(BarPlot, _extends({}, barPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
         })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartZoomSlider, {}), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
@@ -90,6 +91,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
     current: PropTypes.shape({
       exportAsImage: PropTypes.func.isRequired,
       exportAsPrint: PropTypes.func.isRequired,
+      setAxisZoomData: PropTypes.func.isRequired,
       setZoomData: PropTypes.func.isRequired
     })
   }),
@@ -320,6 +322,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
       step: PropTypes.number
@@ -384,6 +387,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
       step: PropTypes.number
@@ -443,6 +447,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
       step: PropTypes.number
@@ -502,6 +507,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
       step: PropTypes.number
@@ -561,6 +567,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
       step: PropTypes.number
@@ -620,6 +627,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
       step: PropTypes.number
@@ -679,6 +687,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
       step: PropTypes.number
@@ -738,6 +747,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
       step: PropTypes.number
@@ -809,6 +819,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
       step: PropTypes.number
@@ -872,6 +883,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
       step: PropTypes.number
@@ -930,6 +942,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
       step: PropTypes.number
@@ -988,6 +1001,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
       step: PropTypes.number
@@ -1046,6 +1060,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
       step: PropTypes.number
@@ -1104,6 +1119,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
       step: PropTypes.number
@@ -1162,6 +1178,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
       step: PropTypes.number
@@ -1220,6 +1237,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
       step: PropTypes.number

package/esm/ChartContainerPro/ChartContainerPro.d.ts

@@ -7,7 +7,6 @@ export type ChartContainerProProps<TSeries extends ChartSeriesType = ChartSeries
 type ChartContainerProComponent = <TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartContainerProProps<TSeries, TSignatures> & {
   ref?: React.ForwardedRef<SVGSVGElement>;
 }) => React.JSX.Element;
-export type ChartProApi = NonNullable<NonNullable<ChartContainerProProps['apiRef']>['current']>;
 /**
  * It sets up the data providers as well as the `<svg>` for the chart.
  *

package/esm/ChartContainerPro/ChartProApi.d.ts

@@ -0,0 +1,28 @@
+import { ChartAnyPluginSignature, ChartPublicAPI } from '@mui/x-charts/internals';
+import { HeatmapPluginsSignatures } from "../Heatmap/Heatmap.plugins.js";
+import { LineChartProPluginsSignatures } from "../LineChartPro/LineChartPro.plugins.js";
+import { ScatterChartProPluginsSignatures } from "../ScatterChartPro/ScatterChartPro.plugins.js";
+import { BarChartProPluginsSignatures } from "../BarChartPro/BarChartPro.plugins.js";
+import { AllPluginSignatures, DefaultPluginSignatures } from "../internals/plugins/allPlugins.js";
+import { FunnelChartPluginsSignatures } from "../FunnelChart/FunnelChart.plugins.js";
+import { RadarChartProPluginsSignatures } from "../RadarChartPro/RadarChartPro.plugins.js";
+import { PieChartProPluginSignatures } from "../PieChartPro/PieChartPro.plugins.js";
+type PluginsPerSeriesType = {
+  heatmap: HeatmapPluginsSignatures;
+  line: LineChartProPluginsSignatures;
+  scatter: ScatterChartProPluginsSignatures;
+  bar: BarChartProPluginsSignatures;
+  funnel: FunnelChartPluginsSignatures;
+  radar: RadarChartProPluginsSignatures;
+  pie: PieChartProPluginSignatures;
+  composition: DefaultPluginSignatures;
+};
+/**
+ * The API of the chart `apiRef` object.
+ * The chart type can be passed as the first generic parameter to narrow down the API to the specific chart type.
+ * @example ChartProApi<'bar'>
+ * If the chart is being created using composition, the `composition` value can be used.
+ * @example ChartProApi<'composition'>
+ */
+export type ChartProApi<TSeries extends keyof PluginsPerSeriesType | undefined = undefined, TSignatures extends readonly ChartAnyPluginSignature[] = (TSeries extends keyof PluginsPerSeriesType ? PluginsPerSeriesType[TSeries] : AllPluginSignatures)> = ChartPublicAPI<TSignatures>;
+export {};

package/esm/ChartContainerPro/ChartProApi.js

@@ -0,0 +1 @@
+export {};

package/esm/ChartContainerPro/index.d.ts

@@ -1,2 +1,3 @@
 import "../typeOverloads/index.js";
-export * from "./ChartContainerPro.js";
+export * from "./ChartContainerPro.js";
+export * from "./ChartProApi.js";

package/esm/ChartContainerPro/index.js

@@ -1,2 +1,3 @@
 import "../typeOverloads/index.js";
-export * from "./ChartContainerPro.js";
+export * from "./ChartContainerPro.js";
+export * from "./ChartProApi.js";

package/esm/ChartDataProviderPro/ChartDataProviderPro.d.ts

@@ -1,8 +1,18 @@
 import * as React from 'react';
 import { ChartSeriesType, ChartAnyPluginSignature, ChartProviderProps } from '@mui/x-charts/internals';
 import { ChartDataProviderProps } from '@mui/x-charts/ChartDataProvider';
+import { ChartsSlotPropsPro, ChartsSlotsPro } from "../internals/material/index.js";
 import { AllPluginSignatures } from "../internals/plugins/allPlugins.js";
-export type ChartDataProviderProProps<TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>> = ChartDataProviderProps<TSeries, TSignatures> & ChartProviderProps<TSeries, TSignatures>['pluginParams'];
+export type ChartDataProviderProProps<TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>> = ChartDataProviderProps<TSeries, TSignatures> & ChartProviderProps<TSeries, TSignatures>['pluginParams'] & {
+  /**
+   * Slots to customize charts' components.
+   */
+  slots?: Partial<ChartsSlotsPro>;
+  /**
+   * The props for the slots.
+   */
+  slotProps?: Partial<ChartsSlotPropsPro>;
+};
 /**
  * Orchestrates the data providers for the chart components and hooks.
  *

package/esm/ChartDataProviderPro/ChartDataProviderPro.js

@@ -4,13 +4,14 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Watermark } from '@mui/x-license/Watermark';
-import { ChartProvider } from '@mui/x-charts/internals';
+import { ChartProvider, ChartsSlotsProvider } from '@mui/x-charts/internals';
 import { ChartsLocalizationProvider } from '@mui/x-charts/ChartsLocalizationProvider';
 import { useLicenseVerifier } from '@mui/x-license/useLicenseVerifier';
+import { defaultSlotsMaterial } from "../internals/material/index.js";
 import { DEFAULT_PLUGINS } from "../internals/plugins/allPlugins.js";
 import { useChartDataProviderProProps } from "./useChartDataProviderProProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const releaseInfo = "MTc0Nzc3ODQwMDAwMA==";
+const releaseInfo = "MTc0OTA3MDgwMDAwMA==";
 const packageIdentifier = 'x-charts-pro';
 /**
  * Orchestrates the data providers for the chart components and hooks.
@@ -43,7 +44,9 @@ function ChartDataProviderPro(props) {
   const {
     children,
     localeText,
-    chartProviderProps
+    chartProviderProps,
+    slots,
+    slotProps
   } = useChartDataProviderProProps(_extends({}, props, {
     plugins: props.plugins ?? DEFAULT_PLUGINS
   }));
@@ -51,7 +54,12 @@ function ChartDataProviderPro(props) {
   return /*#__PURE__*/_jsxs(ChartProvider, _extends({}, chartProviderProps, {
     children: [/*#__PURE__*/_jsx(ChartsLocalizationProvider, {
       localeText: localeText,
-      children: children
+      children: /*#__PURE__*/_jsx(ChartsSlotsProvider, {
+        slots: slots,
+        slotProps: slotProps,
+        defaultSlots: defaultSlotsMaterial,
+        children: children
+      })
     }), /*#__PURE__*/_jsx(Watermark, {
       packageName: packageIdentifier,
       releaseInfo: releaseInfo
@@ -111,6 +119,14 @@ process.env.NODE_ENV !== "production" ? ChartDataProviderPro.propTypes = {
    * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
    */
   skipAnimation: PropTypes.bool,
+  /**
+   * The props for the slots.
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Slots to customize charts' components.
+   */
+  slots: PropTypes.object,
   theme: PropTypes.oneOf(['dark', 'light']),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.

package/esm/ChartDataProviderPro/useChartDataProviderProProps.d.ts

@@ -5,4 +5,6 @@ export declare const useChartDataProviderProProps: <TSeries extends ChartSeriesT
   children: import("react").ReactNode;
   localeText: Partial<import("@mui/x-charts/locales").ChartsLocaleText> | undefined;
   chartProviderProps: import("@mui/x-charts/internals").ChartProviderProps<TSeries, TSignatures>;
+  slots: Partial<import("@mui/x-charts/internals").ChartsSlots> | undefined;
+  slotProps: Partial<import("@mui/x-charts/internals").ChartsSlotProps> | undefined;
 };

package/esm/ChartDataProviderPro/useChartDataProviderProProps.js

@@ -5,11 +5,15 @@ export const useChartDataProviderProProps = props => {
   const {
     chartProviderProps,
     localeText,
+    slots,
+    slotProps,
     children
   } = useChartDataProviderProps(props);
   return {
     children,
     localeText,
-    chartProviderProps
+    chartProviderProps,
+    slots,
+    slotProps
   };
 };

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AxisId, DefaultizedZoomOptions, ZoomData } from '@mui/x-charts/internals';
+import { AxisId } from '@mui/x-charts/internals';
 interface ChartZoomSliderProps {
   /**
    * The ID of the axis this overview refers to.
@@ -18,6 +18,4 @@ export declare function ChartAxisZoomSlider({
   axisDirection,
   axisId
 }: ChartZoomSliderProps): React.JSX.Element | null;
-export declare function calculateZoomStart(newStart: number, currentZoom: ZoomData, options: Pick<DefaultizedZoomOptions, 'minStart' | 'minSpan' | 'maxSpan'>): number;
-export declare function calculateZoomEnd(newEnd: number, currentZoom: ZoomData, options: Pick<DefaultizedZoomOptions, 'maxEnd' | 'minSpan' | 'maxSpan'>): number;
 export {};