@r2digisolutions/ui 0.23.0 → 0.24.1

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

@@ -1,5 +1,7 @@
 <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[];
@@ -9,6 +11,8 @@
 		title?: string;
 		searchable?: boolean;
 		context?: any;
+		// por si algún día quieres desactivar el portal:
+		portalTarget?: HTMLElement | null;
 	};
 	let {
 		items = [],
@@ -17,7 +21,8 @@
 		open = $bindable(false),
 		title = '',
 		searchable = true,
-		context = null
+		context = null,
+		portalTarget = null
 	}: Props = $props();
 
 	let stack = $state<{ label: string; items: TContextMenuEntry[] }[]>([]);
@@ -61,7 +66,6 @@
 		const query = q.trim().toLowerCase();
 		let arr = query ? list.filter((it) => matches(it, query)) : list.slice();
 
-		// limpiar divisores (sin duplicados, ni al principio/fin)
 		const out: TContextMenuEntry[] = [];
 		let prevDiv = false;
 		for (const it of arr) {
@@ -100,20 +104,44 @@
 		document.addEventListener('keydown', handler);
 		return () => document.removeEventListener('keydown', handler);
 	});
+
+	// --- CLAMP dinámico al abrir o al cambiar x/y ---
+	let menuEl: HTMLDivElement | null = $state(null);
+
+	$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
+			if (nx !== x || ny !== y) {
+				x = nx;
+				y = ny;
+			}
+		});
+	});
 </script>
 
 {#if open}
+	<!-- BACKDROP: va al body por el portal también -->
 	<div
+		use:portal={portalTarget}
 		role="dialog"
-		class="fixed inset-0 z-40"
+		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
-		class="fixed z-50 w-72 rounded-2xl bg-white p-2 shadow-xl ring-1 ring-black/5 dark:bg-gray-900"
+		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`}
 		oncontextmenu={(e) => e.preventDefault()}
 	>
@@ -133,8 +161,10 @@
 						stroke="currentColor"
 						stroke-width="2"
 						stroke-linecap="round"
-						stroke-linejoin="round"><polyline points="15 18 9 12 15 6" /></svg
+						stroke-linejoin="round"
 					>
+						<polyline points="15 18 9 12 15 6" />
+					</svg>
 				</button>
 			{/if}
 			<div class="min-w-0 flex-1 truncate px-1 text-xs font-medium opacity-70">
@@ -181,8 +211,10 @@
 									stroke="currentColor"
 									stroke-width="2"
 									stroke-linecap="round"
-									stroke-linejoin="round"><polyline points="9 18 15 12 9 6" /></svg
+									stroke-linejoin="round"
 								>
+									<polyline points="9 18 15 12 9 6" />
+								</svg>
 							{/if}
 						</span>
 					</button>

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

@@ -7,6 +7,7 @@ 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/dist/components/container/DataTable/utils/portal.d.ts

@@ -0,0 +1,3 @@
+export declare function portal(node: HTMLElement, target?: HTMLElement | null): {
+    destroy(): void;
+};

package/dist/components/container/DataTable/utils/portal.js

@@ -0,0 +1,13 @@
+export function portal(node, target = null) {
+    const tgt = target ?? document.body;
+    const placeholder = document.createComment('portal-placeholder');
+    node.parentNode?.insertBefore(placeholder, node);
+    tgt.appendChild(node);
+    return {
+        destroy() {
+            node.remove();
+            placeholder.parentNode?.insertBefore(node, placeholder);
+            placeholder.remove();
+        }
+    };
+}

package/dist/components/container/DataTable/utils/position.d.ts

@@ -0,0 +1,4 @@
+export declare function clampToViewport(x: number, y: number, menuW: number, menuH: number, padding?: number): {
+    x: number;
+    y: number;
+};

package/dist/components/container/DataTable/utils/position.js

@@ -0,0 +1,11 @@
+export function clampToViewport(x, y, menuW, menuH, padding = 8) {
+    const vw = document.documentElement.clientWidth;
+    const vh = document.documentElement.clientHeight;
+    let nx = x;
+    let ny = y;
+    if (nx + menuW + padding > vw)
+        nx = Math.max(padding, vw - menuW - padding);
+    if (ny + menuH + padding > vh)
+        ny = Math.max(padding, vh - menuH - padding);
+    return { x: nx, y: ny };
+}

package/dist/components/index.d.ts

@@ -27,4 +27,5 @@ 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 { 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, };
+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, };

package/dist/components/index.js

@@ -27,4 +27,5 @@ 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 { 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, };
+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, };

package/dist/components/ui/Selector/Selector.svelte

@@ -0,0 +1,102 @@
+<script lang="ts" generics="M extends string">
+	interface ModeOption<M extends string> {
+		id: M;
+		label: string;
+		icon?: any;
+		disabled?: boolean;
+		tooltip?: string;
+	}
+
+	interface Props<M extends string> {
+		modes: ModeOption<M>[];
+		currentMode: M; // bindable
+		onModeChange?: (m: M) => void;
+		activation?: 'auto' | 'manual';
+	}
+
+	let {
+		modes,
+		currentMode = $bindable<M>(),
+		onModeChange,
+		activation = 'auto'
+	}: Props<M> = $props();
+
+	const buttons = new Map<M, HTMLButtonElement>();
+
+	function focusActive() {
+		const el = buttons.get(currentMode);
+		queueMicrotask(() => el?.focus());
+	}
+
+	function change(m: M) {
+		if (m === currentMode) return;
+		currentMode = m;
+		onModeChange?.(m);
+		focusActive();
+	}
+
+	function onKeydown(e: KeyboardEvent) {
+		const horiz = e.key === 'ArrowLeft' || e.key === 'ArrowRight';
+		const vert = e.key === 'ArrowUp' || e.key === 'ArrowDown';
+		const home = e.key === 'Home';
+		const end = e.key === 'End';
+
+		if (!horiz && !vert && !home && !end) return;
+
+		e.preventDefault();
+		const enabled = modes.filter((m) => !m.disabled);
+		if (enabled.length === 0) return;
+
+		const curIdx = enabled.findIndex((m) => m.id === currentMode);
+		const idx = curIdx === -1 ? 0 : curIdx;
+
+		if (home) return change(enabled[0].id);
+		if (end) return change(enabled[enabled.length - 1].id);
+
+		const dir = e.key === 'ArrowRight' || e.key === 'ArrowDown' ? 1 : -1;
+		const nextIndex = (idx + dir + enabled.length) % enabled.length;
+		change(enabled[nextIndex].id);
+	}
+</script>
+
+<div
+	class="flex rounded-lg bg-gray-100 p-1"
+	role="tablist"
+	aria-label="Seleccionar vista"
+	aria-orientation="horizontal"
+	onkeydown={onKeydown}
+	tabindex="0"
+>
+	{#each modes as m (m.id)}
+		<button
+			bind:this={
+				() => buttons.get(m.id),
+				(el) => {
+					if (el) buttons.set(m.id, el);
+				}
+			}
+			type="button"
+			role="tab"
+			aria-selected={currentMode === m.id}
+			aria-controls={undefined}
+			disabled={m.disabled}
+			tabindex={currentMode === m.id ? 0 : -1}
+			onfocus={() => {
+				if (activation === 'auto' && !m.disabled && currentMode !== m.id) {
+					change(m.id);
+				}
+			}}
+			onclick={() => !m.disabled && change(m.id)}
+			class={`flex items-center space-x-1 rounded-md px-3 py-2 text-sm font-medium transition-all
+        ${currentMode === m.id ? 'bg-white text-purple-600 shadow-sm' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'}
+        ${m.disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}
+        focus:outline-none focus-visible:ring-2 focus-visible:ring-purple-500 focus-visible:ring-offset-1`}
+			title={m.tooltip ?? m.label}
+		>
+			{#if m.icon}
+				<m.icon class="h-4 w-4" />
+			{/if}
+			<span class="hidden sm:inline">{m.label}</span>
+		</button>
+	{/each}
+</div>

package/dist/components/ui/Selector/Selector.svelte.d.ts

@@ -0,0 +1,37 @@
+interface ModeOption<M extends string> {
+    id: M;
+    label: string;
+    icon?: any;
+    disabled?: boolean;
+    tooltip?: string;
+}
+interface Props<M extends string> {
+    modes: ModeOption<M>[];
+    currentMode: M;
+    onModeChange?: (m: M) => void;
+    activation?: 'auto' | 'manual';
+}
+declare function $$render<M extends string>(): {
+    props: Props<M>;
+    exports: {};
+    bindings: "currentMode";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<M extends string> {
+    props(): ReturnType<typeof $$render<M>>['props'];
+    events(): ReturnType<typeof $$render<M>>['events'];
+    slots(): ReturnType<typeof $$render<M>>['slots'];
+    bindings(): "currentMode";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <M extends string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<M>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<M>['props']>, ReturnType<__sveltets_Render<M>['events']>, ReturnType<__sveltets_Render<M>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<M>['bindings']>;
+    } & ReturnType<__sveltets_Render<M>['exports']>;
+    <M extends string>(internal: unknown, props: ReturnType<__sveltets_Render<M>['props']> & {}): ReturnType<__sveltets_Render<M>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Selector: $$IsomorphicComponent;
+type Selector<M extends string> = InstanceType<typeof Selector<M>>;
+export default Selector;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@r2digisolutions/ui",
-	"version": "0.23.0",
+	"version": "0.24.1",
 	"private": false,
 	"packageManager": "bun@1.2.23",
 	"publishConfig": {
@@ -53,20 +53,20 @@
 		"@playwright/test": "^1.55.1",
 		"@storybook/addon-essentials": "^8.6.14",
 		"@storybook/addon-interactions": "^8.6.14",
-		"@storybook/addon-svelte-csf": "5.0.8",
+		"@storybook/addon-svelte-csf": "5.0.10",
 		"@storybook/blocks": "^8.6.14",
-		"@storybook/svelte": "^9.1.8",
-		"@storybook/sveltekit": "^9.1.8",
+		"@storybook/svelte": "^9.1.10",
+		"@storybook/sveltekit": "^9.1.10",
 		"@storybook/test": "^8.6.14",
-		"@sveltejs/adapter-static": "^3.0.9",
-		"@sveltejs/kit": "^2.43.5",
+		"@sveltejs/adapter-static": "^3.0.10",
+		"@sveltejs/kit": "^2.44.0",
 		"@sveltejs/package": "^2.5.4",
 		"@sveltejs/vite-plugin-svelte": "^6.2.1",
-		"@tailwindcss/postcss": "^4.1.13",
+		"@tailwindcss/postcss": "^4.1.14",
 		"@testing-library/svelte": "^5.2.8",
 		"@vitest/browser": "^3.2.4",
 		"changeset": "^0.2.6",
-		"eslint": "^9.36.0",
+		"eslint": "^9.37.0",
 		"eslint-config-prettier": "^10.1.8",
 		"eslint-plugin-svelte": "^3.12.4",
 		"globals": "^16.4.0",
@@ -75,14 +75,14 @@
 		"prettier": "^3.6.2",
 		"prettier-plugin-svelte": "^3.4.0",
 		"prettier-plugin-tailwindcss": "^0.6.14",
-		"publint": "^0.3.13",
-		"storybook": "^9.1.8",
-		"svelte": "^5.39.6",
+		"publint": "^0.3.14",
+		"storybook": "^9.1.10",
+		"svelte": "^5.39.9",
 		"svelte-check": "^4.3.2",
-		"tailwindcss": "^4.1.13",
-		"typescript": "^5.9.2",
+		"tailwindcss": "^4.1.14",
+		"typescript": "^5.9.3",
 		"typescript-eslint": "^8.45.0",
-		"vite": "^7.1.7",
+		"vite": "^7.1.9",
 		"vitest": "^3.2.4"
 	},
 	"dependencies": {