@mui/x-charts-pro 8.21.0 → 8.22.1

package/esm/internals/plugins/useChartProZoom/gestureHooks/useZoomOnBrush.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { ChartPlugin, ZoomData } from '@mui/x-charts/internals';
-import { UseChartProZoomSignature } from "../useChartProZoom.types.js";
+import { type ChartPlugin, type ZoomData } from '@mui/x-charts/internals';
+import { type UseChartProZoomSignature } from "../useChartProZoom.types.js";
 export declare const useZoomOnBrush: ({
   store,
   instance,

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.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { ChartPlugin, ZoomData } from '@mui/x-charts/internals';
-import { UseChartProZoomSignature } from "../useChartProZoom.types.js";
+import { type ChartPlugin, type ZoomData } from '@mui/x-charts/internals';
+import { type UseChartProZoomSignature } from "../useChartProZoom.types.js";
 export declare const useZoomOnDoubleTapReset: ({
   store,
   instance,

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) {

package/esm/internals/plugins/useChartProZoom/gestureHooks/useZoomOnPinch.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { ChartPlugin, ZoomData } from '@mui/x-charts/internals';
-import { UseChartProZoomSignature } from "../useChartProZoom.types.js";
+import { type ChartPlugin, type ZoomData } from '@mui/x-charts/internals';
+import { type UseChartProZoomSignature } from "../useChartProZoom.types.js";
 export declare const useZoomOnPinch: ({
   store,
   instance,

package/esm/internals/plugins/useChartProZoom/gestureHooks/useZoomOnPinch.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 { getHorizontalCenterRatio, getVerticalCenterRatio, isSpanValid, zoomAtPoint } from "./useZoom.utils.js";
 import { selectorZoomInteractionConfig } from "../ZoomInteractionConfig.selectors.js";
@@ -10,9 +10,9 @@ export const useZoomOnPinch = ({
   instance,
   svgRef
 }, setZoomDataCallback) => {
-  const drawingArea = useSelector(store, selectorChartDrawingArea);
-  const optionsLookup = useSelector(store, selectorChartZoomOptionsLookup);
-  const config = useSelector(store, selectorZoomInteractionConfig, 'pinch');
+  const drawingArea = store.use(selectorChartDrawingArea);
+  const optionsLookup = store.use(selectorChartZoomOptionsLookup);
+  const config = store.use(selectorZoomInteractionConfig, 'pinch');
   const isZoomOnPinchEnabled = Object.keys(optionsLookup).length > 0 && Boolean(config);
   React.useEffect(() => {
     if (!isZoomOnPinchEnabled) {

package/esm/internals/plugins/useChartProZoom/gestureHooks/useZoomOnTapAndDrag.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { ChartPlugin, ZoomData } from '@mui/x-charts/internals';
-import { UseChartProZoomSignature } from "../useChartProZoom.types.js";
+import { type ChartPlugin, type ZoomData } from '@mui/x-charts/internals';
+import { type UseChartProZoomSignature } from "../useChartProZoom.types.js";
 export declare const useZoomOnTapAndDrag: ({
   store,
   instance,

package/esm/internals/plugins/useChartProZoom/gestureHooks/useZoomOnTapAndDrag.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 { getHorizontalCenterRatio, getVerticalCenterRatio, isSpanValid, zoomAtPoint } from "./useZoom.utils.js";
 import { selectorZoomInteractionConfig } from "../ZoomInteractionConfig.selectors.js";
@@ -10,9 +10,9 @@ export const useZoomOnTapAndDrag = ({
   instance,
   svgRef
 }, setZoomDataCallback) => {
-  const drawingArea = useSelector(store, selectorChartDrawingArea);
-  const optionsLookup = useSelector(store, selectorChartZoomOptionsLookup);
-  const config = useSelector(store, selectorZoomInteractionConfig, 'tapAndDrag');
+  const drawingArea = store.use(selectorChartDrawingArea);
+  const optionsLookup = store.use(selectorChartZoomOptionsLookup);
+  const config = store.use(selectorZoomInteractionConfig, 'tapAndDrag');
   const isZoomOnTapAndDragEnabled = Object.keys(optionsLookup).length > 0 && Boolean(config);
   React.useEffect(() => {
     if (!isZoomOnTapAndDragEnabled) {

package/esm/internals/plugins/useChartProZoom/gestureHooks/useZoomOnWheel.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { ChartPlugin, ZoomData } from '@mui/x-charts/internals';
-import { UseChartProZoomSignature } from "../useChartProZoom.types.js";
+import { type ChartPlugin, type ZoomData } from '@mui/x-charts/internals';
+import { type UseChartProZoomSignature } from "../useChartProZoom.types.js";
 export declare const useZoomOnWheel: ({
   store,
   instance,

package/esm/internals/plugins/useChartProZoom/gestureHooks/useZoomOnWheel.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 { getHorizontalCenterRatio, getVerticalCenterRatio, getWheelScaleRatio, isSpanValid, zoomAtPoint } from "./useZoom.utils.js";
 import { selectorZoomInteractionConfig } from "../ZoomInteractionConfig.selectors.js";
@@ -10,11 +10,11 @@ export const useZoomOnWheel = ({
   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, selectorZoomInteractionConfig, 'wheel');
+  const config = store.use(selectorZoomInteractionConfig, 'wheel');
   const isZoomOnWheelEnabled = Object.keys(optionsLookup).length > 0 && Boolean(config);
   React.useEffect(() => {
     if (!isZoomOnWheelEnabled) {

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

@@ -1,3 +1,3 @@
-import { ChartPlugin } from '@mui/x-charts/internals';
-import { UseChartProZoomSignature } from "./useChartProZoom.types.js";
+import { type ChartPlugin } from '@mui/x-charts/internals';
+import { type UseChartProZoomSignature } from "./useChartProZoom.types.js";
 export declare const useChartProZoom: ChartPlugin<UseChartProZoomSignature>;

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

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useSelector, selectorChartZoomOptionsLookup, createZoomLookup, selectorChartAxisZoomOptionsLookup } from '@mui/x-charts/internals';
+import { selectorChartZoomOptionsLookup, createZoomLookup, selectorChartAxisZoomOptionsLookup } from '@mui/x-charts/internals';
 import debounce from '@mui/utils/debounce';
 import { useEffectAfterFirstRender } from '@mui/x-internals/useEffectAfterFirstRender';
 import { useEventCallback } from '@mui/material/utils';
@@ -29,7 +29,7 @@ export const useChartProZoom = pluginData => {
     zoomInteractionConfig
   } = params;
   const onZoomChange = useEventCallback(onZoomChangeProp ?? (() => {}));
-  const optionsLookup = useSelector(store, selectorChartZoomOptionsLookup);
+  const optionsLookup = store.use(selectorChartZoomOptionsLookup);
   useEffectAfterFirstRender(() => {
     store.set('zoom', _extends({}, store.state.zoom, {
       zoomInteractionConfig: initializeZoomInteractionConfig(zoomInteractionConfig, optionsLookup)
@@ -126,7 +126,7 @@ export const useChartProZoom = pluginData => {
   useZoomOnDoubleTapReset(pluginData, setZoomDataCallback);
   const zoom = React.useCallback(step => {
     setZoomDataCallback(prev => prev.map(zoomData => {
-      const zoomOptions = selectorChartAxisZoomOptionsLookup(store.getSnapshot(), zoomData.axisId);
+      const zoomOptions = selectorChartAxisZoomOptionsLookup(store.state, zoomData.axisId);
       return calculateZoom(zoomData, step, zoomOptions);
     }));
   }, [setZoomDataCallback, store]);

package/esm/internals/plugins/useChartProZoom/useChartProZoom.selectors.d.ts

@@ -1,5 +1,5 @@
-import { AxisId, ChartRootSelector } from '@mui/x-charts/internals';
-import { UseChartProZoomSignature } from "./useChartProZoom.types.js";
+import { type AxisId, type ChartRootSelector } from '@mui/x-charts/internals';
+import { type UseChartProZoomSignature } from "./useChartProZoom.types.js";
 export declare const selectorChartZoomState: ChartRootSelector<UseChartProZoomSignature, 'zoom'>;
 export declare const selectorChartZoomIsInteracting: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;

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

@@ -1,5 +1,5 @@
-import { UseChartSeriesSignature, ChartPluginSignature, UseChartCartesianAxisSignature, UseChartCartesianAxisDefaultizedParameters, ZoomData, AxisId, type UseChartBrushSignature } from '@mui/x-charts/internals';
-import { ZoomInteractionConfig, DefaultizedZoomInteractionConfig } from "./ZoomInteractionConfig.types.js";
+import { type UseChartSeriesSignature, type ChartPluginSignature, type UseChartCartesianAxisSignature, type UseChartCartesianAxisDefaultizedParameters, type ZoomData, type AxisId, type UseChartBrushSignature } from '@mui/x-charts/internals';
+import { type ZoomInteractionConfig, type DefaultizedZoomInteractionConfig } from "./ZoomInteractionConfig.types.js";
 export interface UseChartProZoomParameters {
   /**
    * The list of zoom data related to each axis.

package/esm/internals/slots/chartBaseSlotProps.d.ts

@@ -1,5 +1,5 @@
 import type * as React from 'react';
-import { ChartBaseCommonProps } from '@mui/x-charts/models';
+import { type ChartBaseCommonProps } from '@mui/x-charts/models';
 export type ChartBaseTooltipProps = ChartBaseCommonProps & {
   children: React.ReactElement<any, any>;
   enterDelay?: number;

package/esm/internals/slots/chartsBaseSlots.d.ts

@@ -1,6 +1,6 @@
-import { ChartsBaseSlots } from '@mui/x-charts/models';
-import * as React from 'react';
-import { ChartBaseDividerProps, ChartBaseMenuItemProps, ChartBaseMenuListProps, ChartBasePopperProps, ChartBaseTooltipProps } from "./chartBaseSlotProps.js";
+import { type ChartsBaseSlots } from '@mui/x-charts/models';
+import type * as React from 'react';
+import { type ChartBaseDividerProps, type ChartBaseMenuItemProps, type ChartBaseMenuListProps, type ChartBasePopperProps, type ChartBaseTooltipProps } from "./chartBaseSlotProps.js";
 export interface ChartsBaseSlotsPro extends ChartsBaseSlots {
   baseDivider: React.ComponentType<ChartBaseDividerProps>;
   baseMenuItem: React.ComponentType<ChartBaseMenuItemProps>;

package/esm/internals/slots/chartsIconSlots.d.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { ChartBaseIconProps, ChartsIconSlots } from '@mui/x-charts/models';
+import type * as React from 'react';
+import { type ChartBaseIconProps, type ChartsIconSlots } from '@mui/x-charts/models';
 export interface ChartsIconSlotsPro extends ChartsIconSlots {
   /**
    * Icon displayed on the toolbar's zoom in button.

package/esm/models/seriesType/heatmap.d.ts

@@ -1,5 +1,5 @@
-import { DefaultizedProps } from '@mui/x-internals/types';
-import { CommonDefaultizedProps, CommonSeriesType, CartesianSeriesType } from '@mui/x-charts/internals';
+import { type DefaultizedProps } from '@mui/x-internals/types';
+import { type CommonDefaultizedProps, type CommonSeriesType, type CartesianSeriesType } from '@mui/x-charts/internals';
 export type HeatmapValueType = readonly [number, number, number];
 export interface HeatmapSeriesType extends Omit<CommonSeriesType<HeatmapValueType>, 'color' | 'colorGetter'>, CartesianSeriesType {
   type: 'heatmap';

package/esm/themeAugmentation/components.d.ts

@@ -1,4 +1,4 @@
-import { ComponentsProps, ComponentsOverrides } from '@mui/material/styles';
+import { type ComponentsProps, type ComponentsOverrides } from '@mui/material/styles';
 export interface ChartsProComponents<Theme = unknown> {
   MuiBarChartPro?: {
     defaultProps?: ComponentsProps['MuiBarChartPro'];

package/esm/themeAugmentation/overrides.d.ts

@@ -1,4 +1,4 @@
-import { HeatmapClassKey } from "../Heatmap/index.js";
+import { type HeatmapClassKey } from "../Heatmap/index.js";
 export interface ChartsProComponentNameToClassKey {
   MuiHeatmap: HeatmapClassKey;
 }

package/esm/themeAugmentation/props.d.ts

@@ -1,7 +1,7 @@
-import { ScatterChartProProps } from "../ScatterChartPro/index.js";
-import { BarChartProProps } from "../BarChartPro/index.js";
-import { HeatmapProps } from "../Heatmap/Heatmap.js";
-import { LineChartProProps } from "../LineChartPro/index.js";
+import { type ScatterChartProProps } from "../ScatterChartPro/index.js";
+import { type BarChartProProps } from "../BarChartPro/index.js";
+import { type HeatmapProps } from "../Heatmap/Heatmap.js";
+import { type LineChartProProps } from "../LineChartPro/index.js";
 export interface ChartsProComponentsPropsList {
   MuiBarChartPro: BarChartProProps;
   MuiLineChartPro: LineChartProProps;

package/esm/typeOverloads/modules.d.ts

@@ -1,8 +1,8 @@
-import { DefaultizedProps, MakeRequired } from '@mui/x-internals/types';
-import { AxisId, ZoomOptions } from '@mui/x-charts/internals';
-import { DefaultizedFunnelSeriesType, FunnelItemIdentifier, FunnelSeriesType, FunnelValueType } from "../FunnelChart/funnel.types.js";
-import { HeatmapItemIdentifier, HeatmapSeriesType, DefaultizedHeatmapSeriesType, HeatmapValueType } from "../models/seriesType/heatmap.js";
-import { SankeyLayout, SankeySeriesType, type DefaultizedSankeySeriesType, type SankeyItemIdentifier, type SankeyItemIdentifierWithData } from "../SankeyChart/sankey.types.js";
+import { type DefaultizedProps, type MakeRequired } from '@mui/x-internals/types';
+import { type AxisId, type ZoomOptions } from '@mui/x-charts/internals';
+import { type DefaultizedFunnelSeriesType, type FunnelItemIdentifier, type FunnelSeriesType, type FunnelValueType } from "../FunnelChart/funnel.types.js";
+import { type HeatmapItemIdentifier, type HeatmapSeriesType, type DefaultizedHeatmapSeriesType, type HeatmapValueType } from "../models/seriesType/heatmap.js";
+import { type SankeyLayout, type SankeySeriesType, type DefaultizedSankeySeriesType, type SankeyItemIdentifier, type SankeyItemIdentifierWithData } from "../SankeyChart/sankey.types.js";
 declare module '@mui/x-charts/internals' {
   interface ChartsSeriesConfig {
     heatmap: {
@@ -31,11 +31,11 @@ declare module '@mui/x-charts/internals' {
       seriesInput: DefaultizedSankeySeriesType;
       series: DefaultizedSankeySeriesType;
       seriesLayout: {
-        sankeyLayout: SankeyLayout;
+        sankeyLayout: SankeyLayout<true>;
       };
       seriesProp: SankeySeriesType;
       itemIdentifier: SankeyItemIdentifier;
-      itemIdentifierWithData: SankeyItemIdentifierWithData;
+      itemIdentifierWithData: SankeyItemIdentifierWithData<true>;
       valueType: number;
     };
   }

package/hooks/useChartProApiRef.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { ChartAnyPluginSignature } from '@mui/x-charts/internals';
-import { AllPluginSignatures } from "../internals/plugins/allPlugins.js";
-import { ProPluginsPerSeriesType, type ChartProApi } from "../context/ChartProApi.js";
+import { type ChartAnyPluginSignature } from '@mui/x-charts/internals';
+import { type AllPluginSignatures } from "../internals/plugins/allPlugins.js";
+import { type ProPluginsPerSeriesType, type ChartProApi } from "../context/ChartProApi.js";
 /**
  * Hook that instantiates a [[ChartProApiRef]].
  * The chart type needs to be given as the generic parameter to narrow down the API to the specific chart type.

package/hooks/useFunnelSeries.d.ts

@@ -1,4 +1,4 @@
-import { ProcessedSeries, SeriesId, ChartSeriesDefaultized } from '@mui/x-charts/internals';
+import { type ProcessedSeries, type SeriesId, type ChartSeriesDefaultized } from '@mui/x-charts/internals';
 export type UseFunnelSeriesReturnValue = ChartSeriesDefaultized<'funnel'>;
 export type UseFunnelSeriesContextReturnValue = ProcessedSeries['funnel'];
 /**

package/hooks/useHeatmapSeries.d.ts

@@ -1,4 +1,4 @@
-import { ProcessedSeries, SeriesId, ChartSeriesDefaultized } from '@mui/x-charts/internals';
+import { type ProcessedSeries, type SeriesId, type ChartSeriesDefaultized } from '@mui/x-charts/internals';
 export type UseHeatmapSeriesReturnValue = ChartSeriesDefaultized<'heatmap'>;
 export type UseHeatmapSeriesContextReturnValue = ProcessedSeries['heatmap'];
 /**

package/hooks/useSankeySeries.d.ts

@@ -1,5 +1,5 @@
-import { ProcessedSeries, SeriesId, ChartSeriesDefaultized, ChartSeriesLayout } from '@mui/x-charts/internals';
-import { SankeyLayout } from "../SankeyChart/index.js";
+import { type ProcessedSeries, type SeriesId, type ChartSeriesDefaultized, type ChartSeriesLayout } from '@mui/x-charts/internals';
+import { type SankeyLayout } from "../SankeyChart/index.js";
 export type UseSankeySeriesReturnValue = ChartSeriesDefaultized<'sankey'>;
 export type UseSankeySeriesContextReturnValue = ProcessedSeries['sankey'];
 export type UseSankeySeriesLayoutReturnValue = ChartSeriesLayout<'sankey'>;

package/hooks/useSankeySeries.js

@@ -44,6 +44,7 @@ function useSankeySeries(seriesIds) {
 function useSankeySeriesContext() {
   return (0, _internals.useAllSeriesOfType)('sankey');
 }
+
 /**
  * Get access to the sankey layout.
  * @returns {SankeyLayout | undefined} the sankey layout
@@ -52,7 +53,7 @@ function useSankeyLayout() {
   const store = (0, _internals.useStore)();
   const seriesContext = useSankeySeriesContext();
   const seriesId = seriesContext?.seriesOrder?.[0];
-  const layout = (0, _internals.useSelector)(store, _internals.selectorChartSeriesLayout);
+  const layout = store.use(_internals.selectorChartSeriesLayout);
   if (!seriesId) {
     return undefined;
   }

package/hooks/zoom/useIsZoomInteracting.js

@@ -14,6 +14,6 @@ var _useChartProZoom = require("../../internals/plugins/useChartProZoom");
  */
 function useIsZoomInteracting() {
   const store = (0, _internals.useStore)();
-  const isInteracting = (0, _internals.useSelector)(store, _useChartProZoom.selectorChartZoomIsInteracting);
+  const isInteracting = store.use(_useChartProZoom.selectorChartZoomIsInteracting);
   return isInteracting;
 }

package/index.js

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

package/internals/index.d.ts

@@ -0,0 +1,2 @@
+export { useChartContainerProProps } from "../ChartContainerPro/useChartContainerProProps.js";
+export type { ChartsSlotsPro, ChartsSlotPropsPro } from "./material/index.js";

package/internals/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useChartContainerProProps", {
+  enumerable: true,
+  get: function () {
+    return _useChartContainerProProps.useChartContainerProProps;
+  }
+});
+var _useChartContainerProProps = require("../ChartContainerPro/useChartContainerProProps");

package/internals/material/components/BaseMenuItem.d.ts

@@ -1,2 +1,2 @@
-import { ChartBaseMenuItemProps } from "../../slots/chartBaseSlotProps.js";
+import { type ChartBaseMenuItemProps } from "../../slots/chartBaseSlotProps.js";
 export declare function BaseMenuItem(props: ChartBaseMenuItemProps): import("react/jsx-runtime").JSX.Element;

package/internals/material/components/BasePopper.d.ts

@@ -1,2 +1,2 @@
-import { ChartBasePopperProps } from "../../slots/chartBaseSlotProps.js";
+import { type ChartBasePopperProps } from "../../slots/chartBaseSlotProps.js";
 export declare function BasePopper(props: ChartBasePopperProps): import("react/jsx-runtime").JSX.Element;

package/internals/material/index.d.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
-import { ChartsBaseSlotsPro } from "../slots/chartsBaseSlots.js";
-import { ChartsIconSlotsPro } from "../slots/chartsIconSlots.js";
+import type * as React from 'react';
+import { type ChartsBaseSlotsPro } from "../slots/chartsBaseSlots.js";
+import { type ChartsIconSlotsPro } from "../slots/chartsIconSlots.js";
 export type ChartsSlotsPro = ChartsBaseSlotsPro & ChartsIconSlotsPro;
 export type ChartsSlotPropsPro = { [key in keyof ChartsSlotsPro]: React.ComponentProps<ChartsSlotsPro[key]> };
 export declare const defaultSlotsMaterial: ChartsSlotsPro;

package/internals/plugins/allPlugins.d.ts

@@ -1,9 +1,9 @@
-import { ChartSeriesType, ConvertSignaturesIntoPlugins, UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartZAxisSignature, UseChartHighlightSignature, UseChartPolarAxisSignature, UseChartBrushSignature } from '@mui/x-charts/internals';
-import { UseChartProExportSignature } from "./useChartProExport/index.js";
-import { UseChartProZoomSignature } from "./useChartProZoom/index.js";
-export type AllPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartBrushSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<TSeries>, UseChartPolarAxisSignature<TSeries>, UseChartHighlightSignature, UseChartProZoomSignature, UseChartProExportSignature];
+import { type ChartSeriesType, type ConvertSignaturesIntoPlugins, type UseChartCartesianAxisSignature, type UseChartTooltipSignature, type UseChartInteractionSignature, type UseChartZAxisSignature, type UseChartHighlightSignature, type UseChartPolarAxisSignature, type UseChartBrushSignature } from '@mui/x-charts/internals';
+import { type UseChartProExportSignature } from "./useChartProExport/index.js";
+import { type UseChartProZoomSignature } from "./useChartProZoom/index.js";
+export type AllPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<TSeries>, UseChartPolarAxisSignature<TSeries>, UseChartHighlightSignature, UseChartProZoomSignature, UseChartProExportSignature];
 export type AllPluginsType<TSeries extends ChartSeriesType = ChartSeriesType> = ConvertSignaturesIntoPlugins<AllPluginSignatures<TSeries>>;
-export declare const ALL_PLUGINS: (import("@mui/x-charts/internals").ChartPlugin<UseChartProZoomSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartProExportSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartZAxisSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartBrushSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartInteractionSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartHighlightSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartCartesianAxisSignature<any>> | import("@mui/x-charts/internals").ChartPlugin<UseChartPolarAxisSignature<any>>)[];
-export type DefaultPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartBrushSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<TSeries>, UseChartPolarAxisSignature<TSeries>, UseChartHighlightSignature, UseChartProZoomSignature, UseChartProExportSignature];
+export declare const ALL_PLUGINS: (import("@mui/x-charts/internals").ChartPlugin<UseChartProZoomSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartProExportSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartZAxisSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartBrushSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartTooltipSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartInteractionSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartHighlightSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartCartesianAxisSignature<any>> | import("@mui/x-charts/internals").ChartPlugin<UseChartPolarAxisSignature<any>>)[];
+export type DefaultPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<TSeries>, UseChartPolarAxisSignature<TSeries>, UseChartHighlightSignature, UseChartProZoomSignature, UseChartProExportSignature];
 export type DefaultPluginsType<TSeries extends ChartSeriesType = ChartSeriesType> = ConvertSignaturesIntoPlugins<DefaultPluginSignatures<TSeries>>;
-export declare const DEFAULT_PLUGINS: (import("@mui/x-charts/internals").ChartPlugin<UseChartProZoomSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartProExportSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartZAxisSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartBrushSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartInteractionSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartHighlightSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartCartesianAxisSignature<any>>)[];
+export declare const DEFAULT_PLUGINS: (import("@mui/x-charts/internals").ChartPlugin<UseChartProZoomSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartProExportSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartZAxisSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartBrushSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartTooltipSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartInteractionSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartHighlightSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartCartesianAxisSignature<any>>)[];

package/internals/plugins/allPlugins.js

@@ -9,5 +9,5 @@ var _useChartProExport = require("./useChartProExport");
 var _useChartProZoom = require("./useChartProZoom");
 // This file should be removed after creating all plugins in favor of a file per chart type.
 
-const ALL_PLUGINS = exports.ALL_PLUGINS = [_internals.useChartZAxis, _internals.useChartBrush, _internals.useChartInteraction, _internals.useChartCartesianAxis, _internals.useChartPolarAxis, _internals.useChartHighlight, _useChartProZoom.useChartProZoom, _useChartProExport.useChartProExport];
-const DEFAULT_PLUGINS = exports.DEFAULT_PLUGINS = [_internals.useChartZAxis, _internals.useChartBrush, _internals.useChartInteraction, _internals.useChartCartesianAxis, _internals.useChartHighlight, _useChartProZoom.useChartProZoom, _useChartProExport.useChartProExport];
+const ALL_PLUGINS = exports.ALL_PLUGINS = [_internals.useChartZAxis, _internals.useChartBrush, _internals.useChartTooltip, _internals.useChartInteraction, _internals.useChartCartesianAxis, _internals.useChartPolarAxis, _internals.useChartHighlight, _useChartProZoom.useChartProZoom, _useChartProExport.useChartProExport];
+const DEFAULT_PLUGINS = exports.DEFAULT_PLUGINS = [_internals.useChartZAxis, _internals.useChartBrush, _internals.useChartTooltip, _internals.useChartInteraction, _internals.useChartCartesianAxis, _internals.useChartHighlight, _useChartProZoom.useChartProZoom, _useChartProExport.useChartProExport];

package/internals/plugins/useChartProExport/exportImage.d.ts

@@ -1,3 +1,3 @@
-import { ChartImageExportOptions } from "./useChartProExport.types.js";
+import { type ChartImageExportOptions } from "./useChartProExport.types.js";
 export declare const getDrawDocument: () => Promise<typeof import("rasterizehtml").drawDocument>;
 export declare function exportImage(element: HTMLElement | SVGElement, svg: SVGElement, params?: ChartImageExportOptions): Promise<void>;

package/internals/plugins/useChartProExport/print.d.ts

@@ -1,4 +1,4 @@
-import { ChartPrintExportOptions } from "./useChartProExport.types.js";
+import { type ChartPrintExportOptions } from "./useChartProExport.types.js";
 export declare function printChart(element: HTMLElement | SVGElement, {
   fileName,
   onBeforeExport,

package/internals/plugins/useChartProExport/useChartProExport.d.ts

@@ -1,3 +1,3 @@
-import { ChartPlugin } from '@mui/x-charts/internals';
-import { UseChartProExportSignature } from "./useChartProExport.types.js";
+import { type ChartPlugin } from '@mui/x-charts/internals';
+import { type UseChartProExportSignature } from "./useChartProExport.types.js";
 export declare const useChartProExport: ChartPlugin<UseChartProExportSignature>;

package/internals/plugins/useChartProExport/useChartProExport.types.d.ts

@@ -1,4 +1,4 @@
-import { ChartPluginSignature } from '@mui/x-charts/internals';
+import { type ChartPluginSignature } from '@mui/x-charts/internals';
 export interface UseChartProExportParameters {}
 export type UseChartProExportDefaultizedParameters = UseChartProExportParameters;
 export interface UseChartProExportState {

package/internals/plugins/useChartProZoom/calculateZoom.d.ts

@@ -1,4 +1,4 @@
-import { DefaultizedZoomOptions, ZoomData } from '@mui/x-charts/internals';
+import { type DefaultizedZoomOptions, type ZoomData } from '@mui/x-charts/internals';
 /**
  * Calculates the new zoom range based on the current zoom, step, and constraints.
  *

package/internals/plugins/useChartProZoom/gestureHooks/usePanOnDrag.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { ChartPlugin, ZoomData } from '@mui/x-charts/internals';
-import { UseChartProZoomSignature } from "../useChartProZoom.types.js";
+import { type ChartPlugin, type ZoomData } from '@mui/x-charts/internals';
+import { type UseChartProZoomSignature } from "../useChartProZoom.types.js";
 export declare const usePanOnDrag: ({
   store,
   instance,

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

@@ -16,9 +16,9 @@ const usePanOnDrag = ({
   instance,
   svgRef
 }, setZoomDataCallback) => {
-  const drawingArea = (0, _internals.useSelector)(store, _internals.selectorChartDrawingArea);
-  const optionsLookup = (0, _internals.useSelector)(store, _internals.selectorChartZoomOptionsLookup);
-  const config = (0, _internals.useSelector)(store, _ZoomInteractionConfig.selectorPanInteractionConfig, 'drag');
+  const drawingArea = store.use(_internals.selectorChartDrawingArea);
+  const optionsLookup = store.use(_internals.selectorChartZoomOptionsLookup);
+  const config = store.use(_ZoomInteractionConfig.selectorPanInteractionConfig, 'drag');
   const isPanOnDragEnabled = Object.values(optionsLookup).some(v => v.panning) && Boolean(config);
   React.useEffect(() => {
     if (!isPanOnDragEnabled) {

package/internals/plugins/useChartProZoom/gestureHooks/usePanOnPressAndDrag.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { ChartPlugin, ZoomData } from '@mui/x-charts/internals';
-import { UseChartProZoomSignature } from "../useChartProZoom.types.js";
+import { type ChartPlugin, type ZoomData } from '@mui/x-charts/internals';
+import { type UseChartProZoomSignature } from "../useChartProZoom.types.js";
 export declare const usePanOnPressAndDrag: ({
   store,
   instance,

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

@@ -16,14 +16,14 @@ const usePanOnPressAndDrag = ({
   instance,
   svgRef
 }, setZoomDataCallback) => {
-  const drawingArea = (0, _internals.useSelector)(store, _internals.selectorChartDrawingArea);
-  const optionsLookup = (0, _internals.useSelector)(store, _internals.selectorChartZoomOptionsLookup);
+  const drawingArea = store.use(_internals.selectorChartDrawingArea);
+  const optionsLookup = store.use(_internals.selectorChartZoomOptionsLookup);
   const isInteracting = React.useRef(false);
   const accumulatedChange = React.useRef({
     x: 0,
     y: 0
   });
-  const config = (0, _internals.useSelector)(store, _ZoomInteractionConfig.selectorPanInteractionConfig, 'pressAndDrag');
+  const config = store.use(_ZoomInteractionConfig.selectorPanInteractionConfig, 'pressAndDrag');
   const isPanOnPressAndDragEnabled = Object.values(optionsLookup).some(v => v.panning) && Boolean(config);
   React.useEffect(() => {
     if (!isPanOnPressAndDragEnabled) {

package/internals/plugins/useChartProZoom/gestureHooks/usePanOnWheel.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { ChartPlugin, ZoomData } from '@mui/x-charts/internals';
-import { UseChartProZoomSignature } from "../useChartProZoom.types.js";
+import { type ChartPlugin, type ZoomData } from '@mui/x-charts/internals';
+import { type UseChartProZoomSignature } from "../useChartProZoom.types.js";
 export declare const usePanOnWheel: ({
   store,
   instance,

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

@@ -16,11 +16,11 @@ const usePanOnWheel = ({
   instance,
   svgRef
 }, setZoomDataCallback) => {
-  const drawingArea = (0, _internals.useSelector)(store, _internals.selectorChartDrawingArea);
-  const optionsLookup = (0, _internals.useSelector)(store, _internals.selectorChartZoomOptionsLookup);
+  const drawingArea = store.use(_internals.selectorChartDrawingArea);
+  const optionsLookup = store.use(_internals.selectorChartZoomOptionsLookup);
   const startedOutsideRef = React.useRef(false);
   const startedOutsideTimeoutRef = React.useRef(null);
-  const config = (0, _internals.useSelector)(store, _ZoomInteractionConfig.selectorPanInteractionConfig, 'wheel');
+  const config = store.use(_ZoomInteractionConfig.selectorPanInteractionConfig, 'wheel');
   const isPanOnWheelEnabled = Object.keys(optionsLookup).length > 0 && Boolean(config);
   React.useEffect(() => {
     if (!isPanOnWheelEnabled) {

package/internals/plugins/useChartProZoom/gestureHooks/useZoom.utils.d.ts

@@ -1,4 +1,4 @@
-import { DefaultizedZoomOptions, ZoomData } from '@mui/x-charts/internals';
+import { type DefaultizedZoomOptions, type ZoomData } from '@mui/x-charts/internals';
 /**
  * Helper to get the range (in percents of a reference range) corresponding to a given scale.
  * @param centerRatio {number} The ratio of the point that should not move between the previous and next range.

package/internals/plugins/useChartProZoom/gestureHooks/useZoomOnBrush.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { ChartPlugin, ZoomData } from '@mui/x-charts/internals';
-import { UseChartProZoomSignature } from "../useChartProZoom.types.js";
+import { type ChartPlugin, type ZoomData } from '@mui/x-charts/internals';
+import { type UseChartProZoomSignature } from "../useChartProZoom.types.js";
 export declare const useZoomOnBrush: ({
   store,
   instance,