@automattic/charts 0.56.3 → 0.56.5

package/dist/{chunk-H34CJSR6.js → chunk-32ESS4MV.js}

@@ -70,15 +70,98 @@ import { useMemo as useMemo3 } from "react";
 
 // src/providers/chart-context/global-charts-provider.tsx
 import { hsl as d3Hsl2 } from "@visx/vendor/d3-color";
-import {
-  createContext,
-  useCallback as useCallback2,
-  useMemo,
-  useState,
-  useEffect,
-  useLayoutEffect,
-  useRef as useRef2
-} from "react";
+import { createContext, useCallback as useCallback2, useMemo, useState, useEffect as useEffect2, useLayoutEffect, useRef as useRef2 } from "react";
+
+// src/hooks/use-tooltip-portal-relocator.ts
+import { useEffect } from "react";
+
+// src/hooks/use-tooltip-portal-relocator.module.scss
+var use_tooltip_portal_relocator_module_default = {
+  "relocatedPortal": "a8ccharts-jCw5dQ"
+};
+
+// src/hooks/use-tooltip-portal-relocator.ts
+function isVisxPortalNode(node) {
+  return node instanceof HTMLDivElement && node.parentElement === document.body && !node.id && !node.className && node.querySelector(".visx-tooltip") !== null;
+}
+var patchRefCount = 0;
+var origRemoveChild = null;
+var patchedRemoveChild = null;
+var relocatedNodes = /* @__PURE__ */ new WeakSet();
+function installRemoveChildPatch() {
+  if (patchRefCount++ > 0) {
+    return;
+  }
+  origRemoveChild = document.body.removeChild;
+  patchedRemoveChild = function(child) {
+    if (relocatedNodes.has(child) && child.parentNode !== this) {
+      relocatedNodes.delete(child);
+      child.parentNode?.removeChild(child);
+      return child;
+    }
+    return origRemoveChild.call(this, child);
+  };
+  document.body.removeChild = patchedRemoveChild;
+}
+function uninstallRemoveChildPatch() {
+  if (--patchRefCount > 0) {
+    return;
+  }
+  if (document.body.removeChild === patchedRemoveChild) {
+    document.body.removeChild = origRemoveChild;
+  }
+  origRemoveChild = null;
+  patchedRemoveChild = null;
+}
+function useTooltipPortalRelocator(containerRef) {
+  useEffect(() => {
+    const container = containerRef?.current;
+    if (!container) {
+      return;
+    }
+    const instanceNodes = /* @__PURE__ */ new Set();
+    const relocateNode = (node) => {
+      if (!isVisxPortalNode(node)) {
+        return;
+      }
+      node.classList.add(use_tooltip_portal_relocator_module_default.relocatedPortal);
+      const { activeElement } = node.ownerDocument;
+      const focusedElement = activeElement instanceof HTMLElement && node.contains(activeElement) ? activeElement : null;
+      container.insertBefore(node, container.firstChild);
+      relocatedNodes.add(node);
+      instanceNodes.add(node);
+      if (focusedElement) {
+        focusedElement.focus();
+      }
+    };
+    installRemoveChildPatch();
+    for (const child of Array.from(document.body.children)) {
+      relocateNode(child);
+    }
+    const observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        for (const node of mutation.addedNodes) {
+          relocateNode(node);
+        }
+      }
+    });
+    observer.observe(document.body, { childList: true });
+    return () => {
+      observer.disconnect();
+      for (const node of instanceNodes) {
+        if (node instanceof HTMLElement) {
+          node.classList.remove(use_tooltip_portal_relocator_module_default.relocatedPortal);
+        }
+        if (node.parentNode === container) {
+          document.body.appendChild(node);
+        }
+        relocatedNodes.delete(node);
+      }
+      instanceNodes.clear();
+      uninstallRemoveChildPatch();
+    };
+  }, [containerRef]);
+}
 
 // src/providers/chart-context/private/get-chart-color.ts
 import { hsl as d3Hsl } from "@visx/vendor/d3-color";
@@ -229,14 +312,17 @@ var defaultTheme = {
 };
 
 // src/providers/chart-context/global-charts-provider.tsx
-import { jsx } from "react/jsx-runtime";
-var GlobalChartsContext = createContext(null);
-var GlobalChartsProvider = ({ children, theme }) => {
+import { jsx as _jsx } from "react/jsx-runtime";
+var GlobalChartsContext = /* @__PURE__ */ createContext(null);
+var GlobalChartsProvider = ({
+  children,
+  theme,
+  portalContainer
+}) => {
   const [charts, setCharts] = useState(() => /* @__PURE__ */ new Map());
-  const [hiddenSeries, setHiddenSeries] = useState(
-    () => /* @__PURE__ */ new Map()
-  );
+  const [hiddenSeries, setHiddenSeries] = useState(() => /* @__PURE__ */ new Map());
   const wrapperRef = useRef2(null);
+  useTooltipPortalRelocator(portalContainer ?? wrapperRef);
   const providerTheme = useMemo(() => {
     return theme ? mergeThemes(defaultTheme, theme) : defaultTheme;
   }, [theme]);
@@ -248,7 +334,9 @@ var GlobalChartsProvider = ({ children, theme }) => {
     maxHue: 0
   }));
   useLayoutEffect(() => {
-    const { colors } = providerTheme;
+    const {
+      colors
+    } = providerTheme;
     const resolvedColors = [];
     const hues = [];
     const existingHslColors = [];
@@ -269,11 +357,7 @@ var GlobalChartsProvider = ({ children, theme }) => {
             resolvedColors.push(colorValue);
             const hslColor = d3Hsl2(colorValue);
             if (!isNaN(hslColor.h)) {
-              const hslTuple = [
-                hslColor.h,
-                hslColor.s * 100,
-                hslColor.l * 100
-              ];
+              const hslTuple = [hslColor.h, hslColor.s * 100, hslColor.l * 100];
               hues.push(hslTuple[0]);
               existingHslColors.push(hslTuple);
               minHue = Math.min(minHue, hslTuple[0]);
@@ -291,10 +375,8 @@ var GlobalChartsProvider = ({ children, theme }) => {
       maxHue
     });
   }, [providerTheme]);
-  const [groupToColorMap, setGroupToColorMap] = useState(
-    () => /* @__PURE__ */ new Map()
-  );
-  useEffect(() => {
+  const [groupToColorMap, setGroupToColorMap] = useState(() => /* @__PURE__ */ new Map());
+  useEffect2(() => {
     setGroupToColorMap(/* @__PURE__ */ new Map());
   }, [providerTheme.colors]);
   const registerChart = useCallback2((id, data) => {
@@ -307,52 +389,48 @@ var GlobalChartsProvider = ({ children, theme }) => {
       return newMap;
     });
   }, []);
-  const getChartData = useCallback2(
-    (id) => {
-      return charts.get(id);
-    },
-    [charts]
-  );
-  const resolveColor = useCallback2(
-    ({
-      group,
-      index,
-      overrideColor
-    }) => {
-      if (overrideColor) {
-        return normalizeColorToHex(overrideColor, wrapperRef.current, resolveCssVariable);
-      }
-      if (group) {
-        const existing = groupToColorMap.get(group);
-        if (existing) {
-          return existing;
-        }
-        const assignedCount = groupToColorMap.size;
-        const color = getChartColor(assignedCount, colorCache);
-        groupToColorMap.set(group, color);
-        return color;
+  const getChartData = useCallback2((id) => {
+    return charts.get(id);
+  }, [charts]);
+  const resolveColor = useCallback2(({
+    group,
+    index,
+    overrideColor
+  }) => {
+    if (overrideColor) {
+      return normalizeColorToHex(overrideColor, wrapperRef.current, resolveCssVariable);
+    }
+    if (group) {
+      const existing = groupToColorMap.get(group);
+      if (existing) {
+        return existing;
       }
-      return getChartColor(index, colorCache);
-    },
-    [colorCache, groupToColorMap]
-  );
-  const getElementStyles = useCallback2(
-    ({ data, index, overrideColor, legendShape }) => {
-      const isSeriesData = data && typeof data === "object" && "data" in data && "options" in data;
-      const isPointPercentageData = data && typeof data === "object" && "percentage" in data;
-      return {
-        color: resolveColor({
-          group: data?.group,
-          index,
-          overrideColor: overrideColor || isSeriesData && data?.options?.stroke || isPointPercentageData && data?.color
-        }),
-        lineStyles: isSeriesData ? getSeriesLineStyles(data, index, providerTheme) : {},
-        glyph: providerTheme.glyphs?.[index],
-        shapeStyles: isSeriesData ? getItemShapeStyles(data, index, providerTheme, legendShape) : {}
-      };
-    },
-    [providerTheme, resolveColor]
-  );
+      const assignedCount = groupToColorMap.size;
+      const color = getChartColor(assignedCount, colorCache);
+      groupToColorMap.set(group, color);
+      return color;
+    }
+    return getChartColor(index, colorCache);
+  }, [colorCache, groupToColorMap]);
+  const getElementStyles = useCallback2(({
+    data,
+    index,
+    overrideColor,
+    legendShape
+  }) => {
+    const isSeriesData = data && typeof data === "object" && "data" in data && "options" in data;
+    const isPointPercentageData = data && typeof data === "object" && "percentage" in data;
+    return {
+      color: resolveColor({
+        group: data?.group,
+        index,
+        overrideColor: overrideColor || isSeriesData && data?.options?.stroke || isPointPercentageData && data?.color
+      }),
+      lineStyles: isSeriesData ? getSeriesLineStyles(data, index, providerTheme) : {},
+      glyph: providerTheme.glyphs?.[index],
+      shapeStyles: isSeriesData ? getItemShapeStyles(data, index, providerTheme, legendShape) : {}
+    };
+  }, [providerTheme, resolveColor]);
   const toggleSeriesVisibility = useCallback2((chartId, seriesLabel) => {
     setHiddenSeries((prev) => {
       const newMap = new Map(prev);
@@ -371,45 +449,35 @@ var GlobalChartsProvider = ({ children, theme }) => {
       return newMap;
     });
   }, []);
-  const isSeriesVisible = useCallback2(
-    (chartId, seriesLabel) => {
-      const chartHidden = hiddenSeries.get(chartId);
-      return !chartHidden || !chartHidden.has(seriesLabel);
-    },
-    [hiddenSeries]
-  );
-  const getHiddenSeries = useCallback2(
-    (chartId) => {
-      const set = hiddenSeries.get(chartId);
-      return set ? new Set(set) : /* @__PURE__ */ new Set();
-    },
-    [hiddenSeries]
-  );
-  const value = useMemo(
-    () => ({
-      charts,
-      registerChart,
-      unregisterChart,
-      getChartData,
-      theme: providerTheme,
-      getElementStyles,
-      toggleSeriesVisibility,
-      isSeriesVisible,
-      getHiddenSeries
-    }),
-    [
-      charts,
-      registerChart,
-      unregisterChart,
-      getChartData,
-      providerTheme,
-      getElementStyles,
-      toggleSeriesVisibility,
-      isSeriesVisible,
-      getHiddenSeries
-    ]
-  );
-  return /* @__PURE__ */ jsx(GlobalChartsContext.Provider, { value, children: /* @__PURE__ */ jsx("div", { ref: wrapperRef, style: { display: "contents" }, children }) });
+  const isSeriesVisible = useCallback2((chartId, seriesLabel) => {
+    const chartHidden = hiddenSeries.get(chartId);
+    return !chartHidden || !chartHidden.has(seriesLabel);
+  }, [hiddenSeries]);
+  const getHiddenSeries = useCallback2((chartId) => {
+    const set = hiddenSeries.get(chartId);
+    return set ? new Set(set) : /* @__PURE__ */ new Set();
+  }, [hiddenSeries]);
+  const value = useMemo(() => ({
+    charts,
+    registerChart,
+    unregisterChart,
+    getChartData,
+    theme: providerTheme,
+    getElementStyles,
+    toggleSeriesVisibility,
+    isSeriesVisible,
+    getHiddenSeries
+  }), [charts, registerChart, unregisterChart, getChartData, providerTheme, getElementStyles, toggleSeriesVisibility, isSeriesVisible, getHiddenSeries]);
+  return /* @__PURE__ */ _jsx(GlobalChartsContext.Provider, {
+    value,
+    children: /* @__PURE__ */ _jsx("div", {
+      ref: wrapperRef,
+      style: {
+        display: "contents"
+      },
+      children
+    })
+  });
 };
 
 // src/providers/chart-context/hooks/use-global-charts-context.ts
@@ -430,7 +498,7 @@ var useChartId = (providedId) => {
 };
 
 // src/providers/chart-context/hooks/use-chart-registration.ts
-import { useEffect as useEffect2, useMemo as useMemo2 } from "react";
+import { useEffect as useEffect3, useMemo as useMemo2 } from "react";
 var useChartRegistration = ({
   chartId,
   legendItems,
@@ -441,7 +509,7 @@ var useChartRegistration = ({
   const { registerChart, unregisterChart } = useGlobalChartsContext();
   const stableLegendItems = useDeepMemo(legendItems);
   const memoizedMetadata = useMemo2(() => metadata, [metadata]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (isDataValid) {
       registerChart(chartId, {
         legendItems: stableLegendItems,
@@ -516,13 +584,38 @@ var useChartDataTransform = (data) => {
 // src/hooks/use-chart-margin.tsx
 import { createScale, getTicks } from "@visx/scale";
 import { useMemo as useMemo5 } from "react";
+var DEFAULT_MARGIN_TOP = 10;
+var DEFAULT_MARGIN_RIGHT = 20;
+var DEFAULT_MARGIN_BOTTOM = 20;
+var DEFAULT_MARGIN_LEFT = 20;
+var DEFAULT_BOTTOM_FOR_TOP_AXIS = 10;
+var DEFAULT_FONT_SIZE = 12;
+var DEFAULT_TICK_LENGTH = 8;
+var DEFAULT_Y_TICK_WIDTH = 40;
+var resolveFontSize = (val) => {
+  if (typeof val === "number" && !isNaN(val)) {
+    return val;
+  }
+  if (typeof val === "string") {
+    const parsed = parseFloat(val);
+    return isNaN(parsed) ? void 0 : parsed;
+  }
+  return void 0;
+};
+var getXAxisLabelMetrics = (theme, orientation) => {
+  const xAxisStyles = orientation === "top" ? theme.axisStyles?.x?.top : theme.axisStyles?.x?.bottom;
+  const fontSize = resolveFontSize(xAxisStyles?.axisLabel?.fontSize) || resolveFontSize(theme.svgLabelSmall?.fontSize) || DEFAULT_FONT_SIZE;
+  const tickLength = xAxisStyles?.tickLength ?? DEFAULT_TICK_LENGTH;
+  return {
+    fontSize,
+    tickLength
+  };
+};
 var useChartMargin = (height, options, data, theme, horizontal = false) => {
   const yTicks = useMemo5(() => {
     const allDataPoints = data.flatMap((series) => series.data);
     if (horizontal) {
-      return allDataPoints.map(
-        (d) => d.label || options.axis?.y?.tickFormat(d.date.getTime(), 0, [])
-      );
+      return allDataPoints.map((d) => d.label || options.axis?.y?.tickFormat(d.date.getTime(), 0, []));
     }
     const minY = Math.min(...allDataPoints.map((d) => d.value));
     const maxY = Math.max(...allDataPoints.map((d) => d.value));
@@ -534,24 +627,32 @@ var useChartMargin = (height, options, data, theme, horizontal = false) => {
     return getTicks(yScale, options.axis?.y?.numTicks);
   }, [options, data, height, horizontal]);
   return useMemo5(() => {
-    const defaultMargin = { top: 10, right: 20, bottom: 20, left: 20 };
-    const defaultTickWidth = 40;
+    const defaultMargin = {
+      top: DEFAULT_MARGIN_TOP,
+      right: DEFAULT_MARGIN_RIGHT,
+      bottom: DEFAULT_MARGIN_BOTTOM,
+      left: DEFAULT_MARGIN_LEFT
+    };
     const yAxisOrientation = options.axis?.y?.orientation;
     const yAxisStyles = yAxisOrientation === "right" ? theme.axisStyles.y.right : theme.axisStyles.y.left;
-    const yTickWidth = getLongestTickWidth(
-      yTicks,
-      options.axis?.y?.tickFormat,
-      yAxisStyles.axisLabel
-    );
-    const yMarginValue = (yTickWidth ?? defaultTickWidth) + (yAxisStyles?.tickLength ?? 0);
+    const yTickWidth = getLongestTickWidth(yTicks, options.axis?.y?.tickFormat, yAxisStyles.axisLabel);
+    const yMarginValue = (yTickWidth ?? DEFAULT_Y_TICK_WIDTH) + (yAxisStyles?.tickLength ?? 0);
     if (yAxisOrientation === "right") {
       defaultMargin.right = yMarginValue;
     } else {
       defaultMargin.left = yMarginValue;
     }
-    if (options.axis?.x?.orientation === "top") {
-      defaultMargin.top = 20;
-      defaultMargin.bottom = 10;
+    const xOrientation = options.axis?.x?.orientation === "top" ? "top" : "bottom";
+    const {
+      fontSize,
+      tickLength
+    } = getXAxisLabelMetrics(theme, xOrientation);
+    const computedXMargin = fontSize + tickLength;
+    if (xOrientation === "top") {
+      defaultMargin.top = Math.max(defaultMargin.top, computedXMargin);
+      defaultMargin.bottom = DEFAULT_BOTTOM_FOR_TOP_AXIS;
+    } else {
+      defaultMargin.bottom = Math.max(defaultMargin.bottom, computedXMargin);
     }
     return defaultMargin;
   }, [options, theme, yTicks]);
@@ -590,7 +691,7 @@ import { useContext as useContext5, useMemo as useMemo6, forwardRef as forwardRe
 
 // src/charts/private/single-chart-context/single-chart-context.tsx
 import { createContext as createContext2 } from "react";
-var ChartInstanceContext = createContext2(null);
+var ChartInstanceContext = /* @__PURE__ */ createContext2(null);
 var SingleChartContext = ChartInstanceContext;
 
 // src/charts/private/single-chart-context/use-single-chart-context.ts
@@ -609,11 +710,7 @@ import { Group } from "@visx/group";
 import { LegendItem, LegendLabel, LegendOrdinal, LegendShape } from "@visx/legend";
 import { scaleOrdinal } from "@visx/scale";
 import clsx from "clsx";
-import {
-  forwardRef,
-  useCallback as useCallback4,
-  useContext as useContext4
-} from "react";
+import { forwardRef, useCallback as useCallback4, useContext as useContext4 } from "react";
 
 // src/components/legend/utils/value-or-identity.ts
 function valueOrIdentity(_) {
@@ -657,7 +754,7 @@ var base_legend_module_default = {
 };
 
 // src/components/legend/private/base-legend.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx as _jsx2, jsxs as _jsxs } from "react/jsx-runtime";
 var orientationToFlexDirection = {
   horizontal: "row",
   vertical: "column"
@@ -669,241 +766,186 @@ var LegendText = ({
 }) => {
   const isEllipsis = maxWidth != null && textOverflow === "ellipsis";
   const [textRef, isTruncated] = useTextTruncation(Boolean(isEllipsis));
-  return /* @__PURE__ */ jsx2(
-    "span",
-    {
-      ref: textRef,
-      className: clsx(
-        base_legend_module_default["legend-item-text"],
-        maxWidth != null && base_legend_module_default[`legend-item-text--${textOverflow}`]
-      ),
-      style: {
-        ...maxWidth != null && {
-          maxWidth,
-          minWidth: 0
-        }
-      },
-      title: isEllipsis && isTruncated ? text : void 0,
-      children: text
-    }
-  );
+  return /* @__PURE__ */ _jsx2("span", {
+    ref: textRef,
+    className: clsx(base_legend_module_default["legend-item-text"], maxWidth != null && base_legend_module_default[`legend-item-text--${textOverflow}`]),
+    style: {
+      ...maxWidth != null && {
+        maxWidth,
+        minWidth: 0
+      }
+    },
+    title: isEllipsis && isTruncated ? text : void 0,
+    children: text
+  });
 };
-var BaseLegend = forwardRef(
-  ({
-    items,
-    className,
-    orientation = "horizontal",
-    position = "bottom",
-    alignment = "center",
-    maxWidth,
-    textOverflow = "wrap",
-    shape = "rect",
-    fill = valueOrIdentityString,
-    size = valueOrIdentityString,
-    labelFormat = valueOrIdentity,
-    labelTransform = labelTransformFactory,
-    shapeWidth = 16,
-    shapeHeight = 16,
-    shapeMargin = "2px 4px 2px 0",
-    labelAlign = "left",
-    labelFlex = "0 0 auto",
-    // Use natural width instead of expanding to fill space
-    labelMargin = "0 4px",
-    itemMargin = "0",
-    itemDirection = "row",
-    legendLabelProps,
-    legendItemClassName,
-    render,
-    interactive = false,
-    chartId,
-    ...legendItemProps
-  }, ref) => {
-    const theme = useGlobalChartsTheme();
-    const context = useContext4(GlobalChartsContext);
-    const legendScale = scaleOrdinal({
-      domain: items.map((item) => item.label),
-      range: items.map((item) => item.color)
-    });
-    const domain = legendScale.domain();
-    const getShapeStyle = useCallback4(
-      ({ index }) => items[index]?.shapeStyle,
-      [items]
-    );
-    const handleLegendClick = useCallback4(
-      (seriesLabel) => {
-        if (interactive && chartId && context) {
-          context.toggleSeriesVisibility(chartId, seriesLabel);
-        }
-      },
-      [interactive, chartId, context]
-    );
-    const isSeriesVisible = useCallback4(
-      (seriesLabel) => {
-        if (!interactive || !chartId || !context) {
-          return true;
-        }
-        return context.isSeriesVisible(chartId, seriesLabel);
-      },
-      [interactive, chartId, context]
-    );
-    const createClickHandler = useCallback4(
-      (labelText) => {
-        if (!interactive) {
-          return void 0;
-        }
-        return () => handleLegendClick(labelText);
-      },
-      [interactive, handleLegendClick]
-    );
-    const createKeyDownHandler = useCallback4(
-      (labelText) => {
-        if (!interactive) {
-          return void 0;
-        }
-        return (event) => {
-          if (event.key === "Enter" || event.key === " ") {
-            event.preventDefault();
-            handleLegendClick(labelText);
-          }
-        };
+var BaseLegend = /* @__PURE__ */ forwardRef(({
+  items,
+  className,
+  orientation = "horizontal",
+  position = "bottom",
+  alignment = "center",
+  maxWidth,
+  textOverflow = "wrap",
+  shape = "rect",
+  fill = valueOrIdentityString,
+  size = valueOrIdentityString,
+  labelFormat = valueOrIdentity,
+  labelTransform = labelTransformFactory,
+  shapeWidth = 16,
+  shapeHeight = 16,
+  shapeMargin = "2px 4px 2px 0",
+  labelAlign = "left",
+  labelFlex = "0 0 auto",
+  // Use natural width instead of expanding to fill space
+  labelMargin = "0 4px",
+  itemMargin = "0",
+  itemDirection = "row",
+  legendLabelProps,
+  legendItemClassName,
+  render,
+  interactive = false,
+  chartId,
+  ...legendItemProps
+}, ref) => {
+  const theme = useGlobalChartsTheme();
+  const context = useContext4(GlobalChartsContext);
+  const legendScale = scaleOrdinal({
+    domain: items.map((item) => item.label),
+    range: items.map((item) => item.color)
+  });
+  const domain = legendScale.domain();
+  const getShapeStyle = useCallback4(({
+    index
+  }) => items[index]?.shapeStyle, [items]);
+  const handleLegendClick = useCallback4((seriesLabel) => {
+    if (interactive && chartId && context) {
+      context.toggleSeriesVisibility(chartId, seriesLabel);
+    }
+  }, [interactive, chartId, context]);
+  const isSeriesVisible = useCallback4((seriesLabel) => {
+    if (!interactive || !chartId || !context) {
+      return true;
+    }
+    return context.isSeriesVisible(chartId, seriesLabel);
+  }, [interactive, chartId, context]);
+  const createClickHandler = useCallback4((labelText) => {
+    if (!interactive) {
+      return void 0;
+    }
+    return () => handleLegendClick(labelText);
+  }, [interactive, handleLegendClick]);
+  const createKeyDownHandler = useCallback4((labelText) => {
+    if (!interactive) {
+      return void 0;
+    }
+    return (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        handleLegendClick(labelText);
+      }
+    };
+  }, [interactive, handleLegendClick]);
+  return render ? render(items) : /* @__PURE__ */ _jsx2(LegendOrdinal, {
+    scale: legendScale,
+    labelFormat,
+    labelTransform,
+    children: (labels) => /* @__PURE__ */ _jsx2("div", {
+      ref,
+      role: "list",
+      className: clsx(base_legend_module_default.legend, base_legend_module_default[`legend--${orientation}`], base_legend_module_default[`legend--alignment-${alignment}`], base_legend_module_default[`legend--position-${position}`], className),
+      style: {
+        flexDirection: orientationToFlexDirection[orientation],
+        ...theme.legendContainerStyles
       },
-      [interactive, handleLegendClick]
-    );
-    return render ? render(items) : /* @__PURE__ */ jsx2(
-      LegendOrdinal,
-      {
-        scale: legendScale,
-        labelFormat,
-        labelTransform,
-        children: (labels) => /* @__PURE__ */ jsx2(
-          "div",
-          {
-            ref,
-            role: "list",
-            "data-testid": `legend-${orientation}`,
-            className: clsx(
-              base_legend_module_default.legend,
-              base_legend_module_default[`legend--${orientation}`],
-              base_legend_module_default[`legend--alignment-${alignment}`],
-              base_legend_module_default[`legend--position-${position}`],
-              className
-            ),
+      children: labels.map((label, i) => {
+        const visible = isSeriesVisible(label.text);
+        const handleClick = createClickHandler(label.text);
+        const handleKeyDown = createKeyDownHandler(label.text);
+        return /* @__PURE__ */ _jsxs(LegendItem, {
+          className: clsx("visx-legend-item", base_legend_module_default["legend-item"], interactive && base_legend_module_default["legend-item--interactive"], !visible && base_legend_module_default["legend-item--inactive"], legendItemClassName),
+          margin: itemMargin,
+          flexDirection: orientation === "vertical" && alignment === "end" ? "row-reverse" : itemDirection,
+          onClick: handleClick,
+          onKeyDown: handleKeyDown,
+          role: interactive ? "button" : void 0,
+          tabIndex: interactive ? 0 : void 0,
+          "aria-pressed": interactive ? visible : void 0,
+          "aria-label": interactive ? `${label.text}: ${visible ? "visible" : "hidden"}. Toggle visibility.` : void 0,
+          ...legendItemProps,
+          children: [items[i]?.renderGlyph ? /* @__PURE__ */ _jsx2("svg", {
+            width: items[i]?.glyphSize * 2,
+            height: items[i]?.glyphSize * 2,
+            children: /* @__PURE__ */ _jsx2(Group, {
+              children: items[i]?.renderGlyph({
+                key: `legend-glyph-${label.text}`,
+                datum: {},
+                index: i,
+                color: fill(label),
+                size: items[i]?.glyphSize,
+                x: items[i]?.glyphSize,
+                y: items[i]?.glyphSize
+              })
+            })
+          }) : /* @__PURE__ */ _jsx2(LegendShape, {
+            shape,
+            height: shapeHeight,
+            width: shapeWidth,
+            margin: shapeMargin,
+            item: domain[i],
+            itemIndex: i,
+            label,
+            fill,
+            size,
+            shapeStyle: getShapeStyle
+          }), /* @__PURE__ */ _jsxs(LegendLabel, {
+            className: clsx("visx-legend-label", base_legend_module_default["legend-item-label"]),
             style: {
-              flexDirection: orientationToFlexDirection[orientation],
-              ...theme.legendContainerStyles
+              justifyContent: labelAlign,
+              flex: labelFlex,
+              margin: labelMargin,
+              ...theme.legendLabelStyles
             },
-            children: labels.map((label, i) => {
-              const visible = isSeriesVisible(label.text);
-              const handleClick = createClickHandler(label.text);
-              const handleKeyDown = createKeyDownHandler(label.text);
-              return /* @__PURE__ */ jsxs(
-                LegendItem,
-                {
-                  className: clsx(
-                    "visx-legend-item",
-                    base_legend_module_default["legend-item"],
-                    interactive && base_legend_module_default["legend-item--interactive"],
-                    !visible && base_legend_module_default["legend-item--inactive"],
-                    legendItemClassName
-                  ),
-                  "data-testid": "legend-item",
-                  margin: itemMargin,
-                  flexDirection: orientation === "vertical" && alignment === "end" ? "row-reverse" : itemDirection,
-                  onClick: handleClick,
-                  onKeyDown: handleKeyDown,
-                  role: interactive ? "button" : void 0,
-                  tabIndex: interactive ? 0 : void 0,
-                  "aria-pressed": interactive ? visible : void 0,
-                  "aria-label": interactive ? `${label.text}: ${visible ? "visible" : "hidden"}. Toggle visibility.` : void 0,
-                  ...legendItemProps,
-                  children: [
-                    items[i]?.renderGlyph ? /* @__PURE__ */ jsx2(
-                      "svg",
-                      {
-                        width: items[i]?.glyphSize * 2,
-                        height: items[i]?.glyphSize * 2,
-                        "data-testid": "legend-glyph",
-                        children: /* @__PURE__ */ jsx2(Group, { children: items[i]?.renderGlyph({
-                          key: `legend-glyph-${label.text}`,
-                          datum: {},
-                          index: i,
-                          color: fill(label),
-                          size: items[i]?.glyphSize,
-                          x: items[i]?.glyphSize,
-                          y: items[i]?.glyphSize
-                        }) })
-                      }
-                    ) : /* @__PURE__ */ jsx2(
-                      LegendShape,
-                      {
-                        shape,
-                        height: shapeHeight,
-                        width: shapeWidth,
-                        margin: shapeMargin,
-                        item: domain[i],
-                        itemIndex: i,
-                        label,
-                        fill,
-                        size,
-                        shapeStyle: getShapeStyle
-                      }
-                    ),
-                    /* @__PURE__ */ jsxs(
-                      LegendLabel,
-                      {
-                        className: clsx("visx-legend-label", base_legend_module_default["legend-item-label"]),
-                        style: {
-                          justifyContent: labelAlign,
-                          flex: labelFlex,
-                          margin: labelMargin,
-                          ...theme.legendLabelStyles
-                        },
-                        ...legendLabelProps,
-                        children: [
-                          /* @__PURE__ */ jsx2(
-                            LegendText,
-                            {
-                              text: label.text,
-                              textOverflow,
-                              maxWidth
-                            }
-                          ),
-                          items.find((item) => item.label === label.text)?.value && /* @__PURE__ */ jsxs("span", { className: base_legend_module_default["legend-item-value"], children: [
-                            "\xA0",
-                            items.find((item) => item.label === label.text)?.value
-                          ] })
-                        ]
-                      }
-                    )
-                  ]
-                },
-                `legend-${label.text}-${i}`
-              );
-            })
-          }
-        )
-      }
-    );
-  }
-);
+            ...legendLabelProps,
+            children: [/* @__PURE__ */ _jsx2(LegendText, {
+              text: label.text,
+              textOverflow,
+              maxWidth
+            }), items.find((item) => item.label === label.text)?.value && /* @__PURE__ */ _jsxs("span", {
+              className: base_legend_module_default["legend-item-value"],
+              children: ["\xA0", items.find((item) => item.label === label.text)?.value]
+            })]
+          })]
+        }, `legend-${label.text}-${i}`);
+      })
+    })
+  });
+});
 
 // src/components/legend/legend.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
-var Legend = forwardRef2(
-  ({ chartId, items, ...props }, ref) => {
-    const context = useContext5(GlobalChartsContext);
-    const singleChartContext = useContext5(SingleChartContext);
-    const contextChartId = chartId ?? singleChartContext?.chartId;
-    const contextItems = useMemo6(() => {
-      return contextChartId && context ? context.getChartData(contextChartId)?.legendItems : void 0;
-    }, [contextChartId, context]);
-    const legendItems = items || contextItems;
-    if (!legendItems) {
-      return null;
-    }
-    return /* @__PURE__ */ jsx3(BaseLegend, { ref, items: legendItems, ...props, chartId: contextChartId });
+import { jsx as _jsx3 } from "react/jsx-runtime";
+var Legend = /* @__PURE__ */ forwardRef2(({
+  chartId,
+  items,
+  ...props
+}, ref) => {
+  const context = useContext5(GlobalChartsContext);
+  const singleChartContext = useContext5(SingleChartContext);
+  const contextChartId = chartId ?? singleChartContext?.chartId;
+  const contextItems = useMemo6(() => {
+    return contextChartId && context ? context.getChartData(contextChartId)?.legendItems : void 0;
+  }, [contextChartId, context]);
+  const legendItems = items || contextItems;
+  if (!legendItems) {
+    return null;
   }
-);
+  return /* @__PURE__ */ _jsx3(BaseLegend, {
+    ref,
+    items: legendItems,
+    ...props,
+    chartId: contextChartId
+  });
+});
 
 // src/components/legend/hooks/use-chart-legend-items.ts
 import { formatNumber } from "@automattic/number-formatters";
@@ -1144,12 +1186,12 @@ var useInteractiveLegendData = ({
 };
 
 // src/hooks/use-prefers-reduced-motion.ts
-import { useState as useState4, useEffect as useEffect3 } from "react";
+import { useState as useState4, useEffect as useEffect4 } from "react";
 var QUERY = "(prefers-reduced-motion: no-preference)";
 var getInitialState = () => !window.matchMedia(QUERY).matches;
 function usePrefersReducedMotion() {
   const [prefersReducedMotion, setPrefersReducedMotion] = useState4(getInitialState);
-  useEffect3(() => {
+  useEffect4(() => {
     const mediaQueryList = window.matchMedia(QUERY);
     const listener = (event) => {
       setPrefersReducedMotion(!event.matches);
@@ -1165,6 +1207,7 @@ function usePrefersReducedMotion() {
 export {
   SingleChartContext,
   useSingleChartContext,
+  useTooltipPortalRelocator,
   defaultTheme,
   GlobalChartsContext,
   GlobalChartsProvider,
@@ -1186,4 +1229,4 @@ export {
   Legend,
   useChartLegendItems
 };
-//# sourceMappingURL=chunk-H34CJSR6.js.map
+//# sourceMappingURL=chunk-32ESS4MV.js.map