@mui/x-charts-pro 8.27.5 → 8.28.0

package/esm/FunnelChart/funnelSectionClasses.js

@@ -1,9 +1,21 @@
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import composeClasses from '@mui/utils/composeClasses';
+
+/**
+ * @deprecated Use `FunnelClasses` from `funnelClasses` instead.
+ */
+
+/**
+ * @deprecated Use `getFunnelUtilityClass` from `funnelClasses` instead.
+ */
 function getFunnelSectionUtilityClass(slot) {
   return generateUtilityClass('MuiFunnelSection', slot);
 }
+
+/**
+ * @deprecated Use `useUtilityClasses` from `funnelClasses` instead.
+ */
 export const useUtilityClasses = props => {
   const {
     classes,
@@ -21,6 +33,10 @@ export const useUtilityClasses = props => {
   };
   return composeClasses(slots, getFunnelSectionUtilityClass, classes);
 };
+
+/**
+ * @deprecated Use `useUtilityClasses` from `funnelClasses` instead.
+ */
 export const useLabelUtilityClasses = props => {
   const {
     classes,
@@ -32,4 +48,8 @@ export const useLabelUtilityClasses = props => {
   };
   return composeClasses(slots, getFunnelSectionUtilityClass, classes);
 };
+
+/**
+ * @deprecated Use `funnelClasses` from `funnelClasses` instead.
+ */
 export const funnelSectionClasses = generateUtilityClasses('MuiFunnelSection', ['root', 'highlighted', 'faded', 'filled', 'outlined', 'label', 'series', 'data-index']);

package/esm/FunnelChart/index.d.ts

@@ -13,5 +13,7 @@ export * from "./FunnelChart.plugins.js";
 export type { FunnelCurveType } from "./curves/index.js";
 export { funnelSectionClasses } from "./funnelSectionClasses.js";
 export type { FunnelSectionClasses } from "./funnelSectionClasses.js";
+export { funnelClasses } from "./funnelClasses.js";
+export type { FunnelClassKey, FunnelClasses } from "./funnelClasses.js";
 export { FunnelSection } from "./FunnelSection.js";
 export { FunnelSectionLabel } from "./FunnelSectionLabel.js";

package/esm/FunnelChart/index.js

@@ -12,5 +12,6 @@ export * from "./categoryAxis.types.js";
 export * from "./funnelSlots.types.js";
 export * from "./FunnelChart.plugins.js";
 export { funnelSectionClasses } from "./funnelSectionClasses.js";
+export { funnelClasses } from "./funnelClasses.js";
 export { FunnelSection } from "./FunnelSection.js";
 export { FunnelSectionLabel } from "./FunnelSectionLabel.js";

package/esm/Heatmap/Heatmap.js

@@ -562,8 +562,8 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
       requiredKeys: PropTypes.arrayOf(PropTypes.string),
       type: PropTypes.oneOf(['doubleTapReset']).isRequired
     }), PropTypes.shape({
-      pointerMode: PropTypes.any,
-      requiredKeys: PropTypes.array,
+      pointerMode: PropTypes.oneOf(['mouse', 'touch']),
+      requiredKeys: PropTypes.arrayOf(PropTypes.string),
       type: PropTypes.oneOf(['brush']).isRequired
     })]).isRequired)
   })

package/esm/Heatmap/HeatmapCell.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import type { SeriesId } from "../models/index.js";
+import type { HeatmapClasses } from "./heatmapClasses.js";
+export interface HeatmapCellOwnerState {
+  seriesId: SeriesId;
+  dataIndex: number;
+  color: string;
+  value: number;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  classes?: Partial<HeatmapClasses>;
+}
+/**
+ * @deprecated Use `HeatmapCellOwnerState` instead.
+ */
+export type HeatmapItemOwnerState = HeatmapCellOwnerState;
+export interface HeatmapCellProps extends React.ComponentPropsWithRef<'rect'> {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  ownerState: HeatmapCellOwnerState;
+}
+/**
+ * Demos:
+ *
+ * - [Heatmap](https://mui.com/x/react-charts/heatmap/)
+ *
+ * API:
+ *
+ * - [HeatmapCell API](https://mui.com/x/api/charts/heatmap-cell/)
+ */
+declare const HeatmapCell: React.ForwardRefExoticComponent<Omit<HeatmapCellProps, "ref"> & React.RefAttributes<SVGRectElement>>;
+export { HeatmapCell };

package/esm/Heatmap/HeatmapCell.js

@@ -0,0 +1,58 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+
+/**
+ * @deprecated Use `HeatmapCellOwnerState` instead.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const HeatmapCellRoot = styled('rect', {
+  name: 'MuiHeatmap',
+  slot: 'Cell',
+  overridesResolver: (_, styles) => styles.cell
+})(({
+  ownerState
+}) => ({
+  filter: ownerState.isHighlighted && 'saturate(120%)' || ownerState.isFaded && 'saturate(80%)' || undefined,
+  fill: ownerState.color,
+  shapeRendering: 'crispEdges'
+}));
+
+/**
+ * Demos:
+ *
+ * - [Heatmap](https://mui.com/x/react-charts/heatmap/)
+ *
+ * API:
+ *
+ * - [HeatmapCell API](https://mui.com/x/api/charts/heatmap-cell/)
+ */
+const HeatmapCell = /*#__PURE__*/React.forwardRef(function HeatmapCell(props, ref) {
+  return /*#__PURE__*/_jsx(HeatmapCellRoot, _extends({
+    ref: ref
+  }, props));
+});
+if (process.env.NODE_ENV !== "production") HeatmapCell.displayName = "HeatmapCell";
+process.env.NODE_ENV !== "production" ? HeatmapCell.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  height: PropTypes.number.isRequired,
+  ownerState: PropTypes.shape({
+    classes: PropTypes.object,
+    color: PropTypes.string.isRequired,
+    dataIndex: PropTypes.number.isRequired,
+    isFaded: PropTypes.bool.isRequired,
+    isHighlighted: PropTypes.bool.isRequired,
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    value: PropTypes.number.isRequired
+  }).isRequired,
+  width: PropTypes.number.isRequired,
+  x: PropTypes.number.isRequired,
+  y: PropTypes.number.isRequired
+} : void 0;
+export { HeatmapCell };

package/esm/Heatmap/HeatmapItem.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type SeriesId } from '@mui/x-charts/internals';
-import { type HeatmapItemOwnerState } from "./internals/HeatmapCell.js";
+import { type HeatmapCellProps } from "./HeatmapCell.js";
 export interface HeatmapItemSlots {
   /**
    * The component that renders the heatmap cell.
@@ -33,13 +33,6 @@ export interface HeatmapItemProps {
    */
   slots?: HeatmapItemSlots;
 }
-export interface HeatmapCellProps extends React.ComponentPropsWithRef<'rect'> {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  ownerState: HeatmapItemOwnerState;
-}
 /**
  * @ignore - internal component.
  */

package/esm/Heatmap/HeatmapItem.js

@@ -4,25 +4,11 @@ const _excluded = ["seriesId", "dataIndex", "color", "value", "isHighlighted", "
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import useSlotProps from '@mui/utils/useSlotProps';
-import composeClasses from '@mui/utils/composeClasses';
 import { useInteractionItemProps } from '@mui/x-charts/internals';
-import { getHeatmapUtilityClass } from "./heatmapClasses.js";
-import { HeatmapCell } from "./internals/HeatmapCell.js";
+import { useUtilityClasses } from "./heatmapClasses.js";
+import { HeatmapCell } from "./HeatmapCell.js";
 import { shouldRegisterPointerInteractionsGlobally } from "./shouldRegisterPointerInteractionsGlobally.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    seriesId,
-    isFaded,
-    isHighlighted
-  } = ownerState;
-  const slots = {
-    cell: ['cell', `series-${seriesId}`, isFaded && 'faded', isHighlighted && 'highlighted']
-  };
-  return composeClasses(slots, getHeatmapUtilityClass, classes);
-};
-
 /**
  * @ignore - internal component.
  */
@@ -51,9 +37,9 @@ function HeatmapItem(props) {
     seriesId,
     dataIndex,
     color,
-    value,
     isFaded,
-    isHighlighted
+    isHighlighted,
+    value
   };
   const classes = useUtilityClasses(ownerState);
   const Cell = slots?.cell ?? HeatmapCell;
@@ -73,7 +59,6 @@ process.env.NODE_ENV !== "production" ? HeatmapItem.propTypes = {
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   color: PropTypes.string.isRequired,
-  dataIndex: PropTypes.number.isRequired,
   height: PropTypes.number.isRequired,
   seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   /**

package/esm/Heatmap/heatmapClasses.d.ts

@@ -1,4 +1,7 @@
+import type { HeatmapCellOwnerState } from "./HeatmapCell.js";
 export interface HeatmapClasses {
+  /** Styles applied to the heatmap plot root element. */
+  root: string;
   /** Styles applied to the heatmap cells. */
   cell: string;
   /** Styles applied to the cell element if highlighted. */
@@ -8,9 +11,11 @@ export interface HeatmapClasses {
   /**
    * Styles applied to the root element for a specified series.
    * Needs to be suffixed with the series ID: `.${heatmapClasses.series}-${seriesId}`.
+   * @deprecated Use `[data-series="${seriesId}"]` selector instead.
    */
   series: string;
 }
 export type HeatmapClassKey = keyof HeatmapClasses;
 export declare function getHeatmapUtilityClass(slot: string): string;
-export declare const heatmapClasses: HeatmapClasses;
+export declare const heatmapClasses: HeatmapClasses;
+export declare const useUtilityClasses: (ownerState: HeatmapCellOwnerState) => Record<"cell" | "root", string>;

package/esm/Heatmap/heatmapClasses.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getHeatmapUtilityClass(slot) {
   // Those should be common to all charts
@@ -8,7 +9,20 @@ export function getHeatmapUtilityClass(slot) {
   }
   return generateUtilityClass('MuiHeatmap', slot);
 }
-export const heatmapClasses = _extends({}, generateUtilityClasses('MuiHeatmap', ['cell', 'series']), {
+export const heatmapClasses = _extends({}, generateUtilityClasses('MuiHeatmap', ['root', 'cell', 'series']), {
   highlighted: 'Charts-highlighted',
   faded: 'Charts-faded'
-});
+});
+export const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    seriesId,
+    isFaded,
+    isHighlighted
+  } = ownerState;
+  const slots = {
+    root: ['root'],
+    cell: ['cell', `series-${seriesId}`, isFaded && 'faded', isHighlighted && 'highlighted']
+  };
+  return composeClasses(slots, getHeatmapUtilityClass, classes);
+};

package/esm/Heatmap/index.d.ts

@@ -2,7 +2,9 @@ export { Heatmap } from "./Heatmap.js";
 export type { HeatmapSeries, HeatmapProps } from "./Heatmap.js";
 export { HeatmapPlot } from "./HeatmapPlot.js";
 export * from "./FocusedHeatmapCell.js";
-export type { HeatmapCellProps } from "./internals/HeatmapCell.js";
+export { HeatmapCell } from "./HeatmapCell.js";
+export type { HeatmapCellProps, HeatmapCellOwnerState } from "./HeatmapCell.js";
 export * from "./HeatmapTooltip/index.js";
 export * from "./Heatmap.plugins.js";
-export * from "./heatmapClasses.js";
+export { heatmapClasses } from "./heatmapClasses.js";
+export type { HeatmapClasses, HeatmapClassKey } from "./heatmapClasses.js";

package/esm/Heatmap/index.js

@@ -1,6 +1,7 @@
 export { Heatmap } from "./Heatmap.js";
 export { HeatmapPlot } from "./HeatmapPlot.js";
 export * from "./FocusedHeatmapCell.js";
+export { HeatmapCell } from "./HeatmapCell.js";
 export * from "./HeatmapTooltip/index.js";
 export * from "./Heatmap.plugins.js";
-export * from "./heatmapClasses.js";
+export { heatmapClasses } from "./heatmapClasses.js";

package/esm/Heatmap/shouldRegisterPointerInteractionsGlobally.js

@@ -1,4 +1,4 @@
-import { HeatmapCell } from "./internals/HeatmapCell.js";
+import { HeatmapCell } from "./HeatmapCell.js";
 
 /* Global pointer interactions should be registered when we're using the default HeatmapCell.
  * We only want to return false when a custom slot is being used to avoid breaking changes.

package/esm/LineChartPro/LineChartPro.js

@@ -1581,8 +1581,8 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       requiredKeys: PropTypes.arrayOf(PropTypes.string),
       type: PropTypes.oneOf(['doubleTapReset']).isRequired
     }), PropTypes.shape({
-      pointerMode: PropTypes.any,
-      requiredKeys: PropTypes.array,
+      pointerMode: PropTypes.oneOf(['mouse', 'touch']),
+      requiredKeys: PropTypes.arrayOf(PropTypes.string),
       type: PropTypes.oneOf(['brush']).isRequired
     })]).isRequired)
   })

package/esm/SankeyChart/SankeyLinkElement.js

@@ -4,8 +4,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { useInteractionItemProps, useStore } from '@mui/x-charts/internals';
-import { selectorIsLinkHighlighted } from "./plugins/index.js";
-import { selectorIsSankeyItemFaded } from "./plugins/useSankeyHighlight.selectors.js";
+import { selectorIsLinkHighlighted, selectorIsSankeyItemFaded } from "./plugins/useSankeyHighlight.selectors.js";
+import { useUtilityClasses } from "./sankeyClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @ignore - internal component.
@@ -31,6 +31,7 @@ export const SankeyLinkElement = /*#__PURE__*/React.forwardRef(function SankeyLi
 
   // Add interaction props for tooltips
   const interactionProps = useInteractionItemProps(identifier);
+  const classes = useUtilityClasses();
   const handleClick = useEventCallback(event => {
     onClick?.(event, identifier);
   });
@@ -45,6 +46,7 @@ export const SankeyLinkElement = /*#__PURE__*/React.forwardRef(function SankeyLi
   }
   return /*#__PURE__*/_jsx("path", _extends({
     ref: ref,
+    className: classes.link,
     d: link.path,
     fill: link.color,
     opacity: finalOpacity,

package/esm/SankeyChart/SankeyLinkLabel.js

@@ -3,6 +3,7 @@
 import * as React from 'react';
 import { useTheme } from '@mui/material/styles';
 import { useSankeySeries } from "../hooks/useSankeySeries.js";
+import { useUtilityClasses } from "./sankeyClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getLinkMidpoint = link => {
   if (link.y0 === undefined || link.y1 === undefined) {
@@ -32,6 +33,7 @@ export const SankeyLinkLabel = /*#__PURE__*/React.forwardRef(function SankeyLink
   } = props;
   const theme = useTheme();
   const series = useSankeySeries()[0];
+  const classes = useUtilityClasses();
   if (!link.path || link.y0 === undefined || link.y1 === undefined) {
     return null; // No path defined or invalid coordinates, nothing to render
   }
@@ -46,6 +48,7 @@ export const SankeyLinkLabel = /*#__PURE__*/React.forwardRef(function SankeyLink
   }) : link.value;
   return /*#__PURE__*/_jsx("text", {
     ref: ref,
+    className: classes.linkLabel,
     x: midpoint.x,
     y: midpoint.y,
     textAnchor: "middle",

package/esm/SankeyChart/SankeyNodeElement.d.ts

@@ -20,4 +20,4 @@ export interface SankeyNodeElementProps {
 /**
  * @ignore - internal component.
  */
-export declare const SankeyNodeElement: React.ForwardRefExoticComponent<SankeyNodeElementProps & React.RefAttributes<SVGGElement>>;
+export declare const SankeyNodeElement: React.ForwardRefExoticComponent<SankeyNodeElementProps & React.RefAttributes<SVGRectElement>>;

package/esm/SankeyChart/SankeyNodeElement.js

@@ -4,8 +4,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { useInteractionItemProps, useStore } from '@mui/x-charts/internals';
-import { selectorIsNodeHighlighted } from "./plugins/index.js";
-import { selectorIsSankeyItemFaded } from "./plugins/useSankeyHighlight.selectors.js";
+import { selectorIsNodeHighlighted, selectorIsSankeyItemFaded } from "./plugins/useSankeyHighlight.selectors.js";
+import { useUtilityClasses } from "./sankeyClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @ignore - internal component.
@@ -35,6 +35,7 @@ export const SankeyNodeElement = /*#__PURE__*/React.forwardRef(function SankeyNo
 
   // Add interaction props for tooltips
   const interactionProps = useInteractionItemProps(identifier);
+  const classes = useUtilityClasses();
   const handleClick = useEventCallback(event => {
     onClick?.(event, identifier);
   });
@@ -58,7 +59,8 @@ export const SankeyNodeElement = /*#__PURE__*/React.forwardRef(function SankeyNo
       cursor: onClick ? 'pointer' : 'default',
       stroke: "none",
       "data-highlighted": isHighlighted || undefined,
-      "data-faded": isFaded || undefined
+      "data-faded": isFaded || undefined,
+      className: classes.node
     }, interactionProps))
   });
 });

package/esm/SankeyChart/SankeyNodeLabel.js

@@ -3,6 +3,7 @@
 import * as React from 'react';
 import { useTheme } from '@mui/material/styles';
 import { useSankeyNodeHighlightState } from "./sankeyHighlightHooks.js";
+import { useUtilityClasses } from "./sankeyClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @ignore - internal component.
@@ -23,6 +24,7 @@ export const SankeyNodeLabel = /*#__PURE__*/React.forwardRef(function SankeyNode
   : x0 - 6; // Left side for other columns
 
   const labelAnchor = isRightSide ? 'start' : 'end';
+  const classes = useUtilityClasses();
   const highlightState = useSankeyNodeHighlightState(node.id);
   let opacity = 1;
   if (highlightState === 'faded') {
@@ -35,6 +37,7 @@ export const SankeyNodeLabel = /*#__PURE__*/React.forwardRef(function SankeyNode
   }
   return /*#__PURE__*/_jsx("text", {
     ref: ref,
+    className: classes.nodeLabel,
     x: labelX,
     y: (y0 + y1) / 2,
     textAnchor: labelAnchor,

package/esm/SankeyChart/SankeyPlot.js

@@ -11,8 +11,8 @@ import { SankeyNodeLabelPlot } from "./SankeyNodeLabelPlot.js";
 import { SankeyLinkLabelPlot } from "./SankeyLinkLabelPlot.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SankeyPlotRoot = styled('g', {
-  slot: 'internal',
-  shouldForwardProp: undefined
+  name: 'MuiSankeyPlot',
+  slot: 'Root'
 })({});
 
 /**

package/esm/SankeyChart/index.d.ts

@@ -12,6 +12,7 @@ export * from "./sankey.types.js";
 export * from "./sankeySlots.types.js";
 export * from "./sankeyHighlightHooks.js";
 export * from "../hooks/useSankeySeries.js";
-export { type SankeyPlotClasses, sankeyPlotClasses } from "./sankeyClasses.js";
+export { type SankeyPlotClasses, sankeyPlotClasses, sankeyClasses } from "./sankeyClasses.js";
+export type { SankeyClassKey, SankeyClasses } from "./sankeyClasses.js";
 export { SankeyTooltip, SankeyTooltipContent } from "./SankeyTooltip/index.js";
 export type { SankeyTooltipProps } from "./SankeyTooltip/index.js";

package/esm/SankeyChart/index.js

@@ -11,5 +11,5 @@ export * from "./sankey.types.js";
 export * from "./sankeySlots.types.js";
 export * from "./sankeyHighlightHooks.js";
 export * from "../hooks/useSankeySeries.js";
-export { sankeyPlotClasses } from "./sankeyClasses.js";
+export { sankeyPlotClasses, sankeyClasses } from "./sankeyClasses.js";
 export { SankeyTooltip, SankeyTooltipContent } from "./SankeyTooltip/index.js";

package/esm/SankeyChart/sankeyClasses.d.ts

@@ -1,4 +1,4 @@
-export interface SankeyPlotClasses {
+export interface SankeyClasses {
   /** Styles applied to the root element. */
   root: string;
   /** Styles applied to the nodes container. */
@@ -9,9 +9,30 @@ export interface SankeyPlotClasses {
   links: string;
   /** Styles applied to the link label container. */
   linkLabels: string;
+  /** Styles applied to an individual node element. */
+  node: string;
+  /** Styles applied to an individual link element. */
+  link: string;
+  /** Styles applied to an individual node label element. */
+  nodeLabel: string;
+  /** Styles applied to an individual link label element. */
+  linkLabel: string;
 }
-export declare function getSankeyPlotUtilityClass(slot: string): string;
-export declare const sankeyPlotClasses: SankeyPlotClasses;
-export declare const useUtilityClasses: (ownerState: {
-  classes?: Partial<SankeyPlotClasses>;
-}) => Record<"nodes" | "links" | "root" | "nodeLabels" | "linkLabels", string>;
+export type SankeyClassKey = keyof SankeyClasses;
+/**
+ * @deprecated Use `SankeyClasses` instead.
+ */
+export type SankeyPlotClasses = SankeyClasses;
+export declare function getSankeyUtilityClass(slot: string): string;
+/**
+ * @deprecated Use `getSankeyUtilityClass` instead.
+ */
+export declare const getSankeyPlotUtilityClass: typeof getSankeyUtilityClass;
+export declare const sankeyClasses: SankeyClasses;
+/**
+ * @deprecated Use `sankeyClasses` instead.
+ */
+export declare const sankeyPlotClasses: SankeyClasses;
+export declare const useUtilityClasses: (options?: {
+  classes?: Partial<SankeyClasses>;
+}) => Record<"nodes" | "links" | "node" | "link" | "root" | "nodeLabels" | "linkLabels" | "nodeLabel" | "linkLabel", string>;

package/esm/SankeyChart/sankeyClasses.js

@@ -1,20 +1,39 @@
 import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-export function getSankeyPlotUtilityClass(slot) {
+
+/**
+ * @deprecated Use `SankeyClasses` instead.
+ */
+
+export function getSankeyUtilityClass(slot) {
   return generateUtilityClass('MuiSankeyChart', slot);
 }
-export const sankeyPlotClasses = generateUtilityClasses('MuiSankeyChart', ['root', 'nodes', 'nodeLabels', 'links', 'linkLabels']);
-export const useUtilityClasses = ownerState => {
+
+/**
+ * @deprecated Use `getSankeyUtilityClass` instead.
+ */
+export const getSankeyPlotUtilityClass = getSankeyUtilityClass;
+export const sankeyClasses = generateUtilityClasses('MuiSankeyChart', ['root', 'nodes', 'nodeLabels', 'links', 'linkLabels', 'node', 'link', 'nodeLabel', 'linkLabel']);
+
+/**
+ * @deprecated Use `sankeyClasses` instead.
+ */
+export const sankeyPlotClasses = sankeyClasses;
+export const useUtilityClasses = options => {
   const {
     classes
-  } = ownerState;
+  } = options ?? {};
   const slots = {
     root: ['root'],
     nodes: ['nodes'],
     nodeLabels: ['nodeLabels'],
     links: ['links'],
-    linkLabels: ['linkLabels']
+    linkLabels: ['linkLabels'],
+    node: ['node'],
+    link: ['link'],
+    nodeLabel: ['nodeLabel'],
+    linkLabel: ['linkLabel']
   };
-  return composeClasses(slots, getSankeyPlotUtilityClass, classes);
+  return composeClasses(slots, getSankeyUtilityClass, classes);
 };

package/esm/ScatterChartPro/ScatterChartPro.js

@@ -1563,8 +1563,8 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       requiredKeys: PropTypes.arrayOf(PropTypes.string),
       type: PropTypes.oneOf(['doubleTapReset']).isRequired
     }), PropTypes.shape({
-      pointerMode: PropTypes.any,
-      requiredKeys: PropTypes.array,
+      pointerMode: PropTypes.oneOf(['mouse', 'touch']),
+      requiredKeys: PropTypes.arrayOf(PropTypes.string),
       type: PropTypes.oneOf(['brush']).isRequired
     })]).isRequired)
   })

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v8.27.5
+ * @mui/x-charts-pro v8.28.0
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the

package/esm/internals/plugins/useChartProZoom/ZoomInteractionConfig.types.d.ts

@@ -99,7 +99,7 @@ export type DoubleTapResetInteraction = Unpack<{
 } & AllModeProp & AllKeysProp>;
 export type BrushInteraction = Unpack<{
   type: 'brush';
-} & NoModeProp & NoKeysProp>;
+} & AllModeProp & AllKeysProp>;
 export type AnyInteraction = {
   type: string;
   pointerMode?: InteractionMode;

package/esm/internals/plugins/useChartProZoom/gestureHooks/useZoomOnBrush.js

@@ -16,6 +16,19 @@ export const useZoomOnBrush = ({
   React.useEffect(() => {
     instance.setZoomBrushEnabled(isZoomOnBrushEnabled);
   }, [isZoomOnBrushEnabled, instance]);
+  React.useEffect(() => {
+    if (!isZoomOnBrushEnabled) {
+      return;
+    }
+    instance.updateZoomInteractionListeners('brush', {
+      requiredKeys: config.requiredKeys,
+      pointerMode: config.pointerMode,
+      pointerOptions: {
+        mouse: config.mouse,
+        touch: config.touch
+      }
+    });
+  }, [isZoomOnBrushEnabled, config, instance]);
 
   // Zoom on brush
   React.useEffect(() => {

package/esm/themeAugmentation/components.d.ts

@@ -1,5 +1,15 @@
 import { type ComponentsProps, type ComponentsOverrides } from '@mui/material/styles';
 export interface ChartsProComponents<Theme = unknown> {
+  MuiFunnelChart?: {
+    defaultProps?: ComponentsProps['MuiFunnelChart'];
+    styleOverrides?: ComponentsOverrides<Theme>['MuiFunnelChart'];
+  };
+  MuiFunnelSection?: {
+    defaultProps?: ComponentsProps['MuiFunnelSection'];
+  };
+  MuiFunnelSectionLabel?: {
+    defaultProps?: ComponentsProps['MuiFunnelSection'];
+  };
   MuiBarChartPro?: {
     defaultProps?: ComponentsProps['MuiBarChartPro'];
   };
@@ -8,11 +18,19 @@ export interface ChartsProComponents<Theme = unknown> {
   };
   MuiHeatmap?: {
     defaultProps?: ComponentsProps['MuiHeatmap'];
-    styleOverrides?: ComponentsOverrides<Theme>['MuiHeatmap'];
+  };
+  MuiHeatmapPlot?: {
+    styleOverrides?: ComponentsOverrides<Theme>['MuiHeatmapPlot'];
   };
   MuiScatterChartPro?: {
     defaultProps?: ComponentsProps['MuiScatterChartPro'];
   };
+  MuiSankeyChart?: {
+    defaultProps?: ComponentsProps['MuiSankeyChart'];
+  };
+  MuiSankeyPlot?: {
+    styleOverrides?: ComponentsOverrides<Theme>['MuiSankeyPlot'];
+  };
 }
 declare module '@mui/material/styles' {
   interface Components<Theme = unknown> extends ChartsProComponents<Theme> {}