Capítulo 43 de 51
A stacked (or anchored) notification system driven by a useToastManager() hook / global createToastManager() instance rather than declarative per-toast JSX — toasts are queued imperatively (add, close, update, promise) and rendered through a shared Provider/Viewport, with a rich CSS-variable/data-attribute set for stacking, swipe, and expand animations.
Provider → Portal → Viewport → (stacked) Root → Content → Title, Description, Action, Close; or (anchored) Positioner → Root → Arrow + Content.add/close/update/promise from Toast.useToastManager() (inside React) or a Toast.createToastManager() instance (usable outside the React tree, e.g. in a plain function) passed to Provider's toastManager prop so both share one renderer.promise method: ties a toast's pending/success/error states directly to a Promise — the standard "Saving…" → "Saved!"/"Failed" pattern without manual state juggling.F6 jumps keyboard focus into the toast viewport region — built-in, no extra wiring.data-base-ui-swipe-ignore manually to opt a specific descendant out (same mechanism as Drawer, ch022).--toast-index (0 = frontmost, drives z-index/scale), --toast-offset-y (vertical offset when data-expanded, i.e. viewport hovered/focused), --toast-frontmost-height (clamp collapsed-stack height to the front toast), --toast-swipe-movement-x/-y (live swipe translation).data-behind: marks a stacked toast's Content that sits behind the frontmost one — pair with data-expanded to fade content back in when the stack expands.data-limited: toast exceeded the Provider's limit — stays mounted with native inert rather than unmounting, so it can still animate out or be hidden distinctly.updateKey: increments on toast update/upsert — use to replay an attention animation (swap animation name, or use as a React key if remounting is acceptable).| Part | Notable props | Notable data attributes |
|---|---|---|
Provider | limit, toastManager, timeout | — |
Root | toast (required), swipeDirection | data-expanded, data-limited, data-swiping, data-swipe-direction, data-type, animation attrs |
Content | — | data-behind, data-expanded |
Viewport | — | data-expanded |
| manager methods | add, close, update, promise | — |
toastManager (via createToastManager()) and pass it to Provider whenever toasts need to be triggered from outside React (utility functions, non-component modules) — the hook-only API can't be called there.promise() for any async action reporting success/failure via toast, instead of manually calling add() then update()/close() on your own timers.--toast-index/--toast-frontmost-height/data-behind/data-expanded together — they're designed as one coordinated system, not independent knobs.data-base-ui-swipe-ignore swipe-opt-out convention.