@mui/x-charts-pro 8.27.5 → 8.28.2

package/esm/FunnelChart/FunnelSectionLabel.js

@@ -2,25 +2,38 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["classes", "color", "onClick", "className", "label", "seriesId", "dataIndex"];
+const _excluded = ["classes", "color", "onClick", "className", "label", "variant", "seriesId", "dataIndex"];
 import * as React from 'react';
-import { useTheme } from '@mui/material/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import { consumeSlots } from '@mui/x-charts/internals';
-import { useLabelUtilityClasses } from "./funnelSectionClasses.js";
+import clsx from 'clsx';
+import { useLabelUtilityClasses as useDeprecatedLabelUtilityClasses } from "./funnelSectionClasses.js";
+import { useUtilityClasses } from "./funnelClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+export const FunnelSectionLabelText = styled('text', {
+  name: 'MuiFunnelChart',
+  slot: 'SectionLabel'
+})(() => ({
+  transition: 'opacity 0.2s ease-in, fill 0.2s ease-in, fill-opacity 0.2s ease-in, filter 0.2s ease-in'
+}));
+
 /**
  * @ignore - internal component.
  */
 const FunnelSectionLabel = consumeSlots('MuiFunnelSectionLabel', 'funnelSectionLabel', {
-  classesResolver: useLabelUtilityClasses
+  classesResolver: useDeprecatedLabelUtilityClasses
 }, /*#__PURE__*/React.forwardRef(function FunnelSectionLabel(props, ref) {
   const {
       classes,
-      label
+      label,
+      variant = 'filled'
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const theme = useTheme();
-  return /*#__PURE__*/_jsx("text", _extends({
+  const newClasses = useUtilityClasses({
+    variant
+  });
+  return /*#__PURE__*/_jsx(FunnelSectionLabelText, _extends({
     stroke: "none",
     pointerEvents: "none",
     fontFamily: theme.typography.body2.fontFamily,
@@ -32,7 +45,7 @@ const FunnelSectionLabel = consumeSlots('MuiFunnelSectionLabel', 'funnelSectionL
     fontStyle: theme.typography.body2.fontStyle,
     fontVariant: theme.typography.body2.fontVariant,
     fill: (theme.vars || theme)?.palette?.text?.primary,
-    className: classes?.label,
+    className: clsx(newClasses.sectionLabel, classes?.label),
     x: label.x,
     y: label.y,
     textAnchor: label.textAnchor ?? 'middle',

package/esm/FunnelChart/funnelClasses.d.ts

@@ -0,0 +1,29 @@
+import { type SeriesId } from '@mui/x-charts/internals';
+export interface FunnelClasses {
+  /** Styles applied to the funnel plot element. */
+  root: string;
+  /** Styles applied to an individual funnel section element. */
+  section: string;
+  /** Styles applied to a funnel section element if `variant="filled"`. */
+  sectionFilled: string;
+  /** Styles applied to a funnel section element if `variant="outlined"`. */
+  sectionOutlined: string;
+  /** Styles applied to a funnel section label element. */
+  sectionLabel: string;
+}
+export type FunnelClassKey = keyof FunnelClasses;
+export interface FunnelSectionOwnerState {
+  seriesId: SeriesId;
+  dataIndex: number;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  classes?: Partial<FunnelClasses>;
+}
+export declare function getFunnelUtilityClass(slot: string): string;
+export declare const funnelClasses: FunnelClasses;
+export interface UseUtilityClassesOptions {
+  variant?: 'filled' | 'outlined';
+  classes?: Partial<FunnelClasses>;
+}
+export declare const useUtilityClasses: (options?: UseUtilityClassesOptions) => Record<"section" | "sectionLabel" | "root", string>;

package/esm/FunnelChart/funnelClasses.js

@@ -0,0 +1,19 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import composeClasses from '@mui/utils/composeClasses';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+export function getFunnelUtilityClass(slot) {
+  return generateUtilityClass('MuiFunnelChart', slot);
+}
+export const funnelClasses = generateUtilityClasses('MuiFunnelChart', ['root', 'section', 'sectionFilled', 'sectionOutlined', 'sectionLabel', 'sectionLabelFilled', 'sectionLabelOutlined']);
+export const useUtilityClasses = options => {
+  const {
+    variant,
+    classes
+  } = options ?? {};
+  const slots = {
+    root: ['root'],
+    section: ['section', variant === 'filled' && 'sectionFilled', variant === 'outlined' && 'sectionOutlined'],
+    sectionLabel: ['sectionLabel', variant === 'filled' && 'sectionLabelFilled', variant === 'outlined' && 'sectionLabelOutlined']
+  };
+  return composeClasses(slots, getFunnelUtilityClass, classes);
+};

package/esm/FunnelChart/funnelSectionClasses.d.ts

@@ -1,5 +1,8 @@
 import type { FunnelSectionProps } from "./FunnelSection.js";
 import type { FunnelSectionLabelProps } from "./FunnelSectionLabel.js";
+/**
+ * @deprecated Use `FunnelClasses` from `funnelClasses` instead.
+ */
 export interface FunnelSectionClasses {
   /** Styles applied to the root element. */
   root: string;
@@ -16,9 +19,19 @@ export interface FunnelSectionClasses {
   /**
    * Styles applied to the root element for a specified series.
    * Needs to be suffixed with the series ID: `.${funnelSectionClasses.series}-${seriesId}`.
+   * @deprecated Use `[data-series]` selector instead.
    */
   series: string;
 }
+/**
+ * @deprecated Use `useUtilityClasses` from `funnelClasses` instead.
+ */
 export declare const useUtilityClasses: (props: FunnelSectionProps) => Record<"label" | "filled" | "outlined" | "highlighted" | "faded" | "root", string>;
+/**
+ * @deprecated Use `useUtilityClasses` from `funnelClasses` instead.
+ */
 export declare const useLabelUtilityClasses: (props: FunnelSectionLabelProps) => Record<"label", string>;
+/**
+ * @deprecated Use `funnelClasses` from `funnelClasses` instead.
+ */
 export declare const funnelSectionClasses: FunnelSectionClasses;

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>;