@mui/x-charts 8.14.1 → 8.15.0

package/esm/ChartsReferenceLine/common.d.ts

@@ -1,6 +1,8 @@
 import { ChartsReferenceLineClasses } from "./chartsReferenceLineClasses.js";
 import { ChartsTextStyle } from "../ChartsText/index.js";
 import { AxisId } from "../models/axis.js";
+export declare const DEFAULT_SPACING = 5;
+export declare const DEFAULT_SPACING_MIDDLE_OTHER_AXIS = 0;
 export type CommonChartsReferenceLineProps = {
   /**
    * The alignment if the label is in the chart drawing area.
@@ -14,7 +16,7 @@ export type CommonChartsReferenceLineProps = {
   /**
    * Additional space around the label in px.
    * Can be a number or an object `{ x, y }` to distinguish space with the reference line and space with axes.
-   * @default 5
+   * @default { x: 0, y: 5 } on a horizontal line and { x: 5, y: 0 } on a vertical line.
    */
   spacing?: number | {
     x?: number;

package/esm/ChartsReferenceLine/common.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { styled } from '@mui/material/styles';
 import { referenceLineClasses } from "./chartsReferenceLineClasses.js";
+export const DEFAULT_SPACING = 5;
+export const DEFAULT_SPACING_MIDDLE_OTHER_AXIS = 0;
 export const ReferenceLineRoot = styled('g')(({
   theme
 }) => ({

package/esm/ChartsTooltip/ChartsTooltipContainer.js

@@ -20,8 +20,10 @@ import { selectorChartsInteractionAxisTooltip } from "../internals/plugins/featu
 import { selectorChartsInteractionPolarAxisTooltip } from "../internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors.js";
 import { useAxisSystem } from "../hooks/useAxisSystem.js";
 import { useSvgRef } from "../hooks/index.js";
+import { selectorBrushShouldPreventTooltip } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
+import { createSelector } from "../internals/plugins/utils/selectors.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const noAxis = () => false;
+const selectorReturnFalse = () => false;
 const ChartsTooltipRoot = styled(Popper, {
   name: 'MuiChartsTooltip',
   slot: 'Root'
@@ -31,6 +33,21 @@ const ChartsTooltipRoot = styled(Popper, {
   pointerEvents: 'none',
   zIndex: theme.zIndex.modal
 }));
+const selectorSelectIsOpenSelector = createSelector([selectorBrushShouldPreventTooltip, (_, trigger) => trigger, (_, __, axisSystem) => axisSystem], (shouldPreventBecauseOfBrush, trigger, axisSystem) => {
+  if (shouldPreventBecauseOfBrush) {
+    return selectorReturnFalse;
+  }
+  if (trigger === 'item') {
+    return selectorChartsInteractionItemIsDefined;
+  }
+  if (axisSystem === 'polar') {
+    return selectorChartsInteractionPolarAxisTooltip;
+  }
+  if (axisSystem === 'cartesian') {
+    return selectorChartsInteractionAxisTooltip;
+  }
+  return selectorReturnFalse;
+});
 
 /**
  * Demos:
@@ -63,7 +80,8 @@ function ChartsTooltipContainer(inProps) {
   }));
   const axisSystem = useAxisSystem();
   const store = useStore();
-  const isOpen = useSelector(store, trigger === 'axis' ? axisSystem === 'polar' && selectorChartsInteractionPolarAxisTooltip || axisSystem === 'cartesian' && selectorChartsInteractionAxisTooltip || noAxis : selectorChartsInteractionItemIsDefined);
+  const isOpenSelector = useSelector(store, selectorSelectIsOpenSelector, [trigger, axisSystem]);
+  const isOpen = useSelector(store, isOpenSelector);
   React.useEffect(() => {
     const element = svgRef.current;
     if (element === null) {

package/esm/ChartsXAxis/getVisibleLabels.js

@@ -1,7 +1,7 @@
 'use client';
 
 import { getMinXTranslation } from "../internals/geometry.js";
-import { getWordsByLines } from "../internals/getWordsByLines.js";
+import { batchMeasureStrings } from "../internals/domUtils.js";
 
 /* Returns a set of indices of the tick labels that should be visible.  */
 export function getVisibleLabels(xTicks, {
@@ -12,23 +12,6 @@ export function getVisibleLabels(xTicks, {
   isMounted,
   isXInside
 }) {
-  const getTickLabelSize = tick => {
-    if (!isMounted || tick.formattedValue === undefined) {
-      return {
-        width: 0,
-        height: 0
-      };
-    }
-    const tickSizes = getWordsByLines({
-      style,
-      needsComputation: true,
-      text: tick.formattedValue
-    });
-    return {
-      width: Math.max(...tickSizes.map(size => size.width)),
-      height: Math.max(tickSizes.length * tickSizes[0].height)
-    };
-  };
   if (typeof tickLabelInterval === 'function') {
     return new Set(xTicks.filter((item, index) => tickLabelInterval(item.value, index)));
   }
@@ -36,7 +19,7 @@ export function getVisibleLabels(xTicks, {
   // Filter label to avoid overlap
   let previousTextLimit = 0;
   const direction = reverse ? -1 : 1;
-  return new Set(xTicks.filter((item, labelIndex) => {
+  const candidateTickLabels = xTicks.filter(item => {
     const {
       offset,
       labelOffset,
@@ -46,18 +29,25 @@ export function getVisibleLabels(xTicks, {
       return false;
     }
     const textPosition = offset + labelOffset;
+    return isXInside(textPosition);
+  });
+  const sizeMap = measureTickLabels(candidateTickLabels, style);
+  return new Set(candidateTickLabels.filter((item, labelIndex) => {
+    const {
+      offset,
+      labelOffset
+    } = item;
+    const textPosition = offset + labelOffset;
     if (labelIndex > 0 && direction * textPosition < direction * (previousTextLimit + tickLabelMinGap)) {
       return false;
     }
-    if (!isXInside(textPosition)) {
-      return false;
-    }
-
-    /* Measuring text width is expensive, so we need to delay it as much as possible to improve performance. */
     const {
       width,
       height
-    } = getTickLabelSize(item);
+    } = isMounted ? getTickLabelSize(sizeMap, item) : {
+      width: 0,
+      height: 0
+    };
     const distance = getMinXTranslation(width, height, style?.angle);
     const currentTextLimit = textPosition - direction * distance / 2;
     if (labelIndex > 0 && direction * currentTextLimit < direction * (previousTextLimit + tickLabelMinGap)) {
@@ -68,4 +58,34 @@ export function getVisibleLabels(xTicks, {
     previousTextLimit = textPosition + direction * distance / 2;
     return true;
   }));
+}
+function getTickLabelSize(sizeMap, tick) {
+  if (tick.formattedValue === undefined) {
+    return {
+      width: 0,
+      height: 0
+    };
+  }
+  let width = 0;
+  let height = 0;
+  for (const line of tick.formattedValue.split('\n')) {
+    const lineSize = sizeMap.get(line);
+    if (lineSize) {
+      width = Math.max(width, lineSize.width);
+      height += lineSize.height;
+    }
+  }
+  return {
+    width,
+    height
+  };
+}
+function measureTickLabels(ticks, style) {
+  const strings = new Set();
+  for (const tick of ticks) {
+    if (tick.formattedValue) {
+      tick.formattedValue.split('\n').forEach(line => strings.add(line));
+    }
+  }
+  return batchMeasureStrings(strings, style);
 }

package/esm/LineChart/LineChart.js

@@ -90,6 +90,14 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     x: PropTypes.oneOf(['band', 'line', 'none']),
     y: PropTypes.oneOf(['band', 'line', 'none'])
   }),
+  /**
+   * Configuration for the brush interaction.
+   */
+  brushConfig: PropTypes.shape({
+    enabled: PropTypes.bool,
+    preventHighlight: PropTypes.bool,
+    preventTooltip: PropTypes.bool
+  }),
   children: PropTypes.node,
   className: PropTypes.string,
   /**

package/esm/LineChart/LineChart.plugins.d.ts

@@ -4,5 +4,6 @@ import { UseChartInteractionSignature } from "../internals/plugins/featurePlugin
 import { UseChartHighlightSignature } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
 import { UseChartKeyboardNavigationSignature } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
 import { ConvertSignaturesIntoPlugins } from "../internals/plugins/models/helpers.js";
-export type LineChartPluginSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'line'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature];
+import { UseChartBrushSignature } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
+export type LineChartPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartCartesianAxisSignature<'line'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature];
 export declare const LINE_CHART_PLUGINS: ConvertSignaturesIntoPlugins<LineChartPluginSignatures>;

package/esm/LineChart/LineChart.plugins.js

@@ -3,4 +3,5 @@ import { useChartCartesianAxis } from "../internals/plugins/featurePlugins/useCh
 import { useChartInteraction } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 import { useChartHighlight } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
 import { useChartKeyboardNavigation } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
-export const LINE_CHART_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartKeyboardNavigation];
+import { useChartBrush } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
+export const LINE_CHART_PLUGINS = [useChartZAxis, useChartBrush, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartKeyboardNavigation];

package/esm/LineChart/useLineChartProps.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "onAreaClick", "onLineClick", "onMarkClick", "axisHighlight", "disableLineItemHighlight", "hideLegend", "grid", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "className", "showToolbar"];
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "onAreaClick", "onLineClick", "onMarkClick", "axisHighlight", "disableLineItemHighlight", "hideLegend", "grid", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "className", "showToolbar", "brushConfig"];
 import * as React from 'react';
 import useId from '@mui/utils/useId';
 import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
@@ -39,7 +39,8 @@ export const useLineChartProps = props => {
       loading,
       highlightedItem,
       onHighlightChange,
-      className
+      className,
+      brushConfig
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const id = useId();
@@ -68,6 +69,7 @@ export const useLineChartProps = props => {
     disableAxisListener: slotProps?.tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
     className,
     skipAnimation,
+    brushConfig,
     plugins: LINE_CHART_PLUGINS
   });
   const gridProps = {

package/esm/ScatterChart/ScatterChart.js

@@ -80,6 +80,14 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     x: PropTypes.oneOf(['band', 'line', 'none']),
     y: PropTypes.oneOf(['band', 'line', 'none'])
   }),
+  /**
+   * Configuration for the brush interaction.
+   */
+  brushConfig: PropTypes.shape({
+    enabled: PropTypes.bool,
+    preventHighlight: PropTypes.bool,
+    preventTooltip: PropTypes.bool
+  }),
   children: PropTypes.node,
   className: PropTypes.string,
   /**

package/esm/ScatterChart/ScatterChart.plugins.d.ts

@@ -5,5 +5,6 @@ import { UseChartHighlightSignature } from "../internals/plugins/featurePlugins/
 import { ConvertSignaturesIntoPlugins } from "../internals/plugins/models/helpers.js";
 import { UseChartClosestPointSignature } from "../internals/plugins/featurePlugins/useChartClosestPoint/index.js";
 import { UseChartKeyboardNavigationSignature } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
-export type ScatterChartPluginSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'scatter'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature];
+import { UseChartBrushSignature } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
+export type ScatterChartPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartCartesianAxisSignature<'scatter'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature];
 export declare const SCATTER_CHART_PLUGINS: ConvertSignaturesIntoPlugins<ScatterChartPluginSignatures>;

package/esm/ScatterChart/ScatterChart.plugins.js

@@ -4,4 +4,5 @@ import { useChartInteraction } from "../internals/plugins/featurePlugins/useChar
 import { useChartHighlight } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
 import { useChartClosestPoint } from "../internals/plugins/featurePlugins/useChartClosestPoint/index.js";
 import { useChartKeyboardNavigation } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
-export const SCATTER_CHART_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartClosestPoint, useChartKeyboardNavigation];
+import { useChartBrush } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
+export const SCATTER_CHART_PLUGINS = [useChartZAxis, useChartBrush, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartClosestPoint, useChartKeyboardNavigation];

package/esm/ScatterChart/useScatterChartProps.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["xAxis", "yAxis", "zAxis", "series", "axisHighlight", "voronoiMaxRadius", "disableVoronoi", "hideLegend", "width", "height", "margin", "colors", "sx", "grid", "onItemClick", "children", "slots", "slotProps", "loading", "highlightedItem", "onHighlightChange", "className", "showToolbar", "renderer"];
+const _excluded = ["xAxis", "yAxis", "zAxis", "series", "axisHighlight", "voronoiMaxRadius", "disableVoronoi", "hideLegend", "width", "height", "margin", "colors", "sx", "grid", "onItemClick", "children", "slots", "slotProps", "loading", "highlightedItem", "onHighlightChange", "className", "showToolbar", "renderer", "brushConfig"];
 import * as React from 'react';
 import { SCATTER_CHART_PLUGINS } from "./ScatterChart.plugins.js";
 /**
@@ -35,7 +35,8 @@ export const useScatterChartProps = props => {
       highlightedItem,
       onHighlightChange,
       className,
-      renderer
+      renderer,
+      brushConfig
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const seriesWithDefault = React.useMemo(() => series.map(s => _extends({
@@ -59,7 +60,8 @@ export const useScatterChartProps = props => {
     className,
     plugins: SCATTER_CHART_PLUGINS,
     slots,
-    slotProps
+    slotProps,
+    brushConfig
   });
   const chartsAxisProps = {
     slots,

package/esm/SparkLineChart/SparkLineChart.js

@@ -179,6 +179,14 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * @default 0
    */
   baseline: PropTypes.oneOfType([PropTypes.oneOf(['max', 'min']), PropTypes.number]),
+  /**
+   * Configuration for the brush interaction.
+   */
+  brushConfig: PropTypes.shape({
+    enabled: PropTypes.bool,
+    preventHighlight: PropTypes.bool,
+    preventTooltip: PropTypes.bool
+  }),
   children: PropTypes.node,
   className: PropTypes.string,
   /**

package/esm/hooks/index.d.ts

@@ -17,4 +17,5 @@ export * from "./useLegend.js";
 export { useChartGradientId, useChartGradientIdObjectBound } from "./useChartGradientId.js";
 export * from "./animation/index.js";
 export * from "./useChartRootRef.js";
-export * from "./useChartsLocalization.js";
+export * from "./useChartsLocalization.js";
+export * from "./useBrush.js";

package/esm/hooks/index.js

@@ -17,4 +17,5 @@ export * from "./useLegend.js";
 export { useChartGradientId, useChartGradientIdObjectBound } from "./useChartGradientId.js";
 export * from "./animation/index.js";
 export * from "./useChartRootRef.js";
-export * from "./useChartsLocalization.js";
+export * from "./useChartsLocalization.js";
+export * from "./useBrush.js";

package/esm/hooks/useBrush.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Get the current brush state.
+ *
+ * - `start` is the starting point of the brush selection.
+ * - `current` is the current point of the brush selection.
+ *
+ * @returns `{ start, current }` - The brush state.
+ */
+export declare function useBrush(): {
+  start: {
+    x: number;
+    y: number;
+  };
+  current: {
+    x: number;
+    y: number;
+  };
+} | null;

package/esm/hooks/useBrush.js

@@ -0,0 +1,16 @@
+import { selectorBrushState } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
+import { useSelector } from "../internals/store/useSelector.js";
+import { useStore } from "../internals/store/useStore.js";
+
+/**
+ * Get the current brush state.
+ *
+ * - `start` is the starting point of the brush selection.
+ * - `current` is the current point of the brush selection.
+ *
+ * @returns `{ start, current }` - The brush state.
+ */
+export function useBrush() {
+  const store = useStore();
+  return useSelector(store, selectorBrushState);
+}

package/esm/index.d.ts

@@ -28,4 +28,5 @@ export { ChartContainer } from "./ChartContainer/index.js";
 export type { ChartContainerProps } from "./ChartContainer/index.js";
 export * from "./ChartDataProvider/index.js";
 export * from "./Toolbar/index.js";
-export * from "./ChartsWrapper/index.js";
+export * from "./ChartsWrapper/index.js";
+export * from "./ChartsBrushOverlay/index.js";

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.14.1
+ * @mui/x-charts v8.15.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -35,6 +35,7 @@ export { ChartContainer } from "./ChartContainer/index.js";
 export * from "./ChartDataProvider/index.js";
 export * from "./Toolbar/index.js";
 export * from "./ChartsWrapper/index.js";
+export * from "./ChartsBrushOverlay/index.js";
 
 // Locales should be imported from `@mui/x-charts/locales`
 // export * from './locales';

package/esm/internals/domUtils.d.ts

@@ -1,10 +1,11 @@
-export declare const MEASUREMENT_SPAN_ID = "mui_measurement_span";
+import * as React from 'react';
+export declare function clearStringMeasurementCache(): void;
 /**
- *
+ * Converts a style object into a string to be used as a cache key
  * @param style React style object
  * @returns CSS styling string
  */
-export declare const getStyleString: (style: React.CSSProperties) => string;
+export declare function getStyleString(style: React.CSSProperties): string;
 /**
  *
  * @param text The string to estimate
@@ -14,4 +15,8 @@ export declare const getStyleString: (style: React.CSSProperties) => string;
 export declare const getStringSize: (text: string | number, style?: React.CSSProperties) => {
   width: number;
   height: number;
-};
+};
+export declare function batchMeasureStrings(texts: Iterable<string | number>, style?: React.CSSProperties): Map<string | number, {
+  width: number;
+  height: number;
+}>;

package/esm/internals/domUtils.js

@@ -1,60 +1,58 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-// DOM utils taken from
+// DOM utils adapted from
 // https://github.com/recharts/recharts/blob/master/src/util/DOMUtils.ts
 
 function isSsr() {
   return typeof window === 'undefined';
 }
 const stringCache = new Map();
+export function clearStringMeasurementCache() {
+  stringCache.clear();
+}
 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';
+const PIXEL_STYLES = new Set(['minWidth', 'maxWidth', 'width', 'minHeight', 'maxHeight', 'height', 'top', 'left', 'fontSize', 'padding', 'margin', 'paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom', 'marginLeft', 'marginRight', 'marginTop', 'marginBottom']);
 
 /**
- *
+ * Convert number value to pixel value for certain CSS properties
  * @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) {
+function convertPixelValue(name, value) {
+  if (PIXEL_STYLES.has(name) && value === +value) {
     return `${value}px`;
   }
   return value;
 }
 
 /**
- *
+ * Converts camelcase to dash-case
  * @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('');
+const AZ = /([A-Z])/g;
+function camelCaseToDashCase(text) {
+  return String(text).replace(AZ, match => `-${match.toLowerCase()}`);
 }
 
 /**
- *
+ * Converts a style object into a string to be used as a cache key
  * @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;
+export function getStyleString(style) {
+  let result = '';
+  for (const key in style) {
+    if (Object.hasOwn(style, key)) {
+      const k = key;
+      const value = style[k];
+      if (value === undefined) {
+        continue;
+      }
+      result += `${camelCaseToDashCase(k)}:${convertPixelValue(k, value)};`;
+    }
+  }
+  return result;
+}
 
 /**
  *
@@ -69,7 +67,7 @@ export const getStringSize = (text, style = {}) => {
       height: 0
     };
   }
-  const str = `${text}`;
+  const str = String(text);
   const styleString = getStyleString(style);
   const cacheKey = `${str}-${styleString}`;
   const size = stringCache.get(cacheKey);
@@ -77,22 +75,18 @@ export const getStringSize = (text, style = {}) => {
     return size;
   }
   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);
-    }
+    const measurementSpanContainer = getMeasurementContainer();
+    const measurementElem = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+
     // 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]);
+    Object.keys(style).map(styleKey => {
+      measurementElem.style[camelCaseToDashCase(styleKey)] = convertPixelValue(styleKey, style[styleKey]);
       return styleKey;
     });
-    measurementSpan.textContent = str;
-    const rect = measurementSpan.getBoundingClientRect();
+    measurementElem.textContent = str;
+    measurementSpanContainer.replaceChildren(measurementElem);
+    const rect = measurementElem.getBoundingClientRect();
     const result = {
       width: rect.width,
       height: rect.height
@@ -103,15 +97,7 @@ export const getStringSize = (text, style = {}) => {
     }
     if (process.env.NODE_ENV === 'test') {
       // In test environment, we clean the measurement span immediately
-      measurementSpan.textContent = '';
-    } else {
-      if (domCleanTimeout) {
-        clearTimeout(domCleanTimeout);
-      }
-      domCleanTimeout = setTimeout(() => {
-        // Limit node cleaning to once per render cycle
-        measurementSpan.textContent = '';
-      }, 0);
+      measurementSpanContainer.replaceChildren();
     }
     return result;
   } catch {
@@ -120,4 +106,81 @@ export const getStringSize = (text, style = {}) => {
       height: 0
     };
   }
-};
+};
+export function batchMeasureStrings(texts, style = {}) {
+  if (isSsr()) {
+    return new Map(Array.from(texts).map(text => [text, {
+      width: 0,
+      height: 0
+    }]));
+  }
+  const sizeMap = new Map();
+  const textToMeasure = [];
+  const styleString = getStyleString(style);
+  for (const text of texts) {
+    const cacheKey = `${text}-${styleString}`;
+    const size = stringCache.get(cacheKey);
+    if (size) {
+      sizeMap.set(text, size);
+    } else {
+      textToMeasure.push(text);
+    }
+  }
+  const measurementContainer = getMeasurementContainer();
+  // 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({}, style);
+  Object.keys(measurementSpanStyle).map(styleKey => {
+    measurementContainer.style[camelCaseToDashCase(styleKey)] = convertPixelValue(styleKey, measurementSpanStyle[styleKey]);
+    return styleKey;
+  });
+  const measurementElems = [];
+  for (const string of textToMeasure) {
+    const measurementElem = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+    measurementElem.textContent = `${string}`;
+    measurementElems.push(measurementElem);
+  }
+  measurementContainer.replaceChildren(...measurementElems);
+  for (let i = 0; i < textToMeasure.length; i += 1) {
+    const text = textToMeasure[i];
+    const measurementSpan = measurementContainer.children[i];
+    const rect = measurementSpan.getBoundingClientRect();
+    const result = {
+      width: rect.width,
+      height: rect.height
+    };
+    const cacheKey = `${text}-${styleString}`;
+    stringCache.set(cacheKey, result);
+    sizeMap.set(text, result);
+  }
+  if (stringCache.size + 1 > MAX_CACHE_NUM) {
+    stringCache.clear();
+  }
+  if (process.env.NODE_ENV === 'test') {
+    // In test environment, we clean the measurement span immediately
+    measurementContainer.replaceChildren();
+  }
+  return sizeMap;
+}
+let measurementContainer = null;
+
+/**
+ * Get (or create) a hidden span element to measure text size.
+ */
+function getMeasurementContainer() {
+  if (measurementContainer === null) {
+    measurementContainer = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    measurementContainer.setAttribute('aria-hidden', 'true');
+    measurementContainer.style.position = 'absolute';
+    measurementContainer.style.top = '-20000px';
+    measurementContainer.style.left = '0';
+    measurementContainer.style.padding = '0';
+    measurementContainer.style.margin = '0';
+    measurementContainer.style.border = 'none';
+    measurementContainer.style.pointerEvents = 'none';
+    measurementContainer.style.visibility = 'hidden';
+    measurementContainer.style.contain = 'strict';
+    document.body.appendChild(measurementContainer);
+  }
+  return measurementContainer;
+}