lightning-base-components 1.16.6-alpha → 1.16.8-alpha

package/src/lightning/overlayContainer/overlayContainer.js

@@ -6,7 +6,10 @@ import {
     removeOverlayFromSharedState,
     normalizeOverlayDetails,
     subscribeOverlay,
-    LWC_STARTING_ZINDEX,
+    getStatCount,
+    TYPE_TOAST_CONTAINER,
+    LWC_OVERLAY_STARTING_ZINDEX,
+    LWC_TOAST_CONTAINER_STARTING_ZINDEX,
     LWC_OVERLAY_TYPES,
     LWC_ZINDEX_INCREMENT,
     LWC_ZINDEX_OFFSET,
@@ -42,6 +45,10 @@ export default class LightningOverlayContainer extends LightningElement {
         }
         const { [instanceName]: overlayInstanceName, [parent]: overlayParent } =
             scope;
+
+        if (!this.isOverlayAllowedToAdd(overlayInstanceName)) {
+            return Promise.reject();
+        }
         const element = createElement(overlayInstanceName, { is: scope });
 
         Object.entries(apis).forEach(([key, value]) => {
@@ -93,41 +100,54 @@ export default class LightningOverlayContainer extends LightningElement {
      */
     @api pop(element, result, promise) {
         const stackLength = this.stack.length;
-        let stackElement,
+        let stackElementToRemove,
             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;
+            // typically, the last item in the zero-based array will be removed
+            for (let index = stackLength - 1; index > -1; index--) {
+                if (this.stack[index]) {
+                    stackElementToRemove = this.stack[index];
+                    if (element === stackElementToRemove.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(() => {
+            if (stackElementToRemove) {
+                const {
+                    element: elem,
+                    parentElement,
+                    resolve,
+                    id,
+                } = stackElementToRemove;
+                // 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
                     );
-                });
-            } else {
-                // No animation, so no need to wait
-                // before removal
-                // IE11 and prefers-reduced-motion
-                // take this path
-                this.removeOverlay(elem, parentElement, stackIndexToRemove, id);
+                }
             }
         }
         return null;
@@ -170,7 +190,7 @@ export default class LightningOverlayContainer extends LightningElement {
     connectedCallback() {
         // 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)
+        // Aura overlays start on z-index 9001; always on odd z-index (9001, 9003)
         subscribeOverlay(this.afterFirstRender, (state) => {
             const {
                 mixedOverlayPresent,
@@ -187,11 +207,13 @@ export default class LightningOverlayContainer extends LightningElement {
 
             // initialize z-index value to set,
             // value changes if Aura overlays present
-            let lwcZIndexToSet = LWC_STARTING_ZINDEX;
+            let lwcZIndexToSet = LWC_OVERLAY_STARTING_ZINDEX;
             // lwc count used to correctly access
             // overlay containers elements
             let lwcOverlayCount = 0;
-
+            let lwcToastContainerZIndexToSet =
+                LWC_TOAST_CONTAINER_STARTING_ZINDEX;
+            const toastOverlayStack = [];
             // loop over stack, set correct z-index and position values
             // depending on state of LWC-only or Aura+LWC overlay
             stack.forEach((overlayObject, stackIndex) => {
@@ -203,22 +225,29 @@ export default class LightningOverlayContainer extends LightningElement {
                     (LWC_OVERLAY_TYPES[overlayType] &&
                         LWC_OVERLAY_TYPES[overlayType].pos) ||
                     'fixed';
+
+                const isToastContainer = overlayType === TYPE_TOAST_CONTAINER;
+
                 // 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 toast container overlays starts at 10000 z-index
 
                 // 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;
+                        const zIndexToSet = isToastContainer
+                            ? lwcToastContainerZIndexToSet
+                            : lwcZIndexToSet;
+                        overlayElem.style.zIndex = zIndexToSet;
                         overlayElem.style.position = positionToSet;
                         // need to update shared state with z-index
                         // in case Aura modal or overlay later occurs
                         const updateDetailsObject = {
-                            zIndex: lwcZIndexToSet,
+                            zIndex: zIndexToSet,
                         };
                         const updatedOverlayObject = normalizeOverlayDetails(
                             overlayEngine,
@@ -248,19 +277,25 @@ export default class LightningOverlayContainer extends LightningElement {
                         );
                         const existingZindexValue =
                             overlayDetails && overlayDetails.zIndex;
+                        let lwcZIndex;
                         // 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;
+                            if (isToastContainer) {
+                                lwcZIndex = lwcToastContainerZIndexToSet;
+                            } else {
+                                // 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;
+                                lwcZIndex = lwcZIndexToSet;
+                            }
                             const updateDetailsObject = {
-                                zIndex: lwcZIndexToSet,
+                                zIndex: lwcZIndex,
                             };
                             const updatedOverlayObj = normalizeOverlayDetails(
                                 overlayEngine,
@@ -276,18 +311,30 @@ export default class LightningOverlayContainer extends LightningElement {
                                 state.stack[stackIndex] = updatedOverlayObj;
                             }
                         } else {
-                            lwcZIndexToSet =
-                                existingZindexValue >= LWC_STARTING_ZINDEX
-                                    ? existingZindexValue
-                                    : LWC_STARTING_ZINDEX;
+                            if (isToastContainer) {
+                                lwcZIndex =
+                                    existingZindexValue >=
+                                    LWC_TOAST_CONTAINER_STARTING_ZINDEX
+                                        ? existingZindexValue
+                                        : LWC_TOAST_CONTAINER_STARTING_ZINDEX;
+                            } else {
+                                lwcZIndexToSet =
+                                    existingZindexValue >=
+                                    LWC_OVERLAY_STARTING_ZINDEX
+                                        ? existingZindexValue
+                                        : LWC_OVERLAY_STARTING_ZINDEX;
+                                lwcZIndex = lwcZIndexToSet;
+                            }
                         }
-
                         if (overlayElem) {
-                            overlayElem.style.zIndex = lwcZIndexToSet;
+                            overlayElem.style.zIndex = lwcZIndex;
                             overlayElem.style.position = positionToSet;
                             // increment for LWC local DOM ref
                             lwcOverlayCount += 1;
                         }
+                        if (isToastContainer) {
+                            toastOverlayStack.push({ overlayElem, stackIndex });
+                        }
                     } else {
                         // Aura overlays use odd z-index values,
                         // LWC overlays use even z-index values,
@@ -303,4 +350,21 @@ export default class LightningOverlayContainer extends LightningElement {
         // for the first time
         this.afterFirstRender = true;
     }
+
+    /**
+     * Return true if the overlay is allowed to be added to the overlay container
+     * @param {string} overlayType, name of the overlay type
+     */
+    isOverlayAllowedToAdd(overlayType) {
+        // first, filter out unknown overlay types
+        const isApprovedOverlayType = !!LWC_OVERLAY_TYPES[overlayType];
+        if (!isApprovedOverlayType) {
+            return false;
+        }
+        // determine if allowed to add overlay type
+        const { maxNum, statName } = LWC_OVERLAY_TYPES[overlayType];
+        const maxNumNotSet = typeof maxNum === 'undefined';
+        const count = (statName && getStatCount(statName)) || 0;
+        return maxNumNotSet || maxNum > count;
+    }
 }

package/src/lightning/overlayManager/overlayManager.js

@@ -20,20 +20,34 @@
  *   ex 1: 9000 (LWC), 9001 (Aura), 9002 (LWC)
  *   ex 2: 9001 (Aura), 9003 (Aura), 9004 (LWC), 9004 (LWC), 9005 (Aura)
  */
+const TYPE_MODAL = 'lightning-modal';
+const TYPE_ALERT = 'lightning-alert';
+const TYPE_CONFIRM = 'lightning-confirm';
+const TYPE_PROMPT = 'lightning-prompt';
+const TYPE_OVERLAY = 'lightning-overlay';
+export const TYPE_TOAST_CONTAINER = 'lightning-toast-container';
 
 // LWC overlay stack constants
 export const LWC_OVERLAY_ENGINE = 'lwc';
-export const LWC_STARTING_ZINDEX = 9000;
+export const LWC_OVERLAY_STARTING_ZINDEX = 9000;
+export const LWC_TOAST_CONTAINER_STARTING_ZINDEX = 10000;
 export const LWC_ZINDEX_INCREMENT = 2;
 export const LWC_ZINDEX_OFFSET = 1;
 // Known overlay types with their assigned position type
 // 'fixed' is default if not indicated
-export const LWC_OVERLAY_TYPES = {
-    'lightning-modal': { pos: 'absolute' },
-    'lightning-alert': { pos: 'absolute' },
-    'lightning-confirm': { pos: 'absolute' },
-    'lightning-prompt': { pos: 'absolute' },
-};
+export const LWC_OVERLAY_TYPES = Object.freeze({
+    [TYPE_OVERLAY]: { pos: 'absolute' },
+    [TYPE_MODAL]: { pos: 'absolute' },
+    [TYPE_ALERT]: { pos: 'absolute' },
+    [TYPE_CONFIRM]: { pos: 'absolute' },
+    [TYPE_PROMPT]: { pos: 'absolute' },
+    [TYPE_TOAST_CONTAINER]: {
+        pos: 'fixed',
+        maxNum: 1,
+        statName: 'lwcToastContainerCount',
+    },
+});
+
 // Aura overlay stack constants
 export const AURA_OVERLAY_ENGINE = 'aura';
 export const AURA_STARTING_ZINDEX = 9001;
@@ -59,6 +73,7 @@ const state = {
     auraAllOverlayCount: 0,
     // lwc stack details
     lwcModalCount: 0,
+    lwcToastContainerCount: 0,
     lwcOverlayCount: 0,
     lwcAllOverlayCount: 0,
 };
@@ -151,6 +166,7 @@ function getOverlayStackStats() {
         lwcOverlays: 0,
         lwcAllOverlays: 0,
         lwcModals: 0,
+        lwcToastContainers: 0,
         // init aura stats
         hasAura: false,
         auraModals: 0,
@@ -161,7 +177,6 @@ function getOverlayStackStats() {
     };
     // init one time values
     const stackLength = state.stack.length;
-
     state.stack.forEach(
         ({ overlayEngine, overlayType, overlayDetails }, stackIndex) => {
             const isLwc = overlayEngine === LWC_OVERLAY_ENGINE;
@@ -171,10 +186,15 @@ function getOverlayStackStats() {
                 if (!stats.hasLwc) {
                     stats.hasLwc = true;
                 }
-                if (overlayType) {
-                    const isModalType = !!LWC_OVERLAY_TYPES[overlayType];
+                const typeExists = !!LWC_OVERLAY_TYPES[overlayType];
+                if (overlayType && typeExists) {
+                    const isModalType = overlayType === TYPE_MODAL;
+                    const isToastContainerType =
+                        overlayType === TYPE_TOAST_CONTAINER;
                     if (isModalType) {
                         stats.lwcModals++;
+                    } else if (isToastContainerType) {
+                        stats.lwcToastContainers++;
                     } else {
                         stats.lwcOverlays++;
                     }
@@ -244,7 +264,8 @@ function updateStateWithStackStats(stats) {
     // update LWC state with collected stats
     if (stats.hasLwc) {
         // lwc settings
-        state.lwcModalCount = stats.lwcModalCount;
+        state.lwcModalCount = stats.lwcModals;
+        state.lwcToastContainerCount = stats.lwcToastContainers;
         state.lwcOverlayCount = stats.lwcOverlays;
         state.lwcAllOverlayCount = stats.lwcAllOverlays;
         // or reset LWC state
@@ -307,7 +328,6 @@ export function addOverlayToSharedState(overlayObject) {
         return;
     }
     overlayDetails = cleanOverlayDetails(overlayDetails);
-
     // after checks, add overlay object
     state.stack.push({ overlayEngine, overlayType, overlayDetails });
     // first update shared overlay state
@@ -342,15 +362,17 @@ export function removeOverlayFromSharedState(overlayObject) {
     // Use overlay ID to find correct overlay and remove
     // IDs may be GUID (LBC overlays) or Aura globalId (Aura overlays)
     if (overlayId) {
-        // loop from end to the front of the stack
+        // loop from end to the front of the zero-based array (stack)
         // determine which item to remove
-        for (let index = stackLength; index--; index >= 0) {
-            const {
-                overlayDetails: { id: oId },
-            } = state.stack[index];
-            if (oId && oId === overlayId) {
-                indexToRemove = index;
-                break;
+        for (let index = stackLength - 1; index > -1; index--) {
+            if (state.stack[index]) {
+                const {
+                    overlayDetails: { id: oId },
+                } = state.stack[index];
+                if (oId && oId === overlayId) {
+                    indexToRemove = index;
+                    break;
+                }
             }
         }
     }
@@ -382,11 +404,20 @@ export function subscribeOverlay(shouldCall, callback) {
     }
 }
 
+/**
+ * return the count of the specific stat stored in "state"
+ * @param {string} statName - name of the stat
+ */
+export function getStatCount(statName) {
+    return !state || !state[statName] ? null : state[statName];
+}
+
 /**
  * initLwcOverlayState resets only LWC overlay state values
  */
 function initLwcOverlayState() {
     state.lwcModalCount = 0;
+    state.lwcToastContainerCount = 0;
     state.lwcOverlayCount = 0;
     state.lwcAllOverlayCount = 0;
 }

package/src/lightning/overlayUtils/overlayUtils.js

@@ -15,3 +15,17 @@ export const instanceName = Symbol('instanceName');
  * Secure access to events
  */
 export const secure = Symbol('secure event');
+
+/**
+ * optional static properties
+ * Ex: static [properties] = <array of public attribute names>
+ * This will be used to assign value to restricted set of attributes
+ */
+export const properties = Symbol('properties');
+
+/**
+ * optional static requiredProperties
+ * Ex: static [properties] = <array of public required attribute names>
+ * This will be used verifying if required attributes have value assigned.
+ */
+export const requiredProperties = Symbol('requiredProperties');

package/src/lightning/positionLibrary/direction.js

@@ -119,14 +119,14 @@ export function checkFlipPossibility(parent, element, target, leftAsBoundary) {
     // otherwise, window top is 0. no change to original logic.
     // When used in console app, console's viewport is not window, but a scrollable div, then popup can be cut off easily.
     // scrollable parent => if any parent element set overflow-y:auto, then inner element won't popup, unless use position:fix.
-    const aboveSpace = referenceElemRect.top - viewPort.top - height;
-    const belowSpace = viewPort.height - referenceElemRect.bottom - height;
+    let aboveSpace = referenceElemRect.top - viewPort.top - height;
+    let belowSpace = viewPort.height - referenceElemRect.bottom - height;
 
     // If there is scrollable parent, always check aboveSpace > 0
-    const hasSpaceAbove =
+    let hasSpaceAbove =
         aboveSpace >= 0 ||
         (parent == null && belowSpace < 0 && aboveSpace > belowSpace);
-    const hasSpaceBelow =
+    let hasSpaceBelow =
         belowSpace >= 0 || (aboveSpace < 0 && belowSpace > aboveSpace);
 
     // Assuming left alignment is specified this tests if:
@@ -177,6 +177,28 @@ export function checkFlipPossibility(parent, element, target, leftAsBoundary) {
                 (leftAsBoundary ? referenceElemRect.left : 0);
     }
 
+    // If there is no space above and below, recalculate space based on window
+    // when there is still no space above and below based on window then select the maximum available space
+    if (!hasSpaceAbove && !hasSpaceBelow && parent) {
+        belowSpace =
+            viewPort.height -
+            (referenceElemRect.bottom - viewPort.top) -
+            height;
+        if (belowSpace < 0) {
+            if (parent.scrollTop > 0) {
+                aboveSpace =
+                    referenceElemRect.top -
+                    viewPort.top +
+                    parent.scrollTop -
+                    height;
+            }
+        }
+        hasSpaceAbove =
+            aboveSpace >= 0 || (belowSpace < 0 && aboveSpace > belowSpace);
+        hasSpaceBelow =
+            belowSpace >= 0 || (aboveSpace < 0 && belowSpace > aboveSpace);
+    }
+
     // Assuming center alignment, does the viewport have space to fit half of the element around
     // the target?
     const centerOverflow = {

package/src/lightning/primitiveCellEditableButton/primitiveCellEditableButton.html

@@ -7,6 +7,6 @@
         </lightning-primitive-icon>
         <span class="slds-assistive-text">
         {assistiveText}
-    </span>
+        </span>
     </button>
 </template>