ropav 0.1.5 → 0.1.6

package/dist/select.js

@@ -1,9 +1,9 @@
 import './select.css';
-import { t as x_default } from "./x.js";
-import { t as bem } from "./bem.js";
+import { t as useControllableValue } from "./useControllableValue.js";
 import { n as useStylesApi, t as presence } from "./styles-api.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 useControllableValue } from "./useControllableValue.js";
+import { t as x_default } from "./x.js";
 import { i as useFormControl } from "./useFormControl.js";
 import { t as useControlState } from "./useControlState.js";
 import { n as getNextEnabledIndex, r as useTypeahead, t as getEnabledIndexes } from "./collectionNavigation.js";
@@ -19,29 +19,47 @@ var chevrons_up_down_default = markRaw(defineVaporComponent({
 	render
 }));
 //#endregion
-//#region src/composables/useClickOutside.ts
+//#region src/internal/composables/useClickOutside.ts
+function isEventInside(event, element) {
+	if (event.composedPath().includes(element)) return true;
+	const eventTarget = event.target;
+	const NodeConstructor = element.ownerDocument.defaultView?.Node;
+	return Boolean(eventTarget && NodeConstructor && eventTarget instanceof NodeConstructor && element.contains(eventTarget));
+}
 function useClickOutside(target, active, callback) {
-	let isListening = false;
+	const targets = Array.isArray(target) ? target : [target];
+	const listeningDocuments = /* @__PURE__ */ new Set();
 	let stopWatch;
-	function handler(e) {
-		if (!(Array.isArray(target) ? target : [target]).some((current) => current.value?.contains(e.target))) callback(e);
+	function handler(event) {
+		if (!targets.some((current) => {
+			const element = current.value;
+			return element ? isEventInside(event, element) : false;
+		})) callback(event);
 	}
-	function setListening(value) {
-		if (typeof document === "undefined" || value === isListening) return;
-		isListening = value;
-		if (value) document.addEventListener("click", handler, true);
-		else document.removeEventListener("click", handler, true);
+	function detachListeners() {
+		for (const document of listeningDocuments) document.removeEventListener("click", handler, true);
+		listeningDocuments.clear();
+	}
+	function syncListeners() {
+		detachListeners();
+		if (!active.value) return;
+		for (const current of targets) {
+			const document = current.value?.ownerDocument;
+			if (!document || listeningDocuments.has(document)) continue;
+			document.addEventListener("click", handler, true);
+			listeningDocuments.add(document);
+		}
 	}
 	onMounted(() => {
-		stopWatch = watch(active, setListening, { immediate: true });
+		stopWatch = watch([active, ...targets], syncListeners, { immediate: true });
 	});
 	onBeforeUnmount(() => {
 		stopWatch?.();
-		setListening(false);
+		detachListeners();
 	});
 }
 //#endregion
-//#region src/composables/useCollectionNavigation.ts
+//#region src/internal/composables/useCollectionNavigation.ts
 function useCollectionNavigation(options) {
 	const activeKey = shallowRef(null);
 	const isDisabled = options.isDisabled ?? (() => false);
@@ -118,7 +136,8 @@ function useSelect(props, emitUpdate, getValue = () => props.modelValue ?? null,
 	const selectRef = ref(null);
 	const isOpen = ref(false);
 	const selectId = useId();
-	const listboxId = `${selectId}-listbox`;
+	const popupId = `${selectId}-popup`;
+	const listboxId = `${popupId}-viewport`;
 	const control = useControlState(props);
 	const visibleOptions = computed(() => props.options ?? []);
 	const value = computed(getValue);
@@ -262,6 +281,7 @@ function useSelect(props, emitUpdate, getValue = () => props.modelValue ?? null,
 		triggerRef,
 		isOpen,
 		selectId,
+		popupId,
 		listboxId,
 		control,
 		visibleOptions,
@@ -376,12 +396,12 @@ function useSelectNativeControl(props, emitUpdate, triggerRef) {
 }
 //#endregion
 //#region src/components/select/select.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<option data-v-d7a0b110> ");
-var t1 = template("<button data-v-d7a0b110></button>");
+var t0 = template("<option data-v-7eb8ed79> ");
+var t1 = template("<button data-v-7eb8ed79></button>");
 var t2 = template("No options", 2);
-var t3 = template("<div data-v-d7a0b110>");
-var t4 = template("<div data-v-d7a0b110> ");
-var t5 = template("<div data-v-d7a0b110><select data-v-d7a0b110><option data-v-d7a0b110 value></option></select><div data-v-d7a0b110><span data-v-d7a0b110> </span><span data-v-d7a0b110><span data-v-d7a0b110 class=rp-select__arrow aria-hidden=true>", 1);
+var t3 = template("<div data-v-7eb8ed79>");
+var t4 = template("<div data-v-7eb8ed79> ");
+var t5 = template("<div data-v-7eb8ed79><select data-v-7eb8ed79><option data-v-7eb8ed79 value></option></select><div data-v-7eb8ed79><span data-v-7eb8ed79> </span><span data-v-7eb8ed79><span data-v-7eb8ed79 class=rp-select__arrow aria-hidden=true>", 1);
 delegateEvents("mousedown", "click", "keydown");
 //#endregion
 //#region src/components/select/select.vue
@@ -430,7 +450,7 @@ var select_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		const emit = __emit;
 		const triggerRef = ref(null);
 		const { nativeSelectRef, selectedValue, nativeInputAttrs, requestValueUpdate } = useSelectNativeControl(props, (value) => emit("update:modelValue", value), triggerRef);
-		const { selectRef, isOpen, selectId, listboxId, control, visibleOptions, focusedIndex, activeDescendantId, rootClass, hasValue, displayLabel, canClear, toggle, selectOption, clearSelection, onOptionMouseenter, onFocusout, onTriggerKeydown } = useSelect(props, requestValueUpdate, () => selectedValue.value, triggerRef);
+		const { selectRef, isOpen, selectId, popupId, listboxId, control, visibleOptions, focusedIndex, activeDescendantId, rootClass, hasValue, displayLabel, canClear, toggle, selectOption, clearSelection, onOptionMouseenter, onFocusout, onTriggerKeydown } = useSelect(props, requestValueUpdate, () => selectedValue.value, triggerRef);
 		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
 		const rootAttrs = computed(() => getRootAttrs({
 			class: rootClass.value,
@@ -533,12 +553,14 @@ var select_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		createComponent(VaporTransition, { name: "rp-select-dropdown" }, extend(() => {
 			return createIf(() => unref(isOpen), () => {
 				return createComponent(scroll_area_default, { $: [() => unref(getPartAttrs)("content", { class: "rp-select__dropdown" }), {
-					role: "listbox",
-					id: () => unref(listboxId),
+					id: () => unref(popupId),
 					embedded: "",
 					type: "auto",
 					scrollbars: "y",
-					"viewport-attrs": () => ({ tabindex: -1 }),
+					"viewport-attrs": () => ({
+						role: "listbox",
+						tabindex: -1
+					}),
 					"data-state": () => unref(isOpen) ? "open" : "closed"
 				}] }, extend(() => {
 					return [createIf(() => unref(visibleOptions).length === 0, () => {
@@ -585,7 +607,7 @@ var select_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		_setTemplateRef(n26, selectRef, null, "selectRef");
 		return n26;
 	}
-}), [["__scopeId", "data-v-d7a0b110"]]);
+}), [["__scopeId", "data-v-7eb8ed79"]]);
 //#endregion
 //#region src/components/select/types.ts
 var selectParts = [