@rokkit/ui 1.0.0-next.99 → 1.0.1

package/src/components/Dropdown.svelte

@@ -0,0 +1,202 @@
+<script lang="ts">
+	/**
+	 * Dropdown — Trigger that shows the selected value + dropdown panel with options.
+	 *
+	 * Similar to Menu but the trigger label reflects the currently selected value
+	 * instead of a static label prop.
+	 *
+	 * Data attributes:
+	 *   data-dropdown          — root container
+	 *   data-dropdown-trigger  — trigger button
+	 *   data-dropdown-icon     — optional icon in trigger
+	 *   data-dropdown-label    — selected value text in trigger
+	 *   data-dropdown-arrow    — expand/collapse chevron
+	 *   data-dropdown-panel    — dropdown options panel
+	 *   data-dropdown-option   — each option item
+	 *   data-dropdown-separator — separator between options
+	 *   data-active            — marks the currently selected option
+	 *   data-open              — present on root when panel is open
+	 *   data-size              — size variant (sm | md | lg)
+	 *   data-align             — panel alignment (start | end)
+	 *   data-direction         — panel direction (down | up)
+	 */
+	// @ts-nocheck
+	import { ProxyTree, Wrapper, messages } from '@rokkit/states'
+	import { Navigator, Trigger } from '@rokkit/actions'
+	import { DEFAULT_STATE_ICONS } from '@rokkit/core'
+
+	interface DropdownIcons {
+		opened?: string
+		closed?: string
+	}
+
+	let {
+		items = [],
+		fields = {},
+		value = $bindable(),
+		placeholder = messages.select,
+		icon,
+		size = 'md',
+		disabled = false,
+		showArrow = true,
+		align = 'start',
+		direction = 'down',
+		icons: userIcons = {} as DropdownIcons,
+		onchange,
+		class: className = ''
+	}: {
+		items?: unknown[]
+		fields?: Record<string, string>
+		value?: unknown
+		placeholder?: string
+		icon?: string
+		size?: string
+		disabled?: boolean
+		showArrow?: boolean
+		align?: 'start' | 'end'
+		direction?: 'up' | 'down'
+		icons?: DropdownIcons
+		onchange?: (value: unknown, item: unknown) => void
+		class?: string
+	} = $props()
+
+	const icons = $derived({ ...DEFAULT_STATE_ICONS.selector, ...userIcons })
+
+	// ─── State ────────────────────────────────────────────────────────────────
+
+	let isOpen = $state(false)
+	let rootRef = $state<HTMLElement | null>(null)
+	let triggerRef = $state<HTMLElement | null>(null)
+	let panelRef = $state<HTMLElement | null>(null)
+
+	// ─── Wrapper ──────────────────────────────────────────────────────────────
+
+	function handleSelect(v: unknown, proxy: unknown) {
+		if ((proxy as { disabled?: boolean }).disabled) return
+		value = v
+		onchange?.(v, (proxy as { original: unknown }).original)
+		isOpen = false
+		triggerRef?.focus()
+	}
+
+	const proxyTree = $derived(new ProxyTree(items, fields))
+	const wrapper = $derived(new Wrapper(proxyTree, { onselect: handleSelect }))
+
+	$effect(() => {
+		const w = wrapper
+		w.cancel = () => {
+			isOpen = false
+			triggerRef?.focus()
+		}
+		w.blur = () => {
+			isOpen = false
+		}
+	})
+
+	$effect(() => {
+		const _w = wrapper
+		if (isOpen) _w.first(null)
+	})
+
+	// ─── Trigger action ───────────────────────────────────────────────────────
+
+	$effect(() => {
+		if (!triggerRef || !rootRef || disabled) return
+		const t = new Trigger(triggerRef, rootRef, {
+			isOpen: () => isOpen,
+			onopen: () => {
+				isOpen = true
+				requestAnimationFrame(() => wrapper.first(null))
+			},
+			onclose: () => {
+				isOpen = false
+			},
+			onlast: () => requestAnimationFrame(() => wrapper.last(null))
+		})
+		return () => t.destroy()
+	})
+
+	// ─── Navigator on panel ───────────────────────────────────────────────────
+
+	$effect(() => {
+		if (!isOpen || !panelRef) return
+		const nav = new Navigator(panelRef, wrapper, { containScroll: true })
+		return () => nav.destroy()
+	})
+
+	// Focus sync — move DOM focus to focusedKey in panel
+	$effect(() => {
+		const key = wrapper.focusedKey
+		if (!isOpen || !panelRef || !key) return
+		requestAnimationFrame(() => {
+			const target = panelRef?.querySelector(`[data-path="${key}"]`) as HTMLElement | null
+			if (target && target !== document.activeElement) target.focus()
+		})
+	})
+
+	// ─── Selected label ───────────────────────────────────────────────────────
+
+	const selectedLabel = $derived.by(() => {
+		if (value === undefined || value === null) return null
+		for (const node of wrapper.flatView) {
+			if (node.proxy.value === value) return node.proxy.label
+		}
+		return String(value)
+	})
+</script>
+
+<div
+	bind:this={rootRef}
+	data-dropdown
+	data-open={isOpen || undefined}
+	data-size={size}
+	data-disabled={disabled || undefined}
+	data-align={align}
+	data-direction={direction}
+	class={className || undefined}
+>
+	<button
+		bind:this={triggerRef}
+		type="button"
+		data-dropdown-trigger
+		{disabled}
+		aria-haspopup="listbox"
+		aria-expanded={isOpen}
+	>
+		{#if icon}
+			<span data-dropdown-icon class={icon} aria-hidden="true"></span>
+		{/if}
+		<span data-dropdown-label>{selectedLabel ?? placeholder}</span>
+		{#if showArrow}
+			<span data-dropdown-arrow class={isOpen ? icons.opened : icons.closed} aria-hidden="true"
+			></span>
+		{/if}
+	</button>
+
+	{#if isOpen}
+		<div bind:this={panelRef} data-dropdown-panel role="listbox">
+			{#each wrapper.flatView as node (node.key)}
+				{@const proxy = node.proxy}
+				{@const isActive = proxy.value === value}
+
+				{#if node.type === 'separator'}
+					<hr data-dropdown-separator />
+				{:else}
+					<button
+						type="button"
+						data-dropdown-option
+						data-path={node.key}
+						data-active={isActive || undefined}
+						data-disabled={proxy.disabled || undefined}
+						disabled={proxy.disabled || disabled}
+						role="option"
+						aria-selected={isActive}
+						tabindex="-1"
+					>
+						<span data-dropdown-option-label>{proxy.label}</span>
+					</button>
+				{/if}
+			{/each}
+		</div>
+	{/if}
+</div>

package/src/components/FloatingAction.svelte

@@ -0,0 +1,367 @@
+<script lang="ts">
+	import type {
+		FloatingActionProps,
+		FloatingActionItem,
+		FloatingActionItemSnippet,
+		FloatingActionItemHandlers,
+		FloatingActionIcons
+	} from '../types/floating-action.js'
+	import { getSnippet } from '../types/floating-action.js'
+	import { ProxyItem } from '@rokkit/states'
+	import { DEFAULT_STATE_ICONS } from '@rokkit/core'
+
+	let {
+		items = [],
+		fields: userFields,
+		icons: userIcons = {} as FloatingActionIcons,
+		label = 'Actions',
+		size = 'md',
+		position = 'bottom-right',
+		expand = 'vertical',
+		itemAlign = 'center',
+		disabled = false,
+		open = $bindable(false),
+		backdrop = true,
+		contained = false,
+		onselect,
+		onopen,
+		onclose,
+		class: className = '',
+		item: itemSnippet,
+		...snippets
+	}: FloatingActionProps & { [key: string]: FloatingActionItemSnippet | unknown } = $props()
+
+	const icons = $derived({
+		add: DEFAULT_STATE_ICONS.action.add,
+		close: DEFAULT_STATE_ICONS.action.close,
+		...userIcons
+	})
+
+	/**
+	 * Create a ProxyItem for the given item
+	 */
+	function createProxy(item: FloatingActionItem): ProxyItem {
+		return new ProxyItem(item, userFields)
+	}
+
+	let fabRef = $state<HTMLDivElement | null>(null)
+	let focusedIndex = $state(-1)
+
+	// Flatten items for keyboard navigation (excluding disabled)
+	const flatItems = $derived.by(() => {
+		return items
+			.map((item) => ({ proxy: createProxy(item), original: item }))
+			.filter((item) => !item.proxy.disabled)
+	})
+
+	/**
+	 * Toggle the FAB open/closed
+	 */
+	function toggle() {
+		if (disabled) return
+		if (open) {
+			close()
+		} else {
+			openMenu()
+		}
+	}
+
+	/**
+	 * Open the FAB menu
+	 */
+	function openMenu() {
+		if (disabled || open) return
+		open = true
+		focusedIndex = 0
+		onopen?.()
+	}
+
+	/**
+	 * Close the FAB menu
+	 */
+	function close() {
+		if (!open) return
+		open = false
+		focusedIndex = -1
+		onclose?.()
+	}
+
+	/**
+	 * Handle item selection
+	 */
+	function handleItemClick(item: { proxy: ProxyItem; original: FloatingActionItem }) {
+		if (item.proxy.disabled) return
+		onselect?.(item.proxy.value, item.original)
+		close()
+		// Return focus to trigger
+		const trigger = fabRef?.querySelector('[data-fab-trigger]') as HTMLElement | undefined
+		trigger?.focus()
+	}
+
+	/**
+	 * Move DOM focus to the menu item at the given index
+	 */
+	function focusDomItem(index: number) {
+		const menu = fabRef?.querySelector('[data-fab-menu]')
+		if (!menu) return
+		const menuItems = menu.querySelectorAll('[data-fab-item]:not([data-disabled])')
+		const menuItem = menuItems[index] as HTMLElement | undefined
+		menuItem?.focus()
+	}
+
+	/**
+	 * Focus an item by index
+	 */
+	function focusItem(index: number) {
+		if (index < 0 || index >= flatItems.length) return
+		focusedIndex = index
+		focusDomItem(index)
+	}
+
+	/**
+	 * Handle keyboard navigation on trigger
+	 */
+	function handleTriggerKeyDown(event: KeyboardEvent) {
+		if (event.key === 'Enter' || event.key === ' ') {
+			event.preventDefault()
+			toggle()
+		} else if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+			event.preventDefault()
+			openMenu()
+		}
+	}
+
+	/**
+	 * Close menu and return focus to trigger
+	 */
+	function closeAndFocusTrigger() {
+		close()
+		const trigger = fabRef?.querySelector('[data-fab-trigger]') as HTMLElement | undefined
+		trigger?.focus()
+	}
+
+	/**
+	 * Activate the currently focused item
+	 */
+	function activateFocusedItem() {
+		if (focusedIndex >= 0 && focusedIndex < flatItems.length) {
+			handleItemClick(flatItems[focusedIndex])
+		}
+	}
+
+	function wrapNext(current: number, last: number): number {
+		return current < last ? current + 1 : 0
+	}
+
+	function wrapPrev(current: number, last: number): number {
+		return current > 0 ? current - 1 : last
+	}
+
+	function nextFabIndex(key: string, current: number, last: number): number {
+		if (key === 'ArrowDown') return wrapNext(current, last)
+		if (key === 'ArrowUp') return wrapPrev(current, last)
+		if (key === 'Home') return 0
+		if (key === 'End') return last
+		return -1
+	}
+
+	function handleFabNavMove(event: KeyboardEvent): boolean {
+		const last = flatItems.length - 1
+		const next = nextFabIndex(event.key, focusedIndex, last)
+		if (next === -1) return false
+		focusItem(next)
+		return true
+	}
+
+	function isActivateKey(key: string): boolean {
+		return key === 'Enter' || key === ' '
+	}
+
+	/**
+	 * Handle keyboard navigation when menu is open
+	 */
+	function handleKeyDown(event: KeyboardEvent) {
+		if (!open) return
+		if (event.key === 'Escape') {
+			event.preventDefault()
+			closeAndFocusTrigger()
+		} else if (isActivateKey(event.key)) {
+			event.preventDefault()
+			activateFocusedItem()
+		} else if (handleFabNavMove(event)) {
+			event.preventDefault()
+		}
+	}
+
+	/**
+	 * Handle item-specific keyboard events
+	 */
+	function handleItemKeyDown(
+		event: KeyboardEvent,
+		item: { proxy: ProxyItem; original: FloatingActionItem }
+	) {
+		if (event.key === 'Enter' || event.key === ' ') {
+			event.preventDefault()
+			handleItemClick(item)
+		}
+	}
+
+	/**
+	 * Handle click outside to close
+	 */
+	function handleClickOutside(event: MouseEvent) {
+		if (fabRef && !fabRef.contains(event.target as Node)) {
+			close()
+		}
+	}
+
+	/**
+	 * Handle backdrop click
+	 */
+	function handleBackdropClick() {
+		close()
+	}
+
+	/**
+	 * Create handlers object for custom snippets
+	 */
+	function createHandlers(item: {
+		proxy: ProxyItem
+		original: FloatingActionItem
+	}): FloatingActionItemHandlers {
+		return {
+			onclick: () => handleItemClick(item),
+			onkeydown: (event: KeyboardEvent) => handleItemKeyDown(event, item)
+		}
+	}
+
+	/**
+	 * Resolve which snippet to use for an item
+	 */
+	function resolveItemSnippet(proxy: ProxyItem): FloatingActionItemSnippet | null {
+		const snippetName = proxy.get('snippet')
+		if (snippetName) {
+			const namedSnippet = getSnippet(snippets, snippetName)
+			if (namedSnippet) {
+				return namedSnippet as FloatingActionItemSnippet
+			}
+		}
+		return itemSnippet ?? null
+	}
+
+	/**
+	 * Calculate item animation delay for stagger effect
+	 */
+	function getItemDelay(index: number): string {
+		return `${index * 50}ms`
+	}
+
+	// Set up click outside listener when open
+	$effect(() => {
+		if (open) {
+			document.addEventListener('click', handleClickOutside, true)
+			document.addEventListener('keydown', handleKeyDown)
+			// Focus first item after animation starts
+			requestAnimationFrame(() => {
+				if (flatItems.length > 0) {
+					focusItem(0)
+				}
+			})
+		}
+		return () => {
+			document.removeEventListener('click', handleClickOutside, true)
+			document.removeEventListener('keydown', handleKeyDown)
+		}
+	})
+</script>
+
+{#snippet defaultItem(
+	proxy: ProxyItem,
+	handlers: FloatingActionItemHandlers,
+	index: number,
+	total: number
+)}
+	<button
+		type="button"
+		data-fab-item
+		data-fab-index={index}
+		data-disabled={proxy.disabled || undefined}
+		disabled={proxy.disabled || disabled}
+		aria-label={proxy.label}
+		style="--fab-index: {index}; --fab-total: {total}; --fab-delay: {getItemDelay(index)}"
+		onclick={handlers.onclick}
+		onkeydown={handlers.onkeydown}
+	>
+		{#if proxy.get('icon')}
+			<span data-fab-item-icon class={proxy.get('icon')} aria-hidden="true"></span>
+		{/if}
+		{#if proxy.label}
+			<span data-fab-item-label>{proxy.label}</span>
+		{/if}
+	</button>
+{/snippet}
+
+{#snippet renderItem(
+	item: { proxy: ProxyItem; original: FloatingActionItem },
+	index: number,
+	total: number
+)}
+	{@const customSnippet = resolveItemSnippet(item.proxy)}
+	{@const handlers = createHandlers(item)}
+	{#if customSnippet}
+		<div
+			data-fab-item
+			data-fab-item-custom
+			data-fab-index={index}
+			data-disabled={item.proxy.disabled || undefined}
+			style="--fab-index: {index}; --fab-total: {total}; --fab-delay: {getItemDelay(index)}"
+		>
+			<svelte:boundary>
+				{@render customSnippet(item.original, item.proxy.fields, handlers)}
+				{#snippet failed()}
+					{@render defaultItem(item.proxy, handlers, index, total)}
+				{/snippet}
+			</svelte:boundary>
+		</div>
+	{:else}
+		{@render defaultItem(item.proxy, handlers, index, total)}
+	{/if}
+{/snippet}
+
+<div
+	bind:this={fabRef}
+	data-fab
+	data-open={open || undefined}
+	data-size={size}
+	data-position={position}
+	data-expand={expand}
+	data-item-align={itemAlign}
+	data-disabled={disabled || undefined}
+	data-contained={contained || undefined}
+	class={className || undefined}
+>
+	{#if backdrop && open}
+		<div data-fab-backdrop role="presentation" onclick={handleBackdropClick}></div>
+	{/if}
+
+	{#if open}
+		<div data-fab-menu role="menu" aria-label={label}>
+			{#each flatItems as item, index (index)}
+				{@render renderItem(item, index, flatItems.length)}
+			{/each}
+		</div>
+	{/if}
+
+	<button
+		type="button"
+		data-fab-trigger
+		{disabled}
+		aria-label={label}
+		aria-haspopup="menu"
+		aria-expanded={open}
+		onclick={toggle}
+		onkeydown={handleTriggerKeyDown}
+	>
+		<span data-fab-icon class={open ? icons.close : icons.add} aria-hidden="true"></span>
+	</button>
+</div>