@destyler/combobox 0.0.7-beta.7 → 0.1.0

package/dist/index.mjs

@@ -1,1470 +0,0 @@
-import { createAnatomy } from '@zag-js/anatomy';
-import { ListCollection } from '@zag-js/collection';
-import { ref, guards, createMachine } from '@zag-js/core';
-import { isContextMenuEvent, getEventKey, isLeftClick, clickIfLink } from '@zag-js/dom-event';
-import { createScope, query, dataAttr, ariaAttr, isDownloadingEvent, isOpeningInNewTab, isComposingEvent, raf, observeAttributes, observeChildren, scrollIntoView } from '@zag-js/dom-query';
-import { getPlacementStyles, getPlacement } from '@zag-js/popper';
-import { ariaHidden } from '@zag-js/aria-hidden';
-import { trackDismissableElement } from '@zag-js/dismissable';
-import { compact, isArray, match, isBoolean, isEqual, addOrRemove } from '@zag-js/utils';
-
-const anatomy = createAnatomy("combobox").parts(
-  "root",
-  "clearTrigger",
-  "content",
-  "control",
-  "input",
-  "item",
-  "itemGroup",
-  "itemGroupLabel",
-  "itemIndicator",
-  "itemText",
-  "label",
-  "list",
-  "positioner",
-  "trigger"
-);
-const parts = anatomy.build();
-
-function collection(options) {
-  return ref(new ListCollection(options));
-}
-collection.empty = () => {
-  return ref(new ListCollection({ items: [] }));
-};
-
-const 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) => ctx.ids?.item?.(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;
-    const selector = `[role=option][data-value="${CSS.escape(value)}"`;
-    return query(dom.getContentEl(ctx), selector);
-  },
-  focusInputEl: (ctx) => {
-    const inputEl = dom.getInputEl(ctx);
-    if (dom.isActiveElement(ctx, inputEl))
-      return;
-    inputEl?.focus({ preventScroll: true });
-  },
-  focusTriggerEl: (ctx) => {
-    const triggerEl = dom.getTriggerEl(ctx);
-    if (dom.isActiveElement(ctx, triggerEl))
-      return;
-    triggerEl?.focus({ preventScroll: true });
-  }
-});
-
-function connect(state, send, normalize) {
-  const translations = state.context.translations;
-  const collection = 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 disabled2 = collection.getItemDisabled(props.item);
-    const value = collection.getItemValue(props.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,
-    multiple: !!state.context.multiple,
-    disabled: !!disabled,
-    syncSelectedItems() {
-      send({ type: "SELECTED_ITEMS.SYNC" });
-    },
-    reposition(options = {}) {
-      send({ type: "POSITIONING.SET", options });
-    },
-    setCollection(collection2) {
-      send({ type: "COLLECTION.SET", value: collection2 });
-    },
-    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");
-    },
-    getRootProps() {
-      return normalize.element({
-        ...parts.root.attrs,
-        "dir": state.context.dir,
-        "id": dom.getRootId(state.context),
-        "data-invalid": dataAttr(invalid),
-        "data-readonly": dataAttr(readOnly)
-      });
-    },
-    getLabelProps() {
-      return 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 });
-        }
-      });
-    },
-    getControlProps() {
-      return 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)
-      });
-    },
-    getPositionerProps() {
-      return normalize.element({
-        ...parts.positioner.attrs,
-        dir: state.context.dir,
-        id: dom.getPositionerId(state.context),
-        style: popperStyles.floating
-      });
-    },
-    getInputProps() {
-      return 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": disabled,
-        "autoFocus": state.context.autoFocus,
-        "required": state.context.required,
-        "autoComplete": "off",
-        "autoCorrect": "off",
-        "autoCapitalize": "none",
-        "spellCheck": "false",
-        "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": 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;
-          if (event.ctrlKey || event.shiftKey || isComposingEvent(event))
-            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) {
-              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-invalid": dataAttr(invalid),
-        "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;
-          if (!interactive)
-            return;
-          if (!isLeftClick(event))
-            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();
-          }
-        }
-      });
-    },
-    getContentProps() {
-      return 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",
-        "data-placement": state.context.currentPlacement,
-        "aria-labelledby": dom.getLabelId(state.context),
-        "aria-multiselectable": state.context.multiple && composite ? true : void 0,
-        onPointerDown(event) {
-          event.preventDefault();
-        }
-      });
-    },
-    getListProps() {
-      return normalize.element({
-        ...parts.list.attrs,
-        "role": !composite ? "listbox" : void 0,
-        "aria-labelledby": dom.getLabelId(state.context),
-        "aria-multiselectable": state.context.multiple && !composite ? true : void 0
-      });
-    },
-    getClearTriggerProps() {
-      return normalize.button({
-        ...parts.clearTrigger.attrs,
-        "dir": state.context.dir,
-        "id": dom.getClearTriggerId(state.context),
-        "type": "button",
-        "tabIndex": -1,
-        "disabled": disabled,
-        "data-invalid": dataAttr(invalid),
-        "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": ariaAttr(itemState.highlighted),
-        "aria-disabled": ariaAttr(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 });
-        },
-        onClick(event) {
-          if (isDownloadingEvent(event))
-            return;
-          if (isOpeningInNewTab(event))
-            return;
-          if (isContextMenuEvent(event))
-            return;
-          if (itemState.disabled)
-            return;
-          send({ type: "ITEM.CLICK", src: "click", value });
-        }
-      });
-    },
-    getItemTextProps(props) {
-      const itemState = getItemState(props);
-      return normalize.element({
-        ...parts.itemText.attrs,
-        "dir": state.context.dir,
-        "data-state": itemState.selected ? "checked" : "unchecked",
-        "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"
-      });
-    }
-  };
-}
-
-const { and, not } = guards;
-function getInputValue(ctx) {
-  return match(ctx.selectionBehavior, {
-    preserve: ctx.inputValue,
-    replace: ctx.valueAsString,
-    clear: ""
-  });
-}
-const sync = {
-  valueChange: (ctx) => {
-    const prevSelectedItems = ctx.selectedItems;
-    ctx.selectedItems = ctx.value.map((v) => {
-      const foundItem = prevSelectedItems.find((item) => ctx.collection.getItemValue(item) === v);
-      if (foundItem)
-        return foundItem;
-      return ctx.collection.find(v);
-    });
-    ctx.valueAsString = ctx.collection.stringifyItems(ctx.selectedItems);
-  },
-  highlightChange: (ctx) => {
-    ctx.highlightedItem = ctx.collection.find(ctx.highlightedValue);
-  }
-};
-const 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 });
-  }
-};
-const 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);
-  }
-};
-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,
-        readOnly: false,
-        disabled: false,
-        ...ctx,
-        highlightedItem: null,
-        selectedItems: [],
-        valueAsString: "",
-        collection: ctx.collection ?? collection.empty(),
-        positioning: {
-          placement: "bottom",
-          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: {
-        "SELECTED_ITEMS.SYNC": {
-          actions: ["syncSelectedItems"]
-        },
-        "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": [
-              // == 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"],
-          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": [
-              // == group 1 ==
-              {
-                guard: and("isOpenControlled", "isCustomValue", not("hasHighlightedItem"), not("allowCustomValue")),
-                actions: ["revertInputValue", "invokeOnClose"]
-              },
-              {
-                guard: and("isCustomValue", not("hasHighlightedItem"), not("allowCustomValue")),
-                target: "focused",
-                actions: ["revertInputValue", "invokeOnClose"]
-              },
-              // == group 2 ==
-              {
-                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": [
-              // == 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", "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": [
-              // == group 1 ==
-              {
-                guard: and("isOpenControlled", "isCustomValue", not("hasHighlightedItem"), not("allowCustomValue")),
-                actions: ["revertInputValue", "invokeOnClose"]
-              },
-              {
-                guard: and("isCustomValue", not("hasHighlightedItem"), not("allowCustomValue")),
-                target: "focused",
-                actions: ["revertInputValue", "invokeOnClose"]
-              },
-              // == group 2 ==
-              {
-                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": [
-              // == 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", "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.firstValue === ctx2.highlightedValue,
-        isLastItemHighlighted: (ctx2) => ctx2.collection.lastValue === 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),
-            dom.getClearTriggerEl(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");
-          const contentEl = () => dom.getContentEl(ctx2);
-          return observeChildren(contentEl, {
-            callback: exec,
-            defer: true
-          });
-        },
-        scrollToHighlightedItem(ctx2, _evt, { getState }) {
-          const inputEl = dom.getInputEl(ctx2);
-          const 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);
-          set.inputValue(ctx2, getInputValue(ctx2));
-        },
-        selectItem(ctx2, evt) {
-          if (evt.value == null)
-            return;
-          set.value(ctx2, evt.value);
-          set.inputValue(ctx2, getInputValue(ctx2));
-        },
-        clearItem(ctx2, evt) {
-          if (evt.value == null)
-            return;
-          const value = ctx2.value.filter((v) => v !== evt.value);
-          set.value(ctx2, value);
-          set.inputValue(ctx2, getInputValue(ctx2));
-        },
-        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.findMany(ctx2.value);
-          const valueAsString = ctx2.collection.stringifyMany(ctx2.value);
-          ctx2.highlightedItem = ctx2.collection.find(ctx2.highlightedValue);
-          ctx2.selectedItems = selectedItems;
-          ctx2.valueAsString = valueAsString;
-          if (ctx2.inputValue.trim() || ctx2.multiple)
-            return;
-          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);
-          set.inputValue(ctx2, getInputValue(ctx2));
-        },
-        clearSelectedItems(ctx2) {
-          set.value(ctx2, []);
-          set.inputValue(ctx2, getInputValue(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.firstValue;
-            set.highlightedValue(ctx2, value, true);
-          });
-        },
-        highlightFirstItemIfNeeded(ctx2) {
-          if (!ctx2.autoHighlight)
-            return;
-          raf(() => {
-            const value = ctx2.collection.firstValue;
-            set.highlightedValue(ctx2, value);
-          });
-        },
-        highlightLastItem(ctx2) {
-          raf(() => {
-            const value = ctx2.collection.lastValue;
-            set.highlightedValue(ctx2, value);
-          });
-        },
-        highlightNextItem(ctx2) {
-          let value = null;
-          if (ctx2.highlightedValue) {
-            value = ctx2.collection.getNextValue(ctx2.highlightedValue);
-            if (!value && ctx2.loopFocus)
-              value = ctx2.collection.firstValue;
-          } else {
-            value = ctx2.collection.firstValue;
-          }
-          set.highlightedValue(ctx2, value);
-        },
-        highlightPrevItem(ctx2) {
-          let value = null;
-          if (ctx2.highlightedValue) {
-            value = ctx2.collection.getPreviousValue(ctx2.highlightedValue);
-            if (!value && ctx2.loopFocus)
-              value = ctx2.collection.lastValue;
-          } else {
-            value = ctx2.collection.lastValue;
-          }
-          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.firstValue;
-            }
-            set.highlightedValue(ctx2, value);
-          });
-        },
-        highlightLastOrSelectedItem(ctx2) {
-          raf(() => {
-            let value = null;
-            if (ctx2.hasSelectedItems) {
-              value = ctx2.collection.sort(ctx2.value)[0];
-            } else {
-              value = ctx2.collection.lastValue;
-            }
-            set.highlightedValue(ctx2, value);
-          });
-        },
-        autofillInputValue(ctx2, evt) {
-          const inputEl = dom.getInputEl(ctx2);
-          if (!ctx2.autoComplete || !inputEl || !evt.keypress)
-            return;
-          const valueText = ctx2.collection.stringify(ctx2.highlightedValue);
-          raf(() => {
-            inputEl.value = valueText || ctx2.inputValue;
-          });
-        },
-        setCollection(ctx2, evt) {
-          ctx2.collection = evt.value;
-        },
-        syncSelectedItems(ctx2) {
-          sync.valueChange(ctx2);
-          set.inputValue(ctx2, getInputValue(ctx2));
-        },
-        syncHighlightedItem(ctx2) {
-          sync.highlightChange(ctx2);
-        },
-        toggleVisibility(ctx2, evt, { send }) {
-          send({ type: ctx2.open ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE", previousEvent: evt });
-        }
-      }
-    }
-  );
-}
-
-export { anatomy, collection, connect, machine };