@voithos-labs/aragonite 0.10.2 → 0.10.3

package/dist/components/blocks/table/TableActionMenu.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { keepFlyoutOnScreen } from '../../menu/flyout-placement';
 	import {
 		clampMenuToViewport,
 		type TableMenuItem,
@@ -12,6 +13,27 @@
 		COLUMN_ALIGNMENT,
 		TABLE_ACTIONS
 	} from '../../../a11y-strings';
+	import MenuIcon, { type MenuIconName } from '../../menu/MenuIcon.svelte';
+	import { tick, untrack } from 'svelte';
+
+	// The glyph each entry carries, limestone's context-menu convention: an icon slot per row,
+	// the destructive rows in the accent.
+	const ICONS: Record<TableAxisAction | ClipboardAction, MenuIconName> = {
+		insertRowAbove: 'plus',
+		insertRowBelow: 'plus',
+		insertColumnLeft: 'plus',
+		insertColumnRight: 'plus',
+		moveRowUp: 'arrow-up',
+		moveRowDown: 'arrow-down',
+		moveColumnLeft: 'arrow-left',
+		moveColumnRight: 'arrow-right',
+		deleteRow: 'trash',
+		deleteColumn: 'trash',
+		cycleAlignment: 'align-left',
+		cut: 'scissors',
+		copy: 'copy',
+		paste: 'clipboard'
+	};
 
 	let {
 		items,
@@ -21,11 +43,14 @@
 		onclipboard,
 		onalign,
 		onclose,
-		onescape
+		onescape,
+		anchor
 	}: {
 		items: TableMenuItem[];
 		x: number;
 		y: number;
+		/** Where the open point is NOW, re-read on scroll and resize so the menu stays on it. */
+		anchor?: () => { x: number; y: number } | null;
 		onaction: (action: TableAxisAction, index: number) => void;
 		onclipboard: (action: ClipboardAction) => void;
 		onalign: (alignment: 'left' | 'center' | 'right') => void;
@@ -34,23 +59,46 @@
 	} = $props();
 
 	let menuEl: HTMLDivElement | undefined = $state();
+	/** The open flyout, if any: hover or ArrowRight on its row opens it, ArrowLeft closes it. */
+	let openGroup = $state<'row' | 'column' | null>(null);
 
-	// Resolved once the menu's measured size is known; until then the template falls back
-	// to the raw open coordinate, which the post-mount measure corrects before it paints.
-	let clamped = $state<{ x: number; y: number } | null>(null);
+	// The open point, viewport coordinates, re-read on scroll and resize so the menu stays on
+	// what it opened on and leaves the viewport with it — never re-clamped into view, which
+	// would float it over unrelated content. The clamp runs once, when the size is first known,
+	// and its shift rides along as a constant offset.
+	// svelte-ignore state_referenced_locally
+	let at = $state({ x, y });
+	let shift = $state<{ x: number; y: number } | null>(null);
 	$effect(() => {
-		if (!menuEl) return;
+		const follow = () => {
+			const next = anchor?.();
+			if (next) at = next;
+		};
+		window.addEventListener('scroll', follow, { capture: true, passive: true });
+		window.addEventListener('resize', follow, { passive: true });
+		return () => {
+			window.removeEventListener('scroll', follow, { capture: true });
+			window.removeEventListener('resize', follow);
+		};
+	});
+	$effect(() => {
+		if (!menuEl || shift) return;
 		const rect = menuEl.getBoundingClientRect();
-		clamped = clampMenuToViewport(
+		const clamped = clampMenuToViewport(
 			{ x, y },
 			{ width: rect.width, height: rect.height },
 			{ width: window.innerWidth, height: window.innerHeight }
 		);
+		shift = { x: clamped.x - x, y: clamped.y - y };
 	});
+	const left = $derived(at.x + (shift?.x ?? 0));
+	const top = $derived(at.y + (shift?.y ?? 0));
 
 	// The first enabled item is the keyboard entry point; disabled items are never stops.
+	// Untracked: `focusStop` reads the open flyout, and a tracked read here would re-run this
+	// mount-time landing every time a flyout opened, pulling focus straight back out of it.
 	$effect(() => {
-		if (menuEl) focusStop(0);
+		if (menuEl) untrack(() => focusStop(0));
 	});
 
 	$effect(() => {
@@ -90,7 +138,27 @@
 		const stops = focusableStops();
 		if (stops.length === 0) return;
 		const n = stops.length;
-		stops[((index % n) + n) % n].focus();
+		const stop = stops[((index % n) + n) % n];
+		stop.focus();
+		// Focus that leaves an open flyout (and its own row) closes it, so the list reads as one.
+		if (
+			openGroup &&
+			!stop.closest('.table-action-menu-flyout') &&
+			stop.dataset.group !== openGroup
+		) {
+			openGroup = null;
+		}
+	}
+
+	/** Open a group's flyout and land on its first enabled item. */
+	function openFlyout(id: 'row' | 'column'): void {
+		openGroup = id;
+		void tick().then(() => {
+			const first = menuEl?.querySelector<HTMLElement>(
+				'.table-action-menu-flyout [role="menuitem"]:not([disabled])'
+			);
+			first?.focus();
+		});
 	}
 
 	function activeStopIndex(stops: HTMLElement[]): number {
@@ -121,10 +189,30 @@
 				e.preventDefault();
 				focusStop(last);
 				return;
-			case 'ArrowRight':
-			case 'ArrowLeft':
+			case 'ArrowRight': {
+				const group = (document.activeElement as HTMLElement | null)?.dataset.group;
+				if (group === 'row' || group === 'column') {
+					e.preventDefault();
+					openFlyout(group);
+					return;
+				}
+				moveWithinAlignment(e);
+				return;
+			}
+			case 'ArrowLeft': {
+				const inFlyout = (document.activeElement as HTMLElement | null)?.closest(
+					'.table-action-menu-flyout'
+				);
+				if (inFlyout && openGroup) {
+					e.preventDefault();
+					const row = menuEl?.querySelector<HTMLElement>(`[data-group="${openGroup}"]`);
+					openGroup = null;
+					row?.focus();
+					return;
+				}
 				moveWithinAlignment(e);
 				return;
+			}
 		}
 	}
 
@@ -140,44 +228,78 @@
 		segments[(((i + delta) % n) + n) % n].focus();
 	}
 
+	// The actions that live inside a flyout: hovering one keeps its flyout open; hovering a
+	// top-level row closes whichever flyout is open.
+	const GROUPED = new Set<TableAxisAction>([
+		'insertRowAbove',
+		'insertRowBelow',
+		'moveRowUp',
+		'moveRowDown',
+		'insertColumnLeft',
+		'insertColumnRight',
+		'moveColumnLeft',
+		'moveColumnRight'
+	]);
+	const isGrouped = (action: TableAxisAction): boolean => GROUPED.has(action);
+
 	// 'none' renders identically to 'left', so the left segment reads active for both.
-	// Visible text stays L/C/R; the accessible name carries the full word.
+	// The glyph is the visible label; the accessible name carries the full word.
 	const alignmentSegments = [
-		{ value: 'left', label: 'L', name: ALIGN_LEFT },
-		{ value: 'center', label: 'C', name: ALIGN_CENTER },
-		{ value: 'right', label: 'R', name: ALIGN_RIGHT }
+		{ value: 'left', icon: 'align-left', name: ALIGN_LEFT },
+		{ value: 'center', icon: 'align-center', name: ALIGN_CENTER },
+		{ value: 'right', icon: 'align-right', name: ALIGN_RIGHT }
 	] as const;
 </script>
 
 <div
 	bind:this={menuEl}
-	class="table-action-menu"
+	class="md-menu table-action-menu"
 	role="menu"
 	aria-label={TABLE_ACTIONS}
 	tabindex="-1"
-	style:left="{clamped ? clamped.x : x}px"
-	style:top="{clamped ? clamped.y : y}px"
+	style:left="{left}px"
+	style:top="{top}px"
 	onkeydown={onMenuKeyDown}
 >
 	{#each items as item, i (i)}
 		{#if item.kind === 'action' || item.kind === 'clipboard'}
-			{@const activate =
-				item.kind === 'action'
-					? () => onaction(item.action, item.index)
-					: () => onclipboard(item.action)}
-			<button
-				type="button"
-				role="menuitem"
-				tabindex="-1"
-				class="table-action-menu-item"
-				disabled={!item.enabled}
-				aria-disabled={!item.enabled}
-				onclick={activate}
-			>
-				{item.label}
-			</button>
+			{@render actionRow(item)}
+		{:else if item.kind === 'group'}
+			<div class="table-action-menu-group" role="presentation">
+				<button
+					type="button"
+					role="menuitem"
+					tabindex="-1"
+					class="md-menu-item table-action-menu-item"
+					data-group={item.id}
+					aria-haspopup="menu"
+					aria-expanded={openGroup === item.id}
+					onpointerenter={() => (openGroup = item.id)}
+					onclick={() => openFlyout(item.id)}
+				>
+					<span class="md-menu-icon"
+						><MenuIcon name={item.id === 'row' ? 'rows-2' : 'columns-2'} /></span
+					>
+					<span class="table-action-menu-label">{item.label}</span>
+					<span class="md-menu-icon"><MenuIcon name="chevron-right" size={13} /></span>
+				</button>
+				{#if openGroup === item.id}
+					<div
+						class="md-menu table-action-menu-flyout"
+						role="menu"
+						aria-label={item.label}
+						{@attach keepFlyoutOnScreen}
+					>
+						{#each item.items as sub, j (j)}
+							{#if sub.kind === 'action' || sub.kind === 'clipboard'}
+								{@render actionRow(sub)}
+							{/if}
+						{/each}
+					</div>
+				{/if}
+			</div>
 		{:else if item.kind === 'separator'}
-			<div class="table-action-menu-separator" role="separator"></div>
+			<div class="md-menu-divider table-action-menu-separator" role="separator"></div>
 		{:else}
 			<div class="table-action-menu-alignment" role="group" aria-label={COLUMN_ALIGNMENT}>
 				{#each alignmentSegments as seg (seg.value)}
@@ -190,7 +312,8 @@
 						tabindex="-1"
 						aria-label={seg.name}
 						aria-pressed={active}
-						onclick={() => onalign(seg.value)}>{seg.label}</button
+						title={seg.name}
+						onclick={() => onalign(seg.value)}><MenuIcon name={seg.icon} /></button
 					>
 				{/each}
 			</div>
@@ -198,70 +321,71 @@
 	{/each}
 </div>
 
+{#snippet actionRow(item: Extract<TableMenuItem, { kind: 'action' | 'clipboard' }>)}
+	{@const activate =
+		item.kind === 'action'
+			? () => onaction(item.action, item.index)
+			: () => onclipboard(item.action)}
+	<button
+		type="button"
+		role="menuitem"
+		tabindex="-1"
+		class="md-menu-item table-action-menu-item"
+		disabled={!item.enabled}
+		aria-disabled={!item.enabled}
+		onpointerenter={() => {
+			if (!(item.kind === 'action' && isGrouped(item.action))) openGroup = null;
+		}}
+		onclick={activate}
+	>
+		<span class="md-menu-icon"><MenuIcon name={ICONS[item.action]} /></span>
+		<span class="table-action-menu-label">{item.label}</span>
+	</button>
+{/snippet}
+
 <style>
-	.table-action-menu {
-		position: fixed;
-		z-index: 30;
-		min-width: 11rem;
-		padding: 0.25rem;
+	/* The surface, rows, icons and dividers are the shared `.md-menu` family (editor.css); only
+	   the alignment trio is this menu's own — three glyph buttons on one row, the active one
+	   lifted like a hover. */
+	.table-action-menu-alignment {
 		display: flex;
-		flex-direction: column;
-		background: var(--color-surface, #fff);
-		border: 1px solid var(--color-ui-muted, #a4a4a4);
-		border-radius: 6px;
-		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
-		font-size: 0.9em;
-		user-select: none;
-	}
-
-	.table-action-menu-item {
-		display: block;
-		width: 100%;
-		padding: 0.3rem 0.55rem;
-		border: 0;
-		border-radius: 4px;
-		background: transparent;
-		text-align: left;
-		font: inherit;
-		color: inherit;
-		cursor: pointer;
+		gap: 2px;
+		padding: 4px 6px;
 	}
-	.table-action-menu-item:hover:not(:disabled) {
-		background: var(--color-ui-faint, rgba(255, 255, 255, 0.07));
-	}
-	.table-action-menu-item:disabled {
-		opacity: 0.4;
-		cursor: default;
+	.table-action-menu-label {
+		flex: 1;
 	}
-
-	.table-action-menu-separator {
-		height: 1px;
-		margin: 0.25rem 0.3rem;
-		background: var(--color-ui-muted, #a4a4a4);
-		opacity: 0.5;
+	.table-action-menu-group {
+		position: relative;
 	}
-
-	.table-action-menu-alignment {
-		display: flex;
-		gap: 0.2rem;
-		padding: 0.3rem 0.55rem;
+	/* limestone's submenu: a second surface hung off the row's right edge. */
+	.table-action-menu-flyout {
+		position: absolute;
+		left: 100%;
+		top: -4px;
+		margin-left: 4px;
+		white-space: nowrap;
 	}
 	.alignment-segment {
 		flex: 1;
-		padding: 0.1rem 0;
-		text-align: center;
-		border: 1px solid var(--color-ui-muted, #a4a4a4);
-		border-radius: 4px;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		height: 26px;
+		padding: 0;
+		border: 0;
+		border-radius: 5px;
 		background: transparent;
-		font: inherit;
-		color: var(--color-ui-muted, #a4a4a4);
+		color: var(--color-ui-muted, #8f8f89);
 		cursor: pointer;
 	}
-	.alignment-segment:hover {
-		background: var(--color-ui-faint, rgba(255, 255, 255, 0.07));
+	.alignment-segment:hover,
+	.alignment-segment:focus-visible,
+	.alignment-segment.active {
+		background: var(--menu-item-hover, rgba(255, 255, 255, 0.07));
+		outline: none;
 	}
 	.alignment-segment.active {
-		color: var(--color-accent, #567b67);
-		border-color: var(--color-accent, #567b67);
+		color: var(--color-text-primary, #e8e8e5);
 	}
 </style>

package/dist/components/blocks/table/TableActionMenu.svelte.d.ts

@@ -4,6 +4,11 @@ type $$ComponentProps = {
     items: TableMenuItem[];
     x: number;
     y: number;
+    /** Where the open point is NOW, re-read on scroll and resize so the menu stays on it. */
+    anchor?: () => {
+        x: number;
+        y: number;
+    } | null;
     onaction: (action: TableAxisAction, index: number) => void;
     onclipboard: (action: ClipboardAction) => void;
     onalign: (alignment: 'left' | 'center' | 'right') => void;