@mui/x-charts 7.22.3 → 8.0.0-alpha.1

package/BarChart/AnimatedBarElement.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { AnimatedProps } from '@react-spring/web';
+import type { BarElementOwnerState } from './BarElement';
+export interface BarProps extends Omit<React.SVGProps<SVGRectElement>, 'id' | 'color' | 'ref' | 'x' | 'y' | 'height' | 'width'>, AnimatedProps<{
+    x?: string | number | undefined;
+    y?: string | number | undefined;
+    height?: string | number | undefined;
+    width?: string | number | undefined;
+}> {
+    ownerState: BarElementOwnerState;
+}
+/**
+ * @ignore - internal component.
+ */
+export declare function AnimatedBarElement(props: BarProps): React.JSX.Element;

package/BarChart/AnimatedBarElement.js

@@ -0,0 +1,21 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["ownerState"];
+import * as React from 'react';
+import { animated } from '@react-spring/web';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @ignore - internal component.
+ */
+export function AnimatedBarElement(props) {
+  const {
+      ownerState
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  return /*#__PURE__*/_jsx(animated.rect, _extends({}, other, {
+    filter: ownerState.isHighlighted ? 'brightness(120%)' : undefined,
+    opacity: ownerState.isFaded ? 0.3 : 1
+  }));
+}

package/BarChart/BarChart.d.ts

@@ -1,31 +1,26 @@
 import * as React from 'react';
+import { MakeOptional } from '@mui/x-internals/types';
 import { BarPlotProps, BarPlotSlotProps, BarPlotSlots } from './BarPlot';
-import { ResponsiveChartContainerProps } from '../ResponsiveChartContainer';
+import { ChartContainerProps } from '../ChartContainer';
 import { ChartsAxisProps } from '../ChartsAxis';
 import { BarSeriesType } from '../models/seriesType/bar';
-import { MakeOptional } from '../models/helpers';
-import { ChartsTooltipProps, ChartsTooltipSlotProps, ChartsTooltipSlots } from '../ChartsTooltip';
-import { ChartsLegendProps, ChartsLegendSlots, ChartsLegendSlotProps } from '../ChartsLegend';
+import { ChartsTooltipSlots, ChartsTooltipSlotProps } from '../ChartsTooltip/ChartTooltip.types';
+import { ChartsLegendSlots, ChartsLegendSlotProps } from '../ChartsLegend';
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
 import { ChartsAxisSlots, ChartsAxisSlotProps } from '../models/axis';
 import { ChartsGridProps } from '../ChartsGrid';
 import { ChartsOnAxisClickHandlerProps } from '../ChartsOnAxisClickHandler';
 import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from '../ChartsOverlay/ChartsOverlay';
-export interface BarChartSlots extends ChartsAxisSlots, BarPlotSlots, ChartsLegendSlots, ChartsTooltipSlots<'bar'>, ChartsOverlaySlots {
+export interface BarChartSlots extends ChartsAxisSlots, BarPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots {
 }
-export interface BarChartSlotProps extends ChartsAxisSlotProps, BarPlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps<'bar'>, ChartsOverlaySlotProps {
+export interface BarChartSlotProps extends ChartsAxisSlotProps, BarPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps {
 }
-export interface BarChartProps extends Omit<ResponsiveChartContainerProps, 'series' | 'plugins' | 'zAxis'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<BarPlotProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, ChartsOnAxisClickHandlerProps {
+export interface BarChartProps extends Omit<ChartContainerProps, 'series' | 'plugins' | 'zAxis'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<BarPlotProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, ChartsOnAxisClickHandlerProps {
     /**
      * The series to display in the bar chart.
      * An array of [[BarSeriesType]] objects.
      */
     series: MakeOptional<BarSeriesType, 'type'>[];
-    /**
-     * The configuration of the tooltip.
-     * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
-     */
-    tooltip?: ChartsTooltipProps<'bar'>;
     /**
      * Option to display a cartesian grid in the background.
      */
@@ -34,14 +29,14 @@ export interface BarChartProps extends Omit<ResponsiveChartContainerProps, 'seri
      * 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?: ChartsAxisHighlightProps;
     /**
-     * @deprecated Consider using `slotProps.legend` instead.
+     * If `true`, the legend is not rendered.
      */
-    legend?: ChartsLegendProps;
+    hideLegend?: boolean;
     /**
      * Overridable component slots.
      * @default {}
@@ -69,5 +64,5 @@ export interface BarChartProps extends Omit<ResponsiveChartContainerProps, 'seri
  *
  * - [BarChart API](https://mui.com/x/api/charts/bar-chart/)
  */
-declare const BarChart: React.ForwardRefExoticComponent<BarChartProps & React.RefAttributes<unknown>>;
+declare const BarChart: React.ForwardRefExoticComponent<BarChartProps & React.RefAttributes<SVGSVGElement>>;
 export { BarChart };

package/BarChart/BarChart.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
 import { BarPlot } from "./BarPlot.js";
-import { ResponsiveChartContainer } from "../ResponsiveChartContainer/index.js";
+import { ChartContainer } from "../ChartContainer/index.js";
 import { ChartsAxis } from "../ChartsAxis/index.js";
 import { ChartsTooltip } from "../ChartsTooltip/index.js";
 import { ChartsLegend } from "../ChartsLegend/index.js";
@@ -43,15 +43,15 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(inProps, ref) {
     chartsAxisProps,
     axisHighlightProps,
     legendProps,
-    tooltipProps,
     children
   } = useBarChartProps(props);
-  return /*#__PURE__*/_jsxs(ResponsiveChartContainer, _extends({
+  const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
+  return /*#__PURE__*/_jsxs(ChartContainer, _extends({
     ref: ref
   }, chartContainerProps, {
     children: [props.onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, _extends({}, axisClickHandlerProps)), /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
       children: [/*#__PURE__*/_jsx(BarPlot, _extends({}, barPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
-    })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), !props.loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltipProps)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
+    })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
   }));
 });
 process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
@@ -63,7 +63,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.shape({
     x: PropTypes.oneOf(['band', 'line', 'none']),
@@ -116,6 +116,10 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
   height: PropTypes.number,
+  /**
+   * If `true`, the legend is not rendered.
+   */
+  hideLegend: PropTypes.bool,
   /**
    * The item currently highlighted. Turns highlighting into a controlled prop.
    */
@@ -134,32 +138,6 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @default yAxisIds[0] The id of the first provided axis
    */
   leftAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-  /**
-   * @deprecated Consider using `slotProps.legend` instead.
-   */
-  legend: PropTypes.shape({
-    classes: PropTypes.object,
-    direction: PropTypes.oneOf(['column', 'row']),
-    hidden: PropTypes.bool,
-    itemGap: PropTypes.number,
-    itemMarkHeight: PropTypes.number,
-    itemMarkWidth: PropTypes.number,
-    labelStyle: PropTypes.object,
-    markGap: PropTypes.number,
-    onItemClick: PropTypes.func,
-    padding: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
-      bottom: PropTypes.number,
-      left: PropTypes.number,
-      right: PropTypes.number,
-      top: PropTypes.number
-    })]),
-    position: PropTypes.shape({
-      horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
-      vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
-    }),
-    slotProps: PropTypes.object,
-    slots: PropTypes.object
-  }),
   /**
    * If `true`, a loading overlay is displayed.
    * @default false
@@ -196,16 +174,6 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
    */
   onItemClick: PropTypes.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.bool,
   /**
    * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
@@ -234,30 +202,12 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   slots: PropTypes.object,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   title: PropTypes.string,
-  /**
-   * The configuration of the tooltip.
-   * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
-   */
-  tooltip: PropTypes.shape({
-    axisContent: PropTypes.elementType,
-    classes: PropTypes.object,
-    itemContent: PropTypes.elementType,
-    slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    trigger: PropTypes.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.oneOfType([PropTypes.object, PropTypes.string]),
-  viewBox: PropTypes.shape({
-    height: PropTypes.number,
-    width: PropTypes.number,
-    x: PropTypes.number,
-    y: PropTypes.number
-  }),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */