@mui/x-charts 8.21.0 → 8.22.1

package/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/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/BarChart/BarChart.js

@@ -24,6 +24,7 @@ var _ChartDataProvider = require("../ChartDataProvider");
 var _ChartsSurface = require("../ChartsSurface");
 var _useChartContainerProps = require("../ChartContainer/useChartContainerProps");
 var _ChartsWrapper = require("../ChartsWrapper");
+var _FocusedBar = require("./FocusedBar");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Demos:
@@ -64,7 +65,7 @@ const BarChart = exports.BarChart = /*#__PURE__*/React.forwardRef(function BarCh
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWrapper.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
       children: [props.showToolbar && Toolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_BarPlot.BarPlot, (0, _extends2.default)({}, barPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps))]
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_BarPlot.BarPlot, (0, _extends2.default)({}, barPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusedBar.FocusedBar, {})]
         })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
       })), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props.slotProps?.tooltip))]
     }))
@@ -292,6 +293,11 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
     offset: _propTypes.default.number,
+    ordinalTimeTicks: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['biweekly', 'days', 'hours', 'months', 'quarterly', 'weeks', 'years']), _propTypes.default.shape({
+      format: _propTypes.default.func.isRequired,
+      getTickNumber: _propTypes.default.func.isRequired,
+      isTick: _propTypes.default.func.isRequired
+    })]).isRequired),
     position: _propTypes.default.oneOf(['bottom', 'none', 'top']),
     reverse: _propTypes.default.bool,
     scaleType: _propTypes.default.oneOf(['band']),
@@ -345,6 +351,11 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
     offset: _propTypes.default.number,
+    ordinalTimeTicks: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['biweekly', 'days', 'hours', 'months', 'quarterly', 'weeks', 'years']), _propTypes.default.shape({
+      format: _propTypes.default.func.isRequired,
+      getTickNumber: _propTypes.default.func.isRequired,
+      isTick: _propTypes.default.func.isRequired
+    })]).isRequired),
     position: _propTypes.default.oneOf(['bottom', 'none', 'top']),
     reverse: _propTypes.default.bool,
     scaleType: _propTypes.default.oneOf(['point']),
@@ -729,6 +740,11 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
     offset: _propTypes.default.number,
+    ordinalTimeTicks: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['biweekly', 'days', 'hours', 'months', 'quarterly', 'weeks', 'years']), _propTypes.default.shape({
+      format: _propTypes.default.func.isRequired,
+      getTickNumber: _propTypes.default.func.isRequired,
+      isTick: _propTypes.default.func.isRequired
+    })]).isRequired),
     position: _propTypes.default.oneOf(['left', 'none', 'right']),
     reverse: _propTypes.default.bool,
     scaleType: _propTypes.default.oneOf(['band']),
@@ -781,6 +797,11 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
     offset: _propTypes.default.number,
+    ordinalTimeTicks: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['biweekly', 'days', 'hours', 'months', 'quarterly', 'weeks', 'years']), _propTypes.default.shape({
+      format: _propTypes.default.func.isRequired,
+      getTickNumber: _propTypes.default.func.isRequired,
+      isTick: _propTypes.default.func.isRequired
+    })]).isRequired),
     position: _propTypes.default.oneOf(['left', 'none', 'right']),
     reverse: _propTypes.default.bool,
     scaleType: _propTypes.default.oneOf(['point']),

package/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/BarChart/BarChart.plugins.js

@@ -6,8 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.BAR_CHART_PLUGINS = void 0;
 var _useChartZAxis = require("../internals/plugins/featurePlugins/useChartZAxis");
 var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
+var _useChartTooltip = require("../internals/plugins/featurePlugins/useChartTooltip");
 var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
 var _useChartHighlight = require("../internals/plugins/featurePlugins/useChartHighlight");
 var _useChartKeyboardNavigation = require("../internals/plugins/featurePlugins/useChartKeyboardNavigation");
 var _useChartBrush = require("../internals/plugins/featurePlugins/useChartBrush");
-const BAR_CHART_PLUGINS = exports.BAR_CHART_PLUGINS = [_useChartZAxis.useChartZAxis, _useChartBrush.useChartBrush, _useChartInteraction.useChartInteraction, _useChartCartesianAxis.useChartCartesianAxis, _useChartHighlight.useChartHighlight, _useChartKeyboardNavigation.useChartKeyboardNavigation];
+const BAR_CHART_PLUGINS = exports.BAR_CHART_PLUGINS = [_useChartZAxis.useChartZAxis, _useChartBrush.useChartBrush, _useChartTooltip.useChartTooltip, _useChartInteraction.useChartInteraction, _useChartCartesianAxis.useChartCartesianAxis, _useChartHighlight.useChartHighlight, _useChartKeyboardNavigation.useChartKeyboardNavigation];

package/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/BarChart/BarElement.js

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

package/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/BarChart/BarLabel/BarLabel.js

@@ -15,6 +15,7 @@ var _styles = require("@mui/material/styles");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useAnimateBarLabel = require("../../hooks/animation/useAnimateBarLabel");
 var _barLabelClasses = require("./barLabelClasses");
+var _animation = require("../../internals/animation/animation");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["seriesId", "dataIndex", "color", "isFaded", "isHighlighted", "classes", "skipAnimation", "layout", "xOrigin", "yOrigin", "placement"];
 const BarLabelComponent = exports.BarLabelComponent = (0, _styles.styled)('text', {
@@ -30,25 +31,28 @@ const BarLabelComponent = exports.BarLabelComponent = (0, _styles.styled)('text'
 }) => (0, _extends2.default)({}, 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.barLabelClasses.faded}`]: {
-    opacity: 0.3
-  }
+  transitionProperty: 'opacity, fill',
+  transitionDuration: `${_animation.ANIMATION_DURATION_MS}ms`,
+  transitionTimingFunction: _animation.ANIMATION_TIMING_FUNCTION,
+  pointerEvents: 'none'
 }));
 function BarLabel(inProps) {
   const props = (0, _styles.useThemeProps)({
     props: inProps,
     name: 'MuiBarLabel'
   });
-  const otherProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const {
+      isFaded
+    } = props,
+    otherProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const animatedProps = (0, _useAnimateBarLabel.useAnimateBarLabel)(props);
   const textAnchor = getTextAnchor(props);
   const dominantBaseline = getDominantBaseline(props);
+  const fadedOpacity = isFaded ? 0.3 : 1;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(BarLabelComponent, (0, _extends2.default)({
     textAnchor: textAnchor,
-    dominantBaseline: dominantBaseline
+    dominantBaseline: dominantBaseline,
+    opacity: fadedOpacity
   }, otherProps, animatedProps));
 }
 function getTextAnchor({

package/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/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/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/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/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/BarChart/BarPlot.js

@@ -21,6 +21,7 @@ var _useSkipAnimation = require("../hooks/useSkipAnimation");
 var _useInternalIsZoomInteracting = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting");
 var _useBarPlotData = require("./useBarPlotData");
 var _barClasses = require("./barClasses");
+var _animation = require("../internals/animation/animation");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["skipAnimation", "onItemClick", "borderRadius", "barLabel"];
 const BarPlotRoot = (0, _styles.styled)('g', {
@@ -28,7 +29,9 @@ const BarPlotRoot = (0, _styles.styled)('g', {
   slot: 'Root'
 })({
   [`& .${_barElementClasses.barElementClasses.root}`]: {
-    transition: 'opacity 0.2s ease-in, fill 0.2s ease-in'
+    transitionProperty: 'opacity, fill',
+    transitionDuration: `${_animation.ANIMATION_DURATION_MS}ms`,
+    transitionTimingFunction: _animation.ANIMATION_TIMING_FUNCTION
   }
 });
 

package/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/BarChart/FocusedBar.js

@@ -0,0 +1,68 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FocusedBar = FocusedBar;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _styles = require("@mui/material/styles");
+var _useFocusedItem = require("../hooks/useFocusedItem");
+var _hooks = require("../hooks");
+var _getBarDimensions = require("../internals/getBarDimensions");
+var _jsxRuntime = require("react/jsx-runtime");
+function FocusedBar(props) {
+  const theme = (0, _styles.useTheme)();
+  const focusedItem = (0, _useFocusedItem.useFocusedItem)();
+  const barSeries = (0, _hooks.useBarSeriesContext)();
+  const {
+    xAxis,
+    xAxisIds
+  } = (0, _hooks.useXAxes)();
+  const {
+    yAxis,
+    yAxisIds
+  } = (0, _hooks.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 = (0, _getBarDimensions.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__*/(0, _jsxRuntime.jsx)("rect", (0, _extends2.default)({
+    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/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/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/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/BarChart/index.js

@@ -67,6 +67,18 @@ Object.keys(_BarLabel).forEach(function (key) {
     }
   });
 });
+var _FocusedBar = require("./FocusedBar");
+Object.keys(_FocusedBar).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _FocusedBar[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _FocusedBar[key];
+    }
+  });
+});
 var _barElementClasses = require("./barElementClasses");
 Object.keys(_barElementClasses).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/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/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/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/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/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/BarChart/seriesConfig/bar/tooltipPosition.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _useBarPlotData = require("../../useBarPlotData");
+var _getBarDimensions = require("../../../internals/getBarDimensions");
 const tooltipItemPositionGetter = params => {
   const {
     series,
@@ -22,7 +22,7 @@ const tooltipItemPositionGetter = params => {
   if (axesConfig.x === undefined || axesConfig.y === undefined) {
     return null;
   }
-  const dimensions = (0, _useBarPlotData.getBarDimensions)({
+  const dimensions = (0, _getBarDimensions.getBarDimensions)({
     verticalLayout: itemSeries.layout === 'vertical',
     xAxisConfig: axesConfig.x,
     yAxisConfig: axesConfig.y,

package/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/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.