@mui/x-charts 8.16.0 → 8.17.0

package/esm/RadarChart/RadarGrid/CircularRadarStripes.d.ts

@@ -1,6 +1,5 @@
-import * as React from 'react';
 import { RadarGridStripeRenderProps } from "./RadarGrid.types.js";
 /**
  * @ignore - internal component.
  */
-export declare function CircularRadarStripes(props: RadarGridStripeRenderProps): React.JSX.Element;
+export declare function CircularRadarStripes(props: RadarGridStripeRenderProps): import("react/jsx-runtime").JSX.Element;

package/esm/RadarChart/RadarGrid/RadarGrid.d.ts

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

package/esm/RadarChart/RadarGrid/SharpRadarGrid.d.ts

@@ -1,6 +1,5 @@
-import * as React from 'react';
 import { RadarGridRenderProps } from "./RadarGrid.types.js";
 /**
  * @ignore - internal component.
  */
-export declare function SharpRadarGrid(props: RadarGridRenderProps): React.JSX.Element;
+export declare function SharpRadarGrid(props: RadarGridRenderProps): import("react/jsx-runtime").JSX.Element;

package/esm/RadarChart/RadarGrid/SharpRadarStripes.d.ts

@@ -1,6 +1,5 @@
-import * as React from 'react';
 import { RadarGridStripeRenderProps } from "./RadarGrid.types.js";
 /**
  * @ignore - internal component.
  */
-export declare function SharpRadarStripes(props: RadarGridStripeRenderProps): React.JSX.Element;
+export declare function SharpRadarStripes(props: RadarGridStripeRenderProps): import("react/jsx-runtime").JSX.Element;

package/esm/RadarChart/RadarMetricLabels/RadarMetricLabels.d.ts

@@ -1,3 +1,2 @@
-import * as React from 'react';
-declare function RadarMetricLabels(): React.JSX.Element;
+declare function RadarMetricLabels(): import("react/jsx-runtime").JSX.Element;
 export { RadarMetricLabels };

package/esm/RadarChart/RadarSeriesPlot/RadarSeriesArea.d.ts

@@ -16,7 +16,7 @@ interface GetPathPropsParams {
   color: string;
 }
 export declare function getPathProps(params: GetPathPropsParams): React.SVGProps<SVGPathElement>;
-declare function RadarSeriesArea(props: RadarSeriesAreaProps): React.JSX.Element;
+declare function RadarSeriesArea(props: RadarSeriesAreaProps): import("react/jsx-runtime").JSX.Element;
 declare namespace RadarSeriesArea {
   var propTypes: any;
 }

package/esm/RadarChart/RadarSeriesPlot/RadarSeriesMarks.d.ts

@@ -16,7 +16,7 @@ interface GetCirclePropsParams {
   color: string;
 }
 export declare function getCircleProps(params: GetCirclePropsParams): React.SVGProps<SVGCircleElement>;
-declare function RadarSeriesMarks(props: RadarSeriesMarksProps): React.JSX.Element;
+declare function RadarSeriesMarks(props: RadarSeriesMarksProps): import("react/jsx-runtime").JSX.Element;
 declare namespace RadarSeriesMarks {
   var propTypes: any;
 }

package/esm/RadarChart/RadarSeriesPlot/RadarSeriesMarks.js

@@ -49,7 +49,6 @@ function RadarSeriesMarks(props) {
     children: seriesCoordinates?.map(({
       seriesId: id,
       points,
-      color,
       hideMark,
       fillArea
     }) => {
@@ -60,7 +59,7 @@ function RadarSeriesMarks(props) {
         children: points.map((point, index) => /*#__PURE__*/_jsx("circle", _extends({}, getCircleProps({
           seriesId: id,
           point,
-          color,
+          color: point.color,
           fillArea,
           isFaded,
           isHighlighted,

package/esm/RadarChart/RadarSeriesPlot/RadarSeriesPlot.d.ts

@@ -1,6 +1,5 @@
-import * as React from 'react';
 import { RadarSeriesPlotProps } from "./RadarSeriesPlot.types.js";
-declare function RadarSeriesPlot(props: RadarSeriesPlotProps): React.JSX.Element;
+declare function RadarSeriesPlot(props: RadarSeriesPlotProps): import("react/jsx-runtime").JSX.Element;
 declare namespace RadarSeriesPlot {
   var propTypes: any;
 }

package/esm/RadarChart/RadarSeriesPlot/RadarSeriesPlot.js

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useRadarSeriesData } from "./useRadarSeriesData.js";
 import { useInteractionAllItemProps } from "../../hooks/useInteractionItemProps.js";
@@ -52,7 +51,7 @@ function RadarSeriesPlot(props) {
         }, interactionProps[seriesIndex]), seriesId), !hideMark && points.map((point, index) => /*#__PURE__*/_jsx("circle", _extends({}, getCircleProps({
           seriesId,
           point,
-          color,
+          color: point.color,
           fillArea,
           isFaded,
           isHighlighted,

package/esm/RadarChart/RadarSeriesPlot/useRadarSeriesData.d.ts

@@ -14,11 +14,14 @@ export declare function useRadarSeriesData(querySeriesId?: SeriesId): {
     isItemHighlighted: boolean;
     isItemFaded: boolean;
     dataIndex: number;
+    value: number;
+    color: string;
   }[];
   type: "radar";
   label?: string | ((location: "tooltip" | "legend") => string) | undefined;
   labelMarkType?: import("../../internals/index.js").ChartsLabelMarkType | undefined;
   highlightScope?: import("../../index.js").HighlightScope | undefined;
+  colorGetter?: ((data: import("../../internals/index.js").ColorCallbackValue<number>) => string) | undefined;
   hideMark?: boolean | undefined;
   fillArea?: boolean | undefined;
   data: number[];

package/esm/RadarChart/RadarSeriesPlot/useRadarSeriesData.js

@@ -4,6 +4,7 @@ import { useRadarSeries } from "../../hooks/useRadarSeries.js";
 import { useRadiusAxes } from "../../hooks/useAxis.js";
 import { useItemHighlightedGetter } from "../../hooks/useItemHighlightedGetter.js";
 import { useChartContext } from "../../context/ChartProvider/useChartContext.js";
+import { getSeriesColorFn } from "../../internals/getSeriesColorFn.js";
 
 /**
  * This hook provides all the data needed to display radar series.
@@ -33,6 +34,7 @@ export function useRadarSeriesData(querySeriesId) {
     const isSeriesFaded = !isSeriesHighlighted && isItemFaded({
       seriesId
     });
+    const getColor = getSeriesColorFn(series);
     return _extends({}, series, {
       seriesId: series.id,
       isSeriesHighlighted,
@@ -54,7 +56,12 @@ export function useRadarSeriesData(querySeriesId) {
           y,
           isItemHighlighted: highlighted,
           isItemFaded: faded,
-          dataIndex
+          dataIndex,
+          value,
+          color: getColor({
+            value,
+            dataIndex
+          })
         };
       })
     });

package/esm/RadarChart/seriesConfig/getColor.js

@@ -1,4 +1,15 @@
+import { getSeriesColorFn } from "../../internals/getSeriesColorFn.js";
 const getColor = series => {
-  return () => series.color;
+  const getSeriesColor = getSeriesColorFn(series);
+  return dataIndex => {
+    if (dataIndex === undefined) {
+      return series.color;
+    }
+    const value = series.data[dataIndex];
+    return getSeriesColor({
+      value,
+      dataIndex
+    });
+  };
 };
 export default getColor;

package/esm/ScatterChart/BatchScatter.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { DefaultizedScatterSeriesType } from "../models/seriesType/scatter.js";
 import { D3Scale } from "../models/axis.js";
 import { ScatterClasses } from "./scatterClasses.js";
@@ -29,4 +28,4 @@ export interface BatchScatterPathsProps {
  *
  * You can read about all the limitations [here](https://mui.com/x/react-charts/scatter/#performance).
  */
-export declare function BatchScatter(props: BatchScatterProps): React.JSX.Element;
+export declare function BatchScatter(props: BatchScatterProps): import("react/jsx-runtime").JSX.Element;

package/esm/ScatterChart/BatchScatter.js

@@ -119,10 +119,10 @@ export function BatchScatter(props) {
   const {
     store
   } = useChartContext();
-  const isSeriesHighlighted = useSelector(store, selectorChartIsSeriesHighlighted, [series.id]);
-  const isSeriesFaded = useSelector(store, selectorChartIsSeriesFaded, [series.id]);
-  const seriesHighlightedItem = useSelector(store, selectorChartSeriesHighlightedItem, [series.id]);
-  const seriesUnfadedItem = useSelector(store, selectorChartSeriesUnfadedItem, [series.id]);
+  const isSeriesHighlighted = useSelector(store, selectorChartIsSeriesHighlighted, series.id);
+  const isSeriesFaded = useSelector(store, selectorChartIsSeriesFaded, series.id);
+  const seriesHighlightedItem = useSelector(store, selectorChartSeriesHighlightedItem, series.id);
+  const seriesUnfadedItem = useSelector(store, selectorChartSeriesUnfadedItem, series.id);
   const highlightedModifier = 1.2;
   const markerSize = series.markerSize * (isSeriesHighlighted ? highlightedModifier : 1);
   const classes = useUtilityClasses(inClasses);

package/esm/ScatterChart/Scatter.d.ts

@@ -9,7 +9,12 @@ export interface ScatterProps {
   xScale: D3Scale;
   yScale: D3Scale;
   color: string;
-  colorGetter?: ColorGetter<'scatter'>;
+  /**
+   * Function to get the color of a scatter item given its data index.
+   * The data index argument is optional. If not provided, the color for the entire series is returned.
+   * If provided, the color for the specific scatter item is returned.
+   */
+  colorGetter: ColorGetter<'scatter'>;
   /**
    * Callback fired when clicking on a scatter item.
    * @param {MouseEvent} event Mouse event recorded on the `<svg/>` element.
@@ -32,7 +37,7 @@ export interface ScatterSlotProps extends ScatterMarkerSlotProps {}
  *
  * - [Scatter API](https://mui.com/x/api/charts/scatter/)
  */
-declare function Scatter(props: ScatterProps): React.JSX.Element;
+declare function Scatter(props: ScatterProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Scatter {
   var propTypes: any;
 }

package/esm/ScatterChart/Scatter.js

@@ -32,7 +32,6 @@ function Scatter(props) {
     series,
     xScale,
     yScale,
-    color,
     colorGetter,
     onItemClick,
     classes: inClasses,
@@ -76,7 +75,7 @@ function Scatter(props) {
       });
       return /*#__PURE__*/_jsx(Marker, _extends({
         dataIndex: dataPoint.dataIndex,
-        color: colorGetter ? colorGetter(dataPoint.dataIndex) : color,
+        color: colorGetter(dataPoint.dataIndex),
         isHighlighted: isItemHighlighted,
         isFaded: isItemFaded,
         x: dataPoint.x,
@@ -100,7 +99,12 @@ process.env.NODE_ENV !== "production" ? Scatter.propTypes = {
   // ----------------------------------------------------------------------
   classes: PropTypes.object,
   color: PropTypes.string.isRequired,
-  colorGetter: PropTypes.func,
+  /**
+   * Function to get the color of a scatter item given its data index.
+   * The data index argument is optional. If not provided, the color for the entire series is returned.
+   * If provided, the color for the specific scatter item is returned.
+   */
+  colorGetter: PropTypes.func.isRequired,
   /**
    * Callback fired when clicking on a scatter item.
    * @param {MouseEvent} event Mouse event recorded on the `<svg/>` element.

package/esm/ScatterChart/ScatterMarker.d.ts

@@ -39,7 +39,7 @@ export interface ScatterMarkerProps {
    */
   onClick?: (event: React.MouseEvent<SVGElement, MouseEvent>) => void;
 }
-declare function ScatterMarker(props: ScatterMarkerProps): React.JSX.Element;
+declare function ScatterMarker(props: ScatterMarkerProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ScatterMarker {
   var propTypes: any;
 }

package/esm/ScatterChart/ScatterPlot.d.ts

@@ -38,7 +38,7 @@ export interface ScatterPlotProps extends Pick<ScatterProps, 'onItemClick'> {
  *
  * - [ScatterPlot API](https://mui.com/x/api/charts/scatter-plot/)
  */
-declare function ScatterPlot(props: ScatterPlotProps): React.JSX.Element | null;
+declare function ScatterPlot(props: ScatterPlotProps): import("react/jsx-runtime").JSX.Element | null;
 declare namespace ScatterPlot {
   var propTypes: any;
 }

package/esm/ScatterChart/ScatterPlot.js

@@ -7,7 +7,7 @@ import { Scatter } from "./Scatter.js";
 import { useScatterSeriesContext } from "../hooks/useScatterSeries.js";
 import { useXAxes, useYAxes } from "../hooks/index.js";
 import { useZAxes } from "../hooks/useZAxis.js";
-import { seriesConfig as scatterSeriesConfig } from "./seriesConfig/index.js";
+import { scatterSeriesConfig } from "./seriesConfig/index.js";
 import { BatchScatter } from "./BatchScatter.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**

package/esm/ScatterChart/seriesConfig/getColor.js

@@ -1,7 +1,9 @@
+import { getSeriesColorFn } from "../../internals/getSeriesColorFn.js";
 const getColor = (series, xAxis, yAxis, zAxis) => {
   const zColorScale = zAxis?.colorScale;
   const yColorScale = yAxis?.colorScale;
   const xColorScale = xAxis?.colorScale;
+  const getSeriesColor = getSeriesColorFn(series);
   if (zColorScale) {
     return dataIndex => {
       if (dataIndex === undefined) {
@@ -14,9 +16,15 @@ const getColor = (series, xAxis, yAxis, zAxis) => {
         }
       }
       const value = series.data[dataIndex];
-      const color = value === null ? series.color : zColorScale(value.z);
+      const color = value === null ? getSeriesColor({
+        value,
+        dataIndex
+      }) : zColorScale(value.z);
       if (color === null) {
-        return series.color;
+        return getSeriesColor({
+          value,
+          dataIndex
+        });
       }
       return color;
     };
@@ -27,9 +35,15 @@ const getColor = (series, xAxis, yAxis, zAxis) => {
         return series.color;
       }
       const value = series.data[dataIndex];
-      const color = value === null ? series.color : yColorScale(value.y);
+      const color = value === null ? getSeriesColor({
+        value,
+        dataIndex
+      }) : yColorScale(value.y);
       if (color === null) {
-        return series.color;
+        return getSeriesColor({
+          value,
+          dataIndex
+        });
       }
       return color;
     };
@@ -40,13 +54,28 @@ const getColor = (series, xAxis, yAxis, zAxis) => {
         return series.color;
       }
       const value = series.data[dataIndex];
-      const color = value === null ? series.color : xColorScale(value.x);
+      const color = value === null ? getSeriesColor({
+        value,
+        dataIndex
+      }) : xColorScale(value.x);
       if (color === null) {
-        return series.color;
+        return getSeriesColor({
+          value,
+          dataIndex
+        });
       }
       return color;
     };
   }
-  return () => series.color;
+  return dataIndex => {
+    if (dataIndex === undefined) {
+      return series.color;
+    }
+    const value = series.data[dataIndex];
+    return getSeriesColor({
+      value,
+      dataIndex
+    });
+  };
 };
 export default getColor;

package/esm/ScatterChart/seriesConfig/index.d.ts

@@ -1,2 +1,2 @@
 import { ChartSeriesTypeConfig } from "../../internals/plugins/models/seriesConfig/index.js";
-export declare const seriesConfig: ChartSeriesTypeConfig<'scatter'>;
+export declare const scatterSeriesConfig: ChartSeriesTypeConfig<'scatter'>;

package/esm/ScatterChart/seriesConfig/index.js

@@ -5,7 +5,7 @@ import legendGetter from "./legend.js";
 import tooltipGetter from "./tooltip.js";
 import getSeriesWithDefaultValues from "./getSeriesWithDefaultValues.js";
 import tooltipItemPositionGetter from "./tooltipPosition.js";
-export const seriesConfig = {
+export const scatterSeriesConfig = {
   seriesProcessor,
   colorProcessor: getColor,
   legendGetter,

package/esm/context/ChartProvider/ChartProvider.d.ts

@@ -4,5 +4,5 @@ import { ChartAnyPluginSignature } from "../../internals/plugins/models/index.js
 import { ChartSeriesConfig } from "../../internals/plugins/models/seriesConfig/index.js";
 import { ChartSeriesType } from "../../models/seriesType/config.js";
 export declare const defaultSeriesConfig: ChartSeriesConfig<'bar' | 'scatter' | 'line' | 'pie'>;
-declare function ChartProvider<TSeriesType extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[]>(props: React.PropsWithChildren<ChartProviderProps<TSeriesType, TSignatures>>): React.JSX.Element;
+declare function ChartProvider<TSeriesType extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[]>(props: React.PropsWithChildren<ChartProviderProps<TSeriesType, TSignatures>>): import("react/jsx-runtime").JSX.Element;
 export { ChartProvider };

package/esm/context/ChartProvider/ChartProvider.js

@@ -7,10 +7,10 @@ import { useChartCartesianAxis } from "../../internals/plugins/featurePlugins/us
 import { useChartInteraction } from "../../internals/plugins/featurePlugins/useChartInteraction/index.js";
 import { useChartZAxis } from "../../internals/plugins/featurePlugins/useChartZAxis/index.js";
 import { useChartHighlight } from "../../internals/plugins/featurePlugins/useChartHighlight/useChartHighlight.js";
-import { seriesConfig as barSeriesConfig } from "../../BarChart/seriesConfig/index.js";
-import { seriesConfig as scatterSeriesConfig } from "../../ScatterChart/seriesConfig/index.js";
-import { seriesConfig as lineSeriesConfig } from "../../LineChart/seriesConfig/index.js";
-import { seriesConfig as pieSeriesConfig } from "../../PieChart/seriesConfig/index.js";
+import { barSeriesConfig } from "../../BarChart/seriesConfig/index.js";
+import { scatterSeriesConfig } from "../../ScatterChart/seriesConfig/index.js";
+import { lineSeriesConfig } from "../../LineChart/seriesConfig/index.js";
+import { pieSeriesConfig } from "../../PieChart/seriesConfig/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const defaultSeriesConfig = {
   bar: barSeriesConfig,

package/esm/context/ChartProvider/ChartProvider.types.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { ChartAnyPluginSignature, ChartInstance, ChartPublicAPI, ConvertSignaturesIntoPlugins, MergeSignaturesProperty } from "../../internals/plugins/models/index.js";
-import type { ChartStore } from "../../internals/plugins/utils/ChartStore.js";
+import { Store } from '@mui/x-internals/store';
+import type { ChartAnyPluginSignature, ChartInstance, ChartPublicAPI, ChartState, ConvertSignaturesIntoPlugins, MergeSignaturesProperty } from "../../internals/plugins/models/index.js";
 import type { ChartCorePluginSignatures } from "../../internals/plugins/corePlugins/index.js";
 import type { ChartSeriesConfig } from "../../internals/plugins/models/seriesConfig/index.js";
 import type { UseChartBaseProps } from "../../internals/store/useCharts.types.js";
@@ -17,7 +17,7 @@ export type ChartContextValue<TSignatures extends readonly ChartAnyPluginSignatu
   /**
    * The internal state of the chart.
    */
-  store: ChartStore<TSignatures>;
+  store: Store<ChartState<TSignatures, TOptionalSignatures>>;
   /**
    * The ref to the <svg />.
    */

package/esm/context/ChartsSlotsContext.d.ts

@@ -16,5 +16,5 @@ interface ChartsSlotsProviderProps {
   slotProps?: Partial<ChartsSlotProps>;
   defaultSlots: ChartsSlots;
 }
-export declare function ChartsSlotsProvider(props: React.PropsWithChildren<ChartsSlotsProviderProps>): React.JSX.Element;
+export declare function ChartsSlotsProvider(props: React.PropsWithChildren<ChartsSlotsProviderProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/esm/hooks/index.d.ts

@@ -6,6 +6,7 @@ export * from "./useZAxis.js";
 export * from "./useColorScale.js";
 export * from "./useSvgRef.js";
 export * from "./useSeries.js";
+export * from "./useDataset.js";
 export * from "./useScatterSeries.js";
 export * from "./usePieSeries.js";
 export * from "./useBarSeries.js";

package/esm/hooks/index.js

@@ -6,6 +6,7 @@ export * from "./useZAxis.js";
 export * from "./useColorScale.js";
 export * from "./useSvgRef.js";
 export * from "./useSeries.js";
+export * from "./useDataset.js";
 export * from "./useScatterSeries.js";
 export * from "./usePieSeries.js";
 export * from "./useBarSeries.js";

package/esm/hooks/useDataset.d.ts

@@ -0,0 +1,6 @@
+import { DatasetType } from "../models/seriesType/config.js";
+/**
+ * Get access to the dataset used to populate series and axes data.
+ * @returns {DatasetType | undefined} The dataset array if provided, otherwise undefined.
+ */
+export declare function useDataset<T extends DatasetType>(): Readonly<T> | undefined;

package/esm/hooks/useDataset.js

@@ -0,0 +1,13 @@
+'use client';
+
+import { useStore } from "../internals/store/useStore.js";
+import { useSelector } from "../internals/store/useSelector.js";
+import { selectorChartDataset } from "../internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors.js";
+/**
+ * Get access to the dataset used to populate series and axes data.
+ * @returns {DatasetType | undefined} The dataset array if provided, otherwise undefined.
+ */
+export function useDataset() {
+  const store = useStore();
+  return useSelector(store, selectorChartDataset);
+}

package/esm/hooks/useInteractionItemProps.js

@@ -33,14 +33,11 @@ export const useInteractionItemProps = (data, skip) => {
       }
     };
   }, [onPointerLeave]);
-  if (skip) {
-    return {};
-  }
-  return {
+  return React.useMemo(() => skip ? {} : {
     onPointerEnter,
     onPointerLeave,
     onPointerDown
-  };
+  }, [skip, onPointerEnter, onPointerLeave]);
 };
 export const useInteractionAllItemProps = (data, skip) => {
   const {

package/esm/hooks/useIsItemFocused.js

@@ -1,6 +1,8 @@
 'use client';
 
-import { useFocusedItem } from "./useFocusedItem.js";
+import { useStore } from "../internals/store/useStore.js";
+import { useSelector } from "../internals/store/useSelector.js";
+import { selectorChartsItemIsFocused } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
 /**
  * A hook to check if an item has the focus.
  *
@@ -10,6 +12,6 @@ import { useFocusedItem } from "./useFocusedItem.js";
  * @returns {boolean} the focus state
  */
 export function useIsItemFocused(item) {
-  const focusedItem = useFocusedItem();
-  return focusedItem !== null && focusedItem.seriesType === item.seriesType && focusedItem.seriesId === item.seriesId && focusedItem.dataIndex === item.dataIndex;
+  const store = useStore();
+  return useSelector(store, selectorChartsItemIsFocused, item);
 }

package/esm/hooks/useItemHighlighted.js

@@ -14,8 +14,8 @@ import { selectorChartsIsFaded, selectorChartsIsHighlighted } from "../internals
  */
 export function useItemHighlighted(item) {
   const store = useStore();
-  const isHighlighted = useSelector(store, selectorChartsIsHighlighted, [item]);
-  const isFaded = useSelector(store, selectorChartsIsFaded, [item]);
+  const isHighlighted = useSelector(store, selectorChartsIsHighlighted, item);
+  const isFaded = useSelector(store, selectorChartsIsFaded, item);
   return {
     isHighlighted,
     isFaded: !isHighlighted && isFaded

package/esm/hooks/useItemHighlightedGetter.js

@@ -3,7 +3,6 @@
 import { useSelector } from "../internals/store/useSelector.js";
 import { useStore } from "../internals/store/useStore.js";
 import { selectorChartsIsFadedCallback, selectorChartsIsHighlightedCallback } from "../internals/plugins/featurePlugins/useChartHighlight/useChartHighlight.selectors.js";
-
 /**
  * A hook to check the highlighted state of multiple items.
  * If you're interested by a single one, consider using `useItemHighlighted`.

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.16.0
+ * @mui/x-charts v8.17.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/internals/colorScale.d.ts

@@ -2,4 +2,4 @@ import { ScaleOrdinal } from '@mui/x-charts-vendor/d3-scale';
 import { ContinuousColorConfig, PiecewiseColorConfig, OrdinalColorConfig } from "../models/colorMapping.js";
 export declare function getSequentialColorScale<Value extends number | Date>(config: ContinuousColorConfig<Value> | PiecewiseColorConfig<Value>): import("@mui/x-charts-vendor/d3-scale").ScaleThreshold<Value, string, never> | import("@mui/x-charts-vendor/d3-scale").ScaleSequential<string, never>;
 export declare function getOrdinalColorScale<Value extends number | Date | string>(config: OrdinalColorConfig<Value>): ScaleOrdinal<Value, string, null | string> | ScaleOrdinal<number, string, null | string>;
-export declare function getColorScale(config: ContinuousColorConfig | PiecewiseColorConfig | OrdinalColorConfig): ScaleOrdinal<string | number | Date, string, string | null> | ScaleOrdinal<number, string, string | null> | import("@mui/x-charts-vendor/d3-scale").ScaleSequential<string, never> | import("@mui/x-charts-vendor/d3-scale").ScaleThreshold<number | Date, string, never>;
+export declare function getColorScale(config: ContinuousColorConfig | PiecewiseColorConfig | OrdinalColorConfig): import("@mui/x-charts-vendor/d3-scale").ScaleSequential<string, never> | ScaleOrdinal<number, string, string | null> | ScaleOrdinal<string | number | Date, string, string | null> | import("@mui/x-charts-vendor/d3-scale").ScaleThreshold<number | Date, string, never>;

package/esm/internals/components/ChartsAxesGradients/ChartsAxesGradients.d.ts

@@ -1,2 +1 @@
-import * as React from 'react';
-export declare function ChartsAxesGradients(): React.JSX.Element | null;
+export declare function ChartsAxesGradients(): import("react/jsx-runtime").JSX.Element | null;

package/esm/internals/components/ChartsAxesGradients/ChartsContinuousGradient.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { ContinuousColorConfig } from "../../../models/colorMapping.js";
 type ChartsContinuousGradientProps = {
   isReversed?: boolean;
@@ -15,5 +14,5 @@ type ChartsContinuousGradientProps = {
    */
   gradientUnits?: 'objectBoundingBox' | 'userSpaceOnUse';
 };
-export default function ChartsContinuousGradient(props: ChartsContinuousGradientProps): React.JSX.Element | null;
+export default function ChartsContinuousGradient(props: ChartsContinuousGradientProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/esm/internals/components/ChartsAxesGradients/ChartsContinuousGradient.js

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { interpolateDate, interpolateNumber } from '@mui/x-charts-vendor/d3-interpolate';
 import { jsx as _jsx } from "react/jsx-runtime";
 const PX_PRECISION = 10;

package/esm/internals/components/ChartsAxesGradients/ChartsContinuousGradientObjectBound.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { ContinuousColorConfig } from "../../../models/colorMapping.js";
 type ChartsContinuousGradientObjectBoundProps = {
   isReversed?: boolean;
@@ -9,5 +8,5 @@ type ChartsContinuousGradientObjectBoundProps = {
 /**
  * Generates gradients to be used in tooltips and legends.
  */
-export default function ChartsContinuousGradientObjectBound(props: ChartsContinuousGradientObjectBoundProps): React.JSX.Element;
+export default function ChartsContinuousGradientObjectBound(props: ChartsContinuousGradientObjectBoundProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/esm/internals/components/ChartsAxesGradients/ChartsContinuousGradientObjectBound.js

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
 import { interpolateDate, interpolateNumber } from '@mui/x-charts-vendor/d3-interpolate';
 import { jsx as _jsx } from "react/jsx-runtime";
 const PX_PRECISION = 10;

package/esm/internals/components/ChartsAxesGradients/ChartsPiecewiseGradient.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { PiecewiseColorConfig } from "../../../models/colorMapping.js";
 type ChartsPiecewiseGradientProps = {
   isReversed?: boolean;
@@ -8,5 +7,5 @@ type ChartsPiecewiseGradientProps = {
   scale: (value: any) => number | undefined;
   colorMap: PiecewiseColorConfig;
 };
-export default function ChartsPiecewiseGradient(props: ChartsPiecewiseGradientProps): React.JSX.Element | null;
+export default function ChartsPiecewiseGradient(props: ChartsPiecewiseGradientProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/esm/internals/createSeriesSelectorOfType.js

@@ -1,11 +1,11 @@
-import { fastArrayCompare } from '@mui/x-internals/fastArrayCompare';
+// import { fastArrayCompare } from '@mui/x-internals/fastArrayCompare';
 import { warnOnce } from '@mui/x-internals/warning';
 import { createSelector } from "./plugins/utils/selectors.js";
 import { selectorChartSeriesProcessed } from "./plugins/corePlugins/useChartSeries/useChartSeries.selectors.js";
 import { useStore } from "./store/useStore.js";
 import { useSelector } from "./store/useSelector.js";
 export function createSeriesSelectorsOfType(seriesType) {
-  const selectorSeriesWithIds = createSelector([selectorChartSeriesProcessed, (_, ids) => ids], (processedSeries, ids) => {
+  const selectorSeriesWithIds = createSelector([selectorChartSeriesProcessed], (processedSeries, ids) => {
     if (!ids || Array.isArray(ids) && ids.length === 0) {
       return processedSeries[seriesType]?.seriesOrder?.map(seriesId => processedSeries[seriesType]?.series[seriesId]) ?? [];
     }
@@ -31,7 +31,9 @@ export function createSeriesSelectorsOfType(seriesType) {
   });
   return ids => {
     const store = useStore();
-    return useSelector(store, selectorSeriesWithIds, [ids], fastArrayCompare);
+    return useSelector(store, selectorSeriesWithIds, ids
+    // fastArrayCompare
+    );
   };
 }
 export function createAllSeriesSelectorOfType(seriesType) {