@flytedan/flytebot-design-system 0.67.1 → 0.67.2

package/dist/index.cjs

@@ -2828,7 +2828,7 @@ function Tabs({ tabs = [], value, onChange, className = "", ...rest }) {
     observer.observe(el);
     return () => observer.disconnect();
   }, [measure, tabs]);
-  React16.useLayoutEffect(() => {
+  const revealActive = React16.useCallback(() => {
     const el = strip.current;
     const active = el?.querySelector('[aria-selected="true"]');
     if (!el || !active || el.scrollWidth <= el.clientWidth) return;
@@ -2837,7 +2837,16 @@ function Tabs({ tabs = [], value, onChange, className = "", ...rest }) {
     if (tab.left < box.left + FADE_WIDTH) el.scrollLeft += tab.left - box.left - FADE_WIDTH;
     else if (tab.right > box.right - FADE_WIDTH) el.scrollLeft += tab.right - box.right + FADE_WIDTH;
     measure();
-  }, [value, measure]);
+  }, [measure]);
+  React16.useLayoutEffect(revealActive, [value, revealActive]);
+  const tabKeys = tabs.map((t) => typeof t === "string" ? t : t.value).join(",");
+  React16.useLayoutEffect(() => {
+    const el = strip.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(revealActive);
+    for (const tab of Array.from(el.children)) observer.observe(tab);
+    return () => observer.disconnect();
+  }, [tabKeys, revealActive]);
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "div",
     {