lightning-base-components 1.17.6-alpha → 1.18.1-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lightning-base-components",
-    "version": "1.17.6-alpha",
+    "version": "1.18.1-alpha",
     "license": "MIT",
     "files": [
         "external",

package/scopedImports/@salesforce-internal-core.appVersion.js

@@ -1 +1 @@
-export default '242';
+export default '244';

package/src/lightning/ariaObserver/ariaObserver.js

@@ -165,7 +165,7 @@ export default class AriaObserver {
         }
     }
 
-    privateExtractCorrectElements(selector, elements) {
+    privateExtractCorrectElements(selector = '', elements) {
         // Example: 'foo' + '-1'
         const selectors = selector.split(/\s/g);
         const matchSelectors = `(${selectors.join('|')})`;
@@ -193,11 +193,25 @@ export default class AriaObserver {
         for (const liveId in this.liveIds) {
             if (Object.prototype.hasOwnProperty.call(this.liveIds, liveId)) {
                 const thisId = this.liveIds[liveId];
-                if (!thisId.elements) {
+                if (!thisId.elements?.length) {
+                    const splitRefIds = splitIds(liveId);
                     // element refs are cached
-                    thisId.elements = Array.prototype.slice.call(
-                        root.querySelectorAll(thisId.selector)
-                    );
+                    const refElements = [
+                        ...root.querySelectorAll(thisId.selector),
+                    ];
+
+                    thisId.elements = refElements.sort((a, b) => {
+                        const idA = a
+                            .getAttribute('id')
+                            ?.replace(/-[0-9]+$/g, '');
+                        const idB = b
+                            .getAttribute('id')
+                            ?.replace(/-[0-9]+$/g, '');
+
+                        return (
+                            splitRefIds.indexOf(idA) - splitRefIds.indexOf(idB)
+                        );
+                    });
                 }
                 const newThisId = this.privateExtractCorrectElements(
                     thisId.refs,

package/src/lightning/buttonIcon/buttonIcon.js

@@ -143,6 +143,7 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
     tooltipValue = null;
     tooltipType = TooltipType.Info;
     rendered = false;
+    showTitle = true;
 
     /**
      * Generate a tooltip with the specified value and current tooltip type
@@ -164,7 +165,7 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
     }
 
     get computedTitle() {
-        return this.title || this.alternativeText || '';
+        return this.showTitle ? this.title || this.alternativeText || '' : null;
     }
 
     normalizeVariant(variant) {
@@ -322,9 +323,14 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
                 cancelable: true,
                 bubbles: true,
                 detail: {
+                    // Tooltip type should be toggle for some consumers like helptext
                     setTooltipType: (tooltipType) => {
                         this.tooltipType = tooltipType;
                     },
+                    // Title should not be set for some consumers like helptext (see W-12496300)
+                    showTitle: (showTitle) => {
+                        this.showTitle = showTitle;
+                    },
                 },
             })
         );

package/src/lightning/formattedAddress/formattedAddress.html

@@ -13,7 +13,7 @@
     </template>
 
     <template if:true={showMapLink}>
-        <a title={mapQuery} href={mapUrl}
+        <a aria-label={mapQuery} href={mapUrl}
             tabindex={internalTabIndex} target="_blank" rel="noopener">
             <template for:each={addressLines} for:item="line">
                 <div key={line} class="slds-truncate">

package/src/lightning/helptext/helptext.js

@@ -148,11 +148,12 @@ export default class LightningHelptext extends LightningElement {
 
     /**
      * Set lightning-button-icon tooltips to be created with toggle events
-     *
+     * and without the title attribute computed from alternative text (see W-12496300)
      * @param {*} event
      */
     handleButtonIconRegister(event) {
         event.stopPropagation();
         event.detail.setTooltipType(TooltipType.Toggle);
+        event.detail.showTitle(false);
     }
 }

package/src/lightning/modal/__docs__/modal.md

@@ -322,6 +322,8 @@ A modal can only fire events captured by the component that opened it, not the m
 
 To capture modal events, attach them in the `.open()` method invoked by the component that opens the modal.
 
+Capturing modal events requires [Lightning Web Security (LWS)](https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.security_lwsec_enable) to be enabled in the Salesforce org. See the **Modal Events with LWS and Lightning Locker** section for more information.
+
 For example, here's a custom `select` event dispatched from `MyModal`.
 
 ```js
@@ -374,6 +376,14 @@ handleOpenModal() {
 
 See [Create and Dispatch Events](https://developer.salesforce.com/docs/component-library/documentation/en/lwc/events_create_dispatch) in the LWC Dev Guide for more information about events.
 
+#### Modal Events with LWS and Lightning Locker
+
+Modal events work as expected when Lightning Web Security (LWS) is enabled within a Salesforce org, as described in the **Modal Events** section. If LWS isn't enabled in an org, Lightning Locker is in effect. 
+
+LWS is replacing Lightning Locker over time and is already enabled in many customer orgs. New orgs have LWS enabled by default. To enable LWS, see [Enable Lightning Web Security in an Org](https://developer.salesforce.com/docs/component-library/documentation/en/lwc/security_lwsec_enable) in the Lightning Web Components Developer Guide.
+
+Under Lightning Locker, when you fire events within `LightningModal`, the browser throws a `TypeError` related to `dispatchEvent`. If your modal component runs in an org that can’t enable LWS yet, the workaround is to wrap the code that calls `dispatchEvent` in a child component that extends `LightningElement`. Use the wrapper component as a child of one of the modal components in the modal template.
+
 #### Modal Events with Aura
 
 For `LightningModal`, only the top level LWC component or application can communicate to the parent Aura component or application layer with eventing. This topmost component is usually the one that opens the `LightningModal`. `LightningModal`'s child components can't event to a parent Aura component or application layer.
@@ -579,3 +589,4 @@ Customizing the styling on the white modal frame and background, close button, o
 The `lightning-modal-header` component renders the `label` value in an `<h1>` element. If your modal uses the header, begin any additional heading levels in the modal with `<h2>` for accessibility. Provide accessible structure by using heading levels up to `<h6>` appropriately. For more information, see [Semantic Structure, Headings on WebAim.org](https://webaim.org/techniques/semanticstructure/#headings).
 
 To include tagline text or link content for the header section, add it between the `<lightning-modal-header>` tags.
+

package/src/lightning/modal/__examples__disabled/demofootless/demofootless.html

@@ -1,6 +1,6 @@
 <template>
     <lightning-modal-header label={header}>
-        Here’s a tagline if you need it. It is allowed to extend across 
+        Here’s a tagline if you need it. It is allowed to extend across
         mulitple lines, so I’m making up content to show that to you.
         It is allowed to have links but this one doesn't have any links.
     </lightning-modal-header>

package/src/lightning/modalBase/modalBase.js

@@ -50,6 +50,7 @@ export default class LightningModalBase extends LightningElement {
     headerLabelIsPopulated = null;
     headerTitleRef = null;
     headerTabElemRef = null;
+    headerHeightCheck = null;
 
     // modalBody, child
     bodyRegistered = false;
@@ -71,6 +72,7 @@ export default class LightningModalBase extends LightningElement {
     footerSlotHasRendered = false;
     footerDefaultSlotIsPopulated = false;
     footerTabElemRef = null;
+    footerHeightCheck = null;
 
     // aria attributes
     modalLabel = null;
@@ -360,9 +362,7 @@ export default class LightningModalBase extends LightningElement {
      * @private
      */
     get computedCloseButtonVariant() {
-        return this.isSmallScreenSize && this.size === SIZE_FULL
-            ? 'bare'
-            : 'bare-inverse';
+        return this.shouldModalBeFullScreen() ? 'bare' : 'bare-inverse';
     }
 
     /**
@@ -820,6 +820,14 @@ export default class LightningModalBase extends LightningElement {
         this.updateAriaLabel();
     }
 
+    /**
+     * update the modalBase tracked header height value
+     * @private
+     */
+    updateHeaderHeight(value) {
+        this.headerHeight = !Number.isNaN(value) && value >= 0 ? value : 0;
+    }
+
     /**
      * Registers modalHeader with its parent modal, when present
      * Sets private tracked state about modalHeader
@@ -832,6 +840,7 @@ export default class LightningModalBase extends LightningElement {
         firstTabbableElemRef,
         defaultSlotWrapperId,
         defaultSlotHasRendered,
+        checkHeaderHeightCallback,
         unRegisterCallback,
         labelIsPopulated,
         headerHeight,
@@ -839,7 +848,7 @@ export default class LightningModalBase extends LightningElement {
         labelId,
     }) {
         this.headerRegistered = true;
-        this.headerHeight = headerHeight || 0;
+        this.updateHeaderHeight(headerHeight);
         this.headerDefaultSlotIsPopulated = defaultSlotIsPopulated;
         this.headerSlotHasRendered = defaultSlotHasRendered;
         this.headerSlotWrapperId = defaultSlotWrapperId;
@@ -847,6 +856,7 @@ export default class LightningModalBase extends LightningElement {
         this.headerLabelIsPopulated = labelIsPopulated;
         this.headerTitleRef = headerRef;
         this.headerTabElemRef = firstTabbableElemRef;
+        this.headerHeightCheck = checkHeaderHeightCallback;
         unRegisterCallback(() => {
             this.unregisterHeader();
         });
@@ -884,6 +894,7 @@ export default class LightningModalBase extends LightningElement {
         this.headerLabelIsPopulated = null;
         this.headerTitleRef = null;
         this.headerTabElemRef = null;
+        this.headerHeightCheck = null;
     }
 
     /**
@@ -894,6 +905,14 @@ export default class LightningModalBase extends LightningElement {
         this.initFooterState();
     }
 
+    /**
+     * update the modalBase tracked footer height value
+     * @private
+     */
+    updateFooterHeight(value) {
+        this.footerHeight = !Number.isNaN(value) && value >= 0 ? value : 0;
+    }
+
     /**
      * Registers modalFooter with its parent modal, when present
      * Sets private tracked state about modalFooter
@@ -907,12 +926,14 @@ export default class LightningModalBase extends LightningElement {
         footerHeight,
         unRegisterCallback,
         firstTabbableElemRef,
+        checkFooterHeightCallback,
     }) {
         this.footerRegistered = true;
         this.footerDefaultSlotIsPopulated = defaultSlotIsPopulated;
         this.footerSlotHasRendered = defaultSlotHasRendered;
-        this.footerHeight = footerHeight || 0;
+        this.updateFooterHeight(footerHeight);
         this.footerTabElemRef = firstTabbableElemRef || null;
+        this.footerHeightCheck = checkFooterHeightCallback;
         unRegisterCallback(() => {
             this.unregisterFooter();
         });
@@ -945,6 +966,7 @@ export default class LightningModalBase extends LightningElement {
         this.footerSlotHasRendered = false;
         this.footerDefaultSlotIsPopulated = false;
         this.footerTabElemRef = null;
+        this.footerHeightCheck = null;
     }
 
     /**
@@ -960,6 +982,63 @@ export default class LightningModalBase extends LightningElement {
         return this._resizing;
     }
 
+    /**
+     * Test to determine whether modal should display full screen behavior
+     * @returns {Boolean}
+     * @private
+     */
+    shouldModalBeFullScreen() {
+        return this.size === SIZE_FULL && this.isSmallScreenSize;
+    }
+
+    /**
+     * Under the right conditions, update the local tracked header height value
+     * @private
+     */
+    checkAndUpdateHeaderHeight() {
+        // important to verify that header is registered,
+        // and not on initial render of modal parent, since
+        // child component may not yet exist
+        const shouldCheckHeaderHeight =
+            !this.initialRender &&
+            this.headerRegistered &&
+            this.shouldModalBeFullScreen();
+        // when screen size changes, variable height content within the
+        // modal header can reflow
+        // for example: 3 rows of content in tagline can become 2 rows
+        if (shouldCheckHeaderHeight) {
+            const { changed: headerChangedHeight, value: newHeaderHeight } =
+                this.headerHeightCheck();
+            if (headerChangedHeight) {
+                this.updateHeaderHeight(newHeaderHeight);
+            }
+        }
+    }
+
+    /**
+     * Under the right conditions, update the local tracked footer height value
+     * @private
+     */
+    checkAndUpdateFooterHeight() {
+        // important to verify that footer is registered,
+        // and not on initial render of modal parent, since
+        // child component may not yet exist
+        const shouldCheckFooterHeight =
+            !this.initialRender &&
+            this.footerRegistered &&
+            this.shouldModalBeFullScreen();
+        // when screen size changes, variable height content within the
+        // modal footer can reflow
+        // for example: 1 row of buttons to 2 rows, or 2 rows to 1 row
+        if (shouldCheckFooterHeight) {
+            const { changed: footerChangedHeight, value: newFooterHeight } =
+                this.footerHeightCheck();
+            if (footerChangedHeight) {
+                this.updateFooterHeight(newFooterHeight);
+            }
+        }
+    }
+
     /**
      * When the modalBody content height is tall, it requires max-height
      * to be set in order to prevent overflow of the modal offscreen
@@ -970,17 +1049,18 @@ export default class LightningModalBase extends LightningElement {
     updateModalBodyHeight() {
         clearTimeout(this.timeoutId);
         this.timeoutId = 0;
-        const { bodyResizeScheduled, bodyRegistered, baseUpdateBodyCallback } =
-            this;
 
-        if (bodyRegistered && !bodyResizeScheduled) {
+        if (this.bodyRegistered && !this.bodyResizeScheduled) {
             // check, and update isSmallScreenSize before
             // callback to modalBody
             this.setIsSmallScreenSize();
+            // check for height changes in header or footer
+            this.checkAndUpdateHeaderHeight();
+            this.checkAndUpdateFooterHeight();
             // eslint-disable-next-line @lwc/lwc/no-async-operation
             requestAnimationFrame(() => {
                 this.bodyResizeScheduled = false;
-                if (bodyRegistered && baseUpdateBodyCallback) {
+                if (this.baseUpdateBodyCallback) {
                     const values = {
                         footerHeight: this.footerHeight || 0,
                         headerHeight: this.headerHeight || 0,
@@ -990,7 +1070,7 @@ export default class LightningModalBase extends LightningElement {
                         sizeSetFull: this.size === SIZE_FULL,
                         isSmallScreenSize: this.isSmallScreenSize,
                     };
-                    baseUpdateBodyCallback(values);
+                    this.baseUpdateBodyCallback(values);
                 }
             });
             this.bodyResizeScheduled = true;
@@ -1050,8 +1130,7 @@ export default class LightningModalBase extends LightningElement {
      * @private
      */
     removeOrientationChangeListener() {
-        // TODO START HERE, check for this.windowOrientationEventBound === true
-        if (this.portraitMatchMedia) {
+        if (this.windowOrientationEventBound && this.portraitMatchMedia) {
             this.portraitMatchMedia.removeEventListener(
                 'change',
                 this.screenOrientationChangeHandler
@@ -1072,7 +1151,7 @@ export default class LightningModalBase extends LightningElement {
         this.portraitMatchMedia = window.matchMedia('(orientation: portrait)');
         this.screenOrientationChangeHandler =
             this.handleWindowResizeEvent.bind(this);
-        if (typeof this.portraitMatchMedia === 'function') {
+        if (this.portraitMatchMedia) {
             this.portraitMatchMedia.addEventListener(
                 'change',
                 this.screenOrientationChangeHandler

package/src/lightning/modalFooter/modalFooter.js

@@ -9,7 +9,11 @@ const hideClass = 'slds-hide';
 const footerSelector = `.${footerClass}`;
 const footerSlotSelector = '[data-footer-slot]';
 // timeout footer height check
+// checking quickly yields faster resolution of correct
+// footer (not a typo) placement
 const SIZE_CHECK_TIMER = 50;
+// limited to 4 quick checks totalling 200 ms, which catches
+// any misreported heights based on reflow of content in modalFooter
 const MAX_HEIGHT_CHECKS = 4;
 
 /**
@@ -109,6 +113,20 @@ export default class LightningModalFooter extends LightningElement {
         return firstElem;
     }
 
+    /**
+     * if not the intial render, check for footer height chnage,
+     * when a window resize occurs
+     * @returns {Object}
+     * @private
+     */
+    handleModalFooterResizeCheck() {
+        // when not intial render, and footer height changed
+        // return the tracked value, otherwise indicate no change
+        return !this.initialRender && this.hasFooterHeightChanged()
+            ? { changed: true, value: this.footerHeightTracked }
+            : { changed: false, value: null };
+    }
+
     /**
      * Register modalFooter with modal parent, including callbacks to
      * unregister the modal footer
@@ -125,6 +143,8 @@ export default class LightningModalFooter extends LightningElement {
                 defaultSlotIsPopulated: this.isDefaultSlotPopulated,
                 defaultSlotHasRendered: !this.initialSlotRender,
                 firstTabbableElemRef: this.firstTabbableElement,
+                checkFooterHeightCallback:
+                    this.handleModalFooterResizeCheck.bind(this),
                 unRegisterCallback: (unregisterCallback) => {
                     this.unregisterCallback = unregisterCallback;
                 },
@@ -165,8 +185,7 @@ export default class LightningModalFooter extends LightningElement {
                     this.footerHeightChecked = 0;
                 } else {
                     this.footerHeightChecked++;
-                    const hasChanged = this.hasFooterHeightChanged();
-                    if (hasChanged) {
+                    if (this.hasFooterHeightChanged()) {
                         this.registerWithParent();
                     }
                 }

package/src/lightning/modalHeader/modalHeader.js

@@ -7,6 +7,12 @@ const modalHeaderSelector = '.slds-modal__header';
 const labelSelector = '[data-label]';
 const slotWrapperSelector = '[data-slot-wrapper]';
 const defaultSlotSelector = '[data-default-slot]';
+// timeout header height check
+// checking quickly yields faster resolution of footer placement
+const SIZE_CHECK_TIMER = 50;
+// limited to 4 quick checks totalling 200 ms, which catches
+// any misreported heights based on reflow of content
+const MAX_HEIGHT_CHECKS = 4;
 
 /**
  * Creates a header to display the heading and tagline at the top of a modal.
@@ -16,6 +22,9 @@ export default class LightningModalHeader extends LightningElement {
     initialRender = true;
     initialSlotRender = true;
     unregisterCallback = null;
+    headerHeightTracked = 0;
+    headerHeightChecked = 0;
+    timeoutId = 0;
 
     /**
      * Text to display as the heading at the top of the modal
@@ -44,7 +53,9 @@ export default class LightningModalHeader extends LightningElement {
         const divElem = this.template.querySelector(modalHeaderSelector);
         const headerRect = divElem ? divElem.getBoundingClientRect() : {};
         const { height } = headerRect;
-        return height || 0;
+        const heightValue = height || 0;
+        this.headerHeightTracked = heightValue;
+        return heightValue;
     }
 
     /**
@@ -144,6 +155,18 @@ export default class LightningModalHeader extends LightningElement {
         return (this.label && this.label.trim().length > 0) || false;
     }
 
+    /**
+     * if not the intial render, check for header height chnage,
+     * when a window resize occurs
+     * @returns {Object}
+     * @private
+     */
+    handleModalHeaderResizeCheck() {
+        return !this.initialRender && this.hasHeaderHeightChanged()
+            ? { changed: true, value: this.headerHeightTracked }
+            : { changed: false, value: null };
+    }
+
     /**
      * Register modalHeader with modal parent, including callbacks to
      * unregister the modal header
@@ -162,6 +185,8 @@ export default class LightningModalHeader extends LightningElement {
                 defaultSlotWrapperId: this.defaultSlotWrapperId,
                 defaultSlotIsPopulated: this.isDefaultSlotPopulated,
                 defaultSlotHasRendered: !this.initialSlotRender,
+                checkHeaderHeightCallback:
+                    this.handleModalHeaderResizeCheck.bind(this),
                 unRegisterCallback: (unregisterCallback) => {
                     this.unregisterCallback = unregisterCallback;
                 },
@@ -172,6 +197,46 @@ export default class LightningModalHeader extends LightningElement {
         this.dispatchEvent(evtRegister);
     }
 
+    /**
+     * Provide a means to check whether the tracked header height
+     * is different than the current header height to only call modalBase
+     * when there is a change in header height
+     * @private
+     */
+    hasHeaderHeightChanged() {
+        // note: calling this.headerHeight updates this.headerHeightTracked
+        // order of values checked here is required
+        const previousRenderedHeight = this.headerHeightTracked;
+        const currentRenderedHeight = this.headerHeight;
+        return currentRenderedHeight !== previousRenderedHeight;
+    }
+
+    /**
+     * On first render, provide a quick means of updating modalBase,
+     * if the modalHeader height changes.
+     * In rare cases, the height of the header between the
+     * normal or full size rendering can change depending on
+     * content within the header and the window width
+     * @private
+     */
+    scheduleHeaderHeightCheck() {
+        if (this.initialRender && this.timeoutId === 0) {
+            // eslint-disable-next-line @lwc/lwc/no-async-operation
+            this.timeoutId = setInterval(() => {
+                if (this.headerHeightChecked >= MAX_HEIGHT_CHECKS) {
+                    clearTimeout(this.timeoutId);
+                    this.timeoutId = 0;
+                    this.headerHeightChecked = 0;
+                } else {
+                    this.headerHeightChecked++;
+                    if (this.hasHeaderHeightChanged()) {
+                        this.registerWithParent();
+                    }
+                }
+            }, SIZE_CHECK_TIMER);
+        }
+    }
+
     /**
      * When modal header is being created, initialize
      * private tracked modal header state
@@ -183,6 +248,9 @@ export default class LightningModalHeader extends LightningElement {
         this.initialRender = true;
         this.initialSlotRender = true;
         this.unregisterCallback = null;
+        this.headerHeightTracked = 0;
+        this.headerHeightChecked = 0;
+        this.timeoutId = 0;
     }
 
     connectedCallback() {
@@ -192,6 +260,7 @@ export default class LightningModalHeader extends LightningElement {
     renderedCallback() {
         if (this.initialRender) {
             this.registerWithParent();
+            this.scheduleHeaderHeightCheck();
             this.initialRender = false;
         }
     }

package/src/lightning/sldsCommon/sldsCommon.css

@@ -44,19 +44,10 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    cursor: pointer;
  }
 
-[type='search'] {
-    -webkit-appearance: textfield;
-    outline-offset: -2px;
-}
-button,
-input,
-optgroup,
-select,
-textarea {
-  color: inherit;
-  font: inherit; 
-  margin: 0;
-}
+ [type='search'] {
+   appearance: textfield;
+   outline-offset: -2px;
+ }
 
  input:focus,
  button:focus,
@@ -103,11 +94,3 @@ textarea {
  iframe {
    border-style: none;
  }
-
-svg:not([fill]) {
-    fill: currentColor;
-}
-
-abbr[title] {
-    text-decoration: none;
-}