@justeattakeaway/pie-modal 0.6.1 → 0.7.0

package/.turbo/turbo-build.log

@@ -1,19 +1,14 @@
-[2:38:36 PM] @custom-elements-manifest/analyzer: Created new manifest.
+[4:04:52 PM] @custom-elements-manifest/analyzer: Created new manifest.
 react wrapper has been added!
 vite v4.3.9 building for production...
 transforming...
-✓ 28 modules transformed.
+✓ 30 modules transformed.
 rendering chunks...
 computing gzip size...
-dist/index.js   7.43 kB │ gzip:  2.38 kB
+dist/index.js  13.55 kB │ gzip:  4.16 kB
 dist/react.js  59.04 kB │ gzip: 15.92 kB
 
 [vite:dts] Start generate declaration files...
-src/index.ts:27:9 - error TS2564: Property '_dialog' has no initializer and is not definitely assigned in the constructor.
-
-27         _dialog: HTMLDialogElement;
-           ~~~~~~~
-
-✓ built in 23.71s
-[vite:dts] Declaration files built in 21869ms.
+✓ built in 28.39s
+[vite:dts] Declaration files built in 26000ms.
 

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @justeattakeaway/pie-modal
 
+## 0.7.0
+
+### Minor Changes
+
+- [Added] - Modal backdrop functionality ([#559](https://github.com/justeattakeaway/pie/pull/559)) by [@kevinrodrigues](https://github.com/kevinrodrigues)
+
+- [Added] - Scroll locking to modal ([#564](https://github.com/justeattakeaway/pie/pull/564)) by [@jamieomaguire](https://github.com/jamieomaguire)
+
 ## 0.6.1
 
 ### Patch Changes

package/dist/index.js

@@ -1,14 +1,14 @@
-import { unsafeCSS as g, LitElement as v, html as m } from "lit";
-import { unsafeStatic as u, html as b } from "lit/static-html.js";
-import { property as s, query as _ } from "lit/decorators.js";
-import { property as w } from "lit/decorators/property.js";
-var y = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, P = (r, t, n, o) => {
-  for (var e = o > 1 ? void 0 : o ? $(t, n) : t, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (e = (o ? i(t, n, e) : i(e)) || e);
-  return o && e && y(t, n, e), e;
+import { unsafeCSS as T, LitElement as $, html as w } from "lit";
+import { unsafeStatic as D, html as z } from "lit/static-html.js";
+import { property as u, query as B } from "lit/decorators.js";
+import { property as k } from "lit/decorators/property.js";
+var V = Object.defineProperty, R = Object.getOwnPropertyDescriptor, A = (i, e, t, n) => {
+  for (var o = n > 1 ? void 0 : n ? R(e, t) : e, r = i.length - 1, d; r >= 0; r--)
+    (d = i[r]) && (o = (n ? d(e, t, o) : d(o)) || o);
+  return n && o && V(e, t, o), o;
 };
-const O = (r) => {
-  class t extends r {
+const W = (i) => {
+  class e extends i {
     constructor() {
       super(...arguments), this.dir = "";
     }
@@ -22,135 +22,282 @@ const O = (r) => {
      * will not be reactive and is only computed once
      */
     get isRTL() {
-      var o;
-      return this.dir === "ltr" ? !1 : this.dir === "rtl" || ((o = window == null ? void 0 : window.getComputedStyle(this)) == null ? void 0 : o.direction) === "rtl";
+      var n;
+      return this.dir === "ltr" ? !1 : this.dir === "rtl" || ((n = window == null ? void 0 : window.getComputedStyle(this)) == null ? void 0 : n.direction) === "rtl";
     }
   }
-  return P([
-    w({ type: String })
-  ], t.prototype, "dir", 2), t;
-}, C = (r, t, n) => function(o, e) {
-  const a = `#${e}`;
-  Object.defineProperty(o, e, {
+  return A([
+    k({ type: String })
+  ], e.prototype, "dir", 2), e;
+}, j = (i, e, t) => function(o, r) {
+  const d = `#${r}`;
+  Object.defineProperty(o, r, {
     get() {
-      return this[a];
+      return this[d];
     },
-    set(i) {
-      const f = this[a];
-      t.includes(i) ? this[a] = i : (console.error(
-        `<${r}> Invalid value "${i}" provided for property "${e}".`,
-        `Must be one of: ${t.join(" | ")}.`,
-        `Falling back to default value: "${n}"`
-      ), this[a] = n), this.requestUpdate(e, f);
+    set(f) {
+      const h = this[d];
+      e.includes(f) ? this[d] = f : (console.error(
+        `<${i}> Invalid value "${f}" provided for property "${r}".`,
+        `Must be one of: ${e.join(" | ")}.`,
+        `Falling back to default value: "${t}"`
+      ), this[d] = t), this.requestUpdate(r, h);
     }
   });
-}, x = (r) => function(t, n) {
+}, q = (i) => function(t, n) {
   const o = `#${n}`;
   Object.defineProperty(t, n, {
     get() {
       return this[o];
     },
-    set(e) {
-      const a = this[o];
-      (e == null || e === "") && console.error(`<${r}> Missing required attribute "${n}"`), this[o] = e, this.requestUpdate(n, a);
+    set(r) {
+      const d = this[o];
+      (r == null || typeof r == "string" && r.trim() === "") && console.error(`<${i}> Missing required attribute "${n}"`), this[o] = r, this.requestUpdate(n, d);
     }
   });
-}, z = `.c-webComponentTestWrapper{padding-block:var(--dt-spacing-c);padding-inline:var(--dt-spacing-e);font-family:var(--dt-font-interactive-m-family);font-size:calc(var(--dt-font-size-20) * 1px);border:1px solid var(--dt-color-background-dark);display:grid;grid-template-columns:1fr 1fr}.c-webComponentTestWrapper-label{margin-block:var(--dt-spacing-c)}.c-webComponentTestWrapper-slot{padding:var(--dt-spacing-c);border:1px dashed var(--dt-color-background-dark);grid-column:1/3;margin-block-start:var(--dt-spacing-c)}
+}, I = `.c-webComponentTestWrapper{padding-block:var(--dt-spacing-c);padding-inline:var(--dt-spacing-e);font-family:var(--dt-font-interactive-m-family);font-size:calc(var(--dt-font-size-20) * 1px);border:1px solid var(--dt-color-background-dark);display:grid;grid-template-columns:1fr 1fr}.c-webComponentTestWrapper-label{margin-block:var(--dt-spacing-c)}.c-webComponentTestWrapper-slot{padding:var(--dt-spacing-c);border:1px dashed var(--dt-color-background-dark);grid-column:1/3;margin-block-start:var(--dt-spacing-c)}
 `;
-var D = Object.defineProperty, T = Object.getOwnPropertyDescriptor, E = (r, t, n, o) => {
-  for (var e = o > 1 ? void 0 : o ? T(t, n) : t, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (e = (o ? i(t, n, e) : i(e)) || e);
-  return o && e && D(t, n, e), e;
+var F = Object.defineProperty, H = Object.getOwnPropertyDescriptor, E = (i, e, t, n) => {
+  for (var o = n > 1 ? void 0 : n ? H(e, t) : e, r = i.length - 1, d; r >= 0; r--)
+    (d = i[r]) && (o = (n ? d(e, t, o) : d(o)) || o);
+  return n && o && F(e, t, o), o;
 };
-class c extends v {
+class b extends $ {
   constructor() {
-    super(...arguments), this.propKeyValues = "";
+    super(...arguments), this.propKeyValues = "", this.pageMode = !1;
   }
   // Renders a string such as 'size: small, isFullWidth: true'
   // as HTML such as:
   // <p class="c-webComponentTestWrapper-label"><b>size</b>: <code>small</code></p>
   // <p class="c-webComponentTestWrapper-label"><b>isFullWidth</b>: <code>true</code></p>
   _renderPropKeyValues() {
-    return this.propKeyValues.split(",").map((t) => {
-      const [n, o] = t.split(":");
-      return m`<p class="c-webComponentTestWrapper-label"><b>${n}</b>: <code>${o}</code></p>`;
+    return this.propKeyValues.split(",").map((e) => {
+      const [t, n] = e.split(":");
+      return w`<p class="c-webComponentTestWrapper-label"><b>${t}</b>: <code>${n}</code></p>`;
     });
   }
-  // eslint-disable-next-line class-methods-use-this
   render() {
-    return m`
+    return this.pageMode ? w`
+            <div>
+                <slot name="component"></slot>
+                <slot name="pageMarkup"></slot>
+            </div>` : w`
             <div class="c-webComponentTestWrapper">
                 ${this._renderPropKeyValues()}
                 <div class="c-webComponentTestWrapper-slot">
-                    <slot></slot>
+                    <slot name="component"></slot>
                 </div>
             </div>`;
   }
 }
-c.styles = g(z);
+b.styles = T(I);
+E([
+  u({ type: String })
+], b.prototype, "propKeyValues", 2);
 E([
-  s({ type: String })
-], c.prototype, "propKeyValues", 2);
-const h = "web-component-test-wrapper";
-customElements.get(h) || customElements.define(h, c);
-const S = `.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;font-family:var(--modal-font);background-color:var(--modal-bg-color);padding:0;inline-size:var(--modal-size-m);box-shadow:var(--modal-elevation)}.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);--modal-header-font-weight: var(--dt-font-heading-m-weight);--modal-header-padding: var(--dt-spacing-e);--modal-header-padding-block-end: var(--dt-spacing-d);font-size:var(--modal-header-font-size);line-height:var(--modal-header-font-line-height);font-weight:var(--modal-header-font-weight);margin:0;padding-block:var(--modal-header-padding) var(--modal-header-padding-block-end);padding-inline:var(--modal-header-padding)}.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: var(--dt-spacing-e);--modal-content-padding-block-start: var(--dt-spacing-a);font-size:var(--modal-content-font-size);line-height:var(--modal-content-line-height);font-weight:var(--modal-content-font-weight);padding-block:var(--modal-content-padding-block-start) var(--modal-content-padding);padding-inline:var(--modal-content-padding)}.c-modal .c-modal-closeBtn{position:absolute;right:var(--dt-spacing-d);top:var(--dt-spacing-d)}
-`, j = ["h1", "h2", "h3", "h4", "h5", "h6"], L = "pie-modal-close";
-var W = Object.defineProperty, V = Object.getOwnPropertyDescriptor, l = (r, t, n, o) => {
-  for (var e = o > 1 ? void 0 : o ? V(t, n) : t, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (e = (o ? i(t, n, e) : i(e)) || e);
-  return o && e && W(t, n, e), e;
+  u({ type: Boolean })
+], b.prototype, "pageMode", 2);
+const C = "web-component-test-wrapper";
+customElements.get(C) || customElements.define(C, b);
+function N(i) {
+  if (Array.isArray(i)) {
+    for (var e = 0, t = Array(i.length); e < i.length; e++)
+      t[e] = i[e];
+    return t;
+  } else
+    return Array.from(i);
+}
+var P = !1;
+if (typeof window < "u") {
+  var M = {
+    get passive() {
+      P = !0;
+    }
+  };
+  window.addEventListener("testPassive", null, M), window.removeEventListener("testPassive", null, M);
+}
+var v = typeof window < "u" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1), s = [], m = !1, x = -1, c = void 0, a = void 0, p = void 0, L = function(e) {
+  return s.some(function(t) {
+    return !!(t.options.allowTouchMove && t.options.allowTouchMove(e));
+  });
+}, g = function(e) {
+  var t = e || window.event;
+  return L(t.target) || t.touches.length > 1 ? !0 : (t.preventDefault && t.preventDefault(), !1);
+}, Y = function(e) {
+  if (p === void 0) {
+    var t = !!e && e.reserveScrollBarGap === !0, n = window.innerWidth - document.documentElement.clientWidth;
+    if (t && n > 0) {
+      var o = parseInt(window.getComputedStyle(document.body).getPropertyValue("padding-right"), 10);
+      p = document.body.style.paddingRight, document.body.style.paddingRight = o + n + "px";
+    }
+  }
+  c === void 0 && (c = document.body.style.overflow, document.body.style.overflow = "hidden");
+}, U = function() {
+  p !== void 0 && (document.body.style.paddingRight = p, p = void 0), c !== void 0 && (document.body.style.overflow = c, c = void 0);
+}, X = function() {
+  return window.requestAnimationFrame(function() {
+    if (a === void 0) {
+      a = {
+        position: document.body.style.position,
+        top: document.body.style.top,
+        left: document.body.style.left
+      };
+      var e = window, t = e.scrollY, n = e.scrollX, o = e.innerHeight;
+      document.body.style.position = "fixed", document.body.style.top = -t, document.body.style.left = -n, setTimeout(function() {
+        return window.requestAnimationFrame(function() {
+          var r = o - window.innerHeight;
+          r && t >= o && (document.body.style.top = -(t + r));
+        });
+      }, 300);
+    }
+  });
+}, K = function() {
+  if (a !== void 0) {
+    var e = -parseInt(document.body.style.top, 10), t = -parseInt(document.body.style.left, 10);
+    document.body.style.position = a.position, document.body.style.top = a.top, document.body.style.left = a.left, window.scrollTo(t, e), a = void 0;
+  }
+}, G = function(e) {
+  return e ? e.scrollHeight - e.scrollTop <= e.clientHeight : !1;
+}, J = function(e, t) {
+  var n = e.targetTouches[0].clientY - x;
+  return L(e.target) ? !1 : t && t.scrollTop === 0 && n > 0 || G(t) && n < 0 ? g(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;
+  }
+  if (!s.some(function(o) {
+    return o.targetElement === e;
+  })) {
+    var n = {
+      targetElement: e,
+      options: t || {}
+    };
+    s = [].concat(N(s), [n]), v ? X() : Y(t), v && (e.ontouchstart = function(o) {
+      o.targetTouches.length === 1 && (x = o.targetTouches[0].clientY);
+    }, e.ontouchmove = function(o) {
+      o.targetTouches.length === 1 && J(o, e);
+    }, m || (document.addEventListener("touchmove", g, P ? { passive: !1 } : void 0), m = !0));
+  }
+}, Z = function(e) {
+  if (!e) {
+    console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.");
+    return;
+  }
+  s = s.filter(function(t) {
+    return t.targetElement !== e;
+  }), v && (e.ontouchstart = null, e.ontouchmove = null, m && s.length === 0 && (document.removeEventListener("touchmove", g, P ? { passive: !1 } : void 0), m = !1)), v ? K() : U();
 };
-const p = "pie-modal";
-class d extends O(v) {
+const ee = `.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;font-family:var(--modal-font);background-color:var(--modal-bg-color);padding:0;inline-size:var(--modal-size-m);box-shadow:var(--modal-elevation)}.c-modal::backdrop{background:rgba(0,0,0,.5)}.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);--modal-header-font-weight: var(--dt-font-heading-m-weight);--modal-header-padding: var(--dt-spacing-e);--modal-header-padding-block-end: var(--dt-spacing-d);font-size:var(--modal-header-font-size);line-height:var(--modal-header-font-line-height);font-weight:var(--modal-header-font-weight);margin:0;padding-block:var(--modal-header-padding) var(--modal-header-padding-block-end);padding-inline:var(--modal-header-padding)}.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: var(--dt-spacing-e);--modal-content-padding-block-start: var(--dt-spacing-a);font-size:var(--modal-content-font-size);line-height:var(--modal-content-line-height);font-weight:var(--modal-content-font-weight);padding-block:var(--modal-content-padding-block-start) var(--modal-content-padding);padding-inline:var(--modal-content-padding);overflow-y:scroll;max-block-size:300px}.c-modal .c-modal-closeBtn{position:absolute;inset-inline-end:var(--dt-spacing-d);inset-block-start:var(--dt-spacing-d)}
+`, te = ["h1", "h2", "h3", "h4", "h5", "h6"], _ = "pie-modal-close", O = "pie-modal-open";
+var oe = Object.defineProperty, ne = Object.getOwnPropertyDescriptor, y = (i, e, t, n) => {
+  for (var o = n > 1 ? void 0 : n ? ne(e, t) : e, r = i.length - 1, d; r >= 0; r--)
+    (d = i[r]) && (o = (n ? d(e, t, o) : d(o)) || o);
+  return n && o && oe(e, t, o), o;
+};
+const S = "pie-modal";
+class l extends W($) {
   constructor() {
-    super(...arguments), this.isOpen = !1, this.headingLevel = "h2", this._handleCloseDialog = () => {
-      this._dialog.close(), this._onDialogClose();
-    }, this._onDialogClose = () => {
-      const t = new CustomEvent(L);
-      this.dispatchEvent(t);
-    };
+    super(), this.isOpen = !1, this.headingLevel = "h2", this._triggerCloseModal = () => {
+      this.isOpen = !1;
+    }, this._handleDialogLightDismiss = (e) => {
+      var h;
+      const t = (h = this._dialog) == null ? void 0 : h.getBoundingClientRect(), {
+        top: n = 0,
+        bottom: o = 0,
+        left: r = 0,
+        right: d = 0
+      } = t || {};
+      if (n === 0 && o === 0 && r === 0 && d === 0)
+        return;
+      (e.clientY < n || e.clientY > o || e.clientX < r || e.clientX > d) && (this.isOpen = !1);
+    }, this._dispatchModalCloseEvent = () => {
+      const e = new CustomEvent(_, {
+        bubbles: !0,
+        composed: !0
+      });
+      this.dispatchEvent(e);
+    }, this._dispatchModalOpenEvent = () => {
+      const e = new CustomEvent(O, {
+        bubbles: !0,
+        composed: !0
+      });
+      this.dispatchEvent(e);
+    }, this.addEventListener("click", (e) => this._handleDialogLightDismiss(e));
+  }
+  firstUpdated(e) {
+    this._handleModalOpenStateOnFirstRender(e);
+  }
+  updated(e) {
+    this._handleModalOpenStateChanged(e);
+  }
+  /**
+   * Opens the dialog element and disables page scrolling
+   */
+  _handleModalOpened() {
+    var e;
+    Q(this), (e = this._dialog) == null || e.showModal();
+  }
+  /**
+   * Closes the dialog element and re-enables page scrolling
+   */
+  _handleModalClosed() {
+    var e;
+    Z(this), (e = this._dialog) == null || e.close();
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener(O, this._handleModalOpened.bind(this)), document.addEventListener(_, this._handleModalClosed.bind(this));
+  }
+  disconnectedCallback() {
+    document.removeEventListener(O, this._handleModalOpened.bind(this)), document.removeEventListener(_, this._handleModalClosed.bind(this)), super.disconnectedCallback();
+  }
+  // Handles the value of the isOpen property on first render of the component
+  _handleModalOpenStateOnFirstRender(e) {
+    e.get("isOpen") === void 0 && this.isOpen && this._dispatchModalOpenEvent();
+  }
+  // Handles changes to the modal isOpen property by dispatching any appropriate events
+  _handleModalOpenStateChanged(e) {
+    const t = e.get("isOpen");
+    t !== void 0 && (t ? this._dispatchModalCloseEvent() : this._dispatchModalOpenEvent());
   }
   render() {
     const {
-      isOpen: t,
-      heading: n,
-      headingLevel: o = "h2"
-    } = this, e = u(o);
-    return b`
-            <dialog id="dialog" class="c-modal" ?open="${t}">
+      heading: e,
+      headingLevel: t = "h2"
+    } = this, n = D(t);
+    return z`
+            <dialog id="dialog" class="c-modal">
                 <header>
-                    <${e} class="c-modal-heading">${n}</${e}>
+                    <${n} class="c-modal-heading">${e}</${n}>
                     <pie-icon-button
-                        @click="${this._handleCloseDialog}"
+                        @click="${this._triggerCloseModal}"
                         variant="ghost-tertiary"
                         class="c-modal-closeBtn"></pie-icon-button>
                 </header>
-                <article>
-                    <div class="c-modal-content">
-                        <slot></slot>
-                    </div>
+                <article class="c-modal-content">
+                    <slot></slot>
                 </article>
             </dialog>
         `;
   }
 }
-d.styles = g(S);
-l([
-  s({ type: Boolean })
-], d.prototype, "isOpen", 2);
-l([
-  s({ type: String }),
-  x(p)
-], d.prototype, "heading", 2);
-l([
-  s(),
-  C(p, j, "h2")
-], d.prototype, "headingLevel", 2);
-l([
-  _("dialog")
-], d.prototype, "_dialog", 2);
-customElements.define(p, d);
+l.styles = T(ee);
+y([
+  u({ type: Boolean })
+], l.prototype, "isOpen", 2);
+y([
+  u({ type: String }),
+  q(S)
+], l.prototype, "heading", 2);
+y([
+  u(),
+  j(S, te, "h2")
+], l.prototype, "headingLevel", 2);
+y([
+  B("dialog")
+], l.prototype, "_dialog", 2);
+customElements.define(S, l);
 export {
-  d as PieModal,
-  j as headingLevels
+  l as PieModal,
+  te as headingLevels
 };

package/dist/types/packages/components/pie-modal/src/defs.d.ts

@@ -1,27 +1,30 @@
+export declare const headingLevels: readonly ["h1", "h2", "h3", "h4", "h5", "h6"];
 export interface ModalProps {
     /**
-     * the heading of the modal .
+     * (Required) The text to display in the modal's heading.
      */
     heading: string;
     /**
-     * the rendered heading tag of the modal header.
-     * @default h2
+     * (Optional) The HTML heading tag to use for the modal's heading. Can be H1-H6.
+     * @default "h2"
      */
-    headingLevel: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    headingLevel: typeof headingLevels[number];
     /**
-     * If `true`, the modal will be opened.
+     * (Optional) When true, the modal will be open.
      * @default false
      */
-    isOpen?: boolean;
+    isOpen: boolean;
 }
-/**
- * Modal heading levels/tags
- */
-export declare const headingLevels: Array<ModalProps['headingLevel']>;
 /**
  * Event name for when the modal is closed.
  *
  * @constant
  */
 export declare const ON_MODAL_CLOSE_EVENT = "pie-modal-close";
+/**
+ * Event name for when the modal is opened.
+ *
+ * @constant
+ */
+export declare const ON_MODAL_OPEN_EVENT = "pie-modal-open";
 //# sourceMappingURL=defs.d.ts.map

package/dist/types/packages/components/pie-modal/src/defs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,UAAU;IACvB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,YAAY,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACtD;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAwC,CAAC;AAErG;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,oBAAoB,CAAC"}
+{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,+CAAgD,CAAC;AAE3E,MAAM,WAAW,UAAU;IACvB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,YAAY,EAAE,OAAO,aAAa,CAAC,MAAM,CAAC,CAAC;IAC3C;;;OAGG;IACH,MAAM,EAAE,OAAO,CAAC;CACnB;AAED;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,oBAAoB,CAAC;AAEtD;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,mBAAmB,CAAC"}

package/dist/types/packages/components/pie-modal/src/index.d.ts

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import type { DependentMap } from '@justeattakeaway/pie-webc-core';
 import { ModalProps, headingLevels } from './defs';
 export { type ModalProps, headingLevels };
 declare const componentSelector = "pie-modal";
@@ -10,16 +11,47 @@ export declare class PieModal extends PieModal_base {
     isOpen: boolean;
     heading: string;
     headingLevel: ModalProps['headingLevel'];
-    _dialog: HTMLDialogElement;
+    _dialog?: HTMLDialogElement;
+    constructor();
+    firstUpdated(changedProperties: DependentMap<ModalProps>): void;
+    updated(changedProperties: DependentMap<ModalProps>): void;
+    /**
+     * Opens the dialog element and disables page scrolling
+     */
+    private _handleModalOpened;
+    /**
+     * Closes the dialog element and re-enables page scrolling
+     */
+    private _handleModalClosed;
+    /**
+     * This is only to be used inside the component template as direct property
+     * reassignment is not allowed.
+     */
+    private _triggerCloseModal;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _handleModalOpenStateOnFirstRender;
+    private _handleModalOpenStateChanged;
     render(): import("lit-html").TemplateResult;
-    _handleCloseDialog: () => void;
+    /**
+     * Dismisses the modal on backdrop click
+     *
+     */
+    private _handleDialogLightDismiss;
     /**
      * Dispatch `ON_MODAL_CLOSE_EVENT` event.
      * To be used whenever we close the modal.
      *
      * @event
      */
-    _onDialogClose: () => void;
+    private _dispatchModalCloseEvent;
+    /**
+     * Dispatch `ON_MODAL_OPEN_EVENT` event.
+     * To be used whenever we open the modal.
+     *
+     * @event
+     */
+    private _dispatchModalOpenEvent;
     static styles: import("lit").CSSResult;
 }
 declare global {

package/dist/types/packages/components/pie-modal/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAM5C,OAAO,EAAE,UAAU,EAAE,aAAa,EAAwB,MAAM,QAAQ,CAAC;AAGzE,OAAO,EAAE,KAAK,UAAU,EAAE,aAAa,EAAE,CAAC;AAE1C,QAAA,MAAM,iBAAiB,cAAc,CAAC;;;;;AAEtC,qBAAa,QAAS,SAAQ,aAAoB;IAE1C,MAAM,UAAS;IAIf,OAAO,EAAG,MAAM,CAAC;IAIjB,YAAY,EAAE,UAAU,CAAC,cAAc,CAAC,CAAQ;IAGhD,OAAO,EAAE,iBAAiB,CAAC;IAE/B,MAAM;IA2BN,kBAAkB,aAGhB;IAEF;;;;;OAKG;IACH,cAAc,aAGZ;IAGF,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAID,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,QAAQ,CAAC;KACjC;CACJ"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAM5C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAGnE,OAAO,EACH,UAAU,EAAE,aAAa,EAC5B,MAAM,QAAQ,CAAC;AAGhB,OAAO,EAAE,KAAK,UAAU,EAAE,aAAa,EAAE,CAAC;AAE1C,QAAA,MAAM,iBAAiB,cAAc,CAAC;;;;;AAEtC,qBAAa,QAAS,SAAQ,aAAoB;IAE1C,MAAM,UAAS;IAIf,OAAO,EAAG,MAAM,CAAC;IAIjB,YAAY,EAAE,UAAU,CAAC,cAAc,CAAC,CAAQ;IAGhD,OAAO,CAAC,EAAE,iBAAiB,CAAC;;IAOhC,YAAY,CAAE,iBAAiB,EAAE,YAAY,CAAC,UAAU,CAAC,GAAI,IAAI;IAIjE,OAAO,CAAE,iBAAiB,EAAE,YAAY,CAAC,UAAU,CAAC,GAAI,IAAI;IAI5D;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAQ1B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAM1B;;;OAGG;IACH,OAAO,CAAC,kBAAkB,CAExB;IAEF,iBAAiB,IAAM,IAAI;IAM3B,oBAAoB,IAAM,IAAI;IAO9B,OAAO,CAAC,kCAAkC;IAU1C,OAAO,CAAC,4BAA4B;IAYpC,MAAM;IAwBN;;;OAGG;IACH,OAAO,CAAC,yBAAyB,CAqB/B;IAEF;;;;;OAKG;IACH,OAAO,CAAC,wBAAwB,CAO9B;IAEF;;;;;OAKG;IACH,OAAO,CAAC,uBAAuB,CAO7B;IAGF,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAID,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,QAAQ,CAAC;KACjC;CACJ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-modal",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "PIE design system modal built using web components",
   "type": "module",
   "main": "dist/index.js",
@@ -22,7 +22,11 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@justeattakeaway/pie-components-config": "workspace:*",
-    "@justeattakeaway/pie-webc-core": "workspace:*"
+    "@justeattakeaway/pie-webc-core": "workspace:*",
+    "@types/body-scroll-lock": "3.1.0"
+  },
+  "peerDependencies": {
+    "body-scroll-lock": "4.0.0-beta.0"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/defs.ts

@@ -1,28 +1,32 @@
+export const headingLevels = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;
+
 export interface ModalProps {
     /**
-     * the heading of the modal .
+     * (Required) The text to display in the modal's heading.
      */
     heading: string;
     /**
-     * the rendered heading tag of the modal header.
-     * @default h2
+     * (Optional) The HTML heading tag to use for the modal's heading. Can be H1-H6.
+     * @default "h2"
      */
-    headingLevel: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    headingLevel: typeof headingLevels[number];
     /**
-     * If `true`, the modal will be opened.
+     * (Optional) When true, the modal will be open.
      * @default false
      */
-    isOpen?: boolean;
+    isOpen: boolean;
 }
 
 /**
- * Modal heading levels/tags
+ * Event name for when the modal is closed.
+ *
+ * @constant
  */
-export const headingLevels: Array<ModalProps['headingLevel']> = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+export const ON_MODAL_CLOSE_EVENT = 'pie-modal-close';
 
 /**
- * Event name for when the modal is closed.
+ * Event name for when the modal is opened.
  *
  * @constant
  */
-export const ON_MODAL_CLOSE_EVENT = 'pie-modal-close';
+export const ON_MODAL_OPEN_EVENT = 'pie-modal-open';

package/src/index.ts

@@ -1,10 +1,15 @@
 import { LitElement, unsafeCSS } from 'lit';
 import { html, unsafeStatic } from 'lit/static-html.js';
-import { property, query } from 'lit/decorators.js'; // eslint-disable-line import/no-extraneous-dependencies
-import { RtlMixin, validPropertyValues, requiredProperty } from '@justeattakeaway/pie-webc-core';
-
+import { property, query } from 'lit/decorators.js';
+import {
+    RtlMixin, validPropertyValues, requiredProperty,
+} from '@justeattakeaway/pie-webc-core';
+import type { DependentMap } from '@justeattakeaway/pie-webc-core';
+import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
 import styles from './modal.scss?inline';
-import { ModalProps, headingLevels, ON_MODAL_CLOSE_EVENT } from './defs';
+import {
+    ModalProps, headingLevels, ON_MODAL_CLOSE_EVENT, ON_MODAL_OPEN_EVENT,
+} from './defs';
 
 // Valid values available to consumers
 export { type ModalProps, headingLevels };
@@ -24,11 +29,86 @@ export class PieModal extends RtlMixin(LitElement) {
         headingLevel: ModalProps['headingLevel'] = 'h2';
 
     @query('dialog')
-        _dialog: HTMLDialogElement;
+        _dialog?: HTMLDialogElement;
+
+    constructor () {
+        super();
+        this.addEventListener('click', (event) => this._handleDialogLightDismiss(event));
+    }
+
+    firstUpdated (changedProperties: DependentMap<ModalProps>) : void {
+        this._handleModalOpenStateOnFirstRender(changedProperties);
+    }
+
+    updated (changedProperties: DependentMap<ModalProps>) : void {
+        this._handleModalOpenStateChanged(changedProperties);
+    }
+
+    /**
+     * Opens the dialog element and disables page scrolling
+     */
+    private _handleModalOpened () : void {
+        disableBodyScroll(this);
+        //  We require this because toggling the prop `isOpen` itself won't
+        //  allow the dialog to open in the correct way (with the default background),
+        //  the method `showModal()` needs to be invoked.
+        this._dialog?.showModal();
+    }
+
+    /**
+     * Closes the dialog element and re-enables page scrolling
+     */
+    private _handleModalClosed () : void {
+        enableBodyScroll(this);
+        //  Closes the native dialog element
+        this._dialog?.close();
+    }
+
+    /**
+     * This is only to be used inside the component template as direct property
+     * reassignment is not allowed.
+     */
+    private _triggerCloseModal = () : void => {
+        this.isOpen = false;
+    };
+
+    connectedCallback () : void {
+        super.connectedCallback();
+        document.addEventListener(ON_MODAL_OPEN_EVENT, this._handleModalOpened.bind(this));
+        document.addEventListener(ON_MODAL_CLOSE_EVENT, this._handleModalClosed.bind(this));
+    }
+
+    disconnectedCallback () : void {
+        document.removeEventListener(ON_MODAL_OPEN_EVENT, this._handleModalOpened.bind(this));
+        document.removeEventListener(ON_MODAL_CLOSE_EVENT, this._handleModalClosed.bind(this));
+        super.disconnectedCallback();
+    }
+
+    // Handles the value of the isOpen property on first render of the component
+    private _handleModalOpenStateOnFirstRender (changedProperties: DependentMap<ModalProps>) : void {
+        // This ensures if the modal is open on first render, the scroll lock and backdrop are applied
+        const previousValue = changedProperties.get('isOpen');
+
+        if (previousValue === undefined && this.isOpen) {
+            this._dispatchModalOpenEvent();
+        }
+    }
+
+    // Handles changes to the modal isOpen property by dispatching any appropriate events
+    private _handleModalOpenStateChanged (changedProperties: DependentMap<ModalProps>) : void {
+        const previousValue = changedProperties.get('isOpen');
+
+        if (previousValue !== undefined) {
+            if (previousValue) {
+                this._dispatchModalCloseEvent();
+            } else {
+                this._dispatchModalOpenEvent();
+            }
+        }
+    }
 
     render () {
         const {
-            isOpen,
             heading,
             headingLevel = 'h2',
         } = this;
@@ -36,26 +116,46 @@ export class PieModal extends RtlMixin(LitElement) {
         const headingTag = unsafeStatic(headingLevel);
 
         return html`
-            <dialog id="dialog" class="c-modal" ?open="${isOpen}">
+            <dialog id="dialog" class="c-modal">
                 <header>
                     <${headingTag} class="c-modal-heading">${heading}</${headingTag}>
                     <pie-icon-button
-                        @click="${this._handleCloseDialog}"
+                        @click="${this._triggerCloseModal}"
                         variant="ghost-tertiary"
                         class="c-modal-closeBtn"></pie-icon-button>
                 </header>
-                <article>
-                    <div class="c-modal-content">
-                        <slot></slot>
-                    </div>
+                <article class="c-modal-content">
+                    <slot></slot>
                 </article>
             </dialog>
         `;
     }
 
-    _handleCloseDialog = () => {
-        this._dialog.close();
-        this._onDialogClose();
+    /**
+     * Dismisses the modal on backdrop click
+     *
+     */
+    private _handleDialogLightDismiss = (event: MouseEvent) : void => {
+        const rect = this._dialog?.getBoundingClientRect();
+
+        const {
+            top = 0, bottom = 0, left = 0, right = 0,
+        } = rect || {};
+
+        // This means the dialog is not open due to clicking the close button so
+        // we want to escape early
+        if (top === 0 && bottom === 0 && left === 0 && right === 0) {
+            return;
+        }
+
+        const isClickOutsideDialog = event.clientY < top ||
+            event.clientY > bottom ||
+            event.clientX < left ||
+            event.clientX > right;
+
+        if (isClickOutsideDialog) {
+            this.isOpen = false;
+        }
     };
 
     /**
@@ -64,8 +164,27 @@ export class PieModal extends RtlMixin(LitElement) {
      *
      * @event
      */
-    _onDialogClose = () => {
-        const event = new CustomEvent(ON_MODAL_CLOSE_EVENT);
+    private _dispatchModalCloseEvent = () : void => {
+        const event = new CustomEvent(ON_MODAL_CLOSE_EVENT, {
+            bubbles: true,
+            composed: true,
+        });
+
+        this.dispatchEvent(event);
+    };
+
+    /**
+     * Dispatch `ON_MODAL_OPEN_EVENT` event.
+     * To be used whenever we open the modal.
+     *
+     * @event
+     */
+    private _dispatchModalOpenEvent = () : void => {
+        const event = new CustomEvent(ON_MODAL_OPEN_EVENT, {
+            bubbles: true,
+            composed: true,
+        });
+
         this.dispatchEvent(event);
     };
 

package/src/modal.scss

@@ -1,3 +1,5 @@
+@use '@justeat/pie-design-tokens/dist/jet.scss' as dt;
+
 .c-modal {
     // Custom Property Declarations
     // These are defined here instead of :host to encapsulate them inside Shadow DOM
@@ -21,6 +23,12 @@
 
     box-shadow: var(--modal-elevation);
 
+    // We need to pull in the token directly here because the
+    // pseudo element `::backdrop` doesn't seem to pick up custom css properties.
+    &::backdrop {
+        background: #{dt.$color-overlay};
+    }
+
     & .c-modal-heading {
         // Modal header Custom Props
         --modal-header-font-size: calc(var(--dt-font-heading-m-size--wide) * 1px);
@@ -52,11 +60,14 @@
 
         padding-block: var(--modal-content-padding-block-start) var(--modal-content-padding);
         padding-inline: var(--modal-content-padding);
+
+        overflow-y: scroll;
+        max-block-size: 300px; // This is just a placeholder before we add the proper container styles to slotted content to demonstrate scrollable slot content
     }
 
     & .c-modal-closeBtn {
         position: absolute;
-        right: var(--dt-spacing-d);
-        top: var(--dt-spacing-d);
+        inset-inline-end: var(--dt-spacing-d);
+        inset-block-start: var(--dt-spacing-d);
     }
 }

package/test/component/pie-modal.spec.ts

@@ -1,5 +1,4 @@
 import { test, expect } from '@sand4rt/experimental-ct-web';
-import * as events from 'events';
 import { PieModal } from '@/index';
 import { headingLevels } from '@/defs';
 
@@ -21,33 +20,57 @@ headingLevels.forEach((headingLevel) => test(`should render the correct heading
         headingLevel,
     };
 
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore // Added this as we want to deliberately test with invalid headingLevel (which is an invalid type based on ModalProps)
     const component = await mount(PieModal, { props });
 
     // h2 is the default / fallback value
     await expect(component.locator('h2.c-modal-heading')).toContainText(props.heading);
 }));
 
-test.describe('`When the Pie Modal is closed`', () => {
-    test.skip('should dispatch event `pie-modal-close`', async ({ mount }) => {
-        const messages: string[] = [];
-        const component = await mount(
-            PieModal,
-            {
-                props: {
-                    isOpen: true,
+test.describe('`Pie Modal is closed`', () => {
+    test.describe('when via the close button click', () => {
+        test.skip('should dispatch event `pie-modal-close`', async ({ mount, page }) => {
+            const messages: string[] = [];
+            await mount(
+                PieModal,
+                {
+                    props: {
+                        isOpen: true
+                    },
+                    on: {
+                        click: (event: string) => messages.push(event),
+                    },
                 },
-            },
-        );
+            );
 
-        await component.update({
-            on: {
-                click: (event: string) => messages.push(event),
-            },
+            await page.locator('.c-modal-closeBtn').click();
+
+
+            expect(messages).toHaveLength(1);
         });
+    });
 
-        await component.locator('.c-modal-closeBtn').click({ });
+    test.describe('when via the backdrop click', () => {
+        test.skip('should dispatch event `pie-modal-close`', async ({ mount, page }) => {
+            const messages: string[] = [];
+            await mount(
+                PieModal,
+                {
+                    props: {
+                        isOpen: true,
+                    },
+                    on: {
+                        click: (event: string) => messages.push(event),
+                    },
+                },
+            );
 
-        expect(messages).toHaveLength(1);
+            await page.locator('#dialog').click();
+
+
+            expect(messages).toHaveLength(1);
+        });
     });
 });
 

package/test/visual/pie-modal.spec.ts

@@ -1,7 +1,10 @@
 import { test } from '@sand4rt/experimental-ct-web';
 import percySnapshot from '@percy/playwright';
+import {
+    WebComponentTestWrapper,
+} from '@justeattakeaway/pie-webc-core/src/test-helpers/components/web-component-test-wrapper/WebComponentTestWrapper.ts';
+import { WebComponentPropValues } from '@justeattakeaway/pie-webc-core/src/test-helpers/defs';
 import { PieModal } from '@/index';
-import { getLitPercyOptions } from '@justeattakeaway/pie-webc-core/src/test-helpers/percy-lit-options.ts';
 
 const propIsOpenValues = [{ heading: 'Modal Heading', isOpen: true }, { isOpen: false }];
 
@@ -16,5 +19,50 @@ propIsOpenValues.forEach((props) => test(`should render Modal correctly when pro
         },
     );
 
-    await percySnapshot(page, `PIE Modal when isOpen is set to ${props.isOpen}`, getLitPercyOptions());
+    await percySnapshot(page, `PIE Modal when isOpen is set to ${props.isOpen}`);
 }));
+
+const renderTestPieModal = (propVals: WebComponentPropValues) => `<pie-modal ${propVals.isOpen ? 'isOpen' : ''} heading="${propVals.heading}" headingLevel="${propVals.headingLevel}"></pie-modal>`;
+
+// Creates a <ul> with a large number of <li> nodes for testing page scrolling
+const createTestPageHTML = () : string => {
+    let list = '<ul>';
+
+    for (let i = 0; i < 200; i++) {
+        list += `<li>Item ${i}</li>`;
+    }
+
+    list += '</ul>';
+
+    return list;
+};
+
+test('Should not be able to scroll when modal is open', async ({ page, mount }) => {
+    const props: WebComponentPropValues = {
+        heading: 'I am a Modal!',
+        headingLevel: 'h2',
+        isOpen: true,
+    };
+
+    const modalComponent = renderTestPieModal(props);
+
+    await mount(
+        WebComponentTestWrapper,
+        {
+            props: {
+                pageMode: true,
+            },
+            slots: {
+                component: modalComponent,
+                pageMarkup: createTestPageHTML(),
+            },
+        },
+    );
+
+    // Scroll 800 pixels down the page
+    await page.mouse.wheel(0, 800);
+
+    await page.waitForTimeout(3000); // The mouse.wheel function causes scrolling, but doesn't wait for the scroll to finish before returning.
+
+    await percySnapshot(page, 'PIE Modal scroll locking');
+});