@mui/x-charts-pro 8.22.0 → 8.23.0

package/esm/ChartsToolbarPro/ChartsToolbarZoomInTrigger.js

@@ -5,7 +5,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["render"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useChartContext, useSelector, useChartsSlots } from '@mui/x-charts/internals';
+import { useChartContext, useChartsSlots } from '@mui/x-charts/internals';
 import { useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
 import { selectorChartCanZoomIn } from "../internals/plugins/useChartProZoom/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -26,7 +26,7 @@ const ChartsToolbarZoomInTrigger = /*#__PURE__*/React.forwardRef(function Charts
     instance,
     store
   } = useChartContext();
-  const disabled = useSelector(store, selectorChartCanZoomIn);
+  const disabled = store.use(selectorChartCanZoomIn);
   const element = useComponentRenderer(slots.baseButton, render, _extends({}, slotProps.baseButton, {
     onClick: () => instance.zoomIn(),
     disabled

package/esm/ChartsToolbarPro/ChartsToolbarZoomOutTrigger.js

@@ -5,7 +5,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["render"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useChartContext, useSelector, useChartsSlots } from '@mui/x-charts/internals';
+import { useChartContext, useChartsSlots } from '@mui/x-charts/internals';
 import { useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
 import { selectorChartCanZoomOut } from "../internals/plugins/useChartProZoom/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -26,7 +26,7 @@ const ChartsToolbarZoomOutTrigger = /*#__PURE__*/React.forwardRef(function Chart
     instance,
     store
   } = useChartContext();
-  const disabled = useSelector(store, selectorChartCanZoomOut);
+  const disabled = store.use(selectorChartCanZoomOut);
   const element = useComponentRenderer(slots.baseButton, render, _extends({}, slotProps.baseButton, {
     onClick: () => instance.zoomOut(),
     disabled

package/esm/FunnelChart/FunnelPlot.js

@@ -4,7 +4,7 @@ const _excluded = ["onItemClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { line as d3Line } from '@mui/x-charts-vendor/d3-shape';
-import { cartesianSeriesTypes, useSelector, useStore } from '@mui/x-charts/internals';
+import { cartesianSeriesTypes, useStore } from '@mui/x-charts/internals';
 import { FunnelSection } from "./FunnelSection.js";
 import { alignLabel, positionLabel } from "./labelUtils.js";
 import { useFunnelSeriesContext } from "../hooks/useFunnelSeries.js";
@@ -21,12 +21,12 @@ const useAggregatedData = () => {
   const {
     axis: xAxis,
     axisIds: xAxisIds
-  } = useSelector(store, selectorChartXAxis);
+  } = store.use(selectorChartXAxis);
   const {
     axis: yAxis,
     axisIds: yAxisIds
-  } = useSelector(store, selectorChartYAxis);
-  const gap = useSelector(store, selectorFunnelGap);
+  } = store.use(selectorChartYAxis);
+  const gap = store.use(selectorFunnelGap);
   const allData = React.useMemo(() => {
     if (seriesData === undefined) {
       return [];

package/esm/FunnelChart/funnelAxisPlugin/useChartFunnelAxis.js

@@ -3,7 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { warnOnce } from '@mui/x-internals/warning';
-import { getSVGPoint, getCartesianAxisIndex, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartsInteractionIsInitialized, useSelector, defaultizeXAxis, defaultizeYAxis } from '@mui/x-charts/internals';
+import { getSVGPoint, getCartesianAxisIndex, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartsInteractionIsInitialized, defaultizeXAxis, defaultizeYAxis } from '@mui/x-charts/internals';
 import { selectorChartXAxis, selectorChartYAxis } from "./useChartFunnelAxisRendering.selectors.js";
 export const useChartFunnelAxis = ({
   params,
@@ -25,8 +25,8 @@ export const useChartFunnelAxis = ({
       warnOnce([`MUI X Charts: The following axis ids are duplicated: ${Array.from(duplicates).join(', ')}.`, `Please make sure that each axis has a unique id.`].join('\n'), 'error');
     }
   }
-  const drawingArea = useSelector(store, selectorChartDrawingArea);
-  const isInteractionEnabled = useSelector(store, selectorChartsInteractionIsInitialized);
+  const drawingArea = store.use(selectorChartDrawingArea);
+  const isInteractionEnabled = store.use(selectorChartsInteractionIsInitialized);
   const isFirstRender = React.useRef(true);
   React.useEffect(() => {
     if (isFirstRender.current) {

package/esm/Heatmap/Heatmap.d.ts

@@ -34,13 +34,13 @@ export interface HeatmapProps extends Omit<ChartContainerProProps<'heatmap', Hea
    * If not provided, a default axis config is used.
    * An array of [[AxisConfig]] objects.
    */
-  xAxis: Readonly<Omit<MakeOptional<XAxis<'band'>, 'scaleType'>, 'zoom'>[]>;
+  xAxis: Readonly<MakeOptional<XAxis<'band'>, 'scaleType'>[]>;
   /**
    * The configuration of the y-axes.
    * If not provided, a default axis config is used.
    * An array of [[AxisConfig]] objects.
    */
-  yAxis: Readonly<Omit<MakeOptional<YAxis<'band'>, 'scaleType'>, 'zoom'>[]>;
+  yAxis: Readonly<MakeOptional<YAxis<'band'>, 'scaleType'>[]>;
   /**
    * The series to display in the bar chart.
    * An array of [[HeatmapSeries]] objects.

package/esm/Heatmap/Heatmap.js

@@ -13,6 +13,7 @@ import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath';
 import { ChartsOverlay } from '@mui/x-charts/ChartsOverlay';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '@mui/x-charts/constants';
 import { ChartsLegend, ContinuousColorLegend } from '@mui/x-charts/ChartsLegend';
+import { ChartsBrushOverlay } from '@mui/x-charts/ChartsBrushOverlay';
 import { HeatmapPlot } from "./HeatmapPlot.js";
 import { heatmapSeriesConfig } from "./seriesConfig/index.js";
 import { HeatmapTooltip } from "./HeatmapTooltip/index.js";
@@ -148,7 +149,7 @@ const Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap(inProps, ref) {
           slotProps: slotProps
         }), /*#__PURE__*/_jsx(ChartsClipPath, {
           id: clipPathId
-        }), children]
+        }), /*#__PURE__*/_jsx(ChartsBrushOverlay, {}), children]
       }), !loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, slotProps?.tooltip))]
     }))
   });
@@ -162,9 +163,19 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
   apiRef: PropTypes.shape({
     current: PropTypes.shape({
       exportAsImage: PropTypes.func.isRequired,
-      exportAsPrint: PropTypes.func.isRequired
+      exportAsPrint: PropTypes.func.isRequired,
+      setAxisZoomData: PropTypes.func.isRequired,
+      setZoomData: PropTypes.func.isRequired
     })
   }),
+  /**
+   * Configuration for the brush interaction.
+   */
+  brushConfig: PropTypes.shape({
+    enabled: PropTypes.bool,
+    preventHighlight: PropTypes.bool,
+    preventTooltip: PropTypes.bool
+  }),
   className: PropTypes.string,
   /**
    * Color palette used to colorize multiple series.
@@ -204,6 +215,15 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    * If you don't provide this prop. It falls back to a randomly generated id.
    */
   id: PropTypes.string,
+  /**
+   * The list of zoom data related to each axis.
+   * Used to initialize the zoom in a specific configuration without controlling it.
+   */
+  initialZoom: PropTypes.arrayOf(PropTypes.shape({
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    end: PropTypes.number.isRequired,
+    start: PropTypes.number.isRequired
+  })),
   /**
    * If `true`, a loading overlay is displayed.
    * @default false
@@ -238,6 +258,12 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
    */
   onHighlightChange: PropTypes.func,
+  /**
+   * Callback fired when the zoom has changed.
+   *
+   * @param {ZoomData[]} zoomData Updated zoom data.
+   */
+  onZoomChange: PropTypes.func,
   /**
    * The series to display in the bar chart.
    * An array of [[HeatmapSeries]] objects.
@@ -339,7 +365,22 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
-    valueFormatter: PropTypes.func
+    valueFormatter: PropTypes.func,
+    zoom: PropTypes.oneOfType([PropTypes.shape({
+      filterMode: PropTypes.oneOf(['discard', 'keep']),
+      maxEnd: PropTypes.number,
+      maxSpan: PropTypes.number,
+      minSpan: PropTypes.number,
+      minStart: PropTypes.number,
+      panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool,
+        preview: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
+        size: PropTypes.number
+      }),
+      step: PropTypes.number
+    }), PropTypes.bool])
   })).isRequired,
   /**
    * The configuration of the y-axes.
@@ -404,7 +445,22 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
-    width: PropTypes.number
+    width: PropTypes.number,
+    zoom: PropTypes.oneOfType([PropTypes.shape({
+      filterMode: PropTypes.oneOf(['discard', 'keep']),
+      maxEnd: PropTypes.number,
+      maxSpan: PropTypes.number,
+      minSpan: PropTypes.number,
+      minStart: PropTypes.number,
+      panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool,
+        preview: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
+        size: PropTypes.number
+      }),
+      step: PropTypes.number
+    }), PropTypes.bool])
   })).isRequired,
   /**
    * The configuration of the z-axes.
@@ -430,6 +486,54 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
     id: PropTypes.string,
     max: PropTypes.number,
     min: PropTypes.number
-  }))
+  })),
+  /**
+   * The list of zoom data related to each axis.
+   */
+  zoomData: PropTypes.arrayOf(PropTypes.shape({
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    end: PropTypes.number.isRequired,
+    start: PropTypes.number.isRequired
+  })),
+  /**
+   * Configuration for zoom interactions.
+   */
+  zoomInteractionConfig: PropTypes.shape({
+    pan: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['drag', 'pressAndDrag', 'wheel']), PropTypes.shape({
+      pointerMode: PropTypes.oneOf(['mouse', 'touch']),
+      requiredKeys: PropTypes.arrayOf(PropTypes.string),
+      type: PropTypes.oneOf(['drag']).isRequired
+    }), PropTypes.shape({
+      pointerMode: PropTypes.oneOf(['mouse', 'touch']),
+      requiredKeys: PropTypes.arrayOf(PropTypes.string),
+      type: PropTypes.oneOf(['pressAndDrag']).isRequired
+    }), PropTypes.shape({
+      allowedDirection: PropTypes.oneOf(['x', 'xy', 'y']),
+      pointerMode: PropTypes.any,
+      requiredKeys: PropTypes.arrayOf(PropTypes.string),
+      type: PropTypes.oneOf(['wheel']).isRequired
+    })]).isRequired),
+    zoom: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['brush', 'doubleTapReset', 'pinch', 'tapAndDrag', 'wheel']), PropTypes.shape({
+      pointerMode: PropTypes.any,
+      requiredKeys: PropTypes.arrayOf(PropTypes.string),
+      type: PropTypes.oneOf(['wheel']).isRequired
+    }), PropTypes.shape({
+      pointerMode: PropTypes.any,
+      requiredKeys: PropTypes.array,
+      type: PropTypes.oneOf(['pinch']).isRequired
+    }), PropTypes.shape({
+      pointerMode: PropTypes.oneOf(['mouse', 'touch']),
+      requiredKeys: PropTypes.arrayOf(PropTypes.string),
+      type: PropTypes.oneOf(['tapAndDrag']).isRequired
+    }), PropTypes.shape({
+      pointerMode: PropTypes.oneOf(['mouse', 'touch']),
+      requiredKeys: PropTypes.arrayOf(PropTypes.string),
+      type: PropTypes.oneOf(['doubleTapReset']).isRequired
+    }), PropTypes.shape({
+      pointerMode: PropTypes.any,
+      requiredKeys: PropTypes.array,
+      type: PropTypes.oneOf(['brush']).isRequired
+    })]).isRequired)
+  })
 } : void 0;
 export { Heatmap };

package/esm/Heatmap/Heatmap.plugins.d.ts

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

package/esm/Heatmap/Heatmap.plugins.js

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

package/esm/Heatmap/HeatmapItem.d.ts

@@ -9,7 +9,7 @@ export interface HeatmapItemSlots {
   cell?: React.ElementType;
 }
 export interface HeatmapItemSlotProps {
-  cell?: Partial<React.ComponentPropsWithRef<'rect'>>;
+  cell?: Partial<HeatmapCellProps>;
 }
 export interface HeatmapItemProps {
   dataIndex: number;
@@ -20,6 +20,8 @@ export interface HeatmapItemProps {
   x: number;
   y: number;
   color: string;
+  isHighlighted?: boolean;
+  isFaded?: boolean;
   /**
    * The props used for each component slot.
    * @default {}
@@ -39,6 +41,13 @@ export interface HeatmapItemOwnerState {
   isHighlighted: boolean;
   classes?: Partial<HeatmapClasses>;
 }
+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

@@ -1,12 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["seriesId", "dataIndex", "color", "value", "slotProps", "slots"];
+const _excluded = ["seriesId", "dataIndex", "color", "value", "isHighlighted", "isFaded", "slotProps", "slots"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
-import { useItemHighlighted } from '@mui/x-charts/hooks';
 import { useInteractionItemProps } from '@mui/x-charts/internals';
 import { getHeatmapUtilityClass } from "./heatmapClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -43,6 +42,8 @@ function HeatmapItem(props) {
       dataIndex,
       color,
       value,
+      isHighlighted = false,
+      isFaded = false,
       slotProps = {},
       slots = {}
     } = props,
@@ -52,13 +53,6 @@ function HeatmapItem(props) {
     seriesId,
     dataIndex
   });
-  const {
-    isFaded,
-    isHighlighted
-  } = useItemHighlighted({
-    seriesId,
-    dataIndex
-  });
   const ownerState = {
     seriesId,
     dataIndex,

package/esm/Heatmap/HeatmapPlot.js

@@ -2,14 +2,18 @@
 
 import PropTypes from 'prop-types';
 import { useXScale, useYScale, useZColorScale } from '@mui/x-charts/hooks';
+import { selectorChartsIsFadedCallback, selectorChartsIsHighlightedCallback, useStore } from '@mui/x-charts/internals';
 import { useHeatmapSeriesContext } from "../hooks/useHeatmapSeries.js";
 import { HeatmapItem } from "./HeatmapItem.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function HeatmapPlot(props) {
+  const store = useStore();
   const xScale = useXScale();
   const yScale = useYScale();
   const colorScale = useZColorScale();
   const series = useHeatmapSeriesContext();
+  const isHighlighted = store.use(selectorChartsIsHighlightedCallback);
+  const isFaded = store.use(selectorChartsIsFadedCallback);
   const xDomain = xScale.domain();
   const yDomain = yScale.domain();
   if (!series || series.seriesOrder.length === 0) {
@@ -24,6 +28,10 @@ function HeatmapPlot(props) {
       if (x === undefined || y === undefined || !color) {
         return null;
       }
+      const item = {
+        seriesId: seriesToDisplay.id,
+        dataIndex
+      };
       return /*#__PURE__*/_jsx(HeatmapItem, {
         width: xScale.bandwidth(),
         height: yScale.bandwidth(),
@@ -34,7 +42,9 @@ function HeatmapPlot(props) {
         seriesId: series.seriesOrder[0],
         value: value,
         slots: props.slots,
-        slotProps: props.slotProps
+        slotProps: props.slotProps,
+        isHighlighted: isHighlighted(item),
+        isFaded: isFaded(item)
       }, `${xIndex}_${yIndex}`);
     })
   });

package/esm/Heatmap/index.d.ts

@@ -1,6 +1,7 @@
 export { Heatmap } from "./Heatmap.js";
 export type { HeatmapSeries, HeatmapProps } from "./Heatmap.js";
 export { HeatmapPlot } from "./HeatmapPlot.js";
+export type { HeatmapCellProps } from "./HeatmapItem.js";
 export * from "./HeatmapTooltip/index.js";
 export * from "./Heatmap.plugins.js";
 export * from "./heatmapClasses.js";

package/esm/SankeyChart/SankeyLinkElement.js

@@ -3,7 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
-import { useInteractionItemProps, useStore, useSelector } from '@mui/x-charts/internals';
+import { useInteractionItemProps, useStore } from '@mui/x-charts/internals';
 import { selectorIsLinkHighlighted } from "./plugins/index.js";
 import { selectorIsSankeyItemFaded } from "./plugins/useSankeyHighlight.selectors.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -26,8 +26,8 @@ export const SankeyLinkElement = /*#__PURE__*/React.forwardRef(function SankeyLi
     sourceId: link.source.id,
     link
   };
-  const isHighlighted = useSelector(store, selectorIsLinkHighlighted, link);
-  const isFaded = useSelector(store, selectorIsSankeyItemFaded, isHighlighted);
+  const isHighlighted = store.use(selectorIsLinkHighlighted, link);
+  const isFaded = store.use(selectorIsSankeyItemFaded, isHighlighted);
 
   // Add interaction props for tooltips
   const interactionProps = useInteractionItemProps(identifier);

package/esm/SankeyChart/SankeyNodeElement.js

@@ -3,7 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
-import { useInteractionItemProps, useStore, useSelector } from '@mui/x-charts/internals';
+import { useInteractionItemProps, useStore } from '@mui/x-charts/internals';
 import { selectorIsNodeHighlighted } from "./plugins/index.js";
 import { selectorIsSankeyItemFaded } from "./plugins/useSankeyHighlight.selectors.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -30,8 +30,8 @@ export const SankeyNodeElement = /*#__PURE__*/React.forwardRef(function SankeyNo
     nodeId: node.id,
     node
   };
-  const isHighlighted = useSelector(store, selectorIsNodeHighlighted, node.id);
-  const isFaded = useSelector(store, selectorIsSankeyItemFaded, isHighlighted);
+  const isHighlighted = store.use(selectorIsNodeHighlighted, node.id);
+  const isFaded = store.use(selectorIsSankeyItemFaded, isHighlighted);
 
   // Add interaction props for tooltips
   const interactionProps = useInteractionItemProps(identifier);

package/esm/SankeyChart/SankeyNodeLabel.js

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { useStore, useSelector } from '@mui/x-charts/internals';
+import { useStore } from '@mui/x-charts/internals';
 import { useTheme } from '@mui/material/styles';
 import { selectorIsNodeHighlighted } from "./plugins/index.js";
 import { selectorIsSankeyItemFaded } from "./plugins/useSankeyHighlight.selectors.js";
@@ -25,8 +25,8 @@ export const SankeyNodeLabel = /*#__PURE__*/React.forwardRef(function SankeyNode
   : x0 - 6; // Left side for other columns
 
   const labelAnchor = node.depth === 0 ? 'start' : 'end';
-  const isHighlighted = useSelector(store, selectorIsNodeHighlighted, node.id);
-  const isFaded = useSelector(store, selectorIsSankeyItemFaded, isHighlighted);
+  const isHighlighted = store.use(selectorIsNodeHighlighted, node.id);
+  const isFaded = store.use(selectorIsSankeyItemFaded, isHighlighted);
   let opacity = 1;
   if (isFaded) {
     opacity = 0.3;

package/esm/hooks/useSankeySeries.js

@@ -1,6 +1,6 @@
 'use client';
 
-import { useSeriesOfType, useAllSeriesOfType, useSelector, useStore, selectorChartSeriesLayout } from '@mui/x-charts/internals';
+import { useSeriesOfType, useAllSeriesOfType, useStore, selectorChartSeriesLayout } from '@mui/x-charts/internals';
 
 /**
  * Get access to the internal state of sankey series.
@@ -47,7 +47,7 @@ export function useSankeyLayout() {
   const store = useStore();
   const seriesContext = useSankeySeriesContext();
   const seriesId = seriesContext?.seriesOrder?.[0];
-  const layout = useSelector(store, selectorChartSeriesLayout);
+  const layout = store.use(selectorChartSeriesLayout);
   if (!seriesId) {
     return undefined;
   }

package/esm/hooks/zoom/useIsZoomInteracting.js

@@ -1,6 +1,6 @@
 'use client';
 
-import { useSelector, useStore } from '@mui/x-charts/internals';
+import { useStore } from '@mui/x-charts/internals';
 import { selectorChartZoomIsInteracting } from "../../internals/plugins/useChartProZoom/index.js";
 /**
  * Get access to the zoom state.
@@ -9,6 +9,6 @@ import { selectorChartZoomIsInteracting } from "../../internals/plugins/useChart
  */
 export function useIsZoomInteracting() {
   const store = useStore();
-  const isInteracting = useSelector(store, selectorChartZoomIsInteracting);
+  const isInteracting = store.use(selectorChartZoomIsInteracting);
   return isInteracting;
 }

package/esm/index.js

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

package/esm/internals/index.d.ts

@@ -0,0 +1,4 @@
+export { useChartContainerProProps } from "../ChartContainerPro/useChartContainerProProps.js";
+export type { ChartsSlotsPro, ChartsSlotPropsPro } from "./material/index.js";
+export { seriesPreviewPlotMap } from "../ChartZoomSlider/internals/seriesPreviewPlotMap.js";
+export type { PreviewPlotProps } from "../ChartZoomSlider/internals/previews/PreviewPlot.types.js";

package/esm/internals/index.js

@@ -0,0 +1,2 @@
+export { useChartContainerProProps } from "../ChartContainerPro/useChartContainerProProps.js";
+export { seriesPreviewPlotMap } from "../ChartZoomSlider/internals/seriesPreviewPlotMap.js";

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

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { useSelector, selectorChartDrawingArea, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
+import { selectorChartDrawingArea, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
 import { rafThrottle } from '@mui/x-internals/rafThrottle';
 import { translateZoom } from "./useZoom.utils.js";
 import { selectorPanInteractionConfig } from "../ZoomInteractionConfig.selectors.js";
@@ -10,9 +10,9 @@ export const usePanOnDrag = ({
   instance,
   svgRef
 }, setZoomDataCallback) => {
-  const drawingArea = useSelector(store, selectorChartDrawingArea);
-  const optionsLookup = useSelector(store, selectorChartZoomOptionsLookup);
-  const config = useSelector(store, selectorPanInteractionConfig, 'drag');
+  const drawingArea = store.use(selectorChartDrawingArea);
+  const optionsLookup = store.use(selectorChartZoomOptionsLookup);
+  const config = store.use(selectorPanInteractionConfig, 'drag');
   const isPanOnDragEnabled = Object.values(optionsLookup).some(v => v.panning) && Boolean(config);
   React.useEffect(() => {
     if (!isPanOnDragEnabled) {

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

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { useSelector, selectorChartDrawingArea, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
+import { selectorChartDrawingArea, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
 import { rafThrottle } from '@mui/x-internals/rafThrottle';
 import { translateZoom } from "./useZoom.utils.js";
 import { selectorPanInteractionConfig } from "../ZoomInteractionConfig.selectors.js";
@@ -10,14 +10,14 @@ export const usePanOnPressAndDrag = ({
   instance,
   svgRef
 }, setZoomDataCallback) => {
-  const drawingArea = useSelector(store, selectorChartDrawingArea);
-  const optionsLookup = useSelector(store, selectorChartZoomOptionsLookup);
+  const drawingArea = store.use(selectorChartDrawingArea);
+  const optionsLookup = store.use(selectorChartZoomOptionsLookup);
   const isInteracting = React.useRef(false);
   const accumulatedChange = React.useRef({
     x: 0,
     y: 0
   });
-  const config = useSelector(store, selectorPanInteractionConfig, 'pressAndDrag');
+  const config = store.use(selectorPanInteractionConfig, 'pressAndDrag');
   const isPanOnPressAndDragEnabled = Object.values(optionsLookup).some(v => v.panning) && Boolean(config);
   React.useEffect(() => {
     if (!isPanOnPressAndDragEnabled) {

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

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { useSelector, getSVGPoint, selectorChartDrawingArea, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
+import { getSVGPoint, selectorChartDrawingArea, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
 import { rafThrottle } from '@mui/x-internals/rafThrottle';
 import { translateZoom } from "./useZoom.utils.js";
 import { selectorPanInteractionConfig } from "../ZoomInteractionConfig.selectors.js";
@@ -10,11 +10,11 @@ export const usePanOnWheel = ({
   instance,
   svgRef
 }, setZoomDataCallback) => {
-  const drawingArea = useSelector(store, selectorChartDrawingArea);
-  const optionsLookup = useSelector(store, selectorChartZoomOptionsLookup);
+  const drawingArea = store.use(selectorChartDrawingArea);
+  const optionsLookup = store.use(selectorChartZoomOptionsLookup);
   const startedOutsideRef = React.useRef(false);
   const startedOutsideTimeoutRef = React.useRef(null);
-  const config = useSelector(store, selectorPanInteractionConfig, 'wheel');
+  const config = store.use(selectorPanInteractionConfig, 'wheel');
   const isPanOnWheelEnabled = Object.keys(optionsLookup).length > 0 && Boolean(config);
   React.useEffect(() => {
     if (!isPanOnWheelEnabled) {

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

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { useSelector, getSVGPoint, selectorChartDrawingArea, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
+import { getSVGPoint, selectorChartDrawingArea, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
 import { getHorizontalCenterRatio, getVerticalCenterRatio, isSpanValid } from "./useZoom.utils.js";
 import { selectorZoomInteractionConfig } from "../ZoomInteractionConfig.selectors.js";
 export const useZoomOnBrush = ({
@@ -9,9 +9,9 @@ export const useZoomOnBrush = ({
   instance,
   svgRef
 }, setZoomDataCallback) => {
-  const drawingArea = useSelector(store, selectorChartDrawingArea);
-  const optionsLookup = useSelector(store, selectorChartZoomOptionsLookup);
-  const config = useSelector(store, selectorZoomInteractionConfig, 'brush');
+  const drawingArea = store.use(selectorChartDrawingArea);
+  const optionsLookup = store.use(selectorChartZoomOptionsLookup);
+  const config = store.use(selectorZoomInteractionConfig, 'brush');
   const isZoomOnBrushEnabled = Object.keys(optionsLookup).length > 0 && Boolean(config);
   React.useEffect(() => {
     instance.setZoomBrushEnabled(isZoomOnBrushEnabled);

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

@@ -1,15 +1,15 @@
 'use client';
 
 import * as React from 'react';
-import { useSelector, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
+import { selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
 import { selectorZoomInteractionConfig } from "../ZoomInteractionConfig.selectors.js";
 export const useZoomOnDoubleTapReset = ({
   store,
   instance,
   svgRef
 }, setZoomDataCallback) => {
-  const optionsLookup = useSelector(store, selectorChartZoomOptionsLookup);
-  const config = useSelector(store, selectorZoomInteractionConfig, 'doubleTapReset');
+  const optionsLookup = store.use(selectorChartZoomOptionsLookup);
+  const config = store.use(selectorZoomInteractionConfig, 'doubleTapReset');
   const isZoomOnDoubleTapResetEnabled = Object.keys(optionsLookup).length > 0 && Boolean(config);
   React.useEffect(() => {
     if (!isZoomOnDoubleTapResetEnabled) {