@mantine/notifications 9.6.3 → 9.7.1

package/lib/index.d.mts

@@ -1,4 +1,4 @@
-export { notifications, showNotification, hideNotification, cleanNotifications, cleanNotificationsQueue, updateNotification, updateNotificationsState, createNotificationsStore, notificationsStore, useNotifications, } from './notifications.store.js';
+export { notifications, showNotification, hideNotification, cleanNotifications, cleanNotificationsQueue, updateNotification, promiseNotification, updateNotificationsState, createNotificationsStore, notificationsStore, useNotifications, } from './notifications.store.js';
 export { Notifications } from './Notifications.js';
-export type { NotificationData, NotificationsState, NotificationsStore, } from './notifications.store';
+export type { NotificationData, NotificationsState, NotificationsStore, PromiseNotificationData, PromiseNotificationOptions, } from './notifications.store';
 export type { NotificationsCssVariables, NotificationsFactory, NotificationsProps, NotificationsStylesNames, } from './Notifications';

package/lib/index.d.ts

@@ -1,4 +1,4 @@
-export { notifications, showNotification, hideNotification, cleanNotifications, cleanNotificationsQueue, updateNotification, updateNotificationsState, createNotificationsStore, notificationsStore, useNotifications, } from './notifications.store.js';
+export { notifications, showNotification, hideNotification, cleanNotifications, cleanNotificationsQueue, updateNotification, promiseNotification, updateNotificationsState, createNotificationsStore, notificationsStore, useNotifications, } from './notifications.store.js';
 export { Notifications } from './Notifications.js';
-export type { NotificationData, NotificationsState, NotificationsStore, } from './notifications.store';
+export type { NotificationData, NotificationsState, NotificationsStore, PromiseNotificationData, PromiseNotificationOptions, } from './notifications.store';
 export type { NotificationsCssVariables, NotificationsFactory, NotificationsProps, NotificationsStylesNames, } from './Notifications';

package/lib/notifications.store.d.ts

@@ -18,6 +18,8 @@ export interface NotificationData extends Omit<NotificationProps, 'onClose'>, Re
     autoClose?: boolean | number;
     /** Determines whether notification can be closed with close button, drag or horizontal scroll swipe, `true` by default */
     allowClose?: boolean;
+    /** Determines whether a progress line that fills up until the notification auto closes is displayed at the bottom of the notification, overrides `withAutoCloseProgress` from `Notifications` */
+    withAutoCloseProgress?: boolean;
     /** Called when notification closes */
     onClose?: (props: NotificationData) => void;
     /** Called when notification opens */
@@ -42,12 +44,25 @@ export declare function updateNotificationsState(store: NotificationsStore, upda
 export declare function showNotification(notification: NotificationData, store?: NotificationsStore): string;
 export declare function hideNotification(id: string, store?: NotificationsStore): string;
 export declare function updateNotification(notification: NotificationData, store?: NotificationsStore): string | undefined;
+export type PromiseNotificationData = Omit<NotificationData, 'id'>;
+export interface PromiseNotificationOptions<T> {
+    /** Notification id, used for all three states, by default `id` is randomly generated */
+    id?: string;
+    /** Notification displayed while the promise is pending, `loading: true` and `autoClose: false` are applied by default */
+    loading: PromiseNotificationData;
+    /** Notification displayed when the promise resolves, `color: 'teal'` is applied by default. Function receives the resolved value. */
+    success: PromiseNotificationData | ((value: T) => PromiseNotificationData);
+    /** Notification displayed when the promise rejects, `color: 'red'` is applied by default. Function receives the rejection reason. */
+    error: PromiseNotificationData | ((error: unknown) => PromiseNotificationData);
+}
+export declare function promiseNotification<T>(promise: Promise<T>, options: PromiseNotificationOptions<T>, store?: NotificationsStore): Promise<T>;
 export declare function cleanNotifications(store?: NotificationsStore): void;
 export declare function cleanNotificationsQueue(store?: NotificationsStore): void;
 export declare const notifications: {
     readonly show: typeof showNotification;
     readonly hide: typeof hideNotification;
     readonly update: typeof updateNotification;
+    readonly promise: typeof promiseNotification;
     readonly clean: typeof cleanNotifications;
     readonly cleanQueue: typeof cleanNotificationsQueue;
     readonly updateState: typeof updateNotificationsState;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/notifications",
-  "version": "9.6.3",
+  "version": "9.7.1",
   "description": "Mantine notifications system",
   "homepage": "https://mantine.dev",
   "license": "MIT",
@@ -44,20 +44,20 @@
     "directory": "packages/@mantine/notifications"
   },
   "peerDependencies": {
-    "@mantine/core": "9.6.3",
-    "@mantine/hooks": "9.6.3",
+    "@mantine/core": "9.7.1",
+    "@mantine/hooks": "9.7.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },
   "dependencies": {
-    "@mantine/store": "9.6.3",
+    "@mantine/store": "9.7.1",
     "react-transition-group": "4.4.5"
   },
   "devDependencies": {
     "@mantine-tests/core": "workspace:*",
     "@mantine/core": "workspace:*",
     "@mantine/hooks": "workspace:*",
-    "react": "19.2.8",
-    "react-dom": "19.2.8"
+    "react": "19.3.0",
+    "react-dom": "19.3.0"
   }
 }

package/styles.css

@@ -48,3 +48,43 @@
 .m_b37d9ac7:where([data-layout='stacked']) > * {
     display: grid;
   }
+
+.m_836192 {
+  position: absolute;
+  bottom: 0;
+  inset-inline-start: 0;
+  width: 100%;
+  height: calc(0.1875rem * var(--mantine-scale));
+  background-color: var(--notification-color);
+  transform: scaleX(0);
+  transform-origin: left center;
+  transition: opacity 200ms ease;
+  animation:
+    m_5f780017 var(--notifications-progress-duration) linear forwards,
+    m_bb245a60 200ms ease;
+}
+
+[dir="rtl"] .m_836192 {
+    transform-origin: right center;
+}
+
+.m_836192:where([data-paused]) {
+    opacity: 0;
+    animation-play-state: paused, running;
+  }
+
+@keyframes m_5f780017 {
+  from {
+    transform: scaleX(0);
+  }
+
+  to {
+    transform: scaleX(1);
+  }
+}
+
+@keyframes m_bb245a60 {
+  from {
+    opacity: 0;
+  }
+}

package/styles.layer.css

@@ -48,4 +48,44 @@
 .m_b37d9ac7:where([data-layout='stacked']) > * {
     display: grid;
   }
+
+.m_836192 {
+  position: absolute;
+  bottom: 0;
+  inset-inline-start: 0;
+  width: 100%;
+  height: calc(0.1875rem * var(--mantine-scale));
+  background-color: var(--notification-color);
+  transform: scaleX(0);
+  transform-origin: left center;
+  transition: opacity 200ms ease;
+  animation:
+    m_5f780017 var(--notifications-progress-duration) linear forwards,
+    m_bb245a60 200ms ease;
+}
+
+[dir="rtl"] .m_836192 {
+    transform-origin: right center;
+}
+
+.m_836192:where([data-paused]) {
+    opacity: 0;
+    animation-play-state: paused, running;
+  }
+
+@keyframes m_5f780017 {
+  from {
+    transform: scaleX(0);
+  }
+
+  to {
+    transform: scaleX(1);
+  }
+}
+
+@keyframes m_bb245a60 {
+  from {
+    opacity: 0;
+  }
+}
 }