@salesforcedevs/dx-components 1.3.66-alpha001-a → 1.3.66-modal-001

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.66-alpha001-a",
+    "version": "1.3.66-modal-001",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

package/src/modules/dx/cardTrial/cardTrial.html

@@ -2,7 +2,6 @@
     <dx-modal
         if:true={hasTwoButtons}
         open={_modalOpen}
-        ontogglemodal={toggleModal}
         onclosemodal={closeModal}
     >
         <dx-card-trial-expanded
@@ -24,6 +23,7 @@
             title={title}
             type-badge-value={modalTypeBadgeValue}
             type-badge-dark={modalTypeBadgeDark}
+            onclickclose={closeModal}
         ></dx-card-trial-expanded>
     </dx-modal>
     <div class="recommended-container" if:true={recommended}>
@@ -94,7 +94,7 @@
             <dx-button
                 class="button-two"
                 size="large"
-                onclick={toggleModal}
+                onclick={openModal}
                 variant="secondary"
                 font="sans"
                 icon-symbol={buttonTwoIcon}

package/src/modules/dx/cardTrial/cardTrial.ts

@@ -96,8 +96,8 @@ export default class CardTrial extends LightningElement {
         return cx("details", this.hasButtons && "details_top-margin");
     }
 
-    private toggleModal() {
-        this._modalOpen = !this._modalOpen;
+    private openModal() {
+        this._modalOpen = true;
     }
 
     private closeModal() {

package/src/modules/dx/cardTrialExpanded/cardTrialExpanded.html

@@ -5,7 +5,7 @@
                 class="button-close"
                 variant="secondary"
                 icon-symbol="close"
-                onclick={handleModalClose}
+                onclick={onClickClose}
             >
                 Close
             </dx-button>

package/src/modules/dx/cardTrialExpanded/cardTrialExpanded.ts

@@ -40,13 +40,6 @@ export default class CardTrial extends LightningElement {
     private _colTwoDetails!: string[];
     private stickyCloseObserver!: IntersectionObserver;
 
-    connectedCallback(): void {
-        this.template.addEventListener(
-            "keydown",
-            this.handleKeyDown.bind(this)
-        );
-    }
-
     renderedCallback(): void {
         this.observeStickyClose();
     }
@@ -71,26 +64,8 @@ export default class CardTrial extends LightningElement {
         }
     }
 
-    private handleKeyDown(event: KeyboardEvent): void {
-        if (event.key === "Escape") {
-            this.handleModalClose();
-        }
-    }
-
-    private handleModalToggle() {
-        this.dispatchEvent(
-            new CustomEvent("togglemodal", {
-                bubbles: true
-            })
-        );
-    }
-
-    private handleModalClose() {
-        this.dispatchEvent(
-            new CustomEvent("closemodal", {
-                bubbles: true
-            })
-        );
+    private onClickClose() {
+        this.dispatchEvent(new CustomEvent("clickclose"));
     }
 
     private handleSignUpClick(e: PointerEvent) {

package/src/modules/dx/modal/modal.css

@@ -1,40 +1,7 @@
-:host {
-    --dx-c-modal-drawer-z-index: 5000;
+.dx-modal-drawer_container {
+    display: none !important;
 }
 
-.modal-drawer_container {
-    display: none;
-}
-
-.modal-drawer_container.modal-drawer_active {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    display: grid;
-    justify-content: center;
-    align-items: center;
-    z-index: var(--dx-c-modal-drawer-z-index);
-    height: 100%;
-    width: 100%;
-    pointer-events: none;
-}
-
-.modal-drawer_overlay {
-    background-color: #195594;
-    bottom: 0;
-    height: 100%;
-    left: 0;
-    opacity: 0.62;
-    position: fixed;
-    right: 0;
-    top: 0;
-    width: 100%;
-    z-index: calc(var(--dx-c-modal-drawer-z-index) - 1);
-}
-
-@media screen and (max-width: 768px) {
-    .modal-drawer_container.modal-drawer_active {
-        pointer-events: all;
-    }
+.dx-modal-drawer_overlay {
+    display: none !important;
 }

package/src/modules/dx/modal/modal.html

@@ -1,10 +1,13 @@
 <template>
-    <div class={containerClass} tabindex="0" role="dialog">
-        <slot></slot>
-    </div>
     <div
-        if:true={open}
-        class="modal-drawer_overlay"
-        onclick={handleCloseModal}
-    ></div>
+        class={containerClass}
+        onclick={onClickModal}
+        tabindex="0"
+        role="dialog"
+    >
+        <div style="pointer-events: all">
+            <slot onslotchange={onSlotChange}></slot>
+        </div>
+    </div>
+    <div class={overlayClass} onclick={onClickModal}></div>
 </template>

package/src/modules/dx/modal/modal.ts

@@ -1,55 +1,98 @@
-import cx from "classnames";
 import { LightningElement, api } from "lwc";
 import { normalizeBoolean } from "dxUtils/normalizers";
+import { LightningSlotElement } from "typings/custom";
+
+const CONTAINER_CLASS = "dx-modal-drawer_container";
+const OVERLAY_CLASS = "dx-modal-drawer_overlay";
+
+const modalStyle =
+    "position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; justify-content: center; align-items: center; z-index: 5000; height: 100%; width: 100%; pointer-events: none;";
+const overlayStyle =
+    "background-color: #195594; bottom: 0; height: 100%; left: 0; opacity: 0.62; position: fixed; right: 0; top: 0; width: 100%; z-index: calc(5000 - 1);";
 
 export default class Modal extends LightningElement {
     private _open = false;
-
     @api get open() {
         return this._open;
     }
-
     set open(value) {
         this._open = normalizeBoolean(value);
+        if (this._open) {
+            this.openModal();
+        } else {
+            this.closeModal();
+        }
     }
 
+    private overlayClass = OVERLAY_CLASS;
+    private modal: HTMLElement | null = null;
+    private overlay: HTMLElement | null = null;
+    private root: HTMLElement | null = null;
+    private modalContent: HTMLElement | null = null;
+    private keydownListener: Event | null = null;
+
     get containerClass(): string {
-        return cx(
-            "modal-drawer_container",
-            this._open && "modal-drawer_active"
-        );
+        return CONTAINER_CLASS;
     }
 
-    renderedCallback(): void {
-        if (this._open) {
-            this.focusFirstElement();
+    private onSlotChange = (e: LightningSlotElement) => {
+        // @ts-ignore
+        this.modalContent = e.target.assignedElements()[0];
+        if (!this.modal && !this.overlay) {
+            this.appendModalToHTML();
         }
-    }
+    };
 
-    connectedCallback(): void {
-        this.template.addEventListener(
-            "keydown",
-            this.handleKeyDown.bind(this)
-        );
+    private connectedCallback(): void {
+        document.addEventListener("keydown", this.handleKeyDown.bind(this));
     }
 
-    focusFirstElement(): void {
-        this.template.querySelector("div")!.focus();
+    private disconnectedCallback(): void {
+        window.removeEventListener("keydown", this.handleKeyDown.bind(this));
+        this.modal?.remove();
+        this.overlay?.remove();
     }
 
-    handleKeyDown(event: KeyboardEvent): void {
+    private handleKeyDown(event: KeyboardEvent): void {
         if (event.key === "Escape") {
-            this.handleCloseModal();
+            this.closeModal();
         }
     }
 
-    handleToggleModal() {
-        this._open = !this._open;
-        this.dispatchEvent(new CustomEvent("togglemodal"));
+    private appendModalToHTML = () => {
+        // @ts-ignore
+        this.root = document.querySelector("html");
+        this.modal = this.template.querySelector(`.${CONTAINER_CLASS}`);
+        this.overlay = this.template.querySelector(`.${OVERLAY_CLASS}`);
+        if (this.overlay && this.modal && this.modalContent && this.root) {
+            this.modal.setAttribute("style", modalStyle);
+            this.overlay.setAttribute("style", overlayStyle);
+            this.modal.querySelector("div")?.appendChild(this.modalContent);
+            if (this.open) {
+                this.openModal();
+            }
+        }
+    };
+
+    private onClickModal(e) {
+        if (e?.target?.className === OVERLAY_CLASS) {
+            this.closeModal();
+        }
     }
 
-    handleCloseModal() {
-        this._open = false;
-        this.dispatchEvent(new CustomEvent("closemodal"));
+    private openModal() {
+        if (this.overlay && this.modal) {
+            this.root?.appendChild(this.modal);
+            this.root?.appendChild(this.overlay);
+            this.modal.querySelector("div")?.focus();
+        }
     }
+
+    private closeModal = () => {
+        if (this.modal && this.overlay) {
+            this.modal.remove();
+            this.overlay.remove();
+            this.dispatchEvent(new CustomEvent("closemodal"));
+        }
+    };
 }

package/src/modules/dx/sidebarSearch/sidebarSearch.ts

@@ -26,7 +26,7 @@ import {
 export const SESSION_KEY = "dx-sidebar-search-state";
 
 const DEFAULT_RESULT_COUNT = 20;
-const SEARCH_DEBOUNCE_DELAY = 1200;
+const SEARCH_DEBOUNCE_DELAY = 780;
 
 const UserRecentSearches = new RecentSearches();
 
@@ -403,7 +403,6 @@ export default class SidebarSearch extends LightningElement {
 
     private submitSearch = debounce((isSyncingSearchValue = false) => {
         if (this.searchBox) {
-            console.log('SEARCHIN')
             UserRecentSearches.add(this.value);
             this.updateRecentSearches();