lightning-base-components 1.13.6-alpha → 1.13.10-alpha

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/primitiveDatatableStatusBar/primitiveDatatableStatusBar.js

@@ -21,7 +21,7 @@ export default class LightningPrimitiveDatatableStatusBar extends LightningEleme
         this.privateError = value;
 
         if (this.showError && this.isSaveBtnFocused()) {
-            this.focusOnErrorMessages();
+            this.handleShowError();
         }
     }
 
@@ -34,6 +34,11 @@ export default class LightningPrimitiveDatatableStatusBar extends LightningEleme
         return error && (error.title || error.messages);
     }
 
+    get showErrorBubble() {
+        const { error } = this;
+        return error && error.showBubble;
+    }
+
     get bubbleOffset() {
         // move bubble above the docked bar since docked bar has higher z-index
         // and can block the nubbin of the bubble
@@ -77,14 +82,23 @@ export default class LightningPrimitiveDatatableStatusBar extends LightningEleme
         return this.template.querySelector('button.save-btn:focus') !== null;
     }
 
-    focusOnErrorMessages() {
+    /**
+     * Handling between displaying/focusing tooltip icon and/or error bubble
+     * If showBubble property is set within error object, display/focus the error bubble.
+     * Otherwise, display/focus the tooltip icon only.
+     */
+    handleShowError() {
         Promise.resolve().then(() => {
             const trigger = this.template.querySelector(
                 'lightning-primitive-datatable-tooltip'
             );
 
             if (trigger) {
-                trigger.focus();
+                if (this.showErrorBubble) {
+                    trigger.showBubble();
+                } else {
+                    trigger.focus();
+                }
             }
         });
     }

package/src/lightning/primitiveDatatableTooltip/primitiveDatatableTooltip.js

@@ -151,6 +151,7 @@ export default class LightningPrimitiveDatatableTooltip extends LightningElement
         }
     };
 
+    @api
     showBubble() {
         this._showErrorBubble = true;
 

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

@@ -22,35 +22,45 @@ const i18n = {
     sortNone: labelSortNone,
 };
 
-function preventDefaultAndStopPropagation(event) {
-    event.preventDefault();
-    event.stopPropagation();
-}
-
+/**
+ * A table column header.
+ */
 export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
-    @api colIndex;
-    @api sorted;
-    @api sortedDirection;
-    @api resizestep;
-    @api columnWidth;
-    @api actions;
-    @api showCheckbox = false;
-    @api dtContextId;
+    // Tracked objects
+    @track _def = {};
 
+    // Private variables
     _resizable;
-    @track _def = {};
     _sortable = false;
+    _hideHeader = false;
 
-    @api
-    get resizable() {
-        return this._resizable;
-    }
+    /************************** PUBLIC ATTRIBUTES ***************************/
 
-    set resizable(value) {
-        this._resizable = value;
-        this.updateElementClasses();
+    @api actions;
+    @api colIndex;
+    @api columnWidth;
+    @api dtContextId;
+    @api resizestep;
+    @api showCheckbox = false;
+    @api sorted;
+    @api sortedDirection;
+
+    /**
+     * Retrieves the computed header DOM `id`
+     *
+     * @return {string} The DOM `id`
+     */
+    @api
+    get computedColumnHeaderId() {
+        const el = this.template.querySelector('[data-column-header]');
+        return getRealDOMId(el);
     }
 
+    /**
+     * Defines the data type for the column
+     *
+     * @type {string}
+     */
     @api
     get def() {
         return this._def;
@@ -61,18 +71,44 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
         this.updateElementClasses();
     }
 
+    /**
+     * Defines whether the table header is hidden
+     *
+     * @type {boolean}
+     */
     @api
-    get sortable() {
-        return this._sortable;
+    get hideHeader() {
+        return this._hideHeader;
     }
 
+    set hideHeader(value) {
+        this._hideHeader = value;
+        this.updateElementClasses();
+    }
+
+    /**
+     * Defines whether the column is resizable
+     *
+     * @type {boolean}
+     */
     @api
-    getDomWidth() {
-        const child = this.template.querySelector('.slds-cell-fixed');
-        if (child) {
-            return child.offsetWidth;
-        }
-        return '';
+    get resizable() {
+        return this._resizable;
+    }
+
+    set resizable(value) {
+        this._resizable = value;
+        this.updateElementClasses();
+    }
+
+    /**
+     * Defines whether the column is sortable
+     *
+     * @type {boolean}
+     */
+    @api
+    get sortable() {
+        return this._sortable;
     }
 
     set sortable(value) {
@@ -80,111 +116,230 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
         this.updateElementClasses();
     }
 
-    render() {
-        if (this.isSelectableHeader) {
-            return selectable;
-        } else if (this.sortable) {
-            return sortable;
-        }
-        return nonsortable;
-    }
+    /************************** PUBLIC METHODS ***************************/
 
-    renderedCallback() {
-        if (this.isSelectableHeader && this.showCheckbox) {
-            this.updateBulkSelectionCheckbox();
+    /**
+     * Retrieves the header cell's width
+     *
+     * @return {string} The width of the cell
+     */
+    @api
+    getDomWidth() {
+        const child = this.template.querySelector('.slds-cell-fixed');
+        if (child) {
+            return child.offsetWidth;
         }
+        return '';
     }
 
-    updateElementClasses() {
-        classListMutation(this.classList, {
-            'slds-is-sortable': this.isSortable,
-            'slds-is-resizable': this.isResizable,
-        });
-    }
+    /************************** PRIVATE GETTERS **************************/
 
+    /**
+     * Computes the styles for the column
+     *
+     * @return {string} The computed inline styles
+     */
     get columnStyles() {
         const outlineStyle = this.isSortable ? '' : '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;`
+            : '';
 
         return `
-            width: ${this.columnWidth}px;
+            ${widthStyle}
             ${outlineStyle}
             ${offsetStyle}
         `;
     }
 
+    /**
+     * 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();
     }
 
+    /**
+     * Computes the sort classes for the column
+     *
+     * @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.isAscSorting })
-            .add({ 'slds-is-sorted_desc': this.isDescSorting })
+            .add({ 'slds-is-sorted_asc': this.isAscSorted })
+            .add({ 'slds-is-sorted_desc': this.isDescSorted })
             .toString();
     }
 
-    get isAscSorting() {
-        return this.sortedDirection === 'asc';
+    /**
+     * Computes an option name
+     *
+     * @return {string} The computed option name
+     */
+    get computedOptionName() {
+        return `${this.dtContextId}-options`;
     }
 
-    get isDescSorting() {
-        return this.sortedDirection === 'desc';
+    /**
+     * Determines if the header has actions available
+     *
+     * @return {boolean} Whether the header has available actions
+     */
+    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;
+    /**
+     * Returns the header's aria role
+     *
+     * @return {string|boolean} The aria role for the header
+     */
+    get headerRole() {
+        return this.isResizable || this.sortable ? 'button' : false;
     }
 
-    get isSelectableHeader() {
-        return this.def.type === 'SELECTABLE_CHECKBOX';
+    /**
+     * 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';
+    }
+
+    /**
+     * Determines if the header is regular (unselectable)
+     *
+     * @return {boolean} Whether the header is regular
+     */
     get isRegularHeader() {
         return this.def.type !== 'SELECTABLE_CHECKBOX';
     }
 
+    /**
+     * Determines if the header is resizable
+     *
+     * @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;
     }
 
+    /**
+     * Returns the internationalization language mapping
+     *
+     * @return {Object} The i18n mapping
+     */
     get i18n() {
         return i18n;
     }
 
-    get headerRole() {
-        return this.isResizable || this.sortable ? 'button' : false;
-    }
-
+    /**
+     * Returns the header's resize step
+     *
+     * @return {number} The resize step for the header
+     */
     get resizeStep() {
         return this.resizestep;
     }
 
-    get computedOptionName() {
-        return `${this.dtContextId}-options`;
+    /**
+     * Returns the sort order label in the appropriate language
+     *
+     * @return {string} Language-specific sort order label
+     */
+    get sortedOrderLabel() {
+        if (this.sorted) {
+            return this.sortedDirection === 'desc'
+                ? i18n.sortDesc
+                : i18n.sortAsc;
+        }
+        return i18n.sortNone;
     }
 
-    @api
-    get computedColumnHeaderId() {
-        const el = this.template.querySelector('[data-column-header]');
-        return getRealDOMId(el);
+    /************************** LIFECYCLE HOOKS **************************/
+
+    /**
+     * Renders the appropriate template: selectableHeader.html,
+     * sortableHeader.html, or nonsortableHeader.html.
+     * By default, nonsortableHeader.html is rendered
+     */
+    render() {
+        if (this.isSelectableHeader) {
+            return selectable;
+        } else if (this.sortable) {
+            return sortable;
+        }
+        return nonsortable;
+    }
+
+    renderedCallback() {
+        if (this.isSelectableHeader && this.showCheckbox) {
+            this.updateBulkSelectionCheckbox();
+        }
+    }
+
+    /************************** EVENT HANDLERS ***************************/
+
+    /**
+     * Handles a sorting click on a header
+     *
+     * @param {Event} event
+     */
+    handleSortingClick(event) {
+        event.preventDefault();
+
+        if (this.isSortable) {
+            event.stopPropagation();
+            this.fireSortedColumn();
+            this.fireCellFocusByClickEvent();
+        }
     }
 
+    /************************ EVENT DISPATCHERS **************************/
+
+    /**
+     * Handles selecting all rows
+     */
     handleSelectAllRows() {
         const { rowKeyValue, colKeyValue } = this;
         const actionName =
@@ -204,25 +359,9 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
         this.dispatchEvent(actionEvent);
     }
 
-    handleSortingClick(event) {
-        event.preventDefault();
-        if (this.isSortable) {
-            preventDefaultAndStopPropagation(event);
-            this.fireSortedColumn();
-            this.fireCellFocusByClickEvent();
-        }
-    }
-
-    getTargetSortDirection() {
-        if (this.sorted) {
-            return this.sortedDirection === 'desc' ? 'asc' : 'desc';
-        }
-        return this.sortedDirection;
-    }
-
     /**
      * Notifies the parent datatable component by firing a private event with
-     * the details of the sort action.
+     * the details of the sort action
      */
     fireSortedColumn() {
         const event = new CustomEvent('privateupdatecolsort', {
@@ -234,16 +373,38 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
                 sortDirection: this.getTargetSortDirection(),
             },
         });
+
         this.dispatchEvent(event);
     }
 
-    get hasActions() {
-        return (
-            this.actions.customerActions.length > 0 ||
-            this.actions.internalActions.length > 0
-        );
+    /************************* HELPER FUNCTIONS **************************/
+
+    /**
+     * 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,
+        });
+    }
+
+    /**
+     * Determines the opposite direction to sort on based on the current direction
+     *
+     * @return {string} The new sort direction
+     */
+    getTargetSortDirection() {
+        if (this.sorted) {
+            return this.sortedDirection === 'desc' ? 'asc' : 'desc';
+        }
+        return this.sortedDirection;
     }
 
+    /**
+     * Determines the state of the header "all" checkbox based on current selections
+     */
     updateBulkSelectionCheckbox() {
         const allCheckbox = this.template.querySelector(
             '.datatable-select-all'

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}