Swipe to Dismiss

import { animate, motionValue } from 'motion'

// Markup: <div role="status"><div class="toast">…<button class="dismiss">Dismiss
// </button></div></div>, shown by <button class="show-toast">. The toast spans
// its container less an inset, so its own width plus a margin takes it clear.
// No CSS transition on .toast: the transform is written here, 1:1 with the pointer.
const DISTANCE = 1 / 3 // of the toast's width, the house number (Sonner 45px, Vaul 25%)
const VELOCITY = 0.1 // px/ms, Emil's number
const WINDOW = 100 // ms the velocity is read over
const SPAN = 8 // ms: samples closer than this read as no velocity
const EDGE = 16 // px past the width, so a shadow clears too
// { duration: 0.3, bounce: 0 } out and { duration: 0.5, bounce: 0 } back, as physics:
// Motion 14 drops the release velocity on duration/bounce springs.
const exit = { type: 'spring', stiffness: 947, damping: 61.6, mass: 1 }
const back = { type: 'spring', stiffness: 341, damping: 36.9, mass: 1 }
const reduced = matchMedia('(prefers-reduced-motion: reduce)')

const toast = document.querySelector('.toast')
const opener = document.querySelector('.show-toast')
// No stylesheet assumed: a vertical swipe still scrolls the page, and nothing is
// selected mid-drag.
toast.style.touchAction = 'pan-y'
toast.style.userSelect = 'none'
const x = motionValue(0)
x.on('change', (v) => (toast.style.transform = `translateX(${v}px)`))
let drag = null // { pointerId, startX, base, samples: [{ t, x }] }

toast.addEventListener('pointerdown', (e) => {
  if (!e.isPrimary || e.button !== 0 || drag || e.target.closest('.dismiss')) return
  toast.setPointerCapture(e.pointerId) // moves and the release stay ours
  x.stop() // picked up mid-spring, it comes from where it is
  drag = { pointerId: e.pointerId, startX: e.clientX, base: x.get(), samples: [] }
})

toast.addEventListener('pointermove', (e) => {
  if (!drag || e.pointerId !== drag.pointerId) return
  const px = drag.base + e.clientX - drag.startX
  x.set(px)
  drag.samples.push({ t: e.timeStamp, x: px }) // the event's clock, not the handler's
})

// px/ms over the last WINDOW ms, so a drag that stopped before the release has none.
function velocityOf(samples, now) {
  const recent = samples.filter((s) => s.t >= now - WINDOW)
  if (recent.length < 2) return 0
  const a = recent[0]
  const b = recent[recent.length - 1]
  return b.t - a.t < SPAN ? 0 : (b.x - a.x) / (b.t - a.t)
}

// A flick counts only in the drag's direction: a fast move back toward rest goes back.
function leave(px, v, width) {
  const side = Math.sign(px)
  const fast = Math.abs(v) >= VELOCITY && Math.sign(v) === side
  return Math.abs(px) >= width * DISTANCE || fast ? side : 0
}

function release(side, v) {
  const target = side * (toast.offsetWidth + EDGE)
  const onComplete = () => side && toast.remove()
  // Reduced motion: the drag followed the pointer; the release jumps to the end.
  if (reduced.matches) {
    x.jump(target)
    return onComplete()
  }
  // Motion wants units per second; v is px/ms.
  animate(x, target, { ...(side ? exit : back), velocity: v * 1000, onComplete })
}

const end = (e) => {
  if (!drag || e.pointerId !== drag.pointerId) return
  const { samples } = drag
  drag = null
  const v = velocityOf(samples, e.timeStamp)
  release(leave(x.get(), v, toast.offsetWidth), v)
}
for (const type of ['pointerup', 'pointercancel', 'lostpointercapture']) toast.addEventListener(type, end)

// The non-gesture way out: the same exit, to the right, with no speed. Focus
// inside the toast goes back to the opener first, or it drops to body.
toast.querySelector('.dismiss').addEventListener('click', () => {
  if (toast.contains(document.activeElement)) opener.focus({ preventScroll: true })
  release(1, 0)
})

import { animate, motion, useMotionValue, useReducedMotion } from 'motion/react'
import { useRef, type PointerEvent, type ReactNode, type RefObject } from 'react'

const DISTANCE = 1 / 3 // of the toast's width, the house number (Sonner 45px, Vaul 25%)
const VELOCITY = 0.1 // px/ms, Emil's number
const WINDOW = 100 // ms the velocity is read over
const SPAN = 8 // ms: samples closer than this read as no velocity
const EDGE = 16 // px past the width, so a shadow clears too
// { duration: 0.3, bounce: 0 } out and { duration: 0.5, bounce: 0 } back, as physics:
// Motion 14 drops the release velocity on duration/bounce springs.
const exit = { type: 'spring', stiffness: 947, damping: 61.6, mass: 1 } as const
const back = { type: 'spring', stiffness: 341, damping: 36.9, mass: 1 } as const
// The toast spans its container (a flex column, or margin-inline: auto) less an
// inset, so its own width plus a margin takes it clear. No stylesheet assumed: a
// vertical swipe still scrolls the page, and nothing is selected mid-drag.
const box = { position: 'relative', inlineSize: 'calc(100% - 24px)', touchAction: 'pan-y', userSelect: 'none' } as const

type Sample = { t: number; x: number }
type Drag = { pointerId: number; startX: number; base: number; samples: Sample[] }

// px/ms over the last WINDOW ms, so a drag that stopped before the release has none.
function velocityOf(samples: Sample[], now: number) {
  const recent = samples.filter((s) => s.t >= now - WINDOW)
  if (recent.length < 2) return 0
  const a = recent[0]
  const b = recent[recent.length - 1]
  return b.t - a.t < SPAN ? 0 : (b.x - a.x) / (b.t - a.t)
}

type Props = { onDismiss: () => void; opener: RefObject<HTMLElement | null>; children: ReactNode }

export function Toast({ onDismiss, opener, children }: Props) {
  const ref = useRef<HTMLDivElement>(null)
  const drag = useRef<Drag | null>(null)
  const x = useMotionValue(0)
  const reduced = useReducedMotion()

  const release = (side: number, v: number) => {
    const target = side * ((ref.current?.offsetWidth ?? 0) + EDGE)
    const onComplete = () => side && onDismiss()
    // Reduced motion: the drag followed the pointer; the release jumps to the end.
    if (reduced) {
      x.jump(target)
      return onComplete()
    }
    // Motion wants units per second; v is px/ms.
    animate(x, target, { ...(side ? exit : back), velocity: v * 1000, onComplete })
  }

  // Decided on x.get(), the position, not the drag distance: a toast caught on
  // its way back is not at the grab point.
  // A flick counts only in the drag's direction: a fast move back toward rest goes back.
  const leave = (px: number, v: number) => {
    const width = ref.current?.offsetWidth ?? 0
    const side = Math.sign(px)
    const fast = Math.abs(v) >= VELOCITY && Math.sign(v) === side
    return Math.abs(px) >= width * DISTANCE || fast ? side : 0
  }

  const onPointerDown = (e: PointerEvent<HTMLDivElement>) => {
    if (!e.isPrimary || e.button !== 0 || drag.current || (e.target as HTMLElement).closest('button')) return
    e.currentTarget.setPointerCapture(e.pointerId) // moves and the release stay ours
    x.stop() // picked up mid-spring, it comes from where it is
    drag.current = { pointerId: e.pointerId, startX: e.clientX, base: x.get(), samples: [] }
  }

  const onPointerMove = (e: PointerEvent<HTMLDivElement>) => {
    const d = drag.current
    if (!d || e.pointerId !== d.pointerId) return
    const px = d.base + e.clientX - d.startX
    x.set(px)
    d.samples.push({ t: e.timeStamp, x: px }) // the event's clock, not the handler's
  }

  // pointercancel (a touch that became a scroll) and a lost capture release too.
  const end = (e: PointerEvent<HTMLDivElement>) => {
    const d = drag.current
    if (!d || e.pointerId !== d.pointerId) return
    drag.current = null
    const v = velocityOf(d.samples, e.timeStamp)
    release(leave(x.get(), v), v)
  }

  return (
    // Pointer events, not drag="x": the drag prop starts after 3px, decides in
    // postRender, cannot be cancelled before it starts and drags from child buttons.
    <motion.div
      ref={ref}
      className="toast"
      style={{ ...box, x }}
      onPointerDown={onPointerDown}
      onPointerMove={onPointerMove}
      onPointerUp={end}
      onPointerCancel={end}
      onLostPointerCapture={end}
    >
      {children}
      {/* The non-gesture way out: the same exit, to the right, with no speed. Focus
          goes back to the opener first, or it drops to body. */}
      <button
        type="button"
        onClick={() => {
          opener.current?.focus({ preventScroll: true })
          release(1, 0)
        }}
      >
        Dismiss
      </button>
    </motion.div>
  )
}