@justeattakeaway/pie-toast-provider 0.7.45 → 0.8.0

package/README.md

@@ -19,6 +19,7 @@
   - [Events](#events)
 - [Usage Examples](#usage-examples)
   - [Creating Toasts with `toaster`](#creating-toasts-with-toaster)
+  - [Multiple Providers](#multiple-providers)
 - [Questions and Support](#questions-and-support)
 - [Contributing](#contributing)
 
@@ -56,9 +57,8 @@ This component does not have any slots. All content is controlled through proper
 ## Usage Examples
 
 The usage guideline is:
-
-- Place `pie-toast-provider` at the root level of your application or page.
-- Use the `toaster` utility from any where in your app to dynamically create toasts.
+- Place `pie-toast-provider` wherever toasts should appear (e.g. root of your application, page or inside a modal).
+- Use the `toaster` utility to dynamically create toasts from anywhere in your app.
 
 **For HTML:**
 
@@ -107,7 +107,49 @@ toaster.create({
 To clear all active and queued toasts:
 
 ```js
-toaster.clearToasts();
+toaster.clearAll();
+```
+
+### Multiple Providers
+
+You can use multiple `pie-toast-provider` instances in the same page or application (e.g. one at the root level and one inside a modal). Each provider maintains its own independent toast queue and logic.
+
+When `providerId` is not specified, the toaster utility resolves the target provider automatically:
+- If there is only one provider in the DOM, it is always used.
+- If there are multiple providers, the provider in the nearest containing scope of the currently focused element is used. For example, if a button inside a modal triggers a toast, the modal's own provider is selected.
+
+For explicit control when using multiple providers, give each one a native `id` attribute and pass the `providerId` option when creating or clearing toasts:
+
+```html
+<pie-toast-provider id="main"></pie-toast-provider>
+
+<pie-modal>
+  <pie-toast-provider id="modal" position="bottom-center"></pie-toast-provider>
+</pie-modal>
+```
+
+```js
+import { toaster } from '@justeattakeaway/pie-webc/components/toast-provider.js';
+
+// Target the main page provider
+toaster.create({
+  message: 'Saved successfully!',
+  variant: 'success',
+  providerId: 'main',
+});
+
+// Target the modal provider
+toaster.create({
+  message: 'Form submitted!',
+  variant: 'success',
+  providerId: 'modal',
+});
+```
+
+To clear toasts for a specific provider:
+
+```js
+toaster.clearAll('modal');
 ```
 
 ## Questions and Support

package/custom-elements.json

@@ -257,7 +257,7 @@
           "type": {
             "text": "object"
           },
-          "default": "{ _getToastProvider (): PieToastProvider | null { const toastProviders = document.querySelectorAll('pie-toast-provider'); if (toastProviders.length === 0) { console.error('The pie-toast component requires a pie-toast-provider element present in the DOM.'); return null; } if (toastProviders.length > 1) { console.error('Multiple pie-toast-provider are found in the DOM. Only one provider is supported currently and should be registered at the root of the app.'); return null; } return toastProviders[0]; }, create (toast: ExtendedToastProps) { const toastProvider = this._getToastProvider(); if (!toastProvider) return; toastProvider.createToast(toast); }, clearAll () { const toastProvider = this._getToastProvider(); if (!toastProvider) return; toastProvider.clearToasts(); }, }",
+          "default": "{ _getToastProvider (providerId?: string): PieToastProvider | null { // 1. Explicit ID lookup if (providerId) { const el = document.getElementById(providerId); if (!el || el.tagName.toLowerCase() !== 'pie-toast-provider') { console.error(`No pie-toast-provider found with id \"${providerId}\".`); return null; } return el as PieToastProvider; } // 2. Find the provider in the nearest containing scope of the focused element (e.g. a button inside a modal with its own provider) let el: Element | null = document.activeElement; while (el) { const parent = el.parentElement; if (parent) { const provider = parent.querySelector(':scope > pie-toast-provider') as PieToastProvider | null; if (provider) return provider; } el = parent; } // 3. Sole provider in the DOM const providers = document.querySelectorAll('pie-toast-provider'); if (providers.length === 0) { console.error('No pie-toast-provider found in the DOM. Add a <pie-toast-provider> element to your page or at the root of your application.'); return null; } if (providers.length > 1) { console.error('Multiple pie-toast-provider elements found. Use the `providerId` option to target a specific provider.'); return null; } return providers[0] as PieToastProvider; }, create (toast: ExtendedToastProps) { const toastProvider = this._getToastProvider(toast.providerId); if (!toastProvider) return; toastProvider.createToast(toast); }, clearAll (providerId?: string) { const toastProvider = this._getToastProvider(providerId); if (!toastProvider) return; toastProvider.clearToasts(); }, }",
           "description": "Singleton toaster interface for global access."
         }
       ],

package/dist/index.d.ts

@@ -10,6 +10,11 @@ export declare type DefaultProps = ComponentDefaultProps<ToastProviderProps>;
 export declare const defaultProps: DefaultProps;
 
 export declare interface ExtendedToastProps extends ToastProps {
+    /**
+     * The ID of the toast provider to target.
+     * If not specified, resolves to the provider in the nearest containing scope of the focused element, or the sole provider in the DOM.
+     */
+    providerId?: string;
     /**
      * Triggered when the user interacts with the close icon or when the toast auto dismiss.
      */
@@ -92,9 +97,9 @@ export declare const PRIORITY_ORDER: {
  * Singleton toaster interface for global access.
  */
 export declare const toaster: {
-    _getToastProvider(): PieToastProvider | null;
+    _getToastProvider(providerId?: string): PieToastProvider | null;
     create(toast: ExtendedToastProps): void;
-    clearAll(): void;
+    clearAll(providerId?: string): void;
 };
 
 export declare interface ToastProviderProps {

package/dist/index.js

@@ -1,17 +1,17 @@
-import { LitElement as g, unsafeCSS as T, nothing as b, html as u } from "lit";
-import { property as h, state as _ } from "lit/decorators.js";
-import { ifDefined as y } from "lit/directives/if-defined.js";
-import { classMap as m } from "lit/directives/class-map.js";
+import { LitElement as _, unsafeCSS as T, nothing as y, html as v } from "lit";
+import { property as h, state as g } from "lit/decorators.js";
+import { ifDefined as b } from "lit/directives/if-defined.js";
+import { classMap as f } from "lit/directives/class-map.js";
 import { validPropertyValues as P, safeCustomElement as $, dispatchCustomEvent as x } from "@justeattakeaway/pie-webc-core";
-import { defaultProps as f } from "@justeattakeaway/pie-toast";
-const l = class l extends g {
+import { defaultProps as m } from "@justeattakeaway/pie-toast";
+const l = class l extends _ {
   willUpdate() {
     this.getAttribute("v") || this.setAttribute("v", l.v);
   }
 };
-l.v = "0.7.45";
+l.v = "0.8.0";
 let d = l;
-const A = "*,*:after,*:before{box-sizing:inherit}:root{--pie-animation-slide-translate-start: -100%}.pie-animation--slide-in{animation:pie-animation-slide-in var(--dt-motion-timing-200) var(--dt-motion-easing-out)}.pie-animation--slide-out{animation:pie-animation-slide-out var(--dt-motion-timing-100) var(--dt-motion-easing-in)}@keyframes pie-animation-slide-in{0%{transform:translate(var(--pie-animation-slide-translate-start))}to{transform:translate(0)}}@keyframes pie-animation-slide-out{0%{transform:translate(0)}to{transform:translate(var(--pie-animation-slide-translate-start))}}:host{--toast-provider-z-index: var(--dt-z-index-toast);--toast-provider-offset: var(--dt-spacing-d)}@media (min-width: 769px){:host{--toast-provider-offset: var(--dt-spacing-e)}}.c-toast-provider{position:fixed;z-index:var(--toast-provider-z-index)}.c-toast-provider.c-toast-provider--default{inset-inline-start:var(--toast-provider-offset);inset-block-end:var(--toast-provider-offset)}.c-toast-provider.c-toast-provider--default:dir(rtl){--pie-animation-slide-translate-start: 100%}.c-toast-provider.c-toast-provider--bottom-left{--pie-animation-slide-translate-start: -100%;left:var(--toast-provider-offset);bottom:var(--toast-provider-offset)}.c-toast-provider.c-toast-provider--bottom-right{--pie-animation-slide-translate-start: 100%;right:var(--toast-provider-offset);bottom:var(--toast-provider-offset)}.c-toast-provider.c-toast-provider--bottom-center{--pie-animation-slide-translate-start: 0, 100%;left:50%;bottom:var(--toast-provider-offset);transform:translate(-50%)}", O = {
+const A = "*,*:after,*:before{box-sizing:inherit}:root{--pie-animation-slide-translate-start: -100%}.pie-animation--slide-in{animation:pie-animation-slide-in var(--dt-motion-timing-200) var(--dt-motion-easing-out)}.pie-animation--slide-out{animation:pie-animation-slide-out var(--dt-motion-timing-100) var(--dt-motion-easing-in)}@keyframes pie-animation-slide-in{0%{transform:translate(var(--pie-animation-slide-translate-start))}to{transform:translate(0)}}@keyframes pie-animation-slide-out{0%{transform:translate(0)}to{transform:translate(var(--pie-animation-slide-translate-start))}}:host{--toast-provider-z-index: var(--dt-z-index-toast);--toast-provider-offset: var(--dt-spacing-d)}@media (min-width: 769px){:host{--toast-provider-offset: var(--dt-spacing-e)}}.c-toast-provider{position:fixed;z-index:var(--toast-provider-z-index)}.c-toast-provider.c-toast-provider--default{inset-inline-start:var(--toast-provider-offset);inset-block-end:var(--toast-provider-offset)}.c-toast-provider.c-toast-provider--default:dir(rtl){--pie-animation-slide-translate-start: 100%}.c-toast-provider.c-toast-provider--bottom-left{--pie-animation-slide-translate-start: -100%;left:var(--toast-provider-offset);bottom:var(--toast-provider-offset)}.c-toast-provider.c-toast-provider--bottom-right{--pie-animation-slide-translate-start: 100%;right:var(--toast-provider-offset);bottom:var(--toast-provider-offset)}.c-toast-provider.c-toast-provider--bottom-center{--pie-animation-slide-translate-start: 0, 100%;left:50%;bottom:var(--toast-provider-offset);transform:translate(-50%)}", w = {
   "error-actionable": 1,
   error: 2,
   "warning-actionable": 3,
@@ -22,27 +22,40 @@ const A = "*,*:after,*:before{box-sizing:inherit}:root{--pie-animation-slide-tra
   success: 8,
   info: 9,
   neutral: 10
-}, w = ["default", "bottom-left", "bottom-right", "bottom-center"], c = {
+}, E = ["default", "bottom-left", "bottom-right", "bottom-center"], c = {
   options: {},
   position: "default"
-}, D = "pie-toast-provider-queue-update", j = {
-  _getToastProvider() {
-    const o = document.querySelectorAll("pie-toast-provider");
-    return o.length === 0 ? (console.error("The pie-toast component requires a pie-toast-provider element present in the DOM."), null) : o.length > 1 ? (console.error("Multiple pie-toast-provider are found in the DOM. Only one provider is supported currently and should be registered at the root of the app."), null) : o[0];
+}, O = "pie-toast-provider-queue-update", I = {
+  _getToastProvider(o) {
+    if (o) {
+      const e = document.getElementById(o);
+      return !e || e.tagName.toLowerCase() !== "pie-toast-provider" ? (console.error(`No pie-toast-provider found with id "${o}".`), null) : e;
+    }
+    let t = document.activeElement;
+    for (; t; ) {
+      const e = t.parentElement;
+      if (e) {
+        const s = e.querySelector(":scope > pie-toast-provider");
+        if (s) return s;
+      }
+      t = e;
+    }
+    const i = document.querySelectorAll("pie-toast-provider");
+    return i.length === 0 ? (console.error("No pie-toast-provider found in the DOM. Add a <pie-toast-provider> element to your page or at the root of your application."), null) : i.length > 1 ? (console.error("Multiple pie-toast-provider elements found. Use the `providerId` option to target a specific provider."), null) : i[0];
   },
   create(o) {
-    const t = this._getToastProvider();
+    const t = this._getToastProvider(o.providerId);
     t && t.createToast(o);
   },
-  clearAll() {
-    const o = this._getToastProvider();
-    o && o.clearToasts();
+  clearAll(o) {
+    const t = this._getToastProvider(o);
+    t && t.clearToasts();
   }
 };
-var E = Object.defineProperty, S = Object.getOwnPropertyDescriptor, n = (o, t, e, i) => {
-  for (var s = i > 1 ? void 0 : i ? S(t, e) : t, p = o.length - 1, a; p >= 0; p--)
-    (a = o[p]) && (s = (i ? a(t, e, s) : a(s)) || s);
-  return i && s && E(t, e, s), s;
+var D = Object.defineProperty, S = Object.getOwnPropertyDescriptor, n = (o, t, i, e) => {
+  for (var s = e > 1 ? void 0 : e ? S(t, i) : t, p = o.length - 1, a; p >= 0; p--)
+    (a = o[p]) && (s = (e ? a(t, i, s) : a(s)) || s);
+  return e && s && D(t, i, s), s;
 };
 const C = "pie-toast-provider";
 let r = class extends d {
@@ -55,7 +68,7 @@ let r = class extends d {
   _dispatchQueueUpdateEvent() {
     x(
       this,
-      D,
+      O,
       this._toasts
     );
   }
@@ -65,9 +78,9 @@ let r = class extends d {
    * @param {boolean} hasAction - Whether the toast has an action.
    * @returns {number} - The priority based on the variant and action.
    */
-  getPriority(o = f.variant, t = !1) {
-    const e = `${o}${t ? "-actionable" : ""}`;
-    return O[e];
+  getPriority(o = m.variant, t = !1) {
+    const i = `${o}${t ? "-actionable" : ""}`;
+    return w[i];
   }
   /**
    * Handles the dismissal of the current toast and displays the next one in the queue (if any).
@@ -93,11 +106,11 @@ let r = class extends d {
    * @param {ToastProps} toast - The toast props to display.
    */
   createToast(o) {
-    const t = { ...f, ...this.options, ...o };
-    this._toasts = [...this._toasts, t].sort((e, i) => {
-      var a, v;
-      const s = this.getPriority(i.variant, !!((a = i.leadingAction) != null && a.text));
-      return this.getPriority(e.variant, !!((v = e.leadingAction) != null && v.text)) - s;
+    const t = { ...m, ...this.options, ...o };
+    this._toasts = [...this._toasts, t].sort((i, e) => {
+      var a, u;
+      const s = this.getPriority(e.variant, !!((a = e.leadingAction) != null && a.text));
+      return this.getPriority(i.variant, !!((u = i.leadingAction) != null && u.text)) - s;
     }), this._currentToast || this._showNextToast();
   }
   /**
@@ -111,27 +124,27 @@ let r = class extends d {
     const {
       position: o,
       _currentToast: t
-    } = this, e = {
+    } = this, i = {
       "c-toast-provider": !0,
       [`c-toast-provider--${o}`]: !0
-    }, i = {
+    }, e = {
       "pie-animation--slide-in": !!t,
       "pie-animation--slide-out": t === null
     };
-    return u`
+    return v`
         <div 
-            class=${m(e)}
+            class=${f(i)}
             data-test-id="pie-toast-provider">
-            ${t && u`
+            ${t && v`
                 <pie-toast
-                    class=${m(i)}
+                    class=${f(e)}
                     message="${t.message}"
-                    variant="${y(t.variant)}"
+                    variant="${b(t.variant)}"
                     ?isStrong="${t.isStrong}"
                     ?isDismissible="${t.isDismissible}"
                     ?isMultiline="${t.isMultiline}"
                     .leadingAction="${t.leadingAction}"
-                    .duration="${typeof t.duration > "u" ? b : t.duration}"
+                    .duration="${typeof t.duration > "u" ? y : t.duration}"
                     @pie-toast-close="${this._dismissToast}"
                     @pie-toast-open="${t.onPieToastOpen}"
                     @pie-toast-leading-action-click="${t.onPieToastLeadingActionClick}">
@@ -147,22 +160,22 @@ n([
 ], r.prototype, "options", 2);
 n([
   h({ type: String }),
-  P(C, w, c.position)
+  P(C, E, c.position)
 ], r.prototype, "position", 2);
 n([
-  _()
+  g()
 ], r.prototype, "_toasts", 2);
 n([
-  _()
+  g()
 ], r.prototype, "_currentToast", 2);
 r = n([
   $("pie-toast-provider")
 ], r);
 export {
-  D as ON_TOAST_PROVIDER_QUEUE_UPDATE_EVENT,
-  O as PRIORITY_ORDER,
+  O as ON_TOAST_PROVIDER_QUEUE_UPDATE_EVENT,
+  w as PRIORITY_ORDER,
   r as PieToastProvider,
   c as defaultProps,
-  w as positions,
-  j as toaster
+  E as positions,
+  I as toaster
 };

package/dist/react.d.ts

@@ -11,6 +11,11 @@ export declare type DefaultProps = ComponentDefaultProps<ToastProviderProps>;
 export declare const defaultProps: DefaultProps;
 
 export declare interface ExtendedToastProps extends ToastProps {
+    /**
+     * The ID of the toast provider to target.
+     * If not specified, resolves to the provider in the nearest containing scope of the focused element, or the sole provider in the DOM.
+     */
+    providerId?: string;
     /**
      * Triggered when the user interacts with the close icon or when the toast auto dismiss.
      */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-toast-provider",
   "description": "PIE Design System Toast Provider built using Web Components",
-  "version": "0.7.45",
+  "version": "0.8.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",

package/src/defs.ts

@@ -20,6 +20,12 @@ export type Priority = keyof typeof PRIORITY_ORDER;
 export const positions = ['default', 'bottom-left', 'bottom-right', 'bottom-center'] as const;
 
 export interface ExtendedToastProps extends ToastProps {
+    /**
+     * The ID of the toast provider to target.
+     * If not specified, resolves to the provider in the nearest containing scope of the focused element, or the sole provider in the DOM.
+     */
+    providerId?: string;
+
     /**
      * Triggered when the user interacts with the close icon or when the toast auto dismiss.
      */

package/src/toaster.ts

@@ -5,29 +5,53 @@ import { type ExtendedToastProps } from './defs';
  * Singleton toaster interface for global access.
  */
 export const toaster = {
-    _getToastProvider (): PieToastProvider | null {
-        const toastProviders = document.querySelectorAll('pie-toast-provider');
+    _getToastProvider (providerId?: string): PieToastProvider | null {
+        // 1. Explicit ID lookup
+        if (providerId) {
+            const el = document.getElementById(providerId);
 
-        if (toastProviders.length === 0) {
-            console.error('The pie-toast component requires a pie-toast-provider element present in the DOM.');
+            if (!el || el.tagName.toLowerCase() !== 'pie-toast-provider') {
+                console.error(`No pie-toast-provider found with id "${providerId}".`);
+                return null;
+            }
+
+            return el as PieToastProvider;
+        }
+
+        // 2. Find the provider in the nearest containing scope of the focused element (e.g. a button inside a modal with its own provider)
+        let el: Element | null = document.activeElement;
+        while (el) {
+            const parent = el.parentElement;
+            if (parent) {
+                const provider = parent.querySelector(':scope > pie-toast-provider') as PieToastProvider | null;
+                if (provider) return provider;
+            }
+            el = parent;
+        }
+
+        // 3. Sole provider in the DOM
+        const providers = document.querySelectorAll('pie-toast-provider');
+
+        if (providers.length === 0) {
+            console.error('No pie-toast-provider found in the DOM. Add a <pie-toast-provider> element to your page or at the root of your application.');
             return null;
         }
 
-        if (toastProviders.length > 1) {
-            console.error('Multiple pie-toast-provider are found in the DOM. Only one provider is supported currently and should be registered at the root of the app.');
+        if (providers.length > 1) {
+            console.error('Multiple pie-toast-provider elements found. Use the `providerId` option to target a specific provider.');
             return null;
         }
 
-        return toastProviders[0];
+        return providers[0] as PieToastProvider;
     },
     create (toast: ExtendedToastProps) {
-        const toastProvider = this._getToastProvider();
+        const toastProvider = this._getToastProvider(toast.providerId);
         if (!toastProvider) return;
 
         toastProvider.createToast(toast);
     },
-    clearAll () {
-        const toastProvider = this._getToastProvider();
+    clearAll (providerId?: string) {
+        const toastProvider = this._getToastProvider(providerId);
         if (!toastProvider) return;
 
         toastProvider.clearToasts();