lightning-base-components 1.19.7-alpha → 1.19.8-alpha

package/src/lightning/input/input.js

@@ -629,6 +629,36 @@ export default class LightningInput extends LightningElement {
      */
     @api ariaHasPopup;
 
+    /**
+     * Specifies the value of the aria-keyshortcuts attribute
+     * @type {string}
+     */
+    @api ariaKeyShortcuts;
+
+    /**
+     * Specifies the value of the aria-disabled attribute
+     * @type {boolean}
+     */
+    @api ariaDisabled;
+
+    /**
+     * Specifies the value of the aria-roledescription attribute
+     * @type {string}
+     */
+    @api ariaRoleDescription;
+
+    /**
+     * Specifies the value of the aria-expanded attribute, only valid on type simple
+     * @type {string}
+     */
+    @api ariaExpanded;
+
+    /**
+     * Specifies the value of the aria-autocomplete, only valid on type simple
+     * @type {string}
+     */
+    @api ariaAutoComplete;
+
     /**
      * String value with the formatter to be used for number input. Valid values include
      * decimal, percent, percent-fixed, and currency.
@@ -919,7 +949,9 @@ export default class LightningInput extends LightningElement {
                 if (subcomponent) {
                     subcomponent.value = this._value;
                 }
-            } else if (
+            }
+
+            if (
                 this._rendered &&
                 this._inputElement.value !== this._displayedValue
             ) {
@@ -1117,6 +1149,26 @@ export default class LightningInput extends LightningElement {
         }
     }
 
+    /**
+     * The role set on lightning-primitive-input-simple to allow external developers to have a type="text"
+     * and role="combobox" if lightning-combobox does not meet their requirements.
+     * @type {string}
+     */
+    @api
+    get role() {
+        return this._role;
+    }
+
+    set role(value) {
+        if (value === 'combobox') {
+            this._role = 'combobox';
+        } else {
+            console.warn(
+                "<lightning-input> The role attribute value is invalid. Options are: 'combobox'"
+            );
+        }
+    }
+
     /**
      * Checks if the input is valid.
      * @returns {boolean} Indicates whether the element meets all constraint validations.
@@ -1724,7 +1776,7 @@ export default class LightningInput extends LightningElement {
         );
     }
 
-    handlePrimitiveInputSimpleChange(event) {
+    handlePrimitiveInputChange(event) {
         this.interactingState.enter();
         this._updateValueAndValidityAttribute(event.detail.value);
     }

package/src/lightning/primitiveCellFactory/primitiveCellFactory.js

@@ -1,6 +1,6 @@
 import PrimitiveDatatableCell from 'lightning/primitiveDatatableCell';
 import { api } from 'lwc';
-import { classSet } from 'lightning/utils';
+import { classSetToString } from 'lightning/utilsPrivate';
 import { toDate } from 'lightning/internationalizationLibrary';
 import cellWithStandardLayout from './cellWithStandardLayout.html';
 import bareCustomCell from './bareCustomCell.html';
@@ -19,18 +19,14 @@ const i18n = {
     false: labelFalse,
 };
 
-function isNumberedBasedType(cellType) {
+function isSpreadComputedAlignment(computedAlignment) {
     return (
-        cellType === 'currency' ||
-        cellType === 'number' ||
-        cellType === 'percent'
+        !computedAlignment ||
+        computedAlignment === 'left' ||
+        (computedAlignment !== 'center' && computedAlignment !== 'right')
     );
 }
 
-function isTypeCenteredByDefault(cellType) {
-    return cellType === 'button-icon';
-}
-
 export default class PrivateCellFactory extends PrimitiveDatatableCell {
     @api types;
     @api alignment;
@@ -93,7 +89,7 @@ export default class PrivateCellFactory extends PrimitiveDatatableCell {
     }
 
     getActionableElements() {
-        const result = Array.prototype.slice.call(
+        const result = Array.from(
             this.template.querySelectorAll('[data-navigation="enable"]')
         );
 
@@ -161,7 +157,8 @@ export default class PrivateCellFactory extends PrimitiveDatatableCell {
     get isRowNumber() {
         if (this.isType('rowNumber')) {
             const error = this.typeAttribute0;
-            this._rowHasError = error && error.title && error.messages;
+            this._rowHasError =
+                error && error.title && error.messages ? true : false;
             return true;
         }
 
@@ -189,10 +186,11 @@ export default class PrivateCellFactory extends PrimitiveDatatableCell {
     }
 
     isLtrType() {
+        const { columnType } = this;
         return (
-            this.columnType === 'url' ||
-            this.columnType === 'email' ||
-            this.columnType === 'phone'
+            columnType === 'url' ||
+            columnType === 'email' ||
+            columnType === 'phone'
         );
     }
 
@@ -201,7 +199,8 @@ export default class PrivateCellFactory extends PrimitiveDatatableCell {
     }
 
     get isCustomType() {
-        return this.types && this.types.isCustomType(this.columnType);
+        const { types } = this;
+        return types ? types.isCustomType(this.columnType) : false;
     }
 
     /**
@@ -210,13 +209,19 @@ export default class PrivateCellFactory extends PrimitiveDatatableCell {
      * but is also using a standard cell layout
      */
     get isEditable() {
-        return this.editable && this.types.isEditableType(this.columnType);
+        const { types } = this;
+        if (types) {
+            return this.editable && types.isEditableType(this.columnType);
+        }
+        return false;
     }
 
     render() {
+        const { columnType, types } = this;
         if (
-            this.isCustomType &&
-            !this.types.isStandardCellLayoutForCustomType(this.columnType)
+            types &&
+            types.isCustomType(columnType) &&
+            !types.isStandardCellLayoutForCustomType(columnType)
         ) {
             return bareCustomCell;
         }
@@ -228,38 +233,42 @@ export default class PrivateCellFactory extends PrimitiveDatatableCell {
      */
 
     get isSpreadAlignment() {
-        const alignment = this.computedAlignment;
-
-        return (
-            !alignment ||
-            alignment === 'left' ||
-            (alignment !== 'center' && alignment !== 'right')
-        );
+        return isSpreadComputedAlignment(this.computedAlignment);
     }
 
     // Note: this should be passed from above, but we dont have a defined architecture that lets customize / provide defaults
     // on cell attributes per type.
     get computedAlignment() {
-        if (!this.alignment && isNumberedBasedType(this.columnType)) {
-            return 'right';
+        const { alignment } = this;
+        if (alignment) {
+            return alignment;
         }
-
-        if (!this.alignment && isTypeCenteredByDefault(this.columnType)) {
+        const { columnType } = this;
+        // is centered by default type
+        if (columnType === 'button-icon') {
             return 'center';
         }
-
-        return this.alignment;
+        // is numbered based type
+        if (
+            columnType === 'currency' ||
+            columnType === 'number' ||
+            columnType === 'percent'
+        ) {
+            return 'right';
+        }
+        return alignment;
     }
 
     get hasLeftIcon() {
-        return (
-            this.iconName &&
-            (!this.iconPosition || this.iconPosition === 'left')
-        );
+        if (this.iconName) {
+            const { iconPosition } = this;
+            return !iconPosition || iconPosition === 'left';
+        }
+        return false;
     }
 
     get hasRightIcon() {
-        return this.iconName && this.iconPosition === 'right';
+        return this.iconName ? this.iconPosition === 'right' : false;
     }
 
     get shouldDisplayReadOnlyIcon() {
@@ -267,20 +276,16 @@ export default class PrivateCellFactory extends PrimitiveDatatableCell {
     }
 
     get computedCellDivClass() {
-        return classSet()
-            .add({
-                'slds-truncate':
-                    !this.isAction &&
-                    this.columnType !== 'button-icon' &&
-                    !this.wrapText,
-            })
-            .add({ 'slds-hyphenate': this.wrapText })
-            .add({ 'slds-line-clamp': this.wrapText && this.wrapTextMaxLines })
-            .add({
-                'ltr-content-in-rtl':
-                    document.dir === 'rtl' && this.isLtrType(),
-            })
-            .toString();
+        const { columnType, _wrapText } = this;
+        const isActionType =
+            'action' === columnType || 'action' === this.columnSubType;
+        return classSetToString({
+            'slds-truncate':
+                columnType !== 'button-icon' && !isActionType && !_wrapText,
+            'slds-hyphenate': _wrapText,
+            'slds-line-clamp': _wrapText && this.wrapTextMaxLines,
+            'ltr-content-in-rtl': document.dir === 'rtl' && this.isLtrType(),
+        });
     }
 
     get computedMarginClassWhenLeftIconExists() {
@@ -288,17 +293,18 @@ export default class PrivateCellFactory extends PrimitiveDatatableCell {
     }
 
     get computedWrapperClass() {
-        const alignment = this.computedAlignment;
-
-        return classSet('slds-grid')
-            .add({
-                'slds-no-space': this.hasTreeData,
-                'slds-align_absolute-center': this.isAction,
-                'slds-grid_align-end': alignment === 'right',
-                'slds-grid_align-center': alignment === 'center',
-                'slds-grid_align-spread': this.isSpreadAlignment,
-            })
-            .toString();
+        const { columnType, computedAlignment } = this;
+        const isActionType =
+            'action' === columnType || 'action' === this.columnSubType;
+        return classSetToString({
+            'slds-grid': true,
+            'slds-no-space': columnType === 'tree',
+            'slds-align_absolute-center': isActionType,
+            'slds-grid_align-end': computedAlignment === 'right',
+            'slds-grid_align-center': computedAlignment === 'center',
+            'slds-grid_align-spread':
+                isSpreadComputedAlignment(computedAlignment),
+        });
     }
 
     get computedRowNumberStyle() {
@@ -351,14 +357,14 @@ export default class PrivateCellFactory extends PrimitiveDatatableCell {
     }
 
     get computedCssStyles() {
-        if (this.wrapText && this.wrapTextMaxLines) {
+        if (this._wrapText && this.wrapTextMaxLines) {
             return `${'--lwc-lineClamp'}: ${this.wrapTextMaxLines}`;
         }
         return null;
     }
 
     get booleanCellAssistiveText() {
-        return this.isChecked ? i18n.true : i18n.false;
+        return this.value ? i18n.true : i18n.false;
     }
 
     /**
@@ -390,16 +396,15 @@ export default class PrivateCellFactory extends PrimitiveDatatableCell {
 
     fireCellFocusByClickEvent() {
         let needsRefocusOnCellElement = false;
-        const wrapperDiv = this.template.querySelector('div:first-child');
-        const wrapperSpan = this.template.querySelector(
-            'span.slds-grid:first-child'
-        );
-        const activeElement = this.template.activeElement;
+        const { template } = this;
+        const { activeElement } = this.template;
         // pass a flag for IE11 to refocus on the cell element if the activeElement is not
         // something focusable in the cell or the cell td/th itself
         if (
             activeElement &&
-            (activeElement === wrapperDiv || activeElement === wrapperSpan)
+            (activeElement === template.querySelector('div:first-child') ||
+                activeElement ===
+                    template.querySelector('span.slds-grid:first-child'))
         ) {
             needsRefocusOnCellElement = true;
         }

package/src/lightning/primitiveDatatableStatusBar/primitiveDatatableStatusBar.js

@@ -31,12 +31,18 @@ export default class LightningPrimitiveDatatableStatusBar extends LightningEleme
 
     get showError() {
         const { error } = this;
-        return error && (error.title || error.messages);
+        if (error && (error.title || error.messages)) {
+            return true;
+        }
+        return false;
     }
 
     get showErrorBubble() {
         const { error } = this;
-        return error && error.showBubble;
+        if (error && error.showBubble) {
+            return true;
+        }
+        return false;
     }
 
     get bubbleOffset() {

package/src/lightning/primitiveHeaderFactory/primitiveHeaderFactory.js

@@ -7,13 +7,18 @@ import labelSortDesc from '@salesforce/label/LightningDatatable.sortDesc';
 import labelSortNone from '@salesforce/label/LightningDatatable.sortNone';
 import PrimitiveDatatableCell from 'lightning/primitiveDatatableCell';
 import { api, track } from 'lwc';
-import { classSet } from 'lightning/utils';
-import { classListMutation, isRTL, getRealDOMId } from 'lightning/utilsPrivate';
+import {
+    classListMutation,
+    classSetToString,
+    getRealDOMId,
+} from 'lightning/utilsPrivate';
 
 import selectable from './selectableHeader.html';
 import sortable from './sortableHeader.html';
 import nonsortable from './nonsortableHeader.html';
 
+const SELECTABLE_HEADER_TYPE = 'SELECTABLE_CHECKBOX';
+
 const i18n = {
     chooseARow: labelChooseARow,
     chooseARowSelectAll: labelChooseARowSelectAll,
@@ -158,14 +163,14 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
      * @return {string} The computed inline styles
      */
     get columnStyles() {
-        const outlineStyle = this.isSortable ? '' : 'outline:none;';
+        const { columnWidth } = this;
+        const outlineStyle = this._sortable ? '' : 'outline:none;';
 
         // In RTL, we need to explicitly position the column headers.
         // We do this by setting the offset (in pixels) from the start of the table.
-        const offsetStyle = isRTL() ? `right: ${this.def.offset}px;` : '';
-        const widthStyle = this.columnWidth
-            ? `width: ${this.columnWidth}px;`
-            : '';
+        const offsetStyle =
+            document.dir === 'rtl' ? `right: ${this._def.offset}px;` : '';
+        const widthStyle = columnWidth ? `width: ${columnWidth}px;` : '';
         const heightStyle = this._wrapTableHeader ? 'min-height: 3rem' : '';
 
         return `
@@ -176,27 +181,20 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
         `;
     }
 
-    /**
-     * Get th Action styles
-     *
-     * @return {string} The computed classes
-     */
-    get thActionStyles() {
-        const heightStyle = this._wrapTableHeader ? 'min-height: 3rem' : '';
-        return `
-            ${heightStyle}
-        `;
-    }
-
     /**
      * Computes the classes for the column
      *
      * @return {string} The computed classes
      */
     get computedClass() {
-        return classSet('slds-cell-fixed')
-            .add({ 'slds-has-button-menu': this.hasActions })
-            .toString();
+        const { actions } = this;
+        return classSetToString({
+            'slds-cell-fixed': true,
+            'slds-has-button-menu':
+                // inline hasActions
+                actions.customerActions.length > 0 ||
+                actions.internalActions.length > 0,
+        });
     }
 
     /**
@@ -205,11 +203,13 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
      * @return {string} The computed sort classes
      */
     get computedSortClass() {
-        return classSet('slds-th__action slds-text-link_reset')
-            .add({ 'slds-is-sorted': this.sorted })
-            .add({ 'slds-is-sorted_asc': this.isAscSorted })
-            .add({ 'slds-is-sorted_desc': this.isDescSorted })
-            .toString();
+        const { sortedDirection } = this;
+        return classSetToString({
+            'slds-th__action slds-text-link_reset': true,
+            'slds-is-sorted': this.sorted,
+            'slds-is-sorted_asc': sortedDirection === 'asc',
+            'slds-is-sorted_desc': sortedDirection === 'desc',
+        });
     }
 
     /**
@@ -236,9 +236,10 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
      * @return {boolean} Whether the header has available actions
      */
     get hasActions() {
+        const { actions } = this;
         return (
-            this.actions.customerActions.length > 0 ||
-            this.actions.internalActions.length > 0
+            actions.customerActions.length > 0 ||
+            actions.internalActions.length > 0
         );
     }
 
@@ -259,25 +260,14 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
      * @return {string|boolean} The aria role for the header
      */
     get headerRole() {
-        return this.isResizable || this.sortable ? 'button' : false;
-    }
-
-    /**
-     * Determines if sort direction is set to ascending
-     *
-     * @return {boolean} Whether the sort direction is ascending
-     */
-    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';
+        if (
+            this._sortable ||
+            // inline isResizable
+            (this._resizable && this._def.resizable !== false)
+        ) {
+            return 'button';
+        }
+        return false;
     }
 
     /**
@@ -286,7 +276,7 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
      * @return {boolean} Whether the header is regular
      */
     get isRegularHeader() {
-        return this.def.type !== 'SELECTABLE_CHECKBOX';
+        return this._def.type !== SELECTABLE_HEADER_TYPE;
     }
 
     /**
@@ -295,25 +285,7 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
      * @return {boolean} Whether the header is resizable
      */
     get isResizable() {
-        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
-     *
-     * @return {boolean} Whether the header is sortable
-     */
-    get isSortable() {
-        return this.sortable;
+        return this._resizable && this._def.resizable !== false;
     }
 
     /**
@@ -356,29 +328,28 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
      * By default, nonsortableHeader.html is rendered
      */
     render() {
-        if (this.isSelectableHeader) {
+        if (this._def.type === SELECTABLE_HEADER_TYPE) {
             return selectable;
-        } else if (this.sortable) {
+        } else if (this._sortable) {
             return sortable;
         }
         return nonsortable;
     }
 
     renderedCallback() {
-        if (this.isSelectableHeader && this.showCheckbox) {
-            this.updateBulkSelectionCheckbox();
-        }
-        if (this.isSelectableHeader) {
-            const columnHeaderId = this.computedColumnHeaderId;
+        if (this._def.type === SELECTABLE_HEADER_TYPE) {
+            if (this.showCheckbox) {
+                this.updateBulkSelectionCheckbox();
+            }
             const columnHeaderEvent = new CustomEvent('privatecolumnheaderid', {
-                detail: columnHeaderId,
+                detail: this.computedColumnHeaderId,
             });
             this.dispatchEvent(columnHeaderEvent);
         }
     }
 
     disconnectedCallback() {
-        if (this.isSelectableHeader) {
+        if (this._def.type === SELECTABLE_HEADER_TYPE) {
             const columnHeaderEvent = new CustomEvent('privatecolumnheaderid', {
                 detail: null,
             });
@@ -396,7 +367,7 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
     handleSortingClick(event) {
         event.preventDefault();
 
-        if (this.isSortable) {
+        if (this._sortable) {
             event.stopPropagation();
             this.fireSortedColumn();
             this.fireCellFocusByClickEvent();
@@ -411,7 +382,7 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
     handleSelectAllRows() {
         const { rowKeyValue, colKeyValue } = this;
         const actionName =
-            this.def.bulkSelection === 'none'
+            this._def.bulkSelection === 'none'
                 ? 'selectallrows'
                 : 'deselectallrows';
         // eslint-disable-next-line lightning-global/no-custom-event-identifier-arguments
@@ -432,12 +403,13 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
      * the details of the sort action
      */
     fireSortedColumn() {
+        const { columnKey, fieldName } = this._def;
         const event = new CustomEvent('privateupdatecolsort', {
             bubbles: true,
             composed: true,
             detail: {
-                fieldName: this.def.fieldName,
-                columnKey: this.def.columnKey,
+                columnKey,
+                fieldName,
                 sortDirection: this.getTargetSortDirection(),
             },
         });
@@ -452,9 +424,11 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
      */
     updateElementClasses() {
         classListMutation(this.classList, {
-            'slds-is-sortable': this.isSortable,
-            'slds-is-resizable': this.isResizable,
-            'slds-assistive-text': this.hideHeader,
+            'slds-is-sortable': this._sortable,
+            // inline isResizable
+            'slds-is-resizable':
+                this._resizable && this._def.resizable !== false,
+            'slds-assistive-text': this._hideHeader,
         });
     }
 
@@ -474,13 +448,14 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
      * Determines the state of the header "all" checkbox based on current selections
      */
     updateBulkSelectionCheckbox() {
+        const { bulkSelection } = this._def;
         const allCheckbox = this.template.querySelector(
             '.datatable-select-all'
         );
-        allCheckbox.indeterminate = this.def.bulkSelection === 'some';
+        allCheckbox.indeterminate = bulkSelection === 'some';
 
         // Note: since we have to handle the indeterminate state,
-        //       this is to remove a raptor warning `Unneccessary update of property "checked"`
-        allCheckbox.checked = !(this.def.bulkSelection === 'none');
+        //       this is to remove a raptor warning `Unnecessary update of property "checked"`
+        allCheckbox.checked = !(bulkSelection === 'none');
     }
 }

package/src/lightning/primitiveInputCheckbox/primitiveInputCheckbox.html

@@ -20,6 +20,9 @@
                 part="checkbox"
                 id="checkbox"
                 aria-label={ariaLabel}
+                aria-keyshortcuts={ariaKeyShortcuts}
+                aria-disabled={ariaDisabled}
+                aria-roledescription={ariaRoleDescription}
                 aria-invalid={ariaInvalid}
                 accesskey={accessKey}
                 onblur={handleBlur}

package/src/lightning/primitiveInputCheckbox/primitiveInputCheckbox.js

@@ -18,6 +18,9 @@ export default class LightningPrimitiveInputCheckbox extends LightningElement {
     @api name;
     @api disabled;
     @api variant;
+    @api ariaKeyShortcuts;
+    @api ariaDisabled;
+    @api ariaRoleDescription;
 
     @api
     get checked() {

package/src/lightning/primitiveInputCheckboxButton/primitiveInputCheckboxButton.html

@@ -2,6 +2,9 @@
     <div class="slds-checkbox_add-button" part="input-checkbox-button">
         <input type="checkbox" id="checkbox-button"
             aria-label={ariaLabel}
+            aria-keyshortcuts={ariaKeyShortcuts}
+            aria-disabled={ariaDisabled}
+            aria-roledescription={ariaRoleDescription}
             aria-invalid={ariaInvalid}
             accesskey={accessKey}
             class="slds-assistive-text"