@mui/x-charts 7.5.0 → 7.6.0

package/esm/context/HighlightedProvider/createIsHighlighted.js

@@ -0,0 +1,12 @@
+export const createIsHighlighted = (highlightScope, highlightedItem) => input => {
+  if (!highlightScope) {
+    return false;
+  }
+  if (highlightScope.highlight === 'series') {
+    return input.seriesId === highlightedItem?.seriesId;
+  }
+  if (highlightScope.highlight === 'item') {
+    return input.dataIndex === highlightedItem?.dataIndex && input.seriesId === highlightedItem?.seriesId;
+  }
+  return false;
+};

package/esm/context/HighlightedProvider/index.js

@@ -0,0 +1,4 @@
+export * from './HighlightedProvider';
+export * from './HighlightedContext';
+export * from './useHighlighted';
+export * from './useItemHighlighted';

package/esm/context/HighlightedProvider/useHighlighted.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { HighlightedContext } from './HighlightedContext';
+
+/**
+ * A hook to get the highlighted state of the chart.
+ *
+ * Please consider using the `useItemHighlighted` hook if you need to check the state of a specific item.
+ *
+ * @returns {HighlightedState} the state of the chart
+ */
+export function useHighlighted() {
+  const highlighted = React.useContext(HighlightedContext);
+  if (highlighted === undefined) {
+    throw new Error(['MUI X: Could not find the highlighted ref context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
+  }
+  return highlighted;
+}

package/esm/context/HighlightedProvider/useItemHighlighted.js

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { HighlightedContext } from './HighlightedContext';
+/**
+ * A hook to check the highlighted state of the item.
+ * This function already calculates that an item is not faded if it is highlighted.
+ *
+ * If you need fine control over the state, use the `useHighlighted` hook instead.
+ *
+ * @param {HighlightItemData} item is the item to check
+ * @returns {ItemHighlightedState} the state of the item
+ */
+export function useItemHighlighted(item) {
+  const highlighted = React.useContext(HighlightedContext);
+  if (highlighted === undefined) {
+    throw new Error(['MUI X: Could not find the highlighted ref context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
+  }
+  if (!item) {
+    return {
+      isHighlighted: false,
+      isFaded: false
+    };
+  }
+  const isHighlighted = highlighted.isHighlighted(item);
+  const isFaded = !isHighlighted && highlighted.isFaded(item);
+  return {
+    isHighlighted,
+    isFaded
+  };
+}

package/esm/context/ZAxisContextProvider.js

@@ -55,7 +55,7 @@ function ZAxisContextProvider(props) {
 process.env.NODE_ENV !== "production" ? ZAxisContextProvider.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   children: PropTypes.node,
   /**

package/esm/context/index.js

@@ -1 +1,2 @@
+export * from './HighlightedProvider';
 export { ZAxisContextProvider } from './ZAxisContextProvider';

package/esm/hooks/useInteractionItemProps.js

@@ -1,13 +1,14 @@
 import * as React from 'react';
 import { InteractionContext } from '../context/InteractionProvider';
-import { HighlighContext } from '../context/HighlightProvider';
-export const useInteractionItemProps = (scope, skip) => {
+import { HighlightedContext } from '../context';
+export const useInteractionItemProps = skip => {
   const {
     dispatch: dispatchInteraction
   } = React.useContext(InteractionContext);
   const {
-    dispatch: dispatchHighlight
-  } = React.useContext(HighlighContext);
+    setHighlighted,
+    clearHighlighted
+  } = React.useContext(HighlightedContext);
   if (skip) {
     return () => ({});
   }
@@ -17,10 +18,9 @@ export const useInteractionItemProps = (scope, skip) => {
         type: 'enterItem',
         data
       });
-      dispatchHighlight({
-        type: 'enterItem',
-        item: data,
-        scope
+      setHighlighted({
+        seriesId: data.seriesId,
+        dataIndex: data.dataIndex
       });
     };
     const onMouseLeave = () => {
@@ -28,10 +28,7 @@ export const useInteractionItemProps = (scope, skip) => {
         type: 'leaveItem',
         data
       });
-      dispatchHighlight({
-        type: 'leaveItem',
-        item: data
-      });
+      clearHighlighted();
     };
     return {
       onMouseEnter,
@@ -39,33 +36,4 @@ export const useInteractionItemProps = (scope, skip) => {
     };
   };
   return getInteractionItemProps;
-};
-export const getIsHighlighted = (selectedItem, currentItem, highlightScope) => {
-  if (!highlightScope?.highlighted || highlightScope.highlighted === 'none' || selectedItem === null) {
-    return false;
-  }
-  const isSeriesSelected = selectedItem.type === currentItem.type && selectedItem.seriesId === currentItem.seriesId;
-  if (!isSeriesSelected) {
-    return false;
-  }
-  if (highlightScope.highlighted === 'series') {
-    return isSeriesSelected;
-  }
-  return selectedItem.dataIndex !== undefined && selectedItem.dataIndex === currentItem.dataIndex;
-};
-export const getIsFaded = (selectedItem, currentItem, highlightScope) => {
-  if (!highlightScope?.faded || highlightScope.faded === 'none' || selectedItem === null) {
-    return false;
-  }
-  const isSeriesSelected = selectedItem.type === currentItem.type && selectedItem.seriesId === currentItem.seriesId;
-  if (highlightScope.faded === 'series') {
-    return isSeriesSelected && selectedItem.dataIndex !== currentItem.dataIndex;
-  }
-  if (highlightScope.faded === 'global') {
-    if (!isSeriesSelected) {
-      return true;
-    }
-    return selectedItem.dataIndex !== undefined && selectedItem.dataIndex !== currentItem.dataIndex;
-  }
-  return false;
 };

package/hooks/useInteractionItemProps.d.ts

@@ -1,8 +1,5 @@
-import { HighlightScope } from '../context/HighlightProvider';
 import { SeriesItemIdentifier } from '../models';
-export declare const useInteractionItemProps: (scope?: Partial<HighlightScope>, skip?: boolean) => (() => {}) | ((data: SeriesItemIdentifier) => {
+export declare const useInteractionItemProps: (skip?: boolean) => (() => {}) | ((data: SeriesItemIdentifier) => {
     onMouseEnter: () => void;
     onMouseLeave: () => void;
 });
-export declare const getIsHighlighted: (selectedItem: SeriesItemIdentifier | null, currentItem: SeriesItemIdentifier, highlightScope?: Partial<HighlightScope>) => boolean;
-export declare const getIsFaded: (selectedItem: SeriesItemIdentifier | null, currentItem: SeriesItemIdentifier, highlightScope?: Partial<HighlightScope>) => boolean;

package/hooks/useInteractionItemProps.js

@@ -3,19 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useInteractionItemProps = exports.getIsHighlighted = exports.getIsFaded = void 0;
+exports.useInteractionItemProps = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _InteractionProvider = require("../context/InteractionProvider");
-var _HighlightProvider = require("../context/HighlightProvider");
+var _context = require("../context");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useInteractionItemProps = (scope, skip) => {
+const useInteractionItemProps = skip => {
   const {
     dispatch: dispatchInteraction
   } = React.useContext(_InteractionProvider.InteractionContext);
   const {
-    dispatch: dispatchHighlight
-  } = React.useContext(_HighlightProvider.HighlighContext);
+    setHighlighted,
+    clearHighlighted
+  } = React.useContext(_context.HighlightedContext);
   if (skip) {
     return () => ({});
   }
@@ -25,10 +26,9 @@ const useInteractionItemProps = (scope, skip) => {
         type: 'enterItem',
         data
       });
-      dispatchHighlight({
-        type: 'enterItem',
-        item: data,
-        scope
+      setHighlighted({
+        seriesId: data.seriesId,
+        dataIndex: data.dataIndex
       });
     };
     const onMouseLeave = () => {
@@ -36,10 +36,7 @@ const useInteractionItemProps = (scope, skip) => {
         type: 'leaveItem',
         data
       });
-      dispatchHighlight({
-        type: 'leaveItem',
-        item: data
-      });
+      clearHighlighted();
     };
     return {
       onMouseEnter,
@@ -48,35 +45,4 @@ const useInteractionItemProps = (scope, skip) => {
   };
   return getInteractionItemProps;
 };
-exports.useInteractionItemProps = useInteractionItemProps;
-const getIsHighlighted = (selectedItem, currentItem, highlightScope) => {
-  if (!highlightScope?.highlighted || highlightScope.highlighted === 'none' || selectedItem === null) {
-    return false;
-  }
-  const isSeriesSelected = selectedItem.type === currentItem.type && selectedItem.seriesId === currentItem.seriesId;
-  if (!isSeriesSelected) {
-    return false;
-  }
-  if (highlightScope.highlighted === 'series') {
-    return isSeriesSelected;
-  }
-  return selectedItem.dataIndex !== undefined && selectedItem.dataIndex === currentItem.dataIndex;
-};
-exports.getIsHighlighted = getIsHighlighted;
-const getIsFaded = (selectedItem, currentItem, highlightScope) => {
-  if (!highlightScope?.faded || highlightScope.faded === 'none' || selectedItem === null) {
-    return false;
-  }
-  const isSeriesSelected = selectedItem.type === currentItem.type && selectedItem.seriesId === currentItem.seriesId;
-  if (highlightScope.faded === 'series') {
-    return isSeriesSelected && selectedItem.dataIndex !== currentItem.dataIndex;
-  }
-  if (highlightScope.faded === 'global') {
-    if (!isSeriesSelected) {
-      return true;
-    }
-    return selectedItem.dataIndex !== undefined && selectedItem.dataIndex !== currentItem.dataIndex;
-  }
-  return false;
-};
-exports.getIsFaded = getIsFaded;
+exports.useInteractionItemProps = useInteractionItemProps;

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v7.5.0
+ * @mui/x-charts v7.6.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/colorScale.d.ts

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

package/internals/defaultizeColor.d.ts

@@ -58,19 +58,6 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     yAxisKey?: string | undefined;
     stack?: string | undefined;
     stackOrder?: import("..").StackOrderType | undefined;
-} | {
-    type: "scatter";
-    data: import("../models/seriesType").ScatterValueType[];
-    markerSize?: number | undefined;
-    label?: string | ((location: "tooltip" | "legend") => string) | undefined;
-    disableHover?: boolean | undefined;
-    zAxisKey?: string | undefined;
-    id?: import("../models/seriesType/common").SeriesId | undefined;
-    color: string;
-    valueFormatter?: import("../models/seriesType/common").SeriesValueFormatter<import("../models/seriesType").ScatterValueType> | undefined;
-    highlightScope?: Partial<import("..").HighlightScope> | undefined;
-    xAxisKey?: string | undefined;
-    yAxisKey?: string | undefined;
 } | {
     type: "line";
     data?: (number | null)[] | undefined;
@@ -90,4 +77,17 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     xAxisKey?: string | undefined;
     yAxisKey?: string | undefined;
     stackOrder?: import("..").StackOrderType | undefined;
+} | {
+    type: "scatter";
+    data: import("../models/seriesType").ScatterValueType[];
+    markerSize?: number | undefined;
+    label?: string | ((location: "tooltip" | "legend") => string) | undefined;
+    disableHover?: boolean | undefined;
+    zAxisKey?: string | undefined;
+    id?: import("../models/seriesType/common").SeriesId | undefined;
+    color: string;
+    valueFormatter?: import("../models/seriesType/common").SeriesValueFormatter<import("../models/seriesType").ScatterValueType> | undefined;
+    highlightScope?: Partial<import("..").HighlightScope> | undefined;
+    xAxisKey?: string | undefined;
+    yAxisKey?: string | undefined;
 };

package/models/seriesType/common.d.ts

@@ -1,4 +1,4 @@
-import type { HighlightScope } from '../../context/HighlightProvider';
+import type { HighlightScope } from '../../context';
 import type { StackOffsetType, StackOrderType } from '../stacking';
 export type SeriesId = number | string;
 export type SeriesValueFormatterContext = {
@@ -18,6 +18,9 @@ export type CommonSeriesType<TValue> = {
      * @returns {string} The string to display.
      */
     valueFormatter?: SeriesValueFormatter<TValue>;
+    /**
+     * The scope to apply when the series is highlighted.
+     */
     highlightScope?: Partial<HighlightScope>;
 };
 export type CommonDefaultizedProps = 'id' | 'valueFormatter' | 'data';

package/modern/BarChart/BarChart.js

@@ -52,7 +52,10 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
     children,
     slots,
     slotProps,
-    loading
+    loading,
+    barLabel,
+    highlightedItem,
+    onHighlightChange
   } = props;
   const id = useId();
   const clipPathId = `${id}-clip-path`;
@@ -88,6 +91,8 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
     dataset: dataset,
     sx: sx,
     disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
+    highlightedItem: highlightedItem,
+    onHighlightChange: onHighlightChange,
     children: [onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, {
       onAxisClick: onAxisClick
     }), grid && /*#__PURE__*/_jsx(ChartsGrid, {
@@ -100,7 +105,8 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
         slotProps: slotProps,
         skipAnimation: skipAnimation,
         onItemClick: onItemClick,
-        borderRadius: borderRadius
+        borderRadius: borderRadius,
+        barLabel: barLabel
       }), /*#__PURE__*/_jsx(ChartsOverlay, {
         loading: loading,
         slots: slots,
@@ -127,7 +133,7 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
 process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * The configuration of axes highlight.
@@ -139,6 +145,14 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     x: PropTypes.oneOf(['band', 'line', 'none']),
     y: PropTypes.oneOf(['band', 'line', 'none'])
   }),
+  /**
+   * If provided, the function will be used to format the label of the bar.
+   * It can be set to 'value' to display the current value.
+   * @param {BarItem} item The item to format.
+   * @param {BarLabelContext} context data about the bar.
+   * @returns {string} The formatted label.
+   */
+  barLabel: PropTypes.oneOfType([PropTypes.oneOf(['value']), PropTypes.func]),
   /**
    * Defines the border radius of the bar element.
    */
@@ -178,6 +192,13 @@ 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,
+  /**
+   * The item currently highlighted. Turns highlighting into a controlled prop.
+   */
+  highlightedItem: PropTypes.shape({
+    dataIndex: PropTypes.number,
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+  }),
   /**
    * The direction of the bar elements.
    * @default 'vertical'
@@ -227,6 +248,12 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @param {null | AxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: PropTypes.func,
+  /**
+   * The callback fired when the highlighted item changes.
+   *
+   * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
+   */
+  onHighlightChange: PropTypes.func,
   /**
    * Callback fired when a bar item is clicked.
    * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.

package/modern/BarChart/BarElement.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "slots", "slotProps", "style", "onClick"];
+const _excluded = ["id", "dataIndex", "classes", "color", "slots", "slotProps", "style", "onClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
@@ -10,8 +10,8 @@ import { styled } from '@mui/material/styles';
 import { color as d3Color } from 'd3-color';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import { animated } from '@react-spring/web';
-import { getIsFaded, getIsHighlighted, useInteractionItemProps } from '../hooks/useInteractionItemProps';
-import { InteractionContext } from '../context/InteractionProvider';
+import { useInteractionItemProps } from '../hooks/useInteractionItemProps';
+import { useItemHighlighted } from '../context';
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getBarElementUtilityClass(slot) {
   return generateUtilityClass('MuiBarElement', slot);
@@ -45,27 +45,20 @@ function BarElement(props) {
       dataIndex,
       classes: innerClasses,
       color,
-      highlightScope,
       slots,
       slotProps,
       style,
       onClick
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const getInteractionItemProps = useInteractionItemProps(highlightScope);
+  const getInteractionItemProps = useInteractionItemProps();
   const {
-    item
-  } = React.useContext(InteractionContext);
-  const isHighlighted = getIsHighlighted(item, {
-    type: 'bar',
-    seriesId: id,
-    dataIndex
-  }, highlightScope);
-  const isFaded = !isHighlighted && getIsFaded(item, {
-    type: 'bar',
+    isFaded,
+    isHighlighted
+  } = useItemHighlighted({
     seriesId: id,
     dataIndex
-  }, highlightScope);
+  });
   const ownerState = {
     id,
     dataIndex,
@@ -97,14 +90,10 @@ function BarElement(props) {
 process.env.NODE_ENV !== "production" ? BarElement.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   classes: PropTypes.object,
   dataIndex: PropTypes.number.isRequired,
-  highlightScope: PropTypes.shape({
-    faded: PropTypes.oneOf(['global', 'none', 'series']),
-    highlighted: PropTypes.oneOf(['item', 'none', 'series'])
-  }),
   id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   /**
    * The props used for each component slot.

package/modern/BarChart/BarLabel/BarLabel.js

@@ -0,0 +1,51 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["seriesId", "dataIndex", "color", "isFaded", "isHighlighted", "classes"];
+import * as React from 'react';
+import { styled, useThemeProps } from '@mui/material/styles';
+import { animated } from '@react-spring/web';
+import PropTypes from 'prop-types';
+import { barLabelClasses } from './barLabelClasses';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const BarLabelComponent = styled(animated.text, {
+  name: 'MuiBarLabel',
+  slot: 'Root',
+  overridesResolver: (_, styles) => [{
+    [`&.${barLabelClasses.faded}`]: styles.faded
+  }, {
+    [`&.${barLabelClasses.highlighted}`]: styles.highlighted
+  }, styles.root]
+})(({
+  theme
+}) => _extends({}, theme?.typography?.body2, {
+  stroke: 'none',
+  fill: (theme.vars || theme)?.palette?.text?.primary,
+  transition: 'opacity 0.2s ease-in, fill 0.2s ease-in',
+  textAnchor: 'middle',
+  dominantBaseline: 'central',
+  pointerEvents: 'none',
+  opacity: 1,
+  [`&.${barLabelClasses.faded}`]: {
+    opacity: 0.3
+  }
+}));
+function BarLabel(props) {
+  const themeProps = useThemeProps({
+    props,
+    name: 'MuiBarLabel'
+  });
+  const otherProps = _objectWithoutPropertiesLoose(themeProps, _excluded);
+  return /*#__PURE__*/_jsx(BarLabelComponent, _extends({}, otherProps));
+}
+process.env.NODE_ENV !== "production" ? BarLabel.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  classes: PropTypes.object,
+  dataIndex: PropTypes.number.isRequired,
+  isFaded: PropTypes.bool.isRequired,
+  isHighlighted: PropTypes.bool.isRequired,
+  seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
+} : void 0;
+export { BarLabel };

package/modern/BarChart/BarLabel/BarLabel.types.js

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

package/modern/BarChart/BarLabel/BarLabelItem.js

@@ -0,0 +1,119 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["seriesId", "classes", "color", "style", "dataIndex", "barLabel", "slots", "slotProps", "height", "width", "value"],
+  _excluded2 = ["ownerState"];
+import * as React from 'react';
+import { useSlotProps } from '@mui/base/utils';
+import PropTypes from 'prop-types';
+import { useUtilityClasses } from './barLabelClasses';
+import { getBarLabel } from './getBarLabel';
+import { BarLabel } from './BarLabel';
+import { useItemHighlighted } from '../../context';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @ignore - internal component.
+ */
+function BarLabelItem(props) {
+  const {
+      seriesId,
+      classes: innerClasses,
+      color,
+      style,
+      dataIndex,
+      barLabel,
+      slots,
+      slotProps,
+      height,
+      width,
+      value
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    isFaded,
+    isHighlighted
+  } = useItemHighlighted({
+    seriesId,
+    dataIndex
+  });
+  const ownerState = {
+    seriesId,
+    classes: innerClasses,
+    color,
+    isFaded,
+    isHighlighted,
+    dataIndex
+  };
+  const classes = useUtilityClasses(ownerState);
+  const Component = slots?.barLabel ?? BarLabel;
+  const _useSlotProps = useSlotProps({
+      elementType: Component,
+      externalSlotProps: slotProps?.barLabel,
+      additionalProps: _extends({}, other, {
+        style,
+        className: classes.root
+      }),
+      ownerState
+    }),
+    {
+      ownerState: barLabelOwnerState
+    } = _useSlotProps,
+    barLabelProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
+  if (!barLabel) {
+    return null;
+  }
+  const formattedLabelText = getBarLabel({
+    barLabel,
+    value,
+    dataIndex,
+    seriesId,
+    height,
+    width
+  });
+  if (!formattedLabelText) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(Component, _extends({}, barLabelProps, barLabelOwnerState, {
+    children: formattedLabelText
+  }));
+}
+process.env.NODE_ENV !== "production" ? BarLabelItem.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * If provided, the function will be used to format the label of the bar.
+   * It can be set to 'value' to display the current value.
+   * @param {BarItem} item The item to format.
+   * @param {BarLabelContext} context data about the bar.
+   * @returns {string} The formatted label.
+   */
+  barLabel: PropTypes.oneOfType([PropTypes.oneOf(['value']), PropTypes.func]),
+  classes: PropTypes.object,
+  color: PropTypes.string.isRequired,
+  dataIndex: PropTypes.number.isRequired,
+  /**
+   * The height of the bar.
+   */
+  height: PropTypes.number.isRequired,
+  seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object,
+  /**
+   * The value of the data point.
+   */
+  value: PropTypes.number,
+  /**
+   * The width of the bar.
+   */
+  width: PropTypes.number.isRequired
+} : void 0;
+export { BarLabelItem };