@destyler/combobox 0.0.7-beta.7 → 0.0.7-beta.9

package/dist/index.js

@@ -0,0 +1,1401 @@
+import { createAnatomy } from "@destyler/anatomy";
+import { ListCollection } from "@destyler/collection";
+import { createMachine, guards, ref } from "@destyler/xstate";
+import { ariaAttr, clickIfLink, createScope, dataAttr, getEventKey, isAnchorElement, isComposingEvent, isContextMenuEvent, isDownloadingEvent, isLeftClick, isOpeningInNewTab, observeAttributes, observeChildren, query, raf, scrollIntoView } from "@destyler/dom";
+import { getPlacement, getPlacementStyles } from "@destyler/popper";
+import { ariaHidden } from "@destyler/aria-hidden";
+import { trackDismissableElement } from "@destyler/dismissable";
+import { addOrRemove, compact, isArray, isBoolean, isEqual, match } from "@destyler/utils";
+
+//#region src/anatomy.ts
+const anatomy = createAnatomy("combobox").parts("root", "clearTrigger", "content", "control", "input", "item", "itemGroup", "itemGroupLabel", "itemIndicator", "itemText", "label", "list", "positioner", "trigger");
+const parts = anatomy.build();
+
+//#endregion
+//#region src/collection.ts
+function collection(options) {
+	return ref(new ListCollection(options));
+}
+collection.empty = () => {
+	return ref(new ListCollection({ items: [] }));
+};
+
+//#endregion
+//#region src/dom.ts
+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 });
+	}
+});
+
+//#endregion
+//#region src/connect.ts
+function connect(state, send, normalize) {
+	const translations = state.context.translations;
+	const collection$1 = 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 disabled$1 = collection$1.getItemDisabled(props.item);
+		const value = collection$1.getItemValue(props.item);
+		return {
+			value,
+			disabled: Boolean(disabled$1 || disabled$1),
+			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(collection$2) {
+			send({
+				type: "COLLECTION.SET",
+				value: collection$2
+			});
+		},
+		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(event$1) {
+							if (!openOnKeyPress && !open) return;
+							send({
+								type: event$1.altKey ? "OPEN" : "INPUT.ARROW_DOWN",
+								keypress
+							});
+							event$1.preventDefault();
+						},
+						ArrowUp() {
+							if (!openOnKeyPress && !open) return;
+							send({
+								type: event.altKey ? "CLOSE" : "INPUT.ARROW_UP",
+								keypress
+							});
+							event.preventDefault();
+						},
+						Home(event$1) {
+							if (isModifierKey) return;
+							send({
+								type: "INPUT.HOME",
+								keypress
+							});
+							if (open) event$1.preventDefault();
+						},
+						End(event$1) {
+							if (isModifierKey) return;
+							send({
+								type: "INPUT.END",
+								keypress
+							});
+							if (open) event$1.preventDefault();
+						},
+						Enter(event$1) {
+							send({
+								type: "INPUT.ENTER",
+								keypress
+							});
+							if (open) event$1.preventDefault();
+							const itemEl = dom.getHighlightedItemEl(state.context);
+							if (isAnchorElement(itemEl)) state.context.navigate({
+								value: state.context.highlightedValue,
+								node: 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"
+			});
+		}
+	};
+}
+
+//#endregion
+//#region src/machine.ts
+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,
+			navigate({ node }) {
+				clickIfLink(node);
+			},
+			...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: (ctx$1) => ctx$1.inputValue.length === 0,
+			isInteractive: (ctx$1) => !(ctx$1.readOnly || ctx$1.disabled),
+			autoComplete: (ctx$1) => ctx$1.inputBehavior === "autocomplete",
+			autoHighlight: (ctx$1) => ctx$1.inputBehavior === "autohighlight",
+			hasSelectedItems: (ctx$1) => ctx$1.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": [
+						{
+							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", "isCustomValue", not("hasHighlightedItem"), not("allowCustomValue")),
+							actions: ["revertInputValue", "invokeOnClose"]
+						},
+						{
+							guard: and("isCustomValue", not("hasHighlightedItem"), not("allowCustomValue")),
+							target: "focused",
+							actions: ["revertInputValue", "invokeOnClose"]
+						},
+						{
+							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", "isCustomValue", not("hasHighlightedItem"), not("allowCustomValue")),
+							actions: ["revertInputValue", "invokeOnClose"]
+						},
+						{
+							guard: and("isCustomValue", not("hasHighlightedItem"), not("allowCustomValue")),
+							target: "focused",
+							actions: ["revertInputValue", "invokeOnClose"]
+						},
+						{
+							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: (ctx$1) => ctx$1.isInputValueEmpty,
+			autoComplete: (ctx$1) => ctx$1.autoComplete && !ctx$1.multiple,
+			autoHighlight: (ctx$1) => ctx$1.autoHighlight,
+			isFirstItemHighlighted: (ctx$1) => ctx$1.collection.firstValue === ctx$1.highlightedValue,
+			isLastItemHighlighted: (ctx$1) => ctx$1.collection.lastValue === ctx$1.highlightedValue,
+			isCustomValue: (ctx$1) => ctx$1.inputValue !== ctx$1.valueAsString,
+			allowCustomValue: (ctx$1) => !!ctx$1.allowCustomValue,
+			hasHighlightedItem: (ctx$1) => ctx$1.highlightedValue != null,
+			closeOnSelect: (ctx$1) => !!ctx$1.closeOnSelect,
+			isOpenControlled: (ctx$1) => !!ctx$1["open.controlled"],
+			openOnChange: (ctx$1, evt) => {
+				if (isBoolean(ctx$1.openOnChange)) return ctx$1.openOnChange;
+				return !!ctx$1.openOnChange?.({ inputValue: evt.value });
+			},
+			restoreFocus: (_ctx, evt) => evt.restoreFocus == null ? true : !!evt.restoreFocus,
+			isChangeEvent: (_ctx, evt) => evt.previousEvent?.type === "INPUT.CHANGE"
+		},
+		activities: {
+			trackDismissableLayer(ctx$1, _evt, { send }) {
+				if (ctx$1.disableLayer) return;
+				const contentEl = () => dom.getContentEl(ctx$1);
+				return trackDismissableElement(contentEl, {
+					defer: true,
+					exclude: () => [
+						dom.getInputEl(ctx$1),
+						dom.getTriggerEl(ctx$1),
+						dom.getClearTriggerEl(ctx$1)
+					],
+					onFocusOutside: ctx$1.onFocusOutside,
+					onPointerDownOutside: ctx$1.onPointerDownOutside,
+					onInteractOutside: ctx$1.onInteractOutside,
+					onEscapeKeyDown(event) {
+						event.preventDefault();
+						event.stopPropagation();
+						send("LAYER.ESCAPE");
+					},
+					onDismiss() {
+						send({
+							type: "LAYER.INTERACT_OUTSIDE",
+							restoreFocus: false
+						});
+					}
+				});
+			},
+			hideOtherElements(ctx$1) {
+				return ariaHidden([
+					dom.getInputEl(ctx$1),
+					dom.getContentEl(ctx$1),
+					dom.getTriggerEl(ctx$1),
+					dom.getClearTriggerEl(ctx$1)
+				]);
+			},
+			computePlacement(ctx$1) {
+				const controlEl = () => dom.getControlEl(ctx$1);
+				const positionerEl = () => dom.getPositionerEl(ctx$1);
+				ctx$1.currentPlacement = ctx$1.positioning.placement;
+				return getPlacement(controlEl, positionerEl, {
+					...ctx$1.positioning,
+					defer: true,
+					onComplete(data) {
+						ctx$1.currentPlacement = data.placement;
+					}
+				});
+			},
+			trackChildNodes(ctx$1, _evt, { send }) {
+				if (!ctx$1.autoHighlight) return;
+				const exec = () => send("CHILDREN_CHANGE");
+				const contentEl = () => dom.getContentEl(ctx$1);
+				return observeChildren(contentEl, {
+					callback: exec,
+					defer: true
+				});
+			},
+			scrollToHighlightedItem(ctx$1, _evt, { getState }) {
+				const inputEl = dom.getInputEl(ctx$1);
+				const cleanups = [];
+				const exec = (immediate) => {
+					const state = getState();
+					const pointer = state.event.type.includes("POINTER");
+					if (pointer || !ctx$1.highlightedValue) return;
+					const itemEl = dom.getHighlightedItemEl(ctx$1);
+					const contentEl = dom.getContentEl(ctx$1);
+					if (ctx$1.scrollToIndexFn) {
+						const highlightedIndex = ctx$1.collection.indexOf(ctx$1.highlightedValue);
+						ctx$1.scrollToIndexFn({
+							index: highlightedIndex,
+							immediate
+						});
+						return;
+					}
+					const rafCleanup$1 = raf(() => {
+						scrollIntoView(itemEl, {
+							rootEl: contentEl,
+							block: "nearest"
+						});
+					});
+					cleanups.push(rafCleanup$1);
+				};
+				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(ctx$1, evt) {
+				const controlEl = () => dom.getControlEl(ctx$1);
+				const positionerEl = () => dom.getPositionerEl(ctx$1);
+				getPlacement(controlEl, positionerEl, {
+					...ctx$1.positioning,
+					...evt.options,
+					defer: true,
+					listeners: false,
+					onComplete(data) {
+						ctx$1.currentPlacement = data.placement;
+					}
+				});
+			},
+			setHighlightedItem(ctx$1, evt) {
+				if (evt.value == null) return;
+				set.highlightedValue(ctx$1, evt.value);
+			},
+			clearHighlightedItem(ctx$1) {
+				set.highlightedValue(ctx$1, null, true);
+			},
+			selectHighlightedItem(ctx$1) {
+				set.value(ctx$1, ctx$1.highlightedValue);
+				set.inputValue(ctx$1, getInputValue(ctx$1));
+			},
+			selectItem(ctx$1, evt) {
+				if (evt.value == null) return;
+				set.value(ctx$1, evt.value);
+				set.inputValue(ctx$1, getInputValue(ctx$1));
+			},
+			clearItem(ctx$1, evt) {
+				if (evt.value == null) return;
+				const value = ctx$1.value.filter((v) => v !== evt.value);
+				set.value(ctx$1, value);
+				set.inputValue(ctx$1, getInputValue(ctx$1));
+			},
+			setInitialFocus(ctx$1) {
+				raf(() => {
+					dom.focusInputEl(ctx$1);
+				});
+			},
+			setFinalFocus(ctx$1) {
+				raf(() => {
+					const triggerEl = dom.getTriggerEl(ctx$1);
+					if (triggerEl?.dataset.focusable == null) dom.focusInputEl(ctx$1);
+					else dom.focusTriggerEl(ctx$1);
+				});
+			},
+			syncInputValue(ctx$1) {
+				const inputEl = dom.getInputEl(ctx$1);
+				if (!inputEl) return;
+				inputEl.value = ctx$1.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(ctx$1, evt) {
+				set.inputValue(ctx$1, evt.value);
+			},
+			clearInputValue(ctx$1) {
+				set.inputValue(ctx$1, "");
+			},
+			revertInputValue(ctx$1) {
+				const inputValue = match(ctx$1.selectionBehavior, {
+					replace: ctx$1.hasSelectedItems ? ctx$1.valueAsString : "",
+					preserve: ctx$1.inputValue,
+					clear: ""
+				});
+				set.inputValue(ctx$1, inputValue);
+			},
+			syncInitialValues(ctx$1) {
+				const selectedItems = ctx$1.collection.findMany(ctx$1.value);
+				const valueAsString = ctx$1.collection.stringifyMany(ctx$1.value);
+				ctx$1.highlightedItem = ctx$1.collection.find(ctx$1.highlightedValue);
+				ctx$1.selectedItems = selectedItems;
+				ctx$1.valueAsString = valueAsString;
+				if (ctx$1.inputValue.trim() || ctx$1.multiple) return;
+				ctx$1.inputValue = match(ctx$1.selectionBehavior, {
+					preserve: ctx$1.inputValue || valueAsString,
+					replace: valueAsString,
+					clear: ""
+				});
+			},
+			syncSelectionBehavior(ctx$1) {
+				if (ctx$1.multiple) ctx$1.selectionBehavior = "clear";
+			},
+			setSelectedItems(ctx$1, evt) {
+				if (!isArray(evt.value)) return;
+				set.value(ctx$1, evt.value);
+				set.inputValue(ctx$1, getInputValue(ctx$1));
+			},
+			clearSelectedItems(ctx$1) {
+				set.value(ctx$1, []);
+				set.inputValue(ctx$1, getInputValue(ctx$1));
+			},
+			scrollContentToTop(ctx$1) {
+				if (ctx$1.scrollToIndexFn) ctx$1.scrollToIndexFn({
+					index: 0,
+					immediate: true
+				});
+				else {
+					const contentEl = dom.getContentEl(ctx$1);
+					if (!contentEl) return;
+					contentEl.scrollTop = 0;
+				}
+			},
+			invokeOnOpen(ctx$1) {
+				ctx$1.onOpenChange?.({ open: true });
+			},
+			invokeOnClose(ctx$1) {
+				ctx$1.onOpenChange?.({ open: false });
+			},
+			highlightFirstItem(ctx$1) {
+				raf(() => {
+					const value = ctx$1.collection.firstValue;
+					set.highlightedValue(ctx$1, value, true);
+				});
+			},
+			highlightFirstItemIfNeeded(ctx$1) {
+				if (!ctx$1.autoHighlight) return;
+				raf(() => {
+					const value = ctx$1.collection.firstValue;
+					set.highlightedValue(ctx$1, value);
+				});
+			},
+			highlightLastItem(ctx$1) {
+				raf(() => {
+					const value = ctx$1.collection.lastValue;
+					set.highlightedValue(ctx$1, value);
+				});
+			},
+			highlightNextItem(ctx$1) {
+				let value = null;
+				if (ctx$1.highlightedValue) {
+					value = ctx$1.collection.getNextValue(ctx$1.highlightedValue);
+					if (!value && ctx$1.loopFocus) value = ctx$1.collection.firstValue;
+				} else value = ctx$1.collection.firstValue;
+				set.highlightedValue(ctx$1, value);
+			},
+			highlightPrevItem(ctx$1) {
+				let value = null;
+				if (ctx$1.highlightedValue) {
+					value = ctx$1.collection.getPreviousValue(ctx$1.highlightedValue);
+					if (!value && ctx$1.loopFocus) value = ctx$1.collection.lastValue;
+				} else value = ctx$1.collection.lastValue;
+				set.highlightedValue(ctx$1, value);
+			},
+			highlightFirstSelectedItem(ctx$1) {
+				raf(() => {
+					const [value] = ctx$1.collection.sort(ctx$1.value);
+					set.highlightedValue(ctx$1, value);
+				});
+			},
+			highlightFirstOrSelectedItem(ctx$1) {
+				raf(() => {
+					let value = null;
+					if (ctx$1.hasSelectedItems) value = ctx$1.collection.sort(ctx$1.value)[0];
+					else value = ctx$1.collection.firstValue;
+					set.highlightedValue(ctx$1, value);
+				});
+			},
+			highlightLastOrSelectedItem(ctx$1) {
+				raf(() => {
+					let value = null;
+					if (ctx$1.hasSelectedItems) value = ctx$1.collection.sort(ctx$1.value)[0];
+					else value = ctx$1.collection.lastValue;
+					set.highlightedValue(ctx$1, value);
+				});
+			},
+			autofillInputValue(ctx$1, evt) {
+				const inputEl = dom.getInputEl(ctx$1);
+				if (!ctx$1.autoComplete || !inputEl || !evt.keypress) return;
+				const valueText = ctx$1.collection.stringify(ctx$1.highlightedValue);
+				raf(() => {
+					inputEl.value = valueText || ctx$1.inputValue;
+				});
+			},
+			setCollection(ctx$1, evt) {
+				ctx$1.collection = evt.value;
+			},
+			syncSelectedItems(ctx$1) {
+				sync.valueChange(ctx$1);
+				set.inputValue(ctx$1, getInputValue(ctx$1));
+			},
+			syncHighlightedItem(ctx$1) {
+				sync.highlightChange(ctx$1);
+			},
+			toggleVisibility(ctx$1, evt, { send }) {
+				send({
+					type: ctx$1.open ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE",
+					previousEvent: evt
+				});
+			}
+		}
+	});
+}
+
+//#endregion
+export { anatomy, collection, connect, machine };