@mui/x-charts 8.9.0 → 8.10.0

package/{internals/components/ChartsWrapper → ChartsWrapper}/ChartsWrapper.js

@@ -1,17 +1,19 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartsWrapper = ChartsWrapper;
 var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
 var _createStyled = require("@mui/system/createStyled");
-var _useChartRootRef = require("../../../hooks/useChartRootRef");
-var _useStore = require("../../store/useStore");
-var _useSelector = require("../../store/useSelector");
-var _useChartDimensions = require("../../plugins/corePlugins/useChartDimensions");
+var _useChartRootRef = require("../hooks/useChartRootRef");
+var _useStore = require("../internals/store/useStore");
+var _useSelector = require("../internals/store/useSelector");
+var _useChartDimensions = require("../internals/plugins/corePlugins/useChartDimensions");
 var _jsxRuntime = require("react/jsx-runtime");
 const getDirection = (direction, position) => {
   if (direction === 'vertical') {
@@ -67,8 +69,6 @@ const Root = (0, _styles.styled)('div', {
 }));
 
 /**
- * @ignore - internal component.
- *
  * Wrapper for the charts components.
  * Its main purpose is to position the HTML legend in the correct place.
  */
@@ -90,4 +90,30 @@ function ChartsWrapper(props) {
     extendVertically: extendVertically ?? propsHeight === undefined,
     children: children
   });
-}
+}
+process.env.NODE_ENV !== "production" ? ChartsWrapper.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  children: _propTypes.default.node,
+  /**
+   * If `true`, the chart wrapper set `height: 100%`.
+   * @default `false` if the `height` prop is set. And `true` otherwise.
+   */
+  extendVertically: _propTypes.default.bool,
+  /**
+   * The direction of the legend.
+   * @default 'horizontal'
+   */
+  legendDirection: _propTypes.default.oneOf(['horizontal', 'vertical']),
+  /**
+   * The position of the legend.
+   * @default { horizontal: 'center', vertical: 'bottom' }
+   */
+  legendPosition: _propTypes.default.shape({
+    horizontal: _propTypes.default.oneOf(['center', 'end', 'start']),
+    vertical: _propTypes.default.oneOf(['bottom', 'middle', 'top'])
+  }),
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
+} : void 0;

package/ChartsXAxis/ChartsGroupedXAxis.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { ChartsXAxisProps } from "../models/axis.js";
+/**
+ * @ignore - internal component.
+ */
+declare function ChartsGroupedXAxis(inProps: ChartsXAxisProps): React.JSX.Element | null;
+export { ChartsGroupedXAxis };

package/ChartsXAxis/ChartsGroupedXAxis.js

@@ -0,0 +1,142 @@
+"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.ChartsGroupedXAxis = ChartsGroupedXAxis;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _useDrawingArea = require("../hooks/useDrawingArea");
+var _isBandScale = require("../internals/isBandScale");
+var _useChartContext = require("../context/ChartProvider/useChartContext");
+var _utilities = require("./utilities");
+var _useTicksGrouped = require("../hooks/useTicksGrouped");
+var _useAxisProps = require("./useAxisProps");
+var _jsxRuntime = require("react/jsx-runtime");
+const DEFAULT_GROUPING_CONFIG = {
+  tickSize: 6
+};
+const getGroupingConfig = (groups, groupIndex, tickSize) => {
+  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: config.tickSize ?? calculatedTickSize
+  });
+};
+
+/**
+ * @ignore - internal component.
+ */
+function ChartsGroupedXAxis(inProps) {
+  const {
+    xScale,
+    defaultizedProps,
+    tickNumber,
+    positionSign,
+    skipAxisRendering,
+    classes,
+    Line,
+    Tick,
+    TickLabel,
+    Label,
+    axisTickLabelProps,
+    axisLabelProps
+  } = (0, _useAxisProps.useAxisProps)(inProps);
+  if (!(0, _isBandScale.isBandScale)(xScale)) {
+    throw new Error('MUI X Charts: ChartsGroupedXAxis only supports the `band` and `point` scale types.');
+  }
+  const {
+    position,
+    disableLine,
+    disableTicks,
+    label,
+    tickSize,
+    valueFormatter,
+    slotProps,
+    tickInterval,
+    tickPlacement,
+    tickLabelPlacement,
+    sx,
+    offset,
+    height: axisHeight
+  } = defaultizedProps;
+  const groups = defaultizedProps.groups;
+  const drawingArea = (0, _useDrawingArea.useDrawingArea)();
+  const {
+    left,
+    top,
+    width,
+    height
+  } = drawingArea;
+  const {
+    instance
+  } = (0, _useChartContext.useChartContext)();
+  const labelRefPoint = {
+    x: left + width / 2,
+    y: positionSign * axisHeight
+  };
+  const xTicks = (0, _useTicksGrouped.useTicksGrouped)({
+    scale: xScale,
+    tickNumber,
+    valueFormatter,
+    tickInterval,
+    tickPlacement,
+    tickLabelPlacement,
+    direction: 'x',
+    groups
+  });
+
+  // Skip axis rendering if no data is available
+  // - The domain is an empty array for band/point scales.
+  // - The domains contains Infinity for continuous scales.
+  // - The position is set to 'none'.
+  if (skipAxisRendering) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_utilities.XAxisRoot, {
+    transform: `translate(0, ${position === 'bottom' ? top + height + offset : top - offset})`,
+    className: classes.root,
+    sx: sx,
+    children: [!disableLine && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _extends2.default)({
+      x1: left,
+      x2: left + width,
+      className: classes.line
+    }, slotProps?.axisLine)), xTicks.map((item, index) => {
+      const {
+        offset: tickOffset,
+        labelOffset
+      } = item;
+      const xTickLabel = labelOffset ?? 0;
+      const showTick = instance.isXInside(tickOffset);
+      const tickLabel = item.formattedValue;
+      const ignoreTick = item.ignoreTick ?? false;
+      const groupIndex = item.groupIndex ?? 0;
+      const groupConfig = getGroupingConfig(groups, groupIndex, tickSize);
+      const tickYSize = positionSign * groupConfig.tickSize;
+      const labelPositionY = positionSign * (groupConfig.tickSize + _utilities.TICK_LABEL_GAP);
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+        transform: `translate(${tickOffset}, 0)`,
+        className: classes.tickContainer,
+        "data-group-index": groupIndex,
+        children: [!disableTicks && !ignoreTick && showTick && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tick, (0, _extends2.default)({
+          y2: tickYSize,
+          className: classes.tick
+        }, slotProps?.axisTick)), tickLabel !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(TickLabel, (0, _extends2.default)({
+          x: xTickLabel,
+          y: labelPositionY
+        }, axisTickLabelProps, {
+          text: tickLabel
+        }))]
+      }, index);
+    }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+      className: classes.label,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, (0, _extends2.default)({}, labelRefPoint, axisLabelProps, {
+        text: label
+      }))
+    })]
+  });
+}

package/ChartsXAxis/ChartsSingleXAxis.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { ChartsXAxisProps } from "../models/axis.js";
+/**
+ * @ignore - internal component.
+ */
+declare function ChartsSingleXAxis(inProps: ChartsXAxisProps): React.JSX.Element | null;
+export { ChartsSingleXAxis };

package/ChartsXAxis/ChartsSingleXAxis.js

@@ -0,0 +1,144 @@
+"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.ChartsSingleXAxis = ChartsSingleXAxis;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _useIsHydrated = require("../hooks/useIsHydrated");
+var _domUtils = require("../internals/domUtils");
+var _useTicks = require("../hooks/useTicks");
+var _useMounted = require("../hooks/useMounted");
+var _useDrawingArea = require("../hooks/useDrawingArea");
+var _useChartContext = require("../context/ChartProvider/useChartContext");
+var _shortenLabels = require("./shortenLabels");
+var _getVisibleLabels = require("./getVisibleLabels");
+var _utilities = require("./utilities");
+var _useAxisProps = require("./useAxisProps");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * @ignore - internal component.
+ */function ChartsSingleXAxis(inProps) {
+  const {
+    xScale,
+    defaultizedProps,
+    tickNumber,
+    positionSign,
+    skipAxisRendering,
+    classes,
+    Line,
+    Tick,
+    TickLabel,
+    Label,
+    axisTickLabelProps,
+    axisLabelProps,
+    reverse,
+    isRtl
+  } = (0, _useAxisProps.useAxisProps)(inProps);
+  const isMounted = (0, _useMounted.useMounted)();
+  const {
+    position,
+    disableLine,
+    disableTicks,
+    label,
+    tickSize: tickSizeProp,
+    valueFormatter,
+    slotProps,
+    tickInterval,
+    tickLabelInterval,
+    tickPlacement,
+    tickLabelPlacement,
+    tickLabelMinGap,
+    sx,
+    offset,
+    height: axisHeight
+  } = defaultizedProps;
+  const drawingArea = (0, _useDrawingArea.useDrawingArea)();
+  const {
+    left,
+    top,
+    width,
+    height
+  } = drawingArea;
+  const {
+    instance
+  } = (0, _useChartContext.useChartContext)();
+  const isHydrated = (0, _useIsHydrated.useIsHydrated)();
+  const tickSize = disableTicks ? 4 : tickSizeProp;
+  const xTicks = (0, _useTicks.useTicks)({
+    scale: xScale,
+    tickNumber,
+    valueFormatter,
+    tickInterval,
+    tickPlacement,
+    tickLabelPlacement,
+    direction: 'x'
+  });
+  const visibleLabels = (0, _getVisibleLabels.getVisibleLabels)(xTicks, {
+    tickLabelStyle: axisTickLabelProps.style,
+    tickLabelInterval,
+    tickLabelMinGap,
+    reverse,
+    isMounted,
+    isXInside: instance.isXInside
+  });
+
+  // Skip axis rendering if no data is available
+  // - The domain is an empty array for band/point scales.
+  // - The domains contains Infinity for continuous scales.
+  // - The position is set to 'none'.
+  if (skipAxisRendering) {
+    return null;
+  }
+  const labelHeight = label ? (0, _domUtils.getStringSize)(label, axisLabelProps.style).height : 0;
+  const labelRefPoint = {
+    x: left + width / 2,
+    y: positionSign * axisHeight
+  };
+
+  /* If there's an axis title, the tick labels have less space to render  */
+  const tickLabelsMaxHeight = Math.max(0, axisHeight - (label ? labelHeight + _utilities.AXIS_LABEL_TICK_LABEL_GAP : 0) - tickSize - _utilities.TICK_LABEL_GAP);
+  const tickLabels = isHydrated ? (0, _shortenLabels.shortenLabels)(visibleLabels, drawingArea, tickLabelsMaxHeight, isRtl, axisTickLabelProps.style) : new Map(Array.from(visibleLabels).map(item => [item, item.formattedValue]));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_utilities.XAxisRoot, {
+    transform: `translate(0, ${position === 'bottom' ? top + height + offset : top - offset})`,
+    className: classes.root,
+    sx: sx,
+    children: [!disableLine && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _extends2.default)({
+      x1: left,
+      x2: left + width,
+      className: classes.line
+    }, slotProps?.axisLine)), xTicks.map((item, index) => {
+      const {
+        offset: tickOffset,
+        labelOffset
+      } = item;
+      const xTickLabel = labelOffset ?? 0;
+      const yTickLabel = positionSign * (tickSize + _utilities.TICK_LABEL_GAP);
+      const showTick = instance.isXInside(tickOffset);
+      const tickLabel = tickLabels.get(item);
+      const showTickLabel = visibleLabels.has(item);
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+        transform: `translate(${tickOffset}, 0)`,
+        className: classes.tickContainer,
+        children: [!disableTicks && showTick && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tick, (0, _extends2.default)({
+          y2: positionSign * tickSize,
+          className: classes.tick
+        }, slotProps?.axisTick)), tickLabel !== undefined && showTickLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(TickLabel, (0, _extends2.default)({
+          x: xTickLabel,
+          y: yTickLabel
+        }, axisTickLabelProps, {
+          text: tickLabel
+        }))]
+      }, index);
+    }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+      className: classes.label,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, (0, _extends2.default)({}, labelRefPoint, axisLabelProps, {
+        text: label
+      }))
+    })]
+  });
+}

package/ChartsXAxis/ChartsXAxis.d.ts

@@ -9,7 +9,7 @@ import { ChartsXAxisProps } from "../models/axis.js";
  *
  * - [ChartsXAxis API](https://mui.com/x/api/charts/charts-x-axis/)
  */
-declare function ChartsXAxis(inProps: ChartsXAxisProps): React.JSX.Element | null;
+declare function ChartsXAxis(inProps: ChartsXAxisProps): React.JSX.Element;
 declare namespace ChartsXAxis {
   var propTypes: any;
 }

package/ChartsXAxis/ChartsXAxis.js

@@ -1,70 +1,19 @@
 "use strict";
 'use client';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartsXAxis = ChartsXAxis;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
-var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _styles = require("@mui/material/styles");
-var _RtlProvider = require("@mui/system/RtlProvider");
-var _useIsHydrated = require("../hooks/useIsHydrated");
-var _domUtils = require("../internals/domUtils");
-var _useTicks = require("../hooks/useTicks");
-var _axisClasses = require("../ChartsAxis/axisClasses");
-var _AxisSharedComponents = require("../internals/components/AxisSharedComponents");
-var _ChartsText = require("../ChartsText");
-var _useMounted = require("../hooks/useMounted");
-var _useDrawingArea = require("../hooks/useDrawingArea");
-var _isInfinity = require("../internals/isInfinity");
-var _isBandScale = require("../internals/isBandScale");
-var _useChartContext = require("../context/ChartProvider/useChartContext");
 var _useAxis = require("../hooks/useAxis");
-var _defaultTextPlacement = require("../ChartsText/defaultTextPlacement");
-var _invertTextAnchor = require("../internals/invertTextAnchor");
-var _shortenLabels = require("./shortenLabels");
-var _getVisibleLabels = require("./getVisibleLabels");
+var _ChartsSingleXAxis = require("./ChartsSingleXAxis");
+var _ChartsGroupedXAxis = require("./ChartsGroupedXAxis");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["scale", "tickNumber", "reverse"];
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    position,
-    id
-  } = ownerState;
-  const slots = {
-    root: ['root', 'directionX', position, `id-${id}`],
-    line: ['line'],
-    tickContainer: ['tickContainer'],
-    tick: ['tick'],
-    tickLabel: ['tickLabel'],
-    label: ['label']
-  };
-  return (0, _composeClasses.default)(slots, _axisClasses.getAxisUtilityClass, classes);
-};
-
-/* Gap between a tick and its label. */
-const TICK_LABEL_GAP = 3;
-/* Gap between the axis label and tick labels. */
-const AXIS_LABEL_TICK_LABEL_GAP = 4;
-const XAxisRoot = (0, _styles.styled)(_AxisSharedComponents.AxisRoot, {
-  name: 'MuiChartsXAxis',
-  slot: 'Root'
-})({});
-const defaultProps = {
-  disableLine: false,
-  disableTicks: false,
-  tickSize: 6,
-  tickLabelMinGap: 4
-};
-
 /**
  * Demos:
  *
@@ -73,167 +22,16 @@ const defaultProps = {
  * API:
  *
  * - [ChartsXAxis API](https://mui.com/x/api/charts/charts-x-axis/)
- */
-function ChartsXAxis(inProps) {
+ */function ChartsXAxis(inProps) {
   const {
     xAxis,
     xAxisIds
   } = (0, _useAxis.useXAxes)();
-  const _xAxis = xAxis[inProps.axisId ?? xAxisIds[0]],
-    {
-      scale: xScale,
-      tickNumber,
-      reverse
-    } = _xAxis,
-    settings = (0, _objectWithoutPropertiesLoose2.default)(_xAxis, _excluded);
-  const isMounted = (0, _useMounted.useMounted)();
-  const themedProps = (0, _styles.useThemeProps)({
-    props: (0, _extends2.default)({}, settings, inProps),
-    name: 'MuiChartsXAxis'
-  });
-  const defaultizedProps = (0, _extends2.default)({}, defaultProps, themedProps);
-  const {
-    position,
-    disableLine,
-    disableTicks,
-    tickLabelStyle,
-    label,
-    labelStyle,
-    tickSize: tickSizeProp,
-    valueFormatter,
-    slots,
-    slotProps,
-    tickInterval,
-    tickLabelInterval,
-    tickPlacement,
-    tickLabelPlacement,
-    tickLabelMinGap,
-    sx,
-    offset,
-    height: axisHeight
-  } = defaultizedProps;
-  const theme = (0, _styles.useTheme)();
-  const isRtl = (0, _RtlProvider.useRtl)();
-  const classes = useUtilityClasses(defaultizedProps);
-  const drawingArea = (0, _useDrawingArea.useDrawingArea)();
-  const {
-    left,
-    top,
-    width,
-    height
-  } = drawingArea;
-  const {
-    instance
-  } = (0, _useChartContext.useChartContext)();
-  const isHydrated = (0, _useIsHydrated.useIsHydrated)();
-  const tickSize = disableTicks ? 4 : tickSizeProp;
-  const positionSign = position === 'bottom' ? 1 : -1;
-  const Line = slots?.axisLine ?? 'line';
-  const Tick = slots?.axisTick ?? 'line';
-  const TickLabel = slots?.axisTickLabel ?? _ChartsText.ChartsText;
-  const Label = slots?.axisLabel ?? _ChartsText.ChartsText;
-  const defaultTextAnchor = (0, _defaultTextPlacement.getDefaultTextAnchor)((position === 'bottom' ? 0 : 180) - (tickLabelStyle?.angle ?? 0));
-  const defaultDominantBaseline = (0, _defaultTextPlacement.getDefaultBaseline)((position === 'bottom' ? 0 : 180) - (tickLabelStyle?.angle ?? 0));
-  const axisTickLabelProps = (0, _useSlotProps.default)({
-    elementType: TickLabel,
-    externalSlotProps: slotProps?.axisTickLabel,
-    additionalProps: {
-      style: (0, _extends2.default)({}, theme.typography.caption, {
-        fontSize: 12,
-        lineHeight: 1.25,
-        textAnchor: isRtl ? (0, _invertTextAnchor.invertTextAnchor)(defaultTextAnchor) : defaultTextAnchor,
-        dominantBaseline: defaultDominantBaseline
-      }, tickLabelStyle)
-    },
-    className: classes.tickLabel,
-    ownerState: {}
-  });
-  const xTicks = (0, _useTicks.useTicks)({
-    scale: xScale,
-    tickNumber,
-    valueFormatter,
-    tickInterval,
-    tickPlacement,
-    tickLabelPlacement,
-    direction: 'x'
-  });
-  const visibleLabels = (0, _getVisibleLabels.getVisibleLabels)(xTicks, {
-    tickLabelStyle: axisTickLabelProps.style,
-    tickLabelInterval,
-    tickLabelMinGap,
-    reverse,
-    isMounted,
-    isXInside: instance.isXInside
-  });
-  const axisLabelProps = (0, _useSlotProps.default)({
-    elementType: Label,
-    externalSlotProps: slotProps?.axisLabel,
-    additionalProps: {
-      style: (0, _extends2.default)({}, theme.typography.body1, {
-        lineHeight: 1,
-        fontSize: 14,
-        textAnchor: 'middle',
-        dominantBaseline: position === 'bottom' ? 'text-after-edge' : 'text-before-edge'
-      }, labelStyle)
-    },
-    ownerState: {}
-  });
-  const domain = xScale.domain();
-  const ordinalAxis = (0, _isBandScale.isBandScale)(xScale);
-  // Skip axis rendering if no data is available
-  // - The domain is an empty array for band/point scales.
-  // - The domains contains Infinity for continuous scales.
-  // - The position is set to 'none'.
-  if (ordinalAxis && domain.length === 0 || !ordinalAxis && domain.some(_isInfinity.isInfinity) || position === 'none') {
-    return null;
+  const axis = xAxis[inProps.axisId ?? xAxisIds[0]];
+  if ('groups' in axis && Array.isArray(axis.groups)) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGroupedXAxis.ChartsGroupedXAxis, (0, _extends2.default)({}, inProps));
   }
-  const labelHeight = label ? (0, _domUtils.getStringSize)(label, axisLabelProps.style).height : 0;
-  const labelRefPoint = {
-    x: left + width / 2,
-    y: positionSign * axisHeight
-  };
-
-  /* If there's an axis title, the tick labels have less space to render  */
-  const tickLabelsMaxHeight = Math.max(0, axisHeight - (label ? labelHeight + AXIS_LABEL_TICK_LABEL_GAP : 0) - tickSize - TICK_LABEL_GAP);
-  const tickLabels = isHydrated ? (0, _shortenLabels.shortenLabels)(visibleLabels, drawingArea, tickLabelsMaxHeight, isRtl, axisTickLabelProps.style) : new Map(Array.from(visibleLabels).map(item => [item, item.formattedValue]));
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(XAxisRoot, {
-    transform: `translate(0, ${position === 'bottom' ? top + height + offset : top - offset})`,
-    className: classes.root,
-    sx: sx,
-    children: [!disableLine && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _extends2.default)({
-      x1: left,
-      x2: left + width,
-      className: classes.line
-    }, slotProps?.axisLine)), xTicks.map((item, index) => {
-      const {
-        offset: tickOffset,
-        labelOffset
-      } = item;
-      const xTickLabel = labelOffset ?? 0;
-      const yTickLabel = positionSign * (tickSize + TICK_LABEL_GAP);
-      const showTick = instance.isXInside(tickOffset);
-      const tickLabel = tickLabels.get(item);
-      const showTickLabel = visibleLabels.has(item);
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
-        transform: `translate(${tickOffset}, 0)`,
-        className: classes.tickContainer,
-        children: [!disableTicks && showTick && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tick, (0, _extends2.default)({
-          y2: positionSign * tickSize,
-          className: classes.tick
-        }, slotProps?.axisTick)), tickLabel !== undefined && showTickLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(TickLabel, (0, _extends2.default)({
-          x: xTickLabel,
-          y: yTickLabel
-        }, axisTickLabelProps, {
-          text: tickLabel
-        }))]
-      }, index);
-    }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
-      className: classes.label,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, (0, _extends2.default)({}, labelRefPoint, axisLabelProps, {
-        text: label
-      }))
-    })]
-  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsSingleXAxis.ChartsSingleXAxis, (0, _extends2.default)({}, inProps));
 }
 process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
   // ----------------------------- Warning --------------------------------

package/ChartsXAxis/getVisibleLabels.d.ts

@@ -1,6 +1,6 @@
 import { TickItemType } from "../hooks/useTicks.js";
 import { ChartsXAxisProps, ComputedXAxis } from "../models/axis.js";
-export declare function getVisibleLabels(xTicks: TickItemType[], {
+export declare function getVisibleLabels<T extends TickItemType>(xTicks: T[], {
   tickLabelStyle: style,
   tickLabelInterval,
   tickLabelMinGap,
@@ -11,4 +11,4 @@ export declare function getVisibleLabels(xTicks: TickItemType[], {
   isMounted: boolean;
   tickLabelMinGap: NonNullable<ChartsXAxisProps['tickLabelMinGap']>;
   isXInside: (x: number) => boolean;
-}): Set<TickItemType>;
+}): Set<T>;