@r2digisolutions/ui 0.24.2 → 0.24.3

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

@@ -71,7 +71,7 @@
 		manager.setReservedWidth(reserved);
 	});
 
-	// reflow ancho
+	// Reflow ancho
 	$effect(() => {
 		if (!container) return;
 		const ro = new ResizeObserver((entries) => {
@@ -82,7 +82,7 @@
 		return () => ro.disconnect();
 	});
 
-	// medir DOM
+	// Medir DOM
 	const SAMPLE_ROWS = 10;
 	async function measureColumns() {
 		await tick();
@@ -124,7 +124,15 @@
 	) {
 		e.preventDefault();
 		const columnIndex = columnId ? manager.state.visibleColumns.indexOf(columnId) : null;
-		rightMenu = { open: true, x: e.clientX, y: e.clientY };
+		// Always set fresh coordinates and ensure menu is closed before reopening
+		if (rightMenu.open) {
+			rightMenu = { open: false, x: 0, y: 0 };
+			setTimeout(() => {
+				rightMenu = { open: true, x: e.clientX, y: e.clientY };
+			}, 0);
+		} else {
+			rightMenu = { open: true, x: e.clientX, y: e.clientY };
+		}
 		rightClickContext = {
 			row,
 			rowIndex,
@@ -140,13 +148,14 @@
 		return manager.state.items.filter((r) => ids.has(rowId(r)));
 	}
 
-	// tracks
+	// Tracks
 	function colTrack(cId: string, measuring: boolean) {
 		if (measuring) return 'max-content';
 		const c = manager.getColumn(cId);
 		const w = manager.measured[cId] ?? c.width ?? c.minWidth ?? 160;
 		return `${Math.max(40, Math.ceil(Number(w)))}px`;
 	}
+
 	function headerTemplateCols(visible: string[], endExtras: boolean) {
 		const tracks = [
 			`${CHECK_W}px`,

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

@@ -1,33 +1,6 @@
 <script lang="ts">
 	import type { TContextMenuEntry } from '../core/types.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;
@@ -36,7 +9,6 @@
 		title?: string;
 		searchable?: boolean;
 		context?: any;
-		portalTarget?: HTMLElement | null;
 	};
 	let {
 		items = [],
@@ -45,21 +17,22 @@
 		open = $bindable(false),
 		title = '',
 		searchable = true,
-		context = null,
-		portalTarget = null
+		context = 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 });
 
+	let menuEl: HTMLDivElement | null = $state(null);
+
 	function close() {
+		if (menuEl) menuEl.hidePopover();
 		open = false;
 		stack = [];
 		q = '';
-		// opcional si quieres limpiar coords:
-		// x = 0; y = 0;
+		x = 0;
+		y = 0;
 	}
 
 	function hasChildren(it: TContextMenuEntry) {
@@ -91,8 +64,6 @@
 		const list = current.items ?? [];
 		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) {
@@ -125,88 +96,54 @@
 		}
 	}
 
-	// --- Ref al elemento del menú para detectar click-fuera ---
-	let menuEl: HTMLDivElement | null = $state(null);
-
-	// Teclado (Escape / Backspace)
+	// Manage popover open/close
 	$effect(() => {
-		if (!open) return;
-		const handler = (e: KeyboardEvent) => onKey(e);
-		document.addEventListener('keydown', handler);
-		return () => document.removeEventListener('keydown', handler);
-	});
-
-	// 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);
-		};
+		if (!menuEl) return;
+		if (open) {
+			menuEl.style.setProperty('--popover-x', `${x}px`);
+			menuEl.style.setProperty('--popover-y', `${y}px`);
+			menuEl.showPopover();
+		} else {
+			menuEl.hidePopover();
+		}
 	});
 
-	// Clamp de posición tras abrir o cambiar coords
+	// Clamp position to viewport
 	$effect(() => {
 		if (!open || !menuEl) return;
 		requestAnimationFrame(() => {
 			if (!menuEl) return;
 			const rect = menuEl.getBoundingClientRect();
-			const { x: nx, y: ny } = clampToViewport(x, y, rect.width, rect.height, 8);
+			const vw = document.documentElement.clientWidth;
+			const vh = document.documentElement.clientHeight;
+			let nx = x;
+			let ny = y;
+			const padding = 8;
+			if (nx + rect.width + padding > vw) nx = Math.max(padding, vw - rect.width - padding);
+			if (ny + rect.height + padding > vh) ny = Math.max(padding, vh - rect.height - padding);
 			if (nx !== x || ny !== y) {
 				x = nx;
 				y = ny;
+				menuEl.style.setProperty('--popover-x', `${nx}px`);
+				menuEl.style.setProperty('--popover-y', `${ny}px`);
 			}
 		});
 	});
 </script>
 
 {#if open}
-	<!-- BACKDROP (portaleado al body) -->
-	<div
-		use:portal={portalTarget}
-		role="dialog"
-		class="fixed inset-0 z-[2147483646]"
-		onclick={() => close()}
-		oncontextmenu={(e) => e.preventDefault()}
-		aria-modal="true"
-		tabindex="0"
-		style="pointer-events:auto"
-	/>
-
-	<!-- MENÚ (portaleado al body) -->
 	<div
 		bind:this={menuEl}
-		use:portal={portalTarget}
-		class="fixed z-[2147483647] w-72 rounded-2xl bg-white p-2 shadow-xl ring-1 ring-black/5 dark:bg-gray-900"
-		style={`left:${x}px; top:${y}px`}
+		popover="manual"
+		class="w-72 rounded-2xl bg-white p-2 shadow-xl ring-1 ring-black/5 dark:bg-gray-900"
+		style="position: fixed; left: var(--popover-x); top: var(--popover-y);"
 		oncontextmenu={(e) => e.preventDefault()}
+		onkeydown={onKey}
 	>
 		<div class="flex items-center gap-1 px-1 py-1">
 			{#if stack.length > 0}
 				<button
 					class="rounded-lg p-1 hover:bg-gray-100 dark:hover:bg-gray-800"
-					role="dialog"
 					aria-label="Atrás"
 					onclick={back}
 				>
@@ -218,8 +155,10 @@
 						stroke="currentColor"
 						stroke-width="2"
 						stroke-linecap="round"
-						stroke-linejoin="round"><polyline points="15 18 9 12 15 6" /></svg
+						stroke-linejoin="round"
 					>
+						<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">
@@ -245,16 +184,15 @@
 				{:else}
 					<button
 						class="flex w-full items-center justify-between gap-3 px-3 py-2 text-left text-sm hover:bg-gray-100 disabled:opacity-50 dark:hover:bg-gray-800"
-						role="dialog"
 						disabled={it.disabled}
 						onclick={() => clickItem(it)}
 					>
 						<span class="truncate">{it.label}</span>
 						<span class="flex items-center gap-2">
 							{#if it.shortcut}
-								<kbd class="rounded bg-gray-100 px-1 text-[10px] dark:bg-gray-800"
-									>{it.shortcut}</kbd
-								>
+								<kbd class="rounded bg-gray-100 px-1 text-[10px] dark:bg-gray-800">
+									{it.shortcut}
+								</kbd>
 							{/if}
 							{#if hasChildren(it)}
 								<svg
@@ -266,8 +204,10 @@
 									stroke="currentColor"
 									stroke-width="2"
 									stroke-linecap="round"
-									stroke-linejoin="round"><polyline points="9 18 15 12 9 6" /></svg
+									stroke-linejoin="round"
 								>
+									<polyline points="9 18 15 12 9 6" />
+								</svg>
 							{/if}
 						</span>
 					</button>
@@ -276,3 +216,12 @@
 		</div>
 	</div>
 {/if}
+
+<style>
+	[popover] {
+		margin: 0;
+		border: none;
+		padding: 0;
+		z-index: 2147483647;
+	}
+</style>

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

@@ -7,7 +7,6 @@ type Props = {
     title?: string;
     searchable?: boolean;
     context?: any;
-    portalTarget?: HTMLElement | null;
 };
 declare const ContextMenu: import("svelte").Component<Props, {}, "open">;
 type ContextMenu = ReturnType<typeof ContextMenu>;

package/package.json

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