lightning-base-components 1.27.5-alpha → 1.28.4-alpha

package/src/lightning/modalBase/modalBase.ts

@@ -1,1471 +0,0 @@
-import { api, track } from 'lwc';
-import { features } from 'lightning/features';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
-import { classSet } from 'lightning/utils';
-import {
-    ARIA,
-    hasActiveTooltip,
-    hasAnimation,
-    isAriaDescriptionSupported,
-    makeEverythingExceptElementInert,
-    normalizeString,
-    restoreInertness,
-    synchronizeAttrs,
-} from 'lightning/utilsPrivate';
-import { instanceName, secure } from 'lightning/overlayUtils';
-import {
-    getElementWithFocus,
-    returnFocusToElement,
-} from 'lightning/focusUtils';
-import closeButtonAltText from '@salesforce/label/LightningModalBase.cancelandclose';
-import disableCloseBtnMessage from '@salesforce/label/LightningModalBase.waitstate';
-import AriaObserver from 'lightning/ariaObserver';
-import { modalFocusinEventHandler } from 'lightning/modalUtils';
-import orgHasWCAGResizeReflowSC from '@salesforce/accessCheck/ComponentAccessibility.orgHasWCAGResizeReflowSC';
-
-import type LightningModal from 'lightning/modal';
-import type { SavedInertElement } from 'lightning/utilsPrivate';
-
-const DEBOUNCE_RESIZE = 300;
-const SMALL_SCREEN_SIZE = 480;
-const SIZE_SMALL = 'small';
-const SIZE_MEDIUM = 'medium';
-const SIZE_LARGE = 'large';
-const SIZE_FULL = 'full';
-let lwcModalCount = 0;
-let originalBodyOverflow = null;
-
-type ModalSize =
-    | typeof SIZE_SMALL
-    | typeof SIZE_MEDIUM
-    | typeof SIZE_LARGE
-    | typeof SIZE_FULL;
-
-export default class LightningModalBase extends LightningShadowBaseClass {
-    // this is visible in DOM, changed from 'lightning-modal-base'
-    static [instanceName]: string = 'lightning-modal-base';
-
-    // private tracked state
-    initialRender: boolean = true;
-    autoFocusCompletedOnce: boolean = false;
-    timeoutId: number = 0;
-    disableCloseButton: boolean = false;
-    sectionAriaBusy: string | null = null;
-    closeButtonAltText: string = closeButtonAltText;
-    disableCloseBtnMessage: string = disableCloseBtnMessage;
-    isModalClosing: boolean = false;
-    // screen size private tracked state
-    isSmallScreenSize: boolean | null = null;
-
-    // modalHeader, child
-    headerRegistered: boolean = false;
-    headerHeight: number = 0;
-    headerDefaultSlotIsPopulated: boolean = false;
-    headerSlotWrapperId: string | null = null;
-    headerSlotHasRendered: boolean = false;
-    headerLabelId: string | null = null;
-    headerLabelIsPopulated: boolean | null = null;
-    headerTitleRef: HTMLElement | null = null;
-
-    // modalBody, child
-    bodyRegistered: boolean = false;
-    bodyDefaultSlotIsPopulated: boolean = false;
-    bodySlotHasRendered: boolean = false;
-    bodyId: string | null = null;
-    baseUpdateBodyCallback: Function | null = null; // eslint-disable-line @typescript-eslint/no-unsafe-function-type
-    bodyResizeScheduled: boolean = false;
-    bodyTabElemRef: HTMLElement | null = null;
-    // eventing state utilized when modalBody present
-    windowResizeEventBound: boolean = false;
-    windowOrientationEventBound: boolean = false;
-    portraitMatchMedia: MediaQueryList | null = null;
-    screenOrientationChangeHandler: (() => void) | null = null;
-
-    // state utilized when performing keyboard focus trap
-    focusinEventBound: boolean = false;
-    lastFocusedElement: HTMLElement | null = null;
-
-    // modalFooter, child
-    footerRegistered: boolean = false;
-    footerHeight: number = 0;
-    footerSlotHasRendered: boolean = false;
-    footerDefaultSlotIsPopulated: boolean = false;
-
-    // aria attributes
-    modalLabel: string | null = null;
-    modalLabelledBy: string | null = null;
-    modalDescribedBy: string | null = null;
-    // currently used for disableClose
-    showAriaLiveMessage: boolean = false;
-    ariaLiveMessage: string = '';
-
-    // modal features
-    isModalOpen: boolean = false;
-    isModalTransitioningIn: boolean = false;
-    // modal background elements
-    savedInertElements: SavedInertElement[] = [];
-    // before modal opened, element previously focused
-    @track savedActiveElement: Element | null;
-
-    // accessibility
-    ariaObserver: AriaObserver | null = null;
-    updateHeaderCallback: any;
-    updateFooterCallback: any;
-
-    _resizing: boolean;
-
-    constructor() {
-        super();
-        this.ariaObserver = new AriaObserver(this);
-    }
-
-    /**
-     * <lightning-modal> label value
-     * Text to display as the heading at the top of the modal
-     */
-    get label(): string {
-        const modal = this.modal;
-        if (!modal) {
-            return '';
-        }
-        return modal.label;
-    }
-
-    /**
-     * <lightning-modal> description value
-     * Text used for the accessible description of the modal. see updateAriaDescription()
-     * Note: this value is not visible in the UI, and only to screen readers
-     */
-    get description(): string {
-        const modal = this.modal;
-        if (!modal) {
-            return '';
-        }
-        return modal.description;
-    }
-
-    /**
-     * Normalize customer set values to api size
-     * Valid values are small, medium, large, and full. The default is medium.
-     * @param sizeValue string representing api size value
-     * @returns {string} string representing normalized api size value
-     * @default medium
-     */
-    normalizeSize(sizeValue: string): ModalSize {
-        const sizeDefault = SIZE_MEDIUM;
-        return normalizeString(sizeValue, {
-            fallbackValue: sizeDefault,
-            validValues: [SIZE_FULL, SIZE_SMALL, SIZE_MEDIUM, SIZE_LARGE],
-        }) as ModalSize;
-    }
-
-    /**
-     * Determine if this._size has been set yet.
-     * @returns {boolean} true means not yet set, false means has been set
-     */
-    get isModalSizeNotSet(): boolean {
-        return this._size === null;
-    }
-
-    // we don't set the value of this._size, *until this.modal.size can be assessed*
-    // this.modal is a child element of modalBase, and it doesn't yet exist during
-    // the component's initial render.
-    _size: ModalSize | null = null;
-
-    /**
-     * Get the current modal size.
-     * If modalReducedMotion gate=true, return this._size
-     * If modalReducedMotion gate=true, attempt to get this.modal.size directly
-     * Valid values are small, medium, large, and full. The default is medium.
-     * @type {string}
-     * @default medium
-     */
-    get size(): ModalSize {
-        const sizeDefault = SIZE_MEDIUM;
-        // if modalReduceMotionFix gate=true, new reactive behavior
-        // added due to local variable use which LWC engine observes changes
-        // while the component attempts to resolve this.modal
-        if (features.ENABLE_MODAL_REDUCE_MOTION) {
-            // if _size set return it, or provide 'medium' which is the default
-            return this._size || sizeDefault;
-        }
-        // if modalReduceMotionFix gate=false, original non-reactive
-        // no bug exists when hasAnimation=true
-        // a bug exists when hasAnimation=false, and !this.modal
-        // where customer api size will always be stuck at sizeDefault, 'medium'
-        // and so SLDS CSS class is also applied incorrectly
-        const { modal } = this;
-        if (!modal) {
-            return sizeDefault;
-        }
-        // get the size value from <lightning-modal>
-        return this.normalizeSize(modal.size);
-    }
-
-    /**
-     * Set the current modal size via this._size.
-     * Currently `set size` exists behind modalReduceMotionFix gate
-     * This new code encapsulates _size setting behavior
-     * Valid values are small, medium, large, and full. The default is medium.
-     * @type {string}
-     * @default medium
-     */
-    set size(value: string) {
-        // if modalReduceMotionFix gate=true, new reactive behavior
-        // added due to this._size (modalBase local) so LWC engine tracks change
-        // while modalBase (parent) attempts to resolve this.modal.size (child)
-        if (features.ENABLE_MODAL_REDUCE_MOTION) {
-            // when modalBase and its child modal are first rendering,
-            // it is common that this.modal doesn't yet exist.
-            // if modal doesnt yet exist, we keep this._size = null
-            // if modal exists, size value gets normalized, and _size = value
-            this._size = value ? this.normalizeSize(value) : null;
-        }
-    }
-
-    /**
-     * <lightning-modal> disableClose value
-     * Get attribute to trigger disabling ability to dismiss modal temporarily
-     */
-    get disableClose(): boolean {
-        const modal = this.modal;
-        if (!modal) {
-            return false;
-        }
-        return modal.disableClose;
-    }
-
-    /**
-     * Public method to get the modal slot element
-     * @type {(HTMLElement|null)} The modal slot, currently a div elem
-     */
-    @api
-    get defaultSlot(): HTMLElement | null {
-        return this.template.querySelector('[data-slot]');
-    }
-
-    /**
-     * Private method to get the modal section element, the outer wrapper for modal elements
-     * @returns {(HTMLElement|null)} The section element, currently the section[role="dialog"]
-     * @private
-     */
-    get modalWrapper(): HTMLElement | null {
-        return this.template.querySelector('[data-modal]');
-    }
-
-    /**
-     * Private method to get the lightning-modal element inside the div slot
-     * This element has the api for .close, size, label
-     * @returns {(HTMLElement|null)} The modal inside <div data-slot>: <lightning-modal>
-     * @private
-     */
-    get modal(): LightningModal | null {
-        return (
-            (!import.meta.env.SSR &&
-                this.defaultSlot &&
-                this.defaultSlot.childNodes[0]) ||
-            null
-        ) as unknown as LightningModal;
-    }
-
-    /**
-     * Private method to get the modal span description element
-     * This span is present when the accessible 'description' api text is present,
-     * and aria-description isn't supported.  Instead, aria-describedby is utilized
-     * @returns {(HTMLElement|null)} The modal span element for IDRef linkage
-     * @private
-     */
-    get modalDescSpan(): HTMLElement | null {
-        return this.template.querySelector('[data-aria-description]');
-    }
-
-    /**
-     * Get the lightning-button-icon (close button element)
-     * @returns {(HTMLElement|null)}
-     * @private
-     */
-    get modalCloseButton(): HTMLElement | null {
-        return this.template.querySelector('[data-close-button]');
-    }
-
-    /**
-     * Get the lightning-modal element within the modal slot
-     * currently modalBase's slot is a div element, not a slot element
-     * @returns {(HTMLElement|null)}
-     * @private
-     */
-    get modalElement(): HTMLElement | null {
-        const modalSlot = this.defaultSlot;
-        if (!modalSlot) {
-            return null;
-        }
-        return modalSlot.querySelector('lightning-modal');
-    }
-
-    /**
-     * Get the lightning-modal element's backdrop
-     * @returns {(HTMLElement|null)}
-     * @private
-     */
-    get modalBackdrop(): HTMLElement | null {
-        return this.template.querySelector('[data-backdrop]');
-    }
-
-    /**
-     * Get the background element height
-     * used to calculate max height on the modalBody using
-     * modal -> modalBody callback
-     * @returns {number}
-     * @private
-     */
-    get backdropDimensions(): { height: number; width: number } {
-        const backdropElem = this.modalBackdrop;
-        const backdropRect = backdropElem
-            ? backdropElem.getBoundingClientRect()
-            : {};
-        const { height, width } = backdropRect as { height?: number; width?: number };
-        return {
-            height: height || 0,
-            width: width || 0,
-        };
-    }
-
-    /**
-     * Gets the CSS classes applicable to the outer modal wrapper element
-     * Modal foreground triggers on this.isModalTransitioningIn to
-     * fade in/out or animate up/down
-     * @returns {string} CSS class string
-     * @private
-     */
-    get modalCssClasses(): string {
-        const classes = classSet('slds-modal fix-slds-modal');
-        // how the value of `size` is calculated is influenced by
-        // by whether modalReduceMotionFix gate is enabled or disabled
-        // if enabled, set size is used to set size value to this._size, along
-        // if disabled, get size handles determing the value from this.modal
-        let modalSize;
-        if (features.ENABLE_MODAL_REDUCE_MOTION) {
-            const sizeDefault = SIZE_MEDIUM;
-            // utilize this._size var to make modalCssClasses reactive
-            modalSize = this._size === null ? sizeDefault : this.size;
-        } else {
-            // set modalSize the original way
-            modalSize = this.size;
-        }
-
-        if (hasAnimation()) {
-            // .slds-fade-in-open not present to trigger opacity animation
-            // when later this.isModalTransitioningIn is set to TRUE
-            // animation then occurs
-            classes.add({
-                'slds-fade-in-open': this.isModalTransitioningIn,
-            });
-        } else {
-            // no animation occurs if the .slds-fade-in-open class
-            // is immediately present in DOM
-            classes.add({
-                'slds-fade-in-open': true,
-            });
-        }
-        // don't add animation related css classes in this group
-        classes.add({
-            'slds-modal_full': modalSize === SIZE_FULL,
-            'slds-modal_medium': modalSize === SIZE_MEDIUM,
-            'slds-modal_large': modalSize === SIZE_LARGE,
-            'slds-modal_small': modalSize === SIZE_SMALL,
-        });
-        return classes.toString();
-    }
-
-    /**
-     * Gets the CSS classes applicable to the modal background element
-     * Backdrop triggers on this.isModalOpen to fade/animate in first
-     * @returns {string} CSS class string
-     * @private
-     */
-    get modalBackdropCssClasses(): string {
-        let classes = classSet('slds-backdrop fix-slds-backdrop');
-        if (hasAnimation()) {
-            classes.add({
-                'slds-backdrop_open': this.isModalOpen,
-            });
-        } else {
-            // no fading animation occurs when .slds-backdrop_open
-            // is immediately present in the DOM
-            classes = classes.add({
-                'slds-backdrop_open': true,
-            });
-        }
-        return classes.toString();
-    }
-
-    get isDescriptionSet(): boolean {
-        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
-     * @private
-     */
-    // slds-button slds-button_icon slds-modal__close
-    get computedCloseButtonCssClass() {
-        const classes = classSet(
-            'slds-button slds-button_icon slds-modal__close'
-        );
-        const fullScreenActive =
-            this.isSmallScreenSize && this.size === SIZE_FULL;
-        classes.add({
-            'slds-modal_full-close-button': fullScreenActive,
-        });
-        return classes.toString();
-    }
-
-    /**
-     * 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(): boolean {
-        return !isAriaDescriptionSupported() && this.isDescriptionSet;
-    }
-
-    /**
-     * When window is resizing, need to debounce callback
-     * Track internal variable _resizing
-     * @returns {Boolean}
-     * @private
-     */
-    get modalResizing(): boolean | null {
-        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(): void {
-        // 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 as unknown as string});
-            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;
-        }
-    }
-
-    /**
-     * Saves the current active focused element on modal creation
-     * in order to be able to set focus back to that previous element
-     * @private
-     */
-    saveActiveElement(): void {
-        this.savedActiveElement = getElementWithFocus();
-    }
-
-    /**
-     * Renders most background elements inert, while modal active
-     * and saves them for later setting background elements active
-     * @private
-     */
-    renderBackgroundInert(): void {
-        this.savedInertElements = makeEverythingExceptElementInert(
-            this.template.host
-        );
-    }
-
-    /**
-     * Renders most background elements active, as modal closes
-     * @private
-     */
-    renderBackgroundActive(): void {
-        restoreInertness(this.savedInertElements);
-        this.savedInertElements = [];
-    }
-
-    /**
-     * Returns focus to background element previously focused,
-     * before modal existed
-     * @private
-     */
-    returnFocusToBackground(): void {
-        const { savedActiveElement } = this;
-        const elementWasFocused = returnFocusToElement(savedActiveElement);
-        if (!elementWasFocused) {
-            // eslint-disable-next-line no-console
-            console.warn('Modal :: Nothing to return focus to');
-        }
-    }
-
-    /**
-     * Queue the showing of the modal
-     * utilized for triggering fade in modal CSS class additions
-     * @private
-     */
-    queueShowModal(): void {
-        if (this.isModalOpen && !this.isModalTransitioningIn) {
-            this.isModalTransitioningIn = true;
-        }
-    }
-
-    /**
-     * Opening the modal involves first performing necessary steps to
-     * prepare for when the modal closes
-     * isModalOpen triggers fade in CSS class on modal background
-     * @private
-     */
-    openModal(): void {
-        this.saveActiveElement();
-        this.renderBackgroundInert();
-        if (!this.isModalOpen) {
-            this.isModalOpen = true;
-            if (lwcModalCount === 0) {
-                // Store the original inline style value
-                if (!import.meta.env.SSR) {
-                    originalBodyOverflow = getComputedStyle(
-                        document.body
-                    ).overflow;
-                    document.body.style.overflow = 'hidden';
-                }
-            }
-            lwcModalCount++;
-        }
-    }
-
-    /**
-     * Handles modal close state management and body overflow restoration
-     * @private
-     */
-    handleModalCloseState() {
-        if (this.isModalOpen) {
-            this.isModalOpen = false;
-            lwcModalCount--;
-            if (lwcModalCount === 0) {
-                if (!import.meta.env.SSR) {
-                    document.body.style.overflow = originalBodyOverflow;
-                }
-                originalBodyOverflow = null;
-            }
-        }
-    }
-
-    /**
-     * Closing the modal wraps up the modal lifecycle
-     * before it is fully removed
-     * @private
-     */
-    closeModal(): void {
-        this.returnFocusToBackground();
-        // @ts-expect-error: renderBackgroundActive signature expects different arguments
-        this.renderBackgroundActive(this.savedInertElements);
-        if (this.ariaObserver) {
-            this.ariaObserver.disconnect();
-            this.ariaObserver = undefined;
-        }
-    }
-
-    /**
-     * Unsets the aria-labelledby or aria-label values
-     * when no label value is provided
-     * modal requires 'label' value either at modalHeader or at modal
-     * @private
-     */
-    unsetAriaLabelAndError: () => void = () => {
-        // unset any previously set aria values
-        synchronizeAttrs(this.modalWrapper, {
-            [ARIA.LABELLEDBY]: null,
-            [ARIA.LABEL]: null,
-        });
-        // console.error when label empty
-        this.errorLabelRequired();
-        if (this.ariaObserver) {
-            this.ariaObserver.disconnect();
-        }
-    };
-
-    /**
-     * Set either 'aria-describedby' or 'aria-description' value for accessibility
-     * based on the presence of 'description' api value
-     * and support of the newer ARIA 'aria-description'.
-     * At launch, modern browsers Firefox and Safari DO NOT support it. IE11 won't.
-     * @private
-     */
-    updateAriaDescription(): void {
-        const { description } = this;
-        // if aria-description is supported && description set, set aria-description
-        if (isAriaDescriptionSupported()) {
-            const descriptionToSet = this.isDescriptionSet ? description : null;
-            // set aria-description if set, otherwise unset with null
-            return synchronizeAttrs(this.modalWrapper, {
-                [ARIA.DESCRIPTION]: descriptionToSet,
-            });
-        }
-        // if aria-description not supported, and description is set,
-        // and span id exists, or unset aria-describedby with null
-        const spanId = (this.isDescriptionSet && this.modalDescSpan.id) || null;
-        return synchronizeAttrs(this.modalWrapper, {
-            [ARIA.DESCRIBEDBY]: spanId,
-        });
-    }
-
-    /**
-     * Sets the aria-labelledby or aria-label values for accessibility
-     * based on presence of modalHeader child
-     * modal requires 'label' value either at modalHeader or at modal
-     * @private
-     */
-    updateAriaLabel(): void {
-        const {
-            label,
-            headerRegistered,
-            headerLabelId,
-            headerLabelIsPopulated,
-        } = this;
-        const labelIsEmpty = label === '' || label.trim().length === 0;
-        // when header is present,
-        // headerLabelIsPopulated is equivalent labelIsEmpty, but from modalHeader level
-        if (headerRegistered) {
-            if (headerLabelId && headerLabelIsPopulated) {
-                if (this.ariaObserver) {
-                    this.ariaObserver.connect({
-                        targetNode: this.modalWrapper,
-                        attribute: 'aria-labelledby',
-                        relatedNodes: [this.headerTitleRef],
-                    });
-                }
-                synchronizeAttrs(this.modalWrapper, { [ARIA.LABEL]: null });
-                // if labelId not set OR header label value not set,
-                // must console.error
-            } else {
-                this.unsetAriaLabelAndError();
-            }
-            // unset if no header (gets removed dynamically, or never present)
-        } else if (!labelIsEmpty) {
-            synchronizeAttrs(this.modalWrapper, {
-                [ARIA.LABELLEDBY]: null,
-                [ARIA.LABEL]: label,
-            });
-        } else if (!this.isModalClosing) {
-            // in headless variant, must have label value set, unless the modal
-            // is actively closing
-            this.unsetAriaLabelAndError();
-        }
-    }
-
-    /**
-     * Construct and show console.error for missing label value
-     * Modal component requires the label attribute, either via
-     * modalHeader or modal to have accessibility set correctly
-     * @private
-     */
-    errorLabelRequired(): void {
-        let errorMsg =
-            'LightningModal - Templates with <lightning-modal-header> should define the label attribute as an attribute on <lightning-modal-header label="Modal Heading"> .';
-        errorMsg +=
-            ' Templates without <lightning-modal-header> should define the label attribute in the Modal.open({ label: "Modal Heading" })';
-        // eslint-disable-next-line no-console
-        console.error(errorMsg);
-    }
-
-    /**
-     * Handle the close button click, or via ESC key
-     * @private
-     */
-    handleCloseClick(): void {
-        // calls handlePrivateClose
-        if (!this.disableCloseButton) {
-            this.modal.close();
-        }
-    }
-
-    /**
-     * Handle privateclose event firing is prevented from occurring
-     * when this.disableClose set true in modal.js
-     * @param e
-     */
-    handlePrivateClose(e: CustomEvent): void {
-        if (!(e.detail && e.detail[secure])) {
-            // eslint-disable-next-line no-console
-            console.error('Invalid access to privateclose event');
-            return;
-        }
-        this.handleModalCloseState();
-
-        // set isModalClosing boolean, to prevent intentional error
-        // when checking for presence of api 'label' value
-        this.isModalClosing = true;
-        if (hasAnimation()) {
-            // triggers the disappearance of the foreground modal elements
-            this.modalWrapper.classList.remove('slds-fade-in-open');
-            this.modalBackdrop.classList.remove('slds-backdrop_open');
-            // wait until modalWrappers animation completes, then proceed
-            this.modalBackdrop.addEventListener('transitionend', () => {
-                e.detail.resolve();
-            });
-        } else {
-            // skip animation, resolve immediately
-            e.detail.resolve();
-        }
-        // disconnectedCallback doesn't get called on .close()
-        // unregistering child components
-        if (this.headerRegistered && this.unregisterHeader) {
-            this.unregisterHeader();
-        }
-        if (this.bodyRegistered && this.unregisterBody) {
-            this.unregisterBody();
-        }
-        if (this.footerRegistered && this.unregisterFooter) {
-            this.unregisterFooter();
-        }
-        this.closeModal();
-    }
-
-    handlePrivateDisableCloseButton(e: CustomEvent): void {
-        if (!(e.detail && e.detail[secure])) {
-            // eslint-disable-next-line no-console
-            console.error('Invalid access to privatedisableclose event');
-            return;
-        }
-
-        this.toggleDisableCloseButton();
-    }
-
-    /**
-     * Handle Esc key down events on the modal
-     * @param {Event} e The keyboard event
-     * @private
-     */
-    handleModalKeyDown(e: KeyboardEvent): void {
-        const { ctrlKey, metaKey, shiftKey, key } = e;
-        const hasModifier = ctrlKey || metaKey || shiftKey;
-        // 'Esc' is IE11 specific, remove when support is dropped
-        // when disableCloseButton set true, ESC key to close modal is deactivated
-        if (
-            (!features.enableTooltipHoverDismiss || !hasActiveTooltip()) &&
-            !hasModifier &&
-            !this.disableCloseButton &&
-            (key === 'Esc' || key === 'Escape')
-        ) {
-            e.stopPropagation();
-            e.preventDefault();
-            this.handleCloseClick();
-        }
-    }
-
-    /**
-     * Utilized to auto set (autofocus) the browser's focus to-
-     *
-     * 1. title text inside a Modal Header OR
-     * 2. place it on the first interactive element within the modal children (i.e, Headless Modal variant)
-     * 3. place it on Close Icon
-     *
-     * Fires custom cancelable event 'autofocus' as autoFocus should only be done during the modal's creation.
-     * Needs to wait until all elements have rendered in the DOM.
-     * Details on focus decision tree under
-     * ['Opening Dialogs'](https://www.lightningdesignsystem.com/accessibility/guidelines/global-focus/#dialogs) section.
-     * For modal v1, ignore multi-step modal as it is not part of scope
-     * @private
-     */
-    focusFirstElement(): void {
-        const { autoFocusCompletedOnce, modalElement } = this;
-        // If any of these is TRUE, exit before proceeding
-        // 1. if modal has already been autofocused once, exit immediately
-        // 2. need to wait for modalElements to be rendered to the DOM
-        if (autoFocusCompletedOnce || !modalElement) {
-            return;
-        }
-
-        const {
-            bodyRegistered,
-            footerRegistered,
-            headerRegistered,
-            headerTitleRef,
-            headerDefaultSlotIsPopulated,
-            headerSlotHasRendered,
-            bodyDefaultSlotIsPopulated,
-            bodySlotHasRendered,
-            bodyTabElemRef,
-            footerDefaultSlotIsPopulated,
-            footerSlotHasRendered,
-        } = this;
-
-        const waitForHeaderSlotRender =
-            headerRegistered &&
-            headerDefaultSlotIsPopulated &&
-            !headerSlotHasRendered;
-        const waitForBodySlotRender =
-            bodyRegistered &&
-            bodyDefaultSlotIsPopulated &&
-            !bodySlotHasRendered;
-        const waitForFooterSlotRender =
-            footerRegistered &&
-            footerDefaultSlotIsPopulated &&
-            !footerSlotHasRendered;
-
-        // 3. Need to make sure registered child components
-        // slots have fully rendered before proceeding
-        if (
-            waitForHeaderSlotRender ||
-            waitForBodySlotRender ||
-            waitForFooterSlotRender
-        ) {
-            return;
-        }
-
-        const modalHeadingElem =
-            headerRegistered && headerTitleRef ? headerTitleRef : null;
-
-        // preferred focus be placed, in following order
-        // (1) on title text present inside a Modal Header
-        // (2) on autofocus-able elements (links:NOT(tooltip), inputs, buttons)
-        //     located in lightning-modal-body in case of **Headless Modal variant**
-        const preferredFocusElem = modalHeadingElem
-            ? modalHeadingElem
-            : bodyTabElemRef || null;
-
-        // fallback focus, in order of preference
-        // (1) close button (always present, current version)
-        // (2) outer modal element (always present, here ONLY as a backup,
-        //     for when hide or disable close button becomes available
-        const closeButtonElem = this.modalCloseButton;
-        const outerModalElem = this.modalWrapper;
-
-        const fallbackFocusElem = this.disableCloseButton
-            ? outerModalElem
-            : closeButtonElem;
-
-        const focusElem = preferredFocusElem
-            ? preferredFocusElem
-            : fallbackFocusElem;
-
-        if (focusElem !== null) {
-            this.lastFocusedElement = focusElem;
-            // eslint-disable-next-line @lwc/lwc/no-async-operation, @lwc/lwc/ssr-no-restricted-browser-globals
-            requestAnimationFrame(() => {
-                focusElem.focus();
-            });
-            this.autoFocusCompletedOnce = true;
-        } else {
-            // Should never happen since outerModalElem always present
-            // eslint-disable-next-line no-console
-            console.error(
-                'LightningModal - at least one focusable element is required, none found.'
-            );
-        }
-    }
-
-    /**
-     * When child component modalBody is removed,
-     * sets private tracked state, detaches window.onresize event listeners
-     * @private
-     */
-    unregisterBody(): void {
-        // FUTURE TODO mechanism to support aria-describedby
-        // aria-describedby is optional, without a good reproducible pattern
-        this.initBodyState();
-    }
-
-    /**
-     * Registers modalBody with its parent modal, when present
-     * Sets private tracked state about modalBody
-     * Called when 'onprivatemodalbodyregister' event gets fired
-     * @param {Object} detail Passed details object from modalBody
-     * @private
-     */
-    registerBody({
-        bodyId,
-        bodyIsPopulated,
-        updateBodyCallback,
-        defaultSlotHasRendered,
-        unRegisterCallback,
-        firstTabbableElemRef,
-    }: {
-        bodyId: string;
-        bodyIsPopulated: boolean;
-        updateBodyCallback: Function; // eslint-disable-line @typescript-eslint/no-unsafe-function-type
-        defaultSlotHasRendered: boolean;
-        unRegisterCallback: Function; // eslint-disable-line @typescript-eslint/no-unsafe-function-type
-        firstTabbableElemRef: HTMLElement | null;
-    }): void {
-        this.bodyRegistered = true;
-        this.bodyDefaultSlotIsPopulated = bodyIsPopulated;
-        this.bodySlotHasRendered = defaultSlotHasRendered;
-        this.bodyId = bodyId;
-        this.baseUpdateBodyCallback = updateBodyCallback;
-        this.bodyTabElemRef = firstTabbableElemRef || null;
-        unRegisterCallback(() => {
-            this.unregisterBody();
-        });
-        // cover case if modalBody is removed, then added back
-        // required to correctly set the CSS classes on modalBody
-        this.updateModalBodyHeight();
-
-        // since modalBody registration occurs async, and only after this.modal exists
-        // using this as a proxy for setting modal.size value to local modalBase state
-        if (features.ENABLE_MODAL_REDUCE_MOTION) {
-            if (this.isModalSizeNotSet) {
-                this.size = this.modal?.size || null;
-            }
-        }
-
-        // ModalBody can register 2+ times when initially rendering
-        if (!this.windowResizeEventBound) {
-            this.addWindowResizeEventListener();
-        }
-        if (!this.windowOrientationEventBound) {
-            this.addOrientationChangeListener();
-        }
-        if (!this.focusinEventBound) {
-            this.addFocusinEventListener();
-        }
-    }
-
-    /**
-     * When modalBody present, update private tracked state
-     * @param {Event} e The private custom registration event of modalBody
-     * @private
-     */
-    handleBodyRegister(e: CustomEvent): void {
-        const { detail } = e;
-        this.registerBody(detail);
-        e.stopPropagation();
-    }
-
-    /**
-     * When modalBody removed or at startup, initialize private tracked modalBody state
-     * @private
-     */
-    initBodyState(): void {
-        this.bodyRegistered = false;
-        this.bodyDefaultSlotIsPopulated = false;
-        this.bodySlotHasRendered = false;
-        this.bodyId = null;
-        this.baseUpdateBodyCallback = null;
-        this.bodyResizeScheduled = false;
-        this.bodyTabElemRef = null;
-        this.removeModalEventListeners();
-    }
-
-    /**
-     * Sets private tracked state related to modalHeader, when removed
-     * @private
-     */
-    unregisterHeader(): void {
-        this.initHeaderState();
-        this.updateAriaLabel();
-    }
-
-    /**
-     * update the modalBase tracked header height value
-     * @private
-     */
-    updateHeaderHeight(value: number): void {
-        this.headerHeight = !Number.isNaN(value) && value >= 0 ? value : 0;
-    }
-
-    /**
-     * Registers modalHeader with its parent modal, when present
-     * Sets private tracked state about modalHeader
-     * Called when 'onprivatemodalheaderregister' event gets fired
-     * @param {Object} detail Passed details object from modalHeader
-     * @private
-     */
-    registerHeader({
-        defaultSlotIsPopulated,
-        defaultSlotWrapperId,
-        defaultSlotHasRendered,
-        unRegisterCallback,
-        labelIsPopulated,
-        headerHeight,
-        headerRef,
-        labelId,
-    }: {
-        defaultSlotIsPopulated: boolean;
-        defaultSlotWrapperId: string;
-        defaultSlotHasRendered: boolean;
-        unRegisterCallback: Function; // eslint-disable-line @typescript-eslint/no-unsafe-function-type
-        labelIsPopulated: boolean;
-        headerHeight: number;
-        headerRef: HTMLElement;
-        labelId: string;
-    }): void {
-        this.headerRegistered = true;
-        this.updateHeaderHeight(headerHeight);
-        this.headerDefaultSlotIsPopulated = defaultSlotIsPopulated;
-        this.headerSlotHasRendered = defaultSlotHasRendered;
-        this.headerSlotWrapperId = defaultSlotWrapperId;
-        this.headerLabelId = labelId;
-        this.headerLabelIsPopulated = labelIsPopulated;
-        this.headerTitleRef = headerRef;
-        unRegisterCallback(() => {
-            this.unregisterHeader();
-        });
-        // update modalBody max-height values
-        if (this.bodyRegistered) {
-            this.updateModalBodyHeight();
-        }
-        // since modalHeader registration occurs async, and only after modal exist
-        // using this as a proxy for setting modal.size value to local modalBase state
-        if (features.ENABLE_MODAL_REDUCE_MOTION) {
-            if (this.isModalSizeNotSet) {
-                this.size = this.modal?.size || null;
-            }
-        }
-    }
-
-    /**
-     * Event handler for private modalHeader registration
-     * When modalHeader present, update private tracked state
-     * @param {Event} e Private custom registration event fired
-     * @private
-     */
-    handleHeaderRegister(e: CustomEvent): void {
-        const { detail } = e;
-        this.registerHeader(detail);
-        this.updateAriaLabel();
-        e.stopPropagation();
-    }
-
-    /**
-     * When modalHeader removed or at startup, initialize
-     * private tracked modalHeader state
-     * @private
-     */
-    initHeaderState(): void {
-        this.headerRegistered = false;
-        this.headerHeight = 0;
-        this.headerDefaultSlotIsPopulated = false;
-        this.headerSlotWrapperId = null;
-        this.headerSlotHasRendered = false;
-        this.headerLabelId = null;
-        this.headerLabelIsPopulated = null;
-        this.headerTitleRef = null;
-    }
-
-    /**
-     * Sets private tracked state related to modalFooter, when removed
-     * @private
-     */
-    unregisterFooter(): void {
-        this.initFooterState();
-    }
-
-    /**
-     * update the modalBase tracked footer height value
-     * @private
-     */
-    updateFooterHeight(value: number): void {
-        this.footerHeight = !Number.isNaN(value) && value >= 0 ? value : 0;
-    }
-
-    /**
-     * Registers modalFooter with its parent modal, when present
-     * Sets private tracked state about modalFooter
-     * Called when 'onprivatemodalfooterregister' event gets fired
-     * @param {Object} detail Passed details object from modalFooter
-     * @private
-     */
-    registerFooter({
-        defaultSlotIsPopulated,
-        defaultSlotHasRendered,
-        footerHeight,
-        unRegisterCallback,
-    }: {
-        defaultSlotIsPopulated: boolean;
-        defaultSlotHasRendered: boolean;
-        footerHeight: number;
-        unRegisterCallback: Function; // eslint-disable-line @typescript-eslint/no-unsafe-function-type
-    }): void {
-        this.footerRegistered = true;
-        this.footerDefaultSlotIsPopulated = defaultSlotIsPopulated;
-        this.footerSlotHasRendered = defaultSlotHasRendered;
-        this.updateFooterHeight(footerHeight);
-        unRegisterCallback(() => {
-            this.unregisterFooter();
-        });
-        // update modalBody max-height values
-        if (this.bodyRegistered) {
-            this.updateModalBodyHeight();
-        }
-        // since modalFooter registration occurs async, and only after modal exist
-        // using this as a proxy for setting modal.size value to local modalBase state
-        if (features.ENABLE_MODAL_REDUCE_MOTION) {
-            if (this.isModalSizeNotSet) {
-                this.size = this.modal?.size || null;
-            }
-        }
-    }
-
-    /**
-     * Event handler for private modalFooter registration
-     * When modalFooter present, update private tracked state
-     * @param {Event} e Private custom registration event fired
-     * @private
-     */
-    handleFooterRegister(e: CustomEvent): void {
-        const { detail } = e;
-        this.registerFooter(detail);
-        e.stopPropagation();
-    }
-
-    /**
-     * When modalFooter removed or at startup, initialize
-     * private tracked modalFooter state
-     * @private
-     */
-    initFooterState(): void {
-        this.footerRegistered = false;
-        this.footerHeight = 0;
-        this.footerSlotHasRendered = false;
-        this.footerDefaultSlotIsPopulated = false;
-    }
-
-    /**
-     * When the modalBody content height is tall, it requires max-height
-     * to be set in order to prevent overflow of the modal offscreen
-     * Throttling occurs to prevent calling this method every time
-     * the window.onresize event fires
-     * @private
-     */
-    updateModalBodyHeight(): void {
-        // check if org has access to reflow resize CSS, defaults to false
-        if (orgHasWCAGResizeReflowSC) {
-            this.template
-                .querySelector('[data-container]')
-                .classList.add('slds-modal__container__reflow_resize');
-        }
-
-        clearTimeout(this.timeoutId);
-        this.timeoutId = 0;
-
-        if (this.updateHeaderCallback) {
-            // Update the header size
-            this.updateHeaderCallback({ size: this.size });
-        }
-
-        if (this.updateFooterCallback) {
-            // Update the footer size
-            this.updateFooterCallback({ size: this.size });
-        }
-
-        if (this.bodyRegistered && !this.bodyResizeScheduled) {
-            // check, and update isSmallScreenSize before
-            // callback to modalBody
-            this.setIsSmallScreenSize();
-            // eslint-disable-next-line @lwc/lwc/no-async-operation, @lwc/lwc/ssr-no-restricted-browser-globals
-            requestAnimationFrame(() => {
-                // eslint-disable-next-line @lwc/lwc/ssr-no-restricted-browser-globals
-                this.bodyResizeScheduled = false;
-                if (this.baseUpdateBodyCallback) {
-                    const values = {
-                        footerHeight: this.footerHeight || 0,
-                        headerHeight: this.headerHeight || 0,
-                        // backdrop values can be used as proxies for screen width / height
-                        backdropHeight: this.backdropDimensions.height,
-                        backdropWidth: this.backdropDimensions.width,
-                        sizeSetFull: this.size === SIZE_FULL,
-                        isSmallScreenSize: this.isSmallScreenSize,
-                        size: this.size,
-                    };
-                    this.baseUpdateBodyCallback(values);
-                }
-            });
-            this.bodyResizeScheduled = true;
-        }
-    }
-
-    /**
-     * Provide debounce / throttling to prevent modalBody callback
-     * from being fired every time window.onresize event fires
-     * @private
-     */
-    scheduleWindowResizeEvent(): void {
-        if (this.timeoutId === 0) {
-            // eslint-disable-next-line @lwc/lwc/no-async-operation
-            this.timeoutId = setTimeout(() => {
-                this.updateModalBodyHeight();
-            }, DEBOUNCE_RESIZE) as unknown as number;
-        }
-    }
-
-    /**
-     * Event handler for window.onresize event
-     * @private
-     */
-    handleWindowResizeEvent = (): void => {
-        this.scheduleWindowResizeEvent();
-    };
-
-    /**
-     * Add window 'resize' event listener when modalBody is present
-     * this only gets used by modalBody, so only gets wired up when
-     * registerBody function called
-     * @private
-     */
-    addWindowResizeEventListener(): void {
-        if (!import.meta.env.SSR && !this.windowResizeEventBound) {
-            window.addEventListener('resize', this.handleWindowResizeEvent);
-            this.windowResizeEventBound = true;
-        }
-    }
-
-    /**
-     * Detach window.onresize event listener when modalBody is removed
-     * @private
-     */
-    removeWindowResizeEventListener(): void {
-        if (!import.meta.env.SSR && this.windowResizeEventBound) {
-            window.removeEventListener('resize', this.handleWindowResizeEvent);
-            clearTimeout(this.timeoutId);
-            this.timeoutId = 0;
-            this.windowResizeEventBound = false;
-        }
-    }
-
-    /**
-     * Remove screen orientation 'change' listener
-     * @private
-     */
-    removeOrientationChangeListener(): void {
-        if (this.windowOrientationEventBound && this.portraitMatchMedia) {
-            this.portraitMatchMedia.removeEventListener(
-                'change',
-                this.screenOrientationChangeHandler
-            );
-            this.portraitMatchMedia = null;
-            this.windowOrientationEventBound = false;
-        }
-        if (this.screenOrientationChangeHandler) {
-            this.screenOrientationChangeHandler = null;
-        }
-    }
-
-    /**
-     * Add screen orientation 'change' listener.
-     * orientation changes: 'portrait' -> 'landscape' -> 'portrait'
-     */
-    addOrientationChangeListener(): void {
-        if (!import.meta.env.SSR) {
-            this.portraitMatchMedia = window.matchMedia(
-                '(orientation: portrait)'
-            );
-            this.screenOrientationChangeHandler =
-                this.handleWindowResizeEvent.bind(this);
-            if (this.portraitMatchMedia) {
-                this.portraitMatchMedia.addEventListener(
-                    'change',
-                    this.screenOrientationChangeHandler
-                );
-                this.windowOrientationEventBound = true;
-            }
-        }
-    }
-
-    /**
-     * == W-12654751 P1 a11y bug ==
-     *
-     * Adds an event listener to listen and handle to 'focusin' events.
-     * All Lightning Modals must trap user focus, while they are open.
-     */
-    addFocusinEventListener(): void {
-        if (!this.focusinEventBound) {
-            this.focusinEventBound = true;
-            // eslint-disable-next-line @lwc/lwc/ssr-no-restricted-browser-globals
-            window.addEventListener(
-                // eslint-disable-next-line @lwc/lwc/ssr-no-restricted-browser-globals
-                'focusin',
-                modalFocusinEventHandler.bind(this)
-            );
-        }
-    }
-
-    /**
-     * == W-12654751 P1 a11y bug ==
-     *
-     * Remove event listener for 'focusin' events, only when the base modal is closed.
-     * No-op when modals stacked on top of a base modal are closed.
-     */
-    removeFocusinEventListener(): void {
-        if (this.focusinEventBound) {
-            this.focusinEventBound = false;
-            // eslint-disable-next-line @lwc/lwc/ssr-no-restricted-browser-globals
-            window.removeEventListener(
-                // eslint-disable-next-line @lwc/lwc/ssr-no-restricted-browser-globals
-                'focusin',
-                modalFocusinEventHandler.bind(this)
-            );
-        }
-    }
-
-    handleModalBaseFocusin = modalFocusinEventHandler.bind(this);
-
-    handleLastFocusedElem(e: CustomEvent): void {
-        if (!(e.detail && e.detail[secure])) {
-            // eslint-disable-next-line no-console
-            console.error(
-                'Invalid access to onprivatelightningmodallastfocus event'
-            );
-            return;
-        }
-        e.stopPropagation();
-
-        this.lastFocusedElement = e.detail.privatelightningmodallastfocus;
-    }
-
-    /**
-     * determine if the current screen is less than SMALL_SCREEN_SIZE
-     * for Modal, screen size detection is simplified to what's required
-     * for the size="full" feature addition, which is a single breakpoint
-     * either (a) at or below 480 pixels (small = full screen modal behavior),
-     * or (b) at or above 481 (large = default modal behavior)
-     * @private
-     */
-    setIsSmallScreenSize() {
-        if (!import.meta.env.SSR) {
-            const docElem = (document && document.documentElement) || null;
-            const browserWidth = docElem
-                ? docElem.clientWidth
-                : window.innerWidth;
-            const isSmallScreenSize = browserWidth <= SMALL_SCREEN_SIZE;
-            if (isSmallScreenSize !== this.isSmallScreenSize) {
-                this.isSmallScreenSize = isSmallScreenSize;
-            }
-        }
-    }
-
-    removeModalEventListeners(): void {
-        this.removeWindowResizeEventListener();
-        this.removeOrientationChangeListener();
-        this.removeFocusinEventListener();
-    }
-
-    /**
-     * When modal is being created, initialize
-     * private tracked modal base/default state
-     * this is a collection of state variables
-     * that are not including modalHeader, modalBody,
-     * modalFooter
-     * @private
-     */
-    initBaseState(): void {
-        // setting initialRender true handles the case where modal
-        // is added / removed/added back to DOM
-        this.initialRender = true;
-        this.autoFocusCompletedOnce = false;
-        this.windowResizeEventBound = false;
-        this.timeoutId = 0;
-        this.disableCloseButton = false;
-        this.modalLabel = null;
-        this.modalLabelledBy = null;
-        this.modalDescribedBy = null;
-        this.showAriaLiveMessage = false;
-        this.ariaLiveMessage = '';
-        this.savedInertElements = [];
-        this.savedActiveElement = null;
-        this.isModalOpen = false;
-        this.isModalTransitioningIn = false;
-        this.isModalClosing = false;
-        this._size = null;
-        // browser screen size
-        this.isSmallScreenSize = null;
-    }
-
-    /**
-     * Reset all modal state
-     * @private
-     */
-    initModalState(): void {
-        this.initBaseState();
-        this.initHeaderState();
-        this.initBodyState();
-        this.initFooterState();
-    }
-
-    connectedCallback(): void {
-        super.connectedCallback();
-        this.initModalState();
-        // check for screen size right away
-        // not adding event listeners here,
-        // as 'resize' and 'orientation' events
-        // are utilized by modalBody, see registerBody()
-        this.setIsSmallScreenSize();
-    }
-
-    disconnectedCallback(): void {
-        // Defensive cleanup for abrupt modal removal
-        // This handles cases where handlePrivateClose never gets called
-        this.handleModalCloseState();
-
-        this.removeModalEventListeners();
-        this.closeModal();
-    }
-
-    renderedCallback(): void {
-        if (this.initialRender) {
-            this.openModal();
-            this.initialRender = false;
-        } else {
-            // wait until lightning-modal is defined
-            this.updateAriaLabel();
-            this.updateAriaDescription();
-            // queue show only once
-            if (!this.isModalTransitioningIn) {
-                this.queueShowModal();
-            }
-            // autoFocus once only
-            if (!this.autoFocusCompletedOnce) {
-                // check disableClose internal state and relevant DOM changes
-                this.toggleDisableCloseButton();
-                this.focusFirstElement();
-            }
-            // after first render, check for this.modal.size
-            // this check exists in register|Body|Header|Footer functions
-            if (features.ENABLE_MODAL_REDUCE_MOTION) {
-                if (this.isModalSizeNotSet) {
-                    this.size = this.modal?.size || null;
-                }
-            }
-        }
-        this.updateModalBodyHeight();
-    }
-}