feat: add dismissible option to progress toasts

.changeset/dismissible-progress-toast.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": minor
+---
+
+Add `isDismissible` option to progress toasts. When enabled, a "Hide" action button appears during loading, allowing users to temporarily dismiss the toast. The toast will not re-appear during the same loading cycle after being dismissed.

.changeset/restore-notifications.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": minor
+---
+
+Add notification restore functionality. When an async action returns `false`, dismissed notifications can now be restored automatically.

.changeset/update-progress-toast.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Improve progress toast updates. Progress toasts now update in-place instead of removing and re-adding, preventing unnecessary exit/enter animations when data changes.

src/components/GlobalStyles.tsx

@@ -74,60 +74,6 @@ const STATIC_CSS = `
     }
   }
 
-  .cube-notification-container {
-    min-width: var(--min-dialog-size);
-    max-width: 340px;
-    width: calc(100vw - 32px);
-    position: fixed;
-    top: 32px;
-    right: 16px;
-    z-index: 999999;
-  }
-
-  .cube-notifications {
-    display: grid;
-    grid-auto-flow: row;
-    grid-template-columns: 1fr;
-  }
-
-  .cube-notification-enter {
-    opacity: 0;
-    max-height: 0px;
-    margin-bottom: 0px;
-    transform: translate(100%, 0);
-  }
-
-  .cube-notification-enter-active {
-    opacity: 1;
-    max-height: 56px;
-    margin-bottom: 8px;
-    transform: translate(0, 0);
-    transition: all 300ms ease-in;
-  }
-
-  .cube-notification-enter-active > * {
-    margin-bottom: 0px;
-  }
-
-  .cube-notification-exit {
-    opacity: 1;
-    margin-bottom: 8px;
-    max-height: 56px;
-    transform: translate(0, 0);
-  }
-
-  .cube-notification-exit-active {
-    opacity: 0;
-    max-height: 0px;
-    margin-bottom: 0px;
-    transform: translate(100%, 0);
-    transition: all 300ms ease-in;
-  }
-
-  .cube-notification-exit-active > * {
-    margin-bottom: 0px;
-  }
-
   b, strong {
     font-weight: var(--bold-font-weight, 700);
   }

src/components/overlays/Notifications/NotificationAction.tsx

@@ -29,6 +29,7 @@ export { NotificationActionInterceptorContext };
 
 interface NotificationDismissContextValue {
   dismiss: (reason: 'action' | 'close') => void;
+  restore: () => void;
 }
 
 const NotificationDismissContext =
@@ -37,19 +38,25 @@ const NotificationDismissContext =
 export interface NotificationDismissProviderProps {
   notificationId: Key;
   onDismiss: (id: Key, reason: 'action' | 'close') => void;
+  onRestore?: (id: Key) => void;
   children: ReactNode;
 }
 
 export function NotificationDismissProvider({
   notificationId,
   onDismiss,
+  onRestore,
   children,
 }: NotificationDismissProviderProps) {
   const dismiss = useEvent((reason: 'action' | 'close') => {
     onDismiss(notificationId, reason);
   });
 
-  const value = useMemo(() => ({ dismiss }), [dismiss]);
+  const restore = useEvent(() => {
+    onRestore?.(notificationId);
+  });
+
+  const value = useMemo(() => ({ dismiss, restore }), [dismiss, restore]);
 
   return (
     <NotificationDismissContext.Provider value={value}>
@@ -108,23 +115,25 @@ export function NotificationAction({
   const actionInterceptor = useContext(NotificationActionInterceptorContext);
 
   const handlePress = useEvent(async () => {
-    const result = await onPress?.();
-
-    if (result === false) {
-      return;
-    }
-
     actionInterceptor?.();
 
     if (closeOnPress || actionInterceptor) {
-      // isDismiss actions (dismiss button, Escape) use 'close' reason — the
-      // notification moves to the persistent list.
-      // Regular actions use 'action' reason — the notification is fully dismissed
-      // and won't reappear.
+      // Dismiss immediately so the notification hides before the async action
+      // completes (e.g. opening a confirmation dialog).
+      // isDismiss actions use 'close' reason — the notification moves to the
+      // persistent list. Regular actions use 'action' reason — the notification
+      // is fully dismissed and won't reappear.
       // When an actionInterceptor is present (persistent list), always dismiss
       // regardless of closeOnPress — all actions remove the item permanently.
       dismissCtx?.dismiss(isDismiss ? 'close' : 'action');
     }
+
+    const result = await onPress?.();
+
+    if (result === false && (closeOnPress || actionInterceptor)) {
+      // The async action signalled cancellation — restore the notification.
+      dismissCtx?.restore();
+    }
   });
 
   return (

src/components/overlays/Notifications/NotificationCard.tsx

@@ -90,6 +90,7 @@ interface ActionsSectionProps {
   hasDismissContext: boolean;
   notificationId?: Key;
   onDismiss?: (id: Key, reason: DismissReason) => void;
+  onRestore?: (id: Key) => void;
 }
 
 /**
@@ -107,6 +108,7 @@ function ActionsSection({
   hasDismissContext,
   notificationId,
   onDismiss,
+  onRestore,
 }: ActionsSectionProps) {
   const actionsContent = (
     <Space placeSelf="end" placeContent="end" flexGrow={1}>
@@ -127,6 +129,7 @@ function ActionsSection({
         <NotificationDismissProvider
           notificationId={notificationId!}
           onDismiss={onDismiss!}
+          onRestore={onRestore}
         >
           {wrappedContent}
         </NotificationDismissProvider>
@@ -166,6 +169,8 @@ export interface NotificationCardProps {
   notificationId?: Key;
   /** Called when the notification is dismissed */
   onDismiss?: (id: Key, reason: DismissReason) => void;
+  /** Called when a dismissed notification should be restored (async action returned false) */
+  onRestore?: (id: Key) => void;
   /** Suffix content (e.g. timestamp) */
   suffix?: ReactNode;
 }
@@ -185,6 +190,7 @@ export function NotificationCard({
   elevated = true,
   notificationId,
   onDismiss,
+  onRestore,
   suffix,
 }: NotificationCardProps) {
   const icon = getThemeIcon(theme, providedIcon);
@@ -205,6 +211,7 @@ export function NotificationCard({
             hasDismissContext={hasDismissContext}
             notificationId={notificationId}
             onDismiss={onDismiss}
+            onRestore={onRestore}
           />
         )}
       </Flex>

src/components/overlays/Notifications/NotificationItem.tsx

@@ -62,11 +62,13 @@ const NotificationItemWrapper = tasty({
 export interface NotificationItemProps {
   notification: InternalNotification;
   onDismiss: (id: Key, reason: DismissReason) => void;
+  onRestore?: (id: Key) => void;
 }
 
 export function NotificationItem({
   notification,
   onDismiss,
+  onRestore,
 }: NotificationItemProps) {
   const {
     theme,
@@ -104,6 +106,7 @@ export function NotificationItem({
         isDismissible={isDismissible}
         notificationId={notificationId}
         onDismiss={onDismiss}
+        onRestore={onRestore}
       />
     </NotificationItemWrapper>
   );

src/components/overlays/Notifications/OverlayContainer.tsx

@@ -36,7 +36,7 @@ const OverlayContainerElement = tasty({
     top: '2x',
     left: '50%',
     transform: 'translateX(-50%)',
-    zIndex: 10000,
+    zIndex: 100,
     padding: '1x',
     height: '0',
     pointerEvents: 'none',
@@ -388,6 +388,7 @@ export interface OverlayContainerProps {
   onToastExitComplete: (internalId: string) => void;
   onNotificationExitComplete: (internalId: string) => void;
   onNotificationDismiss: (id: Key, reason: DismissReason) => void;
+  onNotificationRestore: (id: Key) => void;
   onPauseChange: (paused: boolean) => void;
 }
 
@@ -397,6 +398,7 @@ export function OverlayContainer({
   onToastExitComplete,
   onNotificationExitComplete,
   onNotificationDismiss,
+  onNotificationRestore,
   onPauseChange,
 }: OverlayContainerProps) {
   // Merge toasts and notifications into a single ordered list
@@ -548,6 +550,7 @@ export function OverlayContainer({
                     <NotificationItem
                       notification={item.data}
                       onDismiss={handleNotificationDismiss}
+                      onRestore={onNotificationRestore}
                     />
                   )}
                 </OverlayItemWrapper>

src/components/overlays/Notifications/OverlayProvider.tsx

@@ -109,6 +109,7 @@ export function OverlayProvider({
               notification.finalizeNotificationRemoval
             }
             onNotificationDismiss={notification.removeNotification}
+            onNotificationRestore={notification.restoreNotification}
             onPauseChange={timers.handlePauseChange}
           />
         </PersistentNotificationsContext.Provider>

src/components/overlays/Notifications/types.ts

@@ -135,6 +135,8 @@ export interface InternalNotification extends OverlayNotificationOptions {
   createdAt: number;
   updatedAt: number;
   isExiting?: boolean;
+  /** Reason for the most recent dismiss, used to undo persistent side effects on restore. */
+  lastDismissReason?: DismissReason;
   ownerId?: string;
 }
 

src/components/overlays/Notifications/use-notification-state.ts

@@ -21,9 +21,11 @@ const MAX_NOTIFICATIONS = 5;
 export interface PersistentCallbacks {
   addPersistentItem: (item: PersistentNotificationItem) => void;
   removePersistentItem: (id: Key) => void;
+  removePersistentItemSilently: (id: Key) => void;
   hasDismissedPersistentId: (id: Key) => boolean;
   isFullyDismissedId: (id: Key) => boolean;
   saveDismissedPersistentId: (id: Key) => void;
+  undoFullyDismissedId: (id: Key) => void;
 }
 
 export interface NotificationState {
@@ -34,6 +36,7 @@ export interface NotificationState {
     ownerId?: string,
   ) => Key;
   removeNotification: (id: Key, reason?: DismissReason) => void;
+  restoreNotification: (id: Key) => void;
   updateNotification: (
     id: Key,
     options: Partial<OverlayNotificationOptions>,
@@ -161,12 +164,55 @@ export function useNotificationState(
 
       setNotifications((prev) =>
         prev.map((n) =>
-          matchesNotificationId(n, id) ? { ...n, isExiting: true } : n,
+          matchesNotificationId(n, id)
+            ? { ...n, isExiting: true, lastDismissReason: reason }
+            : n,
         ),
       );
     },
   );
 
+  // ─── Restore ──────────────────────────────────────────────────
+
+  const restoreNotification = useEvent((id: Key) => {
+    const notif = findNotification(notificationsRef.current, id);
+
+    if (!notif || !notif.isExiting) return;
+
+    // Undo persistent side effects based on how the notification was dismissed.
+    if (notif.persistent && notif.lastDismissReason) {
+      const persistentId = notif.id ?? notif.internalId;
+
+      if (
+        notif.lastDismissReason === 'close' ||
+        notif.lastDismissReason === 'timeout'
+      ) {
+        persistent.removePersistentItemSilently(persistentId);
+      } else if (notif.lastDismissReason === 'action') {
+        persistent.undoFullyDismissedId(persistentId);
+      }
+    }
+
+    // Restart the auto-dismiss timer.
+    const duration = getDuration(notif);
+
+    if (duration != null && duration > 0) {
+      timersRef.current?.startNotificationTimer(
+        notif.internalId,
+        notif.id ?? notif.internalId,
+        duration,
+      );
+    }
+
+    setNotifications((prev) =>
+      prev.map((n) =>
+        matchesNotificationId(n, id)
+          ? { ...n, isExiting: false, lastDismissReason: undefined }
+          : n,
+      ),
+    );
+  });
+
   // ─── Finalize ──────────────────────────────────────────────────
 
   const finalizeNotificationRemoval = useEvent((internalId: string) => {
@@ -353,6 +399,7 @@ export function useNotificationState(
     notificationsRef,
     addNotification,
     removeNotification,
+    restoreNotification,
     updateNotification,
     finalizeNotificationRemoval,
     removeByOwner,

src/components/overlays/Notifications/use-persistent-state.ts

@@ -33,6 +33,16 @@ export interface PersistentState {
    * instead of `addPersistentItem`.
    */
   saveDismissedPersistentId: (id: Key) => void;
+  /**
+   * Removes an id from the fully-dismissed set.
+   * Used to undo an `'action'` dismissal when the async action is cancelled.
+   */
+  undoFullyDismissedId: (id: Key) => void;
+  /**
+   * Removes an item from the persistent list without marking it as fully dismissed.
+   * Used to undo a `'close'` dismissal that moved the notification to persistent.
+   */
+  removePersistentItemSilently: (id: Key) => void;
 }
 
 // ─── Hook ────────────────────────────────────────────────────────────
@@ -126,6 +136,15 @@ export function usePersistentState(maxItems: number): PersistentState {
     saveDismissedId(id);
   });
 
+  const undoFullyDismissedId = useEvent((id: Key): void => {
+    fullyDismissedIdsRef.current.delete(String(id));
+  });
+
+  const removePersistentItemSilently = useEvent((id: Key): void => {
+    dismissedPersistentIdsRef.current!.delete(String(id));
+    setPersistentItems((prev) => prev.filter((i) => i.id !== id));
+  });
+
   return {
     persistentItems,
     addPersistentItem,
@@ -136,5 +155,7 @@ export function usePersistentState(maxItems: number): PersistentState {
     hasDismissedPersistentId,
     isFullyDismissedId,
     saveDismissedPersistentId,
+    undoFullyDismissedId,
+    removePersistentItemSilently,
   };
 }