@duro-app/ui 3.4.2 → 3.6.0

package/dist/table.js

@@ -1,4 +1,4 @@
-import { c as H, m as p, d as b, M as F, s as xt, R as rt, H as kt, a as pt, B as bt, e as ft, C as mt, b as ht, f as yt } from "./Table-P-UHkEqJ.js";
+import { c as H, m as p, d as b, M as F, s as xt, R as rt, H as kt, a as pt, B as bt, e as ft, C as mt, b as ht, f as yt } from "./Table-B4F8XyqK.js";
 import { jsx as u, jsxs as B } from "react/jsx-runtime";
 import { flexRender as E, useReactTable as it, getPaginationRowModel as St, getFilteredRowModel as Tt, getSortedRowModel as at, getCoreRowModel as st } from "@tanstack/react-table";
 import { useState as G, useCallback as Ct, useRef as K, useEffect as Z, useLayoutEffect as wt } from "react";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "3.4.2",
+  "version": "3.6.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -64,7 +64,7 @@
   },
   "dependencies": {
     "@tanstack/react-virtual": "^3.14.6",
-    "@duro-app/tokens": "^3.4.2"
+    "@duro-app/tokens": "^3.6.0"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",

package/src/components/Icon/Icon.tsx

@@ -37,6 +37,9 @@ export type IconName =
   | 'mail'
   | 'file-text'
   | 'plug'
+  // Input / action glyphs
+  | 'search'
+  | 'mic'
   // Color-mode glyphs
   | 'sun'
   | 'moon'
@@ -264,6 +267,23 @@ const strokeIcons: Partial<Record<IconName, ReactNode>> = {
       <path d="M9 10.76V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v6.76a2 2 0 0 0 .55 1.38l1.68 1.78A1 1 0 0 1 16.5 16h-9a1 1 0 0 1-.73-1.68l1.68-1.78A2 2 0 0 0 9 10.76z" />
     </>
   ),
+  // ---- input / action ----
+  // Magnifying glass — search fields, find actions.
+  search: (
+    <>
+      <circle cx="11" cy="11" r="8" />
+      <line x1="21" y1="21" x2="16.65" y2="16.65" />
+    </>
+  ),
+  // Microphone — voice input, dictation.
+  mic: (
+    <>
+      <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
+      <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
+      <line x1="12" y1="19" x2="12" y2="23" />
+      <line x1="8" y1="23" x2="16" y2="23" />
+    </>
+  ),
   // ---- color mode ----
   sun: (
     <>

package/src/components/InputGroup/InputGroup.stories.tsx

@@ -3,6 +3,7 @@ import {expect, fn} from 'storybook/test'
 import {css, html} from 'react-strict-dom'
 import {InputGroup} from './InputGroup'
 import {Input} from '../Input/Input'
+import {Icon} from '../Icon/Icon'
 import {spacing} from '@duro-app/tokens/tokens/spacing.css'
 
 const meta: Meta = {
@@ -64,6 +65,26 @@ export const BothSides: Story = {
   },
 }
 
+export const SearchField: Story = {
+  render: () => (
+    <html.div style={layoutStyles.container}>
+      <InputGroup.Root>
+        <InputGroup.Addon position="start">
+          <Icon name="search" size="sm" />
+        </InputGroup.Addon>
+        <Input type="search" name="q" aria-label="Search" placeholder="Search" />
+        <InputGroup.Addon>
+          <Icon name="mic" size="sm" />
+        </InputGroup.Addon>
+      </InputGroup.Root>
+    </html.div>
+  ),
+  play: async ({canvas}) => {
+    const input = canvas.getByRole('searchbox', {name: 'Search'})
+    await expect(input).toHaveAttribute('name', 'q')
+  },
+}
+
 export const ClickableAddon: Story = {
   render: () => (
     <html.div style={layoutStyles.container}>

package/src/components/Tree/Tree.meta.ts

@@ -0,0 +1,41 @@
+import type {ComponentMeta} from '../component-meta'
+
+export const meta: ComponentMeta = {
+  description:
+    'Hierarchy of items with single selection and expandable branches (the WAI-ARIA tree pattern): one tab stop, arrow keys, Home/End, typeahead. Compound component — Root is required.',
+  whenToUse: [
+    'Browsing data that nests to any depth — a file tree, zones › services › capabilities, namespace › resource',
+    'Picking one node of a hierarchy to show its details beside the tree',
+  ],
+  whenNotToUse: [
+    'Site or app navigation — use SideNav (a rail advertises destinations; a tree browses data)',
+    'A flat list of choices — use List or RadioGroup',
+    'Choosing several nodes at once — not supported (single selection)',
+  ],
+  anatomy: {
+    required: ['Root', 'Item'],
+  },
+  relatedTo: [
+    {
+      component: 'SideNav',
+      kind: 'contrast',
+      relationship:
+        'SideNav is navigation between pages; Tree browses arbitrary-depth data. Never nest SideNav to fake a tree',
+    },
+    {
+      component: 'split-pane',
+      kind: 'composition',
+      relationship:
+        'A Tree in the list column of the split-pane recipe, the selection’s details beside it',
+    },
+  ],
+  example: `<Tree.Root aria-label="Blocs" defaultExpanded={['energy']} onValueChange={setSelected}>
+  <Tree.Item value="energy" label="Core business — Energy">
+    <Tree.Item value="generation" label="Generation" meta="4 apps" />
+    <Tree.Item value="network" label="Network operations">
+      <Tree.Item value="scada" label="SCADA supervision" />
+    </Tree.Item>
+  </Tree.Item>
+  <Tree.Item value="finance" label="Finance & steering" />
+</Tree.Root>`,
+}

package/src/components/Tree/Tree.stories.tsx

@@ -0,0 +1,151 @@
+import {useState} from 'react'
+import {html} from 'react-strict-dom'
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect} from 'storybook/test'
+import {Tree} from './Tree'
+
+const meta: Meta = {
+  title: 'Components/Tree',
+}
+
+export default meta
+type Story = StoryObj
+
+function Landscape(props: {
+  defaultExpanded?: string[]
+  onValueChange?: (v: string) => void
+  value?: string | null
+}) {
+  return (
+    <Tree.Root
+      aria-label="Blocs"
+      defaultExpanded={props.defaultExpanded}
+      onValueChange={props.onValueChange}
+      value={props.value}
+    >
+      <Tree.Item value="energy" label="Core business — Energy" meta="3 zones">
+        <Tree.Item value="generation" label="Generation" meta="4 apps" />
+        <Tree.Item value="network" label="Network operations">
+          <Tree.Item value="scada" label="SCADA supervision" />
+          <Tree.Item value="outage" label="Outage management" />
+        </Tree.Item>
+        <Tree.Item value="metering" label="Metering & data" />
+      </Tree.Item>
+      <Tree.Item value="market" label="Market & field">
+        <Tree.Item value="trading" label="Trading" />
+      </Tree.Item>
+      <Tree.Item value="finance" label="Finance & steering" />
+    </Tree.Root>
+  )
+}
+
+export const Default: Story = {
+  render: () => <Landscape defaultExpanded={['energy']} />,
+  play: async ({canvas, userEvent}) => {
+    const tree = canvas.getByRole('tree', {name: 'Blocs'})
+    await expect(tree).toBeInTheDocument()
+
+    const energy = canvas.getByRole('treeitem', {name: /Core business/})
+    await expect(energy).toHaveAttribute('aria-expanded', 'true')
+    await expect(energy).toHaveAttribute('aria-level', '1')
+    const generation = canvas.getByRole('treeitem', {name: /Generation/})
+    await expect(generation).toHaveAttribute('aria-level', '2')
+    // a leaf has no expanded state at all
+    await expect(generation).not.toHaveAttribute('aria-expanded')
+    // a closed branch renders no children
+    await expect(canvas.queryByRole('treeitem', {name: /SCADA/})).toBeNull()
+
+    // one tab stop: the first item
+    await expect(energy).toHaveAttribute('tabindex', '0')
+    await expect(generation).toHaveAttribute('tabindex', '-1')
+
+    // a click selects the row
+    await userEvent.click(canvas.getByText('Generation'))
+    await expect(generation).toHaveAttribute('aria-selected', 'true')
+    await expect(energy).toHaveAttribute('aria-selected', 'false')
+  },
+}
+
+export const KeyboardNavigation: Story = {
+  render: () => <Landscape />,
+  play: async ({canvas, userEvent}) => {
+    const item = (name: RegExp) => canvas.getByRole('treeitem', {name})
+    await userEvent.tab()
+    await expect(item(/Core business/)).toHaveFocus()
+
+    // → opens the branch, → again goes to its first child
+    await userEvent.keyboard('{ArrowRight}')
+    await expect(item(/Core business/)).toHaveAttribute('aria-expanded', 'true')
+    await expect(item(/Core business/)).toHaveFocus()
+    await userEvent.keyboard('{ArrowRight}')
+    await expect(item(/Generation/)).toHaveFocus()
+
+    // ↓ walks the visible items; ↓ onto a closed branch, → opens it
+    await userEvent.keyboard('{ArrowDown}')
+    await expect(item(/Network operations/)).toHaveFocus()
+    await userEvent.keyboard('{ArrowRight}{ArrowDown}')
+    await expect(item(/SCADA/)).toHaveFocus()
+    await expect(item(/SCADA/)).toHaveAttribute('aria-level', '3')
+
+    // ← on a leaf goes to the parent; ← on an open branch closes it
+    await userEvent.keyboard('{ArrowLeft}')
+    await expect(item(/Network operations/)).toHaveFocus()
+    await userEvent.keyboard('{ArrowLeft}')
+    await expect(item(/Network operations/)).toHaveAttribute('aria-expanded', 'false')
+    await expect(canvas.queryByRole('treeitem', {name: /SCADA/})).toBeNull()
+
+    // Home / End
+    await userEvent.keyboard('{End}')
+    await expect(item(/Finance/)).toHaveFocus()
+    await userEvent.keyboard('{Home}')
+    await expect(item(/Core business/)).toHaveFocus()
+
+    // Enter selects; the tab stop follows focus
+    await userEvent.keyboard('{ArrowDown}{Enter}')
+    await expect(item(/Generation/)).toHaveAttribute('aria-selected', 'true')
+    await expect(item(/Generation/)).toHaveAttribute('tabindex', '0')
+    await expect(item(/Core business/)).toHaveAttribute('tabindex', '-1')
+  },
+}
+
+export const Typeahead: Story = {
+  render: () => <Landscape defaultExpanded={['energy']} />,
+  play: async ({canvas, userEvent}) => {
+    const item = (name: RegExp) => canvas.getByRole('treeitem', {name})
+    await userEvent.tab()
+    // a letter jumps to the next visible item starting with it
+    await userEvent.keyboard('m')
+    await expect(item(/Metering/)).toHaveFocus()
+    // the same letter again cycles to the next match
+    await userEvent.keyboard('m')
+    await expect(item(/Market/)).toHaveFocus()
+    // a pause starts a new search; a prefix typed in one go narrows
+    await new Promise((r) => setTimeout(r, 600))
+    await userEvent.keyboard('fi')
+    await expect(item(/Finance/)).toHaveFocus()
+  },
+}
+
+function ControlledTree() {
+  const [value, setValue] = useState<string | null>('trading')
+  return (
+    <>
+      <Landscape defaultExpanded={['market']} value={value} onValueChange={setValue} />
+      <html.span role="status" aria-label="Selected">
+        {value}
+      </html.span>
+    </>
+  )
+}
+
+export const Controlled: Story = {
+  render: () => <ControlledTree />,
+  play: async ({canvas, userEvent}) => {
+    const trading = canvas.getByRole('treeitem', {name: /Trading/})
+    await expect(trading).toHaveAttribute('aria-selected', 'true')
+    // the selection holds the tab stop
+    await expect(trading).toHaveAttribute('tabindex', '0')
+    await userEvent.click(canvas.getByText('Finance & steering'))
+    await expect(canvas.getByLabelText('Selected')).toHaveTextContent('finance')
+  },
+}

package/src/components/Tree/Tree.tsx

@@ -0,0 +1,304 @@
+import {
+  Children,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react'
+import {html} from 'react-strict-dom'
+import {styles} from './styles.css'
+import {TreeContext, TreeLevelContext, useTree} from './TreeContext'
+
+/* Tree — a hierarchy of items (the WAI-ARIA tree pattern): single selection,
+ * expandable branches, one tab stop (roving tabindex), and the keyboard of a
+ * file explorer — ↑/↓ move between visible items, → opens a branch then goes
+ * to its first child, ← closes it then goes to the parent, Home/End, Enter
+ * or Space select, and typing jumps to the next item whose label starts with
+ * the typed letters. */
+
+// --- Root ---
+
+interface RootProps {
+  children: ReactNode
+  /** accessible name of the tree (or give `aria-labelledby`) */
+  'aria-label'?: string
+  'aria-labelledby'?: string
+  /** the selected item (controlled) */
+  value?: string | null
+  defaultValue?: string | null
+  onValueChange?: (value: string) => void
+  /** the open branches (controlled) */
+  expanded?: ReadonlyArray<string>
+  defaultExpanded?: ReadonlyArray<string>
+  onExpandedChange?: (expanded: string[]) => void
+}
+
+const TYPEAHEAD_RESET_MS = 500
+
+function Root({
+  children,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  value,
+  defaultValue = null,
+  onValueChange,
+  expanded,
+  defaultExpanded = [],
+  onExpandedChange,
+}: RootProps) {
+  const [selectedInner, setSelectedInner] = useState<string | null>(defaultValue)
+  const selectedValue = value !== undefined ? value : selectedInner
+  const [expandedInner, setExpandedInner] = useState<ReadonlyArray<string>>(defaultExpanded)
+  const open = expanded ?? expandedInner
+  const [focusValue, setFocusValue] = useState<string | null>(selectedValue)
+  // the ring shows on the focused ROW (the item wraps its children, so a
+  // ring on it would circle the whole branch), only for keyboard focus —
+  // the tree's own :focus-visible
+  const [keyboardFocus, setKeyboardFocus] = useState(false)
+  const rootRef = useRef<HTMLUListElement>(null)
+
+  const onSelect = useCallback(
+    (v: string) => {
+      if (value === undefined) setSelectedInner(v)
+      onValueChange?.(v)
+    },
+    [value, onValueChange],
+  )
+  const setExpanded = useCallback(
+    (v: string, isOpen: boolean) => {
+      const next = isOpen ? [...new Set([...open, v])] : open.filter((x) => x !== v)
+      if (next.length === open.length && next.every((x, i) => x === open[i])) return
+      if (expanded === undefined) setExpandedInner(next)
+      onExpandedChange?.(next)
+    },
+    [open, expanded, onExpandedChange],
+  )
+  const isExpanded = useCallback((v: string) => open.includes(v), [open])
+  const toggle = useCallback((v: string) => setExpanded(v, !open.includes(v)), [open, setExpanded])
+
+  // Exactly one item is tabbable: the focus holder, else the selection, else
+  // the first item — re-checked when an item appears, closes or goes away.
+  useLayoutEffect(() => {
+    const root = rootRef.current
+    if (!root) return
+    const tabbable = root.querySelector('[role="treeitem"][tabindex="0"]')
+    if (tabbable) return
+    const first = root.querySelector<HTMLElement>('[role="treeitem"]')
+    const next = first?.dataset.treeValue ?? null
+    if (next !== focusValue) setFocusValue(next)
+  }, [focusValue, open, children])
+
+  // Keyboard: DOM order over the rendered items IS the visible order (a
+  // closed branch renders no children), so navigation reads it directly.
+  const typeahead = useRef({text: '', at: 0})
+  useEffect(() => {
+    const root = rootRef.current
+    if (!root) return
+    const rootEl = root
+    const items = () => Array.from(rootEl.querySelectorAll<HTMLElement>('[role="treeitem"]'))
+    const focusItem = (el: HTMLElement | null | undefined) => {
+      if (!el) return
+      el.focus()
+    }
+    function onKeyDown(e: KeyboardEvent) {
+      const current = (e.target as HTMLElement).closest<HTMLElement>('[role="treeitem"]')
+      if (!current || !rootEl.contains(current)) return
+      const list = items()
+      const i = list.indexOf(current)
+      const val = current.dataset.treeValue ?? ''
+      const isOpen = current.getAttribute('aria-expanded')
+      switch (e.key) {
+        case 'ArrowDown':
+          e.preventDefault()
+          focusItem(list[i + 1])
+          return
+        case 'ArrowUp':
+          e.preventDefault()
+          focusItem(list[i - 1])
+          return
+        case 'ArrowRight':
+          e.preventDefault()
+          if (isOpen === 'false') setExpanded(val, true)
+          else if (isOpen === 'true') focusItem(list[i + 1])
+          return
+        case 'ArrowLeft': {
+          e.preventDefault()
+          if (isOpen === 'true') {
+            setExpanded(val, false)
+            return
+          }
+          const parent = current.parentElement?.closest<HTMLElement>('[role="treeitem"]')
+          if (parent && rootEl.contains(parent)) focusItem(parent)
+          return
+        }
+        case 'Home':
+          e.preventDefault()
+          focusItem(list[0])
+          return
+        case 'End':
+          e.preventDefault()
+          focusItem(list[list.length - 1])
+          return
+        case 'Enter':
+        case ' ':
+          e.preventDefault()
+          onSelect(val)
+          return
+      }
+      // typeahead: a printable character, no modifier
+      if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+        const now = Date.now()
+        const t = typeahead.current
+        t.text = now - t.at > TYPEAHEAD_RESET_MS ? e.key : t.text + e.key
+        t.at = now
+        // the same letter typed again cycles through the items it starts;
+        // a real prefix ("fi") narrows, and may match the current item
+        const typed = t.text.toLocaleLowerCase()
+        const repeat = [...typed].every((c) => c === typed[0])
+        const needle = repeat ? typed[0] : typed
+        const start = repeat ? i + 1 : i
+        for (let k = 0; k < list.length; k++) {
+          const el = list[(start + k) % list.length]
+          if ((el.dataset.treeText ?? '').toLocaleLowerCase().startsWith(needle)) {
+            focusItem(el)
+            break
+          }
+        }
+      }
+    }
+    // the roving tab stop follows focus, however it moved (keys or pointer)
+    function onFocusIn(e: FocusEvent) {
+      const item = (e.target as HTMLElement).closest<HTMLElement>('[role="treeitem"]')
+      const v = item?.dataset.treeValue
+      if (v) setFocusValue(v)
+      setKeyboardFocus(item?.matches(':focus-visible') ?? false)
+    }
+    function onFocusOut(e: FocusEvent) {
+      if (!rootEl.contains(e.relatedTarget as Node | null)) setKeyboardFocus(false)
+    }
+    const onPointerDown = () => setKeyboardFocus(false)
+    const onKey = () => setKeyboardFocus(true)
+    root.addEventListener('keydown', onKeyDown)
+    root.addEventListener('keydown', onKey)
+    root.addEventListener('focusin', onFocusIn)
+    root.addEventListener('focusout', onFocusOut)
+    root.addEventListener('pointerdown', onPointerDown)
+    return () => {
+      root.removeEventListener('keydown', onKeyDown)
+      root.removeEventListener('keydown', onKey)
+      root.removeEventListener('focusin', onFocusIn)
+      root.removeEventListener('focusout', onFocusOut)
+      root.removeEventListener('pointerdown', onPointerDown)
+    }
+  }, [onSelect, setExpanded])
+
+  return (
+    <TreeContext.Provider
+      value={{
+        selectedValue,
+        onSelect,
+        isExpanded,
+        toggle,
+        setExpanded,
+        focusValue,
+        setFocusValue,
+        keyboardFocus,
+      }}
+    >
+      <TreeLevelContext.Provider value={1}>
+        <html.ul
+          ref={rootRef}
+          role="tree"
+          aria-label={ariaLabel}
+          aria-labelledby={ariaLabelledBy}
+          style={styles.root}
+        >
+          {children}
+        </html.ul>
+      </TreeLevelContext.Provider>
+    </TreeContext.Provider>
+  )
+}
+
+// --- Item ---
+
+interface ItemProps {
+  /** unique within the tree */
+  value: string
+  /** what the row shows */
+  label: ReactNode
+  /** plain text for typeahead when `label` isn't a string */
+  textValue?: string
+  /** nested items: the branch's children (none = a leaf) */
+  children?: ReactNode
+  /** trailing content on the row (a count, a status) */
+  meta?: ReactNode
+}
+
+function Item({value, label, textValue, children, meta}: ItemProps) {
+  const {selectedValue, onSelect, isExpanded, toggle, focusValue, keyboardFocus} = useTree()
+  const level = useContext(TreeLevelContext)
+  const hasChildren = Children.count(children) > 0
+  const open = hasChildren && isExpanded(value)
+  const selected = selectedValue === value
+  const text = textValue ?? (typeof label === 'string' ? label : '')
+  // named by its own label only: a branch's content includes its children,
+  // and a name computed from content would read the whole subtree
+  const labelId = useId()
+
+  return (
+    <html.li
+      role="treeitem"
+      aria-labelledby={labelId}
+      aria-level={level}
+      aria-expanded={hasChildren ? open : undefined}
+      aria-selected={selected}
+      tabIndex={focusValue === value ? 0 : -1}
+      data-tree-value={value}
+      data-tree-text={text}
+      style={styles.item}
+    >
+      <html.div
+        onClick={() => onSelect(value)}
+        style={[
+          styles.row,
+          styles.indent(level),
+          selected && styles.rowSelected,
+          keyboardFocus && focusValue === value && styles.rowFocused,
+        ]}
+      >
+        <html.span
+          aria-hidden
+          onClick={(e: {stopPropagation: () => void}) => {
+            if (!hasChildren) return
+            e.stopPropagation()
+            toggle(value)
+          }}
+          style={[styles.chevron, open && styles.chevronOpen, !hasChildren && styles.chevronLeaf]}
+        >
+          ▸
+        </html.span>
+        <html.span id={labelId} style={styles.label}>
+          {label}
+        </html.span>
+        {meta != null ? <html.span style={styles.meta}>{meta}</html.span> : null}
+      </html.div>
+      {open ? (
+        <TreeLevelContext.Provider value={level + 1}>
+          <html.ul role="group" style={styles.group}>
+            {children}
+          </html.ul>
+        </TreeLevelContext.Provider>
+      ) : null}
+    </html.li>
+  )
+}
+
+export const Tree = {
+  Root,
+  Item,
+}

package/src/components/Tree/TreeContext.ts

@@ -0,0 +1,26 @@
+import {createContext, useContext} from 'react'
+
+export interface TreeContextValue {
+  /** the selected item's value (single selection), or null */
+  selectedValue: string | null
+  onSelect: (value: string) => void
+  isExpanded: (value: string) => boolean
+  toggle: (value: string) => void
+  setExpanded: (value: string, expanded: boolean) => void
+  /** the item holding the tree's single tab stop (roving tabindex) */
+  focusValue: string | null
+  setFocusValue: (value: string) => void
+  /** the focus holder is focused from the keyboard (draws its ring) */
+  keyboardFocus: boolean
+}
+
+export const TreeContext = createContext<TreeContextValue | null>(null)
+
+export function useTree() {
+  const ctx = useContext(TreeContext)
+  if (!ctx) throw new Error('Tree compound components must be used within Tree.Root')
+  return ctx
+}
+
+/** The nesting depth of the items rendered here (1 = top level). */
+export const TreeLevelContext = createContext(1)