@duro-app/ui 5.12.0 → 5.14.0

package/src/components/Drawer/parts.css.ts

@@ -0,0 +1,125 @@
+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 {duration} from '@duro-app/tokens/tokens/motion.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
+
+/** Styles of the Drawer parts both platforms draw (no animations: native has none). */
+export const partStyles = css.create({
+  // --- Grabber (snap sheets) ---
+  grabberHit: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignSelf: 'stretch',
+    flexShrink: 0,
+    paddingTop: spacing.sm,
+    paddingBottom: spacing.sm,
+    borderWidth: 0,
+    backgroundColor: 'transparent',
+  },
+  grabber: {
+    display: 'block',
+    width: sizes.sheetGrabberW,
+    height: sizes.sheetGrabberH,
+    borderRadius: radii.full,
+    backgroundColor: colors.border,
+  },
+
+  // --- Header ---
+  header: {
+    // Header, Description and Footer keep their size; only the Body yields.
+    flexShrink: 0,
+    display: 'flex',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+    paddingTop: spacing.lg,
+    paddingLeft: spacing.lg,
+    paddingRight: spacing.lg,
+    paddingBottom: spacing.md,
+    gap: spacing.md,
+  },
+
+  // Under a snap sheet's grabber the header needs no top padding of its own.
+  headerUnderGrabber: {
+    paddingTop: 0,
+  },
+
+  // Title centred, the other children at the end (Header titleAlign="center").
+  headerCentered: {
+    alignItems: 'center',
+  },
+
+  headerSide: {
+    display: 'flex',
+    flexGrow: 1,
+    flexBasis: 0,
+  },
+
+  headerEnd: {
+    justifyContent: 'flex-end',
+  },
+
+  // --- Title ---
+  title: {
+    fontSize: typography.fontSizeLg,
+    fontWeight: typography.fontWeightSemibold,
+    lineHeight: typography.lineHeight,
+    color: colors.text,
+    margin: 0,
+  },
+
+  // --- Description ---
+  description: {
+    fontSize: typography.fontSizeSm,
+    lineHeight: typography.lineHeight,
+    color: colors.textMuted,
+    margin: 0,
+    paddingLeft: spacing.lg,
+    paddingRight: spacing.lg,
+    paddingBottom: spacing.md,
+  },
+
+  // --- Footer ---
+  footer: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    gap: spacing.sm,
+    paddingTop: spacing.md,
+    paddingLeft: spacing.lg,
+    paddingRight: spacing.lg,
+    paddingBottom: spacing.lg,
+    borderTopWidth: borders.hairline,
+    borderTopStyle: 'solid',
+    borderTopColor: colors.border,
+  },
+
+  // --- Close button ---
+  closeButton: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: sizes.iconButton,
+    height: sizes.iconButton,
+    borderRadius: radii.sm,
+    borderWidth: 0,
+    backgroundColor: {
+      default: 'transparent',
+      ':hover': colors.bgCardHover,
+    },
+    color: colors.textMuted,
+    cursor: 'pointer',
+    padding: 0,
+    flexShrink: 0,
+    transitionProperty: 'background-color',
+    transitionDuration: duration.fast,
+  },
+
+  // --- Inline wrapper ---
+  inlineWrapper: {
+    display: 'inline-flex',
+  },
+})

package/src/components/Drawer/parts.tsx

@@ -0,0 +1,110 @@
+import {
+  Children,
+  createContext,
+  isValidElement,
+  type ReactNode,
+  type RefObject,
+  useContext,
+} from 'react'
+import {html} from 'react-strict-dom'
+import type {DurationToken} from '@duro-app/tokens/keys'
+import {partStyles} from './parts.css'
+import type {SnapPoint} from './sheetPhysics'
+
+export type DrawerAnchor = 'right' | 'left' | 'bottom'
+export type DrawerSize = 'sm' | 'md' | 'lg'
+export type {SnapPoint}
+
+export interface DrawerContextValue {
+  /** Rendered: open, or playing the exit animation. */
+  open: boolean
+  closing: boolean
+  closeDuration: DurationToken
+  anchor: DrawerAnchor
+  dismissable: boolean
+  swipeDismiss: boolean
+  requestOpen: () => void
+  requestClose: () => void
+  /** Close immediately without the exit animation (a swipe has played its own) */
+  requestCloseImmediate: () => void
+  titleId: string
+  descriptionId: string
+  /** The panel's host: a DOM element on the web, a view on native */
+  panelRef: RefObject<unknown>
+  /** A bottom sheet's detents, ascending; empty when the drawer has none */
+  snapPoints: readonly SnapPoint[]
+  /** Index into snapPoints the sheet rests at */
+  snapIndex: number
+  setSnapIndex: (index: number) => void
+}
+
+export const DrawerContext = createContext<DrawerContextValue | null>(null)
+
+export function useDrawer() {
+  const ctx = useContext(DrawerContext)
+  if (!ctx) throw new Error('Drawer compound components must be used within Drawer.Root')
+  return ctx
+}
+
+export interface GrabberLabels {
+  /** The grabber's name when a press grows the sheet */
+  expand: string
+  /** The grabber's name when a press shrinks it */
+  collapse: string
+}
+
+export const DEFAULT_GRABBER_LABELS: GrabberLabels = {
+  expand: 'Expand sheet',
+  collapse: 'Shrink sheet',
+}
+
+// The parts below are pure react-strict-dom, drawn the same on both platforms.
+
+interface HeaderProps {
+  children: ReactNode
+  /**
+   * 'center' puts the Title in the middle and the other children at the end,
+   * as a phone sheet does (a text close button on the right). Default: 'start'
+   */
+  titleAlign?: 'start' | 'center'
+}
+
+export function Header({children, titleAlign = 'start'}: HeaderProps) {
+  const underGrabber = useDrawer().snapPoints.length > 0 && partStyles.headerUnderGrabber
+  if (titleAlign === 'start') {
+    return <html.div style={[partStyles.header, underGrabber]}>{children}</html.div>
+  }
+  const items = Children.toArray(children)
+  const isTitle = (c: ReactNode) => isValidElement(c) && c.type === Title
+  return (
+    <html.div style={[partStyles.header, underGrabber, partStyles.headerCentered]}>
+      <html.div style={partStyles.headerSide} />
+      {items.filter(isTitle)}
+      <html.div style={[partStyles.headerSide, partStyles.headerEnd]}>
+        {items.filter((c) => !isTitle(c))}
+      </html.div>
+    </html.div>
+  )
+}
+
+export function Title({children}: {children: ReactNode}) {
+  const {titleId} = useDrawer()
+  return (
+    <html.h2 id={titleId} style={partStyles.title}>
+      {children}
+    </html.h2>
+  )
+}
+
+export function Description({children}: {children: ReactNode}) {
+  const {descriptionId} = useDrawer()
+  return (
+    <html.p id={descriptionId} style={partStyles.description}>
+      {children}
+    </html.p>
+  )
+}
+
+export function Footer({children}: {children: ReactNode}) {
+  return <html.div style={partStyles.footer}>{children}</html.div>
+}

package/src/components/Drawer/sheetPhysics.ts

@@ -0,0 +1,103 @@
+/**
+ * The drawer's drag rules, shared by the web (pointer events) and native
+ * (Gesture Handler on the UI thread) so both settle a drag the same way.
+ * Pure numbers: no DOM, no React Native. The functions the native drag
+ * calls on the UI thread are worklets ('worklet'); on the web the directive
+ * is an inert string.
+ */
+
+import {DURATION_MS, SPACING_PX} from '@duro-app/tokens/keys'
+
+/** A bottom-sheet detent (plan N0, Decision 5). */
+export type SnapPoint = 'medium' | 'large'
+
+/** Fraction of the panel (or of the lowest detent) a drag must cover to dismiss */
+export const DISMISS_THRESHOLD = 0.3
+
+/** Release speed (px/ms) that dismisses, or moves one detent, whatever the distance */
+export const VELOCITY_THRESHOLD = 0.5
+
+/** Duration of the slide-out once a drag dismisses (ms) */
+export const DISMISS_DURATION = DURATION_MS.brisk
+
+/** Duration of the settle onto a detent, or the snap back (ms) */
+export const SNAP_DURATION = DURATION_MS.base
+
+/** Movement (px) before a press becomes a drag; under it a tap stays a tap */
+export const DRAG_SLOP = 8
+
+/** Movement (px) across the drag's axis that hands the gesture to a scroll instead */
+export const CROSS_SLOP = 16
+
+/** 'medium' is half the window */
+export const MEDIUM_FRACTION = 0.5
+
+/** How far (px) a snap sheet may be pulled past its largest detent: it resists, never further */
+export const SNAP_MAX_OVERSHOOT = SPACING_PX.lg
+
+/** Height of one detent: 'medium' half the window, 'large' the window less its top inset. */
+export function detentHeight(point: SnapPoint, windowHeight: number, topInset: number): number {
+  'worklet'
+  return point === 'medium' ? windowHeight * MEDIUM_FRACTION : windowHeight - topInset
+}
+
+/** The detents in ascending height, each once. */
+export function sortSnapPoints(points: readonly SnapPoint[]): SnapPoint[] {
+  return (['medium', 'large'] as const).filter((p) => points.includes(p))
+}
+
+/**
+ * Where a released drag settles: a detent index into `heights` (ascending),
+ * or 'dismiss'.
+ *
+ * - A fling (|velocity| over VELOCITY_THRESHOLD) moves one detent in its
+ *   direction from the detent it started at; down from the lowest dismisses.
+ * - Otherwise the nearest detent wins, unless the sheet is below the lowest
+ *   by more than DISMISS_THRESHOLD of it, which dismisses.
+ *
+ * `velocity` is px/ms, positive downward (closing).
+ */
+export function settleDetent({
+  heights,
+  from,
+  height,
+  velocity,
+}: {
+  heights: readonly number[]
+  from: number
+  height: number
+  velocity: number
+}): number | 'dismiss' {
+  'worklet'
+  const last = heights.length - 1
+  if (velocity > VELOCITY_THRESHOLD) return from === 0 ? 'dismiss' : from - 1
+  if (velocity < -VELOCITY_THRESHOLD) return Math.min(from + 1, last)
+  if (height < heights[0] * (1 - DISMISS_THRESHOLD)) return 'dismiss'
+  let nearest = 0
+  for (let i = 1; i <= last; i++) {
+    if (Math.abs(heights[i] - height) < Math.abs(heights[nearest] - height)) nearest = i
+  }
+  return nearest
+}
+
+/** The grabber's tap: the next detent up, wrapping from the largest to the smallest. */
+export function cycleDetent(index: number, count: number): number {
+  'worklet'
+  return count === 0 ? 0 : (index + 1) % count
+}
+
+/**
+ * Past the largest detent the sheet resists: the overshoot grows ever more
+ * slowly and never exceeds `max`.
+ */
+export function rubberBand(overshoot: number, max: number): number {
+  'worklet'
+  if (overshoot <= 0) return 0
+  return (overshoot / (overshoot + max * 4)) * max
+}
+
+/** Whether a side drawer's release dismisses it. `movement` is toward its edge. */
+export function shouldDismissEdge(movement: number, size: number, velocity: number): boolean {
+  'worklet'
+  return movement / size > DISMISS_THRESHOLD || velocity > VELOCITY_THRESHOLD
+}

package/src/components/Drawer/styles.css.ts

@@ -1,7 +1,6 @@
 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 {duration, easing} from '@duro-app/tokens/tokens/motion.css'
 import {sizes} from '@duro-app/tokens/tokens/sizes.css'
@@ -97,6 +96,21 @@ export const styles = css.create({
     borderTopRightRadius: radii.lg,
     maxHeight: '85vh',
   },
+  // A snap sheet: as tall as its detent, which replaces the 85vh cap.
+  panelSnap: {
+    maxHeight: 'none',
+    transitionProperty: 'height',
+    transitionDuration: duration.base,
+    transitionTimingFunction: easing.easeOut,
+  },
+  sheetHeight: (height: number) => ({height}),
+
+  // The grabber's web-only additions: a grab cursor, and the browser leaves the drag to us.
+  grabberHitWeb: {
+    cursor: 'grab',
+    touchAction: 'none',
+  },
+
   panelLeftBorder: {
     borderLeftWidth: 0,
     borderRightWidth: borders.hairline,
@@ -180,38 +194,6 @@ export const styles = css.create({
   closeDurationBase: {animationDuration: duration.base},
   closeDurationSlow: {animationDuration: duration.slow},
 
-  // --- Header ---
-  header: {
-    display: 'flex',
-    alignItems: 'flex-start',
-    justifyContent: 'space-between',
-    paddingTop: spacing.lg,
-    paddingLeft: spacing.lg,
-    paddingRight: spacing.lg,
-    paddingBottom: spacing.md,
-    gap: spacing.md,
-  },
-
-  // --- Title ---
-  title: {
-    fontSize: typography.fontSizeLg,
-    fontWeight: typography.fontWeightSemibold,
-    lineHeight: typography.lineHeight,
-    color: colors.text,
-    margin: 0,
-  },
-
-  // --- Description ---
-  description: {
-    fontSize: typography.fontSizeSm,
-    lineHeight: typography.lineHeight,
-    color: colors.textMuted,
-    margin: 0,
-    paddingLeft: spacing.lg,
-    paddingRight: spacing.lg,
-    paddingBottom: spacing.md,
-  },
-
   // --- Body ---
   body: {
     paddingLeft: spacing.lg,
@@ -220,45 +202,8 @@ export const styles = css.create({
     overflowY: 'auto',
     flex: 1,
   },
-
-  // --- Footer ---
-  footer: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-    gap: spacing.sm,
-    paddingTop: spacing.md,
-    paddingLeft: spacing.lg,
-    paddingRight: spacing.lg,
-    paddingBottom: spacing.lg,
-    borderTopWidth: borders.hairline,
-    borderTopStyle: 'solid',
-    borderTopColor: colors.border,
-  },
-
-  // --- Close button ---
-  closeButton: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: sizes.iconButton,
-    height: sizes.iconButton,
-    borderRadius: radii.sm,
-    borderWidth: 0,
-    backgroundColor: {
-      default: 'transparent',
-      ':hover': colors.bgCardHover,
-    },
-    color: colors.textMuted,
-    cursor: 'pointer',
-    padding: 0,
-    flexShrink: 0,
-    transitionProperty: 'background-color',
-    transitionDuration: duration.fast,
-  },
-
-  // --- Inline wrapper ---
-  inlineWrapper: {
-    display: 'inline-flex',
+  bodyFlush: {
+    paddingLeft: 0,
+    paddingRight: 0,
   },
 })

package/src/components/Drawer/touchInput.ts

@@ -0,0 +1,81 @@
+/**
+ * Real touch input and viewport control for Storybook interaction tests
+ * (the Drawer's, SplitPane's), through
+ * Chrome DevTools Protocol: synthetic pointer events neither scroll nor go
+ * through touch adjustment the way a finger does.
+ */
+
+export type Point = {x: number; y: number}
+
+/**
+ * A CDP command. `vitest/browser` loads only under the test runner, so it is
+ * imported here, at call time: a static import breaks the built Storybook.
+ * `CDPSession` is empty until the provider's typings load; `send` exists at runtime.
+ */
+export async function cdpSend(method: string, params: object) {
+  const {cdp} = await import('vitest/browser')
+  const session = cdp() as unknown as {send: (m: string, p: object) => Promise<unknown>}
+  return session.send(method, params)
+}
+
+/** Set the page's viewport (test runner only, like `cdpSend`). */
+export async function setViewport(width: number, height: number) {
+  const {page} = await import('vitest/browser')
+  await page.viewport(width, height)
+}
+
+export const pause = (ms: number) => new Promise((r) => setTimeout(r, ms))
+
+/**
+ * CDP input lands in top-level page coordinates; the story runs in an iframe
+ * the test runner offsets and may scale to fit. Map a point up every frame.
+ */
+export function toPage(p: Point): Point {
+  let {x, y} = p
+  let win: Window = window
+  while (win.frameElement && win.parent !== win) {
+    const rect = win.frameElement.getBoundingClientRect()
+    const scale = rect.width / win.innerWidth
+    x = rect.left + x * scale
+    y = rect.top + y * scale
+    win = win.parent
+  }
+  return {x, y}
+}
+
+/**
+ * A page-coordinate touch point with a 1px radius: Chrome's touch adjustment
+ * snaps a fat default touch onto the nearest control, which would turn every
+ * drag in the list into a drag on a toggle.
+ */
+const touchAt = (p: Point) => ({...toPage(p), radiusX: 1, radiusY: 1})
+
+/**
+ * A finger drag from one point to another, in `steps` moves 16 ms apart.
+ * Each move is a round trip to the browser; few of them keep a test well
+ * inside its timeout on a loaded machine.
+ */
+export async function touchDrag(from: Point, to: Point, steps = 6) {
+  const send = (type: string, touchPoints: Point[]) =>
+    cdpSend('Input.dispatchTouchEvent', {type, touchPoints: touchPoints.map(touchAt)})
+  await send('touchStart', [from])
+  for (let i = 1; i <= steps; i++) {
+    await send('touchMove', [
+      {x: from.x + ((to.x - from.x) * i) / steps, y: from.y + ((to.y - from.y) * i) / steps},
+    ])
+    await pause(16)
+  }
+  await send('touchEnd', [])
+}
+
+/** A finger tap. */
+export async function touchTap(at: Point) {
+  await cdpSend('Input.dispatchTouchEvent', {type: 'touchStart', touchPoints: [touchAt(at)]})
+  await cdpSend('Input.dispatchTouchEvent', {type: 'touchEnd', touchPoints: []})
+}
+
+/** The centre of an element, in its own document's coordinates. */
+export function centre(el: Element): Point {
+  const r = el.getBoundingClientRect()
+  return {x: r.left + r.width / 2, y: r.top + r.height / 2}
+}

package/src/components/Drawer/useDrawerRoot.ts

@@ -0,0 +1,90 @@
+import {type ReactNode, useEffect, useId, useMemo, useRef, useState} from 'react'
+import type {DurationToken} from '@duro-app/tokens/keys'
+import {useOverlayOpenState} from '../../shared/useOverlayOpenState'
+import type {DrawerAnchor, DrawerContextValue} from './parts'
+import {sortSnapPoints, type SnapPoint} from './sheetPhysics'
+
+export interface DrawerRootProps {
+  children: ReactNode
+  /** Controlled open state */
+  open?: boolean
+  /** Default open state (uncontrolled) */
+  defaultOpen?: boolean
+  /** Called when drawer open state changes */
+  onOpenChange?: (open: boolean) => void
+  /** Which edge the drawer slides from. Default: 'right' */
+  anchor?: DrawerAnchor
+  /** Whether clicking backdrop or pressing Escape (Android's back button on native) closes the drawer. Default: true */
+  dismissable?: boolean
+  /** Whether swipe gesture dismisses the drawer. Default: true */
+  swipeDismiss?: boolean
+  /** Motion token for the close animation. Default: 'fast' (150ms) */
+  closeAnimationDuration?: DurationToken
+  /**
+   * Bottom anchor only: the heights the sheet rests at. 'medium' is half the
+   * window, 'large' the window less its top safe-area inset. A drag moves
+   * between them and dismisses below the lowest; the grabber steps through
+   * them on a tap. Without it, a bottom drawer is as tall as its content.
+   */
+  snapPoints?: readonly SnapPoint[]
+  /** The detent the sheet opens at. Default: the lowest of snapPoints */
+  defaultSnapPoint?: SnapPoint
+}
+
+/** The state both platforms' Drawer.Root share: open and closing, ids, and the detent. */
+export function useDrawerRoot({
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  anchor = 'right',
+  dismissable = true,
+  swipeDismiss = true,
+  closeAnimationDuration = 'fast',
+  snapPoints: snapPointsProp,
+  defaultSnapPoint,
+}: Omit<DrawerRootProps, 'children'>): DrawerContextValue {
+  const {
+    present,
+    closing,
+    requestOpen,
+    requestClose,
+    closeNow: requestCloseImmediate,
+  } = useOverlayOpenState({
+    open: controlledOpen,
+    defaultOpen,
+    onOpenChange,
+    exitDuration: closeAnimationDuration,
+    closeNotice: 'after-exit',
+  })
+  const panelRef = useRef<unknown>(null)
+  const titleId = useId()
+  const descriptionId = useId()
+
+  // Keyed by content: a new array literal each render is the same detents.
+  const snapKey = anchor === 'bottom' && snapPointsProp ? sortSnapPoints(snapPointsProp).join() : ''
+  const snapPoints = useMemo(() => (snapKey ? (snapKey.split(',') as SnapPoint[]) : []), [snapKey])
+  const openIndex = Math.max(0, defaultSnapPoint ? snapPoints.indexOf(defaultSnapPoint) : 0)
+  const [snapIndex, setSnapIndex] = useState(openIndex)
+  // Each opening starts at the default detent.
+  useEffect(() => {
+    if (!present) setSnapIndex(openIndex)
+  }, [present, openIndex])
+
+  return {
+    open: present,
+    closing,
+    closeDuration: closeAnimationDuration,
+    anchor,
+    dismissable,
+    swipeDismiss,
+    requestOpen,
+    requestClose,
+    requestCloseImmediate,
+    titleId,
+    descriptionId,
+    panelRef,
+    snapPoints,
+    snapIndex,
+    setSnapIndex,
+  }
+}

package/src/components/Drawer/useSheetHeights.ts

@@ -0,0 +1,42 @@
+import {useEffect, useMemo, useState} from 'react'
+import {detentHeight, type SnapPoint} from './sheetPhysics'
+
+interface Viewport {
+  height: number
+  topInset: number
+}
+
+/** The top safe-area inset, read through a probe: CSS knows it, JavaScript does not. */
+function readTopInset(): number {
+  const probe = document.createElement('div')
+  probe.style.cssText = 'position:fixed;visibility:hidden;padding-top:env(safe-area-inset-top,0px)'
+  document.body.appendChild(probe)
+  const inset = parseFloat(getComputedStyle(probe).paddingTop) || 0
+  probe.remove()
+  return inset
+}
+
+function readViewport(): Viewport {
+  return {height: window.innerHeight, topInset: readTopInset()}
+}
+
+/**
+ * Web: each detent's height in px, ascending, following the window as it
+ * resizes (a rotated phone, an opened on-screen keyboard).
+ */
+export function useSheetHeights(points: readonly SnapPoint[], active: boolean): number[] {
+  const [viewport, setViewport] = useState<Viewport | null>(null)
+
+  useEffect(() => {
+    if (!active) return
+    setViewport(readViewport())
+    const onResize = () => setViewport(readViewport())
+    window.addEventListener('resize', onResize)
+    return () => window.removeEventListener('resize', onResize)
+  }, [active])
+
+  return useMemo(
+    () => (viewport ? points.map((p) => detentHeight(p, viewport.height, viewport.topInset)) : []),
+    [points, viewport],
+  )
+}