@automattic/charts 1.3.1 → 1.4.0

package/CHANGELOG.md

@@ -5,6 +5,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.4.0] - 2026-05-14
+### Changed
+- Charts: expose a source-side `./style.css` alias so monorepo consumers can resolve the import without a prior build. [#48682]
+- Charts: expose tickValues on AxisOptions and nice on ScaleOptions so callers can force exact axis ticks. [#48722]
+- Update package dependencies. [#48695]
+- Update package dependencies. [#48696]
+
+### Removed
+- Charts: remove the `useTooltipPortalRelocator` hook and the `portalContainer` prop on `GlobalChartsProvider`. The relocator (added in #47118 / 0.56.4) caused tooltip glyphs and the tooltip box to drift away from the chart line by exactly the page scroll offset on scrolled pages. [#48617]
+
 ## [1.3.1] - 2026-05-11
 ### Changed
 - Update dependencies. [#43811]
@@ -820,6 +830,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fixed lints following ESLint rule changes for TS [#40584]
 - Fixing a bug in Chart storybook data. [#40640]
 
+[1.4.0]: https://github.com/Automattic/charts/compare/v1.3.1...v1.4.0
 [1.3.1]: https://github.com/Automattic/charts/compare/v1.3.0...v1.3.1
 [1.3.0]: https://github.com/Automattic/charts/compare/v1.2.1...v1.3.0
 [1.2.1]: https://github.com/Automattic/charts/compare/v1.2.0...v1.2.1

package/dist/index.cjs

@@ -495,103 +495,6 @@ var useSingleChartContext = useChartInstanceContext;
 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(node2) {
-  return node2 instanceof HTMLDivElement && node2.parentElement === document.body && !node2.id && !node2.className && node2.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 = (node2) => {
-      if (!isVisxPortalNode(node2)) {
-        return;
-      }
-      node2.style.opacity = "0";
-      node2.classList.add(use_tooltip_portal_relocator_module_default.relocatedPortal);
-      const { activeElement } = node2.ownerDocument;
-      const focusedElement = activeElement instanceof HTMLElement && node2.contains(activeElement) ? activeElement : null;
-      container.insertBefore(node2, container.firstChild);
-      relocatedNodes.add(node2);
-      instanceNodes.add(node2);
-      if (focusedElement) {
-        focusedElement.focus();
-      }
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-          node2.style.opacity = "";
-        });
-      });
-    };
-    installRemoveChildPatch();
-    for (const child of Array.from(document.body.children)) {
-      relocateNode(child);
-    }
-    const observer = new MutationObserver((mutations) => {
-      for (const mutation of mutations) {
-        for (const node2 of mutation.addedNodes) {
-          relocateNode(node2);
-        }
-      }
-    });
-    observer.observe(document.body, { childList: true });
-    return () => {
-      observer.disconnect();
-      for (const node2 of instanceNodes) {
-        if (node2 instanceof HTMLElement) {
-          node2.classList.remove(use_tooltip_portal_relocator_module_default.relocatedPortal);
-        }
-        if (node2.parentNode === container) {
-          document.body.appendChild(node2);
-        }
-        relocatedNodes.delete(node2);
-      }
-      instanceNodes.clear();
-      uninstallRemoveChildPatch();
-    };
-  }, [containerRef]);
-}
-
 // src/utils/create-composition.ts
 function attachSubComponents(Chart2, subComponents) {
   return Object.assign(Chart2, subComponents);
@@ -722,14 +625,14 @@ var getLongestTickWidth = (ticks, formatTick, labelStyle) => {
 
 // src/utils/get-styles.ts
 function getSeriesLineStyles(seriesData, index, providerTheme) {
-  const themeSemanticLineStyle = _optionalChain([providerTheme, 'optionalAccess', _6 => _6.lineChart, 'optionalAccess', _7 => _7.lineStyles, 'optionalAccess', _8 => _8[_optionalChain([seriesData, 'access', _9 => _9.options, 'optionalAccess', _10 => _10.type])]]);
-  const themeSeriesLineStyle = _optionalChain([providerTheme, 'optionalAccess', _11 => _11.seriesLineStyles, 'optionalAccess', _12 => _12[index % providerTheme.seriesLineStyles.length]]);
-  return _nullishCoalesce(_nullishCoalesce(_nullishCoalesce(_optionalChain([seriesData, 'access', _13 => _13.options, 'optionalAccess', _14 => _14.seriesLineStyle]), () => ( themeSemanticLineStyle)), () => ( themeSeriesLineStyle)), () => ( {}));
+  const themeSemanticLineStyle = _optionalChain([providerTheme, 'optionalAccess', _2 => _2.lineChart, 'optionalAccess', _3 => _3.lineStyles, 'optionalAccess', _4 => _4[_optionalChain([seriesData, 'access', _5 => _5.options, 'optionalAccess', _6 => _6.type])]]);
+  const themeSeriesLineStyle = _optionalChain([providerTheme, 'optionalAccess', _7 => _7.seriesLineStyles, 'optionalAccess', _8 => _8[index % providerTheme.seriesLineStyles.length]]);
+  return _nullishCoalesce(_nullishCoalesce(_nullishCoalesce(_optionalChain([seriesData, 'access', _9 => _9.options, 'optionalAccess', _10 => _10.seriesLineStyle]), () => ( themeSemanticLineStyle)), () => ( themeSeriesLineStyle)), () => ( {}));
 }
 function getItemShapeStyles(series, index, theme, legendShape) {
-  const seriesShapeStyles = _nullishCoalesce(_optionalChain([series, 'access', _15 => _15.options, 'optionalAccess', _16 => _16.legendShapeStyle]), () => ( {}));
+  const seriesShapeStyles = _nullishCoalesce(_optionalChain([series, 'access', _11 => _11.options, 'optionalAccess', _12 => _12.legendShapeStyle]), () => ( {}));
   const lineStyles = legendShape === "line" ? getSeriesLineStyles(series, index, theme) : {};
-  const themeShapeStyles = _optionalChain([theme, 'access', _17 => _17.legend, 'optionalAccess', _18 => _18.shapeStyles, 'optionalAccess', _19 => _19[index]]);
+  const themeShapeStyles = _optionalChain([theme, 'access', _13 => _13.legend, 'optionalAccess', _14 => _14.shapeStyles, 'optionalAccess', _15 => _15[index]]);
   const itemShapeStyles = {
     ...seriesShapeStyles,
     ...lineStyles
@@ -1096,13 +999,11 @@ var _jsxruntime = require('react/jsx-runtime');
 var GlobalChartsContext = /* @__PURE__ */ _react.createContext.call(void 0, null);
 var GlobalChartsProvider = ({
   children,
-  theme,
-  portalContainer
+  theme
 }) => {
   const [charts, setCharts] = _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 ? mergeThemes(defaultTheme, theme) : defaultTheme;
   }, [theme]);
@@ -1202,12 +1103,12 @@ var GlobalChartsProvider = ({
     const isPointPercentageData = data && typeof data === "object" && "value" in data && typeof data.value === "number" && !("data" in data);
     return {
       color: resolveColor({
-        group: _optionalChain([data, 'optionalAccess', _20 => _20.group]),
+        group: _optionalChain([data, 'optionalAccess', _16 => _16.group]),
         index,
-        overrideColor: overrideColor || isSeriesData && _optionalChain([data, 'optionalAccess', _21 => _21.options, 'optionalAccess', _22 => _22.stroke]) || isPointPercentageData && _optionalChain([data, 'optionalAccess', _23 => _23.color])
+        overrideColor: overrideColor || isSeriesData && _optionalChain([data, 'optionalAccess', _17 => _17.options, 'optionalAccess', _18 => _18.stroke]) || isPointPercentageData && _optionalChain([data, 'optionalAccess', _19 => _19.color])
       }),
       lineStyles: isSeriesData ? getSeriesLineStyles(data, index, providerTheme) : {},
-      glyph: _optionalChain([providerTheme, 'access', _24 => _24.glyphs, 'optionalAccess', _25 => _25[index]]),
+      glyph: _optionalChain([providerTheme, 'access', _20 => _20.glyphs, 'optionalAccess', _21 => _21[index]]),
       shapeStyles: isSeriesData ? getItemShapeStyles(data, index, providerTheme, legendShape) : {}
     };
   }, [providerTheme, resolveColor]);
@@ -1298,7 +1199,7 @@ var useDeepMemo = (value) => {
 var useXYChartTheme = (data) => {
   const theme = useGlobalChartsTheme();
   return _react.useMemo.call(void 0, () => {
-    const seriesColors = (_nullishCoalesce(data, () => ( []))).map((series) => _optionalChain([series, 'access', _26 => _26.options, 'optionalAccess', _27 => _27.stroke])).filter((color) => Boolean(color));
+    const seriesColors = (_nullishCoalesce(data, () => ( []))).map((series) => _optionalChain([series, 'access', _22 => _22.options, 'optionalAccess', _23 => _23.stroke])).filter((color) => Boolean(color));
     return _xychart.buildChartTheme.call(void 0, {
       ...theme,
       colors: [...seriesColors, ..._nullishCoalesce(theme.colors, () => ( []))]
@@ -1310,7 +1211,7 @@ var useXYChartTheme = (data) => {
 
 var useChartDataTransform = (data) => {
   return _react.useMemo.call(void 0, () => {
-    const firstPoint = _optionalChain([data, 'optionalAccess', _28 => _28[0], 'optionalAccess', _29 => _29.data, 'optionalAccess', _30 => _30[0]]);
+    const firstPoint = _optionalChain([data, 'optionalAccess', _24 => _24[0], 'optionalAccess', _25 => _25.data, 'optionalAccess', _26 => _26[0]]);
     const hasDateProperties = firstPoint && ("date" in firstPoint || "dateString" in firstPoint);
     if (!hasDateProperties) {
       return data;
@@ -1348,9 +1249,9 @@ var DEFAULT_FONT_SIZE = 12;
 var DEFAULT_TICK_LENGTH = 8;
 var DEFAULT_Y_TICK_WIDTH = 40;
 var getXAxisLabelMetrics = (theme, orientation) => {
-  const xAxisStyles = orientation === "top" ? _optionalChain([theme, 'access', _31 => _31.axisStyles, 'optionalAccess', _32 => _32.x, 'optionalAccess', _33 => _33.top]) : _optionalChain([theme, 'access', _34 => _34.axisStyles, 'optionalAccess', _35 => _35.x, 'optionalAccess', _36 => _36.bottom]);
-  const fontSize = resolveFontSize(_optionalChain([xAxisStyles, 'optionalAccess', _37 => _37.axisLabel, 'optionalAccess', _38 => _38.fontSize])) || resolveFontSize(_optionalChain([theme, 'access', _39 => _39.svgLabelSmall, 'optionalAccess', _40 => _40.fontSize])) || DEFAULT_FONT_SIZE;
-  const tickLength = _nullishCoalesce(_optionalChain([xAxisStyles, 'optionalAccess', _41 => _41.tickLength]), () => ( DEFAULT_TICK_LENGTH));
+  const xAxisStyles = orientation === "top" ? _optionalChain([theme, 'access', _27 => _27.axisStyles, 'optionalAccess', _28 => _28.x, 'optionalAccess', _29 => _29.top]) : _optionalChain([theme, 'access', _30 => _30.axisStyles, 'optionalAccess', _31 => _31.x, 'optionalAccess', _32 => _32.bottom]);
+  const fontSize = resolveFontSize(_optionalChain([xAxisStyles, 'optionalAccess', _33 => _33.axisLabel, 'optionalAccess', _34 => _34.fontSize])) || resolveFontSize(_optionalChain([theme, 'access', _35 => _35.svgLabelSmall, 'optionalAccess', _36 => _36.fontSize])) || DEFAULT_FONT_SIZE;
+  const tickLength = _nullishCoalesce(_optionalChain([xAxisStyles, 'optionalAccess', _37 => _37.tickLength]), () => ( DEFAULT_TICK_LENGTH));
   return {
     fontSize,
     tickLength
@@ -1360,7 +1261,10 @@ 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', _42 => _42.axis, 'optionalAccess', _43 => _43.y, 'optionalAccess', _44 => _44.tickFormat, 'call', _45 => _45(d.date.getTime(), 0, [])]));
+      return allDataPoints.map((d) => d.label || _optionalChain([options, 'access', _38 => _38.axis, 'optionalAccess', _39 => _39.y, 'optionalAccess', _40 => _40.tickFormat, 'call', _41 => _41(d.date.getTime(), 0, [])]));
+    }
+    if (_optionalChain([options, 'access', _42 => _42.axis, 'optionalAccess', _43 => _43.y, 'optionalAccess', _44 => _44.tickValues, 'optionalAccess', _45 => _45.length])) {
+      return options.axis.y.tickValues;
     }
     const minY = Math.min(...allDataPoints.map((d) => d.value));
     const maxY = Math.max(...allDataPoints.map((d) => d.value));