@duro-app/ui 5.28.0 → 5.30.0

package/dist/table.js

@@ -1,4 +1,4 @@
-import { M as F, q as gt, R as it, H as kt, t as pt, v as bt, w as ft, x as mt, b as ht, g as yt, r as St, y as Tt } from "./Table-Cw1B14R3.js";
+import { M as F, q as gt, R as it, H as kt, t as pt, v as bt, w as ft, x as mt, b as ht, g as yt, r as St, y as Tt } from "./Table-ypIvytAS.js";
 import { jsx as u, jsxs as q } from "react/jsx-runtime";
 import { c as H, m as p, d as b } from "./compiler-runtime-BuugS4D0.js";
 import { flexRender as E, useReactTable as rt, getPaginationRowModel as Ct, getFilteredRowModel as vt, getSortedRowModel as at, getCoreRowModel as st } from "@tanstack/react-table";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "5.28.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.28.0"
+    "@duro-app/tokens": "^5.30.0"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",

package/src/components/List/List.meta.ts

@@ -2,7 +2,7 @@ import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
   description:
-    'Vertical list of interactive items. Ideal for narrow spaces (detail panels, sidebars) where Table would truncate. Supports selection, descriptions, and action slots.',
+    'Vertical list of interactive items. Ideal for narrow spaces (detail panels, sidebars) where Table would truncate. Supports selection, descriptions, and action slots. An Item with onClick is pressable anywhere on its row, and its Content becomes a button: focusable, pressed with Enter or Space, announced with its text, disabled with the Item; the Actions stay beside it, so a Button there never nests in it.',
   whenToUse: [
     'Displaying items in a narrow container (< 480px)',
     'Detail panels, drawers, and sidebars',

package/src/components/List/List.stories.tsx

@@ -221,3 +221,57 @@ function DetailPanelDemo() {
 export const SingleSelection: Story = {
   render: () => <DetailPanelDemo />,
 }
+
+// --- Clickable items ---
+
+function ClickableDemo() {
+  const [picked, setPicked] = useState<string[]>([])
+  const turns = [
+    {
+      id: 't1',
+      text: 'Fix the login bug where a stale token logs the user out mid-session',
+      reply: 'Done',
+    },
+    {id: 't2', text: 'Add a test for it', reply: 'Added auth.test.ts'},
+    {id: 't3', text: 'Still sending', reply: null},
+  ]
+  return (
+    <html.div style={narrowContainer.box}>
+      <List.Root aria-label="Turns">
+        {turns.map((turn) => (
+          <List.Item
+            key={turn.id}
+            disabled={turn.reply === null}
+            onClick={() => setPicked((all) => [...all, turn.id])}
+          >
+            <List.Content>
+              <List.Text>{turn.text}</List.Text>
+              {turn.reply ? <List.Description>{turn.reply}</List.Description> : null}
+            </List.Content>
+            <List.Actions>
+              <Badge size="sm">Turn</Badge>
+            </List.Actions>
+          </List.Item>
+        ))}
+      </List.Root>
+      <html.p>Picked: {picked.join(', ')}</html.p>
+    </html.div>
+  )
+}
+
+export const ClickableItems: Story = {
+  render: () => <ClickableDemo />,
+  play: async ({canvas, userEvent}) => {
+    const buttons = canvas.getAllByRole('button')
+    await expect(buttons).toHaveLength(3)
+    // The keyboard reaches the item and presses it, once.
+    await userEvent.tab()
+    await expect(buttons[0]).toHaveFocus()
+    await userEvent.keyboard('{Enter}')
+    await expect(canvas.getByText('Picked: t1')).toBeInTheDocument()
+    // A press on the row outside the text is one press too.
+    await userEvent.click(canvas.getAllByText('Turn')[1])
+    await expect(canvas.getByText('Picked: t1, t2')).toBeInTheDocument()
+    await expect(buttons[2]).toBeDisabled()
+  },
+}

package/src/components/List/List.tsx

@@ -1,4 +1,4 @@
-import {type ReactNode, createContext, useContext} from 'react'
+import {type ReactNode, createContext, useContext, useMemo} from 'react'
 import {html} from 'react-strict-dom'
 import {styles} from './styles.css'
 
@@ -50,27 +50,65 @@ interface ItemProps {
   onClick?: () => void
 }
 
+// What a clickable Item hands its Content, which becomes the item's button.
+interface ItemActionValue {
+  onClick: () => void
+  disabled: boolean
+}
+
+const ItemActionContext = createContext<ItemActionValue | null>(null)
+
 function Item({children, selected, disabled, onClick}: ItemProps) {
   const {selectionMode} = useList()
   const isSelectable = selectionMode !== 'none'
+  const action = useMemo(
+    () => (onClick ? {onClick, disabled: disabled === true} : null),
+    [onClick, disabled],
+  )
 
   return (
-    <html.div
-      role="listitem"
-      aria-selected={isSelectable ? selected : undefined}
-      aria-disabled={disabled || undefined}
-      onClick={disabled ? undefined : onClick}
-      style={[styles.item, selected && styles.itemSelected, disabled && styles.itemDisabled]}
-    >
-      {children}
-    </html.div>
+    <ItemActionContext.Provider value={action}>
+      <html.div
+        role="listitem"
+        aria-selected={isSelectable ? selected : undefined}
+        aria-disabled={disabled || undefined}
+        // A press anywhere on the row; the Content's button is what keyboards and screen
+        // readers reach.
+        onClick={disabled ? undefined : onClick}
+        style={[
+          styles.item,
+          onClick != null && !disabled && styles.itemClickable,
+          selected && styles.itemSelected,
+          disabled && styles.itemDisabled,
+        ]}
+      >
+        {children}
+      </html.div>
+    </ItemActionContext.Provider>
   )
 }
 
 // --- Content: wraps primary text + description ---
 
 function Content({children}: {children: ReactNode}) {
-  return <html.div style={styles.content}>{children}</html.div>
+  const action = useContext(ItemActionContext)
+  if (!action) return <html.div style={styles.content}>{children}</html.div>
+  // In a clickable Item the Content is a real button: focusable, pressed with Enter or Space,
+  // announced with its text. The Actions stay beside it, never nested inside.
+  return (
+    <html.button
+      type="button"
+      disabled={action.disabled}
+      onClick={(event) => {
+        // The row handles a press too; this one has been answered.
+        event.stopPropagation()
+        action.onClick()
+      }}
+      style={[styles.content, styles.contentButton]}
+    >
+      {children}
+    </html.button>
+  )
 }
 
 // --- Text: primary label ---

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

@@ -1,6 +1,6 @@
 import {css} from 'react-strict-dom'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
-import {microSpacing, spacing} from '@duro-app/tokens/tokens/spacing.css'
+import {microSpacing, radii, spacing} from '@duro-app/tokens/tokens/spacing.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
 import {duration} from '@duro-app/tokens/tokens/motion.css'
 import {borders} from '@duro-app/tokens/tokens/borders.css'
@@ -40,6 +40,9 @@ export const styles = css.create({
       ':hover': colors.bgCardHover,
     },
   },
+  itemClickable: {
+    cursor: 'pointer',
+  },
   itemDisabled: {
     opacity: 0.5,
     pointerEvents: 'none',
@@ -57,6 +60,24 @@ export const styles = css.create({
     minWidth: 0,
   },
 
+  // The Content of a clickable Item: a button that reads as the row's text.
+  contentButton: {
+    alignItems: 'stretch',
+    textAlign: 'start',
+    backgroundColor: 'transparent',
+    borderWidth: 0,
+    padding: 0,
+    margin: 0,
+    font: 'inherit',
+    color: 'inherit',
+    cursor: 'inherit',
+    outlineWidth: {default: 0, ':focus-visible': borders.focusRing},
+    outlineStyle: {default: 'none', ':focus-visible': 'solid'},
+    outlineColor: {default: 'transparent', ':focus-visible': colors.accent},
+    outlineOffset: {default: 0, ':focus-visible': borders.focusOffset},
+    borderRadius: radii.xs,
+  },
+
   // --- Primary text ---
   text: {
     fontSize: typography.fontSizeSm,

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.