@mui/x-charts 8.21.0 → 8.22.1

package/context/ChartProvider/ChartProvider.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import type { ChartProviderProps } from "./ChartProvider.types.js";
-import { ChartAnyPluginSignature } from "../../internals/plugins/models/index.js";
-import { ChartSeriesConfig } from "../../internals/plugins/models/seriesConfig/index.js";
-import { ChartSeriesType } from "../../models/seriesType/config.js";
+import { type ChartAnyPluginSignature } from "../../internals/plugins/models/index.js";
+import { type ChartSeriesConfig } from "../../internals/plugins/models/seriesConfig/index.js";
+import { type ChartSeriesType } from "../../models/seriesType/config.js";
 export declare const defaultSeriesConfig: ChartSeriesConfig<'bar' | 'scatter' | 'line' | 'pie'>;
 declare function ChartProvider<TSeriesType extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[]>(props: React.PropsWithChildren<ChartProviderProps<TSeriesType, TSignatures>>): import("react/jsx-runtime").JSX.Element;
 export { ChartProvider };

package/context/ChartProvider/ChartProvider.js

@@ -11,6 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _useCharts = require("../../internals/store/useCharts");
 var _ChartContext = require("./ChartContext");
 var _useChartCartesianAxis = require("../../internals/plugins/featurePlugins/useChartCartesianAxis");
+var _useChartTooltip = require("../../internals/plugins/featurePlugins/useChartTooltip");
 var _useChartInteraction = require("../../internals/plugins/featurePlugins/useChartInteraction");
 var _useChartZAxis = require("../../internals/plugins/featurePlugins/useChartZAxis");
 var _useChartHighlight = require("../../internals/plugins/featurePlugins/useChartHighlight/useChartHighlight");
@@ -28,7 +29,7 @@ const defaultSeriesConfig = exports.defaultSeriesConfig = {
 
 // For consistency with the v7, the cartesian axes are set by default.
 // To remove them, you can provide a `plugins` props.
-const defaultPlugins = [_useChartZAxis.useChartZAxis, _useChartInteraction.useChartInteraction, _useChartCartesianAxis.useChartCartesianAxis, _useChartHighlight.useChartHighlight];
+const defaultPlugins = [_useChartZAxis.useChartZAxis, _useChartTooltip.useChartTooltip, _useChartInteraction.useChartInteraction, _useChartCartesianAxis.useChartCartesianAxis, _useChartHighlight.useChartHighlight];
 function ChartProvider(props) {
   const {
     children,

package/context/ChartProvider/ChartProvider.types.d.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { Store } from '@mui/x-internals/store';
+import type * as React from 'react';
+import { type Store } from '@mui/x-internals/store';
 import type { ChartAnyPluginSignature, ChartInstance, ChartPublicAPI, ChartState, ConvertSignaturesIntoPlugins, MergeSignaturesProperty } from "../../internals/plugins/models/index.js";
 import type { ChartCorePluginSignatures } from "../../internals/plugins/corePlugins/index.js";
 import type { ChartSeriesConfig } from "../../internals/plugins/models/seriesConfig/index.js";

package/context/ChartProvider/useChartContext.d.ts

@@ -1,3 +1,3 @@
-import { ChartAnyPluginSignature } from "../../internals/plugins/models/index.js";
-import { ChartContextValue } from "./ChartProvider.types.js";
+import { type ChartAnyPluginSignature } from "../../internals/plugins/models/index.js";
+import { type ChartContextValue } from "./ChartProvider.types.js";
 export declare const useChartContext: <TSignatures extends readonly ChartAnyPluginSignature[], TOptionalSignatures extends readonly ChartAnyPluginSignature[] = []>() => ChartContextValue<TSignatures, TOptionalSignatures>;

package/context/ChartsSlotsContext.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ChartsSlotProps, ChartsSlots } from "../internals/material/index.js";
+import { type ChartsSlotProps, type ChartsSlots } from "../internals/material/index.js";
 type SlotProps<T extends Record<keyof T, React.ComponentType<any>>> = { [key in keyof T]: React.ComponentProps<T[key]> };
 export interface ChartsSlotsContextValue<T extends ChartsSlots & Record<keyof T, React.ComponentType<any>> = ChartsSlots> {
   slots: T;

package/context/useChartApiContext.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ChartApi } from "./ChartApi.js";
+import { type ChartApi } from "./ChartApi.js";
 /**
  * The `useChartApiContext` hook provides access to the chart API.
  * This is only available when the chart is rendered within a chart or a `ChartDataProvider` component.

package/esm/BarChart/AnimatedBarElement.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { SeriesId } from "../models/seriesType/common.js";
-import { BarElementOwnerState } from "./barElementClasses.js";
+import { type SeriesId } from "../models/seriesType/common.js";
+import { type BarElementOwnerState } from "./barElementClasses.js";
 export interface BarProps extends Omit<React.SVGProps<SVGRectElement>, 'id' | 'color' | 'ref' | 'x' | 'y' | 'height' | 'width'> {
   id: SeriesId;
   dataIndex: number;

package/esm/BarChart/BarChart.d.ts

@@ -1,18 +1,18 @@
 import * as React from 'react';
-import { MakeOptional } from '@mui/x-internals/types';
-import { ChartsSlotProps, ChartsSlots } from "../internals/material/index.js";
-import { ChartsToolbarSlotProps, ChartsToolbarSlots } from "../Toolbar/index.js";
-import { BarPlotProps, BarPlotSlotProps, BarPlotSlots } from "./BarPlot.js";
-import { ChartContainerProps } from "../ChartContainer/index.js";
-import { ChartsAxisProps } from "../ChartsAxis/index.js";
-import { BarSeriesType } from "../models/seriesType/bar.js";
-import { ChartsTooltipSlots, ChartsTooltipSlotProps } from "../ChartsTooltip/ChartTooltip.types.js";
-import { ChartsLegendSlots, ChartsLegendSlotProps } from "../ChartsLegend/index.js";
-import { ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.js";
-import { ChartsAxisSlots, ChartsAxisSlotProps } from "../models/axis.js";
-import { ChartsGridProps } from "../ChartsGrid/index.js";
-import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from "../ChartsOverlay/ChartsOverlay.js";
-import { BarChartPluginSignatures } from "./BarChart.plugins.js";
+import { type MakeOptional } from '@mui/x-internals/types';
+import { type ChartsSlotProps, type ChartsSlots } from "../internals/material/index.js";
+import { type ChartsToolbarSlotProps, type ChartsToolbarSlots } from "../Toolbar/index.js";
+import { type BarPlotProps, type BarPlotSlotProps, type BarPlotSlots } from "./BarPlot.js";
+import { type ChartContainerProps } from "../ChartContainer/index.js";
+import { type ChartsAxisProps } from "../ChartsAxis/index.js";
+import { type BarSeriesType } from "../models/seriesType/bar.js";
+import { type ChartsTooltipSlots, type ChartsTooltipSlotProps } from "../ChartsTooltip/ChartTooltip.types.js";
+import { type ChartsLegendSlots, type ChartsLegendSlotProps } from "../ChartsLegend/index.js";
+import { type ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.js";
+import { type ChartsAxisSlots, type ChartsAxisSlotProps } from "../models/axis.js";
+import { type ChartsGridProps } from "../ChartsGrid/index.js";
+import { type ChartsOverlayProps, type ChartsOverlaySlotProps, type ChartsOverlaySlots } from "../ChartsOverlay/ChartsOverlay.js";
+import type { BarChartPluginSignatures } from "./BarChart.plugins.js";
 export interface BarChartSlots extends ChartsAxisSlots, BarPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
 export interface BarChartSlotProps extends ChartsAxisSlotProps, BarPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
 export type BarSeries = MakeOptional<BarSeriesType, 'type'>;

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']),
@@ -338,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']),
@@ -722,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']),
@@ -774,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']),

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

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

@@ -1,8 +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 { BarValueType } from "../../models/index.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.
@@ -67,7 +67,7 @@ export type BarLabelItemProps<V extends BarValueType | null> = Omit<BarLabelOwne
    * @param {BarLabelContext} context data about the bar.
    * @returns {string} The formatted label.
    */
-  barLabel?: 'value' | ((item: BarItem<V>, context: BarLabelContext) => string | null | undefined);
+  barLabel?: 'value' | ((item: BarItem, 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.

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

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

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

@@ -1,9 +1,9 @@
-import { SeriesId } from "../../models/seriesType/common.js";
-import { BarLabelFunction } from "./BarLabel.types.js";
-import { BarValueType } from "../../models/seriesType/bar.js";
-export declare function getBarLabel<V extends BarValueType | null = BarValueType | null>(options: {
-  barLabel: 'value' | BarLabelFunction<V>;
-  value: V;
+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(options: {
+  barLabel: 'value' | BarLabelFunction;
+  value: BarValueType | null;
   dataIndex: number;
   seriesId: SeriesId;
   height: number;

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
   }
 });
 

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;

package/esm/BarChart/checkBarChartScaleErrors.d.ts

@@ -1,5 +1,5 @@
-import { AxisId, ComputedXAxis, ComputedYAxis } from "../models/axis.js";
-import { SeriesId } from "../models/seriesType/common.js";
+import { type AxisId, type ComputedXAxis, type ComputedYAxis } from "../models/axis.js";
+import { type SeriesId } from "../models/seriesType/common.js";
 export declare function checkBarChartScaleErrors(verticalLayout: boolean, seriesId: SeriesId, seriesDataLength: number, xAxisId: AxisId, xAxis: {
   [axisId: AxisId]: Pick<ComputedXAxis, 'scaleType' | 'data'>;
 }, yAxisId: AxisId, yAxis: {

package/esm/BarChart/index.d.ts

@@ -2,6 +2,7 @@ export * from "./BarChart.js";
 export * from "./BarPlot.js";
 export * from "./BarElement.js";
 export * from "./BarLabel/index.js";
+export * from "./FocusedBar.js";
 export * from "./barElementClasses.js";
 export * from "./BarChart.plugins.js";
 export { type BarProps } from "./AnimatedBarElement.js";

package/esm/BarChart/index.js

@@ -2,6 +2,7 @@ export * from "./BarChart.js";
 export * from "./BarPlot.js";
 export * from "./BarElement.js";
 export * from "./BarLabel/index.js";
+export * from "./FocusedBar.js";
 export * from "./barElementClasses.js";
 export * from "./BarChart.plugins.js";
 export { barClasses, getBarUtilityClass } from "./barClasses.js";

package/esm/BarChart/seriesConfig/bar/extremums.d.ts

@@ -1,3 +1,3 @@
-import { CartesianExtremumGetter } from "../../../internals/plugins/models/seriesConfig/index.js";
+import { type CartesianExtremumGetter } from "../../../internals/plugins/models/seriesConfig/index.js";
 export declare const getExtremumX: CartesianExtremumGetter<'bar'>;
 export declare const getExtremumY: CartesianExtremumGetter<'bar'>;

package/esm/BarChart/seriesConfig/bar/getColor.d.ts

@@ -1,3 +1,3 @@
-import { ColorProcessor } from "../../../internals/plugins/models/index.js";
+import { type ColorProcessor } from "../../../internals/plugins/models/index.js";
 declare const getColor: ColorProcessor<'bar'>;
 export default getColor;

package/esm/BarChart/seriesConfig/bar/getSeriesWithDefaultValues.d.ts

@@ -1,5 +1,22 @@
-import { AllSeriesType } from "../../../models/seriesType/index.js";
-export declare function getSeriesWithDefaultValues<T extends 'bar'>(seriesData: AllSeriesType<T>, seriesIndex: number, colors: readonly string[]): AllSeriesType<T> & {
+import { type AllSeriesType } from "../../../models/seriesType/index.js";
+export declare function getSeriesWithDefaultValues(seriesData: AllSeriesType<'bar'>, seriesIndex: number, colors: readonly string[]): {
   id: import("../../../index.js").SeriesId;
   color: string;
+  type: "bar";
+  data?: ReadonlyArray<import("../../../index.js").BarValueType | null>;
+  dataKey?: string;
+  label?: string | ((location: "tooltip" | "legend") => string);
+  layout?: "horizontal" | "vertical";
+  stackOffset?: import("../../../index.js").StackOffsetType;
+  minBarSize?: number;
+  barLabel?: "value" | ((item: import("../../index.js").BarItem, context: import("../../index.js").BarLabelContext) => string | null | undefined);
+  barLabelPlacement?: "center" | "outside";
+  valueFormatter?: import("../../../internals/index.js").SeriesValueFormatter<number | null> | undefined;
+  highlightScope?: import("../../../index.js").HighlightScope;
+  labelMarkType?: import("../../../internals/index.js").ChartsLabelMarkType;
+  colorGetter?: ((data: import("../../../internals/index.js").ColorCallbackValue<number | null>) => string) | undefined;
+  xAxisId?: import("../../../internals/index.js").AxisId;
+  yAxisId?: import("../../../internals/index.js").AxisId;
+  stack?: string;
+  stackOrder?: import("../../../index.js").StackOrderType;
 };

package/esm/BarChart/seriesConfig/bar/legend.d.ts

@@ -1,3 +1,3 @@
-import { LegendGetter } from "../../../internals/plugins/models/index.js";
+import { type LegendGetter } from "../../../internals/plugins/models/index.js";
 declare const legendGetter: LegendGetter<'bar'>;
 export default legendGetter;

package/esm/BarChart/seriesConfig/bar/seriesProcessor.d.ts

@@ -1,3 +1,3 @@
-import { SeriesProcessor } from "../../../internals/plugins/models/index.js";
+import { type SeriesProcessor } from "../../../internals/plugins/models/index.js";
 declare const seriesProcessor: SeriesProcessor<'bar'>;
 export default seriesProcessor;

package/esm/BarChart/seriesConfig/bar/tooltipPosition.js

@@ -1,4 +1,4 @@
-import { getBarDimensions } from "../../useBarPlotData.js";
+import { getBarDimensions } from "../../../internals/getBarDimensions.js";
 const tooltipItemPositionGetter = params => {
   const {
     series,

package/esm/BarChart/seriesConfig/index.d.ts

@@ -1,2 +1,2 @@
-import { ChartSeriesTypeConfig } from "../../internals/plugins/models/seriesConfig/index.js";
+import { type ChartSeriesTypeConfig } from "../../internals/plugins/models/seriesConfig/index.js";
 export declare const barSeriesConfig: ChartSeriesTypeConfig<'bar'>;