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

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/lab",
-  "version": "0.7.8-canary.ea33daf",
+  "version": "0.7.8-canary.f10bc91",
   "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.f10bc91",
     "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.f10bc91",
+    "@astryxdesign/cli": "0.7.8-canary.f10bc91",
+    "@astryxdesign/interaction-harness": "0.7.8-canary.f10bc91",
     "@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}