@zag-js/tabs 1.27.1 → 1.29.0

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
 import * as _zag_js_core from '@zag-js/core';
 import { EventObject, Machine, Service } from '@zag-js/core';
-import { RequiredBy, DirectionProperty, CommonProperties, PropTypes, NormalizeProps } from '@zag-js/types';
+import { RequiredBy, DirectionProperty, CommonProperties, Rect, PropTypes, NormalizeProps } from '@zag-js/types';
 
 declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "list" | "trigger" | "content" | "indicator">;
 
@@ -95,13 +95,7 @@ type TabsSchema = {
         ssr: boolean;
         value: string | null;
         focusedValue: string | null;
-        indicatorTransition: boolean;
-        indicatorRect: {
-            left: string;
-            top: string;
-            width: string;
-            height: string;
-        };
+        indicatorRect: Rect | null;
     };
     refs: {
         indicatorCleanup: VoidFunction | null | undefined;

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
 import * as _zag_js_core from '@zag-js/core';
 import { EventObject, Machine, Service } from '@zag-js/core';
-import { RequiredBy, DirectionProperty, CommonProperties, PropTypes, NormalizeProps } from '@zag-js/types';
+import { RequiredBy, DirectionProperty, CommonProperties, Rect, PropTypes, NormalizeProps } from '@zag-js/types';
 
 declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "list" | "trigger" | "content" | "indicator">;
 
@@ -95,13 +95,7 @@ type TabsSchema = {
         ssr: boolean;
         value: string | null;
         focusedValue: string | null;
-        indicatorTransition: boolean;
-        indicatorRect: {
-            left: string;
-            top: string;
-            width: string;
-            height: string;
-        };
+        indicatorRect: Rect | null;
     };
     refs: {
         indicatorCleanup: VoidFunction | null | undefined;

package/dist/index.js

@@ -11,12 +11,12 @@ var anatomy = anatomy$1.createAnatomy("tabs").parts("root", "list", "trigger", "
 var parts = anatomy.build();
 var getRootId = (ctx) => ctx.ids?.root ?? `tabs:${ctx.id}`;
 var getListId = (ctx) => ctx.ids?.list ?? `tabs:${ctx.id}:list`;
-var getContentId = (ctx, id) => ctx.ids?.content?.(id) ?? `tabs:${ctx.id}:content-${id}`;
-var getTriggerId = (ctx, id) => ctx.ids?.trigger?.(id) ?? `tabs:${ctx.id}:trigger-${id}`;
+var getContentId = (ctx, value) => ctx.ids?.content?.(value) ?? `tabs:${ctx.id}:content-${value}`;
+var getTriggerId = (ctx, value) => ctx.ids?.trigger?.(value) ?? `tabs:${ctx.id}:trigger-${value}`;
 var getIndicatorId = (ctx) => ctx.ids?.indicator ?? `tabs:${ctx.id}:indicator`;
 var getListEl = (ctx) => ctx.getById(getListId(ctx));
-var getContentEl = (ctx, id) => ctx.getById(getContentId(ctx, id));
-var getTriggerEl = (ctx, id) => ctx.getById(getTriggerId(ctx, id));
+var getContentEl = (ctx, value) => ctx.getById(getContentId(ctx, value));
+var getTriggerEl = (ctx, value) => value != null ? ctx.getById(getTriggerId(ctx, value)) : null;
 var getIndicatorEl = (ctx) => ctx.getById(getIndicatorId(ctx));
 var getElements = (ctx) => {
   const ownerId = CSS.escape(getListId(ctx));
@@ -28,21 +28,15 @@ var getLastTriggerEl = (ctx) => utils.last(getElements(ctx));
 var getNextTriggerEl = (ctx, opts) => domQuery.nextById(getElements(ctx), getTriggerId(ctx, opts.value), opts.loopFocus);
 var getPrevTriggerEl = (ctx, opts) => domQuery.prevById(getElements(ctx), getTriggerId(ctx, opts.value), opts.loopFocus);
 var getOffsetRect = (el) => ({
-  left: el?.offsetLeft ?? 0,
-  top: el?.offsetTop ?? 0,
+  x: el?.offsetLeft ?? 0,
+  y: el?.offsetTop ?? 0,
   width: el?.offsetWidth ?? 0,
   height: el?.offsetHeight ?? 0
 });
-var getRectById = (ctx, id) => {
-  const tab = domQuery.itemById(getElements(ctx), getTriggerId(ctx, id));
-  return resolveRect(getOffsetRect(tab));
+var getRectByValue = (ctx, value) => {
+  const tab = domQuery.itemById(getElements(ctx), getTriggerId(ctx, value));
+  return getOffsetRect(tab);
 };
-var resolveRect = (rect) => ({
-  width: `${rect.width}px`,
-  height: `${rect.height}px`,
-  left: `${rect.left}px`,
-  top: `${rect.top}px`
-});
 
 // src/tabs.connect.ts
 function connect(service, normalize) {
@@ -207,23 +201,23 @@ function connect(service, normalize) {
       });
     },
     getIndicatorProps() {
-      const indicatorRect = context.get("indicatorRect");
-      const indicatorTransition = context.get("indicatorTransition");
+      const rect = context.get("indicatorRect");
       return normalize.element({
         id: getIndicatorId(scope),
         ...parts.indicator.attrs,
         dir: prop("dir"),
         "data-orientation": prop("orientation"),
+        hidden: rect == null,
         style: {
           "--transition-property": "left, right, top, bottom, width, height",
-          "--left": indicatorRect.left,
-          "--top": indicatorRect.top,
-          "--width": indicatorRect.width,
-          "--height": indicatorRect.height,
+          "--left": utils.toPx(rect?.x),
+          "--top": utils.toPx(rect?.y),
+          "--width": utils.toPx(rect?.width),
+          "--height": utils.toPx(rect?.height),
           position: "absolute",
           willChange: "var(--transition-property)",
           transitionProperty: "var(--transition-property)",
-          transitionDuration: indicatorTransition ? "var(--transition-duration, 150ms)" : "0ms",
+          transitionDuration: "var(--transition-duration, 150ms)",
           transitionTimingFunction: "var(--transition-timing-function)",
           [isHorizontal ? "left" : "top"]: isHorizontal ? "var(--left)" : "var(--top)"
         }
@@ -267,15 +261,14 @@ var machine = createMachine({
         }
       })),
       ssr: bindable(() => ({ defaultValue: true })),
-      indicatorTransition: bindable(() => ({ defaultValue: false })),
       indicatorRect: bindable(() => ({
-        defaultValue: { left: "0px", top: "0px", width: "0px", height: "0px" }
+        defaultValue: null
       }))
     };
   },
   watch({ context, prop, track, action }) {
     track([() => context.get("value")], () => {
-      action(["allowIndicatorTransition", "syncIndicatorRect", "syncTabIndex", "navigateIfNeeded"]);
+      action(["syncIndicatorRect", "syncTabIndex", "navigateIfNeeded"]);
     });
     track([() => prop("dir"), () => prop("orientation")], () => {
       action(["syncIndicatorRect"]);
@@ -449,23 +442,14 @@ var machine = createMachine({
         const cleanup = refs.get("indicatorCleanup");
         if (cleanup) cleanup();
       },
-      allowIndicatorTransition({ context }) {
-        context.set("indicatorTransition", true);
-      },
       setIndicatorRect({ context, event, scope }) {
         const value = event.id ?? context.get("value");
         const indicatorEl = getIndicatorEl(scope);
         if (!indicatorEl) return;
-        if (!value) {
-          context.set("indicatorTransition", false);
-          return;
-        }
+        if (!value) return;
         const triggerEl = getTriggerEl(scope, value);
         if (!triggerEl) return;
-        context.set("indicatorRect", getRectById(scope, value));
-        domQuery.nextTick(() => {
-          context.set("indicatorTransition", false);
-        });
+        context.set("indicatorRect", getRectByValue(scope, value));
       },
       syncSsr({ context }) {
         context.set("ssr", false);
@@ -473,23 +457,17 @@ var machine = createMachine({
       syncIndicatorRect({ context, refs, scope }) {
         const cleanup = refs.get("indicatorCleanup");
         if (cleanup) cleanup();
-        const value = context.get("value");
-        if (!value) {
-          context.set("indicatorTransition", false);
-          return;
-        }
-        const triggerEl = getTriggerEl(scope, value);
         const indicatorEl = getIndicatorEl(scope);
-        if (!triggerEl || !indicatorEl) return;
-        const indicatorCleanup = domQuery.trackElementRect([triggerEl], {
-          measure(el) {
-            return getOffsetRect(el);
-          },
-          onEntry({ rects }) {
-            const [rect] = rects;
-            context.set("indicatorRect", resolveRect(rect));
-          }
-        });
+        if (!indicatorEl) return;
+        const exec = () => {
+          const triggerEl = getTriggerEl(scope, context.get("value"));
+          if (!triggerEl) return;
+          const rect = getOffsetRect(triggerEl);
+          context.set("indicatorRect", (prev) => utils.isEqual(prev, rect) ? prev : rect);
+        };
+        exec();
+        const triggerEls = getElements(scope);
+        const indicatorCleanup = utils.callAll(...triggerEls.map((el) => domQuery.resizeObserverBorderBox.observe(el, exec)));
         refs.set("indicatorCleanup", indicatorCleanup);
       },
       navigateIfNeeded({ context, prop, scope }) {

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { createAnatomy } from '@zag-js/anatomy';
-import { isAnchorElement, trackElementRect, nextTick, raf, getFocusables, prevById, nextById, clickIfLink, itemById, queryAll, dataAttr, isOpeningInNewTab, isSafari, isComposingEvent, contains, getEventTarget, getEventKey } from '@zag-js/dom-query';
-import { last, first, createSplitProps } from '@zag-js/utils';
+import { isAnchorElement, resizeObserverBorderBox, raf, getFocusables, prevById, nextById, clickIfLink, queryAll, itemById, dataAttr, isOpeningInNewTab, isSafari, isComposingEvent, contains, getEventTarget, getEventKey } from '@zag-js/dom-query';
+import { callAll, last, first, createSplitProps, isEqual, toPx } from '@zag-js/utils';
 import { setup } from '@zag-js/core';
 import { createProps } from '@zag-js/types';
 
@@ -9,12 +9,12 @@ var anatomy = createAnatomy("tabs").parts("root", "list", "trigger", "content",
 var parts = anatomy.build();
 var getRootId = (ctx) => ctx.ids?.root ?? `tabs:${ctx.id}`;
 var getListId = (ctx) => ctx.ids?.list ?? `tabs:${ctx.id}:list`;
-var getContentId = (ctx, id) => ctx.ids?.content?.(id) ?? `tabs:${ctx.id}:content-${id}`;
-var getTriggerId = (ctx, id) => ctx.ids?.trigger?.(id) ?? `tabs:${ctx.id}:trigger-${id}`;
+var getContentId = (ctx, value) => ctx.ids?.content?.(value) ?? `tabs:${ctx.id}:content-${value}`;
+var getTriggerId = (ctx, value) => ctx.ids?.trigger?.(value) ?? `tabs:${ctx.id}:trigger-${value}`;
 var getIndicatorId = (ctx) => ctx.ids?.indicator ?? `tabs:${ctx.id}:indicator`;
 var getListEl = (ctx) => ctx.getById(getListId(ctx));
-var getContentEl = (ctx, id) => ctx.getById(getContentId(ctx, id));
-var getTriggerEl = (ctx, id) => ctx.getById(getTriggerId(ctx, id));
+var getContentEl = (ctx, value) => ctx.getById(getContentId(ctx, value));
+var getTriggerEl = (ctx, value) => value != null ? ctx.getById(getTriggerId(ctx, value)) : null;
 var getIndicatorEl = (ctx) => ctx.getById(getIndicatorId(ctx));
 var getElements = (ctx) => {
   const ownerId = CSS.escape(getListId(ctx));
@@ -26,21 +26,15 @@ var getLastTriggerEl = (ctx) => last(getElements(ctx));
 var getNextTriggerEl = (ctx, opts) => nextById(getElements(ctx), getTriggerId(ctx, opts.value), opts.loopFocus);
 var getPrevTriggerEl = (ctx, opts) => prevById(getElements(ctx), getTriggerId(ctx, opts.value), opts.loopFocus);
 var getOffsetRect = (el) => ({
-  left: el?.offsetLeft ?? 0,
-  top: el?.offsetTop ?? 0,
+  x: el?.offsetLeft ?? 0,
+  y: el?.offsetTop ?? 0,
   width: el?.offsetWidth ?? 0,
   height: el?.offsetHeight ?? 0
 });
-var getRectById = (ctx, id) => {
-  const tab = itemById(getElements(ctx), getTriggerId(ctx, id));
-  return resolveRect(getOffsetRect(tab));
+var getRectByValue = (ctx, value) => {
+  const tab = itemById(getElements(ctx), getTriggerId(ctx, value));
+  return getOffsetRect(tab);
 };
-var resolveRect = (rect) => ({
-  width: `${rect.width}px`,
-  height: `${rect.height}px`,
-  left: `${rect.left}px`,
-  top: `${rect.top}px`
-});
 
 // src/tabs.connect.ts
 function connect(service, normalize) {
@@ -205,23 +199,23 @@ function connect(service, normalize) {
       });
     },
     getIndicatorProps() {
-      const indicatorRect = context.get("indicatorRect");
-      const indicatorTransition = context.get("indicatorTransition");
+      const rect = context.get("indicatorRect");
       return normalize.element({
         id: getIndicatorId(scope),
         ...parts.indicator.attrs,
         dir: prop("dir"),
         "data-orientation": prop("orientation"),
+        hidden: rect == null,
         style: {
           "--transition-property": "left, right, top, bottom, width, height",
-          "--left": indicatorRect.left,
-          "--top": indicatorRect.top,
-          "--width": indicatorRect.width,
-          "--height": indicatorRect.height,
+          "--left": toPx(rect?.x),
+          "--top": toPx(rect?.y),
+          "--width": toPx(rect?.width),
+          "--height": toPx(rect?.height),
           position: "absolute",
           willChange: "var(--transition-property)",
           transitionProperty: "var(--transition-property)",
-          transitionDuration: indicatorTransition ? "var(--transition-duration, 150ms)" : "0ms",
+          transitionDuration: "var(--transition-duration, 150ms)",
           transitionTimingFunction: "var(--transition-timing-function)",
           [isHorizontal ? "left" : "top"]: isHorizontal ? "var(--left)" : "var(--top)"
         }
@@ -265,15 +259,14 @@ var machine = createMachine({
         }
       })),
       ssr: bindable(() => ({ defaultValue: true })),
-      indicatorTransition: bindable(() => ({ defaultValue: false })),
       indicatorRect: bindable(() => ({
-        defaultValue: { left: "0px", top: "0px", width: "0px", height: "0px" }
+        defaultValue: null
       }))
     };
   },
   watch({ context, prop, track, action }) {
     track([() => context.get("value")], () => {
-      action(["allowIndicatorTransition", "syncIndicatorRect", "syncTabIndex", "navigateIfNeeded"]);
+      action(["syncIndicatorRect", "syncTabIndex", "navigateIfNeeded"]);
     });
     track([() => prop("dir"), () => prop("orientation")], () => {
       action(["syncIndicatorRect"]);
@@ -447,23 +440,14 @@ var machine = createMachine({
         const cleanup = refs.get("indicatorCleanup");
         if (cleanup) cleanup();
       },
-      allowIndicatorTransition({ context }) {
-        context.set("indicatorTransition", true);
-      },
       setIndicatorRect({ context, event, scope }) {
         const value = event.id ?? context.get("value");
         const indicatorEl = getIndicatorEl(scope);
         if (!indicatorEl) return;
-        if (!value) {
-          context.set("indicatorTransition", false);
-          return;
-        }
+        if (!value) return;
         const triggerEl = getTriggerEl(scope, value);
         if (!triggerEl) return;
-        context.set("indicatorRect", getRectById(scope, value));
-        nextTick(() => {
-          context.set("indicatorTransition", false);
-        });
+        context.set("indicatorRect", getRectByValue(scope, value));
       },
       syncSsr({ context }) {
         context.set("ssr", false);
@@ -471,23 +455,17 @@ var machine = createMachine({
       syncIndicatorRect({ context, refs, scope }) {
         const cleanup = refs.get("indicatorCleanup");
         if (cleanup) cleanup();
-        const value = context.get("value");
-        if (!value) {
-          context.set("indicatorTransition", false);
-          return;
-        }
-        const triggerEl = getTriggerEl(scope, value);
         const indicatorEl = getIndicatorEl(scope);
-        if (!triggerEl || !indicatorEl) return;
-        const indicatorCleanup = trackElementRect([triggerEl], {
-          measure(el) {
-            return getOffsetRect(el);
-          },
-          onEntry({ rects }) {
-            const [rect] = rects;
-            context.set("indicatorRect", resolveRect(rect));
-          }
-        });
+        if (!indicatorEl) return;
+        const exec = () => {
+          const triggerEl = getTriggerEl(scope, context.get("value"));
+          if (!triggerEl) return;
+          const rect = getOffsetRect(triggerEl);
+          context.set("indicatorRect", (prev) => isEqual(prev, rect) ? prev : rect);
+        };
+        exec();
+        const triggerEls = getElements(scope);
+        const indicatorCleanup = callAll(...triggerEls.map((el) => resizeObserverBorderBox.observe(el, exec)));
         refs.set("indicatorCleanup", indicatorCleanup);
       },
       navigateIfNeeded({ context, prop, scope }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/tabs",
-  "version": "1.27.1",
+  "version": "1.29.0",
   "description": "Core logic for the tabs widget implemented as a state machine",
   "keywords": [
     "js",
@@ -26,11 +26,11 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "1.27.1",
-    "@zag-js/dom-query": "1.27.1",
-    "@zag-js/utils": "1.27.1",
-    "@zag-js/core": "1.27.1",
-    "@zag-js/types": "1.27.1"
+    "@zag-js/anatomy": "1.29.0",
+    "@zag-js/dom-query": "1.29.0",
+    "@zag-js/utils": "1.29.0",
+    "@zag-js/core": "1.29.0",
+    "@zag-js/types": "1.29.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"