@justeattakeaway/pie-modal 0.9.0 → 0.10.0

package/.turbo/turbo-build.log

@@ -1,14 +1,14 @@
-[13:51:16] @custom-elements-manifest/analyzer: Created new manifest.
+[2:59:55 PM] @custom-elements-manifest/analyzer: Created new manifest.
 react wrapper has been added!
 vite v4.3.9 building for production...
 transforming...
 ✓ 23 modules transformed.
 rendering chunks...
 computing gzip size...
-dist/index.js  12.03 kB │ gzip:  3.79 kB
+dist/index.js  13.21 kB │ gzip:  4.16 kB
 dist/react.js  59.04 kB │ gzip: 15.92 kB
-
-[vite:dts] Start generate declaration files...
-✓ built in 4.35s
-[vite:dts] Declaration files built in 3800ms.
-
+
+[vite:dts] Start generate declaration files...
+✓ built in 10.22s
+[vite:dts] Declaration files built in 9231ms.
+

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @justeattakeaway/pie-modal
 
+## 0.10.0
+
+### Minor Changes
+
+- [Added] - Add returnFocusAfterCloseSelector prop ([#599](https://github.com/justeattakeaway/pie/pull/599)) by [@xander-marjoram](https://github.com/xander-marjoram)
+
+  [Changed] - Extract `renderTestPieModal` into test helper file so it can be used for component tests too
+  [Added] - Add README documentation for new props
+
+- [Fixed] - Fix console errors when switching between stories ([#599](https://github.com/justeattakeaway/pie/pull/599)) by [@xander-marjoram](https://github.com/xander-marjoram)
+
+- [Added] - New `isFullWidthBelowMid` prop for pie-modal ([#600](https://github.com/justeattakeaway/pie/pull/600)) by [@LTurns](https://github.com/LTurns)
+
+- [Added] isDismissible prop and tests ([#588](https://github.com/justeattakeaway/pie/pull/588)) by [@kevinrodrigues](https://github.com/kevinrodrigues)
+
 ## 0.9.0
 
 ### Minor Changes

package/README.md

@@ -14,6 +14,7 @@
 2. [Local Development](#local-development)
 3. [Importing the component](#importing-the-component)
 4. [Props](#props)
+5. [Testing](#testing)
 
 # pie-modal
 
@@ -56,12 +57,19 @@ import { PieModal } from '@justeattakeaway/pie-modal/dist/react';
 
 ## Props
 
-| Property       | Type      | Default | Description                                           |
-|----------------|-----------|---------|-------------------------------------------------------|
-| isOpen         | `Boolean` | `false` | Controls if the modal element is open or closed       |
-| heading*       | `String`  | -       | Sets the heading of the modal                         |
-| headingLevel   | `String`  | `h2`    | Allows you to set the heading tag (from `h1` to `h6`) |
-
+| Property | Type | Default | Description |
+|---|---|---|---|
+| headingLevel | `String` | `h2` |  |
+
+| Property | Type | Default | Description |
+|---|---|---|---|
+| heading | `String` | n/a (Required) | The heading text of the modal |
+| headingLevel | `String` | `h2` | The HTML tag to use for the modal's heading (can be `h1`-`h6`) |
+| isDismissible | `Boolean` | `false` | If true, the modal includes a close button and can be dismissed by clicking on the backdrop or pressing the Esc key |
+| isFullWidthBelowMid | `Boolean` | `false` | If true and the page is narrower than the mid breakpoint, a **medium-sized** modal will take up the full width of the screen. |
+| isOpen | `Boolean` | `false` | Controls if the modal element is open or closed |
+| size | `String` | `medium` | Determines the maximum width of the modal. Large modals will expand to fill the entire page width at narrow viewports. Can be `small`, `medium` or `large`. |
+| returnFocusAfterCloseSelector | `String` | `undefined` | If provided, focus will be sent to the first element that matches this selector when the modal is closed. If not provided, the `dialog` element will return focus to the element that opened the modal. |
 
 In your markup or JSX, you can then use these to set the properties for the `pie-modal` component:
 

package/dist/index.js

@@ -1,14 +1,14 @@
-import { unsafeCSS as C, LitElement as x } from "lit";
-import { unsafeStatic as E, html as L } from "lit/static-html.js";
-import { property as y, query as T } from "lit/decorators.js";
-import { property as $ } from "lit/decorators/property.js";
-var D = Object.defineProperty, B = Object.getOwnPropertyDescriptor, k = (i, e, t, n) => {
-  for (var o = n > 1 ? void 0 : n ? B(e, t) : e, d = i.length - 1, a; d >= 0; d--)
-    (a = i[d]) && (o = (n ? a(e, t, o) : a(o)) || o);
-  return n && o && D(e, t, o), o;
+import { nothing as x, unsafeCSS as D, LitElement as B } from "lit";
+import { html as z, unsafeStatic as E } from "lit/static-html.js";
+import { property as u, query as L } from "lit/decorators.js";
+import { property as T } from "lit/decorators/property.js";
+var $ = Object.defineProperty, F = Object.getOwnPropertyDescriptor, A = (n, e, t, o) => {
+  for (var i = o > 1 ? void 0 : o ? F(e, t) : e, d = n.length - 1, l; d >= 0; d--)
+    (l = n[d]) && (i = (o ? l(e, t, i) : l(i)) || i);
+  return o && i && $(e, t, i), i;
 };
-const R = (i) => {
-  class e extends i {
+const k = (n) => {
+  class e extends n {
     constructor() {
       super(...arguments), this.dir = "";
     }
@@ -22,168 +22,180 @@ const R = (i) => {
      * will not be reactive and is only computed once
      */
     get isRTL() {
-      var n;
-      return this.dir === "ltr" ? !1 : this.dir === "rtl" || ((n = window == null ? void 0 : window.getComputedStyle(this)) == null ? void 0 : n.direction) === "rtl";
+      var o;
+      return this.dir === "ltr" ? !1 : this.dir === "rtl" || ((o = window == null ? void 0 : window.getComputedStyle(this)) == null ? void 0 : o.direction) === "rtl";
     }
   }
-  return k([
-    $({ type: String })
+  return A([
+    T({ type: String })
   ], e.prototype, "dir", 2), e;
-}, S = (i, e, t) => function(o, d) {
-  const a = `#${d}`;
-  Object.defineProperty(o, d, {
+}, C = (n, e, t) => function(i, d) {
+  const l = `#${d}`;
+  Object.defineProperty(i, d, {
     get() {
-      return this[a];
+      return this[l];
     },
-    set(f) {
-      const m = this[a];
-      e.includes(f) ? this[a] = f : (console.error(
-        `<${i}> Invalid value "${f}" provided for property "${d}".`,
+    set(m) {
+      const p = this[l];
+      e.includes(m) ? this[l] = m : (console.error(
+        `<${n}> Invalid value "${m}" provided for property "${d}".`,
         `Must be one of: ${e.join(" | ")}.`,
         `Falling back to default value: "${t}"`
-      ), this[a] = t), this.requestUpdate(d, m);
+      ), this[l] = t), this.requestUpdate(d, p);
     }
   });
-}, A = (i) => function(t, n) {
-  const o = `#${n}`;
-  Object.defineProperty(t, n, {
+}, R = (n) => function(t, o) {
+  const i = `#${o}`;
+  Object.defineProperty(t, o, {
     get() {
-      return this[o];
+      return this[i];
     },
     set(d) {
-      const a = this[o];
-      (d == null || typeof d == "string" && d.trim() === "") && console.error(`<${i}> Missing required attribute "${n}"`), this[o] = d, this.requestUpdate(n, a);
+      const l = this[i];
+      (d == null || typeof d == "string" && d.trim() === "") && console.error(`<${n}> Missing required attribute "${o}"`), this[i] = d, this.requestUpdate(o, l);
     }
   });
 };
-function q(i) {
-  if (Array.isArray(i)) {
-    for (var e = 0, t = Array(i.length); e < i.length; e++)
-      t[e] = i[e];
+function q(n) {
+  if (Array.isArray(n)) {
+    for (var e = 0, t = Array(n.length); e < n.length; e++)
+      t[e] = n[e];
     return t;
   } else
-    return Array.from(i);
+    return Array.from(n);
 }
-var _ = !1;
+var O = !1;
 if (typeof window < "u") {
-  var z = {
+  var S = {
     get passive() {
-      _ = !0;
+      O = !0;
     }
   };
-  window.addEventListener("testPassive", null, z), window.removeEventListener("testPassive", null, z);
+  window.addEventListener("testPassive", null, S), window.removeEventListener("testPassive", null, S);
 }
-var p = typeof window < "u" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1), r = [], v = !1, P = -1, c = void 0, l = void 0, u = void 0, M = function(e) {
-  return r.some(function(t) {
+var g = typeof window < "u" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1), c = [], y = !1, P = -1, h = void 0, r = void 0, f = void 0, M = function(e) {
+  return c.some(function(t) {
     return !!(t.options.allowTouchMove && t.options.allowTouchMove(e));
   });
-}, g = function(e) {
+}, b = function(e) {
   var t = e || window.event;
   return M(t.target) || t.touches.length > 1 ? !0 : (t.preventDefault && t.preventDefault(), !1);
 }, I = function(e) {
-  if (u === 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);
-      u = document.body.style.paddingRight, document.body.style.paddingRight = o + n + "px";
+  if (f === void 0) {
+    var t = !!e && e.reserveScrollBarGap === !0, o = window.innerWidth - document.documentElement.clientWidth;
+    if (t && o > 0) {
+      var i = parseInt(window.getComputedStyle(document.body).getPropertyValue("padding-right"), 10);
+      f = document.body.style.paddingRight, document.body.style.paddingRight = i + o + "px";
     }
   }
-  c === void 0 && (c = document.body.style.overflow, document.body.style.overflow = "hidden");
+  h === void 0 && (h = document.body.style.overflow, document.body.style.overflow = "hidden");
 }, V = function() {
-  u !== void 0 && (document.body.style.paddingRight = u, u = void 0), c !== void 0 && (document.body.style.overflow = c, c = void 0);
+  f !== void 0 && (document.body.style.paddingRight = f, f = void 0), h !== void 0 && (document.body.style.overflow = h, h = void 0);
 }, j = function() {
   return window.requestAnimationFrame(function() {
-    if (l === void 0) {
-      l = {
+    if (r === void 0) {
+      r = {
         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() {
+      var e = window, t = e.scrollY, o = e.scrollX, i = e.innerHeight;
+      document.body.style.position = "fixed", document.body.style.top = -t, document.body.style.left = -o, setTimeout(function() {
         return window.requestAnimationFrame(function() {
-          var d = o - window.innerHeight;
-          d && t >= o && (document.body.style.top = -(t + d));
+          var d = i - window.innerHeight;
+          d && t >= i && (document.body.style.top = -(t + d));
         });
       }, 300);
     }
   });
-}, F = function() {
-  if (l !== void 0) {
+}, H = function() {
+  if (r !== void 0) {
     var e = -parseInt(document.body.style.top, 10), t = -parseInt(document.body.style.left, 10);
-    document.body.style.position = l.position, document.body.style.top = l.top, document.body.style.left = l.left, window.scrollTo(t, e), l = void 0;
+    document.body.style.position = r.position, document.body.style.top = r.top, document.body.style.left = r.left, window.scrollTo(t, e), r = void 0;
   }
-}, H = function(e) {
+}, W = function(e) {
   return e ? e.scrollHeight - e.scrollTop <= e.clientHeight : !1;
 }, N = function(e, t) {
-  var n = e.targetTouches[0].clientY - P;
-  return M(e.target) ? !1 : t && t.scrollTop === 0 && n > 0 || H(t) && n < 0 ? g(e) : (e.stopPropagation(), !0);
+  var o = e.targetTouches[0].clientY - P;
+  return M(e.target) ? !1 : t && t.scrollTop === 0 && o > 0 || W(t) && o < 0 ? b(e) : (e.stopPropagation(), !0);
 }, Y = function(e, t) {
   if (!e) {
     console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
     return;
   }
-  if (!r.some(function(o) {
-    return o.targetElement === e;
+  if (!c.some(function(i) {
+    return i.targetElement === e;
   })) {
-    var n = {
+    var o = {
       targetElement: e,
       options: t || {}
     };
-    r = [].concat(q(r), [n]), p ? j() : I(t), p && (e.ontouchstart = function(o) {
-      o.targetTouches.length === 1 && (P = o.targetTouches[0].clientY);
-    }, e.ontouchmove = function(o) {
-      o.targetTouches.length === 1 && N(o, e);
-    }, v || (document.addEventListener("touchmove", g, _ ? { passive: !1 } : void 0), v = !0));
+    c = [].concat(q(c), [o]), g ? j() : I(t), g && (e.ontouchstart = function(i) {
+      i.targetTouches.length === 1 && (P = i.targetTouches[0].clientY);
+    }, e.ontouchmove = function(i) {
+      i.targetTouches.length === 1 && N(i, e);
+    }, y || (document.addEventListener("touchmove", b, O ? { passive: !1 } : void 0), y = !0));
   }
 }, U = function(e) {
   if (!e) {
     console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.");
     return;
   }
-  r = r.filter(function(t) {
+  c = c.filter(function(t) {
     return t.targetElement !== e;
-  }), p && (e.ontouchstart = null, e.ontouchmove = null, v && r.length === 0 && (document.removeEventListener("touchmove", g, _ ? { passive: !1 } : void 0), v = !1)), p ? F() : V();
+  }), g && (e.ontouchstart = null, e.ontouchmove = null, y && c.length === 0 && (document.removeEventListener("touchmove", b, O ? { passive: !1 } : void 0), y = !1)), g ? H() : V();
 };
-const X = `.c-modal{--modal-size-s: 450px;--modal-size-m: 600px;--modal-size-l: 1080px;--modal-border-radius: var(--dt-radius-rounded-d);--modal-font: var(--dt-font-interactive-m-family);--modal-bg-color: var(--dt-color-container-default);--modal-elevation: var(--dt-elevation-04);border-radius:var(--modal-border-radius);border:none;box-shadow:var(--modal-elevation);font-family:var(--modal-font);background-color:var(--modal-bg-color);padding:0;--modal-max-inline-size: var(--modal-size-m);--modal-inline-size: 75%;max-inline-size:var(--modal-max-inline-size);inline-size:var(--modal-inline-size)}.c-modal[size=small]{--modal-max-inline-size: var(--modal-size-s)}.c-modal[size=large]{--modal-max-inline-size: var(--modal-size-l);--modal-inline-size: 100%}@media (min-width: 768px){.c-modal[size=large]{--modal-inline-size: 75%}}.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)}
-`, W = ["h1", "h2", "h3", "h4", "h5", "h6"], G = ["small", "medium", "large"], w = "pie-modal-close", O = "pie-modal-open";
-var J = Object.defineProperty, Q = Object.getOwnPropertyDescriptor, h = (i, e, t, n) => {
-  for (var o = n > 1 ? void 0 : n ? Q(e, t) : e, d = i.length - 1, a; d >= 0; d--)
-    (a = i[d]) && (o = (n ? a(e, t, o) : a(o)) || o);
-  return n && o && J(e, t, o), o;
+const X = `.c-modal{--modal-size-s: 450px;--modal-size-m: 600px;--modal-size-l: 1080px;--modal-border-radius: var(--dt-radius-rounded-d);--modal-font: var(--dt-font-interactive-m-family);--modal-bg-color: var(--dt-color-container-default);--modal-elevation: var(--dt-elevation-04);border-radius:var(--modal-border-radius);border:none;box-shadow:var(--modal-elevation);font-family:var(--modal-font);background-color:var(--modal-bg-color);padding:0;--modal-max-inline-size: var(--modal-size-m);--modal-inline-size: 75%;max-inline-size:var(--modal-max-inline-size);inline-size:var(--modal-inline-size)}.c-modal[size=small]{--modal-max-inline-size: var(--modal-size-s)}@media (max-width: 768px){.c-modal[size=medium][isfullwidthbelowmid]{--modal-inline-size: 100%}}.c-modal[size=large]{--modal-max-inline-size: var(--modal-size-l);--modal-inline-size: 100%}@media (min-width: 768px){.c-modal[size=large]{--modal-inline-size: 75%}}.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)}
+`, G = ["h1", "h2", "h3", "h4", "h5", "h6"], J = ["small", "medium", "large"], _ = "pie-modal-close", v = "pie-modal-open";
+var Q = Object.defineProperty, Z = Object.getOwnPropertyDescriptor, s = (n, e, t, o) => {
+  for (var i = o > 1 ? void 0 : o ? Z(e, t) : e, d = n.length - 1, l; d >= 0; d--)
+    (l = n[d]) && (i = (o ? l(e, t, i) : l(i)) || i);
+  return o && i && Q(e, t, i), i;
 };
-const b = "pie-modal";
-class s extends R(x) {
+const w = "pie-modal";
+class a extends k(B) {
   constructor() {
-    super(), this.isOpen = !1, this.headingLevel = "h2", this.size = "medium", this._triggerCloseModal = () => {
-      this.isOpen = !1;
+    super(), this.headingLevel = "h2", this.isDismissible = !1, this.isFullWidthBelowMid = !1, this.isOpen = !1, this.size = "medium", this._handleDialogCancelEvent = (e) => {
+      this.isDismissible || e.preventDefault();
     }, this._handleDialogLightDismiss = (e) => {
-      var m;
-      const t = (m = this._dialog) == null ? void 0 : m.getBoundingClientRect(), {
-        top: n = 0,
-        bottom: o = 0,
+      var p;
+      if (!this.isDismissible)
+        return;
+      const t = (p = this._dialog) == null ? void 0 : p.getBoundingClientRect(), {
+        top: o = 0,
+        bottom: i = 0,
         left: d = 0,
-        right: a = 0
+        right: l = 0
       } = t || {};
-      if (n === 0 && o === 0 && d === 0 && a === 0)
+      if (o === 0 && i === 0 && d === 0 && l === 0)
         return;
-      (e.clientY < n || e.clientY > o || e.clientX < d || e.clientX > a) && (this.isOpen = !1);
-    }, this._dispatchModalCloseEvent = () => {
-      const e = new CustomEvent(w, {
-        bubbles: !0,
-        composed: !0
-      });
-      this.dispatchEvent(e);
-    }, this._dispatchModalOpenEvent = () => {
-      const e = new CustomEvent(O, {
+      (e.clientY < o || e.clientY > i || e.clientX < d || e.clientX > l) && (this.isOpen = !1);
+    }, this._dispatchModalCustomEvent = (e) => {
+      const t = new CustomEvent(e, {
         bubbles: !0,
         composed: !0
       });
-      this.dispatchEvent(e);
-    }, this.addEventListener("click", (e) => this._handleDialogLightDismiss(e));
+      this.dispatchEvent(t);
+    }, this.renderCloseButton = () => z`
+        <pie-icon-button
+            @click="${() => {
+      this.isOpen = !1;
+    }}"
+            variant="ghost-secondary"
+            class="c-modal-closeBtn"
+            data-test-id="modal-close-button"></pie-icon-button>`, this.addEventListener("click", (e) => this._handleDialogLightDismiss(e));
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener(v, this._handleModalOpened.bind(this)), document.addEventListener(_, this._handleModalClosed.bind(this));
+  }
+  disconnectedCallback() {
+    document.removeEventListener(v, this._handleModalOpened.bind(this)), document.removeEventListener(_, this._handleModalClosed.bind(this)), super.disconnectedCallback();
   }
   firstUpdated(e) {
-    this._handleModalOpenStateOnFirstRender(e);
+    var t, o;
+    (t = this._dialog) == null || t.addEventListener("cancel", (i) => this._handleDialogCancelEvent(i)), this._handleModalOpenStateOnFirstRender(e), (o = this._dialog) == null || o.addEventListener("close", () => {
+      this.isOpen = !1;
+    });
   }
   updated(e) {
     this._handleModalOpenStateChanged(e);
@@ -192,48 +204,51 @@ class s extends R(x) {
    * Opens the dialog element and disables page scrolling
    */
   _handleModalOpened() {
-    var e;
-    Y(this), (e = this._dialog) == null || e.showModal();
+    var e, t, o;
+    Y(this), !((e = this._dialog) != null && e.hasAttribute("open") || !((t = this._dialog) != null && t.isConnected)) && ((o = this._dialog) == null || o.showModal());
   }
   /**
    * Closes the dialog element and re-enables page scrolling
    */
   _handleModalClosed() {
     var e;
-    U(this), (e = this._dialog) == null || e.close();
-  }
-  connectedCallback() {
-    super.connectedCallback(), document.addEventListener(O, this._handleModalOpened.bind(this)), document.addEventListener(w, this._handleModalClosed.bind(this));
-  }
-  disconnectedCallback() {
-    document.removeEventListener(O, this._handleModalOpened.bind(this)), document.removeEventListener(w, this._handleModalClosed.bind(this)), super.disconnectedCallback();
+    U(this), (e = this._dialog) == null || e.close(), this._returnFocus();
   }
   // Handles the value of the isOpen property on first render of the component
   _handleModalOpenStateOnFirstRender(e) {
-    e.get("isOpen") === void 0 && this.isOpen && this._dispatchModalOpenEvent();
+    e.get("isOpen") === void 0 && this.isOpen && this._dispatchModalCustomEvent(v);
   }
   // 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());
+    t !== void 0 && (t ? this._dispatchModalCustomEvent(_) : this._dispatchModalCustomEvent(v));
+  }
+  /**
+   * Return focus to the specified element, providing the selector is valid
+   * and the chosen element can be found.
+   * Fails silently.
+   */
+  _returnFocus() {
+    var t, o;
+    const e = (t = this.returnFocusAfterCloseSelector) == null ? void 0 : t.trim();
+    e && ((o = document.querySelector(e)) == null || o.focus());
   }
   render() {
     const {
       heading: e,
       headingLevel: t = "h2",
-      size: n
-    } = this, o = E(t);
-    return L`
+      size: o,
+      isFullWidthBelowMid: i
+    } = this, d = E(t);
+    return z`
             <dialog
                 id="dialog"
-                size="${n}"
-                class="c-modal">
+                class="c-modal"
+                size="${o}"
+                ?isFullWidthBelowMid=${i}>
                 <header>
-                    <${o} class="c-modal-heading">${e}</${o}>
-                    <pie-icon-button
-                        @click="${this._triggerCloseModal}"
-                        variant="ghost-secondary"
-                        class="c-modal-closeBtn"></pie-icon-button>
+                    <${d} class="c-modal-heading">${e}</${d}>
+                     ${this.isDismissible ? this.renderCloseButton() : x}
                 </header>
                 <article class="c-modal-content">
                     <slot></slot>
@@ -242,28 +257,37 @@ class s extends R(x) {
         `;
   }
 }
-s.styles = C(X);
-h([
-  y({ type: Boolean })
-], s.prototype, "isOpen", 2);
-h([
-  y({ type: String }),
-  A(b)
-], s.prototype, "heading", 2);
-h([
-  y(),
-  S(b, W, "h2")
-], s.prototype, "headingLevel", 2);
-h([
-  y(),
-  S(b, G, "medium")
-], s.prototype, "size", 2);
-h([
-  T("dialog")
-], s.prototype, "_dialog", 2);
-customElements.define(b, s);
+a.styles = D(X);
+s([
+  u({ type: String }),
+  R(w)
+], a.prototype, "heading", 2);
+s([
+  u(),
+  C(w, G, "h2")
+], a.prototype, "headingLevel", 2);
+s([
+  u({ type: Boolean, reflect: !0 })
+], a.prototype, "isDismissible", 2);
+s([
+  u({ type: Boolean })
+], a.prototype, "isFullWidthBelowMid", 2);
+s([
+  u({ type: Boolean })
+], a.prototype, "isOpen", 2);
+s([
+  u()
+], a.prototype, "returnFocusAfterCloseSelector", 2);
+s([
+  u(),
+  C(w, J, "medium")
+], a.prototype, "size", 2);
+s([
+  L("dialog")
+], a.prototype, "_dialog", 2);
+customElements.define(w, a);
 export {
-  s as PieModal,
-  W as headingLevels,
-  G as sizes
+  a as PieModal,
+  G as headingLevels,
+  J as sizes
 };

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

@@ -13,6 +13,26 @@ export interface ModalProps {
      * When true, the modal will be open.
      */
     isOpen: boolean;
+    /**
+     * When set to `true`:
+     *  1. The close button within the modal will be visible.
+     *  2. The user can dismiss the modal via the ESCAPE key, clicking the backdrop
+     *     or via a close button.
+     *
+     * When set to `false`:
+     *  1. The close button within the modal will be hidden.
+     *  2. The user can NOT dismiss the modal via the ESCAPE key or clicking the backdrop.
+     *
+     */
+    isDismissible: boolean;
+    /**
+     * This controls whether a *medium-sized* modal will cover the full width of the page when below the mid breakpoint.
+     */
+    isFullWidthBelowMid: boolean;
+    /**
+     * The selector for the element that you would like focus to be returned to when the modal is closed, e.g., #skipToMain
+     */
+    returnFocusAfterCloseSelector?: string;
     /**
      * The size of the modal; this controls how wide it will appear on the page.
      */

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,eAAO,MAAM,aAAa,+CAAgD,CAAC;AAC3E,eAAO,MAAM,KAAK,uCAAwC,CAAC;AAE3D,MAAM,WAAW,UAAU;IACvB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,YAAY,EAAE,OAAO,aAAa,CAAC,MAAM,CAAC,CAAC;IAC3C;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,IAAI,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC;CAC9B;AAED;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,oBAAoB,CAAC;AAEtD;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,mBAAmB,CAAC"}
+{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,+CAAgD,CAAC;AAC3E,eAAO,MAAM,KAAK,uCAAwC,CAAC;AAE3D,MAAM,WAAW,UAAU;IACvB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,YAAY,EAAE,OAAO,aAAa,CAAC,MAAM,CAAC,CAAC;IAE3C;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;;;;;OAUG;IACH,aAAa,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,mBAAmB,EAAE,OAAO,CAAC;IAE7B;;OAEG;IACH,6BAA6B,CAAC,EAAE,MAAM,CAAC;IAEvC;;OAEG;IACH,IAAI,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC;CAC9B;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,4 @@
-import { LitElement } from 'lit';
+import { LitElement, TemplateResult } from 'lit';
 import type { DependentMap } from '@justeattakeaway/pie-webc-core';
 import { ModalProps, headingLevels, sizes } from './defs';
 export { type ModalProps, headingLevels, sizes };
@@ -8,12 +8,17 @@ declare const PieModal_base: (new (...args: any[]) => {
     isRTL: boolean;
 }) & typeof LitElement;
 export declare class PieModal extends PieModal_base {
-    isOpen: boolean;
     heading: string;
     headingLevel: ModalProps['headingLevel'];
+    isDismissible: boolean;
+    isFullWidthBelowMid: boolean;
+    isOpen: boolean;
+    returnFocusAfterCloseSelector?: string;
     size: ModalProps['size'];
     _dialog?: HTMLDialogElement;
     constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     firstUpdated(changedProperties: DependentMap<ModalProps>): void;
     updated(changedProperties: DependentMap<ModalProps>): void;
     /**
@@ -25,34 +30,45 @@ export declare class PieModal extends PieModal_base {
      */
     private _handleModalClosed;
     /**
-     * This is only to be used inside the component template as direct property
-     * reassignment is not allowed.
+     * Prevents the user from dismissing the dialog via the `cancel`
+     * event (ESC key) when `isDismissible` is set to false.
+     *
+     * @param {Event} event - The event object.
      */
-    private _triggerCloseModal;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
+    private _handleDialogCancelEvent;
     private _handleModalOpenStateOnFirstRender;
     private _handleModalOpenStateChanged;
-    render(): import("lit-html").TemplateResult;
     /**
-     * Dismisses the modal on backdrop click
-     *
+     * Return focus to the specified element, providing the selector is valid
+     * and the chosen element can be found.
+     * Fails silently.
+     */
+    private _returnFocus;
+    render(): TemplateResult;
+    /**
+     * Dismisses the modal on backdrop click if `isDismissible` is `true`.
+     * @param {MouseEvent} event - the click event targetting the modal/backdrop
      */
     private _handleDialogLightDismiss;
     /**
-     * Dispatch `ON_MODAL_CLOSE_EVENT` event.
-     * To be used whenever we close the modal.
+     * Note: We should aim to have a shareable event helper system to allow
+     * us to share this across components in-future.
+     *
+     * Dispatch a custom event.
+     *
+     * To be used whenever we have behavioural events we want to
+     * bubble up through the modal.
      *
-     * @event
+     * @param {string} eventType
      */
-    private _dispatchModalCloseEvent;
+    private _dispatchModalCustomEvent;
     /**
-     * Dispatch `ON_MODAL_OPEN_EVENT` event.
-     * To be used whenever we open the modal.
+     * Template for the close button element. Called within the
+     * main render function.
      *
-     * @event
+     * @private
      */
-    private _dispatchModalOpenEvent;
+    private renderCloseButton;
     static styles: import("lit").CSSResult;
 }
 declare global {