@astryxdesign/lab 0.7.8-canary.ea33daf → 0.7.8-canary.eb985e5

package/dist/Chart/Chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/Chart/Chart.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,EAEL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAMf,OAAO,KAAK,EAAC,WAAW,EAAa,MAAM,SAAS,CAAC;AAErD;;;;;GAKG;AACH,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;AAEjD,MAAM,WAAW,UAAU;IACzB,0DAA0D;IAC1D,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IAChC;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,qEAAqE;IACrE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+BAA+B;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC9B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3B;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAgBD;;;;;;;;;;;GAWG;AACH,wBAAgB,KAAK,CAAC,EACpB,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,MAAY,EACZ,MAAM,EAAE,cAAc,EACtB,SAAkB,EAClB,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,WAAW,EACpB,WAAmB,EACnB,KAAK,EACL,QAAQ,GACT,EAAE,UAAU,+BA+OZ"}
+{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/Chart/Chart.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,EAEL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAMf,OAAO,KAAK,EAAC,WAAW,EAAa,MAAM,SAAS,CAAC;AAErD;;;;;GAKG;AACH,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;AAEjD,MAAM,WAAW,UAAU;IACzB,0DAA0D;IAC1D,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IAChC;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,qEAAqE;IACrE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+BAA+B;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC9B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3B;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAgBD;;;;;;;;;;;GAWG;AACH,wBAAgB,KAAK,CAAC,EACpB,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,MAAY,EACZ,MAAM,EAAE,cAAc,EACtB,SAAkB,EAClB,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,WAAW,EACpB,WAAmB,EACnB,KAAK,EACL,QAAQ,GACT,EAAE,UAAU,+BAgPZ"}

package/dist/Chart/Chart.js

@@ -73,18 +73,19 @@ export function Chart({
   const containerRef = useRef(null);
   const svgRef = useRef(null);
   const [containerWidth, setContainerWidth] = useState(0);
-  useLayoutEffect(() => {
-    if (!containerRef.current) {
-      return;
-    }
+  const attachContainer = useCallback(container => {
+    containerRef.current = container;
     const observer = new ResizeObserver(entries => {
       const entry = entries[0];
       if (entry) {
         setContainerWidth(entry.contentRect.width);
       }
     });
-    observer.observe(containerRef.current);
-    return () => observer.disconnect();
+    observer.observe(container);
+    return () => {
+      observer.disconnect();
+      containerRef.current = null;
+    };
   }, []);
 
   // Block scroll/zoom on the container when interactive.
@@ -236,7 +237,7 @@ export function Chart({
   const accessibleLabel = label ?? `Chart of ${yKeys.join(', ')} by ${xKey}`;
   const showDataTable = data.length > 0 && data.length * Math.max(yKeys.length, 1) <= MAX_TABLE_POINTS;
   return /*#__PURE__*/_jsxs("div", {
-    ref: containerRef,
+    ref: attachContainer,
     style: containerStyle,
     children: [containerWidth > 0 && /*#__PURE__*/_jsxs("svg", {
       ref: svgRef,

package/dist/Sankey/SankeyChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SankeyChart.d.ts","sourceRoot":"","sources":["../../src/Sankey/SankeyChart.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,EACL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAC,eAAe,EAAE,eAAe,EAAE,YAAY,EAAC,MAAM,SAAS,CAAC;AAE5E,MAAM,WAAW,gBAAgB;IAC/B,uBAAuB;IACvB,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,uBAAuB;IACvB,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAsDD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,OAAO,EACP,MAAY,EACZ,SAAc,EACd,OAAY,EACZ,SAAS,EACT,cAAoB,EACpB,KAAsB,EACtB,QAAQ,GACT,EAAE,gBAAgB,+BAsHlB;yBAjIe,WAAW"}
+{"version":3,"file":"SankeyChart.d.ts","sourceRoot":"","sources":["../../src/Sankey/SankeyChart.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAiC,MAAM,OAAO,CAAC;AAIrE,OAAO,KAAK,EAAC,eAAe,EAAE,eAAe,EAAE,YAAY,EAAC,MAAM,SAAS,CAAC;AAE5E,MAAM,WAAW,gBAAgB;IAC/B,uBAAuB;IACvB,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,uBAAuB;IACvB,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAsDD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,OAAO,EACP,MAAY,EACZ,SAAc,EACd,OAAY,EACZ,SAAS,EACT,cAAoB,EACpB,KAAsB,EACtB,QAAQ,GACT,EAAE,gBAAgB,+BAiHlB;yBA5He,WAAW"}

package/dist/Sankey/SankeyChart.js

@@ -13,7 +13,7 @@
  * small graphs are mirrored in a visually hidden From/To/Value table.
  */
 
-import { useMemo, useRef, useState, useLayoutEffect } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { VisuallyHidden } from '@astryxdesign/core/VisuallyHidden';
 import { SankeyProvider } from "./SankeyContext.js";
 import { computeLayout } from "./layout.js";
@@ -100,18 +100,13 @@ export function SankeyChart({
   label = 'Sankey chart',
   children
 }) {
-  const containerRef = useRef(null);
   const [containerWidth, setContainerWidth] = useState(0);
-  useLayoutEffect(() => {
-    const el = containerRef.current;
-    if (!el) {
-      return;
-    }
+  const observeContainerWidth = useCallback(container => {
     const ro = new ResizeObserver(entries => {
       const w = entries[0]?.contentRect.width ?? 0;
       setContainerWidth(w);
     });
-    ro.observe(el);
+    ro.observe(container);
     return () => ro.disconnect();
   }, []);
   const colCount = useMemo(() => resolveColumnCount(columns, nodes, links), [columns, nodes, links]);
@@ -149,7 +144,7 @@ export function SankeyChart({
   const nodeLabelById = useMemo(() => new Map(nodes.map(n => [n.id, n.label || n.id])), [nodes]);
   const showDataTable = links.length > 0 && links.length <= MAX_TABLE_LINKS;
   return /*#__PURE__*/_jsxs("div", {
-    ref: containerRef,
+    ref: observeContainerWidth,
     style: {
       width: '100%'
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/lab",
-  "version": "0.7.8-canary.ea33daf",
+  "version": "0.7.8-canary.eb985e5",
   "description": "Experimental Astryx components — published to npm only under the @canary dist-tag for early testing; never released as a stable (latest) version.",
   "author": "Meta Open Source",
   "license": "MIT",
@@ -49,7 +49,7 @@
   },
   "peerDependencies": {
     "@stylexjs/stylex": ">=0.10.0",
-    "@astryxdesign/core": "0.7.8-canary.ea33daf",
+    "@astryxdesign/core": "0.7.8-canary.eb985e5",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0"
   },
@@ -59,9 +59,9 @@
     "d3-shape": "^3.2.0"
   },
   "devDependencies": {
-    "@astryxdesign/a11y-spec": "0.7.8-canary.ea33daf",
-    "@astryxdesign/cli": "0.7.8-canary.ea33daf",
-    "@astryxdesign/interaction-harness": "0.7.8-canary.ea33daf",
+    "@astryxdesign/a11y-spec": "0.7.8-canary.eb985e5",
+    "@astryxdesign/cli": "0.7.8-canary.eb985e5",
+    "@astryxdesign/interaction-harness": "0.7.8-canary.eb985e5",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",

package/src/Chart/Chart.test.tsx

@@ -171,6 +171,37 @@ describe('Chart measurement gate', () => {
   });
 });
 
+describe('Chart container observation', () => {
+  it('observes its container while mounted and stops on unmount', () => {
+    const observed = new Set<Element>();
+    vi.stubGlobal(
+      'ResizeObserver',
+      class {
+        observe(element: Element) {
+          observed.add(element);
+        }
+        unobserve(element: Element) {
+          observed.delete(element);
+        }
+        disconnect() {
+          observed.clear();
+        }
+      },
+    );
+    const {container, unmount} = render(
+      <Chart data={data} xKey="month" yKeys={['revenue']}>
+        <g />
+      </Chart>,
+    );
+    const chartContainer = container.firstElementChild;
+    expect(chartContainer).not.toBeNull();
+    expect(observed.has(chartContainer!)).toBe(true);
+
+    unmount();
+    expect(observed.size).toBe(0);
+  });
+});
+
 describe('useChart', () => {
   it('throws a clear error when used outside <Chart>', () => {
     // React reports the uncaught render error via console.error; keep the

package/src/Chart/Chart.tsx

@@ -134,18 +134,19 @@ export function Chart({
   const svgRef = useRef<SVGSVGElement>(null);
   const [containerWidth, setContainerWidth] = useState(0);
 
-  useLayoutEffect(() => {
-    if (!containerRef.current) {
-      return;
-    }
+  const attachContainer = useCallback((container: HTMLDivElement) => {
+    containerRef.current = container;
     const observer = new ResizeObserver(entries => {
       const entry = entries[0];
       if (entry) {
         setContainerWidth(entry.contentRect.width);
       }
     });
-    observer.observe(containerRef.current);
-    return () => observer.disconnect();
+    observer.observe(container);
+    return () => {
+      observer.disconnect();
+      containerRef.current = null;
+    };
   }, []);
 
   // Block scroll/zoom on the container when interactive.
@@ -320,7 +321,7 @@ export function Chart({
     data.length * Math.max(yKeys.length, 1) <= MAX_TABLE_POINTS;
 
   return (
-    <div ref={containerRef} style={containerStyle}>
+    <div ref={attachContainer} style={containerStyle}>
       {containerWidth > 0 && (
         <svg
           ref={svgRef}

package/src/Sankey/SankeyChart.test.tsx

@@ -76,6 +76,37 @@ describe('SankeyChart scroll container', () => {
   });
 });
 
+describe('SankeyChart container observation', () => {
+  it('observes its container while mounted and stops on unmount', () => {
+    const observed = new Set<Element>();
+    vi.stubGlobal(
+      'ResizeObserver',
+      class {
+        observe(element: Element) {
+          observed.add(element);
+        }
+        unobserve(element: Element) {
+          observed.delete(element);
+        }
+        disconnect() {
+          observed.clear();
+        }
+      },
+    );
+    const {container, unmount} = render(
+      <SankeyChart nodes={nodes} links={links}>
+        <SankeyNode />
+      </SankeyChart>,
+    );
+    const chartContainer = container.firstElementChild;
+    expect(chartContainer).not.toBeNull();
+    expect(observed.has(chartContainer!)).toBe(true);
+
+    unmount();
+    expect(observed.size).toBe(0);
+  });
+});
+
 describe('SankeyChart accessible name', () => {
   it('names the svg when the chart does not scroll', () => {
     render(

package/src/Sankey/SankeyChart.tsx

@@ -13,13 +13,7 @@
  * small graphs are mirrored in a visually hidden From/To/Value table.
  */
 
-import {
-  type ReactNode,
-  useMemo,
-  useRef,
-  useState,
-  useLayoutEffect,
-} from 'react';
+import {type ReactNode, useCallback, useMemo, useState} from 'react';
 import {VisuallyHidden} from '@astryxdesign/core/VisuallyHidden';
 import {SankeyProvider} from './SankeyContext';
 import {computeLayout} from './layout';
@@ -154,19 +148,14 @@ export function SankeyChart({
   label = 'Sankey chart',
   children,
 }: SankeyChartProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
   const [containerWidth, setContainerWidth] = useState(0);
 
-  useLayoutEffect(() => {
-    const el = containerRef.current;
-    if (!el) {
-      return;
-    }
+  const observeContainerWidth = useCallback((container: HTMLDivElement) => {
     const ro = new ResizeObserver(entries => {
       const w = entries[0]?.contentRect.width ?? 0;
       setContainerWidth(w);
     });
-    ro.observe(el);
+    ro.observe(container);
     return () => ro.disconnect();
   }, []);
 
@@ -225,7 +214,7 @@ export function SankeyChart({
   const showDataTable = links.length > 0 && links.length <= MAX_TABLE_LINKS;
 
   return (
-    <div ref={containerRef} style={{width: '100%'}}>
+    <div ref={observeContainerWidth} style={{width: '100%'}}>
       {ctx && (
         <div
           role={needsScroll ? 'group' : undefined}