@r2digisolutions/ui 0.34.0 → 0.34.2

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

@@ -1,5 +1,6 @@
 <script lang="ts" generics="T">
 	import type { Snippet } from 'svelte';
+	import { tick } from 'svelte';
 	import { EllipsisVertical, ChevronDown } from 'lucide-svelte';
 	import type { ColumnDef, RowAction } from './core/types.js';
 	import type { DataTableController } from './core/DataTableController.svelte';
@@ -56,10 +57,24 @@
 		{} as Record<keyof T, { left?: number; right?: number }>
 	);
 
+	// CONTEXT MENU
 	let contextPopover = $state<HTMLDivElement | null>(null);
 	let contextRow = $state<T | null>(null);
+
+	// Punto “preferido” (cursor o botón)
 	let contextPos = $state<{ x: number; y: number }>({ x: 0, y: 0 });
 
+	// ✅ Render final (clamp + flip + stick)
+	let contextRender = $state<{ x: number; y: number; transform: string }>({
+		x: 0,
+		y: 0,
+		transform: 'translate(-100%, 8px)'
+	});
+
+	// Ajusta margen si quieres “pegado” más agresivo
+	const CONTEXT_MARGIN = 10;
+	const CONTEXT_GAP = 8; // separación visual del cursor/botón
+
 	let openRows = $state<Set<string>>(new Set());
 
 	const contextOpen = $derived(contextRow !== null);
@@ -74,7 +89,7 @@
 			parts.push(`${w}px`);
 		});
 
-		// Columna de acciones
+		// Columna acciones
 		parts.push('64px');
 		gridTemplate = parts.join(' ');
 
@@ -86,43 +101,59 @@
 		let accLeft = controller.multiSelect ? 40 : 0;
 		controller.mainColumns.forEach((col) => {
 			const w = controller.getColumnWidth(col.id as keyof T);
-			if (col.sticky === 'left') {
-				offsets[col.id as keyof T] = { left: accLeft };
-			}
+			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
+	// CERRAR CONTEXT MENU al 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);
+			if (!target.closest('[data-context-host="true"]')) closeContext();
 		}
+
+		if (contextOpen) document.addEventListener('click', handleDocumentClick);
+
+		return () => document.removeEventListener('click', handleDocumentClick);
+	});
+
+	// ✅ Reposicionar en resize + scroll (capture)
+	$effect(() => {
+		if (!contextOpen) return;
+
+		const onWin = () => {
+			// reintenta/ajusta por si cambia viewport, barras móviles, etc.
+			positionContext(2);
+		};
+
+		window.addEventListener('resize', onWin);
+		window.addEventListener('scroll', onWin, { passive: true, capture: true });
+
 		return () => {
-			document.removeEventListener('click', handleDocumentClick);
+			window.removeEventListener('resize', onWin);
+			window.removeEventListener('scroll', onWin, true as any);
 		};
 	});
 
+	// RESIZE COLUMNS
 	let resizingId: keyof T | null = null;
 	let startX = 0;
 	let startWidth = 0;
@@ -140,8 +171,7 @@
 	function onResizeMove(event: MouseEvent) {
 		if (!resizingId) return;
 		const dx = event.clientX - startX;
-		const width = startWidth + dx;
-		controller.resizeColumn(resizingId, width);
+		controller.resizeColumn(resizingId, startWidth + dx);
 	}
 
 	function onResizeUp() {
@@ -150,6 +180,7 @@
 		window.removeEventListener('mouseup', onResizeUp);
 	}
 
+	// HELPERS
 	function rowIdFor(row: T, index: number) {
 		return controller.getRowId(row, index);
 	}
@@ -165,28 +196,6 @@
 		return String(value);
 	}
 
-	function openContextAt(event: MouseEvent, row: T) {
-		event.preventDefault();
-		event.stopPropagation();
-		contextRow = row;
-		contextPos = { x: event.clientX, y: event.clientY };
-		if (contextPopover) contextPopover.showPopover();
-	}
-
-	function openContextFromButton(event: MouseEvent, row: T) {
-		event.preventDefault();
-		event.stopPropagation();
-		const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
-		contextRow = row;
-		contextPos = { x: rect.right, y: rect.bottom };
-		if (contextPopover) contextPopover.showPopover();
-	}
-
-	function closeContext() {
-		if (contextPopover) contextPopover.hidePopover();
-		contextRow = null;
-	}
-
 	function toggleRow(row: T, index: number) {
 		if (!rowCollapse) return;
 		const id = rowIdFor(row, index);
@@ -204,12 +213,171 @@
 
 	function handleToggleAll(e: Event) {
 		const input = e.currentTarget as HTMLInputElement;
-		const checked = input.checked;
-		if (checked) {
-			controller.selectAllCurrentPage();
+		if (input.checked) controller.selectAllCurrentPage();
+		else controller.unselectAllCurrentPage();
+	}
+
+	// =========================
+	// ✅ Context positioning (robusto)
+	// =========================
+	function clamp(n: number, min: number, max: number) {
+		return Math.max(min, Math.min(max, n));
+	}
+
+	function raf() {
+		return new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+	}
+
+	/**
+	 * Decide transform y clamp final para que el popover:
+	 * - no se salga del viewport
+	 * - si no cabe abajo => se pega arriba
+	 * - si no cabe arriba => se pega al top margin (scroll dentro)
+	 * - si no cabe a la izquierda => se pone a la derecha
+	 * - si no cabe a la derecha => clamp
+	 */
+	function computeContextPosition(preferred: { x: number; y: number }, pop: DOMRect) {
+		const vw = window.innerWidth;
+		const vh = window.innerHeight;
+
+		// Si es tan alto que ni arriba ni abajo, lo forzamos dentro (scroll en contenedor)
+		const tooTall = pop.height + CONTEXT_MARGIN * 2 > vh;
+
+		// Queremos aparecer “cerca” del punto preferido
+		// Horizontal por defecto: a la izquierda del punto (como tu translate(-100%, ...))
+		const fitsLeft = preferred.x - pop.width - CONTEXT_MARGIN >= 0;
+		const fitsRight = preferred.x + pop.width + CONTEXT_MARGIN <= vw;
+
+		// Vertical por defecto: abajo del punto
+		const fitsDown = preferred.y + pop.height + CONTEXT_MARGIN + CONTEXT_GAP <= vh;
+		const fitsUp = preferred.y - pop.height - CONTEXT_MARGIN - CONTEXT_GAP >= 0;
+
+		// Horizontal: si no cabe izquierda pero cabe derecha => derecha
+		const placeToRight = !fitsLeft && fitsRight;
+
+		// Vertical:
+		// - preferimos abajo
+		// - si no cabe abajo y cabe arriba => arriba
+		// - si es tooTall => lo pegamos dentro del viewport
+		const placeUp = !tooTall && !fitsDown && fitsUp;
+
+		// Transform:
+		const transformX = placeToRight ? '0%' : '-100%';
+		// en vertical: abajo => +gap, arriba => -100% - gap
+		const transformY = placeUp ? `calc(-100% - ${CONTEXT_GAP}px)` : `${CONTEXT_GAP}px`;
+
+		let x = preferred.x;
+		let y = preferred.y;
+
+		// Clamp horizontal según transformX
+		if (transformX === '-100%') {
+			// pop ocupa [x - w, x]
+			x = clamp(x, CONTEXT_MARGIN + pop.width, vw - CONTEXT_MARGIN);
+		} else {
+			// pop ocupa [x, x + w]
+			x = clamp(x, CONTEXT_MARGIN, vw - CONTEXT_MARGIN - pop.width);
+		}
+
+		// Si tooTall, lo pegamos arriba dentro del viewport y dejamos overflow-auto
+		if (tooTall) {
+			return {
+				x,
+				y: CONTEXT_MARGIN,
+				transform: `translate(${transformX}, 0px)`
+			};
+		}
+
+		// Clamp vertical
+		if (placeUp) {
+			// pop ocupa [y - gap - h, y - gap]
+			y = clamp(y, CONTEXT_MARGIN + pop.height + CONTEXT_GAP, vh - CONTEXT_MARGIN);
 		} else {
-			controller.unselectAllCurrentPage();
+			// pop ocupa [y + gap, y + gap + h]
+			// aquí el max real del y para que no se salga por abajo:
+			y = clamp(y, CONTEXT_MARGIN - CONTEXT_GAP, vh - CONTEXT_MARGIN - pop.height - CONTEXT_GAP);
+		}
+
+		// 🔥 Fallback “stick”:
+		// Si aun así por alguna razón se nos quedaría fuera (casos raros), lo pegamos a bottom/top.
+		const topIfDown = y + CONTEXT_GAP; // top real cuando está abajo
+		const bottomIfDown = topIfDown + pop.height;
+
+		const bottomIfUp = y - CONTEXT_GAP; // bottom real cuando está arriba
+		const topIfUp = bottomIfUp - pop.height;
+
+		if (!placeUp && bottomIfDown > vh - CONTEXT_MARGIN) {
+			// stick to bottom: ajusta y para que bottom quede dentro
+			y = vh - CONTEXT_MARGIN - pop.height - CONTEXT_GAP;
 		}
+
+		if (placeUp && topIfUp < CONTEXT_MARGIN) {
+			// stick to top: ajusta y
+			y = CONTEXT_MARGIN + pop.height + CONTEXT_GAP;
+		}
+
+		return {
+			x,
+			y,
+			transform: `translate(${transformX}, ${transformY})`
+		};
+	}
+
+	/**
+	 * Posiciona con medición robusta:
+	 * - espera RAF
+	 * - si rect aún es 0 => retry
+	 * - recalcula render
+	 */
+	async function positionContext(retries = 3) {
+		if (!contextPopover || !contextRow) return;
+
+		// RAF suele ser más fiable que tick() con Popover API
+		await raf();
+
+		const rect = contextPopover.getBoundingClientRect();
+
+		if ((!rect.width || !rect.height) && retries > 0) {
+			return positionContext(retries - 1);
+		}
+		if (!rect.width || !rect.height) return;
+
+		contextRender = computeContextPosition(contextPos, rect);
+	}
+
+	async function openContextAt(event: MouseEvent, row: T) {
+		event.preventDefault();
+		event.stopPropagation();
+
+		contextRow = row;
+		contextPos = { x: event.clientX, y: event.clientY };
+
+		if (contextPopover) contextPopover.showPopover();
+
+		// Svelte render + luego RAF retry para layout real
+		await tick();
+		await positionContext(3);
+	}
+
+	async function openContextFromButton(event: MouseEvent, row: T) {
+		event.preventDefault();
+		event.stopPropagation();
+
+		const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
+
+		contextRow = row;
+
+		// punto preferido: esquina inferior derecha del botón
+		contextPos = { x: rect.right, y: rect.bottom };
+
+		if (contextPopover) contextPopover.showPopover();
+
+		await tick();
+		await positionContext(3);
+	}
+
+	function closeContext() {
+		if (contextPopover) contextPopover.hidePopover();
+		contextRow = null;
 	}
 </script>
 
@@ -378,7 +546,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'
@@ -390,12 +558,7 @@
 												: ''}
 										>
 											{#if cell}
-												{@render cell({
-													row,
-													column: col,
-													value,
-													index
-												})}
+												{@render cell({ row, column: col, value, index })}
 											{:else}
 												<span
 													class={`line-clamp-2 text-black dark:text-neutral-50 ${
@@ -501,6 +664,7 @@
 									: (row as any)[firstCol.id]
 								: null}
 							{@const restCols = cols.slice(1)}
+
 							<!-- svelte-ignore a11y_no_static_element_interactions -->
 							<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 ${
@@ -526,12 +690,7 @@
 
 								<div class="mb-2 pr-6 text-black dark:text-neutral-50">
 									{#if cell && firstCol}
-										{@render cell({
-											row,
-											column: firstCol,
-											value: firstValue,
-											index
-										})}
+										{@render cell({ row, column: firstCol, value: firstValue, index })}
 									{:else if firstCol}
 										<div
 											class="line-clamp-2 text-[12px] leading-snug font-semibold text-neutral-900 dark:text-neutral-50"
@@ -609,12 +768,13 @@
 
 	<DataTableFooter />
 
+	<!-- ✅ CONTEXT POPOVER HOST -->
 	<div
 		bind:this={contextPopover}
 		popover="manual"
 		data-context-host="true"
-		class="z-[1300] max-w-xs min-w-[190px] 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: ${contextPos.x}px; top: ${contextPos.y}px; transform: translate(-100%, 8px);`}
+		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 transition-transform duration-75 will-change-transform dark:border-neutral-700/80 dark:bg-neutral-900/95 dark:text-neutral-50"
+		style={`position: fixed; left: ${contextRender.x}px; top: ${contextRender.y}px; transform: ${contextRender.transform};`}
 		onbeforetoggle={(e) => {
 			if ((e as any).newState === 'closed') contextRow = null;
 		}}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@r2digisolutions/ui",
-	"version": "0.34.0",
+	"version": "0.34.2",
 	"private": false,
 	"packageManager": "bun@1.3.8",
 	"publishConfig": {