@tsirosgeorge/toastnotification 5.4.0 → 5.6.0

package/Readme.md

@@ -103,6 +103,55 @@ toast('Are you sure?', {
 });
 ```
 
+### 🔄 Wrapping an async action
+
+```javascript
+const order = await toast.promise(saveOrder(cart), {
+  loading: 'Saving your order…',
+  success: (order) => `Order #${order.id} saved.`,
+  error: (err) => `Could not save: ${err.message}`,
+});
+```
+
+One loading toast becomes the success or error message. It resolves with the promise's
+value and re-throws its rejection, so the caller still handles the failure.
+
+### ↩️ Action button
+
+```javascript
+toast.success('Item removed from your cart.', {
+  duration: 8000,
+  showProgress: true,
+  action: { text: 'Undo', onClick: () => restoreItem() },
+});
+```
+
+### ⚙️ Site-wide defaults
+
+```javascript
+toast.defaults = { position: 'bottom-right', showProgress: true, duration: 4000 };
+```
+
+Applied to every toast unless the individual call overrides them.
+
+### ⌨️ Keyboard and screen readers
+
+Confirm dialogs take focus when they open, keep Tab inside themselves while they are
+open, and hand focus back to whatever opened them when they close. Escape cancels, and
+Enter submits a single-line input. Without this the element that opened the dialog kept
+focus behind the backdrop, so Enter or Space re-triggered it and stacked a second dialog.
+
+Toast containers are announced as `aria-live="polite"`; `error` and `warning` toasts get
+`role="alert"`. Everything respects `prefers-reduced-motion`.
+
+### ✋ Closing toasts yourself
+
+```javascript
+const t = toast('Working…', { duration: 0 });
+t.close();       // dismiss this one
+toast.dismissAll(); // dismiss everything; open dialogs settle as a cancel
+```
+
 ### ⏳ Loading → Update
 ```javascript
 const t = toast.loading('Uploading…', { type: 'info' });
@@ -114,12 +163,17 @@ t.update('Done!', { type: 'success', duration: 2000 });
 
 | Option       | Type       | Default       | Description                                                                                   |
 |--------------|------------|---------------|-----------------------------------------------------------------------------------------------|
-| `position`   | `string`   | `'top-right'` | Container position. Values: `'top-left'`, `'top-right'`, `'bottom-left'`, `'bottom-right'`, `'top-center'`, `'bottom-center'`. |
+| `position`   | `string`   | `'top-right'` | Container position. Values: `'top-left'`, `'top-right'`, `'bottom-left'`, `'bottom-right'`, `'top-center'`, `'bottom-center'`, `'center'`. `'center'` places it dead centre of the viewport and defaults to the `zoom-in` animation; it works for plain toasts and for confirm dialogs. |
 | `animation`  | `string`   | `'slide-right'` | Show animation. Examples: `'slide-right'`, `'slide-left'`, `'slide-top'`, `'slide-bottom'`, `'zoom-in'`. Hide uses reverse automatically. |
 | `type`       | `string`   | `'info'`      | Type of toast, controlling icon and styling. Possible values: `'info'`, `'success'`, `'error'`, `'warning'`. |
 | `duration`   | `number`   | `3000`        | Duration in milliseconds before the toast automatically dismisses.                            |
 | `icon`       | `string` or `null` | `null` | Optional custom icon displayed as text (e.g., emoji) before the toast message. If not set, a default GIF icon is used based on the `type`. |
 | `showLoader` | `boolean`  | `false`       | Whether to show a loader/progress bar animation on the toast during its visible duration.    |
+| `pauseOnHover` | `boolean` | `true`      | Freeze the countdown while the pointer or keyboard focus is on the toast.                      |
+| `showProgress` | `boolean` | `false`     | Thin bar counting the remaining time down. Needs `duration > 0`; pauses with `pauseOnHover`.   |
+| `action`     | `object` or `null` | `null` | `{ text, onClick }` renders a button inside the toast, e.g. Undo. Clicking it runs `onClick` and closes the toast. |
+| `allowHtml`  | `boolean`  | `true`        | `message` is written as HTML. Pass `false` to render it as plain text — do that for anything user-supplied, or you have an XSS hole. |
+| `closeOnEscape` | `boolean` | `true`      | Confirm dialogs only. Escape cancels the dialog.                                              |
 | `onClick`    | `function` or `null` | `null` | Callback function executed when the toast is clicked.                                        |
 | `onShow`     | `function` or `null` | `null` | Callback function executed when the toast appears (after it's added to the DOM and shown).   |
 | `onDismiss`  | `function` or `null` | `null` | Callback function executed when the toast is dismissed and removed from the DOM.             |

package/assets/css/toast.css

@@ -52,6 +52,14 @@
     align-items: center;
 }
 
+/* Dead centre of the viewport, for alerts that should not sit in a corner. */
+.ts-toast-container.center {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    align-items: center;
+}
+
 /* General Toast styles */
 .ts-toast-container .ts-toast {
     display: flex;
@@ -334,6 +342,7 @@
 .ts-toast-overlay.bottom-left { align-items: flex-end; justify-content: flex-start; padding: 1rem; }
 .ts-toast-overlay.bottom-center { align-items: flex-end; justify-content: center; padding: 1rem; }
 .ts-toast-overlay.bottom-right { align-items: flex-end; justify-content: flex-end; padding: 1rem; }
+.ts-toast-overlay.center { align-items: center; justify-content: center; padding: 1rem; }
 
 /* Tiny utility: flex icon container */
 /* Scoped utility to avoid conflicts */
@@ -342,4 +351,50 @@
 /* Prevent scroll behind confirm overlay */
 body.ts-toast-no-scroll {
     overflow: hidden;
-}
+}
+
+/* Progress bar counting down the remaining time */
+@keyframes ts-toast-progress {
+    from { transform: scaleX(1); }
+    to   { transform: scaleX(0); }
+}
+
+.ts-toast-container .ts-toast-progress {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 3px;
+    transform-origin: left center;
+    border-radius: 0 0 8px 8px;
+    background: var(--toast-progress-color, currentColor);
+    opacity: 0.35;
+    pointer-events: none;
+}
+
+.ts-toast-container .ts-toast-success .ts-toast-progress { background: var(--toast-success-color, #17a35c); }
+.ts-toast-container .ts-toast-error   .ts-toast-progress { background: var(--toast-error-color, #ef4444); }
+.ts-toast-container .ts-toast-warning .ts-toast-progress { background: var(--toast-warning-color, #f0a020); }
+.ts-toast-container .ts-toast-info    .ts-toast-progress { background: var(--toast-info-color, #3b82f6); }
+
+/* Action button inside a toast (e.g. Undo) */
+.ts-toast-container .ts-toast-action {
+    /* Toasts lay out row-reverse, so the lowest order sits at the right-hand end:
+       icon, message, then the action button. */
+    order: -1;
+    flex: none;
+    appearance: none;
+    border: 0;
+    background: transparent;
+    color: var(--toast-action-color, #3b82f6);
+    font: inherit;
+    font-weight: 600;
+    padding: 4px 8px;
+    margin-left: 4px;
+    border-radius: 6px;
+    cursor: pointer;
+}
+
+.ts-toast-container .ts-toast-action:hover {
+    background: var(--toast-action-hover, rgba(59, 130, 246, 0.12));
+}

package/assets/css/toast.min.css

@@ -1 +1 @@
-.ts-toast-container{position:fixed;z-index:9999;display:flex;flex-direction:column;gap:10px;pointer-events:none;width:fit-content;max-width:calc(100% - 2rem)}.ts-toast-container>:not(:last-child){margin-bottom:0!important}.ts-toast-container.top-right{top:1rem;right:1rem;align-items:flex-end}.ts-toast-container.top-left{top:1rem;left:1rem;align-items:flex-start}.ts-toast-container.top-center{top:1rem;left:50%;transform:translateX(-50%);align-items:center}.ts-toast-container.bottom-right{bottom:1rem;right:1rem;align-items:flex-end}.ts-toast-container.bottom-left{bottom:1rem;left:1rem;align-items:flex-start}.ts-toast-container.bottom-center{bottom:1rem;left:50%;transform:translateX(-50%);align-items:center}.ts-toast-container .ts-toast{display:flex;align-items:center;gap:.75rem;background-color:var(--toast-bg,#fff);color:var(--toast-color,#000);padding:.75rem 1rem;border-radius:8px;border:1px solid var(--toast-border,#e5e7eb);box-shadow:var(--toast-shadow,0 10px 15px -3px rgba(0,0,0,.1));font-family:sans-serif;font-size:.95rem;pointer-events:all;position:relative;opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease;width:auto!important}.ts-toast.ts-toast-confirm{display:flex;align-items:center;justify-content:center;background-color:var(--toast-bg,#fff);color:var(--toast-color,#000);border:1px solid var(--toast-border,#e5e7eb);border-radius:12px;padding:16px 20px;box-shadow:var(--toast-shadow,0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1));transition:opacity .5s ease,transform .5s ease}.ts-toast.ts-toast-confirm .ts-toast-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center}.ts-toast.ts-toast-confirm .ts-toast-body{text-align:center}.ts-toast-actions{display:flex;gap:10px;justify-content:center;margin-top:12px}.ts-toast-input{width:100%;padding:8px 12px;border:1px solid var(--toast-border,#e5e7eb);border-radius:8px;font-family:inherit;font-size:.95rem;margin-top:12px;background:var(--toast-bg,#fff);color:var(--toast-color,#000);outline:0;transition:border-color .2s ease}.ts-toast-input:focus{border-color:#3b82f6}.ts-toast-container .ts-toast.ts-toast-show{opacity:1;transform:translateY(0)}@keyframes ts-toast-slide-left{from{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes ts-toast-slide-right{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes ts-toast-slide-top{from{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes ts-toast-slide-bottom{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes ts-toast-zoom-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes ts-toast-zoom-out{from{transform:scale(1)}to{transform:scale(0)}}@keyframes ts-toast-flip{from{transform:rotateY(90deg)}to{transform:rotateY(0)}}.ts-toast-container .ts-toast-icon{font-size:1.2rem}.ts-toast-container .ts-toast-success .ts-toast-icon{color:var(--toast-success-color,#66ee78)}.ts-toast-container .ts-toast-error .ts-toast-icon{color:var(--toast-error-color,#ef4444)}.ts-toast-container .ts-toast-loader{width:20px;height:20px;border:3px solid #f3f3f3;border-top:3px solid var(--toast-loader-color,#66ee78);border-radius:50%;animation:ts-toast-spin 1s linear infinite}@keyframes ts-toast-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.ts-toast-container .ts-toast-loader.done{animation:none;opacity:0;transition:opacity .5s ease}.ts-toast-container .ts-toast-icon{font-size:1.2rem;opacity:0;transition:opacity .5s ease}.ts-toast-container .ts-toast.ts-toast-show .ts-toast-icon{opacity:1}@keyframes progress-bar{0%{width:0%}100%{width:100%}}@keyframes ts-toast-slide-top-reverse{from{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes ts-toast-slide-bottom-reverse{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes ts-toast-slide-left-reverse{from{transform:translateX(0)}to{transform:translateX(-100%)}}@keyframes ts-toast-slide-right-reverse{from{transform:translateX(0)}to{transform:translateX(100%)}}.ts-toast.ts-toast-slide-out{opacity:0}.ts-toast-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:2147483646}.ts-toast-overlay.top-left{align-items:flex-start;justify-content:flex-start;padding:1rem}.ts-toast-overlay.top-center{align-items:flex-start;justify-content:center;padding:1rem}.ts-toast-overlay.top-right{align-items:flex-start;justify-content:flex-end;padding:1rem}.ts-toast-overlay.bottom-left{align-items:flex-end;justify-content:flex-start;padding:1rem}.ts-toast-overlay.bottom-center{align-items:flex-end;justify-content:center;padding:1rem}.ts-toast-overlay.bottom-right{align-items:flex-end;justify-content:flex-end;padding:1rem}.ts-toast-d-flex{display:inline-flex;align-items:center}body.ts-toast-no-scroll{overflow:hidden}
+.ts-toast-container{position:fixed;z-index:9999;display:flex;flex-direction:column;gap:10px;pointer-events:none;width:fit-content;max-width:calc(100% - 2rem)}.ts-toast-container>:not(:last-child){margin-bottom:0!important}.ts-toast-container.top-right{top:1rem;right:1rem;align-items:flex-end}.ts-toast-container.top-left{top:1rem;left:1rem;align-items:flex-start}.ts-toast-container.top-center{top:1rem;left:50%;transform:translateX(-50%);align-items:center}.ts-toast-container.bottom-right{bottom:1rem;right:1rem;align-items:flex-end}.ts-toast-container.bottom-left{bottom:1rem;left:1rem;align-items:flex-start}.ts-toast-container.bottom-center{bottom:1rem;left:50%;transform:translateX(-50%);align-items:center}.ts-toast-container.center{top:50%;left:50%;transform:translate(-50%,-50%);align-items:center}.ts-toast-container .ts-toast{display:flex;align-items:center;gap:.75rem;background-color:var(--toast-bg,#fff);color:var(--toast-color,#000);padding:.75rem 1rem;border-radius:8px;border:1px solid var(--toast-border,#e5e7eb);box-shadow:var(--toast-shadow,0 10px 15px -3px rgba(0,0,0,.1));font-family:sans-serif;font-size:.95rem;pointer-events:all;position:relative;opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease;width:auto!important}.ts-toast.ts-toast-confirm{display:flex;align-items:center;justify-content:center;background-color:var(--toast-bg,#fff);color:var(--toast-color,#000);border:1px solid var(--toast-border,#e5e7eb);border-radius:12px;padding:16px 20px;box-shadow:var(--toast-shadow,0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1));transition:opacity .5s ease,transform .5s ease}.ts-toast.ts-toast-confirm .ts-toast-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center}.ts-toast.ts-toast-confirm .ts-toast-body{text-align:center}.ts-toast-actions{display:flex;gap:10px;justify-content:center;margin-top:12px}.ts-toast-input{width:100%;padding:8px 12px;border:1px solid var(--toast-border,#e5e7eb);border-radius:8px;font-family:inherit;font-size:.95rem;margin-top:12px;background:var(--toast-bg,#fff);color:var(--toast-color,#000);outline:0;transition:border-color .2s ease}.ts-toast-input:focus{border-color:#3b82f6}.ts-toast-container .ts-toast.ts-toast-show{opacity:1;transform:translateY(0)}@keyframes ts-toast-slide-left{from{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes ts-toast-slide-right{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes ts-toast-slide-top{from{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes ts-toast-slide-bottom{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes ts-toast-zoom-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes ts-toast-zoom-out{from{transform:scale(1)}to{transform:scale(0)}}@keyframes ts-toast-flip{from{transform:rotateY(90deg)}to{transform:rotateY(0)}}.ts-toast-container .ts-toast-icon{font-size:1.2rem}.ts-toast-container .ts-toast-success .ts-toast-icon{color:var(--toast-success-color,#66ee78)}.ts-toast-container .ts-toast-error .ts-toast-icon{color:var(--toast-error-color,#ef4444)}.ts-toast-container .ts-toast-loader{width:20px;height:20px;border:3px solid #f3f3f3;border-top:3px solid var(--toast-loader-color,#66ee78);border-radius:50%;animation:ts-toast-spin 1s linear infinite}@keyframes ts-toast-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.ts-toast-container .ts-toast-loader.done{animation:none;opacity:0;transition:opacity .5s ease}.ts-toast-container .ts-toast-icon{font-size:1.2rem;opacity:0;transition:opacity .5s ease}.ts-toast-container .ts-toast.ts-toast-show .ts-toast-icon{opacity:1}@keyframes progress-bar{0%{width:0%}100%{width:100%}}@keyframes ts-toast-slide-top-reverse{from{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes ts-toast-slide-bottom-reverse{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes ts-toast-slide-left-reverse{from{transform:translateX(0)}to{transform:translateX(-100%)}}@keyframes ts-toast-slide-right-reverse{from{transform:translateX(0)}to{transform:translateX(100%)}}.ts-toast.ts-toast-slide-out{opacity:0}.ts-toast-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:2147483646}.ts-toast-overlay.top-left{align-items:flex-start;justify-content:flex-start;padding:1rem}.ts-toast-overlay.top-center{align-items:flex-start;justify-content:center;padding:1rem}.ts-toast-overlay.top-right{align-items:flex-start;justify-content:flex-end;padding:1rem}.ts-toast-overlay.bottom-left{align-items:flex-end;justify-content:flex-start;padding:1rem}.ts-toast-overlay.bottom-center{align-items:flex-end;justify-content:center;padding:1rem}.ts-toast-overlay.bottom-right{align-items:flex-end;justify-content:flex-end;padding:1rem}.ts-toast-overlay.center{align-items:center;justify-content:center;padding:1rem}.ts-toast-d-flex{display:inline-flex;align-items:center}body.ts-toast-no-scroll{overflow:hidden}@keyframes ts-toast-progress{from{transform:scaleX(1)}to{transform:scaleX(0)}}.ts-toast-container .ts-toast-progress{position:absolute;left:0;right:0;bottom:0;height:3px;transform-origin:left center;border-radius:0 0 8px 8px;background:var(--toast-progress-color,currentColor);opacity:.35;pointer-events:none}.ts-toast-container .ts-toast-success .ts-toast-progress{background:var(--toast-success-color,#17a35c)}.ts-toast-container .ts-toast-error .ts-toast-progress{background:var(--toast-error-color,#ef4444)}.ts-toast-container .ts-toast-warning .ts-toast-progress{background:var(--toast-warning-color,#f0a020)}.ts-toast-container .ts-toast-info .ts-toast-progress{background:var(--toast-info-color,#3b82f6)}.ts-toast-container .ts-toast-action{order:-1;flex:none;appearance:none;border:0;background:0 0;color:var(--toast-action-color,#3b82f6);font:inherit;font-weight:600;padding:4px 8px;margin-left:4px;border-radius:6px;cursor:pointer}.ts-toast-container .ts-toast-action:hover{background:var(--toast-action-hover,rgba(59,130,246,.12))}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsirosgeorge/toastnotification",
-  "version": "5.4.0",
+  "version": "5.6.0",
   "description": "a toast notification plugin",
   "main": "toast.min.js",
   "module": "toast.module.js",
@@ -21,8 +21,9 @@
     "build:css": "cleancss -o assets/css/toast.min.css assets/css/toast.css",
     "build:js": "terser toast.js --compress --mangle --output toast.min.js",
     "build": "npm run sync:version && npm run build:module && npm run build:css && npm run build:js",
+    "version": "node scripts/stamp-changelog.mjs && npm run build && git add -A",
     "prepublishOnly": "npm run build",
-    "release": "npm version ${V:-patch} && npm publish --access public && git push origin main --follow-tags"
+    "release": "npm version ${V:-patch} && git push origin main --follow-tags"
   },
   "files": [
     "toast.js",

package/toast.d.ts

@@ -2,7 +2,9 @@ export type ToastType = 'info' | 'success' | 'warning' | 'error';
 
 export type ToastPosition =
   | 'top-left' | 'top-right' | 'top-center'
-  | 'bottom-left' | 'bottom-right' | 'bottom-center';
+  | 'bottom-left' | 'bottom-right' | 'bottom-center'
+  /** Dead centre of the viewport. Defaults to the zoom-in animation. */
+  | 'center';
 
 export type ToastAnimation =
   | 'slide-top' | 'slide-bottom' | 'slide-left' | 'slide-right'
@@ -16,6 +18,8 @@ export type ConfirmResult = boolean | string | null;
 export interface ToastElement extends HTMLDivElement {
   /** Present in confirm mode: resolves when the user confirms, cancels or dismisses. */
   result?: Promise<ConfirmResult>;
+  /** Dismiss this toast now. On a confirm dialog this settles as a cancel. */
+  close(): void;
 }
 
 export interface ToastOptions {
@@ -27,6 +31,17 @@ export interface ToastOptions {
   /** Emoji or text used instead of the bundled animated icon. */
   icon?: string | null;
   showLoader?: boolean;
+  /** Freeze the countdown while the pointer or keyboard focus is on the toast. */
+  pauseOnHover?: boolean;
+  /** Thin bar counting the remaining time down. Needs `duration > 0`. */
+  showProgress?: boolean;
+  /** Renders a button inside the toast, e.g. Undo. */
+  action?: ToastAction | null;
+  /**
+   * `message` is written as HTML by default, for backwards compatibility.
+   * Pass `false` to render it as plain text — do that for anything user-supplied.
+   */
+  allowHtml?: boolean;
   /** `'confirm'` (alias `'swal'`) renders a modal dialog instead of a toast. */
   mode?: 'alert' | 'confirm' | 'swal';
   dismissOnClick?: boolean;
@@ -48,6 +63,8 @@ export interface ConfirmOptions extends ToastOptions {
   cancelButtonColor?: string | null;
   useOverlay?: boolean;
   closeOnOverlayClick?: boolean;
+  /** Escape cancels the dialog. Defaults to true. */
+  closeOnEscape?: boolean;
   showClose?: boolean;
   /** Receives the input's value when `input` is set, otherwise `true`. */
   onConfirm?: (value: string | true, el: ToastElement) => void;
@@ -55,6 +72,21 @@ export interface ConfirmOptions extends ToastOptions {
   onResult?: (result: ConfirmResult, el: ToastElement) => void;
 }
 
+export interface ToastAction {
+  /** Button label. */
+  text: string;
+  /** Runs on click; the toast closes afterwards. */
+  onClick?: (el: ToastElement) => void;
+}
+
+export interface PromiseMessages<T = unknown> {
+  loading?: string;
+  /** A function receives the resolved value. */
+  success?: string | ((value: T) => string);
+  /** A function receives the rejection reason. */
+  error?: string | ((err: unknown) => string);
+}
+
 export interface LoadingHandle {
   update(message: string, options?: ToastOptions): void;
   close(): void;
@@ -74,6 +106,16 @@ export interface Toast {
    * and `null` on cancel/dismiss — so an empty submission is not read as a cancel.
    */
   confirm(message: string, options?: ConfirmOptions): Promise<ConfirmResult>;
+  /** Dismiss every toast on screen; open confirm dialogs settle as a cancel. */
+  dismissAll(): void;
+  /**
+   * Shows a loading toast that becomes the success or error message when
+   * `promise` settles. Resolves with the promise's value, and re-throws its
+   * rejection so the caller still handles the failure.
+   */
+  promise<T>(promise: Promise<T>, messages?: PromiseMessages<T>, options?: ToastOptions): Promise<T>;
+  /** Options applied to every toast unless the call overrides them. */
+  defaults: ToastOptions;
 }
 
 declare const toast: Toast;