@rtzll/reflow 0.4.0 → 0.5.0

package/dist/toaster.js

@@ -0,0 +1,418 @@
+import { jsx as _jsx, jsxs as _jsxs } from "remix/component/jsx-runtime";
+import { on, ref } from 'remix/component';
+import { Button } from './basic.js';
+import { Icon } from './icon.js';
+import { matchesShortcut, parseShortcut } from './shortcut.js';
+import { statusIcon } from './status-icon.js';
+// The module-level store behind toast(). Toasters subscribe; nothing renders
+// on the server, where no toast is ever raised.
+let entries = [];
+let counter = 0;
+const listeners = new Set();
+function emit() {
+    for (const listener of listeners)
+        listener();
+}
+function upsert(title, status, options = {}) {
+    const id = options.id ?? `rf-toast-${++counter}`;
+    const index = entries.findIndex((entry) => entry.id === id && !entry.dismissed);
+    const previous = index >= 0 ? entries[index] : undefined;
+    const entry = {
+        ...previous,
+        ...options,
+        id,
+        title,
+        status,
+        dismissed: false,
+        version: (previous?.version ?? 0) + 1,
+    };
+    if (previous)
+        entries = entries.with(index, entry);
+    else
+        entries = [entry, ...entries.filter((item) => item.id !== id)];
+    emit();
+    return id;
+}
+function close(id, reason) {
+    const closing = entries.filter((entry) => !entry.dismissed && (id === undefined || entry.id === id));
+    if (!closing.length)
+        return;
+    entries = entries.map((entry) => closing.includes(entry) ? { ...entry, dismissed: true } : entry);
+    // Without a Toaster to play the exit, a closed toast leaves at once.
+    if (!listeners.size)
+        entries = entries.filter((entry) => !entry.dismissed);
+    emit();
+    for (const entry of closing) {
+        if (reason === 'auto')
+            entry.onAutoClose?.(entry);
+        else
+            entry.onDismiss?.(entry);
+    }
+}
+function remove(id) {
+    const next = entries.filter((entry) => !(entry.id === id && entry.dismissed));
+    if (next.length === entries.length)
+        return;
+    entries = next;
+    emit();
+}
+function resolveMessage(message, value) {
+    return typeof message === 'function' ? message(value) : message;
+}
+/**
+ * Raises a toast in the app's `<Toaster>` and returns its id. `toast.success`,
+ * `toast.info`, `toast.warning`, `toast.error` and `toast.loading` set its
+ * status; `toast.promise` follows a promise from loading to its outcome;
+ * `toast.dismiss` closes one toast, or all of them.
+ */
+export const toast = Object.assign((title, options) => upsert(title, 'default', options), {
+    success: (title, options) => upsert(title, 'success', options),
+    info: (title, options) => upsert(title, 'info', options),
+    warning: (title, options) => upsert(title, 'warning', options),
+    error: (title, options) => upsert(title, 'error', options),
+    loading: (title, options) => upsert(title, 'loading', { duration: Infinity, ...options }),
+    promise(promise, messages, options = {}) {
+        const id = upsert(messages.loading, 'loading', {
+            description: messages.description,
+            ...options,
+            duration: Infinity,
+        });
+        const settle = (status, title) => {
+            // A toast closed while it waited stays closed.
+            if (!entries.some((entry) => entry.id === id && !entry.dismissed))
+                return;
+            upsert(title, status, { ...options, id, description: options.description });
+        };
+        Promise.resolve()
+            .then(() => (typeof promise === 'function' ? promise() : promise))
+            .then((value) => settle('success', resolveMessage(messages.success, value)), (error) => settle('error', resolveMessage(messages.error, error)));
+        return id;
+    },
+    dismiss: (id) => close(id, 'dismiss'),
+});
+// Below these, a released swipe springs back.
+const swipeDistance = 45;
+const swipeVelocity = 0.11;
+// How long a closed toast plays its exit before it leaves the DOM.
+const exitDuration = 200;
+const interactive = 'button, a, input, select, textarea, [contenteditable]';
+/**
+ * Shows the toasts raised with `toast()`. Place one in the app, outside
+ * anything that scrolls. The newest toast sits in front with up to two
+ * peeking behind it, on QueuedStack's stacking values; pointing at or
+ * focusing the stack spreads it out and pauses the timers. A swipe toward
+ * the nearest edge, Escape, or the close button dismisses a toast, and the
+ * hotkey moves focus to the newest one.
+ */
+export function Toaster(handle) {
+    let list = null;
+    let hovered = false;
+    let focused = false;
+    let swipe;
+    let returnFocus = null;
+    const timers = new Map();
+    const leaving = new Map();
+    let resizeObserver;
+    const position = () => handle.props.position ?? 'bottom-right';
+    const expanded = () => Boolean(handle.props.expand) || hovered || focused;
+    const paused = () => hovered || focused || Boolean(swipe) || document.visibilityState === 'hidden';
+    const sync = () => void handle.update();
+    listeners.add(sync);
+    // Keeps each toast's close timer running, paused or cleared to match.
+    function schedule() {
+        const now = performance.now();
+        const live = new Set();
+        for (const entry of entries) {
+            if (entry.dismissed)
+                continue;
+            const duration = entry.duration ?? handle.props.duration ?? 4000;
+            if (entry.status === 'loading' || !Number.isFinite(duration))
+                continue;
+            live.add(entry.id);
+            let timer = timers.get(entry.id);
+            if (!timer || timer.version !== entry.version) {
+                if (timer)
+                    clearTimeout(timer.timeout);
+                timer = { version: entry.version, remaining: Math.max(0, duration), started: now };
+                timers.set(entry.id, timer);
+            }
+            if (paused()) {
+                if (timer.timeout !== undefined) {
+                    clearTimeout(timer.timeout);
+                    timer.timeout = undefined;
+                    timer.remaining -= now - timer.started;
+                }
+            }
+            else if (timer.timeout === undefined) {
+                timer.started = now;
+                timer.timeout = setTimeout(() => {
+                    timers.delete(entry.id);
+                    close(entry.id, 'auto');
+                }, timer.remaining);
+            }
+        }
+        for (const [id, timer] of timers) {
+            if (live.has(id))
+                continue;
+            clearTimeout(timer.timeout);
+            timers.delete(id);
+        }
+    }
+    // Hands focus on before a focused toast leaves.
+    function handOff(item) {
+        if (!item.contains(document.activeElement))
+            return;
+        const next = list?.querySelector(':scope > .rf-toast:not([data-removed], [data-hidden])');
+        if (next && next !== item)
+            next.focus({ preventScroll: true });
+        else if (returnFocus?.isConnected)
+            returnFocus.focus({ preventScroll: true });
+        else
+            item.blur();
+    }
+    // Writes the stack's measurements: each toast's depth, its own height and
+    // its offset once spread out, and the height of the toast in front.
+    function layout() {
+        if (!list)
+            return;
+        const items = Array.from(list.querySelectorAll(':scope > .rf-toast:not([data-removed])'));
+        const style = getComputedStyle(list);
+        const gap = parseFloat(style.getPropertyValue('--rf-stack-gap')) || 5;
+        const peek = parseFloat(style.getPropertyValue('--rf-stack-peek')) || 6;
+        const visible = Math.max(1, handle.props.visibleToasts ?? 3);
+        let offset = 0;
+        let spread = 0;
+        for (const [depth, item] of items.entries()) {
+            const height = item.querySelector('.rf-toast-inner')?.offsetHeight ?? 0;
+            item.style.setProperty('--rf-toast-depth', String(depth));
+            item.style.setProperty('--rf-toast-height', `${height}px`);
+            item.style.setProperty('--rf-toast-offset', `${offset}px`);
+            item.toggleAttribute('data-front', depth === 0);
+            item.toggleAttribute('data-hidden', depth >= visible);
+            if (depth < visible)
+                spread = offset + height;
+            offset += height + gap;
+        }
+        const front = items[0]?.querySelector('.rf-toast-inner')?.offsetHeight ?? 0;
+        const shown = Math.min(items.length, visible);
+        const edge = handle.props.offset;
+        if (edge === undefined)
+            list.style.removeProperty('--rf-toaster-offset');
+        else
+            list.style.setProperty('--rf-toaster-offset', `${edge}px`);
+        list.style.setProperty('--rf-toast-front-height', `${front}px`);
+        list.style.setProperty('--rf-toaster-piled-height', `${front + Math.max(0, shown - 1) * peek}px`);
+        list.style.setProperty('--rf-toaster-spread-height', `${spread}px`);
+    }
+    function afterRender() {
+        if (!list)
+            return;
+        for (const item of list.querySelectorAll(':scope > .rf-toast')) {
+            const inner = item.querySelector('.rf-toast-inner');
+            if (inner)
+                resizeObserver?.observe(inner);
+            const id = item.dataset.toastId;
+            if (item.hasAttribute('data-removed') && !leaving.has(id)) {
+                handOff(item);
+                leaving.set(id, setTimeout(() => {
+                    leaving.delete(id);
+                    remove(id);
+                }, exitDuration));
+            }
+        }
+        layout();
+        schedule();
+    }
+    function endSwipe(event, item) {
+        if (!swipe || swipe.pointer !== event.pointerId)
+            return;
+        const current = swipe;
+        swipe = undefined;
+        item.removeAttribute('data-swiping');
+        const [y, x] = position().split('-');
+        const signY = y === 'bottom' ? 1 : -1;
+        const signX = x === 'right' ? 1 : x === 'left' ? -1 : 0;
+        const travel = current.axis === 'x' ? current.dx * signX : current.axis === 'y' ? current.dy * signY : 0;
+        const elapsed = Math.max(1, performance.now() - current.time);
+        const entry = entries.find((item) => item.id === current.id);
+        if (entry && travel > 0 && (travel >= swipeDistance || travel / elapsed > swipeVelocity)) {
+            // Carry on in the swipe's direction as it leaves.
+            const width = item.offsetWidth;
+            const height = item.offsetHeight;
+            item.dataset.swipeOut = current.axis;
+            if (current.axis === 'x')
+                item.style.setProperty('--rf-swipe-x', `${signX * width}px`);
+            else
+                item.style.setProperty('--rf-swipe-y', `${signY * height}px`);
+            close(entry.id, 'dismiss');
+        }
+        else {
+            item.style.setProperty('--rf-swipe-x', '0px');
+            item.style.setProperty('--rf-swipe-y', '0px');
+            void handle.update();
+        }
+    }
+    const listMix = ref((element, signal) => {
+        if (!(element instanceof HTMLOListElement))
+            return;
+        list = element;
+        const options = { signal };
+        resizeObserver = new ResizeObserver(() => layout());
+        element.addEventListener('pointerenter', (event) => {
+            if (event.pointerType === 'touch')
+                return;
+            hovered = true;
+            void handle.update();
+        }, options);
+        element.addEventListener('pointerleave', () => {
+            if (!hovered)
+                return;
+            hovered = false;
+            void handle.update();
+        }, options);
+        element.addEventListener('focusin', (event) => {
+            const from = event.relatedTarget;
+            if (from instanceof HTMLElement && !element.contains(from))
+                returnFocus = from;
+            if (focused)
+                return;
+            focused = true;
+            void handle.update();
+        }, options);
+        element.addEventListener('focusout', (event) => {
+            const next = event.relatedTarget;
+            if (next instanceof Node && element.contains(next))
+                return;
+            // A toast that leaves with focus inside hands it on in the same frame.
+            queueMicrotask(() => {
+                if (element.contains(document.activeElement))
+                    return;
+                focused = false;
+                void handle.update();
+            });
+        }, options);
+        element.ownerDocument.addEventListener('keydown', (event) => {
+            if (!matchesShortcut(event, parseShortcut(handle.props.hotkey ?? 'alt+t')))
+                return;
+            const front = element.querySelector(':scope > .rf-toast:not([data-removed])');
+            if (!front)
+                return;
+            event.preventDefault();
+            const active = document.activeElement;
+            if (active instanceof HTMLElement && !element.contains(active))
+                returnFocus = active;
+            front.focus();
+        }, options);
+        element.ownerDocument.addEventListener('visibilitychange', () => schedule(), options);
+        signal.addEventListener('abort', () => {
+            resizeObserver?.disconnect();
+            if (list === element)
+                list = null;
+        }, { once: true });
+    });
+    handle.signal.addEventListener('abort', () => {
+        listeners.delete(sync);
+        // With no Toaster left to play their exit, closed toasts leave now.
+        if (!listeners.size)
+            entries = entries.filter((entry) => !entry.dismissed);
+        for (const timer of timers.values())
+            clearTimeout(timer.timeout);
+        for (const timeout of leaving.values())
+            clearTimeout(timeout);
+    }, { once: true });
+    function renderToast(entry) {
+        const dismissible = entry.dismissible ?? true;
+        const icon = entry.icon ??
+            (entry.status === 'loading' ? (_jsx("svg", { class: "rf-toast-spinner", viewBox: "0 0 16 16", fill: "none", children: _jsx("g", { children: _jsx("circle", { cx: "8", cy: "8", r: "6.25", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", pathLength: "100", transform: "rotate(-90 8 8)" }) }) })) : entry.status === 'default' ? undefined : (statusIcon(entry.status)));
+        return (_jsx("li", { class: "rf-toast", tabIndex: 0, "data-toast-id": entry.id, "data-status": entry.status, "data-removed": entry.dismissed || undefined, "data-dismissible": dismissible ? undefined : 'false', "aria-atomic": "true", mix: [
+                on('keydown', (event) => {
+                    if (event.key !== 'Escape' || !dismissible || entry.dismissed)
+                        return;
+                    event.preventDefault();
+                    event.stopPropagation();
+                    close(entry.id, 'dismiss');
+                }),
+                on('pointerdown', (event) => {
+                    if (!dismissible || entry.dismissed || event.button !== 0)
+                        return;
+                    if (event.target instanceof Element && event.target.closest(interactive))
+                        return;
+                    swipe = {
+                        id: entry.id,
+                        pointer: event.pointerId,
+                        x: event.clientX,
+                        y: event.clientY,
+                        time: performance.now(),
+                        dx: 0,
+                        dy: 0,
+                    };
+                    try {
+                        event.currentTarget.setPointerCapture(event.pointerId);
+                    }
+                    catch {
+                        // Synthetic pointers have nothing to capture.
+                    }
+                    void handle.update();
+                }),
+                on('pointermove', (event) => {
+                    if (!swipe || swipe.pointer !== event.pointerId || swipe.id !== entry.id)
+                        return;
+                    const item = event.currentTarget;
+                    const dx = event.clientX - swipe.x;
+                    const dy = event.clientY - swipe.y;
+                    if (!swipe.axis) {
+                        if (Math.max(Math.abs(dx), Math.abs(dy)) < 2)
+                            return;
+                        swipe.axis = Math.abs(dx) > Math.abs(dy) ? 'x' : 'y';
+                        item.setAttribute('data-swiping', '');
+                    }
+                    const [y, x] = position().split('-');
+                    const toward = swipe.axis === 'x'
+                        ? x === 'right'
+                            ? 1
+                            : x === 'left'
+                                ? -1
+                                : 0
+                        : y === 'bottom'
+                            ? 1
+                            : -1;
+                    const delta = swipe.axis === 'x' ? dx : dy;
+                    // Toward the edge it follows the pointer; away from it, it resists.
+                    const moved = Math.sign(delta) === toward ? delta : delta / (1 + Math.abs(delta) / 24);
+                    swipe.dx = swipe.axis === 'x' ? moved : 0;
+                    swipe.dy = swipe.axis === 'y' ? moved : 0;
+                    item.style.setProperty('--rf-swipe-x', `${Math.round(swipe.dx)}px`);
+                    item.style.setProperty('--rf-swipe-y', `${Math.round(swipe.dy)}px`);
+                }),
+                on('pointerup', (event) => endSwipe(event, event.currentTarget)),
+                on('pointercancel', (event) => endSwipe(event, event.currentTarget)),
+            ], children: _jsxs("div", { class: "rf-toast-inner", children: [icon && (_jsx("span", { class: "rf-toast-icon", "aria-hidden": "true", children: icon })), _jsxs("div", { class: "rf-toast-content", children: [_jsx("div", { class: "rf-toast-title", children: entry.title }), entry.description && _jsx("div", { class: "rf-toast-description", children: entry.description })] }), entry.action && (_jsx(Button, { variant: "secondary", size: "compact", class: "rf-toast-action", mix: on('click', (event) => {
+                            entry.action?.onClick(event);
+                            if (!event.defaultPrevented)
+                                close(entry.id, 'dismiss');
+                        }), children: entry.action.label })), handle.props.closeButton && dismissible && (_jsx("button", { type: "button", class: "rf-toast-close", "aria-label": "Close", mix: on('click', () => close(entry.id, 'dismiss')), children: _jsx(Icon, { name: "x" }) }))] }) }, entry.id));
+    }
+    return () => {
+        handle.queueTask(afterRender);
+        const { label = 'Notifications', size, hotkey = 'alt+t' } = handle.props;
+        return (_jsx("section", { class: handle.props.class ? `rf-toaster-region ${handle.props.class}` : 'rf-toaster-region', "aria-label": label, "aria-keyshortcuts": ariaShortcut(hotkey), "aria-live": "polite", "aria-relevant": "additions text", "aria-atomic": "false", tabIndex: -1, "data-density": size, children: _jsx("ol", { class: "rf-toaster", "data-position": position(), "data-expanded": expanded() || undefined, mix: listMix, children: entries.map(renderToast) }) }));
+    };
+}
+// alt+t reads as Alt+T, the form aria-keyshortcuts expects.
+function ariaShortcut(hotkey) {
+    return hotkey
+        .split('+')
+        .map((part) => {
+        const lower = part.trim().toLowerCase();
+        if (lower === 'mod' || lower === 'ctrl' || lower === 'control')
+            return 'Control';
+        if (lower === 'cmd' || lower === 'meta')
+            return 'Meta';
+        if (lower === 'option' || lower === 'opt')
+            return 'Alt';
+        return lower.length === 1
+            ? lower.toUpperCase()
+            : lower.charAt(0).toUpperCase() + lower.slice(1);
+    })
+        .join('+');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rtzll/reflow",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "type": "module",
   "files": [
     "dist",