@r2digisolutions/ui 0.34.5 → 0.34.7

package/dist/components/container/DataTableShell/DataTableShell.svelte

@@ -57,29 +57,26 @@
 		{} as Record<keyof T, { left?: number; right?: number }>
 	);
 
-	// =========================
-	// CONTEXT MENU
-	// =========================
+	// ✅ el contenedor que scrollea (tu overflow-auto)
+	let scrollEl = $state<HTMLDivElement | null>(null);
+
+	// CONTEXT
 	let contextPopover = $state<HTMLDivElement | null>(null);
 	let contextRow = $state<T | null>(null);
 
-	// punto preferido (cursor o botón)
+	// punto donde “quieres” abrirlo (coords de viewport)
 	let contextPos = $state<{ x: number; y: number }>({ x: 0, y: 0 });
 
-	// ✅ left/top reales (sin transform, para que no se salga nunca)
+	// ✅ left/top final (sin transform)
 	let contextRender = $state<{ left: number; top: number }>({ left: 0, top: 0 });
 
-	// Ajustes
-	const CONTEXT_MARGIN = 10; // margen mínimo a bordes viewport
-	const CONTEXT_GAP = 8; // separación visual del cursor/botón
+	const CONTEXT_MARGIN = 12;
+	const CONTEXT_GAP = 8;
 
 	let openRows = $state<Set<string>>(new Set());
-
 	const contextOpen = $derived(contextRow !== null);
 
-	// =========================
 	// GRID / STICKY
-	// =========================
 	$effect(() => {
 		const parts: string[] = [];
 		if (controller.multiSelect) parts.push('40px');
@@ -89,7 +86,6 @@
 			parts.push(`${w}px`);
 		});
 
-		// columna acciones
 		parts.push('64px');
 		gridTemplate = parts.join(' ');
 
@@ -104,57 +100,50 @@
 			if (col.sticky === 'left') offsets[col.id as keyof T] = { left: accLeft };
 			accLeft += w;
 		});
-
 		stickyOffsets = offsets;
 	});
 
 	// CHECK ALL
 	$effect(() => {
 		if (!controller.multiSelect || !selectAllEl) return;
-
 		if (!controller.currentRows.length) {
 			selectAllEl.checked = false;
 			selectAllEl.indeterminate = false;
 			return;
 		}
-
 		selectAllEl.checked = controller.allVisibleSelected;
 		selectAllEl.indeterminate = controller.someVisibleSelected;
 	});
 
-	// CERRAR CONTEXT MENU al click fuera
+	// Cerrar por click fuera
 	$effect(() => {
 		function handleDocumentClick(event: MouseEvent) {
 			if (!contextOpen) return;
 			const target = event.target as HTMLElement;
 			if (!target.closest('[data-context-host="true"]')) closeContext();
 		}
-
-		if (contextOpen) document.addEventListener('click', handleDocumentClick);
-
-		return () => document.removeEventListener('click', handleDocumentClick);
+		if (contextOpen) document.addEventListener('mousedown', handleDocumentClick, true);
+		return () => document.removeEventListener('mousedown', handleDocumentClick, true);
 	});
 
-	// ✅ Reposicionar en resize + scroll (capture)
+	// ✅ Reposicionar mientras está abierto: window resize + scroll del contenedor REAL
 	$effect(() => {
 		if (!contextOpen) return;
 
-		const onWin = () => {
-			positionContext(2);
-		};
+		const handler = () => void positionContext();
 
-		window.addEventListener('resize', onWin);
-		window.addEventListener('scroll', onWin, { passive: true, capture: true });
+		window.addEventListener('resize', handler);
+
+		// 👇 ESTE ES el scroll que te estaba faltando
+		scrollEl?.addEventListener('scroll', handler, { passive: true });
 
 		return () => {
-			window.removeEventListener('resize', onWin);
-			window.removeEventListener('scroll', onWin, true as any);
+			window.removeEventListener('resize', handler);
+			scrollEl?.removeEventListener('scroll', handler as any);
 		};
 	});
 
-	// =========================
-	// RESIZE COLUMNS
-	// =========================
+	// RESIZE columns
 	let resizingId: keyof T | null = null;
 	let startX = 0;
 	let startWidth = 0;
@@ -181,9 +170,6 @@
 		window.removeEventListener('mouseup', onResizeUp);
 	}
 
-	// =========================
-	// HELPERS
-	// =========================
 	function rowIdFor(row: T, index: number) {
 		return controller.getRowId(row, index);
 	}
@@ -221,7 +207,7 @@
 	}
 
 	// =========================
-	// ✅ Context positioning (real left/top, sin transform)
+	// ✅ POSICIONAMIENTO REAL (sin transform)
 	// =========================
 	function clamp(n: number, min: number, max: number) {
 		return Math.max(min, Math.min(max, n));
@@ -231,70 +217,66 @@
 		return new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
 	}
 
-	/**
-	 * Devuelve left/top reales (sin transform) para que el popover nunca se salga.
-	 * preferred = punto donde se abrió (clientX/clientY)
-	 * pop = tamaño real del popover (width/height)
-	 */
+	function getViewport() {
+		const vv = window.visualViewport;
+		if (vv) return { left: vv.offsetLeft, top: vv.offsetTop, width: vv.width, height: vv.height };
+		return { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight };
+	}
+
 	function computeContextPosition(preferred: { x: number; y: number }, pop: DOMRect) {
-		const vw = window.innerWidth;
-		const vh = window.innerHeight;
-
-		// Si es más alto que el viewport (menos márgenes), lo forzamos pegado arriba
-		const maxHeightAllowed = vh - CONTEXT_MARGIN * 2;
-		const tooTall = pop.height > maxHeightAllowed;
-
-		// Preferencias:
-		// - horizontal: izquierda del punto
-		// - vertical: abajo del punto
-		let left = preferred.x - pop.width; // izquierda
-		let top = preferred.y + CONTEXT_GAP; // abajo
-
-		// Horizontal flip: si no cabe a la izquierda, poner a la derecha
-		if (left < CONTEXT_MARGIN) {
-			left = preferred.x + CONTEXT_GAP;
-		}
+		const vp = getViewport();
+
+		const minLeft = vp.left + CONTEXT_MARGIN;
+		const minTop = vp.top + CONTEXT_MARGIN;
+
+		const maxLeft = vp.left + vp.width - CONTEXT_MARGIN - pop.width;
+		const maxTop = vp.top + vp.height - CONTEXT_MARGIN - pop.height;
+
+		const tooTall = pop.height > vp.height - CONTEXT_MARGIN * 2;
 
-		// Vertical flip: si no cabe abajo y NO es tooTall, poner arriba
-		if (!tooTall) {
+		// default: left + down
+		let left = preferred.x - pop.width;
+		let top = preferred.y + CONTEXT_GAP;
+
+		// flip horizontal
+		if (left < minLeft) left = preferred.x + CONTEXT_GAP;
+
+		if (tooTall) {
+			// si no cabe en altura, pegado arriba
+			top = minTop;
+		} else {
+			// flip vertical si se sale abajo
 			const bottomIfDown = top + pop.height;
-			const downFits = bottomIfDown <= vh - CONTEXT_MARGIN;
-			if (!downFits) {
+			const bottomLimit = vp.top + vp.height - CONTEXT_MARGIN;
+			if (bottomIfDown > bottomLimit) {
 				top = preferred.y - CONTEXT_GAP - pop.height; // arriba
 			}
-		}
 
-		// Si es tooTall, lo pegamos a top margin y listo
-		if (tooTall) {
-			top = CONTEXT_MARGIN;
+			// si arriba se sale, pegado abajo
+			if (top < minTop) top = maxTop;
 		}
 
-		// Clamp final dentro del viewport
-		// (si lo ponemos a la derecha pero no cabe, clamp lo corrige)
-		left = clamp(left, CONTEXT_MARGIN, vw - CONTEXT_MARGIN - pop.width);
-		top = clamp(top, CONTEXT_MARGIN, vh - CONTEXT_MARGIN - Math.min(pop.height, maxHeightAllowed));
+		left = clamp(left, minLeft, Math.max(minLeft, maxLeft));
+		top = clamp(top, minTop, Math.max(minTop, maxTop));
 
 		return { left, top };
 	}
 
-	/**
-	 * Posiciona midiendo tamaño real.
-	 * RAF suele ser más fiable que tick() con Popover API.
-	 */
-	async function positionContext(retries = 3) {
+	async function positionContext() {
 		if (!contextPopover || !contextRow) return;
 
 		await raf();
+		const r1 = contextPopover.getBoundingClientRect();
+		if (!r1.width || !r1.height) return;
 
-		// OJO: el popover debe estar visible para tener medidas reales
-		const rect = contextPopover.getBoundingClientRect();
+		contextRender = computeContextPosition(contextPos, r1);
 
-		if ((!rect.width || !rect.height) && retries > 0) {
-			return positionContext(retries - 1);
-		}
-		if (!rect.width || !rect.height) return;
+		// segunda pasada por scrollbar
+		await raf();
+		const r2 = contextPopover.getBoundingClientRect();
+		if (!r2.width || !r2.height) return;
 
-		contextRender = computeContextPosition(contextPos, rect);
+		contextRender = computeContextPosition(contextPos, r2);
 	}
 
 	async function openContextAt(event: MouseEvent, row: T) {
@@ -304,10 +286,8 @@
 		contextRow = row;
 		contextPos = { x: event.clientX, y: event.clientY };
 
-		if (contextPopover) contextPopover.showPopover();
-
 		await tick();
-		await positionContext(3);
+		await positionContext();
 	}
 
 	async function openContextFromButton(event: MouseEvent, row: T) {
@@ -315,24 +295,23 @@
 		event.stopPropagation();
 
 		const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
-
 		contextRow = row;
-		contextPos = { x: rect.right, y: rect.bottom };
 
-		if (contextPopover) contextPopover.showPopover();
+		// punto: esquina inferior derecha del botón
+		contextPos = { x: rect.right, y: rect.bottom };
 
 		await tick();
-		await positionContext(3);
+		await positionContext();
 	}
 
 	function closeContext() {
-		if (contextPopover) contextPopover.hidePopover();
 		contextRow = null;
 	}
 </script>
 
+<!-- ✅ wrapper principal relativo (para z-index) -->
 <div
-	class="flex flex-col overflow-hidden rounded-2xl border border-neutral-200/80 bg-neutral-50/70 text-xs text-neutral-900 shadow-sm backdrop-blur-2xl dark:border-neutral-800/80 dark:bg-neutral-950/70 dark:text-neutral-50"
+	class="relative flex flex-col overflow-hidden rounded-2xl border border-neutral-200/80 bg-neutral-50/70 text-xs text-neutral-900 shadow-sm backdrop-blur-2xl dark:border-neutral-800/80 dark:bg-neutral-950/70 dark:text-neutral-50"
 >
 	<DataTableToolbar
 		{density}
@@ -352,7 +331,8 @@
 		</div>
 	{/if}
 
-	<div class="relative max-h-[70vh] flex-1 overflow-auto">
+	<!-- ✅ ESTE es el scroll container, le hacemos bind -->
+	<div bind:this={scrollEl} class="relative max-h-[70vh] flex-1 overflow-auto">
 		{#if controller.loading}
 			<div class="pointer-events-none absolute inset-0 z-20 bg-neutral-900/30 backdrop-blur-md">
 				<div class="flex h-full items-center justify-center">
@@ -462,7 +442,6 @@
 							{@const id = rowIdFor(row, index)}
 
 							<div class="group relative">
-								<!-- svelte-ignore a11y_click_events_have_key_events -->
 								<div
 									role="row"
 									tabindex="0"
@@ -495,7 +474,7 @@
 										{@const value = col.accessor ? col.accessor(row) : (row as any)[col.id]}
 										{@const sticky = stickyOffsets[col.id as keyof T]}
 										<div
-											class={`flex items-center border-r border-neutral-200/60 px-3 text-black dark:text-neutral-50 ${
+											class={`flex items-center border-r border-neutral-200/60 px-3  text-black dark:text-neutral-50${
 												density === 'compact' ? 'py-1.5' : 'py-2.5'
 											} dark:border-neutral-800/70 ${
 												col.sticky === 'left'
@@ -509,15 +488,7 @@
 											{#if cell}
 												{@render cell({ row, column: col, value, index })}
 											{:else}
-												<span
-													class={`line-clamp-2 text-black dark:text-neutral-50 ${
-														col.align === 'right'
-															? 'ml-auto text-right'
-															: col.align === 'center'
-																? 'mx-auto text-center'
-																: ''
-													}`}
-												>
+												<span class="line-clamp-2 text-black dark:text-neutral-50">
 													{formatValue(col, value, row)}
 												</span>
 											{/if}
@@ -531,33 +502,30 @@
 										data-stop-row-toggle="true"
 									>
 										{#if actions.length}
-											{#if rowActions}
-												{@render rowActions(row, actions)}
-											{:else}
-												<div class="flex items-center gap-1.5">
-													{#if rowCollapse}
-														<button
-															type="button"
-															onclick={(e) => {
-																e.stopPropagation();
-																toggleRow(row, index);
-															}}
-															class={`inline-flex h-6 w-6 items-center justify-center rounded-full text-neutral-400 transition-colors hover:bg-neutral-200/80 hover:text-neutral-800 dark:text-neutral-400 dark:hover:bg-neutral-800/80 dark:hover:text-neutral-100 ${
-																openRows.has(id) ? 'rotate-180' : ''
-															}`}
-														>
-															<ChevronDown class="h-3.5 w-3.5" />
-														</button>
-													{/if}
+											<div class="flex items-center gap-1.5">
+												{#if rowCollapse}
 													<button
 														type="button"
-														onclick={(e) => openContextFromButton(e, row)}
-														class="inline-flex h-7 w-7 items-center justify-center rounded-full text-neutral-400 transition-colors hover:bg-neutral-200/80 hover:text-neutral-800 dark:text-neutral-400 dark:hover:bg-neutral-800/80 dark:hover:text-neutral-100"
+														onclick={(e) => {
+															e.stopPropagation();
+															toggleRow(row, index);
+														}}
+														class={`inline-flex h-6 w-6 items-center justify-center rounded-full text-neutral-400 transition-colors hover:bg-neutral-200/80 hover:text-neutral-800 dark:text-neutral-400 dark:hover:bg-neutral-800/80 dark:hover:text-neutral-100 ${
+															openRows.has(id) ? 'rotate-180' : ''
+														}`}
 													>
-														<EllipsisVertical class="h-4 w-4" />
+														<ChevronDown class="h-3.5 w-3.5" />
 													</button>
-												</div>
-											{/if}
+												{/if}
+
+												<button
+													type="button"
+													onclick={(e) => openContextFromButton(e, row)}
+													class="inline-flex h-7 w-7 items-center justify-center rounded-full text-neutral-400 transition-colors hover:bg-neutral-200/80 hover:text-neutral-800 dark:text-neutral-400 dark:hover:bg-neutral-800/80 dark:hover:text-neutral-100"
+												>
+													<EllipsisVertical class="h-4 w-4" />
+												</button>
+											</div>
 										{/if}
 									</div>
 								</div>
@@ -601,10 +569,14 @@
 						{/each}
 					</div>
 				{:else}
-					<!-- GRID VIEW (igual que tu versión original; si necesitas que lo pegue completo, pégame el final del archivo) -->
 					<div class="grid gap-3 p-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
 						{#each controller.currentRows as row, index (rowIdFor(row, index))}
-							<!-- … tu bloque grid view … -->
+							<div
+								class="group relative rounded-2xl border border-neutral-200/80 bg-white/80 p-3 text-[11px] text-neutral-800 shadow-sm ring-0 transition-all hover:border-purple-400/70 hover:shadow-md dark:border-neutral-800/80 dark:bg-neutral-900/80 dark:text-neutral-50"
+								oncontextmenu={(e) => openContextAt(e, row)}
+							>
+								<!-- tu grid content -->
+							</div>
 						{/each}
 					</div>
 				{/if}
@@ -617,17 +589,14 @@
 	</div>
 
 	<DataTableFooter />
-
-	<!-- ✅ CONTEXT POPOVER HOST -->
+</div>
+<!-- ✅ HOST fuera del overflow-auto (ya no lo recorta) -->
+{#if contextOpen}
 	<div
 		bind:this={contextPopover}
-		popover="manual"
 		data-context-host="true"
-		class="z-[1300] max-h-[calc(100vh-20px)] max-w-xs min-w-[190px] overflow-auto rounded-2xl border border-neutral-200/80 bg-neutral-50/95 p-1.5 text-xs text-neutral-900 shadow-[0_18px_50px_rgba(15,23,42,0.45)] backdrop-blur-2xl dark:border-neutral-700/80 dark:bg-neutral-900/95 dark:text-neutral-50"
-		style={`position: fixed; left: ${contextRender.left}px; top: ${contextRender.top}px;`}
-		onbeforetoggle={(e) => {
-			if ((e as any).newState === 'closed') contextRow = null;
-		}}
+		class="pointer-events-auto fixed z-[999999] max-h-[calc(100vh-24px)] max-w-xs min-w-[190px] overflow-auto rounded-2xl border border-neutral-200/80 bg-neutral-50/95 p-1.5 text-xs text-neutral-900 shadow-[0_18px_50px_rgba(15,23,42,0.45)] backdrop-blur-2xl dark:border-neutral-700/80 dark:bg-neutral-900/95 dark:text-neutral-50"
+		style={`left:${contextRender.left}px; top:${contextRender.top}px;`}
 	>
 		{#if contextRow && actions.length}
 			<ContextMenu {actions} row={contextRow} onClose={closeContext} />
@@ -635,4 +604,4 @@
 			<div class="flex flex-col gap-2">No hay acciones disponibles</div>
 		{/if}
 	</div>
-</div>
+{/if}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@r2digisolutions/ui",
-	"version": "0.34.5",
+	"version": "0.34.7",
 	"private": false,
 	"packageManager": "bun@1.3.9",
 	"publishConfig": {