@monetr/notify 1.0.0

package/dist/notification.js

@@ -0,0 +1,343 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { DRAG_DAMPEN_MAX, DRAG_DISMISS_DISTANCE, DRAG_VELOCITY_THRESHOLD, DRAG_VELOCITY_WINDOW_MS, EXIT_TRANSITION_MS, SWIPE_EXIT_MS } from "./constants.js";
+import { dampenValue } from "./helpers.js";
+const initialDrag = {
+    startX: 0,
+    startY: 0,
+    currentX: 0,
+    currentY: 0,
+    dragging: false,
+    sampleAt: 0,
+    sampleX: 0,
+    sampleY: 0
+};
+function isDismissAllowed(anchor, axis, sign) {
+    if ('y' === axis) return sign === ('top' === anchor.vertical ? -1 : 1);
+    if ('left' === anchor.horizontal) return -1 === sign;
+    if ('right' === anchor.horizontal) return 1 === sign;
+    return true;
+}
+const PIP_VARIANTS = [
+    'success',
+    'error',
+    'warning',
+    'info'
+];
+function Notification(props) {
+    const { instance, index, stackHovered, iconNode, dispatch } = props;
+    const { key, anchorOrigin, autoHideDuration, disableWindowBlurListener, action, variant, message, state, swipeDirection } = instance;
+    const elementRef = useRef(null);
+    const dragRef = useRef({
+        ...initialDrag
+    });
+    const elapsedRef = useRef(0);
+    const lastResumeRef = useRef(null);
+    const swipeAxisRef = useRef(null);
+    const onCloseRef = useRef(instance.onClose);
+    useEffect(()=>{
+        onCloseRef.current = instance.onClose;
+    });
+    const [dragOffset, setDragOffset] = useState({
+        x: 0,
+        y: 0
+    });
+    const [windowBlurred, setWindowBlurred] = useState(false);
+    useEffect(()=>{
+        if ('entering' !== state) return;
+        let raf2 = 0;
+        const raf1 = requestAnimationFrame(()=>{
+            raf2 = requestAnimationFrame(()=>{
+                dispatch({
+                    type: 'set-state',
+                    key,
+                    state: 'visible'
+                });
+            });
+        });
+        return ()=>{
+            cancelAnimationFrame(raf1);
+            cancelAnimationFrame(raf2);
+        };
+    }, [
+        state,
+        key,
+        dispatch
+    ]);
+    useEffect(()=>{
+        if (disableWindowBlurListener) return;
+        const onBlur = ()=>setWindowBlurred(true);
+        const onFocus = ()=>setWindowBlurred(false);
+        window.addEventListener('blur', onBlur);
+        window.addEventListener('focus', onFocus);
+        return ()=>{
+            window.removeEventListener('blur', onBlur);
+            window.removeEventListener('focus', onFocus);
+        };
+    }, [
+        disableWindowBlurListener
+    ]);
+    const effectivelyPaused = 'paused' === state || stackHovered || windowBlurred;
+    useEffect(()=>{
+        if ('visible' !== state || null === autoHideDuration || effectivelyPaused) {
+            if (null !== lastResumeRef.current) {
+                elapsedRef.current += Date.now() - lastResumeRef.current;
+                lastResumeRef.current = null;
+            }
+            return;
+        }
+        lastResumeRef.current = Date.now();
+        const remaining = Math.max(0, autoHideDuration - elapsedRef.current);
+        const timeoutId = window.setTimeout(()=>{
+            onCloseRef.current?.(null, 'timeout', key);
+            dispatch({
+                type: 'dismiss',
+                key
+            });
+        }, remaining);
+        return ()=>{
+            window.clearTimeout(timeoutId);
+            if (null !== lastResumeRef.current) {
+                elapsedRef.current += Date.now() - lastResumeRef.current;
+                lastResumeRef.current = null;
+            }
+        };
+    }, [
+        state,
+        autoHideDuration,
+        effectivelyPaused,
+        key,
+        dispatch
+    ]);
+    useEffect(()=>{
+        if ('visible' !== state || null === autoHideDuration || effectivelyPaused) return;
+        let raf = 0;
+        const tick = ()=>{
+            const el = elementRef.current;
+            if (!el) return;
+            const live = null !== lastResumeRef.current ? Date.now() - lastResumeRef.current : 0;
+            const total = elapsedRef.current + live;
+            const progress = Math.min(1, total / autoHideDuration);
+            el.style.setProperty('--monetr-notification-progress', String(progress));
+            if (progress < 1 && null !== lastResumeRef.current) raf = requestAnimationFrame(tick);
+        };
+        raf = requestAnimationFrame(tick);
+        return ()=>cancelAnimationFrame(raf);
+    }, [
+        state,
+        autoHideDuration,
+        effectivelyPaused
+    ]);
+    useEffect(()=>{
+        if ('exiting' !== state && 'swiped-out' !== state) return;
+        const fallback = window.setTimeout(()=>dispatch({
+                type: 'remove',
+                key
+            }), 'swiped-out' === state ? SWIPE_EXIT_MS + 100 : EXIT_TRANSITION_MS + 100);
+        return ()=>window.clearTimeout(fallback);
+    }, [
+        state,
+        key,
+        dispatch
+    ]);
+    const handlePointerDown = useCallback((event)=>{
+        if (0 !== index) return;
+        if ('visible' !== state && 'entering' !== state && 'paused' !== state) return;
+        const target = event.target;
+        if (target?.closest('button, a, input, textarea, select, [role="button"]')) return;
+        const now = performance.now();
+        dragRef.current = {
+            startX: event.clientX,
+            startY: event.clientY,
+            currentX: event.clientX,
+            currentY: event.clientY,
+            dragging: true,
+            sampleAt: now,
+            sampleX: event.clientX,
+            sampleY: event.clientY
+        };
+        try {
+            event.currentTarget.setPointerCapture(event.pointerId);
+        } catch  {}
+    }, [
+        index,
+        state
+    ]);
+    const handlePointerMove = useCallback((event)=>{
+        const drag = dragRef.current;
+        if (!drag.dragging) return;
+        drag.currentX = event.clientX;
+        drag.currentY = event.clientY;
+        const now = performance.now();
+        if (now - drag.sampleAt > DRAG_VELOCITY_WINDOW_MS) {
+            drag.sampleAt = now;
+            drag.sampleX = event.clientX;
+            drag.sampleY = event.clientY;
+        }
+        const dx = event.clientX - drag.startX;
+        const dy = event.clientY - drag.startY;
+        const ax = Math.abs(dx);
+        const ay = Math.abs(dy);
+        if (ax >= ay) {
+            const sign = Math.sign(dx) || 1;
+            if (isDismissAllowed(anchorOrigin, 'x', sign)) setDragOffset({
+                x: dx,
+                y: 0
+            });
+            else {
+                const damp = Math.min(DRAG_DAMPEN_MAX, Math.max(0, dampenValue(ax)));
+                setDragOffset({
+                    x: damp * sign,
+                    y: 0
+                });
+            }
+        } else {
+            const sign = Math.sign(dy) || 1;
+            if (isDismissAllowed(anchorOrigin, 'y', sign)) setDragOffset({
+                x: 0,
+                y: dy
+            });
+            else {
+                const damp = Math.min(DRAG_DAMPEN_MAX, Math.max(0, dampenValue(ay)));
+                setDragOffset({
+                    x: 0,
+                    y: damp * sign
+                });
+            }
+        }
+    }, [
+        anchorOrigin
+    ]);
+    const handlePointerUp = useCallback(()=>{
+        const drag = dragRef.current;
+        if (!drag.dragging) return;
+        drag.dragging = false;
+        const dx = drag.currentX - drag.startX;
+        const dy = drag.currentY - drag.startY;
+        const ax = Math.abs(dx);
+        const ay = Math.abs(dy);
+        const elapsed = Math.max(1, performance.now() - drag.sampleAt);
+        const vx = Math.abs(drag.currentX - drag.sampleX) / elapsed;
+        const vy = Math.abs(drag.currentY - drag.sampleY) / elapsed;
+        const checkAxis = (axis, delta, vel)=>{
+            const sign = Math.sign(delta) || 1;
+            if (!isDismissAllowed(anchorOrigin, axis, sign)) return null;
+            if (Math.abs(delta) >= DRAG_DISMISS_DISTANCE || vel >= DRAG_VELOCITY_THRESHOLD) return {
+                axis,
+                direction: sign
+            };
+            return null;
+        };
+        const outcome = ax >= ay ? checkAxis('x', dx, vx) ?? checkAxis('y', dy, vy) : checkAxis('y', dy, vy) ?? checkAxis('x', dx, vx);
+        if (outcome) {
+            swipeAxisRef.current = outcome.axis;
+            onCloseRef.current?.(null, 'swipe', key);
+            dispatch({
+                type: 'swipe',
+                key,
+                direction: outcome.direction
+            });
+            return;
+        }
+        setDragOffset({
+            x: 0,
+            y: 0
+        });
+    }, [
+        anchorOrigin,
+        key,
+        dispatch
+    ]);
+    const handlePointerCancel = useCallback(()=>{
+        dragRef.current.dragging = false;
+        setDragOffset({
+            x: 0,
+            y: 0
+        });
+    }, []);
+    const handleDismiss = useCallback((event)=>{
+        event.stopPropagation();
+        onCloseRef.current?.(event, 'instructed', key);
+        dispatch({
+            type: 'dismiss',
+            key
+        });
+    }, [
+        key,
+        dispatch
+    ]);
+    const handleAction = useCallback((event)=>{
+        event.stopPropagation();
+        onCloseRef.current?.(event, 'instructed', key);
+        dispatch({
+            type: 'dismiss',
+            key
+        });
+    }, [
+        key,
+        dispatch
+    ]);
+    const renderedAction = null == action ? null : 'function' == typeof action ? action(key) : action;
+    const cssVars = {
+        '--monetr-stack-index': String(index),
+        '--monetr-drag-x': `${dragOffset.x}px`,
+        '--monetr-drag-y': `${dragOffset.y}px`
+    };
+    const showPip = !iconNode && PIP_VARIANTS.includes(variant);
+    return /*#__PURE__*/ jsxs("li", {
+        "aria-atomic": "true",
+        "aria-live": 'error' === variant || 'warning' === variant ? 'assertive' : 'polite',
+        "data-dragging": dragRef.current.dragging ? 'true' : 'false',
+        "data-monetr-notification": "",
+        "data-monetr-notification-anchor": `${anchorOrigin.vertical}-${anchorOrigin.horizontal}`,
+        "data-monetr-notification-variant": variant,
+        "data-stack-hovered-self": stackHovered ? 'true' : 'false',
+        "data-stack-index": index,
+        "data-state": state,
+        "data-swipe-axis": swipeAxisRef.current ?? void 0,
+        "data-swipe-direction": 0 !== swipeDirection ? String(swipeDirection) : void 0,
+        onPointerCancel: handlePointerCancel,
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerUp: handlePointerUp,
+        ref: elementRef,
+        role: 'error' === variant || 'warning' === variant ? 'alert' : 'status',
+        style: cssVars,
+        children: [
+            iconNode ? /*#__PURE__*/ jsx("span", {
+                "data-monetr-notification-icon-slot": "",
+                children: iconNode
+            }) : null,
+            showPip ? /*#__PURE__*/ jsx("span", {
+                "aria-hidden": "true",
+                "data-monetr-notification-pip": ""
+            }) : null,
+            /*#__PURE__*/ jsx("span", {
+                "data-monetr-notification-message": "",
+                children: message
+            }),
+            renderedAction ? /*#__PURE__*/ jsx("button", {
+                "data-monetr-notification-action": "",
+                onClick: handleAction,
+                type: "button",
+                children: renderedAction
+            }) : null,
+            /*#__PURE__*/ jsx("button", {
+                "aria-label": "Dismiss",
+                "data-monetr-notification-dismiss": "",
+                "data-testid": 0 === index ? 'notification-dismiss' : void 0,
+                onClick: handleDismiss,
+                type: "button",
+                children: "\xd7"
+            }),
+            null !== autoHideDuration ? /*#__PURE__*/ jsx("div", {
+                "aria-hidden": "true",
+                "data-monetr-notification-progress-track": "",
+                children: /*#__PURE__*/ jsx("div", {
+                    "data-monetr-notification-progress-bar-fill": ""
+                })
+            }) : null
+        ]
+    });
+}
+export { Notification };

package/dist/notifier.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from 'react';
+import type { AnchorOrigin, NotifierAction, SnackbarItem, VariantType } from './types';
+interface NotifierProps {
+    anchor: AnchorOrigin;
+    instances: SnackbarItem[];
+    iconVariant?: Partial<Record<VariantType, ReactNode>>;
+    dispatch: (action: NotifierAction) => void;
+}
+export declare function Notifier(props: NotifierProps): JSX.Element;
+export {};

package/dist/notifier.js

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Notification } from "./notification.js";
+function Notifier(props) {
+    const { anchor, instances, iconVariant, dispatch } = props;
+    const [hovered, setHovered] = useState(false);
+    return /*#__PURE__*/ jsx("ol", {
+        "data-monetr-notifier-stack": "",
+        "data-stack-anchor": `${anchor.vertical}-${anchor.horizontal}`,
+        "data-stack-empty": 0 === instances.length ? 'true' : 'false',
+        "data-stack-hovered": hovered ? 'true' : 'false',
+        onPointerEnter: ()=>setHovered(true),
+        onPointerLeave: ()=>setHovered(false),
+        style: {
+            listStyle: 'none',
+            padding: 0,
+            margin: 0
+        },
+        children: instances.map((inst, index)=>/*#__PURE__*/ jsx(Notification, {
+                dispatch: dispatch,
+                iconNode: iconVariant?.[inst.variant],
+                index: index,
+                instance: inst,
+                stackHovered: hovered
+            }, inst.key))
+    });
+}
+export { Notifier };

package/dist/provider.d.ts

@@ -0,0 +1,2 @@
+import type { SnackbarProviderProps } from './types';
+export declare function SnackbarProvider(props: SnackbarProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/provider.js

@@ -0,0 +1,122 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Suspense, lazy, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { SnackbarContext } from "./context.js";
+import { findOverflowKeys, initialQueue, isLiveState, makeInstance, providerDefaults, queueReducer } from "./use-queue.js";
+const LazyNotifierRoot = /*#__PURE__*/ lazy(()=>import("./renderer.js"));
+function SnackbarProvider(props) {
+    const { children, prefetch = 'idle', iconVariant, container, anchorOrigin, autoHideDuration, maxSnack } = props;
+    const defaults = useMemo(()=>providerDefaults({
+            anchorOrigin,
+            autoHideDuration,
+            maxSnack
+        }), [
+        anchorOrigin?.vertical,
+        anchorOrigin?.horizontal,
+        anchorOrigin,
+        autoHideDuration,
+        maxSnack
+    ]);
+    const queueRef = useRef(initialQueue);
+    const [, setVersion] = useState(0);
+    const dispatch = useCallback((action)=>{
+        queueRef.current = queueReducer(queueRef.current, action);
+        setVersion((v)=>v + 1);
+    }, []);
+    const prefetchedRef = useRef(false);
+    const [active, setActiveState] = useState(false);
+    const activeRef = useRef(false);
+    const setActive = useCallback(()=>{
+        if (!activeRef.current) {
+            activeRef.current = true;
+            setActiveState(true);
+        }
+    }, []);
+    const enqueueSnackbar = useCallback((message, options)=>{
+        if (options?.key !== void 0) {
+            const existing = queueRef.current.find((i)=>i.key === options.key);
+            if (existing) return existing.key;
+        }
+        const item = makeInstance(message, options, defaults);
+        const dropKeys = findOverflowKeys(queueRef.current, item, defaults.maxSnack);
+        for (const key of dropKeys){
+            const dropped = queueRef.current.find((i)=>i.key === key);
+            dropped?.onClose?.(null, 'maxsnack', key);
+        }
+        dispatch({
+            type: 'enqueue',
+            item,
+            dropKeys
+        });
+        setActive();
+        return item.key;
+    }, [
+        defaults,
+        setActive,
+        dispatch
+    ]);
+    const closeSnackbar = useCallback((key)=>{
+        if (void 0 === key) {
+            for (const item of queueRef.current)if (isLiveState(item.state)) item.onClose?.(null, 'instructed', item.key);
+            dispatch({
+                type: 'close-all'
+            });
+            return;
+        }
+        const item = queueRef.current.find((i)=>i.key === key);
+        if (item && isLiveState(item.state)) item.onClose?.(null, 'instructed', key);
+        dispatch({
+            type: 'dismiss',
+            key
+        });
+    }, [
+        dispatch
+    ]);
+    const api = useMemo(()=>({
+            enqueueSnackbar,
+            closeSnackbar
+        }), [
+        enqueueSnackbar,
+        closeSnackbar
+    ]);
+    useEffect(()=>{
+        if ('never' === prefetch || "u" < typeof window || prefetchedRef.current) return;
+        const run = ()=>{
+            prefetchedRef.current = true;
+            import("./renderer.js");
+        };
+        if ('mount' === prefetch) return void run();
+        const w = window;
+        const ric = w.requestIdleCallback;
+        const cic = w.cancelIdleCallback;
+        if (ric) {
+            const id = ric(run);
+            return ()=>{
+                if (cic) cic(id);
+            };
+        }
+        const id = window.setTimeout(run, 200);
+        return ()=>window.clearTimeout(id);
+    }, [
+        prefetch
+    ]);
+    const rendererDispatch = useCallback((a)=>dispatch(a), [
+        dispatch
+    ]);
+    return /*#__PURE__*/ jsxs(SnackbarContext.Provider, {
+        value: api,
+        children: [
+            children,
+            active ? /*#__PURE__*/ jsx(Suspense, {
+                fallback: null,
+                children: /*#__PURE__*/ jsx(LazyNotifierRoot, {
+                    container: container,
+                    dispatch: rendererDispatch,
+                    iconVariant: iconVariant,
+                    maxSnack: defaults.maxSnack,
+                    queue: queueRef.current
+                })
+            }) : null
+        ]
+    });
+}
+export { SnackbarProvider };

package/dist/renderer.d.ts

@@ -0,0 +1,4 @@
+import type { NotifierRootProps } from './types';
+import './style.css';
+declare function NotifierRoot(props: NotifierRootProps): JSX.Element | null;
+export default NotifierRoot;

package/dist/renderer.js

@@ -0,0 +1,72 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { createPortal } from "react-dom";
+import { Notifier } from "./notifier.js";
+import { anchorKey } from "./use-queue.js";
+import "./style.css";
+const ALL_ANCHORS = [
+    {
+        vertical: 'top',
+        horizontal: 'left'
+    },
+    {
+        vertical: 'top',
+        horizontal: 'center'
+    },
+    {
+        vertical: 'top',
+        horizontal: 'right'
+    },
+    {
+        vertical: 'bottom',
+        horizontal: 'left'
+    },
+    {
+        vertical: 'bottom',
+        horizontal: 'center'
+    },
+    {
+        vertical: 'bottom',
+        horizontal: 'right'
+    }
+];
+function NotifierRoot(props) {
+    const { queue, dispatch, iconVariant, container } = props;
+    const [target, setTarget] = useState(null);
+    useEffect(()=>{
+        if (container) setTarget(container);
+        else if ("u" > typeof document) setTarget(document.body);
+    }, [
+        container
+    ]);
+    const grouped = useMemo(()=>{
+        const map = new Map();
+        for (const item of queue){
+            const k = anchorKey(item.anchorOrigin);
+            const list = map.get(k);
+            if (list) list.push(item);
+            else map.set(k, [
+                item
+            ]);
+        }
+        return map;
+    }, [
+        queue
+    ]);
+    if (!target) return null;
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: ALL_ANCHORS.map((anchor)=>{
+            const k = anchorKey(anchor);
+            const items = grouped.get(k) ?? [];
+            if (0 === items.length) return null;
+            return /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx(Notifier, {
+                anchor: anchor,
+                dispatch: dispatch,
+                iconVariant: iconVariant,
+                instances: items
+            }), target, k);
+        })
+    });
+}
+const renderer = NotifierRoot;
+export default renderer;