@mui/x-charts-pro 8.4.0 → 8.5.1

package/FunnelChart/funnel.types.d.ts

@@ -47,6 +47,7 @@ export interface FunnelSeriesType extends Omit<CommonSeriesType<FunnelValueType>
    *
    * - `bump`: A curve that creates a smooth transition between points, with a bump in the middle.
    * - `linear`: A straight line between points.
+   * - `linear-sharp`: A straight line between points, the smaller end of the funnel is a triangle.
    * - `step`: A step line that creates a staircase effect.
    * - `pyramid`: A pyramid shape that connects the points.
    * - `step-pyramid`: A step line that creates a staircase effect, with a pyramid shape.

package/FunnelChart/funnelPlotSlots.types.d.ts

@@ -1,10 +1,21 @@
 import * as React from 'react';
 import type { FunnelSectionProps } from "./FunnelSection.js";
+import { FunnelSectionLabelProps } from "./FunnelSectionLabel.js";
 export interface FunnelPlotSlots {
+  /**
+   * Custom component for funnel section.
+   * @default FunnelSection
+   */
   funnelSection?: React.ElementType<FunnelSectionProps>;
+  /**
+   * Custom component for funnel section label.
+   * @default FunnelSectionLabel
+   */
+  funnelSectionLabel?: React.ElementType<FunnelSectionLabelProps>;
 }
 export interface FunnelPlotSlotProps {
   funnelSection?: FunnelSectionProps;
+  funnelSectionLabel?: FunnelSectionLabelProps;
 }
 export interface FunnelPlotSlotExtension {
   /**

package/FunnelChart/funnelSectionClasses.d.ts

@@ -1,4 +1,5 @@
 import type { FunnelSectionProps } from "./FunnelSection.js";
+import type { FunnelSectionLabelProps } from "./FunnelSectionLabel.js";
 export interface FunnelSectionClasses {
   /** Styles applied to the root element. */
   root: string;
@@ -19,4 +20,5 @@ export interface FunnelSectionClasses {
   series: string;
 }
 export declare const useUtilityClasses: (props: FunnelSectionProps) => Record<"label" | "filled" | "outlined" | "highlighted" | "faded" | "root", string>;
+export declare const useLabelUtilityClasses: (props: FunnelSectionLabelProps) => Record<"label", string>;
 export declare const funnelSectionClasses: FunnelSectionClasses;

package/FunnelChart/funnelSectionClasses.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useUtilityClasses = exports.funnelSectionClasses = void 0;
+exports.useUtilityClasses = exports.useLabelUtilityClasses = exports.funnelSectionClasses = void 0;
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
@@ -15,10 +15,11 @@ const useUtilityClasses = props => {
   const {
     classes,
     seriesId,
-    variant
+    variant,
+    dataIndex
   } = props;
   const slots = {
-    root: ['root', `series-${seriesId}`],
+    root: ['root', `series-${seriesId}`, `data-index-${dataIndex}`],
     highlighted: ['highlighted'],
     faded: ['faded'],
     outlined: variant === 'outlined' ? ['outlined'] : [],
@@ -28,4 +29,16 @@ const useUtilityClasses = props => {
   return (0, _composeClasses.default)(slots, getFunnelSectionUtilityClass, classes);
 };
 exports.useUtilityClasses = useUtilityClasses;
-const funnelSectionClasses = exports.funnelSectionClasses = (0, _generateUtilityClasses.default)('MuiFunnelSection', ['root', 'highlighted', 'faded', 'filled', 'outlined', 'label', 'series']);
+const useLabelUtilityClasses = props => {
+  const {
+    classes,
+    seriesId,
+    dataIndex
+  } = props;
+  const slots = {
+    label: ['label', `series-${seriesId}`, `data-index-${dataIndex}`]
+  };
+  return (0, _composeClasses.default)(slots, getFunnelSectionUtilityClass, classes);
+};
+exports.useLabelUtilityClasses = useLabelUtilityClasses;
+const funnelSectionClasses = exports.funnelSectionClasses = (0, _generateUtilityClasses.default)('MuiFunnelSection', ['root', 'highlighted', 'faded', 'filled', 'outlined', 'label', 'series', 'data-index']);

package/FunnelChart/funnelSlots.types.d.ts

@@ -1,10 +1,11 @@
 import { ChartsOverlaySlotProps, ChartsOverlaySlots } from '@mui/x-charts/ChartsOverlay';
 import { ChartsTooltipSlotProps, ChartsTooltipSlots } from '@mui/x-charts/ChartsTooltip';
-import { ChartsAxisSlotProps, ChartsAxisSlots } from '@mui/x-charts/internals';
+import { ChartsAxisSlotProps, ChartsAxisSlots, ChartsSlotProps, ChartsSlots } from '@mui/x-charts/internals';
 import { ChartsLegendSlotProps, ChartsLegendSlots } from '@mui/x-charts/ChartsLegend';
+import { ChartsToolbarSlotProps, ChartsToolbarSlots } from '@mui/x-charts/Toolbar';
 import { FunnelPlotSlotProps, FunnelPlotSlots } from "./funnelPlotSlots.types.js";
-export interface FunnelChartSlots extends ChartsAxisSlots, FunnelPlotSlots, ChartsLegendSlots, ChartsTooltipSlots, ChartsOverlaySlots, ChartsAxisSlots {}
-export interface FunnelChartSlotProps extends ChartsAxisSlotProps, FunnelPlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps, ChartsOverlaySlotProps, ChartsAxisSlotProps {}
+export interface FunnelChartSlots extends ChartsAxisSlots, FunnelPlotSlots, ChartsLegendSlots, ChartsTooltipSlots, ChartsOverlaySlots, ChartsAxisSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
+export interface FunnelChartSlotProps extends ChartsAxisSlotProps, FunnelPlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps, ChartsOverlaySlotProps, ChartsAxisSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
 export interface FunnelChartSlotExtension {
   /**
    * Overridable component slots.

package/FunnelChart/index.d.ts

@@ -6,4 +6,6 @@ export * from "./categoryAxis.types.js";
 export * from "./funnelSlots.types.js";
 export type { FunnelCurveType } from "./curves/index.js";
 export { funnelSectionClasses } from "./funnelSectionClasses.js";
-export type { FunnelSectionClasses } from "./funnelSectionClasses.js";
+export type { FunnelSectionClasses } from "./funnelSectionClasses.js";
+export { FunnelSection } from "./FunnelSection.js";
+export { FunnelSectionLabel } from "./FunnelSectionLabel.js";

package/FunnelChart/index.js

@@ -5,8 +5,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _exportNames = {
   Unstable_FunnelChart: true,
-  funnelSectionClasses: true
+  funnelSectionClasses: true,
+  FunnelSection: true,
+  FunnelSectionLabel: true
 };
+Object.defineProperty(exports, "FunnelSection", {
+  enumerable: true,
+  get: function () {
+    return _FunnelSection.FunnelSection;
+  }
+});
+Object.defineProperty(exports, "FunnelSectionLabel", {
+  enumerable: true,
+  get: function () {
+    return _FunnelSectionLabel.FunnelSectionLabel;
+  }
+});
 Object.defineProperty(exports, "Unstable_FunnelChart", {
   enumerable: true,
   get: function () {
@@ -68,4 +82,6 @@ Object.keys(_funnelSlots).forEach(function (key) {
     }
   });
 });
-var _funnelSectionClasses = require("./funnelSectionClasses");
+var _funnelSectionClasses = require("./funnelSectionClasses");
+var _FunnelSection = require("./FunnelSection");
+var _FunnelSectionLabel = require("./FunnelSectionLabel");

package/FunnelChart/useFunnelChartProps.d.ts

@@ -3,6 +3,7 @@ import { ChartsAxisProps } from '@mui/x-charts/ChartsAxis';
 import { ChartsLegendSlotExtension } from '@mui/x-charts/ChartsLegend';
 import { ChartsWrapperProps } from '@mui/x-charts/internals';
 import { ChartsAxisHighlightProps } from '@mui/x-charts/ChartsAxisHighlight';
+import { FunnelChartPluginsSignatures } from "./FunnelChart.plugins.js";
 import { FunnelPlotProps } from "./FunnelPlot.js";
 import type { FunnelChartProps } from "./FunnelChart.js";
 import { ChartContainerProProps } from "../ChartContainerPro/index.js";
@@ -14,7 +15,7 @@ import { ChartContainerProProps } from "../ChartContainerPro/index.js";
  * @returns An object with props for the children components of FunnelChart
  */
 export declare const useFunnelChartProps: (props: FunnelChartProps) => {
-  chartContainerProps: ChartContainerProProps<"funnel">;
+  chartContainerProps: ChartContainerProProps<"funnel", FunnelChartPluginsSignatures>;
   funnelPlotProps: FunnelPlotProps;
   overlayProps: ChartsOverlayProps;
   chartsAxisProps: ChartsAxisProps;

package/FunnelChart/useFunnelChartProps.js

@@ -12,6 +12,7 @@ var _constants = require("@mui/x-charts/constants");
 var _internals = require("@mui/x-charts/internals");
 var _warning = require("@mui/x-internals/warning");
 var _colorPalettes = require("@mui/x-charts/colorPalettes");
+var _FunnelChart = require("./FunnelChart.plugins");
 const _excluded = ["categoryAxis", "series", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "skipAnimation", "loading", "onItemClick", "highlightedItem", "onHighlightChange", "className", "hideLegend", "axisHighlight", "apiRef", "gap"];
 function getCategoryAxisConfig(categoryAxis, series, isHorizontal, direction) {
   const maxSeriesLength = Math.max(...series.map(s => (s.data ?? []).length), 0);
@@ -119,7 +120,8 @@ const useFunnelChartProps = props => {
     highlightedItem,
     onHighlightChange,
     className,
-    apiRef
+    apiRef,
+    plugins: _FunnelChart.FUNNEL_CHART_PLUGINS
   });
   const funnelPlotProps = {
     gap,

package/Heatmap/Heatmap.d.ts

@@ -4,22 +4,30 @@ import { ChartsAxisProps } from '@mui/x-charts/ChartsAxis';
 import { ChartsTooltipProps } from '@mui/x-charts/ChartsTooltip';
 import { ChartsAxisSlots, ChartsAxisSlotProps, XAxis, YAxis } from '@mui/x-charts/internals';
 import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from '@mui/x-charts/ChartsOverlay';
+import { ChartsLegendSlotProps, ChartsLegendSlots } from '@mui/x-charts/ChartsLegend';
+import { ChartsToolbarSlotProps, ChartsToolbarSlots } from '@mui/x-charts/Toolbar';
+import { ChartsSlotPropsPro, ChartsSlotsPro } from "../internals/material/index.js";
 import { ChartContainerProProps } from "../ChartContainerPro/index.js";
 import { HeatmapSeriesType } from "../models/seriesType/heatmap.js";
 import { HeatmapTooltipProps } from "./HeatmapTooltip/index.js";
 import { HeatmapItemSlotProps, HeatmapItemSlots } from "./HeatmapItem.js";
 import { HeatmapPluginsSignatures } from "./Heatmap.plugins.js";
-export interface HeatmapSlots extends ChartsAxisSlots, ChartsOverlaySlots, HeatmapItemSlots {
+export interface HeatmapSlots extends ChartsAxisSlots, ChartsOverlaySlots, HeatmapItemSlots, ChartsToolbarSlots, Partial<ChartsSlotsPro> {
   /**
-   * Custom component for the tooltip popper.
+   * Custom component for the tooltip.
    * @default ChartsTooltipRoot
    */
   tooltip?: React.ElementType<HeatmapTooltipProps>;
+  /**
+   * Custom component for the legend.
+   * @default ContinuousColorLegendProps
+   */
+  legend?: ChartsLegendSlots['legend'];
 }
-export interface HeatmapSlotProps extends ChartsAxisSlotProps, ChartsOverlaySlotProps, HeatmapItemSlotProps {
+export interface HeatmapSlotProps extends ChartsAxisSlotProps, ChartsOverlaySlotProps, HeatmapItemSlotProps, ChartsLegendSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotPropsPro> {
   tooltip?: Partial<HeatmapTooltipProps>;
 }
-export interface HeatmapProps extends Omit<ChartContainerProProps<'heatmap', HeatmapPluginsSignatures>, 'series' | 'plugins' | 'xAxis' | 'yAxis' | 'skipAnimation'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
+export interface HeatmapProps extends Omit<ChartContainerProProps<'heatmap', HeatmapPluginsSignatures>, 'series' | 'plugins' | 'xAxis' | 'yAxis' | 'skipAnimation' | 'slots' | 'slotProps'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
   /**
    * The configuration of the x-axes.
    * If not provided, a default axis config is used.
@@ -42,6 +50,16 @@ export interface HeatmapProps extends Omit<ChartContainerProProps<'heatmap', Hea
    * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
    */
   tooltip?: ChartsTooltipProps;
+  /**
+   * If `true`, the legend is not rendered.
+   * @default true
+   */
+  hideLegend?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
   /**
    * Overridable component slots.
    * @default {}

package/Heatmap/Heatmap.js

@@ -15,14 +15,17 @@ var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _d3Interpolate = require("@mui/x-charts-vendor/d3-interpolate");
 var _ChartsAxis = require("@mui/x-charts/ChartsAxis");
 var _ChartsSurface = require("@mui/x-charts/ChartsSurface");
+var _internals = require("@mui/x-charts/internals");
 var _ChartsClipPath = require("@mui/x-charts/ChartsClipPath");
 var _ChartsOverlay = require("@mui/x-charts/ChartsOverlay");
 var _constants = require("@mui/x-charts/constants");
+var _ChartsLegend = require("@mui/x-charts/ChartsLegend");
 var _HeatmapPlot = require("./HeatmapPlot");
 var _seriesConfig = require("./seriesConfig");
 var _HeatmapTooltip = require("./HeatmapTooltip");
 var _Heatmap2 = require("./Heatmap.plugins");
 var _ChartDataProviderPro = require("../ChartDataProviderPro");
+var _ChartsToolbarPro = require("../ChartsToolbarPro");
 var _jsxRuntime = require("react/jsx-runtime");
 // The GnBu: https://github.com/d3/d3-scale-chromatic/blob/main/src/sequential-multi/GnBu.js
 const defaultColorMap = (0, _d3Interpolate.interpolateRgbBasis)(['#f7fcf0', '#e0f3db', '#ccebc5', '#a8ddb5', '#7bccc4', '#4eb3d3', '#2b8cbe', '#0868ac', '#084081']);
@@ -45,6 +48,7 @@ const Heatmap = exports.Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap
     name: 'MuiHeatmap'
   });
   const {
+    apiRef,
     xAxis,
     yAxis,
     zAxis,
@@ -61,7 +65,9 @@ const Heatmap = exports.Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap
     slotProps,
     loading,
     highlightedItem,
-    onHighlightChange
+    onHighlightChange,
+    hideLegend = true,
+    showToolbar = false
   } = props;
   const id = (0, _useId.default)();
   const clipPathId = `${id}-clip-path`;
@@ -89,8 +95,15 @@ const Heatmap = exports.Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap
       color: defaultColorMap
     }
   }], [zAxis]);
-  const Tooltip = props.slots?.tooltip ?? _HeatmapTooltip.HeatmapTooltip;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartDataProviderPro.ChartDataProviderPro, {
+  const chartsWrapperProps = {
+    sx,
+    legendPosition: props.slotProps?.legend?.position,
+    legendDirection: props.slotProps?.legend?.direction
+  };
+  const Tooltip = slots?.tooltip ?? _HeatmapTooltip.HeatmapTooltip;
+  const Toolbar = slots?.toolbar ?? _ChartsToolbarPro.ChartsToolbarPro;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProviderPro.ChartDataProviderPro, {
+    apiRef: apiRef,
     seriesConfig: seriesConfig,
     series: series.map(s => (0, _extends2.default)({
       type: 'heatmap'
@@ -108,26 +121,42 @@ const Heatmap = exports.Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap
     onHighlightChange: onHighlightChange,
     onAxisClick: onAxisClick,
     plugins: _Heatmap2.HEATMAP_PLUGINS,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, {
-      ref: ref,
-      sx: sx,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
-        clipPath: `url(#${clipPathId})`,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_HeatmapPlot.HeatmapPlot, {
-          slots: slots,
-          slotProps: slotProps
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, {
-          loading: loading,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
+      children: [showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, props.slotProps?.toolbar)) : null, !hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, {
+        slots: (0, _extends2.default)({}, slots, {
+          legend: slots?.legend ?? _ChartsLegend.ContinuousColorLegend
+        }),
+        slotProps: {
+          legend: (0, _extends2.default)({
+            labelPosition: 'extremes'
+          }, slotProps?.legend)
+        },
+        sx: slotProps?.legend?.direction === 'vertical' ? {
+          height: 150
+        } : {
+          width: '50%'
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, {
+        ref: ref,
+        sx: sx,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+          clipPath: `url(#${clipPathId})`,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_HeatmapPlot.HeatmapPlot, {
+            slots: slots,
+            slotProps: slotProps
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, {
+            loading: loading,
+            slots: slots,
+            slotProps: slotProps
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, {
           slots: slots,
           slotProps: slotProps
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, {
-        slots: slots,
-        slotProps: slotProps
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, {
-        id: clipPathId
-      }), children]
-    }), !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, slotProps?.tooltip))]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, {
+          id: clipPathId
+        }), children]
+      }), !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, slotProps?.tooltip))]
+    }))
   });
 });
 if (process.env.NODE_ENV !== "production") Heatmap.displayName = "Heatmap";
@@ -137,7 +166,10 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   apiRef: _propTypes.default.shape({
-    current: _propTypes.default.object
+    current: _propTypes.default.shape({
+      exportAsImage: _propTypes.default.func.isRequired,
+      exportAsPrint: _propTypes.default.func.isRequired
+    })
   }),
   className: _propTypes.default.string,
   /**
@@ -160,6 +192,11 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
   height: _propTypes.default.number,
+  /**
+   * If `true`, the legend is not rendered.
+   * @default true
+   */
+  hideLegend: _propTypes.default.bool,
   /**
    * The highlighted item.
    * Used when the highlight is controlled.
@@ -217,6 +254,11 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    * @ignore Unstable props for internal usage.
    */
   seriesConfig: _propTypes.default.object,
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar: _propTypes.default.bool,
   /**
    * The props used for each component slot.
    * @default {}

package/Heatmap/Heatmap.plugins.d.ts

@@ -1,3 +1,4 @@
 import { UseChartZAxisSignature, UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
-export type HeatmapPluginsSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'heatmap'>, UseChartInteractionSignature, UseChartHighlightSignature];
+import { UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
+export type HeatmapPluginsSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'heatmap'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartProExportSignature];
 export declare const HEATMAP_PLUGINS: ConvertSignaturesIntoPlugins<HeatmapPluginsSignatures>;

package/Heatmap/Heatmap.plugins.js

@@ -5,4 +5,5 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.HEATMAP_PLUGINS = void 0;
 var _internals = require("@mui/x-charts/internals");
-const HEATMAP_PLUGINS = exports.HEATMAP_PLUGINS = [_internals.useChartZAxis, _internals.useChartCartesianAxis, _internals.useChartInteraction, _internals.useChartHighlight];
+var _useChartProExport = require("../internals/plugins/useChartProExport");
+const HEATMAP_PLUGINS = exports.HEATMAP_PLUGINS = [_internals.useChartZAxis, _internals.useChartCartesianAxis, _internals.useChartInteraction, _internals.useChartHighlight, _useChartProExport.useChartProExport];

package/Heatmap/HeatmapTooltip/HeatmapTooltipAxesValue.d.ts

@@ -1,4 +1,4 @@
 /**
  * @ignore - internal component.
  */
-export declare const HeatmapTooltipAxesValue: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, keyof import("react").ClassAttributes<HTMLElement> | keyof import("react").HTMLAttributes<HTMLElement>>, {}>;
+export declare const HeatmapTooltipAxesValue: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, keyof import("react").ClassAttributes<HTMLElement> | keyof import("react").HTMLAttributes<HTMLElement>>, {}>;

package/LineChartPro/LineChartPro.d.ts

@@ -1,13 +1,21 @@
 import * as React from 'react';
-import { LineChartProps } from '@mui/x-charts/LineChart';
+import { LineChartProps, LineChartSlots, LineChartSlotProps } from '@mui/x-charts/LineChart';
+import { ChartsSlotPropsPro, ChartsSlotsPro } from "../internals/material/index.js";
 import { ChartContainerProProps } from "../ChartContainerPro/index.js";
 import { LineChartProPluginsSignatures } from "./LineChartPro.plugins.js";
-export interface LineChartProProps extends Omit<LineChartProps, 'apiRef'>, Omit<ChartContainerProProps<'line', LineChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig'> {
+export interface LineChartProSlots extends LineChartSlots, Partial<ChartsSlotsPro> {}
+export interface LineChartProSlotProps extends LineChartSlotProps, Partial<ChartsSlotPropsPro> {}
+export interface LineChartProProps extends Omit<LineChartProps, 'apiRef' | 'slots' | 'slotProps'>, Omit<ChartContainerProProps<'line', LineChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig' | 'slots' | 'slotProps'> {
   /**
-   * If true, shows the default chart toolbar.
-   * @default false
+   * Overridable component slots.
+   * @default {}
    */
-  showToolbar?: boolean;
+  slots?: LineChartProSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: LineChartProSlotProps;
 }
 /**
  * Demos:

package/LineChartPro/LineChartPro.js

@@ -79,9 +79,10 @@ const LineChartPro = exports.LineChartPro = /*#__PURE__*/React.forwardRef(functi
     plugins: _LineChartPro2.LINE_CHART_PRO_PLUGINS
   }), ref);
   const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
+  const Toolbar = props.slots?.toolbar ?? _ChartsToolbarPro.ChartsToolbarPro;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProviderPro.ChartDataProviderPro, (0, _extends2.default)({}, chartDataProviderProProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
-      children: [showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsToolbarPro.ChartsToolbarPro, {}) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
+      children: [showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.AreaPlot, (0, _extends2.default)({}, areaPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.LinePlot, (0, _extends2.default)({}, linePlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps))]
         })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartZoomSlider.ChartZoomSlider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
@@ -102,6 +103,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     current: _propTypes.default.shape({
       exportAsImage: _propTypes.default.func.isRequired,
       exportAsPrint: _propTypes.default.func.isRequired,
+      setAxisZoomData: _propTypes.default.func.isRequired,
       setZoomData: _propTypes.default.func.isRequired
     })
   }),
@@ -324,6 +326,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
       step: _propTypes.default.number
@@ -388,6 +391,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
       step: _propTypes.default.number
@@ -447,6 +451,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
       step: _propTypes.default.number
@@ -506,6 +511,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
       step: _propTypes.default.number
@@ -565,6 +571,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
       step: _propTypes.default.number
@@ -624,6 +631,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
       step: _propTypes.default.number
@@ -683,6 +691,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
       step: _propTypes.default.number
@@ -742,6 +751,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
       step: _propTypes.default.number
@@ -813,6 +823,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
       step: _propTypes.default.number
@@ -876,6 +887,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
       step: _propTypes.default.number
@@ -934,6 +946,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
       step: _propTypes.default.number
@@ -992,6 +1005,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
       step: _propTypes.default.number
@@ -1050,6 +1064,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
       step: _propTypes.default.number
@@ -1108,6 +1123,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
       step: _propTypes.default.number
@@ -1166,6 +1182,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
       step: _propTypes.default.number
@@ -1224,6 +1241,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
       step: _propTypes.default.number

package/PieChartPro/PieChartPro.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { PieChartProps, PieChartSlotProps, PieChartSlots } from '@mui/x-charts/PieChart';
+import { ChartsSlotsPro, ChartsSlotPropsPro } from "../internals/material/index.js";
+import { ChartContainerProProps } from "../ChartContainerPro/index.js";
+import { PieChartProPluginSignatures } from "./PieChartPro.plugins.js";
+export interface PieChartProSlots extends PieChartSlots, Partial<ChartsSlotsPro> {}
+export interface PieChartProSlotProps extends PieChartSlotProps, Partial<ChartsSlotPropsPro> {}
+export interface PieChartProProps extends Omit<PieChartProps, 'apiRef' | 'slots' | 'slotProps'>, Omit<ChartContainerProProps<'pie', PieChartProPluginSignatures>, 'series' | 'plugins' | 'seriesConfig' | 'slots' | 'slotProps'> {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: PieChartProSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: PieChartProSlotProps;
+}
+declare const PieChartPro: React.ForwardRefExoticComponent<PieChartProProps & React.RefAttributes<SVGSVGElement>>;
+export { PieChartPro };