@tsirosgeorge/toastnotification 5.3.3 → 5.5.0

package/Readme.md

@@ -8,7 +8,7 @@ A lightweight, customizable, and dependency-free toast notification system writt
 
 ## 📦 Include package via cdn
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.3.3/toast.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@tsirosgeorge/toastnotification@5.4.0/toast.min.js"></script>
 ```
 
 ## 📦 Include package via npm
@@ -41,8 +41,12 @@ toast('Data saved successfully!', {
 ```javascript
 toast.success('Saved!');
 toast.error('Failed!');
+toast.warning('Careful!');
+toast.info('Heads up.');
 ```
 
+Each helper returns the toast element, so you can hand it to `toast.update()` later.
+
 ### ⚠️ Confirm (SweetAlert-like)
 - Promise API
 ```javascript
@@ -75,13 +79,19 @@ const name = await toast.confirm('Enter your name:', {
   confirmText: 'Submit',
   cancelText: 'Cancel',
 });
-if (name) {
-  console.log('Hello', name);
+if (name !== null) {
+  console.log('Hello', name); // may be '' if they submitted an empty field
 } else {
   console.log('Cancelled');
 }
 ```
 
+> **Resolution contract.** Without `input`, `toast.confirm()` resolves `true` on confirm and
+> `false` on cancel. With `input`, it resolves the field's **string** value on confirm — which
+> may be `''` — and `null` on cancel. Check against `null`, not truthiness, or an empty
+> submission reads as a cancel. Cancelling, clicking the backdrop and the `(×)` button all
+> resolve the promise.
+
 - Callback API
 ```javascript
 toast('Are you sure?', {
@@ -93,6 +103,24 @@ toast('Are you sure?', {
 });
 ```
 
+### ⌨️ 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' });
@@ -104,12 +132,14 @@ 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.    |
+| `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 */

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}

package/package.json

@@ -1,33 +1,41 @@
 {
   "name": "@tsirosgeorge/toastnotification",
-  "version": "5.3.3",
+  "version": "5.5.0",
   "description": "a toast notification plugin",
   "main": "toast.min.js",
   "module": "toast.module.js",
   "exports": {
     ".": {
+      "types": "./toast.d.ts",
       "import": "./toast.module.js",
       "require": "./toast.min.js"
-    }
+    },
+    "./assets/css/toast.css": "./assets/css/toast.css",
+    "./assets/css/toast.min.css": "./assets/css/toast.min.css",
+    "./package.json": "./package.json"
   },
   "scripts": {
-      "test": "echo \"Error: no test specified\" && exit 1",
-      "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 build:css && npm run build:js",
-      "prepublishOnly": "npm run build",
-      "release": "npm version && git push origin main --follow-tags && npm publish --access public",
-      "publish": "npm run build && git add -A && git commit -m \"Release v5.3.2: Add LICENSE file and license documentation\" && git tag v5.3.2 && git push origin main --tags && npm publish --access public"
+    "test": "tsc --noEmit --strict --skipLibCheck toast.d.ts",
+    "sync:version": "node scripts/sync-version.mjs",
+    "build:module": "node scripts/build-module.mjs",
+    "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": "npm run build && git add -A",
+    "prepublishOnly": "npm run build",
+    "release": "npm version ${V:-patch} && git push origin main --follow-tags"
   },
   "files": [
     "toast.js",
     "toast.min.js",
     "toast.module.js",
+    "toast.d.ts",
     "assets/css/toast.css",
     "assets/css/toast.min.css",
     "assets/img/",
+    "!assets/img/old/",
     "LICENSE",
-    "README.md"
+    "Readme.md"
   ],
   "repository": {
     "type": "git",
@@ -50,6 +58,14 @@
   "homepage": "https://github.com/tsirosgeorge/toast-notification#readme",
   "devDependencies": {
     "clean-css-cli": "^5.6.3",
-    "terser": "^5.40.0"
-  }
-}
+    "terser": "^5.40.0",
+    "typescript": "^5.9.3"
+  },
+  "types": "toast.d.ts",
+  "sideEffects": [
+    "./toast.js",
+    "./toast.min.js",
+    "./toast.module.js",
+    "*.css"
+  ]
+}

package/toast.d.ts

@@ -0,0 +1,102 @@
+export type ToastType = 'info' | 'success' | 'warning' | 'error';
+
+export type ToastPosition =
+  | 'top-left' | 'top-right' | 'top-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'
+  | 'zoom-in' | 'zoom-out' | 'flip';
+
+export type ToastInput = 'text' | 'email' | 'password' | 'number' | 'textarea' | false;
+
+/** Value handed to a confirm dialog's callbacks and promise. */
+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 {
+  position?: ToastPosition;
+  animation?: ToastAnimation;
+  type?: ToastType;
+  /** Auto-dismiss delay in ms. `0` keeps the toast until it is closed. */
+  duration?: number;
+  /** Emoji or text used instead of the bundled animated icon. */
+  icon?: string | null;
+  showLoader?: boolean;
+  /**
+   * `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;
+  onClick?: (el: ToastElement) => void;
+  onShow?: (el: ToastElement) => void;
+  onDismiss?: (el: ToastElement) => void;
+}
+
+export interface ConfirmOptions extends ToastOptions {
+  title?: string | null;
+  confirmText?: string;
+  cancelText?: string;
+  input?: ToastInput;
+  inputPlaceholder?: string;
+  inputValue?: string;
+  confirmButtonBg?: string | null;
+  confirmButtonColor?: string | null;
+  cancelButtonBg?: string | null;
+  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;
+  onCancel?: (el: ToastElement) => void;
+  onResult?: (result: ConfirmResult, el: ToastElement) => void;
+}
+
+export interface LoadingHandle {
+  update(message: string, options?: ToastOptions): void;
+  close(): void;
+}
+
+export interface Toast {
+  (message: string, options?: ToastOptions | ConfirmOptions): ToastElement;
+  success(message: string, options?: ToastOptions): ToastElement;
+  error(message: string, options?: ToastOptions): ToastElement;
+  warning(message: string, options?: ToastOptions): ToastElement;
+  info(message: string, options?: ToastOptions): ToastElement;
+  update(el: ToastElement, message: string, options?: ToastOptions): void;
+  loading(message: string, options?: ToastOptions): LoadingHandle;
+  /**
+   * Without `input`: resolves `true` on confirm, `false` on cancel/dismiss.
+   * With `input`: resolves the input's string value on confirm (possibly `''`),
+   * 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;
+}
+
+declare const toast: Toast;
+export default toast;
+export { toast };
+
+declare global {
+  interface Window {
+    toast: Toast;
+    /** Set before loading the script to skip the CDN stylesheet injection. */
+    TS_TOAST_NO_CSS?: boolean;
+  }
+}