lightning-base-components 1.14.3-alpha → 1.14.7-alpha

package/src/lightning/modalBase/modalBase.js

@@ -0,0 +1,1039 @@
+import { api, LightningElement } from 'lwc';
+import { classSet } from 'lightning/utils';
+import {
+    makeEverythingExceptElementInert,
+    normalizeString,
+    synchronizeAttrs,
+    restoreInertness,
+    hasAnimation,
+    ARIA,
+    isAriaDescriptionSupported,
+} from 'lightning/utilsPrivate';
+import { instanceName, secure } from 'lightning/overlayUtils';
+import { getElementWithFocus } from 'lightning/focusUtils';
+import closeButtonAltText from '@salesforce/label/LightningModalBase.cancelandclose';
+import disableCloseBtnMessage from '@salesforce/label/LightningModalBase.waitstate';
+
+const DEBOUNCE_RESIZE = 300;
+
+export default class LightningModalBase extends LightningElement {
+    // this is visible in DOM, changed from 'lightning-modal-base'
+    static [instanceName] = 'lightning-modal-base';
+
+    // private tracked state
+    initialRender = true;
+    autoFocusCompletedOnce = false;
+    windowResizeEventsBound = false;
+    timeoutId = 0;
+    disableCloseButton = false;
+    sectionAriaBusy = null;
+    closeButtonAltText = closeButtonAltText;
+    disableCloseBtnMessage = disableCloseBtnMessage;
+    // modalHeader, child
+    headerRegistered = false;
+    headerHeight = 0;
+    headerDefaultSlotIsPopulated = false;
+    headerSlotWrapperId = null;
+    headerSlotHasRendered = false;
+    headerLabelId = null;
+    headerLabelIsPopulated = null;
+    headerTitleRef = null;
+    headerTabElemRef = null;
+
+    // modalBody, child
+    bodyRegistered = false;
+    bodyDefaultSlotIsPopulated = false;
+    bodySlotHasRendered = false;
+    bodyId = null;
+    baseUpdateBodyCallback = null;
+    bodyResizeScheduled = false;
+    bodyTabElemRef = null;
+
+    // modalFooter, child
+    footerRegistered = false;
+    footerHeight = 0;
+    footerSlotHasRendered = false;
+    footerDefaultSlotIsPopulated = false;
+    footerTabElemRef = null;
+
+    // aria attributes
+    modalLabel = null;
+    modalLabelledBy = null;
+    modalDescribedBy = null;
+    // currently used for disableClose
+    showAriaLiveMessage = false;
+    ariaLiveMessage = '';
+
+    // modal features
+    isModalOpen = false;
+    isModalTransitioningIn = false;
+    _size = 'medium';
+    // modal background elements
+    savedInertElements = [];
+    // before modal opened, element previously focused
+    savedActiveElement;
+
+    /**
+     * <lightning-modal> label value
+     * Text to display as the heading at the top of the modal
+     */
+    get label() {
+        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() {
+        const modal = this.modal;
+        if (!modal) {
+            return '';
+        }
+        return modal.description;
+    }
+
+    /**
+     * Get the current modal size, calculated as a percentage of the viewport.
+     * Valid values are small, medium, and large. The default is medium.
+     * @type {string}
+     * @default medium
+     */
+    get size() {
+        const sizeDefault = 'medium';
+        const modal = this.modal;
+        if (!modal) {
+            return sizeDefault;
+        }
+
+        // get the size value from <lightning-modal>
+        return normalizeString(modal.size, {
+            fallbackValue: sizeDefault,
+            validValues: ['small', 'medium', 'large'],
+        });
+    }
+
+    /**
+     * <lightning-modal> disableClose value
+     * Get attribute to trigger disabling ability to dismiss modal temporarily
+     */
+    get disableClose() {
+        const modal = this.modal;
+        if (!modal) {
+            return false;
+        }
+        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
+     */
+    @api
+    get defaultSlot() {
+        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() {
+        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() {
+        return (this.defaultSlot && this.defaultSlot.childNodes[0]) || null;
+    }
+
+    /**
+     * 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() {
+        return this.template.querySelector('[data-aria-description]');
+    }
+
+    /**
+     * Get the lightning-button-icon (close button element)
+     * @returns {(HTMLElement|null)}
+     * @private
+     */
+    get modalCloseButton() {
+        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() {
+        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() {
+        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 backdropHeight() {
+        const backdropElem = this.modalBackdrop;
+        const backdropRect = backdropElem
+            ? backdropElem.getBoundingClientRect()
+            : {};
+        const { height } = backdropRect;
+        return height || 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() {
+        let classes = classSet('slds-modal fix-slds-modal');
+        const sizeClass = 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_medium': sizeClass === 'medium',
+            'slds-modal_large': sizeClass === 'large',
+            'slds-modal_small': sizeClass === '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() {
+        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();
+    }
+
+    /**
+     * Gets the CSS classes for the modal close button
+     * @returns {string} CSS class string
+     * @private
+     */
+    get modalCloseButtonCssClasses() {
+        let classes = classSet('slds-modal__close');
+        classes.add({
+            'fix-slds-modal-close-disabled': this.disableCloseButton,
+        });
+        return classes;
+    }
+
+    /**
+     * Saves the current active focused element on modal creation
+     * in order to be able to set focus back to that previous element
+     * @private
+     */
+    saveActiveElement() {
+        this.savedActiveElement = getElementWithFocus();
+    }
+
+    /**
+     * Renders most background elements inert, while modal active
+     * and saves them for later setting background elements active
+     * @private
+     */
+    renderBackgroundInert() {
+        this.savedInertElements = makeEverythingExceptElementInert(
+            this.template.host
+        );
+    }
+
+    /**
+     * Renders most background elements active, as modal closes
+     * @private
+     */
+    renderBackgroundActive() {
+        restoreInertness(this.savedInertElements);
+        this.savedInertElements = [];
+    }
+
+    /**
+     * Returns focus to background element previously focused,
+     * before modal existed
+     * @private
+     */
+    returnFocusToBackground() {
+        const { savedActiveElement } = this;
+        const isSavedElemInDOM = document.body.contains(savedActiveElement);
+        if (savedActiveElement && isSavedElemInDOM) {
+            savedActiveElement.focus();
+        } else {
+            // 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() {
+        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() {
+        this.saveActiveElement();
+        this.renderBackgroundInert();
+        if (!this.isModalOpen) {
+            this.isModalOpen = true;
+        }
+    }
+
+    /**
+     * Closing the modal wraps up the modal lifecycle
+     * before it is fully removed
+     * @private
+     */
+    closeModal() {
+        this.returnFocusToBackground();
+        this.renderBackgroundActive(this.savedInertElements);
+    }
+
+    /**
+     * 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 = () => {
+        // unset any previously set aria values
+        synchronizeAttrs(this.modalWrapper, {
+            [ARIA.LABELLEDBY]: null,
+            [ARIA.LABEL]: null,
+        });
+        // console.error when label empty
+        this.errorLabelRequired();
+    };
+
+    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
+     * and support of the newer ARIA 'aria-description'.
+     * At launch, modern browsers Firefox and Safari DO NOT support it. IE11 won't.
+     * @private
+     */
+    updateAriaDescription() {
+        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() {
+        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) {
+                synchronizeAttrs(this.modalWrapper, {
+                    [ARIA.LABELLEDBY]: headerLabelId,
+                    [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 {
+            // fallback to headless variant
+            // check label is actually set,
+            // and use aria-label instead of aria-labelledby
+            if (!labelIsEmpty) {
+                synchronizeAttrs(this.modalWrapper, {
+                    [ARIA.LABELLEDBY]: null,
+                    [ARIA.LABEL]: label,
+                });
+            } else {
+                // in headless variant, must have label value set
+                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() {
+        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" })';
+        console.error(errorMsg);
+    }
+
+    /**
+     * Handle the close button click, or via ESC key
+     * @private
+     */
+    handleCloseClick() {
+        // calls handlePrivateClose
+        if (!this.disableCloseButton) {
+            this.modal.close();
+        }
+    }
+
+    // Handle privateclose event firing is prevented from occurring
+    // when this.disableClose set true in modal.js
+    handlePrivateClose(e) {
+        if (!(e.detail && e.detail[secure])) {
+            console.error('Invalid access to privateclose event');
+            return;
+        }
+        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();
+        }
+        this.closeModal();
+    }
+
+    handlePrivateDisableCloseButton(e) {
+        if (!(e.detail && e.detail[secure])) {
+            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) {
+        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 (
+            !hasModifier &&
+            !this.disableCloseButton &&
+            (key === 'Esc' || key === 'Escape')
+        ) {
+            e.stopPropagation();
+            e.preventDefault();
+            this.handleCloseClick();
+        }
+    }
+
+    /**
+     * Utilized to auto set (autofocus) the browser's focus to
+     * the first interactive element within the modal children
+     * Fires custom cancelable event 'autofocus'
+     * autoFocus should only be done during the modal's creation
+     * Needs to wait until all elements have rendered in the DOM
+     * Details on autofocus decision tree under 'Opening Dialogs' section:
+     * https://www.lightningdesignsystem.com/accessibility/guidelines/global-focus/#dialogs
+     * For modal v1, ignore multi-step modal, as not part of scope
+     * @private
+     */
+    focusFirstElement() {
+        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 modalElement to be rendered to the DOM
+        if (autoFocusCompletedOnce || !modalElement) {
+            return;
+        }
+
+        const {
+            bodyRegistered,
+            footerRegistered,
+            headerRegistered,
+            headerTitleRef,
+            headerTabElemRef,
+            headerDefaultSlotIsPopulated,
+            headerSlotHasRendered,
+            bodyDefaultSlotIsPopulated,
+            bodySlotHasRendered,
+            bodyTabElemRef,
+            footerDefaultSlotIsPopulated,
+            footerSlotHasRendered,
+            footerTabElemRef,
+        } = 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;
+        }
+
+        // preferred autofocus-able elements (links:NOT(tooltip), inputs, buttons)
+        // located in order of preference:
+        // (1) lightning-modal-header,
+        // (2) lightning-modal-body,
+        // (3)) lightning-modal-footer
+        const preferredFocusElem =
+            headerTabElemRef || bodyTabElemRef || footerTabElemRef || null;
+
+        // fallback autofocus elements, in order of preference
+        // (1) modal heading (headless modal, not available),
+        // (2) close button (always present, current version)
+        // (3) outer modal element (always present, here ONLY as a backup,
+        //     for when hide or disable close button becomes available
+        const modalHeadingElem =
+            headerRegistered && headerTitleRef ? headerTitleRef : null;
+        const closeButtonElem = this.modalCloseButton;
+        const outerModalElem = this.modalWrapper;
+
+        const fallbackFocusElem =
+            modalHeadingElem || closeButtonElem || outerModalElem;
+
+        const focusElem = preferredFocusElem
+            ? preferredFocusElem
+            : fallbackFocusElem;
+
+        if (focusElem !== null) {
+            focusElem.focus();
+            this.autoFocusCompletedOnce = true;
+        } else {
+            // Should never happen since outerModalElem always present
+            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() {
+        // FUTURE TODO mechanism to support aria-describedby
+        // aria-describedby is optional, without a good reproducible pattern
+        this.initBodyState();
+        this.detachBodyResizeEvents();
+    }
+
+    /**
+     * 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,
+    }) {
+        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.updateBodyHeight();
+
+        // ModalBody can register 2+ times when initially rendering
+        if (!this.windowResizeEventsBound) {
+            this.bindBodyResizeEvents();
+        }
+    }
+
+    /**
+     * When modalBody present, update private tracked state
+     * @param {Event} e The private custom registration event of modalBody
+     * @private
+     */
+    handleBodyRegister(e) {
+        const { detail } = e;
+        this.registerBody(detail);
+        e.stopPropagation();
+    }
+
+    /**
+     * When modalBody removed or at startup, initialize private tracked modalBody state
+     * @private
+     */
+    initBodyState() {
+        this.bodyRegistered = false;
+        this.bodyDefaultSlotIsPopulated = false;
+        this.bodySlotHasRendered = false;
+        this.bodyId = null;
+        this.baseUpdateBodyCallback = null;
+        this.bodyResizeScheduled = false;
+        this.bodyTabElemRef = null;
+    }
+
+    /**
+     * Sets private tracked state related to modalHeader, when removed
+     * @private
+     */
+    unregisterHeader() {
+        this.initHeaderState();
+        this.updateAriaLabel();
+    }
+
+    /**
+     * 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,
+        firstTabbableElemRef,
+        defaultSlotWrapperId,
+        defaultSlotHasRendered,
+        unRegisterCallback,
+        labelIsPopulated,
+        headerHeight,
+        headerRef,
+        labelId,
+    }) {
+        this.headerRegistered = true;
+        this.headerHeight = headerHeight || 0;
+        this.headerDefaultSlotIsPopulated = defaultSlotIsPopulated;
+        this.headerSlotHasRendered = defaultSlotHasRendered;
+        this.headerSlotWrapperId = defaultSlotWrapperId;
+        this.headerLabelId = labelId;
+        this.headerLabelIsPopulated = labelIsPopulated;
+        this.headerTitleRef = headerRef;
+        this.headerTabElemRef = firstTabbableElemRef;
+        unRegisterCallback(() => {
+            this.unregisterHeader();
+        });
+        // update modalBody max-height values
+        if (this.bodyRegistered) {
+            this.updateBodyHeight();
+        }
+    }
+
+    /**
+     * Event handler for private modalHeader registration
+     * When modalHeader present, update private tracked state
+     * @param {Event} e Private custom registration event fired
+     * @private
+     */
+    handleHeaderRegister(e) {
+        const { detail } = e;
+        this.registerHeader(detail);
+        this.updateAriaLabel();
+        e.stopPropagation();
+    }
+
+    /**
+     * When modalHeader removed or at startup, initialize
+     * private tracked modalHeader state
+     * @private
+     */
+    initHeaderState() {
+        this.headerRegistered = false;
+        this.headerHeight = 0;
+        this.headerDefaultSlotIsPopulated = false;
+        this.headerSlotWrapperId = null;
+        this.headerSlotHasRendered = false;
+        this.headerLabelId = null;
+        this.headerLabelIsPopulated = null;
+        this.headerTitleRef = null;
+        this.headerTabElemRef = null;
+    }
+
+    /**
+     * Sets private tracked state related to modalFooter, when removed
+     * @private
+     */
+    unregisterFooter() {
+        this.initFooterState();
+    }
+
+    /**
+     * 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,
+        firstTabbableElemRef,
+    }) {
+        this.footerRegistered = true;
+        this.footerDefaultSlotIsPopulated = defaultSlotIsPopulated;
+        this.footerSlotHasRendered = defaultSlotHasRendered;
+        this.footerHeight = footerHeight || 0;
+        this.footerTabElemRef = firstTabbableElemRef || null;
+        unRegisterCallback(() => {
+            this.unregisterFooter();
+        });
+        // update modalBody max-height values
+        if (this.bodyRegistered) {
+            this.updateBodyHeight();
+        }
+    }
+
+    /**
+     * Event handler for private modalFooter registration
+     * When modalFooter present, update private tracked state
+     * @param {Event} e Private custom registration event fired
+     * @private
+     */
+    handleFooterRegister(e) {
+        const { detail } = e;
+        this.registerFooter(detail);
+        e.stopPropagation();
+    }
+
+    /**
+     * When modalFooter removed or at startup, initialize
+     * private tracked modalFooter state
+     * @private
+     */
+    initFooterState() {
+        this.footerRegistered = false;
+        this.footerHeight = 0;
+        this.footerSlotHasRendered = false;
+        this.footerDefaultSlotIsPopulated = false;
+        this.footerTabElemRef = null;
+    }
+
+    /**
+     * When window is resizing, need to debounce callback
+     * Track internal variable _resizing
+     * @returns {Boolean}
+     * @private
+     */
+    get modalResizing() {
+        if (!this._resizing) {
+            this._resizing = this.scheduleResize.bind(this);
+        }
+        return this._resizing;
+    }
+
+    /**
+     * 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
+     */
+    updateBodyHeight() {
+        clearTimeout(this.timeoutId);
+        this.timeoutId = 0;
+        const { bodyResizeScheduled, bodyRegistered, baseUpdateBodyCallback } =
+            this;
+
+        if (bodyRegistered && !bodyResizeScheduled) {
+            // eslint-disable-next-line @lwc/lwc/no-async-operation
+            requestAnimationFrame(() => {
+                this.bodyResizeScheduled = false;
+                if (bodyRegistered && baseUpdateBodyCallback) {
+                    const values = {
+                        footerHeight: this.footerHeight || 0,
+                        headerHeight: this.headerHeight || 0,
+                        backdropHeight: this.backdropHeight,
+                    };
+                    baseUpdateBodyCallback(values);
+                }
+            });
+            this.bodyResizeScheduled = true;
+        }
+    }
+
+    /**
+     * Provide debounce / throttling to prevent modalBody callback
+     * from being fired every time window.onresize event fires
+     * @private
+     */
+    scheduleResize() {
+        if (this.timeoutId === 0) {
+            // eslint-disable-next-line @lwc/lwc/no-async-operation
+            this.timeoutId = setTimeout(() => {
+                this.updateBodyHeight();
+            }, DEBOUNCE_RESIZE);
+        }
+    }
+
+    /**
+     * Event handler for window.onresize event
+     * @private
+     */
+    handleWindowResize = () => {
+        this.scheduleResize();
+    };
+
+    /**
+     * Bind window.onresize event listener when modalBody is present
+     * @private
+     */
+    bindBodyResizeEvents() {
+        if (window && !this.windowResizeEventsBound) {
+            window.addEventListener('resize', this.handleWindowResize);
+            this.windowResizeEventsBound = true;
+        }
+    }
+
+    /**
+     * Detach window.onresize event listener when modalBody is removed
+     * @private
+     */
+    detachBodyResizeEvents() {
+        if (window) {
+            window.removeEventListener('resize', this.handleWindowResize);
+            clearTimeout(this.timeoutId);
+            this.timeoutId = 0;
+            this.windowResizeEventsBound = false;
+        }
+    }
+
+    /**
+     * When modal is being created, initialize
+     * private tracked modal state
+     * @private
+     */
+    initState() {
+        // setting initialRender true handles the case where modal
+        // is added / removed/added back to DOM
+        this.initialRender = true;
+        this.autoFocusCompletedOnce = false;
+        this.windowResizeEventsBound = false;
+        this.timeoutId = 0;
+        this.disableCloseButton = false;
+        this.modalLabel = null;
+        this.modalLabelledBy = null;
+        this.modalDescribedBy = null;
+        this.showAriaLiveMessage = false;
+        this.ariaLiveMessage = '';
+        this._size = 'medium';
+        this.savedInertElements = [];
+        this.savedActiveElement = null;
+        this.isModalOpen = false;
+        this.isModalTransitioningIn = false;
+    }
+
+    connectedCallback() {
+        this.initState();
+        this.initHeaderState();
+        this.initBodyState();
+        this.initFooterState();
+    }
+
+    disconnectedCallback() {
+        if (this.windowResizeEventsBound) {
+            this.detachBodyResizeEvents();
+        }
+        this.closeModal();
+    }
+
+    renderedCallback() {
+        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) {
+                this.focusFirstElement();
+            }
+        }
+        this.updateBodyHeight();
+    }
+}