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

package/BarChart/BarPlot.js

@@ -6,8 +6,9 @@ const _excluded = ["skipAnimation", "onItemClick", "borderRadius", "barLabel"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTransition } from '@react-spring/web';
+import { styled } from '@mui/material/styles';
 import { useCartesianContext } from "../context/CartesianProvider/index.js";
-import { BarElement } from "./BarElement.js";
+import { BarElement, barElementClasses } from "./BarElement.js";
 import getColor from "./getColor.js";
 import { useChartId, useDrawingArea } from "../hooks/index.js";
 import { BarClipPath } from "./BarClipPath.js";
@@ -179,6 +180,15 @@ const enterStyle = ({
   height,
   width
 });
+const BarPlotRoot = styled('g', {
+  name: 'MuiBarPlot',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})({
+  [`& .${barElementClasses.root}`]: {
+    transition: 'opacity 0.2s ease-in, fill 0.2s ease-in'
+  }
+});
 
 /**
  * Demos:
@@ -221,7 +231,7 @@ function BarPlot(props) {
     update: enterStyle,
     immediate: skipAnimation
   });
-  return /*#__PURE__*/_jsxs(React.Fragment, {
+  return /*#__PURE__*/_jsxs(BarPlotRoot, {
     children: [!withoutBorderRadius && maskTransition((style, {
       id,
       hasPositive,

package/BarChart/useBarChartProps.d.ts

@@ -8,7 +8,6 @@ import { ChartsOverlayProps } from '../ChartsOverlay';
 import { ChartsAxisProps } from '../ChartsAxis';
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
 import { ChartsLegendProps } from '../ChartsLegend';
-import { ChartsTooltipProps } from '../ChartsTooltip';
 /**
  * A helper function that extracts BarChartProps from the input props
  * and returns an object with props for the children components of BarChart.
@@ -29,6 +28,5 @@ export declare const useBarChartProps: (props: BarChartProps) => {
     chartsAxisProps: ChartsAxisProps;
     axisHighlightProps: ChartsAxisHighlightProps;
     legendProps: ChartsLegendProps;
-    tooltipProps: ChartsTooltipProps<"bar">;
     children: import("react").ReactNode;
 };

package/BarChart/useBarChartProps.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "tooltip", "onAxisClick", "axisHighlight", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "barLabel", "className", "hideLegend"];
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "onAxisClick", "axisHighlight", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "barLabel", "className", "hideLegend"];
 import useId from '@mui/utils/useId';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from "../constants/index.js";
 /**
@@ -23,7 +23,6 @@ export const useBarChartProps = props => {
       colors,
       dataset,
       sx,
-      tooltip,
       onAxisClick,
       axisHighlight,
       grid,
@@ -74,7 +73,7 @@ export const useBarChartProps = props => {
     sx,
     highlightedItem,
     onHighlightChange,
-    disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
+    disableAxisListener: slotProps?.tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
     className,
     skipAnimation
   });
@@ -120,10 +119,6 @@ export const useBarChartProps = props => {
     slots,
     slotProps
   };
-  const tooltipProps = _extends({}, tooltip, {
-    slots,
-    slotProps
-  });
   return {
     chartContainerProps,
     barPlotProps,
@@ -135,7 +130,6 @@ export const useBarChartProps = props => {
     chartsAxisProps,
     axisHighlightProps,
     legendProps,
-    tooltipProps,
     children
   };
 };