@mui/x-charts-pro 8.21.0 → 8.22.1

package/SankeyChart/seriesConfig/getSeriesWithDefaultValues.js

@@ -6,14 +6,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getSeriesWithDefaultValues = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _d3Sankey = require("../d3Sankey");
+var _utils = require("../utils");
 const defaultSankeyValueFormatter = v => v == null ? '' : v.toLocaleString();
 const getSeriesWithDefaultValues = (seriesData, seriesIndex, colors) => {
   const nodeMap = new Map();
   const nodeColor = seriesData.nodeOptions?.color;
-  const data = seriesData.data;
+  const nodeAlign = seriesData.nodeOptions?.align;
+  const {
+    color: linkColor = 'source'
+  } = seriesData.linkOptions ?? {};
   let colorIndex = -1;
-  if (data.nodes) {
-    data.nodes.forEach(node => {
+  if (seriesData.data.nodes) {
+    seriesData.data.nodes.forEach(node => {
       const id = node.id || node.label || '';
       const label = node.label || `${id}`;
       colorIndex += 1;
@@ -24,34 +29,78 @@ const getSeriesWithDefaultValues = (seriesData, seriesIndex, colors) => {
       }));
     });
   }
-  data.links.forEach(v => {
-    if (!nodeMap.has(v.source)) {
+  const links = seriesData.data.links.map(link => {
+    // Add default values to nodes
+    if (!nodeMap.has(link.source)) {
       colorIndex += 1;
       const source = {
-        id: v.source,
-        label: `${v.source}`,
+        id: link.source,
+        label: `${link.source}`,
         color: nodeColor ?? colors?.[colorIndex % colors.length]
       };
       nodeMap.set(source.id, source);
     }
-    if (!nodeMap.has(v.target)) {
+    if (!nodeMap.has(link.target)) {
       colorIndex += 1;
       const target = {
-        id: v.target,
-        label: `${v.target}`,
+        id: link.target,
+        label: `${link.target}`,
         color: nodeColor ?? colors?.[colorIndex % colors.length]
       };
       nodeMap.set(target.id, target);
     }
+
+    // Add color to links
+    let resolvedColor = link.color ?? linkColor;
+    if (resolvedColor === 'source') {
+      resolvedColor = nodeMap.get(link.source)?.color ?? linkColor;
+    } else if (resolvedColor === 'target') {
+      resolvedColor = nodeMap.get(link.target)?.color ?? linkColor;
+    }
+    return (0, _extends2.default)({}, link, {
+      color: resolvedColor
+    });
   });
+  if (!seriesData.data || !links) {
+    return (0, _extends2.default)({
+      id: seriesData.id ?? `auto-generated-id-${seriesIndex}`
+    }, seriesData, {
+      valueFormatter: seriesData.valueFormatter ?? defaultSankeyValueFormatter,
+      data: {
+        nodes: [],
+        links: []
+      }
+    });
+  }
+
+  //  Prepare the data structure expected by d3-sankey
+  const graph = {
+    nodes: nodeMap.values().toArray().map(v => (0, _extends2.default)({}, v)),
+    links: links.map(v => (0, _extends2.default)({}, v))
+  };
+
+  // Create the sankey layout generator
+  const sankeyGenerator = (0, _d3Sankey.sankey)(false).nodeAlign((0, _utils.getNodeAlignFunction)(nodeAlign)).nodeId(d => d.id);
+
+  // Generate the layout
+  let data;
+  try {
+    data = sankeyGenerator(graph);
+  } catch (error) {
+    // There are two errors that can occur:
+    // 1. If the data contains circular references, d3-sankey will throw an error.
+    // 2. If there are missing source/target nodes, d3-sankey will throw an error.
+    // We handle the second case by building a map of nodes ourselves, so they are always present.
+    if (error instanceof Error && error.message === 'circular link') {
+      throw new Error('MUI X Charts: Sankey diagram contains circular references.');
+    }
+    throw error;
+  }
   return (0, _extends2.default)({
     id: seriesData.id ?? `auto-generated-id-${seriesIndex}`
   }, seriesData, {
     valueFormatter: seriesData.valueFormatter ?? defaultSankeyValueFormatter,
-    data: {
-      links: data.links,
-      nodes: nodeMap
-    }
+    data
   });
 };
 exports.getSeriesWithDefaultValues = getSeriesWithDefaultValues;

package/SankeyChart/seriesConfig/tooltipGetter.js

@@ -16,7 +16,10 @@ const tooltipGetter = params => {
     subType
   } = identifier;
   if (subType === 'node') {
-    const node = identifier.node;
+    const node = series.data.nodes.find(n => n.id === identifier.nodeId);
+    if (!node) {
+      return null;
+    }
     return {
       identifier,
       color: node.color,
@@ -31,7 +34,7 @@ const tooltipGetter = params => {
     };
   }
   if (subType === 'link') {
-    const link = identifier.link;
+    const link = series.data.links.find(l => l.source.id === identifier.sourceId && l.target.id === identifier.targetId);
     if (!link) {
       return null;
     }

package/SankeyChart/utils.d.ts

@@ -1,3 +1,3 @@
 import { sankeyJustify } from "./d3Sankey/index.js";
 import type { SankeyNodeOptions } from "./sankey.types.js";
-export declare const getNodeAlignFunction: (align: SankeyNodeOptions["align"]) => typeof sankeyJustify;
+export declare const getNodeAlignFunction: (align?: SankeyNodeOptions["align"]) => typeof sankeyJustify;

package/ScatterChartPro/ScatterChartPro.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { ScatterChartProps, ScatterChartSlotProps, ScatterChartSlots } from '@mui/x-charts/ScatterChart';
-import { ChartsTooltipProps } from '@mui/x-charts/ChartsTooltip';
-import { ChartsSlotPropsPro, ChartsSlotsPro } from "../internals/material/index.js";
-import { ChartContainerProProps } from "../ChartContainerPro/ChartContainerPro.js";
-import { ScatterChartProPluginSignatures } from "./ScatterChartPro.plugins.js";
-import { ChartsToolbarProSlots, ChartsToolbarProSlotProps } from "../ChartsToolbarPro/Toolbar.types.js";
+import { type ScatterChartProps, type ScatterChartSlotProps, type ScatterChartSlots } from '@mui/x-charts/ScatterChart';
+import { type ChartsTooltipProps } from '@mui/x-charts/ChartsTooltip';
+import { type ChartsSlotPropsPro, type ChartsSlotsPro } from "../internals/material/index.js";
+import { type ChartContainerProProps } from "../ChartContainerPro/ChartContainerPro.js";
+import { type ScatterChartProPluginSignatures } from "./ScatterChartPro.plugins.js";
+import { type ChartsToolbarProSlots, type ChartsToolbarProSlotProps } from "../ChartsToolbarPro/Toolbar.types.js";
 export interface ScatterChartProSlots extends Omit<ScatterChartSlots, 'toolbar'>, ChartsToolbarProSlots, Partial<ChartsSlotsPro> {}
 export interface ScatterChartProSlotProps extends Omit<ScatterChartSlotProps, 'toolbar' | 'tooltip'>, ChartsToolbarProSlotProps, Partial<ChartsSlotPropsPro> {
   /**

package/ScatterChartPro/ScatterChartPro.js

@@ -316,6 +316,11 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
     offset: _propTypes.default.number,
+    ordinalTimeTicks: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['biweekly', 'days', 'hours', 'months', 'quarterly', 'weeks', 'years']), _propTypes.default.shape({
+      format: _propTypes.default.func.isRequired,
+      getTickNumber: _propTypes.default.func.isRequired,
+      isTick: _propTypes.default.func.isRequired
+    })]).isRequired),
     position: _propTypes.default.oneOf(['bottom', 'none', 'top']),
     reverse: _propTypes.default.bool,
     scaleType: _propTypes.default.oneOf(['band']),
@@ -384,6 +389,11 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
     offset: _propTypes.default.number,
+    ordinalTimeTicks: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['biweekly', 'days', 'hours', 'months', 'quarterly', 'weeks', 'years']), _propTypes.default.shape({
+      format: _propTypes.default.func.isRequired,
+      getTickNumber: _propTypes.default.func.isRequired,
+      isTick: _propTypes.default.func.isRequired
+    })]).isRequired),
     position: _propTypes.default.oneOf(['bottom', 'none', 'top']),
     reverse: _propTypes.default.bool,
     scaleType: _propTypes.default.oneOf(['point']),
@@ -888,6 +898,11 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
     offset: _propTypes.default.number,
+    ordinalTimeTicks: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['biweekly', 'days', 'hours', 'months', 'quarterly', 'weeks', 'years']), _propTypes.default.shape({
+      format: _propTypes.default.func.isRequired,
+      getTickNumber: _propTypes.default.func.isRequired,
+      isTick: _propTypes.default.func.isRequired
+    })]).isRequired),
     position: _propTypes.default.oneOf(['left', 'none', 'right']),
     reverse: _propTypes.default.bool,
     scaleType: _propTypes.default.oneOf(['band']),
@@ -955,6 +970,11 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
     offset: _propTypes.default.number,
+    ordinalTimeTicks: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['biweekly', 'days', 'hours', 'months', 'quarterly', 'weeks', 'years']), _propTypes.default.shape({
+      format: _propTypes.default.func.isRequired,
+      getTickNumber: _propTypes.default.func.isRequired,
+      isTick: _propTypes.default.func.isRequired
+    })]).isRequired),
     position: _propTypes.default.oneOf(['left', 'none', 'right']),
     reverse: _propTypes.default.bool,
     scaleType: _propTypes.default.oneOf(['point']),

package/ScatterChartPro/ScatterChartPro.plugins.d.ts

@@ -1,5 +1,5 @@
-import { UseChartZAxisSignature, UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature, UseChartBrushSignature, ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
-import { UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
-import { UseChartProZoomSignature } from "../internals/plugins/useChartProZoom/index.js";
-export type ScatterChartProPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<'scatter'>, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature, UseChartProZoomSignature, UseChartProExportSignature];
+import { type UseChartZAxisSignature, type UseChartCartesianAxisSignature, type UseChartTooltipSignature, type UseChartInteractionSignature, type UseChartHighlightSignature, type UseChartClosestPointSignature, type UseChartKeyboardNavigationSignature, type UseChartBrushSignature, type ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
+import { type UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
+import { type UseChartProZoomSignature } from "../internals/plugins/useChartProZoom/index.js";
+export type ScatterChartProPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<'scatter'>, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature, UseChartProZoomSignature, UseChartProExportSignature];
 export declare const SCATTER_CHART_PRO_PLUGINS: ConvertSignaturesIntoPlugins<ScatterChartProPluginSignatures>;

package/ScatterChartPro/ScatterChartPro.plugins.js

@@ -7,4 +7,4 @@ exports.SCATTER_CHART_PRO_PLUGINS = void 0;
 var _internals = require("@mui/x-charts/internals");
 var _useChartProExport = require("../internals/plugins/useChartProExport");
 var _useChartProZoom = require("../internals/plugins/useChartProZoom");
-const SCATTER_CHART_PRO_PLUGINS = exports.SCATTER_CHART_PRO_PLUGINS = [_internals.useChartZAxis, _internals.useChartBrush, _internals.useChartInteraction, _internals.useChartCartesianAxis, _internals.useChartHighlight, _internals.useChartClosestPoint, _internals.useChartKeyboardNavigation, _useChartProZoom.useChartProZoom, _useChartProExport.useChartProExport];
+const SCATTER_CHART_PRO_PLUGINS = exports.SCATTER_CHART_PRO_PLUGINS = [_internals.useChartZAxis, _internals.useChartBrush, _internals.useChartTooltip, _internals.useChartInteraction, _internals.useChartCartesianAxis, _internals.useChartHighlight, _internals.useChartClosestPoint, _internals.useChartKeyboardNavigation, _useChartProZoom.useChartProZoom, _useChartProExport.useChartProExport];

package/context/ChartProApi.d.ts

@@ -1,13 +1,13 @@
-import { ChartAnyPluginSignature, ChartPublicAPI } from '@mui/x-charts/internals';
-import { HeatmapPluginSignatures } from "../Heatmap/Heatmap.plugins.js";
-import { LineChartProPluginSignatures } from "../LineChartPro/LineChartPro.plugins.js";
-import { ScatterChartProPluginSignatures } from "../ScatterChartPro/ScatterChartPro.plugins.js";
-import { BarChartProPluginSignatures } from "../BarChartPro/BarChartPro.plugins.js";
-import { AllPluginSignatures, DefaultPluginSignatures } from "../internals/plugins/allPlugins.js";
-import { FunnelChartPluginSignatures } from "../FunnelChart/FunnelChart.plugins.js";
-import { RadarChartProPluginSignatures } from "../RadarChartPro/RadarChartPro.plugins.js";
-import { PieChartProPluginSignatures } from "../PieChartPro/PieChartPro.plugins.js";
-import { SankeyChartPluginSignatures } from "../SankeyChart/SankeyChart.plugins.js";
+import { type ChartAnyPluginSignature, type ChartPublicAPI } from '@mui/x-charts/internals';
+import { type HeatmapPluginSignatures } from "../Heatmap/Heatmap.plugins.js";
+import { type LineChartProPluginSignatures } from "../LineChartPro/LineChartPro.plugins.js";
+import { type ScatterChartProPluginSignatures } from "../ScatterChartPro/ScatterChartPro.plugins.js";
+import { type BarChartProPluginSignatures } from "../BarChartPro/BarChartPro.plugins.js";
+import { type AllPluginSignatures, type DefaultPluginSignatures } from "../internals/plugins/allPlugins.js";
+import { type FunnelChartPluginSignatures } from "../FunnelChart/FunnelChart.plugins.js";
+import { type RadarChartProPluginSignatures } from "../RadarChartPro/RadarChartPro.plugins.js";
+import { type PieChartProPluginSignatures } from "../PieChartPro/PieChartPro.plugins.js";
+import { type SankeyChartPluginSignatures } from "../SankeyChart/SankeyChart.plugins.js";
 export type ProPluginsPerSeriesType = {
   heatmap: HeatmapPluginSignatures;
   line: LineChartProPluginSignatures;

package/context/useChartProApiContext.d.ts

@@ -1,4 +1,4 @@
-import { ChartProApi } from "./ChartProApi.js";
+import { type ChartProApi } from "./ChartProApi.js";
 /**
  * The `useChartProApiContext` hook provides access to the chart API.
  * This is only available when the chart is rendered within a chart or a `ChartDataProvider` component.

package/esm/BarChartPro/BarChartPro.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { BarChartProps, BarChartSlotProps, BarChartSlots } from '@mui/x-charts/BarChart';
-import { ChartsToolbarProSlotProps, ChartsToolbarProSlots } from "../ChartsToolbarPro/Toolbar.types.js";
-import { ChartsSlotPropsPro, ChartsSlotsPro } from "../internals/material/index.js";
-import { ChartContainerProProps } from "../ChartContainerPro/index.js";
-import { BarChartProPluginSignatures } from "./BarChartPro.plugins.js";
+import { type BarChartProps, type BarChartSlotProps, type BarChartSlots } from '@mui/x-charts/BarChart';
+import { type ChartsToolbarProSlotProps, type ChartsToolbarProSlots } from "../ChartsToolbarPro/Toolbar.types.js";
+import { type ChartsSlotPropsPro, type ChartsSlotsPro } from "../internals/material/index.js";
+import { type ChartContainerProProps } from "../ChartContainerPro/index.js";
+import { type BarChartProPluginSignatures } from "./BarChartPro.plugins.js";
 export interface BarChartProSlots extends Omit<BarChartSlots, 'toolbar'>, ChartsToolbarProSlots, Partial<ChartsSlotsPro> {}
 export interface BarChartProSlotProps extends Omit<BarChartSlotProps, 'toolbar'>, ChartsToolbarProSlotProps, Partial<ChartsSlotPropsPro> {}
 export interface BarChartProProps extends Omit<BarChartProps, 'apiRef' | 'slots' | 'slotProps'>, Omit<ChartContainerProProps<'bar', BarChartProPluginSignatures>, 'series' | 'plugins' | 'seriesConfig' | 'slots' | 'slotProps' | 'experimentalFeatures'> {

package/esm/BarChartPro/BarChartPro.js

@@ -325,6 +325,11 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
     label: PropTypes.string,
     labelStyle: PropTypes.object,
     offset: PropTypes.number,
+    ordinalTimeTicks: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['biweekly', 'days', 'hours', 'months', 'quarterly', 'weeks', 'years']), PropTypes.shape({
+      format: PropTypes.func.isRequired,
+      getTickNumber: PropTypes.func.isRequired,
+      isTick: PropTypes.func.isRequired
+    })]).isRequired),
     position: PropTypes.oneOf(['bottom', 'none', 'top']),
     reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['band']),
@@ -393,6 +398,11 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
     label: PropTypes.string,
     labelStyle: PropTypes.object,
     offset: PropTypes.number,
+    ordinalTimeTicks: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['biweekly', 'days', 'hours', 'months', 'quarterly', 'weeks', 'years']), PropTypes.shape({
+      format: PropTypes.func.isRequired,
+      getTickNumber: PropTypes.func.isRequired,
+      isTick: PropTypes.func.isRequired
+    })]).isRequired),
     position: PropTypes.oneOf(['bottom', 'none', 'top']),
     reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['point']),
@@ -897,6 +907,11 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
     label: PropTypes.string,
     labelStyle: PropTypes.object,
     offset: PropTypes.number,
+    ordinalTimeTicks: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['biweekly', 'days', 'hours', 'months', 'quarterly', 'weeks', 'years']), PropTypes.shape({
+      format: PropTypes.func.isRequired,
+      getTickNumber: PropTypes.func.isRequired,
+      isTick: PropTypes.func.isRequired
+    })]).isRequired),
     position: PropTypes.oneOf(['left', 'none', 'right']),
     reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['band']),
@@ -964,6 +979,11 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
     label: PropTypes.string,
     labelStyle: PropTypes.object,
     offset: PropTypes.number,
+    ordinalTimeTicks: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['biweekly', 'days', 'hours', 'months', 'quarterly', 'weeks', 'years']), PropTypes.shape({
+      format: PropTypes.func.isRequired,
+      getTickNumber: PropTypes.func.isRequired,
+      isTick: PropTypes.func.isRequired
+    })]).isRequired),
     position: PropTypes.oneOf(['left', 'none', 'right']),
     reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['point']),

package/esm/BarChartPro/BarChartPro.plugins.d.ts

@@ -1,5 +1,5 @@
-import { UseChartZAxisSignature, UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature, UseChartBrushSignature, ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
-import { UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
-import { UseChartProZoomSignature } from "../internals/plugins/useChartProZoom/index.js";
-export type BarChartProPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<'bar'>, UseChartHighlightSignature, UseChartKeyboardNavigationSignature, UseChartProZoomSignature, UseChartProExportSignature];
+import { type UseChartZAxisSignature, type UseChartCartesianAxisSignature, type UseChartTooltipSignature, type UseChartInteractionSignature, type UseChartHighlightSignature, type UseChartKeyboardNavigationSignature, type UseChartBrushSignature, type ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
+import { type UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
+import { type UseChartProZoomSignature } from "../internals/plugins/useChartProZoom/index.js";
+export type BarChartProPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<'bar'>, UseChartHighlightSignature, UseChartKeyboardNavigationSignature, UseChartProZoomSignature, UseChartProExportSignature];
 export declare const BAR_CHART_PRO_PLUGINS: ConvertSignaturesIntoPlugins<BarChartProPluginSignatures>;

package/esm/BarChartPro/BarChartPro.plugins.js

@@ -1,4 +1,4 @@
-import { useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartKeyboardNavigation, useChartBrush } from '@mui/x-charts/internals';
+import { useChartZAxis, useChartCartesianAxis, useChartTooltip, useChartInteraction, useChartHighlight, useChartKeyboardNavigation, useChartBrush } from '@mui/x-charts/internals';
 import { useChartProExport } from "../internals/plugins/useChartProExport/index.js";
 import { useChartProZoom } from "../internals/plugins/useChartProZoom/index.js";
-export const BAR_CHART_PRO_PLUGINS = [useChartZAxis, useChartBrush, useChartInteraction, useChartCartesianAxis, useChartHighlight, useChartKeyboardNavigation, useChartProZoom, useChartProExport];
+export const BAR_CHART_PRO_PLUGINS = [useChartZAxis, useChartBrush, useChartTooltip, useChartInteraction, useChartCartesianAxis, useChartHighlight, useChartKeyboardNavigation, useChartProZoom, useChartProExport];

package/esm/ChartContainerPro/ChartContainerPro.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { ChartsSurfaceProps } from '@mui/x-charts/ChartsSurface';
-import { ChartAnyPluginSignature, ChartSeriesType } from '@mui/x-charts/internals';
-import { AllPluginSignatures } from "../internals/plugins/allPlugins.js";
-import { ChartDataProviderProProps } from "../ChartDataProviderPro/index.js";
+import { type ChartsSurfaceProps } from '@mui/x-charts/ChartsSurface';
+import { type ChartAnyPluginSignature, type ChartSeriesType } from '@mui/x-charts/internals';
+import { type AllPluginSignatures } from "../internals/plugins/allPlugins.js";
+import { type ChartDataProviderProProps } from "../ChartDataProviderPro/index.js";
 export type ChartContainerProProps<TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>> = ChartDataProviderProProps<TSeries, TSignatures> & ChartsSurfaceProps;
 type ChartContainerProComponent = <TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartContainerProProps<TSeries, TSignatures> & {
   ref?: React.ForwardedRef<SVGSVGElement>;

package/esm/ChartContainerPro/useChartContainerProProps.d.ts

@@ -1,8 +1,8 @@
-import { ChartAnyPluginSignature, ChartSeriesType, UseChartContainerPropsReturnValue } from '@mui/x-charts/internals';
-import * as React from 'react';
-import { ChartDataProviderProps } from '@mui/x-charts/ChartDataProvider';
+import { type ChartAnyPluginSignature, type ChartSeriesType, type UseChartContainerPropsReturnValue } from '@mui/x-charts/internals';
+import type * as React from 'react';
+import { type ChartDataProviderProps } from '@mui/x-charts/ChartDataProvider';
 import type { ChartContainerProProps } from "./ChartContainerPro.js";
-import { AllPluginSignatures } from "../internals/plugins/allPlugins.js";
+import { type AllPluginSignatures } from "../internals/plugins/allPlugins.js";
 export type UseChartContainerProPropsReturnValue<TSeries extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[]> = Pick<UseChartContainerPropsReturnValue<TSeries, TSignatures>, 'chartsSurfaceProps' | 'children'> & {
   chartDataProviderProProps: ChartDataProviderProps<TSeries, TSignatures>;
 };

package/esm/ChartDataProviderPro/ChartDataProviderPro.d.ts

@@ -1,7 +1,7 @@
-import { ChartSeriesType, ChartAnyPluginSignature, ChartProviderProps } from '@mui/x-charts/internals';
-import { ChartDataProviderProps } from '@mui/x-charts/ChartDataProvider';
-import { ChartsSlotPropsPro, ChartsSlotsPro } from "../internals/material/index.js";
-import { AllPluginSignatures } from "../internals/plugins/allPlugins.js";
+import { type ChartSeriesType, type ChartAnyPluginSignature, type ChartProviderProps } from '@mui/x-charts/internals';
+import { type ChartDataProviderProps } from '@mui/x-charts/ChartDataProvider';
+import { type ChartsSlotPropsPro, type ChartsSlotsPro } from "../internals/material/index.js";
+import { type AllPluginSignatures } from "../internals/plugins/allPlugins.js";
 export type ChartDataProviderProProps<TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>> = ChartDataProviderProps<TSeries, TSignatures> & ChartProviderProps<TSeries, TSignatures>['pluginParams'] & {
   /**
    * Slots to customize charts' components.

package/esm/ChartDataProviderPro/ChartDataProviderPro.js

@@ -10,7 +10,7 @@ import { defaultSlotsMaterial } from "../internals/material/index.js";
 import { DEFAULT_PLUGINS } from "../internals/plugins/allPlugins.js";
 import { useChartDataProviderProProps } from "./useChartDataProviderProProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const releaseInfo = "MTc2NDgwNjQwMDAwMA==";
+const releaseInfo = "MTc2NjAxNjAwMDAwMA==";
 const packageIdentifier = 'x-charts-pro';
 /**
  * Orchestrates the data providers for the chart components and hooks.

package/esm/ChartDataProviderPro/useChartDataProviderProProps.d.ts

@@ -1,4 +1,4 @@
-import { ChartAnyPluginSignature, ChartSeriesType } from '@mui/x-charts/internals';
+import { type ChartAnyPluginSignature, type ChartSeriesType } from '@mui/x-charts/internals';
 import type { ChartDataProviderProProps } from "./ChartDataProviderPro.js";
 import type { AllPluginSignatures } from "../internals/plugins/allPlugins.js";
 export declare const useChartDataProviderProProps: <TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartDataProviderProProps<TSeries, TSignatures>) => {

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

@@ -1,4 +1,4 @@
-import { AxisId } from '@mui/x-charts/internals';
+import { type AxisId } from '@mui/x-charts/internals';
 interface ChartZoomSliderProps {
   /**
    * The ID of the axis this overview refers to.

package/esm/ChartZoomSlider/internals/ChartAxisZoomSlider.js

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP, selectorChartAxisZoomOptionsLookup, useDrawingArea, useSelector, useStore, ZOOM_SLIDER_MARGIN, ZOOM_SLIDER_PREVIEW_SIZE } from '@mui/x-charts/internals';
+import { DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP, selectorChartAxisZoomOptionsLookup, useDrawingArea, useStore, ZOOM_SLIDER_MARGIN, ZOOM_SLIDER_PREVIEW_SIZE } from '@mui/x-charts/internals';
 import { useXAxes, useYAxes } from '@mui/x-charts/hooks';
 import { ChartAxisZoomSliderPreview } from "./ChartAxisZoomSliderPreview.js";
 import { ZOOM_SLIDER_ACTIVE_TRACK_SIZE, ZOOM_SLIDER_SIZE, ZOOM_SLIDER_TRACK_SIZE } from "./constants.js";
@@ -19,8 +19,8 @@ export function ChartAxisZoomSlider({
 }) {
   const store = useStore();
   const drawingArea = useDrawingArea();
-  const zoomData = useSelector(store, selectorChartAxisZoomData, axisId);
-  const zoomOptions = useSelector(store, selectorChartAxisZoomOptionsLookup, axisId);
+  const zoomData = store.use(selectorChartAxisZoomData, axisId);
+  const zoomOptions = store.use(selectorChartAxisZoomOptionsLookup, axisId);
   const [showTooltip, setShowTooltip] = React.useState(false);
   const {
     xAxis

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

@@ -1,4 +1,4 @@
-import { AxisId, ZoomData } from '@mui/x-charts/internals';
+import { type AxisId, type ZoomData } from '@mui/x-charts/internals';
 export interface ChartAxisZoomSliderActiveTrackProps {
   axisId: AxisId;
   axisDirection: 'x' | 'y';

package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { styled } from '@mui/material/styles';
-import { getSVGPoint, invertScale, selectorChartAxis, selectorChartAxisZoomOptionsLookup, useChartContext, useDrawingArea, useSelector, useStore } from '@mui/x-charts/internals';
+import { getSVGPoint, invertScale, selectorChartAxis, selectorChartAxisZoomOptionsLookup, useChartContext, useDrawingArea, useStore } from '@mui/x-charts/internals';
 import * as React from 'react';
 import { rafThrottle } from '@mui/x-internals/rafThrottle';
 import { shouldForwardProp } from '@mui/system';
@@ -55,7 +55,7 @@ export function ChartAxisZoomSliderActiveTrack({
     svgRef
   } = useChartContext();
   const store = useStore();
-  const axis = useSelector(store, selectorChartAxis, axisId);
+  const axis = store.use(selectorChartAxis, axisId);
   const drawingArea = useDrawingArea();
   const activePreviewRectRef = React.useRef(null);
   const [startThumbEl, setStartThumbEl] = React.useState(null);
@@ -81,7 +81,7 @@ export function ChartAxisZoomSliderActiveTrack({
         return;
       }
       const point = getSVGPoint(element, event);
-      const pointerZoom = calculateZoomFromPoint(store.getSnapshot(), axisId, point);
+      const pointerZoom = calculateZoomFromPoint(store.state, axisId, point);
       if (pointerZoom === null) {
         return;
       }
@@ -97,13 +97,13 @@ export function ChartAxisZoomSliderActiveTrack({
       // Prevent text selection when dragging
       event.preventDefault();
       activePreviewRect.setPointerCapture(event.pointerId);
-      const axisZoomData = selectorChartAxisZoomData(store.getSnapshot(), axisId);
+      const axisZoomData = selectorChartAxisZoomData(store.state, axisId);
       const element = svgRef.current;
       if (!axisZoomData || !element) {
         return;
       }
       const point = getSVGPoint(element, event);
-      const pointerDownZoom = calculateZoomFromPoint(store.getSnapshot(), axisId, point);
+      const pointerDownZoom = calculateZoomFromPoint(store.state, axisId, point);
       if (pointerDownZoom === null) {
         return;
       }
@@ -126,10 +126,10 @@ export function ChartAxisZoomSliderActiveTrack({
     }
     const point = getSVGPoint(element, event);
     instance.setZoomData(prevZoomData => {
-      const zoomOptions = selectorChartAxisZoomOptionsLookup(store.getSnapshot(), axisId);
+      const zoomOptions = selectorChartAxisZoomOptionsLookup(store.state, axisId);
       return prevZoomData.map(zoom => {
         if (zoom.axisId === axisId) {
-          const newStart = calculateZoomFromPoint(store.getSnapshot(), axisId, point);
+          const newStart = calculateZoomFromPoint(store.state, axisId, point);
           if (newStart === null) {
             return zoom;
           }
@@ -148,10 +148,10 @@ export function ChartAxisZoomSliderActiveTrack({
     }
     const point = getSVGPoint(element, event);
     instance.setZoomData(prevZoomData => {
-      const zoomOptions = selectorChartAxisZoomOptionsLookup(store.getSnapshot(), axisId);
+      const zoomOptions = selectorChartAxisZoomOptionsLookup(store.state, axisId);
       return prevZoomData.map(zoom => {
         if (zoom.axisId === axisId) {
-          const newEnd = calculateZoomFromPoint(store.getSnapshot(), axisId, point);
+          const newEnd = calculateZoomFromPoint(store.state, axisId, point);
           if (newEnd === null) {
             return zoom;
           }
@@ -174,7 +174,7 @@ export function ChartAxisZoomSliderActiveTrack({
   const {
     minStart,
     maxEnd
-  } = selectorChartAxisZoomOptionsLookup(store.getSnapshot(), axisId);
+  } = selectorChartAxisZoomOptionsLookup(store.state, axisId);
   const range = maxEnd - minStart;
   const zoomStart = Math.max(minStart, zoomData.start);
   const zoomEnd = Math.min(zoomData.end, maxEnd);

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

@@ -1,4 +1,4 @@
-import { AxisId } from '@mui/x-charts/internals';
+import { type AxisId } from '@mui/x-charts/internals';
 interface ChartAxisZoomSliderPreviewProps {
   axisId: AxisId;
   axisDirection: 'x' | 'y';

package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderPreview.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["axisId", "axisDirection", "reverse"];
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
-import { selectorChartAxisZoomOptionsLookup, useSelector, useStore } from '@mui/x-charts/internals';
+import { selectorChartAxisZoomOptionsLookup, useStore } from '@mui/x-charts/internals';
 import { alpha } from '@mui/system';
 import useId from '@mui/utils/useId';
 import { selectorChartAxisZoomData } from "../../internals/plugins/useChartProZoom/index.js";
@@ -42,8 +42,8 @@ function PreviewRectangles(props) {
     axisDirection
   } = props;
   const store = useStore();
-  const zoomData = useSelector(store, selectorChartAxisZoomData, axisId);
-  const zoomOptions = useSelector(store, selectorChartAxisZoomOptionsLookup, axisId);
+  const zoomData = store.use(selectorChartAxisZoomData, axisId);
+  const zoomOptions = store.use(selectorChartAxisZoomOptionsLookup, axisId);
   const id = useId();
   if (!zoomData) {
     return null;

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

@@ -1,4 +1,4 @@
-import { AxisId } from '@mui/x-charts/internals';
+import { type AxisId } from '@mui/x-charts/internals';
 interface ChartAxisZoomSliderPreviewContentProps {
   axisId: AxisId;
   x: number;

package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderPreviewContent.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { selectorChartSeriesProcessed, useSelector, useStore } from '@mui/x-charts/internals';
+import { selectorChartSeriesProcessed, useStore } from '@mui/x-charts/internals';
 import { LinePreviewPlot } from "./previews/LinePreviewPlot.js";
 import { AreaPreviewPlot } from "./previews/AreaPreviewPlot.js";
 import { BarPreviewPlot } from "./previews/BarPreviewPlot.js";
@@ -15,7 +15,7 @@ export function ChartAxisZoomSliderPreviewContent(props) {
     height
   } = props;
   const store = useStore();
-  const processedSeries = useSelector(store, selectorChartSeriesProcessed);
+  const processedSeries = store.use(selectorChartSeriesProcessed);
   const children = [];
   const clipId = `zoom-preview-mask-${axisId}`;
   const hasLineSeries = (processedSeries.line?.seriesOrder?.length ?? 0) > 0;

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AxisId } from '@mui/x-charts/internals';
+import { type AxisId } from '@mui/x-charts/internals';
 interface ChartAxisZoomSliderTrackProps extends React.ComponentProps<'rect'> {
   axisId: AxisId;
   axisDirection: 'x' | 'y';

package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderTrack.js

@@ -65,17 +65,17 @@ export function ChartAxisZoomSliderTrack(_ref) {
       return;
     }
     const pointerDownPoint = getSVGPoint(element, event);
-    const zoomFromPointerDown = calculateZoomFromPoint(store.getSnapshot(), axisId, pointerDownPoint);
+    const zoomFromPointerDown = calculateZoomFromPoint(store.state, axisId, pointerDownPoint);
     if (zoomFromPointerDown === null) {
       return;
     }
     const onPointerMove = rafThrottle(function onPointerMove(pointerMoveEvent) {
       const pointerMovePoint = getSVGPoint(element, pointerMoveEvent);
-      const zoomFromPointerMove = calculateZoomFromPoint(store.getSnapshot(), axisId, pointerMovePoint);
+      const zoomFromPointerMove = calculateZoomFromPoint(store.state, axisId, pointerMovePoint);
       if (zoomFromPointerMove === null) {
         return;
       }
-      const zoomOptions = selectorChartAxisZoomOptionsLookup(store.getSnapshot(), axisId);
+      const zoomOptions = selectorChartAxisZoomOptionsLookup(store.state, axisId);
       instance.setAxisZoomData(axisId, prevZoomData => {
         if (zoomFromPointerMove > zoomFromPointerDown) {
           const end = calculateZoomEnd(zoomFromPointerMove, _extends({}, prevZoomData, {

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PopperProps } from '@mui/material/Popper';
+import { type PopperProps } from '@mui/material/Popper';
 interface ChartsTooltipZoomSliderValueProps extends Pick<PopperProps, 'anchorEl' | 'open' | 'modifiers' | 'placement'>, React.PropsWithChildren {}
 export declare function ChartsTooltipZoomSliderValue({
   anchorEl,

package/esm/ChartZoomSlider/internals/previews/AreaPreviewPlot.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { SeriesId } from '@mui/x-charts/internals';
-import { PreviewPlotProps } from "./PreviewPlot.types.js";
+import { type SeriesId } from '@mui/x-charts/internals';
+import { type PreviewPlotProps } from "./PreviewPlot.types.js";
 interface AreaPreviewPlotProps extends PreviewPlotProps {}
 export declare function AreaPreviewPlot({
   axisId