@duro-app/ui 5.13.0 → 5.14.0

package/src/components/Listbox/Listbox.native.tsx

@@ -0,0 +1,153 @@
+import {createContext, type ReactNode, type Ref, useContext} from 'react'
+import {View} from 'react-native'
+import {Pressable} from 'react-native-gesture-handler'
+import {html} from 'react-strict-dom'
+import {sheetStyles} from './native.css'
+import {textOf} from '../../shared/textOf'
+
+/**
+ * Native Listbox (plan N0, Slice C): a plain list of options, laid out where
+ * it is rendered — inside a Select or Combobox sheet. Nothing is anchored and
+ * nothing is highlighted: native has no arrow keys (Decision 6), so each option
+ * is its own screen-reader stop and a press chooses it.
+ */
+
+export type ListboxMaxHeight = 'listMaxH' | 'listMaxHSm'
+
+/** Default option id: the listbox id plus the value, made safe for an id. */
+export function defaultOptionId(listboxId: string, value: string): string {
+  return `${listboxId}-option-${value.replace(/[^\w-]/g, (ch) => `_${ch.charCodeAt(0).toString(16)}`)}`
+}
+
+export interface ListboxAnchorProps {
+  role?: 'combobox'
+  'aria-controls': string | undefined
+  'aria-expanded': boolean
+  'aria-activedescendant': string | undefined
+  'aria-autocomplete': 'list'
+  'aria-haspopup': 'listbox'
+}
+
+/** The web's anchor ARIA, kept for one API: RSD drops these props on native. */
+export function getAnchorProps({
+  id,
+  open,
+  highlightedId,
+}: {
+  id: string
+  open: boolean
+  highlightedId: string | null | undefined
+}): ListboxAnchorProps {
+  return {
+    'aria-controls': open ? id : undefined,
+    'aria-expanded': open,
+    'aria-activedescendant': open && highlightedId ? highlightedId : undefined,
+    'aria-autocomplete': 'list',
+    'aria-haspopup': 'listbox',
+  }
+}
+
+interface ListboxContextValue {
+  onSelect?: (value: string) => void
+}
+
+const ListboxContext = createContext<ListboxContextValue | null>(null)
+
+function useListbox(part: string) {
+  const ctx = useContext(ListboxContext)
+  if (!ctx) throw new Error(`Listbox.${part} must be used within Listbox.Root`)
+  return ctx
+}
+
+interface RootProps {
+  id: string
+  open: boolean
+  /** A press on an option. */
+  onSelect?: (value: string) => void
+  /** Accessible name of the list. */
+  'aria-label'?: string
+  children: ReactNode
+  // The web's placement and keyboard props; a native list flows in place.
+  anchor?: () => unknown
+  matchAnchorWidth?: boolean
+  highlightedId?: string | null
+  onHighlight?: (id: string | null) => void
+  getOptionId?: (value: string) => string
+  maxHeight?: ListboxMaxHeight
+}
+
+function Root({id, open, onSelect, 'aria-label': ariaLabel, children}: RootProps) {
+  if (!open) return null
+  return (
+    <ListboxContext.Provider value={{onSelect}}>
+      <html.div id={id} role="listbox" aria-label={ariaLabel} style={sheetStyles.list}>
+        {children}
+      </html.div>
+    </ListboxContext.Provider>
+  )
+}
+
+interface OptionProps {
+  value: string
+  id?: string
+  /** The committed choice: filled, with a trailing check. */
+  selected?: boolean
+  disabled?: boolean
+  children: ReactNode
+  ref?: Ref<unknown>
+}
+
+function Option({value, selected = false, disabled = false, children, ref}: OptionProps) {
+  const {onSelect} = useListbox('Option')
+  const choose = () => {
+    if (!disabled) onSelect?.(value)
+  }
+  // Two hosts, one job each. The View is what a screen reader reads: a
+  // selected button named by its text alone, activated by a double-tap.
+  // Gesture Handler's Pressable takes the touch natively, since an RN
+  // Pressable loses the first tap with the keyboard up to any ScrollView
+  // above the sheet's Modal (keyboardShouldPersistTaps 'never', the default);
+  // its native button does not expose a role or state, so it is hidden.
+  return (
+    <View
+      ref={ref as Ref<never>}
+      accessible
+      accessibilityRole="button"
+      accessibilityLabel={textOf(children) || undefined}
+      accessibilityState={{selected, disabled}}
+      accessibilityActions={ACTIVATE}
+      onAccessibilityAction={(e) => {
+        if (e.nativeEvent.actionName === 'activate') choose()
+      }}
+    >
+      <Pressable accessible={false} disabled={disabled} onPress={choose}>
+        {({pressed}) => (
+          <html.div style={[sheetStyles.option, (selected || pressed) && sheetStyles.optionFilled]}>
+            <html.span style={[sheetStyles.label, disabled && sheetStyles.labelDisabled]}>
+              {children}
+            </html.span>
+            {selected && (
+              <html.span aria-hidden style={sheetStyles.check}>
+                ✓
+              </html.span>
+            )}
+          </html.div>
+        )}
+      </Pressable>
+    </View>
+  )
+}
+
+const ACTIVATE = [{name: 'activate'}] as const
+
+/** Shown in place of options when there are none, or none match. */
+function Empty({children}: {children: ReactNode}) {
+  return <html.div style={sheetStyles.empty}>{children}</html.div>
+}
+
+export const Listbox = {
+  Root,
+  Option,
+  Empty,
+  getAnchorProps,
+}

package/src/components/Listbox/native.css.ts

@@ -0,0 +1,91 @@
+import {css} from 'react-strict-dom'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
+import {typography} from '@duro-app/tokens/tokens/typography.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
+
+/**
+ * A picker sheet's rows on native (plan N0, C0 direction A "Check"): a
+ * touch-target row per option, the chosen one filled and checked.
+ */
+export const sheetStyles = css.create({
+  list: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  option: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+    minHeight: sizes.touchTarget,
+    paddingLeft: spacing.md,
+    paddingRight: spacing.md,
+    borderBottomWidth: borders.hairline,
+    borderBottomStyle: 'solid',
+    borderBottomColor: colors.border,
+  },
+  // The chosen option, and a row under the finger.
+  optionFilled: {
+    backgroundColor: colors.bgCardHover,
+  },
+  label: {
+    flex: 1,
+    color: colors.text,
+    fontFamily: typography.fontFamily,
+    fontSize: typography.fontSizeSm,
+  },
+  labelDisabled: {
+    color: colors.textMuted,
+  },
+  check: {
+    color: colors.accent,
+    fontFamily: typography.fontFamily,
+    fontSize: typography.fontSizeSm,
+    fontWeight: typography.fontWeightSemibold,
+  },
+  empty: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: spacing.xs,
+    paddingTop: spacing.xl,
+    paddingBottom: spacing.xl,
+    paddingLeft: spacing.md,
+    paddingRight: spacing.md,
+    color: colors.textMuted,
+    fontFamily: typography.fontFamily,
+    fontSize: typography.fontSizeSm,
+    textAlign: 'center',
+  },
+  // The search field pinned at a Combobox sheet's top, under its header.
+  search: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+    minHeight: sizes.touchTarget,
+    marginLeft: spacing.md,
+    marginRight: spacing.md,
+    marginBottom: spacing.sm,
+    paddingLeft: spacing.sm,
+    paddingRight: spacing.sm,
+    borderRadius: radii.sm,
+    borderWidth: borders.hairline,
+    borderStyle: 'solid',
+    borderColor: colors.border,
+    backgroundColor: colors.bg,
+  },
+  searchInput: {
+    flex: 1,
+    color: colors.text,
+    fontFamily: typography.fontFamily,
+    fontSize: typography.fontSizeSm,
+    backgroundColor: 'transparent',
+    borderWidth: 0,
+    '::placeholder': {
+      color: colors.textMuted,
+    },
+  },
+})

package/src/components/ScrollArea/ScrollArea.meta.ts

@@ -2,7 +2,7 @@ import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
   description:
-    'Custom scrollbar region with draggable thumb. Supports vertical and horizontal scrolling. Compound component — Root is required. Inside a Drawer, a drag in the viewport scrolls it; the drawer only takes a drag toward its edge from the scroll start.',
+    'Custom scrollbar region with draggable thumb. Supports vertical and horizontal scrolling. Compound component — Root is required. Inside a Drawer, a drag in the viewport scrolls it; the drawer only takes a drag toward its edge from the scroll start. On React Native the Viewport is an RN ScrollView with the platform scroll indicator, capped by the same maxHeight token key; Scrollbar and Thumb render nothing.',
   whenToUse: [
     'Custom-styled scrollbars for content overflow areas',
     'Chat logs, code blocks, or long lists with constrained height',

package/src/components/ScrollArea/ScrollArea.native.tsx

@@ -0,0 +1,61 @@
+import type {ComponentProps, ReactNode} from 'react'
+import {ScrollView, StyleSheet} from 'react-native'
+import {html} from 'react-strict-dom'
+import {styles} from './styles.css'
+import {resolveLength, type Length} from '../../shared/length'
+
+/**
+ * Native ScrollArea (plan N0, Slice C): Viewport is an RN ScrollView with the
+ * platform's own scroll indicator, so Scrollbar and Thumb draw nothing. The
+ * cap (`maxHeight`, a size-token key) sits on the view around it, where
+ * react-strict-dom resolves the token.
+ */
+
+function Root({children}: {children: ReactNode}) {
+  return <html.div style={styles.root}>{children}</html.div>
+}
+
+interface ViewportProps {
+  children: ReactNode
+  maxHeight?: Length
+  /** Extra styles for the viewport (e.g. a pointer-aware max height). */
+  style?: ComponentProps<typeof html.div>['style']
+  /** The web's roving-focus flag; native has no tab stops. */
+  rovingOwner?: boolean
+}
+
+function Viewport({children, maxHeight, style}: ViewportProps) {
+  return (
+    <html.div
+      style={[maxHeight != null && styles.viewportMaxHeight(resolveLength(maxHeight)), style]}
+    >
+      <ScrollView style={layout.scroll}>{children}</ScrollView>
+    </html.div>
+  )
+}
+
+function Content({children}: {children: ReactNode}) {
+  return <html.div>{children}</html.div>
+}
+
+type ScrollbarOrientation = 'vertical' | 'horizontal'
+
+/** The platform draws its own scroll indicator. */
+function Scrollbar(_props: {orientation?: ScrollbarOrientation; children?: ReactNode}) {
+  return null
+}
+
+function Thumb(_props: {orientation?: ScrollbarOrientation}) {
+  return null
+}
+
+// The ScrollView shrinks to its capped parent instead of growing past it.
+const layout = StyleSheet.create({scroll: {flexGrow: 0, flexShrink: 1}})
+
+export const ScrollArea = {
+  Root,
+  Viewport,
+  Content,
+  Scrollbar,
+  Thumb,
+}

package/src/components/Select/Select.meta.ts

@@ -2,7 +2,7 @@ import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
   description:
-    'Dropdown select for choosing one value from a list. Compound component — Root is required (throws without it). Select.Trigger takes size="small" to match small Toggles and Buttons in a toolbar.',
+    'Dropdown select for choosing one value from a list. Compound component — Root is required (throws without it). Select.Trigger takes size="small" to match small Toggles and Buttons in a toolbar. Select.Popup takes label (the list\'s accessible name) and empty (shown in place of the list when it has no items). On React Native the trigger opens a bottom sheet (a Drawer at the medium and large detents) titled by label, with a Cancel text button (cancelLabel); the chosen option is filled with a trailing check, and a press picks an option and closes the sheet. Native has no arrow keys: each option is its own screen-reader stop.',
   whenToUse: [
     'User must pick one option from a predefined list',
     'Form field for country, category, role selection',

package/src/components/Select/Select.native.tsx

@@ -0,0 +1,224 @@
+import {
+  Children,
+  createContext,
+  type ReactNode,
+  type RefObject,
+  useContext,
+  useEffect,
+  useId,
+  useRef,
+} from 'react'
+import {Pressable} from 'react-native'
+import {html} from 'react-strict-dom'
+import {styles} from './styles.css'
+import {useSelectState} from './selectState'
+import {Drawer} from '../Drawer/Drawer'
+import {Listbox} from '../Listbox/Listbox'
+import {Button} from '../Button/Button'
+import {nativeStyles} from './native.css'
+import {Chevron} from '../SideNav/Chevron'
+import {useTooltipHint} from '../Tooltip/TooltipHint'
+import {focusForAccessibility} from '../../shared/accessibilityFocus'
+import {textOf} from '../../shared/textOf'
+import type {ControlSize} from '../../shared/types'
+
+/** The picker sheet's detents (plan N0, Decision 5). */
+const SNAP_POINTS = ['medium', 'large'] as const
+
+interface NativeSelectContextValue {
+  value: string | null
+  open: boolean
+  setOpen: (open: boolean) => void
+  choose: (value: string) => void
+  labels: Record<string, string>
+  registerLabel: (value: string, label: string) => void
+  listboxId: string
+  triggerRef: RefObject<unknown>
+}
+
+const SelectContext = createContext<NativeSelectContextValue | null>(null)
+
+function useSelect() {
+  const ctx = useContext(SelectContext)
+  if (!ctx) throw new Error('Select compound components must be used within Select.Root')
+  return ctx
+}
+
+/**
+ * True while Popup renders its items unseen, so each registers its label
+ * before the sheet first opens (the web reads them from the hidden list).
+ */
+const CollectContext = createContext(false)
+
+interface RootProps {
+  /** The web's hidden form input; native has no form post. */
+  name?: string
+  defaultValue?: string
+  value?: string
+  onValueChange?: (value: string | null) => void
+  initialLabels?: Record<string, string>
+  children: ReactNode
+}
+
+/**
+ * Native Select (plan N0, Slice C): the trigger opens a bottom sheet (a
+ * Drawer at the medium and large detents) listing the options; a press picks
+ * one and closes the sheet (C0 direction A, "Check"). The screen reader's
+ * focus returns to the trigger.
+ */
+function Root({defaultValue, value, onValueChange, initialLabels, children}: RootProps) {
+  const state = useSelectState({defaultValue, value, onValueChange, initialLabels})
+  const {open, setOpen, setValue} = state
+  const listboxId = useId()
+  const triggerRef = useRef<unknown>(null)
+
+  const wasOpen = useRef(open)
+  useEffect(() => {
+    if (wasOpen.current && !open) focusForAccessibility(triggerRef.current, 'Select')
+    wasOpen.current = open
+  }, [open])
+
+  const ctx: NativeSelectContextValue = {
+    value: state.value,
+    open,
+    setOpen,
+    choose: (v) => {
+      setValue(v)
+      setOpen(false)
+    },
+    labels: state.labels,
+    registerLabel: state.registerLabel,
+    listboxId,
+    triggerRef,
+  }
+
+  return (
+    <SelectContext.Provider value={ctx}>
+      <Drawer.Root open={open} onOpenChange={setOpen} anchor="bottom" snapPoints={SNAP_POINTS}>
+        <html.div style={[styles.root, nativeStyles.nativeFlex]}>{children}</html.div>
+      </Drawer.Root>
+    </SelectContext.Provider>
+  )
+}
+
+/**
+ * An RN Pressable host, so it carries an enclosing Tooltip's text as its
+ * accessibility hint (RSD drops `accessibilityHint` on html.*).
+ */
+function Trigger({
+  children,
+  'aria-label': ariaLabel,
+  size = 'default',
+}: {
+  children: ReactNode
+  'aria-label'?: string
+  size?: ControlSize
+}) {
+  const {open, setOpen, triggerRef} = useSelect()
+  const hint = useTooltipHint()
+  return (
+    <Pressable
+      ref={triggerRef as RefObject<never>}
+      onPress={() => setOpen(true)}
+      accessibilityRole="combobox"
+      accessibilityLabel={ariaLabel}
+      accessibilityHint={hint}
+      accessibilityState={{expanded: open}}
+    >
+      <html.div
+        style={[styles.trigger, nativeStyles.nativeFlex, size === 'small' && styles.triggerSmall]}
+      >
+        {children}
+      </html.div>
+    </Pressable>
+  )
+}
+
+function Value({placeholder}: {placeholder?: string}) {
+  const {value, labels} = useSelect()
+  const display = value ? (labels[value] ?? value) : null
+  return (
+    <html.span style={display ? styles.value : styles.placeholder}>
+      {display ?? placeholder}
+    </html.span>
+  )
+}
+
+function Icon({children}: {children?: ReactNode}) {
+  return (
+    <html.div style={[styles.icon, nativeStyles.nativeFlex, nativeStyles.iconDown]}>
+      {children ?? <Chevron color="textMuted" />}
+    </html.div>
+  )
+}
+
+interface PopupProps {
+  children: ReactNode
+  /** The sheet's title (native) and the list's accessible name. */
+  label?: string
+  /** The sheet header's text button that closes it unchanged (native). Default: 'Cancel' */
+  cancelLabel?: string
+  /** Shown in place of the list when there are no items. */
+  empty?: ReactNode
+}
+
+function Popup({children, label, cancelLabel = 'Cancel', empty}: PopupProps) {
+  const {open, choose, listboxId} = useSelect()
+  const hasItems = Children.toArray(children).length > 0
+  return (
+    <>
+      <CollectContext.Provider value={true}>{children}</CollectContext.Provider>
+      <Drawer.Portal>
+        <Drawer.Header titleAlign="center">
+          {label ? <Drawer.Title>{label}</Drawer.Title> : null}
+          <Drawer.Close>
+            <Button variant="link">{cancelLabel}</Button>
+          </Drawer.Close>
+        </Drawer.Header>
+        {!hasItems && empty != null ? (
+          <Listbox.Empty>{empty}</Listbox.Empty>
+        ) : (
+          <Drawer.Body flush>
+            <Listbox.Root id={listboxId} open={open} onSelect={choose} aria-label={label}>
+              {children}
+            </Listbox.Root>
+          </Drawer.Body>
+        )}
+      </Drawer.Portal>
+    </>
+  )
+}
+
+interface ItemProps {
+  value: string
+  children: ReactNode
+}
+
+function Item({value: itemValue, children}: ItemProps) {
+  const collecting = useContext(CollectContext)
+  const {value, registerLabel} = useSelect()
+  const label = textOf(children)
+  useEffect(() => {
+    if (collecting && label) registerLabel(itemValue, label)
+  }, [collecting, itemValue, label, registerLabel])
+  if (collecting) return null
+  return (
+    <Listbox.Option value={itemValue} selected={value === itemValue}>
+      {children}
+    </Listbox.Option>
+  )
+}
+
+function ItemText({children}: {children: ReactNode}) {
+  return <html.span>{children}</html.span>
+}
+
+export const Select = {
+  Root,
+  Trigger,
+  Value,
+  Icon,
+  Popup,
+  Item,
+  ItemText,
+}

package/src/components/Select/Select.stories.tsx

@@ -1,5 +1,5 @@
 import type {Meta, StoryObj} from '@storybook/react'
-import {expect, screen} from 'storybook/test'
+import {expect, fn, screen} from 'storybook/test'
 import {Dialog} from '../Dialog/Dialog'
 import {Select} from './Select'
 
@@ -213,3 +213,51 @@ export const ArrowKeysOpen: Story = {
     await userEvent.keyboard('{Escape}')
   },
 }
+
+const MODELS = ['claude-opus-5-5', 'claude-sonnet-5-5', 'claude-haiku-5-5', 'gpt-6', 'gemini-3-pro']
+
+interface LabelledArgs {
+  label: string
+  empty: string
+  itemCount: number
+  onValueChange?: (value: string | null) => void
+}
+
+/**
+ * Popup's label names the list (and titles the native sheet); empty replaces
+ * the list when there are no items. Set itemCount to 0 for the empty state.
+ */
+export const LabelledAndEmpty: StoryObj<LabelledArgs> = {
+  args: {
+    label: 'Model',
+    empty: 'No models. Connect a provider to choose a model.',
+    itemCount: 0,
+    onValueChange: fn(),
+  },
+  argTypes: {
+    label: {control: 'text', description: "Select.Popup: the list's accessible name"},
+    empty: {control: 'text', description: 'Select.Popup: shown when there are no items'},
+    itemCount: {control: {type: 'range', min: 0, max: MODELS.length, step: 1}},
+  },
+  render: ({label, empty, itemCount, onValueChange}) => (
+    <Select.Root onValueChange={onValueChange}>
+      <Select.Trigger aria-label={label}>
+        <Select.Value placeholder="Choose a model" />
+        <Select.Icon />
+      </Select.Trigger>
+      <Select.Popup label={label} empty={empty}>
+        {MODELS.slice(0, itemCount).map((m) => (
+          <Select.Item key={m} value={m}>
+            {m}
+          </Select.Item>
+        ))}
+      </Select.Popup>
+    </Select.Root>
+  ),
+  play: async ({canvas, userEvent}) => {
+    await userEvent.click(canvas.getByRole('combobox'))
+    const list = screen.getByRole('listbox', {name: 'Model'})
+    await expect(list).toHaveTextContent(/No models/)
+    await expect(screen.queryAllByRole('option')).toHaveLength(0)
+  },
+}

package/src/components/Select/Select.tsx

@@ -1,4 +1,4 @@
-import {type ReactNode, useRef, useId, useEffect, useLayoutEffect, useState} from 'react'
+import {Children, type ReactNode, useRef, useId, useEffect, useLayoutEffect, useState} from 'react'
 import {createPortal} from 'react-dom'
 import {html} from 'react-strict-dom'
 import {styles} from './styles.css'
@@ -126,7 +126,17 @@ function Icon({children}: {children?: ReactNode}) {
 // `overflow: hidden` / `transform` containing blocks (notably Dialog/Drawer).
 // The listbox stays mounted while closed (display: none) so Items can register
 // their labels from DOM text before the popup is ever opened.
-function Popup({children}: {children: ReactNode}) {
+interface PopupProps {
+  children: ReactNode
+  /** The list's accessible name; on native also the sheet's title. */
+  label?: string
+  /** Native only: the sheet header's text button that closes it unchanged. Default: 'Cancel' */
+  cancelLabel?: string
+  /** Shown in place of the list when there are no items. */
+  empty?: ReactNode
+}
+
+function Popup({children, label, empty}: PopupProps) {
   const {open, close, listboxId, triggerRef} = useSelect()
   const mount = usePortalMount()
   const [coords, setCoords] = useState<{top: number; left: number; width: number} | null>(null)
@@ -164,6 +174,7 @@ function Popup({children}: {children: ReactNode}) {
         ref={listboxRef}
         id={listboxId}
         role="listbox"
+        aria-label={label}
         aria-hidden={!open}
         style={[
           styles.popup,
@@ -171,7 +182,13 @@ function Popup({children}: {children: ReactNode}) {
           coords && styles.popupPosition(coords.top, coords.left, coords.width),
         ]}
       >
-        <ControlContextBoundary>{children}</ControlContextBoundary>
+        <ControlContextBoundary>
+          {empty != null && Children.toArray(children).length === 0 ? (
+            <html.div style={styles.empty}>{empty}</html.div>
+          ) : (
+            children
+          )}
+        </ControlContextBoundary>
       </html.div>
     </>
   )

package/src/components/Select/native.css.ts

@@ -0,0 +1,13 @@
+import {css} from 'react-strict-dom'
+
+/** Native Select additions to the shared styles. */
+export const nativeStyles = css.create({
+  // RSD on native lays out only display: flex, not the web's inline-flex.
+  nativeFlex: {
+    display: 'flex',
+  },
+  // SideNav's chevron points right; a picker's points down.
+  iconDown: {
+    transform: 'rotate(90deg)',
+  },
+})