@zag-js/combobox 0.49.0 → 0.51.0

package/dist/index.mjs

@@ -1,1426 +1,2 @@
-// src/combobox.anatomy.ts
-import { createAnatomy } from "@zag-js/anatomy";
-var anatomy = createAnatomy("combobox").parts(
-  "root",
-  "label",
-  "input",
-  "positioner",
-  "control",
-  "trigger",
-  "content",
-  "clearTrigger",
-  "item",
-  "itemText",
-  "itemIndicator",
-  "itemGroup",
-  "itemGroupLabel"
-);
-var parts = anatomy.build();
-
-// src/combobox.collection.ts
-import { Collection } from "@zag-js/collection";
-import { ref } from "@zag-js/core";
-var collection = (options) => {
-  return ref(new Collection(options));
-};
-collection.empty = () => {
-  return ref(new Collection({ items: [] }));
-};
-
-// src/combobox.connect.ts
-import {
-  clickIfLink,
-  getEventKey,
-  getNativeEvent,
-  isContextMenuEvent,
-  isLeftClick
-} from "@zag-js/dom-event";
-import { ariaAttr, dataAttr, isDownloadingEvent, isOpeningInNewTab, raf } from "@zag-js/dom-query";
-import { getPlacementStyles } from "@zag-js/popper";
-
-// src/combobox.dom.ts
-import { createScope } from "@zag-js/dom-query";
-var dom = createScope({
-  getRootId: (ctx) => ctx.ids?.root ?? `combobox:${ctx.id}`,
-  getLabelId: (ctx) => ctx.ids?.label ?? `combobox:${ctx.id}:label`,
-  getControlId: (ctx) => ctx.ids?.control ?? `combobox:${ctx.id}:control`,
-  getInputId: (ctx) => ctx.ids?.input ?? `combobox:${ctx.id}:input`,
-  getContentId: (ctx) => ctx.ids?.content ?? `combobox:${ctx.id}:content`,
-  getListId: (ctx) => `combobox:${ctx.id}:listbox`,
-  getPositionerId: (ctx) => ctx.ids?.positioner ?? `combobox:${ctx.id}:popper`,
-  getTriggerId: (ctx) => ctx.ids?.trigger ?? `combobox:${ctx.id}:toggle-btn`,
-  getClearTriggerId: (ctx) => ctx.ids?.clearTrigger ?? `combobox:${ctx.id}:clear-btn`,
-  getItemGroupId: (ctx, id) => ctx.ids?.itemGroup?.(id) ?? `combobox:${ctx.id}:optgroup:${id}`,
-  getItemGroupLabelId: (ctx, id) => ctx.ids?.itemGroupLabel?.(id) ?? `combobox:${ctx.id}:optgroup-label:${id}`,
-  getItemId: (ctx, id) => `combobox:${ctx.id}:option:${id}`,
-  getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
-  getListEl: (ctx) => dom.getById(ctx, dom.getListId(ctx)),
-  getInputEl: (ctx) => dom.getById(ctx, dom.getInputId(ctx)),
-  getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
-  getControlEl: (ctx) => dom.getById(ctx, dom.getControlId(ctx)),
-  getTriggerEl: (ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
-  getClearTriggerEl: (ctx) => dom.getById(ctx, dom.getClearTriggerId(ctx)),
-  isInputFocused: (ctx) => dom.getDoc(ctx).activeElement === dom.getInputEl(ctx),
-  getHighlightedItemEl: (ctx) => {
-    const value = ctx.highlightedValue;
-    if (value == null)
-      return;
-    return dom.getContentEl(ctx)?.querySelector(`[role=option][data-value="${CSS.escape(value)}"`);
-  }
-});
-
-// src/combobox.connect.ts
-function connect(state, send, normalize) {
-  const translations = state.context.translations;
-  const collection2 = state.context.collection;
-  const disabled = state.context.disabled;
-  const interactive = state.context.isInteractive;
-  const invalid = state.context.invalid;
-  const readOnly = state.context.readOnly;
-  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) {
-    const { item } = props;
-    const disabled2 = collection2.isItemDisabled(item);
-    const value = collection2.itemToValue(item);
-    return {
-      value,
-      disabled: Boolean(disabled2 || disabled2),
-      highlighted: state.context.highlightedValue === value,
-      selected: state.context.value.includes(value)
-    };
-  }
-  return {
-    focused,
-    open,
-    inputValue: state.context.inputValue,
-    inputEmpty: state.context.isInputValueEmpty,
-    highlightedValue: state.context.highlightedValue,
-    highlightedItem: state.context.highlightedItem,
-    value: state.context.value,
-    valueAsString: state.context.valueAsString,
-    hasSelectedItems: state.context.hasSelectedItems,
-    selectedItems: state.context.selectedItems,
-    collection: state.context.collection,
-    reposition(options = {}) {
-      send({ type: "POSITIONING.SET", options });
-    },
-    setCollection(collection3) {
-      send({ type: "COLLECTION.SET", value: collection3 });
-    },
-    highlightValue(value) {
-      send({ type: "HIGHLIGHTED_VALUE.SET", value });
-    },
-    selectValue(value) {
-      send({ type: "ITEM.SELECT", value });
-    },
-    setValue(value) {
-      send({ type: "VALUE.SET", value });
-    },
-    setInputValue(value) {
-      send({ type: "INPUT_VALUE.SET", value });
-    },
-    clearValue(value) {
-      if (value != null) {
-        send({ type: "ITEM.CLEAR", value });
-      } else {
-        send("VALUE.CLEAR");
-      }
-    },
-    focus() {
-      dom.getInputEl(state.context)?.focus();
-    },
-    setOpen(_open) {
-      if (_open === open)
-        return;
-      send(_open ? "OPEN" : "CLOSE");
-    },
-    rootProps: normalize.element({
-      ...parts.root.attrs,
-      dir: state.context.dir,
-      id: dom.getRootId(state.context),
-      "data-invalid": dataAttr(invalid),
-      "data-readonly": dataAttr(readOnly)
-    }),
-    labelProps: normalize.label({
-      ...parts.label.attrs,
-      dir: state.context.dir,
-      htmlFor: dom.getInputId(state.context),
-      id: dom.getLabelId(state.context),
-      "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": open ? "open" : "closed",
-      "data-focus": dataAttr(focused),
-      "data-disabled": dataAttr(disabled),
-      "data-invalid": dataAttr(invalid)
-    }),
-    positionerProps: normalize.element({
-      ...parts.positioner.attrs,
-      dir: state.context.dir,
-      id: dom.getPositionerId(state.context),
-      style: popperStyles.floating
-    }),
-    inputProps: normalize.input({
-      ...parts.input.attrs,
-      dir: state.context.dir,
-      "aria-invalid": ariaAttr(invalid),
-      "data-invalid": dataAttr(invalid),
-      name: state.context.name,
-      form: state.context.form,
-      disabled,
-      autoFocus: state.context.autoFocus,
-      autoComplete: "off",
-      autoCorrect: "off",
-      autoCapitalize: "none",
-      spellCheck: "false",
-      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": 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) : void 0,
-      onClick() {
-        if (!state.context.openOnClick)
-          return;
-        if (!interactive)
-          return;
-        send("INPUT.CLICK");
-      },
-      onFocus() {
-        if (disabled)
-          return;
-        send("INPUT.FOCUS");
-      },
-      onBlur() {
-        if (disabled)
-          return;
-        send("INPUT.BLUR");
-      },
-      onChange(event) {
-        send({ type: "INPUT.CHANGE", value: event.currentTarget.value });
-      },
-      onKeyDown(event) {
-        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 = {
-          ArrowDown(event2) {
-            if (!openOnKeyPress && !open)
-              return;
-            send({ type: event2.altKey ? "OPEN" : "INPUT.ARROW_DOWN", keypress });
-            event2.preventDefault();
-          },
-          ArrowUp() {
-            if (!openOnKeyPress && !open)
-              return;
-            send({ type: event.altKey ? "CLOSE" : "INPUT.ARROW_UP", keypress });
-            event.preventDefault();
-          },
-          Home(event2) {
-            if (isModifierKey)
-              return;
-            send({ type: "INPUT.HOME", keypress });
-            if (open) {
-              event2.preventDefault();
-            }
-          },
-          End(event2) {
-            if (isModifierKey)
-              return;
-            send({ type: "INPUT.END", keypress });
-            if (open) {
-              event2.preventDefault();
-            }
-          },
-          Enter(event2) {
-            if (evt.isComposing)
-              return;
-            send({ type: "INPUT.ENTER", keypress });
-            if (open) {
-              event2.preventDefault();
-            }
-            const itemEl = dom.getHighlightedItemEl(state.context);
-            clickIfLink(itemEl);
-          },
-          Escape() {
-            send({ type: "INPUT.ESCAPE", keypress });
-            event.preventDefault();
-          }
-        };
-        const key = getEventKey(event, state.context);
-        const exec = keymap[key];
-        exec?.(event);
-      }
-    }),
-    triggerProps: normalize.button({
-      ...parts.trigger.attrs,
-      dir: state.context.dir,
-      id: dom.getTriggerId(state.context),
-      "aria-haspopup": isDialogPopup ? "dialog" : "listbox",
-      type: "button",
-      tabIndex: isDialogPopup ? 0 : -1,
-      "aria-label": translations.triggerLabel,
-      "aria-expanded": open,
-      "data-state": open ? "open" : "closed",
-      "aria-controls": open ? dom.getContentId(state.context) : void 0,
-      disabled,
-      "data-readonly": dataAttr(readOnly),
-      "data-disabled": dataAttr(disabled),
-      onClick(event) {
-        const evt = getNativeEvent(event);
-        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 });
-        });
-      },
-      onKeyDown(event) {
-        if (event.defaultPrevented)
-          return;
-        if (!isDialogPopup)
-          return;
-        const keyMap = {
-          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();
-        }
-      }
-    }),
-    contentProps: normalize.element({
-      ...parts.content.attrs,
-      dir: state.context.dir,
-      id: dom.getContentId(state.context),
-      role: isDialogPopup ? "dialog" : "listbox",
-      tabIndex: -1,
-      hidden: !open,
-      "data-state": open ? "open" : "closed",
-      "aria-labelledby": dom.getLabelId(state.context),
-      "aria-multiselectable": state.context.multiple && !isDialogPopup ? true : void 0,
-      onPointerDown(event) {
-        event.preventDefault();
-      }
-    }),
-    // only used when triggerOnly: true
-    listProps: normalize.element({
-      id: dom.getListId(state.context),
-      role: isDialogPopup ? "listbox" : void 0,
-      "aria-multiselectable": isDialogPopup && state.context.multiple ? true : void 0
-    }),
-    clearTriggerProps: normalize.button({
-      ...parts.clearTrigger.attrs,
-      dir: state.context.dir,
-      id: dom.getClearTriggerId(state.context),
-      type: "button",
-      tabIndex: -1,
-      disabled,
-      "aria-label": translations.clearTriggerLabel,
-      "aria-controls": dom.getInputId(state.context),
-      hidden: !state.context.value.length,
-      onClick() {
-        if (!interactive)
-          return;
-        send({ type: "VALUE.CLEAR", src: "clear-trigger" });
-      }
-    }),
-    getItemState,
-    getItemProps(props) {
-      const itemState = getItemState(props);
-      const value = itemState.value;
-      return normalize.element({
-        ...parts.item.attrs,
-        dir: state.context.dir,
-        id: dom.getItemId(state.context, value),
-        role: "option",
-        tabIndex: -1,
-        "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.disabled)
-            return;
-          send({ type: "ITEM.POINTER_MOVE", value });
-        },
-        onPointerLeave() {
-          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 (isDownloadingEvent(event))
-            return;
-          if (isOpeningInNewTab(event))
-            return;
-          if (isContextMenuEvent(event))
-            return;
-          if (itemState.disabled)
-            return;
-          send({ type: "ITEM.CLICK", src: "pointerup", value });
-        },
-        onTouchEnd(event) {
-          event.preventDefault();
-          event.stopPropagation();
-        }
-      });
-    },
-    getItemTextProps(props) {
-      const itemState = getItemState(props);
-      return normalize.element({
-        ...parts.itemText.attrs,
-        dir: state.context.dir,
-        "data-disabled": dataAttr(itemState.disabled),
-        "data-highlighted": dataAttr(itemState.highlighted)
-      });
-    },
-    getItemIndicatorProps(props) {
-      const itemState = getItemState(props);
-      return normalize.element({
-        "aria-hidden": true,
-        ...parts.itemIndicator.attrs,
-        dir: state.context.dir,
-        "data-state": itemState.selected ? "checked" : "unchecked",
-        hidden: !itemState.selected
-      });
-    },
-    getItemGroupProps(props) {
-      const { id } = props;
-      return normalize.element({
-        ...parts.itemGroup.attrs,
-        dir: state.context.dir,
-        id: dom.getItemGroupId(state.context, id),
-        "aria-labelledby": dom.getItemGroupLabelId(state.context, id)
-      });
-    },
-    getItemGroupLabelProps(props) {
-      const { htmlFor } = props;
-      return normalize.element({
-        ...parts.itemGroupLabel.attrs,
-        dir: state.context.dir,
-        id: dom.getItemGroupLabelId(state.context, htmlFor),
-        role: "group"
-      });
-    }
-  };
-}
-
-// src/combobox.machine.ts
-import { ariaHidden } from "@zag-js/aria-hidden";
-import { createMachine, guards } from "@zag-js/core";
-import { trackDismissableElement } from "@zag-js/dismissable";
-import { observeAttributes, observeChildren, raf as raf2, scrollIntoView } from "@zag-js/dom-query";
-import { getPlacement } from "@zag-js/popper";
-import { addOrRemove, compact, isBoolean, isEqual, match } from "@zag-js/utils";
-var { and, not } = guards;
-function machine(userContext) {
-  const ctx = compact(userContext);
-  return createMachine(
-    {
-      id: "combobox",
-      initial: ctx.open ? "suggesting" : "idle",
-      context: {
-        loopFocus: true,
-        openOnClick: false,
-        value: [],
-        highlightedValue: null,
-        inputValue: "",
-        allowCustomValue: false,
-        closeOnSelect: !ctx.multiple,
-        inputBehavior: "none",
-        selectionBehavior: "replace",
-        openOnKeyPress: true,
-        openOnChange: true,
-        dismissable: true,
-        popup: "listbox",
-        ...ctx,
-        highlightedItem: null,
-        selectedItems: [],
-        valueAsString: "",
-        collection: ctx.collection ?? collection.empty(),
-        positioning: {
-          placement: "bottom",
-          flip: false,
-          sameWidth: true,
-          ...ctx.positioning
-        },
-        translations: {
-          triggerLabel: "Toggle suggestions",
-          clearTriggerLabel: "Clear value",
-          ...ctx.translations
-        }
-      },
-      created: ["syncInitialValues", "syncSelectionBehavior"],
-      computed: {
-        isInputValueEmpty: (ctx2) => ctx2.inputValue.length === 0,
-        isInteractive: (ctx2) => !(ctx2.readOnly || ctx2.disabled),
-        autoComplete: (ctx2) => ctx2.inputBehavior === "autocomplete",
-        autoHighlight: (ctx2) => ctx2.inputBehavior === "autohighlight",
-        hasSelectedItems: (ctx2) => ctx2.value.length > 0
-      },
-      watch: {
-        value: ["syncSelectedItems"],
-        inputValue: ["syncInputValue"],
-        highlightedValue: ["autofillInputValue"],
-        multiple: ["syncSelectionBehavior"],
-        open: ["toggleVisibility"]
-      },
-      on: {
-        "HIGHLIGHTED_VALUE.SET": {
-          actions: ["setHighlightedItem"]
-        },
-        "ITEM.SELECT": {
-          actions: ["selectItem"]
-        },
-        "ITEM.CLEAR": {
-          actions: ["clearItem"]
-        },
-        "VALUE.SET": {
-          actions: ["setSelectedItems"]
-        },
-        "INPUT_VALUE.SET": {
-          actions: "setInputValue"
-        },
-        "COLLECTION.SET": {
-          actions: ["setCollection"]
-        },
-        "POSITIONING.SET": {
-          actions: ["reposition"]
-        }
-      },
-      states: {
-        idle: {
-          tags: ["idle", "closed"],
-          entry: ["scrollContentToTop", "clearHighlightedItem"],
-          on: {
-            "CONTROLLED.OPEN": {
-              target: "interacting"
-            },
-            "TRIGGER.CLICK": [
-              {
-                guard: "isOpenControlled",
-                actions: ["focusInput", "highlightFirstSelectedItem", "invokeOnOpen"]
-              },
-              {
-                target: "interacting",
-                actions: ["focusInput", "highlightFirstSelectedItem", "invokeOnOpen"]
-              }
-            ],
-            "INPUT.CLICK": [
-              {
-                guard: "isOpenControlled",
-                actions: ["invokeOnOpen"]
-              },
-              {
-                target: "interacting",
-                actions: ["highlightFirstSelectedItem", "invokeOnOpen"]
-              }
-            ],
-            "INPUT.FOCUS": {
-              target: "focused"
-            },
-            OPEN: [
-              {
-                guard: "isOpenControlled",
-                actions: ["invokeOnOpen"]
-              },
-              {
-                target: "interacting",
-                actions: ["invokeOnOpen"]
-              }
-            ],
-            "VALUE.CLEAR": {
-              target: "focused",
-              actions: ["clearInputValue", "clearSelectedItems"]
-            }
-          }
-        },
-        focused: {
-          tags: ["focused", "closed"],
-          entry: ["focusInputOrTrigger", "scrollContentToTop", "clearHighlightedItem"],
-          on: {
-            "CONTROLLED.OPEN": [
-              {
-                guard: "isChangeEvent",
-                target: "suggesting"
-              },
-              {
-                target: "interacting"
-              }
-            ],
-            "INPUT.CHANGE": [
-              {
-                guard: and("isOpenControlled", "openOnChange"),
-                actions: ["setInputValue", "invokeOnOpen"]
-              },
-              {
-                guard: "openOnChange",
-                target: "suggesting",
-                actions: ["setInputValue", "invokeOnOpen"]
-              },
-              {
-                actions: "setInputValue"
-              }
-            ],
-            "LAYER.INTERACT_OUTSIDE": {
-              target: "idle"
-            },
-            "INPUT.ESCAPE": {
-              guard: and("isCustomValue", not("allowCustomValue")),
-              actions: "revertInputValue"
-            },
-            "INPUT.BLUR": {
-              target: "idle"
-            },
-            "INPUT.CLICK": [
-              {
-                guard: "isOpenControlled",
-                actions: ["highlightFirstSelectedItem", "invokeOnOpen"]
-              },
-              {
-                target: "interacting",
-                actions: ["highlightFirstSelectedItem", "invokeOnOpen"]
-              }
-            ],
-            "TRIGGER.CLICK": [
-              {
-                guard: "isOpenControlled",
-                actions: ["focusInput", "highlightFirstSelectedItem", "invokeOnOpen"]
-              },
-              {
-                target: "interacting",
-                actions: ["focusInput", "highlightFirstSelectedItem", "invokeOnOpen"]
-              }
-            ],
-            "INPUT.ARROW_DOWN": [
-              // == group 1 ==
-              {
-                guard: and("isOpenControlled", "autoComplete"),
-                actions: ["invokeOnOpen"]
-              },
-              {
-                guard: "autoComplete",
-                target: "interacting",
-                actions: ["invokeOnOpen"]
-              },
-              // == group 2 ==
-              {
-                guard: "isOpenControlled",
-                actions: ["highlightFirstOrSelectedItem", "invokeOnOpen"]
-              },
-              {
-                target: "interacting",
-                actions: ["highlightFirstOrSelectedItem", "invokeOnOpen"]
-              }
-            ],
-            "INPUT.ARROW_UP": [
-              // == group 1 ==
-              {
-                guard: "autoComplete",
-                target: "interacting",
-                actions: "invokeOnOpen"
-              },
-              {
-                guard: "autoComplete",
-                target: "interacting",
-                actions: "invokeOnOpen"
-              },
-              // == group 2 ==
-              {
-                target: "interacting",
-                actions: ["highlightLastOrSelectedItem", "invokeOnOpen"]
-              },
-              {
-                target: "interacting",
-                actions: ["highlightLastOrSelectedItem", "invokeOnOpen"]
-              }
-            ],
-            OPEN: [
-              {
-                guard: "isOpenControlled",
-                actions: ["invokeOnOpen"]
-              },
-              {
-                target: "interacting",
-                actions: ["invokeOnOpen"]
-              }
-            ],
-            "VALUE.CLEAR": {
-              actions: ["clearInputValue", "clearSelectedItems"]
-            }
-          }
-        },
-        interacting: {
-          tags: ["open", "focused"],
-          activities: [
-            "scrollIntoView",
-            "trackDismissableLayer",
-            "computePlacement",
-            "hideOtherElements",
-            "trackContentHeight"
-          ],
-          on: {
-            "CONTROLLED.CLOSE": [
-              {
-                guard: "restoreFocus",
-                target: "focused"
-              },
-              {
-                target: "idle"
-              }
-            ],
-            "INPUT.HOME": {
-              actions: ["highlightFirstItem"]
-            },
-            "INPUT.END": {
-              actions: ["highlightLastItem"]
-            },
-            "INPUT.ARROW_DOWN": [
-              {
-                guard: and("autoComplete", "isLastItemHighlighted"),
-                actions: ["clearHighlightedItem", "scrollContentToTop"]
-              },
-              {
-                actions: ["highlightNextItem"]
-              }
-            ],
-            "INPUT.ARROW_UP": [
-              {
-                guard: and("autoComplete", "isFirstItemHighlighted"),
-                actions: "clearHighlightedItem"
-              },
-              {
-                actions: "highlightPrevItem"
-              }
-            ],
-            "INPUT.ENTER": [
-              {
-                guard: and("isOpenControlled", "closeOnSelect"),
-                actions: ["selectHighlightedItem", "invokeOnClose"]
-              },
-              {
-                guard: "closeOnSelect",
-                target: "focused",
-                actions: ["selectHighlightedItem", "invokeOnClose"]
-              },
-              {
-                actions: ["selectHighlightedItem"]
-              }
-            ],
-            "INPUT.CHANGE": [
-              {
-                guard: "autoComplete",
-                target: "suggesting",
-                actions: ["setInputValue", "invokeOnOpen"]
-              },
-              {
-                target: "suggesting",
-                actions: ["clearHighlightedItem", "setInputValue", "invokeOnOpen"]
-              }
-            ],
-            "ITEM.POINTER_MOVE": {
-              actions: ["setHighlightedItem"]
-            },
-            "ITEM.POINTER_LEAVE": {
-              actions: ["clearHighlightedItem"]
-            },
-            "ITEM.CLICK": [
-              {
-                guard: and("isOpenControlled", "closeOnSelect"),
-                actions: ["selectItem", "invokeOnClose"]
-              },
-              {
-                guard: "closeOnSelect",
-                target: "focused",
-                actions: ["selectItem", "invokeOnClose"]
-              },
-              {
-                actions: ["selectItem"]
-              }
-            ],
-            "LAYER.ESCAPE": [
-              {
-                guard: and("isOpenControlled", "autoComplete"),
-                actions: ["syncInputValue", "invokeOnClose"]
-              },
-              {
-                guard: "autoComplete",
-                target: "focused",
-                actions: ["syncInputValue", "invokeOnClose"]
-              },
-              {
-                guard: "isOpenControlled",
-                actions: "invokeOnClose"
-              },
-              {
-                target: "focused",
-                actions: ["invokeOnClose"]
-              }
-            ],
-            "TRIGGER.CLICK": [
-              {
-                guard: "isOpenControlled",
-                actions: "invokeOnClose"
-              },
-              {
-                target: "focused",
-                actions: "invokeOnClose"
-              }
-            ],
-            "LAYER.INTERACT_OUTSIDE": [
-              // == group 1 ==
-              {
-                guard: and("isOpenControlled", "isCustomValue", not("allowCustomValue")),
-                actions: ["revertInputValue", "invokeOnClose"]
-              },
-              {
-                guard: and("isCustomValue", not("allowCustomValue")),
-                target: "idle",
-                actions: ["revertInputValue", "invokeOnClose"]
-              },
-              // == group 2 ==
-              {
-                guard: "isOpenControlled",
-                actions: "invokeOnClose"
-              },
-              {
-                target: "idle",
-                actions: "invokeOnClose"
-              }
-            ],
-            CLOSE: [
-              {
-                guard: "isOpenControlled",
-                actions: "invokeOnClose"
-              },
-              {
-                target: "focused",
-                actions: "invokeOnClose"
-              }
-            ],
-            "VALUE.CLEAR": [
-              {
-                guard: "isOpenControlled",
-                actions: ["clearInputValue", "clearSelectedItems", "invokeOnClose"]
-              },
-              {
-                target: "focused",
-                actions: ["clearInputValue", "clearSelectedItems", "invokeOnClose"]
-              }
-            ]
-          }
-        },
-        suggesting: {
-          tags: ["open", "focused"],
-          activities: [
-            "trackDismissableLayer",
-            "scrollIntoView",
-            "computePlacement",
-            "trackChildNodes",
-            "hideOtherElements",
-            "trackContentHeight"
-          ],
-          entry: ["focusInput"],
-          on: {
-            "CONTROLLED.CLOSE": [
-              {
-                guard: "restoreFocus",
-                target: "focused"
-              },
-              {
-                target: "idle"
-              }
-            ],
-            CHILDREN_CHANGE: {
-              actions: ["highlightFirstItem"]
-            },
-            "INPUT.ARROW_DOWN": {
-              target: "interacting",
-              actions: "highlightNextItem"
-            },
-            "INPUT.ARROW_UP": {
-              target: "interacting",
-              actions: "highlightPrevItem"
-            },
-            "INPUT.HOME": {
-              target: "interacting",
-              actions: ["highlightFirstItem"]
-            },
-            "INPUT.END": {
-              target: "interacting",
-              actions: ["highlightLastItem"]
-            },
-            "INPUT.ENTER": [
-              {
-                guard: and("isOpenControlled", "closeOnSelect"),
-                actions: ["selectHighlightedItem", "invokeOnClose"]
-              },
-              {
-                guard: "closeOnSelect",
-                target: "focused",
-                actions: ["selectHighlightedItem", "invokeOnClose"]
-              },
-              {
-                actions: ["selectHighlightedItem"]
-              }
-            ],
-            "INPUT.CHANGE": [
-              {
-                guard: "autoHighlight",
-                actions: ["setInputValue"]
-              },
-              {
-                actions: ["setInputValue"]
-              }
-            ],
-            "LAYER.ESCAPE": [
-              {
-                guard: "isOpenControlled",
-                actions: "invokeOnClose"
-              },
-              {
-                target: "focused",
-                actions: "invokeOnClose"
-              }
-            ],
-            "ITEM.POINTER_MOVE": {
-              target: "interacting",
-              actions: "setHighlightedItem"
-            },
-            "ITEM.POINTER_LEAVE": {
-              actions: "clearHighlightedItem"
-            },
-            "LAYER.INTERACT_OUTSIDE": [
-              // == group 1 ==
-              {
-                guard: and("isOpenControlled", "isCustomValue", not("allowCustomValue")),
-                actions: ["revertInputValue", "invokeOnClose"]
-              },
-              {
-                guard: and("isCustomValue", not("allowCustomValue")),
-                target: "idle",
-                actions: ["revertInputValue", "invokeOnClose"]
-              },
-              // == group 2 ==
-              {
-                guard: "isOpenControlled",
-                actions: "invokeOnClose"
-              },
-              {
-                target: "idle",
-                actions: "invokeOnClose"
-              }
-            ],
-            "TRIGGER.CLICK": [
-              {
-                guard: "isOpenControlled",
-                actions: "invokeOnClose"
-              },
-              {
-                target: "focused",
-                actions: "invokeOnClose"
-              }
-            ],
-            "ITEM.CLICK": [
-              {
-                guard: and("isOpenControlled", "closeOnSelect"),
-                actions: ["selectItem", "invokeOnClose"]
-              },
-              {
-                guard: "closeOnSelect",
-                target: "focused",
-                actions: ["selectItem", "invokeOnClose"]
-              },
-              {
-                actions: ["selectItem"]
-              }
-            ],
-            CLOSE: [
-              {
-                guard: "isOpenControlled",
-                actions: "invokeOnClose"
-              },
-              {
-                target: "focused",
-                actions: "invokeOnClose"
-              }
-            ],
-            "VALUE.CLEAR": [
-              {
-                guard: "isOpenControlled",
-                actions: ["clearInputValue", "clearSelectedItems", "invokeOnClose"]
-              },
-              {
-                target: "focused",
-                actions: ["clearInputValue", "clearSelectedItems", "invokeOnClose"]
-              }
-            ]
-          }
-        }
-      }
-    },
-    {
-      guards: {
-        isInputValueEmpty: (ctx2) => ctx2.isInputValueEmpty,
-        autoComplete: (ctx2) => ctx2.autoComplete && !ctx2.multiple,
-        autoHighlight: (ctx2) => ctx2.autoHighlight,
-        isFirstItemHighlighted: (ctx2) => ctx2.collection.first() === ctx2.highlightedValue,
-        isLastItemHighlighted: (ctx2) => ctx2.collection.last() === ctx2.highlightedValue,
-        isCustomValue: (ctx2) => ctx2.inputValue !== ctx2.valueAsString,
-        allowCustomValue: (ctx2) => !!ctx2.allowCustomValue,
-        hasHighlightedItem: (ctx2) => ctx2.highlightedValue != null,
-        closeOnSelect: (ctx2) => !!ctx2.closeOnSelect,
-        isOpenControlled: (ctx2) => !!ctx2["open.controlled"],
-        openOnChange: (ctx2, evt) => {
-          if (isBoolean(ctx2.openOnChange))
-            return ctx2.openOnChange;
-          return !!ctx2.openOnChange?.({ inputValue: evt.value });
-        },
-        restoreFocus: (_ctx, evt) => evt.restoreFocus == null ? true : !!evt.restoreFocus,
-        isChangeEvent: (_ctx, evt) => evt.previousEvent?.type === "INPUT.CHANGE"
-      },
-      activities: {
-        trackDismissableLayer(ctx2, _evt, { send }) {
-          if (!ctx2.dismissable)
-            return;
-          const contentEl = () => dom.getContentEl(ctx2);
-          return trackDismissableElement(contentEl, {
-            defer: true,
-            exclude: () => [dom.getInputEl(ctx2), dom.getTriggerEl(ctx2), dom.getClearTriggerEl(ctx2)],
-            onFocusOutside: ctx2.onFocusOutside,
-            onPointerDownOutside: ctx2.onPointerDownOutside,
-            onInteractOutside: ctx2.onInteractOutside,
-            onEscapeKeyDown(event) {
-              event.preventDefault();
-              event.stopPropagation();
-              send("LAYER.ESCAPE");
-            },
-            onDismiss() {
-              send({ type: "LAYER.INTERACT_OUTSIDE", restoreFocus: false });
-            }
-          });
-        },
-        hideOtherElements(ctx2) {
-          return ariaHidden([dom.getInputEl(ctx2), dom.getContentEl(ctx2), dom.getTriggerEl(ctx2)]);
-        },
-        computePlacement(ctx2) {
-          const controlEl = () => dom.getControlEl(ctx2);
-          const positionerEl = () => dom.getPositionerEl(ctx2);
-          ctx2.currentPlacement = ctx2.positioning.placement;
-          return getPlacement(controlEl, positionerEl, {
-            ...ctx2.positioning,
-            defer: true,
-            onComplete(data) {
-              ctx2.currentPlacement = data.placement;
-            }
-          });
-        },
-        // in event the options are fetched (async), we still want to auto-highlight the first option
-        trackChildNodes(ctx2, _evt, { send }) {
-          if (!ctx2.autoHighlight)
-            return;
-          const exec = () => send("CHILDREN_CHANGE");
-          raf2(() => exec());
-          const contentEl = () => dom.getContentEl(ctx2);
-          return observeChildren(contentEl, {
-            callback: exec,
-            defer: true
-          });
-        },
-        scrollIntoView(ctx2, _evt, { getState }) {
-          const inputEl = dom.getInputEl(ctx2);
-          const exec = (immediate) => {
-            const state = getState();
-            const pointer = state.event.type.startsWith("ITEM.POINTER");
-            if (pointer || !ctx2.highlightedValue)
-              return;
-            const optionEl = dom.getHighlightedItemEl(ctx2);
-            const contentEl = dom.getContentEl(ctx2);
-            if (ctx2.scrollToIndexFn) {
-              const highlightedIndex = ctx2.collection.indexOf(ctx2.highlightedValue);
-              ctx2.scrollToIndexFn({ index: highlightedIndex, immediate });
-              return;
-            }
-            scrollIntoView(optionEl, { rootEl: contentEl, block: "nearest" });
-          };
-          raf2(() => exec(true));
-          return observeAttributes(inputEl, {
-            attributes: ["aria-activedescendant"],
-            callback: () => exec(false)
-          });
-        },
-        trackContentHeight(ctx2) {
-          let cleanup;
-          raf2(() => {
-            const contentEl = dom.getContentEl(ctx2);
-            const listboxEl = dom.getListEl(ctx2);
-            if (!contentEl || !listboxEl)
-              return;
-            const win = dom.getWin(ctx2);
-            let rafId;
-            const observer = new win.ResizeObserver(() => {
-              rafId = requestAnimationFrame(() => {
-                contentEl.style.setProperty(`--height`, `${listboxEl.offsetHeight}px`);
-              });
-            });
-            observer.observe(contentEl);
-            cleanup = () => {
-              cancelAnimationFrame(rafId);
-              observer.unobserve(contentEl);
-            };
-          });
-          return () => cleanup?.();
-        }
-      },
-      actions: {
-        reposition(ctx2, evt) {
-          const controlEl = () => dom.getControlEl(ctx2);
-          const positionerEl = () => dom.getPositionerEl(ctx2);
-          getPlacement(controlEl, positionerEl, {
-            ...ctx2.positioning,
-            ...evt.options,
-            defer: true,
-            listeners: false,
-            onComplete(data) {
-              ctx2.currentPlacement = data.placement;
-            }
-          });
-        },
-        setHighlightedItem(ctx2, evt) {
-          set.highlightedItem(ctx2, evt.value);
-        },
-        clearHighlightedItem(ctx2) {
-          set.highlightedItem(ctx2, null, true);
-        },
-        selectHighlightedItem(ctx2) {
-          set.selectedItem(ctx2, ctx2.highlightedValue);
-        },
-        selectItem(ctx2, evt) {
-          set.selectedItem(ctx2, evt.value);
-        },
-        clearItem(ctx2, evt) {
-          const value = ctx2.value.filter((v) => v !== evt.value);
-          set.selectedItems(ctx2, value);
-        },
-        focusInput(ctx2) {
-          raf2(() => {
-            if (dom.isInputFocused(ctx2))
-              return;
-            dom.getInputEl(ctx2)?.focus({ preventScroll: true });
-          });
-        },
-        focusInputOrTrigger(ctx2) {
-          queueMicrotask(() => {
-            if (ctx2.popup === "dialog") {
-              dom.getTriggerEl(ctx2)?.focus({ preventScroll: true });
-            } else {
-              dom.getInputEl(ctx2)?.focus({ preventScroll: true });
-            }
-          });
-        },
-        syncInputValue(ctx2, evt) {
-          const inputEl = dom.getInputEl(ctx2);
-          if (!inputEl)
-            return;
-          inputEl.value = ctx2.inputValue;
-          raf2(() => {
-            if (!evt.keypress)
-              return;
-            const { selectionStart, selectionEnd } = inputEl;
-            if (Math.abs((selectionEnd ?? 0) - (selectionStart ?? 0)) !== 0)
-              return;
-            if (selectionStart !== 0)
-              return;
-            inputEl.setSelectionRange(inputEl.value.length, inputEl.value.length);
-          });
-        },
-        setInputValue(ctx2, evt) {
-          set.inputValue(ctx2, evt.value);
-        },
-        clearInputValue(ctx2) {
-          set.inputValue(ctx2, "");
-        },
-        revertInputValue(ctx2) {
-          const inputValue = match(ctx2.selectionBehavior, {
-            replace: ctx2.hasSelectedItems ? ctx2.valueAsString : "",
-            preserve: ctx2.inputValue,
-            clear: ""
-          });
-          set.inputValue(ctx2, inputValue);
-        },
-        syncInitialValues(ctx2) {
-          const selectedItems = ctx2.collection.items(ctx2.value);
-          const valueAsString = ctx2.collection.itemsToString(selectedItems);
-          ctx2.highlightedItem = ctx2.collection.item(ctx2.highlightedValue);
-          ctx2.selectedItems = selectedItems;
-          ctx2.valueAsString = valueAsString;
-          ctx2.inputValue = match(ctx2.selectionBehavior, {
-            preserve: ctx2.inputValue || valueAsString,
-            replace: valueAsString,
-            clear: ""
-          });
-        },
-        syncSelectionBehavior(ctx2) {
-          if (ctx2.multiple) {
-            ctx2.selectionBehavior = "clear";
-          }
-        },
-        setSelectedItems(ctx2, evt) {
-          set.selectedItems(ctx2, evt.value);
-        },
-        clearSelectedItems(ctx2) {
-          set.selectedItems(ctx2, []);
-        },
-        scrollContentToTop(ctx2) {
-          if (ctx2.scrollToIndexFn) {
-            ctx2.scrollToIndexFn({ index: 0, immediate: true });
-          } else {
-            const contentEl = dom.getContentEl(ctx2);
-            if (!contentEl)
-              return;
-            contentEl.scrollTop = 0;
-          }
-        },
-        invokeOnOpen(ctx2) {
-          ctx2.onOpenChange?.({ open: true });
-        },
-        invokeOnClose(ctx2) {
-          ctx2.onOpenChange?.({ open: false });
-        },
-        highlightFirstItem(ctx2) {
-          raf2(() => {
-            const value = ctx2.collection.first();
-            set.highlightedItem(ctx2, value);
-          });
-        },
-        highlightLastItem(ctx2) {
-          raf2(() => {
-            const value = ctx2.collection.last();
-            set.highlightedItem(ctx2, value);
-          });
-        },
-        highlightNextItem(ctx2) {
-          let value = null;
-          if (ctx2.highlightedValue) {
-            value = ctx2.collection.next(ctx2.highlightedValue);
-            if (!value && ctx2.loopFocus)
-              value = ctx2.collection.first();
-          } else {
-            value = ctx2.collection.first();
-          }
-          set.highlightedItem(ctx2, value);
-        },
-        highlightPrevItem(ctx2) {
-          let value = null;
-          if (ctx2.highlightedValue) {
-            value = ctx2.collection.prev(ctx2.highlightedValue);
-            if (!value && ctx2.loopFocus)
-              value = ctx2.collection.last();
-          } else {
-            value = ctx2.collection.last();
-          }
-          set.highlightedItem(ctx2, value);
-        },
-        highlightFirstSelectedItem(ctx2) {
-          raf2(() => {
-            const [value] = ctx2.collection.sort(ctx2.value);
-            set.highlightedItem(ctx2, value);
-          });
-        },
-        highlightFirstOrSelectedItem(ctx2) {
-          raf2(() => {
-            let value = null;
-            if (ctx2.hasSelectedItems) {
-              value = ctx2.collection.sort(ctx2.value)[0];
-            } else {
-              value = ctx2.collection.first();
-            }
-            set.highlightedItem(ctx2, value);
-          });
-        },
-        highlightLastOrSelectedItem(ctx2) {
-          raf2(() => {
-            let value = null;
-            if (ctx2.hasSelectedItems) {
-              value = ctx2.collection.sort(ctx2.value)[0];
-            } else {
-              value = ctx2.collection.last();
-            }
-            set.highlightedItem(ctx2, value);
-          });
-        },
-        autofillInputValue(ctx2, evt) {
-          const inputEl = dom.getInputEl(ctx2);
-          if (!ctx2.autoComplete || !inputEl || !evt.keypress)
-            return;
-          const valueText = ctx2.collection.valueToString(ctx2.highlightedValue);
-          raf2(() => {
-            inputEl.value = valueText || ctx2.inputValue;
-          });
-        },
-        setCollection(ctx2, evt) {
-          ctx2.collection = evt.value;
-        },
-        syncSelectedItems(ctx2) {
-          const prevSelectedItems = ctx2.selectedItems;
-          ctx2.selectedItems = ctx2.value.map((v) => {
-            const foundItem = prevSelectedItems.find((item) => ctx2.collection.itemToValue(item) === v);
-            if (foundItem)
-              return foundItem;
-            return ctx2.collection.item(v);
-          });
-        },
-        toggleVisibility(ctx2, evt, { send }) {
-          send({ type: ctx2.open ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE", previousEvent: evt });
-        }
-      }
-    }
-  );
-}
-var invoke = {
-  valueChange: (ctx) => {
-    ctx.onValueChange?.({
-      value: Array.from(ctx.value),
-      items: ctx.selectedItems
-    });
-    const prevSelectedItems = ctx.selectedItems;
-    ctx.selectedItems = ctx.value.map((v) => {
-      const foundItem = prevSelectedItems.find((item) => ctx.collection.itemToValue(item) === v);
-      if (foundItem)
-        return foundItem;
-      return ctx.collection.item(v);
-    });
-    const valueAsString = ctx.collection.itemsToString(ctx.selectedItems);
-    ctx.valueAsString = valueAsString;
-    let nextInputValue;
-    if (ctx.getSelectionValue) {
-      nextInputValue = ctx.getSelectionValue({
-        inputValue: ctx.inputValue,
-        selectedItems: Array.from(ctx.selectedItems),
-        valueAsString
-      });
-    } else {
-      nextInputValue = match(ctx.selectionBehavior, {
-        replace: ctx.valueAsString,
-        preserve: ctx.inputValue,
-        clear: ""
-      });
-    }
-    ctx.inputValue = nextInputValue;
-    invoke.inputChange(ctx);
-  },
-  highlightChange: (ctx) => {
-    ctx.onHighlightChange?.({
-      highlightedValue: ctx.highlightedValue,
-      highligtedItem: ctx.highlightedItem
-    });
-    ctx.highlightedItem = ctx.collection.item(ctx.highlightedValue);
-  },
-  inputChange: (ctx) => {
-    ctx.onInputValueChange?.({ inputValue: ctx.inputValue });
-  }
-};
-var set = {
-  selectedItem: (ctx, value, force = false) => {
-    if (isEqual(ctx.value, value))
-      return;
-    if (value == null && !force)
-      return;
-    if (value == null && force) {
-      ctx.value = [];
-      invoke.valueChange(ctx);
-      return;
-    }
-    ctx.value = ctx.multiple ? addOrRemove(ctx.value, value) : [value];
-    invoke.valueChange(ctx);
-  },
-  selectedItems: (ctx, value) => {
-    if (isEqual(ctx.value, value))
-      return;
-    ctx.value = value;
-    invoke.valueChange(ctx);
-  },
-  highlightedItem: (ctx, value, force = false) => {
-    if (isEqual(ctx.highlightedValue, value))
-      return;
-    if (!value && !force)
-      return;
-    ctx.highlightedValue = value || null;
-    invoke.highlightChange(ctx);
-  },
-  inputValue: (ctx, value) => {
-    if (isEqual(ctx.inputValue, value))
-      return;
-    ctx.inputValue = value;
-    invoke.inputChange(ctx);
-  }
-};
-export {
-  anatomy,
-  collection,
-  connect,
-  machine
-};
+import{createAnatomy}from"@zag-js/anatomy";var anatomy=createAnatomy("combobox").parts("root","label","input","positioner","control","trigger","content","clearTrigger","item","itemText","itemIndicator","itemGroup","itemGroupLabel");var parts=anatomy.build();import{Collection}from"@zag-js/collection";import{ref}from"@zag-js/core";var collection=options=>{return ref(new Collection(options))};collection.empty=()=>{return ref(new Collection({items:[]}))};import{clickIfLink,getEventKey,getNativeEvent,isContextMenuEvent,isLeftClick}from"@zag-js/dom-event";import{ariaAttr,dataAttr,isDownloadingEvent,isOpeningInNewTab}from"@zag-js/dom-query";import{getPlacementStyles}from"@zag-js/popper";import{createScope,query}from"@zag-js/dom-query";var dom=createScope({getRootId:ctx=>ctx.ids?.root??`combobox:${ctx.id}`,getLabelId:ctx=>ctx.ids?.label??`combobox:${ctx.id}:label`,getControlId:ctx=>ctx.ids?.control??`combobox:${ctx.id}:control`,getInputId:ctx=>ctx.ids?.input??`combobox:${ctx.id}:input`,getContentId:ctx=>ctx.ids?.content??`combobox:${ctx.id}:content`,getPositionerId:ctx=>ctx.ids?.positioner??`combobox:${ctx.id}:popper`,getTriggerId:ctx=>ctx.ids?.trigger??`combobox:${ctx.id}:toggle-btn`,getClearTriggerId:ctx=>ctx.ids?.clearTrigger??`combobox:${ctx.id}:clear-btn`,getItemGroupId:(ctx,id)=>ctx.ids?.itemGroup?.(id)??`combobox:${ctx.id}:optgroup:${id}`,getItemGroupLabelId:(ctx,id)=>ctx.ids?.itemGroupLabel?.(id)??`combobox:${ctx.id}:optgroup-label:${id}`,getItemId:(ctx,id)=>`combobox:${ctx.id}:option:${id}`,getContentEl:ctx=>dom.getById(ctx,dom.getContentId(ctx)),getInputEl:ctx=>dom.getById(ctx,dom.getInputId(ctx)),getPositionerEl:ctx=>dom.getById(ctx,dom.getPositionerId(ctx)),getControlEl:ctx=>dom.getById(ctx,dom.getControlId(ctx)),getTriggerEl:ctx=>dom.getById(ctx,dom.getTriggerId(ctx)),getClearTriggerEl:ctx=>dom.getById(ctx,dom.getClearTriggerId(ctx)),getHighlightedItemEl:ctx=>{const value=ctx.highlightedValue;if(value==null)return;return query(dom.getContentEl(ctx),`[role=option][data-value="${CSS.escape(value)}"`)},focusInputEl:ctx=>{const inputEl=dom.getInputEl(ctx);if(dom.getActiveElement(ctx)===inputEl)return;inputEl?.focus({preventScroll:true})},focusTriggerEl:ctx=>{const triggerEl=dom.getTriggerEl(ctx);if(dom.getActiveElement(ctx)===triggerEl)return;triggerEl?.focus({preventScroll:true})}});function connect(state,send,normalize){const translations=state.context.translations;const collection2=state.context.collection;const disabled=state.context.disabled;const interactive=state.context.isInteractive;const invalid=state.context.invalid;const readOnly=state.context.readOnly;const open=state.hasTag("open");const focused=state.hasTag("focused");const composite=state.context.composite;const highlightedValue=state.context.highlightedValue;const popperStyles=getPlacementStyles({...state.context.positioning,placement:state.context.currentPlacement});function getItemState(props){const{item}=props;const disabled2=collection2.isItemDisabled(item);const value=collection2.itemToValue(item);return{value,disabled:Boolean(disabled2||disabled2),highlighted:highlightedValue===value,selected:state.context.value.includes(value)}}return{focused,open,inputValue:state.context.inputValue,highlightedValue,highlightedItem:state.context.highlightedItem,value:state.context.value,valueAsString:state.context.valueAsString,hasSelectedItems:state.context.hasSelectedItems,selectedItems:state.context.selectedItems,collection:state.context.collection,reposition(options={}){send({type:"POSITIONING.SET",options})},setCollection(collection3){send({type:"COLLECTION.SET",value:collection3})},setHighlightValue(value){send({type:"HIGHLIGHTED_VALUE.SET",value})},selectValue(value){send({type:"ITEM.SELECT",value})},setValue(value){send({type:"VALUE.SET",value})},setInputValue(value){send({type:"INPUT_VALUE.SET",value})},clearValue(value){if(value!=null){send({type:"ITEM.CLEAR",value})}else{send("VALUE.CLEAR")}},focus(){dom.getInputEl(state.context)?.focus()},setOpen(nextOpen){if(nextOpen===open)return;send(nextOpen?"OPEN":"CLOSE")},rootProps:normalize.element({...parts.root.attrs,dir:state.context.dir,id:dom.getRootId(state.context),"data-invalid":dataAttr(invalid),"data-readonly":dataAttr(readOnly)}),labelProps:normalize.label({...parts.label.attrs,dir:state.context.dir,htmlFor:dom.getInputId(state.context),id:dom.getLabelId(state.context),"data-readonly":dataAttr(readOnly),"data-disabled":dataAttr(disabled),"data-invalid":dataAttr(invalid),"data-focus":dataAttr(focused),onClick(event){if(composite)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":open?"open":"closed","data-focus":dataAttr(focused),"data-disabled":dataAttr(disabled),"data-invalid":dataAttr(invalid)}),positionerProps:normalize.element({...parts.positioner.attrs,dir:state.context.dir,id:dom.getPositionerId(state.context),style:popperStyles.floating}),inputProps:normalize.input({...parts.input.attrs,dir:state.context.dir,"aria-invalid":ariaAttr(invalid),"data-invalid":dataAttr(invalid),name:state.context.name,form:state.context.form,disabled,autoFocus:state.context.autoFocus,autoComplete:"off",autoCorrect:"off",autoCapitalize:"none",spellCheck:"false",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":dom.getContentId(state.context),"aria-expanded":open,"data-state":open?"open":"closed","aria-activedescendant":highlightedValue?dom.getItemId(state.context,highlightedValue):void 0,onClick(event){if(event.defaultPrevented)return;if(!state.context.openOnClick)return;if(!interactive)return;send("INPUT.CLICK")},onFocus(){if(disabled)return;send("INPUT.FOCUS")},onBlur(){if(disabled)return;send("INPUT.BLUR")},onChange(event){send({type:"INPUT.CHANGE",value:event.currentTarget.value})},onKeyDown(event){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={ArrowDown(event2){if(!openOnKeyPress&&!open)return;send({type:event2.altKey?"OPEN":"INPUT.ARROW_DOWN",keypress});event2.preventDefault()},ArrowUp(){if(!openOnKeyPress&&!open)return;send({type:event.altKey?"CLOSE":"INPUT.ARROW_UP",keypress});event.preventDefault()},Home(event2){if(isModifierKey)return;send({type:"INPUT.HOME",keypress});if(open){event2.preventDefault()}},End(event2){if(isModifierKey)return;send({type:"INPUT.END",keypress});if(open){event2.preventDefault()}},Enter(event2){if(evt.isComposing)return;send({type:"INPUT.ENTER",keypress});if(open){event2.preventDefault()}const itemEl=dom.getHighlightedItemEl(state.context);clickIfLink(itemEl)},Escape(){send({type:"INPUT.ESCAPE",keypress});event.preventDefault()}};const key=getEventKey(event,state.context);const exec=keymap[key];exec?.(event)}}),getTriggerProps(props={}){return normalize.button({...parts.trigger.attrs,dir:state.context.dir,id:dom.getTriggerId(state.context),"aria-haspopup":composite?"listbox":"dialog",type:"button",tabIndex:props.focusable?void 0:-1,"aria-label":translations.triggerLabel,"aria-expanded":open,"data-state":open?"open":"closed","aria-controls":open?dom.getContentId(state.context):void 0,disabled,"data-focusable":dataAttr(props.focusable),"data-readonly":dataAttr(readOnly),"data-disabled":dataAttr(disabled),onFocus(){if(!props.focusable)return;send({type:"INPUT.FOCUS",src:"trigger"})},onClick(event){if(event.defaultPrevented)return;const evt=getNativeEvent(event);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})})},onKeyDown(event){if(event.defaultPrevented)return;if(composite)return;const keyMap={ArrowDown(){send({type:"INPUT.ARROW_DOWN",src:"trigger"})},ArrowUp(){send({type:"INPUT.ARROW_UP",src:"trigger"})}};const key=getEventKey(event,state.context);const exec=keyMap[key];if(exec){exec(event);event.preventDefault()}}})},contentProps:normalize.element({...parts.content.attrs,dir:state.context.dir,id:dom.getContentId(state.context),role:!composite?"dialog":"listbox",tabIndex:-1,hidden:!open,"data-state":open?"open":"closed","aria-labelledby":dom.getLabelId(state.context),"aria-multiselectable":state.context.multiple&&composite?true:void 0,onPointerDown(event){event.preventDefault()}}),listProps:normalize.element({role:!composite?"listbox":void 0,"aria-labelledby":dom.getLabelId(state.context),"aria-multiselectable":state.context.multiple&&!composite?true:void 0}),clearTriggerProps:normalize.button({...parts.clearTrigger.attrs,dir:state.context.dir,id:dom.getClearTriggerId(state.context),type:"button",tabIndex:-1,disabled,"aria-label":translations.clearTriggerLabel,"aria-controls":dom.getInputId(state.context),hidden:!state.context.value.length,onPointerDown(event){event.preventDefault()},onClick(event){if(event.defaultPrevented)return;if(!interactive)return;send({type:"VALUE.CLEAR",src:"clear-trigger"})}}),getItemState,getItemProps(props){const itemState=getItemState(props);const value=itemState.value;return normalize.element({...parts.item.attrs,dir:state.context.dir,id:dom.getItemId(state.context,value),role:"option",tabIndex:-1,"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.disabled)return;if(itemState.highlighted)return;send({type:"ITEM.POINTER_MOVE",value})},onPointerLeave(){if(props.persistFocus)return;if(itemState.disabled)return;const mouseMoved=state.previousEvent.type.includes("POINTER");if(!mouseMoved)return;send({type:"ITEM.POINTER_LEAVE",value})},onPointerUp(event){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){event.preventDefault();event.stopPropagation()}})},getItemTextProps(props){const itemState=getItemState(props);return normalize.element({...parts.itemText.attrs,dir:state.context.dir,"data-disabled":dataAttr(itemState.disabled),"data-highlighted":dataAttr(itemState.highlighted)})},getItemIndicatorProps(props){const itemState=getItemState(props);return normalize.element({"aria-hidden":true,...parts.itemIndicator.attrs,dir:state.context.dir,"data-state":itemState.selected?"checked":"unchecked",hidden:!itemState.selected})},getItemGroupProps(props){const{id}=props;return normalize.element({...parts.itemGroup.attrs,dir:state.context.dir,id:dom.getItemGroupId(state.context,id),"aria-labelledby":dom.getItemGroupLabelId(state.context,id)})},getItemGroupLabelProps(props){const{htmlFor}=props;return normalize.element({...parts.itemGroupLabel.attrs,dir:state.context.dir,id:dom.getItemGroupLabelId(state.context,htmlFor),role:"group"})}}}import{ariaHidden}from"@zag-js/aria-hidden";import{createMachine,guards}from"@zag-js/core";import{trackDismissableElement}from"@zag-js/dismissable";import{observeAttributes,observeChildren,raf,scrollIntoView}from"@zag-js/dom-query";import{getPlacement}from"@zag-js/popper";import{addOrRemove,compact,isArray,isBoolean,isEqual,match}from"@zag-js/utils";var{and,not}=guards;function machine(userContext){const ctx=compact(userContext);return createMachine({id:"combobox",initial:ctx.open?"suggesting":"idle",context:{loopFocus:true,openOnClick:false,value:[],highlightedValue:null,inputValue:"",allowCustomValue:false,closeOnSelect:!ctx.multiple,inputBehavior:"none",selectionBehavior:"replace",openOnKeyPress:true,openOnChange:true,composite:true,...ctx,highlightedItem:null,selectedItems:[],valueAsString:"",collection:ctx.collection??collection.empty(),positioning:{placement:"bottom",flip:false,sameWidth:true,...ctx.positioning},translations:{triggerLabel:"Toggle suggestions",clearTriggerLabel:"Clear value",...ctx.translations}},created:["syncInitialValues","syncSelectionBehavior"],computed:{isInputValueEmpty:ctx2=>ctx2.inputValue.length===0,isInteractive:ctx2=>!(ctx2.readOnly||ctx2.disabled),autoComplete:ctx2=>ctx2.inputBehavior==="autocomplete",autoHighlight:ctx2=>ctx2.inputBehavior==="autohighlight",hasSelectedItems:ctx2=>ctx2.value.length>0},watch:{value:["syncSelectedItems"],inputValue:["syncInputValue"],highlightedValue:["syncHighlightedItem","autofillInputValue"],multiple:["syncSelectionBehavior"],open:["toggleVisibility"]},on:{"HIGHLIGHTED_VALUE.SET":{actions:["setHighlightedItem"]},"ITEM.SELECT":{actions:["selectItem"]},"ITEM.CLEAR":{actions:["clearItem"]},"VALUE.SET":{actions:["setSelectedItems"]},"INPUT_VALUE.SET":{actions:"setInputValue"},"COLLECTION.SET":{actions:["setCollection"]},"POSITIONING.SET":{actions:["reposition"]}},states:{idle:{tags:["idle","closed"],entry:["scrollContentToTop","clearHighlightedItem"],on:{"CONTROLLED.OPEN":{target:"interacting"},"TRIGGER.CLICK":[{guard:"isOpenControlled",actions:["setInitialFocus","highlightFirstSelectedItem","invokeOnOpen"]},{target:"interacting",actions:["setInitialFocus","highlightFirstSelectedItem","invokeOnOpen"]}],"INPUT.CLICK":[{guard:"isOpenControlled",actions:["highlightFirstSelectedItem","invokeOnOpen"]},{target:"interacting",actions:["highlightFirstSelectedItem","invokeOnOpen"]}],"INPUT.FOCUS":{target:"focused"},OPEN:[{guard:"isOpenControlled",actions:["invokeOnOpen"]},{target:"interacting",actions:["invokeOnOpen"]}],"VALUE.CLEAR":{target:"focused",actions:["clearInputValue","clearSelectedItems","setInitialFocus"]}}},focused:{tags:["focused","closed"],entry:["scrollContentToTop","clearHighlightedItem"],on:{"CONTROLLED.OPEN":[{guard:"isChangeEvent",target:"suggesting"},{target:"interacting"}],"INPUT.CHANGE":[{guard:and("isOpenControlled","openOnChange"),actions:["setInputValue","invokeOnOpen","highlightFirstItemIfNeeded"]},{guard:"openOnChange",target:"suggesting",actions:["setInputValue","invokeOnOpen","highlightFirstItemIfNeeded"]},{actions:"setInputValue"}],"LAYER.INTERACT_OUTSIDE":{target:"idle"},"INPUT.ESCAPE":{guard:and("isCustomValue",not("allowCustomValue")),actions:"revertInputValue"},"INPUT.BLUR":{target:"idle"},"INPUT.CLICK":[{guard:"isOpenControlled",actions:["highlightFirstSelectedItem","invokeOnOpen"]},{target:"interacting",actions:["highlightFirstSelectedItem","invokeOnOpen"]}],"TRIGGER.CLICK":[{guard:"isOpenControlled",actions:["setInitialFocus","highlightFirstSelectedItem","invokeOnOpen"]},{target:"interacting",actions:["setInitialFocus","highlightFirstSelectedItem","invokeOnOpen"]}],"INPUT.ARROW_DOWN":[{guard:and("isOpenControlled","autoComplete"),actions:["invokeOnOpen"]},{guard:"autoComplete",target:"interacting",actions:["invokeOnOpen"]},{guard:"isOpenControlled",actions:["highlightFirstOrSelectedItem","invokeOnOpen"]},{target:"interacting",actions:["highlightFirstOrSelectedItem","invokeOnOpen"]}],"INPUT.ARROW_UP":[{guard:"autoComplete",target:"interacting",actions:"invokeOnOpen"},{guard:"autoComplete",target:"interacting",actions:"invokeOnOpen"},{target:"interacting",actions:["highlightLastOrSelectedItem","invokeOnOpen"]},{target:"interacting",actions:["highlightLastOrSelectedItem","invokeOnOpen"]}],OPEN:[{guard:"isOpenControlled",actions:["invokeOnOpen"]},{target:"interacting",actions:["invokeOnOpen"]}],"VALUE.CLEAR":{actions:["clearInputValue","clearSelectedItems"]}}},interacting:{tags:["open","focused"],entry:["setInitialFocus"],activities:["scrollToHighlightedItem","trackDismissableLayer","computePlacement","hideOtherElements"],on:{"CONTROLLED.CLOSE":[{guard:"restoreFocus",target:"focused",actions:["setFinalFocus"]},{target:"idle"}],"INPUT.HOME":{actions:["highlightFirstItem"]},"INPUT.END":{actions:["highlightLastItem"]},"INPUT.ARROW_DOWN":[{guard:and("autoComplete","isLastItemHighlighted"),actions:["clearHighlightedItem","scrollContentToTop"]},{actions:["highlightNextItem"]}],"INPUT.ARROW_UP":[{guard:and("autoComplete","isFirstItemHighlighted"),actions:"clearHighlightedItem"},{actions:"highlightPrevItem"}],"INPUT.ENTER":[{guard:and("isOpenControlled","closeOnSelect"),actions:["selectHighlightedItem","invokeOnClose"]},{guard:"closeOnSelect",target:"focused",actions:["selectHighlightedItem","invokeOnClose","setFinalFocus"]},{actions:["selectHighlightedItem"]}],"INPUT.CHANGE":[{guard:"autoComplete",target:"suggesting",actions:["setInputValue","invokeOnOpen"]},{target:"suggesting",actions:["clearHighlightedItem","setInputValue","invokeOnOpen"]}],"ITEM.POINTER_MOVE":{actions:["setHighlightedItem"]},"ITEM.POINTER_LEAVE":{actions:["clearHighlightedItem"]},"ITEM.CLICK":[{guard:and("isOpenControlled","closeOnSelect"),actions:["selectItem","invokeOnClose"]},{guard:"closeOnSelect",target:"focused",actions:["selectItem","invokeOnClose","setFinalFocus"]},{actions:["selectItem"]}],"LAYER.ESCAPE":[{guard:and("isOpenControlled","autoComplete"),actions:["syncInputValue","invokeOnClose"]},{guard:"autoComplete",target:"focused",actions:["syncInputValue","invokeOnClose"]},{guard:"isOpenControlled",actions:"invokeOnClose"},{target:"focused",actions:["invokeOnClose","setFinalFocus"]}],"TRIGGER.CLICK":[{guard:"isOpenControlled",actions:"invokeOnClose"},{target:"focused",actions:"invokeOnClose"}],"LAYER.INTERACT_OUTSIDE":[{guard:and("isOpenControlled","isCustomValue",not("allowCustomValue")),actions:["revertInputValue","invokeOnClose"]},{guard:and("isCustomValue",not("allowCustomValue")),target:"idle",actions:["revertInputValue","invokeOnClose"]},{guard:"isOpenControlled",actions:"invokeOnClose"},{target:"idle",actions:"invokeOnClose"}],CLOSE:[{guard:"isOpenControlled",actions:["invokeOnClose"]},{target:"focused",actions:["invokeOnClose","setFinalFocus"]}],"VALUE.CLEAR":[{guard:"isOpenControlled",actions:["clearInputValue","clearSelectedItems","invokeOnClose"]},{target:"focused",actions:["clearInputValue","clearSelectedItems","invokeOnClose","setFinalFocus"]}]}},suggesting:{tags:["open","focused"],activities:["trackDismissableLayer","scrollToHighlightedItem","computePlacement","trackChildNodes","hideOtherElements"],entry:["setInitialFocus"],on:{"CONTROLLED.CLOSE":[{guard:"restoreFocus",target:"focused",actions:["setFinalFocus"]},{target:"idle"}],CHILDREN_CHANGE:{actions:["highlightFirstItem"]},"INPUT.ARROW_DOWN":{target:"interacting",actions:["highlightNextItem"]},"INPUT.ARROW_UP":{target:"interacting",actions:["highlightPrevItem"]},"INPUT.HOME":{target:"interacting",actions:["highlightFirstItem"]},"INPUT.END":{target:"interacting",actions:["highlightLastItem"]},"INPUT.ENTER":[{guard:and("isOpenControlled","closeOnSelect"),actions:["selectHighlightedItem","invokeOnClose"]},{guard:"closeOnSelect",target:"focused",actions:["selectHighlightedItem","invokeOnClose","setFinalFocus"]},{actions:["selectHighlightedItem"]}],"INPUT.CHANGE":[{guard:"autoHighlight",actions:["setInputValue"]},{actions:["setInputValue"]}],"LAYER.ESCAPE":[{guard:"isOpenControlled",actions:["invokeOnClose"]},{target:"focused",actions:["invokeOnClose"]}],"ITEM.POINTER_MOVE":{target:"interacting",actions:["setHighlightedItem"]},"ITEM.POINTER_LEAVE":{actions:["clearHighlightedItem"]},"LAYER.INTERACT_OUTSIDE":[{guard:and("isOpenControlled","isCustomValue",not("allowCustomValue")),actions:["revertInputValue","invokeOnClose"]},{guard:and("isCustomValue",not("allowCustomValue")),target:"idle",actions:["revertInputValue","invokeOnClose"]},{guard:"isOpenControlled",actions:["invokeOnClose"]},{target:"idle",actions:["invokeOnClose"]}],"TRIGGER.CLICK":[{guard:"isOpenControlled",actions:["invokeOnClose"]},{target:"focused",actions:["invokeOnClose"]}],"ITEM.CLICK":[{guard:and("isOpenControlled","closeOnSelect"),actions:["selectItem","invokeOnClose"]},{guard:"closeOnSelect",target:"focused",actions:["selectItem","invokeOnClose","setFinalFocus"]},{actions:["selectItem"]}],CLOSE:[{guard:"isOpenControlled",actions:["invokeOnClose"]},{target:"focused",actions:["invokeOnClose","setFinalFocus"]}],"VALUE.CLEAR":[{guard:"isOpenControlled",actions:["clearInputValue","clearSelectedItems","invokeOnClose"]},{target:"focused",actions:["clearInputValue","clearSelectedItems","invokeOnClose","setFinalFocus"]}]}}}},{guards:{isInputValueEmpty:ctx2=>ctx2.isInputValueEmpty,autoComplete:ctx2=>ctx2.autoComplete&&!ctx2.multiple,autoHighlight:ctx2=>ctx2.autoHighlight,isFirstItemHighlighted:ctx2=>ctx2.collection.first()===ctx2.highlightedValue,isLastItemHighlighted:ctx2=>ctx2.collection.last()===ctx2.highlightedValue,isCustomValue:ctx2=>ctx2.inputValue!==ctx2.valueAsString,allowCustomValue:ctx2=>!!ctx2.allowCustomValue,hasHighlightedItem:ctx2=>ctx2.highlightedValue!=null,closeOnSelect:ctx2=>!!ctx2.closeOnSelect,isOpenControlled:ctx2=>!!ctx2["open.controlled"],openOnChange:(ctx2,evt)=>{if(isBoolean(ctx2.openOnChange))return ctx2.openOnChange;return!!ctx2.openOnChange?.({inputValue:evt.value})},restoreFocus:(_ctx,evt)=>evt.restoreFocus==null?true:!!evt.restoreFocus,isChangeEvent:(_ctx,evt)=>evt.previousEvent?.type==="INPUT.CHANGE"},activities:{trackDismissableLayer(ctx2,_evt,{send}){if(ctx2.disableLayer)return;const contentEl=()=>dom.getContentEl(ctx2);return trackDismissableElement(contentEl,{defer:true,exclude:()=>[dom.getInputEl(ctx2),dom.getTriggerEl(ctx2),dom.getClearTriggerEl(ctx2)],onFocusOutside:ctx2.onFocusOutside,onPointerDownOutside:ctx2.onPointerDownOutside,onInteractOutside:ctx2.onInteractOutside,onEscapeKeyDown(event){event.preventDefault();event.stopPropagation();send("LAYER.ESCAPE")},onDismiss(){send({type:"LAYER.INTERACT_OUTSIDE",restoreFocus:false})}})},hideOtherElements(ctx2){return ariaHidden([dom.getInputEl(ctx2),dom.getContentEl(ctx2),dom.getTriggerEl(ctx2)])},computePlacement(ctx2){const controlEl=()=>dom.getControlEl(ctx2);const positionerEl=()=>dom.getPositionerEl(ctx2);ctx2.currentPlacement=ctx2.positioning.placement;return getPlacement(controlEl,positionerEl,{...ctx2.positioning,defer:true,onComplete(data){ctx2.currentPlacement=data.placement}})},trackChildNodes(ctx2,_evt,{send}){if(!ctx2.autoHighlight)return;const exec=()=>send("CHILDREN_CHANGE");const contentEl=()=>dom.getContentEl(ctx2);return observeChildren(contentEl,{callback:exec,defer:true})},scrollToHighlightedItem(ctx2,_evt,{getState}){const inputEl=dom.getInputEl(ctx2);let cleanups=[];const exec=immediate=>{const state=getState();const pointer=state.event.type.includes("POINTER");if(pointer||!ctx2.highlightedValue)return;const itemEl=dom.getHighlightedItemEl(ctx2);const contentEl=dom.getContentEl(ctx2);if(ctx2.scrollToIndexFn){const highlightedIndex=ctx2.collection.indexOf(ctx2.highlightedValue);ctx2.scrollToIndexFn({index:highlightedIndex,immediate});return}const rafCleanup2=raf(()=>{scrollIntoView(itemEl,{rootEl:contentEl,block:"nearest"})});cleanups.push(rafCleanup2)};const rafCleanup=raf(()=>exec(true));cleanups.push(rafCleanup);const observerCleanup=observeAttributes(inputEl,{attributes:["aria-activedescendant"],callback:()=>exec(false)});cleanups.push(observerCleanup);return()=>{cleanups.forEach(cleanup=>cleanup())}}},actions:{reposition(ctx2,evt){const controlEl=()=>dom.getControlEl(ctx2);const positionerEl=()=>dom.getPositionerEl(ctx2);getPlacement(controlEl,positionerEl,{...ctx2.positioning,...evt.options,defer:true,listeners:false,onComplete(data){ctx2.currentPlacement=data.placement}})},setHighlightedItem(ctx2,evt){if(evt.value==null)return;set.highlightedValue(ctx2,evt.value)},clearHighlightedItem(ctx2){set.highlightedValue(ctx2,null,true)},selectHighlightedItem(ctx2){set.value(ctx2,ctx2.highlightedValue)},selectItem(ctx2,evt){if(evt.value==null)return;set.value(ctx2,evt.value)},clearItem(ctx2,evt){if(evt.value==null)return;const value=ctx2.value.filter(v=>v!==evt.value);set.value(ctx2,value)},setInitialFocus(ctx2){raf(()=>{dom.focusInputEl(ctx2)})},setFinalFocus(ctx2){raf(()=>{const triggerEl=dom.getTriggerEl(ctx2);if(triggerEl?.dataset.focusable==null){dom.focusInputEl(ctx2)}else{dom.focusTriggerEl(ctx2)}})},syncInputValue(ctx2){const inputEl=dom.getInputEl(ctx2);if(!inputEl)return;inputEl.value=ctx2.inputValue;queueMicrotask(()=>{const{selectionStart,selectionEnd}=inputEl;if(Math.abs((selectionEnd??0)-(selectionStart??0))!==0)return;if(selectionStart!==0)return;inputEl.setSelectionRange(inputEl.value.length,inputEl.value.length)})},setInputValue(ctx2,evt){set.inputValue(ctx2,evt.value)},clearInputValue(ctx2){set.inputValue(ctx2,"")},revertInputValue(ctx2){const inputValue=match(ctx2.selectionBehavior,{replace:ctx2.hasSelectedItems?ctx2.valueAsString:"",preserve:ctx2.inputValue,clear:""});set.inputValue(ctx2,inputValue)},syncInitialValues(ctx2){const selectedItems=ctx2.collection.items(ctx2.value);const valueAsString=ctx2.collection.itemsToString(selectedItems);ctx2.highlightedItem=ctx2.collection.item(ctx2.highlightedValue);ctx2.selectedItems=selectedItems;ctx2.valueAsString=valueAsString;ctx2.inputValue=match(ctx2.selectionBehavior,{preserve:ctx2.inputValue||valueAsString,replace:valueAsString,clear:""})},syncSelectionBehavior(ctx2){if(ctx2.multiple){ctx2.selectionBehavior="clear"}},setSelectedItems(ctx2,evt){if(!isArray(evt.value))return;set.value(ctx2,evt.value)},clearSelectedItems(ctx2){set.value(ctx2,[])},scrollContentToTop(ctx2){if(ctx2.scrollToIndexFn){ctx2.scrollToIndexFn({index:0,immediate:true})}else{const contentEl=dom.getContentEl(ctx2);if(!contentEl)return;contentEl.scrollTop=0}},invokeOnOpen(ctx2){ctx2.onOpenChange?.({open:true})},invokeOnClose(ctx2){ctx2.onOpenChange?.({open:false})},highlightFirstItem(ctx2){raf(()=>{const value=ctx2.collection.first();set.highlightedValue(ctx2,value)})},highlightFirstItemIfNeeded(ctx2){if(!ctx2.autoHighlight)return;raf(()=>{const value=ctx2.collection.first();set.highlightedValue(ctx2,value)})},highlightLastItem(ctx2){raf(()=>{const value=ctx2.collection.last();set.highlightedValue(ctx2,value)})},highlightNextItem(ctx2){let value=null;if(ctx2.highlightedValue){value=ctx2.collection.next(ctx2.highlightedValue);if(!value&&ctx2.loopFocus)value=ctx2.collection.first()}else{value=ctx2.collection.first()}set.highlightedValue(ctx2,value)},highlightPrevItem(ctx2){let value=null;if(ctx2.highlightedValue){value=ctx2.collection.prev(ctx2.highlightedValue);if(!value&&ctx2.loopFocus)value=ctx2.collection.last()}else{value=ctx2.collection.last()}set.highlightedValue(ctx2,value)},highlightFirstSelectedItem(ctx2){raf(()=>{const[value]=ctx2.collection.sort(ctx2.value);set.highlightedValue(ctx2,value)})},highlightFirstOrSelectedItem(ctx2){raf(()=>{let value=null;if(ctx2.hasSelectedItems){value=ctx2.collection.sort(ctx2.value)[0]}else{value=ctx2.collection.first()}set.highlightedValue(ctx2,value)})},highlightLastOrSelectedItem(ctx2){raf(()=>{let value=null;if(ctx2.hasSelectedItems){value=ctx2.collection.sort(ctx2.value)[0]}else{value=ctx2.collection.last()}set.highlightedValue(ctx2,value)})},autofillInputValue(ctx2,evt){const inputEl=dom.getInputEl(ctx2);if(!ctx2.autoComplete||!inputEl||!evt.keypress)return;const valueText=ctx2.collection.valueToString(ctx2.highlightedValue);raf(()=>{inputEl.value=valueText||ctx2.inputValue})},setCollection(ctx2,evt){ctx2.collection=evt.value},syncSelectedItems(ctx2){sync.valueChange(ctx2)},syncHighlightedItem(ctx2){sync.highlightChange(ctx2)},toggleVisibility(ctx2,evt,{send}){send({type:ctx2.open?"CONTROLLED.OPEN":"CONTROLLED.CLOSE",previousEvent:evt})}}})}var sync={valueChange:ctx=>{const prevSelectedItems=ctx.selectedItems;ctx.selectedItems=ctx.value.map(v=>{const foundItem=prevSelectedItems.find(item=>ctx.collection.itemToValue(item)===v);if(foundItem)return foundItem;return ctx.collection.item(v)});const valueAsString=ctx.collection.itemsToString(ctx.selectedItems);ctx.valueAsString=valueAsString;let inputValue;if(ctx.getSelectionValue){inputValue=ctx.getSelectionValue({inputValue:ctx.inputValue,selectedItems:Array.from(ctx.selectedItems),valueAsString})}else{inputValue=match(ctx.selectionBehavior,{replace:ctx.valueAsString,preserve:ctx.inputValue,clear:""})}set.inputValue(ctx,inputValue)},highlightChange:ctx=>{ctx.highlightedItem=ctx.collection.item(ctx.highlightedValue)}};var invoke={valueChange:ctx=>{sync.valueChange(ctx);ctx.onValueChange?.({value:Array.from(ctx.value),items:Array.from(ctx.selectedItems)})},highlightChange:ctx=>{sync.highlightChange(ctx);ctx.onHighlightChange?.({highlightedValue:ctx.highlightedValue,highlightedItem:ctx.highlightedItem})},inputChange:ctx=>{ctx.onInputValueChange?.({inputValue:ctx.inputValue})}};var set={value:(ctx,value,force=false)=>{if(isEqual(ctx.value,value))return;if(value==null&&!force)return;if(value==null&&force){ctx.value=[];invoke.valueChange(ctx);return}if(isArray(value)){ctx.value=value}else if(value!=null){ctx.value=ctx.multiple?addOrRemove(ctx.value,value):[value]}invoke.valueChange(ctx)},highlightedValue:(ctx,value,force=false)=>{if(isEqual(ctx.highlightedValue,value))return;if(!value&&!force)return;ctx.highlightedValue=value||null;invoke.highlightChange(ctx)},inputValue:(ctx,value)=>{if(isEqual(ctx.inputValue,value))return;ctx.inputValue=value;invoke.inputChange(ctx)}};export{anatomy,collection,connect,machine};
 //# sourceMappingURL=index.mjs.map