@automattic/charts 0.56.3 → 0.56.5

package/dist/{chunk-7HROSZRS.cjs → chunk-Y3NNQMAX.cjs}

@@ -8,11 +8,11 @@ var base_tooltip_module_default = {
 
 // src/components/tooltip/base-tooltip.tsx
 var _jsxruntime = require('react/jsx-runtime');
-var DefaultTooltipContent = ({ data }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-  _optionalChain([data, 'optionalAccess', _ => _.label]),
-  ": ",
-  _optionalChain([data, 'optionalAccess', _2 => _2.valueDisplay]) || _numberformatters.formatNumber.call(void 0, _optionalChain([data, 'optionalAccess', _3 => _3.value]))
-] });
+var DefaultTooltipContent = ({
+  data
+}) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, {
+  children: [_optionalChain([data, 'optionalAccess', _ => _.label]), ": ", _optionalChain([data, 'optionalAccess', _2 => _2.valueDisplay]) || _numberformatters.formatNumber.call(void 0, _optionalChain([data, 'optionalAccess', _3 => _3.value]))]
+});
 var BaseTooltip = ({
   data,
   top,
@@ -23,11 +23,23 @@ var BaseTooltip = ({
   style,
   renderContainer = true
 }) => {
-  const content = children || data && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component, { data, className });
+  const content = children || data && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component, {
+    data,
+    className
+  });
   if (!renderContainer) {
     return content;
   }
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: base_tooltip_module_default.tooltip, style: { top, left, ...style }, role: "tooltip", children: content });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
+    className: base_tooltip_module_default.tooltip,
+    style: {
+      top,
+      left,
+      ...style
+    },
+    role: "tooltip",
+    children: content
+  });
 };
 
 // src/components/tooltip/accessible-tooltip.tsx
@@ -96,24 +108,26 @@ var AccessibleTooltip = ({
     return (params) => {
       const tooltipContent = renderTooltip(params);
       if (selectedIndex !== void 0) {
-        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          "div",
-          {
-            ref: tooltipRef,
-            tabIndex: -1,
-            role: "tooltip",
-            "aria-atomic": "true",
-            className: keyboardFocusedClassName,
-            "data-testid": `chart-tooltip-${selectedIndex}`,
-            children: tooltipContent
-          },
-          `chart-tooltip-${selectedIndex}`
-        );
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
+          ref: tooltipRef,
+          tabIndex: -1,
+          role: "tooltip",
+          "aria-atomic": "true",
+          className: keyboardFocusedClassName,
+          children: tooltipContent
+        }, `chart-tooltip-${selectedIndex}`);
       }
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { role: "tooltip", "aria-live": "polite", children: tooltipContent });
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
+        role: "tooltip",
+        "aria-live": "polite",
+        children: tooltipContent
+      });
     };
   }, [renderTooltip, selectedIndex, tooltipRef, keyboardFocusedClassName]);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _xychart.Tooltip, { ...props, renderTooltip: focusableRenderTooltip });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _xychart.Tooltip, {
+    ...props,
+    renderTooltip: focusableRenderTooltip
+  });
 };
 var useKeyboardNavigation = ({
   selectedIndex,
@@ -123,14 +137,11 @@ var useKeyboardNavigation = ({
   chartRef,
   totalPoints
 }) => {
-  const tooltipRef = _react.useCallback.call(void 0, 
-    (element) => {
-      if (element && selectedIndex !== void 0) {
-        element.focus();
-      }
-    },
-    [selectedIndex]
-  );
+  const tooltipRef = _react.useCallback.call(void 0, (element) => {
+    if (element && selectedIndex !== void 0) {
+      element.focus();
+    }
+  }, [selectedIndex]);
   const onChartFocus = _react.useCallback.call(void 0, () => {
     if (!isNavigating && selectedIndex !== void 0) {
       setSelectedIndex(0);
@@ -139,37 +150,34 @@ var useKeyboardNavigation = ({
   const onChartBlur = _react.useCallback.call(void 0, () => {
     setIsNavigating(false);
   }, [setIsNavigating]);
-  const onChartKeyDown = _react.useCallback.call(void 0, 
-    (event) => {
-      if (totalPoints === 0) return;
-      if (event.key === "Tab") {
-        _optionalChain([chartRef, 'access', _10 => _10.current, 'optionalAccess', _11 => _11.focus, 'call', _12 => _12()]);
-        setSelectedIndex(void 0);
-        setIsNavigating(false);
-        return;
-      }
-      const currentSelectedIndex = selectedIndex === void 0 ? -1 : selectedIndex;
-      if (currentSelectedIndex + 1 >= totalPoints && ["ArrowRight"].includes(event.key)) {
-        _optionalChain([chartRef, 'access', _13 => _13.current, 'optionalAccess', _14 => _14.focus, 'call', _15 => _15()]);
-        setSelectedIndex(void 0);
-        setIsNavigating(false);
-        return;
-      }
-      event.preventDefault();
-      if (["ArrowRight"].includes(event.key)) {
-        setIsNavigating(true);
-        setSelectedIndex((currentSelectedIndex + 1) % totalPoints);
-      } else if (["ArrowLeft"].includes(event.key)) {
-        setIsNavigating(true);
-        setSelectedIndex((currentSelectedIndex - 1 + totalPoints) % totalPoints);
-      } else if (event.key === "Escape") {
-        setSelectedIndex(void 0);
-        setIsNavigating(false);
-        _optionalChain([chartRef, 'access', _16 => _16.current, 'optionalAccess', _17 => _17.focus, 'call', _18 => _18()]);
-      }
-    },
-    [totalPoints, selectedIndex, setSelectedIndex, setIsNavigating, chartRef]
-  );
+  const onChartKeyDown = _react.useCallback.call(void 0, (event) => {
+    if (totalPoints === 0) return;
+    if (event.key === "Tab") {
+      _optionalChain([chartRef, 'access', _10 => _10.current, 'optionalAccess', _11 => _11.focus, 'call', _12 => _12()]);
+      setSelectedIndex(void 0);
+      setIsNavigating(false);
+      return;
+    }
+    const currentSelectedIndex = selectedIndex === void 0 ? -1 : selectedIndex;
+    if (currentSelectedIndex + 1 >= totalPoints && ["ArrowRight"].includes(event.key)) {
+      _optionalChain([chartRef, 'access', _13 => _13.current, 'optionalAccess', _14 => _14.focus, 'call', _15 => _15()]);
+      setSelectedIndex(void 0);
+      setIsNavigating(false);
+      return;
+    }
+    event.preventDefault();
+    if (["ArrowRight"].includes(event.key)) {
+      setIsNavigating(true);
+      setSelectedIndex((currentSelectedIndex + 1) % totalPoints);
+    } else if (["ArrowLeft"].includes(event.key)) {
+      setIsNavigating(true);
+      setSelectedIndex((currentSelectedIndex - 1 + totalPoints) % totalPoints);
+    } else if (event.key === "Escape") {
+      setSelectedIndex(void 0);
+      setIsNavigating(false);
+      _optionalChain([chartRef, 'access', _16 => _16.current, 'optionalAccess', _17 => _17.focus, 'call', _18 => _18()]);
+    }
+  }, [totalPoints, selectedIndex, setSelectedIndex, setIsNavigating, chartRef]);
   return {
     tooltipRef,
     onChartFocus,
@@ -183,4 +191,4 @@ var useKeyboardNavigation = ({
 
 
 exports.BaseTooltip = BaseTooltip; exports.AccessibleTooltip = AccessibleTooltip; exports.useKeyboardNavigation = useKeyboardNavigation;
-//# sourceMappingURL=chunk-7HROSZRS.cjs.map
+//# sourceMappingURL=chunk-Y3NNQMAX.cjs.map

package/dist/chunk-Y3NNQMAX.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-Y3NNQMAX.cjs","../src/components/tooltip/base-tooltip.tsx","../src/components/tooltip/base-tooltip.module.scss","../src/components/tooltip/accessible-tooltip.tsx"],"names":["_jsx"],"mappings":"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","file":"/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-Y3NNQMAX.cjs","sourcesContent":[null,"import { formatNumber } from '@automattic/number-formatters';\nimport styles from './base-tooltip.module.scss';\nimport { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from \"react/jsx-runtime\";\nconst DefaultTooltipContent = ({\n  data\n}) => /*#__PURE__*/_jsxs(_Fragment, {\n  children: [data?.label, \": \", data?.valueDisplay || formatNumber(data?.value)]\n});\nexport const BaseTooltip = ({\n  data,\n  top,\n  left,\n  component: Component = DefaultTooltipContent,\n  children,\n  className,\n  style,\n  renderContainer = true\n}) => {\n  const content = children || data && /*#__PURE__*/_jsx(Component, {\n    data: data,\n    className: className\n  });\n  if (!renderContainer) {\n    return content;\n  }\n  return /*#__PURE__*/_jsx(\"div\", {\n    className: styles.tooltip,\n    style: {\n      top,\n      left,\n      ...style\n    },\n    role: \"tooltip\",\n    children: content\n  });\n};","import 'css-chunk:src/components/tooltip/base-tooltip.module.scss';export default {\n  \"tooltip\": \"a8ccharts-OfX6nd\"\n};","import { Tooltip, TooltipContext } from '@visx/xychart';\nimport { useContext, useEffect, useCallback, useMemo } from 'react';\n\n// Type for flattened tooltip data used in individual mode\n\n// Enhanced tooltip with keyboard navigation and accessibility\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const AccessibleTooltip = ({\n  renderTooltip,\n  selectedIndex,\n  tooltipRef,\n  keyboardFocusedClassName,\n  series = [],\n  mode = 'group',\n  ...props\n}) => {\n  const tooltipContext = useContext(TooltipContext);\n  const tooltipData = useMemo(() => {\n    if (mode !== 'individual') return [];\n    if (series.length === 0) return [];\n    const maxDataPoints = Math.max(...series.map(s => s.data.length));\n    const flattened = [];\n\n    // Pattern: [series1[0], series2[0], series3[0], series1[1], series2[1], series3[1], ...]\n    for (let dataPointIndex = 0; dataPointIndex < maxDataPoints; dataPointIndex++) {\n      for (let seriesIndex = 0; seriesIndex < series.length; seriesIndex++) {\n        const seriesData = series[seriesIndex];\n        if (dataPointIndex < seriesData.data.length) {\n          flattened.push({\n            datum: seriesData.data[dataPointIndex],\n            seriesLabel: seriesData.label,\n            seriesIndex,\n            dataPointIndex\n          });\n        }\n      }\n    }\n    return flattened;\n  }, [series, mode]);\n\n  // Handle tooltip highlighting for keyboard navigation\n  useEffect(() => {\n    if (selectedIndex === undefined) {\n      tooltipContext?.hideTooltip();\n      return;\n    }\n    if (mode === 'group') {\n      // Show all series at the selected data point index in single tooltip.\n      series.forEach((s, index) => {\n        if (selectedIndex < s.data.length) {\n          const datum = s.data[selectedIndex];\n          tooltipContext?.showTooltip({\n            datum,\n            key: s.label,\n            index\n          });\n        }\n      });\n    } else if (mode === 'individual') {\n      // Show individual tooltips for each datapoint from each series.\n      if (selectedIndex < tooltipData.length) {\n        const tooltipItem = tooltipData[selectedIndex];\n        tooltipContext?.showTooltip({\n          datum: tooltipItem.datum,\n          key: tooltipItem.seriesLabel,\n          index: tooltipItem.seriesIndex\n        });\n      }\n    }\n\n    // Don't include tooltipContext in the dependency array to avoid loop.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [selectedIndex, tooltipData, series]);\n\n  // Create a focusable renderTooltip that includes accessibility features\n  const focusableRenderTooltip = useMemo(() => {\n    if (!renderTooltip) return undefined;\n    return params => {\n      const tooltipContent = renderTooltip(params);\n      if (selectedIndex !== undefined) {\n        return /*#__PURE__*/_jsx(\"div\", {\n          ref: tooltipRef,\n          tabIndex: -1,\n          role: \"tooltip\",\n          \"aria-atomic\": \"true\",\n          className: keyboardFocusedClassName,\n          children: tooltipContent\n        }, `chart-tooltip-${selectedIndex}`);\n      }\n      return /*#__PURE__*/_jsx(\"div\", {\n        role: \"tooltip\",\n        \"aria-live\": \"polite\",\n        children: tooltipContent\n      });\n    };\n  }, [renderTooltip, selectedIndex, tooltipRef, keyboardFocusedClassName]);\n  return /*#__PURE__*/_jsx(Tooltip, {\n    ...props,\n    renderTooltip: focusableRenderTooltip\n  });\n};\n\n// Keyboard navigation hook for charts\n\nexport const useKeyboardNavigation = ({\n  selectedIndex,\n  setSelectedIndex,\n  isNavigating,\n  setIsNavigating,\n  chartRef,\n  totalPoints\n}) => {\n  // Focus the tooltip as soon as it is rendered\n  const tooltipRef = useCallback(element => {\n    if (element && selectedIndex !== undefined) {\n      element.focus();\n    }\n  }, [selectedIndex]);\n\n  // On each focus of chart, reset the selectedIndex to 0, if keyboard navigation is not already active\n  const onChartFocus = useCallback(() => {\n    if (!isNavigating && selectedIndex !== undefined) {\n      setSelectedIndex(0);\n    }\n  }, [isNavigating, selectedIndex, setSelectedIndex]);\n\n  // On each blur of chart, keyboard navigation should restart from first tooltip\n  const onChartBlur = useCallback(() => {\n    setIsNavigating(false);\n  }, [setIsNavigating]);\n  const onChartKeyDown = useCallback(event => {\n    if (totalPoints === 0) return;\n\n    // Keep focus on the chart if tab is pressed\n    if (event.key === 'Tab') {\n      chartRef.current?.focus();\n      setSelectedIndex(undefined);\n      setIsNavigating(false);\n      return;\n    }\n    const currentSelectedIndex = selectedIndex === undefined ? -1 : selectedIndex;\n    if (currentSelectedIndex + 1 >= totalPoints && ['ArrowRight'].includes(event.key)) {\n      chartRef.current?.focus();\n      setSelectedIndex(undefined);\n      setIsNavigating(false);\n      return;\n    }\n    event.preventDefault();\n    if (['ArrowRight'].includes(event.key)) {\n      setIsNavigating(true);\n      setSelectedIndex((currentSelectedIndex + 1) % totalPoints);\n    } else if (['ArrowLeft'].includes(event.key)) {\n      setIsNavigating(true);\n      setSelectedIndex((currentSelectedIndex - 1 + totalPoints) % totalPoints);\n    } else if (event.key === 'Escape') {\n      setSelectedIndex(undefined);\n      setIsNavigating(false);\n      chartRef.current?.focus();\n    }\n  }, [totalPoints, selectedIndex, setSelectedIndex, setIsNavigating, chartRef]);\n  return {\n    tooltipRef,\n    onChartFocus,\n    onChartBlur,\n    onChartKeyDown\n  };\n};\n\n// Re-export the base Tooltip for backwards compatibility\nexport { Tooltip };"]}

package/dist/components/legend/index.cjs

@@ -1,11 +1,11 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
-var _chunkTVV7ZI7Ccjs = require('../../chunk-TVV7ZI7C.cjs');
+var _chunkEJJO2QNBcjs = require('../../chunk-EJJO2QNB.cjs');
 require('../../chunk-ZVGEDXDP.cjs');
 require('../../chunk-EMMSS5I5.cjs');
 
 
 
-exports.Legend = _chunkTVV7ZI7Ccjs.Legend; exports.useChartLegendItems = _chunkTVV7ZI7Ccjs.useChartLegendItems;
+exports.Legend = _chunkEJJO2QNBcjs.Legend; exports.useChartLegendItems = _chunkEJJO2QNBcjs.useChartLegendItems;
 //# sourceMappingURL=index.cjs.map

package/dist/components/legend/index.css

@@ -1,3 +1,15 @@
+/* esbuild-sass-plugin:css-chunk:src/hooks/use-tooltip-portal-relocator.module.scss */
+.a8ccharts-jCw5dQ {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  overflow: visible;
+  z-index: 1;
+  pointer-events: none;
+}
+
 /* esbuild-sass-plugin:css-chunk:src/components/legend/private/base-legend.module.scss */
 .a8ccharts-AELBvX {
   display: flex;

package/dist/components/legend/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["esbuild-sass-plugin:css-chunk:src/components/legend/private/base-legend.module.scss"],"sourcesContent":[".a8ccharts-AELBvX {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  gap: 16px;\n}\n.a8ccharts-fX8uQe {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.a8ccharts-fX8uQe.a8ccharts-DEe0wg {\n  align-items: flex-start;\n}\n.a8ccharts-fX8uQe.a8ccharts-WBKF9I {\n  align-items: center;\n}\n.a8ccharts-fX8uQe.a8ccharts-JfwMng {\n  align-items: flex-end;\n}\n.a8ccharts-8Y73Kh {\n  position: relative;\n}\n.a8ccharts-8Y73Kh.a8ccharts-DEe0wg {\n  justify-content: flex-start;\n}\n.a8ccharts-8Y73Kh.a8ccharts-WBKF9I {\n  justify-content: center;\n}\n.a8ccharts-8Y73Kh.a8ccharts-JfwMng {\n  justify-content: flex-end;\n}\n.a8ccharts-TVM-IY {\n  position: relative;\n}\n.a8ccharts-TVM-IY.a8ccharts-DEe0wg {\n  justify-content: flex-start;\n}\n.a8ccharts-TVM-IY.a8ccharts-WBKF9I {\n  justify-content: center;\n}\n.a8ccharts-TVM-IY.a8ccharts-JfwMng {\n  justify-content: flex-end;\n}\n\n.a8ccharts-Vflwq8 {\n  display: flex;\n  align-items: center;\n  font-size: 0.875rem;\n}\n.a8ccharts-qGsavM {\n  cursor: pointer;\n  user-select: none;\n  transition: opacity 0.2s ease;\n}\n.a8ccharts-qGsavM:hover {\n  opacity: 0.8;\n}\n.a8ccharts-qGsavM:focus {\n  outline: 2px solid currentColor;\n  outline-offset: 2px;\n  border-radius: 4px;\n}\n.a8ccharts-qGsavM:focus:not(:focus-visible) {\n  outline: none;\n}\n.a8ccharts-ZtDY-Q {\n  opacity: 0.4;\n}\n.a8ccharts-ZtDY-Q .a8ccharts-2H65Kr {\n  text-decoration: line-through;\n}\n\n.a8ccharts-2H65Kr {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  /* Text wrapping is handled at the text level, not the label container */\n}\n\n.a8ccharts-faSDBI {\n  overflow-wrap: break-word;\n  white-space: normal;\n  hyphens: auto;\n}\n.a8ccharts-FISUIO {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  flex-shrink: 1;\n  min-width: 0;\n}\n\n.a8ccharts-DTZlT- {\n  font-weight: 500;\n  flex-shrink: 0;\n}"],"mappings":";AAAA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,aAAW;AACX,OAAK;AACP;AACA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,OAAK;AACP;AACA,CALC,gBAKgB,CAAC;AAChB,eAAa;AACf;AACA,CARC,gBAQgB,CAAC;AAChB,eAAa;AACf;AACA,CAXC,gBAWgB,CAAC;AAChB,eAAa;AACf;AACA,CAAC;AACC,YAAU;AACZ;AACA,CAHC,gBAGgB,CAZC;AAahB,mBAAiB;AACnB;AACA,CANC,gBAMgB,CAZC;AAahB,mBAAiB;AACnB;AACA,CATC,gBASgB,CAZC;AAahB,mBAAiB;AACnB;AACA,CAAC;AACC,YAAU;AACZ;AACA,CAHC,gBAGgB,CAxBC;AAyBhB,mBAAiB;AACnB;AACA,CANC,gBAMgB,CAxBC;AAyBhB,mBAAiB;AACnB;AACA,CATC,gBASgB,CAxBC;AAyBhB,mBAAiB;AACnB;AAEA,CAAC;AACC,WAAS;AACT,eAAa;AACb,aAAW;AACb;AACA,CAAC;AACC,UAAQ;AACR,eAAa;AACb,cAAY,QAAQ,KAAK;AAC3B;AACA,CALC,gBAKgB;AACf,WAAS;AACX;AACA,CARC,gBAQgB;AACf,WAAS,IAAI,MAAM;AACnB,kBAAgB;AAChB,iBAAe;AACjB;AACA,CAbC,gBAagB,MAAM,KAAK;AAC1B,WAAS;AACX;AACA,CAAC;AACC,WAAS;AACX;AACA,CAHC,iBAGiB,CAAC;AACjB,mBAAiB;AACnB;AAEA,CAJmB;AAKjB,WAAS;AACT,eAAa;AACb,OAAK;AAEP;AAEA,CAAC;AACC,iBAAe;AACf,eAAa;AACb,WAAS;AACX;AACA,CAAC;AACC,eAAa;AACb,YAAU;AACV,iBAAe;AACf,eAAa;AACb,aAAW;AACb;AAEA,CAAC;AACC,eAAa;AACb,eAAa;AACf;","names":[]}
+{"version":3,"sources":["esbuild-sass-plugin:css-chunk:src/hooks/use-tooltip-portal-relocator.module.scss","esbuild-sass-plugin:css-chunk:src/components/legend/private/base-legend.module.scss"],"sourcesContent":[".a8ccharts-jCw5dQ {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 0;\n  height: 0;\n  overflow: visible;\n  z-index: 1;\n  pointer-events: none;\n}",".a8ccharts-AELBvX {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  gap: 16px;\n}\n.a8ccharts-fX8uQe {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.a8ccharts-fX8uQe.a8ccharts-DEe0wg {\n  align-items: flex-start;\n}\n.a8ccharts-fX8uQe.a8ccharts-WBKF9I {\n  align-items: center;\n}\n.a8ccharts-fX8uQe.a8ccharts-JfwMng {\n  align-items: flex-end;\n}\n.a8ccharts-8Y73Kh {\n  position: relative;\n}\n.a8ccharts-8Y73Kh.a8ccharts-DEe0wg {\n  justify-content: flex-start;\n}\n.a8ccharts-8Y73Kh.a8ccharts-WBKF9I {\n  justify-content: center;\n}\n.a8ccharts-8Y73Kh.a8ccharts-JfwMng {\n  justify-content: flex-end;\n}\n.a8ccharts-TVM-IY {\n  position: relative;\n}\n.a8ccharts-TVM-IY.a8ccharts-DEe0wg {\n  justify-content: flex-start;\n}\n.a8ccharts-TVM-IY.a8ccharts-WBKF9I {\n  justify-content: center;\n}\n.a8ccharts-TVM-IY.a8ccharts-JfwMng {\n  justify-content: flex-end;\n}\n\n.a8ccharts-Vflwq8 {\n  display: flex;\n  align-items: center;\n  font-size: 0.875rem;\n}\n.a8ccharts-qGsavM {\n  cursor: pointer;\n  user-select: none;\n  transition: opacity 0.2s ease;\n}\n.a8ccharts-qGsavM:hover {\n  opacity: 0.8;\n}\n.a8ccharts-qGsavM:focus {\n  outline: 2px solid currentColor;\n  outline-offset: 2px;\n  border-radius: 4px;\n}\n.a8ccharts-qGsavM:focus:not(:focus-visible) {\n  outline: none;\n}\n.a8ccharts-ZtDY-Q {\n  opacity: 0.4;\n}\n.a8ccharts-ZtDY-Q .a8ccharts-2H65Kr {\n  text-decoration: line-through;\n}\n\n.a8ccharts-2H65Kr {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  /* Text wrapping is handled at the text level, not the label container */\n}\n\n.a8ccharts-faSDBI {\n  overflow-wrap: break-word;\n  white-space: normal;\n  hyphens: auto;\n}\n.a8ccharts-FISUIO {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  flex-shrink: 1;\n  min-width: 0;\n}\n\n.a8ccharts-DTZlT- {\n  font-weight: 500;\n  flex-shrink: 0;\n}"],"mappings":";AAAA,CAAC;AACC,YAAU;AACV,OAAK;AACL,QAAM;AACN,SAAO;AACP,UAAQ;AACR,YAAU;AACV,WAAS;AACT,kBAAgB;AAClB;;;ACTA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,aAAW;AACX,OAAK;AACP;AACA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,OAAK;AACP;AACA,CALC,gBAKgB,CAAC;AAChB,eAAa;AACf;AACA,CARC,gBAQgB,CAAC;AAChB,eAAa;AACf;AACA,CAXC,gBAWgB,CAAC;AAChB,eAAa;AACf;AACA,CAAC;AACC,YAAU;AACZ;AACA,CAHC,gBAGgB,CAZC;AAahB,mBAAiB;AACnB;AACA,CANC,gBAMgB,CAZC;AAahB,mBAAiB;AACnB;AACA,CATC,gBASgB,CAZC;AAahB,mBAAiB;AACnB;AACA,CAAC;AACC,YAAU;AACZ;AACA,CAHC,gBAGgB,CAxBC;AAyBhB,mBAAiB;AACnB;AACA,CANC,gBAMgB,CAxBC;AAyBhB,mBAAiB;AACnB;AACA,CATC,gBASgB,CAxBC;AAyBhB,mBAAiB;AACnB;AAEA,CAAC;AACC,WAAS;AACT,eAAa;AACb,aAAW;AACb;AACA,CAAC;AACC,UAAQ;AACR,eAAa;AACb,cAAY,QAAQ,KAAK;AAC3B;AACA,CALC,gBAKgB;AACf,WAAS;AACX;AACA,CARC,gBAQgB;AACf,WAAS,IAAI,MAAM;AACnB,kBAAgB;AAChB,iBAAe;AACjB;AACA,CAbC,gBAagB,MAAM,KAAK;AAC1B,WAAS;AACX;AACA,CAAC;AACC,WAAS;AACX;AACA,CAHC,iBAGiB,CAAC;AACjB,mBAAiB;AACnB;AAEA,CAJmB;AAKjB,WAAS;AACT,eAAa;AACb,OAAK;AAEP;AAEA,CAAC;AACC,iBAAe;AACf,eAAa;AACb,WAAS;AACX;AACA,CAAC;AACC,eAAa;AACb,YAAU;AACV,iBAAe;AACf,eAAa;AACb,aAAW;AACb;AAEA,CAAC;AACC,eAAa;AACb,eAAa;AACf;","names":[]}

package/dist/components/legend/index.js

@@ -1,7 +1,7 @@
 import {
   Legend,
   useChartLegendItems
-} from "../../chunk-H34CJSR6.js";
+} from "../../chunk-32ESS4MV.js";
 import "../../chunk-TE63Y5PX.js";
 import "../../chunk-G3PMV62Z.js";
 export {

package/dist/components/tooltip/index.cjs

@@ -2,11 +2,11 @@
 
 
 
-var _chunk7HROSZRScjs = require('../../chunk-7HROSZRS.cjs');
+var _chunkY3NNQMAXcjs = require('../../chunk-Y3NNQMAX.cjs');
 require('../../chunk-EMMSS5I5.cjs');
 
 
 
 
-exports.AccessibleTooltip = _chunk7HROSZRScjs.AccessibleTooltip; exports.BaseTooltip = _chunk7HROSZRScjs.BaseTooltip; exports.useKeyboardNavigation = _chunk7HROSZRScjs.useKeyboardNavigation;
+exports.AccessibleTooltip = _chunkY3NNQMAXcjs.AccessibleTooltip; exports.BaseTooltip = _chunkY3NNQMAXcjs.BaseTooltip; exports.useKeyboardNavigation = _chunkY3NNQMAXcjs.useKeyboardNavigation;
 //# sourceMappingURL=index.cjs.map

package/dist/components/tooltip/index.js

@@ -2,7 +2,7 @@ import {
   AccessibleTooltip,
   BaseTooltip,
   useKeyboardNavigation
-} from "../../chunk-5XI443YP.js";
+} from "../../chunk-BPYKWMI7.js";
 import "../../chunk-G3PMV62Z.js";
 export {
   AccessibleTooltip,

package/dist/components/trend-indicator/index.cjs

@@ -1,8 +1,8 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkSRXJLAKGcjs = require('../../chunk-SRXJLAKG.cjs');
+var _chunkI2276W3Icjs = require('../../chunk-I2276W3I.cjs');
 require('../../chunk-EMMSS5I5.cjs');
 
 
-exports.TrendIndicator = _chunkSRXJLAKGcjs.TrendIndicator;
+exports.TrendIndicator = _chunkI2276W3Icjs.TrendIndicator;
 //# sourceMappingURL=index.cjs.map

package/dist/components/trend-indicator/index.js

@@ -1,6 +1,6 @@
 import {
   TrendIndicator
-} from "../../chunk-MMDLXS6O.js";
+} from "../../chunk-XWYZIFZW.js";
 import "../../chunk-G3PMV62Z.js";
 export {
   TrendIndicator

package/dist/hooks/index.cjs

@@ -10,7 +10,8 @@
 
 
 
-var _chunkTVV7ZI7Ccjs = require('../chunk-TVV7ZI7C.cjs');
+
+var _chunkEJJO2QNBcjs = require('../chunk-EJJO2QNB.cjs');
 require('../chunk-ZVGEDXDP.cjs');
 require('../chunk-EMMSS5I5.cjs');
 
@@ -25,5 +26,6 @@ require('../chunk-EMMSS5I5.cjs');
 
 
 
-exports.useChartDataTransform = _chunkTVV7ZI7Ccjs.useChartDataTransform; exports.useChartMargin = _chunkTVV7ZI7Ccjs.useChartMargin; exports.useChartMouseHandler = _chunkTVV7ZI7Ccjs.useChartMouseHandler; exports.useDeepMemo = _chunkTVV7ZI7Ccjs.useDeepMemo; exports.useElementHeight = _chunkTVV7ZI7Ccjs.useElementHeight; exports.useHasLegendChild = _chunkTVV7ZI7Ccjs.useHasLegendChild; exports.useInteractiveLegendData = _chunkTVV7ZI7Ccjs.useInteractiveLegendData; exports.usePrefersReducedMotion = _chunkTVV7ZI7Ccjs.usePrefersReducedMotion; exports.useTextTruncation = _chunkTVV7ZI7Ccjs.useTextTruncation; exports.useXYChartTheme = _chunkTVV7ZI7Ccjs.useXYChartTheme; exports.useZeroValueDisplay = _chunkTVV7ZI7Ccjs.useZeroValueDisplay;
+
+exports.useChartDataTransform = _chunkEJJO2QNBcjs.useChartDataTransform; exports.useChartMargin = _chunkEJJO2QNBcjs.useChartMargin; exports.useChartMouseHandler = _chunkEJJO2QNBcjs.useChartMouseHandler; exports.useDeepMemo = _chunkEJJO2QNBcjs.useDeepMemo; exports.useElementHeight = _chunkEJJO2QNBcjs.useElementHeight; exports.useHasLegendChild = _chunkEJJO2QNBcjs.useHasLegendChild; exports.useInteractiveLegendData = _chunkEJJO2QNBcjs.useInteractiveLegendData; exports.usePrefersReducedMotion = _chunkEJJO2QNBcjs.usePrefersReducedMotion; exports.useTextTruncation = _chunkEJJO2QNBcjs.useTextTruncation; exports.useTooltipPortalRelocator = _chunkEJJO2QNBcjs.useTooltipPortalRelocator; exports.useXYChartTheme = _chunkEJJO2QNBcjs.useXYChartTheme; exports.useZeroValueDisplay = _chunkEJJO2QNBcjs.useZeroValueDisplay;
 //# sourceMappingURL=index.cjs.map

package/dist/hooks/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/hooks/index.cjs"],"names":[],"mappings":"AAAA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF,yDAA8B;AAC9B,iCAA8B;AAC9B,iCAA8B;AAC9B;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF,8tBAAC","file":"/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/hooks/index.cjs"}
+{"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/hooks/index.cjs"],"names":[],"mappings":"AAAA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF,yDAA8B;AAC9B,iCAA8B;AAC9B,iCAA8B;AAC9B;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF,+yBAAC","file":"/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/hooks/index.cjs"}

package/dist/hooks/index.css

@@ -1,3 +1,15 @@
+/* esbuild-sass-plugin:css-chunk:src/hooks/use-tooltip-portal-relocator.module.scss */
+.a8ccharts-jCw5dQ {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  overflow: visible;
+  z-index: 1;
+  pointer-events: none;
+}
+
 /* esbuild-sass-plugin:css-chunk:src/components/legend/private/base-legend.module.scss */
 .a8ccharts-AELBvX {
   display: flex;

package/dist/hooks/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["esbuild-sass-plugin:css-chunk:src/components/legend/private/base-legend.module.scss"],"sourcesContent":[".a8ccharts-AELBvX {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  gap: 16px;\n}\n.a8ccharts-fX8uQe {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.a8ccharts-fX8uQe.a8ccharts-DEe0wg {\n  align-items: flex-start;\n}\n.a8ccharts-fX8uQe.a8ccharts-WBKF9I {\n  align-items: center;\n}\n.a8ccharts-fX8uQe.a8ccharts-JfwMng {\n  align-items: flex-end;\n}\n.a8ccharts-8Y73Kh {\n  position: relative;\n}\n.a8ccharts-8Y73Kh.a8ccharts-DEe0wg {\n  justify-content: flex-start;\n}\n.a8ccharts-8Y73Kh.a8ccharts-WBKF9I {\n  justify-content: center;\n}\n.a8ccharts-8Y73Kh.a8ccharts-JfwMng {\n  justify-content: flex-end;\n}\n.a8ccharts-TVM-IY {\n  position: relative;\n}\n.a8ccharts-TVM-IY.a8ccharts-DEe0wg {\n  justify-content: flex-start;\n}\n.a8ccharts-TVM-IY.a8ccharts-WBKF9I {\n  justify-content: center;\n}\n.a8ccharts-TVM-IY.a8ccharts-JfwMng {\n  justify-content: flex-end;\n}\n\n.a8ccharts-Vflwq8 {\n  display: flex;\n  align-items: center;\n  font-size: 0.875rem;\n}\n.a8ccharts-qGsavM {\n  cursor: pointer;\n  user-select: none;\n  transition: opacity 0.2s ease;\n}\n.a8ccharts-qGsavM:hover {\n  opacity: 0.8;\n}\n.a8ccharts-qGsavM:focus {\n  outline: 2px solid currentColor;\n  outline-offset: 2px;\n  border-radius: 4px;\n}\n.a8ccharts-qGsavM:focus:not(:focus-visible) {\n  outline: none;\n}\n.a8ccharts-ZtDY-Q {\n  opacity: 0.4;\n}\n.a8ccharts-ZtDY-Q .a8ccharts-2H65Kr {\n  text-decoration: line-through;\n}\n\n.a8ccharts-2H65Kr {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  /* Text wrapping is handled at the text level, not the label container */\n}\n\n.a8ccharts-faSDBI {\n  overflow-wrap: break-word;\n  white-space: normal;\n  hyphens: auto;\n}\n.a8ccharts-FISUIO {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  flex-shrink: 1;\n  min-width: 0;\n}\n\n.a8ccharts-DTZlT- {\n  font-weight: 500;\n  flex-shrink: 0;\n}"],"mappings":";AAAA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,aAAW;AACX,OAAK;AACP;AACA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,OAAK;AACP;AACA,CALC,gBAKgB,CAAC;AAChB,eAAa;AACf;AACA,CARC,gBAQgB,CAAC;AAChB,eAAa;AACf;AACA,CAXC,gBAWgB,CAAC;AAChB,eAAa;AACf;AACA,CAAC;AACC,YAAU;AACZ;AACA,CAHC,gBAGgB,CAZC;AAahB,mBAAiB;AACnB;AACA,CANC,gBAMgB,CAZC;AAahB,mBAAiB;AACnB;AACA,CATC,gBASgB,CAZC;AAahB,mBAAiB;AACnB;AACA,CAAC;AACC,YAAU;AACZ;AACA,CAHC,gBAGgB,CAxBC;AAyBhB,mBAAiB;AACnB;AACA,CANC,gBAMgB,CAxBC;AAyBhB,mBAAiB;AACnB;AACA,CATC,gBASgB,CAxBC;AAyBhB,mBAAiB;AACnB;AAEA,CAAC;AACC,WAAS;AACT,eAAa;AACb,aAAW;AACb;AACA,CAAC;AACC,UAAQ;AACR,eAAa;AACb,cAAY,QAAQ,KAAK;AAC3B;AACA,CALC,gBAKgB;AACf,WAAS;AACX;AACA,CARC,gBAQgB;AACf,WAAS,IAAI,MAAM;AACnB,kBAAgB;AAChB,iBAAe;AACjB;AACA,CAbC,gBAagB,MAAM,KAAK;AAC1B,WAAS;AACX;AACA,CAAC;AACC,WAAS;AACX;AACA,CAHC,iBAGiB,CAAC;AACjB,mBAAiB;AACnB;AAEA,CAJmB;AAKjB,WAAS;AACT,eAAa;AACb,OAAK;AAEP;AAEA,CAAC;AACC,iBAAe;AACf,eAAa;AACb,WAAS;AACX;AACA,CAAC;AACC,eAAa;AACb,YAAU;AACV,iBAAe;AACf,eAAa;AACb,aAAW;AACb;AAEA,CAAC;AACC,eAAa;AACb,eAAa;AACf;","names":[]}
+{"version":3,"sources":["esbuild-sass-plugin:css-chunk:src/hooks/use-tooltip-portal-relocator.module.scss","esbuild-sass-plugin:css-chunk:src/components/legend/private/base-legend.module.scss"],"sourcesContent":[".a8ccharts-jCw5dQ {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 0;\n  height: 0;\n  overflow: visible;\n  z-index: 1;\n  pointer-events: none;\n}",".a8ccharts-AELBvX {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  gap: 16px;\n}\n.a8ccharts-fX8uQe {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.a8ccharts-fX8uQe.a8ccharts-DEe0wg {\n  align-items: flex-start;\n}\n.a8ccharts-fX8uQe.a8ccharts-WBKF9I {\n  align-items: center;\n}\n.a8ccharts-fX8uQe.a8ccharts-JfwMng {\n  align-items: flex-end;\n}\n.a8ccharts-8Y73Kh {\n  position: relative;\n}\n.a8ccharts-8Y73Kh.a8ccharts-DEe0wg {\n  justify-content: flex-start;\n}\n.a8ccharts-8Y73Kh.a8ccharts-WBKF9I {\n  justify-content: center;\n}\n.a8ccharts-8Y73Kh.a8ccharts-JfwMng {\n  justify-content: flex-end;\n}\n.a8ccharts-TVM-IY {\n  position: relative;\n}\n.a8ccharts-TVM-IY.a8ccharts-DEe0wg {\n  justify-content: flex-start;\n}\n.a8ccharts-TVM-IY.a8ccharts-WBKF9I {\n  justify-content: center;\n}\n.a8ccharts-TVM-IY.a8ccharts-JfwMng {\n  justify-content: flex-end;\n}\n\n.a8ccharts-Vflwq8 {\n  display: flex;\n  align-items: center;\n  font-size: 0.875rem;\n}\n.a8ccharts-qGsavM {\n  cursor: pointer;\n  user-select: none;\n  transition: opacity 0.2s ease;\n}\n.a8ccharts-qGsavM:hover {\n  opacity: 0.8;\n}\n.a8ccharts-qGsavM:focus {\n  outline: 2px solid currentColor;\n  outline-offset: 2px;\n  border-radius: 4px;\n}\n.a8ccharts-qGsavM:focus:not(:focus-visible) {\n  outline: none;\n}\n.a8ccharts-ZtDY-Q {\n  opacity: 0.4;\n}\n.a8ccharts-ZtDY-Q .a8ccharts-2H65Kr {\n  text-decoration: line-through;\n}\n\n.a8ccharts-2H65Kr {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  /* Text wrapping is handled at the text level, not the label container */\n}\n\n.a8ccharts-faSDBI {\n  overflow-wrap: break-word;\n  white-space: normal;\n  hyphens: auto;\n}\n.a8ccharts-FISUIO {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  flex-shrink: 1;\n  min-width: 0;\n}\n\n.a8ccharts-DTZlT- {\n  font-weight: 500;\n  flex-shrink: 0;\n}"],"mappings":";AAAA,CAAC;AACC,YAAU;AACV,OAAK;AACL,QAAM;AACN,SAAO;AACP,UAAQ;AACR,YAAU;AACV,WAAS;AACT,kBAAgB;AAClB;;;ACTA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,aAAW;AACX,OAAK;AACP;AACA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,OAAK;AACP;AACA,CALC,gBAKgB,CAAC;AAChB,eAAa;AACf;AACA,CARC,gBAQgB,CAAC;AAChB,eAAa;AACf;AACA,CAXC,gBAWgB,CAAC;AAChB,eAAa;AACf;AACA,CAAC;AACC,YAAU;AACZ;AACA,CAHC,gBAGgB,CAZC;AAahB,mBAAiB;AACnB;AACA,CANC,gBAMgB,CAZC;AAahB,mBAAiB;AACnB;AACA,CATC,gBASgB,CAZC;AAahB,mBAAiB;AACnB;AACA,CAAC;AACC,YAAU;AACZ;AACA,CAHC,gBAGgB,CAxBC;AAyBhB,mBAAiB;AACnB;AACA,CANC,gBAMgB,CAxBC;AAyBhB,mBAAiB;AACnB;AACA,CATC,gBASgB,CAxBC;AAyBhB,mBAAiB;AACnB;AAEA,CAAC;AACC,WAAS;AACT,eAAa;AACb,aAAW;AACb;AACA,CAAC;AACC,UAAQ;AACR,eAAa;AACb,cAAY,QAAQ,KAAK;AAC3B;AACA,CALC,gBAKgB;AACf,WAAS;AACX;AACA,CARC,gBAQgB;AACf,WAAS,IAAI,MAAM;AACnB,kBAAgB;AAChB,iBAAe;AACjB;AACA,CAbC,gBAagB,MAAM,KAAK;AAC1B,WAAS;AACX;AACA,CAAC;AACC,WAAS;AACX;AACA,CAHC,iBAGiB,CAAC;AACjB,mBAAiB;AACnB;AAEA,CAJmB;AAKjB,WAAS;AACT,eAAa;AACb,OAAK;AAEP;AAEA,CAAC;AACC,iBAAe;AACf,eAAa;AACb,WAAS;AACX;AACA,CAAC;AACC,eAAa;AACb,YAAU;AACV,iBAAe;AACf,eAAa;AACb,aAAW;AACb;AAEA,CAAC;AACC,eAAa;AACb,eAAa;AACf;","names":[]}

package/dist/hooks/index.d.cts

@@ -1,4 +1,4 @@
-import { MouseEvent, ReactNode } from 'react';
+import { MouseEvent, ReactNode, RefObject } from 'react';
 import { D as DataPoint, j as SeriesData, k as SeriesDataOptions, B as BaseChartProps, c as DataPointDate } from '../types-BCFQlzTM.cjs';
 import * as _visx_xychart from '@visx/xychart';
 import { XYChartTheme } from '@visx/xychart';
@@ -236,4 +236,30 @@ declare const useInteractiveLegendData: <T extends DataPointWithPercentage>({ da
  */
 declare function usePrefersReducedMotion(): boolean;
 
-export { useChartDataTransform, useChartMargin, useChartMouseHandler, useDeepMemo, useElementHeight, useHasLegendChild, useInteractiveLegendData, usePrefersReducedMotion, useTextTruncation, useXYChartTheme, useZeroValueDisplay };
+/**
+ * Relocates visx chart tooltip portals from `document.body` into a target
+ * container element. This allows the tooltips to participate in the same CSS
+ * stacking context as other elements in the container (e.g. a sticky header),
+ * so z-index ordering works correctly between them.
+ *
+ * The relocated portal divs use `position: fixed` at the viewport origin to
+ * preserve the tooltip coordinate system (visx calculates positions relative
+ * to the viewport).
+ *
+ * Because the visx Portal class calls `document.body.removeChild(node)` during
+ * unmount, we patch `document.body.removeChild` to gracefully handle nodes that
+ * were moved out of body. Without this, React throws a "not a child of this
+ * node" error when tooltips unmount.
+ *
+ * **Important:** The container and its ancestors must not have CSS `transform`,
+ * `perspective`, or `filter` properties set, as these create a new containing
+ * block for `position: fixed` children, breaking viewport-relative positioning.
+ *
+ * @param containerRef - Ref to the element that portals should be relocated into.
+ *                     The element referenced here, or one of its ancestors,
+ *                     should establish the desired stacking context (for example
+ *                     by using position and z-index).
+ */
+declare function useTooltipPortalRelocator(containerRef: RefObject<HTMLElement | null> | undefined): void;
+
+export { useChartDataTransform, useChartMargin, useChartMouseHandler, useDeepMemo, useElementHeight, useHasLegendChild, useInteractiveLegendData, usePrefersReducedMotion, useTextTruncation, useTooltipPortalRelocator, useXYChartTheme, useZeroValueDisplay };

package/dist/hooks/index.d.ts

@@ -1,4 +1,4 @@
-import { MouseEvent, ReactNode } from 'react';
+import { MouseEvent, ReactNode, RefObject } from 'react';
 import { D as DataPoint, j as SeriesData, k as SeriesDataOptions, B as BaseChartProps, c as DataPointDate } from '../types-BCFQlzTM.js';
 import * as _visx_xychart from '@visx/xychart';
 import { XYChartTheme } from '@visx/xychart';
@@ -236,4 +236,30 @@ declare const useInteractiveLegendData: <T extends DataPointWithPercentage>({ da
  */
 declare function usePrefersReducedMotion(): boolean;
 
-export { useChartDataTransform, useChartMargin, useChartMouseHandler, useDeepMemo, useElementHeight, useHasLegendChild, useInteractiveLegendData, usePrefersReducedMotion, useTextTruncation, useXYChartTheme, useZeroValueDisplay };
+/**
+ * Relocates visx chart tooltip portals from `document.body` into a target
+ * container element. This allows the tooltips to participate in the same CSS
+ * stacking context as other elements in the container (e.g. a sticky header),
+ * so z-index ordering works correctly between them.
+ *
+ * The relocated portal divs use `position: fixed` at the viewport origin to
+ * preserve the tooltip coordinate system (visx calculates positions relative
+ * to the viewport).
+ *
+ * Because the visx Portal class calls `document.body.removeChild(node)` during
+ * unmount, we patch `document.body.removeChild` to gracefully handle nodes that
+ * were moved out of body. Without this, React throws a "not a child of this
+ * node" error when tooltips unmount.
+ *
+ * **Important:** The container and its ancestors must not have CSS `transform`,
+ * `perspective`, or `filter` properties set, as these create a new containing
+ * block for `position: fixed` children, breaking viewport-relative positioning.
+ *
+ * @param containerRef - Ref to the element that portals should be relocated into.
+ *                     The element referenced here, or one of its ancestors,
+ *                     should establish the desired stacking context (for example
+ *                     by using position and z-index).
+ */
+declare function useTooltipPortalRelocator(containerRef: RefObject<HTMLElement | null> | undefined): void;
+
+export { useChartDataTransform, useChartMargin, useChartMouseHandler, useDeepMemo, useElementHeight, useHasLegendChild, useInteractiveLegendData, usePrefersReducedMotion, useTextTruncation, useTooltipPortalRelocator, useXYChartTheme, useZeroValueDisplay };

package/dist/hooks/index.js

@@ -8,9 +8,10 @@ import {
   useInteractiveLegendData,
   usePrefersReducedMotion,
   useTextTruncation,
+  useTooltipPortalRelocator,
   useXYChartTheme,
   useZeroValueDisplay
-} from "../chunk-H34CJSR6.js";
+} from "../chunk-32ESS4MV.js";
 import "../chunk-TE63Y5PX.js";
 import "../chunk-G3PMV62Z.js";
 export {
@@ -23,6 +24,7 @@ export {
   useInteractiveLegendData,
   usePrefersReducedMotion,
   useTextTruncation,
+  useTooltipPortalRelocator,
   useXYChartTheme,
   useZeroValueDisplay
 };

package/dist/index.cjs

@@ -1,50 +1,50 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
-var _chunkODF5O5PVcjs = require('./chunk-ODF5O5PV.cjs');
+var _chunkFIFSYVN6cjs = require('./chunk-FIFSYVN6.cjs');
 
 
 
-var _chunkIZWC33YNcjs = require('./chunk-IZWC33YN.cjs');
+var _chunkJL4ZKKZUcjs = require('./chunk-JL4ZKKZU.cjs');
 require('./chunk-7OZEQ5HE.cjs');
 
 
 
-var _chunkLHWRZMF7cjs = require('./chunk-LHWRZMF7.cjs');
-require('./chunk-OTZT3MC2.cjs');
-require('./chunk-HIWNB5PK.cjs');
+var _chunkTKPK4RFScjs = require('./chunk-TKPK4RFS.cjs');
+require('./chunk-2A34OA5O.cjs');
+require('./chunk-RCY6XLGU.cjs');
 
 
 
-var _chunkXVMXWV3Ccjs = require('./chunk-XVMXWV3C.cjs');
+var _chunkLTPJPIDPcjs = require('./chunk-LTPJPIDP.cjs');
 
 
 
-var _chunkKOF32DBLcjs = require('./chunk-KOF32DBL.cjs');
+var _chunkFY325WQ4cjs = require('./chunk-FY325WQ4.cjs');
 
 
-var _chunkSRXJLAKGcjs = require('./chunk-SRXJLAKG.cjs');
+var _chunkI2276W3Icjs = require('./chunk-I2276W3I.cjs');
 
 
 
-var _chunkYYQ4IK5Vcjs = require('./chunk-YYQ4IK5V.cjs');
+var _chunkQ6G3BGCLcjs = require('./chunk-Q6G3BGCL.cjs');
 
 
 
-var _chunk7UJPVCMBcjs = require('./chunk-7UJPVCMB.cjs');
-require('./chunk-SH32YSZO.cjs');
-require('./chunk-I5467ZJ5.cjs');
+var _chunkIHESL7H5cjs = require('./chunk-IHESL7H5.cjs');
 
 
-var _chunk7HROSZRScjs = require('./chunk-7HROSZRS.cjs');
+var _chunkY3NNQMAXcjs = require('./chunk-Y3NNQMAX.cjs');
 
 
-var _chunkGRYNIPWHcjs = require('./chunk-GRYNIPWH.cjs');
+var _chunkXCXAWMJQcjs = require('./chunk-XCXAWMJQ.cjs');
+require('./chunk-SH32YSZO.cjs');
+require('./chunk-I5467ZJ5.cjs');
 
 
 
-var _chunkMFRS2PEYcjs = require('./chunk-MFRS2PEY.cjs');
-require('./chunk-NW3RUYK2.cjs');
+var _chunkNGHXTIUEcjs = require('./chunk-NGHXTIUE.cjs');
+require('./chunk-7QDEU3KN.cjs');
 
 
 
@@ -53,7 +53,7 @@ require('./chunk-NW3RUYK2.cjs');
 
 
 
-var _chunkTVV7ZI7Ccjs = require('./chunk-TVV7ZI7C.cjs');
+var _chunkEJJO2QNBcjs = require('./chunk-EJJO2QNB.cjs');
 require('./chunk-ZVGEDXDP.cjs');
 require('./chunk-EMMSS5I5.cjs');
 
@@ -84,5 +84,5 @@ require('./chunk-EMMSS5I5.cjs');
 
 
 
-exports.BarChart = _chunk7UJPVCMBcjs.BarChartResponsive; exports.BarChartUnresponsive = _chunk7UJPVCMBcjs.BarChart; exports.BarListChart = _chunkYYQ4IK5Vcjs.BarListChartResponsive; exports.BarListChartUnresponsive = _chunkYYQ4IK5Vcjs.BarListChart; exports.BaseTooltip = _chunk7HROSZRScjs.BaseTooltip; exports.ConversionFunnelChart = _chunkGRYNIPWHcjs.ConversionFunnelChartWithProvider; exports.GeoChart = _chunkMFRS2PEYcjs.GeoChartResponsive; exports.GeoChartUnresponsive = _chunkMFRS2PEYcjs.GeoChartWithProvider; exports.GlobalChartsContext = _chunkTVV7ZI7Ccjs.GlobalChartsContext; exports.GlobalChartsProvider = _chunkTVV7ZI7Ccjs.GlobalChartsProvider; exports.LeaderboardChart = _chunkODF5O5PVcjs.LeaderboardChartResponsive; exports.LeaderboardChartUnresponsive = _chunkODF5O5PVcjs.LeaderboardChart; exports.Legend = _chunkTVV7ZI7Ccjs.Legend; exports.LineChart = _chunkKOF32DBLcjs.LineChartResponsive; exports.LineChartUnresponsive = _chunkKOF32DBLcjs.LineChart; exports.PieChart = _chunkIZWC33YNcjs.PieChartResponsive; exports.PieChartUnresponsive = _chunkIZWC33YNcjs.PieChart; exports.PieSemiCircleChart = _chunkLHWRZMF7cjs.PieSemiCircleChartResponsive; exports.PieSemiCircleChartUnresponsive = _chunkLHWRZMF7cjs.PieSemiCircleChart; exports.Sparkline = _chunkXVMXWV3Ccjs.Sparkline; exports.SparklineUnresponsive = _chunkXVMXWV3Ccjs.SparklineUnresponsive; exports.ThemeProvider = _chunkTVV7ZI7Ccjs.GlobalChartsProvider; exports.TrendIndicator = _chunkSRXJLAKGcjs.TrendIndicator; exports.defaultTheme = _chunkTVV7ZI7Ccjs.defaultTheme; exports.useChartLegendItems = _chunkTVV7ZI7Ccjs.useChartLegendItems; exports.useGlobalChartsContext = _chunkTVV7ZI7Ccjs.useGlobalChartsContext; exports.useGlobalChartsTheme = _chunkTVV7ZI7Ccjs.useGlobalChartsTheme;
+exports.BarChart = _chunkIHESL7H5cjs.BarChartResponsive; exports.BarChartUnresponsive = _chunkIHESL7H5cjs.BarChart; exports.BarListChart = _chunkQ6G3BGCLcjs.BarListChartResponsive; exports.BarListChartUnresponsive = _chunkQ6G3BGCLcjs.BarListChart; exports.BaseTooltip = _chunkY3NNQMAXcjs.BaseTooltip; exports.ConversionFunnelChart = _chunkXCXAWMJQcjs.ConversionFunnelChartWithProvider; exports.GeoChart = _chunkNGHXTIUEcjs.GeoChartResponsive; exports.GeoChartUnresponsive = _chunkNGHXTIUEcjs.GeoChartWithProvider; exports.GlobalChartsContext = _chunkEJJO2QNBcjs.GlobalChartsContext; exports.GlobalChartsProvider = _chunkEJJO2QNBcjs.GlobalChartsProvider; exports.LeaderboardChart = _chunkFIFSYVN6cjs.LeaderboardChartResponsive; exports.LeaderboardChartUnresponsive = _chunkFIFSYVN6cjs.LeaderboardChart; exports.Legend = _chunkEJJO2QNBcjs.Legend; exports.LineChart = _chunkFY325WQ4cjs.LineChartResponsive; exports.LineChartUnresponsive = _chunkFY325WQ4cjs.LineChart; exports.PieChart = _chunkJL4ZKKZUcjs.PieChartResponsive; exports.PieChartUnresponsive = _chunkJL4ZKKZUcjs.PieChart; exports.PieSemiCircleChart = _chunkTKPK4RFScjs.PieSemiCircleChartResponsive; exports.PieSemiCircleChartUnresponsive = _chunkTKPK4RFScjs.PieSemiCircleChart; exports.Sparkline = _chunkLTPJPIDPcjs.Sparkline; exports.SparklineUnresponsive = _chunkLTPJPIDPcjs.SparklineUnresponsive; exports.ThemeProvider = _chunkEJJO2QNBcjs.GlobalChartsProvider; exports.TrendIndicator = _chunkI2276W3Icjs.TrendIndicator; exports.defaultTheme = _chunkEJJO2QNBcjs.defaultTheme; exports.useChartLegendItems = _chunkEJJO2QNBcjs.useChartLegendItems; exports.useGlobalChartsContext = _chunkEJJO2QNBcjs.useGlobalChartsContext; exports.useGlobalChartsTheme = _chunkEJJO2QNBcjs.useGlobalChartsTheme;
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/index.cjs"],"names":[],"mappings":"AAAA;AACE;AACA;AACF,wDAA6B;AAC7B;AACE;AACA;AACF,wDAA6B;AAC7B,gCAA6B;AAC7B;AACE;AACA;AACF,wDAA6B;AAC7B,gCAA6B;AAC7B,gCAA6B;AAC7B;AACE;AACA;AACF,wDAA6B;AAC7B;AACE;AACA;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACA;AACF,wDAA6B;AAC7B;AACE;AACA;AACF,wDAA6B;AAC7B,gCAA6B;AAC7B,gCAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACA;AACF,wDAA6B;AAC7B,gCAA6B;AAC7B;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACF,wDAA6B;AAC7B,gCAA6B;AAC7B,gCAA6B;AAC7B;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF,utDAAC","file":"/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/index.cjs"}
+{"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/index.cjs"],"names":[],"mappings":"AAAA;AACE;AACA;AACF,wDAA6B;AAC7B;AACE;AACA;AACF,wDAA6B;AAC7B,gCAA6B;AAC7B;AACE;AACA;AACF,wDAA6B;AAC7B,gCAA6B;AAC7B,gCAA6B;AAC7B;AACE;AACA;AACF,wDAA6B;AAC7B;AACE;AACA;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACA;AACF,wDAA6B;AAC7B;AACE;AACA;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B,gCAA6B;AAC7B,gCAA6B;AAC7B;AACE;AACA;AACF,wDAA6B;AAC7B,gCAA6B;AAC7B;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACF,wDAA6B;AAC7B,gCAA6B;AAC7B,gCAA6B;AAC7B;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF,utDAAC","file":"/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/index.cjs"}

package/dist/index.css

@@ -1,3 +1,15 @@
+/* esbuild-sass-plugin:css-chunk:src/hooks/use-tooltip-portal-relocator.module.scss */
+.a8ccharts-jCw5dQ {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  overflow: visible;
+  z-index: 1;
+  pointer-events: none;
+}
+
 /* esbuild-sass-plugin:css-chunk:src/components/legend/private/base-legend.module.scss */
 .a8ccharts-AELBvX {
   display: flex;
@@ -182,7 +194,8 @@
   display: flex;
   gap: 16px;
   align-items: flex-end;
-  height: 200px;
+  flex: 1;
+  min-height: 200px;
   width: 100%;
 }
 .a8ccharts-VqFY0l {