@mui/x-charts 9.6.0 → 9.8.0

package/ChartsRotationAxis/chartsRotationAxisClasses.d.ts

@@ -1,4 +1,4 @@
-import { type ChartsRadialAxisClasses } from "../ChartsRadiusAxis/sharedRadialAxisClasses.js";
+import type { ChartsRadialAxisClasses } from "../ChartsRadiusAxis/sharedRadialAxisClasses.js";
 export declare const useUtilityClasses: (props: {
   classes?: Partial<ChartsRadialAxisClasses>;
 }) => Record<"root" | "line" | "tickContainer" | "tick" | "tickLabel", string>;

package/ChartsSurface/ChartsSurface.d.mts

@@ -1,6 +1,6 @@
-import { type SxProps, type Theme } from '@mui/material/styles';
+import type { SxProps, Theme } from '@mui/material/styles';
 import * as React from 'react';
-import { type ChartsLayerContainerProps } from "../ChartsLayerContainer/index.mjs";
+import type { ChartsLayerContainerProps } from "../ChartsLayerContainer/index.mjs";
 export interface ChartsSurfaceProps extends Omit<React.SVGProps<SVGSVGElement>, 'id' | 'children' | 'className' | 'height' | 'width' | 'cx' | 'cy' | 'viewBox' | 'color' | 'ref'>, Pick<ChartsLayerContainerProps, 'title' | 'desc'> {
   className?: string;
   sx?: SxProps<Theme>;

package/ChartsSurface/ChartsSurface.d.ts

@@ -1,6 +1,6 @@
-import { type SxProps, type Theme } from '@mui/material/styles';
+import type { SxProps, Theme } from '@mui/material/styles';
 import * as React from 'react';
-import { type ChartsLayerContainerProps } from "../ChartsLayerContainer/index.js";
+import type { ChartsLayerContainerProps } from "../ChartsLayerContainer/index.js";
 export interface ChartsSurfaceProps extends Omit<React.SVGProps<SVGSVGElement>, 'id' | 'children' | 'className' | 'height' | 'width' | 'cx' | 'cy' | 'viewBox' | 'color' | 'ref'>, Pick<ChartsLayerContainerProps, 'title' | 'desc'> {
   className?: string;
   sx?: SxProps<Theme>;

package/ChartsSvgLayer/ChartsSvgLayer.d.mts

@@ -1,4 +1,4 @@
-import { type SxProps, type Theme } from '@mui/material/styles';
+import type { SxProps, Theme } from '@mui/material/styles';
 import * as React from 'react';
 export interface ChartsSvgLayerProps extends Omit<React.SVGProps<SVGSVGElement>, 'id' | 'children' | 'className' | 'height' | 'width' | 'cx' | 'cy' | 'viewBox' | 'color' | 'ref'> {
   className?: string;

package/ChartsSvgLayer/ChartsSvgLayer.d.ts

@@ -1,4 +1,4 @@
-import { type SxProps, type Theme } from '@mui/material/styles';
+import type { SxProps, Theme } from '@mui/material/styles';
 import * as React from 'react';
 export interface ChartsSvgLayerProps extends Omit<React.SVGProps<SVGSVGElement>, 'id' | 'children' | 'className' | 'height' | 'width' | 'cx' | 'cy' | 'viewBox' | 'color' | 'ref'> {
   className?: string;

package/ChartsText/ChartsText.d.mts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type GetWordsByLinesParams } from "../internals/getWordsByLines.mjs";
+import type { GetWordsByLinesParams } from "../internals/getWordsByLines.mjs";
 export interface ChartsTextProps extends Omit<React.SVGTextElementAttributes<SVGTextElement>, 'width' | 'ref' | 'style' | 'dominantBaseline'>, GetWordsByLinesParams {
   /**
    * Height of a text line (in `em`).

package/ChartsText/ChartsText.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type GetWordsByLinesParams } from "../internals/getWordsByLines.js";
+import type { GetWordsByLinesParams } from "../internals/getWordsByLines.js";
 export interface ChartsTextProps extends Omit<React.SVGTextElementAttributes<SVGTextElement>, 'width' | 'ref' | 'style' | 'dominantBaseline'>, GetWordsByLinesParams {
   /**
    * Height of a text line (in `em`).

package/ChartsText/defaultTextPlacement.d.mts

@@ -1,4 +1,4 @@
-import { type ChartsTextStyle } from "../internals/getWordsByLines.mjs";
+import type { ChartsTextStyle } from "../internals/getWordsByLines.mjs";
 /**
  * Provide the text-anchor based on the angle between the text and the associated element.
  * - 0 means the element is on top of the text, 180 bellow, and 90 on the right of the text.

package/ChartsText/defaultTextPlacement.d.ts

@@ -1,4 +1,4 @@
-import { type ChartsTextStyle } from "../internals/getWordsByLines.js";
+import type { ChartsTextStyle } from "../internals/getWordsByLines.js";
 /**
  * Provide the text-anchor based on the angle between the text and the associated element.
  * - 0 means the element is on top of the text, 180 bellow, and 90 on the right of the text.

package/ChartsTooltip/ChartTooltip.types.d.mts

@@ -1,5 +1,5 @@
-import { type ChartsTooltipProps } from "./ChartsTooltip.mjs";
-import { type TriggerOptions } from "./utils.mjs";
+import type { ChartsTooltipProps } from "./ChartsTooltip.mjs";
+import type { TriggerOptions } from "./utils.mjs";
 import type { TooltipPropsOverrides } from "../models/chartsSlotsComponentsProps.mjs";
 export interface ChartsTooltipSlots<T extends TriggerOptions = TriggerOptions> {
   /**

package/ChartsTooltip/ChartTooltip.types.d.ts

@@ -1,5 +1,5 @@
-import { type ChartsTooltipProps } from "./ChartsTooltip.js";
-import { type TriggerOptions } from "./utils.js";
+import type { ChartsTooltipProps } from "./ChartsTooltip.js";
+import type { TriggerOptions } from "./utils.js";
 import type { TooltipPropsOverrides } from "../models/chartsSlotsComponentsProps.js";
 export interface ChartsTooltipSlots<T extends TriggerOptions = TriggerOptions> {
   /**

package/ChartsTooltip/ChartsAxisTooltipContent.d.mts

@@ -1,5 +1,5 @@
-import { type SxProps, type Theme } from '@mui/material/styles';
-import { type ChartsTooltipClasses } from "./chartsTooltipClasses.mjs";
+import type { SxProps, Theme } from '@mui/material/styles';
+import type { ChartsTooltipClasses } from "./chartsTooltipClasses.mjs";
 export interface ChartsAxisTooltipContentClasses extends ChartsTooltipClasses {}
 export interface ChartsAxisTooltipContentProps {
   /**

package/ChartsTooltip/ChartsAxisTooltipContent.d.ts

@@ -1,5 +1,5 @@
-import { type SxProps, type Theme } from '@mui/material/styles';
-import { type ChartsTooltipClasses } from "./chartsTooltipClasses.js";
+import type { SxProps, Theme } from '@mui/material/styles';
+import type { ChartsTooltipClasses } from "./chartsTooltipClasses.js";
 export interface ChartsAxisTooltipContentClasses extends ChartsTooltipClasses {}
 export interface ChartsAxisTooltipContentProps {
   /**

package/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -113,11 +113,18 @@ process.env.NODE_ENV !== "production" ? DefaultContent.propTypes /* remove-propt
   item: _propTypes.default.shape({
     color: _propTypes.default.string.isRequired,
     formattedLabel: _propTypes.default.string,
-    formattedValue: _propTypes.default.object.isRequired,
+    formattedValue: _propTypes.default.string.isRequired,
     markShape: _propTypes.default.oneOf(['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']),
     markType: _propTypes.default.oneOfType([_propTypes.default.oneOf(['circle', 'line', 'line+mark', 'square']), _propTypes.default.func]),
     seriesId: _propTypes.default.string.isRequired,
-    value: _propTypes.default.any.isRequired
+    value: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
+      colorValue: _propTypes.default.any,
+      id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+      sizeValue: _propTypes.default.any,
+      x: _propTypes.default.number.isRequired,
+      y: _propTypes.default.number.isRequired,
+      z: _propTypes.default.any
+    })])
   }).isRequired
 } : void 0;
 process.env.NODE_ENV !== "production" ? ChartsAxisTooltipContent.propTypes /* remove-proptypes */ = {

package/ChartsTooltip/ChartsAxisTooltipContent.mjs

@@ -107,11 +107,18 @@ process.env.NODE_ENV !== "production" ? DefaultContent.propTypes /* remove-propt
   item: PropTypes.shape({
     color: PropTypes.string.isRequired,
     formattedLabel: PropTypes.string,
-    formattedValue: PropTypes.object.isRequired,
+    formattedValue: PropTypes.string.isRequired,
     markShape: PropTypes.oneOf(['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']),
     markType: PropTypes.oneOfType([PropTypes.oneOf(['circle', 'line', 'line+mark', 'square']), PropTypes.func]),
     seriesId: PropTypes.string.isRequired,
-    value: PropTypes.any.isRequired
+    value: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+      colorValue: PropTypes.any,
+      id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+      sizeValue: PropTypes.any,
+      x: PropTypes.number.isRequired,
+      y: PropTypes.number.isRequired,
+      z: PropTypes.any
+    })])
   }).isRequired
 } : void 0;
 process.env.NODE_ENV !== "production" ? ChartsAxisTooltipContent.propTypes /* remove-proptypes */ = {

package/ChartsTooltip/ChartsItemTooltipContent.d.mts

@@ -1,5 +1,5 @@
-import { type SxProps, type Theme } from '@mui/material/styles';
-import { type ChartsTooltipClasses } from "./chartsTooltipClasses.mjs";
+import type { SxProps, Theme } from '@mui/material/styles';
+import type { ChartsTooltipClasses } from "./chartsTooltipClasses.mjs";
 export interface ChartsItemTooltipContentClasses extends ChartsTooltipClasses {}
 export interface ChartsItemTooltipContentProps {
   /**

package/ChartsTooltip/ChartsItemTooltipContent.d.ts

@@ -1,5 +1,5 @@
-import { type SxProps, type Theme } from '@mui/material/styles';
-import { type ChartsTooltipClasses } from "./chartsTooltipClasses.js";
+import type { SxProps, Theme } from '@mui/material/styles';
+import type { ChartsTooltipClasses } from "./chartsTooltipClasses.js";
 export interface ChartsItemTooltipContentClasses extends ChartsTooltipClasses {}
 export interface ChartsItemTooltipContentProps {
   /**

package/ChartsTooltip/ChartsTooltip.d.mts

@@ -1,5 +1,5 @@
-import { type ChartsTooltipContainerProps } from "./ChartsTooltipContainer.mjs";
-import { type TriggerOptions } from "./utils.mjs";
+import type { ChartsTooltipContainerProps } from "./ChartsTooltipContainer.mjs";
+import type { TriggerOptions } from "./utils.mjs";
 export type ChartsTooltipProps<T extends TriggerOptions = TriggerOptions> = T extends TriggerOptions ? Omit<ChartsTooltipContainerProps<T>, 'children'> & {
   /**
    * Defines the sort order in which series items are displayed in the axis tooltip.

package/ChartsTooltip/ChartsTooltip.d.ts

@@ -1,5 +1,5 @@
-import { type ChartsTooltipContainerProps } from "./ChartsTooltipContainer.js";
-import { type TriggerOptions } from "./utils.js";
+import type { ChartsTooltipContainerProps } from "./ChartsTooltipContainer.js";
+import type { TriggerOptions } from "./utils.js";
 export type ChartsTooltipProps<T extends TriggerOptions = TriggerOptions> = T extends TriggerOptions ? Omit<ChartsTooltipContainerProps<T>, 'children'> & {
   /**
    * Defines the sort order in which series items are displayed in the axis tooltip.

package/ChartsTooltip/ChartsTooltipContainer.d.mts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { type PopperProps } from '@mui/material/Popper';
-import { type TriggerOptions } from "./utils.mjs";
-import { type ChartsTooltipClasses } from "./chartsTooltipClasses.mjs";
+import type { PopperProps } from '@mui/material/Popper';
+import type { TriggerOptions } from "./utils.mjs";
+import type { ChartsTooltipClasses } from "./chartsTooltipClasses.mjs";
 type PopperSlots = NonNullable<PopperProps['slots']>;
 type PopperSlotProps = NonNullable<PopperProps['slotProps']>;
 export interface ChartsTooltipContainerSlots extends PopperSlots {}

package/ChartsTooltip/ChartsTooltipContainer.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { type PopperProps } from '@mui/material/Popper';
-import { type TriggerOptions } from "./utils.js";
-import { type ChartsTooltipClasses } from "./chartsTooltipClasses.js";
+import type { PopperProps } from '@mui/material/Popper';
+import type { TriggerOptions } from "./utils.js";
+import type { ChartsTooltipClasses } from "./chartsTooltipClasses.js";
 type PopperSlots = NonNullable<PopperProps['slots']>;
 type PopperSlotProps = NonNullable<PopperProps['slotProps']>;
 export interface ChartsTooltipContainerSlots extends PopperSlots {}

package/ChartsTooltip/ChartsTooltipContainer.js

@@ -25,6 +25,7 @@ var _warning = require("@mui/x-internals/warning");
 var _utils = require("./utils");
 var _chartsTooltipClasses = require("./chartsTooltipClasses");
 var _useStore = require("../internals/store/useStore");
+var _useChartSeriesConfig = require("../internals/plugins/corePlugins/useChartSeriesConfig");
 var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
 var _useChartTooltip = require("../internals/plugins/featurePlugins/useChartTooltip");
 var _useChartCartesianTooltip = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianTooltip.selectors");
@@ -56,10 +57,13 @@ const defaultAnchorByTrigger = {
   axis: 'chart',
   none: 'pointer'
 };
-const getPositionSelectorByAnchor = anchor => {
+
+// The axis and null selectors take a state the item selector's state is
+// assignable to, so they all converge to `TooltipItemPositionSelector`.
+const getPositionSelectorByAnchor = (anchor, selectorItemPosition) => {
   switch (anchor) {
     case 'node':
-      return _useChartTooltip.selectorChartsTooltipItemPosition;
+      return selectorItemPosition;
     case 'chart':
       return _useChartCartesianTooltip.selectorChartsTooltipAxisPosition;
     default:
@@ -125,7 +129,14 @@ function ChartsTooltipContainer(inProps) {
   const lastInteraction = store.use(_useChartInteraction.selectorChartsLastInteraction);
   const pointerAnchorUnavailable = lastInteraction === 'keyboard' || pointerType === null;
   const computedAnchor = pointerAnchorUnavailable ? defaultAnchorByTrigger[trigger] : anchor;
-  const itemPosition = store.use(getPositionSelectorByAnchor(computedAnchor), props.position);
+
+  // A series type can override how its item tooltip is positioned (e.g. map
+  // shapes position from the geo projection); otherwise the generic item
+  // selector is used.
+  const tooltipItem = store.use(_useChartTooltip.selectorChartsTooltipItem);
+  const seriesConfig = store.use(_useChartSeriesConfig.selectorChartSeriesConfig);
+  const selectorItemPosition = tooltipItem && seriesConfig[tooltipItem.type]?.selectorTooltipItemPosition || _useChartTooltip.selectorChartsTooltipItemPosition;
+  const itemPosition = store.use(getPositionSelectorByAnchor(computedAnchor, selectorItemPosition), props.position);
   const isTooltipNodeAnchored = itemPosition !== null;
   React.useEffect(() => {
     const svgElement = chartsLayerContainerRef.current;

package/ChartsTooltip/ChartsTooltipContainer.mjs

@@ -18,8 +18,9 @@ import { warnOnce } from '@mui/x-internals/warning';
 import { useIsFineMainPointer } from "./utils.mjs";
 import { useUtilityClasses } from "./chartsTooltipClasses.mjs";
 import { useStore } from "../internals/store/useStore.mjs";
+import { selectorChartSeriesConfig } from "../internals/plugins/corePlugins/useChartSeriesConfig/index.mjs";
 import { selectorChartsLastInteraction, selectorChartsPointerType } from "../internals/plugins/featurePlugins/useChartInteraction/index.mjs";
-import { selectorChartsTooltipItemIsDefined, selectorChartsTooltipItemPosition } from "../internals/plugins/featurePlugins/useChartTooltip/index.mjs";
+import { selectorChartsTooltipItem, selectorChartsTooltipItemIsDefined, selectorChartsTooltipItemPosition } from "../internals/plugins/featurePlugins/useChartTooltip/index.mjs";
 import { selectorChartsInteractionAxisTooltip, selectorChartsTooltipAxisPosition } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianTooltip.selectors.mjs";
 import { selectorChartsInteractionPolarAxisTooltip } from "../internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors.mjs";
 import { useAxisSystem } from "../hooks/useAxisSystem.mjs";
@@ -49,10 +50,13 @@ const defaultAnchorByTrigger = {
   axis: 'chart',
   none: 'pointer'
 };
-const getPositionSelectorByAnchor = anchor => {
+
+// The axis and null selectors take a state the item selector's state is
+// assignable to, so they all converge to `TooltipItemPositionSelector`.
+const getPositionSelectorByAnchor = (anchor, selectorItemPosition) => {
   switch (anchor) {
     case 'node':
-      return selectorChartsTooltipItemPosition;
+      return selectorItemPosition;
     case 'chart':
       return selectorChartsTooltipAxisPosition;
     default:
@@ -118,7 +122,14 @@ function ChartsTooltipContainer(inProps) {
   const lastInteraction = store.use(selectorChartsLastInteraction);
   const pointerAnchorUnavailable = lastInteraction === 'keyboard' || pointerType === null;
   const computedAnchor = pointerAnchorUnavailable ? defaultAnchorByTrigger[trigger] : anchor;
-  const itemPosition = store.use(getPositionSelectorByAnchor(computedAnchor), props.position);
+
+  // A series type can override how its item tooltip is positioned (e.g. map
+  // shapes position from the geo projection); otherwise the generic item
+  // selector is used.
+  const tooltipItem = store.use(selectorChartsTooltipItem);
+  const seriesConfig = store.use(selectorChartSeriesConfig);
+  const selectorItemPosition = tooltipItem && seriesConfig[tooltipItem.type]?.selectorTooltipItemPosition || selectorChartsTooltipItemPosition;
+  const itemPosition = store.use(getPositionSelectorByAnchor(computedAnchor, selectorItemPosition), props.position);
   const isTooltipNodeAnchored = itemPosition !== null;
   React.useEffect(() => {
     const svgElement = chartsLayerContainerRef.current;

package/ChartsTooltip/useAxesTooltip.d.mts

@@ -1,7 +1,7 @@
-import { type SeriesId } from "../models/seriesType/common.mjs";
-import { type CartesianChartSeriesType, type ChartsSeriesConfig, type PolarChartSeriesType } from "../models/seriesType/config.mjs";
-import { type ComputedAxis, type PolarAxisDefaultized, type AxisId } from "../models/axis.mjs";
-import { type ChartsLabelMarkProps } from "../ChartsLabel/index.mjs";
+import type { SeriesId } from "../models/seriesType/common.mjs";
+import type { CartesianChartSeriesType, ChartsSeriesConfig, PolarChartSeriesType } from "../models/seriesType/config.mjs";
+import type { ComputedAxis, PolarAxisDefaultized, AxisId } from "../models/axis.mjs";
+import type { ChartsLabelMarkProps } from "../ChartsLabel/index.mjs";
 export interface UseAxesTooltipReturnValue<SeriesType extends CartesianChartSeriesType | PolarChartSeriesType = Exclude<CartesianChartSeriesType, 'ohlc'> | PolarChartSeriesType, AxisValueT extends string | number | Date = string | number | Date> {
   axisDirection: SeriesType extends CartesianChartSeriesType ? 'x' | 'y' : 'rotation' | 'radius';
   mainAxis: SeriesType extends CartesianChartSeriesType ? ComputedAxis : PolarAxisDefaultized;

package/ChartsTooltip/useAxesTooltip.d.ts

@@ -1,7 +1,7 @@
-import { type SeriesId } from "../models/seriesType/common.js";
-import { type CartesianChartSeriesType, type ChartsSeriesConfig, type PolarChartSeriesType } from "../models/seriesType/config.js";
-import { type ComputedAxis, type PolarAxisDefaultized, type AxisId } from "../models/axis.js";
-import { type ChartsLabelMarkProps } from "../ChartsLabel/index.js";
+import type { SeriesId } from "../models/seriesType/common.js";
+import type { CartesianChartSeriesType, ChartsSeriesConfig, PolarChartSeriesType } from "../models/seriesType/config.js";
+import type { ComputedAxis, PolarAxisDefaultized, AxisId } from "../models/axis.js";
+import type { ChartsLabelMarkProps } from "../ChartsLabel/index.js";
 export interface UseAxesTooltipReturnValue<SeriesType extends CartesianChartSeriesType | PolarChartSeriesType = Exclude<CartesianChartSeriesType, 'ohlc'> | PolarChartSeriesType, AxisValueT extends string | number | Date = string | number | Date> {
   axisDirection: SeriesType extends CartesianChartSeriesType ? 'x' | 'y' : 'rotation' | 'radius';
   mainAxis: SeriesType extends CartesianChartSeriesType ? ComputedAxis : PolarAxisDefaultized;

package/ChartsTooltip/useItemTooltip.d.mts

@@ -1,5 +1,5 @@
 import type { ChartSeriesType } from "../models/seriesType/config.mjs";
-import { type ItemTooltip, type ItemTooltipWithMultipleValues } from "../internals/plugins/corePlugins/useChartSeriesConfig/index.mjs";
+import type { ItemTooltip, ItemTooltipWithMultipleValues } from "../internals/plugins/corePlugins/useChartSeriesConfig/index.mjs";
 export type UseItemTooltipReturnValue<SeriesType extends ChartSeriesType> = ItemTooltip<SeriesType>;
 export type UseRadarItemTooltipReturnValue = ItemTooltipWithMultipleValues<'radar'>;
 export declare function useInternalItemTooltip<SeriesType extends ChartSeriesType>(): (SeriesType extends 'radar' ? ItemTooltipWithMultipleValues<SeriesType> : ItemTooltip<SeriesType>) | null;

package/ChartsTooltip/useItemTooltip.d.ts

@@ -1,5 +1,5 @@
 import type { ChartSeriesType } from "../models/seriesType/config.js";
-import { type ItemTooltip, type ItemTooltipWithMultipleValues } from "../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
+import type { ItemTooltip, ItemTooltipWithMultipleValues } from "../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 export type UseItemTooltipReturnValue<SeriesType extends ChartSeriesType> = ItemTooltip<SeriesType>;
 export type UseRadarItemTooltipReturnValue = ItemTooltipWithMultipleValues<'radar'>;
 export declare function useInternalItemTooltip<SeriesType extends ChartSeriesType>(): (SeriesType extends 'radar' ? ItemTooltipWithMultipleValues<SeriesType> : ItemTooltip<SeriesType>) | null;

package/ChartsWrapper/ChartsWrapper.d.mts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { type SxProps, type Theme } from '@mui/material/styles';
-import { type Direction } from "../ChartsLegend/index.mjs";
-import { type Position } from "../models/index.mjs";
+import type { SxProps, Theme } from '@mui/material/styles';
+import type { Direction } from "../ChartsLegend/index.mjs";
+import type { Position } from "../models/index.mjs";
 export interface ChartsWrapperProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * The position of the legend.

package/ChartsWrapper/ChartsWrapper.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { type SxProps, type Theme } from '@mui/material/styles';
-import { type Direction } from "../ChartsLegend/index.js";
-import { type Position } from "../models/index.js";
+import type { SxProps, Theme } from '@mui/material/styles';
+import type { Direction } from "../ChartsLegend/index.js";
+import type { Position } from "../models/index.js";
 export interface ChartsWrapperProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * The position of the legend.

package/ChartsXAxis/ChartsGroupedXAxisTicks.d.mts

@@ -1,4 +1,4 @@
-import { type ChartsXAxisProps } from "../models/axis.mjs";
+import type { ChartsXAxisProps } from "../models/axis.mjs";
 interface ChartsGroupedXAxisProps extends ChartsXAxisProps {}
 /**
  * @ignore - internal component.

package/ChartsXAxis/ChartsGroupedXAxisTicks.d.ts

@@ -1,4 +1,4 @@
-import { type ChartsXAxisProps } from "../models/axis.js";
+import type { ChartsXAxisProps } from "../models/axis.js";
 interface ChartsGroupedXAxisProps extends ChartsXAxisProps {}
 /**
  * @ignore - internal component.

package/ChartsXAxis/ChartsGroupedXAxisTicks.js

@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartsGroupedXAxisTicks = ChartsGroupedXAxisTicks;
-var _formatErrorMessage2 = _interopRequireDefault(require("@mui/x-internals/formatErrorMessage"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _formatErrorMessage2 = _interopRequireDefault(require("@mui/x-internals/formatErrorMessage"));
 var React = _interopRequireWildcard(require("react"));
 var _scaleGuards = require("../internals/scaleGuards");
 var _useChartsContext = require("../context/ChartsProvider/useChartsContext");
@@ -17,18 +17,8 @@ var _useTicksGrouped = require("../hooks/useTicksGrouped");
 var _useAxisTicksProps = require("./useAxisTicksProps");
 var _useStore = require("../internals/store/useStore");
 var _useChartAxisAutoSize = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useChartAxisAutoSize.selectors");
+var _getGroupingConfig = require("../internals/getGroupingConfig");
 var _jsxRuntime = require("react/jsx-runtime");
-const DEFAULT_GROUPING_CONFIG = {
-  tickSize: 6
-};
-const getGroupingConfig = (groups, groupIndex, tickSize, computedGroupTickSizes) => {
-  const config = groups[groupIndex] ?? {};
-  const defaultTickSize = tickSize ?? DEFAULT_GROUPING_CONFIG.tickSize;
-  const calculatedTickSize = defaultTickSize * groupIndex * 2 + defaultTickSize;
-  return (0, _extends2.default)({}, DEFAULT_GROUPING_CONFIG, config, {
-    tickSize: computedGroupTickSizes?.[groupIndex] ?? config.tickSize ?? calculatedTickSize
-  });
-};
 /**
  * @ignore - internal component.
  */
@@ -87,7 +77,7 @@ function ChartsGroupedXAxisTicks(inProps) {
       const tickLabel = item.formattedValue;
       const ignoreTick = item.ignoreTick ?? false;
       const groupIndex = item.groupIndex ?? 0;
-      const groupConfig = getGroupingConfig(groups, groupIndex, tickSize, computedGroupTickSizes);
+      const groupConfig = (0, _getGroupingConfig.getGroupingConfig)(groups, groupIndex, tickSize, computedGroupTickSizes);
       const tickYSize = positionSign * groupConfig.tickSize;
       const labelPositionY = positionSign * (groupConfig.tickSize + _utilities.TICK_LABEL_GAP);
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {

package/ChartsXAxis/ChartsGroupedXAxisTicks.mjs

@@ -1,7 +1,7 @@
 'use client';
 
-import _formatErrorMessage from "@mui/x-internals/formatErrorMessage";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _formatErrorMessage from "@mui/x-internals/formatErrorMessage";
 import * as React from 'react';
 import { isOrdinalScale } from "../internals/scaleGuards.mjs";
 import { useChartsContext } from "../context/ChartsProvider/useChartsContext.mjs";
@@ -10,18 +10,8 @@ import { useTicksGrouped } from "../hooks/useTicksGrouped.mjs";
 import { useAxisTicksProps } from "./useAxisTicksProps.mjs";
 import { useStore } from "../internals/store/useStore.mjs";
 import { selectorChartXAxisAutoSizeResults } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useChartAxisAutoSize.selectors.mjs";
+import { getGroupingConfig } from "../internals/getGroupingConfig.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const DEFAULT_GROUPING_CONFIG = {
-  tickSize: 6
-};
-const getGroupingConfig = (groups, groupIndex, tickSize, computedGroupTickSizes) => {
-  const config = groups[groupIndex] ?? {};
-  const defaultTickSize = tickSize ?? DEFAULT_GROUPING_CONFIG.tickSize;
-  const calculatedTickSize = defaultTickSize * groupIndex * 2 + defaultTickSize;
-  return _extends({}, DEFAULT_GROUPING_CONFIG, config, {
-    tickSize: computedGroupTickSizes?.[groupIndex] ?? config.tickSize ?? calculatedTickSize
-  });
-};
 /**
  * @ignore - internal component.
  */

package/ChartsXAxis/ChartsXAxis.d.mts

@@ -1,4 +1,4 @@
-import { type ChartsXAxisProps, type ChartsAxisSlots, type ChartsAxisSlotProps } from "../models/axis.mjs";
+import type { ChartsXAxisProps, ChartsAxisSlots, ChartsAxisSlotProps } from "../models/axis.mjs";
 export interface ChartsXAxisSlots extends ChartsAxisSlots {}
 export interface ChartsXAxisSlotProps extends ChartsAxisSlotProps {}
 /**

package/ChartsXAxis/ChartsXAxis.d.ts

@@ -1,4 +1,4 @@
-import { type ChartsXAxisProps, type ChartsAxisSlots, type ChartsAxisSlotProps } from "../models/axis.js";
+import type { ChartsXAxisProps, ChartsAxisSlots, ChartsAxisSlotProps } from "../models/axis.js";
 export interface ChartsXAxisSlots extends ChartsAxisSlots {}
 export interface ChartsXAxisSlotProps extends ChartsAxisSlotProps {}
 /**

package/ChartsXAxis/getVisibleLabels.d.mts

@@ -1,5 +1,5 @@
-import { type TickItem } from "../hooks/useTicks.mjs";
-import { type ChartsXAxisProps, type ComputedXAxis } from "../models/axis.mjs";
+import type { TickItem } from "../hooks/useTicks.mjs";
+import type { ChartsXAxisProps, ComputedXAxis } from "../models/axis.mjs";
 export declare function getVisibleLabels<T extends TickItem>(xTicks: T[], {
   tickLabelStyle: style,
   tickLabelInterval,

package/ChartsXAxis/getVisibleLabels.d.ts

@@ -1,5 +1,5 @@
-import { type TickItem } from "../hooks/useTicks.js";
-import { type ChartsXAxisProps, type ComputedXAxis } from "../models/axis.js";
+import type { TickItem } from "../hooks/useTicks.js";
+import type { ChartsXAxisProps, ComputedXAxis } from "../models/axis.js";
 export declare function getVisibleLabels<T extends TickItem>(xTicks: T[], {
   tickLabelStyle: style,
   tickLabelInterval,

package/ChartsXAxis/shortenLabels.d.mts

@@ -1,4 +1,4 @@
-import { type TickItem } from "../hooks/useTicks.mjs";
-import { type ChartsXAxisProps } from "../models/axis.mjs";
-import { type ChartDrawingArea } from "../hooks/useDrawingArea.mjs";
+import type { TickItem } from "../hooks/useTicks.mjs";
+import type { ChartsXAxisProps } from "../models/axis.mjs";
+import type { ChartDrawingArea } from "../hooks/useDrawingArea.mjs";
 export declare function shortenLabels(visibleLabels: Set<TickItem>, drawingArea: Pick<ChartDrawingArea, 'left' | 'width' | 'right'>, maxHeight: number, isRtl: boolean, tickLabelStyle: ChartsXAxisProps['tickLabelStyle']): Map<TickItem, string>;

package/ChartsXAxis/shortenLabels.d.ts

@@ -1,4 +1,4 @@
-import { type TickItem } from "../hooks/useTicks.js";
-import { type ChartsXAxisProps } from "../models/axis.js";
-import { type ChartDrawingArea } from "../hooks/useDrawingArea.js";
+import type { TickItem } from "../hooks/useTicks.js";
+import type { ChartsXAxisProps } from "../models/axis.js";
+import type { ChartDrawingArea } from "../hooks/useDrawingArea.js";
 export declare function shortenLabels(visibleLabels: Set<TickItem>, drawingArea: Pick<ChartDrawingArea, 'left' | 'width' | 'right'>, maxHeight: number, isRtl: boolean, tickLabelStyle: ChartsXAxisProps['tickLabelStyle']): Map<TickItem, string>;

package/ChartsXAxis/useAxisTicksProps.d.mts

@@ -1,5 +1,6 @@
-import { type ChartsXAxisProps } from "../models/axis.mjs";
-import { ChartsText, type ChartsTextProps } from "../ChartsText/index.mjs";
+import type { ChartsXAxisProps } from "../models/axis.mjs";
+import { ChartsText } from "../ChartsText/index.mjs";
+import type { ChartsTextProps } from "../ChartsText/index.mjs";
 export declare function useAxisTicksProps(inProps: ChartsXAxisProps): {
   xScale: import("@mui/x-charts-vendor/d3-scale").ScaleLinear<number, number, never> | import("@mui/x-charts-vendor/d3-scale").ScaleSymLog<number, number, never> | import("@mui/x-charts-vendor/d3-scale").ScaleLogarithmic<number, number, never> | import("@mui/x-charts-vendor/d3-scale").ScalePower<number, number, never> | import("@mui/x-charts-vendor/d3-scale").ScaleTime<number, number, never> | import("@mui/x-charts-vendor/d3-scale").ScaleBand<{
     toString(): string;

package/ChartsXAxis/useAxisTicksProps.d.ts

@@ -1,5 +1,6 @@
-import { type ChartsXAxisProps } from "../models/axis.js";
-import { ChartsText, type ChartsTextProps } from "../ChartsText/index.js";
+import type { ChartsXAxisProps } from "../models/axis.js";
+import { ChartsText } from "../ChartsText/index.js";
+import type { ChartsTextProps } from "../ChartsText/index.js";
 export declare function useAxisTicksProps(inProps: ChartsXAxisProps): {
   xScale: import("@mui/x-charts-vendor/d3-scale").ScaleLinear<number, number, never> | import("@mui/x-charts-vendor/d3-scale").ScaleSymLog<number, number, never> | import("@mui/x-charts-vendor/d3-scale").ScaleLogarithmic<number, number, never> | import("@mui/x-charts-vendor/d3-scale").ScalePower<number, number, never> | import("@mui/x-charts-vendor/d3-scale").ScaleTime<number, number, never> | import("@mui/x-charts-vendor/d3-scale").ScaleBand<{
     toString(): string;

package/ChartsXAxis/utilities.d.mts

@@ -1,4 +1,4 @@
-import { type AxisConfig, type ChartsXAxisProps } from "../models/axis.mjs";
+import type { AxisConfig, ChartsXAxisProps } from "../models/axis.mjs";
 export declare const useUtilityClasses: (ownerState: Pick<AxisConfig<any, any, ChartsXAxisProps>, "position" | "classes">) => Record<"root" | "line" | "label" | "tickContainer" | "tick" | "tickLabel", string>;
 export declare const TICK_LABEL_GAP = 3;
 export declare const AXIS_LABEL_TICK_LABEL_GAP = 4;

package/ChartsXAxis/utilities.d.ts

@@ -1,4 +1,4 @@
-import { type AxisConfig, type ChartsXAxisProps } from "../models/axis.js";
+import type { AxisConfig, ChartsXAxisProps } from "../models/axis.js";
 export declare const useUtilityClasses: (ownerState: Pick<AxisConfig<any, any, ChartsXAxisProps>, "position" | "classes">) => Record<"root" | "line" | "label" | "tickContainer" | "tick" | "tickLabel", string>;
 export declare const TICK_LABEL_GAP = 3;
 export declare const AXIS_LABEL_TICK_LABEL_GAP = 4;

package/ChartsYAxis/ChartsGroupedYAxisTicks.d.mts

@@ -1,4 +1,4 @@
-import { type ChartsYAxisProps } from "../models/axis.mjs";
+import type { ChartsYAxisProps } from "../models/axis.mjs";
 /**
  * @ignore - internal component.
  */

package/ChartsYAxis/ChartsGroupedYAxisTicks.d.ts

@@ -1,4 +1,4 @@
-import { type ChartsYAxisProps } from "../models/axis.js";
+import type { ChartsYAxisProps } from "../models/axis.js";
 /**
  * @ignore - internal component.
  */

package/ChartsYAxis/ChartsGroupedYAxisTicks.js

@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartsGroupedYAxisTicks = ChartsGroupedYAxisTicks;
-var _formatErrorMessage2 = _interopRequireDefault(require("@mui/x-internals/formatErrorMessage"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _formatErrorMessage2 = _interopRequireDefault(require("@mui/x-internals/formatErrorMessage"));
 var React = _interopRequireWildcard(require("react"));
 var _scaleGuards = require("../internals/scaleGuards");
 var _useChartsContext = require("../context/ChartsProvider/useChartsContext");
@@ -17,23 +17,11 @@ var _useTicksGrouped = require("../hooks/useTicksGrouped");
 var _useAxisTicksProps = require("./useAxisTicksProps");
 var _useStore = require("../internals/store/useStore");
 var _useChartAxisAutoSize = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useChartAxisAutoSize.selectors");
+var _getGroupingConfig = require("../internals/getGroupingConfig");
 var _jsxRuntime = require("react/jsx-runtime");
-const DEFAULT_GROUPING_CONFIG = {
-  tickSize: 6
-};
-const getGroupingConfig = (groups, groupIndex, tickSize, computedGroupTickSizes) => {
-  const config = groups[groupIndex] ?? {};
-  const defaultTickSize = tickSize ?? DEFAULT_GROUPING_CONFIG.tickSize;
-  const calculatedTickSize = defaultTickSize * groupIndex * 2 + defaultTickSize;
-  return (0, _extends2.default)({}, DEFAULT_GROUPING_CONFIG, config, {
-    tickSize: computedGroupTickSizes?.[groupIndex] ?? config.tickSize ?? calculatedTickSize
-  });
-};
-
 /**
  * @ignore - internal component.
- */
-function ChartsGroupedYAxisTicks(inProps) {
+ */function ChartsGroupedYAxisTicks(inProps) {
   const {
     yScale,
     defaultizedProps,
@@ -88,7 +76,7 @@ function ChartsGroupedYAxisTicks(inProps) {
       const tickLabel = item.formattedValue;
       const ignoreTick = item.ignoreTick ?? false;
       const groupIndex = item.groupIndex ?? 0;
-      const groupConfig = getGroupingConfig(groups, groupIndex, tickSize, computedGroupTickSizes);
+      const groupConfig = (0, _getGroupingConfig.getGroupingConfig)(groups, groupIndex, tickSize, computedGroupTickSizes);
       const tickXSize = positionSign * groupConfig.tickSize;
       const labelPositionX = positionSign * (groupConfig.tickSize + _utilities.TICK_LABEL_GAP);
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {