@r2digisolutions/ui 0.24.1 → 0.24.2

package/dist/components/container/DataTable/components/ContextMenu.svelte

@@ -1,8 +1,33 @@
 <script lang="ts">
 	import type { TContextMenuEntry } from '../core/types.js';
-	import { portal } from '../utils/portal.js';
-	import { clampToViewport } from '../utils/position.js';
 
+	// --- Action portal (interna al componente) ---
+	function portal(node: HTMLElement, target: HTMLElement | null = null) {
+		const tgt = target ?? document.body;
+		const placeholder = document.createComment('portal-placeholder');
+		node.parentNode?.insertBefore(placeholder, node);
+		tgt.appendChild(node);
+		return {
+			destroy() {
+				node.remove();
+				placeholder.parentNode?.insertBefore(node, placeholder);
+				placeholder.remove();
+			}
+		};
+	}
+
+	// --- Util para clamping a viewport (interna) ---
+	function clampToViewport(x: number, y: number, menuW: number, menuH: number, padding = 8) {
+		const vw = document.documentElement.clientWidth;
+		const vh = document.documentElement.clientHeight;
+		let nx = x;
+		let ny = y;
+		if (nx + menuW + padding > vw) nx = Math.max(padding, vw - menuW - padding);
+		if (ny + menuH + padding > vh) ny = Math.max(padding, vh - menuH - padding);
+		return { x: nx, y: ny };
+	}
+
+	// --- Props ---
 	type Props = {
 		items?: TContextMenuEntry[];
 		x?: number;
@@ -11,7 +36,6 @@
 		title?: string;
 		searchable?: boolean;
 		context?: any;
-		// por si algún día quieres desactivar el portal:
 		portalTarget?: HTMLElement | null;
 	};
 	let {
@@ -25,15 +49,17 @@
 		portalTarget = null
 	}: Props = $props();
 
+	// --- Estado interno ---
 	let stack = $state<{ label: string; items: TContextMenuEntry[] }[]>([]);
 	let q = $state('');
-
 	const current = $derived(stack.length ? stack[stack.length - 1] : { label: title, items });
 
 	function close() {
 		open = false;
 		stack = [];
 		q = '';
+		// opcional si quieres limpiar coords:
+		// x = 0; y = 0;
 	}
 
 	function hasChildren(it: TContextMenuEntry) {
@@ -66,6 +92,7 @@
 		const query = q.trim().toLowerCase();
 		let arr = query ? list.filter((it) => matches(it, query)) : list.slice();
 
+		// limpiar divisores consecutivos y extremos
 		const out: TContextMenuEntry[] = [];
 		let prevDiv = false;
 		for (const it of arr) {
@@ -98,6 +125,10 @@
 		}
 	}
 
+	// --- Ref al elemento del menú para detectar click-fuera ---
+	let menuEl: HTMLDivElement | null = $state(null);
+
+	// Teclado (Escape / Backspace)
 	$effect(() => {
 		if (!open) return;
 		const handler = (e: KeyboardEvent) => onKey(e);
@@ -105,17 +136,43 @@
 		return () => document.removeEventListener('keydown', handler);
 	});
 
-	// --- CLAMP dinámico al abrir o al cambiar x/y ---
-	let menuEl: HTMLDivElement | null = $state(null);
+	// Cierres robustos: click-fuera en capture, scroll/resize, y bloqueo de menú nativo
+	$effect(() => {
+		if (!open) return;
+
+		const onPointerDownCapture = (ev: PointerEvent) => {
+			if (!menuEl) return;
+			if (!menuEl.contains(ev.target as Node)) {
+				close();
+			}
+		};
+
+		const onNativeCtx = (ev: MouseEvent) => {
+			ev.preventDefault();
+		};
+
+		const onScrollOrResize = () => close();
+
+		document.addEventListener('pointerdown', onPointerDownCapture, true);
+		document.addEventListener('contextmenu', onNativeCtx);
+		window.addEventListener('scroll', onScrollOrResize, true);
+		window.addEventListener('resize', onScrollOrResize, true);
+
+		return () => {
+			document.removeEventListener('pointerdown', onPointerDownCapture, true);
+			document.removeEventListener('contextmenu', onNativeCtx);
+			window.removeEventListener('scroll', onScrollOrResize, true);
+			window.removeEventListener('resize', onScrollOrResize, true);
+		};
+	});
 
+	// Clamp de posición tras abrir o cambiar coords
 	$effect(() => {
 		if (!open || !menuEl) return;
-		// siguiente frame para medir dimensiones reales
 		requestAnimationFrame(() => {
 			if (!menuEl) return;
 			const rect = menuEl.getBoundingClientRect();
 			const { x: nx, y: ny } = clampToViewport(x, y, rect.width, rect.height, 8);
-			// solo si cambian, re-ubica
 			if (nx !== x || ny !== y) {
 				x = nx;
 				y = ny;
@@ -125,7 +182,7 @@
 </script>
 
 {#if open}
-	<!-- BACKDROP: va al body por el portal también -->
+	<!-- BACKDROP (portaleado al body) -->
 	<div
 		use:portal={portalTarget}
 		role="dialog"
@@ -137,7 +194,7 @@
 		style="pointer-events:auto"
 	/>
 
-	<!-- MENU: fijado al viewport y portaleado al body -->
+	<!-- MENÚ (portaleado al body) -->
 	<div
 		bind:this={menuEl}
 		use:portal={portalTarget}
@@ -161,10 +218,8 @@
 						stroke="currentColor"
 						stroke-width="2"
 						stroke-linecap="round"
-						stroke-linejoin="round"
+						stroke-linejoin="round"><polyline points="15 18 9 12 15 6" /></svg
 					>
-						<polyline points="15 18 9 12 15 6" />
-					</svg>
 				</button>
 			{/if}
 			<div class="min-w-0 flex-1 truncate px-1 text-xs font-medium opacity-70">
@@ -211,10 +266,8 @@
 									stroke="currentColor"
 									stroke-width="2"
 									stroke-linecap="round"
-									stroke-linejoin="round"
+									stroke-linejoin="round"><polyline points="9 18 15 12 9 6" /></svg
 								>
-									<polyline points="9 18 15 12 9 6" />
-								</svg>
 							{/if}
 						</span>
 					</button>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@r2digisolutions/ui",
-	"version": "0.24.1",
+	"version": "0.24.2",
 	"private": false,
 	"packageManager": "bun@1.2.23",
 	"publishConfig": {