@mui/x-charts 8.0.0-beta.3 → 8.1.0

package/modern/internals/components/ChartsWrapper/ChartsWrapper.d.ts

@@ -1,18 +0,0 @@
-import * as React from 'react';
-import { SxProps, Theme } from '@mui/material/styles';
-import { Direction } from "../../../ChartsLegend/index.js";
-import { Position } from "../../../models/index.js";
-export interface ChartsWrapperProps {
-  legendPosition?: Position;
-  legendDirection?: Direction;
-  children: React.ReactNode;
-  sx?: SxProps<Theme>;
-}
-/**
- * @ignore - internal component.
- *
- * Wrapper for the charts components.
- * Its main purpose is to position the HTML legend in the correct place.
- */
-declare function ChartsWrapper(props: ChartsWrapperProps): React.JSX.Element;
-export { ChartsWrapper };

package/modern/internals/components/ChartsWrapper/ChartsWrapper.js

@@ -1,66 +0,0 @@
-import * as React from 'react';
-import { styled } from '@mui/material/styles';
-import { jsx as _jsx } from "react/jsx-runtime";
-const getDirection = (direction, position) => {
-  if (direction === 'vertical') {
-    if (position?.horizontal === 'start') {
-      return 'row';
-    }
-    return 'row-reverse';
-  }
-  if (position?.vertical === 'bottom') {
-    return 'column-reverse';
-  }
-  return 'column';
-};
-const getAlign = (direction, position) => {
-  if (direction === 'vertical') {
-    if (position?.vertical === 'top') {
-      return 'flex-start';
-    }
-    if (position?.vertical === 'bottom') {
-      return 'flex-end';
-    }
-  }
-  if (direction === 'horizontal') {
-    if (position?.horizontal === 'start') {
-      return 'flex-start';
-    }
-    if (position?.horizontal === 'end') {
-      return 'flex-end';
-    }
-  }
-  return 'center';
-};
-const Root = styled('div', {
-  name: 'MuiChartsWrapper',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
-})(({
-  ownerState
-}) => ({
-  display: 'flex',
-  flexDirection: getDirection(ownerState.legendDirection, ownerState.legendPosition),
-  flex: 1,
-  justifyContent: 'center',
-  alignItems: getAlign(ownerState.legendDirection, ownerState.legendPosition)
-}));
-
-/**
- * @ignore - internal component.
- *
- * Wrapper for the charts components.
- * Its main purpose is to position the HTML legend in the correct place.
- */
-function ChartsWrapper(props) {
-  const {
-    children,
-    sx
-  } = props;
-  return /*#__PURE__*/_jsx(Root, {
-    ownerState: props,
-    sx: sx,
-    children: children
-  });
-}
-export { ChartsWrapper };

package/modern/internals/components/ChartsWrapper/index.d.ts

@@ -1 +0,0 @@
-export * from "./ChartsWrapper.js";

package/modern/internals/components/ChartsWrapper/index.js

@@ -1 +0,0 @@
-export * from "./ChartsWrapper.js";

package/modern/internals/configInit.d.ts

@@ -1,16 +0,0 @@
-import { CartesianChartSeriesType, PolarChartSeriesType } from "../models/seriesType/config.js";
-declare class CartesianSeriesTypes {
-  types: Set<CartesianChartSeriesType>;
-  constructor();
-  addType(value: CartesianChartSeriesType): void;
-  getTypes(): Set<"line" | "scatter" | "bar">;
-}
-declare class PolarSeriesTypes {
-  types: Set<PolarChartSeriesType>;
-  constructor();
-  addType(value: PolarChartSeriesType): void;
-  getTypes(): Set<"radar">;
-}
-export declare const cartesianSeriesTypes: CartesianSeriesTypes;
-export declare const polarSeriesTypes: PolarSeriesTypes;
-export {};

package/modern/internals/configInit.js

@@ -1,38 +0,0 @@
-let cartesianInstance;
-let polarInstance;
-class CartesianSeriesTypes {
-  constructor() {
-    this.types = new Set();
-    if (cartesianInstance) {
-      throw new Error('You can only create one instance!');
-    }
-    cartesianInstance = this.types;
-  }
-  addType(value) {
-    this.types.add(value);
-  }
-  getTypes() {
-    return this.types;
-  }
-}
-class PolarSeriesTypes {
-  constructor() {
-    this.types = new Set();
-    if (polarInstance) {
-      throw new Error('You can only create one instance!');
-    }
-    polarInstance = this.types;
-  }
-  addType(value) {
-    this.types.add(value);
-  }
-  getTypes() {
-    return this.types;
-  }
-}
-export const cartesianSeriesTypes = new CartesianSeriesTypes();
-cartesianSeriesTypes.addType('bar');
-cartesianSeriesTypes.addType('line');
-cartesianSeriesTypes.addType('scatter');
-export const polarSeriesTypes = new PolarSeriesTypes();
-polarSeriesTypes.addType('radar');

package/modern/internals/consumeSlots.d.ts

@@ -1,48 +0,0 @@
-import * as React from 'react';
-/**
- * A higher order component that consumes a slot from the props and renders the component provided in the slot.
- *
- * This HOC will wrap a single component, and will render the component provided in the slot, if it exists.
- *
- * If you need to render multiple components, you can manually consume the slots from the props and render them in your component instead of using this HOC.
- *
- * In the example below, `MyComponent` will render the component provided in `mySlot` slot, if it exists. Otherwise, it will render the `DefaultComponent`.
- *
- * @example
- *
- * ```tsx
- * type MyComponentProps = {
- *   direction: 'row' | 'column';
- *   slots?: {
- *     mySlot?: React.JSXElementConstructor<{ direction: 'row' | 'column' }>;
- *   }
- * };
- *
- * const MyComponent = consumeSlots(
- *   'MuiMyComponent',
- *   'mySlot',
- *   function DefaultComponent(props: MyComponentProps) {
- *     return (
- *       <div className={props.classes.root}>
- *         {props.direction}
- *       </div>
- *     );
- *   }
- * );
- * ```
- *
- * @param {string} name The mui component name.
- * @param {string} slotPropName The name of the prop to retrieve the slot from.
- * @param {object} options Options for the HOC.
- * @param {boolean} options.propagateSlots Whether to propagate the slots to the component, this is always false if the slot is provided.
- * @param {Record<string, any>} options.defaultProps A set of defaults for the component, will be deep merged with the props.
- * @param {Array<keyof Props>} options.omitProps An array of props to omit from the component.
- * @param {Function} options.classesResolver A function that returns the classes for the component. It receives the props, after theme props and defaults have been applied. And the theme object as the second argument.
- * @param InComponent The component to render if the slot is not provided.
- */
-export declare const consumeSlots: <Props extends {}, Ref extends {}, RenderFunction = (props: Props, ref: React.Ref<Ref>) => React.ElementType>(name: string, slotPropName: string, options: {
-  propagateSlots?: boolean;
-  defaultProps?: Omit<Partial<Props>, "slots" | "slotProps"> | ((props: Props) => Omit<Partial<Props>, "slots" | "slotProps">);
-  omitProps?: Array<keyof Props>;
-  classesResolver?: (props: Props, theme: any) => Record<string, string>;
-}, InComponent: RenderFunction) => React.ForwardRefExoticComponent<React.PropsWithoutRef<Props> & React.RefAttributes<Ref>>;

package/modern/internals/consumeSlots.js

@@ -1,97 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["slots", "slotProps"],
-  _excluded2 = ["ownerState"];
-import { useTheme, useThemeProps } from '@mui/material/styles';
-import resolveProps from '@mui/utils/resolveProps';
-import useSlotProps from '@mui/utils/useSlotProps';
-import * as React from 'react';
-
-/**
- * A higher order component that consumes a slot from the props and renders the component provided in the slot.
- *
- * This HOC will wrap a single component, and will render the component provided in the slot, if it exists.
- *
- * If you need to render multiple components, you can manually consume the slots from the props and render them in your component instead of using this HOC.
- *
- * In the example below, `MyComponent` will render the component provided in `mySlot` slot, if it exists. Otherwise, it will render the `DefaultComponent`.
- *
- * @example
- *
- * ```tsx
- * type MyComponentProps = {
- *   direction: 'row' | 'column';
- *   slots?: {
- *     mySlot?: React.JSXElementConstructor<{ direction: 'row' | 'column' }>;
- *   }
- * };
- *
- * const MyComponent = consumeSlots(
- *   'MuiMyComponent',
- *   'mySlot',
- *   function DefaultComponent(props: MyComponentProps) {
- *     return (
- *       <div className={props.classes.root}>
- *         {props.direction}
- *       </div>
- *     );
- *   }
- * );
- * ```
- *
- * @param {string} name The mui component name.
- * @param {string} slotPropName The name of the prop to retrieve the slot from.
- * @param {object} options Options for the HOC.
- * @param {boolean} options.propagateSlots Whether to propagate the slots to the component, this is always false if the slot is provided.
- * @param {Record<string, any>} options.defaultProps A set of defaults for the component, will be deep merged with the props.
- * @param {Array<keyof Props>} options.omitProps An array of props to omit from the component.
- * @param {Function} options.classesResolver A function that returns the classes for the component. It receives the props, after theme props and defaults have been applied. And the theme object as the second argument.
- * @param InComponent The component to render if the slot is not provided.
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-export const consumeSlots = (name, slotPropName, options, InComponent) => {
-  function ConsumeSlotsInternal(props, ref) {
-    const themedProps = useThemeProps({
-      props,
-      // eslint-disable-next-line material-ui/mui-name-matches-component-name
-      name
-    });
-    const defaultProps = typeof options.defaultProps === 'function' ? options.defaultProps(themedProps) : options.defaultProps ?? {};
-    const defaultizedProps = resolveProps(defaultProps, themedProps);
-    const _ref = defaultizedProps,
-      {
-        slots,
-        slotProps
-      } = _ref,
-      other = _objectWithoutPropertiesLoose(_ref, _excluded);
-    const theme = useTheme();
-    const classes = options.classesResolver?.(defaultizedProps, theme);
-
-    // Can be a function component or a forward ref component.
-    const Component = slots?.[slotPropName] ?? InComponent;
-    const propagateSlots = options.propagateSlots && !slots?.[slotPropName];
-    const _useSlotProps = useSlotProps({
-        elementType: Component,
-        externalSlotProps: slotProps?.[slotPropName],
-        additionalProps: _extends({}, other, {
-          classes
-        }, propagateSlots && {
-          slots,
-          slotProps
-        }),
-        ownerState: {}
-      }),
-      originalOutProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
-    const outProps = _extends({}, originalOutProps);
-    for (const prop of options.omitProps ?? []) {
-      delete outProps[prop];
-    }
-    if (process.env.NODE_ENV !== 'production') {
-      Component.displayName = `${name}.slots.${slotPropName}`;
-    }
-    return /*#__PURE__*/_jsx(Component, _extends({}, outProps, {
-      ref: ref
-    }));
-  }
-  return /*#__PURE__*/React.forwardRef(ConsumeSlotsInternal);
-};

package/modern/internals/consumeThemeProps.d.ts

@@ -1,50 +0,0 @@
-import * as React from 'react';
-/**
- * A higher order component that consumes and merges the theme `defaultProps` and handles the `classes` and renders the component.
- *
- * This HOC will wrap a single component.
- * If you need to render multiple components, you can manually consume the theme and render them in your component instead of using this HOC.
- *
- * In the example below, `MyComponent` will render the `DefaultComponent` with the `direction` prop set to `'row'` and the className set to `'my-custom-root'`.
- *
- * @example
- * ```tsx
- * createTheme({
- *   components: {
- *     MuiMyComponent: {
- *       defaultProps: {
- *         direction: 'row',
- *       },
- *     },
- *   },
- * })
- *
- * type MyComponentProps = {
- *   direction: 'row' | 'column';
- *   classes?: Record<'root', string>;
- * };
- *
- * const MyComponent = consumeThemeProps(
- *   'MuiMyComponent',
- *   function DefaultComponent(props: MyComponentProps) {
- *     return (
- *       <div className={props.classes.root}>
- *         {props.direction}
- *       </div>
- *     );
- *   }
- * );
- *
- * render(<MyComponent classes={{ root: 'my-custom-root' }} />);
- * ```
- *
- * @param {string} name The mui component name.
- * @param {object} options Options for the HOC.
- * @param {Record<string, any>} options.defaultProps A set of defaults for the component, will be deep merged with the props.
- * @param {Function} options.classesResolver A function that returns the classes for the component. It receives the props, after theme props and defaults have been applied. And the theme object as the second argument.
- * @param InComponent The component to render if the slot is not provided.
- */
-export declare const consumeThemeProps: <Props extends {}, Ref extends {}, RenderFunction = (props: Props, ref: React.Ref<Ref>) => React.ElementType>(name: string, options: {
-  defaultProps?: Omit<Partial<Props>, "slots" | "slotProps"> | (<T extends Props>(props: T) => Omit<Partial<T>, "slots" | "slotProps">);
-  classesResolver?: (props: Props, theme: any) => Record<string, string>;
-}, InComponent: RenderFunction) => React.ForwardRefExoticComponent<React.PropsWithoutRef<Props> & React.RefAttributes<Ref>>;

package/modern/internals/consumeThemeProps.js

@@ -1,70 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import { useTheme, useThemeProps } from '@mui/material/styles';
-import resolveProps from '@mui/utils/resolveProps';
-import * as React from 'react';
-
-/**
- * A higher order component that consumes and merges the theme `defaultProps` and handles the `classes` and renders the component.
- *
- * This HOC will wrap a single component.
- * If you need to render multiple components, you can manually consume the theme and render them in your component instead of using this HOC.
- *
- * In the example below, `MyComponent` will render the `DefaultComponent` with the `direction` prop set to `'row'` and the className set to `'my-custom-root'`.
- *
- * @example
- * ```tsx
- * createTheme({
- *   components: {
- *     MuiMyComponent: {
- *       defaultProps: {
- *         direction: 'row',
- *       },
- *     },
- *   },
- * })
- *
- * type MyComponentProps = {
- *   direction: 'row' | 'column';
- *   classes?: Record<'root', string>;
- * };
- *
- * const MyComponent = consumeThemeProps(
- *   'MuiMyComponent',
- *   function DefaultComponent(props: MyComponentProps) {
- *     return (
- *       <div className={props.classes.root}>
- *         {props.direction}
- *       </div>
- *     );
- *   }
- * );
- *
- * render(<MyComponent classes={{ root: 'my-custom-root' }} />);
- * ```
- *
- * @param {string} name The mui component name.
- * @param {object} options Options for the HOC.
- * @param {Record<string, any>} options.defaultProps A set of defaults for the component, will be deep merged with the props.
- * @param {Function} options.classesResolver A function that returns the classes for the component. It receives the props, after theme props and defaults have been applied. And the theme object as the second argument.
- * @param InComponent The component to render if the slot is not provided.
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-export const consumeThemeProps = (name, options, InComponent) => /*#__PURE__*/React.forwardRef(function ConsumeThemeInternal(props, ref) {
-  const themedProps = useThemeProps({
-    props,
-    // eslint-disable-next-line material-ui/mui-name-matches-component-name
-    name
-  });
-  const defaultProps = typeof options.defaultProps === 'function' ? options.defaultProps(themedProps) : options.defaultProps ?? {};
-  const outProps = resolveProps(defaultProps, themedProps);
-  const theme = useTheme();
-  const classes = options.classesResolver?.(outProps, theme);
-  const OutComponent = /*#__PURE__*/React.forwardRef(InComponent);
-  if (process.env.NODE_ENV !== 'production') {
-    OutComponent.displayName = `consumeThemeProps(${name})`;
-  }
-  return /*#__PURE__*/_jsx(OutComponent, _extends({}, outProps, {
-    classes: classes,
-    ref: ref
-  }));
-});

package/modern/internals/createSeriesSelectorOfType.d.ts

@@ -1,4 +0,0 @@
-import { ChartSeriesDefaultized, ChartsSeriesConfig } from "../models/seriesType/config.js";
-import { SeriesId } from "../models/seriesType/common.js";
-export declare function createSeriesSelectorsOfType<T extends keyof ChartsSeriesConfig>(seriesType: T): (ids?: SeriesId | SeriesId[]) => ChartSeriesDefaultized<T> | (ChartSeriesDefaultized<T> | undefined)[] | undefined;
-export declare function createAllSeriesSelectorOfType<T extends keyof ChartsSeriesConfig>(seriesType: T): () => import(".").ProcessedSeries<keyof ChartsSeriesConfig>[T];

package/modern/internals/createSeriesSelectorOfType.js

@@ -1,43 +0,0 @@
-import { fastArrayCompare } from '@mui/x-internals/fastArrayCompare';
-import { warnOnce } from '@mui/x-internals/warning';
-import { createSelector } from "./plugins/utils/selectors.js";
-import { selectorChartSeriesProcessed } from "./plugins/corePlugins/useChartSeries/useChartSeries.selectors.js";
-import { useStore } from "./store/useStore.js";
-import { useSelector } from "./store/useSelector.js";
-export function createSeriesSelectorsOfType(seriesType) {
-  const selectorSeriesWithIds = createSelector([selectorChartSeriesProcessed, (_, ids) => ids], (processedSeries, ids) => {
-    if (!ids || Array.isArray(ids) && ids.length === 0) {
-      return processedSeries[seriesType]?.seriesOrder?.map(seriesId => processedSeries[seriesType]?.series[seriesId]) ?? [];
-    }
-    if (!Array.isArray(ids)) {
-      return processedSeries[seriesType]?.series?.[ids];
-    }
-    const result = [];
-    const failedIds = [];
-    for (const id of ids) {
-      const series = processedSeries[seriesType]?.series?.[id];
-      if (series) {
-        result.push(series);
-      } else {
-        failedIds.push(id);
-      }
-    }
-    if (process.env.NODE_ENV !== 'production' && failedIds.length > 0) {
-      const formattedIds = failedIds.map(v => JSON.stringify(v)).join(', ');
-      const fnName = `use${seriesType.charAt(0).toUpperCase()}${seriesType.slice(1)}Series`;
-      warnOnce([`MUI X: The following ids provided to "${fnName}" could not be found: ${formattedIds}.`, `Make sure that they exist and their series are using the "${seriesType}" series type.`]);
-    }
-    return result;
-  });
-  return ids => {
-    const store = useStore();
-    return useSelector(store, selectorSeriesWithIds, ids, fastArrayCompare);
-  };
-}
-export function createAllSeriesSelectorOfType(seriesType) {
-  const selectorSeries = createSelector(selectorChartSeriesProcessed, processedSeries => processedSeries[seriesType]);
-  return () => {
-    const store = useStore();
-    return useSelector(store, selectorSeries);
-  };
-}

package/modern/internals/defaultizeMargin.d.ts

@@ -1,3 +0,0 @@
-import type { ChartMargin, UseChartDimensionsParameters } from './plugins/corePlugins/useChartDimensions/useChartDimensions.types';
-export declare function defaultizeMargin(input: UseChartDimensionsParameters['margin'], defaultMargin: ChartMargin): ChartMargin;
-export declare function defaultizeMargin(input: UseChartDimensionsParameters['margin'], defaultMargin?: ChartMargin): Partial<ChartMargin> | undefined;

package/modern/internals/defaultizeMargin.js

@@ -1,15 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-export function defaultizeMargin(input, defaultMargin) {
-  if (typeof input === 'number') {
-    return {
-      top: input,
-      bottom: input,
-      left: input,
-      right: input
-    };
-  }
-  if (defaultMargin) {
-    return _extends({}, defaultMargin, input);
-  }
-  return input;
-}

package/modern/internals/defaultizeValueFormatter.d.ts

@@ -1,6 +0,0 @@
-import { SeriesId, SeriesValueFormatter } from "../models/seriesType/common.js";
-export declare function defaultizeValueFormatter<TValue, ISeries extends {
-  valueFormatter?: SeriesValueFormatter<TValue>;
-}>(series: Record<SeriesId, ISeries>, defaultValueFormatter: SeriesValueFormatter<TValue>): Record<SeriesId, ISeries & {
-  valueFormatter: SeriesValueFormatter<TValue>;
-}>;

package/modern/internals/defaultizeValueFormatter.js

@@ -1,10 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-export function defaultizeValueFormatter(series, defaultValueFormatter) {
-  const defaultizedSeries = {};
-  Object.keys(series).forEach(seriesId => {
-    defaultizedSeries[seriesId] = _extends({}, series[seriesId], {
-      valueFormatter: series[seriesId].valueFormatter ?? defaultValueFormatter
-    });
-  });
-  return defaultizedSeries;
-}

package/modern/internals/degToRad.d.ts

@@ -1,2 +0,0 @@
-/** Converts degrees to radians. */
-export declare function degToRad(degrees: number): number;

package/modern/internals/degToRad.js

@@ -1,4 +0,0 @@
-/** Converts degrees to radians. */
-export function degToRad(degrees) {
-  return degrees * (Math.PI / 180);
-}

package/modern/internals/domUtils.d.ts

@@ -1,18 +0,0 @@
-export declare const MEASUREMENT_SPAN_ID = "mui_measurement_span";
-/**
- *
- * @param style React style object
- * @returns CSS styling string
- */
-export declare const getStyleString: (style: React.CSSProperties) => string;
-/**
- *
- * @param text The string to estimate
- * @param style The style applied
- * @returns width and height of the text
- */
-export declare const getStringSize: (text: string | number, style?: React.CSSProperties) => {
-  width: number;
-  height: number;
-};
-export declare function unstable_cleanupDOM(): void;

package/modern/internals/domUtils.js

@@ -1,129 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-// DOM utils taken from
-// https://github.com/recharts/recharts/blob/master/src/util/DOMUtils.ts
-
-function isSsr() {
-  return typeof window === 'undefined';
-}
-const stringCache = {
-  widthCache: {},
-  cacheCount: 0
-};
-const MAX_CACHE_NUM = 2000;
-const SPAN_STYLE = {
-  position: 'absolute',
-  top: '-20000px',
-  left: 0,
-  padding: 0,
-  margin: 0,
-  border: 'none',
-  whiteSpace: 'pre'
-};
-const STYLE_LIST = ['minWidth', 'maxWidth', 'width', 'minHeight', 'maxHeight', 'height', 'top', 'left', 'fontSize', 'padding', 'margin', 'paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom', 'marginLeft', 'marginRight', 'marginTop', 'marginBottom'];
-export const MEASUREMENT_SPAN_ID = 'mui_measurement_span';
-
-/**
- *
- * @param name CSS property name
- * @param value
- * @returns add 'px' for distance properties
- */
-function autoCompleteStyle(name, value) {
-  if (STYLE_LIST.indexOf(name) >= 0 && value === +value) {
-    return `${value}px`;
-  }
-  return value;
-}
-
-/**
- *
- * @param text camelcase css property
- * @returns css property
- */
-function camelToMiddleLine(text) {
-  const strs = text.split('');
-  const formatStrs = strs.reduce((result, entry) => {
-    if (entry === entry.toUpperCase()) {
-      return [...result, '-', entry.toLowerCase()];
-    }
-    return [...result, entry];
-  }, []);
-  return formatStrs.join('');
-}
-
-/**
- *
- * @param style React style object
- * @returns CSS styling string
- */
-export const getStyleString = style => Object.keys(style).sort().reduce((result, s) => `${result}${camelToMiddleLine(s)}:${autoCompleteStyle(s, style[s])};`, '');
-let domCleanTimeout;
-
-/**
- *
- * @param text The string to estimate
- * @param style The style applied
- * @returns width and height of the text
- */
-export const getStringSize = (text, style = {}) => {
-  if (text === undefined || text === null || isSsr()) {
-    return {
-      width: 0,
-      height: 0
-    };
-  }
-  const str = `${text}`;
-  const styleString = getStyleString(style);
-  const cacheKey = `${str}-${styleString}`;
-  if (stringCache.widthCache[cacheKey]) {
-    return stringCache.widthCache[cacheKey];
-  }
-  try {
-    let measurementSpan = document.getElementById(MEASUREMENT_SPAN_ID);
-    if (measurementSpan === null) {
-      measurementSpan = document.createElement('span');
-      measurementSpan.setAttribute('id', MEASUREMENT_SPAN_ID);
-      measurementSpan.setAttribute('aria-hidden', 'true');
-      document.body.appendChild(measurementSpan);
-    }
-    // Need to use CSS Object Model (CSSOM) to be able to comply with Content Security Policy (CSP)
-    // https://en.wikipedia.org/wiki/Content_Security_Policy
-    const measurementSpanStyle = _extends({}, SPAN_STYLE, style);
-    Object.keys(measurementSpanStyle).map(styleKey => {
-      measurementSpan.style[camelToMiddleLine(styleKey)] = autoCompleteStyle(styleKey, measurementSpanStyle[styleKey]);
-      return styleKey;
-    });
-    measurementSpan.textContent = str;
-    const rect = measurementSpan.getBoundingClientRect();
-    const result = {
-      width: rect.width,
-      height: rect.height
-    };
-    stringCache.widthCache[cacheKey] = result;
-    if (stringCache.cacheCount + 1 > MAX_CACHE_NUM) {
-      stringCache.cacheCount = 0;
-      stringCache.widthCache = {};
-    } else {
-      stringCache.cacheCount += 1;
-    }
-    if (domCleanTimeout) {
-      clearTimeout(domCleanTimeout);
-    }
-    domCleanTimeout = setTimeout(() => {
-      // Limit node cleaning to once per render cycle
-      measurementSpan.textContent = '';
-    }, 0);
-    return result;
-  } catch {
-    return {
-      width: 0,
-      height: 0
-    };
-  }
-};
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export function unstable_cleanupDOM() {
-  // const measurementSpan = document.getElementById(MEASUREMENT_SPAN_ID);
-  // measurementSpan?.remove();
-}