@mui/x-charts 8.22.0 → 8.23.0

package/BarChart/BarElement.js

@@ -50,7 +50,7 @@ function BarElement(props) {
     isHighlighted
   } = (0, _useItemHighlighted.useItemHighlighted)(itemIdentifier);
   const isFocused = (0, _useIsItemFocused.useIsItemFocused)(React.useMemo(() => ({
-    seriesType: 'bar',
+    type: 'bar',
     seriesId: id,
     dataIndex
   }), [id, dataIndex]));

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/FocusedBar.js

@@ -26,7 +26,7 @@ function FocusedBar(props) {
     yAxis,
     yAxisIds
   } = (0, _hooks.useYAxes)();
-  if (focusedItem === null || focusedItem.seriesType !== 'bar' || !barSeries) {
+  if (focusedItem === null || focusedItem.type !== 'bar' || !barSeries) {
     return null;
   }
   const series = barSeries?.series[focusedItem.seriesId];

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/BarChart/seriesConfig/bar/keyboardFocusHandler.d.ts

@@ -0,0 +1,3 @@
+import type { KeyboardFocusHandler } from "../../../internals/plugins/featurePlugins/useChartKeyboardNavigation/keyboardFocusHandler.types.js";
+declare const keyboardFocusHandler: KeyboardFocusHandler<'bar', 'bar' | 'line' | 'scatter'>;
+export default keyboardFocusHandler;

package/BarChart/seriesConfig/bar/keyboardFocusHandler.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _commonNextFocusItem = require("../../../internals/commonNextFocusItem");
+const outSeriesTypes = new Set(['bar', 'line', 'scatter']);
+const keyboardFocusHandler = event => {
+  switch (event.key) {
+    case 'ArrowRight':
+      return (0, _commonNextFocusItem.createGetNextIndexFocusedItem)(outSeriesTypes);
+    case 'ArrowLeft':
+      return (0, _commonNextFocusItem.createGetPreviousIndexFocusedItem)(outSeriesTypes);
+    case 'ArrowDown':
+      return (0, _commonNextFocusItem.createGetPreviousSeriesFocusedItem)(outSeriesTypes);
+    case 'ArrowUp':
+      return (0, _commonNextFocusItem.createGetNextSeriesFocusedItem)(outSeriesTypes);
+    default:
+      return null;
+  }
+};
+var _default = exports.default = keyboardFocusHandler;

package/BarChart/seriesConfig/bar/seriesProcessor.js

@@ -8,14 +8,14 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _warning = require("@mui/x-internals/warning");
-var _stackSeries = require("../../../internals/stackSeries");
+var _stacking = require("../../../internals/stacking");
 const barValueFormatter = v => v == null ? '' : v.toLocaleString();
 const seriesProcessor = (params, dataset) => {
   const {
     seriesOrder,
     series
   } = params;
-  const stackingGroups = (0, _stackSeries.getStackingGroups)(params);
+  const stackingGroups = (0, _stacking.getStackingGroups)(params);
 
   // Create a data set with format adapted to d3
   const d3Dataset = dataset ?? [];

package/BarChart/seriesConfig/index.js

@@ -10,6 +10,7 @@ var _extremums = require("./bar/extremums");
 var _seriesProcessor = _interopRequireDefault(require("./bar/seriesProcessor"));
 var _legend = _interopRequireDefault(require("./bar/legend"));
 var _getColor = _interopRequireDefault(require("./bar/getColor"));
+var _keyboardFocusHandler = _interopRequireDefault(require("./bar/keyboardFocusHandler"));
 var _tooltip = _interopRequireWildcard(require("./bar/tooltip"));
 var _tooltipPosition = _interopRequireDefault(require("./bar/tooltipPosition"));
 var _getSeriesWithDefaultValues = require("./bar/getSeriesWithDefaultValues");
@@ -22,5 +23,6 @@ const barSeriesConfig = exports.barSeriesConfig = {
   axisTooltipGetter: _tooltip.axisTooltipGetter,
   xExtremumGetter: _extremums.getExtremumX,
   yExtremumGetter: _extremums.getExtremumY,
-  getSeriesWithDefaultValues: _getSeriesWithDefaultValues.getSeriesWithDefaultValues
+  getSeriesWithDefaultValues: _getSeriesWithDefaultValues.getSeriesWithDefaultValues,
+  keyboardFocusHandler: _keyboardFocusHandler.default
 };

package/CHANGELOG.md

@@ -5,6 +5,208 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.23.0
+
+_Dec 23, 2025_
+
+We'd like to extend a big thank you to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🧮 Support Data Grid `size`, `size(true)`, and `size(false)` [aggregations for `'boolean'` column type](https://mui.com/x/react-data-grid/aggregation/#usage-with-row-grouping)
+- 🔎 Allow zooming a heatmap
+
+Special thanks go out to these community members for their valuable contributions:
+@henkerik, @sai6855
+
+The following team members contributed to this release:
+@alelthomas, @alexfauquette, @arminmeh, @bernardobelchior, @brijeshb42, @flaviendelangle, @JCQuintas, @mapache-salvaje, @MBilalShafi, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.23.0`
+
+- [DataGrid] Fix columns state and columns prop sync issue (#20703) @arminmeh
+- [DataGrid] Fix filter datetime with seconds (#20557) @siriwatknp
+- [DataGrid] Add new `includeHeaderFilters` flag to include header filters when autosizing columns (#20510) @siriwatknp
+- [DataGrid] Prevent default on `Enter` key down when starting editing (#20751) @siriwatknp
+- [l10n] Improve Portuguese from Portugal (pt-PT) locale (#20722) @Copilot
+
+#### `@mui/x-data-grid-pro@8.23.0` [![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.23.0`, plus:
+
+- [DataGridPro] Fix crash on rows change in tree data with pagination (#20215) @Copilot
+
+#### `@mui/x-data-grid-premium@8.23.0` [![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.23.0`, plus:
+
+- [DataGridPremium] Add aggregation for `'boolean'` column type (#20683) @arminmeh
+- [DataGridPremium] Fix strategy value computation with row grouping (#20725) @MBilalShafi
+- [DataGridPremium] Handle `isRowSelectable()` checks for the rows missing due to `keepNonExistentRowsSelected` (#20668) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.23.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.23.0` [![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.23.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.23.0`
+
+- [charts] Custom stack functions implementation (#20679) @JCQuintas
+- [charts] Extract keyboard focus navigation to the series config (#20693) @alexfauquette
+- [charts] Fix demo not wrapping in mobile (#20713) @JCQuintas
+- [charts] Fix missing dependencies in `x-charts-vendor` (#20685) @henkerik
+- [charts] Remove webkit test differences (#20707) @JCQuintas
+
+#### `@mui/x-charts-pro@8.23.0` [![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.23.0`, plus:
+
+- [charts-pro] Allow registering preview plots from higher tier packages (#20716) @bernardobelchior
+- [charts-pro] Fix erroneous behavior when adding/removing pointers from zoom&pan gestures (#20698) @JCQuintas
+- [charts-pro] Move heatmap highlight handling to plot component (#20701) @bernardobelchior
+- [charts-pro] Add zoom to heatmap (#20708) @bernardobelchior
+
+#### `@mui/x-charts-premium@8.23.0` [![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.23.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.23.0`
+
+- [tree view] Add new APIs to disable selection feature for tree view item (#20666) @siriwatknp
+
+#### `@mui/x-tree-view-pro@8.23.0` [![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.23.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.23.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Clarify feature availability and relationship between Community and Pro/Premium docs (#20714) @mapache-salvaje
+- [docs] Copyedit Tree View docs and apply new component style rules (DX-19) (#20652) @mapache-salvaje
+- [docs] Fix `ColumnPinningDynamicRowHeight` demo (#20750) @sai6855
+- [docs] Clean up Charts docs sidebar (DX-97) (#20700) @alelthomas
+- [docs] Fix tick labels not being shown on a demo (#20718) @sai6855
+
+### Core
+
+- [code-infra] Bump prettier to 3.7.4 (#20709) @JCQuintas
+- [code-infra] Fix contributor generation logic in changelog script (#20705) @brijeshb42
+
+## 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/FocusedLineMark.js

@@ -22,7 +22,7 @@ function FocusedLineMark() {
     yAxis,
     yAxisIds
   } = (0, _hooks.useYAxes)();
-  if (focusedItem === null || focusedItem.seriesType !== 'line' || !lineSeries) {
+  if (focusedItem === null || focusedItem.type !== 'line' || !lineSeries) {
     return null;
   }
   const series = lineSeries?.series[focusedItem.seriesId];

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 {