@zag-js/tabs 0.80.0 → 0.81.0

package/dist/index.d.mts

@@ -11,6 +11,10 @@ interface ValueChangeDetails {
 interface FocusChangeDetails {
     focusedValue: string;
 }
+interface NavigateDetails {
+    value: string | null;
+    node: HTMLAnchorElement;
+}
 interface IntlTranslations {
     listLabel?: string | undefined;
 }
@@ -71,6 +75,11 @@ interface PublicContext extends DirectionProperty, CommonProperties {
      * Whether the active tab can be deselected when clicking on it.
      */
     deselectable?: boolean | undefined;
+    /**
+     * Function to navigate to the selected tab when clicking on it.
+     * Useful if tab triggers are anchor elements.
+     */
+    navigate: (details: NavigateDetails) => void;
 }
 type UserDefinedContext = RequiredBy<PublicContext, "id">;
 type ComputedContext = Readonly<{}>;
@@ -167,11 +176,11 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
 
 declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
 
-declare const props: ("value" | "dir" | "id" | "getRootNode" | "orientation" | "ids" | "translations" | "loopFocus" | "activationMode" | "onValueChange" | "onFocusChange" | "composite" | "deselectable")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "value" | "dir" | "id" | "getRootNode" | "orientation" | "ids" | "translations" | "loopFocus" | "activationMode" | "onValueChange" | "onFocusChange" | "composite" | "deselectable">];
+declare const props: ("dir" | "id" | "value" | "orientation" | "getRootNode" | "ids" | "translations" | "loopFocus" | "activationMode" | "onValueChange" | "onFocusChange" | "composite" | "deselectable" | "navigate")[];
+declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "dir" | "id" | "value" | "orientation" | "getRootNode" | "ids" | "translations" | "loopFocus" | "activationMode" | "onValueChange" | "onFocusChange" | "composite" | "deselectable" | "navigate">];
 declare const triggerProps: (keyof TriggerProps)[];
 declare const splitTriggerProps: <Props extends TriggerProps>(props: Props) => [TriggerProps, Omit<Props, keyof TriggerProps>];
 declare const contentProps: "value"[];
 declare const splitContentProps: <Props extends ContentProps>(props: Props) => [ContentProps, Omit<Props, "value">];
 
-export { type MachineApi as Api, type ContentProps, type UserDefinedContext as Context, type ElementIds, type FocusChangeDetails, type IntlTranslations, type Service, type TriggerProps, type ValueChangeDetails, anatomy, connect, contentProps, machine, props, splitContentProps, splitProps, splitTriggerProps, triggerProps };
+export { type MachineApi as Api, type ContentProps, type UserDefinedContext as Context, type ElementIds, type FocusChangeDetails, type IntlTranslations, type NavigateDetails, type Service, type TriggerProps, type ValueChangeDetails, anatomy, connect, contentProps, machine, props, splitContentProps, splitProps, splitTriggerProps, triggerProps };

package/dist/index.d.ts

@@ -11,6 +11,10 @@ interface ValueChangeDetails {
 interface FocusChangeDetails {
     focusedValue: string;
 }
+interface NavigateDetails {
+    value: string | null;
+    node: HTMLAnchorElement;
+}
 interface IntlTranslations {
     listLabel?: string | undefined;
 }
@@ -71,6 +75,11 @@ interface PublicContext extends DirectionProperty, CommonProperties {
      * Whether the active tab can be deselected when clicking on it.
      */
     deselectable?: boolean | undefined;
+    /**
+     * Function to navigate to the selected tab when clicking on it.
+     * Useful if tab triggers are anchor elements.
+     */
+    navigate: (details: NavigateDetails) => void;
 }
 type UserDefinedContext = RequiredBy<PublicContext, "id">;
 type ComputedContext = Readonly<{}>;
@@ -167,11 +176,11 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
 
 declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
 
-declare const props: ("value" | "dir" | "id" | "getRootNode" | "orientation" | "ids" | "translations" | "loopFocus" | "activationMode" | "onValueChange" | "onFocusChange" | "composite" | "deselectable")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "value" | "dir" | "id" | "getRootNode" | "orientation" | "ids" | "translations" | "loopFocus" | "activationMode" | "onValueChange" | "onFocusChange" | "composite" | "deselectable">];
+declare const props: ("dir" | "id" | "value" | "orientation" | "getRootNode" | "ids" | "translations" | "loopFocus" | "activationMode" | "onValueChange" | "onFocusChange" | "composite" | "deselectable" | "navigate")[];
+declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "dir" | "id" | "value" | "orientation" | "getRootNode" | "ids" | "translations" | "loopFocus" | "activationMode" | "onValueChange" | "onFocusChange" | "composite" | "deselectable" | "navigate">];
 declare const triggerProps: (keyof TriggerProps)[];
 declare const splitTriggerProps: <Props extends TriggerProps>(props: Props) => [TriggerProps, Omit<Props, keyof TriggerProps>];
 declare const contentProps: "value"[];
 declare const splitContentProps: <Props extends ContentProps>(props: Props) => [ContentProps, Omit<Props, "value">];
 
-export { type MachineApi as Api, type ContentProps, type UserDefinedContext as Context, type ElementIds, type FocusChangeDetails, type IntlTranslations, type Service, type TriggerProps, type ValueChangeDetails, anatomy, connect, contentProps, machine, props, splitContentProps, splitProps, splitTriggerProps, triggerProps };
+export { type MachineApi as Api, type ContentProps, type UserDefinedContext as Context, type ElementIds, type FocusChangeDetails, type IntlTranslations, type NavigateDetails, type Service, type TriggerProps, type ValueChangeDetails, anatomy, connect, contentProps, machine, props, splitContentProps, splitProps, splitTriggerProps, triggerProps };

package/dist/index.js

@@ -1,7 +1,6 @@
 'use strict';
 
 var anatomy$1 = require('@zag-js/anatomy');
-var domEvent = require('@zag-js/dom-event');
 var domQuery = require('@zag-js/dom-query');
 var utils = require('@zag-js/utils');
 var core = require('@zag-js/core');
@@ -150,7 +149,7 @@ function connect(state, send, normalize) {
               send({ type: "ENTER" });
             }
           };
-          let key = domEvent.getEventKey(event, state.context);
+          let key = domQuery.getEventKey(event, state.context);
           const exec = keyMap[key];
           if (exec) {
             event.preventDefault();
@@ -252,6 +251,9 @@ function machine(userContext) {
         value: null,
         loopFocus: true,
         composite: true,
+        navigate(details) {
+          domQuery.clickIfLink(details.node);
+        },
         ...ctx,
         focusedValue: ctx.value ?? null,
         ssr: true,
@@ -262,7 +264,7 @@ function machine(userContext) {
         }
       },
       watch: {
-        value: ["allowIndicatorTransition", "syncIndicatorRect", "syncTabIndex", "clickIfLink"],
+        value: ["allowIndicatorTransition", "syncIndicatorRect", "syncTabIndex", "navigateIfNeeded"],
         dir: ["syncIndicatorRect"],
         orientation: ["syncIndicatorRect"]
       },
@@ -469,8 +471,10 @@ function machine(userContext) {
             }
           });
         },
-        clickIfLink(ctx2) {
-          domEvent.clickIfLink(dom.getSelectedTriggerEl(ctx2));
+        navigateIfNeeded(ctx2) {
+          const triggerEl = dom.getSelectedTriggerEl(ctx2);
+          if (!domQuery.isAnchorElement(triggerEl)) return;
+          ctx2.navigate({ value: ctx2.value, node: triggerEl });
         }
       }
     }
@@ -501,16 +505,17 @@ var set = {
 var props = types.createProps()([
   "activationMode",
   "composite",
+  "deselectable",
   "dir",
   "getRootNode",
   "id",
   "ids",
   "loopFocus",
+  "navigate",
   "onFocusChange",
   "onValueChange",
   "orientation",
   "translations",
-  "deselectable",
   "value"
 ]);
 var splitProps = utils.createSplitProps(props);

package/dist/index.mjs

@@ -1,6 +1,5 @@
 import { createAnatomy } from '@zag-js/anatomy';
-import { getEventKey, clickIfLink } from '@zag-js/dom-event';
-import { createScope, queryAll, nextById, prevById, itemById, dataAttr, isSelfTarget, isComposingEvent, isSafari, raf, getFocusables, nextTick } from '@zag-js/dom-query';
+import { createScope, queryAll, nextById, prevById, itemById, dataAttr, isSelfTarget, isComposingEvent, getEventKey, isSafari, clickIfLink, raf, getFocusables, nextTick, isAnchorElement } from '@zag-js/dom-query';
 import { first, last, createSplitProps, compact, isEqual } from '@zag-js/utils';
 import { createMachine, guards } from '@zag-js/core';
 import { trackElementRect } from '@zag-js/element-rect';
@@ -250,6 +249,9 @@ function machine(userContext) {
         value: null,
         loopFocus: true,
         composite: true,
+        navigate(details) {
+          clickIfLink(details.node);
+        },
         ...ctx,
         focusedValue: ctx.value ?? null,
         ssr: true,
@@ -260,7 +262,7 @@ function machine(userContext) {
         }
       },
       watch: {
-        value: ["allowIndicatorTransition", "syncIndicatorRect", "syncTabIndex", "clickIfLink"],
+        value: ["allowIndicatorTransition", "syncIndicatorRect", "syncTabIndex", "navigateIfNeeded"],
         dir: ["syncIndicatorRect"],
         orientation: ["syncIndicatorRect"]
       },
@@ -467,8 +469,10 @@ function machine(userContext) {
             }
           });
         },
-        clickIfLink(ctx2) {
-          clickIfLink(dom.getSelectedTriggerEl(ctx2));
+        navigateIfNeeded(ctx2) {
+          const triggerEl = dom.getSelectedTriggerEl(ctx2);
+          if (!isAnchorElement(triggerEl)) return;
+          ctx2.navigate({ value: ctx2.value, node: triggerEl });
         }
       }
     }
@@ -499,16 +503,17 @@ var set = {
 var props = createProps()([
   "activationMode",
   "composite",
+  "deselectable",
   "dir",
   "getRootNode",
   "id",
   "ids",
   "loopFocus",
+  "navigate",
   "onFocusChange",
   "onValueChange",
   "orientation",
   "translations",
-  "deselectable",
   "value"
 ]);
 var splitProps = createSplitProps(props);

package/package.json

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