@mui/x-charts-pro 8.22.0 → 8.22.1

package/CHANGELOG.md

@@ -5,6 +5,107 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.22.1
+
+_Dec 17, 2025_
+
+We'd like to extend a big thank you to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌎 Improve Swedish (sv-SE) locale on the Data Grid
+- 🐞 Bugfixes
+
+Special thanks go out to the community members for their valuable contributions:
+@KyeongJooni, @VismaAndreasIvarsson
+
+The following team members contributed to this release:
+@alelthomas, @alexfauquette, @arminmeh, @bernardobelchior, @Janpot, @JCQuintas, @mapache-salvaje, @michelengelen, @mj12albert, @prakhargupta1, @romgrk, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.22.1`
+
+- [data grid] Fix column menu keyboard shortcut (#20621) @mj12albert
+- [data grid] Fix row checkbox disabled state on first render and keep cell focusable (ARIA) (#20641) @michelengelen
+- [data grid] Fix tree data selection bug (#20528) @michelengelen
+- [data grid] Prevent clear cell selection on edit mode (#20544) @siriwatknp
+- [data grid] Refactor column merge logic to prioritize defined properties only (#20640) @michelengelen
+- [data grid] Reset row spanning on row expansion change (#20661) @siriwatknp
+- [data grid] Resize newly added rows while resize action is happening (#20676)
+- [l10n] Improve Swedish (sv-SE) locale (#20682) @VismaAndreasIvarsson
+
+#### `@mui/x-data-grid-pro@8.22.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.22.1`.
+
+#### `@mui/x-data-grid-premium@8.22.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.22.1`, plus:
+
+- [DataGridPremium] Import `useId()` from `@mui/utils` to maintain React 17 compatibility (#20635) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.22.1`
+
+- [pickers] Add minutesStep validation test (#20672) @KyeongJooni
+- [pickers] Fix `onAccept()` returning wrong year after selecting year then month (#20639) @michelengelen
+
+#### `@mui/x-date-pickers-pro@8.22.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.22.1`.
+
+### Charts
+
+#### `@mui/x-charts@8.22.1`
+
+- [charts] Extract `FocusedPieArc` from `PieArcPlot` (#20613) @alexfauquette
+- [charts] Fix regression on the highlight control (#20627) @alexfauquette
+- [charts] Refactor: `useSelector()` => `store.use()` (#20681) @romgrk
+- [charts] Remove duplicated types (#20694) @alexfauquette
+- [charts] Remove unused generics from bar charts (#20642) @bernardobelchior
+- [charts] Simplify tooltip position getter for pie chart (#20625) @alexfauquette
+
+#### `@mui/x-charts-pro@8.22.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.22.1`, plus:
+
+- [charts-pro] Add heatmap performance benchmark (#20695) @bernardobelchior
+
+#### `@mui/x-charts-premium@8.22.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-charts-pro@8.22.1`, plus:
+
+- [charts-premium] Create `BarChartPremium` (#20643) @bernardobelchior
+
+### Tree View
+
+#### `@mui/x-tree-view@8.22.1`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.22.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.22.1`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.22.1`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add button to GitHub source code for the Data Grid advanced demos (DX-50) (#20633) @alelthomas
+- [docs] Remove `seriesConfig` to prevent future confusion (#20678) @alexfauquette
+- [docs] Revise the Data Grid's API object doc for clarity and style (#20649) @mapache-salvaje
+- [docs] Update list of charts (#20479) @prakhargupta1
+
+### Core
+
+- [code-infra] Regression tests improvements (#20441) @Janpot
+- [code-infra] Test utils upgrade (#20592) @Janpot
+- [code-infra] Try to fix the Tree View flacky tests (#20573) @JCQuintas
+
 ## 8.22.0
 
 _Dec 11, 2025_

package/ChartDataProviderPro/ChartDataProviderPro.js

@@ -16,7 +16,7 @@ var _material = require("../internals/material");
 var _allPlugins = require("../internals/plugins/allPlugins");
 var _useChartDataProviderProProps = require("./useChartDataProviderProProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const releaseInfo = "MTc2NTQxMTIwMDAwMA==";
+const releaseInfo = "MTc2NjAxNjAwMDAwMA==";
 const packageIdentifier = 'x-charts-pro';
 /**
  * Orchestrates the data providers for the chart components and hooks.

package/ChartZoomSlider/internals/ChartAxisZoomSlider.js

@@ -25,8 +25,8 @@ function ChartAxisZoomSlider({
 }) {
   const store = (0, _internals.useStore)();
   const drawingArea = (0, _internals.useDrawingArea)();
-  const zoomData = (0, _internals.useSelector)(store, _useChartProZoom.selectorChartAxisZoomData, axisId);
-  const zoomOptions = (0, _internals.useSelector)(store, _internals.selectorChartAxisZoomOptionsLookup, axisId);
+  const zoomData = store.use(_useChartProZoom.selectorChartAxisZoomData, axisId);
+  const zoomOptions = store.use(_internals.selectorChartAxisZoomOptionsLookup, axisId);
   const [showTooltip, setShowTooltip] = React.useState(false);
   const {
     xAxis

package/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.js

@@ -62,7 +62,7 @@ function ChartAxisZoomSliderActiveTrack({
     svgRef
   } = (0, _internals.useChartContext)();
   const store = (0, _internals.useStore)();
-  const axis = (0, _internals.useSelector)(store, _internals.selectorChartAxis, axisId);
+  const axis = store.use(_internals.selectorChartAxis, axisId);
   const drawingArea = (0, _internals.useDrawingArea)();
   const activePreviewRectRef = React.useRef(null);
   const [startThumbEl, setStartThumbEl] = React.useState(null);

package/ChartZoomSlider/internals/ChartAxisZoomSliderPreview.js

@@ -50,8 +50,8 @@ function PreviewRectangles(props) {
     axisDirection
   } = props;
   const store = (0, _internals.useStore)();
-  const zoomData = (0, _internals.useSelector)(store, _useChartProZoom.selectorChartAxisZoomData, axisId);
-  const zoomOptions = (0, _internals.useSelector)(store, _internals.selectorChartAxisZoomOptionsLookup, axisId);
+  const zoomData = store.use(_useChartProZoom.selectorChartAxisZoomData, axisId);
+  const zoomOptions = store.use(_internals.selectorChartAxisZoomOptionsLookup, axisId);
   const id = (0, _useId.default)();
   if (!zoomData) {
     return null;

package/ChartZoomSlider/internals/ChartAxisZoomSliderPreviewContent.js

@@ -23,7 +23,7 @@ function ChartAxisZoomSliderPreviewContent(props) {
     height
   } = props;
   const store = (0, _internals.useStore)();
-  const processedSeries = (0, _internals.useSelector)(store, _internals.selectorChartSeriesProcessed);
+  const processedSeries = store.use(_internals.selectorChartSeriesProcessed);
   const children = [];
   const clipId = `zoom-preview-mask-${axisId}`;
   const hasLineSeries = (processedSeries.line?.seriesOrder?.length ?? 0) > 0;

package/ChartZoomSlider/internals/previews/AreaPreviewPlot.js

@@ -55,7 +55,7 @@ function PreviewAreaElement(_ref) {
 }
 function useAreaPreviewData(axisId) {
   const store = (0, _internals.useStore)();
-  const xAxes = (0, _internals.useSelector)(store, _internals.selectorChartPreviewComputedXAxis, axisId);
-  const yAxes = (0, _internals.useSelector)(store, _internals.selectorChartPreviewComputedYAxis, axisId);
+  const xAxes = store.use(_internals.selectorChartPreviewComputedXAxis, axisId);
+  const yAxes = store.use(_internals.selectorChartPreviewComputedYAxis, axisId);
   return (0, _internals.useAreaPlotData)(xAxes, yAxes);
 }

package/ChartZoomSlider/internals/previews/BarPreviewPlot.js

@@ -54,7 +54,7 @@ function BarPreviewPlot(props) {
 }
 function useBarPreviewData(axisId, drawingArea) {
   const store = (0, _internals.useStore)();
-  const xAxes = (0, _internals.useSelector)(store, _internals.selectorChartPreviewComputedXAxis, axisId);
-  const yAxes = (0, _internals.useSelector)(store, _internals.selectorChartPreviewComputedYAxis, axisId);
+  const xAxes = store.use(_internals.selectorChartPreviewComputedXAxis, axisId);
+  const yAxes = store.use(_internals.selectorChartPreviewComputedYAxis, axisId);
   return (0, _internals.useBarPlotData)(drawingArea, xAxes, yAxes);
 }

package/ChartZoomSlider/internals/previews/LinePreviewPlot.js

@@ -53,7 +53,7 @@ function PreviewLineElement(_ref) {
 }
 function useLinePreviewData(axisId) {
   const store = (0, _internals.useStore)();
-  const xAxes = (0, _internals.useSelector)(store, _internals.selectorChartPreviewComputedXAxis, axisId);
-  const yAxes = (0, _internals.useSelector)(store, _internals.selectorChartPreviewComputedYAxis, axisId);
+  const xAxes = store.use(_internals.selectorChartPreviewComputedXAxis, axisId);
+  const yAxes = store.use(_internals.selectorChartPreviewComputedYAxis, axisId);
   return (0, _internals.useLinePlotData)(xAxes, yAxes);
 }

package/ChartZoomSlider/internals/previews/ScatterPreviewPlot.js

@@ -19,8 +19,8 @@ function ScatterPreviewPlot({
 }) {
   const store = (0, _internals.useStore)();
   const seriesData = (0, _hooks.useScatterSeriesContext)();
-  const xAxes = (0, _internals.useSelector)(store, _internals.selectorChartPreviewComputedXAxis, axisId);
-  const yAxes = (0, _internals.useSelector)(store, _internals.selectorChartPreviewComputedYAxis, axisId);
+  const xAxes = store.use(_internals.selectorChartPreviewComputedXAxis, axisId);
+  const yAxes = store.use(_internals.selectorChartPreviewComputedYAxis, axisId);
   const defaultXAxisId = (0, _hooks.useXAxes)().xAxisIds[0];
   const defaultYAxisId = (0, _hooks.useYAxes)().yAxisIds[0];
   const {

package/ChartsToolbarPro/ChartsToolbarPro.js

@@ -51,7 +51,7 @@ function ChartsToolbarPro(_ref) {
   const exportMenuTriggerRef = React.useRef(null);
   const exportMenuId = (0, _useId.default)();
   const exportMenuTriggerId = (0, _useId.default)();
-  const isZoomEnabled = (0, _internals.useSelector)(store, _useChartProZoom.selectorChartZoomIsEnabled);
+  const isZoomEnabled = store.use(_useChartProZoom.selectorChartZoomIsEnabled);
   const imageExportOptionList = rawImageExportOptions ?? DEFAULT_IMAGE_EXPORT_OPTIONS;
   const showExportMenu = !printOptions?.disableToolbarButton || imageExportOptionList.length > 0;
   const children = [];

package/ChartsToolbarPro/ChartsToolbarZoomInTrigger.js

@@ -33,7 +33,7 @@ const ChartsToolbarZoomInTrigger = exports.ChartsToolbarZoomInTrigger = /*#__PUR
     instance,
     store
   } = (0, _internals.useChartContext)();
-  const disabled = (0, _internals.useSelector)(store, _useChartProZoom.selectorChartCanZoomIn);
+  const disabled = store.use(_useChartProZoom.selectorChartCanZoomIn);
   const element = (0, _useComponentRenderer.useComponentRenderer)(slots.baseButton, render, (0, _extends2.default)({}, slotProps.baseButton, {
     onClick: () => instance.zoomIn(),
     disabled

package/ChartsToolbarPro/ChartsToolbarZoomOutTrigger.js

@@ -33,7 +33,7 @@ const ChartsToolbarZoomOutTrigger = exports.ChartsToolbarZoomOutTrigger = /*#__P
     instance,
     store
   } = (0, _internals.useChartContext)();
-  const disabled = (0, _internals.useSelector)(store, _useChartProZoom.selectorChartCanZoomOut);
+  const disabled = store.use(_useChartProZoom.selectorChartCanZoomOut);
   const element = (0, _useComponentRenderer.useComponentRenderer)(slots.baseButton, render, (0, _extends2.default)({}, slotProps.baseButton, {
     onClick: () => instance.zoomOut(),
     disabled

package/FunnelChart/FunnelPlot.js

@@ -29,12 +29,12 @@ const useAggregatedData = () => {
   const {
     axis: xAxis,
     axisIds: xAxisIds
-  } = (0, _internals.useSelector)(store, _useChartFunnelAxisRendering.selectorChartXAxis);
+  } = store.use(_useChartFunnelAxisRendering.selectorChartXAxis);
   const {
     axis: yAxis,
     axisIds: yAxisIds
-  } = (0, _internals.useSelector)(store, _useChartFunnelAxisRendering.selectorChartYAxis);
-  const gap = (0, _internals.useSelector)(store, _useChartFunnelAxisRendering.selectorFunnelGap);
+  } = store.use(_useChartFunnelAxisRendering.selectorChartYAxis);
+  const gap = store.use(_useChartFunnelAxisRendering.selectorFunnelGap);
   const allData = React.useMemo(() => {
     if (seriesData === undefined) {
       return [];

package/FunnelChart/funnelAxisPlugin/useChartFunnelAxis.js

@@ -32,8 +32,8 @@ const useChartFunnelAxis = ({
       (0, _warning.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 = (0, _internals.useSelector)(store, _internals.selectorChartDrawingArea);
-  const isInteractionEnabled = (0, _internals.useSelector)(store, _internals.selectorChartsInteractionIsInitialized);
+  const drawingArea = store.use(_internals.selectorChartDrawingArea);
+  const isInteractionEnabled = store.use(_internals.selectorChartsInteractionIsInitialized);
   const isFirstRender = React.useRef(true);
   React.useEffect(() => {
     if (isFirstRender.current) {

package/SankeyChart/SankeyLinkElement.js

@@ -33,8 +33,8 @@ const SankeyLinkElement = exports.SankeyLinkElement = /*#__PURE__*/React.forward
     sourceId: link.source.id,
     link
   };
-  const isHighlighted = (0, _internals.useSelector)(store, _plugins.selectorIsLinkHighlighted, link);
-  const isFaded = (0, _internals.useSelector)(store, _useSankeyHighlight.selectorIsSankeyItemFaded, isHighlighted);
+  const isHighlighted = store.use(_plugins.selectorIsLinkHighlighted, link);
+  const isFaded = store.use(_useSankeyHighlight.selectorIsSankeyItemFaded, isHighlighted);
 
   // Add interaction props for tooltips
   const interactionProps = (0, _internals.useInteractionItemProps)(identifier);

package/SankeyChart/SankeyNodeElement.js

@@ -37,8 +37,8 @@ const SankeyNodeElement = exports.SankeyNodeElement = /*#__PURE__*/React.forward
     nodeId: node.id,
     node
   };
-  const isHighlighted = (0, _internals.useSelector)(store, _plugins.selectorIsNodeHighlighted, node.id);
-  const isFaded = (0, _internals.useSelector)(store, _useSankeyHighlight.selectorIsSankeyItemFaded, isHighlighted);
+  const isHighlighted = store.use(_plugins.selectorIsNodeHighlighted, node.id);
+  const isFaded = store.use(_useSankeyHighlight.selectorIsSankeyItemFaded, isHighlighted);
 
   // Add interaction props for tooltips
   const interactionProps = (0, _internals.useInteractionItemProps)(identifier);

package/SankeyChart/SankeyNodeLabel.js

@@ -31,8 +31,8 @@ const SankeyNodeLabel = exports.SankeyNodeLabel = /*#__PURE__*/React.forwardRef(
   : x0 - 6; // Left side for other columns
 
   const labelAnchor = node.depth === 0 ? 'start' : 'end';
-  const isHighlighted = (0, _internals.useSelector)(store, _plugins.selectorIsNodeHighlighted, node.id);
-  const isFaded = (0, _internals.useSelector)(store, _useSankeyHighlight.selectorIsSankeyItemFaded, isHighlighted);
+  const isHighlighted = store.use(_plugins.selectorIsNodeHighlighted, node.id);
+  const isFaded = store.use(_useSankeyHighlight.selectorIsSankeyItemFaded, isHighlighted);
   let opacity = 1;
   if (isFaded) {
     opacity = 0.3;

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 = "MTc2NTQxMTIwMDAwMA==";
+const releaseInfo = "MTc2NjAxNjAwMDAwMA==";
 const packageIdentifier = 'x-charts-pro';
 /**
  * Orchestrates the data providers for the chart components and hooks.

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

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.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/previews/AreaPreviewPlot.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["id", "color", "gradientId", "onClick"];
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
-import { useSelector, useStore, useAreaPlotData, selectorChartPreviewComputedXAxis, selectorChartPreviewComputedYAxis } from '@mui/x-charts/internals';
+import { useStore, useAreaPlotData, selectorChartPreviewComputedXAxis, selectorChartPreviewComputedYAxis } from '@mui/x-charts/internals';
 import { jsx as _jsx } from "react/jsx-runtime";
 const AreaPlotRoot = styled('g', {
   name: 'MuiAreaPlot',
@@ -47,7 +47,7 @@ function PreviewAreaElement(_ref) {
 }
 function useAreaPreviewData(axisId) {
   const store = useStore();
-  const xAxes = useSelector(store, selectorChartPreviewComputedXAxis, axisId);
-  const yAxes = useSelector(store, selectorChartPreviewComputedYAxis, axisId);
+  const xAxes = store.use(selectorChartPreviewComputedXAxis, axisId);
+  const yAxes = store.use(selectorChartPreviewComputedYAxis, axisId);
   return useAreaPlotData(xAxes, yAxes);
 }

package/esm/ChartZoomSlider/internals/previews/BarPreviewPlot.js

@@ -1,4 +1,4 @@
-import { selectorChartPreviewComputedXAxis, selectorChartPreviewComputedYAxis, useBarPlotData, useSelector, useStore } from '@mui/x-charts/internals';
+import { selectorChartPreviewComputedXAxis, selectorChartPreviewComputedYAxis, useBarPlotData, useStore } from '@mui/x-charts/internals';
 import { BarElement } from '@mui/x-charts/BarChart';
 import { jsx as _jsx } from "react/jsx-runtime";
 export function BarPreviewPlot(props) {
@@ -48,7 +48,7 @@ export function BarPreviewPlot(props) {
 }
 function useBarPreviewData(axisId, drawingArea) {
   const store = useStore();
-  const xAxes = useSelector(store, selectorChartPreviewComputedXAxis, axisId);
-  const yAxes = useSelector(store, selectorChartPreviewComputedYAxis, axisId);
+  const xAxes = store.use(selectorChartPreviewComputedXAxis, axisId);
+  const yAxes = store.use(selectorChartPreviewComputedYAxis, axisId);
   return useBarPlotData(drawingArea, xAxes, yAxes);
 }

package/esm/ChartZoomSlider/internals/previews/LinePreviewPlot.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["id", "color", "gradientId", "onClick"];
 import * as React from 'react';
-import { useSelector, useStore, useLinePlotData, selectorChartPreviewComputedXAxis, selectorChartPreviewComputedYAxis } from '@mui/x-charts/internals';
+import { useStore, useLinePlotData, selectorChartPreviewComputedXAxis, selectorChartPreviewComputedYAxis } from '@mui/x-charts/internals';
 import { jsx as _jsx } from "react/jsx-runtime";
 export function LinePreviewPlot({
   axisId
@@ -45,7 +45,7 @@ function PreviewLineElement(_ref) {
 }
 function useLinePreviewData(axisId) {
   const store = useStore();
-  const xAxes = useSelector(store, selectorChartPreviewComputedXAxis, axisId);
-  const yAxes = useSelector(store, selectorChartPreviewComputedYAxis, axisId);
+  const xAxes = store.use(selectorChartPreviewComputedXAxis, axisId);
+  const yAxes = store.use(selectorChartPreviewComputedYAxis, axisId);
   return useLinePlotData(xAxes, yAxes);
 }

package/esm/ChartZoomSlider/internals/previews/ScatterPreviewPlot.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useSelector, useStore, useScatterPlotData, scatterSeriesConfig, selectorChartPreviewComputedXAxis, selectorChartPreviewComputedYAxis } from '@mui/x-charts/internals';
+import { useStore, useScatterPlotData, scatterSeriesConfig, selectorChartPreviewComputedXAxis, selectorChartPreviewComputedYAxis } from '@mui/x-charts/internals';
 import { useScatterSeriesContext, useXAxes, useYAxes, useZAxes } from '@mui/x-charts/hooks';
 import { ScatterMarker } from '@mui/x-charts/ScatterChart';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -12,8 +12,8 @@ export function ScatterPreviewPlot({
 }) {
   const store = useStore();
   const seriesData = useScatterSeriesContext();
-  const xAxes = useSelector(store, selectorChartPreviewComputedXAxis, axisId);
-  const yAxes = useSelector(store, selectorChartPreviewComputedYAxis, axisId);
+  const xAxes = store.use(selectorChartPreviewComputedXAxis, axisId);
+  const yAxes = store.use(selectorChartPreviewComputedYAxis, axisId);
   const defaultXAxisId = useXAxes().xAxisIds[0];
   const defaultYAxisId = useYAxes().yAxisIds[0];
   const {

package/esm/ChartsToolbarPro/ChartsToolbarPro.js

@@ -6,7 +6,7 @@ const _excluded = ["printOptions", "imageExportOptions"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Toolbar, ToolbarButton } from '@mui/x-charts/Toolbar';
-import { useChartContext, useSelector, useChartsSlots } from '@mui/x-charts/internals';
+import { useChartContext, useChartsSlots } from '@mui/x-charts/internals';
 import { useChartsLocalization } from '@mui/x-charts/hooks';
 import useId from '@mui/utils/useId';
 import { ChartsToolbarDivider } from "./internals/ChartsToolbarDivider.js";
@@ -44,7 +44,7 @@ function ChartsToolbarPro(_ref) {
   const exportMenuTriggerRef = React.useRef(null);
   const exportMenuId = useId();
   const exportMenuTriggerId = useId();
-  const isZoomEnabled = useSelector(store, selectorChartZoomIsEnabled);
+  const isZoomEnabled = store.use(selectorChartZoomIsEnabled);
   const imageExportOptionList = rawImageExportOptions ?? DEFAULT_IMAGE_EXPORT_OPTIONS;
   const showExportMenu = !printOptions?.disableToolbarButton || imageExportOptionList.length > 0;
   const children = [];

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/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.22.1
  *
  * @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,2 @@
+export { useChartContainerProProps } from "../ChartContainerPro/useChartContainerProProps.js";
+export type { ChartsSlotsPro, ChartsSlotPropsPro } from "./material/index.js";

package/esm/internals/index.js

@@ -0,0 +1 @@
+export { useChartContainerProProps } from "../ChartContainerPro/useChartContainerProProps.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) {

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

package/hooks/useSankeySeries.js

@@ -53,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.22.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/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.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.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/useZoomOnBrush.js

@@ -15,9 +15,9 @@ const useZoomOnBrush = ({
   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.selectorZoomInteractionConfig, 'brush');
+  const drawingArea = store.use(_internals.selectorChartDrawingArea);
+  const optionsLookup = store.use(_internals.selectorChartZoomOptionsLookup);
+  const config = store.use(_ZoomInteractionConfig.selectorZoomInteractionConfig, 'brush');
   const isZoomOnBrushEnabled = Object.keys(optionsLookup).length > 0 && Boolean(config);
   React.useEffect(() => {
     instance.setZoomBrushEnabled(isZoomOnBrushEnabled);

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

@@ -14,8 +14,8 @@ const useZoomOnDoubleTapReset = ({
   instance,
   svgRef
 }, setZoomDataCallback) => {
-  const optionsLookup = (0, _internals.useSelector)(store, _internals.selectorChartZoomOptionsLookup);
-  const config = (0, _internals.useSelector)(store, _ZoomInteractionConfig.selectorZoomInteractionConfig, 'doubleTapReset');
+  const optionsLookup = store.use(_internals.selectorChartZoomOptionsLookup);
+  const config = store.use(_ZoomInteractionConfig.selectorZoomInteractionConfig, 'doubleTapReset');
   const isZoomOnDoubleTapResetEnabled = Object.keys(optionsLookup).length > 0 && Boolean(config);
   React.useEffect(() => {
     if (!isZoomOnDoubleTapResetEnabled) {

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

@@ -16,9 +16,9 @@ const useZoomOnPinch = ({
   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.selectorZoomInteractionConfig, 'pinch');
+  const drawingArea = store.use(_internals.selectorChartDrawingArea);
+  const optionsLookup = store.use(_internals.selectorChartZoomOptionsLookup);
+  const config = store.use(_ZoomInteractionConfig.selectorZoomInteractionConfig, 'pinch');
   const isZoomOnPinchEnabled = Object.keys(optionsLookup).length > 0 && Boolean(config);
   React.useEffect(() => {
     if (!isZoomOnPinchEnabled) {

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

@@ -16,9 +16,9 @@ const useZoomOnTapAndDrag = ({
   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.selectorZoomInteractionConfig, 'tapAndDrag');
+  const drawingArea = store.use(_internals.selectorChartDrawingArea);
+  const optionsLookup = store.use(_internals.selectorChartZoomOptionsLookup);
+  const config = store.use(_ZoomInteractionConfig.selectorZoomInteractionConfig, 'tapAndDrag');
   const isZoomOnTapAndDragEnabled = Object.keys(optionsLookup).length > 0 && Boolean(config);
   React.useEffect(() => {
     if (!isZoomOnTapAndDragEnabled) {

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

@@ -16,11 +16,11 @@ const useZoomOnWheel = ({
   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.selectorZoomInteractionConfig, 'wheel');
+  const config = store.use(_ZoomInteractionConfig.selectorZoomInteractionConfig, 'wheel');
   const isZoomOnWheelEnabled = Object.keys(optionsLookup).length > 0 && Boolean(config);
   React.useEffect(() => {
     if (!isZoomOnWheelEnabled) {

package/internals/plugins/useChartProZoom/useChartProZoom.js

@@ -36,7 +36,7 @@ const useChartProZoom = pluginData => {
     zoomInteractionConfig
   } = params;
   const onZoomChange = (0, _utils.useEventCallback)(onZoomChangeProp ?? (() => {}));
-  const optionsLookup = (0, _internals.useSelector)(store, _internals.selectorChartZoomOptionsLookup);
+  const optionsLookup = store.use(_internals.selectorChartZoomOptionsLookup);
   (0, _useEffectAfterFirstRender.useEffectAfterFirstRender)(() => {
     store.set('zoom', (0, _extends2.default)({}, store.state.zoom, {
       zoomInteractionConfig: (0, _initializeZoomInteractionConfig.initializeZoomInteractionConfig)(zoomInteractionConfig, optionsLookup)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts-pro",
-  "version": "8.22.0",
+  "version": "8.22.1",
   "author": "MUI Team",
   "description": "The Pro plan edition of the MUI X Charts components.",
   "license": "SEE LICENSE IN LICENSE",
@@ -31,10 +31,10 @@
     "@mui/utils": "^7.3.5",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
-    "@mui/x-charts": "8.22.0",
-    "@mui/x-charts-vendor": "8.22.0",
+    "@mui/x-charts": "8.22.1",
     "@mui/x-internal-gestures": "0.3.6",
     "@mui/x-internals": "8.22.0",
+    "@mui/x-charts-vendor": "8.22.0",
     "@mui/x-license": "8.22.0"
   },
   "peerDependencies": {