@mui/x-charts-premium 9.1.0 → 9.3.0

package/HeatmapPremium/HeatmapPremium.mjs

@@ -289,11 +289,6 @@ process.env.NODE_ENV !== "production" ? HeatmapPremium.propTypes = {
    */
   zAxis: PropTypes.arrayOf(PropTypes.shape({
     colorMap: PropTypes.oneOfType([PropTypes.shape({
-      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-      type: PropTypes.oneOf(['ordinal']).isRequired,
-      unknownColor: PropTypes.string,
-      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
-    }), PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
       min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -302,6 +297,11 @@ process.env.NODE_ENV !== "production" ? HeatmapPremium.propTypes = {
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
       thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
       type: PropTypes.oneOf(['piecewise']).isRequired
+    }), PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      type: PropTypes.oneOf(['ordinal']).isRequired,
+      unknownColor: PropTypes.string,
+      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
     })]),
     data: PropTypes.array,
     dataKey: PropTypes.string,
@@ -323,6 +323,11 @@ process.env.NODE_ENV !== "production" ? HeatmapPremium.propTypes = {
    */
   zoomInteractionConfig: PropTypes.shape({
     pan: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['drag', 'pressAndDrag', 'wheel']), PropTypes.shape({
+      allowedDirection: PropTypes.oneOf(['x', 'xy', 'y']),
+      pointerMode: PropTypes.any,
+      requiredKeys: PropTypes.arrayOf(PropTypes.string),
+      type: PropTypes.oneOf(['wheel']).isRequired
+    }), PropTypes.shape({
       pointerMode: PropTypes.oneOf(['mouse', 'touch']),
       requiredKeys: PropTypes.arrayOf(PropTypes.string),
       type: PropTypes.oneOf(['drag']).isRequired
@@ -330,24 +335,11 @@ process.env.NODE_ENV !== "production" ? HeatmapPremium.propTypes = {
       pointerMode: PropTypes.oneOf(['mouse', 'touch']),
       requiredKeys: PropTypes.arrayOf(PropTypes.string),
       type: PropTypes.oneOf(['pressAndDrag']).isRequired
-    }), PropTypes.shape({
-      allowedDirection: PropTypes.oneOf(['x', 'xy', 'y']),
-      pointerMode: PropTypes.any,
-      requiredKeys: PropTypes.arrayOf(PropTypes.string),
-      type: PropTypes.oneOf(['wheel']).isRequired
     })]).isRequired),
     zoom: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['brush', 'doubleTapReset', 'pinch', 'tapAndDrag', 'wheel']), PropTypes.shape({
-      pointerMode: PropTypes.any,
-      requiredKeys: PropTypes.arrayOf(PropTypes.string),
-      type: PropTypes.oneOf(['wheel']).isRequired
-    }), PropTypes.shape({
-      pointerMode: PropTypes.any,
-      requiredKeys: PropTypes.array,
-      type: PropTypes.oneOf(['pinch']).isRequired
-    }), PropTypes.shape({
       pointerMode: PropTypes.oneOf(['mouse', 'touch']),
       requiredKeys: PropTypes.arrayOf(PropTypes.string),
-      type: PropTypes.oneOf(['tapAndDrag']).isRequired
+      type: PropTypes.oneOf(['brush']).isRequired
     }), PropTypes.shape({
       pointerMode: PropTypes.oneOf(['mouse', 'touch']),
       requiredKeys: PropTypes.arrayOf(PropTypes.string),
@@ -355,7 +347,15 @@ process.env.NODE_ENV !== "production" ? HeatmapPremium.propTypes = {
     }), PropTypes.shape({
       pointerMode: PropTypes.oneOf(['mouse', 'touch']),
       requiredKeys: PropTypes.arrayOf(PropTypes.string),
-      type: PropTypes.oneOf(['brush']).isRequired
+      type: PropTypes.oneOf(['tapAndDrag']).isRequired
+    }), PropTypes.shape({
+      pointerMode: PropTypes.any,
+      requiredKeys: PropTypes.array,
+      type: PropTypes.oneOf(['pinch']).isRequired
+    }), PropTypes.shape({
+      pointerMode: PropTypes.any,
+      requiredKeys: PropTypes.arrayOf(PropTypes.string),
+      type: PropTypes.oneOf(['wheel']).isRequired
     })]).isRequired)
   })
 } : void 0;

package/RadialBarChart/RadialBarChart.d.mts

@@ -9,6 +9,7 @@ import { type ChartsToolbarSlots, type ChartsToolbarSlotProps } from "../Toolbar
 import { type ChartsRadialDataProviderPremiumProps } from "../ChartsRadialDataProviderPremium/index.mjs";
 import type { RadialBarSeriesType } from "../models/seriesType/radialBar.mjs";
 import { type RadialBarChartPluginSignatures } from "./RadialBarChart.plugins.mjs";
+import { type ChartsRadialAxisHighlightProps } from "../ChartsRadialAxisHighlight/index.mjs";
 export type RadialBarSeries = MakeOptional<RadialBarSeriesType, 'type'>;
 export interface RadialBarChartSlots extends ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
 export interface RadialBarChartSlotProps extends ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
@@ -18,6 +19,12 @@ export interface RadialBarChartProps extends Omit<ChartsRadialDataProviderPremiu
    * An array of [[RadialBarSeries]] objects.
    */
   series: Readonly<RadialBarSeries[]>;
+  /**
+   * The configuration of axes highlight.
+   * @see See {@link https://mui.com/x/react-charts/highlighting highlighting docs} for more details.
+   * @default { rotation: 'band' } or { radius: 'band' } according to the layout.
+   */
+  axisHighlight?: ChartsRadialAxisHighlightProps;
   /**
    * Option to display a radial grid in the background.
    */

package/RadialBarChart/RadialBarChart.d.ts

@@ -9,6 +9,7 @@ import { type ChartsToolbarSlots, type ChartsToolbarSlotProps } from "../Toolbar
 import { type ChartsRadialDataProviderPremiumProps } from "../ChartsRadialDataProviderPremium/index.js";
 import type { RadialBarSeriesType } from "../models/seriesType/radialBar.js";
 import { type RadialBarChartPluginSignatures } from "./RadialBarChart.plugins.js";
+import { type ChartsRadialAxisHighlightProps } from "../ChartsRadialAxisHighlight/index.js";
 export type RadialBarSeries = MakeOptional<RadialBarSeriesType, 'type'>;
 export interface RadialBarChartSlots extends ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
 export interface RadialBarChartSlotProps extends ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
@@ -18,6 +19,12 @@ export interface RadialBarChartProps extends Omit<ChartsRadialDataProviderPremiu
    * An array of [[RadialBarSeries]] objects.
    */
   series: Readonly<RadialBarSeries[]>;
+  /**
+   * The configuration of axes highlight.
+   * @see See {@link https://mui.com/x/react-charts/highlighting highlighting docs} for more details.
+   * @default { rotation: 'band' } or { radius: 'band' } according to the layout.
+   */
+  axisHighlight?: ChartsRadialAxisHighlightProps;
   /**
    * Option to display a radial grid in the background.
    */

package/RadialBarChart/RadialBarChart.js

@@ -13,6 +13,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
 var _internals = require("@mui/x-charts/internals");
 var _ChartsRadialGrid = require("@mui/x-charts/ChartsRadialGrid");
+var _ChartsRotationAxis = require("@mui/x-charts/ChartsRotationAxis");
+var _ChartsRadiusAxis = require("@mui/x-charts/ChartsRadiusAxis");
 var _ChartsLegend = require("../ChartsLegend");
 var _ChartsSurface = require("../ChartsSurface");
 var _ChartsTooltip = require("../ChartsTooltip");
@@ -23,6 +25,7 @@ var _seriesConfig = require("./seriesConfig");
 var _ChartsRadialDataProviderPremium = require("../ChartsRadialDataProviderPremium");
 var _RadialBarPlot = require("./RadialBarPlot");
 var _useRadialBarChartProps = require("./useRadialBarChartProps");
+var _ChartsRadialAxisHighlight = require("../ChartsRadialAxisHighlight");
 var _jsxRuntime = require("react/jsx-runtime");
 const seriesConfig = {
   radialBar: _seriesConfig.radialBarSeriesConfig
@@ -50,6 +53,7 @@ const RadialBarChart = exports.Unstable_RadialBarChart = /*#__PURE__*/React.forw
     clipPathGroupProps,
     overlayProps,
     legendProps,
+    axisHighlightProps,
     children
   } = (0, _useRadialBarChartProps.useRadialBarChartProps)(props);
   const {
@@ -63,9 +67,9 @@ const RadialBarChart = exports.Unstable_RadialBarChart = /*#__PURE__*/React.forw
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWrapper.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
       ref: ref,
       children: [props.showToolbar && Toolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsRadialGrid.Unstable_ChartsRadialGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsRadialGrid.Unstable_ChartsRadialGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsRadialAxisHighlight.Unstable_ChartsRadialAxisHighlight, (0, _extends2.default)({}, axisHighlightProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RadialBarPlot.RadialBarPlot, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps))]
-        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
+        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsRotationAxis.Unstable_ChartsRotationAxis, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsRadiusAxis.Unstable_ChartsRadiusAxis, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
       })), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props.slotProps?.tooltip))]
     }))
   }));
@@ -82,6 +86,15 @@ process.env.NODE_ENV !== "production" ? RadialBarChart.propTypes = {
       exportAsPrint: _propTypes.default.func.isRequired
     })
   }),
+  /**
+   * The configuration of axes highlight.
+   * @see See {@link https://mui.com/x/react-charts/highlighting highlighting docs} for more details.
+   * @default { rotation: 'band' } or { radius: 'band' } according to the layout.
+   */
+  axisHighlight: _propTypes.default.shape({
+    radius: _propTypes.default.oneOf(['band', 'line', 'none']),
+    rotation: _propTypes.default.oneOf(['band', 'line', 'none'])
+  }),
   /**
    * Color palette used to colorize multiple series.
    * @default rainbowSurgePalette
@@ -139,11 +152,11 @@ process.env.NODE_ENV !== "production" ? RadialBarChart.propTypes = {
   hiddenItems: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
     seriesId: _propTypes.default.string.isRequired,
-    type: _propTypes.default.oneOf(['radialBar'])
+    type: _propTypes.default.oneOf(['radialBar']).isRequired
   }), _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
     seriesId: _propTypes.default.string.isRequired,
-    type: _propTypes.default.oneOf(['radialBar']).isRequired
+    type: _propTypes.default.oneOf(['radialBar'])
   })]).isRequired),
   /**
    * If `true`, the legend is not rendered.
@@ -155,11 +168,11 @@ process.env.NODE_ENV !== "production" ? RadialBarChart.propTypes = {
    */
   highlightedItem: _propTypes.default.oneOfType([_propTypes.default.shape({
     dataIndex: _propTypes.default.number.isRequired,
-    seriesId: _propTypes.default.string.isRequired,
-    type: _propTypes.default.oneOf(['radialBar']).isRequired
+    seriesId: _propTypes.default.string.isRequired
   }), _propTypes.default.shape({
     dataIndex: _propTypes.default.number.isRequired,
-    seriesId: _propTypes.default.string.isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['radialBar']).isRequired
   })]),
   /**
    * This prop is used to help implement the accessibility logic.
@@ -190,11 +203,11 @@ process.env.NODE_ENV !== "production" ? RadialBarChart.propTypes = {
   initialHiddenItems: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
     seriesId: _propTypes.default.string.isRequired,
-    type: _propTypes.default.oneOf(['radialBar'])
+    type: _propTypes.default.oneOf(['radialBar']).isRequired
   }), _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
     seriesId: _propTypes.default.string.isRequired,
-    type: _propTypes.default.oneOf(['radialBar']).isRequired
+    type: _propTypes.default.oneOf(['radialBar'])
   })]).isRequired),
   /**
    * If `true`, a loading overlay is displayed.
@@ -285,11 +298,11 @@ process.env.NODE_ENV !== "production" ? RadialBarChart.propTypes = {
    */
   tooltipItem: _propTypes.default.oneOfType([_propTypes.default.shape({
     dataIndex: _propTypes.default.number.isRequired,
-    seriesId: _propTypes.default.string.isRequired,
-    type: _propTypes.default.oneOf(['radialBar']).isRequired
+    seriesId: _propTypes.default.string.isRequired
   }), _propTypes.default.shape({
     dataIndex: _propTypes.default.number.isRequired,
-    seriesId: _propTypes.default.string.isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['radialBar']).isRequired
   })]),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.

package/RadialBarChart/RadialBarChart.mjs

@@ -6,6 +6,8 @@ import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
 import { useChartsContainerProps } from '@mui/x-charts/internals';
 import { Unstable_ChartsRadialGrid as ChartsRadialGrid } from '@mui/x-charts/ChartsRadialGrid';
+import { Unstable_ChartsRotationAxis as ChartsRotationAxis } from '@mui/x-charts/ChartsRotationAxis';
+import { Unstable_ChartsRadiusAxis as ChartsRadiusAxis } from '@mui/x-charts/ChartsRadiusAxis';
 import { ChartsLegend } from "../ChartsLegend/index.mjs";
 import { ChartsSurface } from "../ChartsSurface/index.mjs";
 import { ChartsTooltip } from "../ChartsTooltip/index.mjs";
@@ -16,6 +18,7 @@ import { radialBarSeriesConfig } from "./seriesConfig/index.mjs";
 import { ChartsRadialDataProviderPremium } from "../ChartsRadialDataProviderPremium/index.mjs";
 import { RadialBarPlot } from "./RadialBarPlot.mjs";
 import { useRadialBarChartProps } from "./useRadialBarChartProps.mjs";
+import { Unstable_ChartsRadialAxisHighlight as ChartsRadialAxisHighlight } from "../ChartsRadialAxisHighlight/index.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const seriesConfig = {
   radialBar: radialBarSeriesConfig
@@ -43,6 +46,7 @@ const RadialBarChart = /*#__PURE__*/React.forwardRef(function RadialBarChart(inP
     clipPathGroupProps,
     overlayProps,
     legendProps,
+    axisHighlightProps,
     children
   } = useRadialBarChartProps(props);
   const {
@@ -56,9 +60,9 @@ const RadialBarChart = /*#__PURE__*/React.forwardRef(function RadialBarChart(inP
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
       ref: ref,
       children: [props.showToolbar && Toolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
-        children: [/*#__PURE__*/_jsx(ChartsRadialGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
+        children: [/*#__PURE__*/_jsx(ChartsRadialGrid, _extends({}, gridProps)), /*#__PURE__*/_jsx(ChartsRadialAxisHighlight, _extends({}, axisHighlightProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
           children: [/*#__PURE__*/_jsx(RadialBarPlot, {}), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps))]
-        })), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
+        })), /*#__PURE__*/_jsx(ChartsRotationAxis, {}), /*#__PURE__*/_jsx(ChartsRadiusAxis, {}), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
       })), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip))]
     }))
   }));
@@ -75,6 +79,15 @@ process.env.NODE_ENV !== "production" ? RadialBarChart.propTypes = {
       exportAsPrint: PropTypes.func.isRequired
     })
   }),
+  /**
+   * The configuration of axes highlight.
+   * @see See {@link https://mui.com/x/react-charts/highlighting highlighting docs} for more details.
+   * @default { rotation: 'band' } or { radius: 'band' } according to the layout.
+   */
+  axisHighlight: PropTypes.shape({
+    radius: PropTypes.oneOf(['band', 'line', 'none']),
+    rotation: PropTypes.oneOf(['band', 'line', 'none'])
+  }),
   /**
    * Color palette used to colorize multiple series.
    * @default rainbowSurgePalette
@@ -132,11 +145,11 @@ process.env.NODE_ENV !== "production" ? RadialBarChart.propTypes = {
   hiddenItems: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape({
     dataIndex: PropTypes.number,
     seriesId: PropTypes.string.isRequired,
-    type: PropTypes.oneOf(['radialBar'])
+    type: PropTypes.oneOf(['radialBar']).isRequired
   }), PropTypes.shape({
     dataIndex: PropTypes.number,
     seriesId: PropTypes.string.isRequired,
-    type: PropTypes.oneOf(['radialBar']).isRequired
+    type: PropTypes.oneOf(['radialBar'])
   })]).isRequired),
   /**
    * If `true`, the legend is not rendered.
@@ -148,11 +161,11 @@ process.env.NODE_ENV !== "production" ? RadialBarChart.propTypes = {
    */
   highlightedItem: PropTypes.oneOfType([PropTypes.shape({
     dataIndex: PropTypes.number.isRequired,
-    seriesId: PropTypes.string.isRequired,
-    type: PropTypes.oneOf(['radialBar']).isRequired
+    seriesId: PropTypes.string.isRequired
   }), PropTypes.shape({
     dataIndex: PropTypes.number.isRequired,
-    seriesId: PropTypes.string.isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['radialBar']).isRequired
   })]),
   /**
    * This prop is used to help implement the accessibility logic.
@@ -183,11 +196,11 @@ process.env.NODE_ENV !== "production" ? RadialBarChart.propTypes = {
   initialHiddenItems: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape({
     dataIndex: PropTypes.number,
     seriesId: PropTypes.string.isRequired,
-    type: PropTypes.oneOf(['radialBar'])
+    type: PropTypes.oneOf(['radialBar']).isRequired
   }), PropTypes.shape({
     dataIndex: PropTypes.number,
     seriesId: PropTypes.string.isRequired,
-    type: PropTypes.oneOf(['radialBar']).isRequired
+    type: PropTypes.oneOf(['radialBar'])
   })]).isRequired),
   /**
    * If `true`, a loading overlay is displayed.
@@ -278,11 +291,11 @@ process.env.NODE_ENV !== "production" ? RadialBarChart.propTypes = {
    */
   tooltipItem: PropTypes.oneOfType([PropTypes.shape({
     dataIndex: PropTypes.number.isRequired,
-    seriesId: PropTypes.string.isRequired,
-    type: PropTypes.oneOf(['radialBar']).isRequired
+    seriesId: PropTypes.string.isRequired
   }), PropTypes.shape({
     dataIndex: PropTypes.number.isRequired,
-    seriesId: PropTypes.string.isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['radialBar']).isRequired
   })]),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.

package/RadialBarChart/RadialBarElement.js

@@ -13,6 +13,7 @@ var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _styles = require("@mui/material/styles");
+var _hooks = require("../hooks");
 var _radialBarClasses = require("./radialBarClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["seriesId", "dataIndex", "color", "startAngle", "endAngle", "innerRadius", "outerRadius", "className", "classes", "onClick"];
@@ -22,6 +23,7 @@ const RadialBarElementRoot = (0, _styles.styled)('path', {
 })();
 function RadialBarElement(props) {
   const {
+      seriesId,
       dataIndex,
       color,
       startAngle,
@@ -36,6 +38,14 @@ function RadialBarElement(props) {
   const classes = (0, _radialBarClasses.useUtilityClasses)({
     classes: innerClasses
   });
+  const identifier = React.useMemo(() => ({
+    type: 'radialBar',
+    seriesId,
+    dataIndex
+  }), [seriesId, dataIndex]);
+  const highlightState = (0, _hooks.useItemHighlightState)(identifier);
+  const isHighlighted = highlightState === 'highlighted';
+  const isFaded = highlightState === 'faded';
   const d = (0, _d3Shape.arc)()({
     startAngle,
     endAngle,
@@ -49,6 +59,10 @@ function RadialBarElement(props) {
     stroke: "none",
     onClick: onClick,
     cursor: onClick ? 'pointer' : undefined,
-    "data-index": dataIndex
+    "data-index": dataIndex,
+    "data-highlighted": isHighlighted || undefined,
+    "data-faded": isFaded || undefined,
+    filter: isHighlighted ? 'brightness(120%)' : undefined,
+    opacity: isFaded ? 0.3 : 1
   }, other));
 }

package/RadialBarChart/RadialBarElement.mjs

@@ -7,6 +7,7 @@ import * as React from 'react';
 import clsx from 'clsx';
 import { arc as d3Arc } from '@mui/x-charts-vendor/d3-shape';
 import { styled } from '@mui/material/styles';
+import { useItemHighlightState } from "../hooks/index.mjs";
 import { useUtilityClasses } from "./radialBarClasses.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const RadialBarElementRoot = styled('path', {
@@ -15,6 +16,7 @@ const RadialBarElementRoot = styled('path', {
 })();
 function RadialBarElement(props) {
   const {
+      seriesId,
       dataIndex,
       color,
       startAngle,
@@ -29,6 +31,14 @@ function RadialBarElement(props) {
   const classes = useUtilityClasses({
     classes: innerClasses
   });
+  const identifier = React.useMemo(() => ({
+    type: 'radialBar',
+    seriesId,
+    dataIndex
+  }), [seriesId, dataIndex]);
+  const highlightState = useItemHighlightState(identifier);
+  const isHighlighted = highlightState === 'highlighted';
+  const isFaded = highlightState === 'faded';
   const d = d3Arc()({
     startAngle,
     endAngle,
@@ -42,7 +52,11 @@ function RadialBarElement(props) {
     stroke: "none",
     onClick: onClick,
     cursor: onClick ? 'pointer' : undefined,
-    "data-index": dataIndex
+    "data-index": dataIndex,
+    "data-highlighted": isHighlighted || undefined,
+    "data-faded": isFaded || undefined,
+    filter: isHighlighted ? 'brightness(120%)' : undefined,
+    opacity: isFaded ? 0.3 : 1
   }, other));
 }
 export { RadialBarElement };

package/RadialBarChart/radialBarClasses.d.mts

@@ -11,5 +11,5 @@ export declare const radialBarClasses: RadialBarClasses;
 interface UseUtilityClassesOptions {
   classes?: Partial<RadialBarClasses>;
 }
-export declare const useUtilityClasses: (options?: UseUtilityClassesOptions) => Record<"series" | "root" | "element", string>;
+export declare const useUtilityClasses: (options?: UseUtilityClassesOptions) => Record<"root" | "series" | "element", string>;
 export {};

package/RadialBarChart/radialBarClasses.d.ts

@@ -11,5 +11,5 @@ export declare const radialBarClasses: RadialBarClasses;
 interface UseUtilityClassesOptions {
   classes?: Partial<RadialBarClasses>;
 }
-export declare const useUtilityClasses: (options?: UseUtilityClassesOptions) => Record<"series" | "root" | "element", string>;
+export declare const useUtilityClasses: (options?: UseUtilityClassesOptions) => Record<"root" | "series" | "element", string>;
 export {};

package/RadialBarChart/seriesConfig/axisTooltipGetter.js

@@ -5,9 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.axisTooltipGetter = void 0;
 const axisTooltipGetter = series => {
-  return Object.values(series).map(s => ({
+  return Object.values(series).map(s => s.layout === 'horizontal' ? {
+    direction: 'radius',
+    axisId: 'radiusAxisId' in s ? s.radiusAxisId : undefined
+  } : {
     direction: 'rotation',
     axisId: 'rotationAxisId' in s ? s.rotationAxisId : undefined
-  }));
+  });
 };
 exports.axisTooltipGetter = axisTooltipGetter;

package/RadialBarChart/seriesConfig/axisTooltipGetter.mjs

@@ -1,6 +1,9 @@
 export const axisTooltipGetter = series => {
-  return Object.values(series).map(s => ({
+  return Object.values(series).map(s => s.layout === 'horizontal' ? {
+    direction: 'radius',
+    axisId: 'radiusAxisId' in s ? s.radiusAxisId : undefined
+  } : {
     direction: 'rotation',
     axisId: 'rotationAxisId' in s ? s.rotationAxisId : undefined
-  }));
+  });
 };

package/RadialBarChart/seriesConfig/getColor.js

@@ -6,56 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _internals = require("@mui/x-charts/internals");
 const getColor = (series, rotationAxis, radiusAxis) => {
-  const yColorScale = radiusAxis?.colorScale;
-  const xColorScale = rotationAxis?.colorScale;
-  const getSeriesColor = (0, _internals.getSeriesColorFn)(series);
-  if (yColorScale) {
-    return dataIndex => {
-      if (dataIndex === undefined) {
-        return series.color;
-      }
-      const value = series.data[dataIndex];
-      const color = value === null ? getSeriesColor({
-        value,
-        dataIndex
-      }) : yColorScale(value);
-      if (color === null) {
-        return getSeriesColor({
-          value,
-          dataIndex
-        });
-      }
-      return color;
-    };
-  }
-  if (xColorScale) {
-    return dataIndex => {
-      if (dataIndex === undefined) {
-        return series.color;
-      }
-      const value = rotationAxis.data?.[dataIndex];
-      const color = value === null ? getSeriesColor({
-        value,
-        dataIndex
-      }) : xColorScale(value);
-      if (color === null) {
-        return getSeriesColor({
-          value,
-          dataIndex
-        });
-      }
-      return color;
-    };
-  }
-  return dataIndex => {
-    if (dataIndex === undefined) {
-      return series.color;
-    }
-    const value = series.data[dataIndex];
-    return getSeriesColor({
-      value,
-      dataIndex
-    });
-  };
+  const verticalLayout = series.layout === 'vertical';
+  return (0, _internals.resolveColorProcessor)({
+    series,
+    valueColorScale: verticalLayout ? radiusAxis?.colorScale : rotationAxis?.colorScale,
+    categoryColorScale: verticalLayout ? rotationAxis?.colorScale : radiusAxis?.colorScale,
+    categoryValues: verticalLayout ? rotationAxis?.data : radiusAxis?.data
+  });
 };
 var _default = exports.default = getColor;

package/RadialBarChart/seriesConfig/getColor.mjs

@@ -1,55 +1,11 @@
-import { getSeriesColorFn } from '@mui/x-charts/internals';
+import { resolveColorProcessor } from '@mui/x-charts/internals';
 const getColor = (series, rotationAxis, radiusAxis) => {
-  const yColorScale = radiusAxis?.colorScale;
-  const xColorScale = rotationAxis?.colorScale;
-  const getSeriesColor = getSeriesColorFn(series);
-  if (yColorScale) {
-    return dataIndex => {
-      if (dataIndex === undefined) {
-        return series.color;
-      }
-      const value = series.data[dataIndex];
-      const color = value === null ? getSeriesColor({
-        value,
-        dataIndex
-      }) : yColorScale(value);
-      if (color === null) {
-        return getSeriesColor({
-          value,
-          dataIndex
-        });
-      }
-      return color;
-    };
-  }
-  if (xColorScale) {
-    return dataIndex => {
-      if (dataIndex === undefined) {
-        return series.color;
-      }
-      const value = rotationAxis.data?.[dataIndex];
-      const color = value === null ? getSeriesColor({
-        value,
-        dataIndex
-      }) : xColorScale(value);
-      if (color === null) {
-        return getSeriesColor({
-          value,
-          dataIndex
-        });
-      }
-      return color;
-    };
-  }
-  return dataIndex => {
-    if (dataIndex === undefined) {
-      return series.color;
-    }
-    const value = series.data[dataIndex];
-    return getSeriesColor({
-      value,
-      dataIndex
-    });
-  };
+  const verticalLayout = series.layout === 'vertical';
+  return resolveColorProcessor({
+    series,
+    valueColorScale: verticalLayout ? radiusAxis?.colorScale : rotationAxis?.colorScale,
+    categoryColorScale: verticalLayout ? rotationAxis?.colorScale : radiusAxis?.colorScale,
+    categoryValues: verticalLayout ? rotationAxis?.data : radiusAxis?.data
+  });
 };
 export default getColor;

package/RadialBarChart/seriesConfig/getItemAtPosition.d.mts

@@ -0,0 +1,6 @@
+import { type ChartState, type UseChartPolarAxisSignature } from '@mui/x-charts/internals';
+import type { SeriesItemIdentifierWithType } from '@mui/x-charts/models';
+export default function getItemAtPosition(state: ChartState<[UseChartPolarAxisSignature]>, point: {
+  x: number;
+  y: number;
+}): SeriesItemIdentifierWithType<'radialBar'> | undefined;

package/RadialBarChart/seriesConfig/getItemAtPosition.d.ts

@@ -0,0 +1,6 @@
+import { type ChartState, type UseChartPolarAxisSignature } from '@mui/x-charts/internals';
+import type { SeriesItemIdentifierWithType } from '@mui/x-charts/models';
+export default function getItemAtPosition(state: ChartState<[UseChartPolarAxisSignature]>, point: {
+  x: number;
+  y: number;
+}): SeriesItemIdentifierWithType<'radialBar'> | undefined;