@r2digisolutions/ui 0.24.5 → 0.24.8

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

@@ -124,23 +124,19 @@
 	) {
 		e.preventDefault();
 		const columnIndex = columnId ? manager.state.visibleColumns.indexOf(columnId) : null;
-		// 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 {
+		// Reset menu state and set new coordinates
+		rightMenu = { open: false, x: 0, y: 0 };
+		tick().then(() => {
 			rightMenu = { open: true, x: e.clientX, y: e.clientY };
-		}
-		rightClickContext = {
-			row,
-			rowIndex,
-			columnId,
-			columnIndex,
-			event: e,
-			column: columnId ? manager.getColumn(columnId) : null
-		} as TDataTableCellContext<T>;
+			rightClickContext = {
+				row,
+				rowIndex,
+				columnId,
+				columnIndex,
+				event: e,
+				column: columnId ? manager.getColumn(columnId) : null
+			} as TDataTableCellContext<T>;
+		});
 	}
 
 	function selectedRows(): T[] {
@@ -148,7 +144,10 @@
 		return manager.state.items.filter((r) => ids.has(rowId(r)));
 	}
 
-	// Tracks
+	const selectedRowsItems = $derived.by(() => {
+		return selectedRows();
+	});
+
 	function colTrack(cId: string, measuring: boolean) {
 		if (measuring) return 'max-content';
 		const c = manager.getColumn(cId);
@@ -291,7 +290,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)}
 							>
@@ -384,7 +383,7 @@
 		x={rightMenu.x}
 		y={rightMenu.y}
 		context={rightClickContext}
-		items={(actions?.(selectedRows(), rightClickContext) ?? []).map((a) => ({
+		items={(actions?.(selectedRowsItems, rightClickContext) ?? []).map((a) => ({
 			...a,
 			onClick: a.onClick
 		}))}

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

@@ -5,14 +5,19 @@
 	function portal(node: HTMLElement, target: HTMLElement | null = null) {
 		const tgt = target ?? document.body;
 		const placeholder = document.createComment('portal-placeholder');
-		if (!node.parentNode) return { destroy: () => {} };
-		node.parentNode.insertBefore(placeholder, node);
+		if (node.parentNode) {
+			node.parentNode.insertBefore(placeholder, node);
+		}
+		// Remove any existing menu instances
+		const existingMenus = document.querySelectorAll('.context-menu-portal');
+		existingMenus.forEach((menu) => menu.remove());
+		// Add class for identification
+		node.classList.add('context-menu-portal');
 		tgt.appendChild(node);
 		return {
 			destroy() {
 				if (node.isConnected) node.remove();
 				if (placeholder.isConnected && placeholder.parentNode) {
-					placeholder.parentNode.insertBefore(node, placeholder);
 					placeholder.remove();
 				}
 			}
@@ -41,6 +46,7 @@
 		context?: any;
 		portalTarget?: HTMLElement | null;
 	};
+
 	let {
 		items = [],
 		x = 0,
@@ -65,6 +71,12 @@
 		q = '';
 		x = 0;
 		y = 0;
+		if (menuEl) {
+			menuEl.style.left = '0px';
+			menuEl.style.top = '0px';
+			menuEl.remove();
+			menuEl = null;
+		}
 	}
 
 	function hasChildren(it: TContextMenuEntry) {
@@ -170,40 +182,21 @@
 		};
 	});
 
-	// Clamp de posición tras abrir o cambiar coords
+	// Aplicar posición tras abrir o cambiar coords
 	$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);
-			if (nx !== x || ny !== y) {
-				x = nx;
-				y = ny;
-			}
-		});
+		const rect = menuEl.getBoundingClientRect();
+		const { x: nx, y: ny } = clampToViewport(x, y, rect.width, rect.height, 8);
+		menuEl.style.left = `${nx}px`;
+		menuEl.style.top = `${ny}px`;
 	});
 </script>
 
 {#if open}
-	<!-- BACKDROP -->
-	<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Ú -->
 	<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`}
+		class="context-menu-portal fixed z-[2147483647] w-72 rounded-2xl bg-white p-2 shadow-xl ring-1 ring-black/5 dark:bg-gray-900"
 		oncontextmenu={(e) => e.preventDefault()}
 	>
 		<div class="flex items-center gap-1 px-1 py-1">
@@ -241,42 +234,46 @@
 		<div
 			class="max-h-72 overflow-auto rounded-xl border border-gray-200 p-1 dark:border-gray-800 dark:bg-gray-950"
 		>
-			{#each filtered as it}
-				{#if it.kind === 'divider'}
-					<div class="my-1 border-t border-gray-200 dark:border-gray-800"></div>
-				{:else if it.kind === 'label'}
-					<div class="px-3 py-1 text-[11px] tracking-wide uppercase opacity-60">{it.label}</div>
-				{: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
-								>
-							{/if}
-							{#if hasChildren(it)}
-								<svg
-									width="14"
-									height="14"
-									viewBox="0 0 24 24"
-									class="opacity-60"
-									fill="none"
-									stroke="currentColor"
-									stroke-width="2"
-									stroke-linecap="round"
-									stroke-linejoin="round"><polyline points="9 18 15 12 9 6" /></svg
-								>
-							{/if}
-						</span>
-					</button>
-				{/if}
-			{/each}
+			{#if filtered.length}
+				{#each filtered as it}
+					{#if it.kind === 'divider'}
+						<div class="my-1 border-t border-gray-200 dark:border-gray-800"></div>
+					{:else if it.kind === 'label'}
+						<div class="px-3 py-1 text-[11px] tracking-wide uppercase opacity-60">{it.label}</div>
+					{: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
+									>
+								{/if}
+								{#if hasChildren(it)}
+									<svg
+										width="14"
+										height="14"
+										viewBox="0 0 24 24"
+										class="opacity-60"
+										fill="none"
+										stroke="currentColor"
+										stroke-width="2"
+										stroke-linecap="round"
+										stroke-linejoin="round"><polyline points="9 18 15 12 9 6" /></svg
+									>
+								{/if}
+							</span>
+						</button>
+					{/if}
+				{/each}
+			{:else}
+				<div class="my-1 border-t border-gray-200 dark:border-gray-800">No hay resultados</div>
+			{/if}
 		</div>
 	</div>
 {/if}

package/dist/components/index.d.ts

@@ -21,11 +21,6 @@ import Checkbox from './ui/Checkbox/Checkbox.svelte';
 import Badge from './ui/Badge/Badge.svelte';
 import NoContent from './ui/NoContent/NoContent.svelte';
 import Tag from './ui/Tag/Tag.svelte';
-import Dialog from './ui/Dialog/Dialog.svelte';
-import DialogHeader from './ui/Dialog/DialogHeader.svelte';
-import DialogTitle from './ui/Dialog/DialogTitle.svelte';
-import DialogDescription from './ui/Dialog/DialogDescription.svelte';
-import DialogContent from './ui/Dialog/DialogContent.svelte';
-import DialogFooter from './ui/Dialog/DialogFooter.svelte';
+export * from './ui/Dialog/index.js';
 import Selector from './ui/Selector/Selector.svelte';
-export { Selector, Dialog, DialogHeader, DialogTitle, DialogDescription, DialogContent, DialogFooter, Tag, NoContent, Alert, Avatar, Button, Badge, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Container, Checkbox, Field, Section, Loading, TableList, Heading, Label, Input, InputRadio, Textarea, };
+export { Selector, Tag, NoContent, Alert, Avatar, Button, Badge, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Container, Checkbox, Field, Section, Loading, TableList, Heading, Label, Input, InputRadio, Textarea, };

package/dist/components/index.js

@@ -21,11 +21,6 @@ import Checkbox from './ui/Checkbox/Checkbox.svelte';
 import Badge from './ui/Badge/Badge.svelte';
 import NoContent from './ui/NoContent/NoContent.svelte';
 import Tag from './ui/Tag/Tag.svelte';
-import Dialog from './ui/Dialog/Dialog.svelte';
-import DialogHeader from './ui/Dialog/DialogHeader.svelte';
-import DialogTitle from './ui/Dialog/DialogTitle.svelte';
-import DialogDescription from './ui/Dialog/DialogDescription.svelte';
-import DialogContent from './ui/Dialog/DialogContent.svelte';
-import DialogFooter from './ui/Dialog/DialogFooter.svelte';
+export * from './ui/Dialog/index.js';
 import Selector from './ui/Selector/Selector.svelte';
-export { Selector, Dialog, DialogHeader, DialogTitle, DialogDescription, DialogContent, DialogFooter, Tag, NoContent, Alert, Avatar, Button, Badge, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Container, Checkbox, Field, Section, Loading, TableList, Heading, Label, Input, InputRadio, Textarea, };
+export { Selector, Tag, NoContent, Alert, Avatar, Button, Badge, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Container, Checkbox, Field, Section, Loading, TableList, Heading, Label, Input, InputRadio, Textarea, };

package/dist/components/ui/Dialog/context.svelte.d.ts

@@ -1,7 +1,7 @@
 import { ModalContext } from './ModalContext.svelte';
-export declare const KEY: unique symbol;
-export interface DialogActions {
+export declare const KEY_DIALOG: unique symbol;
+export interface IDialogActions {
     onOpenChange?(open: boolean): void;
 }
-export declare function createDialogContext(fn_open: any, actions?: DialogActions): ModalContext;
+export declare function createDialogContext(fn_open: any, actions?: IDialogActions): ModalContext;
 export declare function useDialogContext(): ModalContext;

package/dist/components/ui/Dialog/context.svelte.js

@@ -1,9 +1,9 @@
 import { getContext, setContext } from 'svelte';
 import { ModalContext } from './ModalContext.svelte';
-export const KEY = Symbol('Dialog');
+export const KEY_DIALOG = Symbol('Dialog');
 export function createDialogContext(fn_open, actions = {}) {
     const context = new ModalContext(fn_open());
-    setContext(KEY, context);
+    setContext(KEY_DIALOG, context);
     $effect(() => {
         context.open = fn_open();
         actions.onOpenChange?.(context.open);
@@ -15,5 +15,5 @@ export function createDialogContext(fn_open, actions = {}) {
     return context;
 }
 export function useDialogContext() {
-    return getContext(KEY);
+    return getContext(KEY_DIALOG);
 }

package/dist/components/ui/Dialog/index.d.ts

@@ -0,0 +1,8 @@
+import Dialog from './Dialog.svelte';
+import DialogTitle from './DialogTitle.svelte';
+import DialogDescription from './DialogDescription.svelte';
+import DialogContent from './DialogContent.svelte';
+import DialogHeader from './DialogHeader.svelte';
+import DialogFooter from './DialogFooter.svelte';
+export * from './context.svelte.js';
+export { Dialog, DialogTitle, DialogDescription, DialogContent, DialogHeader, DialogFooter };

package/dist/components/ui/Dialog/index.js

@@ -0,0 +1,8 @@
+import Dialog from './Dialog.svelte';
+import DialogTitle from './DialogTitle.svelte';
+import DialogDescription from './DialogDescription.svelte';
+import DialogContent from './DialogContent.svelte';
+import DialogHeader from './DialogHeader.svelte';
+import DialogFooter from './DialogFooter.svelte';
+export * from './context.svelte.js';
+export { Dialog, DialogTitle, DialogDescription, DialogContent, DialogHeader, DialogFooter };

package/package.json

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