@r2digisolutions/ui 0.24.1 → 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,7 +1,5 @@
 <script lang="ts">
 	import type { TContextMenuEntry } from '../core/types.js';
-	import { portal } from '../utils/portal.js';
-	import { clampToViewport } from '../utils/position.js';
 
 	type Props = {
 		items?: TContextMenuEntry[];
@@ -11,8 +9,6 @@
 		title?: string;
 		searchable?: boolean;
 		context?: any;
-		// por si algún día quieres desactivar el portal:
-		portalTarget?: HTMLElement | null;
 	};
 	let {
 		items = [],
@@ -21,19 +17,22 @@
 		open = $bindable(false),
 		title = '',
 		searchable = true,
-		context = null,
-		portalTarget = null
+		context = null
 	}: Props = $props();
 
 	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 = '';
+		x = 0;
+		y = 0;
 	}
 
 	function hasChildren(it: TContextMenuEntry) {
@@ -65,7 +64,6 @@
 		const list = current.items ?? [];
 		const query = q.trim().toLowerCase();
 		let arr = query ? list.filter((it) => matches(it, query)) : list.slice();
-
 		const out: TContextMenuEntry[] = [];
 		let prevDiv = false;
 		for (const it of arr) {
@@ -98,58 +96,54 @@
 		}
 	}
 
+	// Manage popover open/close
 	$effect(() => {
-		if (!open) return;
-		const handler = (e: KeyboardEvent) => onKey(e);
-		document.addEventListener('keydown', handler);
-		return () => document.removeEventListener('keydown', handler);
+		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 dinámico al abrir o al cambiar x/y ---
-	let menuEl: HTMLDivElement | null = $state(null);
-
+	// Clamp position to viewport
 	$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
+			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: va al body por el portal también -->
-	<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"
-	/>
-
-	<!-- MENU: fijado al viewport y 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}
 				>
@@ -190,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
@@ -223,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.1",
+	"version": "0.24.3",
 	"private": false,
 	"packageManager": "bun@1.2.23",
 	"publishConfig": {