lightning-base-components 1.15.2-alpha → 1.15.3-alpha

package/src/lightning/overlayContainer/overlayContainer.js

@@ -1,17 +1,30 @@
 import { LightningElement, api, createElement } from 'lwc';
 import { parent, instanceName } from 'lightning/overlayUtils';
+import { guid } from 'lightning/utilsPrivate';
 import {
-    addOverlay,
-    LwcOverlayType,
+    addOverlayToSharedState,
+    removeOverlayFromSharedState,
+    normalizeOverlayDetails,
     subscribeOverlay,
+    LWC_STARTING_ZINDEX,
+    LWC_OVERLAY_TYPES,
+    LWC_ZINDEX_INCREMENT,
+    LWC_ZINDEX_OFFSET,
+    LWC_OVERLAY_ENGINE,
 } from 'lightning/overlayManager';
 
 export default class LightningOverlayContainer extends LightningElement {
-    // [{ element, parentElement, resolve }, ...]
+    // overlayContainer has this.stack, which holds the details, and actual
+    // DOM elements of local (this file) LWC overlays only, while
+    // overlayManager has this.state.stack, which only tracks details of
+    // local LWC overlays + Aura overlays
+    // Example of this.stack:
+    // [{ element, parentElement, resolve, id }, { ... }, { ... }]
     stack = [];
+    afterFirstRender = false;
 
     get root() {
-        return this.template.querySelector('div');
+        return this.template.querySelector('[data-overlay-container]');
     }
 
     /**
@@ -43,6 +56,7 @@ export default class LightningOverlayContainer extends LightningElement {
         });
 
         let promise = null;
+        const id = guid();
         if (overlayParent) {
             // Ex: extends LightningModal with wrapping LightningModalBase
             const parentElement = createElement(overlayParent[instanceName], {
@@ -51,41 +65,72 @@ export default class LightningOverlayContainer extends LightningElement {
             this.root.appendChild(parentElement);
             parentElement.defaultSlot.appendChild(element);
             promise = new Promise((resolve) => {
-                this.stack.push({ resolve, element, parentElement });
+                this.stack.push({ resolve, element, parentElement, id });
             });
         } else {
             this.root.appendChild(element);
             promise = new Promise((resolve) => {
-                this.stack.push({ resolve, element });
+                this.stack.push({ resolve, element, id });
             });
         }
-        // Aura Compatability
-        addOverlay(LwcOverlayType);
+        // Add new overlay details to shared overlay state
+        // contained in LightningOverlayManager
+        const overlayDetails = normalizeOverlayDetails(
+            LWC_OVERLAY_ENGINE,
+            overlayInstanceName,
+            { id }
+        );
+        addOverlayToSharedState(overlayDetails);
         return promise;
     }
 
     /**
-     * Remove the last added popover.
+     * Remove the matching overlay element
+     * @param {HTMLElement} element is the element that `extends LightningOverlay`
+     * @param {object|array|boolean|string|number} result the result value to resolve via promise
+     * @param {object} promise the promise to resolve
+     * example of parentElement: LightningModalBase, InteractiveDialogBase
      */
-    @api
-    pop(ele, result, promise) {
-        // element = `extends LightningOverlay`
-        // parentElement = Ex: LightningModalBase
-        const { element, parentElement, resolve } = this.stack.find(
-            ({ element: e }) => e === ele
-        );
-        // Resolve immediately
-        resolve(result);
-        // Animate out. Ex: LightningModal slide up animation
-        if (promise) {
-            promise.then(() => {
-                this.removeOverlay(element, parentElement);
-            });
-        } else {
-            this.removeOverlay(element, parentElement);
+    @api pop(element, result, promise) {
+        const stackLength = this.stack.length;
+        let stackElement,
+            stackIndexToRemove = -1;
+        if (stackLength > 0) {
+            // find element to remove, by looping through array in reverse order
+            // typically, the last item in the array will be removed
+            for (let index = stackLength; index--; index >= 0) {
+                stackElement = this.stack[index];
+                if (element === stackElement.element) {
+                    stackIndexToRemove = index;
+                    break;
+                }
+            }
+
+            const { element: elem, parentElement, resolve, id } = stackElement;
+            // Resolve immediately
+            resolve(result);
+            // Wait for animation out to complete.
+            // Ex: LightningModal slide up animation
+            // We need to wait until the promise.then()[PASS] or we
+            // remove the element too early, and animation gets clipped
+            if (promise) {
+                promise.then(() => {
+                    this.removeOverlay(
+                        elem,
+                        parentElement,
+                        stackIndexToRemove,
+                        id
+                    );
+                });
+            } else {
+                // No animation, so no need to wait
+                // before removal
+                // IE11 and prefers-reduced-motion
+                // take this path
+                this.removeOverlay(elem, parentElement, stackIndexToRemove, id);
+            }
         }
-        // Remove from stack
-        this.stack = this.stack.filter(({ element: e }) => e !== ele);
+        return null;
     }
 
     /**
@@ -93,8 +138,11 @@ export default class LightningOverlayContainer extends LightningElement {
      *
      * @param {LightningModal} element Required
      * @param {LightningElement} parentElement Optional
+     * @param {number} indexToRemove index of element to remove from this.state
      */
-    removeOverlay(element, parentElement) {
+    removeOverlay(element, parentElement, indexToRemove, id) {
+        const overlayType = element && element.tagName.toLowerCase();
+        // First, remove the parentElement and the element from the DOM
         if (parentElement && parentElement.remove) {
             parentElement.remove();
         } else if (parentElement) {
@@ -104,35 +152,155 @@ export default class LightningOverlayContainer extends LightningElement {
         } else {
             element.parentNode.removeChild(element);
         }
+        // Second, alter local LWC only overlay state (this),
+        // typically removing last item
+        if (indexToRemove > -1) {
+            this.stack.splice(indexToRemove, 1);
+        }
+        // Last, update overlayManager's shared overlay state
+        // specifically, this.state.stack
+        const overlayDetails = normalizeOverlayDetails(
+            LWC_OVERLAY_ENGINE,
+            overlayType,
+            { id }
+        );
+        removeOverlayFromSharedState(overlayDetails);
     }
 
     connectedCallback() {
-        // Notified anytime a overlay is added/removed
-        // zIndex assumes aura modals stack every other
-        subscribeOverlay((stack) => {
-            // LWC Overlays are always on odd zIndexes, aura even
-            let zIndex = 9001;
-            let modalCount = 0;
+        // Notified anytime an overlay is added/removed
+        // LWC overlays start on z-index 9000; always even z-index (9000, 9002)
+        // Aura overlays start on z-index 9001; always on odd z-ndex (9001, 9003)
+        subscribeOverlay(this.afterFirstRender, (state) => {
+            const {
+                mixedOverlayPresent,
+                auraHighestZindex,
+                lwcAllOverlayCount,
+                stack,
+            } = state;
+
+            // exit condition exists
+            // no need to proceed with any updates
+            if (lwcAllOverlayCount === 0) {
+                return;
+            }
+
+            // initialize z-index value to set,
+            // value changes if Aura overlays present
+            let lwcZIndexToSet = LWC_STARTING_ZINDEX;
+            // lwc count used to correctly access
+            // overlay containers elements
+            let lwcOverlayCount = 0;
 
-            stack.forEach((overlayType) => {
-                if (overlayType === LwcOverlayType) {
-                    const overlay = this.root.childNodes[modalCount];
-                    if (overlay) {
-                        overlay.style.zIndex = zIndex;
-                        // ToDo: Refactor for LightningPanel
-                        overlay.style.position = 'absolute';
+            // loop over stack, set correct z-index and position values
+            // depending on state of LWC-only or Aura+LWC overlay
+            stack.forEach((overlayObject, stackIndex) => {
+                const { overlayEngine, overlayType, overlayDetails } =
+                    overlayObject;
+                let overlayElem;
+                // set position: fixed or absolute based on type
+                const positionToSet =
+                    (LWC_OVERLAY_TYPES[overlayType] &&
+                        LWC_OVERLAY_TYPES[overlayType].pos) ||
+                    'fixed';
+                // Strategy: depending on order of appearance, overlayEngine, mixedOverlayPresent
+                // set interleaving z-index
+                // LWC stack starts at 9000 z-index, z-index increments by 2 (always even)
+                // Aura stack starts at 9001 z-index, z-index increments by 2 (always odd)
+
+                // LWC-only overlays present, default stack behavior
+                // overlays assigned: 9000, 9000, 9000, 9000
+                if (!mixedOverlayPresent) {
+                    overlayElem = this.root.childNodes[lwcOverlayCount];
+                    if (overlayElem) {
+                        overlayElem.style.zIndex = lwcZIndexToSet;
+                        overlayElem.style.position = positionToSet;
+                        // need to update shared state with z-index
+                        // in case Aura modal or overlay later occurs
+                        const updateDetailsObject = {
+                            zIndex: lwcZIndexToSet,
+                        };
+                        const updatedOverlayObject = normalizeOverlayDetails(
+                            overlayEngine,
+                            overlayType,
+                            Object.assign(
+                                {},
+                                overlayDetails,
+                                updateDetailsObject
+                            )
+                        );
+                        // set the z-index to the shared state overlay
+                        if (updatedOverlayObject !== null) {
+                            state.stack[stackIndex] = updatedOverlayObject;
+                        }
+                        lwcOverlayCount += 1;
                     }
-                    modalCount += 1;
+                    // Aura+LWC overlays present, alt stack behavior
+                    // LWC overlays assigned: 9000, 9002, 9004
+                    // Aura overlay stack assigns: 9001, 9003, 9005
+                    // The code that governs the Aura overlay behavior
+                    // is in the Aura repo. See panelManager2 and stackManager
                 } else {
-                    zIndex += 2;
+                    if (overlayEngine === LWC_OVERLAY_ENGINE) {
+                        overlayElem = this.root.childNodes[lwcOverlayCount];
+                        const existingZindexValueIsSet = !!(
+                            overlayDetails && overlayDetails.zIndex
+                        );
+                        const existingZindexValue =
+                            overlayDetails && overlayDetails.zIndex;
+                        // if LWC overlay z-index value not already set
+                        if (
+                            !existingZindexValueIsSet ||
+                            Number.isNaN(existingZindexValue)
+                        ) {
+                            // need to consider whether LWC overlay is
+                            // first in stack, and if not first, to offset by aura z-index
+                            lwcZIndexToSet =
+                                stackIndex !== 0
+                                    ? auraHighestZindex + LWC_ZINDEX_OFFSET
+                                    : lwcZIndexToSet;
+                            const updateDetailsObject = {
+                                zIndex: lwcZIndexToSet,
+                            };
+                            const updatedOverlayObj = normalizeOverlayDetails(
+                                overlayEngine,
+                                overlayType,
+                                Object.assign(
+                                    {},
+                                    overlayDetails,
+                                    updateDetailsObject
+                                )
+                            );
+                            // set the z-index to the shared state overlay
+                            if (updatedOverlayObj !== null) {
+                                state.stack[stackIndex] = updatedOverlayObj;
+                            }
+                        } else {
+                            lwcZIndexToSet =
+                                existingZindexValue >= LWC_STARTING_ZINDEX
+                                    ? existingZindexValue
+                                    : LWC_STARTING_ZINDEX;
+                        }
+
+                        if (overlayElem) {
+                            overlayElem.style.zIndex = lwcZIndexToSet;
+                            overlayElem.style.position = positionToSet;
+                            // increment for LWC local DOM ref
+                            lwcOverlayCount += 1;
+                        }
+                    } else {
+                        // Aura overlays use odd z-index values,
+                        // LWC overlays use even z-index values,
+                        // adding 2 prevents collisions
+                        // between the Aura and LWC overlay stack
+                        lwcZIndexToSet += LWC_ZINDEX_INCREMENT;
+                    }
                 }
             });
         });
+        // connectedCallback must be complete once
+        // before allowing subscribeOverlay to be called
+        // for the first time
+        this.afterFirstRender = true;
     }
-
-    // After this is fixed jest tests do not need clearOverlays()
-    // https://github.com/salesforce/lwc/issues/1102
-    // disconnectedCallback() {
-    //     clearOverlays();
-    // }
 }