@justeattakeaway/pie-toast 0.3.3 → 0.4.0

package/custom-elements.json

@@ -60,7 +60,7 @@
           "type": {
             "text": "DefaultProps"
           },
-          "default": "{\n    isOpen: true,\n    variant: 'neutral',\n    isStrong: false,\n    isDismissible: true,\n    isMultiline: false,\n}"
+          "default": "{\n    isOpen: true,\n    variant: 'neutral',\n    isStrong: false,\n    isDismissible: true,\n    isMultiline: false,\n    duration: 5000,\n}"
         }
       ],
       "exports": [
@@ -180,6 +180,12 @@
               "privacy": "public",
               "attribute": "leadingAction"
             },
+            {
+              "kind": "field",
+              "name": "duration",
+              "privacy": "public",
+              "attribute": "duration"
+            },
             {
               "kind": "field",
               "name": "actionButton",
@@ -187,6 +193,13 @@
                 "text": "HTMLElement | undefined"
               }
             },
+            {
+              "kind": "field",
+              "name": "closeButton",
+              "type": {
+                "text": "HTMLElement | undefined"
+              }
+            },
             {
               "kind": "field",
               "name": "_actionButtonOffset",
@@ -205,6 +218,36 @@
               "privacy": "private",
               "default": "0"
             },
+            {
+              "kind": "field",
+              "name": "_timeoutId",
+              "type": {
+                "text": "NodeJS.Timeout | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "_abortController",
+              "type": {
+                "text": "AbortController | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "method",
+              "name": "setAutoDismiss",
+              "privacy": "private",
+              "description": "Create a timeout function and set its id into a private attribute."
+            },
+            {
+              "kind": "method",
+              "name": "abortAndCleanEventListeners",
+              "privacy": "private",
+              "description": "If the _abortController is set, it aborts all event\nlisteners in this controller and the controller turns into null."
+            },
             {
               "kind": "method",
               "name": "getMessageMaxWidth",
@@ -246,6 +289,48 @@
               ],
               "description": "Calculates and returns the width of the message based on the toast properties."
             },
+            {
+              "kind": "method",
+              "name": "addListenersToElement",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "typeof this | HTMLElement | undefined"
+                  },
+                  "description": "The element to which the listeners will be added. It can be the current instance, an HTMLElement, or undefined."
+                },
+                {
+                  "name": "inEvent",
+                  "type": {
+                    "text": "keyof HTMLElementEventMap"
+                  },
+                  "description": "The event type to listen for when entering the element. (e.g., 'mouseenter', 'focusin')."
+                },
+                {
+                  "name": "outEvent",
+                  "type": {
+                    "text": "keyof HTMLElementEventMap"
+                  },
+                  "description": "The event type to listen for when leaving the element. (e.g., 'mouseleave', 'focusout')."
+                },
+                {
+                  "name": "abortSignal",
+                  "type": {
+                    "text": "AddEventListenerOptions['signal']"
+                  },
+                  "description": "An AbortSignal that can be used to remove the event listeners."
+                }
+              ],
+              "description": "Adds event listeners to the specified element for handling the auto dismiss behavior."
+            },
+            {
+              "kind": "method",
+              "name": "createAutoDismissEventListeners",
+              "privacy": "private",
+              "description": "It creates all event listeners to handle the auto-dismiss capability\nas well the controller responsible to remove the events when needed."
+            },
             {
               "kind": "method",
               "name": "handleActionClick",
@@ -385,6 +470,10 @@
                 "text": "ToastProps['leadingAction']"
               },
               "fieldName": "leadingAction"
+            },
+            {
+              "name": "duration",
+              "fieldName": "duration"
             }
           ],
           "mixins": [

package/dist/index.d.ts

@@ -2,7 +2,6 @@ import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
 import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
 import type { LitElement } from 'lit';
-import type { nothing } from 'lit';
 import type { PropertyValues } from 'lit';
 import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
 import type { TemplateResult } from 'lit';
@@ -58,10 +57,27 @@ export declare class PieToast extends PieToast_base implements ToastProps {
     isDismissible: boolean;
     isMultiline: boolean;
     leadingAction: ToastProps['leadingAction'];
+    duration: number | null;
     actionButton?: HTMLElement;
+    closeButton?: HTMLElement;
     private _actionButtonOffset;
     private _messageAreaMaxWidth;
+    private _timeoutId;
+    private _abortController;
     static styles: CSSResult;
+    /**
+     * Create a timeout function and set its id into a private attribute.
+     *
+     * @private
+     */
+    private setAutoDismiss;
+    /**
+     * If the _abortController is set, it aborts all event
+     * listeners in this controller and the controller turns into null.
+     *
+     * @private
+     */
+    private abortAndCleanEventListeners;
     /**
      * Calculates and returns the width of the message based on the toast properties.
      *
@@ -73,9 +89,29 @@ export declare class PieToast extends PieToast_base implements ToastProps {
      * @returns {number} - The width of the message in pixels.
      */
     private getMessageMaxWidth;
+    /**
+     * Adds event listeners to the specified element for handling the auto dismiss behavior.
+     *
+     * @param {typeof this | HTMLElement | undefined} element - The element to which the listeners will be added. It can be the current instance, an HTMLElement, or undefined.
+     * @param {keyof HTMLElementEventMap} inEvent - The event type to listen for when entering the element. (e.g., 'mouseenter', 'focusin').
+     * @param {keyof HTMLElementEventMap} outEvent - The event type to listen for when leaving the element. (e.g., 'mouseleave', 'focusout').
+     * @param {AddEventListenerOptions['signal']} abortSignal - An AbortSignal that can be used to remove the event listeners.
+     *
+     * @private
+     */
+    private addListenersToElement;
+    /**
+     * It creates all event listeners to handle the auto-dismiss capability
+     * as well the controller responsible to remove the events when needed.
+     *
+     * @private
+     */
+    private createAutoDismissEventListeners;
     /**
      * Lifecycle method executed when component is updated.
      * It dispatches an event if toast is opened.
+     * It adds event listeners when toast is opened and if the duration is not null
+     * It aborts all event listeners when toast is closed.
      * It calculates _messageAreaMaxWidth
      */
     protected updated(_changedProperties: PropertyValues<this>): Promise<void>;
@@ -146,7 +182,7 @@ export declare class PieToast extends PieToast_base implements ToastProps {
      * @private
      */
     private shouldNotUseInverseBtnVariant;
-    render(): TemplateResult<1> | typeof nothing;
+    render(): TemplateResult<1>;
 }
 
 declare const PieToast_base: GenericConstructor<RTLInterface> & typeof LitElement;
@@ -180,6 +216,12 @@ export declare interface ToastProps {
      * The leading action for the toast.
      */
     leadingAction?: ActionProps;
+    /**
+     * Sets the duration of the toast in milliseconds before it auto-dismisses.
+     * If the value is null auto-dismiss is disabled
+     * If the value is not provided it auto-dismisses after 5 seconds (5000 milliseconds)
+     */
+    duration?: number | null;
 }
 
 export declare const variants: readonly ["neutral", "info", "warning", "success", "error"];

package/dist/index.js

@@ -1,7 +1,7 @@
-import { LitElement as y, html as c, nothing as l, unsafeCSS as w } from "lit";
-import { property as h, query as O } from "lit/decorators.js";
-import { classMap as b } from "lit/directives/class-map.js";
-import { RtlMixin as A, dispatchCustomEvent as v, validPropertyValues as M, defineCustomElement as B } from "@justeattakeaway/pie-webc-core";
+import { LitElement as C, unsafeCSS as w, html as l, nothing as d } from "lit";
+import { property as u, query as y } from "lit/decorators.js";
+import { classMap as $ } from "lit/directives/class-map.js";
+import { RtlMixin as O, dispatchCustomEvent as f, validPropertyValues as E, defineCustomElement as _ } from "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-icon-button";
 import "@justeattakeaway/pie-icons-webc/dist/IconClose.js";
 import "@justeattakeaway/pie-icons-webc/dist/IconInfoCircle.js";
@@ -9,22 +9,41 @@ import "@justeattakeaway/pie-icons-webc/dist/IconAlertCircle.js";
 import "@justeattakeaway/pie-icons-webc/dist/IconAlertTriangle.js";
 import "@justeattakeaway/pie-icons-webc/dist/IconCheckCircle.js";
 import "@justeattakeaway/pie-button";
-const C = `*,*:after,*:before{box-sizing:inherit}.c-toast{--toast-border-radius: var(--dt-radius-rounded-b);--toast-background-color: var(--dt-color-container-inverse);--toast-font-color: var(--dt-color-content-inverse);--toast-font-size: calc(var(--dt-font-body-s-size) * 1px);--toast-line-height: calc(var(--dt-font-body-s-line-height) * 1px);--toast-icon-fill: var(--dt-color-content-default);--toast-message-max-width: 100%;display:flex;flex-direction:column;justify-content:center;min-height:48px;max-height:122px;min-width:300px;max-width:420px;padding:var(--dt-spacing-a) var(--dt-spacing-c) var(--dt-spacing-a) var(--dt-spacing-d);border-radius:var(--toast-border-radius);gap:var(--dt-spacing-a);background-color:var(--toast-background-color);box-shadow:var(--dt-elevation-03);color:var(--toast-font-color);font-size:var(--toast-font-size);line-height:var(--toast-line-height)}.c-toast--info{--toast-icon-fill: var(--dt-color-support-info-inverse)}.c-toast--info.c-toast--strong{--toast-background-color: var(--dt-color-support-info);--toast-icon-fill: var(--dt-color-content-inverse)}.c-toast--warning{--toast-icon-fill: var(--dt-color-support-warning-inverse)}.c-toast--warning.c-toast--strong{--toast-background-color: var(--dt-color-support-warning);--toast-icon-fill: var(--dt-color-content-dark);--toast-font-color: var(--dt-color-content-dark)}.c-toast--success{--toast-icon-fill: var(--dt-color-support-positive-inverse)}.c-toast--success.c-toast--strong{--toast-background-color: var(--dt-color-support-positive);--toast-icon-fill: var(--dt-color-content-inverse)}.c-toast--error{--toast-icon-fill: var(--dt-color-support-error-inverse)}.c-toast--error.c-toast--strong{--toast-background-color: var(--dt-color-support-error);--toast-icon-fill: var(--dt-color-content-inverse)}.c-toast-contentArea{display:flex;gap:var(--dt-spacing-b);justify-content:space-between}.c-toast-messageArea{display:flex;align-items:center;gap:var(--dt-spacing-b);padding:calc(var(--dt-spacing-03) / 2) 0}.c-toast-messageArea span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:var(--toast-message-max-width)}.c-toast-messageArea.c-toast--multiline{align-items:flex-start}.c-toast-messageArea.c-toast--multiline span{max-height:60px;white-space:inherit;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.c-toast-actionsArea{display:flex;gap:var(--dt-spacing-b)}.c-toast-footer{display:flex;justify-content:flex-end}.c-toast-icon{color:var(--toast-icon-fill)}
-`, _ = ["neutral", "info", "warning", "success", "error"], i = "pie-toast", a = "c-toast", N = `${i}-close`, k = `${i}-open`, I = `${i}-leading-action-click`, g = {
+const k = "*,*:after,*:before{box-sizing:inherit}.c-toast{--toast-border-radius: var(--dt-radius-rounded-b);--toast-background-color: var(--dt-color-container-inverse);--toast-font-color: var(--dt-color-content-inverse);--toast-font-size: calc(var(--dt-font-body-s-size) * 1px);--toast-line-height: calc(var(--dt-font-body-s-line-height) * 1px);--toast-icon-fill: var(--dt-color-content-default);--toast-message-max-width: 100%;display:flex;flex-direction:column;justify-content:center;min-height:48px;max-height:122px;min-width:300px;max-width:420px;padding:var(--dt-spacing-a) var(--dt-spacing-c) var(--dt-spacing-a) var(--dt-spacing-d);border-radius:var(--toast-border-radius);gap:var(--dt-spacing-a);background-color:var(--toast-background-color);box-shadow:var(--dt-elevation-03);color:var(--toast-font-color);font-size:var(--toast-font-size);line-height:var(--toast-line-height);transition-property:all;transition-duration:var(--dt-motion-timing-100);transition-timing-function:var(--dt-motion-easing-in)}.c-toast--animate-in{animation-duration:var(--dt-motion-timing-200);animation-name:animate-in;animation-timing-function:var(--dt-motion-easing-in);transform:translate(0)}.c-toast--animate-out{animation-duration:var(--dt-motion-timing-100);animation-name:animate-out;animation-timing-function:var(--dt-motion-easing-out);transform:translate(100%);opacity:0}.c-toast--info{--toast-icon-fill: var(--dt-color-support-info-inverse)}.c-toast--info.c-toast--strong{--toast-background-color: var(--dt-color-support-info);--toast-icon-fill: var(--dt-color-content-inverse)}.c-toast--warning{--toast-icon-fill: var(--dt-color-support-warning-inverse)}.c-toast--warning.c-toast--strong{--toast-background-color: var(--dt-color-support-warning);--toast-icon-fill: var(--dt-color-content-dark);--toast-font-color: var(--dt-color-content-dark)}.c-toast--success{--toast-icon-fill: var(--dt-color-support-positive-inverse)}.c-toast--success.c-toast--strong{--toast-background-color: var(--dt-color-support-positive);--toast-icon-fill: var(--dt-color-content-inverse)}.c-toast--error{--toast-icon-fill: var(--dt-color-support-error-inverse)}.c-toast--error.c-toast--strong{--toast-background-color: var(--dt-color-support-error);--toast-icon-fill: var(--dt-color-content-inverse)}.c-toast-contentArea{display:flex;gap:var(--dt-spacing-b);justify-content:space-between}.c-toast-messageArea{display:flex;align-items:center;gap:var(--dt-spacing-b);padding:calc(var(--dt-spacing-03) / 2) 0}.c-toast-messageArea span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:var(--toast-message-max-width)}.c-toast-messageArea.c-toast--multiline{align-items:flex-start}.c-toast-messageArea.c-toast--multiline span{max-height:60px;white-space:inherit;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.c-toast-actionsArea{display:flex;gap:var(--dt-spacing-b)}.c-toast-footer{display:flex;justify-content:flex-end}.c-toast-icon{color:var(--toast-icon-fill)}@keyframes animate-in{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes animate-out{0%{transform:translate(0)}to{transform:translate(100%)}}", B = ["neutral", "info", "warning", "success", "error"], o = "pie-toast", s = "c-toast", M = `${o}-close`, I = `${o}-open`, T = `${o}-leading-action-click`, h = {
   isOpen: !0,
   variant: "neutral",
   isStrong: !1,
   isDismissible: !0,
-  isMultiline: !1
+  isMultiline: !1,
+  duration: 5e3
 };
-var S = Object.defineProperty, T = Object.getOwnPropertyDescriptor, p = (f, t, s, o) => {
-  for (var n = o > 1 ? void 0 : o ? T(t, s) : t, e = f.length - 1, d; e >= 0; e--)
-    (d = f[e]) && (n = (o ? d(t, s, n) : d(n)) || n);
-  return o && n && S(t, s, n), n;
+var L = Object.defineProperty, c = (v, t, i, n) => {
+  for (var e = void 0, r = v.length - 1, p; r >= 0; r--)
+    (p = v[r]) && (e = p(t, i, e) || e);
+  return e && L(t, i, e), e;
 };
-class r extends A(y) {
+const g = class g extends O(C) {
   constructor() {
-    super(...arguments), this.message = "", this.isOpen = g.isOpen, this.variant = g.variant, this.isStrong = g.isStrong, this.isDismissible = g.isDismissible, this.isMultiline = g.isMultiline, this._actionButtonOffset = 0, this._messageAreaMaxWidth = 0;
+    super(...arguments), this.message = "", this.isOpen = h.isOpen, this.variant = h.variant, this.isStrong = h.isStrong, this.isDismissible = h.isDismissible, this.isMultiline = h.isMultiline, this.duration = h.duration, this._actionButtonOffset = 0, this._messageAreaMaxWidth = 0, this._timeoutId = null, this._abortController = null;
+  }
+  /**
+   * Create a timeout function and set its id into a private attribute.
+   *
+   * @private
+   */
+  setAutoDismiss() {
+    this.duration !== null && (this._timeoutId = setTimeout(() => {
+      this.closeToastComponent();
+    }, this.duration));
+  }
+  /**
+   * If the _abortController is set, it aborts all event
+   * listeners in this controller and the controller turns into null.
+   *
+   * @private
+   */
+  abortAndCleanEventListeners() {
+    this._abortController && (this._abortController.abort(), this._abortController = null);
   }
   /**
    * Calculates and returns the width of the message based on the toast properties.
@@ -36,20 +55,50 @@ class r extends A(y) {
    *
    * @returns {number} - The width of the message in pixels.
    */
-  getMessageMaxWidth(t, s, o, n) {
-    let u = 0;
-    return t && (u += 20 + 8), !s && o && (u += this._actionButtonOffset + 8), n && (u += 32 + 8), 392 - u;
+  getMessageMaxWidth(t, i, n, e) {
+    let m = 0;
+    return t && (m += 28), !i && n && (m += this._actionButtonOffset + 8), e && (m += 40), 392 - m;
+  }
+  /**
+   * Adds event listeners to the specified element for handling the auto dismiss behavior.
+   *
+   * @param {typeof this | HTMLElement | undefined} element - The element to which the listeners will be added. It can be the current instance, an HTMLElement, or undefined.
+   * @param {keyof HTMLElementEventMap} inEvent - The event type to listen for when entering the element. (e.g., 'mouseenter', 'focusin').
+   * @param {keyof HTMLElementEventMap} outEvent - The event type to listen for when leaving the element. (e.g., 'mouseleave', 'focusout').
+   * @param {AddEventListenerOptions['signal']} abortSignal - An AbortSignal that can be used to remove the event listeners.
+   *
+   * @private
+   */
+  addListenersToElement(t, i, n, e) {
+    t && (t.addEventListener(i, () => {
+      this._timeoutId && clearTimeout(this._timeoutId);
+    }, { signal: e }), t.addEventListener(n, () => {
+      this.setAutoDismiss();
+    }, { signal: e }));
+  }
+  /**
+   * It creates all event listeners to handle the auto-dismiss capability
+   * as well the controller responsible to remove the events when needed.
+   *
+   * @private
+   */
+  createAutoDismissEventListeners() {
+    this._abortController = new AbortController(), this.setAutoDismiss();
+    const { signal: t } = this._abortController;
+    this.addListenersToElement(this.actionButton, "focus", "focusout", t), this.addListenersToElement(this.closeButton, "focus", "focusout", t), this.addListenersToElement(this, "mouseover", "mouseout", t);
   }
   /**
    * Lifecycle method executed when component is updated.
    * It dispatches an event if toast is opened.
+   * It adds event listeners when toast is opened and if the duration is not null
+   * It aborts all event listeners when toast is closed.
    * It calculates _messageAreaMaxWidth
    */
   async updated(t) {
-    var o;
-    t.has("isOpen") && this.isOpen && v(this, k, { targetNotification: this }), await this.updateComplete, this.actionButton && (this._actionButtonOffset = this.actionButton.offsetWidth);
-    const s = this.variantHasIcon(this.variant);
-    this._messageAreaMaxWidth = this.getMessageMaxWidth(s, this.isMultiline, !!((o = this.leadingAction) != null && o.text), this.isDismissible), (t.has("variant") || t.has("isStrong") || t.has("message") || t.has("isDismissible") || t.has("isMultiline") || t.has("leadingAction")) && this.requestUpdate();
+    var n;
+    t.has("isOpen") && this.isOpen && (f(this, I, { targetNotification: this }), this.duration !== null && this.createAutoDismissEventListeners()), t.has("isOpen") && !this.isOpen && this.abortAndCleanEventListeners(), await this.updateComplete, this.actionButton && (this._actionButtonOffset = this.actionButton.offsetWidth);
+    const i = this.variantHasIcon(this.variant);
+    this._messageAreaMaxWidth = this.getMessageMaxWidth(i, this.isMultiline, !!((n = this.leadingAction) != null && n.text), this.isDismissible), (t.has("variant") || t.has("isStrong") || t.has("message") || t.has("isDismissible") || t.has("isMultiline") || t.has("leadingAction") || t.has("duration")) && this.requestUpdate();
   }
   /**
    * It handle the action button action.
@@ -57,7 +106,7 @@ class r extends A(y) {
    * @private
    */
   handleActionClick() {
-    v(this, I, { targetNotification: this });
+    f(this, T, { targetNotification: this });
   }
   /**
    * Render the action button depending on action type and its action.
@@ -68,16 +117,16 @@ class r extends A(y) {
    * @private
    */
   renderActionButton(t) {
-    const { text: s, ariaLabel: o } = t;
-    return c`
+    const { text: i, ariaLabel: n } = t;
+    return l`
             <pie-button
                 variant="${this.shouldNotUseInverseBtnVariant() ? "ghost" : "ghost-inverse"}"
                 size="xsmall"
-                aria-label="${o || l}"
+                aria-label="${n || d}"
                 @click="${() => this.handleActionClick()}"
-                data-test-id="${i}-leading-action"
+                data-test-id="${o}-leading-action"
                 type="button">
-                ${s}
+                ${i}
             </pie-button>
         `;
   }
@@ -90,9 +139,9 @@ class r extends A(y) {
    */
   renderFooter() {
     const { leadingAction: t } = this;
-    return c`
-            <footer class="${a}-footer" data-test-id="${i}-footer" >
-                ${t ? this.renderActionButton(t) : l}
+    return l`
+            <footer class="${s}-footer" data-test-id="${o}-footer" >
+                ${t ? this.renderActionButton(t) : d}
             </footer>
         `;
   }
@@ -103,11 +152,11 @@ class r extends A(y) {
    * @private
    */
   renderCloseButton() {
-    return c`
+    return l`
             <pie-icon-button
                 variant="${this.shouldNotUseInverseBtnVariant() ? "ghost-secondary" : "ghost-inverse"}"
                 size="xsmall"
-                data-test-id="${i}-close"
+                data-test-id="${o}-close"
                 @click="${this.closeToastComponent}">
                 <icon-close></icon-close>
             </pie-icon-button>`;
@@ -121,9 +170,9 @@ class r extends A(y) {
    *
    * @private
    */
-  renderMessage(t, s) {
-    return c`
-            <span style="--toast-message-max-width: ${s}px" data-test-id="${i}-message">
+  renderMessage(t, i) {
+    return l`
+            <span style="--toast-message-max-width: ${i}px" data-test-id="${o}-message">
                 ${t}
             </span>
         `;
@@ -135,7 +184,7 @@ class r extends A(y) {
    * @private
    */
   closeToastComponent() {
-    this.isOpen = !1, v(this, N, { targetNotification: this });
+    this.isOpen = !1, f(this, M, { targetNotification: this }), this.abortAndCleanEventListeners();
   }
   /**
    * Util method that returns an icon from a variant that has default icon.
@@ -145,15 +194,15 @@ class r extends A(y) {
   getVariantIcon() {
     switch (this.variant) {
       case "info":
-        return c`<icon-info-circle class="${a}-icon" size="s" data-test-id="${i}-heading-icon-info"></icon-info-circle>`;
+        return l`<icon-info-circle class="${s}-icon" size="s" data-test-id="${o}-heading-icon-info"></icon-info-circle>`;
       case "success":
-        return c`<icon-check-circle class="${a}-icon" size="s" data-test-id="${i}-heading-icon-success"></icon-check-circle>`;
+        return l`<icon-check-circle class="${s}-icon" size="s" data-test-id="${o}-heading-icon-success"></icon-check-circle>`;
       case "warning":
-        return c`<icon-alert-triangle class="${a}-icon" size="s" data-test-id="${i}-heading-icon-warning"></icon-alert-triangle>`;
+        return l`<icon-alert-triangle class="${s}-icon" size="s" data-test-id="${o}-heading-icon-warning"></icon-alert-triangle>`;
       case "error":
-        return c`<icon-alert-circle class="${a}-icon" size="s" data-test-id="${i}-heading-icon-error"></icon-alert-circle>`;
+        return l`<icon-alert-circle class="${s}-icon" size="s" data-test-id="${o}-heading-icon-error"></icon-alert-circle>`;
       default:
-        return l;
+        return d;
     }
   }
   /**
@@ -177,74 +226,84 @@ class r extends A(y) {
   render() {
     const {
       isOpen: t,
-      variant: s,
-      message: o,
-      isDismissible: n,
-      leadingAction: e,
-      isMultiline: d,
-      isStrong: m,
+      variant: i,
+      message: n,
+      isDismissible: e,
+      leadingAction: r,
+      isMultiline: p,
+      isStrong: b,
       _messageAreaMaxWidth: x
-    } = this;
-    if (!t)
-      return l;
-    const u = {
-      [a]: !0,
-      [`${a}--${s}`]: !0,
-      [`${a}--strong`]: m
-    }, $ = {
-      [`${a}-messageArea`]: !0,
-      [`${a}--multiline`]: d
+    } = this, m = {
+      [s]: !0,
+      [`${s}--${i}`]: !0,
+      [`${s}--strong`]: b,
+      [`${s}--animate-in`]: t,
+      [`${s}--animate-out`]: !t
+    }, A = {
+      [`${s}-messageArea`]: !0,
+      [`${s}--multiline`]: p
     };
-    return c`
-            <div data-test-id="${i}" class="${b(u)}">
-                <div class="${a}-contentArea">
-                    <div class="${b($)}">
-                        ${this.variantHasIcon(s) ? this.getVariantIcon() : l}
-                        ${o === "" ? l : this.renderMessage(o, x)} 
+    return l`
+            <div 
+                data-test-id="${o}" 
+                class="${$(m)}" 
+                aria-live="${i === "error" ? "assertive" : "polite"}"
+            >
+                <div class="${s}-contentArea">
+                    <div class="${$(A)}">
+                        ${this.variantHasIcon(i) ? this.getVariantIcon() : d}
+                        ${n === "" ? d : this.renderMessage(n, x)}
                     </div>
-                    <div class="${a}-actionsArea">
-                        ${!d && (e != null && e.text) ? this.renderActionButton(e) : l}
-                        ${n ? this.renderCloseButton() : l}
+                    <div class="${s}-actionsArea">
+                        ${!p && (r != null && r.text) ? this.renderActionButton(r) : d}
+                        ${e ? this.renderCloseButton() : d}
                     </div>
                 </div>
-                ${d && (e != null && e.text) ? this.renderFooter() : l}
+                ${p && (r != null && r.text) ? this.renderFooter() : d}
             </div>`;
   }
-}
-r.styles = w(C);
-p([
-  h()
-], r.prototype, "message", 2);
-p([
-  h({ type: Boolean })
-], r.prototype, "isOpen", 2);
-p([
-  h(),
-  M(i, _, g.variant)
-], r.prototype, "variant", 2);
-p([
-  h({ type: Boolean })
-], r.prototype, "isStrong", 2);
-p([
-  h({ type: Boolean })
-], r.prototype, "isDismissible", 2);
-p([
-  h({ type: Boolean })
-], r.prototype, "isMultiline", 2);
-p([
-  h({ type: Object })
-], r.prototype, "leadingAction", 2);
-p([
-  O("pie-button")
-], r.prototype, "actionButton", 2);
-B(i, r);
+};
+g.styles = w(k);
+let a = g;
+c([
+  u()
+], a.prototype, "message");
+c([
+  u({ type: Boolean })
+], a.prototype, "isOpen");
+c([
+  u(),
+  E(o, B, h.variant)
+], a.prototype, "variant");
+c([
+  u({ type: Boolean })
+], a.prototype, "isStrong");
+c([
+  u({ type: Boolean })
+], a.prototype, "isDismissible");
+c([
+  u({ type: Boolean })
+], a.prototype, "isMultiline");
+c([
+  u({ type: Object })
+], a.prototype, "leadingAction");
+c([
+  u({ type: Number })
+], a.prototype, "duration");
+c([
+  y("pie-button")
+], a.prototype, "actionButton");
+c([
+  y("pie-icon-button")
+], a.prototype, "closeButton");
+_(o, a);
 export {
-  N as ON_TOAST_CLOSE_EVENT,
-  I as ON_TOAST_LEADING_ACTION_CLICK_EVENT,
-  k as ON_TOAST_OPEN_EVENT,
-  r as PieToast,
-  a as componentClass,
-  i as componentSelector,
-  g as defaultProps,
-  _ as variants
+  M as ON_TOAST_CLOSE_EVENT,
+  T as ON_TOAST_LEADING_ACTION_CLICK_EVENT,
+  I as ON_TOAST_OPEN_EVENT,
+  a as PieToast,
+  s as componentClass,
+  o as componentSelector,
+  h as defaultProps,
+  B as variants
 };

package/dist/react.d.ts

@@ -2,7 +2,6 @@ import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
 import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
 import type { LitElement } from 'lit';
-import type { nothing } from 'lit';
 import type { PropertyValues } from 'lit';
 import * as React_2 from 'react';
 import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
@@ -61,10 +60,27 @@ declare class PieToast_2 extends PieToast_base implements ToastProps {
     isDismissible: boolean;
     isMultiline: boolean;
     leadingAction: ToastProps['leadingAction'];
+    duration: number | null;
     actionButton?: HTMLElement;
+    closeButton?: HTMLElement;
     private _actionButtonOffset;
     private _messageAreaMaxWidth;
+    private _timeoutId;
+    private _abortController;
     static styles: CSSResult;
+    /**
+     * Create a timeout function and set its id into a private attribute.
+     *
+     * @private
+     */
+    private setAutoDismiss;
+    /**
+     * If the _abortController is set, it aborts all event
+     * listeners in this controller and the controller turns into null.
+     *
+     * @private
+     */
+    private abortAndCleanEventListeners;
     /**
      * Calculates and returns the width of the message based on the toast properties.
      *
@@ -76,9 +92,29 @@ declare class PieToast_2 extends PieToast_base implements ToastProps {
      * @returns {number} - The width of the message in pixels.
      */
     private getMessageMaxWidth;
+    /**
+     * Adds event listeners to the specified element for handling the auto dismiss behavior.
+     *
+     * @param {typeof this | HTMLElement | undefined} element - The element to which the listeners will be added. It can be the current instance, an HTMLElement, or undefined.
+     * @param {keyof HTMLElementEventMap} inEvent - The event type to listen for when entering the element. (e.g., 'mouseenter', 'focusin').
+     * @param {keyof HTMLElementEventMap} outEvent - The event type to listen for when leaving the element. (e.g., 'mouseleave', 'focusout').
+     * @param {AddEventListenerOptions['signal']} abortSignal - An AbortSignal that can be used to remove the event listeners.
+     *
+     * @private
+     */
+    private addListenersToElement;
+    /**
+     * It creates all event listeners to handle the auto-dismiss capability
+     * as well the controller responsible to remove the events when needed.
+     *
+     * @private
+     */
+    private createAutoDismissEventListeners;
     /**
      * Lifecycle method executed when component is updated.
      * It dispatches an event if toast is opened.
+     * It adds event listeners when toast is opened and if the duration is not null
+     * It aborts all event listeners when toast is closed.
      * It calculates _messageAreaMaxWidth
      */
     protected updated(_changedProperties: PropertyValues<this>): Promise<void>;
@@ -149,7 +185,7 @@ declare class PieToast_2 extends PieToast_base implements ToastProps {
      * @private
      */
     private shouldNotUseInverseBtnVariant;
-    render(): TemplateResult<1> | typeof nothing;
+    render(): TemplateResult<1>;
 }
 
 declare const PieToast_base: GenericConstructor<RTLInterface> & typeof LitElement;
@@ -185,6 +221,12 @@ export declare interface ToastProps {
      * The leading action for the toast.
      */
     leadingAction?: ActionProps;
+    /**
+     * Sets the duration of the toast in milliseconds before it auto-dismisses.
+     * If the value is null auto-dismiss is disabled
+     * If the value is not provided it auto-dismisses after 5 seconds (5000 milliseconds)
+     */
+    duration?: number | null;
 }
 
 export declare const variants: readonly ["neutral", "info", "warning", "success", "error"];

package/dist/react.js

@@ -1,32 +1,21 @@
 import * as t from "react";
-import { createComponent as o } from "@lit/react";
-import { PieToast as e } from "./index.js";
-import { ON_TOAST_CLOSE_EVENT as A, ON_TOAST_LEADING_ACTION_CLICK_EVENT as S, ON_TOAST_OPEN_EVENT as I, componentClass as L, componentSelector as V, defaultProps as d, variants as v } from "./index.js";
-import "lit";
-import "lit/decorators.js";
-import "lit/directives/class-map.js";
-import "@justeattakeaway/pie-webc-core";
-import "@justeattakeaway/pie-icon-button";
-import "@justeattakeaway/pie-icons-webc/dist/IconClose.js";
-import "@justeattakeaway/pie-icons-webc/dist/IconInfoCircle.js";
-import "@justeattakeaway/pie-icons-webc/dist/IconAlertCircle.js";
-import "@justeattakeaway/pie-icons-webc/dist/IconAlertTriangle.js";
-import "@justeattakeaway/pie-icons-webc/dist/IconCheckCircle.js";
-import "@justeattakeaway/pie-button";
-const r = o({
+import { createComponent as e } from "@lit/react";
+import { PieToast as o } from "./index.js";
+import { ON_TOAST_CLOSE_EVENT as n, ON_TOAST_LEADING_ACTION_CLICK_EVENT as p, ON_TOAST_OPEN_EVENT as N, componentClass as _, componentSelector as c, defaultProps as E, variants as O } from "./index.js";
+const a = e({
   displayName: "PieToast",
-  elementClass: e,
+  elementClass: o,
   react: t,
   tagName: "pie-toast",
   events: {}
-}), P = r;
+}), r = a;
 export {
-  A as ON_TOAST_CLOSE_EVENT,
-  S as ON_TOAST_LEADING_ACTION_CLICK_EVENT,
-  I as ON_TOAST_OPEN_EVENT,
-  P as PieToast,
-  L as componentClass,
-  V as componentSelector,
-  d as defaultProps,
-  v as variants
+  n as ON_TOAST_CLOSE_EVENT,
+  p as ON_TOAST_LEADING_ACTION_CLICK_EVENT,
+  N as ON_TOAST_OPEN_EVENT,
+  r as PieToast,
+  _ as componentClass,
+  c as componentSelector,
+  E as defaultProps,
+  O as variants
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-toast",
   "description": "PIE Design System Toast built using Web Components",
-  "version": "0.3.3",
+  "version": "0.4.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -37,14 +37,14 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
     "@justeattakeaway/pie-components-config": "0.18.0",
-    "@justeattakeaway/pie-css": "0.12.1",
+    "@justeattakeaway/pie-css": "0.13.1",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-button": "0.49.1",
-    "@justeattakeaway/pie-icon-button": "0.28.12",
-    "@justeattakeaway/pie-icons-webc": "0.25.1",
-    "@justeattakeaway/pie-webc-core": "0.24.0"
+    "@justeattakeaway/pie-button": "0.49.3",
+    "@justeattakeaway/pie-icon-button": "0.28.14",
+    "@justeattakeaway/pie-icons-webc": "0.25.3",
+    "@justeattakeaway/pie-webc-core": "0.24.2"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/defs-react.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 /**
  * TODO: Verify if ReactBaseType can be set as a more specific React interface
  * Use the React IntrinsicElements interface to find how to map standard HTML elements to existing React Interfaces

package/src/defs.ts

@@ -44,6 +44,13 @@ export interface ToastProps {
    * The leading action for the toast.
    */
   leadingAction?: ActionProps;
+
+  /**
+   * Sets the duration of the toast in milliseconds before it auto-dismisses.
+   * If the value is null auto-dismiss is disabled
+   * If the value is not provided it auto-dismisses after 5 seconds (5000 milliseconds)
+   */
+  duration?: number | null;
 }
 
 export const componentSelector = 'pie-toast';
@@ -78,4 +85,5 @@ export const defaultProps: DefaultProps = {
     isStrong: false,
     isDismissible: true,
     isMultiline: false,
+    duration: 5000,
 };

package/src/index.ts

@@ -24,10 +24,10 @@ import '@justeattakeaway/pie-button';
 
 import styles from './toast.scss?inline';
 import {
-    ToastProps,
+    type ToastProps,
     componentSelector,
     componentClass,
-    ActionProps,
+    type ActionProps,
     ON_TOAST_CLOSE_EVENT,
     ON_TOAST_OPEN_EVENT,
     ON_TOAST_LEADING_ACTION_CLICK_EVENT,
@@ -64,15 +64,52 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps {
     @property({ type: Object })
     public leadingAction: ToastProps['leadingAction'];
 
+    @property({ type: Number })
+    public duration = defaultProps.duration;
+
     @query('pie-button') actionButton?: HTMLElement;
 
+    @query('pie-icon-button') closeButton?: HTMLElement;
+
     private _actionButtonOffset = 0;
 
     private _messageAreaMaxWidth = 0;
 
+    private _timeoutId: NodeJS.Timeout | null = null;
+
+    private _abortController: AbortController | null = null;
+
     // Renders a `CSSResult` generated from SCSS by Vite
     static styles = unsafeCSS(styles);
 
+    /**
+     * Create a timeout function and set its id into a private attribute.
+     *
+     * @private
+     */
+    private setAutoDismiss () {
+        if (this.duration === null) {
+            return;
+        }
+
+        this._timeoutId = setTimeout(() => {
+            this.closeToastComponent();
+        }, this.duration);
+    }
+
+    /**
+     * If the _abortController is set, it aborts all event
+     * listeners in this controller and the controller turns into null.
+     *
+     * @private
+     */
+    private abortAndCleanEventListeners () {
+        if (this._abortController) {
+            this._abortController.abort();
+            this._abortController = null;
+        }
+    }
+
     /**
      * Calculates and returns the width of the message based on the toast properties.
      *
@@ -111,16 +148,76 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps {
         return toastMaxWidthWithoutPadding - offset;
     }
 
+    /**
+     * Adds event listeners to the specified element for handling the auto dismiss behavior.
+     *
+     * @param {typeof this | HTMLElement | undefined} element - The element to which the listeners will be added. It can be the current instance, an HTMLElement, or undefined.
+     * @param {keyof HTMLElementEventMap} inEvent - The event type to listen for when entering the element. (e.g., 'mouseenter', 'focusin').
+     * @param {keyof HTMLElementEventMap} outEvent - The event type to listen for when leaving the element. (e.g., 'mouseleave', 'focusout').
+     * @param {AddEventListenerOptions['signal']} abortSignal - An AbortSignal that can be used to remove the event listeners.
+     *
+     * @private
+     */
+    private addListenersToElement (
+        element: typeof this | HTMLElement | undefined,
+        inEvent: keyof HTMLElementEventMap,
+        outEvent: keyof HTMLElementEventMap,
+        abortSignal: AddEventListenerOptions['signal'],
+    ) {
+        if (element) {
+            element.addEventListener(inEvent, () => {
+                if (this._timeoutId) {
+                    clearTimeout(this._timeoutId);
+                }
+            }, { signal: abortSignal });
+            element.addEventListener(outEvent, () => {
+                this.setAutoDismiss();
+            }, { signal: abortSignal });
+        }
+    }
+
+    /**
+     * It creates all event listeners to handle the auto-dismiss capability
+     * as well the controller responsible to remove the events when needed.
+     *
+     * @private
+     */
+    private createAutoDismissEventListeners () {
+        this._abortController = new AbortController();
+
+        this.setAutoDismiss();
+
+        const { signal } = this._abortController;
+
+        this.addListenersToElement(this.actionButton, 'focus', 'focusout', signal);
+        this.addListenersToElement(this.closeButton, 'focus', 'focusout', signal);
+        this.addListenersToElement(this, 'mouseover', 'mouseout', signal);
+    }
+
     /**
      * Lifecycle method executed when component is updated.
      * It dispatches an event if toast is opened.
+     * It adds event listeners when toast is opened and if the duration is not null
+     * It aborts all event listeners when toast is closed.
      * It calculates _messageAreaMaxWidth
      */
     protected async updated (_changedProperties: PropertyValues<this>) {
         if (_changedProperties.has('isOpen') && this.isOpen) {
             dispatchCustomEvent(this, ON_TOAST_OPEN_EVENT, { targetNotification: this });
+
+            if (this.duration !== null) {
+                this.createAutoDismissEventListeners();
+            }
+        }
+
+        if (_changedProperties.has('isOpen') && !this.isOpen) {
+            this.abortAndCleanEventListeners();
         }
 
+        // This lifecycle method is async on purpose because we
+        // need to wait for the component to complete its rendering
+        // so we can calculate _messageAreaMaxWidth based on
+        // existing components such as icons and action buttons.
         await this.updateComplete;
 
         if (this.actionButton) {
@@ -131,13 +228,19 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps {
 
         this._messageAreaMaxWidth = this.getMessageMaxWidth(hasIcon, this.isMultiline, !!this.leadingAction?.text, this.isDismissible);
 
+        // It checks if there are changes on one of the properties
+        // below and requests a new update in order to repeat the
+        // lifecycle and perform new calculations.
+        // This will make sure that all components will re-render
+        // properly on Storybook.
         if (
             _changedProperties.has('variant') ||
             _changedProperties.has('isStrong') ||
             _changedProperties.has('message') ||
             _changedProperties.has('isDismissible') ||
             _changedProperties.has('isMultiline') ||
-            _changedProperties.has('leadingAction')) {
+            _changedProperties.has('leadingAction') ||
+            _changedProperties.has('duration')) {
             this.requestUpdate();
         }
     }
@@ -234,6 +337,7 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps {
     private closeToastComponent () {
         this.isOpen = false;
         dispatchCustomEvent(this, ON_TOAST_CLOSE_EVENT, { targetNotification: this });
+        this.abortAndCleanEventListeners();
     }
 
     /**
@@ -288,14 +392,12 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps {
             _messageAreaMaxWidth,
         } = this;
 
-        if (!isOpen) {
-            return nothing;
-        }
-
         const componentWrapperClasses = {
             [componentClass]: true,
             [`${componentClass}--${variant}`]: true,
             [`${componentClass}--strong`]: isStrong,
+            [`${componentClass}--animate-in`]: isOpen,
+            [`${componentClass}--animate-out`]: !isOpen,
         };
 
         const messageAreaClasses = {
@@ -304,11 +406,15 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps {
         };
 
         return html`
-            <div data-test-id="${componentSelector}" class="${classMap(componentWrapperClasses)}">
+            <div 
+                data-test-id="${componentSelector}" 
+                class="${classMap(componentWrapperClasses)}" 
+                aria-live="${variant === 'error' ? 'assertive' : 'polite'}"
+            >
                 <div class="${componentClass}-contentArea">
                     <div class="${classMap(messageAreaClasses)}">
                         ${this.variantHasIcon(variant) ? this.getVariantIcon() : nothing}
-                        ${message === '' ? nothing : this.renderMessage(message, _messageAreaMaxWidth)} 
+                        ${message === '' ? nothing : this.renderMessage(message, _messageAreaMaxWidth)}
                     </div>
                     <div class="${componentClass}-actionsArea">
                         ${!isMultiline && leadingAction?.text ? this.renderActionButton(leadingAction) : nothing}

package/src/react.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createComponent } from '@lit/react';
 import { PieToast as PieToastLit } from './index';
-import { ToastProps } from './defs';
+import { type ToastProps } from './defs';
 
 export * from './defs';
 

package/src/toast.scss

@@ -25,6 +25,24 @@
   color: var(--toast-font-color);
   font-size: var(--toast-font-size);
   line-height: var(--toast-line-height);
+  transition-property: all;
+  transition-duration: var(--dt-motion-timing-100);
+  transition-timing-function: var(--dt-motion-easing-in);
+}
+
+.c-toast--animate-in {
+  animation-duration: var(--dt-motion-timing-200);
+  animation-name: animate-in;
+  animation-timing-function: var(--dt-motion-easing-in);
+  transform: translateX(0); 
+}
+
+.c-toast--animate-out {  
+  animation-duration: var(--dt-motion-timing-100);
+  animation-name: animate-out;
+  animation-timing-function: var(--dt-motion-easing-out);
+  transform: translateX(100%); 
+  opacity: 0;
 }
 
 .c-toast--info {
@@ -114,3 +132,22 @@
   color: var(--toast-icon-fill);
 }
 
+@keyframes animate-in {
+  from { 
+    transform: translateX(100%);
+  }
+
+  to { 
+    transform: translateX(0); 
+  }
+}
+
+@keyframes animate-out {
+  from { 
+    transform: translateX(0); 
+  }
+
+  to { 
+    transform: translateX(100%); 
+  }
+}