@mui/x-charts 8.22.0 → 8.22.1

package/PieChart/dataTransform/getModifiedArcProperties.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getModifiedArcProperties = getModifiedArcProperties;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _angleConversion = require("../../internals/angleConversion");
+/**
+ * Function that returns arc properties after applying transformation from highlight/fade states.
+ */
+function getModifiedArcProperties(seriesDef, seriesLayout, isHighlighted, isFaded) {
+  const {
+    faded,
+    highlighted,
+    paddingAngle: basePaddingAngle = 0,
+    cornerRadius: baseCornerRadius = 0
+  } = seriesDef;
+  const {
+    radius: {
+      inner: baseInnerRadius = 0,
+      label: baseArcLabelRadius,
+      outer: baseOuterRadius
+    }
+  } = seriesLayout;
+  const attributesOverride = (0, _extends2.default)({
+    additionalRadius: 0
+  }, isFaded && faded || isHighlighted && highlighted || {});
+  const paddingAngle = Math.max(0, (0, _angleConversion.deg2rad)(attributesOverride.paddingAngle ?? basePaddingAngle));
+  const innerRadius = Math.max(0, attributesOverride.innerRadius ?? baseInnerRadius);
+  const outerRadius = Math.max(0, attributesOverride.outerRadius ?? baseOuterRadius + attributesOverride.additionalRadius);
+  const cornerRadius = attributesOverride.cornerRadius ?? baseCornerRadius;
+  const arcLabelRadius = attributesOverride.arcLabelRadius ?? baseArcLabelRadius ?? (innerRadius + outerRadius) / 2;
+  return {
+    paddingAngle,
+    innerRadius,
+    outerRadius,
+    cornerRadius,
+    arcLabelRadius
+  };
+}

package/PieChart/dataTransform/useTransformData.js

@@ -11,18 +11,13 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _useItemHighlightedGetter = require("../../hooks/useItemHighlightedGetter");
 var _useIsItemFocusedGetter = require("../../hooks/useIsItemFocusedGetter");
-var _angleConversion = require("../../internals/angleConversion");
+var _getModifiedArcProperties = require("./getModifiedArcProperties");
 function useTransformData(series) {
   const {
     id: seriesId,
     data,
     faded,
-    highlighted,
-    paddingAngle: basePaddingAngle = 0,
-    innerRadius: baseInnerRadius = 0,
-    arcLabelRadius: baseArcLabelRadius,
-    outerRadius: baseOuterRadius,
-    cornerRadius: baseCornerRadius = 0
+    highlighted
   } = series;
   const {
     isFaded: isItemFaded,
@@ -41,25 +36,25 @@ function useTransformData(series) {
       seriesId,
       dataIndex: itemIndex
     });
+
+    // TODO v9: Replace the second argument with the result of useSeriesLayout
+    const arcSizes = (0, _getModifiedArcProperties.getModifiedArcProperties)(series, {
+      radius: {
+        inner: series.innerRadius ?? 0,
+        outer: series.outerRadius,
+        label: series.arcLabelRadius ?? 0,
+        available: 0
+      }
+    }, isHighlighted, isFaded);
     const attributesOverride = (0, _extends2.default)({
       additionalRadius: 0
     }, isFaded && faded || isHighlighted && highlighted || {});
-    const paddingAngle = Math.max(0, (0, _angleConversion.deg2rad)(attributesOverride.paddingAngle ?? basePaddingAngle));
-    const innerRadius = Math.max(0, attributesOverride.innerRadius ?? baseInnerRadius);
-    const outerRadius = Math.max(0, attributesOverride.outerRadius ?? baseOuterRadius + attributesOverride.additionalRadius);
-    const cornerRadius = attributesOverride.cornerRadius ?? baseCornerRadius;
-    const arcLabelRadius = attributesOverride.arcLabelRadius ?? baseArcLabelRadius ?? (innerRadius + outerRadius) / 2;
     return (0, _extends2.default)({}, item, attributesOverride, {
       dataIndex: itemIndex,
       isFaded,
       isHighlighted,
-      isFocused,
-      paddingAngle,
-      innerRadius,
-      outerRadius,
-      cornerRadius,
-      arcLabelRadius
-    });
-  }), [baseCornerRadius, baseInnerRadius, baseOuterRadius, basePaddingAngle, baseArcLabelRadius, data, faded, highlighted, isItemFaded, isItemHighlighted, isItemFocused, seriesId]);
+      isFocused
+    }, arcSizes);
+  }), [data, seriesId, isItemHighlighted, isItemFaded, isItemFocused, series, faded, highlighted]);
   return dataWithHighlight;
 }

package/PieChart/seriesConfig/tooltipPosition.js

@@ -5,46 +5,37 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _findMinMax = require("../../internals/findMinMax");
-var _getPercentageValue = require("../../internals/getPercentageValue");
-var _getPieCoordinates = require("../getPieCoordinates");
 const tooltipItemPositionGetter = params => {
   const {
     series,
-    drawingArea,
     identifier,
-    placement
+    placement,
+    seriesLayout
   } = params;
   if (!identifier || identifier.dataIndex === undefined) {
     return null;
   }
   const itemSeries = series.pie?.series[identifier.seriesId];
-  if (itemSeries == null) {
+  const layout = seriesLayout.pie?.[identifier.seriesId];
+  if (itemSeries == null || layout == null) {
     return null;
   }
   const {
-    cx,
-    cy,
-    availableRadius
-  } = (0, _getPieCoordinates.getPieCoordinates)({
-    cx: itemSeries.cx,
-    cy: itemSeries.cy
-  }, drawingArea);
+    center,
+    radius
+  } = layout;
   const {
-    data,
-    innerRadius: baseInnerRadius = 0,
-    outerRadius: baseOuterRadius
+    data
   } = itemSeries;
-  const innerRadius = Math.max(0, (0, _getPercentageValue.getPercentageValue)(baseInnerRadius ?? 0, availableRadius));
-  const outerRadius = Math.max(0, (0, _getPercentageValue.getPercentageValue)(baseOuterRadius ?? availableRadius, availableRadius));
   const dataItem = data[identifier.dataIndex];
   if (!dataItem) {
     return null;
   }
 
   // Compute the 4 corner points of the arc to get the bounding box.
-  const points = [[innerRadius, dataItem.startAngle], [innerRadius, dataItem.endAngle], [outerRadius, dataItem.startAngle], [outerRadius, dataItem.endAngle]].map(([radius, angle]) => ({
-    x: cx + radius * Math.sin(angle),
-    y: cy - radius * Math.cos(angle)
+  const points = [[radius.inner, dataItem.startAngle], [radius.inner, dataItem.endAngle], [radius.outer, dataItem.startAngle], [radius.outer, dataItem.endAngle]].map(([r, angle]) => ({
+    x: center.x + r * Math.sin(angle),
+    y: center.y - r * Math.cos(angle)
   }));
   const [x0, x1] = (0, _findMinMax.findMinMax)(points.map(p => p.x));
   const [y0, y1] = (0, _findMinMax.findMinMax)(points.map(p => p.y));

package/RadarChart/RadarAxis/useRadarAxis.js

@@ -12,7 +12,6 @@ var _useChartPolarAxis = require("../../internals/plugins/featurePlugins/useChar
 var _scaleGuards = require("../../internals/scaleGuards");
 var _degToRad = require("../../internals/degToRad");
 var _clampAngle = require("../../internals/clampAngle");
-var _useSelector = require("../../internals/store/useSelector");
 var _angleConversion = require("../../internals/angleConversion");
 /**
  * Returns an array with on item par metrics with the different point to label.
@@ -34,7 +33,7 @@ function useRadarAxis(params) {
   const {
     cx,
     cy
-  } = (0, _useSelector.useSelector)(store, _useChartPolarAxis.selectorChartPolarCenter);
+  } = store.use(_useChartPolarAxis.selectorChartPolarCenter);
   if (metric === undefined || !rotationScale || rotationScale.domain().length === 0) {
     return null;
   }

package/RadarChart/RadarAxisHighlight/useRadarAxisHighlight.js

@@ -7,7 +7,6 @@ exports.useRadarAxisHighlight = useRadarAxisHighlight;
 var _useAxis = require("../../hooks/useAxis");
 var _useRadarSeries = require("../../hooks/useRadarSeries");
 var _useScale = require("../../hooks/useScale");
-var _useSelector = require("../../internals/store/useSelector");
 var _useStore = require("../../internals/store/useStore");
 var _useChartContext = require("../../context/ChartProvider/useChartContext");
 var _useChartPolarAxis = require("../../internals/plugins/featurePlugins/useChartPolarAxis");
@@ -23,9 +22,9 @@ function useRadarAxisHighlight() {
     instance
   } = (0, _useChartContext.useChartContext)();
   const store = (0, _useStore.useStore)();
-  const rotationAxisIndex = (0, _useSelector.useSelector)(store, _useChartPolarInteraction.selectorChartsInteractionRotationAxisIndex);
-  const rotationAxisValue = (0, _useSelector.useSelector)(store, _useChartPolarInteraction.selectorChartsInteractionRotationAxisValue);
-  const center = (0, _useSelector.useSelector)(store, _useChartPolarAxis.selectorChartPolarCenter);
+  const rotationAxisIndex = store.use(_useChartPolarInteraction.selectorChartsInteractionRotationAxisIndex);
+  const rotationAxisValue = store.use(_useChartPolarInteraction.selectorChartsInteractionRotationAxisValue);
+  const center = store.use(_useChartPolarAxis.selectorChartPolarCenter);
   const highlightedIndex = rotationAxisIndex;
   if (!rotationScale) {
     return null;

package/RadarChart/RadarGrid/useRadarGridData.js

@@ -8,7 +8,6 @@ var _useScale = require("../../hooks/useScale");
 var _hooks = require("../../hooks");
 var _useChartPolarAxis = require("../../internals/plugins/featurePlugins/useChartPolarAxis");
 var _useChartContext = require("../../context/ChartProvider/useChartContext");
-var _useSelector = require("../../internals/store/useSelector");
 function useRadarGridData() {
   const {
     instance,
@@ -21,7 +20,7 @@ function useRadarGridData() {
   const {
     cx,
     cy
-  } = (0, _useSelector.useSelector)(store, _useChartPolarAxis.selectorChartPolarCenter);
+  } = store.use(_useChartPolarAxis.selectorChartPolarCenter);
   if (!rotationScale || rotationScale.domain().length === 0) {
     return null;
   }

package/RadarChart/RadarSeriesPlot/useRadarRotationIndex.js

@@ -9,7 +9,6 @@ var React = _interopRequireWildcard(require("react"));
 var _useChartPolarAxis = require("../../internals/plugins/featurePlugins/useChartPolarAxis");
 var _getSVGPoint = require("../../internals/getSVGPoint");
 var _coordinateTransformation = require("../../internals/plugins/featurePlugins/useChartPolarAxis/coordinateTransformation");
-var _useSelector = require("../../internals/store/useSelector");
 var _getAxisIndex = require("../../internals/plugins/featurePlugins/useChartPolarAxis/getAxisIndex");
 var _useStore = require("../../internals/store/useStore");
 var _useSvgRef = require("../../hooks/useSvgRef");
@@ -22,7 +21,7 @@ function useRadarRotationIndex() {
   const svgRef = (0, _useSvgRef.useSvgRef)();
   const store = (0, _useStore.useStore)();
   const rotationAxis = (0, _useAxis.useRotationAxis)();
-  const center = (0, _useSelector.useSelector)(store, _useChartPolarAxis.selectorChartPolarCenter);
+  const center = store.use(_useChartPolarAxis.selectorChartPolarCenter);
   const rotationIndexGetter = React.useCallback(function rotationIndexGetter(event) {
     const element = svgRef.current;
     if (!element || !rotationAxis) {

package/ScatterChart/BatchScatter.js

@@ -11,7 +11,6 @@ var _styles = require("@mui/material/styles");
 var _scatterClasses = require("./scatterClasses");
 var _ChartProvider = require("../context/ChartProvider");
 var _useScale = require("../hooks/useScale");
-var _useSelector = require("../internals/store/useSelector");
 var _useChartHighlight = require("../internals/plugins/featurePlugins/useChartHighlight");
 var _jsxRuntime = require("react/jsx-runtime");
 const MAX_POINTS_PER_PATH = 1000;
@@ -125,10 +124,10 @@ function BatchScatter(props) {
   const {
     store
   } = (0, _ChartProvider.useChartContext)();
-  const isSeriesHighlighted = (0, _useSelector.useSelector)(store, _useChartHighlight.selectorChartIsSeriesHighlighted, series.id);
-  const isSeriesFaded = (0, _useSelector.useSelector)(store, _useChartHighlight.selectorChartIsSeriesFaded, series.id);
-  const seriesHighlightedItem = (0, _useSelector.useSelector)(store, _useChartHighlight.selectorChartSeriesHighlightedItem, series.id);
-  const seriesUnfadedItem = (0, _useSelector.useSelector)(store, _useChartHighlight.selectorChartSeriesUnfadedItem, series.id);
+  const isSeriesHighlighted = store.use(_useChartHighlight.selectorChartIsSeriesHighlighted, series.id);
+  const isSeriesFaded = store.use(_useChartHighlight.selectorChartIsSeriesFaded, series.id);
+  const seriesHighlightedItem = store.use(_useChartHighlight.selectorChartSeriesHighlightedItem, series.id);
+  const seriesUnfadedItem = store.use(_useChartHighlight.selectorChartSeriesUnfadedItem, series.id);
   const highlightedModifier = 1.2;
   const markerSize = series.markerSize * (isSeriesHighlighted ? highlightedModifier : 1);
   const classes = (0, _scatterClasses.useUtilityClasses)(inClasses);

package/ScatterChart/Scatter.js

@@ -14,7 +14,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useSlotProps2 = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _useStore = require("../internals/store/useStore");
-var _useSelector = require("../internals/store/useSelector");
 var _useItemHighlightedGetter = require("../hooks/useItemHighlightedGetter");
 var _useChartClosestPoint = require("../internals/plugins/featurePlugins/useChartClosestPoint");
 var _ScatterMarker = require("./ScatterMarker");
@@ -48,7 +47,7 @@ function Scatter(props) {
     instance
   } = (0, _ChartProvider.useChartContext)();
   const store = (0, _useStore.useStore)();
-  const isVoronoiEnabled = (0, _useSelector.useSelector)(store, _useChartClosestPoint.selectorChartsIsVoronoiEnabled);
+  const isVoronoiEnabled = store.use(_useChartClosestPoint.selectorChartsIsVoronoiEnabled);
   const skipInteractionHandlers = isVoronoiEnabled || series.disableHover;
   const {
     isFaded,

package/esm/BarChart/BarLabel/BarLabel.types.d.ts

@@ -11,7 +11,7 @@ export interface BarLabelOwnerState {
   layout: 'vertical' | 'horizontal';
   classes?: Partial<BarLabelClasses>;
 }
-export type BarItem<V extends BarValueType | null = BarValueType | null> = {
+export type BarItem = {
   /**
    * The series id of the bar.
    */
@@ -23,7 +23,7 @@ export type BarItem<V extends BarValueType | null = BarValueType | null> = {
   /**
    * The value of the data point.
    */
-  value: V;
+  value: BarValueType | null;
 };
 export type BarLabelContext = {
   bar: {
@@ -39,4 +39,4 @@ export type BarLabelContext = {
     width: number;
   };
 };
-export type BarLabelFunction<V extends BarValueType | null = BarValueType | null> = (item: BarItem<V>, context: BarLabelContext) => string | null | undefined;
+export type BarLabelFunction = (item: BarItem, context: BarLabelContext) => string | null | undefined;

package/esm/BarChart/BarLabel/BarLabelItem.d.ts

@@ -67,7 +67,7 @@ export type BarLabelItemProps<V extends BarValueType | null> = Omit<BarLabelOwne
    * @param {BarLabelContext} context data about the bar.
    * @returns {string} The formatted label.
    */
-  barLabel?: 'value' | ((item: BarItem<V>, context: BarLabelContext) => string | null | undefined);
+  barLabel?: 'value' | ((item: BarItem, context: BarLabelContext) => string | null | undefined);
   /**
    * The placement of the bar label.
    * It controls whether the label is rendered in the center or outside the bar.

package/esm/BarChart/BarLabel/BarLabelPlot.d.ts

@@ -3,29 +3,29 @@ import { type BarLabelItemProps } from "./BarLabelItem.js";
 import type { SeriesId } from "../../models/seriesType/common.js";
 import { type BarSeriesType, type BarValueType } from "../../models/seriesType/bar.js";
 import { type BarLabelFunction } from "./BarLabel.types.js";
-interface BarLabelPlotProps<V extends BarValueType | null = BarValueType | null> {
-  processedSeries: ProcessedBarLabelSeriesData<V>;
+interface BarLabelPlotProps {
+  processedSeries: ProcessedBarLabelSeriesData;
   className: string;
   skipAnimation?: boolean;
-  barLabel?: BarLabelItemProps<V | null>['barLabel'];
+  barLabel?: BarLabelItemProps<BarValueType | null>['barLabel'];
 }
-export interface ProcessedBarLabelSeriesData<V extends BarValueType | null> {
+export interface ProcessedBarLabelSeriesData {
   seriesId: SeriesId;
-  data: ProcessedBarLabelData<V>[];
-  barLabel?: 'value' | BarLabelFunction<V>;
+  data: ProcessedBarLabelData[];
+  barLabel?: 'value' | BarLabelFunction;
   barLabelPlacement?: BarSeriesType['barLabelPlacement'];
   layout?: 'vertical' | 'horizontal';
   xOrigin: number;
   yOrigin: number;
 }
-export interface ProcessedBarLabelData<V extends BarValueType | null> extends AnimationData {
+export interface ProcessedBarLabelData extends AnimationData {
   seriesId: SeriesId;
   dataIndex: number;
   color: string;
-  value: V;
+  value: BarValueType | null;
 }
 /**
  * @ignore - internal component.
  */
-declare function BarLabelPlot<V extends BarValueType | null = BarValueType | null>(props: BarLabelPlotProps<V>): import("react/jsx-runtime").JSX.Element | null;
+declare function BarLabelPlot(props: BarLabelPlotProps): import("react/jsx-runtime").JSX.Element | null;
 export { BarLabelPlot };

package/esm/BarChart/BarLabel/getBarLabel.d.ts

@@ -1,9 +1,9 @@
 import { type SeriesId } from "../../models/seriesType/common.js";
 import { type BarLabelFunction } from "./BarLabel.types.js";
 import { type BarValueType } from "../../models/seriesType/bar.js";
-export declare function getBarLabel<V extends BarValueType | null = BarValueType | null>(options: {
-  barLabel: 'value' | BarLabelFunction<V>;
-  value: V;
+export declare function getBarLabel(options: {
+  barLabel: 'value' | BarLabelFunction;
+  value: BarValueType | null;
   dataIndex: number;
   seriesId: SeriesId;
   height: number;

package/esm/BarChart/seriesConfig/bar/getSeriesWithDefaultValues.d.ts

@@ -1,5 +1,22 @@
 import { type AllSeriesType } from "../../../models/seriesType/index.js";
-export declare function getSeriesWithDefaultValues<T extends 'bar'>(seriesData: AllSeriesType<T>, seriesIndex: number, colors: readonly string[]): AllSeriesType<T> & {
+export declare function getSeriesWithDefaultValues(seriesData: AllSeriesType<'bar'>, seriesIndex: number, colors: readonly string[]): {
   id: import("../../../index.js").SeriesId;
   color: string;
+  type: "bar";
+  data?: ReadonlyArray<import("../../../index.js").BarValueType | null>;
+  dataKey?: string;
+  label?: string | ((location: "tooltip" | "legend") => string);
+  layout?: "horizontal" | "vertical";
+  stackOffset?: import("../../../index.js").StackOffsetType;
+  minBarSize?: number;
+  barLabel?: "value" | ((item: import("../../index.js").BarItem, context: import("../../index.js").BarLabelContext) => string | null | undefined);
+  barLabelPlacement?: "center" | "outside";
+  valueFormatter?: import("../../../internals/index.js").SeriesValueFormatter<number | null> | undefined;
+  highlightScope?: import("../../../index.js").HighlightScope;
+  labelMarkType?: import("../../../internals/index.js").ChartsLabelMarkType;
+  colorGetter?: ((data: import("../../../internals/index.js").ColorCallbackValue<number | null>) => string) | undefined;
+  xAxisId?: import("../../../internals/index.js").AxisId;
+  yAxisId?: import("../../../internals/index.js").AxisId;
+  stack?: string;
+  stackOrder?: import("../../../index.js").StackOrderType;
 };

package/esm/ChartsAxisHighlight/ChartsXAxisHighlight.js

@@ -3,7 +3,6 @@
 import * as React from 'react';
 import { getValueToPositionMapper } from "../hooks/useScale.js";
 import { isOrdinalScale } from "../internals/scaleGuards.js";
-import { useSelector } from "../internals/store/useSelector.js";
 import { useStore } from "../internals/store/useStore.js";
 import { selectorChartsHighlightXAxisValue, selectorChartXAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
 import { useDrawingArea } from "../hooks/index.js";
@@ -22,8 +21,8 @@ export default function ChartsXHighlight(props) {
     height
   } = useDrawingArea();
   const store = useStore();
-  const axisXValues = useSelector(store, selectorChartsHighlightXAxisValue);
-  const xAxes = useSelector(store, selectorChartXAxis);
+  const axisXValues = store.use(selectorChartsHighlightXAxisValue);
+  const xAxes = store.use(selectorChartXAxis);
   if (axisXValues.length === 0) {
     return null;
   }

package/esm/ChartsAxisHighlight/ChartsYAxisHighlight.js

@@ -3,7 +3,6 @@
 import * as React from 'react';
 import { getValueToPositionMapper } from "../hooks/useScale.js";
 import { isOrdinalScale } from "../internals/scaleGuards.js";
-import { useSelector } from "../internals/store/useSelector.js";
 import { useStore } from "../internals/store/useStore.js";
 import { selectorChartsHighlightYAxisValue, selectorChartYAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
 import { useDrawingArea } from "../hooks/index.js";
@@ -22,8 +21,8 @@ export default function ChartsYHighlight(props) {
     width
   } = useDrawingArea();
   const store = useStore();
-  const axisYValues = useSelector(store, selectorChartsHighlightYAxisValue);
-  const yAxes = useSelector(store, selectorChartYAxis);
+  const axisYValues = store.use(selectorChartsHighlightYAxisValue);
+  const yAxes = store.use(selectorChartYAxis);
   if (axisYValues.length === 0) {
     return null;
   }

package/esm/ChartsBrushOverlay/ChartsBrushOverlay.js

@@ -7,7 +7,6 @@ import { useTheme } from '@mui/material/styles';
 import { brushOverlayClasses } from "./ChartsBrushOverlay.classes.js";
 import { selectorChartDrawingArea } from "../internals/plugins/corePlugins/useChartDimensions/index.js";
 import { selectorBrushStartX, selectorBrushStartY, selectorBrushCurrentX, selectorBrushCurrentY, selectorBrushConfig } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
-import { useSelector } from "../internals/store/useSelector.js";
 import { useStore } from "../internals/store/useStore.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function BrushRect(props) {
@@ -23,13 +22,13 @@ function BrushRect(props) {
  */
 export function ChartsBrushOverlay(props) {
   const store = useStore();
-  const drawingArea = useSelector(store, selectorChartDrawingArea);
+  const drawingArea = store.use(selectorChartDrawingArea);
   const theme = useTheme();
-  const brushStartX = useSelector(store, selectorBrushStartX);
-  const brushStartY = useSelector(store, selectorBrushStartY);
-  const brushCurrentX = useSelector(store, selectorBrushCurrentX);
-  const brushCurrentY = useSelector(store, selectorBrushCurrentY);
-  const brushConfig = useSelector(store, selectorBrushConfig);
+  const brushStartX = store.use(selectorBrushStartX);
+  const brushStartY = store.use(selectorBrushStartY);
+  const brushCurrentX = store.use(selectorBrushCurrentX);
+  const brushCurrentY = store.use(selectorBrushCurrentY);
+  const brushConfig = store.use(selectorBrushConfig);
   if (brushStartX === null || brushStartY === null || brushCurrentX === null || brushCurrentY === null) {
     return null;
   }

package/esm/ChartsSurface/ChartsSurface.js

@@ -10,7 +10,6 @@ import useForkRef from '@mui/utils/useForkRef';
 import clsx from 'clsx';
 import { ChartsAxesGradients } from "../internals/components/ChartsAxesGradients/index.js";
 import { useSvgRef } from "../hooks/useSvgRef.js";
-import { useSelector } from "../internals/store/useSelector.js";
 import { useStore } from "../internals/store/useStore.js";
 import { selectorChartPropsHeight, selectorChartPropsWidth, selectorChartSvgWidth, selectorChartSvgHeight } from "../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors.js";
 import { selectorChartsHasFocusedItem, selectorChartsIsKeyboardNavigationEnabled } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
@@ -57,13 +56,13 @@ const ChartsSurfaceStyles = styled('svg', {
  */
 const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(inProps, ref) {
   const store = useStore();
-  const svgWidth = useSelector(store, selectorChartSvgWidth);
-  const svgHeight = useSelector(store, selectorChartSvgHeight);
-  const propsWidth = useSelector(store, selectorChartPropsWidth);
-  const propsHeight = useSelector(store, selectorChartPropsHeight);
-  const isKeyboardNavigationEnabled = useSelector(store, selectorChartsIsKeyboardNavigationEnabled);
-  const hasFocusedItem = useSelector(store, selectorChartsHasFocusedItem);
-  const hasZoom = useSelector(store, selectorChartHasZoom);
+  const svgWidth = store.use(selectorChartSvgWidth);
+  const svgHeight = store.use(selectorChartSvgHeight);
+  const propsWidth = store.use(selectorChartPropsWidth);
+  const propsHeight = store.use(selectorChartPropsHeight);
+  const isKeyboardNavigationEnabled = store.use(selectorChartsIsKeyboardNavigationEnabled);
+  const hasFocusedItem = store.use(selectorChartsHasFocusedItem);
+  const hasZoom = store.use(selectorChartHasZoom);
   const svgRef = useSvgRef();
   const handleRef = useForkRef(svgRef, ref);
   const themeProps = useThemeProps({

package/esm/ChartsTooltip/ChartsTooltipContainer.js

@@ -13,7 +13,6 @@ import NoSsr from '@mui/material/NoSsr';
 import { rafThrottle } from '@mui/x-internals/rafThrottle';
 import { useIsFineMainPointer, usePointerType } from "./utils.js";
 import { useUtilityClasses } from "./chartsTooltipClasses.js";
-import { useSelector } from "../internals/store/useSelector.js";
 import { useStore } from "../internals/store/useStore.js";
 import { selectorChartsLastInteraction } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 import { selectorChartsTooltipItemIsDefined, selectorChartsTooltipItemPosition } from "../internals/plugins/featurePlugins/useChartTooltip/index.js";
@@ -83,11 +82,11 @@ function ChartsTooltipContainer(inProps) {
   }));
   const axisSystem = useAxisSystem();
   const store = useStore();
-  const shouldPreventBecauseOfBrush = useSelector(store, selectorBrushShouldPreventTooltip);
-  const isOpen = useSelector(store, getIsOpenSelector(trigger, axisSystem, shouldPreventBecauseOfBrush));
-  const lastInteraction = useSelector(store, selectorChartsLastInteraction);
+  const shouldPreventBecauseOfBrush = store.use(selectorBrushShouldPreventTooltip);
+  const isOpen = store.use(getIsOpenSelector(trigger, axisSystem, shouldPreventBecauseOfBrush));
+  const lastInteraction = store.use(selectorChartsLastInteraction);
   const computedAnchor = lastInteraction === 'keyboard' ? 'node' : anchor;
-  const itemPosition = useSelector(store, trigger === 'item' && computedAnchor === 'node' ? selectorChartsTooltipItemPosition : selectorReturnNull, position);
+  const itemPosition = store.use(trigger === 'item' && computedAnchor === 'node' ? selectorChartsTooltipItemPosition : selectorReturnNull, position);
   React.useEffect(() => {
     const svgElement = svgRef.current;
     if (svgElement === null) {

package/esm/ChartsTooltip/useAxisTooltip.js

@@ -3,7 +3,6 @@
 import { useSeries } from "../hooks/useSeries.js";
 import { useColorProcessor } from "../internals/plugins/corePlugins/useChartSeries/useColorProcessor.js";
 import { useStore } from "../internals/store/useStore.js";
-import { useSelector } from "../internals/store/useSelector.js";
 import { getLabel } from "../internals/getLabel.js";
 import { isCartesianSeriesType } from "../internals/isCartesian.js";
 import { utcFormatter } from "./utils.js";
@@ -43,9 +42,9 @@ export function useAxisTooltip(params = {}) {
   const defaultYAxis = useYAxis();
   const defaultRotationAxis = useRotationAxis();
   const store = useStore();
-  const tooltipXAxes = useSelector(store, selectorChartsInteractionTooltipXAxes);
-  const tooltipYAxes = useSelector(store, selectorChartsInteractionTooltipYAxes);
-  const tooltipRotationAxes = useSelector(store, selectorChartsInteractionTooltipRotationAxes);
+  const tooltipXAxes = store.use(selectorChartsInteractionTooltipXAxes);
+  const tooltipYAxes = store.use(selectorChartsInteractionTooltipYAxes);
+  const tooltipRotationAxes = store.use(selectorChartsInteractionTooltipRotationAxes);
   const series = useSeries();
   const {
     xAxis

package/esm/ChartsTooltip/useItemTooltip.js

@@ -2,7 +2,6 @@
 
 import { useSeries } from "../hooks/useSeries.js";
 import { selectorChartsTooltipItem } from "../internals/plugins/featurePlugins/useChartTooltip/index.js";
-import { useSelector } from "../internals/store/useSelector.js";
 import { useStore } from "../internals/store/useStore.js";
 import { useRotationAxes, useXAxes, useYAxes } from "../hooks/useAxis.js";
 import { useZAxes } from "../hooks/useZAxis.js";
@@ -10,8 +9,8 @@ import { selectorChartSeriesConfig } from "../internals/plugins/corePlugins/useC
 import { isCartesianSeries } from "../internals/isCartesian.js";
 export function useInternalItemTooltip() {
   const store = useStore();
-  const identifier = useSelector(store, selectorChartsTooltipItem);
-  const seriesConfig = useSelector(store, selectorChartSeriesConfig);
+  const identifier = store.use(selectorChartsTooltipItem);
+  const seriesConfig = store.use(selectorChartSeriesConfig);
   const series = useSeries();
   const {
     xAxis,

package/esm/ChartsWrapper/ChartsWrapper.js

@@ -4,7 +4,6 @@ import { styled } from '@mui/material/styles';
 import { shouldForwardProp } from '@mui/system/createStyled';
 import { useChartRootRef } from "../hooks/useChartRootRef.js";
 import { useStore } from "../internals/store/useStore.js";
-import { useSelector } from "../internals/store/useSelector.js";
 import { selectorChartPropsHeight, selectorChartPropsWidth } from "../internals/plugins/corePlugins/useChartDimensions/index.js";
 import { chartsToolbarClasses } from "../Toolbar/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -117,8 +116,8 @@ function ChartsWrapper(props) {
   } = props;
   const chartRootRef = useChartRootRef();
   const store = useStore();
-  const propsWidth = useSelector(store, selectorChartPropsWidth);
-  const propsHeight = useSelector(store, selectorChartPropsHeight);
+  const propsWidth = store.use(selectorChartPropsWidth);
+  const propsHeight = store.use(selectorChartPropsHeight);
   return /*#__PURE__*/_jsx(Root, {
     ref: chartRootRef,
     ownerState: props,

package/esm/LineChart/LineHighlightPlot.js

@@ -6,7 +6,6 @@ const _excluded = ["slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useStore } from "../internals/store/useStore.js";
-import { useSelector } from "../internals/store/useSelector.js";
 import { LineHighlightElement } from "./LineHighlightElement.js";
 import { getValueToPositionMapper } from "../hooks/useScale.js";
 import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
@@ -45,7 +44,7 @@ function LineHighlightPlot(props) {
     instance
   } = useChartContext();
   const store = useStore();
-  const highlightedIndexes = useSelector(store, selectorChartsHighlightXAxisIndex);
+  const highlightedIndexes = store.use(selectorChartsHighlightXAxisIndex);
   if (highlightedIndexes.length === 0) {
     return null;
   }

package/esm/LineChart/MarkPlot.js

@@ -11,7 +11,6 @@ import { MarkElement } from "./MarkElement.js";
 import { useItemHighlightedGetter, useXAxes, useYAxes } from "../hooks/index.js";
 import { useInternalIsZoomInteracting } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting.js";
 import { selectorChartsHighlightXAxisIndex } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
-import { useSelector } from "../internals/store/useSelector.js";
 import { useChartContext } from "../context/ChartProvider/index.js";
 import { useMarkPlotData } from "./useMarkPlotData.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -48,7 +47,7 @@ function MarkPlot(props) {
     isFaded,
     isHighlighted
   } = useItemHighlightedGetter();
-  const xAxisHighlightIndexes = useSelector(store, selectorChartsHighlightXAxisIndex);
+  const xAxisHighlightIndexes = store.use(selectorChartsHighlightXAxisIndex);
   const highlightedItems = React.useMemo(() => {
     const rep = {};
     for (const {

package/esm/PieChart/FocusedPieArc.d.ts

@@ -0,0 +1,2 @@
+import { type PieArcProps } from "./PieArc.js";
+export declare function FocusedPieArc(props: Partial<Omit<PieArcProps, 'startAngle' | 'endAngle' | 'id' | 'dataIndex' | 'isFaded' | 'isHighlighted' | 'isFocused'>>): import("react/jsx-runtime").JSX.Element | null;