lightning-base-components 1.13.8-alpha → 1.14.2-alpha

package/src/lightning/input/input.js

@@ -18,9 +18,9 @@ import { classSet, formatLabel } from 'lightning/utils';
 import {
     assert,
     classListMutation,
-    ContentMutation,
     getRealDOMId,
     isSafari,
+    isNativeComponent,
     isNotUndefinedOrNull,
     isUndefinedOrNull,
     normalizeAriaAttribute,
@@ -31,6 +31,7 @@ import {
     decorateInputForDragon,
     setDecoratedDragonInputValueWithoutEvent,
 } from 'lightning/utilsPrivate';
+import AriaObserver from 'lightning/ariaObserver';
 import { normalizeInput } from './normalize';
 import {
     normalizeDate,
@@ -76,7 +77,7 @@ const i18n = {
 
 const ARIA_CONTROLS = 'aria-controls';
 const ARIA_LABEL = 'aria-label';
-const ARIA_LABELEDBY = 'aria-labelledby';
+const ARIA_LABELLEDBY = 'aria-labelledby';
 const ARIA_DESCRIBEDBY = 'aria-describedby';
 
 /*
@@ -306,13 +307,11 @@ export default class LightningInput extends LightningElement {
 
     constructor() {
         super();
-        this.ariaObserver = new ContentMutation(this);
+        this.ariaObserver = new AriaObserver(this);
 
         // Native Shadow Root will return [native code].
         // Our synthetic method will return the function source.
-        this.isNative = this.template.querySelector
-            .toString()
-            .match(/\[native code\]/);
+        this.isNative = isNativeComponent(this);
 
         // The selection cache allows us an input to remember what text was selected
         // in cases where we change the text on blur or in browsers (Safari) that
@@ -322,12 +321,12 @@ export default class LightningInput extends LightningElement {
 
     connectedCallback() {
         if (!this.ariaObserver) {
-            this.ariaObserver = new ContentMutation(this);
+            this.ariaObserver = new AriaObserver(this);
         }
         // Manually track connected state because this.template.isConnected can be false
         // when input is created using createElement and inserted into dom manually.
         // i.e. create an input element and pass it to showCustomOverlay
-        // Remove this state and the one in ContentMutation once the issue is fixed.
+        // Remove this state and the one in AriaObserver once the issue is fixed.
         // PR: https://github.com/salesforce/lwc/pull/1798
         this.isConnected = true;
 
@@ -523,12 +522,11 @@ export default class LightningInput extends LightningElement {
 
     set ariaControls(references) {
         this._ariaControls = references;
-        this.ariaObserver.link(
-            'input',
-            'aria-controls',
-            references,
-            '[data-aria]'
-        );
+        this.ariaObserver.connect({
+            targetSelector: 'input',
+            attribute: ARIA_CONTROLS,
+            ids: references,
+        });
     }
 
     /**
@@ -539,8 +537,7 @@ export default class LightningInput extends LightningElement {
     get ariaLabelledBy() {
         // native version returns the auto linked value
         if (this.isNative) {
-            const ariaValues =
-                this._inputElement.getAttribute('aria-labelledby');
+            const ariaValues = this._inputElement.getAttribute(ARIA_LABELLEDBY);
             return filterNonAutoLink(ariaValues);
         }
         return this._ariaLabelledBy;
@@ -548,12 +545,11 @@ export default class LightningInput extends LightningElement {
 
     set ariaLabelledBy(references) {
         this._ariaLabelledBy = references;
-        this.ariaObserver.link(
-            'input',
-            'aria-labelledby',
-            references,
-            '[data-aria]'
-        );
+        this.ariaObserver.connect({
+            targetSelector: 'input',
+            attribute: ARIA_LABELLEDBY,
+            ids: references,
+        });
     }
 
     /**
@@ -565,7 +561,7 @@ export default class LightningInput extends LightningElement {
         if (this.isNative) {
             // in native case return the linked value
             const ariaValues =
-                this._inputElement.getAttribute('aria-describedby');
+                this._inputElement.getAttribute(ARIA_DESCRIBEDBY);
             return filterNonAutoLink(ariaValues);
         }
         return this._ariaDescribedBy;
@@ -573,12 +569,11 @@ export default class LightningInput extends LightningElement {
 
     set ariaDescribedBy(references) {
         this._ariaDescribedBy = references;
-        this.ariaObserver.link(
-            'input',
-            'aria-describedby',
-            references,
-            '[data-aria]'
-        );
+        this.ariaObserver.connect({
+            targetSelector: 'input',
+            attribute: ARIA_DESCRIBEDBY,
+            ids: references,
+        });
     }
 
     /**
@@ -2037,32 +2032,58 @@ export default class LightningInput extends LightningElement {
         return result;
     }
 
+    _updateInputA11y(elem) {
+        synchronizeAttrs(elem, {
+            [ARIA_LABELLEDBY]: this.computedAriaLabelledBy,
+            [ARIA_DESCRIBEDBY]: this.computedAriaDescribedBy,
+            [ARIA_CONTROLS]: this.computedAriaControls,
+            [ARIA_LABEL]: this.computedAriaLabel,
+        });
+    }
+
+    _updateDateOrTimePickerA11y(elem) {
+        synchronizeAttrs(elem, {
+            ariaLabelledByElement: this.ariaLabelledBy,
+            ariaDescribedByElements: this.ariaDescribedBy,
+            ariaControlsElement: this.ariaControls,
+            [ARIA_LABEL]: this.computedAriaLabel,
+        });
+    }
+
+    _updateDateTimePickerA11y(elem) {
+        synchronizeAttrs(elem, {
+            // datepicker aria attributes
+            dateAriaLabelledBy: this.dateAriaLabelledBy,
+            dateAriaDescribedBy: this.dateAriaDescribedBy,
+            dateAriaControls: this.dateAriaControls,
+            dateAriaLabel: this.dateAriaLabel,
+            // timepicker aria attributes
+            timeAriaLabelledBy: this.timeAriaLabelledBy,
+            timeAriaDescribedBy: this.timeAriaDescribedBy,
+            timeAriaControls: this.timeAriaControls,
+            timeAriaLabel: this.timeAriaLabel,
+        });
+    }
+
     _synchronizeA11y() {
+        // each of these templates are mutually exclusive and are selected
+        // depending on the [type] of input.
         const input = this.template.querySelector('input');
         const datepicker = this.template.querySelector('lightning-datepicker');
         const timepicker = this.template.querySelector('lightning-timepicker');
-
+        const datetimepicker = this.template.querySelector(
+            'lightning-datetimepicker'
+        );
+        // determine which template type is present,
+        // and update a11y props accordingly
         if (input) {
-            synchronizeAttrs(input, {
-                [ARIA_LABELEDBY]: this.computedAriaLabelledBy,
-                [ARIA_DESCRIBEDBY]: this.computedAriaDescribedBy,
-                [ARIA_CONTROLS]: this.computedAriaControls,
-                [ARIA_LABEL]: this.computedAriaLabel,
-            });
+            this._updateInputA11y(input);
         } else if (datepicker) {
-            synchronizeAttrs(datepicker, {
-                ariaLabelledByElement: this.ariaLabelledBy,
-                ariaDescribedByElements: this.ariaDescribedBy,
-                ariaControlsElement: this.ariaControls,
-                [ARIA_LABEL]: this.computedAriaLabel,
-            });
+            this._updateDateOrTimePickerA11y(datepicker);
         } else if (timepicker) {
-            synchronizeAttrs(timepicker, {
-                ariaLabelledByElement: this.ariaLabelledBy,
-                ariaDescribedByElements: this.ariaDescribedBy,
-                ariaControlsElement: this.ariaControls,
-                [ARIA_LABEL]: this.computedAriaLabel,
-            });
+            this._updateDateOrTimePickerA11y(timepicker);
+        } else if (datetimepicker) {
+            this._updateDateTimePickerA11y(datetimepicker);
         }
     }
 }

package/src/lightning/positionLibrary/positionLibrary.js

@@ -131,38 +131,50 @@ function createRelationship(
     );
 
     const autoShrink = config.autoShrink.height || config.autoShrink.width;
-    if (config.scrollableParentBound && scrollableParent) {
-        const parent = normalizeElement(scrollableParent);
-        const boxConfig = {
-            element: config.element,
-            enabled: config.enabled,
-            target: createProxy(parent),
-            align: {},
-            targetAlign: {},
-            pad: 3,
-            boxDirections: {
-                top: true,
-                bottom: true,
-                left: true,
-                right: true,
-            },
-        };
-        if (autoShrink) {
-            const style = boxConfig.element.getNode().style;
-            if (!style.minHeight) {
-                style.minHeight = config.minHeight;
-                boxConfig.element._removeMinHeight = true;
-            }
-
-            boxConfig.boxDirections = {
-                top: !!config.autoShrink.height,
-                bottom: !!config.autoShrink.height,
-                left: !!config.autoShrink.width,
-                right: !!config.autoShrink.width,
+    const modal = new OverlayDetector(originalConfig.target);
+    if (
+        (config.scrollableParentBound && scrollableParent) ||
+        (modal.isInsideModal && modal.overlay && autoShrink)
+    ) {
+        let parent;
+        if (config.scrollableParentBound && scrollableParent) {
+            parent = normalizeElement(scrollableParent);
+        } else if (modal.isInsideModal && modal.overlay) {
+            parent = normalizeElement(modal.overlay);
+        }
+        if (parent) {
+            const boxConfig = {
+                element: config.element,
+                enabled: config.enabled,
+                target: createProxy(parent),
+                align: {},
+                targetAlign: {},
+                pad: 3,
+                boxDirections: {
+                    top: true,
+                    bottom: true,
+                    left: true,
+                    right: true,
+                },
             };
-            constraintList.push(new Constraint('shrinking box', boxConfig));
-        } else {
-            constraintList.push(new Constraint('bounding box', boxConfig));
+
+            if (autoShrink) {
+                const style = boxConfig.element.getNode().style;
+                if (!style.minHeight) {
+                    style.minHeight = config.minHeight;
+                    boxConfig.element._removeMinHeight = true;
+                }
+
+                boxConfig.boxDirections = {
+                    top: !!config.autoShrink.height,
+                    bottom: !!config.autoShrink.height,
+                    left: !!config.autoShrink.width,
+                    right: !!config.autoShrink.width,
+                };
+                constraintList.push(new Constraint('shrinking box', boxConfig));
+            } else {
+                constraintList.push(new Constraint('bounding box', boxConfig));
+            }
         }
     }
 

package/src/lightning/primitiveDatatableIeditPanel/primitiveDatatableIeditPanel.js

@@ -116,6 +116,26 @@ export default class PrimitiveDatatableIeditPanel extends LightningElement {
         return this.template.querySelector('.dt-type-edit-factory');
     }
 
+    /**
+     * Checked when opening an edit panel to see if it's valid
+     * Logs an error if type is custom but does not have the
+     * required editTemplate with [data-inputable="true"] element
+     */
+    @api
+    get isEditableValid() {
+        if (
+            !this.columnDef.editableCustomType ||
+            this.inputableElement.isEditableCustomValid
+        ) {
+            return true;
+        } else if (this.columnDef.editableCustomType) {
+            console.error(
+                'Editable custom types must define an editTemplate that includes an element with attribute data-inputable set to "true"'
+            );
+        }
+        return false;
+    }
+
     @api
     get value() {
         return this.inputableElement ? this.inputableElement.value : null;

package/src/lightning/primitiveDatatableIeditTypeFactory/primitiveDatatableIeditTypeFactory.js

@@ -159,4 +159,14 @@ export default class LightningPrimitiveDatatableIeditTypeFactory extends Lightni
             this._columnDef.editableCustomType && this._columnDef.editTemplate
         );
     }
+
+    /**
+     * Checks if type is an custom type that is editable and
+     * has an editTemplate that contains [data-inputable="true"]
+     * Used when checking if cell can actually be edited
+     */
+    @api
+    get isEditableCustomValid() {
+        return this.isValidCustomType && this.concreteComponent;
+    }
 }

package/src/lightning/primitiveHeaderFactory/nonsortableHeader.html

@@ -1,8 +1,7 @@
 <template>
-    <div
-        class={computedClass}
-        style={columnStyles}
-    >
+    <div class={computedClass} style={columnStyles}>
+
+        <!-- Header Content -->
         <span class="slds-th__action">
             <template if:true={def.iconName}>
                 <div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
@@ -17,6 +16,7 @@
                 <span class="slds-truncate" if:false={def.label} title={def.ariaLabel}></span>
             </template>
 
+            <!-- Header Actions -->
             <template if:true={hasActions}>
                 <lightning-primitive-header-actions
                     col-key-value={def.colKeyValue}
@@ -26,6 +26,7 @@
                 ></lightning-primitive-header-actions>
             </template>
 
+            <!-- Resize Handler -->
             <template if:true={isResizable}>
                 <lightning-primitive-resize-handler
                      value={columnWidth}

package/src/lightning/primitiveHeaderFactory/primitiveHeaderFactory.js

@@ -32,6 +32,7 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
     // Private variables
     _resizable;
     _sortable = false;
+    _hideHeader = false;
 
     /************************** PUBLIC ATTRIBUTES ***************************/
 
@@ -70,6 +71,21 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
         this.updateElementClasses();
     }
 
+    /**
+     * Defines whether the table header is hidden
+     *
+     * @type {boolean}
+     */
+    @api
+    get hideHeader() {
+        return this._hideHeader;
+    }
+
+    set hideHeader(value) {
+        this._hideHeader = value;
+        this.updateElementClasses();
+    }
+
     /**
      * Defines whether the column is resizable
      *
@@ -165,44 +181,51 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
     }
 
     /**
-     * Determines if sort direction is set to ascending
+     * Computes an option name
      *
-     * @return {boolean} Whether the sort direction is ascending
+     * @return {string} The computed option name
      */
-    get isAscSorted() {
-        return this.sortedDirection === 'asc';
+    get computedOptionName() {
+        return `${this.dtContextId}-options`;
     }
 
     /**
-     * Determines if sort direction is set to descending
+     * Determines if the header has actions available
      *
-     * @return {boolean} Whether the sort direction is descending
+     * @return {boolean} Whether the header has available actions
      */
-    get isDescSorted() {
-        return this.sortedDirection === 'desc';
+    get hasActions() {
+        return (
+            this.actions.customerActions.length > 0 ||
+            this.actions.internalActions.length > 0
+        );
     }
 
     /**
-     * Returns the sort order label in the appropriate language
+     * Returns the header's aria role
      *
-     * @return {string} Language-specific sort order label
+     * @return {string|boolean} The aria role for the header
      */
-    get sortedOrderLabel() {
-        if (this.sorted) {
-            return this.sortedDirection === 'desc'
-                ? i18n.sortDesc
-                : i18n.sortAsc;
-        }
-        return i18n.sortNone;
+    get headerRole() {
+        return this.isResizable || this.sortable ? 'button' : false;
     }
 
     /**
-     * Determines if the header is selectable
+     * Determines if sort direction is set to ascending
      *
-     * @return {boolean} Whether the header is selectable
+     * @return {boolean} Whether the sort direction is ascending
      */
-    get isSelectableHeader() {
-        return this.def.type === 'SELECTABLE_CHECKBOX';
+    get isAscSorted() {
+        return this.sortedDirection === 'asc';
+    }
+
+    /**
+     * Determines if sort direction is set to descending
+     *
+     * @return {boolean} Whether the sort direction is descending
+     */
+    get isDescSorted() {
+        return this.sortedDirection === 'desc';
     }
 
     /**
@@ -223,6 +246,15 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
         return this.resizable && this.def.resizable !== false;
     }
 
+    /**
+     * Determines if the header is selectable
+     *
+     * @return {boolean} Whether the header is selectable
+     */
+    get isSelectableHeader() {
+        return this.def.type === 'SELECTABLE_CHECKBOX';
+    }
+
     /**
      * Determines if the header is sortable
      *
@@ -241,15 +273,6 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
         return i18n;
     }
 
-    /**
-     * Returns the header's aria role
-     *
-     * @return {string|boolean} The aria role for the header
-     */
-    get headerRole() {
-        return this.isResizable || this.sortable ? 'button' : false;
-    }
-
     /**
      * Returns the header's resize step
      *
@@ -260,24 +283,17 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
     }
 
     /**
-     * Computes an option name
-     *
-     * @return {string} The computed option name
-     */
-    get computedOptionName() {
-        return `${this.dtContextId}-options`;
-    }
-
-    /**
-     * Determines if the header has actions available
+     * Returns the sort order label in the appropriate language
      *
-     * @return {boolean} Whether the header has available actions
+     * @return {string} Language-specific sort order label
      */
-    get hasActions() {
-        return (
-            this.actions.customerActions.length > 0 ||
-            this.actions.internalActions.length > 0
-        );
+    get sortedOrderLabel() {
+        if (this.sorted) {
+            return this.sortedDirection === 'desc'
+                ? i18n.sortDesc
+                : i18n.sortAsc;
+        }
+        return i18n.sortNone;
     }
 
     /************************** LIFECYCLE HOOKS **************************/
@@ -364,12 +380,13 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
     /************************* HELPER FUNCTIONS **************************/
 
     /**
-     * Updates classes based on sort and resize eligibility
+     * Updates classes based on sort, resize and header eligibility
      */
     updateElementClasses() {
         classListMutation(this.classList, {
             'slds-is-sortable': this.isSortable,
             'slds-is-resizable': this.isResizable,
+            'slds-assistive-text': this.hideHeader,
         });
     }
 

package/src/lightning/primitiveHeaderFactory/selectableHeader.html

@@ -1,30 +1,32 @@
 <template>
-    <div class="slds-th__action slds-th__action_form slds-cell-fixed"
-         style={columnStyles}>
+    <!-- Header Content -->
+    <div class="slds-th__action slds-th__action_form slds-cell-fixed" style={columnStyles}>
         <template if:true={showCheckbox}>
-                 <span class="slds-checkbox">
-                    <input
-                        type="checkbox"
-                        class="datatable-select-all"
-                        name={computedOptionName}
-                        id="lgt-dt-header-factory-id"
-                        onclick={handleSelectAllRows}
-                        tabindex={internalTabIndex}
-                        data-navigation="enable"
-                        disabled={def.isBulkSelectionDisabled}
-                    >
-                    <label class="slds-checkbox__label" for="lgt-dt-header-factory-id">
-                        <span class="slds-checkbox_faux"></span>
-                        <span class="slds-form-element__label slds-assistive-text">
-                            {i18n.selectAll}
-                        </span>
-                    </label>
-                 </span>
+            <span class="slds-checkbox">
+                
+                <!-- Selectable Checkbox -->
+                <input
+                    type="checkbox"
+                    class="datatable-select-all"
+                    name={computedOptionName}
+                    id="lgt-dt-header-factory-id"
+                    onclick={handleSelectAllRows}
+                    tabindex={internalTabIndex}
+                    data-navigation="enable"
+                    disabled={def.isBulkSelectionDisabled}>
+
+                <label class="slds-checkbox__label" for="lgt-dt-header-factory-id">
+                    <span class="slds-checkbox_faux"></span>
+                    <span class="slds-form-element__label slds-assistive-text">
+                        {i18n.selectAll}
+                    </span>
+                </label>
+            </span>
         </template>
         <template if:false={showCheckbox}>
-                 <span id="column-group-header" class="slds-assistive-text" data-column-header>
-                     {i18n.chooseARow}
-                 </span>
+            <span id="column-group-header" class="slds-assistive-text" data-column-header>
+                {i18n.chooseARow}
+            </span>
         </template>
     </div>
 </template>

package/src/lightning/primitiveHeaderFactory/sortableHeader.html

@@ -1,19 +1,19 @@
 <template>
-    <span
-        class={computedClass}
-        tabindex={internalTabIndex}
-        style={columnStyles}
-    >
+    <!-- Header Content -->
+    <span class={computedClass} tabindex={internalTabIndex} style={columnStyles}>
+        
         <a href="javascript:void(0);"
            class={computedSortClass}
            role={headerRole}
            tabindex={internalTabIndex}
            data-navigation="enable"
            onclick={handleSortingClick}
-           style={columnStyles} data-action-triggers="enter">
+           style={columnStyles}
+           data-action-triggers="enter">
 
             <span class="slds-assistive-text">{i18n.sort}</span>
 
+            <!-- Icon to display to the left/start of the header text -->
             <template if:true={def.iconName}>
                 <div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
                     <lightning-icon icon-name={def.iconName} size="x-small" class="slds-icon_container slds-m-right_xx-small" alternative-text={def.label} title={def.label}></lightning-icon>
@@ -21,17 +21,18 @@
                         <span class="slds-truncate">{def.label}</span>
                     </template>
 
+                    <!-- Arrow Icon - Rotates based on sorting direction -->
                     <lightning-primitive-icon
                          class="slds-icon_container"
                          svg-class="slds-icon slds-icon-text-default slds-is-sortable__icon"
                          icon-name="utility:arrowdown"
                          size="x-small">
                     </lightning-primitive-icon>
-
                 </div>
             </template>
             <template if:false={def.iconName}>
                 <span class="slds-truncate" title={def.label}>{def.label}</span>
+                <!-- Arrow Icon - Rotates based on sorting direction -->
                     <lightning-primitive-icon
                          class="slds-icon_container"
                          svg-class="slds-icon slds-icon-text-default slds-is-sortable__icon"
@@ -41,17 +42,20 @@
             </template>
         </a>
 
+        <!-- Aria Live Region to announce sorting order -->
         <span class="slds-assistive-text" aria-live="polite" aria-atomic="true">{sortedOrderLabel}</span>
 
+        <!-- Header Actions -->
         <template if:true={hasActions}>
             <lightning-primitive-header-actions
                 col-key-value={def.colKeyValue}
                 actions={actions}
                 tabindex={internalTabIndex}
-                data-navigation="enable"
-            ></lightning-primitive-header-actions>
+                data-navigation="enable">
+            </lightning-primitive-header-actions>
         </template>
 
+        <!-- Resize Handler -->
         <template if:true={isResizable}>
             <lightning-primitive-resize-handler
                  value={columnWidth}