@mui/x-charts 8.0.0-alpha.1 → 8.0.0-alpha.11

package/ChartsLegend/legend.types.d.ts

@@ -1,62 +1,9 @@
-import { ChartsTextBaseline, ChartsTextStyle } from '../internals/getWordsByLines';
-import { AxisId } from '../models/axis';
-export type AnchorX = 'left' | 'right' | 'middle';
-export type AnchorY = 'top' | 'bottom' | 'middle';
-export type AnchorPosition = {
-    horizontal: AnchorX;
-    vertical: AnchorY;
-};
-export type Direction = 'row' | 'column';
-export interface ColorLegendSelector {
-    /**
-     * The axis direction containing the color configuration to represent.
-     * @default 'z'
-     */
-    axisDirection?: 'x' | 'y' | 'z';
-    /**
-     * The id of the axis item with the color configuration to represent.
-     * @default The first axis item.
-     */
-    axisId?: AxisId;
-}
-export interface LegendPlacement {
-    /**
-     * The position of the legend.
-     */
-    position?: AnchorPosition;
-    /**
-     * The direction of the legend layout.
-     * The default depends on the chart.
-     */
-    direction?: Direction;
-}
-export type BoundingBox = {
-    width: number;
-    height: number;
-};
-export interface Position {
-    x: number;
-    y: number;
-}
-export interface TextPosition extends Position {
-    dominantBaseline: ChartsTextBaseline;
-    textAnchor: ChartsTextStyle['textAnchor'];
-}
-export type PiecewiseLabelFormatterParams = {
-    /**
-     * The min value of the piece. `null` is infinite.
-     */
-    min: number | Date | null;
-    /**
-     * The max value of the piece. `null` is infinite.
-     */
-    max: number | Date | null;
-    /**
-     * The formatted min value of the piece. `null` is infinite.
-     */
-    formattedMin: string | null;
+import { Position } from '../models/position';
+export type ChartsLegendPosition = {
     /**
-     * The formatted max value of the piece. `null` is infinite.
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
      */
-    formattedMax: string | null;
+    position?: Position;
 };

package/ChartsLegend/legendContext.types.d.ts

@@ -0,0 +1,55 @@
+import { ChartsLabelMarkProps } from '../ChartsLabel/ChartsLabelMark';
+import { PieItemId } from '../models';
+import { SeriesId } from '../models/seriesType/common';
+interface LegendItemContextBase {
+    /**
+     * The color used in the legend
+     */
+    color: string;
+    /**
+     * The label displayed in the legend
+     */
+    label: string;
+}
+export interface LegendItemParams extends Partial<Omit<SeriesLegendItemContext, 'type' | keyof LegendItemContextBase>>, Partial<Omit<PiecewiseColorLegendItemContext, 'type' | keyof LegendItemContextBase>>, LegendItemContextBase {
+    /**
+     * The identifier of the legend element.
+     * Used for internal purpose such as `key` props
+     */
+    id: number | string;
+    markType: ChartsLabelMarkProps['type'];
+}
+export interface SeriesLegendItemContext extends LegendItemContextBase {
+    /**
+     * The type of the legend item
+     * - `series` is used for series legend item
+     * - `piecewiseColor` is used for piecewise color legend item
+     */
+    type: 'series';
+    /**
+     * The identifier of the series
+     */
+    seriesId: SeriesId;
+    /**
+     * The identifier of the pie item
+     */
+    itemId?: PieItemId;
+}
+export interface PiecewiseColorLegendItemContext extends LegendItemContextBase {
+    /**
+     * The type of the legend item
+     * - `series` is used for series legend item
+     * - `piecewiseColor` is used for piecewise color legend item
+     */
+    type: 'piecewiseColor';
+    /**
+     * The minimum value of the category
+     */
+    minValue: number | Date | null;
+    /**
+     * The maximum value of the category
+     */
+    maxValue: number | Date | null;
+}
+export type LegendItemContext = SeriesLegendItemContext | PiecewiseColorLegendItemContext;
+export {};

package/ChartsLegend/onClickContextBuilder.d.ts

@@ -0,0 +1,2 @@
+import { LegendItemParams, SeriesLegendItemContext } from './legendContext.types';
+export declare const seriesContextBuilder: (context: LegendItemParams) => SeriesLegendItemContext;

package/ChartsLegend/onClickContextBuilder.js

@@ -0,0 +1,7 @@
+export const seriesContextBuilder = context => ({
+  type: 'series',
+  color: context.color,
+  label: context.label,
+  seriesId: context.seriesId,
+  itemId: context.itemId
+});

package/ChartsLegend/piecewiseColorDefaultLabelFormatter.d.ts

@@ -0,0 +1,2 @@
+import { PiecewiseLabelFormatterParams } from './piecewiseColorLegend.types';
+export declare function piecewiseColorDefaultLabelFormatter(params: PiecewiseLabelFormatterParams): string;

package/ChartsLegend/piecewiseColorDefaultLabelFormatter.js

@@ -0,0 +1,9 @@
+export function piecewiseColorDefaultLabelFormatter(params) {
+  if (params.min === null) {
+    return `<${params.formattedMax}`;
+  }
+  if (params.max === null) {
+    return `>${params.formattedMin}`;
+  }
+  return `${params.formattedMin}-${params.formattedMax}`;
+}

package/ChartsLegend/piecewiseColorLegend.types.d.ts

@@ -0,0 +1,26 @@
+export type PiecewiseLabelFormatterParams = {
+    /**
+     * The index of the entry.
+     */
+    index: number;
+    /**
+     * The length of the entries array.
+     */
+    length: number;
+    /**
+     * The min value of the piece. `null` is infinite.
+     */
+    min: number | Date | null;
+    /**
+     * The max value of the piece. `null` is infinite.
+     */
+    max: number | Date | null;
+    /**
+     * The formatted min value of the piece. `null` is infinite.
+     */
+    formattedMin: string | null;
+    /**
+     * The formatted max value of the piece. `null` is infinite.
+     */
+    formattedMax: string | null;
+};

package/ChartsLegend/piecewiseColorLegendClasses.d.ts

@@ -0,0 +1,28 @@
+import type { PiecewiseColorLegendProps } from './PiecewiseColorLegend';
+import type { ChartsLegendSlotExtension } from './chartsLegend.types';
+export interface PiecewiseColorLegendClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the list item that renders the `minLabel`. */
+    minLabel: string;
+    /** Styles applied to the list item that renders the `maxLabel`. */
+    maxLabel: string;
+    /** Styles applied to the list items. */
+    item: string;
+    /** Styles applied to the legend in column layout. */
+    vertical: string;
+    /** Styles applied to the legend in row layout. */
+    horizontal: string;
+    /** Styles applied to the legend with the labels before the color marks. */
+    start: string;
+    /** Styles applied to the legend with the labels after the color marks. */
+    end: string;
+    /** Styles applied to the legend with the labels on the extremes of the color marks. */
+    extremes: string;
+    /** Styles applied to the marks. */
+    mark: string;
+    /** Styles applied to the series label. */
+    label: string;
+}
+export declare const useUtilityClasses: (props: PiecewiseColorLegendProps & ChartsLegendSlotExtension) => Record<"label" | "mark" | "root" | "item" | "minLabel" | "maxLabel", string>;
+export declare const piecewiseColorLegendClasses: PiecewiseColorLegendClasses;

package/ChartsLegend/piecewiseColorLegendClasses.js

@@ -0,0 +1,23 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import composeClasses from '@mui/utils/composeClasses';
+function getLegendUtilityClass(slot) {
+  return generateUtilityClass('MuiPiecewiseColorLegendClasses', slot);
+}
+export const useUtilityClasses = props => {
+  const {
+    classes,
+    direction,
+    labelPosition
+  } = props;
+  const slots = {
+    root: ['root', direction, labelPosition],
+    minLabel: ['minLabel'],
+    maxLabel: ['maxLabel'],
+    item: ['item'],
+    mark: ['mark'],
+    label: ['label']
+  };
+  return composeClasses(slots, getLegendUtilityClass, classes);
+};
+export const piecewiseColorLegendClasses = generateUtilityClasses('MuiPiecewiseColorLegendClasses', ['root', 'minLabel', 'maxLabel', 'item', 'vertical', 'horizontal', 'start', 'end', 'extremes', 'mark', 'label']);

package/ChartsLegend/useAxis.d.ts

@@ -1,6 +1,6 @@
 import { AxisDefaultized } from '../models/axis';
 import { ZAxisDefaultized } from '../models/z-axis';
-import { ColorLegendSelector } from './legend.types';
+import { ColorLegendSelector } from './colorLegend.types';
 /**
  * Helper to select an axis definition according to its direction and id.
  */

package/ChartsLegend/useAxis.js

@@ -1,8 +1,7 @@
 'use client';
 
-import * as React from 'react';
-import { ZAxisContext } from "../context/ZAxisContextProvider.js";
-import { useCartesianContext } from "../context/CartesianProvider/useCartesianContext.js";
+import { useZAxes } from "../hooks/useZAxis.js";
+import { useXAxes, useYAxes } from "../hooks/useAxis.js";
 /**
  * Helper to select an axis definition according to its direction and id.
  */
@@ -12,14 +11,16 @@ export function useAxis({
 }) {
   const {
     xAxis,
-    xAxisIds,
+    xAxisIds
+  } = useXAxes();
+  const {
     yAxis,
     yAxisIds
-  } = useCartesianContext();
+  } = useYAxes();
   const {
     zAxis,
     zAxisIds
-  } = React.useContext(ZAxisContext);
+  } = useZAxes();
   switch (axisDirection) {
     case 'x':
       {

package/ChartsReferenceLine/ChartsXReferenceLine.d.ts

@@ -8,6 +8,6 @@ export type ChartsXReferenceLineProps<TValue extends string | number | Date = st
      */
     x: TValue;
 };
-export declare function getXReferenceLineClasses(classes?: Partial<ChartsReferenceLineClasses>): Record<"label" | "line" | "root", string>;
+export declare function getXReferenceLineClasses(classes?: Partial<ChartsReferenceLineClasses>): Record<"line" | "label" | "root", string>;
 declare function ChartsXReferenceLine(props: ChartsXReferenceLineProps): React.JSX.Element | null;
 export { ChartsXReferenceLine };

package/ChartsReferenceLine/ChartsYReferenceLine.d.ts

@@ -8,6 +8,6 @@ export type ChartsYReferenceLineProps<TValue extends string | number | Date = st
      */
     y: TValue;
 };
-export declare function getYReferenceLineClasses(classes?: Partial<ChartsReferenceLineClasses>): Record<"label" | "line" | "root", string>;
+export declare function getYReferenceLineClasses(classes?: Partial<ChartsReferenceLineClasses>): Record<"line" | "label" | "root", string>;
 declare function ChartsYReferenceLine(props: ChartsYReferenceLineProps): React.JSX.Element | null;
 export { ChartsYReferenceLine };

package/ChartsSurface/ChartsSurface.d.ts

@@ -6,12 +6,20 @@ export interface ChartsSurfaceProps {
     desc?: string;
     sx?: SxProps<Theme>;
     children?: React.ReactNode;
-    /**
-     * If `true`, the charts will not listen to the mouse move event.
-     * It might break interactive features, but will improve performance.
-     * @default false
-     */
-    disableAxisListener?: boolean;
 }
+/**
+ * It provides the drawing area for the chart elements.
+ * It is the root `<svg>` of all the chart elements.
+ *
+ * It also provides the `title` and `desc` elements for the chart.
+ *
+ * Demos:
+ *
+ * - [Composition](https://mui.com/x/api/charts/composition/)
+ *
+ * API:
+ *
+ * - [ChartsSurface API](https://mui.com/x/api/charts/charts-surface/)
+ */
 declare const ChartsSurface: React.ForwardRefExoticComponent<ChartsSurfaceProps & React.RefAttributes<SVGSVGElement>>;
 export { ChartsSurface };

package/ChartsSurface/ChartsSurface.js

@@ -2,62 +2,80 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "disableAxisListener", "className", "title", "desc"];
+const _excluded = ["children", "className", "title", "desc"];
 import { styled, useThemeProps } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import * as React from 'react';
 import useForkRef from '@mui/utils/useForkRef';
-import { useAxisEvents } from "../hooks/useAxisEvents.js";
 import { ChartsAxesGradients } from "../internals/components/ChartsAxesGradients/index.js";
-import { useDrawingArea } from "../hooks/index.js";
-import { useSurfaceRef } from "../context/SvgRefProvider/index.js";
-import { useSize } from "../context/SizeProvider/index.js";
+import { useSvgRef } from "../hooks/useSvgRef.js";
+import { useSelector } from "../internals/store/useSelector.js";
+import { useStore } from "../internals/store/useStore.js";
+import { selectorChartContainerSize, selectorChartPropsSize } from "../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ChartsSurfaceStyles = styled('svg', {
   name: 'MuiChartsSurface',
   slot: 'Root'
-})(() => ({
+})(({
+  ownerState
+}) => ({
+  width: ownerState.width ?? '100%',
+  height: ownerState.height ?? '100%',
+  display: 'flex',
+  position: 'relative',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  overflow: 'hidden',
   // This prevents default touch actions when using the svg on mobile devices.
   // For example, prevent page scroll & zoom.
   touchAction: 'none'
 }));
+
+/**
+ * It provides the drawing area for the chart elements.
+ * It is the root `<svg>` of all the chart elements.
+ *
+ * It also provides the `title` and `desc` elements for the chart.
+ *
+ * Demos:
+ *
+ * - [Composition](https://mui.com/x/api/charts/composition/)
+ *
+ * API:
+ *
+ * - [ChartsSurface API](https://mui.com/x/api/charts/charts-surface/)
+ */
 const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(inProps, ref) {
+  const store = useStore();
   const {
-    width,
-    height,
-    left,
-    right,
-    top,
-    bottom
-  } = useDrawingArea();
+    width: svgWidth,
+    height: svgHeight
+  } = useSelector(store, selectorChartContainerSize);
   const {
-    hasIntrinsicSize
-  } = useSize();
-  const surfaceRef = useSurfaceRef();
-  const handleRef = useForkRef(surfaceRef, ref);
+    width: propsWidth,
+    height: propsHeight
+  } = useSelector(store, selectorChartPropsSize);
+  const svgRef = useSvgRef();
+  const handleRef = useForkRef(svgRef, ref);
   const themeProps = useThemeProps({
     props: inProps,
     name: 'MuiChartsSurface'
   });
   const {
       children,
-      disableAxisListener = false,
       className,
       title,
       desc
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
-  const svgWidth = width + left + right;
-  const svgHeight = height + top + bottom;
-  const svgView = {
-    width: svgWidth,
-    height: svgHeight,
-    x: 0,
-    y: 0
-  };
-  useAxisEvents(disableAxisListener);
+  const hasIntrinsicSize = svgHeight > 0 && svgWidth > 0;
   return /*#__PURE__*/_jsxs(ChartsSurfaceStyles, _extends({
-    viewBox: `${svgView.x} ${svgView.y} ${svgView.width} ${svgView.height}`,
+    ownerState: {
+      width: propsWidth,
+      height: propsHeight
+    },
+    viewBox: `${0} ${0} ${svgWidth} ${svgHeight}`,
     className: className
   }, other, {
     ref: handleRef,
@@ -76,12 +94,6 @@ process.env.NODE_ENV !== "production" ? ChartsSurface.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   desc: PropTypes.string,
-  /**
-   * If `true`, the charts will not listen to the mouse move event.
-   * It might break interactive features, but will improve performance.
-   * @default false
-   */
-  disableAxisListener: PropTypes.bool,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   title: PropTypes.string
 } : void 0;

package/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -5,20 +5,21 @@ import PropTypes from 'prop-types';
 import Typography from '@mui/material/Typography';
 import clsx from 'clsx';
 import { useUtilityClasses } from "./chartsTooltipClasses.js";
-import { ChartsTooltipCell, ChartsTooltipMark, ChartsTooltipPaper, ChartsTooltipRow, ChartsTooltipTable } from "./ChartsTooltipTable.js";
+import { ChartsTooltipCell, ChartsTooltipPaper, ChartsTooltipRow, ChartsTooltipTable } from "./ChartsTooltipTable.js";
 import { useAxisTooltip } from "./useAxisTooltip.js";
 import { useXAxis, useYAxis } from "../hooks/index.js";
+import { ChartsLabelMark } from "../ChartsLabel/ChartsLabelMark.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function ChartsAxisTooltipContent(props) {
   const {
     classes: propClasses,
     sx
   } = props;
-  const tootlipData = useAxisTooltip();
+  const tooltipData = useAxisTooltip();
   const xAxis = useXAxis();
   const yAxis = useYAxis();
   const classes = useUtilityClasses(propClasses);
-  if (tootlipData === null) {
+  if (tooltipData === null) {
     return null;
   }
   const {
@@ -26,7 +27,7 @@ function ChartsAxisTooltipContent(props) {
     axisValue,
     axisFormattedValue,
     seriesItems
-  } = tootlipData;
+  } = tooltipData;
   const axis = axisDirection === 'x' ? xAxis : yAxis;
   return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
     sx: sx,
@@ -35,8 +36,10 @@ function ChartsAxisTooltipContent(props) {
       className: classes.table,
       children: [axisValue != null && !axis.hideTooltip && /*#__PURE__*/_jsx("thead", {
         children: /*#__PURE__*/_jsx(ChartsTooltipRow, {
+          className: classes.row,
           children: /*#__PURE__*/_jsx(ChartsTooltipCell, {
             colSpan: 3,
+            className: clsx(classes.cell, classes.axisValueCell),
             children: /*#__PURE__*/_jsx(Typography, {
               children: axisFormattedValue
             })
@@ -47,7 +50,8 @@ function ChartsAxisTooltipContent(props) {
           seriesId,
           color,
           formattedValue,
-          formattedLabel
+          formattedLabel,
+          markType
         }) => {
           if (formattedValue == null) {
             return null;
@@ -56,7 +60,8 @@ function ChartsAxisTooltipContent(props) {
             className: classes.row,
             children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
               className: clsx(classes.markCell, classes.cell),
-              children: color && /*#__PURE__*/_jsx(ChartsTooltipMark, {
+              children: color && /*#__PURE__*/_jsx(ChartsLabelMark, {
+                type: markType,
                 color: color,
                 className: classes.mark
               })

package/ChartsTooltip/ChartsItemTooltipContent.js

@@ -5,7 +5,8 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { useUtilityClasses } from "./chartsTooltipClasses.js";
 import { useItemTooltip } from "./useItemTooltip.js";
-import { ChartsTooltipCell, ChartsTooltipMark, ChartsTooltipPaper, ChartsTooltipRow, ChartsTooltipTable } from "./ChartsTooltipTable.js";
+import { ChartsTooltipCell, ChartsTooltipPaper, ChartsTooltipRow, ChartsTooltipTable } from "./ChartsTooltipTable.js";
+import { ChartsLabelMark } from "../ChartsLabel/ChartsLabelMark.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function ChartsItemTooltipContent(props) {
   const {
@@ -20,7 +21,8 @@ function ChartsItemTooltipContent(props) {
   const {
     color,
     label,
-    formattedValue
+    formattedValue,
+    markType
   } = tooltipData;
   return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
     sx: sx,
@@ -32,7 +34,8 @@ function ChartsItemTooltipContent(props) {
           className: classes.row,
           children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
             className: clsx(classes.markCell, classes.cell),
-            children: /*#__PURE__*/_jsx(ChartsTooltipMark, {
+            children: /*#__PURE__*/_jsx(ChartsLabelMark, {
+              type: markType,
               color: color,
               className: classes.mark
             })

package/ChartsTooltip/ChartsTooltip.js

@@ -3,6 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import HTMLElementType from '@mui/utils/HTMLElementType';
 import { ChartsItemTooltipContent } from "./ChartsItemTooltipContent.js";
 import { ChartsAxisTooltipContent } from "./ChartsAxisTooltipContent.js";
 import { ChartsTooltipContainer } from "./ChartsTooltipContainer.js";
@@ -43,26 +44,7 @@ process.env.NODE_ENV !== "production" ? ChartsTooltip.propTypes = {
    * It's used to set the position of the popper.
    * The return value will passed as the reference object of the Popper instance.
    */
-  anchorEl: PropTypes.oneOfType([(props, propName) => {
-    if (props[propName] == null) {
-      return new Error(`Prop '${propName}' is required but wasn't specified`);
-    }
-    if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
-      return new Error(`Expected prop '${propName}' to be of type Element`);
-    }
-    return null;
-  }, PropTypes.func, PropTypes.shape({
-    contextElement: (props, propName) => {
-      if (props[propName] == null) {
-        return null;
-      }
-      if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
-        return new Error(`Expected prop '${propName}' to be of type Element`);
-      }
-      return null;
-    },
-    getBoundingClientRect: PropTypes.func.isRequired
-  })]),
+  anchorEl: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([HTMLElementType, PropTypes.object, PropTypes.func]),
   /**
    * Override or extend the styles applied to the component.
    */

package/ChartsTooltip/ChartsTooltipContainer.js

@@ -5,16 +5,17 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["trigger", "classes", "children"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import HTMLElementType from '@mui/utils/HTMLElementType';
 import useLazyRef from '@mui/utils/useLazyRef';
 import { styled, useThemeProps } from '@mui/material/styles';
 import Popper from '@mui/material/Popper';
 import NoSsr from '@mui/material/NoSsr';
 import { useSvgRef } from "../hooks/useSvgRef.js";
 import { usePointerType } from "./utils.js";
-import { useSelector } from "../internals/useSelector.js";
-import { useStore } from "../internals/useStore.js";
+import { useSelector } from "../internals/store/useSelector.js";
+import { useStore } from "../internals/store/useStore.js";
 import { useXAxis } from "../hooks/index.js";
-import { selectorChartsInteractionItemIsDefined, selectorChartsInteractionXAxisIsDefined, selectorChartsInteractionYAxisIsDefined } from "../context/InteractionSelectors.js";
+import { selectorChartsInteractionItemIsDefined, selectorChartsInteractionXAxisIsDefined, selectorChartsInteractionYAxisIsDefined } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const ChartsTooltipRoot = styled(Popper, {
   name: 'MuiChartsTooltip',
@@ -26,6 +27,7 @@ const ChartsTooltipRoot = styled(Popper, {
   pointerEvents: 'none',
   zIndex: theme.zIndex.modal
 }));
+const axisHasData = axis => axis?.data !== undefined && axis.data.length !== 0;
 
 /**
  * Demos:
@@ -50,7 +52,6 @@ function ChartsTooltipContainer(inProps) {
   const svgRef = useSvgRef();
   const pointerType = usePointerType();
   const xAxis = useXAxis();
-  const xAxisHasData = xAxis.data !== undefined && xAxis.data.length !== 0;
   const popperRef = React.useRef(null);
   const positionRef = useLazyRef(() => ({
     x: 0,
@@ -59,7 +60,7 @@ function ChartsTooltipContainer(inProps) {
   const store = useStore();
   const isOpen = useSelector(store,
   // eslint-disable-next-line no-nested-ternary
-  trigger === 'axis' ? xAxisHasData ? selectorChartsInteractionXAxisIsDefined : selectorChartsInteractionYAxisIsDefined : selectorChartsInteractionItemIsDefined);
+  trigger === 'axis' ? axisHasData(xAxis) ? selectorChartsInteractionXAxisIsDefined : selectorChartsInteractionYAxisIsDefined : selectorChartsInteractionItemIsDefined);
   const popperOpen = pointerType !== null && isOpen; // tooltipHasData;
 
   React.useEffect(() => {
@@ -124,26 +125,7 @@ process.env.NODE_ENV !== "production" ? ChartsTooltipContainer.propTypes = {
    * It's used to set the position of the popper.
    * The return value will passed as the reference object of the Popper instance.
    */
-  anchorEl: PropTypes.oneOfType([(props, propName) => {
-    if (props[propName] == null) {
-      return new Error(`Prop '${propName}' is required but wasn't specified`);
-    }
-    if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
-      return new Error(`Expected prop '${propName}' to be of type Element`);
-    }
-    return null;
-  }, PropTypes.func, PropTypes.shape({
-    contextElement: (props, propName) => {
-      if (props[propName] == null) {
-        return null;
-      }
-      if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
-        return new Error(`Expected prop '${propName}' to be of type Element`);
-      }
-      return null;
-    },
-    getBoundingClientRect: PropTypes.func.isRequired
-  })]),
+  anchorEl: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([HTMLElementType, PropTypes.object, PropTypes.func]),
   /**
    * Popper render function or node.
    */

package/ChartsTooltip/ChartsTooltipTable.d.ts

@@ -14,9 +14,3 @@ export declare const ChartsTooltipRow: import("@emotion/styled").StyledComponent
  * @ignore - internal component.
  */
 export declare const ChartsTooltipCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, keyof import("react").ClassAttributes<HTMLTableDataCellElement> | keyof import("react").TdHTMLAttributes<HTMLTableDataCellElement>>, {}>;
-/**
- * @ignore - internal component.
- */
-export declare const ChartsTooltipMark: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
-    color: string;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;