@mui/x-charts 8.20.0 → 8.22.0

package/esm/BarChart/BarChart.js

@@ -17,6 +17,7 @@ import { ChartDataProvider } from "../ChartDataProvider/index.js";
 import { ChartsSurface } from "../ChartsSurface/index.js";
 import { useChartContainerProps } from "../ChartContainer/useChartContainerProps.js";
 import { ChartsWrapper } from "../ChartsWrapper/index.js";
+import { FocusedBar } from "./FocusedBar.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Demos:
@@ -57,7 +58,7 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(inProps, ref) {
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
       children: [props.showToolbar && Toolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
         children: [/*#__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))]
+          children: [/*#__PURE__*/_jsx(BarPlot, _extends({}, barPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), /*#__PURE__*/_jsx(FocusedBar, {})]
         })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
       })), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip))]
     }))
@@ -285,6 +286,11 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     label: PropTypes.string,
     labelStyle: PropTypes.object,
     offset: PropTypes.number,
+    ordinalTimeTicks: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['biweekly', 'days', 'hours', 'months', 'quarterly', 'weeks', 'years']), PropTypes.shape({
+      format: PropTypes.func.isRequired,
+      getTickNumber: PropTypes.func.isRequired,
+      isTick: PropTypes.func.isRequired
+    })]).isRequired),
     position: PropTypes.oneOf(['bottom', 'none', 'top']),
     reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['band']),
@@ -301,6 +307,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
@@ -337,6 +344,11 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     label: PropTypes.string,
     labelStyle: PropTypes.object,
     offset: PropTypes.number,
+    ordinalTimeTicks: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['biweekly', 'days', 'hours', 'months', 'quarterly', 'weeks', 'years']), PropTypes.shape({
+      format: PropTypes.func.isRequired,
+      getTickNumber: PropTypes.func.isRequired,
+      isTick: PropTypes.func.isRequired
+    })]).isRequired),
     position: PropTypes.oneOf(['bottom', 'none', 'top']),
     reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['point']),
@@ -353,6 +365,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
@@ -397,6 +410,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
@@ -442,6 +456,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
@@ -486,6 +501,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
@@ -530,6 +546,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
@@ -578,6 +595,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
@@ -626,6 +644,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
@@ -670,6 +689,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   })]).isRequired),
   /**
@@ -713,6 +733,11 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     label: PropTypes.string,
     labelStyle: PropTypes.object,
     offset: PropTypes.number,
+    ordinalTimeTicks: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['biweekly', 'days', 'hours', 'months', 'quarterly', 'weeks', 'years']), PropTypes.shape({
+      format: PropTypes.func.isRequired,
+      getTickNumber: PropTypes.func.isRequired,
+      isTick: PropTypes.func.isRequired
+    })]).isRequired),
     position: PropTypes.oneOf(['left', 'none', 'right']),
     reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['band']),
@@ -728,6 +753,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
     width: PropTypes.number
   }), PropTypes.shape({
@@ -764,6 +790,11 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     label: PropTypes.string,
     labelStyle: PropTypes.object,
     offset: PropTypes.number,
+    ordinalTimeTicks: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['biweekly', 'days', 'hours', 'months', 'quarterly', 'weeks', 'years']), PropTypes.shape({
+      format: PropTypes.func.isRequired,
+      getTickNumber: PropTypes.func.isRequired,
+      isTick: PropTypes.func.isRequired
+    })]).isRequired),
     position: PropTypes.oneOf(['left', 'none', 'right']),
     reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['point']),
@@ -779,6 +810,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
     width: PropTypes.number
   }), PropTypes.shape({
@@ -822,6 +854,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
     width: PropTypes.number
   }), PropTypes.shape({
@@ -866,6 +899,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
     width: PropTypes.number
   }), PropTypes.shape({
@@ -909,6 +943,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
     width: PropTypes.number
   }), PropTypes.shape({
@@ -952,6 +987,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
     width: PropTypes.number
   }), PropTypes.shape({
@@ -999,6 +1035,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
     width: PropTypes.number
   }), PropTypes.shape({
@@ -1046,6 +1083,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
     width: PropTypes.number
   }), PropTypes.shape({
@@ -1089,6 +1127,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
     width: PropTypes.number
   })]).isRequired)

package/esm/BarChart/BarChart.plugins.d.ts

@@ -1,9 +1,10 @@
-import { UseChartZAxisSignature } from "../internals/plugins/featurePlugins/useChartZAxis/index.js";
-import { UseChartCartesianAxisSignature } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
-import { UseChartInteractionSignature } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
-import { UseChartHighlightSignature } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
-import { UseChartKeyboardNavigationSignature } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
-import { ConvertSignaturesIntoPlugins } from "../internals/plugins/models/helpers.js";
-import { UseChartBrushSignature } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
-export type BarChartPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<'bar'>, UseChartHighlightSignature, UseChartKeyboardNavigationSignature];
+import { type UseChartZAxisSignature } from "../internals/plugins/featurePlugins/useChartZAxis/index.js";
+import { type UseChartCartesianAxisSignature } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+import { type UseChartTooltipSignature } from "../internals/plugins/featurePlugins/useChartTooltip/index.js";
+import { type UseChartInteractionSignature } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { type UseChartHighlightSignature } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
+import { type UseChartKeyboardNavigationSignature } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
+import { type ConvertSignaturesIntoPlugins } from "../internals/plugins/models/helpers.js";
+import { type UseChartBrushSignature } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
+export type BarChartPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<'bar'>, UseChartHighlightSignature, UseChartKeyboardNavigationSignature];
 export declare const BAR_CHART_PLUGINS: ConvertSignaturesIntoPlugins<BarChartPluginSignatures>;

package/esm/BarChart/BarChart.plugins.js

@@ -1,7 +1,8 @@
 import { useChartZAxis } from "../internals/plugins/featurePlugins/useChartZAxis/index.js";
 import { useChartCartesianAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+import { useChartTooltip } from "../internals/plugins/featurePlugins/useChartTooltip/index.js";
 import { useChartInteraction } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 import { useChartHighlight } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
 import { useChartKeyboardNavigation } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
 import { useChartBrush } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
-export const BAR_CHART_PLUGINS = [useChartZAxis, useChartBrush, useChartInteraction, useChartCartesianAxis, useChartHighlight, useChartKeyboardNavigation];
+export const BAR_CHART_PLUGINS = [useChartZAxis, useChartBrush, useChartTooltip, useChartInteraction, useChartCartesianAxis, useChartHighlight, useChartKeyboardNavigation];

package/esm/BarChart/BarElement.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
-import { BarElementOwnerState } from "./barElementClasses.js";
-import { BarProps } from "./AnimatedBarElement.js";
+import { type SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import { type BarElementOwnerState } from "./barElementClasses.js";
+import { type BarProps } from "./AnimatedBarElement.js";
 export interface BarElementSlots {
   /**
    * The component that renders the bar.

package/esm/BarChart/BarElement.js

@@ -78,8 +78,7 @@ function BarElement(props) {
       stroke: 'none',
       fill: color,
       skipAnimation,
-      layout,
-      'data-focused': isFocused || undefined
+      layout
     }),
     className: classes.root,
     ownerState

package/esm/BarChart/BarLabel/BarLabel.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BarLabelOwnerState } from "./BarLabel.types.js";
+import { type BarLabelOwnerState } from "./BarLabel.types.js";
 export declare const BarLabelComponent: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.SVGTextElementAttributes<SVGTextElement>, keyof React.SVGTextElementAttributes<SVGTextElement>>, {}>;
 export type BarLabelProps = Omit<React.SVGProps<SVGTextElement>, 'ref' | 'id' | 'x' | 'y' | 'width' | 'height'> & BarLabelOwnerState & {
   /**

package/esm/BarChart/BarLabel/BarLabel.js

@@ -8,6 +8,7 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import { useAnimateBarLabel } from "../../hooks/animation/useAnimateBarLabel.js";
 import { barLabelClasses } from "./barLabelClasses.js";
+import { ANIMATION_DURATION_MS, ANIMATION_TIMING_FUNCTION } from "../../internals/animation/animation.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const BarLabelComponent = styled('text', {
   name: 'MuiBarLabel',
@@ -22,25 +23,28 @@ export const BarLabelComponent = styled('text', {
 }) => _extends({}, theme?.typography?.body2, {
   stroke: 'none',
   fill: (theme.vars || theme)?.palette?.text?.primary,
-  transition: 'opacity 0.2s ease-in, fill 0.2s ease-in',
-  pointerEvents: 'none',
-  opacity: 1,
-  [`&.${barLabelClasses.faded}`]: {
-    opacity: 0.3
-  }
+  transitionProperty: 'opacity, fill',
+  transitionDuration: `${ANIMATION_DURATION_MS}ms`,
+  transitionTimingFunction: ANIMATION_TIMING_FUNCTION,
+  pointerEvents: 'none'
 }));
 function BarLabel(inProps) {
   const props = useThemeProps({
     props: inProps,
     name: 'MuiBarLabel'
   });
-  const otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+      isFaded
+    } = props,
+    otherProps = _objectWithoutPropertiesLoose(props, _excluded);
   const animatedProps = useAnimateBarLabel(props);
   const textAnchor = getTextAnchor(props);
   const dominantBaseline = getDominantBaseline(props);
+  const fadedOpacity = isFaded ? 0.3 : 1;
   return /*#__PURE__*/_jsx(BarLabelComponent, _extends({
     textAnchor: textAnchor,
-    dominantBaseline: dominantBaseline
+    dominantBaseline: dominantBaseline,
+    opacity: fadedOpacity
   }, otherProps, animatedProps));
 }
 function getTextAnchor({

package/esm/BarChart/BarLabel/BarLabel.types.d.ts

@@ -1,5 +1,6 @@
-import { SeriesId } from "../../models/seriesType/common.js";
+import { type SeriesId } from "../../models/seriesType/common.js";
 import type { BarLabelClasses } from "./barLabelClasses.js";
+import { type BarValueType } from "../../models/index.js";
 export interface BarLabelOwnerState {
   seriesId: SeriesId;
   dataIndex: number;
@@ -10,7 +11,7 @@ export interface BarLabelOwnerState {
   layout: 'vertical' | 'horizontal';
   classes?: Partial<BarLabelClasses>;
 }
-export type BarItem = {
+export type BarItem<V extends BarValueType | null = BarValueType | null> = {
   /**
    * The series id of the bar.
    */
@@ -22,7 +23,7 @@ export type BarItem = {
   /**
    * The value of the data point.
    */
-  value: number | null;
+  value: V;
 };
 export type BarLabelContext = {
   bar: {
@@ -38,4 +39,4 @@ export type BarLabelContext = {
     width: number;
   };
 };
-export type BarLabelFunction = (item: BarItem, context: BarLabelContext) => string | null | undefined;
+export type BarLabelFunction<V extends BarValueType | null = BarValueType | null> = (item: BarItem<V>, context: BarLabelContext) => string | null | undefined;

package/esm/BarChart/BarLabel/BarLabelItem.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
-import { BarLabelOwnerState, BarItem, BarLabelContext } from "./BarLabel.types.js";
-import { BarLabelProps } from "./BarLabel.js";
+import { type SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import { type BarLabelOwnerState, type BarItem, type BarLabelContext } from "./BarLabel.types.js";
+import { type BarLabelProps } from "./BarLabel.js";
+import { type BarValueType } from "../../models/index.js";
 export interface BarLabelSlots {
   /**
    * The component that renders the bar label.
@@ -12,7 +13,7 @@ export interface BarLabelSlots {
 export interface BarLabelSlotProps {
   barLabel?: SlotComponentPropsFromProps<BarLabelProps, {}, BarLabelOwnerState>;
 }
-export type BarLabelItemProps = Omit<BarLabelOwnerState, 'isFaded' | 'isHighlighted'> & Pick<BarLabelProps, 'style'> & {
+export type BarLabelItemProps<V extends BarValueType | null> = Omit<BarLabelOwnerState, 'isFaded' | 'isHighlighted'> & Pick<BarLabelProps, 'style'> & {
   /**
    * The props used for each component slot.
    * @default {}
@@ -54,7 +55,7 @@ export type BarLabelItemProps = Omit<BarLabelOwnerState, 'isFaded' | 'isHighligh
   /**
    * The value of the data point.
    */
-  value: number | null;
+  value: V;
   /**
    * If true, no animations should be applied.
    */
@@ -66,7 +67,7 @@ export type BarLabelItemProps = Omit<BarLabelOwnerState, 'isFaded' | 'isHighligh
    * @param {BarLabelContext} context data about the bar.
    * @returns {string} The formatted label.
    */
-  barLabel?: 'value' | ((item: BarItem, context: BarLabelContext) => string | null | undefined);
+  barLabel?: 'value' | ((item: BarItem<V>, context: BarLabelContext) => string | null | undefined);
   /**
    * The placement of the bar label.
    * It controls whether the label is rendered in the center or outside the bar.
@@ -77,7 +78,7 @@ export type BarLabelItemProps = Omit<BarLabelOwnerState, 'isFaded' | 'isHighligh
 /**
  * @ignore - internal component.
  */
-declare function BarLabelItem(props: BarLabelItemProps): import("react/jsx-runtime").JSX.Element | null;
+declare function BarLabelItem<V extends BarValueType | null = BarValueType | null>(props: BarLabelItemProps<V>): import("react/jsx-runtime").JSX.Element | null;
 declare namespace BarLabelItem {
   var propTypes: any;
 }

package/esm/BarChart/BarLabel/BarLabelPlot.d.ts

@@ -1,12 +1,31 @@
-import type { ProcessedBarSeriesData } from "../types.js";
-import { BarLabelItemProps } from "./BarLabelItem.js";
-type BarLabelPlotProps = {
-  processedSeries: ProcessedBarSeriesData;
+import { type AnimationData } from "../types.js";
+import { type BarLabelItemProps } from "./BarLabelItem.js";
+import type { SeriesId } from "../../models/seriesType/common.js";
+import { type BarSeriesType, type BarValueType } from "../../models/seriesType/bar.js";
+import { type BarLabelFunction } from "./BarLabel.types.js";
+interface BarLabelPlotProps<V extends BarValueType | null = BarValueType | null> {
+  processedSeries: ProcessedBarLabelSeriesData<V>;
+  className: string;
   skipAnimation?: boolean;
-  barLabel?: BarLabelItemProps['barLabel'];
-};
+  barLabel?: BarLabelItemProps<V | null>['barLabel'];
+}
+export interface ProcessedBarLabelSeriesData<V extends BarValueType | null> {
+  seriesId: SeriesId;
+  data: ProcessedBarLabelData<V>[];
+  barLabel?: 'value' | BarLabelFunction<V>;
+  barLabelPlacement?: BarSeriesType['barLabelPlacement'];
+  layout?: 'vertical' | 'horizontal';
+  xOrigin: number;
+  yOrigin: number;
+}
+export interface ProcessedBarLabelData<V extends BarValueType | null> extends AnimationData {
+  seriesId: SeriesId;
+  dataIndex: number;
+  color: string;
+  value: V;
+}
 /**
  * @ignore - internal component.
  */
-declare function BarLabelPlot(props: BarLabelPlotProps): import("react/jsx-runtime").JSX.Element | null;
+declare function BarLabelPlot<V extends BarValueType | null = BarValueType | null>(props: BarLabelPlotProps<V>): import("react/jsx-runtime").JSX.Element | null;
 export { BarLabelPlot };

package/esm/BarChart/BarLabel/BarLabelPlot.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["processedSeries", "skipAnimation"];
+const _excluded = ["processedSeries", "className", "skipAnimation"];
+import * as React from 'react';
 import { BarLabelItem } from "./BarLabelItem.js";
-import { useUtilityClasses } from "../barClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @ignore - internal component.
@@ -10,32 +10,32 @@ import { jsx as _jsx } from "react/jsx-runtime";
 function BarLabelPlot(props) {
   const {
       processedSeries,
+      className,
       skipAnimation
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
     seriesId,
-    data
+    data,
+    layout,
+    xOrigin,
+    yOrigin
   } = processedSeries;
-  const classes = useUtilityClasses();
   const barLabel = processedSeries.barLabel ?? props.barLabel;
   if (!barLabel) {
     return null;
   }
   return /*#__PURE__*/_jsx("g", {
-    className: classes.seriesLabels,
+    className: className,
     "data-series": seriesId,
     children: data.map(({
-      xOrigin,
-      yOrigin,
       x,
       y,
       dataIndex,
       color,
       value,
       width,
-      height,
-      layout
+      height
     }) => /*#__PURE__*/_jsx(BarLabelItem, _extends({
       seriesId: seriesId,
       dataIndex: dataIndex,

package/esm/BarChart/BarLabel/getBarLabel.d.ts

@@ -1,10 +1,11 @@
-import { SeriesId } from "../../models/seriesType/common.js";
-import { BarLabelFunction } from "./BarLabel.types.js";
-export declare const getBarLabel: (options: {
-  barLabel: "value" | BarLabelFunction;
-  value: number | null;
+import { type SeriesId } from "../../models/seriesType/common.js";
+import { type BarLabelFunction } from "./BarLabel.types.js";
+import { type BarValueType } from "../../models/seriesType/bar.js";
+export declare function getBarLabel<V extends BarValueType | null = BarValueType | null>(options: {
+  barLabel: 'value' | BarLabelFunction<V>;
+  value: V;
   dataIndex: number;
   seriesId: SeriesId;
   height: number;
   width: number;
-}) => string | null | undefined;
+}): string | null | undefined;

package/esm/BarChart/BarLabel/getBarLabel.js

@@ -1,4 +1,4 @@
-export const getBarLabel = options => {
+export function getBarLabel(options) {
   const {
     barLabel,
     value,
@@ -21,4 +21,4 @@ export const getBarLabel = options => {
       width
     }
   });
-};
+}

package/esm/BarChart/BarPlot.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { BarElementSlotProps, BarElementSlots } from "./BarElement.js";
-import { BarItemIdentifier } from "../models/index.js";
-import { BarLabelSlotProps, BarLabelSlots } from "./BarLabel/BarLabelItem.js";
-import { BarItem, BarLabelContext } from "./BarLabel/index.js";
+import { type BarElementSlotProps, type BarElementSlots } from "./BarElement.js";
+import { type BarItemIdentifier } from "../models/index.js";
+import { type BarLabelSlotProps, type BarLabelSlots } from "./BarLabel/BarLabelItem.js";
+import type { BarItem, BarLabelContext } from "./BarLabel/index.js";
 export interface BarPlotSlots extends BarElementSlots, BarLabelSlots {}
 export interface BarPlotSlotProps extends BarElementSlotProps, BarLabelSlotProps {}
 export interface BarPlotProps {

package/esm/BarChart/BarPlot.js

@@ -15,13 +15,16 @@ import { useSkipAnimation } from "../hooks/useSkipAnimation.js";
 import { useInternalIsZoomInteracting } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting.js";
 import { useBarPlotData } from "./useBarPlotData.js";
 import { useUtilityClasses } from "./barClasses.js";
+import { ANIMATION_DURATION_MS, ANIMATION_TIMING_FUNCTION } from "../internals/animation/animation.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const BarPlotRoot = styled('g', {
   name: 'MuiBarPlot',
   slot: 'Root'
 })({
   [`& .${barElementClasses.root}`]: {
-    transition: 'opacity 0.2s ease-in, fill 0.2s ease-in'
+    transitionProperty: 'opacity, fill',
+    transitionDuration: `${ANIMATION_DURATION_MS}ms`,
+    transitionTimingFunction: ANIMATION_TIMING_FUNCTION
   }
 });
 
@@ -88,6 +91,9 @@ function BarPlot(props) {
       }, id);
     }), completedData.map(({
       seriesId,
+      layout,
+      xOrigin,
+      yOrigin,
       data
     }) => {
       return /*#__PURE__*/_jsx("g", {
@@ -97,11 +103,8 @@ function BarPlot(props) {
           dataIndex,
           color,
           maskId,
-          layout,
           x,
-          xOrigin,
           y,
-          yOrigin,
           width,
           height
         }) => {
@@ -136,6 +139,7 @@ function BarPlot(props) {
         })
       }, seriesId);
     }), completedData.map(processedSeries => /*#__PURE__*/_jsx(BarLabelPlot, _extends({
+      className: classes.seriesLabels,
       processedSeries: processedSeries,
       skipAnimation: skipAnimation,
       barLabel: barLabel

package/esm/BarChart/FocusedBar.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare function FocusedBar(props: React.SVGAttributes<SVGRectElement>): import("react/jsx-runtime").JSX.Element | null;

package/esm/BarChart/FocusedBar.js

@@ -0,0 +1,61 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useTheme } from '@mui/material/styles';
+import { useFocusedItem } from "../hooks/useFocusedItem.js";
+import { useBarSeriesContext, useXAxes, useYAxes } from "../hooks/index.js";
+import { getBarDimensions } from "../internals/getBarDimensions.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function FocusedBar(props) {
+  const theme = useTheme();
+  const focusedItem = useFocusedItem();
+  const barSeries = useBarSeriesContext();
+  const {
+    xAxis,
+    xAxisIds
+  } = useXAxes();
+  const {
+    yAxis,
+    yAxisIds
+  } = useYAxes();
+  if (focusedItem === null || focusedItem.seriesType !== 'bar' || !barSeries) {
+    return null;
+  }
+  const series = barSeries?.series[focusedItem.seriesId];
+  const xAxisId = series.xAxisId ?? xAxisIds[0];
+  const yAxisId = series.yAxisId ?? yAxisIds[0];
+  const xAxisConfig = xAxis[xAxisId];
+  const yAxisConfig = yAxis[yAxisId];
+  const verticalLayout = barSeries.series[focusedItem.seriesId].layout === 'vertical';
+  const groupIndex = barSeries.stackingGroups.findIndex(group => group.ids.includes(focusedItem.seriesId));
+  const barDimensions = getBarDimensions({
+    verticalLayout,
+    xAxisConfig,
+    yAxisConfig,
+    series,
+    dataIndex: focusedItem.dataIndex,
+    numberOfGroups: barSeries.stackingGroups.length,
+    groupIndex
+  });
+  if (barDimensions === null) {
+    return null;
+  }
+  const {
+    x,
+    y,
+    height,
+    width
+  } = barDimensions;
+  return /*#__PURE__*/_jsx("rect", _extends({
+    fill: "none",
+    stroke: (theme.vars ?? theme).palette.text.primary,
+    strokeWidth: 2,
+    x: x - 3,
+    y: y - 3,
+    width: width + 6,
+    height: height + 6,
+    rx: 3,
+    ry: 3
+  }, props));
+}

package/esm/BarChart/barElementClasses.d.ts

@@ -1,4 +1,4 @@
-import { SeriesId } from "../models/seriesType/common.js";
+import { type SeriesId } from "../models/seriesType/common.js";
 export interface BarElementClasses {
   /** Styles applied to the root element. */
   root: string;