lightning-base-components 1.17.2-alpha → 1.17.5-alpha

package/src/lightning/modalFooter/modalFooter.js

@@ -8,6 +8,9 @@ const hideClass = 'slds-hide';
 // selectors
 const footerSelector = `.${footerClass}`;
 const footerSlotSelector = '[data-footer-slot]';
+// timeout footer height check
+const SIZE_CHECK_TIMER = 50;
+const MAX_HEIGHT_CHECKS = 4;
 
 /**
  * The modal footer component to display footer content in lightning modal.
@@ -18,6 +21,9 @@ export default class LightningModalFooter extends LightningElement {
     initialSlotRender = true;
     hideFooter = false;
     unregisterCallback = null;
+    footerHeightTracked = 0;
+    footerHeightChecked = 0;
+    timeoutId = 0;
 
     /**
      * Handle the default slot change event
@@ -57,7 +63,9 @@ export default class LightningModalFooter extends LightningElement {
         const divElem = this.template.querySelector(footerSelector);
         const footerRect = divElem ? divElem.getBoundingClientRect() : {};
         const { height } = footerRect;
-        return height || 0;
+        const heightValue = height || 0;
+        this.footerHeightTracked = heightValue;
+        return heightValue;
     }
 
     /**
@@ -125,6 +133,47 @@ export default class LightningModalFooter extends LightningElement {
         this.dispatchEvent(evtRegister);
     }
 
+    /**
+     * Provide a means to check whether the tracked footer height
+     * is different than the current footer height to only call modalBase
+     * when there is a change in footer height
+     * @private
+     */
+    hasFooterHeightChanged() {
+        // note: calling this.footerHeight updates this.footerHeightTracked
+        // order of values checked here is required
+        const previousRenderedHeight = this.footerHeightTracked;
+        const currentRenderedHeight = this.footerHeight;
+        return currentRenderedHeight !== previousRenderedHeight;
+    }
+
+    /**
+     * On first render, provide a quick means of updating modalBase,
+     * if the modalFooter height changes.
+     * In rare cases, the height of the footer between the
+     * normal or full size rendering can change depending on
+     * content of footer and window width
+     * @private
+     */
+    scheduleFooterHeightCheck() {
+        if (this.initialRender && this.timeoutId === 0) {
+            // eslint-disable-next-line @lwc/lwc/no-async-operation
+            this.timeoutId = setInterval(() => {
+                if (this.footerHeightChecked >= MAX_HEIGHT_CHECKS) {
+                    clearTimeout(this.timeoutId);
+                    this.timeoutId = 0;
+                    this.footerHeightChecked = 0;
+                } else {
+                    this.footerHeightChecked++;
+                    const hasChanged = this.hasFooterHeightChanged();
+                    if (hasChanged) {
+                        this.registerWithParent();
+                    }
+                }
+            }, SIZE_CHECK_TIMER);
+        }
+    }
+
     /**
      * When modal footer is being created, initialize
      * private tracked modal footer state
@@ -137,6 +186,9 @@ export default class LightningModalFooter extends LightningElement {
         this.initialSlotRender = true;
         this.hideFooter = false;
         this.unregisterCallback = null;
+        this.footerHeightTracked = 0;
+        this.footerHeightChecked = 0;
+        this.timeoutId = 0;
     }
 
     connectedCallback() {
@@ -149,11 +201,15 @@ export default class LightningModalFooter extends LightningElement {
         if (this.unregisterCallback) {
             this.unregisterCallback();
         }
+        clearTimeout(this.timeoutId);
+        this.timeoutId = 0;
+        this.footerHeightChecked = 0;
     }
 
     renderedCallback() {
         if (this.initialRender) {
             this.registerWithParent();
+            this.scheduleFooterHeightCheck();
             this.initialRender = false;
         }
         this.hideFooter = !this.isDefaultSlotPopulated;

package/src/lightning/navigation/__docs__/navigation.md

@@ -25,7 +25,7 @@ export default class MyCustomElement extends NavigationMixin(
 ) {}
 ```
 
-The `NavigationMixin` adds two APIs to your component's class.
+The `NavigationMixin` adds two APIs to your component's class. Invoking these functions before the element is connected to the DOM can have unexpected results.
 
 -   `[NavigationMixin.Navigate](pageReference, [replace])` - A component calls this API to navigate to another page in the application.
 -   `[NavigationMixin.GenerateUrl](pageReference)` - A component calls this API to get a `promise` that resolves to the resulting URL. The component can use the URL in the `href` attribute of an anchor. It can also use the URL to open a new window using the `window.open(url)` browser API.

package/src/lightning/popup/popover.slds.css

@@ -0,0 +1,121 @@
+
+@supports (--styling-hooks: '') {
+    :host([data-render-mode="shadow"]) .slds-popover {
+        position: relative;
+        border-radius: var(--sds-g-radius-border-2, 0.25rem);
+        width: var(--sds-g-sizing-15, 20rem);
+        min-height: calc(var(--sds-g-sizing-5, 1rem) * 2);
+        z-index: var(--slds-c-popover-position-zindex, 6000);
+        background-color: var(--slds-c-popover-color-background, 
+            var(--slds-g-color-neutral-base-100, 
+                var(--sds-g-color-neutral-base-100, #ffffff)));
+        display: inline-block;
+        box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16); 
+        border: var(--sds-g-sizing-border-1, 1px) solid var(--slds-g-color-border-base-1, var(--sds-g-color-border-base-1, #c9c9c9));
+    }
+    
+    :host([data-render-mode="shadow"]) .slds-popover__meta {
+        margin-block-end: var(--sds-g-sizing-4, 0.75rem);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-popover__body {
+        padding-block: var(--sds-g-spacing-2, 0.5rem);
+        padding-inline: var(--sds-g-spacing-3, 0.75rem);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-popover__body .slds-popover__header {
+        padding-block: 0 var(--sds-g-sizing-3, 0.5rem);
+        padding-inline: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-popover__body,:host([data-render-mode="shadow"]) 
+    .slds-popover__header,:host([data-render-mode="shadow"]) 
+    .slds-popover__footer {
+        position: relative;
+        padding-block: var(--sds-g-spacing-2, 0.5rem);
+        padding-inline: var(--sds-g-spacing-3, 0.75rem);
+        word-wrap: break-word;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-popover__header {
+        border-bottom: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-popover__footer {
+        border-block-start: var(--sds-g-sizing-border-1, 1px) solid var(--slds-g-color-border-base-1, var(--sds-g-color-border-base-1, #c9c9c9));
+        background-color: var(--slds-g-color-neutral-base-95, var(--sds-g-color-neutral-base-95, #f3f3f3));
+        border-end-start-radius: inherit;
+        border-end-end-radius: inherit;
+        padding-block: var(--sds-g-spacing-2, 0.5rem);
+        padding-inline: var(--sds-g-spacing-3, 0.75rem);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-popover__footer_form {
+        text-align: center;
+        background: var(--slds-g-color-neutral-base-95, var(--sds-g-color-neutral-base-95, #f3f3f3));
+        border-radius: 0 0 var(--sds-g-radius-border-2, 0.25rem) var(--sds-g-radius-border-2, 0.25rem);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-popover__body_small {
+        max-height: var(--sds-g-sizing-14, 15rem);
+        overflow-y: auto;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-popover__close {
+        position: relative;
+        margin-block: var(--sds-g-spacing-1, 0.25rem);
+        margin-inline: var(--sds-g-spacing-1, 0.25rem);
+        z-index: calc(var(--slds-c-popover-position-zindex, 6000) + 1);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-popover_small {
+        max-width: var(--sds-g-sizing-14, 15rem);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-popover_medium {
+        min-width: var(--sds-g-sizing-15, 20rem);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-popover_large {
+        min-width: 25rem;
+        max-width: 512px;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-popover[class*="theme_"] {
+        border: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-popover *:last-child {
+        margin-bottom: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-popover_full-width {
+        width: 100%;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-popover_hide {
+        display: none;
+    }
+    
+    :host([data-render-mode="shadow"]) .slds-popover_dark {
+        background-color: var(--slds-g-color-brand-base-30, var(--sds-g-color-brand-base-30, #014486));
+        color: var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff));
+    }
+
+    :host([data-render-mode="shadow"]) .slds-popover_dark .slds-badge {
+        background-color: var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff));
+    }
+
+    :host([data-render-mode="shadow"]) .slds-popover_dark .slds-popover__close {
+        color: var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff));
+    }
+
+    :host([data-render-mode="shadow"]) .slds-popover_dark .slds-icon-text-default {
+        fill: var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff));
+    }
+
+    :host([data-render-mode="shadow"]) .slds-popover_dark .slds-popover__footer {
+        border-top-color: var(--slds-g-color-brand-base-10, var(--sds-g-color-brand-base-10, #001639));
+        background-color: var(--slds-g-color-brand-base-20, var(--sds-g-color-brand-base-20, #032d60));
+    }
+}

package/src/lightning/popup/popup.css

@@ -0,0 +1,3 @@
+/* @import 'lightning/sldsCommon';
+@import './popover.slds.css';
+ */

package/src/lightning/positionLibrary/direction.js

@@ -179,24 +179,17 @@ export function checkFlipPossibility(parent, element, target, leftAsBoundary) {
 
     // If there is no space above and below, recalculate space based on window
     // when there is still no space above and below based on window then select the maximum available space
-    if (!hasSpaceAbove && !hasSpaceBelow && parent) {
-        belowSpace =
-            viewPort.height -
-            (referenceElemRect.bottom - viewPort.top) -
-            height;
-        if (belowSpace < 0) {
-            if (parent.scrollTop > 0) {
-                aboveSpace =
-                    referenceElemRect.top -
-                    viewPort.top +
-                    parent.scrollTop -
-                    height;
-            }
-        }
-        hasSpaceAbove =
-            aboveSpace >= 0 || (belowSpace < 0 && aboveSpace > belowSpace);
+
+    if (
+        !hasSpaceAbove &&
+        !hasSpaceBelow &&
+        parent &&
+        element.style &&
+        element.style.position === 'fixed'
+    ) {
+        hasSpaceAbove = referenceElemRect.top - windowViewPort.top - height > 0;
         hasSpaceBelow =
-            belowSpace >= 0 || (aboveSpace < 0 && belowSpace > aboveSpace);
+            windowViewPort.height - referenceElemRect.bottom - height > 0;
     }
 
     // Assuming center alignment, does the viewport have space to fit half of the element around

package/src/lightning/positionLibrary/overlayDetector.js

@@ -6,6 +6,7 @@ export const OVERLAY_TYPE = {
     DIALOG: 'lightning-dialog',
     POPOVER: 'lightning-popover',
     PANEL: 'uiPanel',
+    SLDSMODAL: 'slds-modal',
 };
 
 export function isOverlay(element) {
@@ -30,6 +31,13 @@ export function isOverlay(element) {
     if (isPanel) {
         return OVERLAY_TYPE.PANEL;
     }
+
+    const isSldsModal =
+        element.classList && element.classList.contains(OVERLAY_TYPE.SLDSMODAL);
+    if (isSldsModal) {
+        return OVERLAY_TYPE.SLDSMODAL;
+    }
+
     return OVERLAY_TYPE.NONE;
 }
 
@@ -80,7 +88,8 @@ export class OverlayDetector {
         return (
             this.isInside &&
             (this._detection.type === OVERLAY_TYPE.MODAL ||
-                this._detection.type === OVERLAY_TYPE.DIALOG)
+                this._detection.type === OVERLAY_TYPE.DIALOG ||
+                this._detection.type === OVERLAY_TYPE.SLDSMODAL)
         );
     }
 

package/src/lightning/primitiveBubble/primitiveBubble.js

@@ -18,6 +18,13 @@ export default class LightningPrimitiveBubble extends LightningElement {
         contentId: '',
     };
 
+    /*
+        Tooltip manages the visibility state of the PrimitiveBubble element
+        to ensure there are no differences beteween TooltipLibrary._visible and
+        LightningPrimitiveBubble.state.visible. See @W-12512833
+    */
+    @api disableVisibilityChangeOnLeave;
+
     @api
     get contentId() {
         return this.state.contentId;
@@ -135,6 +142,14 @@ export default class LightningPrimitiveBubble extends LightningElement {
     }
 
     handleMouseLeave() {
-        this.visible = false;
+        /**
+         * This causes a number of issues when primitive-bubble is managed through tooltipLibrary, due to the fact
+         * that changing the visibility inside the primitive bubble creates a mismatch with the tooltipLibrary Tooltip._visible state.
+         * This contributes to a number of problems and can result in the tooltip being made visible again in unwanted situations.
+         * (W-12512833). Remove this completely if no longer required by other consumers.
+         */
+        if (!this.disableVisibilityChangeOnLeave) {
+            this.visible = false;
+        }
     }
 }

package/src/lightning/primitiveCellCheckbox/primitiveCellCheckbox.js

@@ -11,12 +11,26 @@ const i18n = {
 };
 
 export default class PrimitiveCellCheckbox extends PrimitiveDatatableCell {
+    _columnHeaderId = '';
     @api rowIndex = 0;
     @api isSelected = false;
     @api isDisabled = false;
     @api type = 'checkbox';
     @api dtContextId;
-    @api columnHeaderId = ''; //required as a part for aria-labelledby
+    @api
+    get columnHeaderId() {
+        return this._columnHeaderId;
+    }
+
+    set columnHeaderId(id) {
+        this._columnHeaderId = id || '';
+        const labelId = this.computedLabelId;
+        if (labelId) {
+            synchronizeAttrs(this.template.querySelector('input'), {
+                'aria-labelledby': `${labelId} ${this._columnHeaderId}`,
+            });
+        }
+    }
 
     render() {
         if (this.type === 'radio') {

package/src/lightning/primitiveHeaderFactory/primitiveHeaderFactory.js

@@ -1,4 +1,5 @@
 import labelChooseARow from '@salesforce/label/LightningDatatable.chooseARow';
+import labelChooseARowSelectAll from '@salesforce/label/LightningDatatable.chooseARowSelectAll';
 import labelSelectAll from '@salesforce/label/LightningDatatable.selectAll';
 import labelSort from '@salesforce/label/LightningDatatable.sort';
 import labelSortAsc from '@salesforce/label/LightningDatatable.sortAsc';
@@ -15,6 +16,7 @@ import nonsortable from './nonsortableHeader.html';
 
 const i18n = {
     chooseARow: labelChooseARow,
+    chooseARowSelectAll: labelChooseARowSelectAll,
     selectAll: labelSelectAll,
     sort: labelSort,
     sortAsc: labelSortAsc,
@@ -201,6 +203,17 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
         );
     }
 
+    /**
+     * Computes column header label
+     *
+     * @return {string} The computed column header label
+     */
+    get computedColumnHeaderLabel() {
+        return this.showCheckbox
+            ? this.i18n.chooseARowSelectAll
+            : this.i18n.chooseARow;
+    }
+
     /**
      * Returns the header's aria role
      *
@@ -316,6 +329,22 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
         if (this.isSelectableHeader && this.showCheckbox) {
             this.updateBulkSelectionCheckbox();
         }
+        if (this.isSelectableHeader) {
+            const columnHeaderId = this.computedColumnHeaderId;
+            const columnHeaderEvent = new CustomEvent('privatecolumnheaderid', {
+                detail: columnHeaderId,
+            });
+            this.dispatchEvent(columnHeaderEvent);
+        }
+    }
+
+    disconnectedCallback() {
+        if (this.isSelectableHeader) {
+            const columnHeaderEvent = new CustomEvent('privatecolumnheaderid', {
+                detail: null,
+            });
+            this.dispatchEvent(columnHeaderEvent);
+        }
     }
 
     /************************** EVENT HANDLERS ***************************/

package/src/lightning/primitiveHeaderFactory/selectableHeader.html

@@ -1,9 +1,11 @@
 <template>
+    <span id="column-group-header" class="slds-assistive-text" data-column-header>
+        {computedColumnHeaderLabel}
+    </span>
     <!-- Header Content -->
     <div class="slds-th__action slds-th__action_form slds-cell-fixed" style={columnStyles}>
         <template if:true={showCheckbox}>
             <span class="slds-checkbox">
-                
                 <!-- Selectable Checkbox -->
                 <input
                     type="checkbox"
@@ -23,10 +25,5 @@
                 </label>
             </span>
         </template>
-        <template if:false={showCheckbox}>
-            <span id="column-group-header" class="slds-assistive-text" data-column-header>
-                {i18n.chooseARow}
-            </span>
-        </template>
     </div>
 </template>

package/src/lightning/progressIndicator/progressIndicator.js

@@ -33,7 +33,7 @@ export default class LightningProgressIndicator extends LightningElement {
 
     /**
      * Changes the appearance of the progress indicator for the base type only.
-     * Valid values are base or shaded. The shaded variant adds a light gray border to the step indicators.
+     * Valid values are base or shade. The shade variant adds a light gray border to the step indicators.
      * The default is base.
      * @type {string}
      * @default base

package/src/lightning/select/__docs__/select.md

@@ -6,6 +6,15 @@ examples:
     - name: multiple
       label: Multiple Select
       description: A dropdown menu with multiple selection enabled.
+    - name: disabled
+      label: Disabled Select
+      description: A dropdown menu with disabled state.
+    - name: hidden
+      label: Hidden Select
+      description: A dropdown menu with hidden label.
+    - name: inline
+      label: Inline Select
+      description: A dropdown menu with inline label.
 ---
 
 `lightning-select` enables single and multiple selection on a menu of options using the HTML `select` element and `option` elements. To specify whether multiple options can be selected, use the `multiple` attribute. The `size` attribute can be used to specify how many options are visible at once. `lightning-select` also accepts most general form input attributes such as `required` and `disabled`.

package/src/lightning/select/__examples__/disabled/disabled.html

@@ -0,0 +1,10 @@
+<template>
+    <lightning-select
+        value={selectVal}
+        label="Select a product"
+        options={productOptions}
+        onchange={handleChange}
+        disabled
+        message-when-value-missing="Which area can we help you with?">
+    </lightning-select>
+</template>

package/src/lightning/select/__examples__/disabled/disabled.js

@@ -0,0 +1,27 @@
+import { LightningElement } from 'lwc';
+
+export default class SelectDisabled extends LightningElement {
+    selectVal = '';
+    productOptions = [
+        {
+            label: '--None--',
+            value: '',
+        },
+        {
+            label: 'Sales',
+            value: 'sales',
+        },
+        {
+            label: 'Marketing',
+            value: 'marketing',
+        },
+        {
+            label: 'Service',
+            value: 'service',
+        },
+    ];
+
+    handleChange(event) {
+        this.selectVal = event.detail.value;
+    }
+}

package/src/lightning/select/__examples__/hidden/hidden.html

@@ -0,0 +1,10 @@
+<template>
+    <lightning-select
+        value={selectVal}
+        label="Select a product"
+        options={productOptions}
+        onchange={handleChange}
+        variant="label-hidden"
+        message-when-value-missing="Which area can we help you with?">
+    </lightning-select>
+</template>

package/src/lightning/select/__examples__/hidden/hidden.js

@@ -0,0 +1,27 @@
+import { LightningElement } from 'lwc';
+
+export default class SelectHidden extends LightningElement {
+    selectVal = '';
+    productOptions = [
+        {
+            label: '--None--',
+            value: '',
+        },
+        {
+            label: 'Sales',
+            value: 'sales',
+        },
+        {
+            label: 'Marketing',
+            value: 'marketing',
+        },
+        {
+            label: 'Service',
+            value: 'service',
+        },
+    ];
+
+    handleChange(event) {
+        this.selectVal = event.detail.value;
+    }
+}

package/src/lightning/select/__examples__/inline/inline.html

@@ -0,0 +1,10 @@
+<template>
+    <lightning-select
+        name="tickets"
+        value={selectVal}
+        label="How many tickets?"
+        options={productOptions}
+        onchange={handleChange}
+        variant="label-inline">
+    </lightning-select>
+</template>

package/src/lightning/select/__examples__/inline/inline.js

@@ -0,0 +1,27 @@
+import { LightningElement } from 'lwc';
+
+export default class SelectInline extends LightningElement {
+    selectVal = '';
+    productOptions = [
+        {
+            label: '--None--',
+            value: '',
+        },
+        {
+            label: 'Sales',
+            value: 'sales',
+        },
+        {
+            label: 'Marketing',
+            value: 'marketing',
+        },
+        {
+            label: 'Service',
+            value: 'service',
+        },
+    ];
+
+    handleChange(event) {
+        this.selectVal = event.detail.value;
+    }
+}