@justeattakeaway/pie-toast-provider 0.6.3 → 0.7.0

package/custom-elements.json

@@ -200,12 +200,6 @@
               "name": "pie-toast-provider-queue-update"
             }
           ],
-          "mixins": [
-            {
-              "name": "RtlMixin",
-              "package": "@justeattakeaway/pie-webc-core"
-            }
-          ],
           "superclass": {
             "name": "PieElement",
             "package": "@justeattakeaway/pie-webc-core/src/internals/PieElement"

package/dist/index.d.ts

@@ -1,9 +1,7 @@
 import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import { CSSResult } from 'lit';
-import { GenericConstructor } from '@justeattakeaway/pie-webc-core';
 import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
 import { PropertyValues } from 'lit';
-import { RTLInterface } from '@justeattakeaway/pie-webc-core';
 import { TemplateResult } from 'lit-html';
 import { ToastProps } from '@justeattakeaway/pie-toast';
 
@@ -37,7 +35,7 @@ export declare const ON_TOAST_PROVIDER_QUEUE_UPDATE_EVENT = "pie-toast-provider-
  * @tagname pie-toast-provider
  * @event {CustomEvent} pie-toast-provider-queue-update - when a toast is added or removed from the queue.
  */
-export declare class PieToastProvider extends PieToastProvider_base implements ToastProviderProps {
+export declare class PieToastProvider extends PieElement implements ToastProviderProps {
     options: Partial<ExtendedToastProps>;
     position: "default" | "bottom-left" | "bottom-right" | "bottom-center";
     private _toasts;
@@ -73,8 +71,6 @@ export declare class PieToastProvider extends PieToastProvider_base implements T
     static styles: CSSResult;
 }
 
-declare const PieToastProvider_base: GenericConstructor<RTLInterface> & typeof PieElement;
-
 export declare const positions: readonly ["default", "bottom-left", "bottom-right", "bottom-center"];
 
 export declare type Priority = keyof typeof PRIORITY_ORDER;

package/dist/index.js

@@ -1,17 +1,17 @@
-import { LitElement as g, nothing as T, html as u, unsafeCSS as b } from "lit";
+import { LitElement as g, unsafeCSS as T, nothing as b, html as u } from "lit";
 import { property as h, state as _ } from "lit/decorators.js";
 import { ifDefined as y } from "lit/directives/if-defined.js";
 import { classMap as m } from "lit/directives/class-map.js";
-import { RtlMixin as P, dispatchCustomEvent as x, validPropertyValues as $, safeCustomElement as A } from "@justeattakeaway/pie-webc-core";
+import { validPropertyValues as P, safeCustomElement as $, dispatchCustomEvent as x } from "@justeattakeaway/pie-webc-core";
 import { defaultProps as f } from "@justeattakeaway/pie-toast";
 const l = class l extends g {
   willUpdate() {
     this.getAttribute("v") || this.setAttribute("v", l.v);
   }
 };
-l.v = "0.6.3";
+l.v = "0.7.0";
 let d = l;
-const O = "*,*:after,*:before{box-sizing:inherit}:root{--pie-animation-slide-translate-start: -100%}.pie-animation--slide-in{animation:pie-animation-slide-in var(--dt-motion-timing-200) var(--dt-motion-easing-out)}.pie-animation--slide-out{animation:pie-animation-slide-out var(--dt-motion-timing-100) var(--dt-motion-easing-in)}@keyframes pie-animation-slide-in{0%{transform:translate(var(--pie-animation-slide-translate-start))}to{transform:translate(0)}}@keyframes pie-animation-slide-out{0%{transform:translate(0)}to{transform:translate(var(--pie-animation-slide-translate-start))}}:host{--toast-provider-z-index: var(--dt-z-index-toast);--toast-provider-offset: var(--dt-spacing-d)}@media (min-width: 769px){:host{--toast-provider-offset: var(--dt-spacing-e)}}.c-toast-provider{position:fixed;z-index:var(--toast-provider-z-index)}.c-toast-provider.c-toast-provider--default{inset-inline-start:var(--toast-provider-offset);inset-block-end:var(--toast-provider-offset)}.c-toast-provider.c-toast-provider--default.c-toast-provider--rtl{--pie-animation-slide-translate-start: 100%}.c-toast-provider.c-toast-provider--bottom-left{--pie-animation-slide-translate-start: -100%;left:var(--toast-provider-offset);bottom:var(--toast-provider-offset)}.c-toast-provider.c-toast-provider--bottom-right{--pie-animation-slide-translate-start: 100%;right:var(--toast-provider-offset);bottom:var(--toast-provider-offset)}.c-toast-provider.c-toast-provider--bottom-center{--pie-animation-slide-translate-start: 0, 100%;left:50%;bottom:var(--toast-provider-offset);transform:translate(-50%)}", w = {
+const A = "*,*:after,*:before{box-sizing:inherit}:root{--pie-animation-slide-translate-start: -100%}.pie-animation--slide-in{animation:pie-animation-slide-in var(--dt-motion-timing-200) var(--dt-motion-easing-out)}.pie-animation--slide-out{animation:pie-animation-slide-out var(--dt-motion-timing-100) var(--dt-motion-easing-in)}@keyframes pie-animation-slide-in{0%{transform:translate(var(--pie-animation-slide-translate-start))}to{transform:translate(0)}}@keyframes pie-animation-slide-out{0%{transform:translate(0)}to{transform:translate(var(--pie-animation-slide-translate-start))}}:host{--toast-provider-z-index: var(--dt-z-index-toast);--toast-provider-offset: var(--dt-spacing-d)}@media (min-width: 769px){:host{--toast-provider-offset: var(--dt-spacing-e)}}.c-toast-provider{position:fixed;z-index:var(--toast-provider-z-index)}.c-toast-provider.c-toast-provider--default{inset-inline-start:var(--toast-provider-offset);inset-block-end:var(--toast-provider-offset)}.c-toast-provider.c-toast-provider--default:dir(rtl){--pie-animation-slide-translate-start: 100%}.c-toast-provider.c-toast-provider--bottom-left{--pie-animation-slide-translate-start: -100%;left:var(--toast-provider-offset);bottom:var(--toast-provider-offset)}.c-toast-provider.c-toast-provider--bottom-right{--pie-animation-slide-translate-start: 100%;right:var(--toast-provider-offset);bottom:var(--toast-provider-offset)}.c-toast-provider.c-toast-provider--bottom-center{--pie-animation-slide-translate-start: 0, 100%;left:50%;bottom:var(--toast-provider-offset);transform:translate(-50%)}", O = {
   "error-actionable": 1,
   error: 2,
   "warning-actionable": 3,
@@ -22,40 +22,40 @@ const O = "*,*:after,*:before{box-sizing:inherit}:root{--pie-animation-slide-tra
   success: 8,
   info: 9,
   neutral: 10
-}, D = ["default", "bottom-left", "bottom-right", "bottom-center"], c = {
+}, w = ["default", "bottom-left", "bottom-right", "bottom-center"], c = {
   options: {},
   position: "default"
-}, E = "pie-toast-provider-queue-update", I = {
+}, D = "pie-toast-provider-queue-update", j = {
   _getToastProvider() {
-    const t = document.querySelectorAll("pie-toast-provider");
-    return t.length === 0 ? (console.error("The pie-toast component requires a pie-toast-provider element present in the DOM."), null) : t.length > 1 ? (console.error("Multiple pie-toast-provider are found in the DOM. Only one provider is supported currently and should be registered at the root of the app."), null) : t[0];
+    const o = document.querySelectorAll("pie-toast-provider");
+    return o.length === 0 ? (console.error("The pie-toast component requires a pie-toast-provider element present in the DOM."), null) : o.length > 1 ? (console.error("Multiple pie-toast-provider are found in the DOM. Only one provider is supported currently and should be registered at the root of the app."), null) : o[0];
   },
-  create(t) {
-    const e = this._getToastProvider();
-    e && e.createToast(t);
+  create(o) {
+    const t = this._getToastProvider();
+    t && t.createToast(o);
   },
   clearAll() {
-    const t = this._getToastProvider();
-    t && t.clearToasts();
+    const o = this._getToastProvider();
+    o && o.clearToasts();
   }
 };
-var R = Object.defineProperty, S = Object.getOwnPropertyDescriptor, n = (t, e, o, s) => {
-  for (var i = s > 1 ? void 0 : s ? S(e, o) : e, p = t.length - 1, a; p >= 0; p--)
-    (a = t[p]) && (i = (s ? a(e, o, i) : a(i)) || i);
-  return s && i && R(e, o, i), i;
+var E = Object.defineProperty, S = Object.getOwnPropertyDescriptor, n = (o, t, e, i) => {
+  for (var s = i > 1 ? void 0 : i ? S(t, e) : t, p = o.length - 1, a; p >= 0; p--)
+    (a = o[p]) && (s = (i ? a(t, e, s) : a(s)) || s);
+  return i && s && E(t, e, s), s;
 };
 const C = "pie-toast-provider";
-let r = class extends P(d) {
+let r = class extends d {
   constructor() {
     super(...arguments), this.options = c.options, this.position = c.position, this._toasts = [], this._currentToast = null;
   }
-  updated(t) {
-    t.has("_toasts") && this._dispatchQueueUpdateEvent();
+  updated(o) {
+    o.has("_toasts") && this._dispatchQueueUpdateEvent();
   }
   _dispatchQueueUpdateEvent() {
     x(
       this,
-      E,
+      D,
       this._toasts
     );
   }
@@ -65,16 +65,16 @@ let r = class extends P(d) {
    * @param {boolean} hasAction - Whether the toast has an action.
    * @returns {number} - The priority based on the variant and action.
    */
-  getPriority(t = f.variant, e = !1) {
-    const o = `${t}${e ? "-actionable" : ""}`;
-    return w[o];
+  getPriority(o = f.variant, t = !1) {
+    const e = `${o}${t ? "-actionable" : ""}`;
+    return O[e];
   }
   /**
    * Handles the dismissal of the current toast and displays the next one in the queue (if any).
    */
   _dismissToast() {
-    var t, e;
-    (e = (t = this._currentToast) == null ? void 0 : t.onPieToastClose) == null || e.call(t), this._currentToast = null, requestAnimationFrame(() => {
+    var o, t;
+    (t = (o = this._currentToast) == null ? void 0 : o.onPieToastClose) == null || t.call(o), this._currentToast = null, requestAnimationFrame(() => {
       this._showNextToast();
     });
   }
@@ -83,8 +83,8 @@ let r = class extends P(d) {
    */
   _showNextToast() {
     if (this._toasts.length > 0) {
-      const [t, ...e] = this._toasts;
-      this._currentToast = t, this._toasts = e;
+      const [o, ...t] = this._toasts;
+      this._currentToast = o, this._toasts = t;
     } else
       this._currentToast = null;
   }
@@ -92,12 +92,12 @@ let r = class extends P(d) {
    * Adds a new toast to the queue and triggers its display if no toast is currently active.
    * @param {ToastProps} toast - The toast props to display.
    */
-  createToast(t) {
-    const e = { ...f, ...this.options, ...t };
-    this._toasts = [...this._toasts, e].sort((o, s) => {
+  createToast(o) {
+    const t = { ...f, ...this.options, ...o };
+    this._toasts = [...this._toasts, t].sort((e, i) => {
       var a, v;
-      const i = this.getPriority(s.variant, !!((a = s.leadingAction) != null && a.text));
-      return this.getPriority(o.variant, !!((v = o.leadingAction) != null && v.text)) - i;
+      const s = this.getPriority(i.variant, !!((a = i.leadingAction) != null && a.text));
+      return this.getPriority(e.variant, !!((v = e.leadingAction) != null && v.text)) - s;
     }), this._currentToast || this._showNextToast();
   }
   /**
@@ -109,47 +109,45 @@ let r = class extends P(d) {
   }
   render() {
     const {
-      position: t,
-      isRTL: e,
-      _currentToast: o
-    } = this, s = {
+      position: o,
+      _currentToast: t
+    } = this, e = {
       "c-toast-provider": !0,
-      [`c-toast-provider--${t}`]: !0,
-      "c-toast-provider--rtl": e
+      [`c-toast-provider--${o}`]: !0
     }, i = {
-      "pie-animation--slide-in": !!o,
-      "pie-animation--slide-out": o === null
+      "pie-animation--slide-in": !!t,
+      "pie-animation--slide-out": t === null
     };
     return u`
         <div 
-            class=${m(s)}
+            class=${m(e)}
             data-test-id="pie-toast-provider">
-            ${o && u`
+            ${t && u`
                 <pie-toast
                     class=${m(i)}
-                    message="${o.message}"
-                    variant="${y(o.variant)}"
-                    ?isStrong="${o.isStrong}"
-                    ?isDismissible="${o.isDismissible}"
-                    ?isMultiline="${o.isMultiline}"
-                    .leadingAction="${o.leadingAction}"
-                    .duration="${typeof o.duration > "u" ? T : o.duration}"
+                    message="${t.message}"
+                    variant="${y(t.variant)}"
+                    ?isStrong="${t.isStrong}"
+                    ?isDismissible="${t.isDismissible}"
+                    ?isMultiline="${t.isMultiline}"
+                    .leadingAction="${t.leadingAction}"
+                    .duration="${typeof t.duration > "u" ? b : t.duration}"
                     @pie-toast-close="${this._dismissToast}"
-                    @pie-toast-open="${o.onPieToastOpen}"
-                    @pie-toast-leading-action-click="${o.onPieToastLeadingActionClick}">
+                    @pie-toast-open="${t.onPieToastOpen}"
+                    @pie-toast-leading-action-click="${t.onPieToastLeadingActionClick}">
                 </pie-toast>
             `}
             </div>
         `;
   }
 };
-r.styles = b(O);
+r.styles = T(A);
 n([
   h({ type: Object })
 ], r.prototype, "options", 2);
 n([
   h({ type: String }),
-  $(C, D, c.position)
+  P(C, w, c.position)
 ], r.prototype, "position", 2);
 n([
   _()
@@ -158,13 +156,13 @@ n([
   _()
 ], r.prototype, "_currentToast", 2);
 r = n([
-  A("pie-toast-provider")
+  $("pie-toast-provider")
 ], r);
 export {
-  E as ON_TOAST_PROVIDER_QUEUE_UPDATE_EVENT,
-  w as PRIORITY_ORDER,
+  D as ON_TOAST_PROVIDER_QUEUE_UPDATE_EVENT,
+  O as PRIORITY_ORDER,
   r as PieToastProvider,
   c as defaultProps,
-  D as positions,
-  I as toaster
+  w as positions,
+  j as toaster
 };

package/dist/react.d.ts

@@ -1,10 +1,8 @@
 import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import { CSSResult } from 'lit';
-import { GenericConstructor } from '@justeattakeaway/pie-webc-core';
 import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
 import { PropertyValues } from 'lit';
 import * as React_2 from 'react';
-import { RTLInterface } from '@justeattakeaway/pie-webc-core';
 import { TemplateResult } from 'lit-html';
 import { ToastProps } from '@justeattakeaway/pie-toast';
 
@@ -40,7 +38,7 @@ export declare const PieToastProvider: React_2.ForwardRefExoticComponent<React_2
  * @tagname pie-toast-provider
  * @event {CustomEvent} pie-toast-provider-queue-update - when a toast is added or removed from the queue.
  */
-declare class PieToastProvider_2 extends PieToastProvider_base implements ToastProviderProps {
+declare class PieToastProvider_2 extends PieElement implements ToastProviderProps {
     options: Partial<ExtendedToastProps>;
     position: "default" | "bottom-left" | "bottom-right" | "bottom-center";
     private _toasts;
@@ -76,8 +74,6 @@ declare class PieToastProvider_2 extends PieToastProvider_base implements ToastP
     static styles: CSSResult;
 }
 
-declare const PieToastProvider_base: GenericConstructor<RTLInterface> & typeof PieElement;
-
 declare type PieToastProviderEvents = {
     onPieToastProviderQueueUpdate?: (event: CustomEvent) => void;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-toast-provider",
   "description": "PIE Design System Toast Provider built using Web Components",
-  "version": "0.6.3",
+  "version": "0.7.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",
@@ -40,13 +40,13 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
     "@justeattakeaway/pie-components-config": "0.21.0",
-    "@justeattakeaway/pie-css": "0.18.0",
-    "@justeattakeaway/pie-monorepo-utils": "0.6.0",
+    "@justeattakeaway/pie-css": "0.19.0",
+    "@justeattakeaway/pie-monorepo-utils": "0.7.0",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-toast": "0.10.2",
-    "@justeattakeaway/pie-webc-core": "1.0.0"
+    "@justeattakeaway/pie-toast": "0.11.1",
+    "@justeattakeaway/pie-webc-core": "1.1.0"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/index.ts

@@ -9,7 +9,6 @@ import { state, property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { classMap } from 'lit/directives/class-map.js';
 import {
-    RtlMixin,
     dispatchCustomEvent,
     safeCustomElement,
     validPropertyValues,
@@ -37,7 +36,7 @@ const componentSelector = 'pie-toast-provider';
  * @event {CustomEvent} pie-toast-provider-queue-update - when a toast is added or removed from the queue.
  */
 @safeCustomElement('pie-toast-provider')
-export class PieToastProvider extends RtlMixin(PieElement) implements ToastProviderProps {
+export class PieToastProvider extends PieElement implements ToastProviderProps {
     @property({ type: Object })
     public options = defaultProps.options;
 
@@ -128,14 +127,12 @@ export class PieToastProvider extends RtlMixin(PieElement) implements ToastProvi
     render () {
         const {
             position,
-            isRTL,
             _currentToast,
         } = this;
 
         const classes = {
             'c-toast-provider': true,
             [`c-toast-provider--${position}`]: true,
-            'c-toast-provider--rtl': isRTL,
         };
 
         const toastClasses = {

package/src/toast-provider.scss

@@ -19,7 +19,7 @@
         inset-inline-start: var(--toast-provider-offset);
         inset-block-end: var(--toast-provider-offset);
 
-        &.c-toast-provider--rtl {
+        &:dir(rtl) {
             --pie-animation-slide-translate-start: 100%;
         }
     }