@hanzogui/toast 8.3.0 → 8.3.2

package/dist/cjs/ToastProvider.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useToastProviderContext = exports.useCollection = exports.ToastProvider = exports.Collection = void 0;
+exports.ReprogapateToastProvider = ReprogapateToastProvider;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const collection_1 = require("@hanzogui/collection");
+const core_1 = require("@hanzogui/core");
+const start_transition_1 = require("@hanzogui/start-transition");
+const React = tslib_1.__importStar(require("react"));
+const constants_ts_1 = require("./constants.js");
+const ToastImperative_tsx_1 = require("./ToastImperative.js");
+/* -------------------------------------------------------------------------------------------------
+ * ToastProvider
+ * -----------------------------------------------------------------------------------------------*/
+const PROVIDER_NAME = 'ToastProvider';
+const [Collection, useCollection] = (0, collection_1.createCollection)('Toast');
+exports.Collection = Collection;
+exports.useCollection = useCollection;
+const { Provider: ToastProviderProvider, useStyledContext: useToastProviderContext } = (0, core_1.createStyledContext)(
+// since we always provide this we can avoid setting here
+{}, 'Toast__');
+exports.useToastProviderContext = useToastProviderContext;
+const ToastProvider = (props) => {
+    const { scope = constants_ts_1.TOAST_CONTEXT, id: providedId, burntOptions, native, notificationOptions, label = 'Notification', duration = 5000, swipeDirection = 'right', swipeThreshold = 50, children, } = props;
+    const backupId = React.useId();
+    const id = providedId ?? backupId;
+    const [viewports, setViewports] = React.useState({});
+    const [toastCount, setToastCount] = React.useState(0);
+    const isFocusedToastEscapeKeyDownRef = React.useRef(false);
+    const isClosePausedRef = React.useRef(false);
+    const handleViewportChange = React.useCallback((name, viewport) => {
+        (0, start_transition_1.startTransition)(() => {
+            setViewports((prev) => ({ ...prev, [name]: viewport }));
+        });
+    }, []);
+    // memo context to avoid expensive re-renders
+    const options = React.useMemo(() => {
+        return {
+            duration,
+            burntOptions,
+            native,
+            notificationOptions,
+        };
+        // nested simple object so JSON.stringify
+    }, [JSON.stringify([duration, burntOptions, native, notificationOptions])]);
+    return ((0, jsx_runtime_1.jsx)(Collection.Provider, { scope: scope, children: (0, jsx_runtime_1.jsx)(ToastProviderProvider, { scope: scope, id: id, label: label, duration: duration, swipeDirection: swipeDirection, swipeThreshold: swipeThreshold, toastCount: toastCount, viewports: viewports, onViewportChange: handleViewportChange, onToastAdd: React.useCallback(() => {
+                (0, start_transition_1.startTransition)(() => {
+                    setToastCount((prevCount) => prevCount + 1);
+                });
+            }, []), onToastRemove: React.useCallback(() => {
+                (0, start_transition_1.startTransition)(() => {
+                    setToastCount((prevCount) => prevCount - 1);
+                });
+            }, []), isFocusedToastEscapeKeyDownRef: isFocusedToastEscapeKeyDownRef, isClosePausedRef: isClosePausedRef, options: options, children: (0, jsx_runtime_1.jsx)(ToastImperative_tsx_1.ToastImperativeProvider, { options: options, children: children }) }) }));
+};
+exports.ToastProvider = ToastProvider;
+function ReprogapateToastProvider(props) {
+    const { children, context } = props;
+    return ((0, jsx_runtime_1.jsx)(Collection.Provider, { scope: context.toastScope, children: (0, jsx_runtime_1.jsx)(ToastProviderProvider, { ...context, children: (0, jsx_runtime_1.jsx)(ToastImperative_tsx_1.ToastImperativeProvider, { options: context.options, children: children }) }) }));
+}
+ToastProvider.propTypes = {
+    label(props) {
+        if (props.label && typeof props.label === 'string' && !props.label.trim()) {
+            const error = `Invalid prop \`label\` supplied to \`${PROVIDER_NAME}\`. Expected non-empty \`string\`.`;
+            return new Error(error);
+        }
+        return null;
+    },
+};
+ToastProvider.displayName = PROVIDER_NAME;
+//# sourceMappingURL=ToastProvider.js.map

package/dist/cjs/ToastProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastProvider.js","sourceRoot":"","sources":["../../src/ToastProvider.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/ToastState.js

@@ -0,0 +1,284 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toast = exports.ToastState = void 0;
+// counter for generating unique toast ids
+let toastsCounter = 1;
+/**
+ * Observer class that manages toast state globally.
+ * Follows the pattern from Sonner for a clean, decoupled architecture.
+ */
+class Observer {
+    constructor() {
+        this.subscribers = [];
+        this.toasts = [];
+        this.dismissedToasts = new Set();
+        /**
+         * Subscribe to toast state changes.
+         * Returns an unsubscribe function.
+         */
+        this.subscribe = (subscriber) => {
+            this.subscribers.push(subscriber);
+            return () => {
+                const index = this.subscribers.indexOf(subscriber);
+                if (index > -1) {
+                    this.subscribers.splice(index, 1);
+                }
+            };
+        };
+        /**
+         * Publish a toast to all subscribers
+         */
+        this.publish = (data) => {
+            this.subscribers.forEach((subscriber) => subscriber(data));
+        };
+        /**
+         * Add a new toast to the internal array and publish to subscribers
+         */
+        this.addToast = (data) => {
+            this.publish(data);
+            this.toasts = [...this.toasts, data];
+        };
+        /**
+         * Create or update a toast
+         */
+        this.create = (data) => {
+            const { title, ...rest } = data;
+            const id = typeof data?.id === 'number' || (typeof data?.id === 'string' && data.id.length > 0)
+                ? data.id
+                : toastsCounter++;
+            const alreadyExists = this.toasts.find((toast) => toast.id === id);
+            const dismissible = data.dismissible ?? true;
+            // if this toast was previously dismissed, clear that
+            if (this.dismissedToasts.has(id)) {
+                this.dismissedToasts.delete(id);
+            }
+            if (alreadyExists) {
+                // update existing toast
+                this.toasts = this.toasts.map((toast) => {
+                    if (toast.id === id) {
+                        this.publish({ ...toast, ...data, id, title, dismissible });
+                        return { ...toast, ...data, id, title, dismissible };
+                    }
+                    return toast;
+                });
+            }
+            else {
+                this.addToast({ title, ...rest, dismissible, id });
+            }
+            return id;
+        };
+        /**
+         * Dismiss a toast by id, or all toasts if no id provided
+         */
+        this.dismiss = (id) => {
+            if (id !== undefined) {
+                this.dismissedToasts.add(id);
+                // use requestAnimationFrame to batch updates
+                requestAnimationFrame(() => {
+                    this.subscribers.forEach((subscriber) => subscriber({ id, dismiss: true }));
+                });
+            }
+            else {
+                // dismiss all
+                this.toasts.forEach((toast) => {
+                    this.subscribers.forEach((subscriber) => subscriber({ id: toast.id, dismiss: true }));
+                });
+            }
+            return id;
+        };
+        /**
+         * Show a basic toast message
+         */
+        this.message = (title, data) => {
+            return this.create({ ...data, title, type: 'default' });
+        };
+        /**
+         * Show a success toast
+         */
+        this.success = (title, data) => {
+            return this.create({ ...data, title, type: 'success' });
+        };
+        /**
+         * Show an error toast
+         */
+        this.error = (title, data) => {
+            return this.create({ ...data, title, type: 'error' });
+        };
+        /**
+         * Show a warning toast
+         */
+        this.warning = (title, data) => {
+            return this.create({ ...data, title, type: 'warning' });
+        };
+        /**
+         * Show an info toast
+         */
+        this.info = (title, data) => {
+            return this.create({ ...data, title, type: 'info' });
+        };
+        /**
+         * Show a loading toast
+         */
+        this.loading = (title, data) => {
+            return this.create({ ...data, title, type: 'loading' });
+        };
+        /**
+         * Show a toast for a promise, automatically transitioning through
+         * loading -> success/error states
+         */
+        this.promise = (promise, data) => {
+            if (!data) {
+                return;
+            }
+            let id = undefined;
+            // show loading state if provided
+            if (data.loading !== undefined) {
+                id = this.create({
+                    promise,
+                    type: 'loading',
+                    title: data.loading,
+                    description: typeof data.description !== 'function' ? data.description : undefined,
+                    // loading toasts shouldn't auto-dismiss
+                    duration: Number.POSITIVE_INFINITY,
+                });
+            }
+            const p = Promise.resolve(promise instanceof Function ? promise() : promise);
+            let shouldDismiss = id !== undefined;
+            let result;
+            const originalPromise = p
+                .then(async (response) => {
+                result = ['resolve', response];
+                // check if response is an HTTP error
+                if (isHttpResponse(response) && !response.ok) {
+                    shouldDismiss = false;
+                    const errorMsg = typeof data.error === 'function'
+                        ? await data.error(`HTTP error! status: ${response.status}`)
+                        : data.error;
+                    const description = typeof data.description === 'function'
+                        ? await data.description(`HTTP error! status: ${response.status}`)
+                        : data.description;
+                    this.create({ id, type: 'error', title: errorMsg, description });
+                }
+                else if (data.success !== undefined) {
+                    shouldDismiss = false;
+                    const successMsg = typeof data.success === 'function'
+                        ? await data.success(response)
+                        : data.success;
+                    const description = typeof data.description === 'function'
+                        ? await data.description(response)
+                        : data.description;
+                    this.create({ id, type: 'success', title: successMsg, description });
+                }
+            })
+                .catch(async (error) => {
+                result = ['reject', error];
+                if (data.error !== undefined) {
+                    shouldDismiss = false;
+                    const errorMsg = typeof data.error === 'function' ? await data.error(error) : data.error;
+                    const description = typeof data.description === 'function'
+                        ? await data.description(error)
+                        : data.description;
+                    this.create({ id, type: 'error', title: errorMsg, description });
+                }
+            })
+                .finally(() => {
+                if (shouldDismiss) {
+                    // toast is still in load state, dismiss it
+                    this.dismiss(id);
+                    id = undefined;
+                }
+                data.finally?.();
+            });
+            // return a promise that can be unwrapped
+            const unwrap = () => new Promise((resolve, reject) => originalPromise
+                .then(() => (result[0] === 'reject' ? reject(result[1]) : resolve(result[1])))
+                .catch(reject));
+            if (typeof id !== 'string' && typeof id !== 'number') {
+                return { unwrap };
+            }
+            else {
+                return Object.assign(id, { unwrap });
+            }
+        };
+        /**
+         * Show a custom JSX toast
+         */
+        this.custom = (jsx, data) => {
+            const id = data?.id ?? toastsCounter++;
+            this.create({ jsx: jsx(id), ...data, id });
+            return id;
+        };
+        /**
+         * Get all active (non-dismissed) toasts
+         */
+        this.getActiveToasts = () => {
+            return this.toasts.filter((toast) => !this.dismissedToasts.has(toast.id));
+        };
+        /**
+         * Get full toast history
+         */
+        this.getHistory = () => {
+            return this.toasts;
+        };
+    }
+}
+function isHttpResponse(data) {
+    return (data &&
+        typeof data === 'object' &&
+        'ok' in data &&
+        typeof data.ok === 'boolean' &&
+        'status' in data &&
+        typeof data.status === 'number');
+}
+// singleton instance
+exports.ToastState = new Observer();
+// basic toast function
+const toastFunction = (title, data) => {
+    return exports.ToastState.create({ ...data, title });
+};
+// getters
+const getHistory = () => exports.ToastState.getHistory();
+const getToasts = () => exports.ToastState.getActiveToasts();
+/**
+ * Main toast API - call directly or use methods like toast.success()
+ *
+ * @example
+ * // basic usage
+ * toast('Hello world')
+ *
+ * // with type
+ * toast.success('Saved!')
+ * toast.error('Something went wrong')
+ *
+ * // with options
+ * toast('Hello', { duration: 5000 })
+ *
+ * // promise toast
+ * toast.promise(fetch('/api'), {
+ *   loading: 'Loading...',
+ *   success: 'Done!',
+ *   error: 'Failed'
+ * })
+ *
+ * // custom JSX
+ * toast.custom((id) => <MyToast id={id} />)
+ *
+ * // dismiss
+ * const id = toast('Hello')
+ * toast.dismiss(id)
+ * toast.dismiss() // dismiss all
+ */
+exports.toast = Object.assign(toastFunction, {
+    success: exports.ToastState.success,
+    error: exports.ToastState.error,
+    warning: exports.ToastState.warning,
+    info: exports.ToastState.info,
+    loading: exports.ToastState.loading,
+    promise: exports.ToastState.promise,
+    custom: exports.ToastState.custom,
+    dismiss: exports.ToastState.dismiss,
+    message: exports.ToastState.message,
+    getHistory,
+    getToasts,
+});
+//# sourceMappingURL=ToastState.js.map

package/dist/cjs/ToastState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastState.js","sourceRoot":"","sources":["../../src/ToastState.ts"],"names":[],"mappings":";;;AAGA,0CAA0C;AAC1C,IAAI,aAAa,GAAG,CAAC,CAAA;AA4DrB;;;GAGG;AACH,MAAM,QAAQ;IAAd;QACE,gBAAW,GAAoD,EAAE,CAAA;QACjE,WAAM,GAAa,EAAE,CAAA;QACrB,oBAAe,GAAyB,IAAI,GAAG,EAAE,CAAA;QAEjD;;;WAGG;QACH,cAAS,GAAG,CAAC,UAAoD,EAAE,EAAE;YACnE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;YAEjC,OAAO,GAAG,EAAE;gBACV,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,UAAU,CAAC,CAAA;gBAClD,IAAI,KAAK,GAAG,CAAC,CAAC,EAAE,CAAC;oBACf,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;gBACnC,CAAC;YACH,CAAC,CAAA;QACH,CAAC,CAAA;QAED;;WAEG;QACH,YAAO,GAAG,CAAC,IAAY,EAAE,EAAE;YACzB,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAA;QAC5D,CAAC,CAAA;QAED;;WAEG;QACH,aAAQ,GAAG,CAAC,IAAY,EAAE,EAAE;YAC1B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAA;YAClB,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,CAAA;QACtC,CAAC,CAAA;QAED;;WAEG;QACH,WAAM,GAAG,CACP,IAKC,EACD,EAAE;YACF,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,GAAG,IAAI,CAAA;YAC/B,MAAM,EAAE,GACN,OAAO,IAAI,EAAE,EAAE,KAAK,QAAQ,IAAI,CAAC,OAAO,IAAI,EAAE,EAAE,KAAK,QAAQ,IAAI,IAAI,CAAC,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;gBAClF,CAAC,CAAC,IAAI,CAAC,EAAE;gBACT,CAAC,CAAC,aAAa,EAAE,CAAA;YAErB,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,CAAC,CAAA;YAClE,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,IAAI,IAAI,CAAA;YAE5C,qDAAqD;YACrD,IAAI,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC;gBACjC,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA;YACjC,CAAC;YAED,IAAI,aAAa,EAAE,CAAC;gBAClB,wBAAwB;gBACxB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;oBACtC,IAAI,KAAK,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC;wBACpB,IAAI,CAAC,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,CAAC,CAAA;wBAC3D,OAAO,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,CAAA;oBACtD,CAAC;oBACD,OAAO,KAAK,CAAA;gBACd,CAAC,CAAC,CAAA;YACJ,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,WAAW,EAAE,EAAE,EAAY,CAAC,CAAA;YAC9D,CAAC;YAED,OAAO,EAAE,CAAA;QACX,CAAC,CAAA;QAED;;WAEG;QACH,YAAO,GAAG,CAAC,EAAoB,EAAE,EAAE;YACjC,IAAI,EAAE,KAAK,SAAS,EAAE,CAAC;gBACrB,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;gBAC5B,6CAA6C;gBAC7C,qBAAqB,CAAC,GAAG,EAAE;oBACzB,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,UAAU,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;gBAC7E,CAAC,CAAC,CAAA;YACJ,CAAC;iBAAM,CAAC;gBACN,cAAc;gBACd,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;oBAC5B,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,UAAU,EAAE,EAAE,CACtC,UAAU,CAAC,EAAE,EAAE,EAAE,KAAK,CAAC,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAC5C,CAAA;gBACH,CAAC,CAAC,CAAA;YACJ,CAAC;YAED,OAAO,EAAE,CAAA;QACX,CAAC,CAAA;QAED;;WAEG;QACH,YAAO,GAAG,CAAC,KAAa,EAAE,IAAoB,EAAE,EAAE;YAChD,OAAO,IAAI,CAAC,MAAM,CAAC,EAAE,GAAG,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAA;QACzD,CAAC,CAAA;QAED;;WAEG;QACH,YAAO,GAAG,CAAC,KAAa,EAAE,IAAoB,EAAE,EAAE;YAChD,OAAO,IAAI,CAAC,MAAM,CAAC,EAAE,GAAG,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAA;QACzD,CAAC,CAAA;QAED;;WAEG;QACH,UAAK,GAAG,CAAC,KAAa,EAAE,IAAoB,EAAE,EAAE;YAC9C,OAAO,IAAI,CAAC,MAAM,CAAC,EAAE,GAAG,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAA;QACvD,CAAC,CAAA;QAED;;WAEG;QACH,YAAO,GAAG,CAAC,KAAa,EAAE,IAAoB,EAAE,EAAE;YAChD,OAAO,IAAI,CAAC,MAAM,CAAC,EAAE,GAAG,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAA;QACzD,CAAC,CAAA;QAED;;WAEG;QACH,SAAI,GAAG,CAAC,KAAa,EAAE,IAAoB,EAAE,EAAE;YAC7C,OAAO,IAAI,CAAC,MAAM,CAAC,EAAE,GAAG,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAA;QACtD,CAAC,CAAA;QAED;;WAEG;QACH,YAAO,GAAG,CAAC,KAAa,EAAE,IAAoB,EAAE,EAAE;YAChD,OAAO,IAAI,CAAC,MAAM,CAAC,EAAE,GAAG,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAA;QACzD,CAAC,CAAA;QAED;;;WAGG;QACH,YAAO,GAAG,CAAY,OAA4B,EAAE,IAA6B,EAAE,EAAE;YACnF,IAAI,CAAC,IAAI,EAAE,CAAC;gBACV,OAAM;YACR,CAAC;YAED,IAAI,EAAE,GAAgC,SAAS,CAAA;YAE/C,iCAAiC;YACjC,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;gBAC/B,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC;oBACf,OAAO;oBACP,IAAI,EAAE,SAAS;oBACf,KAAK,EAAE,IAAI,CAAC,OAAO;oBACnB,WAAW,EACT,OAAO,IAAI,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS;oBACvE,wCAAwC;oBACxC,QAAQ,EAAE,MAAM,CAAC,iBAAiB;iBACnC,CAAC,CAAA;YACJ,CAAC;YAED,MAAM,CAAC,GAAG,OAAO,CAAC,OAAO,CAAC,OAAO,YAAY,QAAQ,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA;YAE5E,IAAI,aAAa,GAAG,EAAE,KAAK,SAAS,CAAA;YACpC,IAAI,MAAoD,CAAA;YAExD,MAAM,eAAe,GAAG,CAAC;iBACtB,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,EAAE;gBACvB,MAAM,GAAG,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAA;gBAE9B,qCAAqC;gBACrC,IAAI,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC;oBAC7C,aAAa,GAAG,KAAK,CAAA;oBACrB,MAAM,QAAQ,GACZ,OAAO,IAAI,CAAC,KAAK,KAAK,UAAU;wBAC9B,CAAC,CAAC,MAAM,IAAI,CAAC,KAAK,CAAC,uBAAuB,QAAQ,CAAC,MAAM,EAAE,CAAC;wBAC5D,CAAC,CAAC,IAAI,CAAC,KAAK,CAAA;oBAChB,MAAM,WAAW,GACf,OAAO,IAAI,CAAC,WAAW,KAAK,UAAU;wBACpC,CAAC,CAAC,MAAM,IAAI,CAAC,WAAW,CAAC,uBAAuB,QAAQ,CAAC,MAAM,EAAE,CAAC;wBAClE,CAAC,CAAC,IAAI,CAAC,WAAW,CAAA;oBAEtB,IAAI,CAAC,MAAM,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC,CAAA;gBAClE,CAAC;qBAAM,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;oBACtC,aAAa,GAAG,KAAK,CAAA;oBACrB,MAAM,UAAU,GACd,OAAO,IAAI,CAAC,OAAO,KAAK,UAAU;wBAChC,CAAC,CAAC,MAAM,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC;wBAC9B,CAAC,CAAC,IAAI,CAAC,OAAO,CAAA;oBAClB,MAAM,WAAW,GACf,OAAO,IAAI,CAAC,WAAW,KAAK,UAAU;wBACpC,CAAC,CAAC,MAAM,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC;wBAClC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAA;oBAEtB,IAAI,CAAC,MAAM,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,CAAC,CAAA;gBACtE,CAAC;YACH,CAAC,CAAC;iBACD,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;gBACrB,MAAM,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAA;gBAE1B,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;oBAC7B,aAAa,GAAG,KAAK,CAAA;oBACrB,MAAM,QAAQ,GACZ,OAAO,IAAI,CAAC,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAA;oBACzE,MAAM,WAAW,GACf,OAAO,IAAI,CAAC,WAAW,KAAK,UAAU;wBACpC,CAAC,CAAC,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;wBAC/B,CAAC,CAAC,IAAI,CAAC,WAAW,CAAA;oBAEtB,IAAI,CAAC,MAAM,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC,CAAA;gBAClE,CAAC;YACH,CAAC,CAAC;iBACD,OAAO,CAAC,GAAG,EAAE;gBACZ,IAAI,aAAa,EAAE,CAAC;oBAClB,2CAA2C;oBAC3C,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAA;oBAChB,EAAE,GAAG,SAAS,CAAA;gBAChB,CAAC;gBACD,IAAI,CAAC,OAAO,EAAE,EAAE,CAAA;YAClB,CAAC,CAAC,CAAA;YAEJ,yCAAyC;YACzC,MAAM,MAAM,GAAG,GAAG,EAAE,CAClB,IAAI,OAAO,CAAY,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE,CACzC,eAAe;iBACZ,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;iBAC7E,KAAK,CAAC,MAAM,CAAC,CACjB,CAAA;YAEH,IAAI,OAAO,EAAE,KAAK,QAAQ,IAAI,OAAO,EAAE,KAAK,QAAQ,EAAE,CAAC;gBACrD,OAAO,EAAE,MAAM,EAAE,CAAA;YACnB,CAAC;iBAAM,CAAC;gBACN,OAAO,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,CAAA;YACtC,CAAC;QACH,CAAC,CAAA;QAED;;WAEG;QACH,WAAM,GAAG,CAAC,GAAgD,EAAE,IAAoB,EAAE,EAAE;YAClF,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,IAAI,aAAa,EAAE,CAAA;YACtC,IAAI,CAAC,MAAM,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE,CAAC,CAAA;YAC1C,OAAO,EAAE,CAAA;QACX,CAAC,CAAA;QAED;;WAEG;QACH,oBAAe,GAAG,GAAG,EAAE;YACrB,OAAO,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAA;QAC3E,CAAC,CAAA;QAED;;WAEG;QACH,eAAU,GAAG,GAAG,EAAE;YAChB,OAAO,IAAI,CAAC,MAAM,CAAA;QACpB,CAAC,CAAA;IACH,CAAC;CAAA;AAED,SAAS,cAAc,CAAC,IAAS;IAC/B,OAAO,CACL,IAAI;QACJ,OAAO,IAAI,KAAK,QAAQ;QACxB,IAAI,IAAI,IAAI;QACZ,OAAO,IAAI,CAAC,EAAE,KAAK,SAAS;QAC5B,QAAQ,IAAI,IAAI;QAChB,OAAO,IAAI,CAAC,MAAM,KAAK,QAAQ,CAChC,CAAA;AACH,CAAC;AAED,qBAAqB;AACR,QAAA,UAAU,GAAG,IAAI,QAAQ,EAAE,CAAA;AAExC,uBAAuB;AACvB,MAAM,aAAa,GAAG,CAAC,KAAa,EAAE,IAAoB,EAAE,EAAE;IAC5D,OAAO,QAAA,UAAU,CAAC,MAAM,CAAC,EAAE,GAAG,IAAI,EAAE,KAAK,EAAE,CAAC,CAAA;AAC9C,CAAC,CAAA;AAED,UAAU;AACV,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,QAAA,UAAU,CAAC,UAAU,EAAE,CAAA;AAChD,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,QAAA,UAAU,CAAC,eAAe,EAAE,CAAA;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACU,QAAA,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,aAAa,EAAE;IAChD,OAAO,EAAE,QAAA,UAAU,CAAC,OAAO;IAC3B,KAAK,EAAE,QAAA,UAAU,CAAC,KAAK;IACvB,OAAO,EAAE,QAAA,UAAU,CAAC,OAAO;IAC3B,IAAI,EAAE,QAAA,UAAU,CAAC,IAAI;IACrB,OAAO,EAAE,QAAA,UAAU,CAAC,OAAO;IAC3B,OAAO,EAAE,QAAA,UAAU,CAAC,OAAO;IAC3B,MAAM,EAAE,QAAA,UAAU,CAAC,MAAM;IACzB,OAAO,EAAE,QAAA,UAAU,CAAC,OAAO;IAC3B,OAAO,EAAE,QAAA,UAAU,CAAC,OAAO;IAC3B,UAAU;IACV,SAAS;CACV,CAAC,CAAA"}

package/dist/cjs/ToastViewport.js

@@ -0,0 +1,289 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VIEWPORT_RESUME = exports.VIEWPORT_PAUSE = exports.VIEWPORT_DEFAULT_HOTKEY = exports.ToastViewport = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const animate_presence_1 = require("@hanzogui/animate-presence");
+const compose_refs_1 = require("@hanzogui/compose-refs");
+const constants_1 = require("@hanzogui/constants");
+const core_1 = require("@hanzogui/core");
+const portal_1 = require("@hanzogui/portal");
+const stacks_1 = require("@hanzogui/stacks");
+const visually_hidden_1 = require("@hanzogui/visually-hidden");
+const React = tslib_1.__importStar(require("react"));
+const constants_ts_1 = require("./constants.js");
+const ToastPortal_tsx_1 = require("./ToastPortal.js");
+const ToastProvider_tsx_1 = require("./ToastProvider.js");
+const VIEWPORT_NAME = 'ToastViewport';
+const VIEWPORT_DEFAULT_HOTKEY = ['F8'];
+exports.VIEWPORT_DEFAULT_HOTKEY = VIEWPORT_DEFAULT_HOTKEY;
+const VIEWPORT_PAUSE = 'toast.viewportPause';
+exports.VIEWPORT_PAUSE = VIEWPORT_PAUSE;
+const VIEWPORT_RESUME = 'toast.viewportResume';
+exports.VIEWPORT_RESUME = VIEWPORT_RESUME;
+const ToastViewportWrapperFrame = (0, core_1.styled)(stacks_1.YStack, {
+    name: 'ViewportWrapper',
+    variants: {
+        unstyled: {
+            false: {
+                pointerEvents: 'box-none',
+                top: 0,
+                bottom: 0,
+                left: 0,
+                right: 0,
+                position: constants_1.isWeb ? 'fixed' : 'absolute',
+                maxWidth: '100%',
+                tabIndex: 0,
+                zIndex: 100000,
+            },
+        },
+    },
+    defaultVariants: {
+        unstyled: process.env.GUI_HEADLESS === '1',
+    },
+});
+const ToastViewportFrame = (0, core_1.styled)(stacks_1.YStack, {
+    name: VIEWPORT_NAME,
+    variants: {
+        unstyled: {
+            false: {
+                pointerEvents: 'box-none',
+                position: constants_1.isWeb ? 'fixed' : 'absolute',
+                maxWidth: '100%',
+            },
+        },
+    },
+    defaultVariants: {
+        unstyled: process.env.GUI_HEADLESS === '1',
+    },
+});
+const ToastViewport = React.memo(React.forwardRef((props, forwardedRef) => {
+    const { scope, hotkey = VIEWPORT_DEFAULT_HOTKEY, label = 'Notifications ({hotkey})', name = 'default', multipleToasts, zIndex, portalToRoot, ...viewportProps } = props;
+    const context = (0, ToastProvider_tsx_1.useToastProviderContext)(scope);
+    const getItems = (0, ToastProvider_tsx_1.useCollection)(scope || constants_ts_1.TOAST_CONTEXT);
+    const headFocusProxyRef = React.useRef(null);
+    const tailFocusProxyRef = React.useRef(null);
+    const wrapperRef = React.useRef(null);
+    const ref = React.useRef(null);
+    const onViewportChange = React.useCallback((el) => {
+        if (context.viewports[name] !== el)
+            context.onViewportChange(name, el);
+    }, [name, context.viewports]);
+    // @ts-ignore TODO react 19 type needs fix
+    const composedRefs = (0, compose_refs_1.useComposedRefs)(forwardedRef, ref, onViewportChange);
+    const hotkeyLabel = hotkey.join('+').replace(/Key/g, '').replace(/Digit/g, '');
+    const hasToasts = context.toastCount > 0;
+    React.useEffect(() => {
+        if (!constants_1.isWeb)
+            return;
+        if (context.toastCount === 0)
+            return;
+        const handleKeyDown = (event) => {
+            // we use `event.code` as it is consistent regardless of meta keys that were pressed.
+            // for example, `event.key` for `Control+Alt+t` is `†` and `t !== †`
+            const isHotkeyPressed = hotkey.every((key) => event[key] || event.code === key);
+            if (isHotkeyPressed)
+                ref.current?.focus();
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [hotkey, context.toastCount]);
+    React.useEffect(() => {
+        if (!constants_1.isWeb)
+            return;
+        if (context.toastCount === 0)
+            return;
+        const wrapper = wrapperRef.current;
+        const viewport = ref.current;
+        if (hasToasts && wrapper && viewport) {
+            const handlePause = () => {
+                if (!context.isClosePausedRef.current) {
+                    const pauseEvent = new CustomEvent(VIEWPORT_PAUSE);
+                    viewport.dispatchEvent(pauseEvent);
+                    context.isClosePausedRef.current = true;
+                }
+            };
+            const handleResume = () => {
+                if (context.isClosePausedRef.current) {
+                    const resumeEvent = new CustomEvent(VIEWPORT_RESUME);
+                    viewport.dispatchEvent(resumeEvent);
+                    context.isClosePausedRef.current = false;
+                }
+            };
+            const handleFocusOutResume = (event) => {
+                const isFocusMovingOutside = !wrapper.contains(event.relatedTarget);
+                if (isFocusMovingOutside)
+                    handleResume();
+            };
+            const handlePointerLeaveResume = () => {
+                const isFocusInside = wrapper.contains(document.activeElement);
+                if (!isFocusInside)
+                    handleResume();
+            };
+            // Toasts are not in the viewport React tree so we need to bind DOM events
+            wrapper.addEventListener('focusin', handlePause);
+            wrapper.addEventListener('focusout', handleFocusOutResume);
+            wrapper.addEventListener('pointermove', handlePause);
+            wrapper.addEventListener('pointerleave', handlePointerLeaveResume);
+            window.addEventListener('blur', handlePause);
+            window.addEventListener('focus', handleResume);
+            return () => {
+                wrapper.removeEventListener('focusin', handlePause);
+                wrapper.removeEventListener('focusout', handleFocusOutResume);
+                wrapper.removeEventListener('pointermove', handlePause);
+                wrapper.removeEventListener('pointerleave', handlePointerLeaveResume);
+                window.removeEventListener('blur', handlePause);
+                window.removeEventListener('focus', handleResume);
+            };
+        }
+    }, [hasToasts, context.isClosePausedRef, context.toastCount]);
+    const getSortedTabbableCandidates = React.useCallback(({ tabbingDirection }) => {
+        const toastItems = getItems();
+        const tabbableCandidates = toastItems.map((toastItem) => {
+            const toastNode = toastItem.ref.current;
+            const toastTabbableCandidates = [
+                toastNode,
+                ...getTabbableCandidates(toastNode),
+            ];
+            return tabbingDirection === 'forwards'
+                ? toastTabbableCandidates
+                : toastTabbableCandidates.reverse();
+        });
+        return (tabbingDirection === 'forwards'
+            ? tabbableCandidates.reverse()
+            : tabbableCandidates).flat();
+    }, [getItems]);
+    React.useEffect(() => {
+        if (!constants_1.isWeb)
+            return;
+        if (context.toastCount === 0)
+            return;
+        const viewport = ref.current;
+        // We programmatically manage tabbing as we are unable to influence
+        // the source order with portals, this allows us to reverse the
+        // tab order so that it runs from most recent toast to least
+        if (viewport) {
+            const handleKeyDown = (event) => {
+                const isMetaKey = event.altKey || event.ctrlKey || event.metaKey;
+                const isTabKey = event.key === 'Tab' && !isMetaKey;
+                if (isTabKey) {
+                    const focusedElement = document.activeElement;
+                    const isTabbingBackwards = event.shiftKey;
+                    const targetIsViewport = event.target === viewport;
+                    // If we're back tabbing after jumping to the viewport then we simply
+                    // proxy focus out to the preceding document
+                    if (targetIsViewport && isTabbingBackwards) {
+                        // @ts-ignore ali TODO type
+                        headFocusProxyRef.current?.focus();
+                        return;
+                    }
+                    const tabbingDirection = isTabbingBackwards ? 'backwards' : 'forwards';
+                    const sortedCandidates = getSortedTabbableCandidates({ tabbingDirection });
+                    const index = sortedCandidates.findIndex((candidate) => candidate === focusedElement);
+                    if (focusFirst(sortedCandidates.slice(index + 1))) {
+                        event.preventDefault();
+                    }
+                    else {
+                        // If we can't focus that means we're at the edges so we
+                        // proxy to the corresponding exit point and let the browser handle
+                        // tab/shift+tab keypress and implicitly pass focus to the next valid element in the document
+                        isTabbingBackwards
+                            ? // @ts-ignore ali TODO type
+                                headFocusProxyRef.current?.focus()
+                            : // @ts-ignore ali TODO type
+                                tailFocusProxyRef.current?.focus();
+                    }
+                }
+            };
+            // Toasts are not in the viewport React tree so we need to bind DOM events
+            viewport.addEventListener('keydown', handleKeyDown);
+            return () => viewport.removeEventListener('keydown', handleKeyDown);
+        }
+    }, [getItems, getSortedTabbableCandidates, context.toastCount]);
+    const contents = ((0, jsx_runtime_1.jsxs)(ToastViewportWrapperFrame, { ref: wrapperRef, 
+        // biome-ignore lint/a11y/useSemanticElements: <explanation>
+        role: "region", "aria-label": label.replace('{hotkey}', hotkeyLabel), 
+        // // Ensure virtual cursor from landmarks menus triggers focus/blur for pause/resume
+        tabIndex: -1, children: [hasToasts && ((0, jsx_runtime_1.jsx)(FocusProxy, { context: context, viewportName: name, ref: headFocusProxyRef, onFocusFromOutsideViewport: () => {
+                    const tabbableCandidates = getSortedTabbableCandidates({
+                        tabbingDirection: 'forwards',
+                    });
+                    focusFirst(tabbableCandidates);
+                } })), (0, jsx_runtime_1.jsx)(ToastProvider_tsx_1.Collection.Slot, { scope: context.toastScope, children: (0, jsx_runtime_1.jsx)(ToastViewportFrame, { focusable: context.toastCount > 0, ref: composedRefs, ...viewportProps, children: (0, jsx_runtime_1.jsx)(portal_1.PortalHost, { render: (children) => ((0, jsx_runtime_1.jsx)(animate_presence_1.AnimatePresence, { exitBeforeEnter: !multipleToasts, children: children })), name: name ?? 'default' }) }) }), hasToasts && ((0, jsx_runtime_1.jsx)(FocusProxy, { context: context, viewportName: name, ref: tailFocusProxyRef, onFocusFromOutsideViewport: () => {
+                    const tabbableCandidates = getSortedTabbableCandidates({
+                        tabbingDirection: 'backwards',
+                    });
+                    focusFirst(tabbableCandidates);
+                } }))] }));
+    if (portalToRoot) {
+        return ((0, jsx_runtime_1.jsx)(ToastPortal_tsx_1.ToastPortal, { context: context, ...(typeof zIndex === 'number' ? { zIndex } : {}), children: contents }));
+    }
+    return contents;
+}));
+exports.ToastViewport = ToastViewport;
+ToastViewport.displayName = VIEWPORT_NAME;
+/* -----------------------------------------------------------------------------------------------*/
+const FOCUS_PROXY_NAME = 'ToastFocusProxy';
+const FocusProxy = React.forwardRef((props, forwardedRef) => {
+    const { onFocusFromOutsideViewport, viewportName, context, ...proxyProps } = props;
+    const viewport = context.viewports[viewportName];
+    return ((0, jsx_runtime_1.jsx)(visually_hidden_1.VisuallyHidden, { "aria-hidden": true, tabIndex: 0, ...proxyProps, ref: forwardedRef, 
+        // Avoid page scrolling when focus is on the focus proxy
+        position: constants_1.isWeb ? 'fixed' : 'absolute', onFocus: (event) => {
+            if (!constants_1.isWeb)
+                return;
+            const prevFocusedElement = event.relatedTarget;
+            const isFocusFromOutsideViewport = !viewport?.contains(prevFocusedElement);
+            if (isFocusFromOutsideViewport)
+                onFocusFromOutsideViewport();
+        } }));
+});
+FocusProxy.displayName = FOCUS_PROXY_NAME;
+/* -----------------------------------------------------------------------------------------------*/
+function focusFirst(candidates) {
+    if (!constants_1.isWeb)
+        return;
+    const previouslyFocusedElement = document.activeElement;
+    return candidates.some((candidate) => {
+        // if focus is already where we want to go, we don't want to keep going through the candidates
+        if (candidate === previouslyFocusedElement)
+            return true;
+        candidate.focus();
+        return document.activeElement !== previouslyFocusedElement;
+    });
+}
+/**
+ * Returns a list of potential tabbable candidates.
+ *
+ * NOTE: This is only a close approximation. For example it doesn't take into account cases like when
+ * elements are not visible. This cannot be worked out easily by just reading a property, but rather
+ * necessitate runtime knowledge (computed styles, etc). We deal with these cases separately.
+ *
+ * See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker
+ * Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1
+ */
+function getTabbableCandidates(container) {
+    if (!constants_1.isWeb)
+        return [];
+    const containerHtml = container;
+    const nodes = [];
+    const walker = document.createTreeWalker(containerHtml, NodeFilter.SHOW_ELEMENT, {
+        acceptNode: (node) => {
+            const isHiddenInput = node.tagName === 'INPUT' && node.type === 'hidden';
+            if (node.disabled || node.hidden || isHiddenInput)
+                return NodeFilter.FILTER_SKIP;
+            // `.tabIndex` is not the same as the `tabindex` attribute. It works on the
+            // runtime's understanding of tabbability, so this automatically accounts
+            // for any kind of element that could be tabbed to.
+            return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+        },
+    });
+    while (walker.nextNode())
+        nodes.push(walker.currentNode);
+    // we do not take into account the order of nodes with positive `tabIndex` as it
+    // hinders accessibility to have tab order different from visual order.
+    return nodes;
+}
+//# sourceMappingURL=ToastViewport.js.map