@justeattakeaway/pie-modal 0.47.0 → 0.48.0

package/custom-elements.json

@@ -285,7 +285,7 @@
               "kind": "field",
               "name": "_dialog",
               "type": {
-                "text": "HTMLDialogElement | undefined"
+                "text": "HTMLDialogElement"
               },
               "privacy": "private"
             },
@@ -298,6 +298,23 @@
               "privacy": "private",
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "_abortController",
+              "type": {
+                "text": "AbortController"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_modalScrollContainer",
+              "type": {
+                "text": "Element | null"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "method",
               "name": "_handleModalOpened",
@@ -416,6 +433,28 @@
               },
               "description": "Return focus to the specified element, providing the selector is valid\nand the chosen element can be found."
             },
+            {
+              "kind": "method",
+              "name": "_enableBodyScroll",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Enables body scroll by unlocking the scroll container."
+            },
+            {
+              "kind": "method",
+              "name": "_disableBodyScroll",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Disables body scroll by locking the scroll container."
+            },
             {
               "kind": "method",
               "name": "renderCloseButton",

package/dist/index.d.ts

@@ -167,8 +167,10 @@ export declare class PieModal extends PieModal_base implements ModalProps {
     returnFocusAfterCloseSelector: ModalProps['returnFocusAfterCloseSelector'];
     size: "medium" | "large" | "small";
     supportingAction: ModalProps['supportingAction'];
-    private _dialog?;
+    private _dialog;
     private _backButtonClicked;
+    private _abortController;
+    private get _modalScrollContainer();
     static styles: CSSResult;
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -197,6 +199,14 @@ export declare class PieModal extends PieModal_base implements ModalProps {
      * and the chosen element can be found.
      */
     private _returnFocus;
+    /**
+     * Enables body scroll by unlocking the scroll container.
+     */
+    private _enableBodyScroll;
+    /**
+     * Disables body scroll by locking the scroll container.
+     */
+    private _disableBodyScroll;
     /**
      * Template for the close button element. Called within the
      * main render function.

package/dist/index.js

@@ -1,80 +1,80 @@
-import { LitElement as I, unsafeCSS as N, nothing as h } from "lit";
-import { html as c, unsafeStatic as W } from "lit/static-html.js";
-import { property as r, query as R } from "lit/decorators.js";
-import { classMap as M } from "lit/directives/class-map.js";
-import { ifDefined as y } from "lit/directives/if-defined.js";
+import { LitElement as I, unsafeCSS as N, nothing as p } from "lit";
+import { html as s, unsafeStatic as W } from "lit/static-html.js";
+import { property as d, query as R } from "lit/decorators.js";
+import { classMap as S } from "lit/directives/class-map.js";
+import { ifDefined as k } from "lit/directives/if-defined.js";
 import "@justeattakeaway/pie-button";
 import "@justeattakeaway/pie-icon-button";
-import { RtlMixin as j, dispatchCustomEvent as u, requiredProperty as Y, validPropertyValues as B, defineCustomElement as V } from "@justeattakeaway/pie-webc-core";
+import { RtlMixin as j, dispatchCustomEvent as h, requiredProperty as Y, validPropertyValues as _, defineCustomElement as V } from "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-icons-webc/dist/IconClose.js";
 import "@justeattakeaway/pie-icons-webc/dist/IconChevronLeft.js";
 import "@justeattakeaway/pie-icons-webc/dist/IconChevronRight.js";
 import "@justeattakeaway/pie-spinner";
 function q(n) {
   if (Array.isArray(n)) {
-    for (var e = 0, o = Array(n.length); e < n.length; e++)
-      o[e] = n[e];
-    return o;
+    for (var o = 0, e = Array(n.length); o < n.length; o++)
+      e[o] = n[o];
+    return e;
   } else
     return Array.from(n);
 }
-var O = !1;
+var C = !1;
 if (typeof window < "u") {
-  var A = {
+  var O = {
     get passive() {
-      O = !0;
+      C = !0;
     }
   };
-  window.addEventListener("testPassive", null, A), window.removeEventListener("testPassive", null, A);
+  window.addEventListener("testPassive", null, O), window.removeEventListener("testPassive", null, O);
 }
-var $ = typeof window < "u" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1), g = [], x = !1, D = -1, f = void 0, v = void 0, F = function(e) {
-  return g.some(function(o) {
-    return !!(o.options.allowTouchMove && o.options.allowTouchMove(e));
+var M = typeof window < "u" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1), m = [], y = !1, $ = -1, u = void 0, f = void 0, D = function(o) {
+  return m.some(function(e) {
+    return !!(e.options.allowTouchMove && e.options.allowTouchMove(o));
   });
-}, _ = function(e) {
-  var o = e || window.event;
-  return F(o.target) || o.touches.length > 1 ? !0 : (o.preventDefault && o.preventDefault(), !1);
-}, H = function(e) {
-  if (v === void 0) {
-    var o = !!e, t = window.innerWidth - document.documentElement.clientWidth;
-    o && t > 0 && (v = document.body.style.paddingRight, document.body.style.paddingRight = t + "px");
+}, w = function(o) {
+  var e = o || window.event;
+  return D(e.target) || e.touches.length > 1 ? !0 : (e.preventDefault && e.preventDefault(), !1);
+}, H = function(o) {
+  if (f === void 0) {
+    var e = !!o, t = window.innerWidth - document.documentElement.clientWidth;
+    e && t > 0 && (f = document.body.style.paddingRight, document.body.style.paddingRight = t + "px");
   }
-  f === void 0 && (f = document.body.style.overflow, document.body.style.overflow = "hidden");
+  u === void 0 && (u = document.body.style.overflow, document.body.style.overflow = "hidden");
 }, K = function() {
-  v !== void 0 && (document.body.style.paddingRight = v, v = void 0), f !== void 0 && (document.body.style.overflow = f, f = void 0);
-}, U = function(e) {
-  return e ? e.scrollHeight - e.scrollTop <= e.clientHeight : !1;
-}, X = function(e, o) {
-  var t = e.targetTouches[0].clientY - D;
-  return F(e.target) ? !1 : o && o.scrollTop === 0 && t > 0 || U(o) && t < 0 ? _(e) : (e.stopPropagation(), !0);
-}, G = function(e, o) {
-  if (!e) {
+  f !== void 0 && (document.body.style.paddingRight = f, f = void 0), u !== void 0 && (document.body.style.overflow = u, u = void 0);
+}, U = function(o) {
+  return o ? o.scrollHeight - o.scrollTop <= o.clientHeight : !1;
+}, X = function(o, e) {
+  var t = o.targetTouches[0].clientY - $;
+  return D(o.target) ? !1 : e && e.scrollTop === 0 && t > 0 || U(e) && t < 0 ? w(o) : (o.stopPropagation(), !0);
+}, G = function(o, e) {
+  if (!o) {
     console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
     return;
   }
-  if (!g.some(function(i) {
-    return i.targetElement === e;
+  if (!m.some(function(i) {
+    return i.targetElement === o;
   })) {
     var t = {
-      targetElement: e,
+      targetElement: o,
       options: {}
     };
-    g = [].concat(q(g), [t]), $ ? (e.ontouchstart = function(i) {
-      i.targetTouches.length === 1 && (D = i.targetTouches[0].clientY);
-    }, e.ontouchmove = function(i) {
-      i.targetTouches.length === 1 && X(i, e);
-    }, x || (document.addEventListener("touchmove", _, O ? { passive: !1 } : void 0), x = !0)) : H(o);
+    m = [].concat(q(m), [t]), M ? (o.ontouchstart = function(i) {
+      i.targetTouches.length === 1 && ($ = i.targetTouches[0].clientY);
+    }, o.ontouchmove = function(i) {
+      i.targetTouches.length === 1 && X(i, o);
+    }, y || (document.addEventListener("touchmove", w, C ? { passive: !1 } : void 0), y = !0)) : H(e);
   }
-}, J = function(e) {
-  if (!e) {
+}, J = function(o) {
+  if (!o) {
     console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.");
     return;
   }
-  g = g.filter(function(o) {
-    return o.targetElement !== e;
-  }), $ ? (e.ontouchstart = null, e.ontouchmove = null, x && g.length === 0 && (document.removeEventListener("touchmove", _, O ? { passive: !1 } : void 0), x = !1)) : g.length || K();
+  m = m.filter(function(e) {
+    return e.targetElement !== o;
+  }), M ? (o.ontouchstart = null, o.ontouchmove = null, y && m.length === 0 && (document.removeEventListener("touchmove", w, C ? { passive: !1 } : void 0), y = !1)) : m.length || K();
 };
-const Q = '*,*:after,*:before{box-sizing:inherit}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:#fff;color:#000;display:block}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000001a}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translateY(-50%)}.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-l-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: 769px){.c-modal{--modal-margin-block: var(--modal-margin-large)}}.c-modal.c-modal--small{--modal-max-inline-size: var(--modal-size-s)}@media (min-width: 769px){.c-modal.c-modal--small{--modal-margin-block: var(--modal-margin-large)}}.c-modal.c-modal--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.c-modal--large,.c-modal.c-modal--medium.c-modal--fullWidthBelowMid{--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.c-modal--large>.c-modal-scrollContainer,.c-modal.c-modal--medium.c-modal--fullWidthBelowMid>.c-modal-scrollContainer{block-size:100%}}.c-modal.c-modal--top{margin-block-start:var(--dt-spacing-j);max-block-size:calc(100% - var(--dt-spacing-j) * 2)}@media (max-width: 767px){.c-modal.c-modal--top.c-modal--large,.c-modal.c-modal--top.c-modal--fullWidthBelowMid.c-modal--medium{margin-block-start:var(--dt-spacing-none);max-block-size:100%}}.c-modal::backdrop{background:var(--dt-color-overlay)}@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none){.c-modal::backdrop{background:#0000008c}}.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: 769px){.c-modal .c-modal-footer{--modal-footer-padding: var(--dt-spacing-e)}}@media (max-width: 767px){.c-modal .c-modal-footer.c-modal-footer--stackedActions{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-start:var(--dt-spacing-d);margin-inline-end:var(--dt-spacing-d);margin-block:14px}@media (min-width: 769px){.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-start:var(--dt-spacing-e);margin-inline-end:var(--dt-spacing-e);margin-block:20px}}.c-modal .c-modal-backBtn+.c-modal-heading{margin-inline-start:var(--dt-spacing-b)}@media (min-width: 769px){.c-modal .c-modal-backBtn+.c-modal-heading{margin-inline-start:var(--dt-spacing-c)}}.c-modal.c-modal--dismissible .c-modal-heading{margin-inline-end:var(--dt-spacing-d)}@media (min-width: 769px){.c-modal.c-modal--dismissible .c-modal-heading{margin-inline-end:var(--dt-spacing-e)}}.c-modal .c-modal-backBtn{grid-area:back;margin-block-start:var(--dt-spacing-b);margin-block-end:var(--dt-spacing-b);margin-inline-start:var(--dt-spacing-b);margin-inline-end:var(--dt-spacing-none)}@media (min-width: 769px){.c-modal .c-modal-backBtn{margin-block-start:var(--dt-spacing-c);margin-block-end:var(--dt-spacing-c);margin-inline-start:var(--dt-spacing-c);margin-inline-end:var(--dt-spacing-none)}}.c-modal .c-modal-closeBtn{grid-area:close;margin-block-start:var(--dt-spacing-b);margin-block-end:var(--dt-spacing-b);margin-inline-start:var(--dt-spacing-none);margin-inline-end:var(--dt-spacing-b)}@media (min-width: 769px){.c-modal .c-modal-closeBtn{margin-block-start:var(--dt-spacing-c);margin-block-end:var(--dt-spacing-c);margin-inline-start:var(--dt-spacing-none);margin-inline-end: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);--modal-content-padding-block-end: var(--dt-spacing-e);--modal-content-min-block-size: var(--dt-spacing-j);position:relative;min-block-size:calc(var(--modal-content-min-block-size) + var(--modal-content-padding-block) + var(--modal-content-padding-block-end));font-size:var(--modal-content-font-size);line-height:var(--modal-content-line-height);font-weight:var(--modal-content-font-weight);padding-inline-start:var(--modal-content-padding-inline);padding-inline-end:var(--modal-content-padding-inline);padding-block-start:var(--modal-content-padding-block);padding-block-end:var(--modal-content-padding-block-end);flex-grow:1}@media (min-width: 769px){.c-modal .c-modal-content{--modal-content-padding-inline: var(--dt-spacing-e)}}.c-modal .c-modal-content:not(:last-child){padding-block-end:var(--modal-content-padding-block);min-block-size:var(--modal-content-min-block-size)}.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;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.c-modal--pinnedFooter .c-modal-content{overflow-y:auto}.c-modal.c-modal--loading .c-modal-content pie-spinner{position:absolute;left:50%;top:calc(50% - (var(--modal-content-padding-block-end) - var(--modal-content-padding-block)) / 2);transform:translate(-50%,-50%)}.c-modal.c-modal--loading .c-modal-content .c-modal-contentInner{display:none}.c-modal.c-modal--loading .c-modal-content:not(:last-child) pie-spinner{top:50%}@supports not (aspect-ratio: 1/1){.c-modal .c-modal-scrollContainer{background:none}}', Z = ["h1", "h2", "h3", "h4", "h5", "h6"], ee = ["small", "medium", "large"], oe = ["top", "center"], z = "pie-modal-close", w = "pie-modal-open", C = "pie-modal-back", te = "pie-modal-leading-action-click", ie = "pie-modal-supporting-action-click", s = {
+const Q = '*,*:after,*:before{box-sizing:inherit}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:#fff;color:#000;display:block}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000001a}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translateY(-50%)}.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-l-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: 769px){.c-modal{--modal-margin-block: var(--modal-margin-large)}}.c-modal.c-modal--small{--modal-max-inline-size: var(--modal-size-s)}@media (min-width: 769px){.c-modal.c-modal--small{--modal-margin-block: var(--modal-margin-large)}}.c-modal.c-modal--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.c-modal--large,.c-modal.c-modal--medium.c-modal--fullWidthBelowMid{--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.c-modal--large>.c-modal-scrollContainer,.c-modal.c-modal--medium.c-modal--fullWidthBelowMid>.c-modal-scrollContainer{block-size:100%}}.c-modal.c-modal--top{margin-block-start:var(--dt-spacing-j);max-block-size:calc(100% - var(--dt-spacing-j) * 2)}@media (max-width: 767px){.c-modal.c-modal--top.c-modal--large,.c-modal.c-modal--top.c-modal--fullWidthBelowMid.c-modal--medium{margin-block-start:var(--dt-spacing-none);max-block-size:100%}}.c-modal::backdrop{background:var(--dt-color-overlay)}@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none){.c-modal::backdrop{background:#0000008c}}.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: 769px){.c-modal .c-modal-footer{--modal-footer-padding: var(--dt-spacing-e)}}@media (max-width: 767px){.c-modal .c-modal-footer.c-modal-footer--stackedActions{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-start:var(--dt-spacing-d);margin-inline-end:var(--dt-spacing-d);margin-block:14px}@media (min-width: 769px){.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-start:var(--dt-spacing-e);margin-inline-end:var(--dt-spacing-e);margin-block:20px}}.c-modal .c-modal-backBtn+.c-modal-heading{margin-inline-start:var(--dt-spacing-b)}@media (min-width: 769px){.c-modal .c-modal-backBtn+.c-modal-heading{margin-inline-start:var(--dt-spacing-c)}}.c-modal.c-modal--dismissible .c-modal-heading{margin-inline-end:var(--dt-spacing-d)}@media (min-width: 769px){.c-modal.c-modal--dismissible .c-modal-heading{margin-inline-end:var(--dt-spacing-e)}}.c-modal .c-modal-backBtn{grid-area:back;margin-block-start:var(--dt-spacing-b);margin-block-end:var(--dt-spacing-b);margin-inline-start:var(--dt-spacing-b);margin-inline-end:var(--dt-spacing-none)}@media (min-width: 769px){.c-modal .c-modal-backBtn{margin-block-start:var(--dt-spacing-c);margin-block-end:var(--dt-spacing-c);margin-inline-start:var(--dt-spacing-c);margin-inline-end:var(--dt-spacing-none)}}.c-modal .c-modal-closeBtn{grid-area:close;margin-block-start:var(--dt-spacing-b);margin-block-end:var(--dt-spacing-b);margin-inline-start:var(--dt-spacing-none);margin-inline-end:var(--dt-spacing-b)}@media (min-width: 769px){.c-modal .c-modal-closeBtn{margin-block-start:var(--dt-spacing-c);margin-block-end:var(--dt-spacing-c);margin-inline-start:var(--dt-spacing-none);margin-inline-end: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);--modal-content-padding-block-end: var(--dt-spacing-e);--modal-content-min-block-size: var(--dt-spacing-j);position:relative;min-block-size:calc(var(--modal-content-min-block-size) + var(--modal-content-padding-block) + var(--modal-content-padding-block-end));font-size:var(--modal-content-font-size);line-height:var(--modal-content-line-height);font-weight:var(--modal-content-font-weight);padding-inline-start:var(--modal-content-padding-inline);padding-inline-end:var(--modal-content-padding-inline);padding-block-start:var(--modal-content-padding-block);padding-block-end:var(--modal-content-padding-block-end);flex-grow:1}@media (min-width: 769px){.c-modal .c-modal-content{--modal-content-padding-inline: var(--dt-spacing-e)}}.c-modal .c-modal-content:not(:last-child){padding-block-end:var(--modal-content-padding-block);min-block-size:var(--modal-content-min-block-size)}.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;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.c-modal--pinnedFooter .c-modal-content{overflow-y:auto}.c-modal.c-modal--loading .c-modal-content pie-spinner{position:absolute;left:50%;top:calc(50% - (var(--modal-content-padding-block-end) - var(--modal-content-padding-block)) / 2);transform:translate(-50%,-50%)}.c-modal.c-modal--loading .c-modal-content .c-modal-contentInner{display:none}.c-modal.c-modal--loading .c-modal-content:not(:last-child) pie-spinner{top:50%}@supports not (aspect-ratio: 1/1){.c-modal .c-modal-scrollContainer{background:none}}', Z = ["h1", "h2", "h3", "h4", "h5", "h6"], oo = ["small", "medium", "large"], eo = ["top", "center"], A = "pie-modal-close", x = "pie-modal-open", L = "pie-modal-back", to = "pie-modal-leading-action-click", io = "pie-modal-supporting-action-click", r = {
   hasBackButton: !1,
   hasStackedActions: !1,
   headingLevel: "h2",
@@ -86,89 +86,103 @@ const Q = '*,*:after,*:before{box-sizing:inherit}dialog{position:absolute;left:0
   position: "center",
   size: "medium"
 };
-var ae = Object.defineProperty, l = (n, e, o, t) => {
-  for (var i = void 0, d = n.length - 1, m; d >= 0; d--)
-    (m = n[d]) && (i = m(e, o, i) || i);
-  return i && ae(e, o, i), i;
+var ao = Object.defineProperty, l = (n, o, e, t) => {
+  for (var i = void 0, c = n.length - 1, g; c >= 0; c--)
+    (g = n[c]) && (i = g(o, e, i) || i);
+  return i && ao(o, e, i), i;
 };
-const b = "pie-modal", L = class L extends j(I) {
+const v = "pie-modal", z = class z extends j(I) {
   constructor() {
-    super(...arguments), this.headingLevel = s.headingLevel, this.hasBackButton = s.hasBackButton, this.hasStackedActions = s.hasStackedActions, this.isDismissible = s.isDismissible, this.isFooterPinned = s.isFooterPinned, this.isFullWidthBelowMid = s.isFullWidthBelowMid, this.isLoading = s.isLoading, this.isOpen = s.isOpen, this.position = s.position, this.size = s.size, this._backButtonClicked = !1, this._handleDialogCancelEvent = (e) => {
-      this.isDismissible || e.preventDefault();
-    }, this._handleDialogLightDismiss = (e) => {
-      var k;
+    super(...arguments), this.headingLevel = r.headingLevel, this.hasBackButton = r.hasBackButton, this.hasStackedActions = r.hasStackedActions, this.isDismissible = r.isDismissible, this.isFooterPinned = r.isFooterPinned, this.isFullWidthBelowMid = r.isFullWidthBelowMid, this.isLoading = r.isLoading, this.isOpen = r.isOpen, this.position = r.position, this.size = r.size, this._backButtonClicked = !1, this._handleDialogCancelEvent = (o) => {
+      this.isDismissible || o.preventDefault();
+    }, this._handleDialogLightDismiss = (o) => {
       if (!this.isDismissible)
         return;
-      const o = (k = this._dialog) == null ? void 0 : k.getBoundingClientRect(), {
+      const e = this._dialog.getBoundingClientRect(), {
         top: t = 0,
         bottom: i = 0,
-        left: d = 0,
-        right: m = 0
-      } = o || {};
-      if (t === 0 && i === 0 && d === 0 && m === 0)
+        left: c = 0,
+        right: g = 0
+      } = e || {};
+      if (t === 0 && i === 0 && c === 0 && g === 0)
         return;
-      (e.clientY < t || e.clientY > i || e.clientX < d || e.clientX > m) && (this.isOpen = !1);
+      (o.clientY < t || o.clientY > i || o.clientX < c || o.clientX > g) && (this.isOpen = !1);
     };
   }
+  get _modalScrollContainer() {
+    return this._dialog.querySelector(".c-modal-scrollContainer");
+  }
   connectedCallback() {
-    super.connectedCallback(), this.addEventListener("click", (e) => this._handleDialogLightDismiss(e)), document.addEventListener(w, (e) => this._handleModalOpened(e)), document.addEventListener(z, (e) => this._handleModalClosed(e)), document.addEventListener(C, (e) => this._handleModalClosed(e));
+    super.connectedCallback(), this._abortController = new AbortController();
+    const { signal: o } = this._abortController;
+    this.addEventListener("click", (e) => this._handleDialogLightDismiss(e)), document.addEventListener(x, (e) => this._handleModalOpened(e), { signal: o }), document.addEventListener(A, (e) => this._handleModalClosed(e), { signal: o }), document.addEventListener(L, (e) => this._handleModalClosed(e), { signal: o });
   }
   disconnectedCallback() {
-    document.removeEventListener(w, (e) => this._handleModalOpened(e)), document.removeEventListener(z, (e) => this._handleModalClosed(e)), document.removeEventListener(C, (e) => this._handleModalClosed(e)), super.disconnectedCallback();
+    this._abortController.abort(), this._enableBodyScroll(), super.disconnectedCallback();
   }
-  async firstUpdated(e) {
-    super.firstUpdated(e), this._dialog && ((await import("./dialog-polyfill.esm-CbjBMXAG.js").then((t) => t.default)).registerDialog(this._dialog), this._dialog.addEventListener("cancel", (t) => this._handleDialogCancelEvent(t)), this._dialog.addEventListener("close", () => {
-      this.isOpen = !1;
-    })), this._handleModalOpenStateOnFirstRender(e);
+  async firstUpdated(o) {
+    if (super.firstUpdated(o), this._dialog) {
+      (await import("./dialog-polyfill.esm-CbjBMXAG.js").then((i) => i.default)).registerDialog(this._dialog);
+      const { signal: t } = this._abortController;
+      this._dialog.addEventListener("cancel", (i) => this._handleDialogCancelEvent(i), { signal: t }), this._dialog.addEventListener("close", () => {
+        this.isOpen = !1;
+      }, { signal: t });
+    }
+    this._handleModalOpenStateOnFirstRender(o);
   }
-  updated(e) {
-    super.updated(e), this._handleModalOpenStateChanged(e);
+  updated(o) {
+    super.updated(o), this._handleModalOpenStateChanged(o);
   }
   /**
    * Opens the dialog element and disables page scrolling
    */
-  _handleModalOpened(e) {
-    var t, i, d, m;
-    const { targetModal: o } = e.detail;
-    if (o === this) {
-      const p = (t = this._dialog) == null ? void 0 : t.querySelector(".c-modal-scrollContainer");
-      if (p && ("scrollTo" in window && window.scrollTo(0, 0), G(p)), (i = this._dialog) != null && i.hasAttribute("open") || !((d = this._dialog) != null && d.isConnected))
+  _handleModalOpened(o) {
+    const { targetModal: e } = o.detail;
+    if (e === this) {
+      if (this._disableBodyScroll(), this._dialog.hasAttribute("open") || !this._dialog.isConnected)
         return;
-      (m = this._dialog) == null || m.showModal();
+      this._dialog.showModal();
     }
   }
   /**
    * Closes the dialog element and re-enables page scrolling
    */
-  _handleModalClosed(e) {
-    var t, i;
-    const { targetModal: o } = e.detail;
-    if (o === this) {
-      const d = (t = this._dialog) == null ? void 0 : t.querySelector(".c-modal-scrollContainer");
-      d && J(d), (i = this._dialog) == null || i.close(), this._returnFocus();
-    }
+  _handleModalClosed(o) {
+    const { targetModal: e } = o.detail;
+    e === this && (this._enableBodyScroll(), this._dialog.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 && u(this, w, { targetModal: this });
+  _handleModalOpenStateOnFirstRender(o) {
+    o.get("isOpen") === void 0 && this.isOpen && h(this, x, { targetModal: this });
   }
   // 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, u(this, C, { targetModal: this })) : u(this, z, { targetModal: this }) : u(this, w, { targetModal: this }));
+  _handleModalOpenStateChanged(o) {
+    const e = o.get("isOpen");
+    e !== void 0 && (e ? this._backButtonClicked ? (this._backButtonClicked = !1, h(this, L, { targetModal: this })) : h(this, A, { targetModal: this }) : h(this, x, { targetModal: this }));
   }
-  _handleActionClick(e) {
-    var o, t;
-    e === "leading" ? ((o = this._dialog) == null || o.close("leading"), u(this, te, { targetModal: this })) : e === "supporting" && ((t = this._dialog) == null || t.close("supporting"), u(this, ie, { targetModal: this }));
+  _handleActionClick(o) {
+    o === "leading" ? (this._dialog.close("leading"), h(this, to, { targetModal: this })) : o === "supporting" && (this._dialog.close("supporting"), h(this, io, { targetModal: this }));
   }
   /**
    * Return focus to the specified element, providing the selector is valid
    * and the chosen element can be found.
    */
   _returnFocus() {
-    var o, t;
-    const e = (o = this.returnFocusAfterCloseSelector) == null ? void 0 : o.trim();
-    e && ((t = document.querySelector(e)) == null || t.focus());
+    var e, t;
+    const o = (e = this.returnFocusAfterCloseSelector) == null ? void 0 : e.trim();
+    o && ((t = document.querySelector(o)) == null || t.focus());
+  }
+  /**
+   * Enables body scroll by unlocking the scroll container.
+   */
+  _enableBodyScroll() {
+    this._modalScrollContainer && J(this._modalScrollContainer);
+  }
+  /**
+   * Disables body scroll by locking the scroll container.
+   */
+  _disableBodyScroll() {
+    this._modalScrollContainer && ("scrollTo" in window && window.scrollTo(0, 0), G(this._modalScrollContainer));
   }
   /**
    * Template for the close button element. Called within the
@@ -177,18 +191,18 @@ const b = "pie-modal", L = class L extends j(I) {
    * @private
    */
   renderCloseButton() {
-    var e;
-    return this.isDismissible ? c`
+    var o;
+    return this.isDismissible ? s`
             <pie-icon-button
                 @click="${() => {
       this.isOpen = !1;
     }}"
                 variant="ghost-secondary"
                 class="c-modal-closeBtn"
-                aria-label="${((e = this.aria) == null ? void 0 : e.close) || h}"
+                aria-label="${((o = this.aria) == null ? void 0 : o.close) || p}"
                 data-test-id="modal-close-button">
                 <icon-close></icon-close>
-            </pie-icon-button>` : h;
+            </pie-icon-button>` : p;
   }
   /**
    * Template for the back button element. Called within the
@@ -197,19 +211,19 @@ const b = "pie-modal", L = class L extends j(I) {
    * @private
    */
   renderBackButton() {
-    var e;
-    return this.hasBackButton ? c`
+    var o;
+    return this.hasBackButton ? s`
             <pie-icon-button
                 @click="${() => {
       this._backButtonClicked = !0, this.isOpen = !1;
     }}"
                 variant="ghost-secondary"
                 class="c-modal-backBtn"
-                aria-label="${y((e = this.aria) == null ? void 0 : e.back)}"
+                aria-label="${k((o = this.aria) == null ? void 0 : o.back)}"
                 data-test-id="modal-back-button">
-                ${this.isRTL ? c`<icon-chevron-right></icon-chevron-right>` : c`<icon-chevron-left></icon-chevron-left>`}
+                ${this.isRTL ? s`<icon-chevron-right></icon-chevron-right>` : s`<icon-chevron-left></icon-chevron-left>`}
             </pie-icon-button>
-        ` : h;
+        ` : p;
   }
   /**
    * Renders the "leadingAction" button if the text is provided.
@@ -221,18 +235,18 @@ const b = "pie-modal", L = class L extends j(I) {
    * @private
    */
   renderLeadingAction() {
-    const { ariaLabel: e, text: o, variant: t = "primary" } = this.leadingAction || {};
-    return o ? c`
+    const { ariaLabel: o, text: e, variant: t = "primary" } = this.leadingAction || {};
+    return e ? s`
             <pie-button
                 variant="${t}"
-                aria-label="${y(e)}"
+                aria-label="${k(o)}"
                 type="submit"
                 ?isFullWidth="${this.hasStackedActions}"
                 @click="${() => this._handleActionClick("leading")}"
                 data-test-id="modal-leading-action">
-                ${o}
+                ${e}
             </pie-button>
-        ` : h;
+        ` : p;
   }
   /**
    * Renders the "supportingAction" button if the text is provided.
@@ -246,16 +260,16 @@ const b = "pie-modal", L = class L extends j(I) {
    */
   renderSupportingAction() {
     var i;
-    const { ariaLabel: e, text: o, variant: t = "ghost" } = this.supportingAction || {};
-    return !o || !((i = this.leadingAction) != null && i.text) ? h : c`
+    const { ariaLabel: o, text: e, variant: t = "ghost" } = this.supportingAction || {};
+    return !e || !((i = this.leadingAction) != null && i.text) ? p : s`
             <pie-button
                 variant="${t}"
-                aria-label="${y(e)}"
+                aria-label="${k(o)}"
                 type="reset"
                 ?isFullWidth="${this.hasStackedActions}"
                 @click="${() => this._handleActionClick("supporting")}"
                 data-test-id="modal-supporting-action">
-                ${o}
+                ${e}
             </pie-button>
         `;
   }
@@ -266,15 +280,15 @@ const b = "pie-modal", L = class L extends j(I) {
    * @private
    */
   renderModalFooter() {
-    var o, t;
-    if (!((o = this.leadingAction) != null && o.text))
-      return (t = this.supportingAction) != null && t.text && console.warn("You cannot have a supporting action without a leading action. If you only need one button then use a leading action instead."), h;
-    const e = {
+    var e, t;
+    if (!((e = this.leadingAction) != null && e.text))
+      return (t = this.supportingAction) != null && t.text && console.warn("You cannot have a supporting action without a leading action. If you only need one button then use a leading action instead."), p;
+    const o = {
       "c-modal-footer": !0,
       "c-modal-footer--stackedActions": this.hasStackedActions
     };
-    return c`
-            <footer class="${M(e)}" data-test-id="pie-modal-footer">
+    return s`
+            <footer class="${S(o)}" data-test-id="pie-modal-footer">
                 ${this.renderLeadingAction()}
                 ${this.renderSupportingAction()}
             </footer>`;
@@ -284,14 +298,14 @@ const b = "pie-modal", L = class L extends j(I) {
    * @private
    */
   renderLoadingSpinner() {
-    return this.isLoading ? c`<pie-spinner size="xlarge" variant="secondary"></pie-spinner>` : h;
+    return this.isLoading ? s`<pie-spinner size="xlarge" variant="secondary"></pie-spinner>` : p;
   }
   /**
    * Renders the modal inner content and footer of the modal.
    * @private
    */
   renderModalContentAndFooter() {
-    return c`
+    return s`
             <article class="c-modal-scrollContainer c-modal-content c-modal-content--scrollable">
                 <div class="c-modal-contentInner" data-test-id="modal-content-inner">
                     <slot></slot>
@@ -302,111 +316,111 @@ const b = "pie-modal", L = class L extends j(I) {
   }
   render() {
     const {
-      aria: e,
-      heading: o,
+      aria: o,
+      heading: e,
       headingLevel: t,
       isDismissible: i,
-      isFooterPinned: d,
-      isFullWidthBelowMid: m,
-      isLoading: p,
-      position: k,
-      size: E
-    } = this, S = W(t), T = p && (e == null ? void 0 : e.loading) || void 0, P = {
+      isFooterPinned: c,
+      isFullWidthBelowMid: g,
+      isLoading: b,
+      position: F,
+      size: T
+    } = this, B = W(t), E = b && (o == null ? void 0 : o.loading) || void 0, P = {
       "c-modal": !0,
-      [`c-modal--${E}`]: !0,
-      "c-modal--top": k === "top",
+      [`c-modal--${T}`]: !0,
+      "c-modal--top": F === "top",
       "c-modal--dismissible": i,
-      "c-modal--loading": p,
-      "c-modal--pinnedFooter": d,
-      "c-modal--fullWidthBelowMid": m
+      "c-modal--loading": b,
+      "c-modal--pinnedFooter": c,
+      "c-modal--fullWidthBelowMid": g
     };
-    return c`
+    return s`
         <dialog
             id="dialog"
-            class="${M(P)}"
-            aria-busy="${p ? "true" : "false"}"
-            aria-label="${y(T)}"
+            class="${S(P)}"
+            aria-busy="${b ? "true" : "false"}"
+            aria-label="${k(E)}"
             data-test-id="pie-modal">
             <header class="c-modal-header"
             data-test-id="modal-header">
                 ${this.renderBackButton()}
-                <${S} class="c-modal-heading">
-                    ${o}
-                </${S}>
+                <${B} class="c-modal-heading">
+                    ${e}
+                </${B}>
                 ${this.renderCloseButton()}
             </header>
             ${// We need to wrap the remaining content in a shared scrollable container if the footer is not pinned
-    d ? this.renderModalContentAndFooter() : c`
+    c ? this.renderModalContentAndFooter() : s`
                     <div class="c-modal-scrollContainer">
                         ${this.renderModalContentAndFooter()}
                     </div>`}
         </dialog>`;
   }
 };
-L.styles = N(Q);
-let a = L;
+z.styles = N(Q);
+let a = z;
 l([
-  r({ type: Object })
+  d({ type: Object })
 ], a.prototype, "aria");
 l([
-  r({ type: String }),
-  Y(b)
+  d({ type: String }),
+  Y(v)
 ], a.prototype, "heading");
 l([
-  r(),
-  B(b, Z, s.headingLevel)
+  d(),
+  _(v, Z, r.headingLevel)
 ], a.prototype, "headingLevel");
 l([
-  r({ type: Boolean })
+  d({ type: Boolean })
 ], a.prototype, "hasBackButton");
 l([
-  r({ type: Boolean })
+  d({ type: Boolean })
 ], a.prototype, "hasStackedActions");
 l([
-  r({ type: Boolean, reflect: !0 })
+  d({ type: Boolean, reflect: !0 })
 ], a.prototype, "isDismissible");
 l([
-  r({ type: Boolean })
+  d({ type: Boolean })
 ], a.prototype, "isFooterPinned");
 l([
-  r({ type: Boolean })
+  d({ type: Boolean })
 ], a.prototype, "isFullWidthBelowMid");
 l([
-  r({ type: Boolean, reflect: !0 })
+  d({ type: Boolean, reflect: !0 })
 ], a.prototype, "isLoading");
 l([
-  r({ type: Boolean })
+  d({ type: Boolean })
 ], a.prototype, "isOpen");
 l([
-  r({ type: Object })
+  d({ type: Object })
 ], a.prototype, "leadingAction");
 l([
-  r(),
-  B(b, oe, s.position)
+  d(),
+  _(v, eo, r.position)
 ], a.prototype, "position");
 l([
-  r()
+  d()
 ], a.prototype, "returnFocusAfterCloseSelector");
 l([
-  r(),
-  B(b, ee, s.size)
+  d(),
+  _(v, oo, r.size)
 ], a.prototype, "size");
 l([
-  r({ type: Object })
+  d({ type: Object })
 ], a.prototype, "supportingAction");
 l([
   R("dialog")
 ], a.prototype, "_dialog");
-V(b, a);
+V(v, a);
 export {
-  C as ON_MODAL_BACK_EVENT,
-  z as ON_MODAL_CLOSE_EVENT,
-  te as ON_MODAL_LEADING_ACTION_CLICK,
-  w as ON_MODAL_OPEN_EVENT,
-  ie as ON_MODAL_SUPPORTING_ACTION_CLICK,
+  L as ON_MODAL_BACK_EVENT,
+  A as ON_MODAL_CLOSE_EVENT,
+  to as ON_MODAL_LEADING_ACTION_CLICK,
+  x as ON_MODAL_OPEN_EVENT,
+  io as ON_MODAL_SUPPORTING_ACTION_CLICK,
   a as PieModal,
-  s as defaultProps,
+  r as defaultProps,
   Z as headingLevels,
-  oe as positions,
-  ee as sizes
+  eo as positions,
+  oo as sizes
 };

package/dist/react.d.ts

@@ -166,8 +166,10 @@ declare class PieModal_2 extends PieModal_base implements ModalProps {
     returnFocusAfterCloseSelector: ModalProps['returnFocusAfterCloseSelector'];
     size: "medium" | "large" | "small";
     supportingAction: ModalProps['supportingAction'];
-    private _dialog?;
+    private _dialog;
     private _backButtonClicked;
+    private _abortController;
+    private get _modalScrollContainer();
     static styles: CSSResult;
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -196,6 +198,14 @@ declare class PieModal_2 extends PieModal_base implements ModalProps {
      * and the chosen element can be found.
      */
     private _returnFocus;
+    /**
+     * Enables body scroll by unlocking the scroll container.
+     */
+    private _enableBodyScroll;
+    /**
+     * Disables body scroll by locking the scroll container.
+     */
+    private _disableBodyScroll;
     /**
      * Template for the close button element. Called within the
      * main render function.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-modal",
-  "version": "0.47.0",
+  "version": "0.48.0",
   "description": "PIE design system modal built using web components",
   "type": "module",
   "main": "dist/index.js",
@@ -47,11 +47,11 @@
     "extends": "../../../package.json"
   },
   "dependencies": {
-    "@justeattakeaway/pie-button": "0.49.1",
-    "@justeattakeaway/pie-icon-button": "0.28.12",
-    "@justeattakeaway/pie-icons-webc": "0.25.1",
-    "@justeattakeaway/pie-spinner": "0.7.0",
-    "@justeattakeaway/pie-webc-core": "0.24.0",
+    "@justeattakeaway/pie-button": "0.49.2",
+    "@justeattakeaway/pie-icon-button": "0.28.13",
+    "@justeattakeaway/pie-icons-webc": "0.25.2",
+    "@justeattakeaway/pie-spinner": "0.7.1",
+    "@justeattakeaway/pie-webc-core": "0.24.1",
     "body-scroll-lock": "3.1.5",
     "dialog-polyfill": "0.5.6"
   },

package/src/index.ts

@@ -104,44 +104,56 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
     public supportingAction: ModalProps['supportingAction'];
 
     @query('dialog')
-    private _dialog?: HTMLDialogElement;
+    private _dialog!: HTMLDialogElement;
 
     private _backButtonClicked = false;
 
+    private _abortController!: AbortController;
+
+    private get _modalScrollContainer (): Element | null {
+        return this._dialog.querySelector('.c-modal-scrollContainer');
+    }
+
     // Renders a `CSSResult` generated from SCSS by Vite
     static styles = unsafeCSS(styles);
 
-    connectedCallback () : void {
+    connectedCallback (): void {
         super.connectedCallback();
+        this._abortController = new AbortController();
+        const { signal } = this._abortController;
+
         this.addEventListener('click', (event) => this._handleDialogLightDismiss(event));
-        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));
+        document.addEventListener(ON_MODAL_OPEN_EVENT, (event) => this._handleModalOpened(<CustomEvent>event), { signal });
+        document.addEventListener(ON_MODAL_CLOSE_EVENT, (event) => this._handleModalClosed(<CustomEvent>event), { signal });
+        document.addEventListener(ON_MODAL_BACK_EVENT, (event) => this._handleModalClosed(<CustomEvent>event), { signal });
     }
 
-    disconnectedCallback () : void {
-        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));
+    disconnectedCallback (): void {
+        // Aborts all event listeners
+        this._abortController.abort();
+
+        this._enableBodyScroll();
         super.disconnectedCallback();
     }
 
-    async firstUpdated (changedProperties: PropertyValues<this>) : Promise<void> {
+    async firstUpdated (changedProperties: PropertyValues<this>): Promise<void> {
         super.firstUpdated(changedProperties);
 
         if (this._dialog) {
             const dialogPolyfill = await import('dialog-polyfill').then((module) => module.default);
             dialogPolyfill.registerDialog(this._dialog);
-            this._dialog.addEventListener('cancel', (event) => this._handleDialogCancelEvent(event));
+            const { signal } = this._abortController;
+
+            this._dialog.addEventListener('cancel', (event) => this._handleDialogCancelEvent(event), { signal });
             this._dialog.addEventListener('close', () => {
                 this.isOpen = false;
-            });
+            }, { signal });
         }
 
         this._handleModalOpenStateOnFirstRender(changedProperties);
     }
 
-    updated (changedProperties: PropertyValues<this>) : void {
+    updated (changedProperties: PropertyValues<this>): void {
         super.updated(changedProperties);
         this._handleModalOpenStateChanged(changedProperties);
     }
@@ -153,22 +165,14 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
         const { targetModal } = event.detail;
 
         if (targetModal === this) {
-            const modalScrollContainer = this._dialog?.querySelector('.c-modal-scrollContainer');
+            this._disableBodyScroll();
 
-            if (modalScrollContainer) {
-                // Hack to prevent Safari rendering the modal outside the viewport
-                // when the body scroll lock is active
-                if ('scrollTo' in window) window.scrollTo(0, 0);
-
-                disableBodyScroll(modalScrollContainer);
-            }
-
-            if (this._dialog?.hasAttribute('open') || !this._dialog?.isConnected) {
+            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();
+            this._dialog.showModal();
         }
     }
 
@@ -179,13 +183,8 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
         const { targetModal } = event.detail;
 
         if (targetModal === this) {
-            const modalScrollContainer = this._dialog?.querySelector('.c-modal-scrollContainer');
-
-            if (modalScrollContainer) {
-                enableBodyScroll(modalScrollContainer);
-            }
-
-            this._dialog?.close();
+            this._enableBodyScroll();
+            this._dialog.close();
             this._returnFocus();
         }
     }
@@ -196,14 +195,14 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
      *
      * @param {Event} event - The event object.
      */
-    private _handleDialogCancelEvent = (event: Event) : void => {
+    private _handleDialogCancelEvent = (event: Event): void => {
         if (!this.isDismissible) {
             event.preventDefault();
         }
     };
 
     // Handles the value of the isOpen property on first render of the component
-    private _handleModalOpenStateOnFirstRender (changedProperties: PropertyValues<this>) : void {
+    private _handleModalOpenStateOnFirstRender (changedProperties: PropertyValues<this>): void {
         // This ensures if the modal is open on first render, the scroll lock and backdrop are applied
         const previousValue = changedProperties.get('isOpen');
 
@@ -213,7 +212,7 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
     }
 
     // Handles changes to the modal isOpen property by dispatching any appropriate events
-    private _handleModalOpenStateChanged (changedProperties: PropertyValues<this>) : void {
+    private _handleModalOpenStateChanged (changedProperties: PropertyValues<this>): void {
         const wasPreviouslyOpen = changedProperties.get('isOpen');
 
         if (wasPreviouslyOpen !== undefined) {
@@ -231,12 +230,12 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
         }
     }
 
-    private _handleActionClick (actionType: ModalActionType) : void {
+    private _handleActionClick (actionType: ModalActionType): void {
         if (actionType === 'leading') {
-            this._dialog?.close('leading');
+            this._dialog.close('leading');
             dispatchCustomEvent(this, ON_MODAL_LEADING_ACTION_CLICK, { targetModal: this });
         } else if (actionType === 'supporting') {
-            this._dialog?.close('supporting');
+            this._dialog.close('supporting');
             dispatchCustomEvent(this, ON_MODAL_SUPPORTING_ACTION_CLICK, { targetModal: this });
         }
     }
@@ -245,7 +244,7 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
      * Return focus to the specified element, providing the selector is valid
      * and the chosen element can be found.
      */
-    private _returnFocus () : void {
+    private _returnFocus (): void {
         const selector = this.returnFocusAfterCloseSelector?.trim();
 
         if (selector) {
@@ -253,6 +252,28 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
         }
     }
 
+    /**
+     * Enables body scroll by unlocking the scroll container.
+     */
+    private _enableBodyScroll (): void {
+        if (this._modalScrollContainer) {
+            enableBodyScroll(this._modalScrollContainer);
+        }
+    }
+
+    /**
+     * Disables body scroll by locking the scroll container.
+     */
+    private _disableBodyScroll (): void {
+        if (this._modalScrollContainer) {
+            // Hack to prevent Safari rendering the modal outside the viewport
+            // when the body scroll lock is active
+            if ('scrollTo' in window) window.scrollTo(0, 0);
+
+            disableBodyScroll(this._modalScrollContainer);
+        }
+    }
+
     /**
      * Template for the close button element. Called within the
      * main render function.
@@ -281,7 +302,7 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
      *
      * @private
      */
-    private renderBackButton () : TemplateResult | typeof nothing {
+    private renderBackButton (): TemplateResult | typeof nothing {
         if (!this.hasBackButton) {
             return nothing;
         }
@@ -307,7 +328,7 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
      *
      * @private
      */
-    private renderLeadingAction () : TemplateResult | typeof nothing {
+    private renderLeadingAction (): TemplateResult | typeof nothing {
         const { ariaLabel, text, variant = 'primary' } = this.leadingAction || {};
 
         if (!text) return nothing;
@@ -361,7 +382,7 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
      *
      * @private
      */
-    private renderModalFooter () : TemplateResult | typeof nothing {
+    private renderModalFooter (): TemplateResult | typeof nothing {
         if (!this.leadingAction?.text) {
             if (this.supportingAction?.text) {
                 console.warn('You cannot have a supporting action without a leading action. If you only need one button then use a leading action instead.');
@@ -385,7 +406,7 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
      * Renders the loading spinner if `isLoading` is true.
      * @private
      */
-    private renderLoadingSpinner () : TemplateResult | typeof nothing {
+    private renderLoadingSpinner (): TemplateResult | typeof nothing {
         if (!this.isLoading) {
             return nothing;
         }
@@ -397,7 +418,7 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
      * Renders the modal inner content and footer of the modal.
      * @private
      */
-    private renderModalContentAndFooter () : TemplateResult {
+    private renderModalContentAndFooter (): TemplateResult {
         return html`
             <article class="c-modal-scrollContainer c-modal-content c-modal-content--scrollable">
                 <div class="c-modal-contentInner" data-test-id="modal-content-inner">
@@ -465,12 +486,12 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
      * Dismisses the modal on backdrop click if `isDismissible` is `true`.
      * @param {MouseEvent} event - the click event targetting the modal/backdrop
      */
-    private _handleDialogLightDismiss = (event: MouseEvent) : void => {
+    private _handleDialogLightDismiss = (event: MouseEvent): void => {
         if (!this.isDismissible) {
             return;
         }
 
-        const rect = this._dialog?.getBoundingClientRect();
+        const rect = this._dialog.getBoundingClientRect();
 
         const {
             top = 0, bottom = 0, left = 0, right = 0,