@duro-app/ui 5.12.0 → 5.14.0

package/src/index.native.ts

@@ -47,10 +47,50 @@ export {
 export {List, type ListSelectionMode} from './components/List/List'
 export {RadioGroup} from './components/RadioGroup/RadioGroup'
 export {Toggle, type ToggleSize} from './components/Toggle/Toggle'
+export {Tag, type TagVariant} from './components/Tag/Tag'
+export {SideNav} from './components/SideNav/SideNav'
+export {Tabs} from './components/Tabs/Tabs'
+export {Tree} from './components/Tree/Tree'
+// 5.14: pickers open a bottom sheet (a Drawer at the medium and large detents)
+export {Select} from './components/Select/Select'
+export {Combobox} from './components/Combobox/Combobox'
+export {Listbox} from './components/Listbox/Listbox'
+// The platform's own scroll indicator: Scrollbar and Thumb draw nothing.
+export {ScrollArea} from './components/ScrollArea/ScrollArea'
+export type {ListboxAnchorProps, ListboxMaxHeight} from './components/Listbox/Listbox'
+// Always stacked on native: a phone is below every collapseBelow.
+export {SplitPane} from './components/SplitPane/SplitPane'
+// Always the phone shape on native: the bar on top, the rail in a left Drawer.
+export {
+  AppShell,
+  type AppShellCollapse,
+  type AppShellRailState,
+} from './components/AppShell/AppShell'
 
 // Overlays (5.12: rendered in an OverlayModal on native)
 export {ConfirmDialog} from './components/ConfirmDialog/ConfirmDialog'
 export {Dialog, type DialogSize} from './components/Dialog/Dialog'
+// 5.13: the panel follows the finger on the UI thread (Gesture Handler + Reanimated)
+export {
+  Drawer,
+  type DrawerAnchor,
+  type DrawerSize,
+  type SnapPoint,
+} from './components/Drawer/Drawer'
+export {Menu, type MenuTriggerVariant} from './components/Menu/Menu'
+export {Popover, type PopoverHandle} from './components/Popover/Popover'
+// Touch has no hover: a Tooltip's text is its trigger's accessibility hint.
+export {Tooltip} from './components/Tooltip/Tooltip'
+// Drawn through the portal host, above every open overlay and the keyboard.
+export {
+  ToastProvider,
+  useToast,
+  type ToastVariant,
+  type ToastOptions,
+  type ToastAction,
+  type ToastContextValue,
+  type ToastProviderProps,
+} from './components/Toast'
 
 // Layout primitives
 export {PageShell, type PageShellMaxWidth, type PageShellPadding} from './components/PageShell'
@@ -64,9 +104,17 @@ export type {GridTrack} from './shared/length'
 // no display:contents / portal mount; applies the theme to a flex container).
 export {
   ThemeProvider,
+  type ColorOverrides,
   usePortalMount,
   useResolvedColors,
   type ThemeName,
 } from './components/ThemeProvider/ThemeProvider'
+// 'system' follows RN Appearance; persistence is the app's (preference + onPreferenceChange).
+export {
+  ColorModeProvider,
+  ColorModeToggle,
+  useColorMode,
+  type ColorModePreference,
+} from './components/ColorMode'
 // Where toasts draw on native: mount one inside a natively presented route.
 export {PortalHost} from './shared/portal/PortalHost'

package/src/index.ts

@@ -49,7 +49,12 @@ export {
 } from './components/DragDrop/DragDrop'
 export {Dialog, type DialogSize} from './components/Dialog/Dialog'
 export {DetailPanel, type DetailPanelSize} from './components/DetailPanel/DetailPanel'
-export {Drawer, type DrawerAnchor, type DrawerSize} from './components/Drawer/Drawer'
+export {
+  Drawer,
+  type DrawerAnchor,
+  type DrawerSize,
+  type SnapPoint,
+} from './components/Drawer/Drawer'
 export {EmptyState} from './components/EmptyState/EmptyState'
 export {Heading, type HeadingVariant} from './components/Heading/Heading'
 export {List, type ListSelectionMode} from './components/List/List'
@@ -115,9 +120,12 @@ export {
   type TimelineRowProps,
 } from './components/Timeline/Timeline'
 export {Tree} from './components/Tree/Tree'
+export {SplitPane} from './components/SplitPane/SplitPane'
+export {VirtualList, type VirtualListProps} from './components/VirtualList/VirtualList'
 export {Textarea, type TextareaVariant} from './components/Textarea/Textarea'
 export {
   ThemeProvider,
+  type ColorOverrides,
   usePortalMount,
   type ThemeName,
 } from './components/ThemeProvider/ThemeProvider'

package/src/shared/ButtonHost.native.tsx

@@ -0,0 +1,70 @@
+import {Children, type ComponentProps, type ReactNode, type Ref} from 'react'
+import {Pressable} from 'react-native'
+import {html} from 'react-strict-dom'
+import {useTooltipHint} from '../components/Tooltip/TooltipHint'
+
+export type ButtonHostProps = ComponentProps<typeof html.button>
+
+/**
+ * The host element of Button and Toggle on native. Inside a Tooltip it is an
+ * RN Pressable, which carries the Tooltip's text as its own accessibility hint
+ * (plan N0, Decision 5: RSD drops `accessibilityHint` on html.*); the visual
+ * styles move to a div inside it. Elsewhere it is RSD's button, as before.
+ *
+ * holds-until: react-strict-dom maps aria-description to accessibilityHint
+ * (https://github.com/react/react-strict-dom/issues/524); then html.button
+ * carries the hint itself and this swap goes.
+ */
+export function ButtonHost(props: ButtonHostProps) {
+  const hint = useTooltipHint()
+  const content = textInSpans(props.children)
+  if (!hint) {
+    return (
+      <html.button {...props} style={props.style}>
+        {content}
+      </html.button>
+    )
+  }
+  const {
+    ref,
+    style,
+    disabled,
+    onClick,
+    'aria-label': label,
+    'aria-pressed': pressed,
+    'aria-expanded': expanded,
+  } = props
+  return (
+    <Pressable
+      ref={ref as Ref<never>}
+      onPress={disabled ? undefined : () => onClick?.(undefined as never)}
+      disabled={disabled}
+      accessibilityRole="button"
+      accessibilityLabel={label ?? undefined}
+      accessibilityHint={hint}
+      accessibilityState={{
+        disabled: !!disabled,
+        ...(pressed !== undefined ? {checked: !!pressed} : {}),
+        ...(expanded !== undefined ? {expanded: !!expanded} : {}),
+      }}
+    >
+      <html.div style={style}>{content}</html.div>
+    </Pressable>
+  )
+}
+
+/**
+ * A label beside an icon (`<Icon/> Menu`): RSD wraps a button's text only
+ * when it is the sole child, and React Native refuses bare text in a view.
+ */
+function textInSpans(children: ReactNode): ReactNode {
+  const items = Children.toArray(children)
+  if (items.length < 2) return children
+  return items.map((child, i) =>
+    typeof child === 'string' || typeof child === 'number' ? (
+      <html.span key={i}>{child}</html.span>
+    ) : (
+      child
+    ),
+  )
+}

package/src/shared/ButtonHost.tsx

@@ -0,0 +1,12 @@
+import type {ComponentProps} from 'react'
+import {html} from 'react-strict-dom'
+
+export type ButtonHostProps = ComponentProps<typeof html.button>
+
+/**
+ * The host element of Button and Toggle. On the web it is the <button>
+ * itself, with no component in between (a wrapper changed what a Form's
+ * submit focuses); the native variant (ButtonHost.native.tsx) can swap in an
+ * RN Pressable to carry a Tooltip's accessibility hint.
+ */
+export const ButtonHost: typeof html.button = html.button

package/src/shared/focusInput.native.ts

@@ -0,0 +1,18 @@
+interface StrictInputRef {
+  getNativeRef?: () => {focus?: () => void} | null
+  focus?: () => void
+}
+
+/**
+ * Focus an html.input on native. react-strict-dom 0.0.55 hands out a copy of
+ * the TextInput instance, whose `focus()` does nothing (#506); the copy keeps
+ * TextInput's own `getNativeRef()`, which returns the real host.
+ *
+ * holds-until: react-strict-dom releases #515 (focus() on the ref itself).
+ */
+export function focusInput(input: unknown): void {
+  const ref = input as StrictInputRef | null
+  const host = ref?.getNativeRef?.()
+  if (host?.focus) host.focus()
+  else ref?.focus?.()
+}

package/src/shared/portal/AnchoredOverlay.native.tsx

@@ -0,0 +1,117 @@
+import {type ReactNode, type RefObject, useEffect, useState} from 'react'
+import {
+  type LayoutChangeEvent,
+  Pressable,
+  StyleSheet,
+  useWindowDimensions,
+  View,
+} from 'react-native'
+import {SPACING_PX} from '@duro-app/tokens/keys'
+import {
+  computePopoverPosition,
+  type PopoverAlign,
+  type PopoverRect,
+  type PopoverSide,
+  type PopoverSize,
+} from '../../components/Popover/position'
+import {OverlayModal} from './OverlayModal'
+
+interface Measurable {
+  measureInWindow?: (cb: (x: number, y: number, width: number, height: number) => void) => void
+}
+
+interface AnchoredOverlayProps {
+  visible: boolean
+  /** The trigger's host: it is measured in window coordinates when the overlay opens */
+  anchorRef: RefObject<unknown>
+  side: PopoverSide
+  align: PopoverAlign
+  /** A backdrop press or Android's back button */
+  onRequestClose: () => void
+  /** The Modal has been presented: move accessibility focus in */
+  onShow?: () => void
+  /** iOS: the Modal has finished dismissing */
+  onDismiss?: () => void
+  children: ReactNode
+}
+
+/**
+ * A popup placed against its trigger on native (plan N0, Decision 3): the
+ * trigger is measured with `measureInWindow`, the popup with `onLayout`, and
+ * `computePopoverPosition` places it exactly as on the web. The OverlayModal
+ * is transparent and translucent, so its coordinates are window coordinates.
+ * Until both are measured the popup is laid out but not shown.
+ */
+export function AnchoredOverlay({
+  visible,
+  anchorRef,
+  side,
+  align,
+  onRequestClose,
+  onShow,
+  onDismiss,
+  children,
+}: AnchoredOverlayProps) {
+  const window = useWindowDimensions()
+  const [anchor, setAnchor] = useState<PopoverRect | null>(null)
+  const [size, setSize] = useState<PopoverSize | null>(null)
+
+  useEffect(() => {
+    if (!visible) {
+      setAnchor(null)
+      setSize(null)
+      return
+    }
+    const host = anchorRef.current as Measurable | null
+    host?.measureInWindow?.((left, top, width, height) => setAnchor({top, left, width, height}))
+  }, [visible, anchorRef, window.width, window.height])
+
+  const onLayout = (e: LayoutChangeEvent) => {
+    const {width, height} = e.nativeEvent.layout
+    setSize((prev) => (prev?.width === width && prev.height === height ? prev : {width, height}))
+  }
+
+  const position =
+    anchor && size
+      ? computePopoverPosition({
+          anchor,
+          popup: size,
+          viewport: {width: window.width, height: window.height},
+          side,
+          align,
+          offset: SPACING_PX.xs,
+        })
+      : null
+
+  return (
+    <OverlayModal
+      visible={visible}
+      onRequestClose={onRequestClose}
+      onShow={onShow}
+      onDismiss={onDismiss}
+    >
+      <Pressable
+        style={StyleSheet.absoluteFill}
+        onPress={onRequestClose}
+        accessible={false}
+        importantForAccessibility="no"
+      />
+      <View
+        onLayout={onLayout}
+        style={[
+          layout.popup,
+          {maxWidth: window.width - 2 * SPACING_PX.sm},
+          position ? {top: position.top, left: position.left} : layout.unplaced,
+        ]}
+      >
+        {children}
+      </View>
+    </OverlayModal>
+  )
+}
+
+// Layout-only: where the popup sits, and hidden until it has been placed.
+const layout = StyleSheet.create({
+  popup: {position: 'absolute'},
+  unplaced: {top: 0, left: 0, opacity: 0},
+})

package/src/shared/pressableChild.ts

@@ -0,0 +1,33 @@
+import {
+  Children,
+  cloneElement,
+  isValidElement,
+  type ReactElement,
+  type ReactNode,
+  type Ref,
+} from 'react'
+import {mergeRefs} from './mergeRefs'
+
+interface PressableChildProps {
+  onClick?: () => void
+  ref?: Ref<unknown>
+}
+
+/**
+ * Native overlay triggers and closes: native presses do not bubble to a
+ * wrapper as web clicks do, so the one child (a Button) gets the handler
+ * itself, after its own. `ref` also receives the child's host, where focus
+ * returns when the overlay closes.
+ */
+export function withPress(children: ReactNode, onPress: () => void, ref?: Ref<unknown>) {
+  const child = Children.only(children)
+  if (!isValidElement<PressableChildProps>(child)) return null
+  const own = child.props.onClick
+  return cloneElement(child as ReactElement<PressableChildProps>, {
+    ...(ref ? {ref: mergeRefs(child.props.ref, ref)} : {}),
+    onClick: () => {
+      own?.()
+      onPress()
+    },
+  })
+}

package/src/shared/textOf.ts

@@ -0,0 +1,13 @@
+import {isValidElement, type ReactNode} from 'react'
+
+/**
+ * The text a React node would render, read from its props: a native picker's
+ * option label, where there is no DOM `textContent` to read it from.
+ */
+export function textOf(node: ReactNode): string {
+  if (node == null || typeof node === 'boolean') return ''
+  if (typeof node === 'string' || typeof node === 'number') return String(node)
+  if (Array.isArray(node)) return node.map(textOf).join('')
+  if (isValidElement<{children?: ReactNode}>(node)) return textOf(node.props.children)
+  return ''
+}

package/src/shared/useKeyboardHeight.native.ts

@@ -0,0 +1,18 @@
+import {useEffect, useState} from 'react'
+import {Keyboard, Platform} from 'react-native'
+
+/** The on-screen keyboard's height while it is shown, else 0. */
+export function useKeyboardHeight(): number {
+  const [height, setHeight] = useState(0)
+  useEffect(() => {
+    // iOS announces the keyboard before it moves, Android only after.
+    const show = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow'
+    const hide = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide'
+    const subs = [
+      Keyboard.addListener(show, (e) => setHeight(e.endCoordinates.height)),
+      Keyboard.addListener(hide, () => setHeight(0)),
+    ]
+    return () => subs.forEach((s) => s.remove())
+  }, [])
+  return height
+}

package/src/shared/useScreenReaderEnabled.native.ts

@@ -0,0 +1,19 @@
+import {useEffect, useState} from 'react'
+import {AccessibilityInfo} from 'react-native'
+
+/** Whether VoiceOver or TalkBack is on, following changes while mounted. */
+export function useScreenReaderEnabled(): boolean {
+  const [enabled, setEnabled] = useState(false)
+  useEffect(() => {
+    let live = true
+    void AccessibilityInfo.isScreenReaderEnabled().then((on) => {
+      if (live) setEnabled(on)
+    })
+    const sub = AccessibilityInfo.addEventListener('screenReaderChanged', setEnabled)
+    return () => {
+      live = false
+      sub.remove()
+    }
+  }, [])
+  return enabled
+}