@mui/x-charts 8.27.0 → 9.0.0-alpha.1

package/ChartsTooltip/ChartsTooltip.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ChartsTooltip = ChartsTooltip;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _HTMLElementType = _interopRequireDefault(require("@mui/utils/HTMLElementType"));
 var _ChartsItemTooltipContent = require("./ChartsItemTooltipContent");
@@ -14,6 +15,7 @@ var _ChartsAxisTooltipContent = require("./ChartsAxisTooltipContent");
 var _ChartsTooltipContainer = require("./ChartsTooltipContainer");
 var _chartsTooltipClasses = require("./chartsTooltipClasses");
 var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["classes", "trigger", "sort"];
 /**
  * Demos:
  *
@@ -25,14 +27,18 @@ var _jsxRuntime = require("react/jsx-runtime");
  */
 function ChartsTooltip(props) {
   const {
-    classes: propClasses,
-    trigger = 'axis'
-  } = props;
+      classes: propClasses,
+      trigger = 'axis',
+      sort
+    } = props,
+    containerProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const classes = (0, _chartsTooltipClasses.useUtilityClasses)(propClasses);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipContainer.ChartsTooltipContainer, (0, _extends2.default)({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipContainer.ChartsTooltipContainer, (0, _extends2.default)({}, containerProps, {
+    trigger: trigger,
     classes: propClasses,
     children: trigger === 'axis' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisTooltipContent.ChartsAxisTooltipContent, {
-      classes: classes
+      classes: classes,
+      sort: sort
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsItemTooltipContent.ChartsItemTooltipContent, {
       classes: classes
     })
@@ -138,6 +144,13 @@ process.env.NODE_ENV !== "production" ? ChartsTooltip.propTypes = {
    * If `true`, the component is shown.
    */
   open: _propTypes.default.bool,
+  /**
+   * The sort in which series items are displayed in the axis tooltip.
+   * When set to `none`, series are sorted as they are provided in the series property. Otherwise they are sorted by their value.
+   * Only applies when `trigger='axis'`.
+   * @default 'none'
+   */
+  sort: _propTypes.default.oneOf(['none', 'asc', 'desc']),
   /**
    * Popper placement.
    * @default 'bottom'

package/ChartsTooltip/ChartsTooltipContainer.d.ts

@@ -2,6 +2,11 @@ import * as React from 'react';
 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 {}
+export interface ChartsTooltipContainerSlotProps extends PopperSlotProps {}
+export interface ChartsTooltipContainerClasses extends ChartsTooltipClasses {}
 export interface ChartsTooltipContainerProps<T extends TriggerOptions = TriggerOptions> extends Partial<PopperProps> {
   /**
    * Select the kind of tooltip to display
@@ -14,12 +19,22 @@ export interface ChartsTooltipContainerProps<T extends TriggerOptions = TriggerO
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<ChartsTooltipClasses>;
+  classes?: Partial<ChartsTooltipContainerClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ChartsTooltipContainerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ChartsTooltipContainerSlotProps;
   /**
    * Determine if the tooltip should be placed on the pointer location or on the node.
    * @default 'pointer'
    */
-  anchor?: 'pointer' | 'node';
+  anchor?: T extends 'item' ? 'pointer' | 'node' : T extends 'axis' ? 'pointer' | 'chart' : 'pointer';
   /**
    * Determines the tooltip position relatively to the anchor.
    */

package/ChartsTooltip/ChartsTooltipContainer.js

@@ -23,7 +23,7 @@ var _chartsTooltipClasses = require("./chartsTooltipClasses");
 var _useStore = require("../internals/store/useStore");
 var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
 var _useChartTooltip = require("../internals/plugins/featurePlugins/useChartTooltip");
-var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
+var _useChartCartesianTooltip = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianTooltip.selectors");
 var _useChartPolarInteraction = require("../internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors");
 var _useAxisSystem = require("../hooks/useAxisSystem");
 var _hooks = require("../hooks");
@@ -43,10 +43,25 @@ function getIsOpenSelector(trigger, axisSystem, shouldPreventBecauseOfBrush) {
     return _useChartPolarInteraction.selectorChartsInteractionPolarAxisTooltip;
   }
   if (axisSystem === 'cartesian') {
-    return _useChartCartesianAxis.selectorChartsInteractionAxisTooltip;
+    return _useChartCartesianTooltip.selectorChartsInteractionAxisTooltip;
   }
   return selectorReturnFalse;
 }
+const defaultAnchorByTrigger = {
+  item: 'node',
+  axis: 'chart',
+  none: 'pointer'
+};
+const getPositionSelectorByAnchor = anchor => {
+  switch (anchor) {
+    case 'node':
+      return _useChartTooltip.selectorChartsTooltipItemPosition;
+    case 'chart':
+      return _useChartCartesianTooltip.selectorChartsTooltipAxisPosition;
+    default:
+      return selectorReturnNull;
+  }
+};
 const ChartsTooltipRoot = (0, _styles.styled)(_Popper.default, {
   name: 'MuiChartsTooltip',
   slot: 'Root'
@@ -94,8 +109,9 @@ function ChartsTooltipContainer(inProps) {
   const shouldPreventBecauseOfBrush = store.use(_useChartBrush.selectorBrushShouldPreventTooltip);
   const isOpen = store.use(getIsOpenSelector(trigger, axisSystem, shouldPreventBecauseOfBrush));
   const lastInteraction = store.use(_useChartInteraction.selectorChartsLastInteraction);
-  const computedAnchor = lastInteraction === 'keyboard' || pointerType === null ? 'node' : anchor;
-  const itemPosition = store.use(trigger === 'item' && computedAnchor === 'node' ? _useChartTooltip.selectorChartsTooltipItemPosition : selectorReturnNull, position);
+  const pointerAnchorUnavailable = lastInteraction === 'keyboard' || pointerType === null;
+  const computedAnchor = pointerAnchorUnavailable ? defaultAnchorByTrigger[trigger] : anchor;
+  const itemPosition = store.use(getPositionSelectorByAnchor(computedAnchor), props.position);
   const isTooltipNodeAnchored = itemPosition !== null;
   React.useEffect(() => {
     const svgElement = svgRef.current;

package/ChartsTooltip/index.d.ts

@@ -5,10 +5,9 @@ export { getChartsTooltipUtilityClass, chartsTooltipClasses } from "./chartsTool
 export * from "./ChartsAxisTooltipContent.js";
 export * from "./ChartsItemTooltipContent.js";
 export * from "./ChartsTooltipTable.js";
-export type { ItemTooltip } from "../internals/plugins/models/seriesConfig/tooltipGetter.types.js";
+export type { ItemTooltip } from "../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 export type { UseItemTooltipReturnValue, UseRadarItemTooltipReturnValue } from "./useItemTooltip.js";
 export { useItemTooltip, useRadarItemTooltip } from "./useItemTooltip.js";
-export * from "./useAxisTooltip.js";
 export * from "./useAxesTooltip.js";
 export { useMouseTracker } from "./utils.js";
 export * from "./ChartTooltip.types.js";

package/ChartsTooltip/index.js

@@ -102,18 +102,6 @@ Object.keys(_ChartsTooltipTable).forEach(function (key) {
   });
 });
 var _useItemTooltip = require("./useItemTooltip");
-var _useAxisTooltip = require("./useAxisTooltip");
-Object.keys(_useAxisTooltip).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _useAxisTooltip[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _useAxisTooltip[key];
-    }
-  });
-});
 var _useAxesTooltip = require("./useAxesTooltip");
 Object.keys(_useAxesTooltip).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/ChartsTooltip/useAxesTooltip.d.ts

@@ -1,7 +1,33 @@
-import { type UseAxisTooltipParams, type UseAxisTooltipReturnValue } from "./useAxisTooltip.js";
-type UseAxesTooltipParams = Omit<UseAxisTooltipParams, 'multipleAxes'>;
+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";
+export interface UseAxesTooltipReturnValue<SeriesT extends CartesianChartSeriesType | PolarChartSeriesType = CartesianChartSeriesType | PolarChartSeriesType, AxisValueT extends string | number | Date = string | number | Date> {
+  axisDirection: SeriesT extends CartesianChartSeriesType ? 'x' | 'y' : 'rotation' | 'radius';
+  mainAxis: SeriesT extends CartesianChartSeriesType ? ComputedAxis : PolarAxisDefaultized;
+  axisId: AxisId;
+  axisValue: AxisValueT;
+  axisFormattedValue: string;
+  dataIndex: number;
+  seriesItems: SeriesItem<SeriesT>[];
+}
+export interface UseAxesTooltipParams {
+  /**
+   * The axis directions to consider.
+   * If not defined, all directions are considered
+   */
+  directions?: ('x' | 'y' | 'rotation')[];
+}
+interface SeriesItem<T extends CartesianChartSeriesType | PolarChartSeriesType> {
+  seriesId: SeriesId;
+  color: string;
+  value: ChartsSeriesConfig[T]['valueType'];
+  formattedValue: string;
+  formattedLabel: string | null;
+  markType: ChartsLabelMarkProps['type'];
+}
 /**
  * Returns the axes to display in the tooltip and the series item related to them.
  */
-export declare function useAxesTooltip(params?: UseAxesTooltipParams): UseAxisTooltipReturnValue[] | null;
+export declare function useAxesTooltip(params?: UseAxesTooltipParams): UseAxesTooltipReturnValue[] | null;
 export {};

package/ChartsTooltip/useAxesTooltip.js

@@ -1,18 +1,185 @@
 "use strict";
 'use client';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useAxesTooltip = useAxesTooltip;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _useAxisTooltip = require("./useAxisTooltip");
+var _useSeries = require("../hooks/useSeries");
+var _useColorProcessor = require("../internals/plugins/corePlugins/useChartSeries/useColorProcessor");
+var _useStore = require("../internals/store/useStore");
+var _getLabel = require("../internals/getLabel");
+var _isCartesian = require("../internals/isCartesian");
+var _utils = require("./utils");
+var _useAxis = require("../hooks/useAxis");
+var _useZAxis = require("../hooks/useZAxis");
+var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
+var _useChartPolarInteraction = require("../internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors");
+var _isPolar = require("../internals/isPolar");
+var _useChartVisibilityManager = require("../internals/plugins/featurePlugins/useChartVisibilityManager/useChartVisibilityManager.selectors");
+function defaultAxisTooltipConfig(axis, dataIndex, axisDirection) {
+  const axisValue = axis.data?.[dataIndex] ?? null;
+  const axisFormatter = axis.valueFormatter ?? (v => axis.scaleType === 'utc' ? (0, _utils.utcFormatter)(v) : v.toLocaleString());
+  const axisFormattedValue = axisFormatter(axisValue, {
+    location: 'tooltip',
+    scale: axis.scale
+  });
+  return {
+    axisDirection,
+    axisId: axis.id,
+    mainAxis: axis,
+    dataIndex,
+    axisValue,
+    axisFormattedValue,
+    seriesItems: []
+  };
+}
+
 /**
  * Returns the axes to display in the tooltip and the series item related to them.
  */
 function useAxesTooltip(params) {
-  return (0, _useAxisTooltip.useAxisTooltip)((0, _extends2.default)({}, params, {
-    multipleAxes: true
-  }));
+  const {
+    directions
+  } = params ?? {};
+  const defaultXAxis = (0, _useAxis.useXAxis)();
+  const defaultYAxis = (0, _useAxis.useYAxis)();
+  const defaultRotationAxis = (0, _useAxis.useRotationAxis)();
+  const store = (0, _useStore.useStore)();
+  const tooltipXAxes = store.use(_useChartCartesianAxis.selectorChartsInteractionTooltipXAxes);
+  const tooltipYAxes = store.use(_useChartCartesianAxis.selectorChartsInteractionTooltipYAxes);
+  const tooltipRotationAxes = store.use(_useChartPolarInteraction.selectorChartsInteractionTooltipRotationAxes);
+  const series = (0, _useSeries.useSeries)();
+  const {
+    xAxis
+  } = (0, _useAxis.useXAxes)();
+  const {
+    yAxis
+  } = (0, _useAxis.useYAxes)();
+  const {
+    zAxis,
+    zAxisIds
+  } = (0, _useZAxis.useZAxes)();
+  const {
+    rotationAxis
+  } = (0, _useAxis.useRotationAxes)();
+  const colorProcessors = (0, _useColorProcessor.useColorProcessor)();
+  const isItemVisible = store.use(_useChartVisibilityManager.selectorIsItemVisibleGetter);
+  if (tooltipXAxes.length === 0 && tooltipYAxes.length === 0 && tooltipRotationAxes.length === 0) {
+    return null;
+  }
+  const tooltipAxes = [];
+  if (directions === undefined || directions.includes('x')) {
+    tooltipXAxes.forEach(({
+      axisId,
+      dataIndex
+    }) => {
+      tooltipAxes.push(defaultAxisTooltipConfig(xAxis[axisId], dataIndex, 'x'));
+    });
+  }
+  if (directions === undefined || directions.includes('y')) {
+    tooltipYAxes.forEach(({
+      axisId,
+      dataIndex
+    }) => {
+      tooltipAxes.push(defaultAxisTooltipConfig(yAxis[axisId], dataIndex, 'y'));
+    });
+  }
+  if (directions === undefined || directions.includes('rotation')) {
+    tooltipRotationAxes.forEach(({
+      axisId,
+      dataIndex
+    }) => {
+      tooltipAxes.push(defaultAxisTooltipConfig(rotationAxis[axisId], dataIndex, 'rotation'));
+    });
+  }
+  Object.keys(series).filter(_isCartesian.isCartesianSeriesType).forEach(seriesType => {
+    const seriesOfType = series[seriesType];
+    if (!seriesOfType) {
+      return [];
+    }
+    return seriesOfType.seriesOrder.forEach(seriesId => {
+      const seriesToAdd = seriesOfType.series[seriesId];
+
+      // Skip hidden series (only if visibility manager is available)
+      if (isItemVisible && !isItemVisible({
+        type: seriesType,
+        seriesId
+      })) {
+        return;
+      }
+      const providedXAxisId = seriesToAdd.xAxisId ?? defaultXAxis.id;
+      const providedYAxisId = seriesToAdd.yAxisId ?? defaultYAxis.id;
+      const tooltipItemIndex = tooltipAxes.findIndex(({
+        axisDirection,
+        axisId
+      }) => axisDirection === 'x' && axisId === providedXAxisId || axisDirection === 'y' && axisId === providedYAxisId);
+      // Test if the series uses the default axis
+      if (tooltipItemIndex >= 0) {
+        const zAxisId = 'zAxisId' in seriesToAdd ? seriesToAdd.zAxisId : zAxisIds[0];
+        const {
+          dataIndex
+        } = tooltipAxes[tooltipItemIndex];
+        const color = colorProcessors[seriesType]?.(seriesToAdd, xAxis[providedXAxisId], yAxis[providedYAxisId], zAxisId ? zAxis[zAxisId] : undefined)(dataIndex) ?? '';
+        const value = seriesToAdd.data[dataIndex] ?? null;
+        const formattedValue = seriesToAdd.valueFormatter(value, {
+          dataIndex
+        });
+        const formattedLabel = (0, _getLabel.getLabel)(seriesToAdd.label, 'tooltip') ?? null;
+        tooltipAxes[tooltipItemIndex].seriesItems.push({
+          seriesId,
+          color,
+          value,
+          formattedValue,
+          formattedLabel,
+          markType: seriesToAdd.labelMarkType
+        });
+      }
+    });
+  });
+  Object.keys(series).filter(_isPolar.isPolarSeriesType).forEach(seriesType => {
+    const seriesOfType = series[seriesType];
+    if (!seriesOfType) {
+      return [];
+    }
+    return seriesOfType.seriesOrder.forEach(seriesId => {
+      const seriesToAdd = seriesOfType.series[seriesId];
+
+      // Skip hidden series (only if visibility manager is available)
+      if (isItemVisible && !isItemVisible({
+        type: seriesType,
+        seriesId
+      })) {
+        return;
+      }
+      const providedRotationAxisId =
+      // @ts-expect-error Should be fixed when we introduce a polar series with a rotationAxisId
+      seriesToAdd.rotationAxisId ?? defaultRotationAxis?.id;
+      const tooltipItemIndex = tooltipAxes.findIndex(({
+        axisDirection,
+        axisId
+      }) => axisDirection === 'rotation' && axisId === providedRotationAxisId);
+      // Test if the series uses the default axis
+      if (tooltipItemIndex >= 0) {
+        const {
+          dataIndex
+        } = tooltipAxes[tooltipItemIndex];
+        const color = colorProcessors[seriesType]?.(seriesToAdd)(dataIndex) ?? '';
+        const value = seriesToAdd.data[dataIndex] ?? null;
+        const formattedValue = seriesToAdd.valueFormatter(value, {
+          dataIndex
+        });
+        const formattedLabel = (0, _getLabel.getLabel)(seriesToAdd.label, 'tooltip') ?? null;
+        tooltipAxes[tooltipItemIndex].seriesItems.push({
+          seriesId,
+          color,
+          value,
+          formattedValue,
+          formattedLabel,
+          markType: seriesToAdd.labelMarkType
+        });
+      }
+    });
+  });
+  return tooltipAxes;
 }

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/models/seriesConfig/tooltipGetter.types.js";
+import { type ItemTooltip, type ItemTooltipWithMultipleValues } from "../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 export type UseItemTooltipReturnValue<T extends ChartSeriesType> = ItemTooltip<T>;
 export type UseRadarItemTooltipReturnValue = ItemTooltipWithMultipleValues<'radar'>;
 export declare function useInternalItemTooltip<T extends ChartSeriesType>(): (T extends 'radar' ? ItemTooltipWithMultipleValues<T> : ItemTooltip<T>) | null;

package/ChartsTooltip/useItemTooltip.js

@@ -11,12 +11,12 @@ var _useChartTooltip = require("../internals/plugins/featurePlugins/useChartTool
 var _useStore = require("../internals/store/useStore");
 var _useAxis = require("../hooks/useAxis");
 var _useZAxis = require("../hooks/useZAxis");
-var _useChartSeries = require("../internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors");
+var _useChartSeriesConfig = require("../internals/plugins/corePlugins/useChartSeriesConfig");
 var _isCartesian = require("../internals/isCartesian");
 function useInternalItemTooltip() {
   const store = (0, _useStore.useStore)();
   const identifier = store.use(_useChartTooltip.selectorChartsTooltipItem);
-  const seriesConfig = store.use(_useChartSeries.selectorChartSeriesConfig);
+  const seriesConfig = store.use(_useChartSeriesConfig.selectorChartSeriesConfig);
   const series = (0, _useSeries.useSeries)();
   const {
     xAxis,

package/ChartsWrapper/ChartsWrapper.d.ts

@@ -30,8 +30,5 @@ export interface ChartsWrapperProps {
  * Wrapper for the charts components.
  * Its main purpose is to position the HTML legend in the correct place.
  */
-declare function ChartsWrapper(props: ChartsWrapperProps): import("react/jsx-runtime").JSX.Element;
-declare namespace ChartsWrapper {
-  var propTypes: any;
-}
+declare const ChartsWrapper: React.ForwardRefExoticComponent<ChartsWrapperProps & React.RefAttributes<HTMLDivElement>>;
 export { ChartsWrapper };

package/ChartsWrapper/ChartsWrapper.js

@@ -6,9 +6,10 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ChartsWrapper = ChartsWrapper;
+exports.ChartsWrapper = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _styles = require("@mui/material/styles");
 var _createStyled = require("@mui/system/createStyled");
 var _useChartRootRef = require("../hooks/useChartRootRef");
@@ -117,25 +118,27 @@ const Root = (0, _styles.styled)('div', {
  * Wrapper for the charts components.
  * Its main purpose is to position the HTML legend in the correct place.
  */
-function ChartsWrapper(props) {
+const ChartsWrapper = exports.ChartsWrapper = /*#__PURE__*/React.forwardRef(function ChartsWrapper(props, ref) {
   const {
     children,
     sx,
     extendVertically
   } = props;
   const chartRootRef = (0, _useChartRootRef.useChartRootRef)();
+  const handleRef = (0, _useForkRef.default)(chartRootRef, ref);
   const store = (0, _useStore.useStore)();
   const propsWidth = store.use(_useChartDimensions.selectorChartPropsWidth);
   const propsHeight = store.use(_useChartDimensions.selectorChartPropsHeight);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
-    ref: chartRootRef,
+    ref: handleRef,
     ownerState: props,
     sx: sx,
     extendVertically: extendVertically ?? propsHeight === undefined,
     width: propsWidth,
     children: children
   });
-}
+});
+if (process.env.NODE_ENV !== "production") ChartsWrapper.displayName = "ChartsWrapper";
 process.env.NODE_ENV !== "production" ? ChartsWrapper.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/ChartsXAxis/ChartsXAxis.d.ts

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

package/ChartsXAxis/ChartsXAxis.js

@@ -20,7 +20,8 @@ var _jsxRuntime = require("react/jsx-runtime");
  * API:
  *
  * - [ChartsXAxis API](https://mui.com/x/api/charts/charts-x-axis/)
- */function ChartsXAxis(inProps) {
+ */
+function ChartsXAxis(inProps) {
   const {
     xAxis,
     xAxisIds

package/ChartsXAxis/ChartsXAxisImpl.js

@@ -44,7 +44,7 @@ function ChartsXAxisImpl(_ref) {
     } = axis,
     settings = (0, _objectWithoutPropertiesLoose2.default)(axis, _excluded2);
 
-  // eslint-disable-next-line material-ui/mui-name-matches-component-name
+  // eslint-disable-next-line mui/material-ui-name-matches-component-name
   const themedProps = (0, _styles.useThemeProps)({
     props: (0, _extends2.default)({}, settings, inProps),
     name: 'MuiChartsXAxis'

package/ChartsXAxis/getVisibleLabels.d.ts

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

package/ChartsXAxis/shortenLabels.d.ts

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