@beydesign/storybook 0.2.18 → 0.2.19

package/dist/stories/UI/TabMenu.js

@@ -32,25 +32,43 @@ export const TabMenu = ({ tabs, activeTab = 0, onTabChange, size = TabMenuSize.m
     const tabRefs = useRef([]);
     const [indicator, setIndicator] = useState(null);
     useLayoutEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
         const measure = () => {
-            const container = containerRef.current;
             const tab = tabRefs.current[activeTab];
-            if (!container || !tab)
+            if (!tab)
                 return;
-            const containerRect = container.getBoundingClientRect();
-            const tabRect = tab.getBoundingClientRect();
+            // Use offset* rather than getBoundingClientRect deltas: they are relative
+            // to the container's padding box, which is exactly the origin an absolutely
+            // positioned child (the indicator) is laid out from. Bounding-rect deltas
+            // would include the container's border and push the highlight 1px off.
             setIndicator({
-                left: tabRect.left - containerRect.left,
-                top: tabRect.top - containerRect.top,
-                width: tabRect.width,
-                height: tabRect.height,
+                left: tab.offsetLeft,
+                top: tab.offsetTop,
+                width: tab.offsetWidth,
+                height: tab.offsetHeight,
             });
         };
         measure();
-        window.addEventListener('resize', measure);
-        return () => window.removeEventListener('resize', measure);
+        // Re-measure whenever the container or a tab changes size (e.g. responsive
+        // reflow) so the highlight tracks the active tab.
+        const resizeObserver = new ResizeObserver(measure);
+        resizeObserver.observe(container);
+        tabRefs.current.forEach((tab) => tab && resizeObserver.observe(tab));
+        // Text metrics — and therefore tab widths — change when the fallback font is
+        // swapped for Figtree, so re-measure once web fonts have finished loading.
+        let cancelled = false;
+        document.fonts?.ready.then(() => {
+            if (!cancelled)
+                measure();
+        });
+        return () => {
+            cancelled = true;
+            resizeObserver.disconnect();
+        };
     }, [activeTab, size, showDividers, tabs]);
-    return (_jsxs(Box, { ref: containerRef, "data-testid": testId, position: 'relative', display: 'inline-flex', flexDirection: 'row', alignItems: 'center', gap: tokens.containerGap, padding: tokens.containerPadding, bgcolor: 'var(--color-background-bg-component)', border: '1px solid var(--color-border-border-component)', borderRadius: 'var(--spacing-tokens-size-in-px-radius-radius-md)', sx: style, children: [indicator && (_jsx(Box, { "aria-hidden": true, position: 'absolute', bgcolor: 'var(--color-background-bg-brand-transparent)', borderRadius: tokens.tabRadius, sx: {
+    return (_jsxs(Box, { ref: containerRef, "data-testid": testId, position: 'relative', display: 'inline-flex', flexDirection: 'row', alignItems: 'center', gap: tokens.containerGap, padding: tokens.containerPadding, bgcolor: 'var(--color-background-bg-component)', border: '1px solid var(--color-border-border-component)', borderRadius: 'var(--spacing-tokens-size-in-px-radius-radius-md)', sx: { boxSizing: 'border-box', ...style }, children: [indicator && (_jsx(Box, { "aria-hidden": true, position: 'absolute', bgcolor: 'var(--color-background-bg-brand-transparent)', borderRadius: tokens.tabRadius, sx: {
                     left: 0,
                     top: 0,
                     width: indicator.width,
@@ -67,6 +85,7 @@ export const TabMenu = ({ tabs, activeTab = 0, onTabChange, size = TabMenuSize.m
                 return (_jsxs(React.Fragment, { children: [showDividers && index > 0 && (_jsx(Box, { width: '1px', height: tokens.dividerHeight, bgcolor: 'var(--color-border-border-divider)', flexShrink: 0, sx: { zIndex: 1 } })), _jsx(Box, { ref: (el) => {
                                 tabRefs.current[index] = el;
                             }, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', position: 'relative', flexShrink: 0, height: tokens.tabHeight, paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-4xl)', paddingY: tokens.tabPaddingY, borderRadius: tokens.tabRadius, onClick: onTabChange ? () => onTabChange(index) : undefined, sx: {
+                                boxSizing: 'border-box',
                                 zIndex: 1,
                                 cursor: onTabChange ? 'pointer' : 'default',
                                 '&:hover': onTabChange && !isActive

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@beydesign/storybook",
   "private": false,
-  "version": "0.2.18",
+  "version": "0.2.19",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",