@mui/x-charts 9.11.1 → 9.13.0

package/constants/index.d.ts

@@ -10,4 +10,6 @@ export declare const DEFAULT_MARGINS: {
 };
 export declare const DEFAULT_AXIS_SIZE_WIDTH = 45;
 export declare const DEFAULT_AXIS_SIZE_HEIGHT = 25;
-export declare const AXIS_LABEL_DEFAULT_HEIGHT = 20;
+export declare const AXIS_LABEL_DEFAULT_HEIGHT = 20;
+/** Font size the axes render their tick labels with, unless `tickLabelStyle` overrides it. */
+export declare const DEFAULT_TICK_LABEL_FONT_SIZE = 12;

package/constants/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DEFAULT_Y_AXIS_KEY = exports.DEFAULT_X_AXIS_KEY = exports.DEFAULT_ROTATION_AXIS_KEY = exports.DEFAULT_RADIUS_AXIS_KEY = exports.DEFAULT_MARGINS = exports.DEFAULT_AXIS_SIZE_WIDTH = exports.DEFAULT_AXIS_SIZE_HEIGHT = exports.AXIS_LABEL_DEFAULT_HEIGHT = void 0;
+exports.DEFAULT_Y_AXIS_KEY = exports.DEFAULT_X_AXIS_KEY = exports.DEFAULT_TICK_LABEL_FONT_SIZE = exports.DEFAULT_ROTATION_AXIS_KEY = exports.DEFAULT_RADIUS_AXIS_KEY = exports.DEFAULT_MARGINS = exports.DEFAULT_AXIS_SIZE_WIDTH = exports.DEFAULT_AXIS_SIZE_HEIGHT = exports.AXIS_LABEL_DEFAULT_HEIGHT = void 0;
 const DEFAULT_X_AXIS_KEY = exports.DEFAULT_X_AXIS_KEY = 'DEFAULT_X_AXIS_KEY';
 const DEFAULT_Y_AXIS_KEY = exports.DEFAULT_Y_AXIS_KEY = 'DEFAULT_Y_AXIS_KEY';
 const DEFAULT_ROTATION_AXIS_KEY = exports.DEFAULT_ROTATION_AXIS_KEY = 'DEFAULT_ROTATION_AXIS_KEY';
@@ -16,4 +16,7 @@ const DEFAULT_MARGINS = exports.DEFAULT_MARGINS = {
 };
 const DEFAULT_AXIS_SIZE_WIDTH = exports.DEFAULT_AXIS_SIZE_WIDTH = 45;
 const DEFAULT_AXIS_SIZE_HEIGHT = exports.DEFAULT_AXIS_SIZE_HEIGHT = 25;
-const AXIS_LABEL_DEFAULT_HEIGHT = exports.AXIS_LABEL_DEFAULT_HEIGHT = 20;
+const AXIS_LABEL_DEFAULT_HEIGHT = exports.AXIS_LABEL_DEFAULT_HEIGHT = 20;
+
+/** Font size the axes render their tick labels with, unless `tickLabelStyle` overrides it. */
+const DEFAULT_TICK_LABEL_FONT_SIZE = exports.DEFAULT_TICK_LABEL_FONT_SIZE = 12;

package/constants/index.mjs

@@ -10,4 +10,7 @@ export const DEFAULT_MARGINS = {
 };
 export const DEFAULT_AXIS_SIZE_WIDTH = 45;
 export const DEFAULT_AXIS_SIZE_HEIGHT = 25;
-export const AXIS_LABEL_DEFAULT_HEIGHT = 20;
+export const AXIS_LABEL_DEFAULT_HEIGHT = 20;
+
+/** Font size the axes render their tick labels with, unless `tickLabelStyle` overrides it. */
+export const DEFAULT_TICK_LABEL_FONT_SIZE = 12;

package/hooks/animation/index.d.mts

@@ -3,5 +3,6 @@ export * from "./useAnimateArea.mjs";
 export * from "./useAnimateBar.mjs";
 export * from "./useAnimateBarLabel.mjs";
 export * from "./useAnimateLine.mjs";
+export * from "./useAnimateMark.mjs";
 export * from "./useAnimatePieArc.mjs";
 export * from "./useAnimatePieArcLabel.mjs";

package/hooks/animation/index.d.ts

@@ -3,5 +3,6 @@ export * from "./useAnimateArea.js";
 export * from "./useAnimateBar.js";
 export * from "./useAnimateBarLabel.js";
 export * from "./useAnimateLine.js";
+export * from "./useAnimateMark.js";
 export * from "./useAnimatePieArc.js";
 export * from "./useAnimatePieArcLabel.js";

package/hooks/animation/index.js

@@ -58,6 +58,17 @@ Object.keys(_useAnimateLine).forEach(function (key) {
     }
   });
 });
+var _useAnimateMark = require("./useAnimateMark");
+Object.keys(_useAnimateMark).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useAnimateMark[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useAnimateMark[key];
+    }
+  });
+});
 var _useAnimatePieArc = require("./useAnimatePieArc");
 Object.keys(_useAnimatePieArc).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/hooks/animation/index.mjs

@@ -3,5 +3,6 @@ export * from "./useAnimateArea.mjs";
 export * from "./useAnimateBar.mjs";
 export * from "./useAnimateBarLabel.mjs";
 export * from "./useAnimateLine.mjs";
+export * from "./useAnimateMark.mjs";
 export * from "./useAnimatePieArc.mjs";
 export * from "./useAnimatePieArcLabel.mjs";

package/hooks/animation/useAnimateMark.d.mts

@@ -0,0 +1,25 @@
+import type * as React from 'react';
+type UseAnimateMarkParams = {
+  x: number;
+  y: number;
+  skipAnimation?: boolean;
+  ref?: React.Ref<SVGPathElement>;
+};
+type UseAnimateMarkReturn = {
+  ref: React.Ref<SVGPathElement>;
+  transform: string;
+};
+/**
+ * Animates the position of a line chart mark.
+ *
+ * The mark is placed with the SVG `transform` attribute, in `viewBox` units, because Safari resolves CSS pixel
+ * transforms of SVG children against the viewport instead of the scaled `viewBox`, which moves the mark away from the
+ * line under browser zoom. See https://github.com/mui/mui-x/issues/23377.
+ *
+ * Safari cannot transition the `transform` attribute with CSS, so the animation runs in JavaScript.
+ *
+ * The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+ * pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+ */
+export declare function useAnimateMark(props: UseAnimateMarkParams): UseAnimateMarkReturn;
+export {};

package/hooks/animation/useAnimateMark.d.ts

@@ -0,0 +1,25 @@
+import type * as React from 'react';
+type UseAnimateMarkParams = {
+  x: number;
+  y: number;
+  skipAnimation?: boolean;
+  ref?: React.Ref<SVGPathElement>;
+};
+type UseAnimateMarkReturn = {
+  ref: React.Ref<SVGPathElement>;
+  transform: string;
+};
+/**
+ * Animates the position of a line chart mark.
+ *
+ * The mark is placed with the SVG `transform` attribute, in `viewBox` units, because Safari resolves CSS pixel
+ * transforms of SVG children against the viewport instead of the scaled `viewBox`, which moves the mark away from the
+ * line under browser zoom. See https://github.com/mui/mui-x/issues/23377.
+ *
+ * Safari cannot transition the `transform` attribute with CSS, so the animation runs in JavaScript.
+ *
+ * The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+ * pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+ */
+export declare function useAnimateMark(props: UseAnimateMarkParams): UseAnimateMarkReturn;
+export {};

package/hooks/animation/useAnimateMark.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAnimateMark = useAnimateMark;
+var _d3Interpolate = require("@mui/x-charts-vendor/d3-interpolate");
+var _useAnimate = require("./useAnimate");
+function markPropsInterpolator(from, to) {
+  const interpolateX = (0, _d3Interpolate.interpolateNumber)(from.x, to.x);
+  const interpolateY = (0, _d3Interpolate.interpolateNumber)(from.y, to.y);
+  return t => ({
+    x: interpolateX(t),
+    y: interpolateY(t)
+  });
+}
+
+/**
+ * Animates the position of a line chart mark.
+ *
+ * The mark is placed with the SVG `transform` attribute, in `viewBox` units, because Safari resolves CSS pixel
+ * transforms of SVG children against the viewport instead of the scaled `viewBox`, which moves the mark away from the
+ * line under browser zoom. See https://github.com/mui/mui-x/issues/23377.
+ *
+ * Safari cannot transition the `transform` attribute with CSS, so the animation runs in JavaScript.
+ *
+ * The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+ * pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+ */
+function useAnimateMark(props) {
+  return (0, _useAnimate.useAnimate)({
+    x: props.x,
+    y: props.y
+  }, {
+    createInterpolator: markPropsInterpolator,
+    transformProps: p => ({
+      transform: `translate(${p.x} ${p.y})`
+    }),
+    applyProps(element, animatedProps) {
+      element.setAttribute('transform', animatedProps.transform);
+    },
+    skip: props.skipAnimation,
+    ref: props.ref
+  });
+}

package/hooks/animation/useAnimateMark.mjs

@@ -0,0 +1,39 @@
+import { interpolateNumber } from '@mui/x-charts-vendor/d3-interpolate';
+import { useAnimate } from "./useAnimate.mjs";
+function markPropsInterpolator(from, to) {
+  const interpolateX = interpolateNumber(from.x, to.x);
+  const interpolateY = interpolateNumber(from.y, to.y);
+  return t => ({
+    x: interpolateX(t),
+    y: interpolateY(t)
+  });
+}
+
+/**
+ * Animates the position of a line chart mark.
+ *
+ * The mark is placed with the SVG `transform` attribute, in `viewBox` units, because Safari resolves CSS pixel
+ * transforms of SVG children against the viewport instead of the scaled `viewBox`, which moves the mark away from the
+ * line under browser zoom. See https://github.com/mui/mui-x/issues/23377.
+ *
+ * Safari cannot transition the `transform` attribute with CSS, so the animation runs in JavaScript.
+ *
+ * The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+ * pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+ */
+export function useAnimateMark(props) {
+  return useAnimate({
+    x: props.x,
+    y: props.y
+  }, {
+    createInterpolator: markPropsInterpolator,
+    transformProps: p => ({
+      transform: `translate(${p.x} ${p.y})`
+    }),
+    applyProps(element, animatedProps) {
+      element.setAttribute('transform', animatedProps.transform);
+    },
+    skip: props.skipAnimation,
+    ref: props.ref
+  });
+}

package/hooks/useInteractionItemProps.js

@@ -24,11 +24,13 @@ const useInteractionItemProps = data => {
   const onPointerEnter = (0, _useEventCallback.default)(() => {
     interactionActive.current = true;
     instance.setLastUpdateSource('pointer');
+    instance.setHoveredItem(data);
     instance.setTooltipItem(data);
     instance.setHighlight(data);
   });
   const onPointerLeave = (0, _useEventCallback.default)(() => {
     interactionActive.current = false;
+    instance.clearHoveredItem(data);
     instance.removeTooltipItem(data);
     instance.clearHighlight();
   });
@@ -53,6 +55,7 @@ function getInteractionItemProps(instance, item) {
       return;
     }
     instance.setLastUpdateSource('pointer');
+    instance.setHoveredItem(item);
     instance.setTooltipItem(item);
     instance.setHighlight(item);
   }
@@ -60,6 +63,7 @@ function getInteractionItemProps(instance, item) {
     if (!item) {
       return;
     }
+    instance.clearHoveredItem(item);
     instance.removeTooltipItem(item);
     instance.clearHighlight();
   }

package/hooks/useInteractionItemProps.mjs

@@ -16,11 +16,13 @@ export const useInteractionItemProps = data => {
   const onPointerEnter = useEventCallback(() => {
     interactionActive.current = true;
     instance.setLastUpdateSource('pointer');
+    instance.setHoveredItem(data);
     instance.setTooltipItem(data);
     instance.setHighlight(data);
   });
   const onPointerLeave = useEventCallback(() => {
     interactionActive.current = false;
+    instance.clearHoveredItem(data);
     instance.removeTooltipItem(data);
     instance.clearHighlight();
   });
@@ -44,6 +46,7 @@ export function getInteractionItemProps(instance, item) {
       return;
     }
     instance.setLastUpdateSource('pointer');
+    instance.setHoveredItem(item);
     instance.setTooltipItem(item);
     instance.setHighlight(item);
   }
@@ -51,6 +54,7 @@ export function getInteractionItemProps(instance, item) {
     if (!item) {
       return;
     }
+    instance.clearHoveredItem(item);
     instance.removeTooltipItem(item);
     instance.clearHighlight();
   }

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v9.11.1
+ * @mui/x-charts v9.13.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/index.mjs

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v9.11.1
+ * @mui/x-charts v9.13.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/components/ChartsAccessibilityProxy/ChartsAccessibilityProxy.js

@@ -1,13 +1,16 @@
 "use strict";
 'use client';
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartsAccessibilityProxy = ChartsAccessibilityProxy;
 var React = _interopRequireWildcard(require("react"));
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _useChartId = require("../../../hooks/useChartId");
+var _ChartsProvider = require("../../../context/ChartsProvider");
 var _useDescription = require("./useDescription");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
@@ -35,9 +38,13 @@ var _jsxRuntime = require("react/jsx-runtime");
 function ChartsAccessibilityProxy() {
   const message = (0, _useDescription.useDescription)();
   const chartId = (0, _useChartId.useChartId)();
+  const {
+    instance
+  } = (0, _ChartsProvider.useChartsContext)();
   const currentFormatRef = React.useRef(null);
   const currentIndexRef = React.useRef(0);
   const containerRef = React.useRef(null);
+  const handleRef = (0, _useForkRef.default)(containerRef, instance.chartsAccessibilityProxyRef);
   React.useEffect(() => {
     const container = containerRef.current;
     if (!container) {
@@ -93,9 +100,12 @@ function ChartsAccessibilityProxy() {
     }
   }, [message, chartId]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    role: "none",
-    tabIndex: message ? undefined : 0,
-    ref: containerRef,
+    role: "none"
+    // Stays focusable once an announcer child owns the tab stop, otherwise the browser would
+    // blur the root mid hand-off and the chart would look like it lost the focus.
+    ,
+    tabIndex: message ? -1 : 0,
+    ref: handleRef,
     style: fullSizeLayerStyle
   });
 }

package/internals/components/ChartsAccessibilityProxy/ChartsAccessibilityProxy.mjs

@@ -1,7 +1,9 @@
 'use client';
 
 import * as React from 'react';
+import useForkRef from '@mui/utils/useForkRef';
 import { useChartId } from "../../../hooks/useChartId.mjs";
+import { useChartsContext } from "../../../context/ChartsProvider/index.mjs";
 import { useDescription } from "./useDescription.mjs";
 
 /**
@@ -31,9 +33,13 @@ const fullSizeLayerStyle = {
 export function ChartsAccessibilityProxy() {
   const message = useDescription();
   const chartId = useChartId();
+  const {
+    instance
+  } = useChartsContext();
   const currentFormatRef = React.useRef(null);
   const currentIndexRef = React.useRef(0);
   const containerRef = React.useRef(null);
+  const handleRef = useForkRef(containerRef, instance.chartsAccessibilityProxyRef);
   React.useEffect(() => {
     const container = containerRef.current;
     if (!container) {
@@ -89,9 +95,12 @@ export function ChartsAccessibilityProxy() {
     }
   }, [message, chartId]);
   return /*#__PURE__*/_jsx("div", {
-    role: "none",
-    tabIndex: message ? undefined : 0,
-    ref: containerRef,
+    role: "none"
+    // Stays focusable once an announcer child owns the tab stop, otherwise the browser would
+    // blur the root mid hand-off and the chart would look like it lost the focus.
+    ,
+    tabIndex: message ? -1 : 0,
+    ref: handleRef,
     style: fullSizeLayerStyle
   });
 }

package/internals/components/ChartsAccessibilityProxy/focusAccessibilityProxy.d.mts

@@ -0,0 +1,8 @@
+/**
+ * Moves the DOM focus to the chart tab stop.
+ * The proxy root is only tabbable while there is no description, otherwise one of the announcer
+ * children holds the tab stop.
+ * @param {HTMLDivElement | null} root The accessibility proxy root.
+ * @returns {boolean} `true` when an element was focused.
+ */
+export declare function focusAccessibilityProxy(root: HTMLDivElement | null): boolean;

package/internals/components/ChartsAccessibilityProxy/focusAccessibilityProxy.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Moves the DOM focus to the chart tab stop.
+ * The proxy root is only tabbable while there is no description, otherwise one of the announcer
+ * children holds the tab stop.
+ * @param {HTMLDivElement | null} root The accessibility proxy root.
+ * @returns {boolean} `true` when an element was focused.
+ */
+export declare function focusAccessibilityProxy(root: HTMLDivElement | null): boolean;

package/internals/components/ChartsAccessibilityProxy/focusAccessibilityProxy.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.focusAccessibilityProxy = focusAccessibilityProxy;
+/**
+ * Moves the DOM focus to the chart tab stop.
+ * The proxy root is only tabbable while there is no description, otherwise one of the announcer
+ * children holds the tab stop.
+ * @param {HTMLDivElement | null} root The accessibility proxy root.
+ * @returns {boolean} `true` when an element was focused.
+ */
+function focusAccessibilityProxy(root) {
+  if (!root) {
+    return false;
+  }
+  const target = root.querySelector('[tabindex="0"]') ?? (root.tabIndex >= 0 ? root : null);
+
+  // The proxy covers the whole chart, focusing it would scroll long pages.
+  target?.focus({
+    preventScroll: true
+  });
+  return target !== null;
+}

package/internals/components/ChartsAccessibilityProxy/focusAccessibilityProxy.mjs

@@ -0,0 +1,19 @@
+/**
+ * Moves the DOM focus to the chart tab stop.
+ * The proxy root is only tabbable while there is no description, otherwise one of the announcer
+ * children holds the tab stop.
+ * @param {HTMLDivElement | null} root The accessibility proxy root.
+ * @returns {boolean} `true` when an element was focused.
+ */
+export function focusAccessibilityProxy(root) {
+  if (!root) {
+    return false;
+  }
+  const target = root.querySelector('[tabindex="0"]') ?? (root.tabIndex >= 0 ? root : null);
+
+  // The proxy covers the whole chart, focusing it would scroll long pages.
+  target?.focus({
+    preventScroll: true
+  });
+  return target !== null;
+}

package/internals/components/ChartsAccessibilityProxy/index.d.mts

@@ -1 +1,2 @@
-export * from "./ChartsAccessibilityProxy.mjs";
+export * from "./ChartsAccessibilityProxy.mjs";
+export * from "./focusAccessibilityProxy.mjs";

package/internals/components/ChartsAccessibilityProxy/index.d.ts

@@ -1 +1,2 @@
-export * from "./ChartsAccessibilityProxy.js";
+export * from "./ChartsAccessibilityProxy.js";
+export * from "./focusAccessibilityProxy.js";

package/internals/components/ChartsAccessibilityProxy/index.js

@@ -13,4 +13,15 @@ Object.keys(_ChartsAccessibilityProxy).forEach(function (key) {
       return _ChartsAccessibilityProxy[key];
     }
   });
+});
+var _focusAccessibilityProxy = require("./focusAccessibilityProxy");
+Object.keys(_focusAccessibilityProxy).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _focusAccessibilityProxy[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _focusAccessibilityProxy[key];
+    }
+  });
 });

package/internals/components/ChartsAccessibilityProxy/index.mjs

@@ -1 +1,2 @@
-export * from "./ChartsAccessibilityProxy.mjs";
+export * from "./ChartsAccessibilityProxy.mjs";
+export * from "./focusAccessibilityProxy.mjs";

package/internals/domUtils.js

@@ -1,6 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -8,7 +7,6 @@ exports.batchMeasureStrings = batchMeasureStrings;
 exports.clearStringMeasurementCache = clearStringMeasurementCache;
 exports.getStringSize = void 0;
 exports.getStyleString = getStyleString;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 // DOM utils adapted from
 // https://github.com/recharts/recharts/blob/master/src/util/DOMUtils.ts
 
@@ -64,6 +62,17 @@ function getStyleString(style) {
   return result;
 }
 
+/**
+ * Applies a style to a measurement element.
+ * Uses the CSS Object Model (CSSOM) to comply with Content Security Policy (CSP).
+ * https://en.wikipedia.org/wiki/Content_Security_Policy
+ */
+function applyStyle(element, style) {
+  for (const styleKey of Object.keys(style)) {
+    element.style[camelCaseToDashCase(styleKey)] = convertPixelValue(styleKey, style[styleKey]);
+  }
+}
+
 /**
  *
  * @param text The string to estimate
@@ -87,13 +96,7 @@ const getStringSize = (text, style = {}) => {
   try {
     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
-    Object.keys(style).map(styleKey => {
-      measurementElem.style[camelCaseToDashCase(styleKey)] = convertPixelValue(styleKey, style[styleKey]);
-      return styleKey;
-    });
+    applyStyle(measurementElem, style);
     measurementElem.textContent = str;
     measurementSpanContainer.replaceChildren(measurementElem);
     const result = measureSVGTextElement(measurementElem);
@@ -134,16 +137,14 @@ function batchMeasureStrings(texts, style = {}) {
     }
   }
   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 = (0, _extends2.default)({}, style);
-  Object.keys(measurementSpanStyle).map(styleKey => {
-    measurementContainer.style[camelCaseToDashCase(styleKey)] = convertPixelValue(styleKey, measurementSpanStyle[styleKey]);
-    return styleKey;
-  });
+
+  // The style goes on each text element rather than on the shared container. Styling the container
+  // leaks into every later measurement, because a call that omits one of those properties keeps the
+  // previous call's value and measures the wrong font.
   const measurementElements = [];
   for (const string of textToMeasure) {
     const measurementElem = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+    applyStyle(measurementElem, style);
     measurementElem.textContent = `${string}`;
     measurementElements.push(measurementElem);
   }

package/internals/domUtils.mjs

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 // DOM utils adapted from
 // https://github.com/recharts/recharts/blob/master/src/util/DOMUtils.ts
 
@@ -54,6 +53,17 @@ export function getStyleString(style) {
   return result;
 }
 
+/**
+ * Applies a style to a measurement element.
+ * Uses the CSS Object Model (CSSOM) to comply with Content Security Policy (CSP).
+ * https://en.wikipedia.org/wiki/Content_Security_Policy
+ */
+function applyStyle(element, style) {
+  for (const styleKey of Object.keys(style)) {
+    element.style[camelCaseToDashCase(styleKey)] = convertPixelValue(styleKey, style[styleKey]);
+  }
+}
+
 /**
  *
  * @param text The string to estimate
@@ -77,13 +87,7 @@ export const getStringSize = (text, style = {}) => {
   try {
     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
-    Object.keys(style).map(styleKey => {
-      measurementElem.style[camelCaseToDashCase(styleKey)] = convertPixelValue(styleKey, style[styleKey]);
-      return styleKey;
-    });
+    applyStyle(measurementElem, style);
     measurementElem.textContent = str;
     measurementSpanContainer.replaceChildren(measurementElem);
     const result = measureSVGTextElement(measurementElem);
@@ -123,16 +127,14 @@ export function batchMeasureStrings(texts, style = {}) {
     }
   }
   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;
-  });
+
+  // The style goes on each text element rather than on the shared container. Styling the container
+  // leaks into every later measurement, because a call that omits one of those properties keeps the
+  // previous call's value and measures the wrong font.
   const measurementElements = [];
   for (const string of textToMeasure) {
     const measurementElem = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+    applyStyle(measurementElem, style);
     measurementElem.textContent = `${string}`;
     measurementElements.push(measurementElem);
   }

package/internals/ellipsize.d.mts

@@ -1,3 +1,4 @@
+import type { ChartsTextAnchor, ChartsTextBaseline } from "./getWordsByLines.mjs";
 interface EllipsizeConfig {
   width: number;
   height: number;
@@ -9,6 +10,35 @@ interface EllipsizeConfig {
   };
 }
 export declare function doesTextFitInRect(text: string, config: EllipsizeConfig): boolean;
+export interface RotatedTextBoundsConfig {
+  /** Angle, in degrees, in which the text is displayed. */
+  angle: number;
+  textAnchor?: ChartsTextAnchor;
+  dominantBaseline?: ChartsTextBaseline;
+  isRtl?: boolean;
+}
+export interface RotatedTextBounds {
+  /** Width of the text bounding box once rotated. */
+  width: number;
+  /** How far the text extends above its anchor point. */
+  above: number;
+  /** How far the text extends below its anchor point. */
+  below: number;
+}
+/**
+ * Returns the size of a rotated text, and how far it extends on each side of its anchor point.
+ *
+ * Which side of the anchor the text is drawn on depends on both the text anchoring and the rotation,
+ * so `above` and `below` are not necessarily equal. Either of them is negative when the whole text
+ * sits on the other side of the anchor point.
+ *
+ * @param textSize The size of the text before rotation.
+ * @param config How the text is anchored and rotated.
+ */
+export declare function getRotatedTextBounds(textSize: {
+  width: number;
+  height: number;
+}, config: RotatedTextBoundsConfig): RotatedTextBounds;
 /** This function finds the best place to clip the text to add an ellipsis.
  *  This function assumes that the {@link doesTextFit} never returns true for longer text after returning false for
  *  shorter text.