@adea-ai/ui 0.69.1 → 0.70.0

package/src/components/composites/appearance-editor/appearance-rows.tsx

@@ -24,18 +24,33 @@
 // Retains the compact divided row and palette-preview selector from the pinned
 // Zeron/Adea composition; Kobalte owns option navigation and nested dismissal.
 import type { AdeaTheme, AdeaThemeRecord } from '@adea-ai/themes'
-import { Show, createMemo, createSignal, type JSX } from 'solid-js'
-import { Palette } from 'lucide-solid'
+import { For, Show, createMemo, createSignal, onCleanup, type JSX } from 'solid-js'
+import { ChevronDown, Palette } from 'lucide-solid'
 import { cn } from '#lib/utils'
+import { Button } from '../../ui/button/button'
 import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '../../ui/select/select'
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from '../../ui/dropdown-menu/dropdown-menu'
 import { PalettePreview } from './theme-preview'
 
+const POINTER_FOCUS_TARGET_SELECTOR =
+  'a[href], area[href], button, input, select, textarea, iframe, [tabindex], [contenteditable], details > summary:first-of-type'
+
+function isTabStop(element: HTMLElement) {
+  return (
+    (element.tabIndex >= 0 ||
+      (element.matches('details > summary:first-of-type') && !element.hasAttribute('tabindex'))) &&
+    !element.matches(':disabled') &&
+    element.getAttribute('aria-disabled') !== 'true' &&
+    element.closest('[hidden], [inert], [aria-hidden="true"]') === null &&
+    element.getClientRects().length > 0
+  )
+}
+
 export function SettingsRow(props: {
   title: string
   icon: JSX.Element
@@ -66,6 +81,13 @@ export function SettingsRow(props: {
   )
 }
 
+/**
+ * A compact persistent theme choice. Kobalte handles menu navigation and
+ * dismissal; this row moves Tab to the adjacent browser-reported stop because
+ * menus consume Tab by default. Enumerating elements and checking their native
+ * tabIndex keeps details summaries in the order while preserving explicit
+ * tabindex overrides.
+ */
 export function ThemeRow(props: {
   appearance: 'light' | 'dark'
   selectedId: string
@@ -75,6 +97,15 @@ export function ThemeRow(props: {
   onSelect: (id: string) => void
 }) {
   const [portalMount, setPortalMount] = createSignal<HTMLDivElement>()
+  const [triggerElement, setTriggerElement] = createSignal<HTMLButtonElement>()
+  const [menuOpen, setMenuOpen] = createSignal(false)
+  const [focusOutsideTarget, setFocusOutsideTarget] = createSignal<HTMLElement>()
+  const [restoreTriggerFocus, setRestoreTriggerFocus] = createSignal(false)
+  let focusTargetAfterTab: HTMLElement | undefined
+  let focusLifecycleVersion = 0
+  onCleanup(() => {
+    focusLifecycleVersion += 1
+  })
   const options = createMemo(() =>
     props.themes.filter((theme) => theme.appearance === props.appearance)
   )
@@ -84,38 +115,204 @@ export function ThemeRow(props: {
       options().find((theme) => theme.id === props.preview.id)
   )
   const label = () => (props.appearance === 'light' ? 'Light theme' : 'Dark theme')
+  const closeMenu = () => {
+    if (menuOpen()) focusLifecycleVersion += 1
+    setMenuOpen(false)
+  }
+  const moveFocusOnTab = (event: KeyboardEvent) => {
+    if (event.key !== 'Tab' || event.isComposing) return
+
+    const trigger = triggerElement()
+    if (!trigger) return
+    const parentDialog = portalMount()?.closest<HTMLElement>('[role="dialog"]')
+    const focusScope = parentDialog ?? portalMount()?.ownerDocument.body
+    if (!focusScope) return
+
+    const focusStops = Array.from(focusScope.querySelectorAll<HTMLElement>('*')).filter(
+      (element) =>
+        isTabStop(element) &&
+        element.closest('[role="menu"], [hidden], [inert], [aria-hidden="true"]') === null
+    )
+    const orderedFocusStops = [
+      ...focusStops
+        .filter((element) => element.tabIndex > 0)
+        .toSorted((a, b) => a.tabIndex - b.tabIndex),
+      ...focusStops.filter((element) => element.tabIndex <= 0),
+    ]
+    const triggerIndex = orderedFocusStops.indexOf(trigger)
+    const direction = event.shiftKey ? -1 : 1
+    const adjacent =
+      orderedFocusStops[triggerIndex + direction] ??
+      (parentDialog ? (direction > 0 ? orderedFocusStops[0] : orderedFocusStops.at(-1)) : undefined)
+
+    event.stopPropagation()
+    setRestoreTriggerFocus(false)
+    if (adjacent) {
+      event.preventDefault()
+      focusTargetAfterTab = adjacent
+      setFocusOutsideTarget(adjacent)
+      closeMenu()
+      adjacent.focus({ preventScroll: true })
+    } else {
+      focusTargetAfterTab = undefined
+      setFocusOutsideTarget(undefined)
+      closeMenu()
+    }
+  }
   return (
     <SettingsRow title={label()} icon={<Palette />}>
       <div ref={setPortalMount}>
-        <Select
+        <DropdownMenu
           modal={false}
-          options={options()}
-          value={selected()}
-          optionValue="id"
-          optionTextValue="name"
-          disabled={props.disabled || options().length === 0}
-          onChange={(theme) => {
-            if (theme) props.onSelect(theme.id)
+          open={menuOpen()}
+          onOpenChange={(open) => {
+            if (open !== menuOpen()) focusLifecycleVersion += 1
+            setMenuOpen(open)
+            if (open) {
+              focusTargetAfterTab = undefined
+              setFocusOutsideTarget(undefined)
+              setRestoreTriggerFocus(false)
+            }
           }}
-          itemComponent={(item) => (
-            <SelectItem item={item.item}>
-              <PalettePreview theme={item.item.rawValue} />
-              {item.item.rawValue.name}
-            </SelectItem>
-          )}
         >
-          <SelectTrigger size="sm" aria-label={label()} class="w-full sm:w-52">
-            <SelectValue>
-              {() => (
-                <>
-                  <PalettePreview theme={props.preview} />
-                  <span>{selected()?.name ?? props.preview.name}</span>
-                </>
-              )}
-            </SelectValue>
-          </SelectTrigger>
-          <SelectContent portalMount={portalMount()} />
-        </Select>
+          <DropdownMenuTrigger
+            ref={setTriggerElement}
+            as={Button}
+            variant="outline"
+            size="sm"
+            aria-label={label()}
+            disabled={props.disabled || options().length === 0}
+            class="w-full justify-between sm:w-52"
+          >
+            <span class="flex min-w-0 flex-1 items-center gap-2">
+              <PalettePreview theme={props.preview} />
+              <span class="min-w-0 flex-1 truncate">{selected()?.name ?? props.preview.name}</span>
+            </span>
+            <ChevronDown aria-hidden="true" class="shrink-0 text-muted-foreground" />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            portalMount={portalMount()}
+            class="max-h-(--kb-popper-content-available-height) w-(--kb-popper-anchor-width) min-w-32 overflow-x-hidden overflow-y-auto"
+            onInteractOutside={(event) => {
+              if (event.detail.originalEvent.type !== 'pointerdown') return
+              const parentDialog = portalMount()?.closest<HTMLElement>('[role="dialog"]')
+              const focusScope = parentDialog ?? portalMount()?.ownerDocument.body
+              const target = event.detail.originalEvent.target
+              if (!(target instanceof Element) || !focusScope?.contains(target)) return
+
+              const focusTarget = target.closest<HTMLElement>(POINTER_FOCUS_TARGET_SELECTOR)
+              if (focusTarget && isTabStop(focusTarget)) {
+                setRestoreTriggerFocus(false)
+                setFocusOutsideTarget(focusTarget)
+              } else {
+                setRestoreTriggerFocus(true)
+              }
+            }}
+            onFocusOutside={(event) => {
+              // The containing dialog or document body can briefly reclaim
+              // focus when the menu opens. Keep that handoff from dismissing
+              // it; focus moving to another descendant still closes the menu.
+              const parentDialog = portalMount()?.closest<HTMLElement>('[role="dialog"]')
+              const focusScope = parentDialog ?? portalMount()?.ownerDocument.body
+              const target = event.detail.originalEvent.target
+              if (target === focusScope) {
+                event.preventDefault()
+              } else if (target instanceof HTMLElement && focusScope?.contains(target)) {
+                setRestoreTriggerFocus(false)
+                setFocusOutsideTarget(target)
+              }
+            }}
+            onEscapeKeyDown={() => setRestoreTriggerFocus(true)}
+            onCloseAutoFocus={(event) => {
+              // A prior menu instance can finish its focus cleanup after this
+              // row has already reopened. Do not let that cleanup steal focus.
+              if (menuOpen()) {
+                event.preventDefault()
+                return
+              }
+
+              const lifecycleVersion = focusLifecycleVersion
+              const shouldRestore = restoreTriggerFocus()
+              const focusTarget = focusTargetAfterTab ?? focusOutsideTarget()
+              focusTargetAfterTab = undefined
+              setFocusOutsideTarget(undefined)
+              setRestoreTriggerFocus(false)
+              if (shouldRestore) {
+                // The saved focus may be the containing dialog rather than
+                // the trigger when WebKit opens this menu from a pointer click.
+                event.preventDefault()
+                triggerElement()?.focus({ preventScroll: true })
+                return
+              }
+
+              const parentDialog = portalMount()?.closest<HTMLElement>('[role="dialog"]')
+              const focusScope = parentDialog ?? portalMount()?.ownerDocument.body
+              if (focusTarget?.isConnected && focusScope?.contains(focusTarget)) {
+                // Preserve the intended in-scope destination across
+                // Kobalte's deferred stale-focus restore.
+                event.preventDefault()
+                queueMicrotask(() => {
+                  if (lifecycleVersion !== focusLifecycleVersion || menuOpen()) return
+
+                  const activeElement = document.activeElement
+                  const isMenuFocus =
+                    activeElement instanceof HTMLElement &&
+                    activeElement.closest('[role="menu"]') !== null
+                  const isTriggerFocus = activeElement === triggerElement()
+                  if (
+                    activeElement !== focusTarget &&
+                    (activeElement === document.body ||
+                      activeElement === focusScope ||
+                      isMenuFocus ||
+                      isTriggerFocus)
+                  ) {
+                    focusTarget.focus({ preventScroll: true })
+                  }
+                })
+                return
+              }
+
+              const activeElement = document.activeElement
+              if (
+                focusScope &&
+                activeElement instanceof HTMLElement &&
+                activeElement !== focusScope &&
+                focusScope.contains(activeElement) &&
+                activeElement.closest('[role="menu"]') === null
+              ) {
+                // Preserve a real focus target in this scope instead of
+                // restoring the stale element captured when the menu mounted. A
+                // focused menu item is about to unmount, so Kobalte must restore
+                // focus to the trigger instead.
+                event.preventDefault()
+              }
+            }}
+          >
+            <DropdownMenuRadioGroup
+              value={selected()?.id ?? ''}
+              aria-label={`${label()} options`}
+              on:keydown={moveFocusOnTab}
+              onChange={(id) => {
+                if (!props.disabled && typeof id === 'string') props.onSelect(id)
+              }}
+            >
+              <For each={options()}>
+                {(theme) => (
+                  <DropdownMenuRadioItem
+                    value={theme.id}
+                    textValue={theme.name}
+                    closeOnSelect={true}
+                    disabled={props.disabled}
+                    onSelect={() => setRestoreTriggerFocus(true)}
+                  >
+                    <PalettePreview theme={theme} />
+                    <span class="min-w-0 flex-1 truncate">{theme.name}</span>
+                  </DropdownMenuRadioItem>
+                )}
+              </For>
+            </DropdownMenuRadioGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
       </div>
     </SettingsRow>
   )

package/src/components/ui/dropdown-menu/dropdown-menu.tsx

@@ -16,10 +16,10 @@ import { cn } from '#lib/utils'
 /**
  * DropdownMenu.
  *
- * A list of actions on a trigger. This is the right home for "what can I do
- * with this thing": rename, duplicate, export, delete. It is not a Select
- * (which holds a *value* the user is choosing) and not a Popover (which holds
- * arbitrary content).
+ * A list of actions on a trigger, with radio groups for persistent choices
+ * that fit naturally in a compact menu. Use Select for form inputs whose
+ * selected value needs the field-style control, and Popover for arbitrary
+ * content.
  *
  * Kobalte supplies the full menu contract — arrow keys, typeahead, the roving
  * highlight, Escape to close and return focus — which is exactly what a
@@ -42,13 +42,15 @@ export function DropdownMenuPortal(props: ComponentProps<typeof KobalteDropdownM
 
 export type DropdownMenuContentProps = ComponentProps<typeof KobalteDropdownMenu.Content> & {
   hideArrow?: boolean
+  /** Mount under an owner element such as a modal, keeping the menu in its accessible subtree. */
+  portalMount?: HTMLElement
 }
 
 export function DropdownMenuContent(props: DropdownMenuContentProps) {
-  const [local, rest] = splitProps(props, ['class', 'hideArrow', 'children'])
+  const [local, rest] = splitProps(props, ['class', 'hideArrow', 'children', 'portalMount'])
 
   return (
-    <KobalteDropdownMenu.Portal>
+    <KobalteDropdownMenu.Portal mount={local.portalMount}>
       <KobalteDropdownMenu.Content
         class={cn(
           overlaySurface,