@zag-js/tabs 1.35.3 → 1.36.0

package/dist/tabs.connect.js

@@ -200,13 +200,17 @@ function connect(service, normalize) {
     },
     getIndicatorProps() {
       const rect = context.get("indicatorRect");
-      const rectIsEmpty = rect == null || rect.width === 0 && rect.height === 0 && rect.x === 0 && rect.y === 0;
+      const animateIndicator = context.get("animateIndicator");
       return normalize.element({
         id: dom.getIndicatorId(scope),
         ...import_tabs.parts.indicator.attrs,
         dir: prop("dir"),
         "data-orientation": prop("orientation"),
-        hidden: rectIsEmpty,
+        hidden: isRectEmpty(rect),
+        onTransitionEnd(event) {
+          if ((0, import_dom_query.getEventTarget)(event) !== event.currentTarget) return;
+          send({ type: "INDICATOR_TRANSITION_END" });
+        },
         style: {
           "--transition-property": "left, right, top, bottom, width, height",
           "--left": (0, import_utils.toPx)(rect?.x),
@@ -214,9 +218,9 @@ function connect(service, normalize) {
           "--width": (0, import_utils.toPx)(rect?.width),
           "--height": (0, import_utils.toPx)(rect?.height),
           position: "absolute",
-          willChange: "var(--transition-property)",
-          transitionProperty: "var(--transition-property)",
-          transitionDuration: "var(--transition-duration, 150ms)",
+          willChange: animateIndicator ? "var(--transition-property)" : "auto",
+          transitionProperty: animateIndicator ? "var(--transition-property)" : "none",
+          transitionDuration: animateIndicator ? "var(--transition-duration, 150ms)" : "0ms",
           transitionTimingFunction: "var(--transition-timing-function)",
           [isHorizontal ? "left" : "top"]: isHorizontal ? "var(--left)" : "var(--top)"
         }
@@ -224,6 +228,7 @@ function connect(service, normalize) {
     }
   };
 }
+var isRectEmpty = (rect) => rect == null || rect.width === 0 && rect.height === 0 && rect.x === 0 && rect.y === 0;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   connect

package/dist/tabs.connect.mjs

@@ -174,13 +174,17 @@ function connect(service, normalize) {
     },
     getIndicatorProps() {
       const rect = context.get("indicatorRect");
-      const rectIsEmpty = rect == null || rect.width === 0 && rect.height === 0 && rect.x === 0 && rect.y === 0;
+      const animateIndicator = context.get("animateIndicator");
       return normalize.element({
         id: dom.getIndicatorId(scope),
         ...parts.indicator.attrs,
         dir: prop("dir"),
         "data-orientation": prop("orientation"),
-        hidden: rectIsEmpty,
+        hidden: isRectEmpty(rect),
+        onTransitionEnd(event) {
+          if (getEventTarget(event) !== event.currentTarget) return;
+          send({ type: "INDICATOR_TRANSITION_END" });
+        },
         style: {
           "--transition-property": "left, right, top, bottom, width, height",
           "--left": toPx(rect?.x),
@@ -188,9 +192,9 @@ function connect(service, normalize) {
           "--width": toPx(rect?.width),
           "--height": toPx(rect?.height),
           position: "absolute",
-          willChange: "var(--transition-property)",
-          transitionProperty: "var(--transition-property)",
-          transitionDuration: "var(--transition-duration, 150ms)",
+          willChange: animateIndicator ? "var(--transition-property)" : "auto",
+          transitionProperty: animateIndicator ? "var(--transition-property)" : "none",
+          transitionDuration: animateIndicator ? "var(--transition-duration, 150ms)" : "0ms",
           transitionTimingFunction: "var(--transition-timing-function)",
           [isHorizontal ? "left" : "top"]: isHorizontal ? "var(--left)" : "var(--top)"
         }
@@ -198,6 +202,7 @@ function connect(service, normalize) {
     }
   };
 }
+var isRectEmpty = (rect) => rect == null || rect.width === 0 && rect.height === 0 && rect.x === 0 && rect.y === 0;
 export {
   connect
 };

package/dist/tabs.machine.js

@@ -75,12 +75,21 @@ var machine = createMachine({
       ssr: bindable(() => ({ defaultValue: true })),
       indicatorRect: bindable(() => ({
         defaultValue: null
+      })),
+      animateIndicator: bindable(() => ({
+        defaultValue: false
       }))
     };
   },
+  refs() {
+    return {
+      indicatorCleanup: null,
+      prevValue: null
+    };
+  },
   watch({ context, prop, track, action }) {
     track([() => context.get("value")], () => {
-      action(["syncIndicatorRect", "syncTabIndex", "navigateIfNeeded"]);
+      action(["syncIndicatorAnimation", "syncIndicatorRect", "syncTabIndex", "navigateIfNeeded"]);
     });
     track([() => prop("dir"), () => prop("orientation")], () => {
       action(["syncIndicatorRect"]);
@@ -98,9 +107,12 @@ var machine = createMachine({
     },
     SYNC_TAB_INDEX: {
       actions: ["syncTabIndex"]
+    },
+    INDICATOR_TRANSITION_END: {
+      actions: ["clearIndicatorAnimation"]
     }
   },
-  entry: ["syncIndicatorRect", "syncTabIndex", "syncSsr"],
+  entry: ["syncPrevValue", "syncIndicatorRect", "syncTabIndex", "syncSsr"],
   exit: ["cleanupObserver"],
   states: {
     idle: {
@@ -266,6 +278,19 @@ var machine = createMachine({
       syncSsr({ context }) {
         context.set("ssr", false);
       },
+      syncPrevValue({ context, refs }) {
+        refs.set("prevValue", context.get("value"));
+      },
+      syncIndicatorAnimation({ context, refs }) {
+        const prevValue = refs.get("prevValue");
+        const nextValue = context.get("value");
+        const animate = prevValue != null && nextValue != null && prevValue !== nextValue;
+        context.set("animateIndicator", animate);
+        refs.set("prevValue", nextValue);
+      },
+      clearIndicatorAnimation({ context }) {
+        context.set("animateIndicator", false);
+      },
       syncIndicatorRect({ context, refs, scope }) {
         const cleanup = refs.get("indicatorCleanup");
         if (cleanup) cleanup();

package/dist/tabs.machine.mjs

@@ -41,12 +41,21 @@ var machine = createMachine({
       ssr: bindable(() => ({ defaultValue: true })),
       indicatorRect: bindable(() => ({
         defaultValue: null
+      })),
+      animateIndicator: bindable(() => ({
+        defaultValue: false
       }))
     };
   },
+  refs() {
+    return {
+      indicatorCleanup: null,
+      prevValue: null
+    };
+  },
   watch({ context, prop, track, action }) {
     track([() => context.get("value")], () => {
-      action(["syncIndicatorRect", "syncTabIndex", "navigateIfNeeded"]);
+      action(["syncIndicatorAnimation", "syncIndicatorRect", "syncTabIndex", "navigateIfNeeded"]);
     });
     track([() => prop("dir"), () => prop("orientation")], () => {
       action(["syncIndicatorRect"]);
@@ -64,9 +73,12 @@ var machine = createMachine({
     },
     SYNC_TAB_INDEX: {
       actions: ["syncTabIndex"]
+    },
+    INDICATOR_TRANSITION_END: {
+      actions: ["clearIndicatorAnimation"]
     }
   },
-  entry: ["syncIndicatorRect", "syncTabIndex", "syncSsr"],
+  entry: ["syncPrevValue", "syncIndicatorRect", "syncTabIndex", "syncSsr"],
   exit: ["cleanupObserver"],
   states: {
     idle: {
@@ -232,6 +244,19 @@ var machine = createMachine({
       syncSsr({ context }) {
         context.set("ssr", false);
       },
+      syncPrevValue({ context, refs }) {
+        refs.set("prevValue", context.get("value"));
+      },
+      syncIndicatorAnimation({ context, refs }) {
+        const prevValue = refs.get("prevValue");
+        const nextValue = context.get("value");
+        const animate = prevValue != null && nextValue != null && prevValue !== nextValue;
+        context.set("animateIndicator", animate);
+        refs.set("prevValue", nextValue);
+      },
+      clearIndicatorAnimation({ context }) {
+        context.set("animateIndicator", false);
+      },
       syncIndicatorRect({ context, refs, scope }) {
         const cleanup = refs.get("indicatorCleanup");
         if (cleanup) cleanup();

package/dist/tabs.types.d.mts

@@ -92,9 +92,11 @@ type TabsSchema = {
         value: string | null;
         focusedValue: string | null;
         indicatorRect: Rect | null;
+        animateIndicator: boolean;
     };
     refs: {
         indicatorCleanup: VoidFunction | null | undefined;
+        prevValue: string | null;
     };
     computed: {
         focused: boolean;

package/dist/tabs.types.d.ts

@@ -92,9 +92,11 @@ type TabsSchema = {
         value: string | null;
         focusedValue: string | null;
         indicatorRect: Rect | null;
+        animateIndicator: boolean;
     };
     refs: {
         indicatorCleanup: VoidFunction | null | undefined;
+        prevValue: string | null;
     };
     computed: {
         focused: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/tabs",
-  "version": "1.35.3",
+  "version": "1.36.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.35.3",
-    "@zag-js/dom-query": "1.35.3",
-    "@zag-js/utils": "1.35.3",
-    "@zag-js/core": "1.35.3",
-    "@zag-js/types": "1.35.3"
+    "@zag-js/anatomy": "1.36.0",
+    "@zag-js/dom-query": "1.36.0",
+    "@zag-js/utils": "1.36.0",
+    "@zag-js/core": "1.36.0",
+    "@zag-js/types": "1.36.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"