@duro-app/ui 5.28.0 → 5.29.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "5.28.0",
+  "version": "5.29.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.29.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,