@zag-js/tabs 0.6.0 → 0.8.0

package/dist/{chunk-JG2VX4ST.mjs → chunk-N5FVPJXW.mjs}

@@ -1,10 +1,11 @@
 import {
   dom
-} from "./chunk-5ZMNIWHF.mjs";
+} from "./chunk-SVFEUEGP.mjs";
 
 // src/tabs.machine.ts
 import { createMachine, guards } from "@zag-js/core";
 import { nextTick, raf } from "@zag-js/dom-query";
+import { trackElementRect } from "@zag-js/element-rect";
 import { getFocusables } from "@zag-js/tabbable";
 import { compact } from "@zag-js/utils";
 var { not } = guards;
@@ -21,7 +22,7 @@ function machine(userContext) {
         focusedValue: null,
         previousValues: [],
         indicatorRect: { left: "0px", top: "0px", width: "0px", height: "0px" },
-        hasMeasuredRect: false,
+        canIndicatorTransition: false,
         isIndicatorRendered: false,
         loop: true,
         translations: {},
@@ -32,10 +33,18 @@ function machine(userContext) {
         isVertical: (ctx2) => ctx2.orientation === "vertical"
       },
       created: ["setPrevSelectedTabs"],
+      entry: ["checkRenderedElements", "syncIndicatorRect", "setContentTabIndex"],
+      exit: ["cleanupObserver"],
       watch: {
         focusedValue: "invokeOnFocus",
-        value: ["invokeOnChange", "setPrevSelectedTabs", "setIndicatorRect", "setContentTabIndex"],
-        dir: ["clearMeasured", "setIndicatorRect"]
+        value: [
+          "enableIndicatorTransition",
+          "invokeOnChange",
+          "setPrevSelectedTabs",
+          "syncIndicatorRect",
+          "setContentTabIndex"
+        ],
+        dir: ["syncIndicatorRect"]
       },
       on: {
         SET_VALUE: {
@@ -43,9 +52,11 @@ function machine(userContext) {
         },
         CLEAR_VALUE: {
           actions: "clearValue"
+        },
+        SET_INDICATOR_RECT: {
+          actions: "setIndicatorRect"
         }
       },
-      entry: ["checkRenderedElements", "setIndicatorRect", "setContentTabIndex"],
       states: {
         idle: {
           on: {
@@ -126,9 +137,6 @@ function machine(userContext) {
         clearValue(ctx2) {
           ctx2.value = null;
         },
-        invokeOnDelete(ctx2, evt) {
-          ctx2.onDelete?.({ value: evt.value });
-        },
         focusFirstTab(ctx2) {
           raf(() => dom.getFirstEl(ctx2)?.focus());
         },
@@ -147,24 +155,9 @@ function machine(userContext) {
           const prev = dom.getPrevEl(ctx2, ctx2.focusedValue);
           raf(() => prev?.focus());
         },
-        setIndicatorRect(ctx2) {
-          nextTick(() => {
-            if (!ctx2.isIndicatorRendered || !ctx2.value)
-              return;
-            ctx2.indicatorRect = dom.getRectById(ctx2, ctx2.value);
-            if (ctx2.hasMeasuredRect)
-              return;
-            nextTick(() => {
-              ctx2.hasMeasuredRect = true;
-            });
-          });
-        },
         checkRenderedElements(ctx2) {
           ctx2.isIndicatorRendered = !!dom.getIndicatorEl(ctx2);
         },
-        clearMeasured(ctx2) {
-          ctx2.hasMeasuredRect = false;
-        },
         invokeOnChange(ctx2) {
           ctx2.onChange?.({ value: ctx2.value });
         },
@@ -173,7 +166,7 @@ function machine(userContext) {
         },
         setPrevSelectedTabs(ctx2) {
           if (ctx2.value != null) {
-            ctx2.previousValues = pushUnique(Array.from(ctx2.previousValues), ctx2.value);
+            ctx2.previousValues = pushUnique(ctx2.previousValues, ctx2.value);
           }
         },
         // if tab panel contains focusable elements, remove the tabindex attribute
@@ -189,13 +182,51 @@ function machine(userContext) {
               panel.setAttribute("tabindex", "0");
             }
           });
+        },
+        cleanupObserver(ctx2) {
+          ctx2.indicatorCleanup?.();
+        },
+        enableIndicatorTransition(ctx2) {
+          ctx2.canIndicatorTransition = true;
+        },
+        setIndicatorRect(ctx2, evt) {
+          const value = evt.id ?? ctx2.value;
+          if (!ctx2.isIndicatorRendered || !value)
+            return;
+          const tabEl = dom.getTriggerEl(ctx2, value);
+          if (!tabEl)
+            return;
+          ctx2.indicatorRect = dom.getRectById(ctx2, value);
+          nextTick(() => {
+            ctx2.canIndicatorTransition = false;
+          });
+        },
+        syncIndicatorRect(ctx2) {
+          ctx2.indicatorCleanup?.();
+          const value = ctx2.value;
+          if (!ctx2.isIndicatorRendered || !value)
+            return;
+          const tabEl = dom.getActiveTabEl(ctx2);
+          if (!tabEl)
+            return;
+          ctx2.indicatorCleanup = trackElementRect(tabEl, {
+            getRect(el) {
+              return dom.getOffsetRect(el);
+            },
+            onChange(rect) {
+              ctx2.indicatorRect = dom.resolveRect(rect, ctx2.orientation);
+              nextTick(() => {
+                ctx2.canIndicatorTransition = false;
+              });
+            }
+          });
         }
       }
     }
   );
 }
 function pushUnique(arr, value) {
-  const newArr = arr.slice();
+  const newArr = Array.from(arr).slice();
   const index = newArr.indexOf(value);
   if (index > -1) {
     newArr.splice(index, 1);

package/dist/{chunk-5JW3YJ3I.mjs → chunk-N7U3IQEQ.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-S2KW2DT4.mjs";
 import {
   dom
-} from "./chunk-5ZMNIWHF.mjs";
+} from "./chunk-SVFEUEGP.mjs";
 
 // src/tabs.connect.ts
 import { getEventKey } from "@zag-js/dom-event";
@@ -36,6 +36,12 @@ function connect(state, send, normalize) {
     clearValue() {
       send({ type: "CLEAR_VALUE" });
     },
+    /**
+     * Sets the indicator rect to the tab with the given id.
+     */
+    setIndicatorRect(id) {
+      send({ type: "SET_INDICATOR_RECT", id });
+    },
     rootProps: normalize.element({
       ...parts.root.attrs,
       id: dom.getRootId(state.context),
@@ -142,12 +148,12 @@ function connect(state, send, normalize) {
       ...parts.indicator.attrs,
       "data-orientation": state.context.orientation,
       style: {
-        "--transition-duration": "200ms",
+        "--transition-duration": "150ms",
         "--transition-property": "left, right, top, bottom, width, height",
         position: "absolute",
         willChange: "var(--transition-property)",
         transitionProperty: "var(--transition-property)",
-        transitionDuration: state.context.hasMeasuredRect ? "var(--transition-duration)" : "0ms",
+        transitionDuration: state.context.canIndicatorTransition ? "var(--transition-duration)" : "0ms",
         transitionTimingFunction: "var(--transition-timing-function)",
         ...state.context.indicatorRect
       }

package/dist/{chunk-5ZMNIWHF.mjs → chunk-SVFEUEGP.mjs}

@@ -7,7 +7,7 @@ var dom = createScope({
   getContentId: (ctx, id) => ctx.ids?.content ?? `tabs:${ctx.id}:content-${id}`,
   getContentGroupId: (ctx) => ctx.ids?.contentGroup ?? `tabs:${ctx.id}:content-group`,
   getTriggerId: (ctx, id) => ctx.ids?.trigger ?? `tabs:${ctx.id}:trigger-${id}`,
-  getIndicatorId: (ctx) => `tabs:${ctx.id}:indicator`,
+  getIndicatorId: (ctx) => ctx.ids?.indicator ?? `tabs:${ctx.id}:indicator`,
   getTablistEl: (ctx) => dom.getById(ctx, dom.getTablistId(ctx)),
   getContentEl: (ctx, id) => dom.getById(ctx, dom.getContentId(ctx, id)),
   getTriggerEl: (ctx, id) => dom.getById(ctx, dom.getTriggerId(ctx, id)),
@@ -24,26 +24,31 @@ var dom = createScope({
   getActiveContentEl: (ctx) => {
     if (!ctx.value)
       return;
-    const id = dom.getContentId(ctx, ctx.value);
-    return dom.getById(ctx, id);
+    return dom.getContentEl(ctx, ctx.value);
   },
-  getRectById: (ctx, id) => {
-    const empty = {
-      offsetLeft: 0,
-      offsetTop: 0,
-      offsetWidth: 0,
-      offsetHeight: 0
+  getActiveTabEl: (ctx) => {
+    if (!ctx.value)
+      return;
+    return dom.getTriggerEl(ctx, ctx.value);
+  },
+  getOffsetRect: (el) => {
+    return {
+      left: el?.offsetLeft ?? 0,
+      top: el?.offsetTop ?? 0,
+      width: el?.offsetWidth ?? 0,
+      height: el?.offsetHeight ?? 0
     };
-    const tab = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id)) ?? empty;
-    if (ctx.isVertical) {
-      return {
-        top: `${tab.offsetTop}px`,
-        height: `${tab.offsetHeight}px`
-      };
-    }
+  },
+  getRectById: (ctx, id) => {
+    const tab = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id));
+    return dom.resolveRect(dom.getOffsetRect(tab), ctx.orientation);
+  },
+  resolveRect(rect, orientation) {
+    const prop = orientation === "vertical" ? "height" : "width";
     return {
-      left: `${tab.offsetLeft}px`,
-      width: `${tab.offsetWidth}px`
+      left: `${rect.left}px`,
+      top: `${rect.top}px`,
+      [prop]: `${rect[prop]}px`
     };
   }
 });

package/dist/index.js

@@ -44,7 +44,7 @@ var dom = (0, import_dom_query.createScope)({
   getContentId: (ctx, id) => ctx.ids?.content ?? `tabs:${ctx.id}:content-${id}`,
   getContentGroupId: (ctx) => ctx.ids?.contentGroup ?? `tabs:${ctx.id}:content-group`,
   getTriggerId: (ctx, id) => ctx.ids?.trigger ?? `tabs:${ctx.id}:trigger-${id}`,
-  getIndicatorId: (ctx) => `tabs:${ctx.id}:indicator`,
+  getIndicatorId: (ctx) => ctx.ids?.indicator ?? `tabs:${ctx.id}:indicator`,
   getTablistEl: (ctx) => dom.getById(ctx, dom.getTablistId(ctx)),
   getContentEl: (ctx, id) => dom.getById(ctx, dom.getContentId(ctx, id)),
   getTriggerEl: (ctx, id) => dom.getById(ctx, dom.getTriggerId(ctx, id)),
@@ -61,26 +61,31 @@ var dom = (0, import_dom_query.createScope)({
   getActiveContentEl: (ctx) => {
     if (!ctx.value)
       return;
-    const id = dom.getContentId(ctx, ctx.value);
-    return dom.getById(ctx, id);
+    return dom.getContentEl(ctx, ctx.value);
   },
-  getRectById: (ctx, id) => {
-    const empty = {
-      offsetLeft: 0,
-      offsetTop: 0,
-      offsetWidth: 0,
-      offsetHeight: 0
+  getActiveTabEl: (ctx) => {
+    if (!ctx.value)
+      return;
+    return dom.getTriggerEl(ctx, ctx.value);
+  },
+  getOffsetRect: (el) => {
+    return {
+      left: el?.offsetLeft ?? 0,
+      top: el?.offsetTop ?? 0,
+      width: el?.offsetWidth ?? 0,
+      height: el?.offsetHeight ?? 0
     };
-    const tab = (0, import_dom_query.itemById)(dom.getElements(ctx), dom.getTriggerId(ctx, id)) ?? empty;
-    if (ctx.isVertical) {
-      return {
-        top: `${tab.offsetTop}px`,
-        height: `${tab.offsetHeight}px`
-      };
-    }
+  },
+  getRectById: (ctx, id) => {
+    const tab = (0, import_dom_query.itemById)(dom.getElements(ctx), dom.getTriggerId(ctx, id));
+    return dom.resolveRect(dom.getOffsetRect(tab), ctx.orientation);
+  },
+  resolveRect(rect, orientation) {
+    const prop = orientation === "vertical" ? "height" : "width";
     return {
-      left: `${tab.offsetLeft}px`,
-      width: `${tab.offsetWidth}px`
+      left: `${rect.left}px`,
+      top: `${rect.top}px`,
+      [prop]: `${rect[prop]}px`
     };
   }
 });
@@ -114,6 +119,12 @@ function connect(state, send, normalize) {
     clearValue() {
       send({ type: "CLEAR_VALUE" });
     },
+    /**
+     * Sets the indicator rect to the tab with the given id.
+     */
+    setIndicatorRect(id) {
+      send({ type: "SET_INDICATOR_RECT", id });
+    },
     rootProps: normalize.element({
       ...parts.root.attrs,
       id: dom.getRootId(state.context),
@@ -220,12 +231,12 @@ function connect(state, send, normalize) {
       ...parts.indicator.attrs,
       "data-orientation": state.context.orientation,
       style: {
-        "--transition-duration": "200ms",
+        "--transition-duration": "150ms",
         "--transition-property": "left, right, top, bottom, width, height",
         position: "absolute",
         willChange: "var(--transition-property)",
         transitionProperty: "var(--transition-property)",
-        transitionDuration: state.context.hasMeasuredRect ? "var(--transition-duration)" : "0ms",
+        transitionDuration: state.context.canIndicatorTransition ? "var(--transition-duration)" : "0ms",
         transitionTimingFunction: "var(--transition-timing-function)",
         ...state.context.indicatorRect
       }
@@ -236,6 +247,7 @@ function connect(state, send, normalize) {
 // src/tabs.machine.ts
 var import_core = require("@zag-js/core");
 var import_dom_query3 = require("@zag-js/dom-query");
+var import_element_rect = require("@zag-js/element-rect");
 var import_tabbable = require("@zag-js/tabbable");
 var import_utils2 = require("@zag-js/utils");
 var { not } = import_core.guards;
@@ -252,7 +264,7 @@ function machine(userContext) {
         focusedValue: null,
         previousValues: [],
         indicatorRect: { left: "0px", top: "0px", width: "0px", height: "0px" },
-        hasMeasuredRect: false,
+        canIndicatorTransition: false,
         isIndicatorRendered: false,
         loop: true,
         translations: {},
@@ -263,10 +275,18 @@ function machine(userContext) {
         isVertical: (ctx2) => ctx2.orientation === "vertical"
       },
       created: ["setPrevSelectedTabs"],
+      entry: ["checkRenderedElements", "syncIndicatorRect", "setContentTabIndex"],
+      exit: ["cleanupObserver"],
       watch: {
         focusedValue: "invokeOnFocus",
-        value: ["invokeOnChange", "setPrevSelectedTabs", "setIndicatorRect", "setContentTabIndex"],
-        dir: ["clearMeasured", "setIndicatorRect"]
+        value: [
+          "enableIndicatorTransition",
+          "invokeOnChange",
+          "setPrevSelectedTabs",
+          "syncIndicatorRect",
+          "setContentTabIndex"
+        ],
+        dir: ["syncIndicatorRect"]
       },
       on: {
         SET_VALUE: {
@@ -274,9 +294,11 @@ function machine(userContext) {
         },
         CLEAR_VALUE: {
           actions: "clearValue"
+        },
+        SET_INDICATOR_RECT: {
+          actions: "setIndicatorRect"
         }
       },
-      entry: ["checkRenderedElements", "setIndicatorRect", "setContentTabIndex"],
       states: {
         idle: {
           on: {
@@ -357,9 +379,6 @@ function machine(userContext) {
         clearValue(ctx2) {
           ctx2.value = null;
         },
-        invokeOnDelete(ctx2, evt) {
-          ctx2.onDelete?.({ value: evt.value });
-        },
         focusFirstTab(ctx2) {
           (0, import_dom_query3.raf)(() => dom.getFirstEl(ctx2)?.focus());
         },
@@ -378,24 +397,9 @@ function machine(userContext) {
           const prev = dom.getPrevEl(ctx2, ctx2.focusedValue);
           (0, import_dom_query3.raf)(() => prev?.focus());
         },
-        setIndicatorRect(ctx2) {
-          (0, import_dom_query3.nextTick)(() => {
-            if (!ctx2.isIndicatorRendered || !ctx2.value)
-              return;
-            ctx2.indicatorRect = dom.getRectById(ctx2, ctx2.value);
-            if (ctx2.hasMeasuredRect)
-              return;
-            (0, import_dom_query3.nextTick)(() => {
-              ctx2.hasMeasuredRect = true;
-            });
-          });
-        },
         checkRenderedElements(ctx2) {
           ctx2.isIndicatorRendered = !!dom.getIndicatorEl(ctx2);
         },
-        clearMeasured(ctx2) {
-          ctx2.hasMeasuredRect = false;
-        },
         invokeOnChange(ctx2) {
           ctx2.onChange?.({ value: ctx2.value });
         },
@@ -404,7 +408,7 @@ function machine(userContext) {
         },
         setPrevSelectedTabs(ctx2) {
           if (ctx2.value != null) {
-            ctx2.previousValues = pushUnique(Array.from(ctx2.previousValues), ctx2.value);
+            ctx2.previousValues = pushUnique(ctx2.previousValues, ctx2.value);
           }
         },
         // if tab panel contains focusable elements, remove the tabindex attribute
@@ -420,13 +424,51 @@ function machine(userContext) {
               panel.setAttribute("tabindex", "0");
             }
           });
+        },
+        cleanupObserver(ctx2) {
+          ctx2.indicatorCleanup?.();
+        },
+        enableIndicatorTransition(ctx2) {
+          ctx2.canIndicatorTransition = true;
+        },
+        setIndicatorRect(ctx2, evt) {
+          const value = evt.id ?? ctx2.value;
+          if (!ctx2.isIndicatorRendered || !value)
+            return;
+          const tabEl = dom.getTriggerEl(ctx2, value);
+          if (!tabEl)
+            return;
+          ctx2.indicatorRect = dom.getRectById(ctx2, value);
+          (0, import_dom_query3.nextTick)(() => {
+            ctx2.canIndicatorTransition = false;
+          });
+        },
+        syncIndicatorRect(ctx2) {
+          ctx2.indicatorCleanup?.();
+          const value = ctx2.value;
+          if (!ctx2.isIndicatorRendered || !value)
+            return;
+          const tabEl = dom.getActiveTabEl(ctx2);
+          if (!tabEl)
+            return;
+          ctx2.indicatorCleanup = (0, import_element_rect.trackElementRect)(tabEl, {
+            getRect(el) {
+              return dom.getOffsetRect(el);
+            },
+            onChange(rect) {
+              ctx2.indicatorRect = dom.resolveRect(rect, ctx2.orientation);
+              (0, import_dom_query3.nextTick)(() => {
+                ctx2.canIndicatorTransition = false;
+              });
+            }
+          });
         }
       }
     }
   );
 }
 function pushUnique(arr, value) {
-  const newArr = arr.slice();
+  const newArr = Array.from(arr).slice();
   const index = newArr.indexOf(value);
   if (index > -1) {
     newArr.splice(index, 1);

package/dist/index.mjs

@@ -1,13 +1,13 @@
 import {
   connect
-} from "./chunk-5JW3YJ3I.mjs";
+} from "./chunk-N7U3IQEQ.mjs";
 import {
   anatomy
 } from "./chunk-S2KW2DT4.mjs";
 import {
   machine
-} from "./chunk-JG2VX4ST.mjs";
-import "./chunk-5ZMNIWHF.mjs";
+} from "./chunk-N5FVPJXW.mjs";
+import "./chunk-SVFEUEGP.mjs";
 export {
   anatomy,
   connect,

package/dist/tabs.connect.d.ts

@@ -23,6 +23,10 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
      * Clears the value of the tabs.
      */
     clearValue(): void;
+    /**
+     * Sets the indicator rect to the tab with the given id.
+     */
+    setIndicatorRect(id: string | null | undefined): void;
     rootProps: T["element"];
     tablistProps: T["element"];
     getTriggerProps(props: TabProps): T["button"];

package/dist/tabs.connect.js

@@ -40,7 +40,7 @@ var dom = (0, import_dom_query.createScope)({
   getContentId: (ctx, id) => ctx.ids?.content ?? `tabs:${ctx.id}:content-${id}`,
   getContentGroupId: (ctx) => ctx.ids?.contentGroup ?? `tabs:${ctx.id}:content-group`,
   getTriggerId: (ctx, id) => ctx.ids?.trigger ?? `tabs:${ctx.id}:trigger-${id}`,
-  getIndicatorId: (ctx) => `tabs:${ctx.id}:indicator`,
+  getIndicatorId: (ctx) => ctx.ids?.indicator ?? `tabs:${ctx.id}:indicator`,
   getTablistEl: (ctx) => dom.getById(ctx, dom.getTablistId(ctx)),
   getContentEl: (ctx, id) => dom.getById(ctx, dom.getContentId(ctx, id)),
   getTriggerEl: (ctx, id) => dom.getById(ctx, dom.getTriggerId(ctx, id)),
@@ -57,26 +57,31 @@ var dom = (0, import_dom_query.createScope)({
   getActiveContentEl: (ctx) => {
     if (!ctx.value)
       return;
-    const id = dom.getContentId(ctx, ctx.value);
-    return dom.getById(ctx, id);
+    return dom.getContentEl(ctx, ctx.value);
   },
-  getRectById: (ctx, id) => {
-    const empty = {
-      offsetLeft: 0,
-      offsetTop: 0,
-      offsetWidth: 0,
-      offsetHeight: 0
+  getActiveTabEl: (ctx) => {
+    if (!ctx.value)
+      return;
+    return dom.getTriggerEl(ctx, ctx.value);
+  },
+  getOffsetRect: (el) => {
+    return {
+      left: el?.offsetLeft ?? 0,
+      top: el?.offsetTop ?? 0,
+      width: el?.offsetWidth ?? 0,
+      height: el?.offsetHeight ?? 0
     };
-    const tab = (0, import_dom_query.itemById)(dom.getElements(ctx), dom.getTriggerId(ctx, id)) ?? empty;
-    if (ctx.isVertical) {
-      return {
-        top: `${tab.offsetTop}px`,
-        height: `${tab.offsetHeight}px`
-      };
-    }
+  },
+  getRectById: (ctx, id) => {
+    const tab = (0, import_dom_query.itemById)(dom.getElements(ctx), dom.getTriggerId(ctx, id));
+    return dom.resolveRect(dom.getOffsetRect(tab), ctx.orientation);
+  },
+  resolveRect(rect, orientation) {
+    const prop = orientation === "vertical" ? "height" : "width";
     return {
-      left: `${tab.offsetLeft}px`,
-      width: `${tab.offsetWidth}px`
+      left: `${rect.left}px`,
+      top: `${rect.top}px`,
+      [prop]: `${rect[prop]}px`
     };
   }
 });
@@ -110,6 +115,12 @@ function connect(state, send, normalize) {
     clearValue() {
       send({ type: "CLEAR_VALUE" });
     },
+    /**
+     * Sets the indicator rect to the tab with the given id.
+     */
+    setIndicatorRect(id) {
+      send({ type: "SET_INDICATOR_RECT", id });
+    },
     rootProps: normalize.element({
       ...parts.root.attrs,
       id: dom.getRootId(state.context),
@@ -216,12 +227,12 @@ function connect(state, send, normalize) {
       ...parts.indicator.attrs,
       "data-orientation": state.context.orientation,
       style: {
-        "--transition-duration": "200ms",
+        "--transition-duration": "150ms",
         "--transition-property": "left, right, top, bottom, width, height",
         position: "absolute",
         willChange: "var(--transition-property)",
         transitionProperty: "var(--transition-property)",
-        transitionDuration: state.context.hasMeasuredRect ? "var(--transition-duration)" : "0ms",
+        transitionDuration: state.context.canIndicatorTransition ? "var(--transition-duration)" : "0ms",
         transitionTimingFunction: "var(--transition-timing-function)",
         ...state.context.indicatorRect
       }

package/dist/tabs.connect.mjs

@@ -1,8 +1,8 @@
 import {
   connect
-} from "./chunk-5JW3YJ3I.mjs";
+} from "./chunk-N7U3IQEQ.mjs";
 import "./chunk-S2KW2DT4.mjs";
-import "./chunk-5ZMNIWHF.mjs";
+import "./chunk-SVFEUEGP.mjs";
 export {
   connect
 };

package/dist/tabs.dom.d.ts

@@ -38,16 +38,22 @@ declare const dom: {
     getNextEl: (ctx: MachineContext, id: string) => HTMLElement;
     getPrevEl: (ctx: MachineContext, id: string) => HTMLElement | null;
     getActiveContentEl: (ctx: MachineContext) => HTMLElement | null | undefined;
+    getActiveTabEl: (ctx: MachineContext) => HTMLElement | null | undefined;
+    getOffsetRect: (el: HTMLElement | undefined) => {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    };
     getRectById: (ctx: MachineContext, id: string) => {
+        [x: string]: string;
+        left: string;
         top: string;
-        height: string;
-        left?: undefined;
-        width?: undefined;
-    } | {
+    };
+    resolveRect(rect: Record<"width" | "height" | "left" | "top", number>, orientation?: "horizontal" | "vertical"): {
+        [x: string]: string;
         left: string;
-        width: string;
-        top?: undefined;
-        height?: undefined;
+        top: string;
     };
 };
 

package/dist/tabs.dom.js

@@ -31,7 +31,7 @@ var dom = (0, import_dom_query.createScope)({
   getContentId: (ctx, id) => ctx.ids?.content ?? `tabs:${ctx.id}:content-${id}`,
   getContentGroupId: (ctx) => ctx.ids?.contentGroup ?? `tabs:${ctx.id}:content-group`,
   getTriggerId: (ctx, id) => ctx.ids?.trigger ?? `tabs:${ctx.id}:trigger-${id}`,
-  getIndicatorId: (ctx) => `tabs:${ctx.id}:indicator`,
+  getIndicatorId: (ctx) => ctx.ids?.indicator ?? `tabs:${ctx.id}:indicator`,
   getTablistEl: (ctx) => dom.getById(ctx, dom.getTablistId(ctx)),
   getContentEl: (ctx, id) => dom.getById(ctx, dom.getContentId(ctx, id)),
   getTriggerEl: (ctx, id) => dom.getById(ctx, dom.getTriggerId(ctx, id)),
@@ -48,26 +48,31 @@ var dom = (0, import_dom_query.createScope)({
   getActiveContentEl: (ctx) => {
     if (!ctx.value)
       return;
-    const id = dom.getContentId(ctx, ctx.value);
-    return dom.getById(ctx, id);
+    return dom.getContentEl(ctx, ctx.value);
   },
-  getRectById: (ctx, id) => {
-    const empty = {
-      offsetLeft: 0,
-      offsetTop: 0,
-      offsetWidth: 0,
-      offsetHeight: 0
+  getActiveTabEl: (ctx) => {
+    if (!ctx.value)
+      return;
+    return dom.getTriggerEl(ctx, ctx.value);
+  },
+  getOffsetRect: (el) => {
+    return {
+      left: el?.offsetLeft ?? 0,
+      top: el?.offsetTop ?? 0,
+      width: el?.offsetWidth ?? 0,
+      height: el?.offsetHeight ?? 0
     };
-    const tab = (0, import_dom_query.itemById)(dom.getElements(ctx), dom.getTriggerId(ctx, id)) ?? empty;
-    if (ctx.isVertical) {
-      return {
-        top: `${tab.offsetTop}px`,
-        height: `${tab.offsetHeight}px`
-      };
-    }
+  },
+  getRectById: (ctx, id) => {
+    const tab = (0, import_dom_query.itemById)(dom.getElements(ctx), dom.getTriggerId(ctx, id));
+    return dom.resolveRect(dom.getOffsetRect(tab), ctx.orientation);
+  },
+  resolveRect(rect, orientation) {
+    const prop = orientation === "vertical" ? "height" : "width";
     return {
-      left: `${tab.offsetLeft}px`,
-      width: `${tab.offsetWidth}px`
+      left: `${rect.left}px`,
+      top: `${rect.top}px`,
+      [prop]: `${rect[prop]}px`
     };
   }
 });

package/dist/tabs.dom.mjs

@@ -1,6 +1,6 @@
 import {
   dom
-} from "./chunk-5ZMNIWHF.mjs";
+} from "./chunk-SVFEUEGP.mjs";
 export {
   dom
 };

package/dist/tabs.machine.js

@@ -25,6 +25,7 @@ __export(tabs_machine_exports, {
 module.exports = __toCommonJS(tabs_machine_exports);
 var import_core = require("@zag-js/core");
 var import_dom_query2 = require("@zag-js/dom-query");
+var import_element_rect = require("@zag-js/element-rect");
 var import_tabbable = require("@zag-js/tabbable");
 var import_utils2 = require("@zag-js/utils");
 
@@ -37,7 +38,7 @@ var dom = (0, import_dom_query.createScope)({
   getContentId: (ctx, id) => ctx.ids?.content ?? `tabs:${ctx.id}:content-${id}`,
   getContentGroupId: (ctx) => ctx.ids?.contentGroup ?? `tabs:${ctx.id}:content-group`,
   getTriggerId: (ctx, id) => ctx.ids?.trigger ?? `tabs:${ctx.id}:trigger-${id}`,
-  getIndicatorId: (ctx) => `tabs:${ctx.id}:indicator`,
+  getIndicatorId: (ctx) => ctx.ids?.indicator ?? `tabs:${ctx.id}:indicator`,
   getTablistEl: (ctx) => dom.getById(ctx, dom.getTablistId(ctx)),
   getContentEl: (ctx, id) => dom.getById(ctx, dom.getContentId(ctx, id)),
   getTriggerEl: (ctx, id) => dom.getById(ctx, dom.getTriggerId(ctx, id)),
@@ -54,26 +55,31 @@ var dom = (0, import_dom_query.createScope)({
   getActiveContentEl: (ctx) => {
     if (!ctx.value)
       return;
-    const id = dom.getContentId(ctx, ctx.value);
-    return dom.getById(ctx, id);
+    return dom.getContentEl(ctx, ctx.value);
   },
-  getRectById: (ctx, id) => {
-    const empty = {
-      offsetLeft: 0,
-      offsetTop: 0,
-      offsetWidth: 0,
-      offsetHeight: 0
+  getActiveTabEl: (ctx) => {
+    if (!ctx.value)
+      return;
+    return dom.getTriggerEl(ctx, ctx.value);
+  },
+  getOffsetRect: (el) => {
+    return {
+      left: el?.offsetLeft ?? 0,
+      top: el?.offsetTop ?? 0,
+      width: el?.offsetWidth ?? 0,
+      height: el?.offsetHeight ?? 0
     };
-    const tab = (0, import_dom_query.itemById)(dom.getElements(ctx), dom.getTriggerId(ctx, id)) ?? empty;
-    if (ctx.isVertical) {
-      return {
-        top: `${tab.offsetTop}px`,
-        height: `${tab.offsetHeight}px`
-      };
-    }
+  },
+  getRectById: (ctx, id) => {
+    const tab = (0, import_dom_query.itemById)(dom.getElements(ctx), dom.getTriggerId(ctx, id));
+    return dom.resolveRect(dom.getOffsetRect(tab), ctx.orientation);
+  },
+  resolveRect(rect, orientation) {
+    const prop = orientation === "vertical" ? "height" : "width";
     return {
-      left: `${tab.offsetLeft}px`,
-      width: `${tab.offsetWidth}px`
+      left: `${rect.left}px`,
+      top: `${rect.top}px`,
+      [prop]: `${rect[prop]}px`
     };
   }
 });
@@ -93,7 +99,7 @@ function machine(userContext) {
         focusedValue: null,
         previousValues: [],
         indicatorRect: { left: "0px", top: "0px", width: "0px", height: "0px" },
-        hasMeasuredRect: false,
+        canIndicatorTransition: false,
         isIndicatorRendered: false,
         loop: true,
         translations: {},
@@ -104,10 +110,18 @@ function machine(userContext) {
         isVertical: (ctx2) => ctx2.orientation === "vertical"
       },
       created: ["setPrevSelectedTabs"],
+      entry: ["checkRenderedElements", "syncIndicatorRect", "setContentTabIndex"],
+      exit: ["cleanupObserver"],
       watch: {
         focusedValue: "invokeOnFocus",
-        value: ["invokeOnChange", "setPrevSelectedTabs", "setIndicatorRect", "setContentTabIndex"],
-        dir: ["clearMeasured", "setIndicatorRect"]
+        value: [
+          "enableIndicatorTransition",
+          "invokeOnChange",
+          "setPrevSelectedTabs",
+          "syncIndicatorRect",
+          "setContentTabIndex"
+        ],
+        dir: ["syncIndicatorRect"]
       },
       on: {
         SET_VALUE: {
@@ -115,9 +129,11 @@ function machine(userContext) {
         },
         CLEAR_VALUE: {
           actions: "clearValue"
+        },
+        SET_INDICATOR_RECT: {
+          actions: "setIndicatorRect"
         }
       },
-      entry: ["checkRenderedElements", "setIndicatorRect", "setContentTabIndex"],
       states: {
         idle: {
           on: {
@@ -198,9 +214,6 @@ function machine(userContext) {
         clearValue(ctx2) {
           ctx2.value = null;
         },
-        invokeOnDelete(ctx2, evt) {
-          ctx2.onDelete?.({ value: evt.value });
-        },
         focusFirstTab(ctx2) {
           (0, import_dom_query2.raf)(() => dom.getFirstEl(ctx2)?.focus());
         },
@@ -219,24 +232,9 @@ function machine(userContext) {
           const prev = dom.getPrevEl(ctx2, ctx2.focusedValue);
           (0, import_dom_query2.raf)(() => prev?.focus());
         },
-        setIndicatorRect(ctx2) {
-          (0, import_dom_query2.nextTick)(() => {
-            if (!ctx2.isIndicatorRendered || !ctx2.value)
-              return;
-            ctx2.indicatorRect = dom.getRectById(ctx2, ctx2.value);
-            if (ctx2.hasMeasuredRect)
-              return;
-            (0, import_dom_query2.nextTick)(() => {
-              ctx2.hasMeasuredRect = true;
-            });
-          });
-        },
         checkRenderedElements(ctx2) {
           ctx2.isIndicatorRendered = !!dom.getIndicatorEl(ctx2);
         },
-        clearMeasured(ctx2) {
-          ctx2.hasMeasuredRect = false;
-        },
         invokeOnChange(ctx2) {
           ctx2.onChange?.({ value: ctx2.value });
         },
@@ -245,7 +243,7 @@ function machine(userContext) {
         },
         setPrevSelectedTabs(ctx2) {
           if (ctx2.value != null) {
-            ctx2.previousValues = pushUnique(Array.from(ctx2.previousValues), ctx2.value);
+            ctx2.previousValues = pushUnique(ctx2.previousValues, ctx2.value);
           }
         },
         // if tab panel contains focusable elements, remove the tabindex attribute
@@ -261,13 +259,51 @@ function machine(userContext) {
               panel.setAttribute("tabindex", "0");
             }
           });
+        },
+        cleanupObserver(ctx2) {
+          ctx2.indicatorCleanup?.();
+        },
+        enableIndicatorTransition(ctx2) {
+          ctx2.canIndicatorTransition = true;
+        },
+        setIndicatorRect(ctx2, evt) {
+          const value = evt.id ?? ctx2.value;
+          if (!ctx2.isIndicatorRendered || !value)
+            return;
+          const tabEl = dom.getTriggerEl(ctx2, value);
+          if (!tabEl)
+            return;
+          ctx2.indicatorRect = dom.getRectById(ctx2, value);
+          (0, import_dom_query2.nextTick)(() => {
+            ctx2.canIndicatorTransition = false;
+          });
+        },
+        syncIndicatorRect(ctx2) {
+          ctx2.indicatorCleanup?.();
+          const value = ctx2.value;
+          if (!ctx2.isIndicatorRendered || !value)
+            return;
+          const tabEl = dom.getActiveTabEl(ctx2);
+          if (!tabEl)
+            return;
+          ctx2.indicatorCleanup = (0, import_element_rect.trackElementRect)(tabEl, {
+            getRect(el) {
+              return dom.getOffsetRect(el);
+            },
+            onChange(rect) {
+              ctx2.indicatorRect = dom.resolveRect(rect, ctx2.orientation);
+              (0, import_dom_query2.nextTick)(() => {
+                ctx2.canIndicatorTransition = false;
+              });
+            }
+          });
         }
       }
     }
   );
 }
 function pushUnique(arr, value) {
-  const newArr = arr.slice();
+  const newArr = Array.from(arr).slice();
   const index = newArr.indexOf(value);
   if (index > -1) {
     newArr.splice(index, 1);

package/dist/tabs.machine.mjs

@@ -1,7 +1,7 @@
 import {
   machine
-} from "./chunk-JG2VX4ST.mjs";
-import "./chunk-5ZMNIWHF.mjs";
+} from "./chunk-N5FVPJXW.mjs";
+import "./chunk-SVFEUEGP.mjs";
 export {
   machine
 };

package/dist/tabs.types.d.ts

@@ -10,6 +10,7 @@ type ElementIds = Partial<{
     tablist: string;
     contentGroup: string;
     content: string;
+    indicator: string;
 }>;
 type PublicContext = DirectionProperty & CommonProperties & {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/tabs",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "Core logic for the tabs widget implemented as a state machine",
   "keywords": [
     "js",
@@ -28,10 +28,11 @@
   "dependencies": {
     "@zag-js/anatomy": "0.1.4",
     "@zag-js/dom-query": "0.1.4",
-    "@zag-js/dom-event": "0.6.0",
-    "@zag-js/tabbable": "0.1.1",
+    "@zag-js/dom-event": "0.8.0",
+    "@zag-js/element-rect": "0.8.0",
+    "@zag-js/tabbable": "0.8.0",
     "@zag-js/utils": "0.3.4",
-    "@zag-js/core": "0.5.0",
+    "@zag-js/core": "0.7.0",
     "@zag-js/types": "0.5.0"
   },
   "devDependencies": {