@mui/x-charts 8.22.0 → 8.23.0

package/LineChart/seriesConfig/index.js

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

package/LineChart/seriesConfig/keyboardFocusHandler.d.ts

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

package/LineChart/seriesConfig/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/LineChart/seriesConfig/seriesProcessor.js

@@ -8,13 +8,13 @@ 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 seriesProcessor = (params, dataset) => {
   const {
     seriesOrder,
     series
   } = params;
-  const stackingGroups = (0, _stackSeries.getStackingGroups)((0, _extends2.default)({}, params, {
+  const stackingGroups = (0, _stacking.getStackingGroups)((0, _extends2.default)({}, params, {
     defaultStrategy: {
       stackOffset: 'none'
     }

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.type !== '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;
+};

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,
@@ -37,29 +32,29 @@ function useTransformData(series) {
     const isHighlighted = isItemHighlighted(currentItem);
     const isFaded = !isHighlighted && isItemFaded(currentItem);
     const isFocused = isItemFocused({
-      seriesType: 'pie',
+      type: 'pie',
       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/index.js

@@ -12,6 +12,7 @@ var _tooltip = _interopRequireDefault(require("./tooltip"));
 var _seriesLayout = _interopRequireDefault(require("./seriesLayout"));
 var _getSeriesWithDefaultValues = _interopRequireDefault(require("./getSeriesWithDefaultValues"));
 var _tooltipPosition = _interopRequireDefault(require("./tooltipPosition"));
+var _keyboardFocusHandler = _interopRequireDefault(require("./keyboardFocusHandler"));
 const pieSeriesConfig = exports.pieSeriesConfig = {
   colorProcessor: _getColor.default,
   seriesProcessor: _seriesProcessor.default,
@@ -19,5 +20,6 @@ const pieSeriesConfig = exports.pieSeriesConfig = {
   legendGetter: _legend.default,
   tooltipGetter: _tooltip.default,
   tooltipItemPositionGetter: _tooltipPosition.default,
-  getSeriesWithDefaultValues: _getSeriesWithDefaultValues.default
+  getSeriesWithDefaultValues: _getSeriesWithDefaultValues.default,
+  keyboardFocusHandler: _keyboardFocusHandler.default
 };

package/PieChart/seriesConfig/keyboardFocusHandler.d.ts

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

package/PieChart/seriesConfig/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(['pie']);
+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/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/FocusedScatterMark.js

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

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/ScatterChart/seriesConfig/index.js

@@ -12,6 +12,7 @@ var _legend = _interopRequireDefault(require("./legend"));
 var _tooltip = _interopRequireDefault(require("./tooltip"));
 var _getSeriesWithDefaultValues = _interopRequireDefault(require("./getSeriesWithDefaultValues"));
 var _tooltipPosition = _interopRequireDefault(require("./tooltipPosition"));
+var _keyboardFocusHandler = _interopRequireDefault(require("./keyboardFocusHandler"));
 const scatterSeriesConfig = exports.scatterSeriesConfig = {
   seriesProcessor: _seriesProcessor.default,
   colorProcessor: _getColor.default,
@@ -20,5 +21,6 @@ const scatterSeriesConfig = exports.scatterSeriesConfig = {
   tooltipItemPositionGetter: _tooltipPosition.default,
   xExtremumGetter: _extremums.getExtremumX,
   yExtremumGetter: _extremums.getExtremumY,
-  getSeriesWithDefaultValues: _getSeriesWithDefaultValues.default
+  getSeriesWithDefaultValues: _getSeriesWithDefaultValues.default,
+  keyboardFocusHandler: _keyboardFocusHandler.default
 };

package/ScatterChart/seriesConfig/keyboardFocusHandler.d.ts

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

package/ScatterChart/seriesConfig/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/esm/BarChart/BarElement.js

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

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;