@automattic/charts 0.56.2 → 0.56.4

package/dist/{chunk-TVV7ZI7C.cjs → chunk-LSV7F26B.cjs}

@@ -72,13 +72,96 @@ var _xychart = require('@visx/xychart');
 var _d3color = require('@visx/vendor/d3-color');
 
 
+// src/hooks/use-tooltip-portal-relocator.ts
 
 
+// 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);
+      _optionalChain([child, 'access', _2 => _2.parentNode, 'optionalAccess', _3 => _3.removeChild, 'call', _4 => _4(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) {
+  _react.useEffect.call(void 0, () => {
+    const container = _optionalChain([containerRef, 'optionalAccess', _5 => _5.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
 
@@ -230,13 +313,16 @@ var defaultTheme = {
 
 // src/providers/chart-context/global-charts-provider.tsx
 var _jsxruntime = require('react/jsx-runtime');
-var GlobalChartsContext = _react.createContext.call(void 0, null);
-var GlobalChartsProvider = ({ children, theme }) => {
+var GlobalChartsContext = /* @__PURE__ */ _react.createContext.call(void 0, null);
+var GlobalChartsProvider = ({
+  children,
+  theme,
+  portalContainer
+}) => {
   const [charts, setCharts] = _react.useState.call(void 0, () => /* @__PURE__ */ new Map());
-  const [hiddenSeries, setHiddenSeries] = _react.useState.call(void 0, 
-    () => /* @__PURE__ */ new Map()
-  );
+  const [hiddenSeries, setHiddenSeries] = _react.useState.call(void 0, () => /* @__PURE__ */ new Map());
   const wrapperRef = _react.useRef.call(void 0, null);
+  useTooltipPortalRelocator(_nullishCoalesce(portalContainer, () => ( wrapperRef)));
   const providerTheme = _react.useMemo.call(void 0, () => {
     return theme ? _chunkZVGEDXDPcjs.mergeThemes.call(void 0, defaultTheme, theme) : defaultTheme;
   }, [theme]);
@@ -248,7 +334,9 @@ var GlobalChartsProvider = ({ children, theme }) => {
     maxHue: 0
   }));
   _react.useLayoutEffect.call(void 0, () => {
-    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 = _d3color.hsl.call(void 0, 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,9 +375,7 @@ var GlobalChartsProvider = ({ children, theme }) => {
       maxHue
     });
   }, [providerTheme]);
-  const [groupToColorMap, setGroupToColorMap] = _react.useState.call(void 0, 
-    () => /* @__PURE__ */ new Map()
-  );
+  const [groupToColorMap, setGroupToColorMap] = _react.useState.call(void 0, () => /* @__PURE__ */ new Map());
   _react.useEffect.call(void 0, () => {
     setGroupToColorMap(/* @__PURE__ */ new Map());
   }, [providerTheme.colors]);
@@ -307,52 +389,48 @@ var GlobalChartsProvider = ({ children, theme }) => {
       return newMap;
     });
   }, []);
-  const getChartData = _react.useCallback.call(void 0, 
-    (id) => {
-      return charts.get(id);
-    },
-    [charts]
-  );
-  const resolveColor = _react.useCallback.call(void 0, 
-    ({
-      group,
-      index,
-      overrideColor
-    }) => {
-      if (overrideColor) {
-        return _chunkZVGEDXDPcjs.normalizeColorToHex.call(void 0, overrideColor, wrapperRef.current, _chunkZVGEDXDPcjs.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 = _react.useCallback.call(void 0, (id) => {
+    return charts.get(id);
+  }, [charts]);
+  const resolveColor = _react.useCallback.call(void 0, ({
+    group,
+    index,
+    overrideColor
+  }) => {
+    if (overrideColor) {
+      return _chunkZVGEDXDPcjs.normalizeColorToHex.call(void 0, overrideColor, wrapperRef.current, _chunkZVGEDXDPcjs.resolveCssVariable);
+    }
+    if (group) {
+      const existing = groupToColorMap.get(group);
+      if (existing) {
+        return existing;
       }
-      return getChartColor(index, colorCache);
-    },
-    [colorCache, groupToColorMap]
-  );
-  const getElementStyles = _react.useCallback.call(void 0, 
-    ({ 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: _optionalChain([data, 'optionalAccess', _2 => _2.group]),
-          index,
-          overrideColor: overrideColor || isSeriesData && _optionalChain([data, 'optionalAccess', _3 => _3.options, 'optionalAccess', _4 => _4.stroke]) || isPointPercentageData && _optionalChain([data, 'optionalAccess', _5 => _5.color])
-        }),
-        lineStyles: isSeriesData ? _chunkZVGEDXDPcjs.getSeriesLineStyles.call(void 0, data, index, providerTheme) : {},
-        glyph: _optionalChain([providerTheme, 'access', _6 => _6.glyphs, 'optionalAccess', _7 => _7[index]]),
-        shapeStyles: isSeriesData ? _chunkZVGEDXDPcjs.getItemShapeStyles.call(void 0, 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 = _react.useCallback.call(void 0, ({
+    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: _optionalChain([data, 'optionalAccess', _6 => _6.group]),
+        index,
+        overrideColor: overrideColor || isSeriesData && _optionalChain([data, 'optionalAccess', _7 => _7.options, 'optionalAccess', _8 => _8.stroke]) || isPointPercentageData && _optionalChain([data, 'optionalAccess', _9 => _9.color])
+      }),
+      lineStyles: isSeriesData ? _chunkZVGEDXDPcjs.getSeriesLineStyles.call(void 0, data, index, providerTheme) : {},
+      glyph: _optionalChain([providerTheme, 'access', _10 => _10.glyphs, 'optionalAccess', _11 => _11[index]]),
+      shapeStyles: isSeriesData ? _chunkZVGEDXDPcjs.getItemShapeStyles.call(void 0, data, index, providerTheme, legendShape) : {}
+    };
+  }, [providerTheme, resolveColor]);
   const toggleSeriesVisibility = _react.useCallback.call(void 0, (chartId, seriesLabel) => {
     setHiddenSeries((prev) => {
       const newMap = new Map(prev);
@@ -371,45 +449,35 @@ var GlobalChartsProvider = ({ children, theme }) => {
       return newMap;
     });
   }, []);
-  const isSeriesVisible = _react.useCallback.call(void 0, 
-    (chartId, seriesLabel) => {
-      const chartHidden = hiddenSeries.get(chartId);
-      return !chartHidden || !chartHidden.has(seriesLabel);
-    },
-    [hiddenSeries]
-  );
-  const getHiddenSeries = _react.useCallback.call(void 0, 
-    (chartId) => {
-      const set = hiddenSeries.get(chartId);
-      return set ? new Set(set) : /* @__PURE__ */ new Set();
-    },
-    [hiddenSeries]
-  );
-  const value = _react.useMemo.call(void 0, 
-    () => ({
-      charts,
-      registerChart,
-      unregisterChart,
-      getChartData,
-      theme: providerTheme,
-      getElementStyles,
-      toggleSeriesVisibility,
-      isSeriesVisible,
-      getHiddenSeries
-    }),
-    [
-      charts,
-      registerChart,
-      unregisterChart,
-      getChartData,
-      providerTheme,
-      getElementStyles,
-      toggleSeriesVisibility,
-      isSeriesVisible,
-      getHiddenSeries
-    ]
-  );
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, GlobalChartsContext.Provider, { value, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: wrapperRef, style: { display: "contents" }, children }) });
+  const isSeriesVisible = _react.useCallback.call(void 0, (chartId, seriesLabel) => {
+    const chartHidden = hiddenSeries.get(chartId);
+    return !chartHidden || !chartHidden.has(seriesLabel);
+  }, [hiddenSeries]);
+  const getHiddenSeries = _react.useCallback.call(void 0, (chartId) => {
+    const set = hiddenSeries.get(chartId);
+    return set ? new Set(set) : /* @__PURE__ */ new Set();
+  }, [hiddenSeries]);
+  const value = _react.useMemo.call(void 0, () => ({
+    charts,
+    registerChart,
+    unregisterChart,
+    getChartData,
+    theme: providerTheme,
+    getElementStyles,
+    toggleSeriesVisibility,
+    isSeriesVisible,
+    getHiddenSeries
+  }), [charts, registerChart, unregisterChart, getChartData, providerTheme, getElementStyles, toggleSeriesVisibility, isSeriesVisible, getHiddenSeries]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, GlobalChartsContext.Provider, {
+    value,
+    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
+      ref: wrapperRef,
+      style: {
+        display: "contents"
+      },
+      children
+    })
+  });
 };
 
 // src/providers/chart-context/hooks/use-global-charts-context.ts
@@ -467,7 +535,7 @@ var useChartRegistration = ({
 
 var useGlobalChartsTheme = () => {
   const context = _react.useContext.call(void 0, GlobalChartsContext);
-  const globalTheme = _optionalChain([context, 'optionalAccess', _8 => _8.theme]);
+  const globalTheme = _optionalChain([context, 'optionalAccess', _12 => _12.theme]);
   return _nullishCoalesce(globalTheme, () => ( defaultTheme));
 };
 
@@ -475,7 +543,7 @@ var useGlobalChartsTheme = () => {
 var useXYChartTheme = (data) => {
   const theme = useGlobalChartsTheme();
   return _react.useMemo.call(void 0, () => {
-    const seriesColors = (_nullishCoalesce(data, () => ( []))).map((series) => _optionalChain([series, 'access', _9 => _9.options, 'optionalAccess', _10 => _10.stroke])).filter((color) => Boolean(color));
+    const seriesColors = (_nullishCoalesce(data, () => ( []))).map((series) => _optionalChain([series, 'access', _13 => _13.options, 'optionalAccess', _14 => _14.stroke])).filter((color) => Boolean(color));
     return _xychart.buildChartTheme.call(void 0, {
       ...theme,
       colors: [...seriesColors, ..._nullishCoalesce(theme.colors, () => ( []))]
@@ -487,7 +555,7 @@ var useXYChartTheme = (data) => {
 
 var useChartDataTransform = (data) => {
   return _react.useMemo.call(void 0, () => {
-    const firstPoint = _optionalChain([data, 'optionalAccess', _11 => _11[0], 'optionalAccess', _12 => _12.data, 'optionalAccess', _13 => _13[0]]);
+    const firstPoint = _optionalChain([data, 'optionalAccess', _15 => _15[0], 'optionalAccess', _16 => _16.data, 'optionalAccess', _17 => _17[0]]);
     const hasDateProperties = firstPoint && ("date" in firstPoint || "dateString" in firstPoint);
     if (!hasDateProperties) {
       return data;
@@ -520,9 +588,7 @@ var useChartMargin = (height, options, data, theme, horizontal = false) => {
   const yTicks = _react.useMemo.call(void 0, () => {
     const allDataPoints = data.flatMap((series) => series.data);
     if (horizontal) {
-      return allDataPoints.map(
-        (d) => d.label || _optionalChain([options, 'access', _14 => _14.axis, 'optionalAccess', _15 => _15.y, 'optionalAccess', _16 => _16.tickFormat, 'call', _17 => _17(d.date.getTime(), 0, [])])
-      );
+      return allDataPoints.map((d) => d.label || _optionalChain([options, 'access', _18 => _18.axis, 'optionalAccess', _19 => _19.y, 'optionalAccess', _20 => _20.tickFormat, 'call', _21 => _21(d.date.getTime(), 0, [])]));
     }
     const minY = Math.min(...allDataPoints.map((d) => d.value));
     const maxY = Math.max(...allDataPoints.map((d) => d.value));
@@ -531,25 +597,26 @@ var useChartMargin = (height, options, data, theme, horizontal = false) => {
       domain: [minY, maxY],
       range: [height, 0]
     });
-    return _scale.getTicks.call(void 0, yScale, _optionalChain([options, 'access', _18 => _18.axis, 'optionalAccess', _19 => _19.y, 'optionalAccess', _20 => _20.numTicks]));
+    return _scale.getTicks.call(void 0, yScale, _optionalChain([options, 'access', _22 => _22.axis, 'optionalAccess', _23 => _23.y, 'optionalAccess', _24 => _24.numTicks]));
   }, [options, data, height, horizontal]);
   return _react.useMemo.call(void 0, () => {
-    const defaultMargin = { top: 10, right: 20, bottom: 20, left: 20 };
+    const defaultMargin = {
+      top: 10,
+      right: 20,
+      bottom: 20,
+      left: 20
+    };
     const defaultTickWidth = 40;
-    const yAxisOrientation = _optionalChain([options, 'access', _21 => _21.axis, 'optionalAccess', _22 => _22.y, 'optionalAccess', _23 => _23.orientation]);
+    const yAxisOrientation = _optionalChain([options, 'access', _25 => _25.axis, 'optionalAccess', _26 => _26.y, 'optionalAccess', _27 => _27.orientation]);
     const yAxisStyles = yAxisOrientation === "right" ? theme.axisStyles.y.right : theme.axisStyles.y.left;
-    const yTickWidth = _chunkZVGEDXDPcjs.getLongestTickWidth.call(void 0, 
-      yTicks,
-      _optionalChain([options, 'access', _24 => _24.axis, 'optionalAccess', _25 => _25.y, 'optionalAccess', _26 => _26.tickFormat]),
-      yAxisStyles.axisLabel
-    );
-    const yMarginValue = (_nullishCoalesce(yTickWidth, () => ( defaultTickWidth))) + (_nullishCoalesce(_optionalChain([yAxisStyles, 'optionalAccess', _27 => _27.tickLength]), () => ( 0)));
+    const yTickWidth = _chunkZVGEDXDPcjs.getLongestTickWidth.call(void 0, yTicks, _optionalChain([options, 'access', _28 => _28.axis, 'optionalAccess', _29 => _29.y, 'optionalAccess', _30 => _30.tickFormat]), yAxisStyles.axisLabel);
+    const yMarginValue = (_nullishCoalesce(yTickWidth, () => ( defaultTickWidth))) + (_nullishCoalesce(_optionalChain([yAxisStyles, 'optionalAccess', _31 => _31.tickLength]), () => ( 0)));
     if (yAxisOrientation === "right") {
       defaultMargin.right = yMarginValue;
     } else {
       defaultMargin.left = yMarginValue;
     }
-    if (_optionalChain([options, 'access', _28 => _28.axis, 'optionalAccess', _29 => _29.x, 'optionalAccess', _30 => _30.orientation]) === "top") {
+    if (_optionalChain([options, 'access', _32 => _32.axis, 'optionalAccess', _33 => _33.x, 'optionalAccess', _34 => _34.orientation]) === "top") {
       defaultMargin.top = 20;
       defaultMargin.bottom = 10;
     }
@@ -590,7 +657,7 @@ function useElementHeight({
 
 // src/charts/private/single-chart-context/single-chart-context.tsx
 
-var ChartInstanceContext = _react.createContext.call(void 0, null);
+var ChartInstanceContext = /* @__PURE__ */ _react.createContext.call(void 0, null);
 var SingleChartContext = ChartInstanceContext;
 
 // src/charts/private/single-chart-context/use-single-chart-context.ts
@@ -611,10 +678,6 @@ var _legend = require('@visx/legend');
 var _clsx = require('clsx'); var _clsx2 = _interopRequireDefault(_clsx);
 
 
-
-
-
-
 // src/components/legend/utils/value-or-identity.ts
 function valueOrIdentity(_) {
   if (_ && typeof _ === "object" && "value" in _ && typeof _.value !== "undefined")
@@ -669,241 +732,186 @@ var LegendText = ({
 }) => {
   const isEllipsis = maxWidth != null && textOverflow === "ellipsis";
   const [textRef, isTruncated] = useTextTruncation(Boolean(isEllipsis));
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    "span",
-    {
-      ref: textRef,
-      className: _clsx2.default.call(void 0, 
-        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__ */ _jsxruntime.jsx.call(void 0, "span", {
+    ref: textRef,
+    className: _clsx2.default.call(void 0, 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 = _react.forwardRef.call(void 0, 
-  ({
-    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 = _react.useContext.call(void 0, GlobalChartsContext);
-    const legendScale = _scale.scaleOrdinal.call(void 0, {
-      domain: items.map((item) => item.label),
-      range: items.map((item) => item.color)
-    });
-    const domain = legendScale.domain();
-    const getShapeStyle = _react.useCallback.call(void 0, 
-      ({ index }) => _optionalChain([items, 'access', _31 => _31[index], 'optionalAccess', _32 => _32.shapeStyle]),
-      [items]
-    );
-    const handleLegendClick = _react.useCallback.call(void 0, 
-      (seriesLabel) => {
-        if (interactive && chartId && context) {
-          context.toggleSeriesVisibility(chartId, seriesLabel);
-        }
-      },
-      [interactive, chartId, context]
-    );
-    const isSeriesVisible = _react.useCallback.call(void 0, 
-      (seriesLabel) => {
-        if (!interactive || !chartId || !context) {
-          return true;
-        }
-        return context.isSeriesVisible(chartId, seriesLabel);
-      },
-      [interactive, chartId, context]
-    );
-    const createClickHandler = _react.useCallback.call(void 0, 
-      (labelText) => {
-        if (!interactive) {
-          return void 0;
-        }
-        return () => handleLegendClick(labelText);
-      },
-      [interactive, handleLegendClick]
-    );
-    const createKeyDownHandler = _react.useCallback.call(void 0, 
-      (labelText) => {
-        if (!interactive) {
-          return void 0;
-        }
-        return (event) => {
-          if (event.key === "Enter" || event.key === " ") {
-            event.preventDefault();
-            handleLegendClick(labelText);
-          }
-        };
+var BaseLegend = /* @__PURE__ */ _react.forwardRef.call(void 0, ({
+  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 = _react.useContext.call(void 0, GlobalChartsContext);
+  const legendScale = _scale.scaleOrdinal.call(void 0, {
+    domain: items.map((item) => item.label),
+    range: items.map((item) => item.color)
+  });
+  const domain = legendScale.domain();
+  const getShapeStyle = _react.useCallback.call(void 0, ({
+    index
+  }) => _optionalChain([items, 'access', _35 => _35[index], 'optionalAccess', _36 => _36.shapeStyle]), [items]);
+  const handleLegendClick = _react.useCallback.call(void 0, (seriesLabel) => {
+    if (interactive && chartId && context) {
+      context.toggleSeriesVisibility(chartId, seriesLabel);
+    }
+  }, [interactive, chartId, context]);
+  const isSeriesVisible = _react.useCallback.call(void 0, (seriesLabel) => {
+    if (!interactive || !chartId || !context) {
+      return true;
+    }
+    return context.isSeriesVisible(chartId, seriesLabel);
+  }, [interactive, chartId, context]);
+  const createClickHandler = _react.useCallback.call(void 0, (labelText) => {
+    if (!interactive) {
+      return void 0;
+    }
+    return () => handleLegendClick(labelText);
+  }, [interactive, handleLegendClick]);
+  const createKeyDownHandler = _react.useCallback.call(void 0, (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__ */ _jsxruntime.jsx.call(void 0, _legend.LegendOrdinal, {
+    scale: legendScale,
+    labelFormat,
+    labelTransform,
+    children: (labels) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
+      ref,
+      role: "list",
+      className: _clsx2.default.call(void 0, 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__ */ _jsxruntime.jsx.call(void 0, 
-      _legend.LegendOrdinal,
-      {
-        scale: legendScale,
-        labelFormat,
-        labelTransform,
-        children: (labels) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          "div",
-          {
-            ref,
-            role: "list",
-            "data-testid": `legend-${orientation}`,
-            className: _clsx2.default.call(void 0, 
-              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__ */ _jsxruntime.jsxs.call(void 0, _legend.LegendItem, {
+          className: _clsx2.default.call(void 0, "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: [_optionalChain([items, 'access', _37 => _37[i], 'optionalAccess', _38 => _38.renderGlyph]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", {
+            width: _optionalChain([items, 'access', _39 => _39[i], 'optionalAccess', _40 => _40.glyphSize]) * 2,
+            height: _optionalChain([items, 'access', _41 => _41[i], 'optionalAccess', _42 => _42.glyphSize]) * 2,
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _group.Group, {
+              children: _optionalChain([items, 'access', _43 => _43[i], 'optionalAccess', _44 => _44.renderGlyph, 'call', _45 => _45({
+                key: `legend-glyph-${label.text}`,
+                datum: {},
+                index: i,
+                color: fill(label),
+                size: _optionalChain([items, 'access', _46 => _46[i], 'optionalAccess', _47 => _47.glyphSize]),
+                x: _optionalChain([items, 'access', _48 => _48[i], 'optionalAccess', _49 => _49.glyphSize]),
+                y: _optionalChain([items, 'access', _50 => _50[i], 'optionalAccess', _51 => _51.glyphSize])
+              })])
+            })
+          }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _legend.LegendShape, {
+            shape,
+            height: shapeHeight,
+            width: shapeWidth,
+            margin: shapeMargin,
+            item: domain[i],
+            itemIndex: i,
+            label,
+            fill,
+            size,
+            shapeStyle: getShapeStyle
+          }), /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _legend.LegendLabel, {
+            className: _clsx2.default.call(void 0, "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__ */ _jsxruntime.jsxs.call(void 0, 
-                _legend.LegendItem,
-                {
-                  className: _clsx2.default.call(void 0, 
-                    "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: [
-                    _optionalChain([items, 'access', _33 => _33[i], 'optionalAccess', _34 => _34.renderGlyph]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                      "svg",
-                      {
-                        width: _optionalChain([items, 'access', _35 => _35[i], 'optionalAccess', _36 => _36.glyphSize]) * 2,
-                        height: _optionalChain([items, 'access', _37 => _37[i], 'optionalAccess', _38 => _38.glyphSize]) * 2,
-                        "data-testid": "legend-glyph",
-                        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _group.Group, { children: _optionalChain([items, 'access', _39 => _39[i], 'optionalAccess', _40 => _40.renderGlyph, 'call', _41 => _41({
-                          key: `legend-glyph-${label.text}`,
-                          datum: {},
-                          index: i,
-                          color: fill(label),
-                          size: _optionalChain([items, 'access', _42 => _42[i], 'optionalAccess', _43 => _43.glyphSize]),
-                          x: _optionalChain([items, 'access', _44 => _44[i], 'optionalAccess', _45 => _45.glyphSize]),
-                          y: _optionalChain([items, 'access', _46 => _46[i], 'optionalAccess', _47 => _47.glyphSize])
-                        })]) })
-                      }
-                    ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                      _legend.LegendShape,
-                      {
-                        shape,
-                        height: shapeHeight,
-                        width: shapeWidth,
-                        margin: shapeMargin,
-                        item: domain[i],
-                        itemIndex: i,
-                        label,
-                        fill,
-                        size,
-                        shapeStyle: getShapeStyle
-                      }
-                    ),
-                    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-                      _legend.LegendLabel,
-                      {
-                        className: _clsx2.default.call(void 0, "visx-legend-label", base_legend_module_default["legend-item-label"]),
-                        style: {
-                          justifyContent: labelAlign,
-                          flex: labelFlex,
-                          margin: labelMargin,
-                          ...theme.legendLabelStyles
-                        },
-                        ...legendLabelProps,
-                        children: [
-                          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                            LegendText,
-                            {
-                              text: label.text,
-                              textOverflow,
-                              maxWidth
-                            }
-                          ),
-                          _optionalChain([items, 'access', _48 => _48.find, 'call', _49 => _49((item) => item.label === label.text), 'optionalAccess', _50 => _50.value]) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: base_legend_module_default["legend-item-value"], children: [
-                            "\xA0",
-                            _optionalChain([items, 'access', _51 => _51.find, 'call', _52 => _52((item) => item.label === label.text), 'optionalAccess', _53 => _53.value])
-                          ] })
-                        ]
-                      }
-                    )
-                  ]
-                },
-                `legend-${label.text}-${i}`
-              );
-            })
-          }
-        )
-      }
-    );
-  }
-);
+            ...legendLabelProps,
+            children: [/* @__PURE__ */ _jsxruntime.jsx.call(void 0, LegendText, {
+              text: label.text,
+              textOverflow,
+              maxWidth
+            }), _optionalChain([items, 'access', _52 => _52.find, 'call', _53 => _53((item) => item.label === label.text), 'optionalAccess', _54 => _54.value]) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", {
+              className: base_legend_module_default["legend-item-value"],
+              children: ["\xA0", _optionalChain([items, 'access', _55 => _55.find, 'call', _56 => _56((item) => item.label === label.text), 'optionalAccess', _57 => _57.value])]
+            })]
+          })]
+        }, `legend-${label.text}-${i}`);
+      })
+    })
+  });
+});
 
 // src/components/legend/legend.tsx
 
-var Legend = _react.forwardRef.call(void 0, 
-  ({ chartId, items, ...props }, ref) => {
-    const context = _react.useContext.call(void 0, GlobalChartsContext);
-    const singleChartContext = _react.useContext.call(void 0, SingleChartContext);
-    const contextChartId = _nullishCoalesce(chartId, () => ( _optionalChain([singleChartContext, 'optionalAccess', _54 => _54.chartId])));
-    const contextItems = _react.useMemo.call(void 0, () => {
-      return contextChartId && context ? _optionalChain([context, 'access', _55 => _55.getChartData, 'call', _56 => _56(contextChartId), 'optionalAccess', _57 => _57.legendItems]) : void 0;
-    }, [contextChartId, context]);
-    const legendItems = items || contextItems;
-    if (!legendItems) {
-      return null;
-    }
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BaseLegend, { ref, items: legendItems, ...props, chartId: contextChartId });
+var Legend = /* @__PURE__ */ _react.forwardRef.call(void 0, ({
+  chartId,
+  items,
+  ...props
+}, ref) => {
+  const context = _react.useContext.call(void 0, GlobalChartsContext);
+  const singleChartContext = _react.useContext.call(void 0, SingleChartContext);
+  const contextChartId = _nullishCoalesce(chartId, () => ( _optionalChain([singleChartContext, 'optionalAccess', _58 => _58.chartId])));
+  const contextItems = _react.useMemo.call(void 0, () => {
+    return contextChartId && context ? _optionalChain([context, 'access', _59 => _59.getChartData, 'call', _60 => _60(contextChartId), 'optionalAccess', _61 => _61.legendItems]) : void 0;
+  }, [contextChartId, context]);
+  const legendItems = items || contextItems;
+  if (!legendItems) {
+    return null;
   }
-);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BaseLegend, {
+    ref,
+    items: legendItems,
+    ...props,
+    chartId: contextChartId
+  });
+});
 
 // src/components/legend/hooks/use-chart-legend-items.ts
 var _numberformatters = require('@automattic/number-formatters');
@@ -952,7 +960,7 @@ function processSeriesData(seriesData, getElementStyles, showValues, withGlyph,
     });
     const baseItem = {
       label: series.label,
-      value: showValues ? _optionalChain([series, 'access', _58 => _58.data, 'optionalAccess', _59 => _59.length, 'optionalAccess', _60 => _60.toString, 'call', _61 => _61()]) || "0" : "",
+      value: showValues ? _optionalChain([series, 'access', _62 => _62.data, 'optionalAccess', _63 => _63.length, 'optionalAccess', _64 => _64.toString, 'call', _65 => _65()]) || "0" : "",
       color,
       shapeStyle: shapeStyles
     };
@@ -1185,5 +1193,6 @@ function usePrefersReducedMotion() {
 
 
 
-exports.SingleChartContext = SingleChartContext; exports.useSingleChartContext = useSingleChartContext; exports.defaultTheme = defaultTheme; exports.GlobalChartsContext = GlobalChartsContext; exports.GlobalChartsProvider = GlobalChartsProvider; exports.useGlobalChartsContext = useGlobalChartsContext; exports.useChartId = useChartId; exports.useDeepMemo = useDeepMemo; exports.useChartMouseHandler = useChartMouseHandler; exports.useXYChartTheme = useXYChartTheme; exports.useChartDataTransform = useChartDataTransform; exports.useChartMargin = useChartMargin; exports.useElementHeight = useElementHeight; exports.useHasLegendChild = useHasLegendChild; exports.useTextTruncation = useTextTruncation; exports.useZeroValueDisplay = useZeroValueDisplay; exports.useInteractiveLegendData = useInteractiveLegendData; exports.usePrefersReducedMotion = usePrefersReducedMotion; exports.useChartRegistration = useChartRegistration; exports.useGlobalChartsTheme = useGlobalChartsTheme; exports.Legend = Legend; exports.useChartLegendItems = useChartLegendItems;
-//# sourceMappingURL=chunk-TVV7ZI7C.cjs.map
+
+exports.SingleChartContext = SingleChartContext; exports.useSingleChartContext = useSingleChartContext; exports.useTooltipPortalRelocator = useTooltipPortalRelocator; exports.defaultTheme = defaultTheme; exports.GlobalChartsContext = GlobalChartsContext; exports.GlobalChartsProvider = GlobalChartsProvider; exports.useGlobalChartsContext = useGlobalChartsContext; exports.useChartId = useChartId; exports.useDeepMemo = useDeepMemo; exports.useChartMouseHandler = useChartMouseHandler; exports.useXYChartTheme = useXYChartTheme; exports.useChartDataTransform = useChartDataTransform; exports.useChartMargin = useChartMargin; exports.useElementHeight = useElementHeight; exports.useHasLegendChild = useHasLegendChild; exports.useTextTruncation = useTextTruncation; exports.useZeroValueDisplay = useZeroValueDisplay; exports.useInteractiveLegendData = useInteractiveLegendData; exports.usePrefersReducedMotion = usePrefersReducedMotion; exports.useChartRegistration = useChartRegistration; exports.useGlobalChartsTheme = useGlobalChartsTheme; exports.Legend = Legend; exports.useChartLegendItems = useChartLegendItems;
+//# sourceMappingURL=chunk-LSV7F26B.cjs.map