@cube-dev/ui-kit 0.0.0-canary-b46ab85 → 0.0.0-canary-6b0df31

package/es/components/overlays/Notifications/use-overlay-timers.js

@@ -0,0 +1,138 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-6b0df31
+ * Released under the MIT license.
+ */
+
+import { useEffect, useRef } from 'react';
+import { useEvent } from '../../../_internal/index.js';
+/**
+ * Creates a start/clear/pause/resume pair for a single timer category.
+ * Eliminates duplication between toast and notification timer logic.
+ */
+function createTimerManager(timersMap, pausedMap, isPausedRef, onTimeout, findItem) {
+    const clear = (internalId) => {
+        const timer = timersMap.get(internalId);
+        if (timer) {
+            clearTimeout(timer);
+            timersMap.delete(internalId);
+        }
+        pausedMap.delete(internalId);
+    };
+    const start = (internalId, id, duration) => {
+        clear(internalId);
+        pausedMap.set(internalId, {
+            remaining: duration,
+            startedAt: Date.now(),
+        });
+        if (isPausedRef.current) {
+            return;
+        }
+        const timer = setTimeout(() => {
+            onTimeout(id);
+        }, duration);
+        timersMap.set(internalId, timer);
+    };
+    const pauseAll = () => {
+        timersMap.forEach((timer, internalId) => {
+            clearTimeout(timer);
+            timersMap.delete(internalId);
+            const info = pausedMap.get(internalId);
+            if (info) {
+                const elapsed = Date.now() - info.startedAt;
+                pausedMap.set(internalId, {
+                    remaining: Math.max(0, info.remaining - elapsed),
+                    startedAt: Date.now(),
+                });
+            }
+        });
+    };
+    const resumeAll = () => {
+        pausedMap.forEach((info, internalId) => {
+            if (info.remaining <= 0) {
+                pausedMap.delete(internalId);
+                return;
+            }
+            const item = findItem(internalId);
+            if (item && !item.isExiting) {
+                const timer = setTimeout(() => {
+                    onTimeout(item.id ?? item.internalId);
+                }, info.remaining);
+                timersMap.set(internalId, timer);
+                pausedMap.set(internalId, {
+                    remaining: info.remaining,
+                    startedAt: Date.now(),
+                });
+            }
+        });
+    };
+    const clearAll = () => {
+        timersMap.forEach((timer) => clearTimeout(timer));
+        timersMap.clear();
+    };
+    return { start, clear, pauseAll, resumeAll, clearAll };
+}
+// ─── Hook ────────────────────────────────────────────────────────────
+export function useOverlayTimers(deps) {
+    const { toastsRef, notificationsRef, removeToast, removeNotification } = deps;
+    const toastTimersMap = useRef(new Map()).current;
+    const notificationTimersMap = useRef(new Map()).current;
+    const isPausedRef = useRef(false);
+    // Shared paused-timers map. Toast and notification internalIds use distinct prefixes
+    // ('toast-' and 'notif-') so they coexist safely in a single map.
+    const pausedMap = useRef(new Map()).current;
+    const toastManager = useRef(null);
+    const notifManager = useRef(null);
+    // Lazily create managers — deps are stable (useEvent / refs), so this runs once.
+    if (!toastManager.current) {
+        toastManager.current = createTimerManager(toastTimersMap, pausedMap, isPausedRef, (id) => removeToast(id), (internalId) => toastsRef.current?.find((t) => t.internalId === internalId));
+    }
+    if (!notifManager.current) {
+        notifManager.current = createTimerManager(notificationTimersMap, pausedMap, isPausedRef, (id) => removeNotification(id, 'timeout'), (internalId) => notificationsRef.current?.find((n) => n.internalId === internalId));
+    }
+    // ─── Stable callbacks ──────────────────────────────────────────────
+    const startToastTimer = useEvent((internalId, id, duration) => {
+        toastManager.current.start(internalId, id, duration);
+    });
+    const clearToastTimer = useEvent((internalId) => {
+        toastManager.current.clear(internalId);
+    });
+    const startNotificationTimer = useEvent((internalId, id, duration) => {
+        notifManager.current.start(internalId, id, duration);
+    });
+    const clearNotificationTimer = useEvent((internalId) => {
+        notifManager.current.clear(internalId);
+    });
+    // ─── Pause / Resume ─────────────────────────────────────────────
+    const handlePauseChange = useEvent((paused) => {
+        if (paused === isPausedRef.current)
+            return;
+        isPausedRef.current = paused;
+        if (paused) {
+            toastManager.current.pauseAll();
+            notifManager.current.pauseAll();
+        }
+        else {
+            toastManager.current.resumeAll();
+            notifManager.current.resumeAll();
+        }
+    });
+    // ─── Cleanup on unmount ─────────────────────────────────────────
+    useEffect(() => {
+        return () => {
+            toastManager.current.clearAll();
+            notifManager.current.clearAll();
+            pausedMap.clear();
+        };
+    }, []);
+    return {
+        startToastTimer,
+        clearToastTimer,
+        startNotificationTimer,
+        clearNotificationTimer,
+        handlePauseChange,
+    };
+}
+
+        

package/es/components/overlays/Notifications/use-persistent-notifications.js

@@ -0,0 +1,63 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-6b0df31
+ * Released under the MIT license.
+ */
+
+import { useMemo } from 'react';
+import { usePersistentNotificationsContext } from './NotificationContext.js';
+/**
+ * Hook to access the persistent notifications list.
+ *
+ * Items are ordered newest first (by `createdAt`, descending).
+ *
+ * @example
+ * ```tsx
+ * const { items, count, remove, clear } = usePersistentNotifications();
+ *
+ * return (
+ *   <div>
+ *     <span>Notifications ({count})</span>
+ *     {items.map(item => (
+ *       <div key={item.id}>
+ *         {item.title}
+ *         <button onClick={() => remove(item.id)}>Remove</button>
+ *       </div>
+ *     ))}
+ *     <button onClick={clear}>Clear all</button>
+ *   </div>
+ * );
+ * ```
+ */
+export function usePersistentNotifications() {
+    const { persistentItems, removePersistentItem, clearPersistentItems, markAllAsRead, } = usePersistentNotificationsContext();
+    return useMemo(() => ({
+        items: persistentItems,
+        count: persistentItems.length,
+        remove: removePersistentItem,
+        clear: clearPersistentItems,
+        markAllAsRead,
+    }), [persistentItems]);
+}
+/**
+ * Hook to get total and unread counts for persistent notifications.
+ *
+ * - `total` — number of items in the persistent list.
+ * - `unread` — items that haven't been seen in `PersistentNotificationsList` yet.
+ *
+ * @example
+ * ```tsx
+ * const { total, unread } = useNotificationsCount();
+ * return <Badge count={unread} />;
+ * ```
+ */
+export function useNotificationsCount() {
+    const { persistentItems } = usePersistentNotificationsContext();
+    return useMemo(() => ({
+        total: persistentItems.length,
+        unread: persistentItems.filter((i) => !i.isRead).length,
+    }), [persistentItems]);
+}
+
+        

package/es/components/overlays/Notifications/use-persistent-state.js

@@ -0,0 +1,66 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-6b0df31
+ * Released under the MIT license.
+ */
+
+import { useState } from 'react';
+import { useEvent } from '../../../_internal/index.js';
+// ─── Hook ────────────────────────────────────────────────────────────
+export function usePersistentState(maxItems) {
+    const [persistentItems, setPersistentItems] = useState([]);
+    const addPersistentItem = useEvent((item) => {
+        setPersistentItems((prev) => {
+            // Upsert by id
+            const existingIndex = prev.findIndex((i) => i.id === item.id);
+            let newItems;
+            if (existingIndex !== -1) {
+                newItems = [...prev];
+                // Updated items are marked unread again
+                newItems[existingIndex] = {
+                    ...newItems[existingIndex],
+                    ...item,
+                    isRead: false,
+                };
+            }
+            else {
+                newItems = [{ ...item, isRead: item.isRead ?? false }, ...prev];
+            }
+            // Enforce max cap
+            if (newItems.length > maxItems) {
+                newItems = newItems.slice(0, maxItems);
+            }
+            // Sort newest first
+            newItems.sort((a, b) => b.createdAt - a.createdAt);
+            return newItems;
+        });
+    });
+    const removePersistentItem = useEvent((id) => {
+        setPersistentItems((prev) => prev.filter((i) => i.id !== id));
+    });
+    const removePersistentItemsByOwner = useEvent((ownerId) => {
+        setPersistentItems((prev) => prev.filter((i) => i.ownerId !== ownerId));
+    });
+    const clearPersistentItems = useEvent(() => {
+        setPersistentItems([]);
+    });
+    const markAllAsRead = useEvent(() => {
+        setPersistentItems((prev) => {
+            const hasUnread = prev.some((i) => !i.isRead);
+            if (!hasUnread)
+                return prev;
+            return prev.map((i) => (i.isRead ? i : { ...i, isRead: true }));
+        });
+    });
+    return {
+        persistentItems,
+        addPersistentItem,
+        removePersistentItem,
+        removePersistentItemsByOwner,
+        clearPersistentItems,
+        markAllAsRead,
+    };
+}
+
+        

package/es/components/overlays/Notifications/use-toast-state.js

@@ -0,0 +1,143 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-6b0df31
+ * Released under the MIT license.
+ */
+
+import { useRef, useState } from 'react';
+import { useEvent } from '../../../_internal/index.js';
+// ─── Constants ───────────────────────────────────────────────────────
+const DEFAULT_TOAST_DURATION = 5000;
+const MAX_TOASTS = 3;
+// ─── Dedupe Key ──────────────────────────────────────────────────────
+/**
+ * Generate a deduplication key for a toast.
+ * Uses JSON.stringify with alphabetically ordered keys to prevent false
+ * collisions when title/description contains separator characters.
+ */
+function generateToastDedupeKey(data) {
+    if (data.id != null)
+        return String(data.id);
+    return JSON.stringify({
+        description: typeof data.description === 'string' ? data.description : '',
+        theme: data.theme ?? 'default',
+        title: typeof data.title === 'string' ? data.title : '',
+    });
+}
+// ─── Helpers ─────────────────────────────────────────────────────────
+function matchesToastId(item, id) {
+    return item.id === id || item.internalId === String(id);
+}
+function findToast(list, id) {
+    return list.find((t) => matchesToastId(t, id));
+}
+// ─── Hook ────────────────────────────────────────────────────────────
+/**
+ * @param timersRef - Ref to the shared OverlayTimers instance. Accessed only
+ *   inside callbacks (never during render), so it is guaranteed to be populated.
+ */
+export function useToastState(timersRef) {
+    const [toasts, setToasts] = useState([]);
+    const toastsRef = useRef(toasts);
+    toastsRef.current = toasts;
+    const idCounter = useRef(0);
+    const removeToast = useEvent((id) => {
+        // Perform side effects outside the updater (StrictMode-safe).
+        const toast = findToast(toastsRef.current, id);
+        if (toast) {
+            timersRef.current?.clearToastTimer(toast.internalId);
+        }
+        setToasts((prev) => prev.map((t) => (matchesToastId(t, id) ? { ...t, isExiting: true } : t)));
+    });
+    const finalizeToastRemoval = useEvent((internalId) => {
+        setToasts((prev) => prev.filter((t) => t.internalId !== internalId));
+    });
+    const addToast = useEvent((data, isProgress = false) => {
+        idCounter.current += 1;
+        const internalId = `toast-${idCounter.current}-${Date.now()}`;
+        const dedupeKey = generateToastDedupeKey(data);
+        const duration = isProgress
+            ? null
+            : data.duration ?? DEFAULT_TOAST_DURATION;
+        const newToast = {
+            ...data,
+            internalId,
+            isProgress,
+            dedupeKey,
+            createdAt: Date.now(),
+        };
+        // Perform dedupe side effects outside the updater (StrictMode-safe).
+        const existingToast = toastsRef.current.find((t) => t.dedupeKey === dedupeKey && !t.isExiting);
+        if (existingToast) {
+            timersRef.current?.clearToastTimer(existingToast.internalId);
+        }
+        // Single setState call: mark duplicate as exiting, append new toast,
+        // and evict oldest temporal toasts if we exceed MAX_TOASTS.
+        // Track evicted IDs so we can clear timers outside the updater (StrictMode-safe).
+        let wasEvicted = false;
+        const evictedIds = [];
+        setToasts((prev) => {
+            let newToasts = prev;
+            // Mark existing toast with same dedupe key as exiting
+            if (existingToast) {
+                newToasts = newToasts.map((t) => t.internalId === existingToast.internalId
+                    ? { ...t, isExiting: true }
+                    : t);
+            }
+            // Append the new toast
+            newToasts = [...newToasts, newToast];
+            // Evict oldest temporal toasts if over the cap
+            const activeToasts = newToasts.filter((t) => !t.isExiting);
+            const progressToasts = activeToasts.filter((t) => t.isProgress);
+            const temporalToasts = activeToasts.filter((t) => !t.isProgress);
+            while (activeToasts.length > MAX_TOASTS) {
+                if (temporalToasts.length > 1 || progressToasts.length < MAX_TOASTS) {
+                    const oldestTemporal = temporalToasts.shift();
+                    if (oldestTemporal) {
+                        evictedIds.push(oldestTemporal.internalId);
+                        newToasts = newToasts.map((t) => t.internalId === oldestTemporal.internalId
+                            ? { ...t, isExiting: true }
+                            : t);
+                        const idx = activeToasts.findIndex((t) => t.internalId === oldestTemporal.internalId);
+                        if (idx !== -1)
+                            activeToasts.splice(idx, 1);
+                        // Check if the newly added toast was evicted
+                        if (oldestTemporal.internalId === internalId) {
+                            wasEvicted = true;
+                        }
+                    }
+                    else {
+                        break;
+                    }
+                }
+                else {
+                    break;
+                }
+            }
+            return newToasts;
+        });
+        // Clear timers for evicted toasts outside the updater (StrictMode-safe)
+        for (const evictedId of evictedIds) {
+            timersRef.current?.clearToastTimer(evictedId);
+        }
+        // Start timer only if the toast wasn't immediately evicted
+        if (!wasEvicted && duration != null && duration > 0) {
+            timersRef.current?.startToastTimer(internalId, data.id ?? internalId, duration);
+        }
+        return data.id ?? internalId;
+    });
+    const updateToast = useEvent((id, data) => {
+        setToasts((prev) => prev.map((t) => (matchesToastId(t, id) ? { ...t, ...data } : t)));
+    });
+    return {
+        toasts,
+        toastsRef,
+        addToast,
+        removeToast,
+        updateToast,
+        finalizeToastRemoval,
+    };
+}
+
+        

package/es/components/overlays/OverlayWrapper.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b46ab85
+ * @cube-dev/ui-kit v0.0.0-canary-6b0df31
  * Released under the MIT license.
  */
 

package/es/components/overlays/Toast/ToastItem.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b46ab85
+ * @cube-dev/ui-kit v0.0.0-canary-6b0df31
  * Released under the MIT license.
  */
 
@@ -9,6 +9,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { tasty } from '../../../tasty/index.js';
 import { Item } from '../../content/Item/Item.js';
+import { getThemeIcon } from './useToast.js';
 const StyledItem = tasty(Item, {
     styles: {
         transition: 'theme, inset',
@@ -19,11 +20,12 @@ const StyledItem = tasty(Item, {
     },
 });
 export const ToastItem = forwardRef(function ToastItem(props, ref) {
-    const { title, description, theme, isLoading, children, qa, ...itemProps } = props;
+    const { title, description, theme, isLoading, icon: providedIcon, children, qa, ...itemProps } = props;
+    const icon = getThemeIcon(theme, providedIcon, isLoading);
     // If only description provided (no title/children), use description as primary content
     const primaryContent = children ?? title ?? description;
     const secondaryContent = children || title ? description : undefined;
-    return (_jsx(StyledItem, { ref: ref, qa: qa ?? 'Toast', type: "card", theme: theme, isLoading: isLoading, description: secondaryContent, ...itemProps, children: primaryContent }));
+    return (_jsx(StyledItem, { ref: ref, qa: qa ?? 'Toast', type: "card", theme: theme, icon: icon, isLoading: isLoading, description: secondaryContent, ...itemProps, children: primaryContent }));
 });