@mui/x-charts 8.22.0 → 8.22.1

package/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/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/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/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/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/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/ChartsAxisHighlight/ChartsXAxisHighlight.js

@@ -9,7 +9,6 @@ exports.default = ChartsXHighlight;
 var React = _interopRequireWildcard(require("react"));
 var _useScale = require("../hooks/useScale");
 var _scaleGuards = require("../internals/scaleGuards");
-var _useSelector = require("../internals/store/useSelector");
 var _useStore = require("../internals/store/useStore");
 var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
 var _hooks = require("../hooks");
@@ -28,8 +27,8 @@ function ChartsXHighlight(props) {
     height
   } = (0, _hooks.useDrawingArea)();
   const store = (0, _useStore.useStore)();
-  const axisXValues = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartsHighlightXAxisValue);
-  const xAxes = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartXAxis);
+  const axisXValues = store.use(_useChartCartesianAxis.selectorChartsHighlightXAxisValue);
+  const xAxes = store.use(_useChartCartesianAxis.selectorChartXAxis);
   if (axisXValues.length === 0) {
     return null;
   }

package/ChartsAxisHighlight/ChartsYAxisHighlight.js

@@ -9,7 +9,6 @@ exports.default = ChartsYHighlight;
 var React = _interopRequireWildcard(require("react"));
 var _useScale = require("../hooks/useScale");
 var _scaleGuards = require("../internals/scaleGuards");
-var _useSelector = require("../internals/store/useSelector");
 var _useStore = require("../internals/store/useStore");
 var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
 var _hooks = require("../hooks");
@@ -28,8 +27,8 @@ function ChartsYHighlight(props) {
     width
   } = (0, _hooks.useDrawingArea)();
   const store = (0, _useStore.useStore)();
-  const axisYValues = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartsHighlightYAxisValue);
-  const yAxes = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartYAxis);
+  const axisYValues = store.use(_useChartCartesianAxis.selectorChartsHighlightYAxisValue);
+  const yAxes = store.use(_useChartCartesianAxis.selectorChartYAxis);
   if (axisYValues.length === 0) {
     return null;
   }

package/ChartsBrushOverlay/ChartsBrushOverlay.js

@@ -14,7 +14,6 @@ var _styles = require("@mui/material/styles");
 var _ChartsBrushOverlay = require("./ChartsBrushOverlay.classes");
 var _useChartDimensions = require("../internals/plugins/corePlugins/useChartDimensions");
 var _useChartBrush = require("../internals/plugins/featurePlugins/useChartBrush");
-var _useSelector = require("../internals/store/useSelector");
 var _useStore = require("../internals/store/useStore");
 var _jsxRuntime = require("react/jsx-runtime");
 function BrushRect(props) {
@@ -30,13 +29,13 @@ function BrushRect(props) {
  */
 function ChartsBrushOverlay(props) {
   const store = (0, _useStore.useStore)();
-  const drawingArea = (0, _useSelector.useSelector)(store, _useChartDimensions.selectorChartDrawingArea);
+  const drawingArea = store.use(_useChartDimensions.selectorChartDrawingArea);
   const theme = (0, _styles.useTheme)();
-  const brushStartX = (0, _useSelector.useSelector)(store, _useChartBrush.selectorBrushStartX);
-  const brushStartY = (0, _useSelector.useSelector)(store, _useChartBrush.selectorBrushStartY);
-  const brushCurrentX = (0, _useSelector.useSelector)(store, _useChartBrush.selectorBrushCurrentX);
-  const brushCurrentY = (0, _useSelector.useSelector)(store, _useChartBrush.selectorBrushCurrentY);
-  const brushConfig = (0, _useSelector.useSelector)(store, _useChartBrush.selectorBrushConfig);
+  const brushStartX = store.use(_useChartBrush.selectorBrushStartX);
+  const brushStartY = store.use(_useChartBrush.selectorBrushStartY);
+  const brushCurrentX = store.use(_useChartBrush.selectorBrushCurrentX);
+  const brushCurrentY = store.use(_useChartBrush.selectorBrushCurrentY);
+  const brushConfig = store.use(_useChartBrush.selectorBrushConfig);
   if (brushStartX === null || brushStartY === null || brushCurrentX === null || brushCurrentY === null) {
     return null;
   }

package/ChartsSurface/ChartsSurface.js

@@ -16,7 +16,6 @@ var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _ChartsAxesGradients = require("../internals/components/ChartsAxesGradients");
 var _useSvgRef = require("../hooks/useSvgRef");
-var _useSelector = require("../internals/store/useSelector");
 var _useStore = require("../internals/store/useStore");
 var _useChartDimensions = require("../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors");
 var _useChartKeyboardNavigation = require("../internals/plugins/featurePlugins/useChartKeyboardNavigation");
@@ -64,13 +63,13 @@ const ChartsSurfaceStyles = (0, _styles.styled)('svg', {
  */
 const ChartsSurface = exports.ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(inProps, ref) {
   const store = (0, _useStore.useStore)();
-  const svgWidth = (0, _useSelector.useSelector)(store, _useChartDimensions.selectorChartSvgWidth);
-  const svgHeight = (0, _useSelector.useSelector)(store, _useChartDimensions.selectorChartSvgHeight);
-  const propsWidth = (0, _useSelector.useSelector)(store, _useChartDimensions.selectorChartPropsWidth);
-  const propsHeight = (0, _useSelector.useSelector)(store, _useChartDimensions.selectorChartPropsHeight);
-  const isKeyboardNavigationEnabled = (0, _useSelector.useSelector)(store, _useChartKeyboardNavigation.selectorChartsIsKeyboardNavigationEnabled);
-  const hasFocusedItem = (0, _useSelector.useSelector)(store, _useChartKeyboardNavigation.selectorChartsHasFocusedItem);
-  const hasZoom = (0, _useSelector.useSelector)(store, _useChartCartesianAxisRendering.selectorChartHasZoom);
+  const svgWidth = store.use(_useChartDimensions.selectorChartSvgWidth);
+  const svgHeight = store.use(_useChartDimensions.selectorChartSvgHeight);
+  const propsWidth = store.use(_useChartDimensions.selectorChartPropsWidth);
+  const propsHeight = store.use(_useChartDimensions.selectorChartPropsHeight);
+  const isKeyboardNavigationEnabled = store.use(_useChartKeyboardNavigation.selectorChartsIsKeyboardNavigationEnabled);
+  const hasFocusedItem = store.use(_useChartKeyboardNavigation.selectorChartsHasFocusedItem);
+  const hasZoom = store.use(_useChartCartesianAxisRendering.selectorChartHasZoom);
   const svgRef = (0, _useSvgRef.useSvgRef)();
   const handleRef = (0, _useForkRef.default)(svgRef, ref);
   const themeProps = (0, _styles.useThemeProps)({

package/ChartsTooltip/ChartsTooltipContainer.js

@@ -19,7 +19,6 @@ var _NoSsr = _interopRequireDefault(require("@mui/material/NoSsr"));
 var _rafThrottle = require("@mui/x-internals/rafThrottle");
 var _utils = require("./utils");
 var _chartsTooltipClasses = require("./chartsTooltipClasses");
-var _useSelector = require("../internals/store/useSelector");
 var _useStore = require("../internals/store/useStore");
 var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
 var _useChartTooltip = require("../internals/plugins/featurePlugins/useChartTooltip");
@@ -90,11 +89,11 @@ function ChartsTooltipContainer(inProps) {
   }));
   const axisSystem = (0, _useAxisSystem.useAxisSystem)();
   const store = (0, _useStore.useStore)();
-  const shouldPreventBecauseOfBrush = (0, _useSelector.useSelector)(store, _useChartBrush.selectorBrushShouldPreventTooltip);
-  const isOpen = (0, _useSelector.useSelector)(store, getIsOpenSelector(trigger, axisSystem, shouldPreventBecauseOfBrush));
-  const lastInteraction = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsLastInteraction);
+  const shouldPreventBecauseOfBrush = store.use(_useChartBrush.selectorBrushShouldPreventTooltip);
+  const isOpen = store.use(getIsOpenSelector(trigger, axisSystem, shouldPreventBecauseOfBrush));
+  const lastInteraction = store.use(_useChartInteraction.selectorChartsLastInteraction);
   const computedAnchor = lastInteraction === 'keyboard' ? 'node' : anchor;
-  const itemPosition = (0, _useSelector.useSelector)(store, trigger === 'item' && computedAnchor === 'node' ? _useChartTooltip.selectorChartsTooltipItemPosition : selectorReturnNull, position);
+  const itemPosition = store.use(trigger === 'item' && computedAnchor === 'node' ? _useChartTooltip.selectorChartsTooltipItemPosition : selectorReturnNull, position);
   React.useEffect(() => {
     const svgElement = svgRef.current;
     if (svgElement === null) {

package/ChartsTooltip/useAxisTooltip.js

@@ -8,7 +8,6 @@ exports.useAxisTooltip = useAxisTooltip;
 var _useSeries = require("../hooks/useSeries");
 var _useColorProcessor = require("../internals/plugins/corePlugins/useChartSeries/useColorProcessor");
 var _useStore = require("../internals/store/useStore");
-var _useSelector = require("../internals/store/useSelector");
 var _getLabel = require("../internals/getLabel");
 var _isCartesian = require("../internals/isCartesian");
 var _utils = require("./utils");
@@ -48,9 +47,9 @@ function useAxisTooltip(params = {}) {
   const defaultYAxis = (0, _useAxis.useYAxis)();
   const defaultRotationAxis = (0, _useAxis.useRotationAxis)();
   const store = (0, _useStore.useStore)();
-  const tooltipXAxes = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartsInteractionTooltipXAxes);
-  const tooltipYAxes = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartsInteractionTooltipYAxes);
-  const tooltipRotationAxes = (0, _useSelector.useSelector)(store, _useChartPolarInteraction.selectorChartsInteractionTooltipRotationAxes);
+  const tooltipXAxes = store.use(_useChartCartesianAxis.selectorChartsInteractionTooltipXAxes);
+  const tooltipYAxes = store.use(_useChartCartesianAxis.selectorChartsInteractionTooltipYAxes);
+  const tooltipRotationAxes = store.use(_useChartPolarInteraction.selectorChartsInteractionTooltipRotationAxes);
   const series = (0, _useSeries.useSeries)();
   const {
     xAxis

package/ChartsTooltip/useItemTooltip.js

@@ -8,7 +8,6 @@ exports.useInternalItemTooltip = useInternalItemTooltip;
 exports.useRadarItemTooltip = exports.useItemTooltip = void 0;
 var _useSeries = require("../hooks/useSeries");
 var _useChartTooltip = require("../internals/plugins/featurePlugins/useChartTooltip");
-var _useSelector = require("../internals/store/useSelector");
 var _useStore = require("../internals/store/useStore");
 var _useAxis = require("../hooks/useAxis");
 var _useZAxis = require("../hooks/useZAxis");
@@ -16,8 +15,8 @@ var _useChartSeries = require("../internals/plugins/corePlugins/useChartSeries/u
 var _isCartesian = require("../internals/isCartesian");
 function useInternalItemTooltip() {
   const store = (0, _useStore.useStore)();
-  const identifier = (0, _useSelector.useSelector)(store, _useChartTooltip.selectorChartsTooltipItem);
-  const seriesConfig = (0, _useSelector.useSelector)(store, _useChartSeries.selectorChartSeriesConfig);
+  const identifier = store.use(_useChartTooltip.selectorChartsTooltipItem);
+  const seriesConfig = store.use(_useChartSeries.selectorChartSeriesConfig);
   const series = (0, _useSeries.useSeries)();
   const {
     xAxis,

package/ChartsWrapper/ChartsWrapper.js

@@ -12,7 +12,6 @@ var _styles = require("@mui/material/styles");
 var _createStyled = require("@mui/system/createStyled");
 var _useChartRootRef = require("../hooks/useChartRootRef");
 var _useStore = require("../internals/store/useStore");
-var _useSelector = require("../internals/store/useSelector");
 var _useChartDimensions = require("../internals/plugins/corePlugins/useChartDimensions");
 var _Toolbar = require("../Toolbar");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -125,8 +124,8 @@ function ChartsWrapper(props) {
   } = props;
   const chartRootRef = (0, _useChartRootRef.useChartRootRef)();
   const store = (0, _useStore.useStore)();
-  const propsWidth = (0, _useSelector.useSelector)(store, _useChartDimensions.selectorChartPropsWidth);
-  const propsHeight = (0, _useSelector.useSelector)(store, _useChartDimensions.selectorChartPropsHeight);
+  const propsWidth = store.use(_useChartDimensions.selectorChartPropsWidth);
+  const propsHeight = store.use(_useChartDimensions.selectorChartPropsHeight);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
     ref: chartRootRef,
     ownerState: props,

package/LineChart/LineHighlightPlot.js

@@ -12,7 +12,6 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useStore = require("../internals/store/useStore");
-var _useSelector = require("../internals/store/useSelector");
 var _LineHighlightElement = require("./LineHighlightElement");
 var _useScale = require("../hooks/useScale");
 var _constants = require("../constants");
@@ -52,7 +51,7 @@ function LineHighlightPlot(props) {
     instance
   } = (0, _ChartProvider.useChartContext)();
   const store = (0, _useStore.useStore)();
-  const highlightedIndexes = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartsHighlightXAxisIndex);
+  const highlightedIndexes = store.use(_useChartCartesianAxis.selectorChartsHighlightXAxisIndex);
   if (highlightedIndexes.length === 0) {
     return null;
   }

package/LineChart/MarkPlot.js

@@ -17,7 +17,6 @@ var _MarkElement = require("./MarkElement");
 var _hooks = require("../hooks");
 var _useInternalIsZoomInteracting = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting");
 var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
-var _useSelector = require("../internals/store/useSelector");
 var _ChartProvider = require("../context/ChartProvider");
 var _useMarkPlotData = require("./useMarkPlotData");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -55,7 +54,7 @@ function MarkPlot(props) {
     isFaded,
     isHighlighted
   } = (0, _hooks.useItemHighlightedGetter)();
-  const xAxisHighlightIndexes = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartsHighlightXAxisIndex);
+  const xAxisHighlightIndexes = store.use(_useChartCartesianAxis.selectorChartsHighlightXAxisIndex);
   const highlightedItems = React.useMemo(() => {
     const rep = {};
     for (const {

package/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;

package/PieChart/FocusedPieArc.js

@@ -0,0 +1,58 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FocusedPieArc = FocusedPieArc;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _styles = require("@mui/material/styles");
+var _useFocusedItem = require("../hooks/useFocusedItem");
+var _usePieSeries = require("../hooks/usePieSeries");
+var _PieArc = require("./PieArc");
+var _useItemHighlighted = require("../hooks/useItemHighlighted");
+var _getModifiedArcProperties = require("./dataTransform/getModifiedArcProperties");
+var _jsxRuntime = require("react/jsx-runtime");
+function FocusedPieArc(props) {
+  const theme = (0, _styles.useTheme)();
+  const focusedItem = (0, _useFocusedItem.useFocusedItem)();
+  const pieSeriesLayout = (0, _usePieSeries.usePieSeriesLayout)();
+  const {
+    isHighlighted,
+    isFaded
+  } = (0, _useItemHighlighted.useItemHighlighted)(focusedItem);
+  const pieSeries = (0, _usePieSeries.usePieSeriesContext)();
+  if (focusedItem === null || focusedItem.seriesType !== 'pie' || !pieSeries) {
+    return null;
+  }
+  const series = pieSeries?.series[focusedItem.seriesId];
+  const {
+    center,
+    radius
+  } = pieSeriesLayout[focusedItem.seriesId];
+  if (!series || !center || !radius) {
+    return null;
+  }
+  const item = series.data[focusedItem.dataIndex];
+  const arcSizes = (0, _getModifiedArcProperties.getModifiedArcProperties)(series, pieSeriesLayout[focusedItem.seriesId], isHighlighted, isFaded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PieArc.PieArc, (0, _extends2.default)({
+    transform: `translate(${pieSeriesLayout[series.id].center.x}, ${pieSeriesLayout[series.id].center.y})`,
+    startAngle: item.startAngle,
+    endAngle: item.endAngle,
+    color: "transparent",
+    pointerEvents: "none",
+    skipInteraction: true,
+    skipAnimation: true,
+    stroke: (theme.vars ?? theme).palette.text.primary,
+    id: series.id,
+    className: _PieArc.pieArcClasses.focusIndicator,
+    dataIndex: focusedItem.dataIndex,
+    isFaded: false,
+    isHighlighted: false,
+    isFocused: false,
+    strokeWidth: 3
+  }, arcSizes, props));
+}

package/PieChart/PieArcPlot.js

@@ -11,8 +11,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styles = require("@mui/material/styles");
-var _useFocusedItem = require("../hooks/useFocusedItem");
 var _PieArc = require("./PieArc");
 var _useTransformData = require("./dataTransform/useTransformData");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -35,7 +33,6 @@ function PieArcPlot(props) {
       skipAnimation
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const theme = (0, _styles.useTheme)();
   const transformedData = (0, _useTransformData.useTransformData)({
     innerRadius,
     outerRadius,
@@ -46,18 +43,12 @@ function PieArcPlot(props) {
     faded,
     data
   });
-  const {
-    dataIndex,
-    seriesId,
-    seriesType
-  } = (0, _useFocusedItem.useFocusedItem)() ?? {};
-  const focusedItem = dataIndex !== undefined && seriesId === id && seriesType === 'pie' ? transformedData[dataIndex] : null;
   if (data.length === 0) {
     return null;
   }
   const Arc = slots?.pieArc ?? _PieArc.PieArc;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, other, {
-    children: [transformedData.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Arc, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", (0, _extends2.default)({}, other, {
+    children: transformedData.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Arc, (0, _extends2.default)({
       startAngle: item.startAngle,
       endAngle: item.endAngle,
       paddingAngle: item.paddingAngle,
@@ -78,26 +69,7 @@ function PieArcPlot(props) {
           dataIndex: index
         }, item);
       })
-    }, slotProps?.pieArc), item.dataIndex)), focusedItem && /*#__PURE__*/(0, _jsxRuntime.jsx)(Arc, {
-      startAngle: focusedItem.startAngle,
-      endAngle: focusedItem.endAngle,
-      paddingAngle: focusedItem.paddingAngle,
-      innerRadius: focusedItem.innerRadius,
-      color: "transparent",
-      pointerEvents: "none",
-      skipInteraction: true,
-      outerRadius: focusedItem.outerRadius,
-      cornerRadius: focusedItem.cornerRadius,
-      skipAnimation: true,
-      stroke: (theme.vars ?? theme).palette.text.primary,
-      id: id,
-      className: _PieArc.pieArcClasses.focusIndicator,
-      dataIndex: focusedItem.dataIndex,
-      isFaded: false,
-      isHighlighted: false,
-      isFocused: false,
-      strokeWidth: 3
-    })]
+    }, slotProps?.pieArc), item.dataIndex))
   }));
 }
 process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {

package/PieChart/PieChart.js

@@ -23,6 +23,7 @@ var _useChartContainerProps = require("../ChartContainer/useChartContainerProps"
 var _ChartsWrapper = require("../ChartsWrapper");
 var _PieChart2 = require("./PieChart.plugins");
 var _defaultizeMargin = require("../internals/defaultizeMargin");
+var _FocusedPieArc = require("./FocusedPieArc");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["series", "width", "height", "margin", "colors", "sx", "skipAnimation", "hideLegend", "children", "slots", "slotProps", "onItemClick", "loading", "highlightedItem", "onHighlightChange", "className", "showToolbar"];
 /**
@@ -95,7 +96,7 @@ const PieChart = exports.PieChart = /*#__PURE__*/React.forwardRef(function PieCh
           slots: slots,
           slotProps: slotProps,
           onItemClick: onItemClick
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusedPieArc.FocusedPieArc, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, {
           loading: loading,
           slots: slots,
           slotProps: slotProps

package/PieChart/dataTransform/getModifiedArcProperties.d.ts

@@ -0,0 +1,11 @@
+import type { DefaultizedPieSeriesType, PieSeriesLayout } from "../../models/seriesType/pie.js";
+/**
+ * Function that returns arc properties after applying transformation from highlight/fade states.
+ */
+export declare function getModifiedArcProperties(seriesDef: Pick<DefaultizedPieSeriesType, 'cornerRadius' | 'paddingAngle' | 'id' | 'highlighted' | 'faded' | 'data'>, seriesLayout: Pick<PieSeriesLayout, 'radius'>, isHighlighted: boolean, isFaded: boolean): {
+  paddingAngle: number;
+  innerRadius: number;
+  outerRadius: number;
+  cornerRadius: number;
+  arcLabelRadius: number;
+};