@justeattakeaway/pie-toast-provider 0.3.2 → 0.4.0

package/dist/index.js

@@ -1,22 +1,22 @@
 import { LitElement as m, nothing as T, html as u, unsafeCSS as g } from "lit";
 import { property as f, state as v } from "lit/decorators.js";
 import { ifDefined as y } from "lit/directives/if-defined.js";
-import { RtlMixin as P, dispatchCustomEvent as $, defineCustomElement as b } from "@justeattakeaway/pie-webc-core";
+import { RtlMixin as P, dispatchCustomEvent as x, defineCustomElement as $ } from "@justeattakeaway/pie-webc-core";
 import { defaultProps as h } from "@justeattakeaway/pie-toast";
-var E = Object.defineProperty, x = (o, t, e, r) => {
+var b = Object.defineProperty, E = (o, t, e, r) => {
   for (var s = void 0, i = o.length - 1, n; i >= 0; i--)
     (n = o[i]) && (s = n(t, e, s) || s);
-  return s && E(t, e, s), s;
+  return s && b(t, e, s), s;
 };
 class _ extends m {
   constructor() {
-    super(...arguments), this.v = "0.3.2";
+    super(...arguments), this.v = "0.4.0";
   }
 }
-x([
+E([
   f({ type: String, reflect: !0 })
 ], _.prototype, "v");
-const A = "*,*:after,*:before{box-sizing:inherit}.c-toast-provider{--toast-provider-offset: var(--dt-spacing-d);position:absolute;inset-inline-start:var(--toast-provider-offset);inset-block-end:var(--toast-provider-offset)}@media (min-width: 769px){.c-toast-provider{--toast-offset: var(--dt-spacing-e)}}", O = {
+const A = "*,*:after,*:before{box-sizing:inherit}:host{--toast-provider-z-index: var(--dt-z-index-toast)}.c-toast-provider{--toast-provider-offset: var(--dt-spacing-d);position:absolute;inset-inline-start:var(--toast-provider-offset);inset-block-end:var(--toast-provider-offset);z-index:var(--toast-provider-z-index)}@media (min-width: 769px){.c-toast-provider{--toast-offset: var(--dt-spacing-e)}}", O = {
   "error-actionable": 1,
   error: 2,
   "warning-actionable": 3,
@@ -29,7 +29,7 @@ const A = "*,*:after,*:before{box-sizing:inherit}.c-toast-provider{--toast-provi
   neutral: 10
 }, D = {
   options: {}
-}, S = "pie-toast-provider-queue-update", q = {
+}, S = "pie-toast-provider-queue-update", k = {
   _getToastProvider() {
     const o = document.querySelectorAll("pie-toast-provider");
     return o.length === 0 ? (console.error("The pie-toast component requires a pie-toast-provider element present in the DOM."), null) : o.length > 1 ? (console.error("Multiple pie-toast-provider are found in the DOM. Only one provider is supported currently and should be registered at the root of the app."), null) : o[0];
@@ -56,7 +56,7 @@ const C = "pie-toast-provider", l = class l extends P(_) {
     t.has("_toasts") && this._dispatchQueueUpdateEvent();
   }
   _dispatchQueueUpdateEvent() {
-    $(
+    x(
       this,
       S,
       this._toasts
@@ -113,23 +113,25 @@ const C = "pie-toast-provider", l = class l extends P(_) {
   render() {
     const { _currentToast: t, _dismissToast: e } = this;
     return u`
-      <div class="c-toast-provider" data-test-id="pie-toast-provider">
-      ${t && u`
-              <pie-toast
-                message="${t.message}"
-                variant="${y(t.variant)}"
-                ?isStrong="${t.isStrong}"
-                ?isDismissible="${t.isDismissible}"
-                ?isMultiline="${t.isMultiline}"
-                .leadingAction="${t.leadingAction}"
-                .duration="${typeof t.duration > "u" ? T : t.duration}"
-                @pie-toast-close="${e}"
-                @pie-toast-open="${t.onPieToastOpen}"
-                @pie-toast-leading-action-click="${t.onPieToastLeadingActionClick}">
-              </pie-toast>
+        <div 
+            class="c-toast-provider" 
+            data-test-id="pie-toast-provider">
+            ${t && u`
+                <pie-toast
+                    message="${t.message}"
+                    variant="${y(t.variant)}"
+                    ?isStrong="${t.isStrong}"
+                    ?isDismissible="${t.isDismissible}"
+                    ?isMultiline="${t.isMultiline}"
+                    .leadingAction="${t.leadingAction}"
+                    .duration="${typeof t.duration > "u" ? T : t.duration}"
+                    @pie-toast-close="${e}"
+                    @pie-toast-open="${t.onPieToastOpen}"
+                    @pie-toast-leading-action-click="${t.onPieToastLeadingActionClick}">
+                </pie-toast>
             `}
-      </div>
-    `;
+        </div>
+        `;
   }
 };
 l.styles = g(A);
@@ -143,11 +145,11 @@ p([
 p([
   f({ type: Object })
 ], a.prototype, "options");
-b(C, a);
+$(C, a);
 export {
   S as ON_TOAST_PROVIDER_QUEUE_UPDATE_EVENT,
   O as PRIORITY_ORDER,
   a as PieToastProvider,
   D as defaultProps,
-  q as toaster
+  k as toaster
 };

package/package.json

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

package/src/defs-react.ts

@@ -1,8 +1,3 @@
 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
- * Example: an HTML button maps to `React.ButtonHTMLAttributes<HTMLButtonElement>`
- * https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0bb210867d16170c4a08d9ce5d132817651a0f80/types/react/index.d.ts#L2829
- */
+
 export type ReactBaseType = React.HTMLAttributes<HTMLElement>

package/src/index.ts

@@ -121,24 +121,26 @@ export class PieToastProvider extends RtlMixin(PieElement) implements ToastProvi
         const { _currentToast, _dismissToast } = this;
 
         return html`
-      <div class="c-toast-provider" data-test-id="pie-toast-provider">
-      ${_currentToast &&
-            html`
-              <pie-toast
-                message="${_currentToast.message}"
-                variant="${ifDefined(_currentToast.variant)}"
-                ?isStrong="${_currentToast.isStrong}"
-                ?isDismissible="${_currentToast.isDismissible}"
-                ?isMultiline="${_currentToast.isMultiline}"
-                .leadingAction="${_currentToast.leadingAction}"
-                .duration="${typeof _currentToast.duration === 'undefined' ? nothing : _currentToast.duration}"
-                @pie-toast-close="${_dismissToast}"
-                @pie-toast-open="${_currentToast.onPieToastOpen}"
-                @pie-toast-leading-action-click="${_currentToast.onPieToastLeadingActionClick}">
-              </pie-toast>
+        <div 
+            class="c-toast-provider" 
+            data-test-id="pie-toast-provider">
+            ${_currentToast &&
+                html`
+                <pie-toast
+                    message="${_currentToast.message}"
+                    variant="${ifDefined(_currentToast.variant)}"
+                    ?isStrong="${_currentToast.isStrong}"
+                    ?isDismissible="${_currentToast.isDismissible}"
+                    ?isMultiline="${_currentToast.isMultiline}"
+                    .leadingAction="${_currentToast.leadingAction}"
+                    .duration="${typeof _currentToast.duration === 'undefined' ? nothing : _currentToast.duration}"
+                    @pie-toast-close="${_dismissToast}"
+                    @pie-toast-open="${_currentToast.onPieToastOpen}"
+                    @pie-toast-leading-action-click="${_currentToast.onPieToastLeadingActionClick}">
+                </pie-toast>
             `}
-      </div>
-    `;
+        </div>
+        `;
     }
 
     // Renders a `CSSResult` generated from SCSS by Vite
@@ -152,4 +154,3 @@ declare global {
         [componentSelector]: PieToastProvider;
     }
 }
-

package/src/toast-provider.scss

@@ -1,6 +1,9 @@
 @use '@justeattakeaway/pie-css/scss' as p;
 @use '@justeattakeaway/pie-css/scss/settings' as *;
 
+:host {
+    --toast-provider-z-index: var(--dt-z-index-toast);
+}
 
 .c-toast-provider {
     --toast-provider-offset: var(--dt-spacing-d);
@@ -8,6 +11,7 @@
     position: absolute;
     inset-inline-start: var(--toast-provider-offset);
     inset-block-end: var(--toast-provider-offset);
+    z-index: var(--toast-provider-z-index);
 
     @include media('>md') {
         --toast-offset: var(--dt-spacing-e);