@duro-app/ui 5.12.0 → 5.13.0

package/src/components/Drawer/Drawer.tsx

@@ -1,28 +1,29 @@
 import {createPortal} from 'react-dom'
-import {
-  type ReactNode,
-  type RefObject,
-  createContext,
-  useContext,
-  useState,
-  useEffect,
-  useCallback,
-  useId,
-  useRef,
-} from 'react'
+import {type ReactNode, useState, useEffect, useCallback} from 'react'
 import {html} from 'react-strict-dom'
 import type {DurationToken} from '@duro-app/tokens/keys'
 import {styles} from './styles.css'
-import {useOverlayOpenState} from '../../shared/useOverlayOpenState'
 import {usePortalMount} from '../ThemeProvider/ThemeProvider'
 import {ControlContextBoundary} from '../Toolbar/ControlContextBoundary'
 import {ModalContext} from '../../shared/ModalContext'
 import {useSwipeDismiss} from './useSwipeDismiss'
+import {useSheetHeights} from './useSheetHeights'
+import {cycleDetent} from './sheetPhysics'
+import {partStyles} from './parts.css'
+import {
+  DEFAULT_GRABBER_LABELS,
+  Description,
+  DrawerContext,
+  Footer,
+  Header,
+  Title,
+  useDrawer,
+  type DrawerSize,
+  type GrabberLabels,
+} from './parts'
+import {useDrawerRoot, type DrawerRootProps} from './useDrawerRoot'
 
-// --- Types ---
-
-export type DrawerAnchor = 'right' | 'left' | 'bottom'
-export type DrawerSize = 'sm' | 'md' | 'lg'
+export type {DrawerAnchor, DrawerSize, SnapPoint} from './parts'
 
 const closeDurationMap = {
   instant: styles.closeDurationInstant,
@@ -34,79 +35,11 @@ const closeDurationMap = {
   slow: styles.closeDurationSlow,
 } as const satisfies Record<DurationToken, unknown>
 
-// --- Context ---
-
-interface DrawerContextValue {
-  open: boolean
-  closing: boolean
-  closeDuration: DurationToken
-  anchor: DrawerAnchor
-  dismissable: boolean
-  swipeDismiss: boolean
-  requestOpen: () => void
-  requestClose: () => void
-  /** Close immediately without CSS animation (used by swipe dismiss which handles its own exit animation) */
-  requestCloseImmediate: () => void
-  titleId: string
-  descriptionId: string
-  panelRef: RefObject<HTMLDivElement | null>
-}
-
-const DrawerContext = createContext<DrawerContextValue | null>(null)
-
-function useDrawer() {
-  const ctx = useContext(DrawerContext)
-  if (!ctx) throw new Error('Drawer compound components must be used within Drawer.Root')
-  return ctx
-}
-
 // --- Root ---
 
-interface RootProps {
-  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 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
-}
-
-function Root({
-  children,
-  open: controlledOpen,
-  defaultOpen = false,
-  onOpenChange,
-  anchor = 'right',
-  dismissable = true,
-  swipeDismiss = true,
-  closeAnimationDuration = 'fast',
-}: RootProps) {
-  const {
-    present,
-    closing,
-    requestOpen,
-    requestClose,
-    closeNow: requestCloseImmediate,
-  } = useOverlayOpenState({
-    open: controlledOpen,
-    defaultOpen,
-    onOpenChange,
-    exitDuration: closeAnimationDuration,
-    closeNotice: 'after-exit',
-  })
-  const panelRef = useRef<HTMLDivElement>(null)
-
-  const titleId = useId()
-  const descriptionId = useId()
+function Root({children, ...props}: DrawerRootProps) {
+  const ctx = useDrawerRoot(props)
+  const {open: present, dismissable, requestClose} = ctx
 
   // Handle Escape key
   useEffect(() => {
@@ -134,26 +67,7 @@ function Root({
     }
   }, [present])
 
-  return (
-    <DrawerContext.Provider
-      value={{
-        open: present,
-        closing,
-        closeDuration: closeAnimationDuration,
-        anchor,
-        dismissable,
-        swipeDismiss,
-        requestOpen,
-        requestClose,
-        requestCloseImmediate,
-        titleId,
-        descriptionId,
-        panelRef,
-      }}
-    >
-      {children}
-    </DrawerContext.Provider>
-  )
+  return <DrawerContext.Provider value={ctx}>{children}</DrawerContext.Provider>
 }
 
 // --- Trigger ---
@@ -162,7 +76,7 @@ function Trigger({children}: {children: ReactNode}) {
   const {requestOpen} = useDrawer()
 
   return (
-    <html.div onClick={requestOpen} style={styles.inlineWrapper}>
+    <html.div onClick={requestOpen} style={partStyles.inlineWrapper}>
       {children}
     </html.div>
   )
@@ -173,6 +87,8 @@ function Trigger({children}: {children: ReactNode}) {
 interface PortalProps {
   children: ReactNode
   size?: DrawerSize
+  /** The grabber's accessible names, by what a press does next. Snap sheets only */
+  grabberLabels?: GrabberLabels
 }
 
 // Slide animation maps
@@ -194,7 +110,7 @@ const viewportAnchorMap = {
   bottom: styles.viewportBottom,
 } as const
 
-function Portal({children, size = 'md'}: PortalProps) {
+function Portal({children, size = 'md', grabberLabels = DEFAULT_GRABBER_LABELS}: PortalProps) {
   const {
     open,
     closing,
@@ -207,8 +123,14 @@ function Portal({children, size = 'md'}: PortalProps) {
     titleId,
     descriptionId,
     panelRef,
+    snapPoints,
+    snapIndex,
+    setSnapIndex,
   } = useDrawer()
   const mount = usePortalMount()
+  const snapping = snapPoints.length > 0
+  const heights = useSheetHeights(snapPoints, snapping && open)
+  const sized = snapping && heights.length === snapPoints.length
   // The shown panel element, tracked as state so swipe listeners follow it
   // when the portal mount arrives and the panel is remounted into it.
   const [panel, setPanel] = useState<HTMLDivElement | null>(null)
@@ -232,6 +154,7 @@ function Portal({children, size = 'md'}: PortalProps) {
     enabled: swipeEnabled && open && !closing,
     onDismiss: requestCloseImmediate,
     panel,
+    snap: sized ? {heights, index: snapIndex, onSnap: setSnapIndex} : null,
   })
 
   if (!open) return null
@@ -265,12 +188,29 @@ function Portal({children, size = 'md'}: PortalProps) {
             isHorizontal && styles.panelHorizontal,
             isHorizontal && styles[size],
             !isHorizontal && styles.panelVertical,
+            sized && styles.panelSnap,
+            sized && styles.sheetHeight(heights[snapIndex]),
             anchor === 'left' && styles.panelLeftBorder,
             closing && slideOutMap[anchor],
             closing && closeDurationMap[closeDuration],
             !closing && slideInMap[anchor],
           ]}
         >
+          {snapping && (
+            <html.button
+              type="button"
+              data-drawer-grabber=""
+              aria-label={
+                cycleDetent(snapIndex, snapPoints.length) > snapIndex
+                  ? grabberLabels.expand
+                  : grabberLabels.collapse
+              }
+              onClick={() => setSnapIndex(cycleDetent(snapIndex, snapPoints.length))}
+              style={[partStyles.grabberHit, styles.grabberHitWeb]}
+            >
+              <html.span style={partStyles.grabber} />
+            </html.button>
+          )}
           <ModalContext.Provider value={true}>
             <ControlContextBoundary>{children}</ControlContextBoundary>
           </ModalContext.Provider>
@@ -287,46 +227,19 @@ function Portal({children, size = 'md'}: PortalProps) {
   return mount ? createPortal(node, mount) : node
 }
 
-// --- Header ---
-
-function Header({children}: {children: ReactNode}) {
-  return <html.div style={styles.header}>{children}</html.div>
-}
-
-// --- Title ---
-
-function Title({children}: {children: ReactNode}) {
-  const {titleId} = useDrawer()
-  return (
-    <html.h2 id={titleId} style={styles.title}>
-      {children}
-    </html.h2>
-  )
-}
-
-// --- Description ---
+// --- Body ---
 
-function Description({children}: {children: ReactNode}) {
-  const {descriptionId} = useDrawer()
+function Body({children}: {children: ReactNode}) {
+  const {snapPoints} = useDrawer()
+  // A snap sheet's Body is its scroll viewport: a drag there scrolls it, and
+  // moves the sheet only from the top edge (or upward, below the largest detent).
   return (
-    <html.p id={descriptionId} style={styles.description}>
+    <html.div style={styles.body} data-duro-scroll={snapPoints.length > 0 ? '' : undefined}>
       {children}
-    </html.p>
+    </html.div>
   )
 }
 
-// --- Body ---
-
-function Body({children}: {children: ReactNode}) {
-  return <html.div style={styles.body}>{children}</html.div>
-}
-
-// --- Footer ---
-
-function Footer({children}: {children: ReactNode}) {
-  return <html.div style={styles.footer}>{children}</html.div>
-}
-
 // --- Close ---
 
 interface CloseProps {
@@ -339,14 +252,14 @@ function Close({children, 'aria-label': ariaLabel = 'Close'}: CloseProps) {
 
   if (children) {
     return (
-      <html.div onClick={requestClose} style={styles.inlineWrapper}>
+      <html.div onClick={requestClose} style={partStyles.inlineWrapper}>
         {children}
       </html.div>
     )
   }
 
   return (
-    <html.button onClick={requestClose} aria-label={ariaLabel} style={styles.closeButton}>
+    <html.button onClick={requestClose} aria-label={ariaLabel} style={partStyles.closeButton}>
       <svg width={16} height={16} viewBox="0 0 16 16" fill="none">
         <path
           d="M4 4l8 8M12 4l-8 8"

package/src/components/Drawer/DrawerScroll.stories.tsx

@@ -1,11 +1,11 @@
 import type {Meta, StoryObj} from '@storybook/react'
 import {expect, waitFor} from 'storybook/test'
-import {cdp, page} from 'vitest/browser'
 import {Drawer} from './Drawer'
 import {ToggleGroup} from '../ToggleGroup/ToggleGroup'
 import {Toggle} from '../Toggle/Toggle'
 import {Icon, type IconName} from '../Icon'
 import {SIZES_PX} from '@duro-app/tokens/keys'
+import {cdpSend, pause, setViewport, toPage, touchDrag, type Point} from './touchInput'
 
 const meta: Meta = {
   title: 'Components/Drawer/Scroll',
@@ -87,56 +87,6 @@ function Scene({pressed}: {pressed?: string} = {}) {
   )
 }
 
-type Point = {x: number; y: number}
-
-/** `CDPSession` is empty until the provider's typings load; `send` exists at runtime. */
-const cdpSend = (method: string, params: object) =>
-  (cdp() as unknown as {send: (method: string, params: object) => Promise<unknown>}).send(
-    method,
-    params,
-  )
-
-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.
- */
-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})
-
-/** Real touch drag through CDP; synthetic pointer events don't scroll. */
-async function touchDrag(from: Point, to: Point) {
-  const steps = 12
-  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', [])
-}
-
 const getViewport = () => document.querySelector<HTMLElement>('[data-duro-scroll]')!
 const getDialog = () => document.querySelector('[role="dialog"]')
 
@@ -158,7 +108,7 @@ function freePoint(el: HTMLElement, fy: number): Point {
 }
 
 async function setup() {
-  await page.viewport(390, 844)
+  await setViewport(390, 844)
   await cdpSend('Emulation.setTouchEmulationEnabled', {enabled: true, maxTouchPoints: 1})
   await waitFor(() => expect(getViewport()).toBeTruthy())
   const viewport = getViewport()
@@ -242,7 +192,7 @@ export const TapOnToggleStillPresses: Story = {
 export const MountKeepsTheDrawerStill: Story = {
   // size the page before the render: a drawer mounts at its final width
   beforeEach: async () => {
-    await page.viewport(390, 844)
+    await setViewport(390, 844)
   },
   render: () => <Scene pressed={ICON_NAMES[39]} />,
   play: async () => {
@@ -278,7 +228,7 @@ export const CoarsePointerRows: Story = {
   ),
   play: async () => {
     // phone width, so 42 icons overflow three rows
-    await page.viewport(390, 844)
+    await setViewport(390, 844)
     await cdpSend('Emulation.setTouchEmulationEnabled', {enabled: true, maxTouchPoints: 1})
     await waitFor(() => expect(matchMedia('(pointer: coarse)').matches).toBe(true))
     const viewport = getViewport()

package/src/components/Drawer/DrawerSnap.stories.tsx

@@ -0,0 +1,205 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect, fn, userEvent, waitFor} from 'storybook/test'
+import {Drawer, type SnapPoint} from './Drawer'
+import {Button} from '../Button/Button'
+import {List} from '../List/List'
+import {cdpSend, centre, pause, setViewport, touchDrag, type Point} from './touchInput'
+
+const meta: Meta = {
+  title: 'Components/Drawer/Snap points',
+  parameters: {layout: 'fullscreen'},
+}
+
+export default meta
+type Story = StoryObj
+
+const SESSIONS = Array.from({length: 40}, (_, i) => `Session ${i + 1}`)
+
+interface SheetArgs {
+  snapPoints: SnapPoint[]
+  defaultSnapPoint: SnapPoint
+  titleAlign: 'start' | 'center'
+  onOpenChange?: (open: boolean) => void
+}
+
+const DEFAULT_ARGS: SheetArgs = {
+  snapPoints: ['medium', 'large'],
+  defaultSnapPoint: 'medium',
+  titleAlign: 'center',
+}
+
+/** The picked B0 direction (docs/mockups/native-sheet/Done.dc.html): grabber, centred title, a text Done. */
+function Sheet(props: Partial<SheetArgs>) {
+  const {snapPoints, defaultSnapPoint, titleAlign, onOpenChange} = {...DEFAULT_ARGS, ...props}
+  return (
+    <Drawer.Root
+      anchor="bottom"
+      snapPoints={snapPoints}
+      defaultSnapPoint={defaultSnapPoint}
+      onOpenChange={onOpenChange}
+      defaultOpen
+    >
+      <Drawer.Portal>
+        <Drawer.Header titleAlign={titleAlign}>
+          <Drawer.Title>Move to project</Drawer.Title>
+          <Drawer.Close>
+            <Button variant="link">Done</Button>
+          </Drawer.Close>
+        </Drawer.Header>
+        <Drawer.Body>
+          <List.Root aria-label="Sessions">
+            {SESSIONS.map((s) => (
+              <List.Item key={s}>
+                <List.Text>{s}</List.Text>
+              </List.Item>
+            ))}
+          </List.Root>
+        </Drawer.Body>
+      </Drawer.Portal>
+    </Drawer.Root>
+  )
+}
+
+export const SnapSheet: StoryObj<SheetArgs> = {
+  args: {...DEFAULT_ARGS, onOpenChange: fn()},
+  argTypes: {
+    snapPoints: {
+      control: 'check',
+      options: ['medium', 'large'],
+      description: "The detents: 'medium' half the window, 'large' the window less its top inset",
+    },
+    defaultSnapPoint: {
+      control: 'inline-radio',
+      options: ['medium', 'large'],
+      description: 'The detent the sheet opens at',
+    },
+    titleAlign: {
+      control: 'inline-radio',
+      options: ['start', 'center'],
+      description: 'Drawer.Header: the title at the start, or centred with the close at the end',
+    },
+  },
+  // Keyed by the opening detent: it seeds state on mount, so a change remounts the sheet.
+  render: (args) => (
+    <Sheet
+      key={args.defaultSnapPoint}
+      {...args}
+      snapPoints={args.snapPoints.length > 0 ? args.snapPoints : ['medium']}
+    />
+  ),
+}
+
+const getDialog = () => document.querySelector<HTMLElement>('[role="dialog"]')
+const getGrabber = () => document.querySelector<HTMLElement>('[data-drawer-grabber]')!
+const getBody = () => document.querySelector<HTMLElement>('[role="dialog"] [data-duro-scroll]')!
+const sheetHeight = () => getDialog()!.getBoundingClientRect().height
+
+const WINDOW_H = 844
+const MEDIUM = WINDOW_H / 2
+const LARGE = WINDOW_H // no top safe-area inset in a desktop browser
+
+async function setup() {
+  await setViewport(390, WINDOW_H)
+  await cdpSend('Emulation.setTouchEmulationEnabled', {enabled: true, maxTouchPoints: 1})
+  await waitFor(() => expect(getDialog()).not.toBeNull())
+  // let the slide-in finish
+  await pause(500)
+}
+
+const near = (actual: number, expected: number) =>
+  expect(Math.abs(actual - expected)).toBeLessThanOrEqual(2)
+
+async function dragGrabber(dy: number) {
+  const from: Point = centre(getGrabber())
+  await touchDrag(from, {x: from.x, y: from.y + dy})
+  await pause(400)
+}
+
+// One drag per story: a test that drags three times can outlast the runner's
+// timeout on a loaded machine.
+export const DragUpGrowsToLarge: Story = {
+  render: () => <Sheet />,
+  play: async () => {
+    await setup()
+    await waitFor(() => near(sheetHeight(), MEDIUM))
+    await dragGrabber(-300)
+    await waitFor(() => near(sheetHeight(), LARGE))
+  },
+}
+
+export const DragDownShrinksToMedium: Story = {
+  render: () => <Sheet defaultSnapPoint="large" />,
+  play: async () => {
+    await setup()
+    await waitFor(() => near(sheetHeight(), LARGE))
+    await dragGrabber(300)
+    await waitFor(() => near(sheetHeight(), MEDIUM))
+  },
+}
+
+export const DragDownBelowMediumDismisses: Story = {
+  render: () => <Sheet />,
+  play: async () => {
+    await setup()
+    await waitFor(() => near(sheetHeight(), MEDIUM))
+    await dragGrabber(300)
+    await waitFor(() => expect(getDialog()).toBeNull())
+  },
+}
+
+export const SlowShortDragSnapsBack: Story = {
+  render: () => <Sheet />,
+  play: async () => {
+    await setup()
+    const from = centre(getGrabber())
+    // 60px over 20 moves (about 0.2 px/ms): well under the fling speed, well
+    // short of the next detent
+    await touchDrag(from, {x: from.x, y: from.y - 60}, 20)
+    await pause(400)
+    await waitFor(() => near(sheetHeight(), MEDIUM))
+  },
+}
+
+export const GrabberTapCyclesDetents: Story = {
+  render: () => <Sheet />,
+  play: async () => {
+    await setup()
+    const grabber = getGrabber()
+    await expect(grabber).toHaveAccessibleName('Expand sheet')
+    await userEvent.click(grabber)
+    await waitFor(() => near(sheetHeight(), LARGE))
+    await expect(grabber).toHaveAccessibleName('Shrink sheet')
+    await userEvent.click(grabber)
+    await waitFor(() => near(sheetHeight(), MEDIUM))
+  },
+}
+
+export const DragUpOnContentGrowsThenScrolls: Story = {
+  render: () => <Sheet />,
+  play: async () => {
+    await setup()
+    const from = centre(getBody())
+    // At medium, the content's upward drag grows the sheet …
+    await touchDrag(from, {x: from.x, y: from.y - 250})
+    await pause(400)
+    await waitFor(() => near(sheetHeight(), LARGE))
+    await expect(getBody().scrollTop).toBe(0)
+    // … at the largest detent it scrolls the list.
+    const again = centre(getBody())
+    await touchDrag(again, {x: again.x, y: again.y - 120})
+    await pause(300)
+    await expect(getBody().scrollTop).toBeGreaterThan(0)
+    near(sheetHeight(), LARGE)
+  },
+}
+
+export const DoneCloses: Story = {
+  render: () => <Sheet />,
+  play: async () => {
+    await setup()
+    await userEvent.click(
+      document.querySelector('[role="dialog"] button:not([data-drawer-grabber])')!,
+    )
+    await waitFor(() => expect(getDialog()).toBeNull())
+  },
+}

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

@@ -0,0 +1,58 @@
+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 {shadows} from '@duro-app/tokens/tokens/shadows.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
+
+/**
+ * Native Drawer surfaces. Motion is Reanimated's (plan N0, Decision 4): these
+ * styles draw the panel and backdrop, the animated views around them move them.
+ */
+export const nativeStyles = css.create({
+  fill: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+  scrim: {
+    backgroundColor: colors.scrim,
+  },
+  panel: {
+    flexGrow: 1,
+    backgroundColor: colors.bgCard,
+    boxShadow: shadows.lg,
+    display: 'flex',
+    flexDirection: 'column',
+    overflow: 'hidden',
+  },
+  panelBottom: {
+    borderTopWidth: borders.hairline,
+    borderTopStyle: 'solid',
+    borderTopColor: colors.border,
+    borderTopLeftRadius: radii.lg,
+    borderTopRightRadius: radii.lg,
+  },
+  panelRight: {
+    borderLeftWidth: borders.hairline,
+    borderLeftStyle: 'solid',
+    borderLeftColor: colors.border,
+  },
+  panelLeft: {
+    borderRightWidth: borders.hairline,
+    borderRightStyle: 'solid',
+    borderRightColor: colors.border,
+  },
+  // The safe-area insets (and a snap sheet's overshoot skirt), as padding.
+  insets: (top: number, bottom: number) => ({paddingTop: top, paddingBottom: bottom}),
+  // The Body's padding inside its ScrollView (no flex: it sizes to content).
+  bodyContent: {
+    paddingLeft: spacing.lg,
+    paddingRight: spacing.lg,
+    paddingBottom: spacing.lg,
+  },
+  // A snap sheet resting below its largest detent: its lower part is off
+  // screen, so the list scrolls that far further to show its end.
+  hiddenBelow: (height: number) => ({paddingBottom: height}),
+})