@duro-app/ui 5.12.0 → 5.14.0

package/src/components/Popover/Popover.native.tsx

@@ -0,0 +1,205 @@
+import {
+  createContext,
+  type ReactNode,
+  type Ref,
+  type RefObject,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react'
+import {Pressable} from 'react-native'
+import {html} from 'react-strict-dom'
+import {styles} from './styles.css'
+import {nativeStyles} from './native.css'
+import type {PopoverAlign, PopoverSide} from './position'
+import {AnchoredOverlay} from '../../shared/portal/AnchoredOverlay'
+import {focusForAccessibility} from '../../shared/accessibilityFocus'
+import {mergeRefs} from '../../shared/mergeRefs'
+import {ModalContext} from '../../shared/ModalContext'
+import type {ControlSize} from '../../shared/types'
+import {useTooltipHint} from '../Tooltip/TooltipHint'
+import {ControlContextBoundary} from '../Toolbar/ControlContextBoundary'
+
+interface PopoverContextValue {
+  open: boolean
+  setOpen: (open: boolean) => void
+  popoverId: string
+  side: PopoverSide
+  align: PopoverAlign
+  triggerRef: RefObject<unknown>
+  /** Bumped by `reposition()`: the popup measures its trigger again */
+  placement: number
+}
+
+const PopoverContext = createContext<PopoverContextValue | null>(null)
+
+function usePopover(part: string) {
+  const ctx = useContext(PopoverContext)
+  if (!ctx) throw new Error(`Popover.${part} must be used within Popover.Root`)
+  return ctx
+}
+
+export interface PopoverHandle {
+  /** Place the popup against its trigger again. */
+  reposition: () => void
+}
+
+interface RootProps {
+  children: ReactNode
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  side?: PopoverSide
+  align?: PopoverAlign
+  /** Web only: native places the popup against Popover.Trigger. */
+  anchor?: () => DOMRect
+  /** Web only: on native the popup is modal, so nothing outside it is pressed. */
+  ignore?: ReadonlyArray<unknown>
+  ref?: Ref<PopoverHandle>
+}
+
+/**
+ * Native Popover (plan N0, Slice B): the popup is placed against the trigger
+ * in an OverlayModal, so it is modal on native where the web's is not. A
+ * press outside or Android's back button closes it; the screen reader's
+ * focus moves into it on open and back to the trigger on close.
+ */
+function Root({
+  children,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  side = 'bottom',
+  align = 'start',
+  ref,
+}: RootProps) {
+  const [inner, setInner] = useState(defaultOpen)
+  const controlled = openProp !== undefined
+  const open = controlled ? openProp : inner
+  const popoverId = useId()
+  const triggerRef = useRef<unknown>(null)
+  const [placement, setPlacement] = useState(0)
+  const openRef = useRef(open)
+  openRef.current = open
+
+  const setOpen = useCallback(
+    (next: boolean) => {
+      if (!controlled) setInner(next)
+      if (next !== openRef.current) onOpenChange?.(next)
+    },
+    [controlled, onOpenChange],
+  )
+
+  useImperativeHandle(ref, () => ({reposition: () => setPlacement((n) => n + 1)}), [])
+
+  const wasOpen = useRef(open)
+  useEffect(() => {
+    if (wasOpen.current && !open) focusForAccessibility(triggerRef.current, 'Popover')
+    wasOpen.current = open
+  }, [open])
+
+  return (
+    <PopoverContext.Provider value={{open, setOpen, popoverId, side, align, triggerRef, placement}}>
+      {children}
+    </PopoverContext.Provider>
+  )
+}
+
+interface TriggerProps {
+  children: ReactNode
+  /** Accessible name: required when the label is an icon only. */
+  'aria-label'?: string
+  /** `small` matches a small Toggle or Button beside it. Default: `default`. */
+  size?: ControlSize
+  /** The trigger's host, e.g. to measure it. */
+  ref?: Ref<unknown>
+}
+
+/**
+ * An RN Pressable host, so it carries an enclosing Tooltip's text as its hint.
+ *
+ * holds-until: react-strict-dom maps aria-description to accessibilityHint
+ * (https://github.com/react/react-strict-dom/issues/524).
+ */
+function Trigger({children, 'aria-label': ariaLabel, size = 'default', ref}: TriggerProps) {
+  const {open, setOpen, triggerRef} = usePopover('Trigger')
+  const hint = useTooltipHint()
+  return (
+    <Pressable
+      ref={mergeRefs(triggerRef, ref) as Ref<never>}
+      onPress={() => setOpen(!open)}
+      accessibilityRole="button"
+      accessibilityLabel={ariaLabel}
+      accessibilityHint={hint}
+      accessibilityState={{expanded: open}}
+    >
+      <html.div
+        style={[styles.trigger, nativeStyles.nativeFlex, size === 'small' && styles.triggerSmall]}
+      >
+        {children}
+      </html.div>
+    </Pressable>
+  )
+}
+
+interface PopupProps {
+  children: ReactNode
+  /** Accessible name for the dialog. */
+  label: string
+  /** Web only: on native every popup is its own Modal, above what opened it. */
+  raised?: boolean
+}
+
+function Popup({children, label}: PopupProps) {
+  const {open, setOpen, popoverId, side, align, triggerRef, placement} = usePopover('Popup')
+  const popupRef = useRef<HTMLDivElement>(null)
+  return (
+    <AnchoredOverlay
+      key={placement}
+      visible={open}
+      anchorRef={triggerRef}
+      side={side}
+      align={align}
+      onRequestClose={() => setOpen(false)}
+      onShow={() => focusForAccessibility(popupRef.current, 'Popover')}
+    >
+      <html.div
+        ref={popupRef}
+        id={popoverId}
+        role="dialog"
+        aria-modal
+        aria-label={label}
+        style={[styles.popup, nativeStyles.popupInPlace]}
+      >
+        {/* Modal on native: a Popover or Menu opened inside it stacks above it. */}
+        <ModalContext.Provider value={true}>
+          <ControlContextBoundary>{children}</ControlContextBoundary>
+        </ModalContext.Provider>
+      </html.div>
+    </AnchoredOverlay>
+  )
+}
+
+function Close({children}: {children: ReactNode}) {
+  const {setOpen} = usePopover('Close')
+  return (
+    <html.button
+      type="button"
+      onClick={() => setOpen(false)}
+      style={[styles.close, nativeStyles.nativeFlex]}
+    >
+      {children}
+    </html.button>
+  )
+}
+
+export const Popover = {
+  Root,
+  Trigger,
+  Popup,
+  Close,
+}

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

@@ -0,0 +1,13 @@
+import {css} from 'react-strict-dom'
+
+/** Native Popover additions to the shared styles. */
+export const nativeStyles = css.create({
+  // The AnchoredOverlay's view places the popup; it flows inside it.
+  // RSD on native lays out only display: flex, not the web's inline-flex.
+  nativeFlex: {
+    display: 'flex',
+  },
+  popupInPlace: {
+    position: 'relative',
+  },
+})

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)',
+  },
+})

package/src/components/Select/selectState.ts

@@ -0,0 +1,36 @@
+import {useCallback, useState} from 'react'
+import {useControllableValue} from '../../hooks/useControllableValue'
+
+export interface SelectStateOptions {
+  defaultValue?: string
+  value?: string
+  onValueChange?: (value: string | null) => void
+  initialLabels?: Record<string, string>
+}
+
+/**
+ * The Select's state both platforms share (plan N0, Decision 10): the value
+ * (controlled or not), whether it is open, and each option's label. Focus,
+ * highlight, document order and keys are the web adapter's (useSelectRoot);
+ * native presses and the sheet are Select.native's.
+ */
+export function useSelectState({
+  defaultValue,
+  value: controlledValue,
+  onValueChange,
+  initialLabels,
+}: SelectStateOptions) {
+  const [value, setValue] = useControllableValue<string | null>(
+    controlledValue,
+    defaultValue ?? null,
+    onValueChange,
+  )
+  const [open, setOpen] = useState(false)
+  const [labels, setLabels] = useState<Record<string, string>>(initialLabels ?? {})
+
+  const registerLabel = useCallback((v: string, label: string) => {
+    setLabels((prev) => (prev[v] === label ? prev : {...prev, [v]: label}))
+  }, [])
+
+  return {value, setValue, open, setOpen, labels, registerLabel}
+}