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

package/SankeyChart/SankeyChart.js

@@ -15,7 +15,7 @@ var _styles = require("@mui/material/styles");
 var _ChartsSurface = require("@mui/x-charts/ChartsSurface");
 var _ChartsOverlay = require("@mui/x-charts/ChartsOverlay");
 var _ChartsWrapper = require("@mui/x-charts/ChartsWrapper");
-var _useChartContainerProProps = require("../ChartContainerPro/useChartContainerProProps");
+var _useChartsContainerProProps = require("../ChartsContainerPro/useChartsContainerProProps");
 var _SankeyPlot = require("./SankeyPlot");
 var _useSankeyChartProps = require("./useSankeyChartProps");
 var _SankeyTooltip = require("./SankeyTooltip");
@@ -44,24 +44,24 @@ const SankeyChart = exports.SankeyChart = /*#__PURE__*/React.forwardRef(function
     name: 'MuiSankeyChart'
   });
   const {
-    chartContainerProps,
+    chartsContainerProps,
     sankeyPlotProps,
     overlayProps,
     chartsWrapperProps,
     children
   } = (0, _useSankeyChartProps.useSankeyChartProps)(themedProps);
-  const _useChartContainerPro = (0, _useChartContainerProProps.useChartContainerProProps)(chartContainerProps),
+  const _useChartsContainerPr = (0, _useChartsContainerProProps.useChartsContainerProProps)(chartsContainerProps),
     {
-      chartDataProviderProProps: {
+      chartsDataProviderProProps: {
         series
       },
       chartsSurfaceProps
-    } = _useChartContainerPro,
-    chartDataProviderProProps = (0, _objectWithoutPropertiesLoose2.default)(_useChartContainerPro.chartDataProviderProProps, _excluded);
+    } = _useChartsContainerPr,
+    chartsDataProviderProProps = (0, _objectWithoutPropertiesLoose2.default)(_useChartsContainerPr.chartsDataProviderProProps, _excluded);
   const Tooltip = themedProps.slots?.tooltip ?? _SankeyTooltip.SankeyTooltip;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SankeyDataProvider.SankeyDataProvider, (0, _extends2.default)({
     series: series
-  }, chartDataProviderProProps, {
+  }, chartsDataProviderProProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWrapper.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
       ref: ref,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
@@ -94,14 +94,19 @@ process.env.NODE_ENV !== "production" ? SankeyChart.propTypes = {
    * @default rainbowSurgePalette
    */
   colors: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.func]),
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
   desc: _propTypes.default.string,
-  enableKeyboardNavigation: _propTypes.default.bool,
+  /**
+   * If `true`, disables keyboard navigation for the chart.
+   */
+  disableKeyboardNavigation: _propTypes.default.bool,
   /**
    * Options to enable features planned for the next major.
    */
-  experimentalFeatures: _propTypes.default.shape({
-    preferStrictDomainInLineCharts: _propTypes.default.bool
-  }),
+  experimentalFeatures: _propTypes.default.object,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
@@ -194,7 +199,7 @@ process.env.NODE_ENV !== "production" ? SankeyChart.propTypes = {
   /**
    * The callback fired when the tooltip item changes.
    *
-   * @param {SeriesItemIdentifier<TSeries> | null} tooltipItem  The newly highlighted item.
+   * @param {SeriesItemIdentifier<SeriesType> | null} tooltipItem  The newly highlighted item.
    */
   onTooltipItemChange: _propTypes.default.func,
   /**
@@ -214,6 +219,10 @@ process.env.NODE_ENV !== "production" ? SankeyChart.propTypes = {
   slots: _propTypes.default.object,
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
   theme: _propTypes.default.oneOf(['dark', 'light']),
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
   title: _propTypes.default.string,
   /**
    * The tooltip item.

package/SankeyChart/SankeyChart.mjs

@@ -9,7 +9,7 @@ import { useThemeProps } from '@mui/material/styles';
 import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
 import { ChartsOverlay } from '@mui/x-charts/ChartsOverlay';
 import { ChartsWrapper } from '@mui/x-charts/ChartsWrapper';
-import { useChartContainerProProps } from "../ChartContainerPro/useChartContainerProProps.mjs";
+import { useChartsContainerProProps } from "../ChartsContainerPro/useChartsContainerProProps.mjs";
 import { SankeyPlot } from "./SankeyPlot.mjs";
 import { useSankeyChartProps } from "./useSankeyChartProps.mjs";
 import { SankeyTooltip } from "./SankeyTooltip/index.mjs";
@@ -37,24 +37,24 @@ const SankeyChart = /*#__PURE__*/React.forwardRef(function SankeyChart(props, re
     name: 'MuiSankeyChart'
   });
   const {
-    chartContainerProps,
+    chartsContainerProps,
     sankeyPlotProps,
     overlayProps,
     chartsWrapperProps,
     children
   } = useSankeyChartProps(themedProps);
-  const _useChartContainerPro = useChartContainerProProps(chartContainerProps),
+  const _useChartsContainerPr = useChartsContainerProProps(chartsContainerProps),
     {
-      chartDataProviderProProps: {
+      chartsDataProviderProProps: {
         series
       },
       chartsSurfaceProps
-    } = _useChartContainerPro,
-    chartDataProviderProProps = _objectWithoutPropertiesLoose(_useChartContainerPro.chartDataProviderProProps, _excluded);
+    } = _useChartsContainerPr,
+    chartsDataProviderProProps = _objectWithoutPropertiesLoose(_useChartsContainerPr.chartsDataProviderProProps, _excluded);
   const Tooltip = themedProps.slots?.tooltip ?? SankeyTooltip;
   return /*#__PURE__*/_jsx(SankeyDataProvider, _extends({
     series: series
-  }, chartDataProviderProProps, {
+  }, chartsDataProviderProProps, {
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
       ref: ref,
       children: [/*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
@@ -87,14 +87,19 @@ process.env.NODE_ENV !== "production" ? SankeyChart.propTypes = {
    * @default rainbowSurgePalette
    */
   colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
   desc: PropTypes.string,
-  enableKeyboardNavigation: PropTypes.bool,
+  /**
+   * If `true`, disables keyboard navigation for the chart.
+   */
+  disableKeyboardNavigation: PropTypes.bool,
   /**
    * Options to enable features planned for the next major.
    */
-  experimentalFeatures: PropTypes.shape({
-    preferStrictDomainInLineCharts: PropTypes.bool
-  }),
+  experimentalFeatures: PropTypes.object,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
@@ -187,7 +192,7 @@ process.env.NODE_ENV !== "production" ? SankeyChart.propTypes = {
   /**
    * The callback fired when the tooltip item changes.
    *
-   * @param {SeriesItemIdentifier<TSeries> | null} tooltipItem  The newly highlighted item.
+   * @param {SeriesItemIdentifier<SeriesType> | null} tooltipItem  The newly highlighted item.
    */
   onTooltipItemChange: PropTypes.func,
   /**
@@ -207,6 +212,10 @@ process.env.NODE_ENV !== "production" ? SankeyChart.propTypes = {
   slots: PropTypes.object,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   theme: PropTypes.oneOf(['dark', 'light']),
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
   title: PropTypes.string,
   /**
    * The tooltip item.

package/SankeyChart/SankeyDataProvider.d.mts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import type { ChartContainerProProps } from "../ChartContainerPro/index.mjs";
+import type { ChartsContainerProProps } from "../ChartsContainerPro/index.mjs";
 import type { SankeySeriesType } from "./sankey.types.mjs";
 import { type SankeyChartPluginSignatures } from "./SankeyChart.plugins.mjs";
-export interface SankeyDataProviderProps extends Omit<ChartContainerProProps<'sankey', SankeyChartPluginSignatures>, 'plugins' | 'series' | 'slotProps' | 'slots' | 'dataset' | 'hideLegend' | 'skipAnimation'> {
+export interface SankeyDataProviderProps extends Omit<ChartsContainerProProps<'sankey', SankeyChartPluginSignatures>, 'plugins' | 'series' | 'slotProps' | 'slots' | 'dataset' | 'hideLegend' | 'skipAnimation'> {
   children?: React.ReactNode;
   series: readonly SankeySeriesType[];
 }

package/SankeyChart/SankeyDataProvider.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import type { ChartContainerProProps } from "../ChartContainerPro/index.js";
+import type { ChartsContainerProProps } from "../ChartsContainerPro/index.js";
 import type { SankeySeriesType } from "./sankey.types.js";
 import { type SankeyChartPluginSignatures } from "./SankeyChart.plugins.js";
-export interface SankeyDataProviderProps extends Omit<ChartContainerProProps<'sankey', SankeyChartPluginSignatures>, 'plugins' | 'series' | 'slotProps' | 'slots' | 'dataset' | 'hideLegend' | 'skipAnimation'> {
+export interface SankeyDataProviderProps extends Omit<ChartsContainerProProps<'sankey', SankeyChartPluginSignatures>, 'plugins' | 'series' | 'slotProps' | 'slots' | 'dataset' | 'hideLegend' | 'skipAnimation'> {
   children?: React.ReactNode;
   series: readonly SankeySeriesType[];
 }

package/SankeyChart/SankeyDataProvider.js

@@ -10,7 +10,7 @@ exports.SankeyDataProvider = SankeyDataProvider;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _SankeyChart = require("./SankeyChart.plugins");
-var _ChartDataProviderPro = require("../ChartDataProviderPro");
+var _ChartsDataProviderPro = require("../ChartsDataProviderPro");
 var _seriesConfig = require("./seriesConfig");
 var _jsxRuntime = require("react/jsx-runtime");
 const seriesConfig = {
@@ -26,7 +26,7 @@ const seriesConfig = {
  * - [Composition](https://mui.com/x/api/charts/composition/)
  */
 function SankeyDataProvider(props) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProviderPro.ChartDataProviderPro, (0, _extends2.default)({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsDataProviderPro.ChartsDataProviderPro, (0, _extends2.default)({}, props, {
     seriesConfig: seriesConfig,
     plugins: _SankeyChart.SANKEY_CHART_PLUGINS
   }));

package/SankeyChart/SankeyDataProvider.mjs

@@ -3,7 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { SANKEY_CHART_PLUGINS } from "./SankeyChart.plugins.mjs";
-import { ChartDataProviderPro } from "../ChartDataProviderPro/index.mjs";
+import { ChartsDataProviderPro } from "../ChartsDataProviderPro/index.mjs";
 import { sankeySeriesConfig } from "./seriesConfig/index.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const seriesConfig = {
@@ -19,7 +19,7 @@ const seriesConfig = {
  * - [Composition](https://mui.com/x/api/charts/composition/)
  */
 function SankeyDataProvider(props) {
-  return /*#__PURE__*/_jsx(ChartDataProviderPro, _extends({}, props, {
+  return /*#__PURE__*/_jsx(ChartsDataProviderPro, _extends({}, props, {
     seriesConfig: seriesConfig,
     plugins: SANKEY_CHART_PLUGINS
   }));

package/SankeyChart/SankeyLinkElement.js

@@ -11,6 +11,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _internals = require("@mui/x-charts/internals");
+var _sankeyHighlightHooks = require("./sankeyHighlightHooks");
+var _sankeyClasses = require("./sankeyClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @ignore - internal component.
@@ -22,7 +24,6 @@ const SankeyLinkElement = exports.SankeyLinkElement = /*#__PURE__*/React.forward
     onClick,
     seriesId
   } = props;
-  const store = (0, _internals.useStore)();
   const identifier = {
     type: 'sankey',
     seriesId,
@@ -31,11 +32,13 @@ const SankeyLinkElement = exports.SankeyLinkElement = /*#__PURE__*/React.forward
     sourceId: link.source.id,
     link
   };
-  const isHighlighted = store.use(_internals.selectorChartsIsHighlighted, identifier);
-  const isFaded = store.use(_internals.selectorChartsIsFaded, identifier);
+  const highlightState = (0, _sankeyHighlightHooks.useSankeyLinkHighlightState)(identifier);
+  const isFaded = highlightState === 'faded';
+  const isHighlighted = highlightState === 'highlighted';
 
   // Add interaction props for tooltips
   const interactionProps = (0, _internals.useInteractionItemProps)(identifier);
+  const classes = (0, _sankeyClasses.useUtilityClasses)();
   const handleClick = (0, _useEventCallback.default)(event => {
     onClick?.(event, identifier);
   });
@@ -50,6 +53,7 @@ const SankeyLinkElement = exports.SankeyLinkElement = /*#__PURE__*/React.forward
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("path", (0, _extends2.default)({
     ref: ref,
+    className: classes.link,
     d: link.path,
     fill: link.color,
     opacity: finalOpacity,

package/SankeyChart/SankeyLinkElement.mjs

@@ -3,7 +3,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
-import { selectorChartsIsFaded, selectorChartsIsHighlighted, useInteractionItemProps, useStore } from '@mui/x-charts/internals';
+import { useInteractionItemProps } from '@mui/x-charts/internals';
+import { useSankeyLinkHighlightState } from "./sankeyHighlightHooks.mjs";
+import { useUtilityClasses } from "./sankeyClasses.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @ignore - internal component.
@@ -15,7 +17,6 @@ export const SankeyLinkElement = /*#__PURE__*/React.forwardRef(function SankeyLi
     onClick,
     seriesId
   } = props;
-  const store = useStore();
   const identifier = {
     type: 'sankey',
     seriesId,
@@ -24,11 +25,13 @@ export const SankeyLinkElement = /*#__PURE__*/React.forwardRef(function SankeyLi
     sourceId: link.source.id,
     link
   };
-  const isHighlighted = store.use(selectorChartsIsHighlighted, identifier);
-  const isFaded = store.use(selectorChartsIsFaded, identifier);
+  const highlightState = useSankeyLinkHighlightState(identifier);
+  const isFaded = highlightState === 'faded';
+  const isHighlighted = highlightState === 'highlighted';
 
   // Add interaction props for tooltips
   const interactionProps = useInteractionItemProps(identifier);
+  const classes = useUtilityClasses();
   const handleClick = useEventCallback(event => {
     onClick?.(event, identifier);
   });
@@ -43,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/SankeyChart/SankeyLinkLabel.js

@@ -9,6 +9,7 @@ exports.SankeyLinkLabel = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
 var _useSankeySeries = require("../hooks/useSankeySeries");
+var _sankeyClasses = require("./sankeyClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const getLinkMidpoint = link => {
   if (link.y0 === undefined || link.y1 === undefined) {
@@ -38,6 +39,7 @@ const SankeyLinkLabel = exports.SankeyLinkLabel = /*#__PURE__*/React.forwardRef(
   } = props;
   const theme = (0, _styles.useTheme)();
   const series = (0, _useSankeySeries.useSankeySeries)()[0];
+  const classes = (0, _sankeyClasses.useUtilityClasses)();
   if (!link.path || link.y0 === undefined || link.y1 === undefined) {
     return null; // No path defined or invalid coordinates, nothing to render
   }
@@ -52,6 +54,7 @@ const SankeyLinkLabel = exports.SankeyLinkLabel = /*#__PURE__*/React.forwardRef(
   }) : link.value;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("text", {
     ref: ref,
+    className: classes.linkLabel,
     x: midpoint.x,
     y: midpoint.y,
     textAnchor: "middle",

package/SankeyChart/SankeyLinkLabel.mjs

@@ -3,6 +3,7 @@
 import * as React from 'react';
 import { useTheme } from '@mui/material/styles';
 import { useSankeySeries } from "../hooks/useSankeySeries.mjs";
+import { useUtilityClasses } from "./sankeyClasses.mjs";
 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/SankeyChart/SankeyLinkLabelPlot.d.mts

@@ -1,9 +1,9 @@
-import { type SankeyPlotClasses } from "./sankeyClasses.mjs";
+import { type SankeyClasses } from "./sankeyClasses.mjs";
 export interface SankeyLinkLabelPlotProps {
   /**
    * Classes applied to the various elements.
    */
-  classes?: Partial<SankeyPlotClasses>;
+  classes?: Partial<SankeyClasses>;
 }
 declare function SankeyLinkLabelPlot(props: SankeyLinkLabelPlotProps): import("react/jsx-runtime").JSX.Element | null;
 export { SankeyLinkLabelPlot };

package/SankeyChart/SankeyLinkLabelPlot.d.ts

@@ -1,9 +1,9 @@
-import { type SankeyPlotClasses } from "./sankeyClasses.js";
+import { type SankeyClasses } from "./sankeyClasses.js";
 export interface SankeyLinkLabelPlotProps {
   /**
    * Classes applied to the various elements.
    */
-  classes?: Partial<SankeyPlotClasses>;
+  classes?: Partial<SankeyClasses>;
 }
 declare function SankeyLinkLabelPlot(props: SankeyLinkLabelPlotProps): import("react/jsx-runtime").JSX.Element | null;
 export { SankeyLinkLabelPlot };

package/SankeyChart/SankeyLinkLabelPlot.js

@@ -21,7 +21,7 @@ function SankeyLinkLabelPlot(props) {
   const sankeySeries = (0, _useSankeySeries.useSankeySeries)()[0];
   const layout = (0, _useSankeySeries.useSankeyLayout)();
   if (!sankeySeries) {
-    throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Charts: Sankey series context is missing. Ensure the SankeyPlot is used inside a properly configured ChartDataProviderPro.` : (0, _formatErrorMessage2.default)(46));
+    throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Charts: Sankey series context is missing. Ensure the SankeyPlot is used inside a properly configured ChartsDataProviderPro.` : (0, _formatErrorMessage2.default)(46));
   }
 
   // Early return if no data or dimensions

package/SankeyChart/SankeyLinkLabelPlot.mjs

@@ -15,7 +15,7 @@ function SankeyLinkLabelPlot(props) {
   const sankeySeries = useSankeySeries()[0];
   const layout = useSankeyLayout();
   if (!sankeySeries) {
-    throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Charts: Sankey series context is missing. Ensure the SankeyPlot is used inside a properly configured ChartDataProviderPro.` : _formatErrorMessage(46));
+    throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Charts: Sankey series context is missing. Ensure the SankeyPlot is used inside a properly configured ChartsDataProviderPro.` : _formatErrorMessage(46));
   }
 
   // Early return if no data or dimensions

package/SankeyChart/SankeyLinkPlot.d.mts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import type { SankeyLinkIdentifierWithData } from "./sankey.types.mjs";
-import { type SankeyPlotClasses } from "./sankeyClasses.mjs";
+import { type SankeyClasses } from "./sankeyClasses.mjs";
 export interface SankeyLinkPlotProps {
   /**
    * Classes applied to the various elements.
    */
-  classes?: Partial<SankeyPlotClasses>;
+  classes?: Partial<SankeyClasses>;
   /**
    * Callback fired when a sankey item is clicked.
    * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.

package/SankeyChart/SankeyLinkPlot.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import type { SankeyLinkIdentifierWithData } from "./sankey.types.js";
-import { type SankeyPlotClasses } from "./sankeyClasses.js";
+import { type SankeyClasses } from "./sankeyClasses.js";
 export interface SankeyLinkPlotProps {
   /**
    * Classes applied to the various elements.
    */
-  classes?: Partial<SankeyPlotClasses>;
+  classes?: Partial<SankeyClasses>;
   /**
    * Callback fired when a sankey item is clicked.
    * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.

package/SankeyChart/SankeyLinkPlot.js

@@ -37,7 +37,7 @@ function SankeyLinkPlot(props) {
   const sankeySeries = (0, _useSankeySeries.useSankeySeries)()[0];
   const layout = (0, _useSankeySeries.useSankeyLayout)();
   if (!sankeySeries) {
-    throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Charts: Sankey series context is missing. Ensure the SankeyPlot is used inside a properly configured ChartDataProviderPro.` : (0, _formatErrorMessage2.default)(46));
+    throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Charts: Sankey series context is missing. Ensure the SankeyPlot is used inside a properly configured ChartsDataProviderPro.` : (0, _formatErrorMessage2.default)(46));
   }
 
   // Early return if no data or dimensions

package/SankeyChart/SankeyLinkPlot.mjs

@@ -30,7 +30,7 @@ function SankeyLinkPlot(props) {
   const sankeySeries = useSankeySeries()[0];
   const layout = useSankeyLayout();
   if (!sankeySeries) {
-    throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Charts: Sankey series context is missing. Ensure the SankeyPlot is used inside a properly configured ChartDataProviderPro.` : _formatErrorMessage(46));
+    throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Charts: Sankey series context is missing. Ensure the SankeyPlot is used inside a properly configured ChartsDataProviderPro.` : _formatErrorMessage(46));
   }
 
   // Early return if no data or dimensions

package/SankeyChart/SankeyNodeElement.d.mts

@@ -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/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/SankeyChart/SankeyNodeElement.js

@@ -11,6 +11,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _internals = require("@mui/x-charts/internals");
+var _sankeyHighlightHooks = require("./sankeyHighlightHooks");
+var _sankeyClasses = require("./sankeyClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @ignore - internal component.
@@ -21,7 +23,6 @@ const SankeyNodeElement = exports.SankeyNodeElement = /*#__PURE__*/React.forward
     onClick,
     seriesId
   } = props;
-  const store = (0, _internals.useStore)();
   const x0 = node.x0 ?? 0;
   const y0 = node.y0 ?? 0;
   const x1 = node.x1 ?? 0;
@@ -35,11 +36,13 @@ const SankeyNodeElement = exports.SankeyNodeElement = /*#__PURE__*/React.forward
     nodeId: node.id,
     node
   };
-  const isHighlighted = store.use(_internals.selectorChartsIsHighlighted, identifier);
-  const isFaded = store.use(_internals.selectorChartsIsFaded, identifier);
+  const highlightState = (0, _sankeyHighlightHooks.useSankeyNodeHighlightState)(identifier);
+  const isFaded = highlightState === 'faded';
+  const isHighlighted = highlightState === 'highlighted';
 
   // Add interaction props for tooltips
   const interactionProps = (0, _internals.useInteractionItemProps)(identifier);
+  const classes = (0, _sankeyClasses.useUtilityClasses)();
   const handleClick = (0, _useEventCallback.default)(event => {
     onClick?.(event, identifier);
   });
@@ -49,22 +52,21 @@ const SankeyNodeElement = exports.SankeyNodeElement = /*#__PURE__*/React.forward
   } else if (isHighlighted) {
     opacity = 1;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", (0, _extends2.default)({
+    x: node.x0,
+    y: node.y0,
+    width: nodeWidth,
+    height: nodeHeight,
+    fill: node.color,
+    opacity: opacity,
+    onClick: onClick ? handleClick : undefined,
+    cursor: onClick ? 'pointer' : 'default',
+    stroke: "none",
+    "data-highlighted": isHighlighted || undefined,
+    "data-faded": isFaded || undefined,
     ref: ref,
     "data-node": node.id,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", (0, _extends2.default)({
-      x: node.x0,
-      y: node.y0,
-      width: nodeWidth,
-      height: nodeHeight,
-      fill: node.color,
-      opacity: opacity,
-      onClick: onClick ? handleClick : undefined,
-      cursor: onClick ? 'pointer' : 'default',
-      stroke: "none",
-      "data-highlighted": isHighlighted || undefined,
-      "data-faded": isFaded || undefined
-    }, interactionProps))
-  });
+    className: classes.node
+  }, interactionProps));
 });
 if (process.env.NODE_ENV !== "production") SankeyNodeElement.displayName = "SankeyNodeElement";

package/SankeyChart/SankeyNodeElement.mjs

@@ -3,7 +3,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
-import { selectorChartsIsFaded, selectorChartsIsHighlighted, useInteractionItemProps, useStore } from '@mui/x-charts/internals';
+import { useInteractionItemProps } from '@mui/x-charts/internals';
+import { useSankeyNodeHighlightState } from "./sankeyHighlightHooks.mjs";
+import { useUtilityClasses } from "./sankeyClasses.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @ignore - internal component.
@@ -14,7 +16,6 @@ export const SankeyNodeElement = /*#__PURE__*/React.forwardRef(function SankeyNo
     onClick,
     seriesId
   } = props;
-  const store = useStore();
   const x0 = node.x0 ?? 0;
   const y0 = node.y0 ?? 0;
   const x1 = node.x1 ?? 0;
@@ -28,11 +29,13 @@ export const SankeyNodeElement = /*#__PURE__*/React.forwardRef(function SankeyNo
     nodeId: node.id,
     node
   };
-  const isHighlighted = store.use(selectorChartsIsHighlighted, identifier);
-  const isFaded = store.use(selectorChartsIsFaded, identifier);
+  const highlightState = useSankeyNodeHighlightState(identifier);
+  const isFaded = highlightState === 'faded';
+  const isHighlighted = highlightState === 'highlighted';
 
   // Add interaction props for tooltips
   const interactionProps = useInteractionItemProps(identifier);
+  const classes = useUtilityClasses();
   const handleClick = useEventCallback(event => {
     onClick?.(event, identifier);
   });
@@ -42,22 +45,21 @@ export const SankeyNodeElement = /*#__PURE__*/React.forwardRef(function SankeyNo
   } else if (isHighlighted) {
     opacity = 1;
   }
-  return /*#__PURE__*/_jsx("g", {
+  return /*#__PURE__*/_jsx("rect", _extends({
+    x: node.x0,
+    y: node.y0,
+    width: nodeWidth,
+    height: nodeHeight,
+    fill: node.color,
+    opacity: opacity,
+    onClick: onClick ? handleClick : undefined,
+    cursor: onClick ? 'pointer' : 'default',
+    stroke: "none",
+    "data-highlighted": isHighlighted || undefined,
+    "data-faded": isFaded || undefined,
     ref: ref,
     "data-node": node.id,
-    children: /*#__PURE__*/_jsx("rect", _extends({
-      x: node.x0,
-      y: node.y0,
-      width: nodeWidth,
-      height: nodeHeight,
-      fill: node.color,
-      opacity: opacity,
-      onClick: onClick ? handleClick : undefined,
-      cursor: onClick ? 'pointer' : 'default',
-      stroke: "none",
-      "data-highlighted": isHighlighted || undefined,
-      "data-faded": isFaded || undefined
-    }, interactionProps))
-  });
+    className: classes.node
+  }, interactionProps));
 });
 if (process.env.NODE_ENV !== "production") SankeyNodeElement.displayName = "SankeyNodeElement";

package/SankeyChart/SankeyNodeLabel.js

@@ -9,6 +9,7 @@ exports.SankeyNodeLabel = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
 var _sankeyHighlightHooks = require("./sankeyHighlightHooks");
+var _sankeyClasses = require("./sankeyClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @ignore - internal component.
@@ -30,6 +31,7 @@ const SankeyNodeLabel = exports.SankeyNodeLabel = /*#__PURE__*/React.forwardRef(
   : x0 - 6; // Left side for other columns
 
   const labelAnchor = isRightSide ? 'start' : 'end';
+  const classes = (0, _sankeyClasses.useUtilityClasses)();
   const highlightState = (0, _sankeyHighlightHooks.useSankeyNodeHighlightState)(React.useMemo(() => ({
     type: 'sankey',
     subType: 'node',
@@ -47,6 +49,7 @@ const SankeyNodeLabel = exports.SankeyNodeLabel = /*#__PURE__*/React.forwardRef(
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("text", {
     ref: ref,
+    className: classes.nodeLabel,
     x: labelX,
     y: (y0 + y1) / 2,
     textAnchor: labelAnchor,