lightning-base-components 1.21.5-alpha → 1.21.7-alpha

package/src/lightning/modalBase/modalBase.js

@@ -19,6 +19,7 @@ import {
 import closeButtonAltText from '@salesforce/label/LightningModalBase.cancelandclose';
 import disableCloseBtnMessage from '@salesforce/label/LightningModalBase.waitstate';
 import AriaObserver from 'lightning/ariaObserver';
+import { isLwcModalActive } from 'lightning/overlayManager';
 
 const DEBOUNCE_RESIZE = 300;
 const SMALL_SCREEN_SIZE = 480;
@@ -26,11 +27,11 @@ const SIZE_SMALL = 'small';
 const SIZE_MEDIUM = 'medium';
 const SIZE_LARGE = 'large';
 const SIZE_FULL = 'full';
-const MODAL_BASE = 'lightning-modal-base';
+const MODAL_CONTAINER = 'lightning-overlay-container';
 
 export default class LightningModalBase extends LightningShadowBaseClass {
     // this is visible in DOM, changed from 'lightning-modal-base'
-    static [instanceName] = MODAL_BASE;
+    static [instanceName] = 'lightning-modal-base';
 
     // private tracked state
     initialRender = true;
@@ -45,7 +46,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
     isSmallScreenSize = null;
 
     // modalHeader, child
-    isHeadlessModalVariant = false;
     headerRegistered = false;
     headerHeight = 0;
     headerDefaultSlotIsPopulated = false;
@@ -73,8 +73,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
     focusinEventBound = false;
     focusinEventHandler = null;
     lastFocussedElementOnModal = null;
-    previousSavedInertElementsSize = 0;
-    allTabbableElements = null;
 
     // modalFooter, child
     footerRegistered = false;
@@ -319,6 +317,37 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         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
+     * @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();
+    }
+
+    /**
+     * 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
+     * @private
+     */
+    get computedCloseButtonVariant() {
+        return this.shouldModalBeFullScreen() ? 'bare' : 'bare-inverse';
+    }
+
     /**
      * Determines if aria-describedby should be set, and the span tag shown
      * occurs only when aria-description is not supported.
@@ -368,42 +397,21 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         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 });
+            synchronizeAttrs(this.modalCloseButton, { disabled: 'disabled' });
             this.disableCloseButton = true;
         } else {
             // Should enable close button
-            this.ariaLiveMessage = disableCloseButtonMessage;
+            this.ariaLiveMessage = disableCloseBtnMessage;
             this.showAriaLiveMessage = false;
             synchronizeAttrs(this.modalWrapper, { [`${ARIA.BUSY}`]: null });
+            synchronizeAttrs(this.modalCloseButton, { disabled: 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 && this.headerTitleRef) {
-            // 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,
-            });
-        }
     }
 
     /**
@@ -461,17 +469,23 @@ export default class LightningModalBase extends LightningShadowBaseClass {
     }
 
     /**
-     * Handler for 'focusin' events responsible for following -
-     * <ul>
-     *     <li>While the focus is on a Modal or stacked Modals, the handler tracks the last focussed element inside a Modal</li>
-     *     <li>If user's focus moves outside a Modal, the handler tries to bring user's focus back to last focussed element</li>
-     * </ul>
+     * Handler for 'focusin' events, responsible for trapping user focus to open Modal
      * @param e - Event
      */
-    handleFocusinEvents() {
+    handleFocusinEvents(e) {
         // eslint-disable-next-line @lwc/lwc/no-async-operation
         requestAnimationFrame(() => {
-            // W-14998924 note: code revert to unblock 250R downstream
+            // is current active (open) modal is lwc
+            if (isLwcModalActive() && this.isModalOpen) {
+                const isTargetRelatedToModal =
+                    e.target?.closest(MODAL_CONTAINER) ||
+                    e.relatedTarget?.closest(MODAL_CONTAINER);
+                if (isTargetRelatedToModal) {
+                    this.lastFocussedElementOnModal = getElementWithFocus();
+                } else {
+                    returnFocusToElement(this.lastFocussedElementOnModal);
+                }
+            }
         });
     }
 
@@ -610,19 +624,6 @@ 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
@@ -784,7 +785,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
 
         const fallbackFocusElem = this.disableCloseButton
             ? outerModalElem
-            : closeButtonElem || outerModalElem;
+            : closeButtonElem;
 
         const focusElem = preferredFocusElem
             ? preferredFocusElem
@@ -850,20 +851,6 @@ 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;
     }
 
     /**
@@ -941,8 +928,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         if (this.bodyRegistered) {
             this.updateModalBodyHeight();
         }
-
-        this.updateHeadlessModalVariantState();
     }
 
     /**
@@ -972,7 +957,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         this.headerLabelId = null;
         this.headerLabelIsPopulated = null;
         this.headerTitleRef = null;
-        this.updateHeadlessModalVariantState();
     }
 
     /**
@@ -1015,8 +999,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         if (this.bodyRegistered) {
             this.updateModalBodyHeight();
         }
-
-        this.updateHeadlessModalVariantState();
     }
 
     /**
@@ -1185,24 +1167,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         }
     }
 
-    /**
-     * Helper method to determine when modals are being stacked.
-     *
-     * When stacked modals are present on the page,
-     * elements in savedInertElements will have 'ariaHidden' attribute with a boolean true
-     * @returns {boolean}
-     */
-    isStackedModal() {
-        const { savedInertElements } = this;
-        for (let i = 0; i < savedInertElements.length; i++) {
-            const isAriaHidden = savedInertElements[i].ariaHidden;
-            if (isAriaHidden) {
-                return true;
-            }
-        }
-        return false;
-    }
-
     /**
      * == W-12654751 P1 a11y bug ==
      *

package/src/lightning/modalHeader/modalHeader.html

@@ -1,25 +1,13 @@
 <template>
-    <div class="slds-modal__header slds-text-align_left" part="modal-header"
-         onprivatemodalheaderdisableclose={handlePrivateModalHeaderDisableClose}
-    >
+    <div class="slds-modal__header" part="modal-header">
         <template if:true={label}>
             <h1
-                class="slds-modal__title slds-hyphenate"
-                data-label
                 id="modal-label"
+                class="slds-modal__title slds-hyphenate"
                 tabindex="-1"
+                data-label
             >{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,15 +1,12 @@
 import { api } from 'lwc';
 import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
-import { getRealDOMId, synchronizeAttrs } from 'lightning/utilsPrivate';
-import { secure } from 'lightning/overlayUtils';
-import closeButtonAltText from '@salesforce/label/LightningModalBase.cancelandclose';
+import { getRealDOMId } from 'lightning/utilsPrivate';
 
 // 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.
@@ -19,13 +16,25 @@ 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
@@ -116,62 +125,6 @@ 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/multiColumnSortingModal/multiColumnSortingModal.css

@@ -0,0 +1,14 @@
+@import 'lightning/sldsCommon';
+@import 'lightning/sldsUtilsHyphenation';
+
+[part="columnadder"] {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5rem;
+}
+
+
+[part="modal-body"] {
+    height: 19rem;
+}

package/src/lightning/multiColumnSortingModal/multiColumnSortingModal.html

@@ -0,0 +1,55 @@
+<template>
+    <lightning-modal-header label={i18n.modalTitle}>
+    </lightning-modal-header>
+    <lightning-modal-body class="modal_headerless">
+        <div part="modal-body">
+            <template iterator:it={rulesWithData}>
+                <lightning-primitive-column-sorter
+                    key={it.value.key}
+                    index={it.index}
+                    rule={it.value}
+                    columns={processedColumns}
+                    first-rule={it.first}
+                    last-rule={it.last}
+                    ondelete={handleDeleteRule}
+                    onselection={handleSelectionChange}
+                    onmoveup={handleRuleMovement}
+                    onmovedown={handleRuleMovement}>
+                </lightning-primitive-column-sorter>
+            </template>
+            <div part="columnadder">
+                <lightning-button
+                    variant="base"
+                    label={i18n.addRule}
+                    icon-name="utility:add"
+                    onclick={handleAddRule}
+                    disabled={isAddRuleButtonDisabled}
+                    class="slds-m-left_x-small">
+                </lightning-button>
+                <div style={ruleLimitTextStyle}>{ruleLimitText}</div>
+            </div>
+        </div>
+    </lightning-modal-body>
+    <lightning-modal-footer class="slds-modal__footer_directional">
+        <lightning-button
+            class="slds-button"
+            variant="neutral"
+            label={i18n.clearButton}
+            onclick={clearRules}
+            disabled={isClearButtonDisabled}
+        ></lightning-button>
+        <lightning-button
+            class="slds-button"
+            variant="neutral"
+            label={i18n.cancelButton}
+            onclick={cancelRules}
+        ></lightning-button>
+        <lightning-button
+            class="slds-button"
+            variant="brand"
+            label={i18n.applyButton}
+            onclick={applyRules}
+            disabled={isApplyButtonDisabled}
+        ></lightning-button>
+    </lightning-modal-footer>
+</template>