@duro-app/ui 5.29.0 → 5.30.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "5.29.0",
+  "version": "5.30.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -92,7 +92,7 @@
   "dependencies": {
     "@tanstack/react-virtual": "^3.14.13",
     "qrcode": "^1.5.4",
-    "@duro-app/tokens": "^5.29.0"
+    "@duro-app/tokens": "^5.30.0"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",

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. 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.',
+    '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. A Menu.Item can be disabled: it stays listed and is announced as disabled, but the highlight and the arrow keys skip it and a press or Enter does nothing.',
   whenToUse: [
     'Context menu or "more actions" dropdown',
     'Navigation links in a dropdown',

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

@@ -197,15 +197,30 @@ const layout = StyleSheet.create({scroll: {maxHeight: SIZES_PX.listMaxH, flexGro
 
 interface ItemProps {
   onClick?: () => void
+  /** Shown but not available: inert to a press and announced as disabled. */
+  disabled?: boolean
   children: ReactNode
 }
 
-function Item({onClick, children}: ItemProps) {
+function Item({onClick, disabled = false, children}: ItemProps) {
   const {closeThen} = useMenu()
   return (
-    <Pressable accessibilityRole="menuitem" onPress={() => closeThen(onClick)}>
+    <Pressable
+      accessibilityRole="menuitem"
+      accessibilityState={{disabled}}
+      disabled={disabled}
+      onPress={() => closeThen(onClick)}
+    >
       {({pressed}) => (
-        <html.div style={[styles.item, pressed && nativeStyles.itemPressed]}>{children}</html.div>
+        <html.div
+          style={[
+            styles.item,
+            pressed && nativeStyles.itemPressed,
+            disabled && styles.itemDisabled,
+          ]}
+        >
+          {children}
+        </html.div>
       )}
     </Pressable>
   )

package/src/components/Menu/Menu.stories.tsx

@@ -539,3 +539,45 @@ export const TouchTargets: Story = {
 const touchStyles = css.create({
   row: {display: 'flex', gap: spacing.md, alignItems: 'center'},
 })
+
+// A disabled item stays listed and is announced as disabled, but the highlight and the arrow keys
+// skip it and a press does nothing (a Sync menu whose Pull is blocked while a push is running).
+const onPull = fn()
+const onPush = fn()
+export const DisabledItem: Story = {
+  render: () => (
+    <Menu.Root>
+      <Menu.Trigger>Sync</Menu.Trigger>
+      <Menu.Popup>
+        <Menu.Item disabled onClick={onPull}>
+          Pull
+        </Menu.Item>
+        <Menu.Item onClick={onPush}>Push</Menu.Item>
+        <Menu.Item>Fetch</Menu.Item>
+      </Menu.Popup>
+    </Menu.Root>
+  ),
+  play: async ({canvas, userEvent}) => {
+    onPull.mockClear()
+    onPush.mockClear()
+    await userEvent.click(canvas.getByRole('button', {name: 'Sync'}))
+    const menu = await page().findByRole('menu', {name: 'Sync'})
+    const pull = page().getByRole('menuitem', {name: 'Pull'})
+    const push = page().getByRole('menuitem', {name: 'Push'})
+    await expect(pull).toHaveAttribute('aria-disabled', 'true')
+    // The highlight opens on the first item that can be chosen.
+    await waitFor(() => expect(menu).toHaveAttribute('aria-activedescendant', push.id))
+    await userEvent.click(pull)
+    await expect(onPull).not.toHaveBeenCalled()
+    await expect(menu).toBeInTheDocument()
+    // Up from Push wraps to Fetch, never landing on Pull.
+    await userEvent.keyboard('{ArrowUp}')
+    await expect(menu).toHaveAttribute(
+      'aria-activedescendant',
+      page().getByRole('menuitem', {name: 'Fetch'}).id,
+    )
+    await userEvent.keyboard('{ArrowDown}')
+    await userEvent.keyboard('{Enter}')
+    await expect(onPush).toHaveBeenCalledOnce()
+  },
+}

package/src/components/Menu/Menu.tsx

@@ -186,10 +186,12 @@ function Popup({children, align = 'start'}: PopupProps) {
 // --- Item ---
 interface ItemProps {
   onClick?: () => void
+  /** Shown but not available: skipped by the arrow keys, inert to a press, announced as disabled. */
+  disabled?: boolean
   children: ReactNode
 }
 
-function Item({onClick, children}: ItemProps) {
+function Item({onClick, disabled = false, children}: ItemProps) {
   const {close, highlightedId, setHighlightedId, registerItem} = useMenu()
   const id = useId()
   const ref = useRef<HTMLDivElement>(null)
@@ -198,10 +200,11 @@ function Item({onClick, children}: ItemProps) {
   useEffect(() => {
     const el = ref.current
     if (!el) return
-    return registerItem(id, el)
-  }, [id, registerItem])
+    return registerItem(id, el, disabled)
+  }, [disabled, id, registerItem])
 
   const handleClick = () => {
+    if (disabled) return
     onClick?.()
     close()
   }
@@ -211,9 +214,14 @@ function Item({onClick, children}: ItemProps) {
       ref={ref}
       id={id}
       role="menuitem"
+      aria-disabled={disabled || undefined}
       onClick={handleClick}
-      onPointerEnter={() => setHighlightedId(id)}
-      style={[styles.item, isHighlighted && styles.itemHighlighted]}
+      onPointerEnter={disabled ? undefined : () => setHighlightedId(id)}
+      style={[
+        styles.item,
+        isHighlighted && styles.itemHighlighted,
+        disabled && styles.itemDisabled,
+      ]}
     >
       {children}
     </html.div>

package/src/components/Menu/MenuContext.ts

@@ -9,7 +9,8 @@ export interface MenuContextValue {
   triggerId: string
   highlightedId: string | null
   setHighlightedId: (id: string | null) => void
-  registerItem: (id: string, element: HTMLElement) => () => void
+  /** A disabled item stays listed but the keys skip it and Enter does nothing. */
+  registerItem: (id: string, element: HTMLElement, disabled?: boolean) => () => void
   triggerRef: React.RefObject<HTMLButtonElement | null>
   popupRef: React.RefObject<HTMLDivElement | null>
 }

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

@@ -111,6 +111,10 @@ export const styles = css.create({
     transitionProperty: 'background-color',
     transitionDuration: duration.fast,
   },
+  itemDisabled: {
+    color: colors.textDisabled,
+    cursor: 'not-allowed',
+  },
   // The fill is the highlight; the transparent outline is what forced-colors
   // mode paints, where fills are dropped.
   itemHighlighted: {

package/src/components/Menu/useMenuRoot.ts

@@ -29,6 +29,12 @@ export function useMenuRoot(options: MenuRootOptions) {
   const popupRef = useRef<HTMLDivElement | null>(null)
   const itemsRef = useRef(new Map<string, HTMLElement>())
   const orderRef = useRef<string[]>([])
+  const disabledRef = useRef(new Set<string>())
+  // What the keys move through: the items in document order, without the disabled ones.
+  const enabledOrder = useCallback(
+    () => orderRef.current.filter((id) => !disabledRef.current.has(id)),
+    [],
+  )
   // Closes and leaves focus where it is (a press elsewhere put it there).
   const dismiss = useCallback(() => {
     if (!openRef.current) return
@@ -54,13 +60,13 @@ export function useMenuRoot(options: MenuRootOptions) {
   useEffect(() => {
     if (open && !wasOpenRef.current) {
       popupRef.current?.focus({preventScroll: true})
-      const first = orderRef.current[0]
+      const first = enabledOrder()[0]
       if (first) setHighlightedId(first)
     } else if (!open && wasOpenRef.current) {
       setHighlightedId(null)
     }
     wasOpenRef.current = open
-  }, [open])
+  }, [open, enabledOrder])
 
   // Keep the highlighted item in view when the popup scrolls.
   useEffect(() => {
@@ -69,8 +75,10 @@ export function useMenuRoot(options: MenuRootOptions) {
     el?.scrollIntoView?.({block: 'nearest'})
   }, [highlightedId])
 
-  const registerItem = useCallback((id: string, element: HTMLElement) => {
+  const registerItem = useCallback((id: string, element: HTMLElement, disabled = false) => {
     itemsRef.current.set(id, element)
+    if (disabled) disabledRef.current.add(id)
+    else disabledRef.current.delete(id)
     const map = itemsRef.current
     const ids = [...map.keys()]
     ids.sort((a, b) => {
@@ -82,6 +90,7 @@ export function useMenuRoot(options: MenuRootOptions) {
     orderRef.current = ids
     return () => {
       itemsRef.current.delete(id)
+      disabledRef.current.delete(id)
       orderRef.current = orderRef.current.filter((i) => i !== id)
     }
   }, [])
@@ -104,7 +113,7 @@ export function useMenuRoot(options: MenuRootOptions) {
         close()
         return
       }
-      const order = orderRef.current
+      const order = enabledOrder()
       if (order.length === 0) return
 
       switch (e.key) {
@@ -138,7 +147,7 @@ export function useMenuRoot(options: MenuRootOptions) {
         case ' ': {
           e.preventDefault()
           const current = highlightedRef.current
-          if (current) itemsRef.current.get(current)?.click()
+          if (current && !disabledRef.current.has(current)) itemsRef.current.get(current)?.click()
           break
         }
       }
@@ -146,7 +155,7 @@ export function useMenuRoot(options: MenuRootOptions) {
 
     popup.addEventListener('keydown', handleKeyDown)
     return () => popup.removeEventListener('keydown', handleKeyDown)
-  }, [open, close])
+  }, [open, close, enabledOrder])
 
   // A press outside the trigger and the popup closes the menu, and leaves
   // focus where the press put it.