ropav 0.1.6 → 0.1.8

package/dist/multi-select.js

@@ -0,0 +1,481 @@
+import './multi-select.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 { t as check_default } from "./check.js";
+import { o as splitCompatibilityAttributes, t as composeEventHandlers } from "./attributes2.js";
+import { t as useControlState } from "./useControlState.js";
+import { t as resolveHTMLElementRef } from "./componentRef.js";
+import { t as useFloatingPosition } from "./useFloatingPosition.js";
+import { r as chevrons_up_down_default } from "./useFlatOptionCollection.js";
+import { t as scroll_area_default } from "./scroll-area.js";
+import { t as useEditableOptionList } from "./useEditableOptionList.js";
+import { i as useHiddenSelectChoiceTransaction, t as createMultipleNativeChoiceAdapter } from "./nativeChoice.js";
+import { VaporTransition, child, computed, createComponent, createFor, createIf, createSlot, createTemplateRefSetter, defineVaporComponent, extend, next, on, ref, renderEffect, setDynamicProps, setInsertionState, setProp, setTemplateRefBinding, setText, setValue, template, toDisplayString, txt, unref, useId, withModifiers } from "vue";
+//#region src/components/multi-select/multiSelectModel.ts
+function getMultiSelectSelectedOptions(options, values) {
+	return values.flatMap((value) => {
+		const option = options?.find((candidate) => candidate.value === value);
+		return option ? [option] : [];
+	});
+}
+function toggleMultiSelectValue(values, value, maxValues) {
+	if (values.includes(value)) return values.filter((candidate) => candidate !== value);
+	if (maxValues !== void 0 && values.length >= Math.max(0, maxValues)) return [...values];
+	return [...values, value];
+}
+//#endregion
+//#region src/components/multi-select/useMultiSelect.ts
+function useMultiSelectTransaction(props, emitUpdate, inputRef, onFormReset) {
+	const transaction = useHiddenSelectChoiceTransaction({
+		value: {
+			modelValue: () => props.modelValue,
+			defaultValue: () => [...props.defaultValue ?? []],
+			onChange: emitUpdate
+		},
+		native: {
+			adapter: createMultipleNativeChoiceAdapter(() => props.options),
+			className: "rp-multi-select__native",
+			focusVisible: () => inputRef.value?.focus(),
+			validationMessage: () => props.validationMessage
+		},
+		onFormReset
+	});
+	return {
+		nativeSelectRef: transaction.nativeSelectRef,
+		nativeSelectAttrs: transaction.nativeSelectAttrs,
+		requestValueUpdate: transaction.requestValueUpdate,
+		selectedValues: transaction.value
+	};
+}
+function useMultiSelect(props, callbacks) {
+	const rootRef = ref(null);
+	const inputRef = ref(null);
+	const dropdownRef = ref(null);
+	const generatedId = useId();
+	const multiSelectId = props.id ?? generatedId;
+	const transaction = useMultiSelectTransaction(props, callbacks.valueChange, inputRef, resetAfterFormReset);
+	const selectedValues = transaction.selectedValues;
+	const control = useControlState(props);
+	const selectedOptions = computed(() => getMultiSelectSelectedOptions(props.options, selectedValues.value));
+	function isSelected(option) {
+		return selectedValues.value.includes(option.value);
+	}
+	function isAtLimit() {
+		return props.maxValues !== void 0 && selectedValues.value.length >= Math.max(0, props.maxValues);
+	}
+	function isOptionDisabled(option) {
+		return Boolean(option.disabled || isAtLimit() && !isSelected(option));
+	}
+	const optionList = useEditableOptionList({
+		baseId: multiSelectId,
+		clearable: () => Boolean(props.clearable),
+		disabled: () => control.disabled,
+		filter: () => props.filter,
+		getKey: (option) => option.value,
+		inputRef,
+		isDisabled: isOptionDisabled,
+		items: () => props.options,
+		onSearch: callbacks.search,
+		rootRef,
+		selection: {
+			kind: "multiple",
+			clear: () => transaction.requestValueUpdate([]),
+			hasSelection: () => selectedValues.value.length > 0,
+			isSelected,
+			removeLast() {
+				const option = selectedOptions.value.at(-1);
+				if (!option) return;
+				transaction.requestValueUpdate(selectedValues.value.filter((value) => value !== option.value));
+			},
+			select(option) {
+				transaction.requestValueUpdate(toggleMultiSelectValue(selectedValues.value, option.value, props.maxValues));
+			}
+		}
+	});
+	const { activeDescendantId, canClear, isOpen, renderedOptions, searchValue, visibleOptions } = optionList.state;
+	const { listbox: listboxId, popup: popupId } = optionList.ids;
+	const floating = useFloatingPosition({
+		reference: rootRef,
+		floating: dropdownRef,
+		open: isOpen,
+		placement: "bottom-start"
+	});
+	const placementSide = computed(() => floating.actualPlacement.value.split("-")[0]);
+	const rootClass = computed(() => bem("rp-multi-select", {
+		open: isOpen.value,
+		[`size-${props.size}`]: Boolean(props.size),
+		[`radius-${props.radius}`]: Boolean(props.radius),
+		disabled: control.disabled,
+		invalid: control.invalid
+	}));
+	function setDropdownElement(elementRef) {
+		resolveHTMLElementRef(elementRef, popupId, (resolved) => {
+			dropdownRef.value = resolved;
+		});
+	}
+	function resetAfterFormReset() {
+		optionList.actions.resetAfterFormReset();
+	}
+	function removeOption(option) {
+		if (control.disabled || !isSelected(option)) return;
+		transaction.requestValueUpdate(selectedValues.value.filter((value) => value !== option.value));
+		optionList.actions.focusInput();
+	}
+	return {
+		templateRefs: {
+			root: rootRef,
+			input: inputRef,
+			native: transaction.nativeSelectRef
+		},
+		nativeSelectAttrs: transaction.nativeSelectAttrs,
+		isOpen,
+		popupId,
+		listboxId,
+		control,
+		visibleOptions,
+		renderedOptions,
+		selectedOptions,
+		activeDescendantId,
+		rootClass,
+		floatingStyle: floating.floatingStyle,
+		actualPlacement: floating.actualPlacement,
+		placementSide,
+		searchValue,
+		canClear,
+		setDropdownElement,
+		toggle: optionList.actions.toggle,
+		selectOption: optionList.actions.selectOption,
+		removeOption,
+		clearSelection: optionList.actions.clearSelection,
+		onOptionMouseenter: optionList.handlers.onOptionMouseenter,
+		onRootMousedown: optionList.handlers.onRootMousedown,
+		onFocusout: optionList.handlers.onFocusout,
+		onInput: optionList.handlers.onInput,
+		onInputFocus: optionList.handlers.onInputFocus,
+		onInputClick: optionList.handlers.onInputClick,
+		onInputKeydown: optionList.handlers.onInputKeydown
+	};
+}
+//#endregion
+//#region src/components/multi-select/multi-select.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<option data-v-b38d027f> ");
+var t1 = template(" ");
+var t2 = template("<span data-v-b38d027f><span data-v-b38d027f></span><button data-v-b38d027f></button>");
+var t3 = template("<button data-v-b38d027f></button>");
+var t4 = template("No options", 2);
+var t5 = template("<div data-v-b38d027f>");
+var t6 = template("<div data-v-b38d027f><select data-v-b38d027f></select><div data-v-b38d027f><input data-v-b38d027f></div><span data-v-b38d027f><button data-v-b38d027f>", 1);
+//#endregion
+//#region src/components/multi-select/multi-select.vue
+var multi_select_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpMultiSelect",
+	inheritAttrs: false,
+	__name: "multi-select",
+	props: {
+		id: {},
+		name: {},
+		form: {},
+		modelValue: { default: void 0 },
+		defaultValue: { default: () => [] },
+		options: { default: () => [] },
+		filter: {
+			type: [Function, Boolean],
+			default: void 0
+		},
+		maxValues: { default: void 0 },
+		size: {},
+		radius: {},
+		placeholder: { default: "Select..." },
+		clearable: {
+			type: Boolean,
+			default: false
+		},
+		clearLabel: { default: "Clear selection" },
+		removeLabel: { default: "Remove" },
+		toggleLabel: { default: "Toggle options" },
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		required: {
+			type: Boolean,
+			default: void 0
+		},
+		invalid: {
+			type: Boolean,
+			default: void 0
+		},
+		ariaLabel: {},
+		describedby: {},
+		labelledby: {},
+		inputAttrs: {},
+		validationMessage: {},
+		classNames: {},
+		styles: {}
+	},
+	emits: ["update:modelValue", "search"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { templateRefs, nativeSelectAttrs, isOpen, popupId, listboxId, control, visibleOptions, renderedOptions, selectedOptions, activeDescendantId, rootClass, floatingStyle, actualPlacement, placementSide, searchValue, canClear, setDropdownElement, toggle, selectOption, removeOption, clearSelection, onOptionMouseenter, onRootMousedown, onFocusout, onInput, onInputFocus, onInputClick, onInputKeydown } = useMultiSelect(props, {
+			valueChange: (value) => emit("update:modelValue", value),
+			search: (value) => emit("search", value)
+		});
+		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
+		const rootAttrs = computed(() => getRootAttrs({
+			class: rootClass.value,
+			onMousedown: onRootMousedown,
+			onFocusout,
+			"data-state": isOpen.value ? "open" : "closed",
+			"data-disabled": toPresenceAttribute(control.disabled),
+			"data-invalid": toPresenceAttribute(control.invalid)
+		}));
+		const contentAttrs = computed(() => ({
+			...getPartAttrs("content", {
+				class: "rp-multi-select__dropdown",
+				style: floatingStyle.value
+			}),
+			"data-placement": actualPlacement.value,
+			"data-side": placementSide.value
+		}));
+		const listboxAttrs = computed(() => ({
+			role: "listbox",
+			tabindex: -1,
+			"aria-multiselectable": true
+		}));
+		const visibleInputAttrs = computed(() => {
+			const attrs = props.inputAttrs ?? {};
+			const { compatibilityClass, compatibilityStyle, forwardedAttributes } = splitCompatibilityAttributes(attrs);
+			return {
+				...forwardedAttributes,
+				...getPartAttrs("input", {
+					class: "rp-multi-select__input",
+					compatibilityClass,
+					compatibilityStyle
+				}),
+				id: control.id,
+				name: void 0,
+				form: "",
+				type: "text",
+				value: searchValue.value,
+				placeholder: selectedOptions.value.length === 0 ? props.placeholder : void 0,
+				disabled: control.disabled || void 0,
+				required: void 0,
+				autocomplete: forwardedAttributes.autocomplete ?? "off",
+				role: "combobox",
+				"aria-autocomplete": "list",
+				"aria-expanded": isOpen.value,
+				"aria-haspopup": "listbox",
+				"aria-activedescendant": activeDescendantId.value,
+				"aria-controls": listboxId,
+				"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-state": isOpen.value ? "open" : "closed",
+				"data-disabled": toPresenceAttribute(control.disabled),
+				"data-invalid": toPresenceAttribute(control.invalid),
+				onInput: composeEventHandlers(onInput, attrs.onInput),
+				onFocus: composeEventHandlers(onInputFocus, attrs.onFocus),
+				onClick: composeEventHandlers(onInputClick, attrs.onClick),
+				onKeydown: composeEventHandlers(onInputKeydown, attrs.onKeydown)
+			};
+		});
+		__expose({
+			nativeElement: templateRefs.native,
+			inputElement: templateRefs.input,
+			focus: () => templateRefs.input.value?.focus()
+		});
+		const _setTemplateRef = createTemplateRefSetter();
+		const n41 = t6();
+		const n3 = child(n41);
+		const n14 = next(n3, 1);
+		const n13 = child(n14, 1);
+		const n21 = next(n14, 2);
+		const n20 = child(n21, 1);
+		renderEffect(() => {
+			const _control = unref(control);
+			setDynamicProps(n41, [rootAttrs.value]);
+			setDynamicProps(n3, [unref(nativeSelectAttrs), {
+				name: __props.name,
+				form: _control.form,
+				disabled: _control.disabled || void 0,
+				required: _control.required || void 0,
+				multiple: "",
+				tabindex: "-1",
+				"aria-hidden": "true"
+			}]);
+		});
+		setInsertionState(n3, null, 0);
+		createFor(() => __props.options, (_for_item0) => {
+			const n2 = t0();
+			const x2 = txt(n2);
+			renderEffect(() => {
+				const _option = _for_item0.value;
+				setValue(n2, String(_option.value));
+				setProp(n2, "disabled", _option.disabled || void 0);
+				setText(x2, toDisplayString(_option.label));
+			});
+			return n2;
+		}, (option) => option.value, 9);
+		renderEffect(() => {
+			_setTemplateRef(n3, unref(templateRefs).native);
+			setDynamicProps(n14, [unref(getPartAttrs)("pills", { class: "rp-multi-select__pills" })]);
+		});
+		setInsertionState(n14, 0);
+		createFor(() => unref(selectedOptions), (_for_item0) => {
+			const n12 = t2();
+			const n9 = child(n12);
+			const n11 = next(n9, 1);
+			renderEffect(() => {
+				const _getPartAttrs = unref(getPartAttrs);
+				setDynamicProps(n12, [_getPartAttrs("pill", { class: "rp-multi-select__pill" })]);
+				setDynamicProps(n9, [_getPartAttrs("pillLabel", { class: "rp-multi-select__pill-label" })]);
+			});
+			setInsertionState(n9, null, 0);
+			createSlot("pill", { option: () => _for_item0.value }, () => {
+				const n8 = t1();
+				renderEffect(() => setText(n8, toDisplayString(_for_item0.value.label)));
+				return n8;
+			}, 1);
+			renderEffect(() => setDynamicProps(n11, [
+				{ type: "button" },
+				unref(getPartAttrs)("pillRemove", { class: "rp-multi-select__pill-remove" }),
+				{
+					"aria-label": `${__props.removeLabel} ${_for_item0.value.label}`,
+					disabled: unref(control).disabled || void 0,
+					tabindex: "-1"
+				}
+			]));
+			setInsertionState(n11, null, 0);
+			createComponent(unref(x_default));
+			on(n11, "mousedown", withModifiers(() => {}, ["prevent"]));
+			on(n11, "click", withModifiers(() => unref(removeOption)(_for_item0.value), ["stop"]));
+			return n12;
+		}, (option) => option.value, 8);
+		renderEffect(() => {
+			setDynamicProps(n13, [visibleInputAttrs.value]);
+			_setTemplateRef(n13, unref(templateRefs).input);
+			setDynamicProps(n21, [unref(getPartAttrs)("indicator", { class: "rp-multi-select__indicator" })]);
+		});
+		setInsertionState(n21, 0);
+		createIf(() => unref(canClear), () => {
+			const n18 = t3();
+			renderEffect(() => setDynamicProps(n18, [
+				{ type: "button" },
+				unref(getPartAttrs)("clear", { class: "rp-multi-select__clear" }),
+				{
+					"aria-label": __props.clearLabel,
+					tabindex: "-1"
+				}
+			]));
+			setInsertionState(n18, null, 0);
+			createComponent(unref(x_default));
+			on(n18, "mousedown", withModifiers(() => {}, ["prevent"]));
+			on(n18, "click", withModifiers((e) => unref(clearSelection)(e), ["stop"]));
+			return n18;
+		});
+		renderEffect(() => setDynamicProps(n20, [
+			{ type: "button" },
+			unref(getPartAttrs)("toggle", { class: "rp-multi-select__toggle" }),
+			{
+				"aria-label": __props.toggleLabel,
+				"aria-expanded": unref(isOpen),
+				disabled: unref(control).disabled || void 0,
+				tabindex: "-1"
+			}
+		]));
+		setInsertionState(n20, null, 0);
+		createComponent(unref(chevrons_up_down_default));
+		on(n20, "mousedown", withModifiers(() => {}, ["prevent"]));
+		on(n20, "click", withModifiers((e) => unref(toggle)(e), ["stop"]));
+		setInsertionState(n41, null, 3);
+		createComponent(VaporTransition, { name: "rp-multi-select-dropdown" }, extend(() => {
+			return createIf(() => unref(isOpen), () => {
+				const n39 = createComponent(scroll_area_default, { $: [() => contentAttrs.value, {
+					id: () => unref(popupId),
+					embedded: "",
+					type: "auto",
+					scrollbars: "y",
+					"viewport-attrs": () => listboxAttrs.value,
+					"data-state": () => unref(isOpen) ? "open" : "closed"
+				}] }, extend(() => {
+					return [createIf(() => unref(visibleOptions).length === 0, () => {
+						const n29 = t5();
+						renderEffect(() => setDynamicProps(n29, [unref(getPartAttrs)("empty", { class: "rp-multi-select__empty" })]));
+						setInsertionState(n29, null, 0);
+						createSlot("empty", { searchValue: () => unref(searchValue) }, () => {
+							return t4();
+						}, 1);
+						return n29;
+					}, null, 129), createFor(() => unref(renderedOptions), (_for_item0) => {
+						const n38 = t5();
+						renderEffect(() => {
+							const _optionState = _for_item0.value;
+							const _optionState_selected = _optionState.selected;
+							const _optionState_disabled = _optionState.disabled;
+							setDynamicProps(n38, [{
+								id: _optionState.id,
+								role: "option",
+								"aria-selected": _optionState_selected,
+								"aria-disabled": _optionState_disabled || void 0,
+								"data-selected": unref(toPresenceAttribute)(_optionState.selected),
+								"data-highlighted": unref(toPresenceAttribute)(_optionState.active),
+								"data-disabled": unref(toPresenceAttribute)(_optionState.disabled)
+							}, unref(getPartAttrs)("option", { class: ["rp-multi-select__option", {
+								"rp-multi-select__option--selected": _optionState_selected,
+								"rp-multi-select__option--highlighted": _optionState.active,
+								"rp-multi-select__option--disabled": _optionState_disabled
+							}] })]);
+						});
+						setInsertionState(n38, null, 0);
+						createSlot("option", {
+							option: () => _for_item0.value.option,
+							selected: () => _for_item0.value.selected,
+							highlighted: () => _for_item0.value.active
+						}, () => {
+							const n34 = t1();
+							renderEffect(() => setText(n34, toDisplayString(_for_item0.value.option.label)));
+							return n34;
+						}, 1);
+						setInsertionState(n38, null, 1);
+						createIf(() => _for_item0.value.selected, () => {
+							return createComponent(unref(check_default), { "aria-hidden": "true" });
+						});
+						on(n38, "mousedown", withModifiers(() => {}, ["prevent"]));
+						on(n38, "click", () => unref(selectOption)(_for_item0.value.option));
+						on(n38, "mouseenter", () => unref(onOptionMouseenter)(_for_item0.value.option));
+						return n38;
+					}, (optionState) => optionState.option.value, 40)];
+				}, { _: 8 }));
+				setTemplateRefBinding(n39, () => setDropdownElement, _setTemplateRef, void 0, "setDropdownElement");
+				return n39;
+			}, null, 129);
+		}, { _: 8 }));
+		setTemplateRefBinding(n41, () => unref(templateRefs).root);
+		return n41;
+	}
+}), [["__scopeId", "data-v-b38d027f"]]);
+//#endregion
+//#region src/components/multi-select/types.ts
+var multiSelectParts = [
+	"root",
+	"pills",
+	"pill",
+	"pillLabel",
+	"pillRemove",
+	"input",
+	"indicator",
+	"clear",
+	"toggle",
+	"content",
+	"option",
+	"empty"
+];
+//#endregion
+export { multi_select_default as n, multiSelectParts as t };

package/dist/nativeChoice.js

@@ -0,0 +1,169 @@
+import { o as splitCompatibilityAttributes, t as composeEventHandlers } from "./attributes2.js";
+import { t as useNativeChoiceTransaction } from "./useNativeChoiceTransaction.js";
+import { computed, ref } from "vue";
+//#region src/internal/composables/useHiddenSelectChoiceTransaction.ts
+function dispatchNativeSelectEvent(select, type) {
+	const EventConstructor = select.ownerDocument.defaultView?.Event ?? Event;
+	select.dispatchEvent(new EventConstructor(type, {
+		bubbles: true,
+		cancelable: true
+	}));
+}
+function useHiddenSelectChoiceTransaction(options) {
+	const nativeSelectRef = ref(null);
+	const initialValue = options.value.defaultValue();
+	let handlingNativeInput = false;
+	let ignoreNativeInput = false;
+	function syncNativeValue(value, defaultValue) {
+		const select = nativeSelectRef.value;
+		if (select) options.native.adapter.sync(select, value, defaultValue);
+	}
+	const adapter = {
+		commitValue(value, defaultValue, applyValue) {
+			const select = nativeSelectRef.value;
+			if (!select || handlingNativeInput) {
+				applyValue();
+				return;
+			}
+			options.native.adapter.commit(select, value, defaultValue, applyValue);
+			ignoreNativeInput = true;
+			try {
+				dispatchNativeSelectEvent(select, "input");
+				dispatchNativeSelectEvent(select, "change");
+			} finally {
+				ignoreNativeInput = false;
+			}
+		},
+		controls: () => [nativeSelectRef.value],
+		readResetValue([select], defaultValue) {
+			return options.native.adapter.resolveResetValue(select, defaultValue);
+		},
+		syncValue: syncNativeValue,
+		validationMessage: options.native.validationMessage
+	};
+	const transaction = useNativeChoiceTransaction({
+		value: {
+			...options.value,
+			defaultValue: () => initialValue
+		},
+		adapter,
+		onFormReset: options.onFormReset
+	});
+	function onNativeInput(event) {
+		if (ignoreNativeInput) return;
+		handlingNativeInput = true;
+		try {
+			transaction.requestValueUpdate(options.native.adapter.read(event.currentTarget));
+		} finally {
+			handlingNativeInput = false;
+		}
+	}
+	function onNativeInvalid(event) {
+		event.preventDefault();
+		options.native.focusVisible();
+	}
+	const nativeSelectAttrs = computed(() => {
+		const compatibilityAttrs = options.native.attributes?.() ?? {};
+		const { compatibilityClass, compatibilityStyle, forwardedAttributes } = splitCompatibilityAttributes(compatibilityAttrs);
+		return {
+			...forwardedAttributes,
+			class: [options.native.className, compatibilityClass],
+			style: compatibilityStyle,
+			onInput: composeEventHandlers(onNativeInput, compatibilityAttrs.onInput),
+			onChange: compatibilityAttrs.onChange,
+			onInvalid: composeEventHandlers(onNativeInvalid, compatibilityAttrs.onInvalid)
+		};
+	});
+	return {
+		isControlled: transaction.isControlled,
+		nativeSelectAttrs,
+		nativeSelectRef,
+		requestValueUpdate: transaction.requestValueUpdate,
+		value: transaction.value
+	};
+}
+//#endregion
+//#region src/utils/dom/nativeChoice.ts
+function createSingleNativeChoiceAdapter(options) {
+	const placeholderOffset = 1;
+	function read(select) {
+		const optionIndex = select.selectedIndex - placeholderOffset;
+		if (optionIndex < 0) return options.emptyValue;
+		return options.options()?.[optionIndex]?.value ?? options.emptyValue;
+	}
+	function sync(select, value, defaultValue) {
+		const choices = options.options();
+		const selectedIndex = choices?.findIndex((choice) => choice.value === value) ?? -1;
+		const defaultIndex = choices?.findIndex((choice) => choice.value === defaultValue) ?? -1;
+		for (const [index, option] of [...select.options].entries()) option.defaultSelected = index === defaultIndex + placeholderOffset;
+		select.selectedIndex = selectedIndex + placeholderOffset;
+	}
+	return {
+		commit(select, value, defaultValue, applyValue) {
+			sync(select, value, defaultValue);
+			applyValue();
+		},
+		read,
+		resolveResetValue: read,
+		sync
+	};
+}
+function createMultipleNativeChoiceAdapter(options) {
+	function sync(select, values, defaultValues) {
+		const choices = options();
+		for (const [index, nativeOption] of [...select.options].entries()) {
+			const choice = choices?.[index];
+			nativeOption.defaultSelected = Boolean(choice && defaultValues.includes(choice.value));
+			nativeOption.selected = Boolean(choice && values.includes(choice.value));
+		}
+	}
+	return {
+		commit(select, values, defaultValues, applyValue) {
+			applyValue();
+			sync(select, values, defaultValues);
+		},
+		read(select) {
+			const choices = options();
+			return [...select.options].flatMap((nativeOption, index) => {
+				const choice = choices?.[index];
+				return nativeOption.selected && choice ? [choice.value] : [];
+			});
+		},
+		resolveResetValue(_select, initialValue) {
+			return initialValue;
+		},
+		sync
+	};
+}
+function syncStringListNativeChoice(select, values, defaultValues) {
+	const defaultCounts = /* @__PURE__ */ new Map();
+	for (const value of defaultValues) defaultCounts.set(value, (defaultCounts.get(value) ?? 0) + 1);
+	const options = values.map((value) => {
+		const option = select.ownerDocument.createElement("option");
+		const defaultCount = defaultCounts.get(value) ?? 0;
+		option.value = value;
+		option.textContent = value;
+		option.defaultSelected = defaultCount > 0;
+		option.selected = true;
+		if (defaultCount > 0) defaultCounts.set(value, defaultCount - 1);
+		return option;
+	});
+	select.replaceChildren(...options);
+}
+function createStringListNativeChoiceAdapter() {
+	return {
+		commit(select, values, defaultValues, applyValue) {
+			applyValue();
+			syncStringListNativeChoice(select, values, defaultValues);
+		},
+		read(select) {
+			return [...select.selectedOptions].map((option) => option.value);
+		},
+		resolveResetValue(_select, initialValue) {
+			return initialValue;
+		},
+		sync: syncStringListNativeChoice
+	};
+}
+//#endregion
+export { useHiddenSelectChoiceTransaction as i, createSingleNativeChoiceAdapter as n, createStringListNativeChoiceAdapter as r, createMultipleNativeChoiceAdapter as t };