@duro-app/ui 0.31.0 → 0.33.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "0.31.0",
+  "version": "0.33.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -53,7 +53,7 @@
     }
   },
   "dependencies": {
-    "@duro-app/tokens": "^0.31.0"
+    "@duro-app/tokens": "^0.33.0"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",

package/src/components/Combobox/useComboboxRoot.ts

@@ -190,12 +190,26 @@ export function useComboboxRoot({
     item?.element.scrollIntoView({block: 'nearest'})
   }, [highlightedId])
 
-  // Sync input value with selected label when value changes externally
+  // Reconcile input text with the committed value once the popup closes.
+  // Three cases when transitioning from open → closed:
+  //   - inputValue is empty: user cleared the field, treat that as
+  //     "remove the selection" so the consumer's onValueChange fires
+  //     with null and downstream UI (e.g. dependent fields) can reset.
+  //   - inputValue doesn't match the selected label: user typed something
+  //     but didn't pick anything; restore the label so the visible text
+  //     and the committed value stay consistent.
+  //   - inputValue equals the selected label: nothing to do.
   useEffect(() => {
-    if (value && labels[value] && !open) {
+    if (open) return
+    if (value === null) return
+    if (inputValue === '') {
+      setValue(null)
+      return
+    }
+    if (labels[value] && inputValue !== labels[value]) {
       setInputValue(labels[value])
     }
-  }, [value, labels, open, setInputValue])
+  }, [open, value, labels, inputValue, setInputValue, setValue])
 
   const ctx: ComboboxContextValue = useMemo(
     () => ({

package/src/components/Table/SortChip.tsx

@@ -0,0 +1,52 @@
+import {html} from 'react-strict-dom'
+import {styles} from './styles.css'
+import {Menu} from '../Menu/Menu'
+
+export interface SortValue {
+  readonly id: string
+  readonly desc: boolean
+}
+
+export interface SortChipProps {
+  readonly options: ReadonlyArray<{readonly id: string; readonly label: string}>
+  readonly value: SortValue | null
+  readonly onChange: (next: SortValue | null) => void
+  /** Visible label preceding the sort field, e.g. "Sort by". */
+  readonly label?: string
+}
+
+/**
+ * Sort selector for stack-mode Tables. Hidden in default/compact via
+ * `@container` query — see styles.sortChip. Consumers render this inside
+ * a `Table.Container` so the same query target reaches it.
+ *
+ * The chip is a simple controlled wrapper around `Menu`. It does NOT
+ * couple to @tanstack/react-table — the consumer wires `value` and
+ * `onChange` from whatever sort state they manage.
+ */
+export function SortChip({options, value, onChange, label = 'Sort by'}: SortChipProps) {
+  const current = value ? options.find((o) => o.id === value.id) : null
+  const triggerLabel = current ? `${label}: ${current.label} ${value!.desc ? '↓' : '↑'}` : label
+
+  return (
+    <html.div style={styles.sortChip}>
+      <Menu.Root>
+        <Menu.Trigger>{triggerLabel}</Menu.Trigger>
+        <Menu.Popup>
+          {options.map((opt) => {
+            const isCurrent = value?.id === opt.id
+            const nextDesc = isCurrent ? !value!.desc : false
+            return (
+              <Menu.Item key={opt.id} onClick={() => onChange({id: opt.id, desc: nextDesc})}>
+                {opt.label}
+                {isCurrent ? ` ${value!.desc ? '↓' : '↑'}` : ''}
+              </Menu.Item>
+            )
+          })}
+          {value !== null && <Menu.Item onClick={() => onChange(null)}>Clear sort</Menu.Item>}
+        </Menu.Popup>
+      </Menu.Root>
+    </html.div>
+  )
+}
+SortChip.displayName = 'SortChip'

package/src/components/Table/Table.stories.tsx

@@ -878,3 +878,93 @@ export const FullFeatured: Story = {
     await expect(canvas.getByText('Previous')).toBeInTheDocument()
   },
 }
+
+// Demonstrates the three responsive modes. Resize the canvas (or wrap in
+// a narrower container) to see Compact (~720px) and Stack (~440px).
+const responsiveStyles = css.create({
+  resizable: {
+    resize: 'horizontal',
+    overflow: 'auto',
+    minWidth: '320px',
+    maxWidth: '100%',
+    width: '900px',
+    padding: spacing.sm,
+    borderWidth: 1,
+    borderStyle: 'dashed',
+    borderColor: colors.border,
+  },
+})
+
+export const Responsive: Story = {
+  name: 'Responsive (Container Queries)',
+  render: () => {
+    const grants = [
+      {principal: 'daddy', role: 'Admin', resource: 'all', expires: 'Never', granted_by: 'system'},
+      {
+        principal: 'alice',
+        role: 'Editor',
+        resource: 'documents/foo.md',
+        expires: '2026-12-31',
+        granted_by: 'daddy',
+      },
+      {principal: 'bob', role: 'Viewer', resource: 'all', expires: 'Never', granted_by: 'daddy'},
+    ]
+    const [sort, setSort] = useState<{id: string; desc: boolean} | null>(null)
+    const sortable = [
+      {id: 'principal', label: 'Principal'},
+      {id: 'role', label: 'Role'},
+      {id: 'expires', label: 'Expires'},
+    ]
+    return (
+      <html.div style={responsiveStyles.resizable}>
+        <Table.Container>
+          <Table.SortChip options={sortable} value={sort} onChange={setSort} />
+          <Table.Root>
+            <Table.Header>
+              <Table.Row>
+                <Table.HeaderCell label="Principal">Principal</Table.HeaderCell>
+                <Table.HeaderCell label="Role">Role</Table.HeaderCell>
+                <Table.HeaderCell label="Resource">Resource</Table.HeaderCell>
+                <Table.HeaderCell label="Expires">Expires</Table.HeaderCell>
+                <Table.HeaderCell label="Granted by">Granted by</Table.HeaderCell>
+                <Table.HeaderCell label="Actions" isActions>
+                  Actions
+                </Table.HeaderCell>
+              </Table.Row>
+            </Table.Header>
+            <Table.Body>
+              {grants.map((g) => (
+                <Table.Row key={g.principal}>
+                  <Table.Cell>{g.principal}</Table.Cell>
+                  <Table.Cell>{g.role}</Table.Cell>
+                  <Table.Cell>{g.resource}</Table.Cell>
+                  <Table.Cell>{g.expires}</Table.Cell>
+                  <Table.Cell>{g.granted_by}</Table.Cell>
+                  <Table.Cell isActions>
+                    <Button size="small" variant="secondary">
+                      Revoke
+                    </Button>
+                  </Table.Cell>
+                </Table.Row>
+              ))}
+            </Table.Body>
+          </Table.Root>
+        </Table.Container>
+      </html.div>
+    )
+  },
+  play: async ({canvas}) => {
+    // At default canvas width (900px) we're in compact, headers nowrap,
+    // sort chip hidden. Just sanity-check the table renders the expected
+    // shape — visual regression is covered by Storybook + Chromatic.
+    const headers = canvas.getAllByRole('columnheader')
+    await expect(headers.length).toBe(6)
+    const cells = canvas.getAllByRole('cell')
+    // 3 rows × 6 columns = 18 cells
+    await expect(cells.length).toBe(18)
+    // Each non-actions body cell carries its label as a hidden span — we
+    // can't visually assert display:none in jsdom, but the text node
+    // exists in the DOM tree.
+    await expect(canvas.getAllByText('Principal').length).toBeGreaterThanOrEqual(2)
+  },
+}

package/src/components/Table/Table.tsx

@@ -12,6 +12,7 @@ import {styles} from './styles.css'
 import {Pagination} from './Pagination'
 import {SortIndicator} from './SortIndicator'
 import {ColumnFilter} from './ColumnFilter'
+import {SortChip} from './SortChip'
 
 // --- Types ---
 
@@ -23,6 +24,10 @@ export type TableSize = 'sm' | 'md'
 interface TableContextValue {
   variant: TableVariant
   size: TableSize
+  responsive: boolean
+  /** Header labels indexed by column position. Populated synchronously by
+   *  extractColumnMeta() during Root render so SSR HTML carries them. */
+  labels: ReadonlyArray<string>
   /** Mutable ref: header Row writes inferred template, Root reads it */
   inferredTemplateRef: MutableRefObject<string | null>
 }
@@ -39,33 +44,50 @@ function useTable() {
 
 const HeaderContext = createContext(false)
 
-// --- Template context: set after first render pass ---
+// --- Container — owns the @container query target ---
+//
+// Wraps SortChip + Root + Pagination so they all participate in the same
+// container query. Setting `containerType: inline-size` on Root would not
+// reach siblings that consumers render above the table.
 
-const TemplateContext = createContext<string | null>(null)
-
-// --- Root ---
+function Container({children}: {children: ReactNode}) {
+  return <html.div style={styles.container}>{children}</html.div>
+}
 
-interface RootProps {
-  children: ReactNode
-  variant?: TableVariant
-  size?: TableSize
+// --- Synchronous tree walk: widths + labels in document order ---
+//
+// Mirrors the pattern that was previously called extractTemplate(). Walks
+// the JSX tree, finds HeaderCell elements, captures their `width` and
+// `label` props (or extractText(children) fallback). Runs on every Root
+// render — cheap (small N, no DOM) — but worth memoising on `children`
+// reference if profiling flags it.
+
+function extractText(node: ReactNode): string {
+  let out = ''
+  Children.forEach(node, (child) => {
+    if (typeof child === 'string' || typeof child === 'number') {
+      out += String(child)
+    } else if (isValidElement(child)) {
+      const props = child.props as {children?: ReactNode}
+      if (props.children) out += extractText(props.children)
+    }
+  })
+  return out
 }
 
-/**
- * Scans the React tree for HeaderCell elements to extract width props.
- * Returns a grid-template-columns string.
- */
-function extractTemplate(children: ReactNode): string {
+function extractColumnMeta(children: ReactNode): {template: string; labels: string[]} {
   const widths: string[] = []
+  const labels: string[] = []
 
   function walk(node: ReactNode) {
     Children.forEach(node, (child) => {
       if (!isValidElement(child)) return
       const props = child.props as Record<string, any>
-      // Check if this looks like a HeaderCell (has width prop or is inside Header)
       const displayName = (child.type as any)?.name || (child.type as any)?.displayName || ''
       if (displayName === 'HeaderCell' || child.type === HeaderCell) {
         widths.push(props.width || '1fr')
+        const label = props.label ?? extractText(props.children).trim()
+        labels.push(label)
       } else if (props.children) {
         walk(props.children)
       }
@@ -73,23 +95,35 @@ function extractTemplate(children: ReactNode): string {
   }
 
   walk(children)
-  return widths.length > 0 ? widths.join(' ') : ''
+  return {template: widths.join(' '), labels}
 }
 
-function Root({children, variant = 'default', size = 'md'}: RootProps) {
-  const inferredTemplateRef = useRef<string | null>(null)
+// --- Root ---
 
-  // Extract template from HeaderCell children synchronously
-  const template = extractTemplate(children)
+interface RootProps {
+  children: ReactNode
+  variant?: TableVariant
+  size?: TableSize
+  /** Opt out of responsive container-query behavior. Default true. */
+  responsive?: boolean
+}
+
+function Root({children, variant = 'default', size = 'md', responsive = true}: RootProps) {
+  const inferredTemplateRef = useRef<string | null>(null)
+  const {template, labels} = extractColumnMeta(children)
   if (template) {
     inferredTemplateRef.current = template
   }
 
   return (
-    <TableContext.Provider value={{variant, size, inferredTemplateRef}}>
+    <TableContext.Provider value={{variant, size, responsive, labels, inferredTemplateRef}}>
       <html.div
         role="table"
-        style={[styles.root, template ? styles.gridColumns(template) : undefined]}
+        style={[
+          styles.root,
+          template ? styles.gridColumns(template) : undefined,
+          responsive && styles.rootResponsive,
+        ]}
       >
         {children}
       </html.div>
@@ -136,6 +170,11 @@ function Body({children}: {children: ReactNode}) {
 const RowIndexContext = createContext<number>(-1)
 
 // --- Row ---
+//
+// Always provides CellIndexContext, regardless of variant. Previously this
+// was only set up for `variant === 'bordered'`, which meant non-bordered
+// tables had every cell reading {index: 0} from the default — fine until
+// we needed to look up labels by column index.
 
 function Row({children}: {children: ReactNode}) {
   const {variant} = useTable()
@@ -153,13 +192,11 @@ function Row({children}: {children: ReactNode}) {
         !isHeader && variant === 'striped' && isEvenRow && styles.stripedEven,
       ]}
     >
-      {variant === 'bordered'
-        ? childArray.map((child, index) => (
-            <CellIndexContext.Provider key={index} value={{index, total: childArray.length}}>
-              {child}
-            </CellIndexContext.Provider>
-          ))
-        : children}
+      {childArray.map((child, index) => (
+        <CellIndexContext.Provider key={index} value={{index, total: childArray.length}}>
+          {child}
+        </CellIndexContext.Provider>
+      ))}
     </html.div>
   )
 }
@@ -171,11 +208,19 @@ const CellIndexContext = createContext<{index: number; total: number}>({index: 0
 function HeaderCell({
   children,
   width: _width,
+  label: _label,
+  isActions: _isActions,
   'aria-label': ariaLabel,
 }: {
   children?: ReactNode
   /** Column width: CSS value like '40px', '2fr', 'max-content'. Defaults to '1fr'. */
   width?: string
+  /** Stack-mode label string. Required when responsive=true; falls back to
+   *  text-content of children with a dev-only console.warn. */
+  label?: string
+  /** Marks this column as the actions column — its body cells render as a
+   *  full-width footer in stack mode. */
+  isActions?: boolean
   'aria-label'?: string
 }) {
   const {size, variant} = useTable()
@@ -197,13 +242,19 @@ function HeaderCell({
     </html.div>
   )
 }
+HeaderCell.displayName = 'HeaderCell'
 
 // --- Cell ---
+//
+// Renders the column-header label as a real <html.span>, hidden via
+// container query in non-stack modes. The span is omitted entirely when
+// isActions=true — actions footers don't show a label.
 
-function Cell({children}: {children: ReactNode}) {
-  const {size, variant} = useTable()
+function Cell({children, isActions}: {children: ReactNode; isActions?: boolean}) {
+  const {size, variant, labels, responsive} = useTable()
   const {index, total} = useContext(CellIndexContext)
   const isLast = variant === 'bordered' && index === total - 1
+  const label = labels[index] ?? ''
 
   return (
     <html.div
@@ -213,8 +264,12 @@ function Cell({children}: {children: ReactNode}) {
         size === 'sm' ? styles.cellSm : styles.cellMd,
         variant === 'bordered' && styles.borderedCell,
         isLast && styles.borderedCellLast,
+        isActions && styles.cellActions,
       ]}
     >
+      {responsive && !isActions && label !== '' ? (
+        <html.span style={styles.cellLabel}>{label}</html.span>
+      ) : null}
       {children}
     </html.div>
   )
@@ -223,6 +278,7 @@ function Cell({children}: {children: ReactNode}) {
 // --- Export ---
 
 export const Table = {
+  Container,
   Root,
   Header,
   Body,
@@ -232,4 +288,5 @@ export const Table = {
   Pagination,
   SortIndicator,
   ColumnFilter,
+  SortChip,
 }