@justeattakeaway/pie-toast-provider 1.2.2 → 1.3.0

package/dist/index.js

@@ -1,17 +1,19 @@
-import { LitElement as _, unsafeCSS as b, nothing as y, html as u } from "lit";
-import { property as h, state as g } from "lit/decorators.js";
-import { ifDefined as T } 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 m } from "@justeattakeaway/pie-toast";
-const l = class l extends _ {
+import { LitElement as g, unsafeCSS as T, nothing as b, html as v } from "lit";
+import { property as u, state as p } from "lit/decorators.js";
+import { ifDefined as y } from "lit/directives/if-defined.js";
+import { classMap as k } from "lit/directives/class-map.js";
+import { live as $ } from "lit/directives/live.js";
+import { repeat as f } from "lit/directives/repeat.js";
+import { validPropertyValues as w, safeCustomElement as x, dispatchCustomEvent as P } from "@justeattakeaway/pie-webc-core";
+import { defaultProps as _ } from "@justeattakeaway/pie-toast";
+const m = class m extends g {
   willUpdate() {
-    this.getAttribute("v") || this.setAttribute("v", l.v);
+    this.getAttribute("v") || this.setAttribute("v", m.v);
   }
 };
-l.v = "1.2.2";
-let d = l;
-const w = "*,*: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-position: fixed;--toast-provider-offset: var(--dt-spacing-d)}@media(min-width:769px){:host{--toast-provider-offset: var(--dt-spacing-e)}}.c-toast-provider{position:var(--toast-provider-position);z-index:var(--toast-provider-z-index)}.c-toast-provider-announcer{position:absolute;display:block;height:1px;width:1px;border:0;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;clip:rect(0,0,0,0);clip-path:inset(50%)}.c-toast-provider-announcer *{overflow:hidden}.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%)}", A = {
+m.v = "1.3.0";
+let h = m;
+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-position: fixed;--toast-provider-offset: var(--dt-spacing-d)}@media(min-width:769px){:host{--toast-provider-offset: var(--dt-spacing-e)}}.c-toast-provider{position:var(--toast-provider-position);z-index:var(--toast-provider-z-index);display:flex;flex-direction:column-reverse}.c-toast-provider-announcer{position:absolute;display:block;height:1px;width:1px;border:0;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;clip:rect(0,0,0,0);clip-path:inset(50%)}.c-toast-provider-announcer *{overflow:hidden}.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-item{display:grid;grid-template-rows:1fr;padding-block-start:var(--dt-spacing-d);transition:grid-template-rows var(--dt-motion-timing-200) var(--dt-motion-easing-in),padding-block-start var(--dt-motion-timing-200) var(--dt-motion-easing-in)}.c-toast-provider .c-toast-provider-item>pie-toast{min-block-size:0;overflow:hidden}.c-toast-provider .c-toast-provider-item--collapsing{grid-template-rows:0fr;padding-block-start:0}.c-toast-provider .c-toast-provider-item--collapsing>pie-toast{visibility:hidden}.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%)}", M = {
   "error-actionable": 1,
   error: 2,
   "warning-actionable": 3,
@@ -22,53 +24,72 @@ const w = "*,*:after,*:before{box-sizing:inherit}:root{--pie-animation-slide-tra
   success: 8,
   info: 9,
   neutral: 10
-}, E = ["default", "bottom-left", "bottom-right", "bottom-center"], c = {
+}, O = ["default", "bottom-left", "bottom-right", "bottom-center"], c = {
   options: {},
-  position: "default"
-}, 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;
+  position: "default",
+  isStacked: !1
+}, S = "pie-toast-provider-queue-update", F = 3, q = {
+  _getToastProvider(t) {
+    if (t) {
+      const e = document.getElementById(t);
+      return !e || e.tagName.toLowerCase() !== "pie-toast-provider" ? (console.error(`No pie-toast-provider found with id "${t}".`), null) : e;
     }
-    let t = document.activeElement;
-    for (; t; ) {
-      const e = t.parentElement;
+    let i = document.activeElement;
+    for (; i; ) {
+      const e = i.parentElement;
       if (e) {
-        const i = e.querySelector(":scope > pie-toast-provider");
-        if (i) return i;
+        const a = e.querySelector(":scope > pie-toast-provider");
+        if (a) return a;
       }
-      t = e;
+      i = e;
     }
-    const s = document.querySelectorAll("pie-toast-provider");
-    return s.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) : s.length > 1 ? (console.error("Multiple pie-toast-provider elements found. Use the `providerId` option to target a specific provider."), null) : s[0];
+    const o = document.querySelectorAll("pie-toast-provider");
+    return o.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) : o.length > 1 ? (console.error("Multiple pie-toast-provider elements found. Use the `providerId` option to target a specific provider."), null) : o[0];
   },
-  create(o) {
-    const t = this._getToastProvider(o.providerId);
-    t && t.createToast(o);
+  create(t) {
+    const i = this._getToastProvider(t.providerId);
+    i && i.createToast(t);
   },
-  clearAll(o) {
-    const t = this._getToastProvider(o);
-    t && t.clearToasts();
+  clearAll(t) {
+    const i = this._getToastProvider(t);
+    i && i.clearToasts();
   }
 };
-var D = Object.defineProperty, S = Object.getOwnPropertyDescriptor, p = (o, t, s, e) => {
-  for (var i = e > 1 ? void 0 : e ? S(t, s) : t, a = o.length - 1, n; a >= 0; a--)
-    (n = o[a]) && (i = (e ? n(t, s, i) : n(i)) || i);
-  return e && i && D(t, s, i), i;
+var C = Object.defineProperty, E = Object.getOwnPropertyDescriptor, n = (t, i, o, e) => {
+  for (var a = e > 1 ? void 0 : e ? E(i, o) : i, l = t.length - 1, s; l >= 0; l--)
+    (s = t[l]) && (a = (e ? s(i, o, a) : s(a)) || a);
+  return e && a && C(i, o, a), a;
 };
-const C = "pie-toast-provider";
-let r = class extends d {
+const D = "pie-toast-provider", z = 500;
+let r = class extends h {
   constructor() {
-    super(...arguments), this.options = c.options, this.position = c.position, this._toasts = [], this._currentToast = null;
+    super(...arguments), this.options = c.options, this.position = c.position, this.isStacked = c.isStacked, this._toasts = [], this._visibleToasts = [], this._dismissingToasts = [], this._collapsingToasts = [], this._announcements = [], this._motionFallbacks = /* @__PURE__ */ new Map();
   }
-  updated(o) {
-    o.has("_toasts") && this._dispatchQueueUpdateEvent();
+  disconnectedCallback() {
+    this._clearMotionFallbacks(), super.disconnectedCallback();
+  }
+  /**
+   * Replaces any pending fallback for `toast` with one that runs `advance`.
+   *
+   * Each phase supersedes the previous phase's fallback, so a toast only ever has one timer.
+   */
+  _scheduleMotionFallback(t, i) {
+    this._clearMotionFallback(t), this._motionFallbacks.set(t, setTimeout(i, z));
+  }
+  _clearMotionFallback(t) {
+    const i = this._motionFallbacks.get(t);
+    i && (clearTimeout(i), this._motionFallbacks.delete(t));
+  }
+  _clearMotionFallbacks() {
+    this._motionFallbacks.forEach((t) => clearTimeout(t)), this._motionFallbacks.clear();
+  }
+  updated(t) {
+    t.has("_toasts") && this._dispatchQueueUpdateEvent();
   }
   _dispatchQueueUpdateEvent() {
-    x(
+    P(
       this,
-      O,
+      S,
       this._toasts
     );
   }
@@ -78,113 +99,176 @@ 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 = m.variant, t = !1) {
-    const s = `${o}${t ? "-actionable" : ""}`;
-    return A[s];
+  getPriority(t = _.variant, i = !1) {
+    const o = `${t}${i ? "-actionable" : ""}`;
+    return M[o];
   }
   /**
-   * Handles the dismissal of the current toast and displays the next one in the queue (if any).
+   * Starts the slide-out animation for the dismissed toast.
    */
-  _dismissToast() {
-    var o, t;
-    (t = (o = this._currentToast) == null ? void 0 : o.onPieToastClose) == null || t.call(o), this._currentToast = null, requestAnimationFrame(() => {
-      this._showNextToast();
-    });
+  _dismissToast(t) {
+    var i;
+    this._dismissingToasts.includes(t) || ((i = t.onPieToastClose) == null || i.call(t), this._dismissingToasts = [...this._dismissingToasts, t], this._scheduleMotionFallback(t, () => this._finalizeDismiss(t)));
+  }
+  /**
+   * Forwards the toast's open event to the consumer.
+   *
+   * `isOpen` is bound with the `live` directive, so a toast that sets `isOpen` to false while
+   * dismissing is reopened on the next render in order to keep it visible for the slide-out
+   * animation. That reopen dispatches a second `pie-toast-open`, which is not a real open, so it
+   * is not forwarded.
+   */
+  _handleToastOpen(t) {
+    var i;
+    this._dismissingToasts.includes(t) || (i = t.onPieToastOpen) == null || i.call(t);
+  }
+  _getToastClass(t) {
+    return this._dismissingToasts.includes(t) ? "pie-animation--slide-out" : this._collapsingToasts.includes(t) ? "" : "pie-animation--slide-in";
+  }
+  _getToastDuration(t) {
+    return this._dismissingToasts.includes(t) || this._collapsingToasts.includes(t) ? null : typeof t.duration > "u" ? b : t.duration;
   }
   /**
-   * Displays the next toast in the queue, if available.
+   * Starts the height-collapse phase after the slide-out animation ends.
+   */
+  _finalizeDismiss(t) {
+    this._dismissingToasts.includes(t) && (this._dismissingToasts = this._dismissingToasts.filter((i) => i !== t), this._collapsingToasts = [...this._collapsingToasts, t], this._scheduleMotionFallback(t, () => this._finalizeCollapse(t)));
+  }
+  /**
+   * Called after the collapse transition ends. Removes the toast from DOM and promotes the next queued toast.
+   */
+  _finalizeCollapse(t) {
+    this._collapsingToasts.includes(t) && (this._clearMotionFallback(t), this._collapsingToasts = this._collapsingToasts.filter((i) => i !== t), this._visibleToasts = this._visibleToasts.filter((i) => i !== t), this._announcements = this._announcements.filter((i) => i !== t), this._showNextToast());
+  }
+  /**
+   * Fills the visible slots from the queue.
+   *
+   * The loop only ever adds toasts, so turning `isStacked` off while several are on screen
+   * does not remove any: the extras stay until they dismiss normally, then the provider
+   * settles back to one at a time.
    */
   _showNextToast() {
-    if (this._toasts.length > 0) {
-      const [o, ...t] = this._toasts;
-      this._currentToast = o, this._toasts = t;
-    } else
-      this._currentToast = null;
+    const t = this.isStacked ? F : 1;
+    for (; this._visibleToasts.length < t && this._toasts.length > 0; ) {
+      const [i, ...o] = this._toasts;
+      this._visibleToasts = [...this._visibleToasts, i], this._toasts = o, this._announcements = [...this._announcements, i];
+    }
   }
   /**
-   * Adds a new toast to the queue and triggers its display if no toast is currently active.
+   * Adds a new toast to the queue (sorted by priority) and fills visible slots.
    * @param {ToastProps} toast - The toast props to display.
    */
-  createToast(o) {
-    const t = { ...m, ...this.options, ...o };
-    this._toasts = [...this._toasts, t].sort((s, e) => {
-      var n, v;
-      const i = this.getPriority(e.variant, !!((n = e.leadingAction) != null && n.text));
-      return this.getPriority(s.variant, !!((v = s.leadingAction) != null && v.text)) - i;
-    }), this._currentToast || this._showNextToast();
+  createToast(t) {
+    const i = { ..._, ...this.options, ...t };
+    this._toasts = [...this._toasts, i].sort((o, e) => {
+      var s, d;
+      const a = this.getPriority(o.variant, !!((s = o.leadingAction) != null && s.text)), l = this.getPriority(e.variant, !!((d = e.leadingAction) != null && d.text));
+      return a - l;
+    }), this._showNextToast();
   }
   /**
-   *
-   * Clears all toasts from the queue and dismisses the currently visible toast.
+   * Clears all toasts from the queue and dismisses all visible toasts.
    */
   clearToasts() {
-    this._toasts = [], this._currentToast = null;
+    this._clearMotionFallbacks(), this._toasts = [], this._visibleToasts = [], this._dismissingToasts = [], this._collapsingToasts = [], this._announcements = [];
   }
   render() {
     const {
-      position: o,
-      _currentToast: t
-    } = this, s = {
+      position: t,
+      _visibleToasts: i
+    } = this, o = {
       "c-toast-provider": !0,
-      [`c-toast-provider--${o}`]: !0
-    }, e = {
-      "pie-animation--slide-in": !!t,
-      "pie-animation--slide-out": t === null
-    }, i = (t == null ? void 0 : t.variant) === "error", a = { ...t == null ? void 0 : t.aria, live: "off" };
-    return u`
+      [`c-toast-provider--${t}`]: !0
+    }, e = this._announcements.filter(({ variant: s }) => s !== "error"), a = this._announcements.filter(({ variant: s }) => s === "error"), l = (s) => f(
+      s,
+      (d) => d,
+      (d) => v`<div>${d.message}</div>`
+    );
+    return v`
         <div
-            class=${f(s)}
+            class=${k(o)}
             data-test-id="pie-toast-provider">
             <div
-                class="c-toast-provider-announcer is-visuallyHidden"
-                role="${i ? "alert" : "status"}"
-                aria-live="${i ? "assertive" : "polite"}"
-                aria-atomic="true"
+                class="c-toast-provider-announcer"
+                role="status"
+                aria-live="polite"
+                aria-atomic="false"
                 data-test-id="pie-toast-provider-announcer">
-                ${(t == null ? void 0 : t.message) ?? ""}
+                ${l(e)}
+            </div>
+            <div
+                class="c-toast-provider-announcer"
+                role="alert"
+                aria-live="assertive"
+                aria-atomic="false"
+                data-test-id="pie-toast-provider-announcer-assertive">
+                ${l(a)}
             </div>
-            ${t && u`
-                <pie-toast
-                    class=${f(e)}
-                    message="${t.message}"
-                    variant="${T(t.variant)}"
-                    ?isStrong="${t.isStrong}"
-                    ?isDismissible="${t.isDismissible}"
-                    ?isMultiline="${t.isMultiline}"
-                    .leadingAction="${t.leadingAction}"
-                    .aria="${a}"
-                    .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}">
-                </pie-toast>
-            `}
+            ${f(i, (s) => s, (s) => v`
+                <div
+                    class="c-toast-provider-item${this._collapsingToasts.includes(s) ? " c-toast-provider-item--collapsing" : ""}"
+                    @transitionend="${() => {
+      this._collapsingToasts.includes(s) && this._finalizeCollapse(s);
+    }}">
+                    <pie-toast
+                        class="${this._getToastClass(s)}"
+                        .isOpen="${$(!0)}"
+                        message="${s.message}"
+                        variant="${y(s.variant)}"
+                        ?isStrong="${s.isStrong}"
+                        ?isDismissible="${s.isDismissible}"
+                        ?isMultiline="${s.isMultiline}"
+                        .leadingAction="${s.leadingAction}"
+                        .aria="${{ ...s.aria, live: "off" }}"
+                        .duration="${this._getToastDuration(s)}"
+                        @pie-toast-close="${() => this._dismissToast(s)}"
+                        @pie-toast-open="${() => this._handleToastOpen(s)}"
+                        @pie-toast-leading-action-click="${s.onPieToastLeadingActionClick}"
+                        @animationend="${() => {
+      this._dismissingToasts.includes(s) && this._finalizeDismiss(s);
+    }}">
+                    </pie-toast>
+                </div>
+            `)}
             </div>
         `;
   }
 };
-r.styles = b(w);
-p([
-  h({ type: Object })
+r.styles = T(A);
+n([
+  u({ type: Object })
 ], r.prototype, "options", 2);
-p([
-  h({ type: String }),
-  P(C, E, c.position)
+n([
+  u({ type: String }),
+  w(D, O, c.position)
 ], r.prototype, "position", 2);
-p([
-  g()
+n([
+  u({ type: Boolean })
+], r.prototype, "isStacked", 2);
+n([
+  p()
 ], r.prototype, "_toasts", 2);
-p([
-  g()
-], r.prototype, "_currentToast", 2);
-r = p([
-  $("pie-toast-provider")
+n([
+  p()
+], r.prototype, "_visibleToasts", 2);
+n([
+  p()
+], r.prototype, "_dismissingToasts", 2);
+n([
+  p()
+], r.prototype, "_collapsingToasts", 2);
+n([
+  p()
+], r.prototype, "_announcements", 2);
+r = n([
+  x("pie-toast-provider")
 ], r);
 export {
-  O as ON_TOAST_PROVIDER_QUEUE_UPDATE_EVENT,
-  A as PRIORITY_ORDER,
+  F as MAX_VISIBLE_TOASTS,
+  S as ON_TOAST_PROVIDER_QUEUE_UPDATE_EVENT,
+  M as PRIORITY_ORDER,
   r as PieToastProvider,
   c as defaultProps,
-  E as positions,
-  I as toaster
+  O as positions,
+  q as toaster
 };

package/dist/react.d.ts

@@ -30,6 +30,15 @@ export declare interface ExtendedToastProps extends ToastProps {
     onPieToastLeadingActionClick?: (event: Event) => void;
 }
 
+/**
+ * The most toasts the provider will display at once when `isStacked` is true.
+ *
+ * With `isStacked` false (the default) a single toast is displayed regardless of this value.
+ *
+ * @constant
+ */
+export declare const MAX_VISIBLE_TOASTS = 3;
+
 /**
  * Event name for when the toast provider queue is updated.
  *
@@ -46,8 +55,29 @@ export declare const PieToastProvider: React_2.ForwardRefExoticComponent<React_2
 declare class PieToastProvider_2 extends PieElement implements ToastProviderProps {
     options: Partial<ExtendedToastProps>;
     position: "default" | "bottom-left" | "bottom-right" | "bottom-center";
+    isStacked: boolean;
     private _toasts;
-    private _currentToast;
+    private _visibleToasts;
+    private _dismissingToasts;
+    private _collapsingToasts;
+    /**
+     * Messages currently held in the live regions, in the order they became visible.
+     *
+     * The toast objects themselves are reused as entries: they are unique per `createToast`, which
+     * gives `repeat` a stable key and lets the entries be pruned by identity when a toast leaves.
+     */
+    private _announcements;
+    /** Pending {@link MOTION_FALLBACK_MS} timers, keyed by the toast they will advance. */
+    private _motionFallbacks;
+    disconnectedCallback(): void;
+    /**
+     * Replaces any pending fallback for `toast` with one that runs `advance`.
+     *
+     * Each phase supersedes the previous phase's fallback, so a toast only ever has one timer.
+     */
+    private _scheduleMotionFallback;
+    private _clearMotionFallback;
+    private _clearMotionFallbacks;
     updated(changedProperties: PropertyValues<this>): void;
     private _dispatchQueueUpdateEvent;
     /**
@@ -58,21 +88,43 @@ declare class PieToastProvider_2 extends PieElement implements ToastProviderProp
      */
     private getPriority;
     /**
-     * Handles the dismissal of the current toast and displays the next one in the queue (if any).
+     * Starts the slide-out animation for the dismissed toast.
      */
     private _dismissToast;
     /**
-     * Displays the next toast in the queue, if available.
+     * Forwards the toast's open event to the consumer.
+     *
+     * `isOpen` is bound with the `live` directive, so a toast that sets `isOpen` to false while
+     * dismissing is reopened on the next render in order to keep it visible for the slide-out
+     * animation. That reopen dispatches a second `pie-toast-open`, which is not a real open, so it
+     * is not forwarded.
+     */
+    private _handleToastOpen;
+    private _getToastClass;
+    private _getToastDuration;
+    /**
+     * Starts the height-collapse phase after the slide-out animation ends.
+     */
+    private _finalizeDismiss;
+    /**
+     * Called after the collapse transition ends. Removes the toast from DOM and promotes the next queued toast.
+     */
+    private _finalizeCollapse;
+    /**
+     * Fills the visible slots from the queue.
+     *
+     * The loop only ever adds toasts, so turning `isStacked` off while several are on screen
+     * does not remove any: the extras stay until they dismiss normally, then the provider
+     * settles back to one at a time.
      */
     private _showNextToast;
     /**
-     * Adds a new toast to the queue and triggers its display if no toast is currently active.
+     * Adds a new toast to the queue (sorted by priority) and fills visible slots.
      * @param {ToastProps} toast - The toast props to display.
      */
     createToast(toast: ExtendedToastProps): void;
     /**
-     *
-     * Clears all toasts from the queue and dismisses the currently visible toast.
+     * Clears all toasts from the queue and dismisses all visible toasts.
      */
     clearToasts(): void;
     render(): TemplateResult<1>;
@@ -112,6 +164,11 @@ export declare interface ToastProviderProps {
      * When set to `default`, the toasts will be positioned at bottom-left for RTL languages and bottom-right for LTR languages.
      */
     position?: typeof positions[number];
+    /**
+     * When true, up to 3 toasts are displayed at the same time in a vertical stack. When false,
+     * a single toast is displayed at a time and the rest wait in the queue.
+     */
+    isStacked?: boolean;
 }
 
 export { }

package/dist/react.js

@@ -1,7 +1,7 @@
 import * as e from "react";
 import { createComponent as o } from "@lit/react";
 import { PieToastProvider as t } from "./index.js";
-import { ON_TOAST_PROVIDER_QUEUE_UPDATE_EVENT as d, PRIORITY_ORDER as m, defaultProps as T, positions as v } from "./index.js";
+import { MAX_VISIBLE_TOASTS as T, ON_TOAST_PROVIDER_QUEUE_UPDATE_EVENT as d, PRIORITY_ORDER as m, defaultProps as v, positions as n } from "./index.js";
 const r = o({
   displayName: "PieToastProvider",
   elementClass: t,
@@ -13,9 +13,10 @@ const r = o({
   }
 }), s = r;
 export {
+  T as MAX_VISIBLE_TOASTS,
   d as ON_TOAST_PROVIDER_QUEUE_UPDATE_EVENT,
   m as PRIORITY_ORDER,
   s as PieToastProvider,
-  T as defaultProps,
-  v as positions
+  v as defaultProps,
+  n as positions
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-toast-provider",
   "description": "PIE Design System Toast Provider built using Web Components",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",
@@ -42,12 +42,12 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@justeattakeaway/pie-components-config": "0.21.4",
-    "@justeattakeaway/pie-css": "1.7.0",
-    "@justeattakeaway/pie-monorepo-utils": "0.9.9"
+    "@justeattakeaway/pie-css": "1.9.0",
+    "@justeattakeaway/pie-monorepo-utils": "0.9.10"
   },
   "dependencies": {
-    "@justeattakeaway/pie-toast": "1.2.2",
-    "@justeattakeaway/pie-webc-core": "20.0.0"
+    "@justeattakeaway/pie-toast": "1.2.4",
+    "@justeattakeaway/pie-webc-core": "22.0.0"
   },
   "customElements": "custom-elements.json",
   "sideEffects": [

package/src/defs.ts

@@ -53,6 +53,12 @@ export interface ToastProviderProps {
      * When set to `default`, the toasts will be positioned at bottom-left for RTL languages and bottom-right for LTR languages.
      */
     position?: typeof positions[number];
+
+    /**
+     * When true, up to 3 toasts are displayed at the same time in a vertical stack. When false,
+     * a single toast is displayed at a time and the rest wait in the queue.
+     */
+    isStacked?: boolean;
 }
 
 export type DefaultProps = ComponentDefaultProps<ToastProviderProps>;
@@ -60,6 +66,7 @@ export type DefaultProps = ComponentDefaultProps<ToastProviderProps>;
 export const defaultProps: DefaultProps = {
     options: {},
     position: 'default',
+    isStacked: false,
 };
 
 /**
@@ -69,3 +76,12 @@ export const defaultProps: DefaultProps = {
  */
 
 export const ON_TOAST_PROVIDER_QUEUE_UPDATE_EVENT = 'pie-toast-provider-queue-update';
+
+/**
+ * The most toasts the provider will display at once when `isStacked` is true.
+ *
+ * With `isStacked` false (the default) a single toast is displayed regardless of this value.
+ *
+ * @constant
+ */
+export const MAX_VISIBLE_TOASTS = 3;