@justeattakeaway/pie-modal 0.20.0 → 0.22.0

package/dist/react.d.ts

@@ -1,9 +1,8 @@
 import type { CSSResult } from 'lit';
-import type { DependentMap } from '@justeattakeaway/pie-webc-core';
 import type { EventName } from '@lit-labs/react';
 import type { LitElement } from 'lit';
+import type { PropertyValues } from 'lit';
 import type { ReactWebComponent } from '@lit-labs/react';
-import { RTLComponentProps } from '@justeattakeaway/pie-webc-core';
 import type { TemplateResult } from 'lit';
 import { Variant } from '@justeattakeaway/pie-button/src/defs.ts';
 
@@ -32,7 +31,7 @@ export declare const headingLevels: readonly ["h1", "h2", "h3", "h4", "h5", "h6"
 
 export declare type ModalActionType = 'leading' | 'supporting';
 
-export declare type ModalProps = RTLComponentProps & {
+export declare type ModalProps = {
     /**
      * The ARIA labels used for the modal close and back buttons, as well as loading state.
      */
@@ -169,11 +168,10 @@ declare class PieModal_2 extends PieModal_base implements ModalProps {
     private _dialog?;
     private _backButtonClicked;
     static styles: CSSResult;
-    constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
-    firstUpdated(changedProperties: DependentMap<ModalProps>): void;
-    updated(changedProperties: DependentMap<ModalProps>): void;
+    firstUpdated(changedProperties: PropertyValues<this>): Promise<void>;
+    updated(changedProperties: PropertyValues<this>): void;
     /**
      * Opens the dialog element and disables page scrolling
      */
@@ -259,7 +257,6 @@ declare class PieModal_2 extends PieModal_base implements ModalProps {
 }
 
 declare const PieModal_base: (new (...args: any[]) => {
-    dir: "ltr" | "rtl" | "auto";
     isRTL: boolean;
 }) & typeof LitElement;
 

package/dist/react.js

@@ -1,10 +1,9 @@
 import * as E from "react";
 import { PieModal as C } from "./index.js";
-import { ON_MODAL_BACK_EVENT as b, ON_MODAL_CLOSE_EVENT as G, ON_MODAL_LEADING_ACTION_CLICK as R, ON_MODAL_OPEN_EVENT as x, ON_MODAL_SUPPORTING_ACTION_CLICK as K, headingLevels as V, positions as $, sizes as j } from "./index.js";
+import { ON_MODAL_BACK_EVENT as S, ON_MODAL_CLOSE_EVENT as b, ON_MODAL_LEADING_ACTION_CLICK as G, ON_MODAL_OPEN_EVENT as R, ON_MODAL_SUPPORTING_ACTION_CLICK as x, headingLevels as K, positions as V, sizes as $ } from "./index.js";
 import "lit";
 import "lit/static-html.js";
 import "lit/decorators.js";
-import "lit/decorators/property.js";
 /**
  * @license
  * Copyright 2018 Google LLC
@@ -59,7 +58,7 @@ function P(c = window.React, s, p, m, h) {
   const M = i.forwardRef((d, e) => l(v, { ...d, _$Gl: e }, d == null ? void 0 : d.children));
   return M.displayName = v.displayName, M;
 }
-const T = P({
+const w = P({
   displayName: "PieModal",
   elementClass: C,
   react: E,
@@ -78,13 +77,13 @@ const T = P({
   }
 });
 export {
-  b as ON_MODAL_BACK_EVENT,
-  G as ON_MODAL_CLOSE_EVENT,
-  R as ON_MODAL_LEADING_ACTION_CLICK,
-  x as ON_MODAL_OPEN_EVENT,
-  K as ON_MODAL_SUPPORTING_ACTION_CLICK,
-  T as PieModal,
-  V as headingLevels,
-  $ as positions,
-  j as sizes
+  S as ON_MODAL_BACK_EVENT,
+  b as ON_MODAL_CLOSE_EVENT,
+  G as ON_MODAL_LEADING_ACTION_CLICK,
+  R as ON_MODAL_OPEN_EVENT,
+  x as ON_MODAL_SUPPORTING_ACTION_CLICK,
+  w as PieModal,
+  K as headingLevels,
+  V as positions,
+  $ as sizes
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-modal",
-  "version": "0.20.0",
+  "version": "0.22.0",
   "description": "PIE design system modal built using web components",
   "type": "module",
   "main": "dist/index.js",
@@ -37,7 +37,7 @@
     "@types/body-scroll-lock": "3.1.0"
   },
   "peerDependencies": {
-    "body-scroll-lock": "4.0.0-beta.0"
+    "body-scroll-lock": "3.1.5"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/defs.ts

@@ -1,4 +1,3 @@
-import { RTLComponentProps } from '@justeattakeaway/pie-webc-core';
 import { Variant } from '@justeattakeaway/pie-button/src/defs.ts';
 
 export const headingLevels = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;
@@ -28,7 +27,7 @@ export type ActionProps = {
         ariaLabel?: string;
 };
 
-export type ModalProps = RTLComponentProps & {
+export type ModalProps = {
     /**
      * The ARIA labels used for the modal close and back buttons, as well as loading state.
      */

package/src/index.ts

@@ -1,18 +1,15 @@
 import {
-    LitElement, nothing, TemplateResult, unsafeCSS,
+    LitElement, nothing, TemplateResult, unsafeCSS, PropertyValues,
 } from 'lit';
 import { html, unsafeStatic } from 'lit/static-html.js';
 import { property, query } from 'lit/decorators.js';
 import {
     requiredProperty, RtlMixin, validPropertyValues,
 } from '@justeattakeaway/pie-webc-core';
-import type { DependentMap } from '@justeattakeaway/pie-webc-core';
-import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
 import '@justeattakeaway/pie-icons-webc/IconClose';
 import '@justeattakeaway/pie-icons-webc/IconChevronLeft';
 import '@justeattakeaway/pie-icons-webc/IconChevronRight';
-
-import dialogPolyfill from 'dialog-polyfill';
+import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
 
 import styles from './modal.scss?inline';
 import {
@@ -100,13 +97,9 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
     // Renders a `CSSResult` generated from SCSS by Vite
     static styles = unsafeCSS(styles);
 
-    constructor () {
-        super();
-        this.addEventListener('click', (event) => this._handleDialogLightDismiss(event));
-    }
-
     connectedCallback () : void {
         super.connectedCallback();
+        this.addEventListener('click', (event) => this._handleDialogLightDismiss(event));
         document.addEventListener(ON_MODAL_OPEN_EVENT, this._handleModalOpened.bind(this));
         document.addEventListener(ON_MODAL_CLOSE_EVENT, this._handleModalClosed.bind(this));
         document.addEventListener(ON_MODAL_BACK_EVENT, this._handleModalClosed.bind(this));
@@ -119,8 +112,11 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
         super.disconnectedCallback();
     }
 
-    firstUpdated (changedProperties: DependentMap<ModalProps>) : void {
+    async firstUpdated (changedProperties: PropertyValues<this>) : Promise<void> {
+        super.firstUpdated(changedProperties);
+
         if (this._dialog) {
+            const dialogPolyfill = await import('dialog-polyfill').then((module) => module.default);
             dialogPolyfill.registerDialog(this._dialog);
             this._dialog.addEventListener('cancel', (event) => this._handleDialogCancelEvent(event));
             this._dialog.addEventListener('close', () => {
@@ -131,7 +127,8 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
         this._handleModalOpenStateOnFirstRender(changedProperties);
     }
 
-    updated (changedProperties: DependentMap<ModalProps>) : void {
+    updated (changedProperties: PropertyValues<this>) : void {
+        super.updated(changedProperties);
         this._handleModalOpenStateChanged(changedProperties);
     }
 
@@ -139,7 +136,12 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
      * Opens the dialog element and disables page scrolling
      */
     private _handleModalOpened () : void {
-        disableBodyScroll(this);
+        const modalScrollContainer = this._dialog?.querySelector('.c-modal-scrollContainer');
+
+        if (modalScrollContainer) {
+            disableBodyScroll(modalScrollContainer);
+        }
+
         if (this._dialog?.hasAttribute('open') || !this._dialog?.isConnected) {
             return;
         }
@@ -151,7 +153,12 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
      * Closes the dialog element and re-enables page scrolling
      */
     private _handleModalClosed () : void {
-        enableBodyScroll(this);
+        const modalScrollContainer = this._dialog?.querySelector('.c-modal-scrollContainer');
+
+        if (modalScrollContainer) {
+            enableBodyScroll(modalScrollContainer);
+        }
+
         this._dialog?.close();
         this._returnFocus();
     }
@@ -169,7 +176,7 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
     };
 
     // Handles the value of the isOpen property on first render of the component
-    private _handleModalOpenStateOnFirstRender (changedProperties: DependentMap<ModalProps>) : void {
+    private _handleModalOpenStateOnFirstRender (changedProperties: PropertyValues<this>) : void {
         // This ensures if the modal is open on first render, the scroll lock and backdrop are applied
         const previousValue = changedProperties.get('isOpen');
 
@@ -179,7 +186,7 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
     }
 
     // Handles changes to the modal isOpen property by dispatching any appropriate events
-    private _handleModalOpenStateChanged (changedProperties: DependentMap<ModalProps>) : void {
+    private _handleModalOpenStateChanged (changedProperties: PropertyValues<this>) : void {
         const wasPreviouslyOpen = changedProperties.get('isOpen');
 
         if (wasPreviouslyOpen !== undefined) {
@@ -327,7 +334,7 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
      */
     private renderModalContentAndFooter (): TemplateResult {
         return html`
-        <article class="c-modal-content c-modal-content--scrollable">
+        <article class="c-modal-scrollContainer c-modal-content c-modal-content--scrollable">
             <div class="c-modal-contentInner">
                 <slot></slot>
             </div>