@mui/x-charts 8.21.0 → 8.22.0

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;

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.

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

@@ -1,8 +1,8 @@
-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";
+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;

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

@@ -1,6 +1,6 @@
-import { SeriesId } from "../../models/seriesType/common.js";
-import { BarLabelFunction } from "./BarLabel.types.js";
-import { BarValueType } from "../../models/seriesType/bar.js";
+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;

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,4 +1,4 @@
-import { AllSeriesType } from "../../../models/seriesType/index.js";
+import { type AllSeriesType } from "../../../models/seriesType/index.js";
 export declare function getSeriesWithDefaultValues<T extends 'bar'>(seriesData: AllSeriesType<T>, seriesIndex: number, colors: readonly string[]): AllSeriesType<T> & {
   id: import("../../../index.js").SeriesId;
   color: string;

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'>;

package/esm/BarChart/useBarChartProps.d.ts

@@ -1,15 +1,15 @@
 import * as React from 'react';
 import type { BarChartProps } from "./BarChart.js";
-import { ChartContainerProps } from "../ChartContainer/index.js";
-import { BarPlotProps } from "./BarPlot.js";
-import { ChartsGridProps } from "../ChartsGrid/index.js";
-import { ChartsClipPathProps } from "../ChartsClipPath/index.js";
-import { ChartsOverlayProps } from "../ChartsOverlay/index.js";
-import { ChartsAxisProps } from "../ChartsAxis/index.js";
-import { ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.js";
-import { ChartsLegendSlotExtension } from "../ChartsLegend/index.js";
+import { type ChartContainerProps } from "../ChartContainer/index.js";
+import { type BarPlotProps } from "./BarPlot.js";
+import { type ChartsGridProps } from "../ChartsGrid/index.js";
+import { type ChartsClipPathProps } from "../ChartsClipPath/index.js";
+import { type ChartsOverlayProps } from "../ChartsOverlay/index.js";
+import { type ChartsAxisProps } from "../ChartsAxis/index.js";
+import { type ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.js";
+import { type ChartsLegendSlotExtension } from "../ChartsLegend/index.js";
 import type { ChartsWrapperProps } from "../ChartsWrapper/index.js";
-import { BarChartPluginSignatures } from "./BarChart.plugins.js";
+import { type BarChartPluginSignatures } from "./BarChart.plugins.js";
 /**
  * A helper function that extracts BarChartProps from the input props
  * and returns an object with props for the children components of BarChart.

package/esm/BarChart/useBarPlotData.d.ts

@@ -1,23 +1,8 @@
-import { ChartsXAxisProps, ChartsYAxisProps, ComputedAxis, ScaleName } from "../models/axis.js";
-import { ChartDrawingArea } from "../hooks/index.js";
-import { MaskData, ProcessedBarSeriesData } from "./types.js";
-import { ComputedAxisConfig } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.types.js";
-import { ChartSeriesDefaultized } from "../models/seriesType/config.js";
+import { type ChartsXAxisProps, type ChartsYAxisProps } from "../models/axis.js";
+import { type ChartDrawingArea } from "../hooks/index.js";
+import { type MaskData, type ProcessedBarSeriesData } from "./types.js";
+import { type ComputedAxisConfig } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.types.js";
 export declare function useBarPlotData(drawingArea: ChartDrawingArea, xAxes: ComputedAxisConfig<ChartsXAxisProps>, yAxes: ComputedAxisConfig<ChartsYAxisProps>): {
   completedData: ProcessedBarSeriesData[];
   masksData: MaskData[];
-};
-export declare function getBarDimensions(params: {
-  verticalLayout: boolean;
-  xAxisConfig: ComputedAxis<ScaleName, any, ChartsXAxisProps>;
-  yAxisConfig: ComputedAxis<ScaleName, any, ChartsYAxisProps>;
-  series: ChartSeriesDefaultized<'bar'>;
-  dataIndex: number;
-  numberOfGroups: number;
-  groupIndex: number;
-}): {
-  x: number;
-  y: number;
-  height: number;
-  width: number;
-} | null;
+};

package/esm/BarChart/useBarPlotData.js

@@ -3,7 +3,7 @@ import getColor from "./seriesConfig/bar/getColor.js";
 import { useChartId, useXAxes, useYAxes } from "../hooks/index.js";
 import { checkBarChartScaleErrors } from "./checkBarChartScaleErrors.js";
 import { useBarSeriesContext } from "../hooks/useBarSeries.js";
-import { getBandSize } from "../internals/getBandSize.js";
+import { getBarDimensions } from "../internals/getBarDimensions.js";
 export function useBarPlotData(drawingArea, xAxes, yAxes) {
   const seriesData = useBarSeriesContext() ?? {
     series: {},
@@ -105,47 +105,4 @@ export function useBarPlotData(drawingArea, xAxes, yAxes) {
     completedData: data,
     masksData: Object.values(masks)
   };
-}
-function shouldInvertStartCoordinate(verticalLayout, baseValue, reverse) {
-  const isVerticalAndPositive = verticalLayout && baseValue > 0;
-  const isHorizontalAndNegative = !verticalLayout && baseValue < 0;
-  const invertStartCoordinate = isVerticalAndPositive || isHorizontalAndNegative;
-  return reverse ? !invertStartCoordinate : invertStartCoordinate;
-}
-export function getBarDimensions(params) {
-  const {
-    verticalLayout,
-    xAxisConfig,
-    yAxisConfig,
-    series,
-    dataIndex,
-    numberOfGroups,
-    groupIndex
-  } = params;
-  const baseScaleConfig = verticalLayout ? xAxisConfig : yAxisConfig;
-  const reverse = (verticalLayout ? yAxisConfig.reverse : xAxisConfig.reverse) ?? false;
-  const {
-    barWidth,
-    offset
-  } = getBandSize(baseScaleConfig.scale.bandwidth(), numberOfGroups, baseScaleConfig.barGapRatio);
-  const barOffset = groupIndex * (barWidth + offset);
-  const xScale = xAxisConfig.scale;
-  const yScale = yAxisConfig.scale;
-  const baseValue = baseScaleConfig.data[dataIndex];
-  const seriesValue = series.data[dataIndex];
-  if (seriesValue == null) {
-    return null;
-  }
-  const values = series.stackedData[dataIndex];
-  const valueCoordinates = values.map(v => verticalLayout ? yScale(v) : xScale(v));
-  const minValueCoord = Math.round(Math.min(...valueCoordinates));
-  const maxValueCoord = Math.round(Math.max(...valueCoordinates));
-  const barSize = seriesValue === 0 ? 0 : Math.max(series.minBarSize, maxValueCoord - minValueCoord);
-  const startCoordinate = shouldInvertStartCoordinate(verticalLayout, seriesValue, reverse) ? maxValueCoord - barSize : minValueCoord;
-  return {
-    x: verticalLayout ? xScale(baseValue) + barOffset : startCoordinate,
-    y: verticalLayout ? startCoordinate : yScale(baseValue) + barOffset,
-    height: verticalLayout ? barSize : barWidth,
-    width: verticalLayout ? barWidth : barSize
-  };
 }