@justeattakeaway/pie-toast 0.4.6 → 0.5.1

package/README.md

@@ -8,15 +8,6 @@
   </a>
 </p>
 
-# Table of Contents
-
-1. [Introduction](#pie-toast)
-2. [Installation](#installation)
-3. [Importing the component](#importing-the-component)
-4. [Peer Dependencies](#peer-dependencies)
-5. [Props](#props)
-6. [Contributing](#contributing)
-
 ## pie-toast
 
 `pie-toast` is a Web Component built using the Lit library.
@@ -29,63 +20,19 @@ This component can be easily integrated into various frontend frameworks and cus
 To install `pie-toast` in your application, run the following on your command line:
 
 ```bash
-# npm
-$ npm i @justeattakeaway/pie-toast
+npm i @justeattakeaway/pie-toast
 
-# yarn
-$ yarn add @justeattakeaway/pie-toast
+yarn add @justeattakeaway/pie-toast
 ```
 
-For full information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components).
-
-
-### Importing the component
-
-#### JavaScript
-```js
-// Default – for Native JS Applications, Vue, Angular, Svelte, etc.
-import { PieToast } from '@justeattakeaway/pie-toast';
-
-// If you don't need to reference the imported object, you can simply
-// import the module which registers the component as a custom element.
-import '@justeattakeaway/pie-toast';
-```
-
-#### React
-```js
-// React
-// For React, you will need to import our React-specific component build
-// which wraps the web component using ​@lit/react
-import { PieToast } from '@justeattakeaway/pie-toast/dist/react';
-```
+## Documentation
 
-> [!NOTE]
-> When using the React version of the component, please make sure to also
-> include React as a [peer dependency](#peer-dependencies) in your project.
+Visit  [Toast | PIE Design System](https://pie.design/components/toast) to view more information on this component.
 
+## Questions
 
-## Peer Dependencies
-
-> [!IMPORTANT]
-> When using `pie-toast`, you will also need to include a couple of dependencies to ensure the component renders as expected. See [the PIE Wiki](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components#expected-dependencies) for more information and how to include these in your application.
-
-
-## Props
-
-| Property | Type | Default | Description |
-|---|---|---|---|
-| - | - | - | - |
-
-In your markup or JSX, you can then use these to set the properties for the `pie-toast` component:
-
-```html
-<!-- Native HTML -->
-<pie-toast></pie-toast>
-
-<!-- JSX -->
-<PieToast></PieToast>
-```
+Please head to [FAQs | PIE Design System](https://pie.design/support/contact-us/) to see our FAQs and get in touch.
 
 ## Contributing
 
-Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).
+Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).

package/custom-elements.json

@@ -198,24 +198,6 @@
               },
               "privacy": "private"
             },
-            {
-              "kind": "field",
-              "name": "_actionButtonOffset",
-              "type": {
-                "text": "number"
-              },
-              "privacy": "private",
-              "default": "0"
-            },
-            {
-              "kind": "field",
-              "name": "_messageAreaMaxWidth",
-              "type": {
-                "text": "number"
-              },
-              "privacy": "private",
-              "default": "0"
-            },
             {
               "kind": "field",
               "name": "_timeoutId",
@@ -246,47 +228,6 @@
               "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",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "number"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "hasIcon",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "Indicates if the toast has an icon."
-                },
-                {
-                  "name": "isMultiline",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "Indicates if the message is multiline."
-                },
-                {
-                  "name": "hasActionButton",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "Indicates if the toast has an action button."
-                },
-                {
-                  "name": "hasCloseIcon",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "Indicates if the toast has a close icon."
-                }
-              ],
-              "description": "Calculates and returns the width of the message based on the toast properties."
-            },
             {
               "kind": "method",
               "name": "addListenersToElement",
@@ -388,13 +329,6 @@
                     "text": "string"
                   },
                   "description": "The message to be displayed."
-                },
-                {
-                  "name": "messageAreaMaxWidth",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The maximum width of the message area calculated in the lifecycle method."
                 }
               ],
               "description": "Template for the toast message. Called within the\nmain render function."
@@ -433,6 +367,29 @@
               "description": "util method that returns true if the variant is warning and is strong."
             }
           ],
+          "events": [
+            {
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "when a user clicks close button or when the toast auto dismiss.",
+              "name": "pie-toast-close"
+            },
+            {
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "when the toast is opened.",
+              "name": "pie-toast-open"
+            },
+            {
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "when the user interacts with the leading action.",
+              "name": "pie-toast-leading-action-click"
+            }
+          ],
           "attributes": [
             {
               "name": "message",

package/dist/index.d.ts

@@ -48,6 +48,9 @@ export declare const ON_TOAST_OPEN_EVENT: string;
 
 /**
  * @tagname pie-toast
+ * @event {CustomEvent} pie-toast-close - when a user clicks close button or when the toast auto dismiss.
+ * @event {CustomEvent} pie-toast-open - when the toast is opened.
+ * @event {CustomEvent} pie-toast-leading-action-click - when the user interacts with the leading action.
  */
 export declare class PieToast extends PieToast_base implements ToastProps {
     message: string;
@@ -60,8 +63,6 @@ export declare class PieToast extends PieToast_base implements ToastProps {
     duration: number | null;
     private actionButton?;
     private closeButton?;
-    private _actionButtonOffset;
-    private _messageAreaMaxWidth;
     private _timeoutId;
     private _abortController;
     static styles: CSSResult;
@@ -78,17 +79,6 @@ export declare class PieToast extends PieToast_base implements ToastProps {
      * @private
      */
     private abortAndCleanEventListeners;
-    /**
-     * Calculates and returns the width of the message based on the toast properties.
-     *
-     * @param {boolean} hasIcon - Indicates if the toast has an icon.
-     * @param {boolean} isMultiline - Indicates if the message is multiline.
-     * @param {boolean} hasActionButton - Indicates if the toast has an action button.
-     * @param {boolean} hasCloseIcon - Indicates if the toast has a close icon.
-     *
-     * @returns {number} - The width of the message in pixels.
-     */
-    private getMessageMaxWidth;
     /**
      * Adds event listeners to the specified element for handling the auto dismiss behavior.
      *
@@ -112,7 +102,6 @@ export declare class PieToast extends PieToast_base implements ToastProps {
      * 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>;
     /**
@@ -150,7 +139,6 @@ export declare class PieToast extends PieToast_base implements ToastProps {
      * main render function.
      *
      * @param {string} message - The message to be displayed.
-     * @param {number} messageAreaMaxWidth - The maximum width of the message area calculated in the lifecycle method.
      *
      * @private
      */

package/dist/index.js

@@ -1,15 +1,15 @@
-import { LitElement as C, unsafeCSS as w, html as l, nothing as d } from "lit";
-import { property as p, 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 { LitElement as x, unsafeCSS as A, html as c, nothing as l } from "lit";
+import { property as p, query as g } from "lit/decorators.js";
+import { classMap as C } from "lit/directives/class-map.js";
+import { RtlMixin as w, dispatchCustomEvent as v, validPropertyValues as k, defineCustomElement as E } from "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-icon-button";
+import "@justeattakeaway/pie-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 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`, u = {
+const _ = "*,*: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-offset: var(--dt-spacing-d);--toast-translate-start: -100%;--toast-translate-end: 0;position:absolute;inset-inline-start:var(--toast-offset);inset-block-end:var(--toast-offset);display:flex;flex-direction:column;justify-content:center;min-height:48px;max-height:122px;min-width:300px;max-width:420px;padding:var(--dt-spacing-b) var(--dt-spacing-c) var(--dt-spacing-b) var(--dt-spacing-d);border-radius:var(--toast-border-radius);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)}@media (min-width: 769px){.c-toast{--toast-offset: var(--dt-spacing-e)}}.c-toast--rtl{--toast-translate-start: 100%}.c-toast--animate-in{animation-duration:var(--dt-motion-timing-200);animation-name:animate-in;animation-timing-function:var(--dt-motion-easing-out);transform:translate(var(--toast-translate-end))}.c-toast--animate-out{animation-duration:var(--dt-motion-timing-100);animation-name:animate-out;animation-timing-function:var(--dt-motion-easing-in);transform:translate(var(--toast-translate-start));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:6px var(--dt-spacing-a) 6px 0;overflow:hidden}.c-toast-messageArea span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.c-toast-actionsArea{display:flex;gap:var(--dt-spacing-b);flex-shrink:0}.c-toast--multiline .c-toast-contentArea{align-items:flex-start;gap:0}.c-toast--multiline .c-toast-messageArea{align-items:flex-start;padding-block-end:var(--dt-spacing-b)}.c-toast--multiline .c-toast-messageArea span{max-height:60px;white-space:inherit;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.c-toast-footer{display:flex;justify-content:flex-end}.c-toast-icon{color:var(--toast-icon-fill)}@keyframes animate-in{0%{transform:translate(var(--toast-translate-start))}to{transform:translate(var(--toast-translate-end))}}@keyframes animate-out{0%{transform:translate(var(--toast-translate-end))}to{transform:translate(var(--toast-translate-start))}}", O = ["neutral", "info", "warning", "success", "error"], s = "pie-toast", o = "c-toast", T = `${s}-close`, L = `${s}-open`, B = `${s}-leading-action-click`, d = {
   message: "",
   isOpen: !0,
   variant: "neutral",
@@ -18,14 +18,14 @@ const k = "*,*:after,*:before{box-sizing:inherit}.c-toast{--toast-border-radius:
   isMultiline: !1,
   duration: 5e3
 };
-var L = Object.defineProperty, c = (v, t, i, n) => {
-  for (var e = void 0, r = v.length - 1, h; r >= 0; r--)
-    (h = v[r]) && (e = h(t, i, e) || e);
-  return e && L(t, i, e), e;
+var N = Object.defineProperty, r = (f, t, n, u) => {
+  for (var e = void 0, a = f.length - 1, m; a >= 0; a--)
+    (m = f[a]) && (e = m(t, n, e) || e);
+  return e && N(t, n, e), e;
 };
-const g = class g extends O(C) {
+const h = class h extends w(x) {
   constructor() {
-    super(...arguments), this.message = u.message, this.isOpen = u.isOpen, this.variant = u.variant, this.isStrong = u.isStrong, this.isDismissible = u.isDismissible, this.isMultiline = u.isMultiline, this.duration = u.duration, this._actionButtonOffset = 0, this._messageAreaMaxWidth = 0, this._timeoutId = null, this._abortController = null;
+    super(...arguments), this.message = d.message, this.isOpen = d.isOpen, this.variant = d.variant, this.isStrong = d.isStrong, this.isDismissible = d.isDismissible, this.isMultiline = d.isMultiline, this.duration = d.duration, this._timeoutId = null, this._abortController = null;
   }
   /**
    * Create a timeout function and set its id into a private attribute.
@@ -46,20 +46,6 @@ const g = class g extends O(C) {
   abortAndCleanEventListeners() {
     this._abortController && (this._abortController.abort(), this._abortController = null);
   }
-  /**
-   * Calculates and returns the width of the message based on the toast properties.
-   *
-   * @param {boolean} hasIcon - Indicates if the toast has an icon.
-   * @param {boolean} isMultiline - Indicates if the message is multiline.
-   * @param {boolean} hasActionButton - Indicates if the toast has an action button.
-   * @param {boolean} hasCloseIcon - Indicates if the toast has a close icon.
-   *
-   * @returns {number} - The width of the message in pixels.
-   */
-  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.
    *
@@ -70,10 +56,10 @@ const g = class g extends O(C) {
    *
    * @private
    */
-  addListenersToElement(t, i, n, e) {
-    t && (t.addEventListener(i, () => {
+  addListenersToElement(t, n, u, e) {
+    t && (t.addEventListener(n, () => {
       this._timeoutId && clearTimeout(this._timeoutId);
-    }, { signal: e }), t.addEventListener(n, () => {
+    }, { signal: e }), t.addEventListener(u, () => {
       this.setAutoDismiss();
     }, { signal: e }));
   }
@@ -93,13 +79,9 @@ const g = class g extends O(C) {
    * 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 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();
+    t.has("isOpen") && this.isOpen && (v(this, L, { targetNotification: this }), this.duration !== null && this.createAutoDismissEventListeners()), t.has("isOpen") && !this.isOpen && this.abortAndCleanEventListeners();
   }
   /**
    * It handle the action button action.
@@ -107,7 +89,7 @@ const g = class g extends O(C) {
    * @private
    */
   handleActionClick() {
-    f(this, T, { targetNotification: this });
+    v(this, B, { targetNotification: this });
   }
   /**
    * Render the action button depending on action type and its action.
@@ -118,16 +100,16 @@ const g = class g extends O(C) {
    * @private
    */
   renderActionButton(t) {
-    const { text: i, ariaLabel: n } = t;
-    return l`
+    const { text: n, ariaLabel: u } = t;
+    return c`
             <pie-button
                 variant="${this.shouldNotUseInverseBtnVariant() ? "ghost" : "ghost-inverse"}"
                 size="xsmall"
-                aria-label="${n || d}"
+                aria-label="${u || l}"
                 @click="${() => this.handleActionClick()}"
-                data-test-id="${o}-leading-action"
+                data-test-id="${s}-leading-action"
                 type="button">
-                ${i}
+                ${n}
             </pie-button>
         `;
   }
@@ -140,9 +122,9 @@ const g = class g extends O(C) {
    */
   renderFooter() {
     const { leadingAction: t } = this;
-    return l`
-            <footer class="${s}-footer" data-test-id="${o}-footer" >
-                ${t ? this.renderActionButton(t) : d}
+    return c`
+            <footer class="${o}-footer" data-test-id="${s}-footer" >
+                ${t ? this.renderActionButton(t) : l}
             </footer>
         `;
   }
@@ -153,11 +135,11 @@ const g = class g extends O(C) {
    * @private
    */
   renderCloseButton() {
-    return l`
+    return c`
             <pie-icon-button
                 variant="${this.shouldNotUseInverseBtnVariant() ? "ghost-secondary" : "ghost-inverse"}"
                 size="xsmall"
-                data-test-id="${o}-close"
+                data-test-id="${s}-close"
                 @click="${this.closeToastComponent}">
                 <icon-close></icon-close>
             </pie-icon-button>`;
@@ -167,13 +149,12 @@ const g = class g extends O(C) {
    * main render function.
    *
    * @param {string} message - The message to be displayed.
-   * @param {number} messageAreaMaxWidth - The maximum width of the message area calculated in the lifecycle method.
    *
    * @private
    */
-  renderMessage(t, i) {
-    return l`
-            <span style="--toast-message-max-width: ${i}px" data-test-id="${o}-message">
+  renderMessage(t) {
+    return c`
+            <span data-test-id="${s}-message">
                 ${t}
             </span>
         `;
@@ -185,7 +166,7 @@ const g = class g extends O(C) {
    * @private
    */
   closeToastComponent() {
-    this.isOpen = !1, f(this, M, { targetNotification: this }), this.abortAndCleanEventListeners();
+    this.isOpen = !1, v(this, T, { targetNotification: this }), this.abortAndCleanEventListeners();
   }
   /**
    * Util method that returns an icon from a variant that has default icon.
@@ -195,15 +176,15 @@ const g = class g extends O(C) {
   getVariantIcon() {
     switch (this.variant) {
       case "info":
-        return l`<icon-info-circle class="${s}-icon" size="s" data-test-id="${o}-heading-icon-info"></icon-info-circle>`;
+        return c`<icon-info-circle class="${o}-icon" size="s" data-test-id="${s}-heading-icon-info"></icon-info-circle>`;
       case "success":
-        return l`<icon-check-circle class="${s}-icon" size="s" data-test-id="${o}-heading-icon-success"></icon-check-circle>`;
+        return c`<icon-check-circle class="${o}-icon" size="s" data-test-id="${s}-heading-icon-success"></icon-check-circle>`;
       case "warning":
-        return l`<icon-alert-triangle class="${s}-icon" size="s" data-test-id="${o}-heading-icon-warning"></icon-alert-triangle>`;
+        return c`<icon-alert-triangle class="${o}-icon" size="s" data-test-id="${s}-heading-icon-warning"></icon-alert-triangle>`;
       case "error":
-        return l`<icon-alert-circle class="${s}-icon" size="s" data-test-id="${o}-heading-icon-error"></icon-alert-circle>`;
+        return c`<icon-alert-circle class="${o}-icon" size="s" data-test-id="${s}-heading-icon-error"></icon-alert-circle>`;
       default:
-        return d;
+        return l;
     }
   }
   /**
@@ -227,83 +208,82 @@ const g = class g extends O(C) {
   render() {
     const {
       isOpen: t,
-      variant: i,
-      message: n,
+      variant: n,
+      message: u,
       isDismissible: e,
-      leadingAction: r,
-      isMultiline: h,
+      leadingAction: a,
+      isMultiline: m,
       isStrong: b,
-      _messageAreaMaxWidth: x
-    } = this, m = {
-      [s]: !0,
-      [`${s}--${i}`]: !0,
-      [`${s}--strong`]: b,
-      [`${s}--animate-in`]: t,
-      [`${s}--animate-out`]: !t
-    }, A = {
-      [`${s}-messageArea`]: !0,
-      [`${s}--multiline`]: h
+      isRTL: $
+    } = this, y = {
+      [o]: !0,
+      [`${o}--rtl`]: $,
+      [`${o}--multiline`]: m,
+      [`${o}--${n}`]: !0,
+      [`${o}--strong`]: b,
+      [`${o}--animate-in`]: t,
+      [`${o}--animate-out`]: !t
     };
-    return l`
+    return c`
             <div
-                role="${i === "error" ? "alert" : "status"}"
-                data-test-id="${o}"
-                class="${$(m)}">
-                <div class="${s}-contentArea">
-                    <div class="${$(A)}">
-                        ${this.variantHasIcon(i) ? this.getVariantIcon() : d}
-                        ${n === "" ? d : this.renderMessage(n, x)}
+                role="${n === "error" ? "alert" : "status"}"
+                data-test-id="${s}"
+                class="${C(y)}">
+                <div class="${o}-contentArea">
+                    <div class="${o}-messageArea">
+                        ${this.variantHasIcon(n) ? this.getVariantIcon() : l}
+                        ${u === "" ? l : this.renderMessage(u)}
                     </div>
-                    <div class="${s}-actionsArea">
-                        ${!h && (r != null && r.text) ? this.renderActionButton(r) : d}
-                        ${e ? this.renderCloseButton() : d}
+                    <div class="${o}-actionsArea">
+                        ${!m && (a != null && a.text) ? this.renderActionButton(a) : l}
+                        ${e ? this.renderCloseButton() : l}
                     </div>
                 </div>
-                ${h && (r != null && r.text) ? this.renderFooter() : d}
+                ${m && (a != null && a.text) ? this.renderFooter() : l}
             </div>`;
   }
 };
-g.styles = w(k);
-let a = g;
-c([
+h.styles = A(_);
+let i = h;
+r([
   p({ type: String })
-], a.prototype, "message");
-c([
+], i.prototype, "message");
+r([
   p({ type: Boolean })
-], a.prototype, "isOpen");
-c([
+], i.prototype, "isOpen");
+r([
   p({ type: String }),
-  E(o, B, u.variant)
-], a.prototype, "variant");
-c([
+  k(s, O, d.variant)
+], i.prototype, "variant");
+r([
   p({ type: Boolean })
-], a.prototype, "isStrong");
-c([
+], i.prototype, "isStrong");
+r([
   p({ type: Boolean })
-], a.prototype, "isDismissible");
-c([
+], i.prototype, "isDismissible");
+r([
   p({ type: Boolean })
-], a.prototype, "isMultiline");
-c([
+], i.prototype, "isMultiline");
+r([
   p({ type: Object })
-], a.prototype, "leadingAction");
-c([
+], i.prototype, "leadingAction");
+r([
   p({ type: Number })
-], a.prototype, "duration");
-c([
-  y("pie-button")
-], a.prototype, "actionButton");
-c([
-  y("pie-icon-button")
-], a.prototype, "closeButton");
-_(o, a);
+], i.prototype, "duration");
+r([
+  g("pie-button")
+], i.prototype, "actionButton");
+r([
+  g("pie-icon-button")
+], i.prototype, "closeButton");
+E(s, i);
 export {
-  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,
-  u as defaultProps,
-  B as variants
+  T as ON_TOAST_CLOSE_EVENT,
+  B as ON_TOAST_LEADING_ACTION_CLICK_EVENT,
+  L as ON_TOAST_OPEN_EVENT,
+  i as PieToast,
+  o as componentClass,
+  s as componentSelector,
+  d as defaultProps,
+  O as variants
 };

package/dist/react.d.ts

@@ -47,10 +47,13 @@ export declare const ON_TOAST_LEADING_ACTION_CLICK_EVENT: string;
  */
 export declare const ON_TOAST_OPEN_EVENT: string;
 
-export declare const PieToast: React_2.ForwardRefExoticComponent<ToastProps & React_2.RefAttributes<PieToast_2> & ReactBaseType>;
+export declare const PieToast: React_2.ForwardRefExoticComponent<ToastProps & React_2.RefAttributes<PieToast_2> & PieToastEvents & ReactBaseType>;
 
 /**
  * @tagname pie-toast
+ * @event {CustomEvent} pie-toast-close - when a user clicks close button or when the toast auto dismiss.
+ * @event {CustomEvent} pie-toast-open - when the toast is opened.
+ * @event {CustomEvent} pie-toast-leading-action-click - when the user interacts with the leading action.
  */
 declare class PieToast_2 extends PieToast_base implements ToastProps {
     message: string;
@@ -63,8 +66,6 @@ declare class PieToast_2 extends PieToast_base implements ToastProps {
     duration: number | null;
     private actionButton?;
     private closeButton?;
-    private _actionButtonOffset;
-    private _messageAreaMaxWidth;
     private _timeoutId;
     private _abortController;
     static styles: CSSResult;
@@ -81,17 +82,6 @@ declare class PieToast_2 extends PieToast_base implements ToastProps {
      * @private
      */
     private abortAndCleanEventListeners;
-    /**
-     * Calculates and returns the width of the message based on the toast properties.
-     *
-     * @param {boolean} hasIcon - Indicates if the toast has an icon.
-     * @param {boolean} isMultiline - Indicates if the message is multiline.
-     * @param {boolean} hasActionButton - Indicates if the toast has an action button.
-     * @param {boolean} hasCloseIcon - Indicates if the toast has a close icon.
-     *
-     * @returns {number} - The width of the message in pixels.
-     */
-    private getMessageMaxWidth;
     /**
      * Adds event listeners to the specified element for handling the auto dismiss behavior.
      *
@@ -115,7 +105,6 @@ declare class PieToast_2 extends PieToast_base implements ToastProps {
      * 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>;
     /**
@@ -153,7 +142,6 @@ declare class PieToast_2 extends PieToast_base implements ToastProps {
      * main render function.
      *
      * @param {string} message - The message to be displayed.
-     * @param {number} messageAreaMaxWidth - The maximum width of the message area calculated in the lifecycle method.
      *
      * @private
      */
@@ -190,6 +178,12 @@ declare class PieToast_2 extends PieToast_base implements ToastProps {
 
 declare const PieToast_base: GenericConstructor<RTLInterface> & typeof LitElement;
 
+declare type PieToastEvents = {
+    onPieToastClose?: (event: CustomEvent) => void;
+    onPieToastOpen?: (event: CustomEvent) => void;
+    onPieToastLeadingActionClick?: (event: CustomEvent) => void;
+};
+
 declare type ReactBaseType = React_2.HTMLAttributes<HTMLElement>;
 
 export declare interface ToastProps {

package/dist/react.js

@@ -1,21 +1,28 @@
-import * as t from "react";
+import * as o from "react";
 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";
+import { PieToast as t } from "./index.js";
+import { ON_TOAST_CLOSE_EVENT as c, ON_TOAST_LEADING_ACTION_CLICK_EVENT as r, ON_TOAST_OPEN_EVENT as m, componentClass as l, componentSelector as N, defaultProps as _, variants as O } from "./index.js";
 const a = e({
   displayName: "PieToast",
-  elementClass: o,
-  react: t,
+  elementClass: t,
+  react: o,
   tagName: "pie-toast",
-  events: {}
-}), r = a;
+  events: {
+    onPieToastClose: "pie-toast-close",
+    // when a user clicks close button or when the toast auto dismiss.
+    onPieToastOpen: "pie-toast-open",
+    // when the toast is opened.
+    onPieToastLeadingActionClick: "pie-toast-leading-action-click"
+    // when the user interacts with the leading action.
+  }
+}), n = a;
 export {
-  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,
+  c as ON_TOAST_CLOSE_EVENT,
+  r as ON_TOAST_LEADING_ACTION_CLICK_EVENT,
+  m as ON_TOAST_OPEN_EVENT,
+  n as PieToast,
+  l as componentClass,
+  N as componentSelector,
+  _ 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.4.6",
+  "version": "0.5.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -41,7 +41,7 @@
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-button": "1.0.0",
+    "@justeattakeaway/pie-button": "1.1.0",
     "@justeattakeaway/pie-icon-button": "1.0.0",
     "@justeattakeaway/pie-icons-webc": "1.1.0",
     "@justeattakeaway/pie-webc-core": "0.24.2"

package/src/index.ts

@@ -15,24 +15,24 @@ import {
     validPropertyValues,
 } from '@justeattakeaway/pie-webc-core';
 import '@justeattakeaway/pie-icon-button';
+import '@justeattakeaway/pie-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';
 
 import styles from './toast.scss?inline';
 import {
-    type ToastProps,
     componentSelector,
     componentClass,
-    type ActionProps,
+    defaultProps,
+    variants,
     ON_TOAST_CLOSE_EVENT,
     ON_TOAST_OPEN_EVENT,
     ON_TOAST_LEADING_ACTION_CLICK_EVENT,
-    defaultProps,
-    variants,
+    type ToastProps,
+    type ActionProps,
 } from './defs';
 
 // Valid values available to consumers
@@ -40,6 +40,9 @@ export * from './defs';
 
 /**
  * @tagname pie-toast
+ * @event {CustomEvent} pie-toast-close - when a user clicks close button or when the toast auto dismiss.
+ * @event {CustomEvent} pie-toast-open - when the toast is opened.
+ * @event {CustomEvent} pie-toast-leading-action-click - when the user interacts with the leading action.
  */
 export class PieToast extends RtlMixin(LitElement) implements ToastProps {
     @property({ type: String })
@@ -73,10 +76,6 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps {
     @query('pie-icon-button')
     private closeButton?: HTMLElement;
 
-    private _actionButtonOffset = 0;
-
-    private _messageAreaMaxWidth = 0;
-
     private _timeoutId: NodeJS.Timeout | null = null;
 
     private _abortController: AbortController | null = null;
@@ -112,44 +111,6 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps {
         }
     }
 
-    /**
-     * Calculates and returns the width of the message based on the toast properties.
-     *
-     * @param {boolean} hasIcon - Indicates if the toast has an icon.
-     * @param {boolean} isMultiline - Indicates if the message is multiline.
-     * @param {boolean} hasActionButton - Indicates if the toast has an action button.
-     * @param {boolean} hasCloseIcon - Indicates if the toast has a close icon.
-     *
-     * @returns {number} - The width of the message in pixels.
-     */
-    private getMessageMaxWidth (
-        hasIcon: boolean,
-        isMultiline: boolean,
-        hasActionButton: boolean,
-        hasCloseIcon: boolean,
-    ): number {
-        const iconOffset = 20;
-        const closeIconOffset = 32;
-        const gap = 8;
-        const toastMaxWidthWithoutPadding = 392;
-
-        let offset = 0;
-
-        if (hasIcon) {
-            offset += iconOffset + gap;
-        }
-
-        if (!isMultiline && hasActionButton) {
-            offset += this._actionButtonOffset + gap;
-        }
-
-        if (hasCloseIcon) {
-            offset += closeIconOffset + gap;
-        }
-
-        return toastMaxWidthWithoutPadding - offset;
-    }
-
     /**
      * Adds event listeners to the specified element for handling the auto dismiss behavior.
      *
@@ -201,7 +162,6 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps {
      * 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) {
@@ -215,36 +175,6 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps {
         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) {
-            this._actionButtonOffset = this.actionButton.offsetWidth;
-        }
-
-        const hasIcon = this.variantHasIcon(this.variant);
-
-        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('duration')) {
-            this.requestUpdate();
-        }
     }
 
     /**
@@ -318,13 +248,12 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps {
      * main render function.
      *
      * @param {string} message - The message to be displayed.
-     * @param {number} messageAreaMaxWidth - The maximum width of the message area calculated in the lifecycle method.
      *
      * @private
      */
-    private renderMessage (message: string, messageAreaMaxWidth: number): TemplateResult {
+    private renderMessage (message: string): TemplateResult {
         return html`
-            <span style="--toast-message-max-width: ${messageAreaMaxWidth}px" data-test-id="${componentSelector}-message">
+            <span data-test-id="${componentSelector}-message">
                 ${message}
             </span>
         `;
@@ -391,31 +320,28 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps {
             leadingAction,
             isMultiline,
             isStrong,
-            _messageAreaMaxWidth,
+            isRTL,
         } = this;
 
         const componentWrapperClasses = {
             [componentClass]: true,
+            [`${componentClass}--rtl`]: isRTL,
+            [`${componentClass}--multiline`]: isMultiline,
             [`${componentClass}--${variant}`]: true,
             [`${componentClass}--strong`]: isStrong,
             [`${componentClass}--animate-in`]: isOpen,
             [`${componentClass}--animate-out`]: !isOpen,
         };
 
-        const messageAreaClasses = {
-            [`${componentClass}-messageArea`]: true,
-            [`${componentClass}--multiline`]: isMultiline,
-        };
-
         return html`
             <div
                 role="${variant === 'error' ? 'alert' : 'status'}"
                 data-test-id="${componentSelector}"
                 class="${classMap(componentWrapperClasses)}">
                 <div class="${componentClass}-contentArea">
-                    <div class="${classMap(messageAreaClasses)}">
+                    <div class="${componentClass}-messageArea">
                         ${this.variantHasIcon(variant) ? this.getVariantIcon() : nothing}
-                        ${message === '' ? nothing : this.renderMessage(message, _messageAreaMaxWidth)}
+                        ${message === '' ? nothing : this.renderMessage(message)}
                     </div>
                     <div class="${componentClass}-actionsArea">
                         ${!isMultiline && leadingAction?.text ? this.renderActionButton(leadingAction) : nothing}

package/src/react.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createComponent } from '@lit/react';
+import { createComponent, type EventName } from '@lit/react';
 import { PieToast as PieToastLit } from './index';
 import { type ToastProps } from './defs';
 
@@ -10,10 +10,20 @@ const PieToastReact = createComponent({
     elementClass: PieToastLit,
     react: React,
     tagName: 'pie-toast',
-    events: {},
+    events: {
+        onPieToastClose: 'pie-toast-close' as EventName<CustomEvent>, // when a user clicks close button or when the toast auto dismiss.
+        onPieToastOpen: 'pie-toast-open' as EventName<CustomEvent>, // when the toast is opened.
+        onPieToastLeadingActionClick: 'pie-toast-leading-action-click' as EventName<CustomEvent>, // when the user interacts with the leading action.
+    },
 });
 
 type ReactBaseType = React.HTMLAttributes<HTMLElement>
 
+type PieToastEvents = {
+    onPieToastClose?: (event: CustomEvent) => void;
+    onPieToastOpen?: (event: CustomEvent) => void;
+    onPieToastLeadingActionClick?: (event: CustomEvent) => void;
+};
+
 export const PieToast = PieToastReact as React.ForwardRefExoticComponent<React.PropsWithoutRef<ToastProps>
-    & React.RefAttributes<PieToastLit> & ReactBaseType>;
+    & React.RefAttributes<PieToastLit> & PieToastEvents & ReactBaseType>;

package/src/toast.scss

@@ -1,4 +1,5 @@
 @use '@justeattakeaway/pie-css/scss' as p;
+@use '@justeattakeaway/pie-css/scss/settings' as *;
 
 .c-toast {
   --toast-border-radius: var(--dt-radius-rounded-b);
@@ -7,8 +8,13 @@
   --toast-font-size: #{p.font-size(--dt-font-body-s-size)};
   --toast-line-height: #{p.line-height(--dt-font-body-s-line-height)};
   --toast-icon-fill: var(--dt-color-content-default);
-  --toast-message-max-width: 100%;
+  --toast-offset: var(--dt-spacing-d);
+  --toast-translate-start: -100%;
+  --toast-translate-end: 0;
 
+  position: absolute;
+  inset-inline-start: var(--toast-offset);
+  inset-block-end: var(--toast-offset);
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -16,10 +22,9 @@
   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);
+
+  padding: var(--dt-spacing-b) var(--dt-spacing-c) var(--dt-spacing-b) 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);
@@ -28,20 +33,28 @@
   transition-property: all;
   transition-duration: var(--dt-motion-timing-100);
   transition-timing-function: var(--dt-motion-easing-in);
+
+  @include media('>md') {
+    --toast-offset: var(--dt-spacing-e);
+  }
+}
+
+.c-toast--rtl {
+  --toast-translate-start: 100%;
 }
 
 .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); 
+  animation-timing-function: var(--dt-motion-easing-out);
+  transform: translateX(var(--toast-translate-end));
 }
 
-.c-toast--animate-out {  
+.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%); 
+  animation-timing-function: var(--dt-motion-easing-in);
+  transform: translateX(var(--toast-translate-start));
   opacity: 0;
 }
 
@@ -92,18 +105,32 @@
   display: flex;
   align-items: center;
   gap: var(--dt-spacing-b);
-  padding: calc(var(--dt-spacing-03) / 2) 0;
+  padding: 6px var(--dt-spacing-a) 6px 0;
+  overflow: hidden;
 
   span {
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
-    max-width: var(--toast-message-max-width);
   }
+}
 
-  &.c-toast--multiline {
+.c-toast-actionsArea {
+  display: flex;
+  gap: var(--dt-spacing-b);
+  flex-shrink: 0;
+}
+
+.c-toast--multiline {
+  .c-toast-contentArea {
+    align-items: flex-start;
+    gap: 0;
+  }
+
+  .c-toast-messageArea {  
     align-items: flex-start;
-    
+    padding-block-end: var(--dt-spacing-b);
+  
     span {
       max-height: 60px;
       white-space: inherit;
@@ -118,11 +145,6 @@
   }
 }
 
-.c-toast-actionsArea {
-  display: flex;
-  gap: var(--dt-spacing-b);
-}
-
 .c-toast-footer {
   display: flex;
   justify-content: flex-end;
@@ -134,20 +156,20 @@
 
 @keyframes animate-in {
   from { 
-    transform: translateX(100%);
+    transform: translateX(var(--toast-translate-start));
   }
 
   to { 
-    transform: translateX(0); 
+    transform: translateX(var(--toast-translate-end));
   }
 }
 
 @keyframes animate-out {
   from { 
-    transform: translateX(0); 
+    transform: translateX(var(--toast-translate-end));
   }
 
   to { 
-    transform: translateX(100%); 
+    transform: translateX(var(--toast-translate-start));
   }
 }