@mui/x-charts 8.0.0-beta.0 → 8.0.0-beta.2

package/BarChart/seriesConfig/extremums.js

@@ -42,8 +42,8 @@ const getValueExtremum = direction => params => {
     isDefaultAxis
   } = params;
   return Object.keys(series).filter(seriesId => {
-    const yAxisId = series[seriesId].yAxisId;
-    return yAxisId === axis.id || isDefaultAxis && yAxisId === undefined;
+    const axisId = direction === 'x' ? series[seriesId].xAxisId : series[seriesId].yAxisId;
+    return axisId === axis.id || isDefaultAxis && axisId === undefined;
   }).reduce((acc, seriesId) => {
     const {
       stackedData

package/BarChart/useBarChartProps.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { BarChartProps } from './BarChart';
 import { ChartContainerProps } from "../ChartContainer/index.js";
 import { BarPlotProps } from "./BarPlot.js";
@@ -29,5 +30,5 @@ export declare const useBarChartProps: (props: BarChartProps) => {
   chartsAxisProps: ChartsAxisProps;
   axisHighlightProps: ChartsAxisHighlightProps;
   legendProps: ChartsLegendSlotExtension;
-  children: import("react").ReactNode;
+  children: React.ReactNode;
 };

package/BarChart/useBarChartProps.js

@@ -2,12 +2,14 @@
 'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useBarChartProps = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _constants = require("../constants");
 var _BarChart = require("./BarChart.plugins");
@@ -49,29 +51,34 @@ const useBarChartProps = props => {
   const id = (0, _useId.default)();
   const clipPathId = `${id}-clip-path`;
   const hasHorizontalSeries = layout === 'horizontal' || layout === undefined && series.some(item => item.layout === 'horizontal');
-  const defaultAxisConfig = {
+  const defaultBandXAxis = React.useMemo(() => [{
+    id: _constants.DEFAULT_X_AXIS_KEY,
     scaleType: 'band',
     data: Array.from({
       length: Math.max(...series.map(s => (s.data ?? dataset ?? []).length))
     }, (_, index) => index)
-  };
+  }], [dataset, series]);
+  const defaultBandYAxis = React.useMemo(() => [{
+    id: _constants.DEFAULT_Y_AXIS_KEY,
+    scaleType: 'band',
+    data: Array.from({
+      length: Math.max(...series.map(s => (s.data ?? dataset ?? []).length))
+    }, (_, index) => index)
+  }], [dataset, series]);
+  const seriesWithDefault = React.useMemo(() => series.map(s => (0, _extends2.default)({
+    type: 'bar'
+  }, s, {
+    layout: hasHorizontalSeries ? 'horizontal' : 'vertical'
+  })), [hasHorizontalSeries, series]);
   const chartContainerProps = (0, _extends2.default)({}, rest, {
-    series: series.map(s => (0, _extends2.default)({
-      type: 'bar'
-    }, s, {
-      layout: hasHorizontalSeries ? 'horizontal' : 'vertical'
-    })),
+    series: seriesWithDefault,
     width,
     height,
     margin,
     colors,
     dataset,
-    xAxis: xAxis ?? (hasHorizontalSeries ? undefined : [(0, _extends2.default)({
-      id: _constants.DEFAULT_X_AXIS_KEY
-    }, defaultAxisConfig)]),
-    yAxis: yAxis ?? (hasHorizontalSeries ? [(0, _extends2.default)({
-      id: _constants.DEFAULT_Y_AXIS_KEY
-    }, defaultAxisConfig)] : undefined),
+    xAxis: xAxis ?? (hasHorizontalSeries ? undefined : defaultBandXAxis),
+    yAxis: yAxis ?? (hasHorizontalSeries ? defaultBandYAxis : undefined),
     highlightedItem,
     onHighlightChange,
     disableAxisListener: slotProps?.tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',

package/CHANGELOG.md

@@ -5,6 +5,177 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.0.0-beta.2
+
+_Mar 27, 2025_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔍 Update the Data Grid quick filter to be collapsed when not in use
+- 🐞 Bugfixes
+
+Special thanks go out to the community members for their valuable contributions:
+@lhilgert9.
+Following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @flaviendelangle, @hasdfa, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @michelengelen, @mnajdova, @romgrk.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.0.0-beta.2`
+
+- [DataGrid] Fix error caused by trying to render rows that are not in the state anymore (#17057) @arminmeh
+- [DataGrid] Refactor: remove more material (#16922) @romgrk
+- [DataGrid] Update Quick Filter component to be expandable (#16862) @KenanYusuf
+- [DataGrid] Fix crash when used with `@mui/styled-engine-sc` (#17154) @KenanYusuf
+
+#### `@mui/x-data-grid-pro@8.0.0-beta.2` [![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.0.0-beta.2`, plus:
+
+- [DataGridPro] Data source: Allow expanding groups with unknown children (#17144) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@8.0.0-beta.2` [![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.0.0-beta.2`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.0.0-beta.2`
+
+- [fields] Extract the props of each field slot into a standalone hook for easier re-use (#17114) @flaviendelangle
+- [pickers] Fix visual regression in Date Range Calendar's day (#17148) @flaviendelangle
+- [pickers] Remove all code duplication to apply default values to validation props (#17038) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@8.0.0-beta.2` [![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.0.0-beta.2`.
+
+### Charts
+
+#### `@mui/x-charts@8.0.0-beta.2`
+
+- [charts] Memoize axes and series with default (#17156) @alexfauquette
+- [charts] Add pie benchmark (#17115) @JCQuintas
+- [charts] Fix CSS vars support for dark theme (#17106) @alexfauquette
+- [charts] Fix radar hover (#17134) @alexfauquette
+- [charts] Move axis interaction to selectors (#17039) @alexfauquette
+- [charts] Fix Pie benchmark (#17125) @JCQuintas
+
+#### `@mui/x-charts-pro@8.0.0-beta.2` [![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.0.0-beta.2`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.0.0-beta.2`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.0.0-beta.2` [![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.0.0-beta.2`.
+
+### `@mui/x-codemod@8.0.0-beta.1`
+
+- [codemod] Add Data Grid codemods (#17121, #17124) @MBilalShafi
+
+### Docs
+
+- [docs] Fix example import for `ExportExcel` component (#17110) @KenanYusuf
+
+### Core
+
+- [code-infra] Remove `@mui/styles` dependency & patches (#17071) @mnajdova
+- [code-infra] Add more tests to slow screenshot tests (#17075) @JCQuintas
+- [code-infra] Fix pickers codecov (#17120) @JCQuintas
+- [code-infra] Move `isDeepEqual` to @mui/x-internals (#17129) @JCQuintas
+- [code-infra] Remove `test_regressions` step from React 18 pipeline (#17108) @LukasTy
+- [code-infra] Update some data-grid tests for vitest (#17078, #17104, #17146) @JCQuintas
+- [code-infra] Update some date-pickers tests for vitest (#17083) @JCQuintas
+- [infra] Update `issue-status-label-handler.yml` @michelengelen
+- [infra] Added reusable issue status label handler workflow (#17145) @michelengelen
+- [infra] Switch to reusable 'stale issues/PRs' workflow (#17107) @michelengelen
+- [telemetry] Improve request body size, update dependencies, and optimize SSR handling (#17008) @hasdfa
+
+## 8.0.0-beta.1
+
+_Mar 21, 2025_
+
+We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+Special thanks go out to the community members for their valuable contributions:
+@jyash97.
+Following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @flaviendelangle, @JCQuintas, @KenanYusuf.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.0.0-beta.1`
+
+- [DataGrid] Fix error caused by `forwardRef` to `ClickAwayListener` (#17049) @arminmeh
+- [DataGrid] Fix error while editing rows with custom id (#17048) @arminmeh
+
+#### `@mui/x-data-grid-pro@8.0.0-beta.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.0.0-beta.1`, plus:
+
+- [DataGridPro] Fix header select checkbox state with `checkboxSelectionVisibleOnly` and `paginationMode="server"` (#17026) @arminmeh
+
+#### `@mui/x-data-grid-premium@8.0.0-beta.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.0.0-beta.1`, plus:
+
+- [DataGridPremium] Update column state correctly when grouping mode is updated with one grouping column (#17069) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.0.0-beta.1`
+
+- [fields] Clean the `useField` hook (part 1) (#16944) @flaviendelangle
+- [fields] Improve the check for year in `doesSectionFormatHaveLeadingZeros` (#17051) @flaviendelangle
+- [pickers] Deprecate the `disableOpenPicker` prop (#17040) @flaviendelangle
+- [pickers] Simplify the `cleanLeadingZeros` method (#17063) @flaviendelangle
+- [pickers] Use the new `ownerState` in `PickersDay` and `DateRangePickerDay` (#17035) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@8.0.0-beta.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.0.0-beta.1`, plus:
+
+- [DateRangePicker] Use desktop media query constant on range pickers (#17052) @flaviendelangle
+
+### Charts
+
+#### `@mui/x-charts@8.0.0-beta.1`
+
+- [charts] Fix horizontal bar with multiple axes (#17059) @alexfauquette
+
+#### `@mui/x-charts-pro@8.0.0-beta.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.0.0-beta.1`, plus:
+
+- [charts-pro] Allow disabling Heatmap tooltip (#17060) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@8.0.0-beta.1`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.0.0-beta.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.0.0-beta.1`.
+
+### Docs
+
+- [docs] Fix 404 (#17033) @alexfauquette
+- [docs] Fix Data Grid advanced list view demo (#17064) @KenanYusuf
+
 ## 8.0.0-beta.0
 
 <img width="100%" alt="MUI X v8 Beta is live" src="https://github.com/user-attachments/assets/61ec4dd8-c946-456b-8b45-d51de8772f5d">

package/ChartsAxisHighlight/ChartsXAxisHighlight.js

@@ -11,7 +11,7 @@ var _useScale = require("../hooks/useScale");
 var _isBandScale = require("../internals/isBandScale");
 var _useSelector = require("../internals/store/useSelector");
 var _useStore = require("../internals/store/useStore");
-var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
+var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
 var _hooks = require("../hooks");
 var _ChartsAxisHighlightPath = require("./ChartsAxisHighlightPath");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -28,26 +28,26 @@ var _jsxRuntime = require("react/jsx-runtime");
   } = (0, _hooks.useDrawingArea)();
   const xScale = (0, _useScale.useXScale)();
   const store = (0, _useStore.useStore)();
-  const axisX = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsInteractionXAxis);
+  const axisXValue = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartsInteractionXAxisValue);
   const getXPosition = (0, _useScale.getValueToPositionMapper)(xScale);
-  const isBandScaleX = type === 'band' && axisX !== null && (0, _isBandScale.isBandScale)(xScale);
+  const isBandScaleX = type === 'band' && axisXValue !== null && (0, _isBandScale.isBandScale)(xScale);
   if (process.env.NODE_ENV !== 'production') {
-    const isError = isBandScaleX && xScale(axisX.value) === undefined;
+    const isError = isBandScaleX && xScale(axisXValue) === undefined;
     if (isError) {
       console.error([`MUI X: The position value provided for the axis is not valid for the current scale.`, `This probably means something is wrong with the data passed to the chart.`, `The ChartsAxisHighlight component will not be displayed.`].join('\n'));
     }
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [isBandScaleX && xScale(axisX.value) !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlightPath.ChartsAxisHighlightPath
+    children: [isBandScaleX && xScale(axisXValue) !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlightPath.ChartsAxisHighlightPath
     // @ts-expect-error, xScale value is checked in the statement above
     , {
-      d: `M ${xScale(axisX.value) - (xScale.step() - xScale.bandwidth()) / 2} ${top} l ${xScale.step()} 0 l 0 ${height} l ${-xScale.step()} 0 Z`,
+      d: `M ${xScale(axisXValue) - (xScale.step() - xScale.bandwidth()) / 2} ${top} l ${xScale.step()} 0 l 0 ${height} l ${-xScale.step()} 0 Z`,
       className: classes.root,
       ownerState: {
         axisHighlight: 'band'
       }
-    }), type === 'line' && axisX !== null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlightPath.ChartsAxisHighlightPath, {
-      d: `M ${getXPosition(axisX.value)} ${top} L ${getXPosition(axisX.value)} ${top + height}`,
+    }), type === 'line' && axisXValue !== null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlightPath.ChartsAxisHighlightPath, {
+      d: `M ${getXPosition(axisXValue)} ${top} L ${getXPosition(axisXValue)} ${top + height}`,
       className: classes.root,
       ownerState: {
         axisHighlight: 'line'

package/ChartsAxisHighlight/ChartsYAxisHighlight.js

@@ -11,7 +11,7 @@ var _useScale = require("../hooks/useScale");
 var _isBandScale = require("../internals/isBandScale");
 var _useSelector = require("../internals/store/useSelector");
 var _useStore = require("../internals/store/useStore");
-var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
+var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
 var _hooks = require("../hooks");
 var _ChartsAxisHighlightPath = require("./ChartsAxisHighlightPath");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -28,26 +28,26 @@ var _jsxRuntime = require("react/jsx-runtime");
   } = (0, _hooks.useDrawingArea)();
   const yScale = (0, _useScale.useYScale)();
   const store = (0, _useStore.useStore)();
-  const axisY = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsInteractionYAxis);
+  const axisYValue = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartsInteractionYAxisValue);
   const getYPosition = (0, _useScale.getValueToPositionMapper)(yScale);
-  const isBandScaleY = type === 'band' && axisY !== null && (0, _isBandScale.isBandScale)(yScale);
+  const isBandScaleY = type === 'band' && axisYValue !== null && (0, _isBandScale.isBandScale)(yScale);
   if (process.env.NODE_ENV !== 'production') {
-    const isError = isBandScaleY && yScale(axisY.value) === undefined;
+    const isError = isBandScaleY && yScale(axisYValue) === undefined;
     if (isError) {
       console.error([`MUI X: The position value provided for the axis is not valid for the current scale.`, `This probably means something is wrong with the data passed to the chart.`, `The ChartsAxisHighlight component will not be displayed.`].join('\n'));
     }
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [isBandScaleY && yScale(axisY.value) !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlightPath.ChartsAxisHighlightPath, {
+    children: [isBandScaleY && yScale(axisYValue) !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlightPath.ChartsAxisHighlightPath, {
       d: `M ${left} ${
       // @ts-expect-error, yScale value is checked in the statement above
-      yScale(axisY.value) - (yScale.step() - yScale.bandwidth()) / 2} l 0 ${yScale.step()} l ${width} 0 l 0 ${-yScale.step()} Z`,
+      yScale(axisYValue) - (yScale.step() - yScale.bandwidth()) / 2} l 0 ${yScale.step()} l ${width} 0 l 0 ${-yScale.step()} Z`,
       className: classes.root,
       ownerState: {
         axisHighlight: 'band'
       }
-    }), type === 'line' && axisY !== null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlightPath.ChartsAxisHighlightPath, {
-      d: `M ${left} ${getYPosition(axisY.value)} L ${left + width} ${getYPosition(axisY.value)}`,
+    }), type === 'line' && axisYValue !== null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlightPath.ChartsAxisHighlightPath, {
+      d: `M ${left} ${getYPosition(axisYValue)} L ${left + width} ${getYPosition(axisYValue)}`,
       className: classes.root,
       ownerState: {
         axisHighlight: 'line'

package/ChartsOverlay/ChartsLoadingOverlay.js

@@ -18,7 +18,7 @@ const StyledText = (0, _styles.styled)('text')(({
   theme
 }) => (0, _extends2.default)({}, theme.typography.body2, {
   stroke: 'none',
-  fill: theme.palette.text.primary,
+  fill: (theme.vars || theme).palette.text.primary,
   shapeRendering: 'crispEdges',
   textAnchor: 'middle',
   dominantBaseline: 'middle'

package/ChartsOverlay/ChartsNoDataOverlay.js

@@ -18,7 +18,7 @@ const StyledText = (0, _styles.styled)('text')(({
   theme
 }) => (0, _extends2.default)({}, theme.typography.body2, {
   stroke: 'none',
-  fill: theme.palette.text.primary,
+  fill: (theme.vars || theme).palette.text.primary,
   shapeRendering: 'crispEdges',
   textAnchor: 'middle',
   dominantBaseline: 'middle'

package/ChartsTooltip/ChartsTooltipContainer.js

@@ -22,6 +22,7 @@ var _useSelector = require("../internals/store/useSelector");
 var _useStore = require("../internals/store/useStore");
 var _hooks = require("../hooks");
 var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
+var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["trigger", "classes", "children"];
 const ChartsTooltipRoot = (0, _styles.styled)(_Popper.default, {
@@ -67,7 +68,7 @@ function ChartsTooltipContainer(inProps) {
   const store = (0, _useStore.useStore)();
   const isOpen = (0, _useSelector.useSelector)(store,
   // eslint-disable-next-line no-nested-ternary
-  trigger === 'axis' ? axisHasData(xAxis) ? _useChartInteraction.selectorChartsInteractionXAxisIsDefined : _useChartInteraction.selectorChartsInteractionYAxisIsDefined : _useChartInteraction.selectorChartsInteractionItemIsDefined);
+  trigger === 'axis' ? axisHasData(xAxis) ? _useChartCartesianAxis.selectorChartsInteractionXAxisIsDefined : _useChartCartesianAxis.selectorChartsInteractionYAxisIsDefined : _useChartInteraction.selectorChartsInteractionItemIsDefined);
   const popperOpen = pointerType !== null && isOpen; // tooltipHasData;
 
   React.useEffect(() => {

package/ChartsTooltip/useAxisTooltip.js

@@ -14,13 +14,13 @@ var _isCartesian = require("../internals/isCartesian");
 var _utils = require("./utils");
 var _useAxis = require("../hooks/useAxis");
 var _useZAxis = require("../hooks/useZAxis");
-var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
+var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
 function useAxisTooltip() {
   const defaultXAxis = (0, _useAxis.useXAxis)();
   const defaultYAxis = (0, _useAxis.useYAxis)();
   const xAxisHasData = defaultXAxis.data !== undefined && defaultXAxis.data.length !== 0;
   const store = (0, _useStore.useStore)();
-  const axisData = (0, _useSelector.useSelector)(store, xAxisHasData ? _useChartInteraction.selectorChartsInteractionXAxis : _useChartInteraction.selectorChartsInteractionYAxis);
+  const axisData = (0, _useSelector.useSelector)(store, xAxisHasData ? _useChartCartesianAxis.selectorChartsInteractionXAxis : _useChartCartesianAxis.selectorChartsInteractionYAxis);
   const series = (0, _useSeries.useSeries)();
   const {
     xAxis

package/LineChart/CircleMarkElement.js

@@ -17,7 +17,7 @@ var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _useItemHighlighted = require("../hooks/useItemHighlighted");
 var _markElementClasses = require("./markElementClasses");
 var _useSelector = require("../internals/store/useSelector");
-var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
+var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
 var _useStore = require("../internals/store/useStore");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["x", "y", "id", "classes", "color", "dataIndex", "onClick", "skipAnimation"];
@@ -58,7 +58,7 @@ function CircleMarkElement(props) {
     seriesId: id
   });
   const store = (0, _useStore.useStore)();
-  const xAxisIdentifier = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsInteractionXAxis);
+  const xAxisIdentifier = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartsInteractionXAxis);
   const cx = (0, _web.useSpringValue)(x, {
     immediate: skipAnimation
   });

package/LineChart/LineHighlightPlot.js

@@ -19,7 +19,7 @@ var _constants = require("../constants");
 var _useLineSeries = require("../hooks/useLineSeries");
 var _getColor = _interopRequireDefault(require("./seriesConfig/getColor"));
 var _ChartProvider = require("../context/ChartProvider");
-var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
+var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
 var _useAxis = require("../hooks/useAxis");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps"];
@@ -52,7 +52,7 @@ function LineHighlightPlot(props) {
     instance
   } = (0, _ChartProvider.useChartContext)();
   const store = (0, _useStore.useStore)();
-  const xAxisIdentifier = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsInteractionXAxis);
+  const xAxisIdentifier = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartsInteractionXAxis);
   const highlightedIndex = xAxisIdentifier?.index;
   if (highlightedIndex === undefined) {
     return null;

package/LineChart/MarkElement.js

@@ -18,7 +18,7 @@ var _getSymbol = require("../internals/getSymbol");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _useItemHighlighted = require("../hooks/useItemHighlighted");
 var _markElementClasses = require("./markElementClasses");
-var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
+var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
 var _useSelector = require("../internals/store/useSelector");
 var _useStore = require("../internals/store/useStore");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -70,7 +70,7 @@ function MarkElement(props) {
     seriesId: id
   });
   const store = (0, _useStore.useStore)();
-  const xAxisIdentifier = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsInteractionXAxis);
+  const xAxisIdentifier = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartsInteractionXAxis);
   const cx = (0, _web.useSpringValue)(x, {
     immediate: skipAnimation
   });

package/LineChart/useLineChartProps.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { ChartsAxisProps } from "../ChartsAxis/index.js";
 import { ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.js";
 import { ChartsClipPathProps } from "../ChartsClipPath/index.js";
@@ -35,5 +36,5 @@ export declare const useLineChartProps: (props: LineChartProps) => {
   axisHighlightProps: ChartsAxisHighlightProps;
   lineHighlightPlotProps: LineHighlightPlotProps;
   legendProps: ChartsLegendSlotExtension;
-  children: import("react").ReactNode;
+  children: React.ReactNode;
 };

package/LineChart/useLineChartProps.js

@@ -2,12 +2,14 @@
 'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useLineChartProps = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _constants = require("../constants");
 var _LineChart = require("./LineChart.plugins");
@@ -48,11 +50,12 @@ const useLineChartProps = props => {
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const id = (0, _useId.default)();
   const clipPathId = `${id}-clip-path`;
+  const seriesWithDefault = React.useMemo(() => series.map(s => (0, _extends2.default)({
+    disableHighlight: !!disableLineItemHighlight,
+    type: 'line'
+  }, s)), [disableLineItemHighlight, series]);
   const chartContainerProps = (0, _extends2.default)({}, other, {
-    series: series.map(s => (0, _extends2.default)({
-      disableHighlight: !!disableLineItemHighlight,
-      type: 'line'
-    }, s)),
+    series: seriesWithDefault,
     width,
     height,
     margin,

package/RadarChart/RadarAxisHighlight/useRadarAxisHighlight.js

@@ -11,7 +11,7 @@ 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");
-var _useChartInteraction = require("../../internals/plugins/featurePlugins/useChartInteraction");
+var _useChartPolarInteraction = require("../../internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors");
 function useRadarAxisHighlight(params) {
   const {
     includesNeighbors = false
@@ -26,10 +26,14 @@ function useRadarAxisHighlight(params) {
     instance
   } = (0, _useChartContext.useChartContext)();
   const store = (0, _useStore.useStore)();
-  const xAxisIdentifier = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsInteractionXAxis);
+  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 highlightedIndex = xAxisIdentifier?.index;
-  if (highlightedIndex === undefined) {
+  const highlightedIndex = rotationAxisIndex;
+  if (!rotationScale) {
+    return null;
+  }
+  if (highlightedIndex === null || highlightedIndex === -1) {
     return null;
   }
   if (radarSeries === undefined || radarSeries.length === 0) {
@@ -37,7 +41,7 @@ function useRadarAxisHighlight(params) {
   }
   const metric = radiusAxisIds[highlightedIndex];
   const radiusScale = radiusAxis[metric].scale;
-  const angle = rotationScale(xAxisIdentifier?.value);
+  const angle = rotationScale(rotationAxisValue);
   const radius = radiusScale.range()[1];
   return {
     center,

package/RadarChart/RadarGrid/RadarGrid.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { RadarGridProps } from "./RadarGrid.types.js";
-declare function RadarGrid(props: RadarGridProps): React.JSX.Element;
+declare function RadarGrid(props: RadarGridProps): React.JSX.Element | null;
 declare namespace RadarGrid {
   var propTypes: any;
 }

package/RadarChart/RadarGrid/RadarGrid.js

@@ -17,11 +17,15 @@ function RadarGrid(props) {
     divisions = 5,
     shape = 'sharp'
   } = props;
+  const gridData = (0, _useRadarGridData.useRadarGridData)();
+  if (gridData === null) {
+    return null;
+  }
   const {
     center,
     corners,
     radius
-  } = (0, _useRadarGridData.useRadarGridData)();
+  } = gridData;
   return shape === 'sharp' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SharpRadarGrid.SharpRadarGrid, {
     divisions: divisions,
     corners: corners,

package/RadarChart/RadarGrid/useRadarGridData.d.ts

@@ -8,4 +8,4 @@ export declare function useRadarGridData(): {
     y: number;
   }[];
   radius: number;
-};
+} | null;

package/RadarChart/RadarGrid/useRadarGridData.js

@@ -19,6 +19,9 @@ function useRadarGridData() {
   const drawingArea = (0, _useDrawingArea.useDrawingArea)();
   const cx = drawingArea.left + drawingArea.width / 2;
   const cy = drawingArea.top + drawingArea.height / 2;
+  if (!rotationScale || rotationScale.domain().length === 0) {
+    return null;
+  }
   const metrics = rotationScale.domain();
   const angles = metrics.map(key => rotationScale(key));
   return {

package/RadarChart/RadarSeriesPlot/useRadarSeriesData.js

@@ -29,8 +29,8 @@ function useRadarSeriesData(querySeriesId) {
     isFaded: isItemFaded,
     isHighlighted: isItemHighlighted
   } = (0, _useItemHighlightedGetter.useItemHighlightedGetter)();
-  const metrics = rotationScale.domain();
-  const angles = metrics.map(key => rotationScale(key));
+  const metrics = rotationScale?.domain() ?? [];
+  const angles = metrics.map(key => rotationScale?.(key));
   return radarSeries.map(series => {
     const seriesId = series.id;
     const isSeriesHighlighted = isItemHighlighted({

package/ScatterChart/useScatterChartProps.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { ChartsAxisProps } from "../ChartsAxis/index.js";
 import { ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.js";
 import { ChartsGridProps } from "../ChartsGrid/index.js";
@@ -24,5 +25,5 @@ export declare const useScatterChartProps: (props: ScatterChartProps) => {
   overlayProps: ChartsOverlayProps;
   legendProps: ChartsLegendSlotExtension;
   axisHighlightProps: ChartsAxisHighlightProps;
-  children: import("react").ReactNode;
+  children: React.ReactNode;
 };