ropav 0.1.7 → 0.1.8

package/dist/tags-input.js

@@ -0,0 +1,380 @@
+import './tags-input.css';
+import { t as useStylesApi } from "./styles-api.js";
+import { n as toPresenceAttribute } from "./attributes.js";
+import { t as bem } from "./bem.js";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { t as x_default } from "./x.js";
+import { o as splitCompatibilityAttributes, t as composeEventHandlers } from "./attributes2.js";
+import { t as useControlState } from "./useControlState.js";
+import { i as isNodeWithinElement } from "./events.js";
+import { t as isInteractiveElement } from "./interactive.js";
+import { i as useHiddenSelectChoiceTransaction, r as createStringListNativeChoiceAdapter } from "./nativeChoice.js";
+import { child, computed, createComponent, createFor, createIf, createSlot, createTemplateRefSetter, defineVaporComponent, next, nextTick, on, ref, renderEffect, setDynamicProps, setInsertionState, setTemplateRefBinding, setText, template, toDisplayString, unref, withModifiers } from "vue";
+//#region src/components/tags-input/tagsInputModel.ts
+function normalizeTagsInputValue(value) {
+	return value.trim();
+}
+function addTagsInputValues(values, candidates, options) {
+	const nextValues = [...values];
+	const maxTags = options.maxTags === void 0 ? Number.POSITIVE_INFINITY : Math.max(0, options.maxTags);
+	for (const candidate of candidates) {
+		const value = normalizeTagsInputValue(candidate);
+		if (value === "" || nextValues.length >= maxTags) continue;
+		if (!options.allowDuplicates && nextValues.includes(value)) continue;
+		if (options.validate && !options.validate(value)) continue;
+		nextValues.push(value);
+	}
+	return nextValues;
+}
+function splitTagsInputValue(value, splitChars) {
+	const delimiters = new Set(splitChars);
+	const tags = [];
+	let remainder = "";
+	let wasSplit = false;
+	for (const character of Array.from(value)) {
+		if (!delimiters.has(character)) {
+			remainder += character;
+			continue;
+		}
+		tags.push(remainder);
+		remainder = "";
+		wasSplit = true;
+	}
+	return {
+		tags: wasSplit ? tags : [],
+		remainder: wasSplit ? remainder : value
+	};
+}
+//#endregion
+//#region src/components/tags-input/useTagsInput.ts
+function useTagsInputTransaction(props, emitUpdate, inputRef, onFormReset) {
+	const transaction = useHiddenSelectChoiceTransaction({
+		value: {
+			modelValue: () => props.modelValue,
+			defaultValue: () => [...props.defaultValue ?? []],
+			onChange: emitUpdate
+		},
+		native: {
+			adapter: createStringListNativeChoiceAdapter(),
+			className: "rp-tags-input__native",
+			focusVisible: () => inputRef.value?.focus(),
+			validationMessage: () => props.readonly ? void 0 : props.validationMessage
+		},
+		onFormReset
+	});
+	return {
+		nativeSelectRef: transaction.nativeSelectRef,
+		nativeSelectAttrs: transaction.nativeSelectAttrs,
+		requestValueUpdate: transaction.requestValueUpdate,
+		values: transaction.value
+	};
+}
+function areTagValuesEqual(left, right) {
+	return left.length === right.length && left.every((value, index) => value === right[index]);
+}
+function useTagsInput(props, emitUpdate) {
+	const rootRef = ref(null);
+	const inputRef = ref(null);
+	const searchValue = ref("");
+	function updateSearch(value) {
+		searchValue.value = value;
+		if (inputRef.value && inputRef.value.value !== value) inputRef.value.value = value;
+	}
+	const transaction = useTagsInputTransaction(props, emitUpdate, inputRef, () => updateSearch(""));
+	const values = transaction.values;
+	const control = useControlState(props);
+	const rootClass = computed(() => bem("rp-tags-input", {
+		[`size-${props.size}`]: Boolean(props.size),
+		[`radius-${props.radius}`]: Boolean(props.radius),
+		disabled: control.disabled,
+		readonly: props.readonly,
+		invalid: control.invalid
+	}));
+	const canClear = computed(() => Boolean(props.clearable && values.value.length > 0 && !control.disabled && !props.readonly));
+	function addValues(candidates) {
+		if (control.disabled || props.readonly) return false;
+		const nextValues = addTagsInputValues(values.value, candidates, {
+			allowDuplicates: props.allowDuplicates ?? false,
+			maxTags: props.maxTags,
+			validate: props.validate
+		});
+		if (areTagValuesEqual(nextValues, values.value)) return false;
+		transaction.requestValueUpdate(nextValues);
+		return true;
+	}
+	function commitSearch() {
+		if (searchValue.value.trim() === "") return false;
+		const wasAdded = addValues([searchValue.value]);
+		if (wasAdded) updateSearch("");
+		return wasAdded;
+	}
+	function removeTag(index) {
+		if (control.disabled || props.readonly || index < 0 || index >= values.value.length) return;
+		transaction.requestValueUpdate(values.value.filter((_, valueIndex) => valueIndex !== index));
+		nextTick(() => inputRef.value?.focus());
+	}
+	function clear() {
+		if (!canClear.value) return;
+		transaction.requestValueUpdate([]);
+		updateSearch("");
+		nextTick(() => inputRef.value?.focus());
+	}
+	function focusInput(event) {
+		if (control.disabled) return;
+		if (event && isInteractiveElement(event.target, ".rp-tags-input__input")) return;
+		inputRef.value?.focus();
+	}
+	function onInput(event) {
+		if (control.disabled || props.readonly || event.isComposing) return;
+		const inputValue = event.currentTarget.value;
+		const { tags, remainder } = splitTagsInputValue(inputValue, props.splitChars ?? [","]);
+		if (tags.length > 0) addValues(tags);
+		updateSearch(remainder);
+	}
+	function onInputBlur(event) {
+		if (isNodeWithinElement(event.relatedTarget, rootRef.value)) return;
+		if (props.acceptValueOnBlur) commitSearch();
+	}
+	function onInputKeydown(event) {
+		if (control.disabled || props.readonly || event.isComposing) return;
+		if (event.key === "Enter" && searchValue.value.trim() !== "") {
+			event.preventDefault();
+			commitSearch();
+			return;
+		}
+		if (event.key === "Backspace" && searchValue.value === "") {
+			const lastIndex = values.value.length - 1;
+			if (lastIndex >= 0) removeTag(lastIndex);
+		}
+	}
+	return {
+		templateRefs: {
+			root: rootRef,
+			input: inputRef,
+			native: transaction.nativeSelectRef
+		},
+		nativeSelectAttrs: transaction.nativeSelectAttrs,
+		control,
+		rootClass,
+		values,
+		searchValue,
+		canClear,
+		removeTag,
+		clear,
+		focusInput,
+		onInput,
+		onInputBlur,
+		onInputKeydown
+	};
+}
+//#endregion
+//#region src/components/tags-input/tags-input.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template(" ");
+var t1 = template("<button data-v-9fbac28f></button>");
+var t2 = template("<span data-v-9fbac28f><span data-v-9fbac28f></span>");
+var t3 = template("<button data-v-9fbac28f>");
+var t4 = template("<div data-v-9fbac28f><select data-v-9fbac28f></select><div data-v-9fbac28f><input data-v-9fbac28f></div>", 1);
+//#endregion
+//#region src/components/tags-input/tags-input.vue
+var tags_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpTagsInput",
+	inheritAttrs: false,
+	__name: "tags-input",
+	props: {
+		id: {},
+		name: {},
+		form: {},
+		modelValue: { default: void 0 },
+		defaultValue: { default: () => [] },
+		maxTags: { default: void 0 },
+		allowDuplicates: {
+			type: Boolean,
+			default: false
+		},
+		splitChars: { default: () => [","] },
+		acceptValueOnBlur: {
+			type: Boolean,
+			default: false
+		},
+		validate: {
+			type: Function,
+			default: void 0
+		},
+		size: {},
+		radius: {},
+		placeholder: { default: "Enter tags..." },
+		clearable: {
+			type: Boolean,
+			default: false
+		},
+		clearLabel: { default: "Clear tags" },
+		removeLabel: { default: "Remove" },
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		required: {
+			type: Boolean,
+			default: void 0
+		},
+		invalid: {
+			type: Boolean,
+			default: void 0
+		},
+		ariaLabel: {},
+		describedby: {},
+		labelledby: {},
+		inputAttrs: {},
+		validationMessage: {},
+		classNames: {},
+		styles: {}
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { templateRefs, nativeSelectAttrs, control, rootClass, values, searchValue, canClear, removeTag, clear, focusInput, onInput, onInputBlur, onInputKeydown } = useTagsInput(props, (value) => emit("update:modelValue", value));
+		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
+		const rootAttrs = computed(() => getRootAttrs({
+			class: rootClass.value,
+			onMousedown: focusInput,
+			"data-disabled": toPresenceAttribute(control.disabled),
+			"data-readonly": toPresenceAttribute(props.readonly),
+			"data-invalid": toPresenceAttribute(control.invalid)
+		}));
+		const visibleInputAttrs = computed(() => {
+			const attrs = props.inputAttrs ?? {};
+			const { compatibilityClass, compatibilityStyle, forwardedAttributes } = splitCompatibilityAttributes(attrs);
+			return {
+				...forwardedAttributes,
+				...getPartAttrs("input", {
+					class: "rp-tags-input__input",
+					compatibilityClass,
+					compatibilityStyle
+				}),
+				id: control.id,
+				name: void 0,
+				form: "",
+				type: "text",
+				value: searchValue.value,
+				placeholder: values.value.length === 0 ? props.placeholder : void 0,
+				disabled: control.disabled || void 0,
+				readonly: props.readonly || void 0,
+				required: void 0,
+				autocomplete: forwardedAttributes.autocomplete ?? "off",
+				"aria-disabled": control.disabled || void 0,
+				"aria-invalid": control.invalid || void 0,
+				"aria-required": control.required || void 0,
+				"aria-label": control.ariaLabelledby ? void 0 : props.ariaLabel || void 0,
+				"aria-labelledby": control.ariaLabelledby,
+				"aria-describedby": control.ariaDescribedby,
+				"data-disabled": toPresenceAttribute(control.disabled),
+				"data-readonly": toPresenceAttribute(props.readonly),
+				"data-invalid": toPresenceAttribute(control.invalid),
+				onInput: composeEventHandlers(onInput, attrs.onInput),
+				onBlur: composeEventHandlers(onInputBlur, attrs.onBlur),
+				onKeydown: composeEventHandlers(onInputKeydown, attrs.onKeydown)
+			};
+		});
+		__expose({
+			nativeElement: templateRefs.native,
+			inputElement: templateRefs.input,
+			focus: () => templateRefs.input.value?.focus()
+		});
+		const _setTemplateRef = createTemplateRefSetter();
+		const n18 = t4();
+		const n0 = child(n18);
+		const n13 = next(n0, 1);
+		const n12 = child(n13, 1);
+		renderEffect(() => {
+			const _control = unref(control);
+			setDynamicProps(n18, [rootAttrs.value]);
+			setDynamicProps(n0, [unref(nativeSelectAttrs), {
+				name: __props.name,
+				form: _control.form,
+				disabled: _control.disabled || void 0,
+				required: _control.required && !__props.readonly || void 0,
+				multiple: "",
+				tabindex: "-1",
+				"aria-hidden": "true"
+			}]);
+			_setTemplateRef(n0, unref(templateRefs).native);
+			setDynamicProps(n13, [unref(getPartAttrs)("tags", { class: "rp-tags-input__tags" })]);
+		});
+		setInsertionState(n13, 0);
+		createFor(() => unref(values), (_for_item0, _for_key0) => {
+			const n11 = t2();
+			const n6 = child(n11);
+			renderEffect(() => {
+				const _getPartAttrs = unref(getPartAttrs);
+				setDynamicProps(n11, [_getPartAttrs("tag", { class: "rp-tags-input__tag" })]);
+				setDynamicProps(n6, [_getPartAttrs("tagLabel", { class: "rp-tags-input__tag-label" })]);
+			});
+			setInsertionState(n6, null, 0);
+			createSlot("tag", { value: () => _for_item0.value }, () => {
+				const n5 = t0();
+				renderEffect(() => setText(n5, toDisplayString(_for_item0.value)));
+				return n5;
+			}, 1);
+			setInsertionState(n11, null, 1);
+			createIf(() => !__props.readonly, () => {
+				const n10 = t1();
+				renderEffect(() => setDynamicProps(n10, [
+					{ type: "button" },
+					unref(getPartAttrs)("tagRemove", { class: "rp-tags-input__tag-remove" }),
+					{
+						"aria-label": `${__props.removeLabel} ${_for_item0.value}`,
+						disabled: unref(control).disabled || void 0,
+						tabindex: "-1"
+					}
+				]));
+				setInsertionState(n10, null, 0);
+				createComponent(unref(x_default));
+				on(n10, "mousedown", withModifiers(() => {}, ["prevent"]));
+				on(n10, "click", withModifiers(() => unref(removeTag)(_for_key0.value), ["stop"]));
+				return n10;
+			});
+			return n11;
+		}, (value, index) => `${value}-${index}`, 8);
+		renderEffect(() => {
+			setDynamicProps(n12, [visibleInputAttrs.value]);
+			_setTemplateRef(n12, unref(templateRefs).input);
+		});
+		setInsertionState(n18, null, 2);
+		createIf(() => unref(canClear), () => {
+			const n17 = t3();
+			renderEffect(() => setDynamicProps(n17, [
+				{ type: "button" },
+				unref(getPartAttrs)("clear", { class: "rp-tags-input__clear" }),
+				{
+					"aria-label": __props.clearLabel,
+					tabindex: "-1"
+				}
+			]));
+			setInsertionState(n17, null, 0);
+			createComponent(unref(x_default));
+			on(n17, "mousedown", withModifiers(() => {}, ["prevent"]));
+			on(n17, "click", withModifiers((e) => unref(clear)(e), ["stop"]));
+			return n17;
+		});
+		setTemplateRefBinding(n18, () => unref(templateRefs).root);
+		return n18;
+	}
+}), [["__scopeId", "data-v-9fbac28f"]]);
+//#endregion
+//#region src/components/tags-input/types.ts
+var tagsInputParts = [
+	"root",
+	"tags",
+	"tag",
+	"tagLabel",
+	"tagRemove",
+	"input",
+	"clear"
+];
+//#endregion
+export { tags_input_default as n, tagsInputParts as t };

package/dist/tooltip.js

@@ -3,15 +3,14 @@ import { t as useControllableValue } from "./useControllableValue.js";
 import { t as useStylesApi } from "./styles-api.js";
 import { n as toPresenceAttribute } from "./attributes.js";
 import { t as bem } from "./bem.js";
-import { t as isElement } from "./query.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { r as normalizeDelay } from "./number.js";
 import { a as getComponentVariantColorRoles } from "./componentColors.js";
-import { a as snapshotAttributes, i as restoreAttributes } from "./attributes2.js";
 import { n as mergeAriaIdRefs } from "./aria.js";
 import { n as useOverlayZIndex } from "./useOverlayZIndex.js";
 import { t as getFloatingOffsetStyle } from "./floatingOffset.js";
-import { n as useFloatingTarget, t as useFloatingPosition } from "./useFloatingPosition.js";
+import { t as useFloatingPosition } from "./useFloatingPosition.js";
+import { t as useFloatingTargetLifecycle } from "./useFloatingTargetLifecycle.js";
 import { n as useTeleportTarget } from "./useTeleportTarget.js";
 import { VaporTeleport, VaporTransition, applyVShow, computed, createComponent, createIf, createSlot, createTemplateRefSetter, defineVaporComponent, extend, onBeforeUnmount, ref, renderEffect, setAttr, setDynamicProps, setInsertionState, setStyle, setTemplateRefBinding, setText, template, toDisplayString, unref, useId, useSlots, watch } from "vue";
 //#region src/internal/composables/useDelayedOpen.ts
@@ -66,6 +65,27 @@ function useDelayedOpen(options = {}) {
 	};
 }
 //#endregion
+//#region src/components/tooltip/useTooltipTargetBindings.ts
+var TARGET_ATTRIBUTES = ["aria-describedby"];
+function useTooltipTargetBindings({ targetLifecycle, shouldDescribeContent, tooltipId, openTooltip, closeTooltip, onKeydown }) {
+	targetLifecycle.bindTarget({
+		listeners: [
+			["mouseenter", openTooltip],
+			["mouseleave", closeTooltip],
+			["focusin", openTooltip],
+			["focusout", closeTooltip],
+			["keydown", onKeydown]
+		],
+		attributes: {
+			names: TARGET_ATTRIBUTES,
+			isActive: () => shouldDescribeContent.value,
+			apply: (target, snapshot) => {
+				target.setAttribute("aria-describedby", mergeAriaIdRefs(snapshot.get("aria-describedby"), tooltipId.value) ?? "");
+			}
+		}
+	});
+}
+//#endregion
 //#region src/components/tooltip/useTooltip.ts
 var TOOLTIP_OFFSET_PROPERTIES = {
 	mainAxis: "--_rp-tooltip-main-axis-offset",
@@ -99,8 +119,11 @@ function useTooltip(props, emitOpenChange) {
 	const shouldRenderContent = computed(() => !isDisabled.value);
 	const shouldDescribeContent = computed(() => shouldRenderContent.value && !isDecorative.value);
 	const teleportTo = useTeleportTarget(() => props.teleportTo);
-	const { isExplicitTarget, reference, resolvedTarget } = useFloatingTarget(() => props.target, rootRef);
-	const targetElement = computed(() => isElement(resolvedTarget.value) ? resolvedTarget.value : null);
+	const targetLifecycle = useFloatingTargetLifecycle({
+		target: () => props.target,
+		fallback: rootRef
+	});
+	const { isExplicitTarget, reference } = targetLifecycle;
 	const zIndex = useOverlayZIndex({
 		baseZIndex: () => props.baseZIndex,
 		defaultBaseZIndex: 1e3
@@ -155,32 +178,14 @@ function useTooltip(props, emitOpenChange) {
 	watch(isDisabled, (disabled) => {
 		if (disabled) closeTooltip();
 	});
-	watch([isExplicitTarget, targetElement], ([explicit, target], _previous, onCleanup) => {
-		if (!explicit || !target) return;
-		target.addEventListener("mouseenter", openTooltip);
-		target.addEventListener("mouseleave", closeTooltip);
-		target.addEventListener("focusin", openTooltip);
-		target.addEventListener("focusout", closeTooltip);
-		target.addEventListener("keydown", onKeydown);
-		onCleanup(() => {
-			target.removeEventListener("mouseenter", openTooltip);
-			target.removeEventListener("mouseleave", closeTooltip);
-			target.removeEventListener("focusin", openTooltip);
-			target.removeEventListener("focusout", closeTooltip);
-			target.removeEventListener("keydown", onKeydown);
-		});
-	}, { flush: "sync" });
-	watch([
-		isExplicitTarget,
-		targetElement,
+	useTooltipTargetBindings({
+		targetLifecycle,
 		shouldDescribeContent,
-		tooltipId
-	], ([explicit, target, shouldDescribe, id], _previous, onCleanup) => {
-		if (!explicit || !target || !shouldDescribe) return;
-		const snapshot = snapshotAttributes(target, ["aria-describedby"]);
-		target.setAttribute("aria-describedby", mergeAriaIdRefs(snapshot.get("aria-describedby"), id) ?? "");
-		onCleanup(() => restoreAttributes(target, snapshot));
-	}, { flush: "sync" });
+		tooltipId,
+		openTooltip,
+		closeTooltip,
+		onKeydown
+	});
 	return {
 		rootRef,
 		contentRef,

package/dist/useEditableOptionList.js

@@ -0,0 +1,216 @@
+import { i as isNodeWithinElement } from "./events.js";
+import { t as isInteractiveElement } from "./interactive.js";
+import { n as useClickOutside, t as useFlatOptionCollection } from "./useFlatOptionCollection.js";
+import { computed, nextTick, ref, watch } from "vue";
+//#region src/utils/optionFilter.ts
+function defaultOptionFilter(option, searchValue) {
+	return option.label.toLocaleLowerCase().includes(searchValue.trim().toLocaleLowerCase());
+}
+function filterOptions(options, searchValue, filter) {
+	const availableOptions = options ?? [];
+	if (filter === false || searchValue.trim() === "") return [...availableOptions];
+	const predicate = filter ?? defaultOptionFilter;
+	return availableOptions.filter((option) => predicate(option, searchValue));
+}
+//#endregion
+//#region src/internal/composables/useEditableOptionList.ts
+function useEditableOptionList(options) {
+	const selection = options.selection;
+	const isSingle = selection.kind === "single";
+	const isOpen = ref(false);
+	const isSearching = ref(false);
+	const popupId = `${options.baseId}-popup`;
+	const searchValue = ref(isSingle ? selection.displayValue() : "");
+	const filterValue = computed(() => isSingle && !isSearching.value ? "" : searchValue.value);
+	const visibleOptions = computed(() => filterOptions(options.items(), filterValue.value, options.filter()));
+	const optionCollection = useFlatOptionCollection({
+		items: () => visibleOptions.value,
+		baseId: options.baseId,
+		isOpen: () => isOpen.value,
+		collectionRef: options.rootRef,
+		getKey: options.getKey,
+		isDisabled: options.isDisabled,
+		isSelected: selection.isSelected
+	});
+	const itemsSnapshot = computed(() => visibleOptions.value.map((option) => [options.getKey(option), options.isDisabled(option)]));
+	const canClear = computed(() => options.clearable() && !options.disabled() && (selection.hasSelection() || isSingle && searchValue.value !== ""));
+	function setInputValue(value) {
+		searchValue.value = value;
+		if (options.inputRef.value && options.inputRef.value.value !== value) options.inputRef.value.value = value;
+	}
+	function syncInputToSelection() {
+		if (selection.kind !== "single") return;
+		isSearching.value = false;
+		setInputValue(selection.displayValue());
+	}
+	function resetQuery() {
+		if (searchValue.value === "") return;
+		setInputValue("");
+		options.onSearch("");
+	}
+	function focusInput() {
+		nextTick(() => options.inputRef.value?.focus());
+	}
+	function open() {
+		if (options.disabled() || isOpen.value) return;
+		isOpen.value = true;
+		syncInputToSelection();
+		optionCollection.activate("selected");
+	}
+	function close(restoreInput = true) {
+		isOpen.value = false;
+		optionCollection.reset();
+		if (restoreInput) syncInputToSelection();
+	}
+	function toggle() {
+		if (options.disabled()) return;
+		const wasOpen = isOpen.value;
+		if (wasOpen) close();
+		else open();
+		if (!wasOpen || selection.kind === "multiple") focusInput();
+	}
+	function restoreRejectedSingleSelection(option) {
+		if (selection.kind !== "single") return;
+		queueMicrotask(() => {
+			if (!(option ? selection.isSelected(option) : !selection.hasSelection()) && !isOpen.value) syncInputToSelection();
+		});
+	}
+	function selectOption(option) {
+		if (options.isDisabled(option)) return;
+		selection.select(option);
+		if (selection.kind === "single") {
+			isSearching.value = false;
+			setInputValue(option.label);
+			close(false);
+			restoreRejectedSingleSelection(option);
+		} else {
+			resetQuery();
+			optionCollection.activate(option);
+		}
+		focusInput();
+	}
+	function clearSelection() {
+		if (!canClear.value) return;
+		if (selection.kind === "single") {
+			isSearching.value = false;
+			setInputValue("");
+			options.onSearch("");
+			selection.clear();
+			close(false);
+			restoreRejectedSingleSelection();
+		} else {
+			selection.clear();
+			resetQuery();
+		}
+		focusInput();
+	}
+	function resetAfterFormReset() {
+		close();
+		if (selection.kind === "multiple") resetQuery();
+	}
+	function onOptionMouseenter(option) {
+		optionCollection.activate(option);
+	}
+	function onRootMousedown(event) {
+		if (selection.kind !== "multiple" || options.disabled()) return;
+		if (!isNodeWithinElement(event.target, options.inputRef.value) && isInteractiveElement(event.target)) return;
+		open();
+		options.inputRef.value?.focus();
+	}
+	function onFocusout(event) {
+		if (isNodeWithinElement(event.relatedTarget, options.rootRef.value)) return;
+		close();
+	}
+	function onInput(event) {
+		if (options.disabled()) return;
+		const value = event.currentTarget.value;
+		searchValue.value = value;
+		isSearching.value = true;
+		options.onSearch(value);
+		if (!isOpen.value) isOpen.value = true;
+		optionCollection.activate("first");
+	}
+	function onInputFocus() {
+		open();
+	}
+	function onInputClick() {
+		open();
+	}
+	function selectHighlightedOption() {
+		const option = visibleOptions.value[optionCollection.activeIndex.value];
+		if (option) selectOption(option);
+	}
+	function onInputKeydown(event) {
+		if (options.disabled() || event.isComposing) return;
+		switch (event.key) {
+			case "Enter":
+				if (!isOpen.value || selection.kind === "multiple" && optionCollection.activeIndex.value < 0) return;
+				event.preventDefault();
+				selectHighlightedOption();
+				break;
+			case "ArrowDown":
+				event.preventDefault();
+				if (!isOpen.value) open();
+				else optionCollection.move(1);
+				break;
+			case "ArrowUp":
+				event.preventDefault();
+				if (!isOpen.value) {
+					open();
+					optionCollection.activate("last");
+				} else optionCollection.move(-1);
+				break;
+			case "Backspace":
+				if (selection.kind === "multiple" && searchValue.value === "") selection.removeLast();
+				break;
+			case "Escape":
+				if (!isOpen.value) return;
+				event.preventDefault();
+				close();
+				break;
+		}
+	}
+	watch(itemsSnapshot, () => {
+		if (!isOpen.value || optionCollection.activeIndex.value >= 0) return;
+		if (selection.kind === "multiple" || isSearching.value) optionCollection.activate("first");
+	});
+	if (selection.kind === "single") watch(selection.displayValue, (value) => {
+		if (!isSearching.value) setInputValue(value);
+	});
+	watch(options.disabled, (disabled) => {
+		if (disabled) close();
+	});
+	useClickOutside(options.rootRef, isOpen, () => close());
+	return {
+		actions: {
+			clearSelection,
+			focusInput,
+			resetAfterFormReset,
+			selectOption,
+			toggle
+		},
+		handlers: {
+			onFocusout,
+			onInput,
+			onInputClick,
+			onInputFocus,
+			onInputKeydown,
+			onOptionMouseenter,
+			onRootMousedown
+		},
+		ids: {
+			listbox: `${popupId}-viewport`,
+			popup: popupId
+		},
+		state: {
+			activeDescendantId: optionCollection.activeDescendantId,
+			canClear,
+			isOpen,
+			renderedOptions: optionCollection.options,
+			searchValue,
+			visibleOptions
+		}
+	};
+}
+//#endregion
+export { useEditableOptionList as t };