@duro-app/ui 5.12.0 → 5.13.0

package/src/components/Toast/ToastProvider.native.tsx

@@ -0,0 +1,226 @@
+import {
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from 'react'
+import {
+  AccessibilityInfo,
+  type LayoutChangeEvent,
+  Platform,
+  Pressable,
+  StyleSheet,
+} from 'react-native'
+import {Gesture, GestureDetector} from 'react-native-gesture-handler'
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated'
+import {scheduleOnRN} from 'react-native-worklets'
+import {html} from 'react-strict-dom'
+import {DURATION_MS, LAYERS, SPACING_PX} from '@duro-app/tokens/keys'
+import {Icon} from '../Icon/Icon'
+import {Portal} from '../../shared/portal/PortalHost'
+import {useSafeAreaInsets} from '../../shared/safeArea'
+import {useKeyboardHeight} from '../../shared/useKeyboardHeight'
+import {useScreenReaderEnabled} from '../../shared/useScreenReaderEnabled'
+import {DISMISS_DURATION, DRAG_SLOP, SNAP_DURATION, shouldDismissEdge} from '../Drawer/sheetPhysics'
+import {nativeStyles} from './native.css'
+import {createToastStore, type ToastContextValue, type ToastEntry, type ToastStore} from './store'
+
+export type {ToastAction, ToastContextValue, ToastOptions, ToastVariant} from './store'
+
+const ToastContext = createContext<ToastContextValue | null>(null)
+
+export function useToast(): ToastContextValue {
+  const ctx = useContext(ToastContext)
+  if (!ctx) throw new Error('useToast must be used within a <ToastProvider>')
+  return ctx
+}
+
+const easeOut = Easing.out(Easing.cubic)
+
+function ToastItem({
+  entry,
+  store,
+  onDismiss,
+  dismissLabel,
+  screenReader,
+}: {
+  entry: ToastEntry
+  store: ToastStore
+  onDismiss: (id: string) => void
+  dismissLabel: string
+  screenReader: boolean
+}) {
+  const {id, variant, message, action, duration} = entry
+  const [pressed, setPressed] = useState(false)
+  // A press holds the toast as hover does on the web; a screen reader holds
+  // it for as long as it is on (WCAG 2.2.1).
+  const paused = pressed || screenReader
+
+  // The store keeps what is left, so a toast that moves to another host
+  // (a Dialog above it closed) carries on where it was.
+  useEffect(() => {
+    if (duration <= 0 || paused) return
+    const started = Date.now()
+    const timer = setTimeout(() => onDismiss(id), Math.max(store.remaining(id), 0))
+    return () => {
+      clearTimeout(timer)
+      store.spend(id, Date.now() - started)
+    }
+  }, [id, duration, paused, onDismiss, store])
+
+  // iOS has no live regions: announce the message once. Android reads the
+  // live region itself, so announcing there too would read it twice.
+  const announced = useRef(false)
+  useEffect(() => {
+    if (Platform.OS !== 'ios' || announced.current || typeof message !== 'string') return
+    announced.current = true
+    AccessibilityInfo.announceForAccessibility(message)
+  }, [message])
+
+  const x = useSharedValue(0)
+  const shown = useSharedValue(0)
+  const width = useSharedValue(1)
+  useEffect(() => {
+    shown.value = withTiming(1, {duration: DURATION_MS.brisk, easing: easeOut})
+  }, [shown])
+
+  const pan = useMemo(
+    () =>
+      Gesture.Pan()
+        .activeOffsetX([-DRAG_SLOP, DRAG_SLOP])
+        .failOffsetY([-DRAG_SLOP, DRAG_SLOP])
+        .onUpdate((e) => {
+          x.value = e.translationX
+        })
+        .onEnd((e) => {
+          const distance = Math.abs(e.translationX)
+          if (shouldDismissEdge(distance, width.value, Math.abs(e.velocityX) / 1000)) {
+            const off = Math.sign(e.translationX || e.velocityX) * width.value
+            x.value = withTiming(off, {duration: DISMISS_DURATION}, (done) => {
+              if (done) scheduleOnRN(onDismiss, id)
+            })
+          } else {
+            x.value = withTiming(0, {duration: SNAP_DURATION, easing: easeOut})
+          }
+        }),
+    [id, onDismiss, x, width],
+  )
+
+  const motion = useAnimatedStyle(() => ({
+    opacity: shown.value * (1 - Math.min(1, Math.abs(x.value) / width.value)),
+    transform: [{translateX: x.value}, {translateY: (1 - shown.value) * SPACING_PX.sm}],
+  }))
+
+  const onLayout = (e: LayoutChangeEvent) => {
+    width.value = e.nativeEvent.layout.width
+  }
+
+  return (
+    <GestureDetector gesture={pan}>
+      <Animated.View onLayout={onLayout} style={[layout.row, motion]}>
+        <Pressable
+          onPressIn={() => setPressed(true)}
+          onPressOut={() => setPressed(false)}
+          accessible={false}
+          style={layout.row}
+        >
+          <html.div
+            role={variant === 'error' ? 'alert' : 'status'}
+            aria-live={variant === 'error' ? 'assertive' : 'polite'}
+            style={[nativeStyles.toast, nativeStyles[variant]]}
+          >
+            <html.div style={nativeStyles.message}>{message}</html.div>
+            {action ? (
+              <html.button
+                type="button"
+                style={nativeStyles.action}
+                onClick={() => {
+                  action.onClick()
+                  onDismiss(id)
+                }}
+              >
+                {action.label}
+              </html.button>
+            ) : null}
+            <html.button
+              type="button"
+              aria-label={dismissLabel}
+              style={nativeStyles.close}
+              onClick={() => onDismiss(id)}
+            >
+              <Icon name="x" size="sm" color="textMuted" />
+            </html.button>
+          </html.div>
+        </Pressable>
+      </Animated.View>
+    </GestureDetector>
+  )
+}
+
+// Layout-only: each toast row spans the region and centres its card.
+const layout = StyleSheet.create({row: {width: '100%', alignItems: 'center'}})
+
+export interface ToastProviderProps {
+  /** Accessible name of each toast's close button, e.g. from the app's message catalog. */
+  dismissLabel?: string
+  children: ReactNode
+}
+
+/**
+ * Native ToastProvider (plan N0, Slice B): the same store and countdown as
+ * the web, drawn through the portal host at `LAYERS.toast`, so a toast shows
+ * above the app, every open Duro overlay (a sheet included) and the
+ * keyboard. A sideways swipe or the close button dismisses it.
+ */
+export function ToastProvider({dismissLabel = 'Dismiss', children}: ToastProviderProps) {
+  const storeRef = useRef<ToastStore>(null)
+  if (storeRef.current === null) storeRef.current = createToastStore()
+  const store = storeRef.current
+  const entries = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot)
+  const insets = useSafeAreaInsets()
+  const keyboard = useKeyboardHeight()
+  const screenReader = useScreenReaderEnabled()
+
+  const value = useMemo<ToastContextValue>(
+    () => ({toast: (opts) => store.add(opts), dismiss: (id) => store.remove(id)}),
+    [store],
+  )
+  const dismiss = useCallback((id: string) => store.remove(id), [store])
+  const bottom = Math.max(insets.bottom, keyboard) + SPACING_PX.md
+
+  return (
+    <ToastContext.Provider value={value}>
+      {children}
+      {entries.length > 0 && (
+        <Portal layer={LAYERS.toast}>
+          <html.div
+            role="region"
+            aria-label="Notifications"
+            style={[nativeStyles.region, nativeStyles.regionBottom(bottom)]}
+          >
+            {entries.map((entry) => (
+              <ToastItem
+                key={entry.id}
+                entry={entry}
+                store={store}
+                onDismiss={dismiss}
+                dismissLabel={dismissLabel}
+                screenReader={screenReader}
+              />
+            ))}
+          </html.div>
+        </Portal>
+      )}
+    </ToastContext.Provider>
+  )
+}

package/src/components/Toast/ToastProvider.tsx

@@ -14,83 +14,15 @@ import {html} from 'react-strict-dom'
 import {Icon, type IconName} from '../Icon'
 import {usePortalMount} from '../ThemeProvider/ThemeProvider'
 import {styles} from './styles.css'
+import {
+  createToastStore,
+  type ToastContextValue,
+  type ToastEntry,
+  type ToastStore,
+  type ToastVariant,
+} from './store'
 
-export type ToastVariant = 'success' | 'error' | 'info' | 'warning'
-
-export interface ToastAction {
-  label: string
-  onClick: () => void
-}
-
-export interface ToastOptions {
-  /** Visual + semantic tone. Errors announce assertively; errors and
-   *  warnings linger longer. */
-  variant?: ToastVariant
-  message: ReactNode
-  /** Optional single action, e.g. Undo. Runs, then dismisses the toast. */
-  action?: ToastAction
-  /** Auto-dismiss delay in ms. `0` (or negative) keeps it until dismissed.
-   *  The countdown pauses while the toast is hovered or holds focus. */
-  duration?: number
-}
-
-export interface ToastContextValue {
-  /** Show a toast; returns its id so it can be dismissed programmatically. */
-  toast: (opts: ToastOptions) => string
-  dismiss: (id: string) => void
-}
-
-interface ToastEntry {
-  id: string
-  variant: ToastVariant
-  message: ReactNode
-  action?: ToastAction
-  duration: number
-}
-
-interface ToastStore {
-  subscribe: (cb: () => void) => () => void
-  getSnapshot: () => readonly ToastEntry[]
-  add: (opts: ToastOptions) => string
-  remove: (id: string) => void
-}
-
-const DEFAULT_DURATION: Record<ToastVariant, number> = {
-  success: 5000,
-  info: 5000,
-  error: 8000,
-  warning: 8000,
-}
-
-function createToastStore(): ToastStore {
-  let entries: ToastEntry[] = []
-  let seq = 0
-  const listeners = new Set<() => void>()
-  const notify = () => listeners.forEach((l) => l())
-
-  return {
-    subscribe: (cb) => {
-      listeners.add(cb)
-      return () => listeners.delete(cb)
-    },
-    getSnapshot: () => entries,
-    add: (opts) => {
-      const variant = opts.variant ?? 'info'
-      const id = `toast-${++seq}`
-      const duration = opts.duration ?? DEFAULT_DURATION[variant]
-      entries = [...entries, {id, variant, message: opts.message, action: opts.action, duration}]
-      notify()
-      return id
-    },
-    remove: (id) => {
-      const next = entries.filter((e) => e.id !== id)
-      if (next.length !== entries.length) {
-        entries = next
-        notify()
-      }
-    },
-  }
-}
+export type {ToastAction, ToastContextValue, ToastOptions, ToastVariant} from './store'
 
 const variantIcon: Record<ToastVariant, IconName> = {
   success: 'check-circle-filled',
@@ -115,10 +47,12 @@ export function useToast(): ToastContextValue {
 
 function ToastItem({
   entry,
+  store,
   onDismiss,
   dismissLabel,
 }: {
   entry: ToastEntry
+  store: ToastStore
   onDismiss: (id: string) => void
   dismissLabel: string
 }) {
@@ -126,19 +60,17 @@ function ToastItem({
   const [hovered, setHovered] = useState(false)
   const [focused, setFocused] = useState(false)
   const paused = hovered || focused
-  // What is left of the countdown; a pause keeps it, a resume restarts the
-  // timer with what was left (WCAG 2.2.1: the reader controls the timing).
-  const remaining = useRef(duration)
-
+  // The store keeps what is left of the countdown; a pause keeps it, a resume
+  // restarts the timer with what was left (WCAG 2.2.1: the reader controls the timing).
   useEffect(() => {
     if (duration <= 0 || paused) return
     const started = Date.now()
-    const timer = setTimeout(() => onDismiss(id), Math.max(remaining.current, 0))
+    const timer = setTimeout(() => onDismiss(id), Math.max(store.remaining(id), 0))
     return () => {
       clearTimeout(timer)
-      remaining.current -= Date.now() - started
+      store.spend(id, Date.now() - started)
     }
-  }, [id, duration, paused, onDismiss])
+  }, [id, duration, paused, onDismiss, store])
 
   return (
     <html.div
@@ -213,7 +145,13 @@ export function ToastProvider({dismissLabel = 'Dismiss', children}: ToastProvide
   const region = (
     <html.div role="region" aria-label="Notifications" style={styles.region}>
       {entries.map((entry) => (
-        <ToastItem key={entry.id} entry={entry} onDismiss={dismiss} dismissLabel={dismissLabel} />
+        <ToastItem
+          key={entry.id}
+          entry={entry}
+          store={store}
+          onDismiss={dismiss}
+          dismissLabel={dismissLabel}
+        />
       ))}
     </html.div>
   )

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

@@ -0,0 +1,78 @@
+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 {shadows} from '@duro-app/tokens/tokens/shadows.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
+
+/**
+ * The native toast, the picked B0 direction (docs/mockups/native-toast/
+ * Tinted.dc.html): a card with a status-coloured edge, one row of message,
+ * action and close. Motion is Reanimated's.
+ */
+export const nativeStyles = css.create({
+  region: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: spacing.sm,
+    paddingLeft: spacing.md,
+    paddingRight: spacing.md,
+  },
+  // The bottom safe-area inset and the keyboard, plus the edge spacing.
+  regionBottom: (bottom: number) => ({bottom}),
+  toast: {
+    boxSizing: 'border-box',
+    width: '100%',
+    maxWidth: sizes.toastMaxW,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+    paddingTop: spacing.sm,
+    paddingBottom: spacing.sm,
+    paddingRight: spacing.sm,
+    paddingLeft: spacing.md,
+    borderRadius: radii.md,
+    borderWidth: borders.hairline,
+    borderStyle: 'solid',
+    borderColor: colors.border,
+    borderLeftWidth: borders.accent,
+    backgroundColor: colors.bgCard,
+    boxShadow: shadows.md,
+  },
+  success: {borderLeftColor: colors.successBorder},
+  error: {borderLeftColor: colors.errorBorder},
+  info: {borderLeftColor: colors.infoBorder},
+  warning: {borderLeftColor: colors.warningBorder},
+  message: {
+    flexGrow: 1,
+    flexShrink: 1,
+    color: colors.text,
+    fontSize: typography.fontSizeSm,
+    lineHeight: typography.lineHeight,
+  },
+  action: {
+    display: 'flex',
+    padding: spacing.sm,
+    borderWidth: 0,
+    backgroundColor: 'transparent',
+    color: colors.accent,
+    fontSize: typography.fontSizeSm,
+    fontWeight: typography.fontWeightSemibold,
+  },
+  close: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: sizes.touchTarget,
+    height: sizes.touchTarget,
+    borderRadius: radii.sm,
+    borderWidth: 0,
+    backgroundColor: 'transparent',
+  },
+})

package/src/components/Toast/store.ts

@@ -0,0 +1,96 @@
+import type {ReactNode} from 'react'
+
+/** The toast queue both platforms' ToastProvider render (plan N0, Slice B). */
+
+export type ToastVariant = 'success' | 'error' | 'info' | 'warning'
+
+export interface ToastAction {
+  label: string
+  onClick: () => void
+}
+
+export interface ToastOptions {
+  /** Visual + semantic tone. Errors announce assertively; errors and
+   *  warnings linger longer. */
+  variant?: ToastVariant
+  message: ReactNode
+  /** Optional single action, e.g. Undo. Runs, then dismisses the toast. */
+  action?: ToastAction
+  /** Auto-dismiss delay in ms. `0` (or negative) keeps it until dismissed.
+   *  The countdown pauses while the toast is hovered or holds focus. */
+  duration?: number
+}
+
+export interface ToastContextValue {
+  /** Show a toast; returns its id so it can be dismissed programmatically. */
+  toast: (opts: ToastOptions) => string
+  dismiss: (id: string) => void
+}
+
+export interface ToastEntry {
+  id: string
+  variant: ToastVariant
+  message: ReactNode
+  action?: ToastAction
+  duration: number
+}
+
+export interface ToastStore {
+  subscribe: (cb: () => void) => () => void
+  getSnapshot: () => readonly ToastEntry[]
+  add: (opts: ToastOptions) => string
+  remove: (id: string) => void
+  /**
+   * What is left of a toast's countdown, in ms. Kept here, not in the toast's
+   * component: on native a toast re-renders into another host when a Dialog
+   * above it closes, and its countdown carries on.
+   */
+  remaining: (id: string) => number
+  /** Count `ms` of shown time against a toast's countdown. */
+  spend: (id: string, ms: number) => void
+}
+
+export const DEFAULT_DURATION: Record<ToastVariant, number> = {
+  success: 5000,
+  info: 5000,
+  error: 8000,
+  warning: 8000,
+}
+
+export function createToastStore(): ToastStore {
+  let entries: ToastEntry[] = []
+  let seq = 0
+  const left = new Map<string, number>()
+  const listeners = new Set<() => void>()
+  const notify = () => listeners.forEach((l) => l())
+
+  return {
+    subscribe: (cb) => {
+      listeners.add(cb)
+      return () => listeners.delete(cb)
+    },
+    getSnapshot: () => entries,
+    add: (opts) => {
+      const variant = opts.variant ?? 'info'
+      const id = `toast-${++seq}`
+      const duration = opts.duration ?? DEFAULT_DURATION[variant]
+      entries = [...entries, {id, variant, message: opts.message, action: opts.action, duration}]
+      left.set(id, duration)
+      notify()
+      return id
+    },
+    remove: (id) => {
+      left.delete(id)
+      const next = entries.filter((e) => e.id !== id)
+      if (next.length !== entries.length) {
+        entries = next
+        notify()
+      }
+    },
+    remaining: (id) => left.get(id) ?? 0,
+    spend: (id, ms) => {
+      const current = left.get(id)
+      if (current !== undefined) left.set(id, current - ms)
+    },
+  }
+}

package/src/components/Toggle/Toggle.tsx

@@ -1,9 +1,9 @@
 import {type ReactNode, useCallback, useLayoutEffect, useRef} from 'react'
-import {html} from 'react-strict-dom'
 import {useControllableValue} from '../../hooks/useControllableValue'
 import {useToggleGroup} from '../ToggleGroup/ToggleGroupContext'
 import {useGroupedControl} from '../ButtonGroup/useGroupedControl'
 import {mergeRefs} from '../../shared/mergeRefs'
+import {ButtonHost} from '../../shared/ButtonHost'
 import type {ControlSize} from '../../shared/types'
 import {isNative} from '../../platform'
 import {styles} from './styles.css'
@@ -84,7 +84,7 @@ export function Toggle({
   }, [disabled, isGrouped, value, group, pressed, setStandalonePressed])
 
   return (
-    <html.button
+    <ButtonHost
       ref={mergeRefs(ref, grouped.ref)}
       type="button"
       tabIndex={
@@ -116,6 +116,6 @@ export function Toggle({
       ]}
     >
       {children}
-    </html.button>
+    </ButtonHost>
   )
 }

package/src/components/Tooltip/Tooltip.meta.ts

@@ -2,7 +2,7 @@ import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
   description:
-    'Hover/focus tooltip that shows supplementary content. Compound component — Root is required (throws without it).',
+    'Hover/focus tooltip that shows supplementary content. Compound component — Root is required (throws without it). On touch (React Native) no bubble is drawn: a string content becomes the accessibility hint of the Duro trigger inside (Button, Toggle, Menu.Trigger, Popover.Trigger), read after its name. Keep tooltip text non-essential, and keep aria-label on icon-only triggers.',
   whenToUse: [
     'Providing extra context on hover for icon-only buttons',
     'Explaining abbreviations or truncated text',

package/src/components/Tooltip/Tooltip.native.tsx

@@ -0,0 +1,36 @@
+import type {ReactNode} from 'react'
+import {TooltipHintContext} from './TooltipHint'
+
+type Placement = 'top' | 'bottom' | 'left' | 'right'
+
+interface RootProps {
+  children: ReactNode
+  /** On native, a string becomes the trigger's accessibility hint; anything else is dropped. */
+  content: ReactNode
+  /** Web only. */
+  placement?: Placement
+  /** Web only. */
+  delay?: number
+}
+
+/**
+ * Native Tooltip (plan N0, Decision 5): touch has no hover, so no bubble is
+ * drawn. A string `content` becomes the accessibility hint of the Duro
+ * trigger inside (Button, Toggle, Menu.Trigger, Popover.Trigger), read after
+ * its name. Keep tooltip text non-essential: sighted touch users never see
+ * it, and an icon-only trigger still needs its `aria-label`.
+ */
+function Root({children, content}: RootProps) {
+  const hint = typeof content === 'string' ? content : undefined
+  return <TooltipHintContext.Provider value={hint}>{children}</TooltipHintContext.Provider>
+}
+
+/** Renders its child in place; the hint reaches it through context. */
+function Trigger({children}: {children: ReactNode}) {
+  return children
+}
+
+export const Tooltip = {
+  Root,
+  Trigger,
+}

package/src/components/Tooltip/TooltipHint.ts

@@ -0,0 +1,13 @@
+import {createContext, useContext} from 'react'
+
+/**
+ * Native: a Tooltip's string content, read by the Duro trigger inside it
+ * (Button, Toggle, Menu.Trigger, Popover.Trigger) and set as that trigger's
+ * own accessibility hint (plan N0, Decision 5). Touch has no hover, so the
+ * text is never drawn; screen readers read it after the trigger's name.
+ */
+export const TooltipHintContext = createContext<string | undefined>(undefined)
+
+export function useTooltipHint(): string | undefined {
+  return useContext(TooltipHintContext)
+}

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

@@ -2,7 +2,7 @@ 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. An Item with href renders its row as a real link (cmd-click opens a tab) outside the tab order; Enter/Space follows it, through onNavigate(href, event) when given. Compound component — Root is required.',
+    'Hierarchy of items with single selection and expandable branches (the WAI-ARIA tree pattern): one tab stop, arrow keys, Home/End, typeahead. An Item with href renders its row as a real link (cmd-click opens a tab) outside the tab order; Enter/Space follows it, through onNavigate(href, event) when given. Compound component — Root is required. On React Native selection, expansion and aria-level are the same; the keyboard model (arrows, Home/End, typeahead) is web only.',
   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',