@ai-matrx/canvas 0.7.1 → 0.7.2

package/dist/react.js

@@ -3154,15 +3154,30 @@ function TabStrip({ tabs, activeItemId }) {
   const canvas = useCanvas();
   const strip = useRef7(null);
   const [width, setWidth] = useState5(0);
+  const read = useRef7(() => {
+  });
   useIsoLayoutEffect4(() => {
     const el = strip.current;
     if (!el) return void 0;
-    const read = () => setWidth(Math.floor(el.getBoundingClientRect().width));
-    read();
-    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(read);
+    let live = true;
+    const measure = () => {
+      if (live) setWidth(Math.floor(el.getBoundingClientRect().width));
+    };
+    read.current = measure;
+    measure();
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
     observer?.observe(el);
-    return () => observer?.disconnect();
+    void document.fonts?.ready?.then(measure);
+    const frame2 = typeof requestAnimationFrame === "undefined" ? 0 : requestAnimationFrame(() => requestAnimationFrame(measure));
+    return () => {
+      live = false;
+      observer?.disconnect();
+      if (frame2 && typeof cancelAnimationFrame !== "undefined") cancelAnimationFrame(frame2);
+    };
   }, []);
+  useIsoLayoutEffect4(() => {
+    read.current();
+  }, [tabs.length]);
   const activeIndex = Math.max(0, tabs.findIndex((tab) => tab.itemId === activeItemId));
   const fit = fitCanvasTabs(tabs.length, activeIndex, width);
   const shown = tabs.slice(fit.start, fit.end);