@justeattakeaway/pie-modal 0.34.1 → 0.35.0

package/dist/index.d.ts

@@ -29,6 +29,10 @@ export declare const headingLevels: readonly ["h1", "h2", "h3", "h4", "h5", "h6"
 
 export declare type ModalActionType = 'leading' | 'supporting';
 
+export declare interface ModalEventDetail {
+    targetModal: PieModal;
+}
+
 export declare type ModalProps = {
     /**
      * The ARIA labels used for the modal close and back buttons, as well as loading state.

package/dist/index.js

@@ -1,5 +1,5 @@
-import { LitElement as P, nothing as r, unsafeCSS as T } from "lit";
-import { html as c, unsafeStatic as F } from "lit/static-html.js";
+import { LitElement as P, nothing as s, unsafeCSS as T } from "lit";
+import { html as m, unsafeStatic as F } from "lit/static-html.js";
 import { property as d, query as N } from "lit/decorators.js";
 import "@justeattakeaway/pie-button";
 import "@justeattakeaway/pie-icon-button";
@@ -25,26 +25,26 @@ if (typeof window < "u") {
   };
   window.addEventListener("testPassive", null, A), window.removeEventListener("testPassive", null, A);
 }
-var B = typeof window < "u" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1), p = [], b = !1, S = -1, g = void 0, h = void 0, L = function(e) {
+var B = typeof window < "u" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1), p = [], k = !1, S = -1, h = void 0, u = void 0, L = function(e) {
   return p.some(function(o) {
     return !!(o.options.allowTouchMove && o.options.allowTouchMove(e));
   });
-}, k = function(e) {
+}, w = function(e) {
   var o = e || window.event;
   return L(o.target) || o.touches.length > 1 ? !0 : (o.preventDefault && o.preventDefault(), !1);
 }, Y = function(e) {
-  if (h === void 0) {
+  if (u === void 0) {
     var o = !!e && e.reserveScrollBarGap === !0, i = window.innerWidth - document.documentElement.clientWidth;
-    o && i > 0 && (h = document.body.style.paddingRight, document.body.style.paddingRight = i + "px");
+    o && i > 0 && (u = document.body.style.paddingRight, document.body.style.paddingRight = i + "px");
   }
-  g === void 0 && (g = document.body.style.overflow, document.body.style.overflow = "hidden");
+  h === void 0 && (h = document.body.style.overflow, document.body.style.overflow = "hidden");
 }, V = function() {
-  h !== void 0 && (document.body.style.paddingRight = h, h = void 0), g !== void 0 && (document.body.style.overflow = g, g = void 0);
+  u !== void 0 && (document.body.style.paddingRight = u, u = void 0), h !== void 0 && (document.body.style.overflow = h, h = void 0);
 }, q = function(e) {
   return e ? e.scrollHeight - e.scrollTop <= e.clientHeight : !1;
 }, H = function(e, o) {
   var i = e.targetTouches[0].clientY - S;
-  return L(e.target) ? !1 : o && o.scrollTop === 0 && i > 0 || q(o) && i < 0 ? k(e) : (e.stopPropagation(), !0);
+  return L(e.target) ? !1 : o && o.scrollTop === 0 && i > 0 || q(o) && i < 0 ? w(e) : (e.stopPropagation(), !0);
 }, U = function(e, o) {
   if (!e) {
     console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
@@ -61,7 +61,7 @@ var B = typeof window < "u" && window.navigator && window.navigator.platform &&
       t.targetTouches.length === 1 && (S = t.targetTouches[0].clientY);
     }, e.ontouchmove = function(t) {
       t.targetTouches.length === 1 && H(t, e);
-    }, b || (document.addEventListener("touchmove", k, C ? { passive: !1 } : void 0), b = !0)) : Y(o);
+    }, k || (document.addEventListener("touchmove", w, C ? { passive: !1 } : void 0), k = !0)) : Y(o);
   }
 }, K = function(e) {
   if (!e) {
@@ -70,46 +70,40 @@ var B = typeof window < "u" && window.navigator && window.navigator.platform &&
   }
   p = p.filter(function(o) {
     return o.targetElement !== e;
-  }), B ? (e.ontouchstart = null, e.ontouchmove = null, b && p.length === 0 && (document.removeEventListener("touchmove", k, C ? { passive: !1 } : void 0), b = !1)) : p.length || V();
+  }), B ? (e.ontouchstart = null, e.ontouchmove = null, k && p.length === 0 && (document.removeEventListener("touchmove", w, C ? { passive: !1 } : void 0), k = !1)) : p.length || V();
 };
 const G = `dialog{position:absolute;left:0;right:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;border:solid;padding:1em;background:white;color:#000;display:block}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.1)}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translateY(-50%)}*,*:before,*:after{box-sizing:border-box}.c-modal{--modal-size-s: 450px;--modal-size-m: 600px;--modal-size-l: 1080px;--modal-border-radius: var(--dt-radius-rounded-d);--modal-font: var(--dt-font-interactive-m-family);--modal-bg-color: var(--dt-color-container-default);--modal-elevation: var(--dt-elevation-04);border-radius:var(--modal-border-radius);border:none;box-shadow:var(--modal-elevation);font-family:var(--modal-font);background-color:var(--modal-bg-color);padding:0;--modal-margin-none: var(--dt-spacing-none);--modal-margin-small: var(--dt-spacing-g);--modal-margin-large: var(--dt-spacing-j);--modal-margin-block: var(--modal-margin-small);--modal-block-size: fit-content;--modal-inline-size: 75%;--modal-max-block-size: calc(100vh - calc(var(--modal-margin-block) * 2));--modal-max-inline-size: var(--modal-size-m);block-size:var(--modal-block-size);inline-size:var(--modal-inline-size);max-block-size:var(--modal-max-block-size);max-inline-size:var(--modal-max-inline-size)}.c-modal:focus-visible{outline:none}@media (max-width: 767px){.c-modal pie-icon-button{--btn-dimension: 40px}}.c-modal[open]{display:flex;flex-direction:column}@media (min-width: 768px){.c-modal{--modal-margin-block: var(--modal-margin-large)}}.c-modal[size=small]{--modal-max-inline-size: var(--modal-size-s)}@media (min-width: 768px){.c-modal[size=small]{--modal-margin-block: var(--modal-margin-large)}}@media (max-width: 767px){.c-modal[size=medium][isfullwidthbelowmid]{--modal-margin-block: var(--modal-margin-none);--modal-border-radius: var(--dt-radius-rounded-none);--modal-block-size: 100%;--modal-inline-size: 100%;--modal-max-inline-size: 100%}.c-modal[size=medium][isfullwidthbelowmid]>.c-modal-scrollContainer{block-size:100%}}.c-modal[size=large]{--modal-inline-size: 75%;--modal-max-inline-size: var(--modal-size-l);--modal-margin-block: var(--modal-margin-large)}@media (max-width: 767px){.c-modal[size=large]{--modal-margin-block: var(--modal-margin-none);--modal-border-radius: var(--dt-radius-rounded-none);--modal-block-size: 100%;--modal-inline-size: 100%}}.c-modal[position=top]{margin-block-start:var(--dt-spacing-j);max-block-size:calc(100% - var(--dt-spacing-j) * 2)}@media (max-width: 767px){.c-modal[position=top][size=large],.c-modal[position=top][isfullwidthbelowmid][size=medium]{margin-block-start:var(--dt-spacing-none);max-block-size:100%}}.c-modal::backdrop{background:rgba(0,0,0,.55)}.c-modal .c-modal-footer{--modal-button-spacing: var(--dt-spacing-d);--modal-footer-padding: var(--dt-spacing-d);display:flex;flex-flow:row-reverse;flex-wrap:wrap;gap:var(--modal-button-spacing);padding:var(--modal-footer-padding)}@media (min-width: 768px){.c-modal .c-modal-footer{--modal-footer-padding: var(--dt-spacing-e)}}@media (max-width: 767px){.c-modal[hasstackedactions] .c-modal-footer{flex-direction:column}}.c-modal .c-modal-header{display:grid;grid-template-areas:"back heading close";grid-template-columns:minmax(0,max-content) minmax(0,1fr) minmax(0,max-content);align-items:start}.c-modal .c-modal-heading{--modal-header-font-size: calc(var(--dt-font-heading-m-size--narrow) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--narrow) * 1px);--modal-header-font-weight: var(--dt-font-heading-m-weight);font-size:var(--modal-header-font-size);line-height:var(--modal-header-font-line-height);font-weight:var(--modal-header-font-weight);margin:0;grid-area:heading;margin-inline:var(--dt-spacing-d);margin-block:14px}@media (min-width: 768px){.c-modal .c-modal-heading{--modal-header-font-size: calc(var(--dt-font-heading-m-size--wide) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--wide) * 1px);margin-inline:var(--dt-spacing-e);margin-block:20px}}.c-modal[hasbackbutton] .c-modal-heading{margin-inline-start:var(--dt-spacing-b)}@media (min-width: 768px){.c-modal[hasbackbutton] .c-modal-heading{margin-inline-start:var(--dt-spacing-c)}}.c-modal[isdismissible] .c-modal-heading{margin-inline-end:var(--dt-spacing-d)}@media (min-width: 768px){.c-modal[isdismissible] .c-modal-heading{margin-inline-end:var(--dt-spacing-e)}}.c-modal .c-modal-backBtn{grid-area:back;margin-block:var(--dt-spacing-b);margin-inline:var(--dt-spacing-b) var(--dt-spacing-none)}@media (min-width: 768px){.c-modal .c-modal-backBtn{margin-block:var(--dt-spacing-c);margin-inline:var(--dt-spacing-c) var(--dt-spacing-none)}}.c-modal .c-modal-closeBtn{grid-area:close;margin-block:var(--dt-spacing-b);margin-inline:var(--dt-spacing-none) var(--dt-spacing-b)}@media (min-width: 768px){.c-modal .c-modal-closeBtn{margin-block:var(--dt-spacing-c);margin-inline:var(--dt-spacing-none) var(--dt-spacing-c)}}.c-modal .c-modal-content{--modal-content-font-size: calc(var(--dt-font-size-16) * 1px);--modal-content-font-weight: var(--dt-font-weight-regular);--modal-content-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--modal-content-padding-block: var(--dt-spacing-a);--modal-content-padding-inline: var(--dt-spacing-d);position:relative;min-block-size:var(--dt-spacing-j);font-size:var(--modal-content-font-size);line-height:var(--modal-content-line-height);font-weight:var(--modal-content-font-weight);padding-inline:var(--modal-content-padding-inline);padding-block:var(--modal-content-padding-block);flex-grow:1}@media (min-width: 768px){.c-modal .c-modal-content{--modal-content-padding-inline: var(--dt-spacing-e)}}.c-modal .c-modal-content--scrollable{background:linear-gradient(to bottom,transparent,var(--dt-color-container-default) 75%) center bottom,linear-gradient(transparent,var(--dt-color-border-strong)) center bottom;background-repeat:no-repeat;background-size:100% 48px,100% 12px;background-attachment:local,scroll}.c-modal>.c-modal-scrollContainer{display:flex;flex-direction:column;block-size:auto;overflow-y:auto;--bg-scroll-end: linear-gradient(rgba(255, 255, 255, 0), var(--dt-color-container-default) 70%) 0 100%;--bg-scroll-bottom: radial-gradient(farthest-corner at 50% 100%, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)) 0 100%;--bg-size-scroll-end: 100% 40px;--bg-size-scroll-bottom: 100% 8px;background:var(--bg-scroll-end),var(--bg-scroll-bottom);background-repeat:no-repeat;background-size:var(--bg-size-scroll-end),var(--bg-size-scroll-bottom);background-attachment:local,scroll}.c-modal>.c-modal-scrollContainer .c-modal-content{flex-shrink:0}.c-modal[isfooterpinned] .c-modal-content{overflow-y:auto}.c-modal[isLoading] .c-modal-content pie-spinner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.c-modal[isLoading] .c-modal-content .c-modal-contentInner{display:none}@supports not (aspect-ratio: 1/1){.c-modal .c-modal-scrollContainer{background:none}}
-`, X = ["h1", "h2", "h3", "h4", "h5", "h6"], J = ["small", "medium", "large"], Q = ["top", "center"], x = "pie-modal-close", v = "pie-modal-open", _ = "pie-modal-back", Z = "pie-modal-leading-action-click", ee = "pie-modal-supporting-action-click";
+`, X = ["h1", "h2", "h3", "h4", "h5", "h6"], J = ["small", "medium", "large"], Q = ["top", "center"], x = "pie-modal-close", b = "pie-modal-open", _ = "pie-modal-back", Z = "pie-modal-leading-action-click", ee = "pie-modal-supporting-action-click";
 var oe = Object.defineProperty, ie = Object.getOwnPropertyDescriptor, l = (n, e, o, i) => {
-  for (var t = i > 1 ? void 0 : i ? ie(e, o) : e, s = n.length - 1, m; s >= 0; s--)
-    (m = n[s]) && (t = (i ? m(e, o, t) : m(t)) || t);
+  for (var t = i > 1 ? void 0 : i ? ie(e, o) : e, r = n.length - 1, c; r >= 0; r--)
+    (c = n[r]) && (t = (i ? c(e, o, t) : c(t)) || t);
   return i && t && oe(e, o, t), t;
 };
-const u = "pie-modal";
+const f = "pie-modal";
 class a extends I(P) {
   constructor() {
     super(...arguments), this.headingLevel = "h2", this.hasBackButton = !1, this.hasStackedActions = !1, this.isDismissible = !1, this.isFooterPinned = !0, this.isFullWidthBelowMid = !1, this.isLoading = !1, this.isOpen = !1, this.position = "center", this.size = "medium", this._backButtonClicked = !1, this._handleDialogCancelEvent = (e) => {
       this.isDismissible || e.preventDefault();
     }, this._handleDialogLightDismiss = (e) => {
-      var f;
+      var v;
       if (!this.isDismissible)
         return;
-      const o = (f = this._dialog) == null ? void 0 : f.getBoundingClientRect(), {
+      const o = (v = this._dialog) == null ? void 0 : v.getBoundingClientRect(), {
         top: i = 0,
         bottom: t = 0,
-        left: s = 0,
-        right: m = 0
+        left: r = 0,
+        right: c = 0
       } = o || {};
-      if (i === 0 && t === 0 && s === 0 && m === 0)
+      if (i === 0 && t === 0 && r === 0 && c === 0)
         return;
-      (e.clientY < i || e.clientY > t || e.clientX < s || e.clientX > m) && (this.isOpen = !1);
-    }, this._dispatchModalCustomEvent = (e) => {
-      const o = new CustomEvent(e, {
-        bubbles: !0,
-        composed: !0
-      });
-      this.dispatchEvent(o);
+      (e.clientY < i || e.clientY > t || e.clientX < r || e.clientX > c) && (this.isOpen = !1);
     };
   }
   connectedCallback() {
-    super.connectedCallback(), this.addEventListener("click", (e) => this._handleDialogLightDismiss(e)), document.addEventListener(v, this._handleModalOpened.bind(this)), document.addEventListener(x, this._handleModalClosed.bind(this)), document.addEventListener(_, this._handleModalClosed.bind(this));
+    super.connectedCallback(), this.addEventListener("click", (e) => this._handleDialogLightDismiss(e)), document.addEventListener(b, (e) => this._handleModalOpened(e)), document.addEventListener(x, (e) => this._handleModalClosed(e)), document.addEventListener(_, (e) => this._handleModalClosed(e));
   }
   disconnectedCallback() {
-    document.removeEventListener(v, this._handleModalOpened.bind(this)), document.removeEventListener(x, this._handleModalClosed.bind(this)), document.removeEventListener(_, this._handleModalClosed.bind(this)), super.disconnectedCallback();
+    document.removeEventListener(b, (e) => this._handleModalOpened(e)), document.removeEventListener(x, (e) => this._handleModalClosed(e)), document.removeEventListener(_, (e) => this._handleModalClosed(e)), super.disconnectedCallback();
   }
   async firstUpdated(e) {
     super.firstUpdated(e), this._dialog && ((await import("./dialog-polyfill.esm-29edb142.js").then((i) => i.default)).registerDialog(this._dialog), this._dialog.addEventListener("cancel", (i) => this._handleDialogCancelEvent(i)), this._dialog.addEventListener("close", () => {
@@ -122,27 +116,35 @@ class a extends I(P) {
   /**
    * Opens the dialog element and disables page scrolling
    */
-  _handleModalOpened() {
-    var o, i, t, s;
-    const e = (o = this._dialog) == null ? void 0 : o.querySelector(".c-modal-scrollContainer");
-    e && U(e), !((i = this._dialog) != null && i.hasAttribute("open") || !((t = this._dialog) != null && t.isConnected)) && ((s = this._dialog) == null || s.showModal());
+  _handleModalOpened(e) {
+    var i, t, r, c;
+    const { targetModal: o } = e.detail;
+    if (o === this) {
+      const g = (i = this._dialog) == null ? void 0 : i.querySelector(".c-modal-scrollContainer");
+      if (g && U(g), (t = this._dialog) != null && t.hasAttribute("open") || !((r = this._dialog) != null && r.isConnected))
+        return;
+      (c = this._dialog) == null || c.showModal();
+    }
   }
   /**
    * Closes the dialog element and re-enables page scrolling
    */
-  _handleModalClosed() {
-    var o, i;
-    const e = (o = this._dialog) == null ? void 0 : o.querySelector(".c-modal-scrollContainer");
-    e && K(e), (i = this._dialog) == null || i.close(), this._returnFocus();
+  _handleModalClosed(e) {
+    var i, t;
+    const { targetModal: o } = e.detail;
+    if (o === this) {
+      const r = (i = this._dialog) == null ? void 0 : i.querySelector(".c-modal-scrollContainer");
+      r && K(r), (t = this._dialog) == null || t.close(), this._returnFocus();
+    }
   }
   // Handles the value of the isOpen property on first render of the component
   _handleModalOpenStateOnFirstRender(e) {
-    e.get("isOpen") === void 0 && this.isOpen && this._dispatchModalCustomEvent(v);
+    e.get("isOpen") === void 0 && this.isOpen && this._dispatchModalCustomEvent(b);
   }
   // Handles changes to the modal isOpen property by dispatching any appropriate events
   _handleModalOpenStateChanged(e) {
     const o = e.get("isOpen");
-    o !== void 0 && (o ? this._backButtonClicked ? (this._backButtonClicked = !1, this._dispatchModalCustomEvent(_)) : this._dispatchModalCustomEvent(x) : this._dispatchModalCustomEvent(v));
+    o !== void 0 && (o ? this._backButtonClicked ? (this._backButtonClicked = !1, this._dispatchModalCustomEvent(_)) : this._dispatchModalCustomEvent(x) : this._dispatchModalCustomEvent(b));
   }
   _handleActionClick(e) {
     var o, i;
@@ -165,14 +167,14 @@ class a extends I(P) {
    */
   renderCloseButton() {
     var e;
-    return c`
+    return m`
             <pie-icon-button
                 @click="${() => {
       this.isOpen = !1;
     }}"
                 variant="ghost-secondary"
                 class="c-modal-closeBtn"
-                aria-label="${((e = this.aria) == null ? void 0 : e.close) || r}"
+                aria-label="${((e = this.aria) == null ? void 0 : e.close) || s}"
                 data-test-id="modal-close-button">
                 <icon-close></icon-close>
             </pie-icon-button>`;
@@ -185,16 +187,16 @@ class a extends I(P) {
    */
   renderBackButton() {
     var e;
-    return c`
+    return m`
             <pie-icon-button
                 @click="${() => {
       this._backButtonClicked = !0, this.isOpen = !1;
     }}"
                 variant="ghost-secondary"
                 class="c-modal-backBtn"
-                aria-label="${((e = this.aria) == null ? void 0 : e.back) || r}"
+                aria-label="${((e = this.aria) == null ? void 0 : e.back) || s}"
                 data-test-id="modal-back-button">
-                ${this.isRTL ? c`<icon-chevron-right></icon-chevron-right>` : c`<icon-chevron-left></icon-chevron-left>`}
+                ${this.isRTL ? m`<icon-chevron-right></icon-chevron-right>` : m`<icon-chevron-left></icon-chevron-left>`}
             </pie-icon-button>
         `;
   }
@@ -209,17 +211,17 @@ class a extends I(P) {
    */
   renderLeadingAction() {
     const { text: e, variant: o = "primary", ariaLabel: i } = this.leadingAction;
-    return e ? c`
+    return e ? m`
             <pie-button
                 variant="${o}"
-                aria-label="${i || r}"
+                aria-label="${i || s}"
                 type="submit"
                 ?isFullWidth="${this.hasStackedActions}"
                 @click="${() => this._handleActionClick("leading")}"
                 data-test-id="modal-leading-action">
                 ${e}
             </pie-button>
-        ` : r;
+        ` : s;
   }
   /**
    * Render supportingAction button depending on prop availability.
@@ -234,33 +236,33 @@ class a extends I(P) {
    */
   renderSupportingAction() {
     const { text: e, variant: o = "ghost", ariaLabel: i } = this.supportingAction;
-    return e ? this.leadingAction ? c`
+    return e ? this.leadingAction ? m`
             <pie-button
                 variant="${o}"
-                aria-label="${i || r}"
+                aria-label="${i || s}"
                 type="reset"
                 ?isFullWidth="${this.hasStackedActions}"
                 @click="${() => this._handleActionClick("supporting")}"
                 data-test-id="modal-supporting-action">
                 ${e}
             </pie-button>
-        ` : (console.warn("Use `leadingAction` instead of `supportingAction`. `supportingAction` is being ignored."), r) : r;
+        ` : (console.warn("Use `leadingAction` instead of `supportingAction`. `supportingAction` is being ignored."), s) : s;
   }
   /**
    * Renders the modal inner content and footer of the modal.
    * @private
    */
   renderModalContentAndFooter() {
-    return c`
+    return m`
         <article class="c-modal-scrollContainer c-modal-content c-modal-content--scrollable">
             <div class="c-modal-contentInner">
                 <slot></slot>
             </div>
-            ${this.isLoading ? c`<pie-spinner size="xlarge" variant="secondary"></pie-spinner>` : r}
+            ${this.isLoading ? m`<pie-spinner size="xlarge" variant="secondary"></pie-spinner>` : s}
         </article>
         <footer class="c-modal-footer">
-            ${this.leadingAction ? this.renderLeadingAction() : r}
-            ${this.supportingAction ? this.renderSupportingAction() : r}
+            ${this.leadingAction ? this.renderLeadingAction() : s}
+            ${this.supportingAction ? this.renderSupportingAction() : s}
         </footer>`;
   }
   render() {
@@ -269,17 +271,17 @@ class a extends I(P) {
       hasBackButton: o,
       hasStackedActions: i,
       heading: t,
-      headingLevel: s = "h2",
-      isDismissible: m,
-      isFooterPinned: w,
-      isFullWidthBelowMid: f,
+      headingLevel: r = "h2",
+      isDismissible: c,
+      isFooterPinned: g,
+      isFullWidthBelowMid: v,
       isLoading: y,
       leadingAction: M,
       position: $,
       size: E,
       supportingAction: D
-    } = this, O = F(s);
-    return c`
+    } = this, O = F(r);
+    return m`
         <dialog
             id="dialog"
             class="c-modal"
@@ -288,28 +290,47 @@ class a extends I(P) {
             ?hasActions=${M || D}
             ?hasBackButton=${o}
             ?hasStackedActions=${i}
-            ?isDismissible=${m}
-            ?isFooterPinned=${w}
-            ?isFullWidthBelowMid=${f}
+            ?isDismissible=${c}
+            ?isFooterPinned=${g}
+            ?isFullWidthBelowMid=${v}
             ?isLoading=${y}
             aria-busy="${y ? "true" : "false"}"
-            aria-label="${y && (e == null ? void 0 : e.loading) || r}"
+            aria-label="${y && (e == null ? void 0 : e.loading) || s}"
             data-test-id="pie-modal">
             <header class="c-modal-header">
-                ${o ? this.renderBackButton() : r}
+                ${o ? this.renderBackButton() : s}
                 <${O} class="c-modal-heading">
                     ${t}
                 </${O}>
-                ${m ? this.renderCloseButton() : r}
+                ${c ? this.renderCloseButton() : s}
             </header>
             ${// We need to wrap the remaining content in a shared scrollable container if the footer is not pinned
-    w ? this.renderModalContentAndFooter() : c`
+    g ? this.renderModalContentAndFooter() : m`
                         <div class="c-modal-scrollContainer">
                             ${this.renderModalContentAndFooter()}
                         </div>
                         `}
         </dialog>`;
   }
+  /**
+   * Note: We should aim to have a shareable event helper system to allow
+   * us to share this across components in-future.
+   *
+   * Dispatch a custom event.
+   *
+   * To be used whenever we have behavioural events we want to
+   * bubble up through the modal.
+   *
+   * @param {string} eventType
+   */
+  _dispatchModalCustomEvent(e) {
+    const o = new CustomEvent(e, {
+      bubbles: !0,
+      composed: !0,
+      detail: { targetModal: this }
+    });
+    this.dispatchEvent(o);
+  }
 }
 a.styles = T(G);
 l([
@@ -317,11 +338,11 @@ l([
 ], a.prototype, "aria", 2);
 l([
   d({ type: String }),
-  R(u)
+  R(f)
 ], a.prototype, "heading", 2);
 l([
   d(),
-  z(u, X, "h2")
+  z(f, X, "h2")
 ], a.prototype, "headingLevel", 2);
 l([
   d({ type: Boolean })
@@ -349,14 +370,14 @@ l([
 ], a.prototype, "leadingAction", 2);
 l([
   d(),
-  z(u, Q, "center")
+  z(f, Q, "center")
 ], a.prototype, "position", 2);
 l([
   d()
 ], a.prototype, "returnFocusAfterCloseSelector", 2);
 l([
   d(),
-  z(u, J, "medium")
+  z(f, J, "medium")
 ], a.prototype, "size", 2);
 l([
   d({ type: Object })
@@ -364,12 +385,12 @@ l([
 l([
   N("dialog")
 ], a.prototype, "_dialog", 2);
-j(u, a);
+j(f, a);
 export {
   _ as ON_MODAL_BACK_EVENT,
   x as ON_MODAL_CLOSE_EVENT,
   Z as ON_MODAL_LEADING_ACTION_CLICK,
-  v as ON_MODAL_OPEN_EVENT,
+  b as ON_MODAL_OPEN_EVENT,
   ee as ON_MODAL_SUPPORTING_ACTION_CLICK,
   a as PieModal,
   X as headingLevels,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-modal",
-  "version": "0.34.1",
+  "version": "0.35.0",
   "description": "PIE design system modal built using web components",
   "type": "module",
   "main": "dist/index.js",
@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "@justeattakeaway/pie-button": "0.40.1",
-    "@justeattakeaway/pie-icon-button": "0.23.0",
+    "@justeattakeaway/pie-icon-button": "0.24.0",
     "@justeattakeaway/pie-icons-webc": "0.12.0",
     "@justeattakeaway/pie-spinner": "0.3.1",
     "@justeattakeaway/pie-webc-core": "0.13.0",

package/src/index.ts

@@ -36,6 +36,10 @@ export * from './defs';
 
 const componentSelector = 'pie-modal';
 
+export interface ModalEventDetail {
+    targetModal: PieModal;
+}
+
 /**
  * @tagname pie-modal
  * @event {CustomEvent} pie-modal-open - when the modal is opened.
@@ -105,15 +109,15 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
     connectedCallback () : void {
         super.connectedCallback();
         this.addEventListener('click', (event) => this._handleDialogLightDismiss(event));
-        document.addEventListener(ON_MODAL_OPEN_EVENT, this._handleModalOpened.bind(this));
-        document.addEventListener(ON_MODAL_CLOSE_EVENT, this._handleModalClosed.bind(this));
-        document.addEventListener(ON_MODAL_BACK_EVENT, this._handleModalClosed.bind(this));
+        document.addEventListener(ON_MODAL_OPEN_EVENT, (event) => this._handleModalOpened(<CustomEvent>event));
+        document.addEventListener(ON_MODAL_CLOSE_EVENT, (event) => this._handleModalClosed(<CustomEvent>event));
+        document.addEventListener(ON_MODAL_BACK_EVENT, (event) => this._handleModalClosed(<CustomEvent>event));
     }
 
     disconnectedCallback () : void {
-        document.removeEventListener(ON_MODAL_OPEN_EVENT, this._handleModalOpened.bind(this));
-        document.removeEventListener(ON_MODAL_CLOSE_EVENT, this._handleModalClosed.bind(this));
-        document.removeEventListener(ON_MODAL_BACK_EVENT, this._handleModalClosed.bind(this));
+        document.removeEventListener(ON_MODAL_OPEN_EVENT, (event) => this._handleModalOpened(<CustomEvent>event));
+        document.removeEventListener(ON_MODAL_CLOSE_EVENT, (event) => this._handleModalClosed(<CustomEvent>event));
+        document.removeEventListener(ON_MODAL_BACK_EVENT, (event) => this._handleModalClosed(<CustomEvent>event));
         super.disconnectedCallback();
     }
 
@@ -140,32 +144,41 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
     /**
      * Opens the dialog element and disables page scrolling
      */
-    private _handleModalOpened () : void {
-        const modalScrollContainer = this._dialog?.querySelector('.c-modal-scrollContainer');
+    private _handleModalOpened (event: CustomEvent): void {
+        const { targetModal } = event.detail;
 
-        if (modalScrollContainer) {
-            disableBodyScroll(modalScrollContainer);
-        }
+        if (targetModal === this) {
+            const modalScrollContainer = this._dialog?.querySelector('.c-modal-scrollContainer');
 
-        if (this._dialog?.hasAttribute('open') || !this._dialog?.isConnected) {
-            return;
+            if (modalScrollContainer) {
+                disableBodyScroll(modalScrollContainer);
+            }
+
+            if (this._dialog?.hasAttribute('open') || !this._dialog?.isConnected) {
+                return;
+            }
+
+            // The ::backdrop pseudoelement is only shown if the modal is opened via JS
+            this._dialog?.showModal();
         }
-        // The ::backdrop pseudoelement is only shown if the modal is opened via JS
-        this._dialog?.showModal();
     }
 
     /**
      * Closes the dialog element and re-enables page scrolling
      */
-    private _handleModalClosed () : void {
-        const modalScrollContainer = this._dialog?.querySelector('.c-modal-scrollContainer');
+    private _handleModalClosed (event: CustomEvent): void {
+        const { targetModal } = event.detail;
 
-        if (modalScrollContainer) {
-            enableBodyScroll(modalScrollContainer);
-        }
+        if (targetModal === this) {
+            const modalScrollContainer = this._dialog?.querySelector('.c-modal-scrollContainer');
+
+            if (modalScrollContainer) {
+                enableBodyScroll(modalScrollContainer);
+            }
 
-        this._dialog?.close();
-        this._returnFocus();
+            this._dialog?.close();
+            this._returnFocus();
+        }
     }
 
     /**
@@ -448,14 +461,15 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
      *
      * @param {string} eventType
      */
-    private _dispatchModalCustomEvent = (eventType: string) : void => {
-        const event = new CustomEvent(eventType, {
+    private _dispatchModalCustomEvent (eventType: string): void {
+        const event = new CustomEvent<ModalEventDetail>(eventType, {
             bubbles: true,
             composed: true,
+            detail: { targetModal: this },
         });
 
         this.dispatchEvent(event);
-    };
+    }
 }
 
 defineCustomElement(componentSelector, PieModal);