@mui/x-charts 8.0.0-alpha.6 → 8.0.0-alpha.7

package/internals/consumeThemeProps.js

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { useTheme, useThemeProps } from '@mui/material/styles';
 import resolveProps from '@mui/utils/resolveProps';
 import * as React from 'react';
-import * as ReactIs from 'react-is';
 
 /**
  * A higher order component that consumes and merges the theme `defaultProps` and handles the `classes` and renders the component.
@@ -50,30 +49,22 @@ import * as ReactIs from 'react-is';
  * @param InComponent The component to render if the slot is not provided.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-export const consumeThemeProps = (name, options, InComponent) => {
-  function InternalComponent(props, ref) {
-    const themedProps = useThemeProps({
-      props,
-      // eslint-disable-next-line material-ui/mui-name-matches-component-name
-      name
-    });
-    const defaultProps = typeof options.defaultProps === 'function' ? options.defaultProps(themedProps) : options.defaultProps ?? {};
-    const outProps = resolveProps(defaultProps, themedProps);
-    const theme = useTheme();
-    const classes = options.classesResolver?.(outProps, theme);
-    if (process.env.NODE_ENV !== 'production') {
-      // eslint-disable-next-line react-compiler/react-compiler
-      InComponent.displayName = name;
-    }
-    const OutComponent = ReactIs.isForwardRef(InComponent) ? InComponent :
-    /*#__PURE__*/
-    // InComponent needs to be a function that accepts `(props, ref)`
-    // @ts-expect-error
-    React.forwardRef(InComponent);
-    return /*#__PURE__*/_jsx(OutComponent, _extends({}, outProps, {
-      classes: classes,
-      ref: ref
-    }));
+export const consumeThemeProps = (name, options, InComponent) => /*#__PURE__*/React.forwardRef(function ConsumeThemeInternal(props, ref) {
+  const themedProps = useThemeProps({
+    props,
+    // eslint-disable-next-line material-ui/mui-name-matches-component-name
+    name
+  });
+  const defaultProps = typeof options.defaultProps === 'function' ? options.defaultProps(themedProps) : options.defaultProps ?? {};
+  const outProps = resolveProps(defaultProps, themedProps);
+  const theme = useTheme();
+  const classes = options.classesResolver?.(outProps, theme);
+  const OutComponent = /*#__PURE__*/React.forwardRef(InComponent);
+  if (process.env.NODE_ENV !== 'production') {
+    OutComponent.displayName = `consumeThemeProps(${name})`;
   }
-  return /*#__PURE__*/React.forwardRef(InternalComponent);
-};
+  return /*#__PURE__*/_jsx(OutComponent, _extends({}, outProps, {
+    classes: classes,
+    ref: ref
+  }));
+});

package/internals/defaultizeColor.d.ts

@@ -1,8 +1,9 @@
 import { AllSeriesType } from '../models/seriesType';
 export declare function defaultizeColor(series: AllSeriesType, seriesIndex: number, colors?: string[]): {
     data: {
-        color: string;
         label?: string | ((location: "tooltip" | "legend" | "arc") => string) | undefined;
+        color: string;
+        labelMarkType?: "line" | "square" | "circle" | undefined;
         value: number;
         id?: import("..").PieItemId | undefined;
     }[];
@@ -43,6 +44,7 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     color?: string;
     valueFormatter?: import(".").SeriesValueFormatter<import("@mui/x-internals/types").MakeOptional<import("..").PieValueType, "id">> | undefined;
     highlightScope?: Partial<import("..").HighlightScope>;
+    labelMarkType?: import("..").ChartsLabelMarkProps["type"];
 } | {
     type: "bar";
     data?: (number | null)[];
@@ -54,6 +56,7 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     color: string;
     valueFormatter?: import(".").SeriesValueFormatter<number | null> | undefined;
     highlightScope?: Partial<import("..").HighlightScope>;
+    labelMarkType?: import("..").ChartsLabelMarkProps["type"];
     xAxisId?: string;
     yAxisId?: string;
     stack?: string;
@@ -75,6 +78,7 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     color: string;
     valueFormatter?: import(".").SeriesValueFormatter<import("..").ScatterValueType | null> | undefined;
     highlightScope?: Partial<import("..").HighlightScope>;
+    labelMarkType?: import("..").ChartsLabelMarkProps["type"];
     xAxisId?: string;
     yAxisId?: string;
 } | {
@@ -94,6 +98,7 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     color: string;
     valueFormatter?: import(".").SeriesValueFormatter<number | null> | undefined;
     highlightScope?: Partial<import("..").HighlightScope>;
+    labelMarkType?: import("..").ChartsLabelMarkProps["type"];
     xAxisId?: string;
     yAxisId?: string;
     stackOrder?: import("..").StackOrderType;

package/internals/index.d.ts

@@ -1,4 +1,5 @@
 export * from './components/ChartsAxesGradients';
+export * from './components/ChartsWrapper';
 export { useSeries } from '../hooks/useSeries';
 export { useInteractionItemProps } from '../hooks/useInteractionItemProps';
 export { useDrawingArea } from '../hooks/useDrawingArea';

package/internals/index.js

@@ -1,5 +1,6 @@
 // Components
 export * from "./components/ChartsAxesGradients/index.js";
+export * from "./components/ChartsWrapper/index.js";
 
 // hooks
 export { useSeries } from "../hooks/useSeries.js";

package/internals/plugins/corePlugins/useChartId/useChartId.selectors.d.ts

@@ -31,6 +31,6 @@ export declare const selectorChartId: ((state: import("./useChartId.types").UseC
     dependencyRecomputations: () => number;
     resetDependencyRecomputations: () => void;
 } & {
-    argsMemoize: typeof import("reselect").weakMapMemoize;
     memoize: typeof import("reselect").weakMapMemoize;
+    argsMemoize: typeof import("reselect").weakMapMemoize;
 };

package/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.selectors.d.ts

@@ -28,8 +28,8 @@ export declare const selectorChartsInteractionItem: ((state: import("../../coreP
     dependencyRecomputations: () => number;
     resetDependencyRecomputations: () => void;
 } & {
-    argsMemoize: typeof import("reselect").weakMapMemoize;
     memoize: typeof import("reselect").weakMapMemoize;
+    argsMemoize: typeof import("reselect").weakMapMemoize;
 };
 export declare const selectorChartsInteractionAxis: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("./useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
     cacheKey: import("../../models").ChartStateCacheKey;
@@ -59,8 +59,8 @@ export declare const selectorChartsInteractionAxis: ((state: import("../../coreP
     dependencyRecomputations: () => number;
     resetDependencyRecomputations: () => void;
 } & {
-    argsMemoize: typeof import("reselect").weakMapMemoize;
     memoize: typeof import("reselect").weakMapMemoize;
+    argsMemoize: typeof import("reselect").weakMapMemoize;
 };
 export declare const selectorChartsInteractionXAxis: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("./useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
     cacheKey: import("../../models").ChartStateCacheKey;
@@ -102,8 +102,8 @@ export declare const selectorChartsInteractionXAxis: ((state: import("../../core
     dependencyRecomputations: () => number;
     resetDependencyRecomputations: () => void;
 } & {
-    argsMemoize: typeof import("reselect").weakMapMemoize;
     memoize: typeof import("reselect").weakMapMemoize;
+    argsMemoize: typeof import("reselect").weakMapMemoize;
 };
 export declare const selectorChartsInteractionYAxis: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("./useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
     cacheKey: import("../../models").ChartStateCacheKey;
@@ -145,8 +145,8 @@ export declare const selectorChartsInteractionYAxis: ((state: import("../../core
     dependencyRecomputations: () => number;
     resetDependencyRecomputations: () => void;
 } & {
-    argsMemoize: typeof import("reselect").weakMapMemoize;
     memoize: typeof import("reselect").weakMapMemoize;
+    argsMemoize: typeof import("reselect").weakMapMemoize;
 };
 export declare const selectorChartsInteractionItemIsDefined: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("./useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
     cacheKey: import("../../models").ChartStateCacheKey;
@@ -190,16 +190,16 @@ export declare const selectorChartsInteractionItemIsDefined: ((state: import("..
         dependencyRecomputations: () => number;
         resetDependencyRecomputations: () => void;
     } & {
-        argsMemoize: typeof import("reselect").weakMapMemoize;
         memoize: typeof import("reselect").weakMapMemoize;
+        argsMemoize: typeof import("reselect").weakMapMemoize;
     }];
     recomputations: () => number;
     resetRecomputations: () => void;
     dependencyRecomputations: () => number;
     resetDependencyRecomputations: () => void;
 } & {
-    argsMemoize: typeof import("reselect").weakMapMemoize;
     memoize: typeof import("reselect").weakMapMemoize;
+    argsMemoize: typeof import("reselect").weakMapMemoize;
 };
 export declare const selectorChartsInteractionXAxisIsDefined: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("./useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
     cacheKey: import("../../models").ChartStateCacheKey;
@@ -261,16 +261,16 @@ export declare const selectorChartsInteractionXAxisIsDefined: ((state: import(".
         dependencyRecomputations: () => number;
         resetDependencyRecomputations: () => void;
     } & {
-        argsMemoize: typeof import("reselect").weakMapMemoize;
         memoize: typeof import("reselect").weakMapMemoize;
+        argsMemoize: typeof import("reselect").weakMapMemoize;
     }];
     recomputations: () => number;
     resetRecomputations: () => void;
     dependencyRecomputations: () => number;
     resetDependencyRecomputations: () => void;
 } & {
-    argsMemoize: typeof import("reselect").weakMapMemoize;
     memoize: typeof import("reselect").weakMapMemoize;
+    argsMemoize: typeof import("reselect").weakMapMemoize;
 };
 export declare const selectorChartsInteractionYAxisIsDefined: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("./useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
     cacheKey: import("../../models").ChartStateCacheKey;
@@ -332,16 +332,16 @@ export declare const selectorChartsInteractionYAxisIsDefined: ((state: import(".
         dependencyRecomputations: () => number;
         resetDependencyRecomputations: () => void;
     } & {
-        argsMemoize: typeof import("reselect").weakMapMemoize;
         memoize: typeof import("reselect").weakMapMemoize;
+        argsMemoize: typeof import("reselect").weakMapMemoize;
     }];
     recomputations: () => number;
     resetRecomputations: () => void;
     dependencyRecomputations: () => number;
     resetDependencyRecomputations: () => void;
 } & {
-    argsMemoize: typeof import("reselect").weakMapMemoize;
     memoize: typeof import("reselect").weakMapMemoize;
+    argsMemoize: typeof import("reselect").weakMapMemoize;
 };
 export declare const selectorChartsInteractionIsVoronoiEnabled: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("./useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
     cacheKey: import("../../models").ChartStateCacheKey;
@@ -371,6 +371,6 @@ export declare const selectorChartsInteractionIsVoronoiEnabled: ((state: import(
     dependencyRecomputations: () => number;
     resetDependencyRecomputations: () => void;
 } & {
-    argsMemoize: typeof import("reselect").weakMapMemoize;
     memoize: typeof import("reselect").weakMapMemoize;
+    argsMemoize: typeof import("reselect").weakMapMemoize;
 };

package/internals/plugins/models/plugin.d.ts

@@ -6,7 +6,7 @@ export interface ChartPluginOptions<TSignature extends ChartAnyPluginSignature>
     instance: ChartUsedInstance<TSignature>;
     params: ChartUsedDefaultizedParams<TSignature>;
     store: ChartUsedStore<TSignature>;
-    svgRef: React.RefObject<SVGSVGElement>;
+    svgRef: React.RefObject<SVGSVGElement | null>;
     plugins: ChartPlugin<ChartAnyPluginSignature>[];
 }
 type ChartResponse<TSignature extends ChartAnyPluginSignature> = OptionalIfEmpty<'publicAPI', TSignature['publicAPI']> & OptionalIfEmpty<'instance', TSignature['instance']>;

package/internals/store/useCharts.d.ts

@@ -3,12 +3,12 @@ import { ChartStore } from '../plugins/utils/ChartStore';
 import { ChartAnyPluginSignature, ChartInstance, ChartPublicAPI, ConvertSignaturesIntoPlugins } from '../plugins/models';
 import { UseChartBaseProps } from './useCharts.types';
 import { UseChartInteractionState } from '../plugins/featurePlugins/useChartInteraction/useChartInteraction.types';
-export declare function useChartApiInitialization<T>(inputApiRef: React.MutableRefObject<T | undefined> | undefined): T;
+export declare function useChartApiInitialization<T>(inputApiRef: React.RefObject<T | undefined> | undefined): T;
 export declare function useCharts<TSignatures extends readonly ChartAnyPluginSignature[], TProps extends Partial<UseChartBaseProps<TSignatures>>>(inPlugins: ConvertSignaturesIntoPlugins<TSignatures>, props: TProps): {
     contextValue: {
         store: ChartStore<readonly [import("../plugins/corePlugins/useChartId").UseChartIdSignature, ...TSignatures]> & UseChartInteractionState;
         publicAPI: ChartPublicAPI<TSignatures>;
         instance: ChartInstance<TSignatures>;
-        svgRef: React.RefObject<SVGSVGElement>;
+        svgRef: React.RefObject<SVGSVGElement | null>;
     };
 };

package/internals/store/useCharts.types.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
 import { ChartAnyPluginSignature, ChartPublicAPI } from '../plugins/models';
 export interface UseChartBaseProps<TSignatures extends readonly ChartAnyPluginSignature[]> {
-    apiRef: React.MutableRefObject<ChartPublicAPI<TSignatures> | undefined> | undefined;
+    apiRef: React.RefObject<ChartPublicAPI<TSignatures> | undefined> | undefined;
 }

package/models/seriesType/common.d.ts

@@ -1,3 +1,4 @@
+import type { ChartsLabelMarkProps } from '../../ChartsLabel';
 import type { HighlightScope } from '../../context';
 import type { StackOffsetType, StackOrderType } from '../stacking';
 export type SeriesId = number | string;
@@ -22,6 +23,14 @@ export type CommonSeriesType<TValue> = {
      * The scope to apply when the series is highlighted.
      */
     highlightScope?: Partial<HighlightScope>;
+    /**
+     * Defines the mark type for the series.
+     *
+     * There is a default mark type for each series type.
+     *
+     * It allows custom values which will be passed to the mark component if it was customized.
+     */
+    labelMarkType?: ChartsLabelMarkProps['type'];
 };
 export type CommonDefaultizedProps = 'id' | 'valueFormatter' | 'data';
 export type CartesianSeriesType = {

package/models/seriesType/pie.d.ts

@@ -1,6 +1,7 @@
 import { PieArcDatum as D3PieArcDatum } from '@mui/x-charts-vendor/d3-shape';
 import { DefaultizedProps } from '@mui/x-internals/types';
 import { CommonDefaultizedProps, CommonSeriesType, SeriesId } from './common';
+import type { ChartsLabelMarkProps } from '../../ChartsLabel';
 export type PieItemId = string | number;
 export type PieValueType = {
     /**
@@ -13,6 +14,14 @@ export type PieValueType = {
      */
     label?: string | ((location: 'tooltip' | 'legend' | 'arc') => string);
     color?: string;
+    /**
+     * Defines the mark type for the pie item.
+     *
+     * It allows custom values which will be passed to the mark component if it was customized.
+     *
+     * @default 'circle'
+     */
+    labelMarkType?: ChartsLabelMarkProps['type'];
 };
 export type DefaultizedPieValueType = PieValueType & Omit<D3PieArcDatum<any>, 'data'> & {
     color: string;

package/modern/BarChart/AnimatedBarElement.js

@@ -15,6 +15,7 @@ export function AnimatedBarElement(props) {
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   return /*#__PURE__*/_jsx(animated.rect, _extends({}, other, {
+    // @ts-expect-error
     filter: ownerState.isHighlighted ? 'brightness(120%)' : undefined,
     opacity: ownerState.isFaded ? 0.3 : 1
   }));

package/modern/BarChart/BarChart.js

@@ -5,7 +5,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
 import { BarPlot } from "./BarPlot.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";
@@ -15,6 +14,10 @@ import { ChartsGrid } from "../ChartsGrid/index.js";
 import { ChartsOnAxisClickHandler } from "../ChartsOnAxisClickHandler/index.js";
 import { ChartsOverlay } from "../ChartsOverlay/ChartsOverlay.js";
 import { useBarChartProps } from "./useBarChartProps.js";
+import { ChartDataProvider } from "../context/index.js";
+import { ChartsSurface } from "../ChartsSurface/index.js";
+import { useChartContainerProps } from "../ChartContainer/useChartContainerProps.js";
+import { ChartsWrapper } from "../internals/components/ChartsWrapper/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Demos:
@@ -33,6 +36,7 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(inProps, ref) {
     name: 'MuiBarChart'
   });
   const {
+    chartsWrapperProps,
     chartContainerProps,
     barPlotProps,
     axisClickHandlerProps,
@@ -45,13 +49,19 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(inProps, ref) {
     legendProps,
     children
   } = useBarChartProps(props);
+  const {
+    chartDataProviderProps,
+    chartsSurfaceProps
+  } = useChartContainerProps(chartContainerProps, ref);
   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)), !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
+  return /*#__PURE__*/_jsx(ChartDataProvider, _extends({}, chartDataProviderProps, {
+    children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
+      children: [!props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
+        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)), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
+      }))]
+    }))
   }));
 });
 process.env.NODE_ENV !== "production" ? BarChart.propTypes = {

package/modern/BarChart/legend.js

@@ -10,6 +10,7 @@ const legendGetter = params => {
       return acc;
     }
     acc.push({
+      markType: series[seriesId].labelMarkType ?? 'square',
       id: seriesId,
       seriesId,
       color: series[seriesId].color,

package/modern/BarChart/useBarChartProps.js

@@ -5,6 +5,8 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 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";
+import { calculateMargins } from "../internals/calculateMargins.js";
+
 /**
  * A helper function that extracts BarChartProps from the input props
  * and returns an object with props for the children components of BarChart.
@@ -41,7 +43,8 @@ export const useBarChartProps = props => {
       onHighlightChange,
       borderRadius,
       barLabel,
-      className
+      className,
+      hideLegend
     } = props,
     rest = _objectWithoutPropertiesLoose(props, _excluded);
   const id = useId();
@@ -61,7 +64,12 @@ export const useBarChartProps = props => {
     })),
     width,
     height,
-    margin,
+    margin: calculateMargins({
+      margin,
+      hideLegend,
+      slotProps,
+      series
+    }),
     colors,
     dataset,
     xAxis: xAxis ?? (hasHorizontalSeries ? undefined : [_extends({
@@ -70,7 +78,6 @@ export const useBarChartProps = props => {
     yAxis: yAxis ?? (hasHorizontalSeries ? [_extends({
       id: DEFAULT_Y_AXIS_KEY
     }, defaultAxisConfig)] : undefined),
-    sx,
     highlightedItem,
     onHighlightChange,
     disableAxisListener: slotProps?.tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
@@ -119,7 +126,13 @@ export const useBarChartProps = props => {
     slots,
     slotProps
   };
+  const chartsWrapperProps = {
+    sx,
+    legendPosition: props.slotProps?.legend?.position,
+    legendDirection: props.slotProps?.legend?.direction
+  };
   return {
+    chartsWrapperProps,
     chartContainerProps,
     barPlotProps,
     axisClickHandlerProps,

package/modern/ChartsLabel/ChartsLabel.js

@@ -1,31 +1,17 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["children", "className", "classes"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
 import clsx from 'clsx';
 import { useUtilityClasses } from "./labelClasses.js";
 import { consumeThemeProps } from "../internals/consumeThemeProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const Root = styled('span', {
-  name: 'MuiChartsLabel',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
-})(({
-  theme
-}) => _extends({}, theme.typography.caption, {
-  color: (theme.vars || theme).palette.text.primary,
-  lineHeight: undefined,
-  display: 'flex'
-}));
-
 /**
- * @ignore - internal component.
- *
  * Generates the label mark for the tooltip and legend.
+ * @ignore - internal component.
  */
 const ChartsLabel = consumeThemeProps('MuiChartsLabel', {
   classesResolver: useUtilityClasses
@@ -36,9 +22,8 @@ const ChartsLabel = consumeThemeProps('MuiChartsLabel', {
       classes
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  return /*#__PURE__*/_jsx(Root, _extends({
+  return /*#__PURE__*/_jsx("span", _extends({
     className: clsx(classes?.root, className),
-    ownerState: props,
     ref: ref
   }, other, {
     children: children

package/modern/ChartsLabel/ChartsLabelGradient.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["gradientId", "direction", "classes", "className"];
+const _excluded = ["gradientId", "direction", "classes", "className", "rotate", "reverse", "thickness"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
@@ -12,15 +12,15 @@ import { consumeThemeProps } from "../internals/consumeThemeProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getRotation = (direction, reverse, rotate) => {
   if (!rotate && reverse) {
-    return direction === 'column' ? 90 : 180;
+    return direction === 'vertical' ? 90 : 180;
   }
   if (rotate && !reverse) {
-    return direction === 'column' ? 0 : 90;
+    return direction === 'vertical' ? 0 : 90;
   }
   if (rotate && reverse) {
-    return direction === 'column' ? 180 : -90;
+    return direction === 'vertical' ? 180 : -90;
   }
-  return direction === 'column' ? -90 : 0;
+  return direction === 'vertical' ? -90 : 0;
 };
 const Root = styled('div', {
   name: 'MuiChartsLabelGradient',
@@ -38,17 +38,17 @@ const Root = styled('div', {
       borderRadius: 2,
       overflow: 'hidden'
     },
-    [`&.${labelGradientClasses.row}`]: {
+    [`&.${labelGradientClasses.horizontal}`]: {
       width: '100%',
       [`.${labelGradientClasses.mask}`]: {
-        height: 12,
+        height: ownerState.thickness,
         width: '100%'
       }
     },
-    [`&.${labelGradientClasses.column}`]: {
+    [`&.${labelGradientClasses.vertical}`]: {
       height: '100%',
       [`.${labelGradientClasses.mask}`]: {
-        width: 12,
+        width: ownerState.thickness,
         height: '100%',
         '> svg': {
           height: '100%'
@@ -63,13 +63,13 @@ const Root = styled('div', {
 });
 
 /**
- * @ignore - internal component.
- *
  * Generates the label Gradient for the tooltip and legend.
+ * @ignore - internal component.
  */
 const ChartsLabelGradient = consumeThemeProps('MuiChartsLabelGradient', {
   defaultProps: {
-    direction: 'row'
+    direction: 'horizontal',
+    thickness: 12
   },
   classesResolver: useUtilityClasses
 }, function ChartsLabelGradient(props, ref) {
@@ -90,6 +90,7 @@ const ChartsLabelGradient = consumeThemeProps('MuiChartsLabelGradient', {
       children: /*#__PURE__*/_jsx("svg", {
         viewBox: "0 0 24 24",
         children: /*#__PURE__*/_jsx("rect", {
+          className: classes?.fill,
           width: "24",
           height: "24",
           fill: `url(#${gradientId})`
@@ -109,13 +110,11 @@ process.env.NODE_ENV !== "production" ? ChartsLabelGradient.propTypes = {
   classes: PropTypes.object,
   /**
    * The direction of the gradient.
-   *
-   * @default 'row'
+   * @default 'horizontal'
    */
-  direction: PropTypes.oneOf(['column', 'row']),
+  direction: PropTypes.oneOf(['vertical', 'horizontal']),
   /**
    * A unique identifier for the gradient.
-   *
    * The `gradientId` will be used as `fill="url(#gradientId)"`.
    */
   gradientId: PropTypes.string.isRequired,
@@ -125,9 +124,13 @@ process.env.NODE_ENV !== "production" ? ChartsLabelGradient.propTypes = {
   reverse: PropTypes.bool,
   /**
    * If provided, the gradient will be rotated by 90deg.
-   *
    * Useful for linear gradients that are not in the correct orientation.
    */
-  rotate: PropTypes.bool
+  rotate: PropTypes.bool,
+  /**
+   * The thickness of the gradient
+   * @default 12
+   */
+  thickness: PropTypes.number
 } : void 0;
 export { ChartsLabelGradient };

package/modern/ChartsLabel/ChartsLabelMark.js

@@ -52,11 +52,13 @@ const Root = styled('div', {
 });
 
 /**
- * @ignore - internal component.
- *
  * Generates the label mark for the tooltip and legend.
+ * @ignore - internal component.
  */
 const ChartsLabelMark = consumeThemeProps('MuiChartsLabelMark', {
+  defaultProps: {
+    type: 'square'
+  },
   classesResolver: useUtilityClasses
 }, function ChartsLabelMark(props, ref) {
   const {
@@ -78,6 +80,7 @@ const ChartsLabelMark = consumeThemeProps('MuiChartsLabelMark', {
         viewBox: "0 0 24 24",
         preserveAspectRatio: type === 'line' ? 'none' : undefined,
         children: /*#__PURE__*/_jsx("rect", {
+          className: classes?.fill,
           width: "24",
           height: "24",
           fill: color

package/modern/ChartsLabel/index.js

@@ -0,0 +1,6 @@
+// export * from './ChartsLabel';
+
+// export * from './ChartsLabelGradient';
+export { labelClasses } from "./labelClasses.js";
+export { labelMarkClasses } from "./labelMarkClasses.js";
+export { labelGradientClasses } from "./labelGradientClasses.js";

package/modern/ChartsLabel/labelGradientClasses.js

@@ -4,14 +4,15 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getLabelGradientUtilityClass(slot) {
   return generateUtilityClass('MuiChartsLabelGradient', slot);
 }
-export const labelGradientClasses = generateUtilityClasses('MuiChartsLabelGradient', ['root', 'column', 'row', 'mask']);
+export const labelGradientClasses = generateUtilityClasses('MuiChartsLabelGradient', ['root', 'vertical', 'horizontal', 'mask', 'fill']);
 export const useUtilityClasses = props => {
   const {
     direction
   } = props;
   const slots = {
     root: ['root', direction],
-    mask: ['mask']
+    mask: ['mask'],
+    fill: ['fill']
   };
   return composeClasses(slots, getLabelGradientUtilityClass, props.classes);
 };