@zag-js/combobox 0.47.0 → 0.48.0

package/src/combobox.connect.ts

@@ -1,10 +1,17 @@
-import { getEventKey, getNativeEvent, isContextMenuEvent, isLeftClick, type EventKeyMap } from "@zag-js/dom-event"
-import { ariaAttr, dataAttr, raf } from "@zag-js/dom-query"
+import {
+  clickIfLink,
+  getEventKey,
+  getNativeEvent,
+  isContextMenuEvent,
+  isLeftClick,
+  type EventKeyMap,
+} from "@zag-js/dom-event"
+import { ariaAttr, dataAttr, isDownloadingEvent, isOpeningInNewTab, raf } from "@zag-js/dom-query"
 import { getPlacementStyles } from "@zag-js/popper"
 import type { NormalizeProps, PropTypes } from "@zag-js/types"
 import { parts } from "./combobox.anatomy"
 import { dom } from "./combobox.dom"
-import type { CollectionItem, ItemProps, MachineApi, Send, State } from "./combobox.types"
+import type { CollectionItem, ItemProps, ItemState, MachineApi, Send, State } from "./combobox.types"
 
 export function connect<T extends PropTypes, V extends CollectionItem>(
   state: State,
@@ -14,36 +21,37 @@ export function connect<T extends PropTypes, V extends CollectionItem>(
   const translations = state.context.translations
   const collection = state.context.collection
 
-  const isDisabled = state.context.disabled
-  const isInteractive = state.context.isInteractive
-  const isInvalid = state.context.invalid
-  const isReadOnly = state.context.readOnly
+  const disabled = state.context.disabled
+  const interactive = state.context.isInteractive
+  const invalid = state.context.invalid
+  const readOnly = state.context.readOnly
 
-  const isOpen = state.hasTag("open")
-  const isFocused = state.hasTag("focused")
+  const open = state.hasTag("open")
+  const focused = state.hasTag("focused")
+  const isDialogPopup = state.context.popup === "dialog"
 
   const popperStyles = getPlacementStyles({
     ...state.context.positioning,
     placement: state.context.currentPlacement,
   })
 
-  function getItemState(props: ItemProps) {
+  function getItemState(props: ItemProps): ItemState {
     const { item } = props
     const disabled = collection.isItemDisabled(item)
     const value = collection.itemToValue(item)
     return {
       value,
-      isDisabled: Boolean(disabled || isDisabled),
-      isHighlighted: state.context.highlightedValue === value,
-      isSelected: state.context.value.includes(value),
+      disabled: Boolean(disabled || disabled),
+      highlighted: state.context.highlightedValue === value,
+      selected: state.context.value.includes(value),
     }
   }
 
   return {
-    isFocused,
-    isOpen,
+    focused,
+    open,
     inputValue: state.context.inputValue,
-    isInputValueEmpty: state.context.isInputValueEmpty,
+    inputEmpty: state.context.isInputValueEmpty,
     highlightedValue: state.context.highlightedValue,
     highlightedItem: state.context.highlightedItem,
     value: state.context.value,
@@ -79,19 +87,16 @@ export function connect<T extends PropTypes, V extends CollectionItem>(
     focus() {
       dom.getInputEl(state.context)?.focus()
     },
-    open() {
-      send("OPEN")
+    setOpen(_open) {
+      if (_open === open) return
+      send(_open ? "OPEN" : "CLOSE")
     },
-    close() {
-      send("CLOSE")
-    },
-
     rootProps: normalize.element({
       ...parts.root.attrs,
       dir: state.context.dir,
       id: dom.getRootId(state.context),
-      "data-invalid": dataAttr(isInvalid),
-      "data-readonly": dataAttr(isReadOnly),
+      "data-invalid": dataAttr(invalid),
+      "data-readonly": dataAttr(readOnly),
     }),
 
     labelProps: normalize.label({
@@ -99,20 +104,25 @@ export function connect<T extends PropTypes, V extends CollectionItem>(
       dir: state.context.dir,
       htmlFor: dom.getInputId(state.context),
       id: dom.getLabelId(state.context),
-      "data-readonly": dataAttr(isReadOnly),
-      "data-disabled": dataAttr(isDisabled),
-      "data-invalid": dataAttr(isInvalid),
-      "data-focus": dataAttr(isFocused),
+      "data-readonly": dataAttr(readOnly),
+      "data-disabled": dataAttr(disabled),
+      "data-invalid": dataAttr(invalid),
+      "data-focus": dataAttr(focused),
+      onClick(event) {
+        if (!isDialogPopup) return
+        event.preventDefault()
+        dom.getTriggerEl(state.context)?.focus({ preventScroll: true })
+      },
     }),
 
     controlProps: normalize.element({
       ...parts.control.attrs,
       dir: state.context.dir,
       id: dom.getControlId(state.context),
-      "data-state": isOpen ? "open" : "closed",
-      "data-focus": dataAttr(isFocused),
-      "data-disabled": dataAttr(isDisabled),
-      "data-invalid": dataAttr(isInvalid),
+      "data-state": open ? "open" : "closed",
+      "data-focus": dataAttr(focused),
+      "data-disabled": dataAttr(disabled),
+      "data-invalid": dataAttr(invalid),
     }),
 
     positionerProps: normalize.element({
@@ -125,97 +135,93 @@ export function connect<T extends PropTypes, V extends CollectionItem>(
     inputProps: normalize.input({
       ...parts.input.attrs,
       dir: state.context.dir,
-      "aria-invalid": ariaAttr(isInvalid),
-      "data-invalid": dataAttr(isInvalid),
+      "aria-invalid": ariaAttr(invalid),
+      "data-invalid": dataAttr(invalid),
       name: state.context.name,
       form: state.context.form,
-      disabled: isDisabled,
+      disabled: disabled,
       autoFocus: state.context.autoFocus,
       autoComplete: "off",
       autoCorrect: "off",
       autoCapitalize: "none",
       spellCheck: "false",
-      readOnly: isReadOnly,
+      readOnly: readOnly,
       placeholder: state.context.placeholder,
       id: dom.getInputId(state.context),
       type: "text",
       role: "combobox",
       defaultValue: state.context.inputValue,
       "aria-autocomplete": state.context.autoComplete ? "both" : "list",
-      "aria-controls": isOpen ? dom.getContentId(state.context) : undefined,
-      "aria-expanded": isOpen,
-      "data-state": isOpen ? "open" : "closed",
+      "aria-controls": isDialogPopup ? dom.getListId(state.context) : dom.getContentId(state.context),
+      "aria-expanded": open,
+      "data-state": open ? "open" : "closed",
       "aria-activedescendant": state.context.highlightedValue
         ? dom.getItemId(state.context, state.context.highlightedValue)
         : undefined,
-      onCompositionStart() {
-        send("INPUT.COMPOSITION_START")
-      },
-      onCompositionEnd() {
-        raf(() => {
-          send("INPUT.COMPOSITION_END")
-        })
-      },
       onClick() {
-        if (!isInteractive) return
+        if (!state.context.openOnClick) return
+        if (!interactive) return
         send("INPUT.CLICK")
       },
       onFocus() {
-        if (isDisabled) return
+        if (disabled) return
         send("INPUT.FOCUS")
       },
       onBlur() {
-        if (isDisabled) return
+        if (disabled) return
         send("INPUT.BLUR")
       },
       onChange(event) {
         send({ type: "INPUT.CHANGE", value: event.currentTarget.value })
       },
       onKeyDown(event) {
-        if (!isInteractive) return
+        if (event.defaultPrevented) return
+        if (!interactive) return
 
         const evt = getNativeEvent(event)
         if (evt.ctrlKey || evt.shiftKey || evt.isComposing) return
 
+        const openOnKeyPress = state.context.openOnKeyPress
+        const isModifierKey = event.ctrlKey || event.metaKey || event.shiftKey
+        const keypress = true
+
         const keymap: EventKeyMap = {
           ArrowDown(event) {
-            send({ type: event.altKey ? "INPUT.ARROW_DOWN+ALT" : "INPUT.ARROW_DOWN" })
+            if (!openOnKeyPress && !open) return
+            send({ type: event.altKey ? "OPEN" : "INPUT.ARROW_DOWN", keypress })
             event.preventDefault()
-            event.stopPropagation()
           },
           ArrowUp() {
-            send(event.altKey ? "INPUT.ARROW_UP+ALT" : "INPUT.ARROW_UP")
+            if (!openOnKeyPress && !open) return
+            send({ type: event.altKey ? "CLOSE" : "INPUT.ARROW_UP", keypress })
             event.preventDefault()
-            event.stopPropagation()
           },
           Home(event) {
-            const isModified = event.ctrlKey || event.metaKey || event.shiftKey
-            if (isModified) return
-            send("INPUT.HOME")
-            if (isOpen) {
+            if (isModifierKey) return
+            send({ type: "INPUT.HOME", keypress })
+            if (open) {
               event.preventDefault()
-              event.stopPropagation()
             }
           },
           End(event) {
-            const isModified = event.ctrlKey || event.metaKey || event.shiftKey
-            if (isModified) return
-            send("INPUT.END")
-            if (isOpen) {
+            if (isModifierKey) return
+            send({ type: "INPUT.END", keypress })
+            if (open) {
               event.preventDefault()
-              event.stopPropagation()
             }
           },
-          Enter() {
-            if (state.context.composing) return
-            send("INPUT.ENTER")
-            event.preventDefault()
-            event.stopPropagation()
+          Enter(event) {
+            if (evt.isComposing) return
+            send({ type: "INPUT.ENTER", keypress })
+            if (open) {
+              event.preventDefault()
+            }
+            const itemEl = dom.getHighlightedItemEl(state.context)
+            clickIfLink(itemEl)
           },
           Escape() {
-            send("INPUT.ESCAPE")
+            send({ type: "INPUT.ESCAPE", keypress })
             event.preventDefault()
-            // don't stop propagation. this is handled by the dismissable layer
           },
         }
 
@@ -229,59 +235,97 @@ export function connect<T extends PropTypes, V extends CollectionItem>(
       ...parts.trigger.attrs,
       dir: state.context.dir,
       id: dom.getTriggerId(state.context),
-      "aria-haspopup": "listbox",
+      "aria-haspopup": isDialogPopup ? "dialog" : "listbox",
       type: "button",
-      tabIndex: -1,
+      tabIndex: isDialogPopup ? 0 : -1,
       "aria-label": translations.triggerLabel,
-      "aria-expanded": isOpen,
-      "data-state": isOpen ? "open" : "closed",
-      "aria-controls": isOpen ? dom.getContentId(state.context) : undefined,
-      disabled: isDisabled,
-      "data-readonly": dataAttr(isReadOnly),
-      "data-disabled": dataAttr(isDisabled),
-      onPointerDown(event) {
+      "aria-expanded": open,
+      "data-state": open ? "open" : "closed",
+      "aria-controls": open ? dom.getContentId(state.context) : undefined,
+      disabled: disabled,
+      "data-readonly": dataAttr(readOnly),
+      "data-disabled": dataAttr(disabled),
+      onClick(event) {
         const evt = getNativeEvent(event)
-        if (!isInteractive || !isLeftClick(evt) || evt.pointerType === "touch") return
+        if (!interactive) return
+        if (!isLeftClick(evt)) return
         send("TRIGGER.CLICK")
+      },
+      onPointerDown(event) {
+        if (!interactive) return
+        if (event.pointerType === "touch") return
         event.preventDefault()
+        queueMicrotask(() => {
+          dom.getInputEl(state.context)?.focus({ preventScroll: true })
+        })
       },
-      onPointerUp(event) {
-        if (event.pointerType !== "touch") return
-        send("TRIGGER.CLICK")
+      onKeyDown(event) {
+        if (event.defaultPrevented) return
+        if (!isDialogPopup) return
+
+        const keyMap: EventKeyMap = {
+          ArrowDown() {
+            send("INPUT.FOCUS")
+            send("INPUT.ARROW_DOWN")
+            raf(() => {
+              dom.getInputEl(state.context)?.focus({ preventScroll: true })
+            })
+          },
+          ArrowUp() {
+            send("INPUT.FOCUS")
+            send("INPUT.ARROW_UP")
+            raf(() => {
+              dom.getInputEl(state.context)?.focus({ preventScroll: true })
+            })
+          },
+        }
+
+        const key = getEventKey(event, state.context)
+        const exec = keyMap[key]
+
+        if (exec) {
+          exec(event)
+          event.preventDefault()
+        }
       },
-      style: { outline: 0 },
     }),
 
     contentProps: normalize.element({
       ...parts.content.attrs,
       dir: state.context.dir,
       id: dom.getContentId(state.context),
-      role: "listbox",
+      role: isDialogPopup ? "dialog" : "listbox",
       tabIndex: -1,
-      hidden: !isOpen,
-      "data-state": isOpen ? "open" : "closed",
+      hidden: !open,
+      "data-state": open ? "open" : "closed",
       "aria-labelledby": dom.getLabelId(state.context),
-      "aria-multiselectable": state.context.multiple ? true : undefined,
+      "aria-multiselectable": state.context.multiple && !isDialogPopup ? true : undefined,
       onPointerDown(event) {
         // prevent options or elements within listbox from taking focus
         event.preventDefault()
       },
     }),
 
+    // only used when triggerOnly: true
+    listProps: normalize.element({
+      id: dom.getListId(state.context),
+      role: isDialogPopup ? "listbox" : undefined,
+      "aria-multiselectable": isDialogPopup && state.context.multiple ? true : undefined,
+    }),
+
     clearTriggerProps: normalize.button({
       ...parts.clearTrigger.attrs,
       dir: state.context.dir,
       id: dom.getClearTriggerId(state.context),
       type: "button",
       tabIndex: -1,
-      disabled: isDisabled,
+      disabled: disabled,
       "aria-label": translations.clearTriggerLabel,
+      "aria-controls": dom.getInputId(state.context),
       hidden: !state.context.value.length,
-      onPointerDown(event) {
-        const evt = getNativeEvent(event)
-        if (!isInteractive || !isLeftClick(evt)) return
+      onClick() {
+        if (!interactive) return
         send({ type: "VALUE.CLEAR", src: "clear-trigger" })
-        event.preventDefault()
       },
     }),
 
@@ -297,22 +341,28 @@ export function connect<T extends PropTypes, V extends CollectionItem>(
         id: dom.getItemId(state.context, value),
         role: "option",
         tabIndex: -1,
-        "data-highlighted": dataAttr(itemState.isHighlighted),
-        "data-state": itemState.isSelected ? "checked" : "unchecked",
-        "aria-selected": itemState.isHighlighted,
-        "aria-disabled": itemState.isDisabled,
-        "data-disabled": dataAttr(itemState.isDisabled),
+        "data-highlighted": dataAttr(itemState.highlighted),
+        "data-state": itemState.selected ? "checked" : "unchecked",
+        "aria-selected": itemState.highlighted,
+        "aria-disabled": itemState.disabled,
+        "data-disabled": dataAttr(itemState.disabled),
         "data-value": itemState.value,
         onPointerMove() {
-          if (itemState.isDisabled) return
-          send({ type: "ITEM.POINTER_OVER", value })
+          if (itemState.disabled) return
+          send({ type: "ITEM.POINTER_MOVE", value })
         },
         onPointerLeave() {
-          if (itemState.isDisabled) return
+          if (props.persistFocus) return
+          if (itemState.disabled) return
+          const mouseMoved = state.previousEvent.type === "ITEM.POINTER_MOVE"
+          if (!mouseMoved) return
           send({ type: "ITEM.POINTER_LEAVE", value })
         },
         onPointerUp(event) {
-          if (itemState.isDisabled || isContextMenuEvent(event)) return
+          if (isDownloadingEvent(event)) return
+          if (isOpeningInNewTab(event)) return
+          if (isContextMenuEvent(event)) return
+          if (itemState.disabled) return
           send({ type: "ITEM.CLICK", src: "pointerup", value })
         },
         onTouchEnd(event) {
@@ -328,8 +378,8 @@ export function connect<T extends PropTypes, V extends CollectionItem>(
       return normalize.element({
         ...parts.itemText.attrs,
         dir: state.context.dir,
-        "data-disabled": dataAttr(itemState.isDisabled),
-        "data-highlighted": dataAttr(itemState.isHighlighted),
+        "data-disabled": dataAttr(itemState.disabled),
+        "data-highlighted": dataAttr(itemState.highlighted),
       })
     },
     getItemIndicatorProps(props) {
@@ -338,8 +388,8 @@ export function connect<T extends PropTypes, V extends CollectionItem>(
         "aria-hidden": true,
         ...parts.itemIndicator.attrs,
         dir: state.context.dir,
-        "data-state": itemState.isSelected ? "checked" : "unchecked",
-        hidden: !itemState.isSelected,
+        "data-state": itemState.selected ? "checked" : "unchecked",
+        hidden: !itemState.selected,
       })
     },
 

package/src/combobox.dom.ts

@@ -7,6 +7,7 @@ export const dom = createScope({
   getControlId: (ctx: Ctx) => ctx.ids?.control ?? `combobox:${ctx.id}:control`,
   getInputId: (ctx: Ctx) => ctx.ids?.input ?? `combobox:${ctx.id}:input`,
   getContentId: (ctx: Ctx) => ctx.ids?.content ?? `combobox:${ctx.id}:content`,
+  getListId: (ctx: Ctx) => `combobox:${ctx.id}:listbox`,
   getPositionerId: (ctx: Ctx) => ctx.ids?.positioner ?? `combobox:${ctx.id}:popper`,
   getTriggerId: (ctx: Ctx) => ctx.ids?.trigger ?? `combobox:${ctx.id}:toggle-btn`,
   getClearTriggerId: (ctx: Ctx) => ctx.ids?.clearTrigger ?? `combobox:${ctx.id}:clear-btn`,
@@ -16,6 +17,7 @@ export const dom = createScope({
   getItemId: (ctx: Ctx, id: string) => `combobox:${ctx.id}:option:${id}`,
 
   getContentEl: (ctx: Ctx) => dom.getById(ctx, dom.getContentId(ctx)),
+  getListEl: (ctx: Ctx) => dom.getById(ctx, dom.getListId(ctx)),
   getInputEl: (ctx: Ctx) => dom.getById<HTMLInputElement>(ctx, dom.getInputId(ctx)),
   getPositionerEl: (ctx: Ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
   getControlEl: (ctx: Ctx) => dom.getById(ctx, dom.getControlId(ctx)),