@zag-js/tabs 1.44.0 → 1.45.0

package/dist/tabs.connect.js

@@ -44,6 +44,9 @@ function connect(service, normalize) {
   const isVertical = prop("orientation") === "vertical";
   const isHorizontal = prop("orientation") === "horizontal";
   const composite = prop("composite");
+  function sendKeyboardEvent(type, key) {
+    send({ type, key, src: "keyboard" });
+  }
   function getTriggerState(props) {
     return {
       selected: context.get("value") === props.value,
@@ -106,25 +109,25 @@ function connect(service, normalize) {
           const keyMap = {
             ArrowDown() {
               if (isHorizontal) return;
-              send({ type: "ARROW_NEXT", key: "ArrowDown" });
+              sendKeyboardEvent("ARROW_NEXT", "ArrowDown");
             },
             ArrowUp() {
               if (isHorizontal) return;
-              send({ type: "ARROW_PREV", key: "ArrowUp" });
+              sendKeyboardEvent("ARROW_PREV", "ArrowUp");
             },
             ArrowLeft() {
               if (isVertical) return;
-              send({ type: "ARROW_PREV", key: "ArrowLeft" });
+              sendKeyboardEvent("ARROW_PREV", "ArrowLeft");
             },
             ArrowRight() {
               if (isVertical) return;
-              send({ type: "ARROW_NEXT", key: "ArrowRight" });
+              sendKeyboardEvent("ARROW_NEXT", "ArrowRight");
             },
             Home() {
-              send({ type: "HOME" });
+              sendKeyboardEvent("HOME");
             },
             End() {
-              send({ type: "END" });
+              sendKeyboardEvent("END");
             }
           };
           let key = (0, import_dom_query.getEventKey)(event, {
@@ -178,6 +181,9 @@ function connect(service, normalize) {
           if ((0, import_dom_query.isSafari)()) {
             event.currentTarget.focus();
           }
+          const node = event.currentTarget;
+          const shouldNavigate = prop("navigate") != null && (0, import_dom_query.isAnchorElement)(node);
+          if (shouldNavigate) event.preventDefault();
           send({ type: "TAB_CLICK", value });
         }
       });

package/dist/tabs.connect.mjs

@@ -4,6 +4,7 @@ import {
   dataAttr,
   getEventKey,
   getEventTarget,
+  isAnchorElement,
   isComposingEvent,
   isOpeningInNewTab,
   isSafari
@@ -18,6 +19,9 @@ function connect(service, normalize) {
   const isVertical = prop("orientation") === "vertical";
   const isHorizontal = prop("orientation") === "horizontal";
   const composite = prop("composite");
+  function sendKeyboardEvent(type, key) {
+    send({ type, key, src: "keyboard" });
+  }
   function getTriggerState(props) {
     return {
       selected: context.get("value") === props.value,
@@ -80,25 +84,25 @@ function connect(service, normalize) {
           const keyMap = {
             ArrowDown() {
               if (isHorizontal) return;
-              send({ type: "ARROW_NEXT", key: "ArrowDown" });
+              sendKeyboardEvent("ARROW_NEXT", "ArrowDown");
             },
             ArrowUp() {
               if (isHorizontal) return;
-              send({ type: "ARROW_PREV", key: "ArrowUp" });
+              sendKeyboardEvent("ARROW_PREV", "ArrowUp");
             },
             ArrowLeft() {
               if (isVertical) return;
-              send({ type: "ARROW_PREV", key: "ArrowLeft" });
+              sendKeyboardEvent("ARROW_PREV", "ArrowLeft");
             },
             ArrowRight() {
               if (isVertical) return;
-              send({ type: "ARROW_NEXT", key: "ArrowRight" });
+              sendKeyboardEvent("ARROW_NEXT", "ArrowRight");
             },
             Home() {
-              send({ type: "HOME" });
+              sendKeyboardEvent("HOME");
             },
             End() {
-              send({ type: "END" });
+              sendKeyboardEvent("END");
             }
           };
           let key = getEventKey(event, {
@@ -152,6 +156,9 @@ function connect(service, normalize) {
           if (isSafari()) {
             event.currentTarget.focus();
           }
+          const node = event.currentTarget;
+          const shouldNavigate = prop("navigate") != null && isAnchorElement(node);
+          if (shouldNavigate) event.preventDefault();
           send({ type: "TAB_CLICK", value });
         }
       });

package/dist/tabs.machine.js

@@ -46,9 +46,6 @@ var machine = createMachine({
       activationMode: "automatic",
       loopFocus: true,
       composite: true,
-      navigate(details) {
-        (0, import_dom_query.clickIfLink)(details.node);
-      },
       defaultValue: null,
       ...props
     };
@@ -89,7 +86,7 @@ var machine = createMachine({
   },
   watch({ context, prop, track, action }) {
     track([() => context.get("value")], () => {
-      action(["syncIndicatorAnimation", "syncIndicatorRect", "syncTabIndex", "navigateIfNeeded"]);
+      action(["syncIndicatorAnimation", "syncIndicatorRect", "syncTabIndex"]);
     });
     track([() => prop("dir"), () => prop("orientation")], () => {
       action(["syncIndicatorRect"]);
@@ -123,14 +120,14 @@ var machine = createMachine({
         },
         TAB_CLICK: {
           target: "focused",
-          actions: ["setFocusedValue", "setValue"]
+          actions: ["setFocusedValue", "setValue", "requestNavigation"]
         }
       }
     },
     focused: {
       on: {
         TAB_CLICK: {
-          actions: ["setFocusedValue", "setValue"]
+          actions: ["setFocusedValue", "setValue", "requestNavigation"]
         },
         ARROW_PREV: [
           {
@@ -183,12 +180,20 @@ var machine = createMachine({
       selectOnFocus: ({ prop }) => prop("activationMode") === "automatic"
     },
     actions: {
-      selectFocusedTab({ context, prop }) {
+      selectFocusedTab({ context, prop, event, scope }) {
         (0, import_dom_query.raf)(() => {
           const focusedValue = context.get("focusedValue");
           if (!focusedValue) return;
           const nullable = prop("deselectable") && context.get("value") === focusedValue;
           const value = nullable ? null : focusedValue;
+          if (context.get("value") === value) return;
+          if (event.src === "keyboard") {
+            const triggerEl = dom.getTriggerEl(scope, focusedValue);
+            if ((0, import_dom_query.isAnchorElement)(triggerEl) && prop("navigate") !== null) {
+              triggerEl.click();
+              return;
+            }
+          }
           context.set("value", value);
         });
       },
@@ -311,13 +316,12 @@ var machine = createMachine({
         );
         refs.set("indicatorCleanup", indicatorCleanup);
       },
-      navigateIfNeeded({ context, prop, scope }) {
-        const value = context.get("value");
-        if (!value) return;
-        const triggerEl = dom.getTriggerEl(scope, value);
-        if ((0, import_dom_query.isAnchorElement)(triggerEl)) {
-          prop("navigate")?.({ value, node: triggerEl, href: triggerEl.href });
-        }
+      requestNavigation({ event, prop, scope }) {
+        const navigate = prop("navigate");
+        if (!navigate || event.value == null) return;
+        const node = dom.getTriggerEl(scope, event.value);
+        if (!(0, import_dom_query.isAnchorElement)(node)) return;
+        navigate({ value: event.value, node, href: node.href });
       }
     }
   }

package/dist/tabs.machine.mjs

@@ -1,6 +1,6 @@
 // src/tabs.machine.ts
 import { setup } from "@zag-js/core";
-import { clickIfLink, getFocusables, isAnchorElement, raf, resizeObserverBorderBox } from "@zag-js/dom-query";
+import { getFocusables, isAnchorElement, raf, resizeObserverBorderBox } from "@zag-js/dom-query";
 import { callAll, isEqual } from "@zag-js/utils";
 import * as dom from "./tabs.dom.mjs";
 var { createMachine } = setup();
@@ -12,9 +12,6 @@ var machine = createMachine({
       activationMode: "automatic",
       loopFocus: true,
       composite: true,
-      navigate(details) {
-        clickIfLink(details.node);
-      },
       defaultValue: null,
       ...props
     };
@@ -55,7 +52,7 @@ var machine = createMachine({
   },
   watch({ context, prop, track, action }) {
     track([() => context.get("value")], () => {
-      action(["syncIndicatorAnimation", "syncIndicatorRect", "syncTabIndex", "navigateIfNeeded"]);
+      action(["syncIndicatorAnimation", "syncIndicatorRect", "syncTabIndex"]);
     });
     track([() => prop("dir"), () => prop("orientation")], () => {
       action(["syncIndicatorRect"]);
@@ -89,14 +86,14 @@ var machine = createMachine({
         },
         TAB_CLICK: {
           target: "focused",
-          actions: ["setFocusedValue", "setValue"]
+          actions: ["setFocusedValue", "setValue", "requestNavigation"]
         }
       }
     },
     focused: {
       on: {
         TAB_CLICK: {
-          actions: ["setFocusedValue", "setValue"]
+          actions: ["setFocusedValue", "setValue", "requestNavigation"]
         },
         ARROW_PREV: [
           {
@@ -149,12 +146,20 @@ var machine = createMachine({
       selectOnFocus: ({ prop }) => prop("activationMode") === "automatic"
     },
     actions: {
-      selectFocusedTab({ context, prop }) {
+      selectFocusedTab({ context, prop, event, scope }) {
         raf(() => {
           const focusedValue = context.get("focusedValue");
           if (!focusedValue) return;
           const nullable = prop("deselectable") && context.get("value") === focusedValue;
           const value = nullable ? null : focusedValue;
+          if (context.get("value") === value) return;
+          if (event.src === "keyboard") {
+            const triggerEl = dom.getTriggerEl(scope, focusedValue);
+            if (isAnchorElement(triggerEl) && prop("navigate") !== null) {
+              triggerEl.click();
+              return;
+            }
+          }
           context.set("value", value);
         });
       },
@@ -277,13 +282,12 @@ var machine = createMachine({
         );
         refs.set("indicatorCleanup", indicatorCleanup);
       },
-      navigateIfNeeded({ context, prop, scope }) {
-        const value = context.get("value");
-        if (!value) return;
-        const triggerEl = dom.getTriggerEl(scope, value);
-        if (isAnchorElement(triggerEl)) {
-          prop("navigate")?.({ value, node: triggerEl, href: triggerEl.href });
-        }
+      requestNavigation({ event, prop, scope }) {
+        const navigate = prop("navigate");
+        if (!navigate || event.value == null) return;
+        const node = dom.getTriggerEl(scope, event.value);
+        if (!isAnchorElement(node)) return;
+        navigate({ value: event.value, node, href: node.href });
       }
     }
   }

package/dist/tabs.types.d.mts

@@ -104,7 +104,9 @@ type TabsSchema = {
     action: string;
     guard: string;
     effect: string;
-    event: EventObject;
+    event: EventObject & {
+        src?: "keyboard" | "selectNext" | "selectPrev" | undefined;
+    };
 };
 type TabsService = Service<TabsSchema>;
 type TabsMachine = Machine<TabsSchema>;

package/dist/tabs.types.d.ts

@@ -104,7 +104,9 @@ type TabsSchema = {
     action: string;
     guard: string;
     effect: string;
-    event: EventObject;
+    event: EventObject & {
+        src?: "keyboard" | "selectNext" | "selectPrev" | undefined;
+    };
 };
 type TabsService = Service<TabsSchema>;
 type TabsMachine = Machine<TabsSchema>;

package/package.json

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