@justeattakeaway/pie-modal 1.1.1 → 1.2.0

package/dist/index.js

@@ -12,9 +12,9 @@ import "@justeattakeaway/pie-icons-webc/dist/IconChevronRight.js";
 import "@justeattakeaway/pie-spinner";
 function R(a) {
   if (Array.isArray(a)) {
-    for (var e = 0, o = Array(a.length); e < a.length; e++)
-      o[e] = a[e];
-    return o;
+    for (var e = 0, t = Array(a.length); e < a.length; e++)
+      t[e] = a[e];
+    return t;
   } else
     return Array.from(a);
 }
@@ -28,26 +28,26 @@ if (typeof window < "u") {
   window.addEventListener("testPassive", null, S), window.removeEventListener("testPassive", null, S);
 }
 var O = 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 = [], k = !1, M = -1, u = void 0, f = void 0, D = function(e) {
-  return m.some(function(o) {
-    return !!(o.options.allowTouchMove && o.options.allowTouchMove(e));
+  return m.some(function(t) {
+    return !!(t.options.allowTouchMove && t.options.allowTouchMove(e));
   });
 }, y = function(e) {
-  var o = e || window.event;
-  return D(o.target) || o.touches.length > 1 ? !0 : (o.preventDefault && o.preventDefault(), !1);
+  var t = e || window.event;
+  return D(t.target) || t.touches.length > 1 ? !0 : (t.preventDefault && t.preventDefault(), !1);
 }, j = function(e) {
   if (f === void 0) {
-    var o = !1, t = window.innerWidth - document.documentElement.clientWidth;
-    o && t > 0 && (f = document.body.style.paddingRight, document.body.style.paddingRight = t + "px");
+    var t = !1, o = window.innerWidth - document.documentElement.clientWidth;
+    t && o > 0 && (f = document.body.style.paddingRight, document.body.style.paddingRight = o + "px");
   }
   u === void 0 && (u = document.body.style.overflow, document.body.style.overflow = "hidden");
 }, V = function() {
   f !== void 0 && (document.body.style.paddingRight = f, f = void 0), u !== void 0 && (document.body.style.overflow = u, u = void 0);
 }, Y = function(e) {
   return e ? e.scrollHeight - e.scrollTop <= e.clientHeight : !1;
-}, H = function(e, o) {
-  var t = e.targetTouches[0].clientY - M;
-  return D(e.target) ? !1 : o && o.scrollTop === 0 && t > 0 || Y(o) && t < 0 ? y(e) : (e.stopPropagation(), !0);
-}, q = function(e, o) {
+}, H = function(e, t) {
+  var o = e.targetTouches[0].clientY - M;
+  return D(e.target) ? !1 : t && t.scrollTop === 0 && o > 0 || Y(t) && o < 0 ? y(e) : (e.stopPropagation(), !0);
+}, q = function(e, t) {
   if (!e) {
     console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
     return;
@@ -55,11 +55,11 @@ var O = typeof window < "u" && window.navigator && window.navigator.platform &&
   if (!m.some(function(i) {
     return i.targetElement === e;
   })) {
-    var t = {
+    var o = {
       targetElement: e,
       options: {}
     };
-    m = [].concat(R(m), [t]), O ? (e.ontouchstart = function(i) {
+    m = [].concat(R(m), [o]), O ? (e.ontouchstart = function(i) {
       i.targetTouches.length === 1 && (M = i.targetTouches[0].clientY);
     }, e.ontouchmove = function(i) {
       i.targetTouches.length === 1 && H(i, e);
@@ -70,8 +70,8 @@ var O = typeof window < "u" && window.navigator && window.navigator.platform &&
     console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.");
     return;
   }
-  m = m.filter(function(o) {
-    return o.targetElement !== e;
+  m = m.filter(function(t) {
+    return t.targetElement !== e;
   }), O ? (e.ontouchstart = null, e.ontouchmove = null, k && m.length === 0 && (document.removeEventListener("touchmove", y, x ? { passive: !1 } : void 0), k = !1)) : m.length || V();
 };
 const X = '*,*: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);position:fixed;top:0;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}}', G = ["h1", "h2", "h3", "h4", "h5", "h6"], J = ["small", "medium", "large"], Q = ["top", "center"], A = "pie-modal-close", w = "pie-modal-open", L = "pie-modal-back", Z = "pie-modal-leading-action-click", ee = "pie-modal-supporting-action-click", r = {
@@ -86,10 +86,10 @@ const X = '*,*:after,*:before{box-sizing:inherit}dialog{position:absolute;left:0
   position: "center",
   size: "medium"
 };
-var oe = Object.defineProperty, l = (a, e, o, t) => {
+var te = Object.defineProperty, l = (a, e, t, o) => {
   for (var i = void 0, c = a.length - 1, g; c >= 0; c--)
-    (g = a[c]) && (i = g(e, o, i) || i);
-  return i && oe(e, o, i), i;
+    (g = a[c]) && (i = g(e, t, i) || i);
+  return i && te(e, t, i), i;
 };
 const b = "pie-modal", C = class C extends I(F) {
   constructor() {
@@ -98,15 +98,15 @@ const b = "pie-modal", C = class C extends I(F) {
     }, this._handleDialogLightDismiss = (e) => {
       if (!this.isDismissible || e.target !== e.currentTarget)
         return;
-      const o = this._dialog.getBoundingClientRect(), {
-        top: t = 0,
+      const t = this._dialog.getBoundingClientRect(), {
+        top: o = 0,
         bottom: i = 0,
         left: c = 0,
         right: g = 0
-      } = o || {};
-      if (t === 0 && i === 0 && c === 0 && g === 0)
+      } = t || {};
+      if (o === 0 && i === 0 && c === 0 && g === 0)
         return;
-      (e.clientY < t || e.clientY > i || e.clientX < c || e.clientX > g) && (this.isOpen = !1);
+      (e.clientY < o || e.clientY > i || e.clientX < c || e.clientX > g) && (this.isOpen = !1);
     };
   }
   get _modalScrollContainer() {
@@ -115,42 +115,44 @@ const b = "pie-modal", C = class C extends I(F) {
   connectedCallback() {
     super.connectedCallback(), this._abortController = new AbortController();
     const { signal: e } = this._abortController;
-    this.addEventListener("click", (o) => this._handleDialogLightDismiss(o)), this._setupEscKeyListener(), document.addEventListener(w, (o) => this._handleModalOpened(o), { signal: e }), document.addEventListener(A, (o) => this._handleModalClosed(o), { signal: e }), document.addEventListener(L, (o) => this._handleModalClosed(o), { signal: e });
+    this.addEventListener("click", (t) => this._handleDialogLightDismiss(t)), this._setupEscKeyListener(), document.addEventListener(w, (t) => this._handleModalOpened(t), { signal: e }), document.addEventListener(A, (t) => this._handleModalClosed(t), { signal: e }), document.addEventListener(L, (t) => this._handleModalClosed(t), { signal: e });
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this._abortController.abort(), this._enableBodyScroll(), this._removeEscKeyEventListener();
   }
   async firstUpdated(e) {
     (await import("./dialog-polyfill.esm-CbjBMXAG.js").then((i) => i.default)).registerDialog(this._dialog);
-    const { signal: t } = this._abortController;
+    const { signal: o } = this._abortController;
     this._dialog.addEventListener("close", () => {
       this.isOpen = !1;
-    }, { signal: t }), this._handleModalOpenStateOnFirstRender(e);
+    }, { signal: o }), this._handleModalOpenStateOnFirstRender(e);
   }
   updated(e) {
     this._handleModalOpenStateChanged(e), this._handleIsDismissibleChanged(e);
   }
   _handleIsDismissibleChanged(e) {
-    const o = e.get("isDismissible"), t = this.isDismissible;
-    !o && t && this._removeEscKeyEventListener(), o && !t && this._setupEscKeyListener();
+    const t = e.get("isDismissible"), o = this.isDismissible;
+    !t && o && this._removeEscKeyEventListener(), t && !o && this._setupEscKeyListener();
   }
   /**
    * Opens the dialog element and disables page scrolling
    */
   _handleModalOpened(e) {
-    const { targetModal: o } = e.detail;
-    if (o === this) {
-      if (this._disableBodyScroll(), this._dialog.hasAttribute("open") || !this._dialog.isConnected)
+    const { targetModal: t } = e.detail;
+    if (t === this) {
+      if (this._dialog.hasAttribute("open") || !this._dialog.isConnected)
         return;
-      this._setupEscKeyListener(), this._dialog.showModal();
+      this._dialog.showModal(), requestAnimationFrame(() => {
+        this._dialog.hasAttribute("open") && (this._disableBodyScroll(), this._setupEscKeyListener());
+      });
     }
   }
   /**
    * Closes the dialog element and re-enables page scrolling
    */
   _handleModalClosed(e) {
-    const { targetModal: o } = e.detail;
-    o === this && (this._enableBodyScroll(), this._dialog.close(), this._returnFocus(), this._removeEscKeyEventListener());
+    const { targetModal: t } = e.detail;
+    t === this && (this._enableBodyScroll(), this._dialog.close(), this._returnFocus(), this._removeEscKeyEventListener());
   }
   /**
    * Sets up an event listener on the Escape key to prevent dismissing the modal if isDismissible is false
@@ -159,7 +161,7 @@ const b = "pie-modal", C = class C extends I(F) {
     if (!this._escKeyAbortController && !this.isDismissible) {
       this._escKeyAbortController = new AbortController();
       const { signal: e } = this._escKeyAbortController;
-      document.addEventListener("keydown", (o) => this._preventModalKeyboardDismissal(o), { signal: e });
+      document.addEventListener("keydown", (t) => this._preventModalKeyboardDismissal(t), { signal: e });
     }
   }
   /**
@@ -175,8 +177,8 @@ const b = "pie-modal", C = class C extends I(F) {
   }
   // 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, h(this, L, { targetModal: this })) : h(this, A, { targetModal: this }) : h(this, w, { targetModal: this }));
+    const t = e.get("isOpen");
+    t !== void 0 && (t ? this._backButtonClicked ? (this._backButtonClicked = !1, h(this, L, { targetModal: this })) : h(this, A, { targetModal: this }) : h(this, w, { targetModal: this }));
   }
   _handleActionClick(e) {
     e === "leading" ? (this._dialog.close("leading"), h(this, Z, { targetModal: this })) : e === "supporting" && (this._dialog.close("supporting"), h(this, ee, { targetModal: this }));
@@ -186,9 +188,9 @@ const b = "pie-modal", C = class C extends I(F) {
    * 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 t, o;
+    const e = (t = this.returnFocusAfterCloseSelector) == null ? void 0 : t.trim();
+    e && ((o = document.querySelector(e)) == null || o.focus());
   }
   /**
    * Enables body scroll by unlocking the scroll container.
@@ -253,16 +255,16 @@ const b = "pie-modal", C = class C extends I(F) {
    * @private
    */
   renderLeadingAction() {
-    const { ariaLabel: e, text: o, variant: t = "primary" } = this.leadingAction || {};
-    return o ? s`
+    const { ariaLabel: e, text: t, variant: o = "primary" } = this.leadingAction || {};
+    return t ? s`
             <pie-button
-                variant="${t}"
+                variant="${o}"
                 aria-label="${v(e)}"
                 type="submit"
                 ?isFullWidth="${this.hasStackedActions}"
                 @click="${() => this._handleActionClick("leading")}"
                 data-test-id="modal-leading-action">
-                ${o}
+                ${t}
             </pie-button>
         ` : p;
   }
@@ -278,16 +280,16 @@ const b = "pie-modal", C = class C extends I(F) {
    */
   renderSupportingAction() {
     var i;
-    const { ariaLabel: e, text: o, variant: t = "ghost" } = this.supportingAction || {};
-    return !o || !((i = this.leadingAction) != null && i.text) ? p : s`
+    const { ariaLabel: e, text: t, variant: o = "ghost" } = this.supportingAction || {};
+    return !t || !((i = this.leadingAction) != null && i.text) ? p : s`
             <pie-button
-                variant="${t}"
+                variant="${o}"
                 aria-label="${v(e)}"
                 type="reset"
                 ?isFullWidth="${this.hasStackedActions}"
                 @click="${() => this._handleActionClick("supporting")}"
                 data-test-id="modal-supporting-action">
-                ${o}
+                ${t}
             </pie-button>
         `;
   }
@@ -298,9 +300,9 @@ const b = "pie-modal", C = class C extends I(F) {
    * @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."), p;
+    var t, o;
+    if (!((t = this.leadingAction) != null && t.text))
+      return (o = this.supportingAction) != null && o.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 e = {
       "c-modal-footer": !0,
       "c-modal-footer--stackedActions": this.hasStackedActions
@@ -337,18 +339,18 @@ const b = "pie-modal", C = class C extends I(F) {
    * @private
    */
   renderHeading() {
-    const { heading: e, headingLevel: o } = this, t = P(o);
+    const { heading: e, headingLevel: t } = this, o = P(t);
     return s`
-            <${t} class="c-modal-heading">
+            <${o} class="c-modal-heading">
                 ${e}
-            </${t}>
+            </${o}>
         `;
   }
   render() {
     const {
       aria: e,
-      isDismissible: o,
-      isFooterPinned: t,
+      isDismissible: t,
+      isFooterPinned: o,
       isFullWidthBelowMid: i,
       isLoading: c,
       position: g,
@@ -357,9 +359,9 @@ const b = "pie-modal", C = class C extends I(F) {
       "c-modal": !0,
       [`c-modal--${z}`]: !0,
       "c-modal--top": g === "top",
-      "c-modal--dismissible": o,
+      "c-modal--dismissible": t,
       "c-modal--loading": c,
-      "c-modal--pinnedFooter": t,
+      "c-modal--pinnedFooter": o,
       "c-modal--fullWidthBelowMid": i
     };
     return s`
@@ -375,7 +377,7 @@ const b = "pie-modal", C = class C extends I(F) {
                 ${this.renderCloseButton()}
             </header>
             ${// We need to wrap the remaining content in a shared scrollable container if the footer is not pinned
-    t ? this.renderModalContentAndFooter() : s`
+    o ? this.renderModalContentAndFooter() : s`
                     <div class="c-modal-scrollContainer">
                         ${this.renderModalContentAndFooter()}
                     </div>`}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-modal",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "PIE design system modal built using web components",
   "type": "module",
   "main": "dist/index.js",
@@ -39,8 +39,8 @@
     "@justeat/pie-design-tokens": "6.8.1",
     "@justeattakeaway/pie-button": "1.1.0",
     "@justeattakeaway/pie-components-config": "0.18.0",
-    "@justeattakeaway/pie-css": "0.14.0",
-    "@justeattakeaway/pie-text-input": "0.25.0",
+    "@justeattakeaway/pie-css": "0.14.1",
+    "@justeattakeaway/pie-text-input": "0.25.1",
     "@justeattakeaway/pie-wrapper-react": "0.14.2",
     "@types/body-scroll-lock": "3.1.2",
     "cem-plugin-module-file-extensions": "0.0.5"
@@ -50,8 +50,8 @@
   },
   "dependencies": {
     "@justeattakeaway/pie-button": "1.1.0",
-    "@justeattakeaway/pie-icon-button": "1.1.0",
-    "@justeattakeaway/pie-icons-webc": "1.2.0",
+    "@justeattakeaway/pie-icon-button": "1.1.1",
+    "@justeattakeaway/pie-icons-webc": "1.3.0",
     "@justeattakeaway/pie-spinner": "1.0.0",
     "@justeattakeaway/pie-webc-core": "0.24.2",
     "body-scroll-lock": "3.1.5",

package/src/index.ts

@@ -182,16 +182,31 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
         const { targetModal } = event.detail;
 
         if (targetModal === this) {
-            this._disableBodyScroll();
-
             if (this._dialog.hasAttribute('open') || !this._dialog.isConnected) {
                 return;
             }
 
-            this._setupEscKeyListener();
-
             // The ::backdrop pseudoelement is only shown if the modal is opened via JS
             this._dialog.showModal();
+
+            /*
+                Performance:
+                This has been optimised with the following to help with performance:
+
+                1. Use requestAnimationFrame to defer non-blocking operations.
+                2. Batch non-blocking updates inside requestAnimationFrame
+                3. Call `showModal()` first and defer `_disableBodyScroll` & `_setupEscKeyListener`
+                   to the next `task`.
+            */
+            requestAnimationFrame(() => {
+                // Read styles before writing them to avoid forced layout recalculations (layout trashing).
+                const isOpen = this._dialog.hasAttribute('open');
+
+                if (isOpen) {
+                    this._disableBodyScroll();
+                    this._setupEscKeyListener();
+                }
+            });
         }
     }