ropav 0.1.7 → 0.1.9

package/dist/dialog.js

@@ -55,7 +55,6 @@ function useDialogContentInteractions(root, props, events) {
 		if (!content) return null;
 		return [content, ...root.layer.focusBranches.value];
 	});
-	let listenerDocument = null;
 	function resolveInitialFocus() {
 		const initialFocus = props.initialFocus;
 		const resolved = isRef(initialFocus) ? initialFocus.value : initialFocus;
@@ -76,7 +75,7 @@ function useDialogContentInteractions(root, props, events) {
 		resolveHTMLElementRef(value, id.value, (element) => root.setContent(element, id.value));
 	}
 	function onDocumentKeydown(event) {
-		if (event.key !== "Escape" || event.defaultPrevented || !root.closeOnEscape.value || !root.layer.isTopLayer()) return;
+		if (event.defaultPrevented || !root.closeOnEscape.value) return;
 		const customEvent = createCancelableCustomEvent("dialog-escape-key-down", { originalEvent: event }, event);
 		events.escapeKeyDown(customEvent);
 		if (customEvent.defaultPrevented) return;
@@ -84,39 +83,29 @@ function useDialogContentInteractions(root, props, events) {
 		root.close("escape");
 	}
 	function onDocumentPointerdown(event) {
-		if (event.defaultPrevented || !root.closeOnOutsideClick.value || !root.layer.isTopLayer() || root.layer.isInside(event)) return;
+		if (event.defaultPrevented || !root.closeOnOutsideClick.value) return;
 		const customEvent = createCancelableCustomEvent("dialog-pointer-down-outside", { originalEvent: event }, event);
 		events.pointerDownOutside(customEvent);
 		events.interactOutside(customEvent);
 		if (!customEvent.defaultPrevented) root.close("outside");
 	}
-	function removeDocumentListeners() {
-		if (!listenerDocument) return;
-		listenerDocument.removeEventListener("keydown", onDocumentKeydown);
-		listenerDocument.removeEventListener("pointerdown", onDocumentPointerdown, true);
-		listenerDocument = null;
-	}
-	function addDocumentListeners(document) {
-		if (listenerDocument === document) return;
-		removeDocumentListeners();
-		document.addEventListener("keydown", onDocumentKeydown);
-		document.addEventListener("pointerdown", onDocumentPointerdown, true);
-		listenerDocument = document;
-	}
+	const disconnectLayerInteraction = root.layer.connectInteraction({
+		inside: () => [root.triggerRef.value],
+		escapeKeyDown: onDocumentKeydown,
+		pointerDownOutside: onDocumentPointerdown
+	});
 	watch([
 		root.isOpen,
 		root.modal,
 		root.contentRef
-	], ([open, modal], _previous, onCleanup) => {
+	], ([open, modal]) => {
 		const content = root.contentRef.value;
 		if (!open || !content) {
 			focusTrap.deactivate({ returnFocus: false });
 			return;
 		}
-		addDocumentListeners(content.ownerDocument);
 		if (modal) focusTrap.activate();
 		else focusTrap.deactivate({ returnFocus: false });
-		onCleanup(removeDocumentListeners);
 	}, {
 		flush: "post",
 		immediate: true
@@ -125,7 +114,7 @@ function useDialogContentInteractions(root, props, events) {
 		root.setContent(root.contentRef.value, nextId);
 	}, { immediate: true });
 	onBeforeUnmount(() => {
-		removeDocumentListeners();
+		disconnectLayerInteraction();
 		focusTrap.deactivate({ returnFocus: false });
 		root.setContent(null, id.value);
 	});

package/dist/direction.js

@@ -0,0 +1,6 @@
+//#region src/utils/dom/direction.ts
+function getElementDirection(element) {
+	return element.ownerDocument.defaultView?.getComputedStyle(element).direction === "rtl" ? "rtl" : "ltr";
+}
+//#endregion
+export { getElementDirection as t };

package/dist/dropdown-menu.css

@@ -65,15 +65,33 @@
     bottom: auto;
     left: 0;
 }
+.rp-dropdown-menu__arrow {
+    background-color: inherit;
+    border: inherit;
+    rotate: 45deg;
+}
+.rp-dropdown-menu__arrow[data-side=top] {
+    border-top-color: transparent;
+    border-left-color: transparent;
+}
+.rp-dropdown-menu__arrow[data-side=right] {
+    border-top-color: transparent;
+    border-right-color: transparent;
+}
+.rp-dropdown-menu__arrow[data-side=bottom] {
+    border-right-color: transparent;
+    border-bottom-color: transparent;
+}
+.rp-dropdown-menu__arrow[data-side=left] {
+    border-bottom-color: transparent;
+    border-left-color: transparent;
+}
 .rp-dropdown-menu__arrow {
     position: absolute;
     box-sizing: border-box;
     width: var(--_rp-dropdown-menu-arrow-size);
     height: var(--_rp-dropdown-menu-arrow-size);
     pointer-events: none;
-    background-color: inherit;
-    border: inherit;
-    rotate: 45deg;
 }
 .rp-dropdown-menu__arrow[data-side=top] {
     bottom: calc(-1 * var(--_rp-dropdown-menu-arrow-size) / 2);