lightning-base-components 1.14.6-alpha → 1.15.2-alpha

package/src/lightning/interactiveDialogBase/interactiveDialogBase.js

@@ -0,0 +1,200 @@
+import { classSet } from 'lightning/utils';
+import {
+    hasAnimation,
+    normalizeString,
+    synchronizeAttrs,
+    getRealDOMId,
+} from 'lightning/utilsPrivate';
+import { instanceName } from 'lightning/overlayUtils';
+import { findAllTabbableElements } from 'lightning/focusUtils';
+import LightningModalBase from 'lightning/modalBase';
+import labelOK from '@salesforce/label/LightningInteractiveDialogBase.ok';
+import labelCancel from '@salesforce/label/LightningInteractiveDialogBase.cancel';
+
+// options for header theme based on SLDS themes
+const themeOptions = [
+    'default',
+    'shade',
+    'inverse',
+    'alt-inverse',
+    'success',
+    'info',
+    'warning',
+    'error',
+    'offline',
+];
+
+/**
+ * Base component used for lightning-alert,
+ * lightning-confirm and lightning-prompt
+ */
+export default class LightningModal extends LightningModalBase {
+    static [instanceName] = 'lightning-interactive-dialog-base';
+
+    label;
+    description;
+    okText = labelOK;
+    cancelText = labelCancel;
+
+    getChildProperty(property) {
+        if (this.defaultSlot) {
+            return this.defaultSlot.firstChild[property];
+        }
+        return null;
+    }
+
+    /**
+     * Sets variant to determine
+     * if header or headerless
+     */
+    setVariant() {
+        const variant = this.getChildProperty('variant');
+        const normalizedVariant = normalizeString(variant, {
+            fallbackValue: 'header',
+            validValues: ['header', 'headerless'],
+        });
+        this.showHeader = normalizedVariant === 'header';
+    }
+
+    /**
+     * Calls functions to set all properties
+     * that depend on slot being rendered
+     */
+    setChildProperties(detail) {
+        this.role = detail.role;
+        this.label = detail.label;
+        this.hideCancel = detail.hideCancel;
+        this.getOkValue = detail.getOkValue;
+        this.getCancelValue = detail.getCancelValue;
+        this.description = detail.showDescription ? detail.message : '';
+        this.setVariant();
+    }
+
+    updateAriaLabelledBy() {
+        if (this.showHeader) {
+            const heading = this.template.querySelector('[data-modal-heading]');
+            const headingId = getRealDOMId(heading);
+            synchronizeAttrs(this.modalWrapper, {
+                'aria-labelledby': headingId,
+            });
+        }
+    }
+
+    /**
+     * gets aria-label value to set through template
+     * ensures that renderedCallback gets extra call needed
+     */
+    get ariaLabel() {
+        return this.showHeader ? null : this.label;
+    }
+
+    get computedModalHeaderCssClasses() {
+        const theme = this.getChildProperty('theme');
+        const normalizedTheme = normalizeString(theme, {
+            fallbackValue: 'default',
+            validValues: themeOptions,
+        });
+        const classes = classSet('slds-modal__header slds-theme_alert-texture');
+        classes.add(`slds-theme_${normalizedTheme}`);
+        return classes.toString();
+    }
+
+    get computedModalContentCssClasses() {
+        const classes = classSet('slds-modal__content slds-p-around_medium');
+        classes.add({
+            'slds-modal__content_headless': !this.showHeader,
+        });
+        return classes.toString();
+    }
+
+    get computedModalCssClasses() {
+        //waiting for x-small modal size
+        const classes = classSet('slds-modal fix-slds-modal slds-modal_prompt');
+        if (hasAnimation()) {
+            classes.add({
+                'slds-fade-in-open': this.isModalTransitioningIn,
+            });
+        } else {
+            classes.add({
+                'slds-fade-in-open': true,
+            });
+        }
+        return classes.toString();
+    }
+
+    /**
+     * Handles clicking the "OK" button
+     * Closes modal with "okValue" set in child
+     */
+    handleOkClick() {
+        let okValue;
+        if (this.getOkValue) {
+            okValue = this.getOkValue();
+        }
+        this.modal.close(okValue);
+    }
+
+    /**
+     * Handles clicking the "Cancel" button and
+     * Overrides handleCloseClick in modalBase
+     * to address closing by "Escape" use case
+     * Closes modal with "cancelValue" set in child
+     */
+    handleCloseClick() {
+        let cancelValue;
+        if (this.getCancelValue) {
+            cancelValue = this.getCancelValue();
+        }
+        this.modal.close(cancelValue);
+    }
+
+    /**
+     * Focus/select first focusable element in slot
+     * if present, otherwise focuses wrapper
+     */
+    focusElement() {
+        const tabbableElems = findAllTabbableElements(this.defaultSlot);
+        if (tabbableElems && tabbableElems.length) {
+            const focusElem = tabbableElems[0];
+            focusElem.focus();
+            if (focusElem.select) {
+                focusElem.select();
+            }
+        } else {
+            this.modalWrapper.focus();
+        }
+    }
+
+    /**
+     * Event handler for childrender event
+     * from alert/confirm/prompt
+     * Sets properties, aria attributes
+     * and focuses element
+     */
+    handlePrivateChildRender(event) {
+        event.stopPropagation();
+        this.setChildProperties(event.detail || {});
+        if (!this.isModalTransitioningIn) {
+            this.queueShowModal();
+        }
+    }
+
+    /**
+     * Opens modal on initial render, sets aria attributes
+     * and focuses element on second render
+     */
+    renderedCallback() {
+        if (this.initialRender) {
+            this.openModal();
+            this.initialRender = false;
+        } else if (this.modalWrapper) {
+            this.template.host.style = 'z-index: 9099; position: absolute;';
+            this.updateAriaDescription();
+            this.updateAriaLabelledBy();
+            if (!this.autoFocusCompletedOnce) {
+                this.focusElement();
+                this.autoFocusCompletedOnce = true;
+            }
+        }
+    }
+}

package/src/lightning/menuItem/menuItem.js

@@ -222,7 +222,7 @@ export default class LightningMenuItem extends LightningElement {
         return this.isMenuItemCheckbox ? 'menuitemcheckbox' : 'menuitem';
     }
 
-    handleBlur() {
+    handleBlur(event) {
         this.dispatchEvent(new CustomEvent('blur'));
 
         // we need to trigger a private blur to make it bubble and be handled by parent button-menu
@@ -231,6 +231,9 @@ export default class LightningMenuItem extends LightningElement {
                 composed: true,
                 bubbles: true,
                 cancelable: true,
+                detail: {
+                    relatedTarget: event.relatedTarget,
+                },
             })
         );
     }

package/src/lightning/modalBase/modalBase.css

@@ -0,0 +1,20 @@
+/* Modal close button */
+
+.fix-slds-modal-close-disabled {
+    opacity: 0.15;
+}
+
+/* Required for autofocus to work correctly:
+   - child elements of modal appear 'visibility: hidden' at
+     the moment that they are being reviewed for eligibility
+     for focus in focus.js at isElementVisible()
+*/
+.fix-slds-modal {
+    visibility: visible;
+    z-index: unset;
+}
+
+/* Required for z-index */
+.fix-slds-backdrop {
+    z-index: unset;
+}

package/src/lightning/modalBase/modalBase.html

@@ -0,0 +1,54 @@
+<template>
+    <div
+        class={modalBackdropCssClasses}
+        role="presentation"
+        data-backdrop
+    ></div>
+    <lightning-focus-trap>
+        <section
+            role="dialog"
+            tabindex="-1"
+            aria-modal="true"
+            class={modalCssClasses}
+            onkeydown={handleModalKeyDown}
+            onprivatemodalheaderregister={handleHeaderRegister}
+            onprivatemodalbodyregister={handleBodyRegister}
+            onprivatemodalfooterregister={handleFooterRegister}
+            onprivateclose={handlePrivateClose}
+            onprivatedisableclosebutton={handlePrivateDisableCloseButton}
+            data-modal
+        >
+            <template if:true={showAriaDescribedBy}>
+                <span
+                    id="modal-description"
+                    class="slds-assistive-text"
+                    data-aria-description
+                >{description}</span>
+            </template>
+            <template if:true={showAriaLiveMessage}>
+                <span
+                    aria-live="polite"
+                    role="status"
+                    class="slds-assistive-text"
+                    data-aria-live-message
+                >{ariaLiveMessage}</span>
+            </template>
+                <div
+                    class="slds-modal__container"
+                    data-container
+                >
+                    <lightning-button-icon
+                        class={modalCloseButtonCssClasses}
+                        icon-name="utility:close"
+                        variant="bare-inverse"
+                        alternative-text={closeButtonAltText}
+                        onclick={handleCloseClick}
+                        size="large"
+                        disabled={disableCloseButton}
+                        data-close-button
+                    ></lightning-button-icon>
+                    <div data-slot lwc:dom="manual"></div>
+                </div>
+        </section>
+    </lightning-focus-trap>
+</template>