@zag-js/combobox 0.79.3 → 0.81.0

package/dist/index.d.mts

@@ -9,7 +9,7 @@ import { Machine, StateMachine } from '@zag-js/core';
 import { PositioningOptions } from '@zag-js/popper';
 export { Placement, PositioningOptions } from '@zag-js/popper';
 
-declare const anatomy: _zag_js_anatomy.AnatomyInstance<"input" | "label" | "root" | "content" | "item" | "list" | "clearTrigger" | "control" | "itemGroup" | "itemGroupLabel" | "itemIndicator" | "itemText" | "positioner" | "trigger">;
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"content" | "list" | "label" | "input" | "root" | "item" | "clearTrigger" | "control" | "itemGroup" | "itemGroupLabel" | "itemIndicator" | "itemText" | "positioner" | "trigger">;
 
 declare const collection: {
     <T extends unknown>(options: CollectionOptions<T>): ListCollection<T>;
@@ -34,6 +34,10 @@ interface ScrollToIndexDetails {
     index: number;
     immediate?: boolean | undefined;
 }
+interface NavigateDetails {
+    value: string | null;
+    node: HTMLAnchorElement;
+}
 interface IntlTranslations {
     triggerLabel?: string | undefined;
     clearTriggerLabel?: string | undefined;
@@ -205,6 +209,10 @@ interface PublicContext<T extends CollectionItem = CollectionItem> extends Direc
      * Whether to disable registering this a dismissable layer
      */
     disableLayer?: boolean | undefined;
+    /**
+     * Function to navigate to the selected item
+     */
+    navigate: (details: NavigateDetails) => void;
 }
 type UserDefinedContext<T extends CollectionItem = CollectionItem> = RequiredBy<PublicContext<T>, "id" | "collection">;
 type ComputedContext = Readonly<{
@@ -401,4 +409,4 @@ declare function connect<T extends PropTypes, V extends CollectionItem>(state: S
 
 declare function machine<T extends CollectionItem>(userContext: UserDefinedContext<T>): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
 
-export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type HighlightChangeDetails, type InputValueChangeDetails, type IntlTranslations, type ItemGroupLabelProps, type ItemGroupProps, type ItemProps, type ItemState, type OpenChangeDetails, type ScrollToIndexDetails, type Service, type TriggerProps, type ValueChangeDetails, anatomy, collection, connect, machine };
+export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type HighlightChangeDetails, type InputValueChangeDetails, type IntlTranslations, type ItemGroupLabelProps, type ItemGroupProps, type ItemProps, type ItemState, type NavigateDetails, type OpenChangeDetails, type ScrollToIndexDetails, type Service, type TriggerProps, type ValueChangeDetails, anatomy, collection, connect, machine };

package/dist/index.d.ts

@@ -9,7 +9,7 @@ import { Machine, StateMachine } from '@zag-js/core';
 import { PositioningOptions } from '@zag-js/popper';
 export { Placement, PositioningOptions } from '@zag-js/popper';
 
-declare const anatomy: _zag_js_anatomy.AnatomyInstance<"input" | "label" | "root" | "content" | "item" | "list" | "clearTrigger" | "control" | "itemGroup" | "itemGroupLabel" | "itemIndicator" | "itemText" | "positioner" | "trigger">;
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"content" | "list" | "label" | "input" | "root" | "item" | "clearTrigger" | "control" | "itemGroup" | "itemGroupLabel" | "itemIndicator" | "itemText" | "positioner" | "trigger">;
 
 declare const collection: {
     <T extends unknown>(options: CollectionOptions<T>): ListCollection<T>;
@@ -34,6 +34,10 @@ interface ScrollToIndexDetails {
     index: number;
     immediate?: boolean | undefined;
 }
+interface NavigateDetails {
+    value: string | null;
+    node: HTMLAnchorElement;
+}
 interface IntlTranslations {
     triggerLabel?: string | undefined;
     clearTriggerLabel?: string | undefined;
@@ -205,6 +209,10 @@ interface PublicContext<T extends CollectionItem = CollectionItem> extends Direc
      * Whether to disable registering this a dismissable layer
      */
     disableLayer?: boolean | undefined;
+    /**
+     * Function to navigate to the selected item
+     */
+    navigate: (details: NavigateDetails) => void;
 }
 type UserDefinedContext<T extends CollectionItem = CollectionItem> = RequiredBy<PublicContext<T>, "id" | "collection">;
 type ComputedContext = Readonly<{
@@ -401,4 +409,4 @@ declare function connect<T extends PropTypes, V extends CollectionItem>(state: S
 
 declare function machine<T extends CollectionItem>(userContext: UserDefinedContext<T>): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
 
-export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type HighlightChangeDetails, type InputValueChangeDetails, type IntlTranslations, type ItemGroupLabelProps, type ItemGroupProps, type ItemProps, type ItemState, type OpenChangeDetails, type ScrollToIndexDetails, type Service, type TriggerProps, type ValueChangeDetails, anatomy, collection, connect, machine };
+export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type HighlightChangeDetails, type InputValueChangeDetails, type IntlTranslations, type ItemGroupLabelProps, type ItemGroupProps, type ItemProps, type ItemState, type NavigateDetails, type OpenChangeDetails, type ScrollToIndexDetails, type Service, type TriggerProps, type ValueChangeDetails, anatomy, collection, connect, machine };

package/dist/index.js

@@ -3,7 +3,6 @@
 var anatomy$1 = require('@zag-js/anatomy');
 var collection$1 = require('@zag-js/collection');
 var core = require('@zag-js/core');
-var domEvent = require('@zag-js/dom-event');
 var domQuery = require('@zag-js/dom-query');
 var popper = require('@zag-js/popper');
 var ariaHidden = require('@zag-js/aria-hidden');
@@ -270,14 +269,19 @@ function connect(state, send, normalize) {
                 event2.preventDefault();
               }
               const itemEl = dom.getHighlightedItemEl(state.context);
-              domEvent.clickIfLink(itemEl);
+              if (domQuery.isAnchorElement(itemEl)) {
+                state.context.navigate({
+                  value: state.context.highlightedValue,
+                  node: itemEl
+                });
+              }
             },
             Escape() {
               send({ type: "INPUT.ESCAPE", keypress });
               event.preventDefault();
             }
           };
-          const key = domEvent.getEventKey(event, state.context);
+          const key = domQuery.getEventKey(event, state.context);
           const exec = keymap[key];
           exec?.(event);
         }
@@ -307,7 +311,7 @@ function connect(state, send, normalize) {
         onClick(event) {
           if (event.defaultPrevented) return;
           if (!interactive) return;
-          if (!domEvent.isLeftClick(event)) return;
+          if (!domQuery.isLeftClick(event)) return;
           send("TRIGGER.CLICK");
         },
         onPointerDown(event) {
@@ -329,7 +333,7 @@ function connect(state, send, normalize) {
               send({ type: "INPUT.ARROW_UP", src: "trigger" });
             }
           };
-          const key = domEvent.getEventKey(event, state.context);
+          const key = domQuery.getEventKey(event, state.context);
           const exec = keyMap[key];
           if (exec) {
             exec(event);
@@ -416,7 +420,7 @@ function connect(state, send, normalize) {
         onClick(event) {
           if (domQuery.isDownloadingEvent(event)) return;
           if (domQuery.isOpeningInNewTab(event)) return;
-          if (domEvent.isContextMenuEvent(event)) return;
+          if (domQuery.isContextMenuEvent(event)) return;
           if (itemState.disabled) return;
           send({ type: "ITEM.CLICK", src: "click", value });
         }
@@ -484,6 +488,9 @@ function machine(userContext) {
         composite: true,
         readOnly: false,
         disabled: false,
+        navigate({ node }) {
+          domQuery.clickIfLink(node);
+        },
         ...ctx,
         highlightedItem: null,
         selectedItems: [],

package/dist/index.mjs

@@ -1,8 +1,7 @@
 import { createAnatomy } from '@zag-js/anatomy';
 import { ListCollection } from '@zag-js/collection';
 import { ref, createMachine, guards } from '@zag-js/core';
-import { getEventKey, isLeftClick, isContextMenuEvent, clickIfLink } from '@zag-js/dom-event';
-import { createScope, query, dataAttr, ariaAttr, isComposingEvent, isDownloadingEvent, isOpeningInNewTab, observeChildren, raf, observeAttributes, scrollIntoView } from '@zag-js/dom-query';
+import { createScope, query, dataAttr, ariaAttr, isComposingEvent, getEventKey, isLeftClick, isDownloadingEvent, isOpeningInNewTab, isContextMenuEvent, clickIfLink, observeChildren, raf, observeAttributes, scrollIntoView, isAnchorElement } from '@zag-js/dom-query';
 import { getPlacementStyles, getPlacement } from '@zag-js/popper';
 import { ariaHidden } from '@zag-js/aria-hidden';
 import { trackDismissableElement } from '@zag-js/dismissable';
@@ -268,7 +267,12 @@ function connect(state, send, normalize) {
                 event2.preventDefault();
               }
               const itemEl = dom.getHighlightedItemEl(state.context);
-              clickIfLink(itemEl);
+              if (isAnchorElement(itemEl)) {
+                state.context.navigate({
+                  value: state.context.highlightedValue,
+                  node: itemEl
+                });
+              }
             },
             Escape() {
               send({ type: "INPUT.ESCAPE", keypress });
@@ -482,6 +486,9 @@ function machine(userContext) {
         composite: true,
         readOnly: false,
         disabled: false,
+        navigate({ node }) {
+          clickIfLink(node);
+        },
         ...ctx,
         highlightedItem: null,
         selectedItems: [],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/combobox",
-  "version": "0.79.3",
+  "version": "0.81.0",
   "description": "Core logic for the combobox widget implemented as a state machine",
   "keywords": [
     "js",
@@ -26,16 +26,15 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "0.79.3",
-    "@zag-js/aria-hidden": "0.79.3",
-    "@zag-js/collection": "0.79.3",
-    "@zag-js/core": "0.79.3",
-    "@zag-js/dismissable": "0.79.3",
-    "@zag-js/dom-query": "0.79.3",
-    "@zag-js/dom-event": "0.79.3",
-    "@zag-js/utils": "0.79.3",
-    "@zag-js/popper": "0.79.3",
-    "@zag-js/types": "0.79.3"
+    "@zag-js/anatomy": "0.81.0",
+    "@zag-js/aria-hidden": "0.81.0",
+    "@zag-js/collection": "0.81.0",
+    "@zag-js/core": "0.81.0",
+    "@zag-js/dismissable": "0.81.0",
+    "@zag-js/dom-query": "0.81.0",
+    "@zag-js/utils": "0.81.0",
+    "@zag-js/popper": "0.81.0",
+    "@zag-js/types": "0.81.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"