@cube-dev/ui-kit 0.104.0 → 0.105.0

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

@@ -0,0 +1,360 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.105.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'react';
+import { useEvent } from '../../../_internal/index.js';
+import { tasty } from '../../../tasty/index.js';
+import { DisplayTransition } from '../../helpers/DisplayTransition/DisplayTransition.js';
+import { Portal } from '../../portal/index.js';
+import { ToastItem } from './ToastItem.js';
+const DEFAULT_DURATION = 5000;
+const MAX_TOASTS = 3;
+const COLLAPSE_VISIBLE_HEIGHT = 10;
+const CONTAINER_OFFSET = 16; // Container's top offset from viewport (2x)
+// Generate deduplication key from toast data
+function generateDedupeKey(data) {
+    const id = data.id;
+    if (id != null) {
+        return String(id);
+    }
+    // Hash based on title + description + theme
+    const parts = [
+        typeof data.title === 'string' ? data.title : '',
+        typeof data.description === 'string' ? data.description : '',
+        data.theme ?? 'default',
+    ];
+    return parts.join('|');
+}
+const ToastContext = createContext(null);
+export function useToastContext() {
+    const context = useContext(ToastContext);
+    if (!context) {
+        throw new Error('useToastContext must be used within a ToastProvider');
+    }
+    return context;
+}
+const TOAST_GAP = 8; // Gap between toasts in pixels
+const ToastContainerElement = tasty({
+    styles: {
+        position: 'fixed',
+        top: '2x',
+        left: '50%',
+        transform: 'translateX(-50%)',
+        zIndex: 10000,
+        padding: '1x',
+        height: '0',
+        pointerEvents: 'none',
+    },
+});
+const ToastWrapper = tasty({
+    styles: {
+        position: 'absolute',
+        top: '0',
+        left: '50%',
+        transform: 'translateX(-50%)',
+        width: 'max-content 50x',
+        pointerEvents: 'auto',
+        transition: 'top 0.3s, opacity 0.3s',
+        opacity: {
+            '': 0,
+            isShown: 1,
+        },
+    },
+});
+// Default height used for initial positioning before measurement
+const DEFAULT_TOAST_HEIGHT = 56;
+function ToastContainer({ toasts, onExitComplete }) {
+    const [isCollapsed, setIsCollapsed] = useState(false);
+    const [heights, setHeights] = useState({});
+    const containerRef = useRef(null);
+    const boundsRef = useRef(null);
+    const toastRefs = useRef(new Map());
+    // Track last known positions for exiting toasts to prevent animation to top: 0
+    const lastPositionsRef = useRef(new Map());
+    // Calculate bounds from all toast elements
+    const updateBounds = useCallback(() => {
+        const refs = toastRefs.current;
+        if (refs.size === 0) {
+            boundsRef.current = null;
+            return;
+        }
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+        refs.forEach((el) => {
+            const rect = el.getBoundingClientRect();
+            minX = Math.min(minX, rect.left);
+            minY = Math.min(minY, rect.top);
+            maxX = Math.max(maxX, rect.right);
+            maxY = Math.max(maxY, rect.bottom);
+        });
+        // Use DOMRect if available (browser), otherwise create a plain object (test environment)
+        if (typeof DOMRect !== 'undefined') {
+            boundsRef.current = new DOMRect(minX, minY, maxX - minX, maxY - minY);
+        }
+        else {
+            boundsRef.current = {
+                x: minX,
+                y: minY,
+                width: maxX - minX,
+                height: maxY - minY,
+                top: minY,
+                right: maxX,
+                bottom: maxY,
+                left: minX,
+                toJSON: () => ({}),
+            };
+        }
+    }, []);
+    // Track mouse position to detect when it leaves toast area
+    useEffect(() => {
+        if (!isCollapsed)
+            return;
+        const handleMouseMove = (e) => {
+            const bounds = boundsRef.current;
+            if (!bounds) {
+                setIsCollapsed(false);
+                return;
+            }
+            // Add some padding to the bounds for smoother UX
+            const padding = 20;
+            const isInBounds = e.clientX >= bounds.left - padding &&
+                e.clientX <= bounds.right + padding &&
+                e.clientY >= bounds.top - padding &&
+                e.clientY <= bounds.bottom + padding;
+            if (!isInBounds) {
+                setIsCollapsed(false);
+            }
+        };
+        window.addEventListener('mousemove', handleMouseMove);
+        return () => window.removeEventListener('mousemove', handleMouseMove);
+    }, [isCollapsed]);
+    // Update bounds when toasts change
+    useEffect(() => {
+        updateBounds();
+    }, [toasts, updateBounds]);
+    const handleMouseEnter = useCallback(() => {
+        updateBounds();
+        setIsCollapsed(true);
+    }, [updateBounds]);
+    // Measure heights after render using useEffect
+    useEffect(() => {
+        const newHeights = {};
+        let hasChanges = false;
+        toastRefs.current.forEach((el, id) => {
+            const height = el.offsetHeight || DEFAULT_TOAST_HEIGHT;
+            newHeights[id] = height;
+            if (heights[id] !== height) {
+                hasChanges = true;
+            }
+        });
+        // Also check for removed toasts
+        for (const id of Object.keys(heights)) {
+            if (!toastRefs.current.has(id)) {
+                hasChanges = true;
+            }
+        }
+        if (hasChanges) {
+            setHeights(newHeights);
+        }
+    });
+    // Create ref callback that stores refs without triggering updates
+    const createRefCallback = useCallback((internalId, displayRef) => (el) => {
+        displayRef(el);
+        if (el) {
+            toastRefs.current.set(internalId, el);
+        }
+        else {
+            toastRefs.current.delete(internalId);
+        }
+    }, []);
+    // Calculate top positions for visible (non-exiting) toasts
+    const visibleToasts = toasts.filter((t) => !t.isExiting);
+    const positions = useMemo(() => {
+        const posMap = new Map();
+        let currentTop = 0;
+        for (const toast of visibleToasts) {
+            posMap.set(toast.internalId, currentTop);
+            const height = heights[toast.internalId] ?? DEFAULT_TOAST_HEIGHT;
+            currentTop += height + TOAST_GAP;
+        }
+        return posMap;
+    }, [visibleToasts, heights]);
+    // Update lastPositionsRef with current positions for visible toasts
+    // This preserves positions for toasts that will exit later
+    useEffect(() => {
+        positions.forEach((pos, id) => {
+            lastPositionsRef.current.set(id, pos);
+        });
+    }, [positions]);
+    // Clean up lastPositionsRef when toast exit completes
+    const handleExitComplete = useCallback((internalId) => {
+        lastPositionsRef.current.delete(internalId);
+        onExitComplete(internalId);
+    }, [onExitComplete]);
+    // Calculate collapsed positions
+    const getToastStyle = useCallback((toast, index, total) => {
+        // Use current position for visible toasts, or last known position for exiting toasts
+        const baseTop = positions.get(toast.internalId) ??
+            lastPositionsRef.current.get(toast.internalId) ??
+            0;
+        const height = heights[toast.internalId] ?? DEFAULT_TOAST_HEIGHT;
+        if (!isCollapsed) {
+            return { top: `${baseTop}px` };
+        }
+        // In collapsed state, all toasts overlap completely
+        // Only COLLAPSE_VISIBLE_HEIGHT of the toast should be visible from viewport top
+        // Container is at CONTAINER_OFFSET from viewport, so we compensate for that
+        const isNewest = index === total - 1;
+        const collapsedTop = COLLAPSE_VISIBLE_HEIGHT - CONTAINER_OFFSET - height;
+        return {
+            top: `${collapsedTop}px`,
+            zIndex: index, // Newest on top (highest index = highest z)
+            opacity: isNewest ? 1 : 0,
+            pointerEvents: 'none',
+        };
+    }, [isCollapsed, positions, heights]);
+    if (toasts.length === 0)
+        return null;
+    return (_jsx(Portal, { children: _jsx(ToastContainerElement, { ref: containerRef, children: toasts.map((toast) => {
+                const visibleIndex = visibleToasts.findIndex((t) => t.internalId === toast.internalId);
+                return (_jsx(DisplayTransition, { animateOnMount: true, isShown: !toast.isExiting, onRest: (transition) => {
+                        if (transition === 'exit') {
+                            handleExitComplete(toast.internalId);
+                        }
+                    }, children: ({ isShown, ref }) => (_jsx(ToastWrapper, { ref: createRefCallback(toast.internalId, ref), mods: { isShown }, style: getToastStyle(toast, visibleIndex >= 0 ? visibleIndex : 0, visibleToasts.length), onMouseEnter: handleMouseEnter, children: _jsx(ToastItem, { ...toast.itemProps, title: toast.title, description: toast.description, theme: toast.theme, icon: toast.icon, isLoading: toast.isLoading }) })) }, toast.internalId));
+            }) }) }));
+}
+export function ToastProvider({ children }) {
+    const [toasts, setToasts] = useState([]);
+    const timersRef = useRef(new Map());
+    const idCounter = useRef(0);
+    const generateId = useCallback(() => {
+        idCounter.current += 1;
+        return `toast-${idCounter.current}-${Date.now()}`;
+    }, []);
+    const clearTimer = useCallback((internalId) => {
+        const timer = timersRef.current.get(internalId);
+        if (timer) {
+            clearTimeout(timer);
+            timersRef.current.delete(internalId);
+        }
+    }, []);
+    // Mark toast as exiting (triggers exit transition)
+    const removeToast = useEvent((id) => {
+        setToasts((prev) => {
+            const toast = prev.find((t) => t.id === id || t.internalId === String(id));
+            if (toast) {
+                clearTimer(toast.internalId);
+            }
+            // Mark as exiting instead of removing immediately
+            return prev.map((t) => {
+                if (t.id === id || t.internalId === String(id)) {
+                    return { ...t, isExiting: true };
+                }
+                return t;
+            });
+        });
+    });
+    // Actually remove the toast from the array after exit transition completes
+    const finalizeRemoval = useEvent((internalId) => {
+        setToasts((prev) => prev.filter((t) => t.internalId !== internalId));
+    });
+    const addToast = useEvent((data, isProgress = false) => {
+        const internalId = generateId();
+        const dedupeKey = generateDedupeKey(data);
+        const duration = isProgress ? null : data.duration ?? DEFAULT_DURATION;
+        // Mark existing toast with same dedupe key as exiting
+        setToasts((prev) => {
+            const existingIndex = prev.findIndex((t) => t.dedupeKey === dedupeKey && !t.isExiting);
+            if (existingIndex !== -1) {
+                const existing = prev[existingIndex];
+                clearTimer(existing.internalId);
+                // Mark as exiting instead of removing immediately
+                return prev.map((t, i) => {
+                    if (i === existingIndex) {
+                        return { ...t, isExiting: true };
+                    }
+                    return t;
+                });
+            }
+            return prev;
+        });
+        const newToast = {
+            ...data,
+            internalId,
+            isProgress,
+            dedupeKey,
+            createdAt: Date.now(),
+        };
+        setToasts((prev) => {
+            let newToasts = [...prev, newToast];
+            // Enforce max toasts limit (only count non-exiting toasts)
+            const activeToasts = newToasts.filter((t) => !t.isExiting);
+            const progressToasts = activeToasts.filter((t) => t.isProgress);
+            const temporalToasts = activeToasts.filter((t) => !t.isProgress);
+            // If we exceed limit, mark oldest temporal toasts as exiting
+            while (activeToasts.length > MAX_TOASTS) {
+                // Always allow at least 1 temporal toast even with 3 progress toasts
+                if (temporalToasts.length > 1 || progressToasts.length < MAX_TOASTS) {
+                    const oldestTemporal = temporalToasts.shift();
+                    if (oldestTemporal) {
+                        clearTimer(oldestTemporal.internalId);
+                        newToasts = newToasts.map((t) => {
+                            if (t.internalId === oldestTemporal.internalId) {
+                                return { ...t, isExiting: true };
+                            }
+                            return t;
+                        });
+                        // Update activeToasts count
+                        const idx = activeToasts.findIndex((t) => t.internalId === oldestTemporal.internalId);
+                        if (idx !== -1)
+                            activeToasts.splice(idx, 1);
+                    }
+                    else {
+                        break;
+                    }
+                }
+                else {
+                    break;
+                }
+            }
+            return newToasts;
+        });
+        // Set auto-dismiss timer for non-progress toasts
+        if (duration != null && duration > 0) {
+            const timer = setTimeout(() => {
+                removeToast(data.id ?? internalId);
+            }, duration);
+            timersRef.current.set(internalId, timer);
+        }
+        return data.id ?? internalId;
+    });
+    const updateToast = useEvent((id, data) => {
+        setToasts((prev) => prev.map((t) => {
+            if (t.id === id || t.internalId === String(id)) {
+                return { ...t, ...data };
+            }
+            return t;
+        }));
+    });
+    // Cleanup timers on unmount
+    useEffect(() => {
+        return () => {
+            timersRef.current.forEach((timer) => clearTimeout(timer));
+            timersRef.current.clear();
+        };
+    }, []);
+    const contextValue = useMemo(() => ({
+        addToast,
+        removeToast,
+        updateToast,
+        toasts,
+    }), [addToast, removeToast, updateToast, toasts]);
+    return (_jsxs(ToastContext.Provider, { value: contextValue, children: [children, _jsx(ToastContainer, { toasts: toasts, onExitComplete: finalizeRemoval })] }));
+}
+
+        

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

@@ -0,0 +1,92 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.105.0
+ * Released under the MIT license.
+ */
+
+// Declarative Toast component
+import { useEffect, useRef } from 'react';
+import { useToastContext } from './ToastProvider.js';
+import { useProgressToast } from './useProgressToast.js';
+export { ToastProvider, useToastContext } from './ToastProvider.js';
+export { ToastItem } from './ToastItem.js';
+export { useToast } from './useToast.js';
+export { useProgressToast } from './useProgressToast.js';
+/**
+ * Declarative Toast component that shows a toast while mounted.
+ *
+ * @example
+ * ```tsx
+ * // Simple toast (visible while mounted)
+ * <Toast theme="success">Saved successfully</Toast>
+ *
+ * // With description
+ * <Toast title="Success" description="Changes saved" theme="success" />
+ * ```
+ */
+export function Toast(props) {
+    const { children, ...toastData } = props;
+    const { addToast, removeToast, updateToast } = useToastContext();
+    const toastIdRef = useRef(null);
+    useEffect(() => {
+        // Add toast on mount
+        toastIdRef.current = addToast({
+            ...toastData,
+            title: toastData.title ?? children,
+            duration: null, // Persistent while mounted
+        }, true);
+        return () => {
+            // Remove toast on unmount
+            if (toastIdRef.current != null) {
+                removeToast(toastIdRef.current);
+                toastIdRef.current = null;
+            }
+        };
+    }, []);
+    // Update toast when props change
+    useEffect(() => {
+        if (toastIdRef.current != null) {
+            updateToast(toastIdRef.current, {
+                ...toastData,
+                title: toastData.title ?? children,
+            });
+        }
+    }, [
+        children,
+        toastData.title,
+        toastData.description,
+        toastData.theme,
+        toastData.icon,
+        toastData.isLoading,
+        toastData.id,
+        // Note: itemProps is intentionally excluded - it's an object that would cause
+        // unnecessary re-runs. Users needing dynamic itemProps should remount the component.
+        updateToast,
+    ]);
+    return null;
+}
+/**
+ * Declarative Progress Toast component.
+ *
+ * @example
+ * ```tsx
+ * <Toast.Progress
+ *   {...(isLoading
+ *     ? { isLoading: true, title: 'Saving...' }
+ *     : { isLoading: false, title: 'Saved!', theme: 'success' }
+ *   )}
+ * />
+ * ```
+ */
+function ToastProgress(props) {
+    const { children, ...progressOptions } = props;
+    useProgressToast({
+        ...progressOptions,
+        title: progressOptions.title ?? children,
+    });
+    return null;
+}
+Toast.Progress = ToastProgress;
+
+        

package/es/components/overlays/{Toasts → Toast}/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.104.0
+ * @cube-dev/ui-kit v0.105.0
  * Released under the MIT license.
  */
 

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

@@ -0,0 +1,162 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.105.0
+ * Released under the MIT license.
+ */
+
+import { useEffect, useRef } from 'react';
+import { useToastContext } from './ToastProvider.js';
+const RESULT_DURATION = 3000;
+// Get string value for comparison (only strings are compared for re-show logic)
+function getStringValue(value) {
+    return typeof value === 'string' ? value : undefined;
+}
+/**
+ * Hook to display a progress toast that persists while loading.
+ *
+ * @example
+ * ```tsx
+ * useProgressToast(
+ *   isLoading
+ *     ? { isLoading: true, title: 'Saving...', icon: <Spinner /> }
+ *     : { isLoading: false, title: 'Saved!', icon: <IconCheck />, theme: 'success' }
+ * );
+ *
+ * // Or with error handling:
+ * useProgressToast(
+ *   isLoading
+ *     ? { isLoading: true, title: 'Saving...', icon: <Spinner /> }
+ *     : isError
+ *       ? { isLoading: false, title: 'Error', description: errorMessage, theme: 'danger' }
+ *       : { isLoading: false, title: 'Saved!', theme: 'success' }
+ * );
+ * ```
+ */
+export function useProgressToast(options) {
+    const { isLoading, ...toastData } = options;
+    const { addToast, removeToast } = useToastContext();
+    const toastIdRef = useRef(null);
+    const wasLoadingRef = useRef(null);
+    const hideTimerRef = useRef(null);
+    const isFirstRenderRef = useRef(true);
+    const optionsRef = useRef(options);
+    // Track previous string values for re-show comparison
+    const prevThemeRef = useRef(undefined);
+    const prevTitleRef = useRef(undefined);
+    const prevDescriptionRef = useRef(undefined);
+    // Always update optionsRef to latest
+    optionsRef.current = options;
+    // Clear any pending hide timer
+    const clearHideTimer = () => {
+        if (hideTimerRef.current) {
+            clearTimeout(hideTimerRef.current);
+            hideTimerRef.current = null;
+        }
+    };
+    // Get current string values for comparison
+    const currentTheme = toastData.theme;
+    const currentTitle = getStringValue(toastData.title);
+    const currentDescription = getStringValue(toastData.description);
+    useEffect(() => {
+        const wasLoading = wasLoadingRef.current;
+        const isFirstRender = isFirstRenderRef.current;
+        const currentOptions = optionsRef.current;
+        const { isLoading: currentIsLoading, ...currentToastData } = currentOptions;
+        // Check if meaningful data changed (only string values)
+        const themeChanged = currentTheme !== prevThemeRef.current;
+        const titleChanged = currentTitle !== prevTitleRef.current;
+        const descriptionChanged = currentDescription !== prevDescriptionRef.current;
+        const dataChanged = themeChanged || titleChanged || descriptionChanged;
+        // Helper to create a new toast (removes old one first if exists)
+        const showToast = () => {
+            // Remove existing toast if any
+            if (toastIdRef.current != null) {
+                removeToast(toastIdRef.current);
+            }
+            // Create new toast with fresh data
+            toastIdRef.current = addToast({
+                ...currentToastData,
+                isLoading: currentIsLoading,
+                duration: null, // Persistent - we control removal
+            }, true);
+        };
+        // Helper to show toast and schedule removal
+        const showToastWithTimer = () => {
+            showToast();
+            // Schedule removal after result duration
+            hideTimerRef.current = setTimeout(() => {
+                if (toastIdRef.current != null) {
+                    removeToast(toastIdRef.current);
+                    toastIdRef.current = null;
+                }
+            }, RESULT_DURATION);
+        };
+        if (currentIsLoading) {
+            // Starting or continuing loading
+            clearHideTimer();
+            if (toastIdRef.current == null) {
+                // Create new toast
+                showToast();
+            }
+            else if (dataChanged) {
+                // Toast exists but data changed (e.g., switching back to loading from another state)
+                showToast();
+            }
+        }
+        else if (wasLoading === true && !currentIsLoading) {
+            // Transitioning from loading to not loading
+            clearHideTimer();
+            if (currentTitle) {
+                // Show result toast with timer
+                showToastWithTimer();
+            }
+            else {
+                // No content - just remove the loading toast immediately
+                if (toastIdRef.current != null) {
+                    removeToast(toastIdRef.current);
+                    toastIdRef.current = null;
+                }
+            }
+        }
+        else if (!currentIsLoading && !isFirstRender && dataChanged) {
+            // Not loading, data changed - update or re-show toast
+            // But only if there's meaningful content (non-empty title)
+            if (currentTitle) {
+                clearHideTimer();
+                showToastWithTimer();
+            }
+            else if (toastIdRef.current != null) {
+                // No content - hide existing toast
+                clearHideTimer();
+                removeToast(toastIdRef.current);
+                toastIdRef.current = null;
+            }
+        }
+        // Update refs for next comparison
+        wasLoadingRef.current = currentIsLoading;
+        isFirstRenderRef.current = false;
+        prevThemeRef.current = currentTheme;
+        prevTitleRef.current = currentTitle;
+        prevDescriptionRef.current = currentDescription;
+    }, [
+        isLoading,
+        currentTheme,
+        currentTitle,
+        currentDescription,
+        addToast,
+        removeToast,
+    ]);
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => {
+            clearHideTimer();
+            if (toastIdRef.current != null) {
+                removeToast(toastIdRef.current);
+                toastIdRef.current = null;
+            }
+        };
+    }, [removeToast]);
+}
+
+