@cube-dev/ui-kit 0.103.0 → 0.105.0

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.103.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]);
+}
+
+        

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

@@ -0,0 +1,96 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.105.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isValidElement, useMemo } from 'react';
+import { isFragment } from 'react-is';
+import { CheckIcon, DangerIcon, InfoCircleIcon, WarningIcon, } from '../../../icons/index.js';
+import { useToastContext } from './ToastProvider.js';
+// Default icons for each theme
+const THEME_ICONS = {
+    success: _jsx(CheckIcon, {}),
+    danger: _jsx(DangerIcon, {}),
+    warning: _jsx(WarningIcon, {}),
+    note: _jsx(InfoCircleIcon, {}),
+};
+function isToastData(data) {
+    // ReactNode includes: ReactElement | string | number | boolean | null | undefined | Iterable<ReactNode>
+    const isReactNode = isValidElement(data) ||
+        isFragment(data) ||
+        typeof data === 'string' ||
+        typeof data === 'number' ||
+        typeof data === 'boolean' ||
+        data === null ||
+        data === undefined ||
+        Array.isArray(data);
+    return !isReactNode;
+}
+function normalizeToastData(data, defaultTheme) {
+    const theme = isToastData(data) ? data.theme ?? defaultTheme : defaultTheme;
+    const defaultIcon = theme ? THEME_ICONS[theme] : undefined;
+    if (isToastData(data)) {
+        return {
+            icon: defaultIcon,
+            theme: defaultTheme,
+            ...data,
+        };
+    }
+    // String or ReactNode passed directly - use as title
+    return {
+        title: data,
+        theme: defaultTheme,
+        icon: defaultIcon,
+    };
+}
+/**
+ * Hook to display toast notifications.
+ *
+ * @example
+ * ```tsx
+ * const toast = useToast();
+ *
+ * // String shorthand
+ * toast.success('Copied to clipboard');
+ *
+ * // Object with options
+ * toast.success({
+ *   title: 'Success',
+ *   description: 'File copied to clipboard',
+ *   icon: <CustomIcon />,
+ *   duration: 3000,
+ * });
+ *
+ * // Methods: toast(), toast.success(), toast.danger(), toast.warning(), toast.note()
+ * ```
+ */
+export function useToast() {
+    const { addToast, removeToast } = useToastContext();
+    const api = useMemo(() => {
+        const toast = (data) => {
+            return addToast(normalizeToastData(data));
+        };
+        toast.success = (data) => {
+            return addToast(normalizeToastData(data, 'success'));
+        };
+        toast.danger = (data) => {
+            return addToast(normalizeToastData(data, 'danger'));
+        };
+        toast.warning = (data) => {
+            return addToast(normalizeToastData(data, 'warning'));
+        };
+        toast.note = (data) => {
+            return addToast(normalizeToastData(data, 'note'));
+        };
+        toast.remove = (id) => {
+            removeToast(id);
+        };
+        return toast;
+    }, [addToast, removeToast]);
+    return api;
+}
+
+        

package/es/components/overlays/Tooltip/Tooltip.js

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

package/es/components/overlays/Tooltip/TooltipProvider.js

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

package/es/components/overlays/Tooltip/TooltipTrigger.js

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

package/es/components/overlays/Tooltip/context.js

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

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

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

package/es/components/portal/Portal.js

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

package/es/components/portal/PortalProvider.js

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

package/es/components/portal/index.js

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

package/es/components/portal/types.js

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

package/es/components/portal/usePortal.js

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

package/es/components/shared/InvalidIcon.js

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

package/es/components/shared/ValidIcon.js

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

package/es/components/status/LoadingAnimation/LoadingAnimation.js

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

package/es/components/status/LoadingAnimation/index.js

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

package/es/components/status/Spin/Cube.js

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

package/es/components/status/Spin/InternalSpinner.js

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

package/es/components/status/Spin/Spin.js

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

package/es/components/status/Spin/SpinsContainer.js

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

package/es/components/status/Spin/index.js

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

package/es/components/status/Spin/types.js

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

package/es/components/status/index.js

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