@r2digisolutions/ui 0.24.2 → 0.24.4

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,14 @@
 	) {
 		e.preventDefault();
 		const columnIndex = columnId ? manager.state.visibleColumns.indexOf(columnId) : null;
-		rightMenu = { open: true, x: e.clientX, y: e.clientY };
+		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 +147,13 @@
 		return manager.state.items.filter((r) => ids.has(rowId(r)));
 	}
 
-	// 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`,
@@ -282,7 +289,7 @@
 								data-dt-cell="1"
 								data-col-id={cid}
 								data-row-index={i}
-								class="px-3"
+								class="flex h-full w-full items-center px-3"
 								onclick={() => onRowClick?.(row)}
 								oncontextmenu={(e) => onCellContext(e, row, cid, i)}
 							>

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

@@ -1,22 +1,25 @@
 <script lang="ts">
 	import type { TContextMenuEntry } from '../core/types.js';
 
-	// --- Action portal (interna al componente) ---
+	// --- Action portal ---
 	function portal(node: HTMLElement, target: HTMLElement | null = null) {
 		const tgt = target ?? document.body;
 		const placeholder = document.createComment('portal-placeholder');
-		node.parentNode?.insertBefore(placeholder, node);
+		if (!node.parentNode) return { destroy: () => {} };
+		node.parentNode.insertBefore(placeholder, node);
 		tgt.appendChild(node);
 		return {
 			destroy() {
-				node.remove();
-				placeholder.parentNode?.insertBefore(node, placeholder);
-				placeholder.remove();
+				if (node.isConnected) node.remove();
+				if (placeholder.isConnected && placeholder.parentNode) {
+					placeholder.parentNode.insertBefore(node, placeholder);
+					placeholder.remove();
+				}
 			}
 		};
 	}
 
-	// --- Util para clamping a viewport (interna) ---
+	// --- Util para clamping a viewport ---
 	function clampToViewport(x: number, y: number, menuW: number, menuH: number, padding = 8) {
 		const vw = document.documentElement.clientWidth;
 		const vh = document.documentElement.clientHeight;
@@ -54,12 +57,14 @@
 	let q = $state('');
 	const current = $derived(stack.length ? stack[stack.length - 1] : { label: title, items });
 
+	let menuEl: HTMLDivElement | null = $state(null);
+
 	function close() {
 		open = false;
 		stack = [];
 		q = '';
-		// opcional si quieres limpiar coords:
-		// x = 0; y = 0;
+		x = 0;
+		y = 0;
 	}
 
 	function hasChildren(it: TContextMenuEntry) {
@@ -91,8 +96,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,9 +128,6 @@
 		}
 	}
 
-	// --- Ref al elemento del menú para detectar click-fuera ---
-	let menuEl: HTMLDivElement | null = $state(null);
-
 	// Teclado (Escape / Backspace)
 	$effect(() => {
 		if (!open) return;
@@ -136,30 +136,34 @@
 		return () => document.removeEventListener('keydown', handler);
 	});
 
-	// Cierres robustos: click-fuera en capture, scroll/resize, y bloqueo de menú nativo
+	// Cierres robustos: click-fuera, scroll/resize, y bloqueo de menú nativo
 	$effect(() => {
-		if (!open) return;
+		if (!open || !menuEl) return;
 
-		const onPointerDownCapture = (ev: PointerEvent) => {
-			if (!menuEl) return;
-			if (!menuEl.contains(ev.target as Node)) {
-				close();
-			}
+		const onPointerDown = (ev: PointerEvent) => {
+			if (!menuEl || menuEl.contains(ev.target as Node)) return;
+			close();
 		};
 
 		const onNativeCtx = (ev: MouseEvent) => {
+			if (!menuEl || menuEl.contains(ev.target as Node)) return;
 			ev.preventDefault();
 		};
 
-		const onScrollOrResize = () => close();
+		let timeout: NodeJS.Timeout;
+		const onScrollOrResize = () => {
+			clearTimeout(timeout);
+			timeout = setTimeout(() => close(), 100);
+		};
 
-		document.addEventListener('pointerdown', onPointerDownCapture, true);
+		document.addEventListener('pointerdown', onPointerDown);
 		document.addEventListener('contextmenu', onNativeCtx);
 		window.addEventListener('scroll', onScrollOrResize, true);
 		window.addEventListener('resize', onScrollOrResize, true);
 
 		return () => {
-			document.removeEventListener('pointerdown', onPointerDownCapture, true);
+			clearTimeout(timeout);
+			document.removeEventListener('pointerdown', onPointerDown);
 			document.removeEventListener('contextmenu', onNativeCtx);
 			window.removeEventListener('scroll', onScrollOrResize, true);
 			window.removeEventListener('resize', onScrollOrResize, true);
@@ -182,7 +186,7 @@
 </script>
 
 {#if open}
-	<!-- BACKDROP (portaleado al body) -->
+	<!-- BACKDROP -->
 	<div
 		use:portal={portalTarget}
 		role="dialog"
@@ -194,7 +198,7 @@
 		style="pointer-events:auto"
 	/>
 
-	<!-- MENÚ (portaleado al body) -->
+	<!-- MENÚ -->
 	<div
 		bind:this={menuEl}
 		use:portal={portalTarget}

package/package.json

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