@duro-app/ui 5.12.0 → 5.14.0

package/src/components/Listbox/native.css.ts

@@ -0,0 +1,91 @@
+import {css} from 'react-strict-dom'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
+import {typography} from '@duro-app/tokens/tokens/typography.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
+
+/**
+ * A picker sheet's rows on native (plan N0, C0 direction A "Check"): a
+ * touch-target row per option, the chosen one filled and checked.
+ */
+export const sheetStyles = css.create({
+  list: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  option: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+    minHeight: sizes.touchTarget,
+    paddingLeft: spacing.md,
+    paddingRight: spacing.md,
+    borderBottomWidth: borders.hairline,
+    borderBottomStyle: 'solid',
+    borderBottomColor: colors.border,
+  },
+  // The chosen option, and a row under the finger.
+  optionFilled: {
+    backgroundColor: colors.bgCardHover,
+  },
+  label: {
+    flex: 1,
+    color: colors.text,
+    fontFamily: typography.fontFamily,
+    fontSize: typography.fontSizeSm,
+  },
+  labelDisabled: {
+    color: colors.textMuted,
+  },
+  check: {
+    color: colors.accent,
+    fontFamily: typography.fontFamily,
+    fontSize: typography.fontSizeSm,
+    fontWeight: typography.fontWeightSemibold,
+  },
+  empty: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: spacing.xs,
+    paddingTop: spacing.xl,
+    paddingBottom: spacing.xl,
+    paddingLeft: spacing.md,
+    paddingRight: spacing.md,
+    color: colors.textMuted,
+    fontFamily: typography.fontFamily,
+    fontSize: typography.fontSizeSm,
+    textAlign: 'center',
+  },
+  // The search field pinned at a Combobox sheet's top, under its header.
+  search: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+    minHeight: sizes.touchTarget,
+    marginLeft: spacing.md,
+    marginRight: spacing.md,
+    marginBottom: spacing.sm,
+    paddingLeft: spacing.sm,
+    paddingRight: spacing.sm,
+    borderRadius: radii.sm,
+    borderWidth: borders.hairline,
+    borderStyle: 'solid',
+    borderColor: colors.border,
+    backgroundColor: colors.bg,
+  },
+  searchInput: {
+    flex: 1,
+    color: colors.text,
+    fontFamily: typography.fontFamily,
+    fontSize: typography.fontSizeSm,
+    backgroundColor: 'transparent',
+    borderWidth: 0,
+    '::placeholder': {
+      color: colors.textMuted,
+    },
+  },
+})

package/src/components/Menu/Menu.meta.ts

@@ -2,7 +2,7 @@ import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
   description:
-    'Dropdown action menu. Triggers actions (not value selection). Compound component — Root is required (throws without it). Menu.Trigger renders the button itself: give it the label (text, an Icon), never a Button; an icon-only trigger takes aria-label, and variant="ghost" suits toolbars; size="small" matches small Toggles and Buttons (a small ghost trigger is iconButtonSm). The popup is portalled and placed against the trigger (never clipped by a sticky or overflow ancestor), capped at sizes.listMaxH with scrolling, and takes focus on open (WAI-ARIA menu button); Escape closes only the menu, not an enclosing Popover or Dialog.',
+    'Dropdown action menu. Triggers actions (not value selection). Compound component — Root is required (throws without it). Menu.Trigger renders the button itself: give it the label (text, an Icon), never a Button; an icon-only trigger takes aria-label, and variant="ghost" suits toolbars; size="small" matches small Toggles and Buttons (a small ghost trigger is iconButtonSm). The popup is portalled and placed against the trigger (never clipped by a sticky or overflow ancestor), capped at sizes.listMaxH with scrolling, and takes focus on open (WAI-ARIA menu button); Escape closes only the menu, not an enclosing Popover or Dialog. On React Native the popup is placed against the trigger in a modal overlay; a press outside or the Android back button closes it, and an item runs its onClick after the menu has gone (so an item can open a Dialog). Menu.LinkItem takes onNavigate(href, event) on both platforms (ADR-0002); on native, without it or without preventDefault, the link opens with the system. Native has no arrow keys: each item is its own screen-reader stop.',
   whenToUse: [
     'Context menu or "more actions" dropdown',
     'Navigation links in a dropdown',

package/src/components/Menu/Menu.native.tsx

@@ -0,0 +1,268 @@
+import {
+  createContext,
+  type ReactNode,
+  type Ref,
+  type RefObject,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useRef,
+} from 'react'
+import {Linking, Platform, Pressable, ScrollView, StyleSheet} from 'react-native'
+import {html} from 'react-strict-dom'
+import {SIZES_PX} from '@duro-app/tokens/keys'
+import {styles} from './styles.css'
+import {nativeStyles} from './native.css'
+import {useMenuOpen} from './useMenuOpen'
+import {AnchoredOverlay} from '../../shared/portal/AnchoredOverlay'
+import {focusForAccessibility} from '../../shared/accessibilityFocus'
+import {mergeRefs} from '../../shared/mergeRefs'
+import type {LinkClickEvent, OnNavigate} from '../../shared/navigate'
+import type {ControlSize} from '../../shared/types'
+import {useTooltipHint} from '../Tooltip/TooltipHint'
+import {ControlContextBoundary} from '../Toolbar/ControlContextBoundary'
+
+interface NativeMenuContextValue {
+  open: boolean
+  toggle: () => void
+  /**
+   * Close, then run `after` once the menu's Modal is gone: an item that opens
+   * a Dialog would otherwise present during a dismissal, which iOS drops.
+   */
+  closeThen: (after?: () => void) => void
+  menuId: string
+  triggerRef: RefObject<unknown>
+}
+
+const MenuContext = createContext<NativeMenuContextValue | null>(null)
+
+function useMenu() {
+  const ctx = useContext(MenuContext)
+  if (!ctx) throw new Error('Menu compound components must be used within Menu.Root')
+  return ctx
+}
+
+interface RootProps {
+  children: ReactNode
+  /** Controlled open state. */
+  open?: boolean
+  /** Initial open state (uncontrolled). */
+  defaultOpen?: boolean
+  /** Called when the menu opens or closes. */
+  onOpenChange?: (open: boolean) => void
+}
+
+/**
+ * Native Menu (plan N0, Slice B): the same compound API, its popup placed
+ * against the trigger in an OverlayModal. A press outside or Android's back
+ * button closes it; an item runs its action after the menu has gone. Native
+ * has no arrow keys or active descendant (Decision 6): each item is its own
+ * screen-reader stop.
+ */
+function Root({children, ...options}: RootProps) {
+  const {open, setOpen} = useMenuOpen(options)
+  const menuId = useId()
+  const triggerRef = useRef<unknown>(null)
+  const pendingRef = useRef<(() => void) | null>(null)
+
+  const runPending = useCallback(() => {
+    const pending = pendingRef.current
+    pendingRef.current = null
+    pending?.()
+  }, [])
+
+  const closeThen = useCallback(
+    (after?: () => void) => {
+      pendingRef.current = after ?? null
+      setOpen(false)
+    },
+    [setOpen],
+  )
+
+  // Focus back on the trigger once the menu is gone; Android has no Modal
+  // onDismiss, so a pending action runs on the next frame there.
+  const wasOpen = useRef(open)
+  useEffect(() => {
+    if (wasOpen.current && !open) {
+      focusForAccessibility(triggerRef.current, 'Menu')
+      if (Platform.OS !== 'ios') requestAnimationFrame(runPending)
+    }
+    wasOpen.current = open
+  }, [open, runPending])
+
+  const toggle = useCallback(() => setOpen(!open), [open, setOpen])
+
+  return (
+    <MenuContext.Provider value={{open, toggle, closeThen, menuId, triggerRef}}>
+      <PendingContext.Provider value={runPending}>
+        <html.div style={[styles.root, nativeStyles.nativeFlex]}>{children}</html.div>
+      </PendingContext.Provider>
+    </MenuContext.Provider>
+  )
+}
+
+/** iOS: run the pending item action once the Modal has dismissed. */
+const PendingContext = createContext<() => void>(() => {})
+
+export type MenuTriggerVariant = 'default' | 'ghost'
+
+interface TriggerProps {
+  children: ReactNode
+  /** Accessible name — required when the label is an icon only. */
+  'aria-label'?: string
+  /** `ghost`: no border or fill until hover, for toolbars. Default: `default`. */
+  variant?: MenuTriggerVariant
+  /** `small` matches a small Toggle or Button beside it. Default: `default`. */
+  size?: ControlSize
+  ref?: Ref<unknown>
+}
+
+/**
+ * The trigger is an RN Pressable host, so it carries an enclosing Tooltip's
+ * text as its own accessibility hint (RSD drops `accessibilityHint` on html.*).
+ *
+ * holds-until: react-strict-dom maps aria-description to accessibilityHint
+ * (https://github.com/react/react-strict-dom/issues/524).
+ */
+function Trigger({
+  children,
+  'aria-label': ariaLabel,
+  variant = 'default',
+  size = 'default',
+  ref,
+}: TriggerProps) {
+  const {open, toggle, triggerRef} = useMenu()
+  const hint = useTooltipHint()
+  return (
+    <Pressable
+      ref={mergeRefs(triggerRef, ref) as Ref<never>}
+      onPress={toggle}
+      accessibilityRole="button"
+      accessibilityLabel={ariaLabel}
+      accessibilityHint={hint}
+      accessibilityState={{expanded: open}}
+    >
+      <html.div
+        style={[
+          styles.trigger,
+          nativeStyles.nativeFlex,
+          variant === 'ghost'
+            ? [styles.triggerGhost, size === 'small' && styles.triggerGhostSmall]
+            : size === 'small' && styles.triggerSmall,
+        ]}
+      >
+        {children}
+      </html.div>
+    </Pressable>
+  )
+}
+
+interface PopupProps {
+  children: ReactNode
+  align?: 'start' | 'end'
+}
+
+function Popup({children, align = 'start'}: PopupProps) {
+  const {open, closeThen, menuId, triggerRef} = useMenu()
+  const runPending = useContext(PendingContext)
+  const popupRef = useRef<HTMLDivElement>(null)
+  return (
+    <AnchoredOverlay
+      visible={open}
+      anchorRef={triggerRef}
+      side="bottom"
+      align={align}
+      onRequestClose={() => closeThen()}
+      onShow={() => focusForAccessibility(popupRef.current, 'Menu')}
+      onDismiss={runPending}
+    >
+      <html.div
+        ref={popupRef}
+        id={menuId}
+        role="menu"
+        style={[styles.popup, nativeStyles.popupInPlace]}
+      >
+        <ScrollView style={layout.scroll} bounces={false}>
+          <ControlContextBoundary>{children}</ControlContextBoundary>
+        </ScrollView>
+      </html.div>
+    </AnchoredOverlay>
+  )
+}
+
+// The popup's height cap, `sizes.listMaxH`, on the view that scrolls.
+const layout = StyleSheet.create({scroll: {maxHeight: SIZES_PX.listMaxH, flexGrow: 0}})
+
+interface ItemProps {
+  onClick?: () => void
+  children: ReactNode
+}
+
+function Item({onClick, children}: ItemProps) {
+  const {closeThen} = useMenu()
+  return (
+    <Pressable accessibilityRole="menuitem" onPress={() => closeThen(onClick)}>
+      {({pressed}) => (
+        <html.div style={[styles.item, pressed && nativeStyles.itemPressed]}>{children}</html.div>
+      )}
+    </Pressable>
+  )
+}
+
+interface LinkItemProps {
+  href: string
+  /**
+   * Called with the href when the item is pressed (ADR-0002). Call
+   * `event.preventDefault()` to navigate in-app; otherwise, and without it,
+   * the URL opens with the system (`Linking.openURL`).
+   */
+  onNavigate?: OnNavigate
+  children: ReactNode
+}
+
+function LinkItem({href, onNavigate, children}: LinkItemProps) {
+  const {closeThen} = useMenu()
+  const follow = () => {
+    let prevented = false
+    const event: LinkClickEvent = {
+      button: 0,
+      metaKey: false,
+      ctrlKey: false,
+      shiftKey: false,
+      altKey: false,
+      get defaultPrevented() {
+        return prevented
+      },
+      preventDefault() {
+        prevented = true
+      },
+    }
+    onNavigate?.(href, event)
+    if (!prevented) {
+      Linking.openURL(href).catch((error: unknown) => {
+        console.warn(`[duro] Menu.LinkItem: could not open ${href}: ${String(error)}`)
+      })
+    }
+  }
+  return (
+    <Pressable accessibilityRole="link" onPress={() => closeThen(follow)}>
+      {({pressed}) => (
+        <html.div style={[styles.item, pressed && nativeStyles.itemPressed]}>{children}</html.div>
+      )}
+    </Pressable>
+  )
+}
+
+function Separator() {
+  return <html.div role="separator" aria-orientation="horizontal" style={styles.separator} />
+}
+
+export const Menu = {
+  Root,
+  Trigger,
+  Popup,
+  Item,
+  LinkItem,
+  Separator,
+}

package/src/components/Menu/Menu.tsx

@@ -15,6 +15,7 @@ import {styles} from './styles.css'
 import {MenuContext, useMenu} from './MenuContext'
 import {useMenuRoot} from './useMenuRoot'
 import {devWarnOnce} from '../../shared/devWarnOnce'
+import {isPlainClick, type LinkClickEvent, type OnNavigate} from '../../shared/navigate'
 import type {ControlSize} from '../../shared/types'
 import {usePortalMount} from '../ThemeProvider/ThemeProvider'
 import {computePopoverPosition} from '../Popover/position'
@@ -222,10 +223,15 @@ function Item({onClick, children}: ItemProps) {
 // --- LinkItem ---
 interface LinkItemProps {
   href: string
+  /**
+   * Called for a plain primary click (ADR-0002): call `event.preventDefault()`,
+   * then your router's navigate. Without it the browser follows the link.
+   */
+  onNavigate?: OnNavigate
   children: ReactNode
 }
 
-function LinkItem({href, children}: LinkItemProps) {
+function LinkItem({href, onNavigate, children}: LinkItemProps) {
   const {close, highlightedId, setHighlightedId, registerItem} = useMenu()
   const id = useId()
   const ref = useRef<HTMLAnchorElement>(null)
@@ -242,7 +248,10 @@ function LinkItem({href, children}: LinkItemProps) {
       ref={ref}
       id={id}
       href={href}
-      onClick={() => close()}
+      onClick={(event: LinkClickEvent) => {
+        if (onNavigate && isPlainClick(event)) onNavigate(href, event)
+        close()
+      }}
       role="menuitem"
       onPointerEnter={() => setHighlightedId(id)}
       style={[styles.item, styles.linkItem, isHighlighted && styles.itemHighlighted]}

package/src/components/Menu/native.css.ts

@@ -0,0 +1,18 @@
+import {css} from 'react-strict-dom'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+
+/** Native Menu additions to the shared styles. */
+export const nativeStyles = css.create({
+  // The AnchoredOverlay's view places the popup; it flows inside it.
+  // RSD on native lays out only display: flex, not the web's inline-flex.
+  nativeFlex: {
+    display: 'flex',
+  },
+  popupInPlace: {
+    position: 'relative',
+  },
+  // A press shows the highlight that hover and the arrow keys show on the web.
+  itemPressed: {
+    backgroundColor: colors.bgCardHover,
+  },
+})

package/src/components/Menu/useMenuOpen.ts

@@ -0,0 +1,33 @@
+import {useCallback, useRef, useState} from 'react'
+
+export interface MenuOpenOptions {
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+/**
+ * The menu's open state, controlled or not, shared by both platforms (plan
+ * N0, Decision 10). Focus, highlight and keys are each platform's adapter:
+ * `useMenuRoot` on the web, Menu.native on native.
+ */
+export function useMenuOpen({open: openProp, defaultOpen = false, onOpenChange}: MenuOpenOptions) {
+  const [inner, setInner] = useState(defaultOpen)
+  const controlled = openProp !== undefined
+  const open = controlled ? openProp : inner
+  const openRef = useRef(open)
+  openRef.current = open
+  const onOpenChangeRef = useRef(onOpenChange)
+  onOpenChangeRef.current = onOpenChange
+
+  const setOpen = useCallback(
+    (next: boolean) => {
+      if (next === openRef.current) return
+      if (!controlled) setInner(next)
+      onOpenChangeRef.current?.(next)
+    },
+    [controlled],
+  )
+
+  return {open, openRef, setOpen}
+}

package/src/components/Menu/useMenuRoot.ts

@@ -1,12 +1,9 @@
 import {useState, useCallback, useRef, useId, useEffect, useLayoutEffect} from 'react'
 import type {MenuContextValue} from './MenuContext'
 import {isOutsidePress} from '../Popover/outside'
+import {useMenuOpen, type MenuOpenOptions} from './useMenuOpen'
 
-export interface MenuRootOptions {
-  open?: boolean
-  defaultOpen?: boolean
-  onOpenChange?: (open: boolean) => void
-}
+export type MenuRootOptions = MenuOpenOptions
 
 /**
  * The menu-button pattern (WAI-ARIA APG): on open, focus moves to the
@@ -16,10 +13,8 @@ export interface MenuRootOptions {
  * elsewhere (an editor) are never intercepted, and Escape stops there so an
  * enclosing Popover or Dialog stays open.
  */
-export function useMenuRoot({open: openProp, defaultOpen = false, onOpenChange}: MenuRootOptions) {
-  const [inner, setInner] = useState(defaultOpen)
-  const controlled = openProp !== undefined
-  const open = controlled ? openProp : inner
+export function useMenuRoot(options: MenuRootOptions) {
+  const {open, openRef, setOpen} = useMenuOpen(options)
   const [highlightedId, setHighlightedId] = useState<string | null>(null)
   // Read by the keydown handler, so activating an item is not a side effect
   // inside a state updater (React may run updaters twice).
@@ -34,38 +29,24 @@ export function useMenuRoot({open: openProp, defaultOpen = false, onOpenChange}:
   const popupRef = useRef<HTMLDivElement | null>(null)
   const itemsRef = useRef(new Map<string, HTMLElement>())
   const orderRef = useRef<string[]>([])
-  const openRef = useRef(open)
-  openRef.current = open
-  const onOpenChangeRef = useRef(onOpenChange)
-  onOpenChangeRef.current = onOpenChange
-
-  const setOpen = useCallback(
-    (next: boolean) => {
-      if (next === openRef.current) return
-      if (!controlled) setInner(next)
-      onOpenChangeRef.current?.(next)
-    },
-    [controlled],
-  )
-
   // Closes and leaves focus where it is (a press elsewhere put it there).
   const dismiss = useCallback(() => {
     if (!openRef.current) return
     setOpen(false)
     setHighlightedId(null)
-  }, [setOpen])
+  }, [openRef, setOpen])
 
   // Closes and puts focus back on the trigger.
   const close = useCallback(() => {
     if (!openRef.current) return
     dismiss()
     triggerRef.current?.focus()
-  }, [dismiss])
+  }, [openRef, dismiss])
 
   const toggle = useCallback(() => {
     if (openRef.current) close()
     else setOpen(true)
-  }, [close, setOpen])
+  }, [openRef, close, setOpen])
 
   // On open: focus the menu and highlight the first item. Child effects (item
   // registration) run before this parent effect, so orderRef is populated.

package/src/components/Popover/Popover.meta.ts

@@ -2,7 +2,7 @@ import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
   description:
-    'Non-modal anchored overlay for small interactive content. Compound component — Root is required (throws without it). Anchored to Popover.Trigger, or to a virtual anchor (a () => DOMRect) when there is no Trigger; call reposition() through a ref when the anchor moves. Popover.Trigger takes size="small" beside small Toggles. Popover.Popup raised draws it over another floating surface (floatingRaised, popoverRaised in a modal), never over a modal.',
+    'Non-modal anchored overlay for small interactive content. Compound component — Root is required (throws without it). Anchored to Popover.Trigger, or to a virtual anchor (a () => DOMRect) when there is no Trigger; call reposition() through a ref when the anchor moves. Popover.Trigger takes size="small" beside small Toggles. Popover.Popup raised draws it over another floating surface (floatingRaised, popoverRaised in a modal), never over a modal. On React Native the popup is modal: it is placed against Popover.Trigger in an overlay, a press outside or the Android back button closes it, and screen-reader focus moves in on open and back to the trigger on close; anchor, ignore and raised are web only.',
   whenToUse: [
     'A small form or controls tied to one element that stay open while you work in them',
     'Anchoring to a spot that is not a button (a canvas point, a text selection) with a virtual anchor',