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

package/modern/internals/index.js

@@ -1,7 +1,5 @@
 // Components
 export * from "./components/ChartsAxesGradients/index.js";
-export * from "../ChartContainer/useChartContainerDimensions.js";
-export * from "../ChartContainer/ResizableContainer.js";
 
 // hooks
 export { useSeries } from "../hooks/useSeries.js";
@@ -26,14 +24,15 @@ export * from "./computeAxisValue.js";
 // contexts
 
 export * from "../context/CartesianProvider/index.js";
-export * from "../context/DrawingProvider.js";
-export * from "../context/InteractionProvider.js";
+export * from "../context/DrawingAreaProvider/index.js";
 export * from "../context/SeriesProvider/index.js";
 export * from "../context/ZAxisContextProvider.js";
 export * from "../context/PluginProvider/index.js";
 export * from "../context/AnimationProvider/index.js";
 export { getAxisExtremum } from "../context/CartesianProvider/getAxisExtremum.js";
 export * from "../context/ChartDataProvider/index.js";
+export * from "../context/SizeProvider/index.js";
+export * from "../context/ChartProvider/index.js";
 
 // series configuration
 export * from "../models/seriesType/config.js";

package/modern/internals/plugins/allPlugins.js

@@ -0,0 +1,3 @@
+// This file should be removed after creating all plugins  in favor of a file per chart type.
+import { useChartInteraction } from "./featurePlugins/useChartInteraction/index.js";
+export const ALL_PLUGINS = [useChartInteraction];

package/modern/internals/plugins/corePlugins/corePlugins.js

@@ -0,0 +1,7 @@
+import { useChartId } from "./useChartId/index.js";
+
+/**
+ * Internal plugins that create the tools used by the other plugins.
+ * These plugins are used by the Charts components.
+ */
+export const CHART_CORE_PLUGINS = [useChartId];

package/modern/internals/plugins/corePlugins/index.js

@@ -0,0 +1 @@
+export { CHART_CORE_PLUGINS } from "./corePlugins.js";

package/modern/internals/plugins/corePlugins/useChartId/index.js

@@ -0,0 +1 @@
+export { useChartId } from "./useChartId.js";

package/modern/internals/plugins/corePlugins/useChartId/useChartId.js

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { createChartDefaultId } from "./useChartId.utils.js";
+export const useChartId = ({
+  params,
+  store
+}) => {
+  React.useEffect(() => {
+    store.update(prevState => {
+      if (params.id === prevState.id.providedChartId && prevState.id.chartId !== undefined) {
+        return prevState;
+      }
+      return _extends({}, prevState, {
+        id: _extends({}, prevState.id, {
+          chartId: params.id ?? createChartDefaultId()
+        })
+      });
+    });
+  }, [store, params.id]);
+  return {};
+};
+useChartId.params = {
+  id: true
+};
+useChartId.getInitialState = ({
+  id
+}) => ({
+  id: {
+    chartId: createChartDefaultId(),
+    providedChartId: id
+  }
+});

package/modern/internals/plugins/corePlugins/useChartId/useChartId.selectors.js

@@ -0,0 +1,9 @@
+import { createSelector } from "../../utils/selectors.js";
+const selectorChartIdState = state => state.id;
+
+/**
+ * Get the id attribute of the chart.
+ * @param {ChartState<[UseChartIdSignature]>} state The state of the chart.
+ * @returns {string} The id attribute of the chart.
+ */
+export const selectorChartId = createSelector(selectorChartIdState, idState => idState.chartId);

package/modern/internals/plugins/corePlugins/useChartId/useChartId.types.js

@@ -0,0 +1 @@
+export {};

package/modern/internals/plugins/corePlugins/useChartId/useChartId.utils.js

@@ -0,0 +1,5 @@
+let globalChartDefaultId = 0;
+export const createChartDefaultId = () => {
+  globalChartDefaultId += 1;
+  return `mui-chart-${globalChartDefaultId}`;
+};

package/modern/internals/plugins/featurePlugins/useChartInteraction/index.js

@@ -0,0 +1,2 @@
+export { useChartInteraction } from "./useChartInteraction.js";
+export * from "./useChartInteraction.selectors.js";

package/modern/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.js

@@ -0,0 +1,73 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import useEventCallback from '@mui/utils/useEventCallback';
+export const useChartInteraction = ({
+  store
+}) => {
+  const cleanInteraction = useEventCallback(() => {
+    store.update(prev => _extends({}, prev, {
+      interaction: _extends({}, prev.interaction, {
+        axis: {
+          x: null,
+          y: null
+        },
+        item: null
+      })
+    }));
+  });
+  const setItemInteraction = useEventCallback(newItem => {
+    store.update(prev => _extends({}, prev, {
+      interaction: _extends({}, prev.interaction, {
+        item: newItem
+      })
+    }));
+  });
+  const setAxisInteraction = useEventCallback(({
+    x: newStateX,
+    y: newStateY
+  }) => {
+    store.update(prev => _extends({}, prev, {
+      interaction: _extends({}, prev.interaction, {
+        axis: _extends({}, prev.interaction.axis, prev.interaction.axis.x?.index !== newStateX?.index || prev.interaction.axis.x?.value !== newStateX?.value ? {
+          x: newStateX
+        } : {}, prev.interaction.axis.y?.index !== newStateY?.index || prev.interaction.axis.y?.value !== newStateY?.value ? {
+          y: newStateY
+        } : {})
+      })
+    }));
+  });
+  const enableVoronoid = useEventCallback(() => {
+    store.update(prev => _extends({}, prev, {
+      interaction: _extends({}, prev.interaction, {
+        isVoronoiEnabled: true
+      })
+    }));
+  });
+  const disableVoronoid = useEventCallback(() => {
+    store.update(prev => _extends({}, prev, {
+      interaction: _extends({}, prev.interaction, {
+        isVoronoiEnabled: false
+      })
+    }));
+  });
+  return {
+    params: {},
+    instance: {
+      cleanInteraction,
+      setItemInteraction,
+      setAxisInteraction,
+      enableVoronoid,
+      disableVoronoid
+    }
+  };
+};
+useChartInteraction.getInitialState = () => ({
+  interaction: {
+    item: null,
+    axis: {
+      x: null,
+      y: null
+    },
+    isVoronoiEnabled: false
+  }
+});
+useChartInteraction.params = {};

package/modern/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.selectors.js

@@ -0,0 +1,10 @@
+import { createSelector } from "../../utils/selectors.js";
+const selectInteraction = state => state.interaction;
+export const selectorChartsInteractionItem = createSelector(selectInteraction, interaction => interaction.item);
+export const selectorChartsInteractionAxis = createSelector(selectInteraction, interaction => interaction.axis);
+export const selectorChartsInteractionXAxis = createSelector(selectInteraction, interaction => interaction.axis.x);
+export const selectorChartsInteractionYAxis = createSelector(selectInteraction, interaction => interaction.axis.y);
+export const selectorChartsInteractionItemIsDefined = createSelector(selectorChartsInteractionItem, item => item !== null);
+export const selectorChartsInteractionXAxisIsDefined = createSelector(selectorChartsInteractionXAxis, x => x !== null);
+export const selectorChartsInteractionYAxisIsDefined = createSelector(selectorChartsInteractionYAxis, y => y !== null);
+export const selectorChartsInteractionIsVoronoiEnabled = createSelector(selectInteraction, interaction => interaction.isVoronoiEnabled);

package/modern/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types.js

@@ -0,0 +1 @@
+export {};

package/modern/internals/plugins/models/chart.js

@@ -0,0 +1 @@
+export {};

package/modern/internals/plugins/models/helpers.js

@@ -0,0 +1 @@
+export {};

package/modern/internals/plugins/models/index.js

@@ -0,0 +1,3 @@
+export * from "./helpers.js";
+export * from "./plugin.js";
+export * from "./chart.js";

package/modern/internals/plugins/models/plugin.js

@@ -0,0 +1 @@
+export {};

package/modern/internals/plugins/utils/ChartStore.js

@@ -0,0 +1,24 @@
+export class ChartStore {
+  constructor(value) {
+    this.value = void 0;
+    this.listeners = void 0;
+    this.subscribe = fn => {
+      this.listeners.add(fn);
+      return () => {
+        this.listeners.delete(fn);
+      };
+    };
+    this.getSnapshot = () => {
+      return this.value;
+    };
+    this.update = updater => {
+      const newState = updater(this.value);
+      if (newState !== this.value) {
+        this.value = newState;
+        this.listeners.forEach(l => l(newState));
+      }
+    };
+    this.value = value;
+    this.listeners = new Set();
+  }
+}

package/modern/internals/plugins/utils/selectors.js

@@ -0,0 +1,37 @@
+import { lruMemoize, createSelectorCreator } from 'reselect';
+const reselectCreateSelector = createSelectorCreator({
+  memoize: lruMemoize,
+  memoizeOptions: {
+    maxSize: 1,
+    equalityCheck: Object.is
+  }
+});
+const cache = new WeakMap();
+/**
+ * Method wrapping reselect's createSelector to provide caching for chart instances.
+ *
+ */
+export const createSelector = (...createSelectorArgs) => {
+  const selector = (state, selectorArgs) => {
+    const cacheKey = state.cacheKey;
+
+    // If there is no cache for the current chart instance, create one.
+    let cacheForCurrentChartInstance = cache.get(cacheKey);
+    if (!cacheForCurrentChartInstance) {
+      cacheForCurrentChartInstance = new Map();
+      cache.set(cacheKey, cacheForCurrentChartInstance);
+    }
+
+    // If there is a cached selector, execute it.
+    const cachedSelector = cacheForCurrentChartInstance.get(createSelectorArgs);
+    if (cachedSelector) {
+      return cachedSelector(state, selectorArgs);
+    }
+
+    // Otherwise, create a new selector and cache it and execute it.
+    const fn = reselectCreateSelector(...createSelectorArgs);
+    cacheForCurrentChartInstance.set(createSelectorArgs, fn);
+    return fn(state, selectorArgs);
+  };
+  return selector;
+};

package/modern/internals/store/useCharts.js

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { ChartStore } from "../plugins/utils/ChartStore.js";
+import { CHART_CORE_PLUGINS } from "../plugins/corePlugins/index.js";
+export function useChartApiInitialization(inputApiRef) {
+  const fallbackPublicApiRef = React.useRef({});
+  if (inputApiRef) {
+    if (inputApiRef.current == null) {
+      // eslint-disable-next-line react-compiler/react-compiler
+      inputApiRef.current = {};
+    }
+    return inputApiRef.current;
+  }
+  return fallbackPublicApiRef.current;
+}
+let globalId = 0;
+export function useCharts(inPlugins, props) {
+  const plugins = React.useMemo(() => [...CHART_CORE_PLUGINS, ...inPlugins], [inPlugins]);
+  const pluginParams = {}; // To generate when plugins use params.
+  const instanceRef = React.useRef({});
+  const instance = instanceRef.current;
+  const publicAPI = useChartApiInitialization(props.apiRef);
+  const innerSvgRef = React.useRef(null);
+  const storeRef = React.useRef(null);
+  if (storeRef.current == null) {
+    // eslint-disable-next-line react-compiler/react-compiler
+    globalId += 1;
+    const initialState = {
+      // TODO remove when the interaction moves to plugin
+      interaction: {
+        item: null,
+        axis: {
+          x: null,
+          y: null
+        }
+      },
+      cacheKey: {
+        id: globalId
+      }
+    };
+    plugins.forEach(plugin => {
+      if (plugin.getInitialState) {
+        Object.assign(initialState, plugin.getInitialState({}));
+      }
+    });
+    storeRef.current = new ChartStore(initialState);
+  }
+  const runPlugin = plugin => {
+    const pluginResponse = plugin({
+      instance,
+      params: pluginParams,
+      plugins: plugins,
+      store: storeRef.current,
+      svgRef: innerSvgRef
+    });
+    if (pluginResponse.publicAPI) {
+      Object.assign(publicAPI, pluginResponse.publicAPI);
+    }
+    if (pluginResponse.instance) {
+      Object.assign(instance, pluginResponse.instance);
+    }
+  };
+  plugins.forEach(runPlugin);
+  const contextValue = React.useMemo(() => ({
+    store: storeRef.current,
+    publicAPI,
+    instance,
+    svgRef: innerSvgRef
+  }), [instance, publicAPI]);
+  return {
+    contextValue
+  };
+}

package/modern/internals/store/useCharts.types.js

@@ -0,0 +1 @@
+export {};

package/modern/internals/store/useSelector.js

@@ -0,0 +1,6 @@
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector';
+const defaultCompare = Object.is;
+export const useSelector = (store, selector, args = undefined, equals = defaultCompare) => {
+  const selectorWithArgs = state => selector(state, args);
+  return useSyncExternalStoreWithSelector(store.subscribe, store.getSnapshot, store.getSnapshot, selectorWithArgs, equals);
+};

package/modern/internals/store/useStore.js

@@ -0,0 +1,17 @@
+import { useChartContext } from "../../context/ChartProvider/index.js";
+// This hook should be removed because user and us should not interact with the store directly, but with public/private APIs
+export function useStore(skipError) {
+  const context = useChartContext();
+  if (skipError) {
+    // TODO: Remove once store is used by all charts.
+    // This line is only for `useAxisEvents` which is in the surface of the Gauge.
+    // But the Gauge don't have store yet because it does not need the interaction provider.
+    // Will be fixed when every thing move to the store since every component will have access to it.
+    // @ts-ignore
+    return context?.store;
+  }
+  if (!context) {
+    throw new Error(['MUI X: Could not find the charts context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
+  }
+  return context.store;
+}

package/node/BarChart/AnimatedBarElement.js

@@ -0,0 +1,28 @@
+"use strict";
+'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.AnimatedBarElement = AnimatedBarElement;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _web = require("@react-spring/web");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["ownerState"];
+/**
+ * @ignore - internal component.
+ */
+function AnimatedBarElement(props) {
+  const {
+      ownerState
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_web.animated.rect, (0, _extends2.default)({}, other, {
+    filter: ownerState.isHighlighted ? 'brightness(120%)' : undefined,
+    opacity: ownerState.isFaded ? 0.3 : 1
+  }));
+}

package/node/BarChart/BarChart.js

@@ -50,15 +50,15 @@ const BarChart = exports.BarChart = /*#__PURE__*/React.forwardRef(function BarCh
     chartsAxisProps,
     axisHighlightProps,
     legendProps,
-    tooltipProps,
     children
   } = (0, _useBarChartProps.useBarChartProps)(props);
+  const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartContainer.ChartContainer, (0, _extends2.default)({
     ref: ref
   }, chartContainerProps, {
     children: [props.onAxisClick && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOnAxisClickHandler.ChartsOnAxisClickHandler, (0, _extends2.default)({}, axisClickHandlerProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_BarPlot.BarPlot, (0, _extends2.default)({}, barPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps))]
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltipProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props.slotProps?.tooltip)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
   }));
 });
 process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
@@ -70,7 +70,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * The configuration of axes highlight.
    * Default is set to 'band' in the bar direction.
    * Depends on `layout` prop.
-   * @see See {@link https://mui.com/x/react-charts/highlighting highlighting docs} for more details.
+   * @see See {@link https://mui.com/x/react-charts/highlighting/ highlighting docs} for more details.
    */
   axisHighlight: _propTypes.default.shape({
     x: _propTypes.default.oneOf(['band', 'line', 'none']),
@@ -181,16 +181,6 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
    */
   onItemClick: _propTypes.default.func,
-  /**
-   * The chart will try to wait for the parent container to resolve its size
-   * before it renders for the first time.
-   *
-   * This can be useful in some scenarios where the chart appear to grow after
-   * the first render, like when used inside a grid.
-   *
-   * @default false
-   */
-  resolveSizeBeforeRender: _propTypes.default.bool,
   /**
    * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
@@ -219,30 +209,12 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   slots: _propTypes.default.object,
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
   title: _propTypes.default.string,
-  /**
-   * The configuration of the tooltip.
-   * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
-   */
-  tooltip: _propTypes.default.shape({
-    axisContent: _propTypes.default.elementType,
-    classes: _propTypes.default.object,
-    itemContent: _propTypes.default.elementType,
-    slotProps: _propTypes.default.object,
-    slots: _propTypes.default.object,
-    trigger: _propTypes.default.oneOf(['axis', 'item', 'none'])
-  }),
   /**
    * Indicate which axis to display the top of the charts.
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
    * @default null
    */
   topAxis: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
-  viewBox: _propTypes.default.shape({
-    height: _propTypes.default.number,
-    width: _propTypes.default.number,
-    x: _propTypes.default.number,
-    y: _propTypes.default.number
-  }),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */
@@ -278,7 +250,6 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     label: _propTypes.default.string,
-    labelFontSize: _propTypes.default.number,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -289,7 +260,6 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
-    tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
     tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
@@ -332,7 +302,6 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     label: _propTypes.default.string,
-    labelFontSize: _propTypes.default.number,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -343,7 +312,6 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
-    tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
     tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),

package/node/BarChart/BarElement.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BarElement = BarElement;
-exports.barElementClasses = exports.BarElementPath = void 0;
+exports.barElementClasses = void 0;
 exports.getBarElementUtilityClass = getBarElementUtilityClass;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
@@ -16,40 +16,28 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
-var _styles = require("@mui/material/styles");
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
-var _d3Color = require("@mui/x-charts-vendor/d3-color");
-var _web = require("@react-spring/web");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _context = require("../context");
+var _AnimatedBarElement = require("./AnimatedBarElement");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["id", "dataIndex", "classes", "color", "slots", "slotProps", "style", "onClick"];
 function getBarElementUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiBarElement', slot);
 }
-const barElementClasses = exports.barElementClasses = (0, _generateUtilityClasses.default)('MuiBarElement', ['root']);
+const barElementClasses = exports.barElementClasses = (0, _generateUtilityClasses.default)('MuiBarElement', ['root', 'highlighted', 'faded']);
 const useUtilityClasses = ownerState => {
   const {
     classes,
-    id
+    id,
+    isHighlighted,
+    isFaded
   } = ownerState;
   const slots = {
-    root: ['root', `series-${id}`]
+    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded']
   };
   return (0, _composeClasses.default)(slots, getBarElementUtilityClass, classes);
 };
-const BarElementPath = exports.BarElementPath = (0, _styles.styled)(_web.animated.rect, {
-  name: 'MuiBarElement',
-  slot: 'Root',
-  overridesResolver: (_, styles) => styles.root
-})(({
-  ownerState
-}) => ({
-  stroke: 'none',
-  fill: ownerState.isHighlighted ? (0, _d3Color.color)(ownerState.color).brighter(0.5).formatHex() : ownerState.color,
-  transition: 'opacity 0.2s ease-in, fill 0.2s ease-in',
-  opacity: ownerState.isFaded && 0.3 || 1
-}));
 function BarElement(props) {
   const {
       id,
@@ -79,7 +67,7 @@ function BarElement(props) {
     isHighlighted
   };
   const classes = useUtilityClasses(ownerState);
-  const Bar = slots?.bar ?? BarElementPath;
+  const Bar = slots?.bar ?? _AnimatedBarElement.AnimatedBarElement;
   const barProps = (0, _useSlotProps.default)({
     elementType: Bar,
     externalSlotProps: slotProps?.bar,
@@ -91,7 +79,9 @@ function BarElement(props) {
     }), {
       style,
       onClick,
-      cursor: onClick ? 'pointer' : 'unset'
+      cursor: onClick ? 'pointer' : 'unset',
+      stroke: 'none',
+      fill: color
     }),
     className: classes.root,
     ownerState

package/node/BarChart/BarPlot.js

@@ -12,6 +12,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _web = require("@react-spring/web");
+var _styles = require("@mui/material/styles");
 var _CartesianProvider = require("../context/CartesianProvider");
 var _BarElement = require("./BarElement");
 var _getColor = _interopRequireDefault(require("./getColor"));
@@ -185,6 +186,15 @@ const enterStyle = ({
   height,
   width
 });
+const BarPlotRoot = (0, _styles.styled)('g', {
+  name: 'MuiBarPlot',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})({
+  [`& .${_BarElement.barElementClasses.root}`]: {
+    transition: 'opacity 0.2s ease-in, fill 0.2s ease-in'
+  }
+});
 
 /**
  * Demos:
@@ -227,7 +237,7 @@ function BarPlot(props) {
     update: enterStyle,
     immediate: skipAnimation
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(BarPlotRoot, {
     children: [!withoutBorderRadius && maskTransition((style, {
       id,
       hasPositive,