lightning-base-components 1.21.3-alpha → 1.21.4-alpha

package/src/lightning/modalBase/modalBase.js

@@ -2,20 +2,19 @@ import { api } from 'lwc';
 import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet } from 'lightning/utils';
 import {
-    makeEverythingExceptElementInert,
-    normalizeString,
-    synchronizeAttrs,
-    restoreInertness,
-    hasAnimation,
     ARIA,
+    hasAnimation,
     isAriaDescriptionSupported,
     isCSR,
+    makeEverythingExceptElementInert,
+    normalizeString,
+    restoreInertness,
+    synchronizeAttrs,
 } from 'lightning/utilsPrivate';
 import { instanceName, secure } from 'lightning/overlayUtils';
 import {
     getElementWithFocus,
     returnFocusToElement,
-    findAllTabbableElements,
 } from 'lightning/focusUtils';
 import closeButtonAltText from '@salesforce/label/LightningModalBase.cancelandclose';
 import disableCloseBtnMessage from '@salesforce/label/LightningModalBase.waitstate';
@@ -27,7 +26,6 @@ const SIZE_SMALL = 'small';
 const SIZE_MEDIUM = 'medium';
 const SIZE_LARGE = 'large';
 const SIZE_FULL = 'full';
-const OVERLAY_CONTAINER = 'lightning-overlay-container';
 const MODAL_BASE = 'lightning-modal-base';
 
 export default class LightningModalBase extends LightningShadowBaseClass {
@@ -47,6 +45,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
     isSmallScreenSize = null;
 
     // modalHeader, child
+    isHeadlessModalVariant = false;
     headerRegistered = false;
     headerHeight = 0;
     headerDefaultSlotIsPopulated = false;
@@ -163,48 +162,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         return modal.disableClose;
     }
 
-    /**
-     * Toggle on and off disable close button feature
-     * typically used very briefly when devs want to save form data to backend
-     * and do not want the form to be closed before the save has
-     * completed successfully
-     * toggleDisableCloseButton sets local state to
-     * (a) toggle display an aria-live message
-     * (b) toggle set disabled on the <lightning-button-icon>
-     * (c) toggle set aria-busy value on
-     * elsewhere in modalBase and modal, ESC key is also disabled, and
-     * calls to this.close() are prevented
-     */
-    toggleDisableCloseButton() {
-        // this.disableCloseButton is local modalBase state
-        // this.disableClose is modal.js @api state
-        // we track both in order to handle transition correctly
-        const isSwitchingToDisabled =
-            !this.disableCloseButton && this.disableClose;
-        /* Future enhancement possibility - trigger setInterval to remove and
-           again add back 'Processing' text, as this will indicate to the screen
-           reader user that the interface continues to be busy
-        */
-        const disableCloseButtonMessage = isSwitchingToDisabled
-            ? this.disableCloseBtnMessage
-            : '';
-        if (isSwitchingToDisabled) {
-            // Should disable close button
-            this.ariaLiveMessage = disableCloseButtonMessage;
-            this.showAriaLiveMessage = true;
-            synchronizeAttrs(this.modalWrapper, { [`${ARIA.BUSY}`]: true });
-            synchronizeAttrs(this.modalCloseButton, { disabled: 'disabled' });
-            this.disableCloseButton = true;
-        } else {
-            // Should enable close button
-            this.ariaLiveMessage = disableCloseBtnMessage;
-            this.showAriaLiveMessage = false;
-            synchronizeAttrs(this.modalWrapper, { [`${ARIA.BUSY}`]: null });
-            synchronizeAttrs(this.modalCloseButton, { disabled: null });
-            this.disableCloseButton = false;
-        }
-    }
-
     /**
      * Public method to get the modal slot element
      * @type {(HTMLElement|null)} The modal slot, currently a div elem
@@ -354,35 +311,99 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         return classes.toString();
     }
 
+    get isDescriptionSet() {
+        const { description } = this;
+        // check for being set, as well as not just a description with spaces
+        // avoiding setting aria-describedby on section pointing to
+        // an empty SPAN element
+        return !!description?.trim().length;
+    }
+
     /**
-     * Compute the correct lightning-button-icon CSS class to use
-     * for the size="full" behaviors, based upon the screen size
-     * threshold.  Two classes are added for full screen behavior
-     * to handle edge cases where customers change background of the
-     * modal header so the close button maintains visibility for a11y
+     * Determines if aria-describedby should be set, and the span tag shown
+     * occurs only when aria-description is not supported.
+     * ex: when description api is set to '' or '     ',
+     * we don't want to show the span or set aria-describedby
      * @private
      */
-    // slds-button slds-button_icon slds-modal__close slds-button_icon-inverse
-    get computedCloseButtonCssClass() {
-        let classes = classSet('slds-modal__close');
-        const fullScreenActive =
-            this.isSmallScreenSize && this.size === SIZE_FULL;
-        classes.add({
-            'slds-modal_full-close-button': fullScreenActive,
-        });
-        return classes.toString();
+    get showAriaDescribedBy() {
+        return !isAriaDescriptionSupported() && this.isDescriptionSet;
     }
 
     /**
-     * Compute the correct lightning-button-icon variant to use
-     * for the size="full" behaviors, based upon the screen size
-     * threshold.  Important to maintain existing close button behavior
-     * when size 'small', 'medium' and 'large' close button variant
-     * when 'isSmallScreenSize = true' for a11y purposes
+     * When window is resizing, need to debounce callback
+     * Track internal variable _resizing
+     * @returns {Boolean}
      * @private
      */
-    get computedCloseButtonVariant() {
-        return this.shouldModalBeFullScreen() ? 'bare' : 'bare-inverse';
+    get modalResizing() {
+        if (!this._resizing) {
+            this._resizing = this.scheduleWindowResizeEvent.bind(this);
+        }
+        return this._resizing;
+    }
+
+    /**
+     * Toggle on and off disable close button feature
+     * typically used very briefly when devs want to save form data to backend
+     * and do not want the form to be closed before the save has
+     * completed successfully
+     * toggleDisableCloseButton sets local state to
+     * (a) toggle display an aria-live message
+     * (b) toggle set disabled on the <lightning-button-icon>
+     * (c) toggle set aria-busy value on
+     * elsewhere in modalBase and modal, ESC key is also disabled, and
+     * calls to this.close() are prevented
+     */
+    toggleDisableCloseButton() {
+        // this.disableCloseButton is local modalBase state
+        // this.disableClose is modal.js @api state
+        // we track both in order to handle transition correctly
+        const isSwitchingToDisabled =
+            !this.disableCloseButton && this.disableClose;
+        /* Future enhancement possibility - trigger setInterval to remove and
+           again add back 'Processing' text, as this will indicate to the screen
+           reader user that the interface continues to be busy
+        */
+        const disableCloseButtonMessage = isSwitchingToDisabled
+            ? this.disableCloseBtnMessage
+            : '';
+
+        const closeButtonDisable = isSwitchingToDisabled ? 'disabled' : null;
+
+        // Finally, set accessibility attributes for modal-base
+        if (isSwitchingToDisabled) {
+            // Should disable close button
+            this.ariaLiveMessage = disableCloseButtonMessage;
+            this.showAriaLiveMessage = true;
+            synchronizeAttrs(this.modalWrapper, { [`${ARIA.BUSY}`]: true });
+            this.disableCloseButton = true;
+        } else {
+            // Should enable close button
+            this.ariaLiveMessage = disableCloseButtonMessage;
+            this.showAriaLiveMessage = false;
+            synchronizeAttrs(this.modalWrapper, { [`${ARIA.BUSY}`]: null });
+            this.disableCloseButton = false;
+        }
+
+        // Modal with Header variant has close button icon on lightning-modal-header child component
+        // where-as Headless Modal variant has close button icon on modal-base,
+        if (!this.isHeadlessModalVariant) {
+            // dispatch secondary event to disable close button icon present on lightning-modal-header
+            this.headerTitleRef.dispatchEvent(
+                new CustomEvent('privatemodalheaderdisableclose', {
+                    detail: {
+                        disableClose: isSwitchingToDisabled,
+                        [secure]: true,
+                    },
+                    bubbles: true,
+                })
+            );
+        } else {
+            synchronizeAttrs(this.modalCloseButton, {
+                disabled: closeButtonDisable,
+            });
+        }
     }
 
     /**
@@ -447,50 +468,10 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * </ul>
      * @param e - Event
      */
-    handleFocusinEvents(e) {
+    handleFocusinEvents() {
         // eslint-disable-next-line @lwc/lwc/no-async-operation
         requestAnimationFrame(() => {
-            e.preventDefault();
-            e.stopPropagation();
-
-            const focusinEvtTarget = e.target;
-            const isFocusTargetAModal =
-                focusinEvtTarget.matches(OVERLAY_CONTAINER);
-            const wasANewModalStackedOnTopOfAnExistingModal =
-                this.isStackedModal() &&
-                this.savedInertElements.length >
-                    this.previousSavedInertElementsSize;
-
-            if (wasANewModalStackedOnTopOfAnExistingModal) {
-                // update private tracker in anticipation of more stacked modals
-                this.previousSavedInertElementsSize =
-                    this.savedInertElements.length;
-            }
-
-            //  1.  If focus is on a Modal, then track the last focussed element
-            if (isFocusTargetAModal) {
-                // Perf optimization: check if allTabbableElements needs updating
-                if (
-                    !this.allTabbableElements ||
-                    wasANewModalStackedOnTopOfAnExistingModal
-                ) {
-                    this.allTabbableElements =
-                        findAllTabbableElements(focusinEvtTarget);
-                }
-                const elementWithFocus = getElementWithFocus();
-                const isModalTitleText =
-                    elementWithFocus.hasAttribute('data-label');
-                if (
-                    isModalTitleText ||
-                    this.allTabbableElements.indexOf(elementWithFocus) !== -1
-                ) {
-                    // element is part of the Modal with current focus on it, track it
-                    this.lastFocussedElementOnModal = elementWithFocus;
-                }
-            } //  2.  If focus moved out of Modal, return focus to last element that was focussed.
-            else {
-                returnFocusToElement(this.lastFocussedElementOnModal);
-            }
+            // W-14998924 note: code revert to unblock 250R downstream
         });
     }
 
@@ -541,25 +522,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         }
     };
 
-    get isDescriptionSet() {
-        const { description } = this;
-        // check for being set, as well as not just a description with spaces
-        // avoiding setting aria-describedby on section pointing to
-        // an empty SPAN element
-        return description && description.trim().length > 0;
-    }
-
-    /**
-     * Determines if aria-describedby should be set, and the span tag shown
-     * occurs only when aria-description is not supported.
-     * ex: when description api is set to '' or '     ',
-     * we don't want to show the span or set aria-describedby
-     * @private
-     */
-    get showAriaDescribedBy() {
-        return !isAriaDescriptionSupported() && this.isDescriptionSet;
-    }
-
     /**
      * Set either 'aria-describedby' or 'aria-description' value for accessibility
      * based on the presence of 'description' api value
@@ -648,6 +610,19 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         console.error(errorMsg);
     }
 
+    /**
+     * Handle close button click triggered from lightning-modal-header
+     * @param e
+     */
+    handleModalHeaderCloseClick(e) {
+        if (!e?.detail?.[secure]) {
+            console.error('Invalid access to privatemodalheaderclose event');
+            return;
+        }
+        e.stopPropagation();
+        this.handleCloseClick();
+    }
+
     /**
      * Handle the close button click, or via ESC key
      * @private
@@ -659,8 +634,11 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         }
     }
 
-    // Handle privateclose event firing is prevented from occurring
-    // when this.disableClose set true in modal.js
+    /**
+     * Handle privateclose event firing is prevented from occurring
+     * when this.disableClose set true in modal.js
+     * @param e
+     */
     handlePrivateClose(e) {
         if (!(e.detail && e.detail[secure])) {
             console.error('Invalid access to privateclose event');
@@ -701,6 +679,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
             console.error('Invalid access to privatedisableclose event');
             return;
         }
+
         this.toggleDisableCloseButton();
     }
 
@@ -871,6 +850,20 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         if (!this.focusinEventBound) {
             this.addFocusinEventListener();
         }
+
+        this.updateHeadlessModalVariantState();
+    }
+
+    /**
+     * In case of a headless modal variant, the close button icon lives inside modalBase,
+     * while in other variants, the close icon lives inside lightning-modal-header
+     *
+     * This helper method is to accurately update the state of 'isHeadlessModalVariant' flag
+     * in order to selectively render the close <lightning-button-icon> in modalBase.html
+     */
+    updateHeadlessModalVariantState() {
+        this.isHeadlessModalVariant =
+            this.bodyRegistered && !this.headerRegistered;
     }
 
     /**
@@ -948,6 +941,8 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         if (this.bodyRegistered) {
             this.updateModalBodyHeight();
         }
+
+        this.updateHeadlessModalVariantState();
     }
 
     /**
@@ -977,6 +972,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         this.headerLabelId = null;
         this.headerLabelIsPopulated = null;
         this.headerTitleRef = null;
+        this.updateHeadlessModalVariantState();
     }
 
     /**
@@ -1019,6 +1015,8 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         if (this.bodyRegistered) {
             this.updateModalBodyHeight();
         }
+
+        this.updateHeadlessModalVariantState();
     }
 
     /**
@@ -1045,19 +1043,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         this.footerDefaultSlotIsPopulated = false;
     }
 
-    /**
-     * When window is resizing, need to debounce callback
-     * Track internal variable _resizing
-     * @returns {Boolean}
-     * @private
-     */
-    get modalResizing() {
-        if (!this._resizing) {
-            this._resizing = this.scheduleWindowResizeEvent.bind(this);
-        }
-        return this._resizing;
-    }
-
     /**
      * Test to determine whether modal should display full screen behavior
      * @returns {Boolean}

package/src/lightning/modalBody/modalBody.css

@@ -1 +1,7 @@
 @import './modalBody.lbc.native.css';
+
+/* Styles required for Multi-Column Sorting Modal in datatable */
+:host(.modal_headerless)  .slds-modal__content_headless {
+    border-top-right-radius: unset;
+    border-top-left-radius: unset;
+}

package/src/lightning/modalHeader/modalHeader.html

@@ -1,13 +1,25 @@
- <template>
-    <div class="slds-modal__header" part="modal-header">
+<template>
+    <div class="slds-modal__header slds-text-align_left" part="modal-header"
+         onprivatemodalheaderdisableclose={handlePrivateModalHeaderDisableClose}
+    >
         <template if:true={label}>
             <h1
-                id="modal-label"
                 class="slds-modal__title slds-hyphenate"
-                tabindex="-1"
                 data-label
+                id="modal-label"
+                tabindex="-1"
             >{label}</h1>
         </template>
+        <lightning-button-icon
+            alternative-text={headerCloseButtonAltText}
+            class="slds-modal__close"
+            data-header-close-button
+            disabled={disableCloseButton}
+            icon-name="utility:close"
+            onclick={handleModalHeaderClose}
+            size="large"
+            variant="bare"
+        ></lightning-button-icon>
         <slot
             data-default-slot
             onslotchange={handleDefaultSlotChange}

package/src/lightning/modalHeader/modalHeader.js

@@ -1,12 +1,15 @@
 import { api } from 'lwc';
 import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
-import { getRealDOMId } from 'lightning/utilsPrivate';
+import { getRealDOMId, synchronizeAttrs } from 'lightning/utilsPrivate';
+import { secure } from 'lightning/overlayUtils';
+import closeButtonAltText from '@salesforce/label/LightningModalBase.cancelandclose';
 
 // selectors
 const modalHeaderSelector = '.slds-modal__header';
 const labelSelector = '[data-label]';
 const slotWrapperSelector = '[data-slot-wrapper]';
 const defaultSlotSelector = '[data-default-slot]';
+const headerCloseButtonSelector = '[data-header-close-button]';
 
 /**
  * Creates a header to display the heading and tagline at the top of a modal.
@@ -16,25 +19,13 @@ export default class LightningModalHeader extends LightningShadowBaseClass {
     initialRender = true;
     initialSlotRender = true;
     unregisterCallback = null;
+    headerCloseButtonAltText = closeButtonAltText;
 
     /**
      * Text to display as the heading at the top of the modal
      */
     @api label = '';
 
-    /**
-     * Handle the default slot change event
-     * Always register with parent every slot change
-     * @private
-     */
-    handleDefaultSlotChange() {
-        // Set this once so that parent can know slot has rendered
-        if (this.initialSlotRender) {
-            this.initialSlotRender = false;
-        }
-        this.registerWithParent();
-    }
-
     /**
      * Get the height of outer wrapper of modal header
      * @returns {number} represents a height value in pixels
@@ -125,6 +116,62 @@ export default class LightningModalHeader extends LightningShadowBaseClass {
         return (this.label && this.label.trim().length > 0) || false;
     }
 
+    /**
+     * Get the lightning-button-icon (close button element)
+     * @returns {(HTMLElement|null)}
+     * @private
+     */
+    get headerCloseButton() {
+        return this.template.querySelector(headerCloseButtonSelector);
+    }
+
+    /**
+     * Handle the default slot change event
+     * Always register with parent every slot change
+     * @private
+     */
+    handleDefaultSlotChange() {
+        // Set this once so that parent can know slot has rendered
+        if (this.initialSlotRender) {
+            this.initialSlotRender = false;
+        }
+        this.registerWithParent();
+    }
+
+    /**
+     * Toggle set disabled on the <lightning-button-icon> present inside lightning-modal-header
+     * @param e
+     */
+    handlePrivateModalHeaderDisableClose(e) {
+        if (!e?.detail?.[secure]) {
+            console.error(
+                'Invalid access to privatemodalheaderdisableclose event'
+            );
+            return;
+        }
+        e.stopPropagation();
+
+        const closeButtonDisable = e.detail?.disableClose ? 'disabled' : null;
+
+        synchronizeAttrs(this.headerCloseButton, {
+            disabled: closeButtonDisable,
+        });
+    }
+
+    /**
+     * Handle close click on close <lightning-button-icon>
+     */
+    handleModalHeaderClose() {
+        const closeEvt = new CustomEvent('privatemodalheaderclose', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                [secure]: true,
+            },
+        });
+        this.dispatchEvent(closeEvt);
+    }
+
     /**
      * Register modalHeader with modal parent, including callbacks to
      * unregister the modal header

package/src/lightning/pill/link.html

@@ -33,6 +33,7 @@
         <lightning-button-icon
             icon-name="utility:close"
             class="slds-pill__remove"
+            exportparts="button-icon, icon"
             variant="bare"
             onclick={handleRemove}
             title={computedPillRemoveLabel}

package/src/lightning/pill/plain.html

@@ -9,6 +9,7 @@
         <lightning-button-icon
             icon-name="utility:close"
             class="slds-pill__remove"
+            exportparts="button-icon, icon"
             variant="bare"
             onclick={handleRemoveClick}
             title={computedPillRemoveLabel}

package/src/lightning/pill/plainLink.html

@@ -18,6 +18,7 @@
         <lightning-button-icon
             icon-name="utility:close"
             class="slds-pill__remove"
+            exportparts="button-icon, icon"
             variant="bare"
             onclick={handleRemoveClick}
             title={computedPillRemoveLabel}

package/src/lightning/primitiveBubble/primitiveBubble.js

@@ -9,6 +9,16 @@ const DEFAULT_ALIGN = {
     vertical: 'bottom',
 };
 
+const DEFAULT_INVISIBLE_DIV_STYLES = {
+    height: '1.5rem',
+    position: 'absolute',
+    left: '0',
+    marginLeft: '0',
+    // add a little bit of offset to move the <div> closer to the target, that way the mouse
+    // doesn't move into the small white space between the target and <div>, which would close the tooltip
+    top: '-1.1rem',
+};
+
 export default class LightningPrimitiveBubble extends LightningShadowBaseClass {
     @track
     state = {
@@ -54,6 +64,7 @@ export default class LightningPrimitiveBubble extends LightningShadowBaseClass {
         // - this is required to avoid the content update being in the wrong 'tick'
         this.setContentManually();
         this.setIdManually();
+        this.createInvisibleDivManually();
     }
 
     set content(value) {
@@ -109,6 +120,37 @@ export default class LightningPrimitiveBubble extends LightningShadowBaseClass {
             this.state.content;
     }
 
+    // manually create <div>, add positional styling, and append as child to bubble
+    createInvisibleDivManually() {
+        if (this.state.visible) {
+            const popoverBody = this.template.querySelector(
+                '.slds-popover__body'
+            );
+            const invisibleDiv = document.createElement('div');
+
+            let computedStyle = null;
+            if (window && popoverBody) {
+                computedStyle = window.getComputedStyle(popoverBody);
+                invisibleDiv.style.width =
+                    computedStyle.getPropertyValue('width');
+            }
+
+            invisibleDiv.style.height = DEFAULT_INVISIBLE_DIV_STYLES.height;
+            invisibleDiv.style.position = DEFAULT_INVISIBLE_DIV_STYLES.position;
+            invisibleDiv.style.left = DEFAULT_INVISIBLE_DIV_STYLES.left;
+            invisibleDiv.style.marginLeft =
+                DEFAULT_INVISIBLE_DIV_STYLES.marginLeft;
+
+            const { vertical } = this.align;
+
+            // position <div> based on vertical alignment
+            invisibleDiv.style.top =
+                vertical === 'top' ? DEFAULT_INVISIBLE_DIV_STYLES.top : '';
+
+            popoverBody.appendChild(invisibleDiv);
+        }
+    }
+
     // compute class value for this bubble
     get computedPopoverClass() {
         const classes = classSet('slds-popover')

package/src/lightning/primitiveDatatableCell/primitiveDatatableCell.js

@@ -60,7 +60,7 @@ export default class PrimitiveDatatableCell extends LightningElement {
                 if (editActionElement) {
                     editActionElement.click();
                 }
-            } else if (actionableElements.length >= 1) {
+            } else if (actionableElements.length === 1) {
                 const elem = actionableElements[0];
                 let defaultActions = elem.getAttribute('data-action-triggers');
                 defaultActions = defaultActions || '';

package/src/lightning/primitiveHeaderActions/primitiveHeaderActions.html

@@ -4,7 +4,7 @@
             id="primitive-header-action-button-menu-id"
             icon-size="x-small"
             menu-alignment={_actionMenuAlignment}
-            alternative-text={i18n.showActions}
+            alternative-text={alternativeText}
             variant="bare"
             onopen={handleMenuOpen}
             onclose={handleMenuClose}

package/src/lightning/primitiveHeaderActions/primitiveHeaderActions.js

@@ -3,6 +3,7 @@ import labelShowActions from '@salesforce/label/LightningDatatable.showActions';
 import labelWrapText from '@salesforce/label/LightningDatatable.wrapText';
 import { LightningElement, api, track } from 'lwc';
 import { deepCopy } from 'lightning/utilsPrivate';
+import { formatLabel } from 'lightning/utils';
 
 const i18n = {
     clipText: labelClipText,
@@ -42,6 +43,14 @@ export default class PrimitiveHeaderActions extends LightningElement {
         this.updateActions();
     }
 
+    /**
+     * Defines the label of the column header
+     *
+     * @type {String}
+     */
+
+    @api columnHeader;
+
     /************************** PUBLIC METHODS ***************************/
 
     /**
@@ -195,4 +204,8 @@ export default class PrimitiveHeaderActions extends LightningElement {
     getActionsByType(type) {
         return Array.isArray(this._actions[type]) ? this._actions[type] : [];
     }
+
+    get alternativeText() {
+        return formatLabel(i18n.showActions, this.columnHeader || '');
+    }
 }