lightning-base-components 1.17.1-alpha → 1.17.3-alpha

package/src/lightning/checkboxGroup/checkboxGroup.html

@@ -30,7 +30,7 @@
         </div>
 
         <template if:true={_helpMessage}>
-            <div id="helptext" data-helptext class="slds-form-element__help">{_helpMessage}</div>
+            <div id="helptext" data-helptext role="alert" class="slds-form-element__help">{_helpMessage}</div>
         </template>
 
     </fieldset>

package/src/lightning/datatable/datatable.js

@@ -213,6 +213,7 @@ export default class LightningDatatable extends LightningElement {
     _renderMode = 'table';
     _shouldResetFocus = false; // used to ensure focus isn't lost from changes in renderedRows
     _suppressBottomBar = false;
+    _checkboxColumnHeaderId;
 
     /************************* PUBLIC PROPERTIES *************************/
 
@@ -864,27 +865,13 @@ export default class LightningDatatable extends LightningElement {
         return styleToString(styles);
     }
 
-    /**
-     * Private method to get datatable header element
-     * used when getting checkboxColumnHeaderId for
-     * aria-labelledby in checkbox column
-     * @returns {(HTMLElement|null)}
-     */
-    get checkboxColumnHeaderElement() {
-        return this.template.querySelector(
-            'lightning-primitive-header-factory'
-        );
-    }
-
     /**
      * Private method to get computedCheckboxColumnHeaderId
      * from checkboxColumnHeaderElement for
      * aria-labelledby in checkbox column
      */
     get computedCheckboxColumnHeaderId() {
-        return this.checkboxColumnHeaderElement
-            ? this.checkboxColumnHeaderElement.computedColumnHeaderId
-            : '';
+        return this._checkboxColumnHeaderId;
     }
 
     get computedAriaLiveClassForNavMode() {
@@ -1344,6 +1331,10 @@ export default class LightningDatatable extends LightningElement {
         this.fireSortedColumnChange(fieldName, columnKey, sortDirection);
     }
 
+    handleCheckboxHeaderId(event) {
+        this._checkboxColumnHeaderId = event.detail;
+    }
+
     /**
      * Handles the `resizecol` event on lightning-datatable
      *

package/src/lightning/datatable/renderManager.js

@@ -83,9 +83,11 @@ export class RenderManager {
         if (normalizeBoolean(viewportRendering) || state.virtualize) {
             this.initializeResizeObserver(state, getWrapperHeight);
         }
+        let computedBufferSize =
+            typeof bufferSize != 'undefined' ? bufferSize : DEFAULT_BUFFER_SIZE;
         state.bufferSize = normalizeNumberAttribute(
             'bufferSize',
-            bufferSize || DEFAULT_BUFFER_SIZE,
+            computedBufferSize,
             'non-negative',
             DEFAULT_BUFFER_SIZE
         );
@@ -213,10 +215,17 @@ export class RenderManager {
         const normalizedRowCount = rowCount
             ? Math.min(rowCount, totalRows)
             : totalRows;
-        state.renderedRowCount = normalizedRowCount;
-
-        // Update our internal cache
-        this.previousCache.renderedRowCount = normalizedRowCount;
+        if (isViewportRenderingEnabled(state)) {
+            if (state.renderedRowCount < normalizedRowCount) {
+                state.renderedRowCount = normalizedRowCount;
+                // Update our internal cache
+                this.previousCache.renderedRowCount = normalizedRowCount;
+            }
+        } else {
+            state.renderedRowCount = normalizedRowCount;
+            // Update our internal cache
+            this.previousCache.renderedRowCount = normalizedRowCount;
+        }
         this.previousCache.totalRowCount = totalRows;
 
         if (rows.length > 0) {

package/src/lightning/datatable/rowSelection.js

@@ -51,7 +51,7 @@ export function handleSelectAllRows(event) {
     event.stopPropagation();
     markAllRowsSelected(this.state);
     this.fireSelectedRowsChange(this.getSelectedRows(), {
-        selection: ROWS_ACTION.SELECT_ALL_ROWS,
+        action: ROWS_ACTION.SELECT_ALL_ROWS,
     });
 }
 
@@ -64,7 +64,7 @@ export function handleDeselectAllRows(event) {
     event.stopPropagation();
     markAllRowsDeselected(this.state);
     this.fireSelectedRowsChange(this.getSelectedRows(), {
-        selection: ROWS_ACTION.DESELECT_ALL_ROWS,
+        action: ROWS_ACTION.DESELECT_ALL_ROWS,
     });
 }
 
@@ -89,7 +89,7 @@ export function handleSelectRow(event) {
     markSelectedRowsInterval(this.state, fromRowKey, rowKeyValue);
     setLastRowSelection(this.state, rowKeyValue);
     this.fireSelectedRowsChange(this.getSelectedRows(), {
-        selection: ROWS_ACTION.ROW_SELECT,
+        action: ROWS_ACTION.ROW_SELECT,
         value: rowKeyValue,
     });
 }
@@ -115,7 +115,7 @@ export function handleDeselectRow(event) {
     markDeselectedRowsInterval(this.state, fromRowKey, rowKeyValue);
     setLastRowSelection(this.state, rowKeyValue);
     this.fireSelectedRowsChange(this.getSelectedRows(), {
-        selection: ROWS_ACTION.ROW_DESELECT,
+        action: ROWS_ACTION.ROW_DESELECT,
         value: rowKeyValue,
     });
 }

package/src/lightning/datatable/rows.js

@@ -173,6 +173,7 @@ export function updateRowsAndCellIndexes() {
                     : undefined,
                 dataLabel: colData.label,
                 value: computedCellValue, // value based on the fieldName
+                displayValue: rowData.displayValue ? rowData.displayValue : '',
                 rowKeyValue: row.key, // unique row key value
                 colKeyValue, // unique column key value
                 tabIndex: -1, // tabindex

package/src/lightning/datatable/templates/div/div.html

@@ -84,7 +84,8 @@
                                                 sorted-direction={def.sortedDirection}
                                                 column-width={def.columnWidth}
                                                 show-checkbox={showSelectAllCheckbox}
-                                                hide-header={hideTableHeader}>
+                                                hide-header={hideTableHeader}
+                                                onprivatecolumnheaderid={handleCheckboxHeaderId}>
                                             </lightning-primitive-header-factory>
                                         </template>
                                         <template if:false={def.fixedWidth}>
@@ -105,7 +106,8 @@
                                                 column-width={def.columnWidth}
                                                 resizable={hasResizebleColumns}
                                                 resizestep={widthsData.resizeStep}
-                                                hide-header={hideTableHeader}>
+                                                hide-header={hideTableHeader}
+                                                onprivatecolumnheaderid={handleCheckboxHeaderId}>
                                             </lightning-primitive-header-factory>
                                         </template>
                                     </div>

package/src/lightning/datatable/templates/table/table.html

@@ -73,7 +73,8 @@
                                                 sorted-direction={def.sortedDirection}
                                                 column-width={def.columnWidth}
                                                 show-checkbox={showSelectAllCheckbox}
-                                                hide-header={hideTableHeader}>
+                                                hide-header={hideTableHeader}
+                                                onprivatecolumnheaderid={handleCheckboxHeaderId}>
                                             </lightning-primitive-header-factory>
                                         </template>
                                         <template if:false={def.fixedWidth}>
@@ -94,7 +95,8 @@
                                                 column-width={def.columnWidth}
                                                 resizable={hasResizebleColumns}
                                                 resizestep={widthsData.resizeStep}
-                                                hide-header={hideTableHeader}>
+                                                hide-header={hideTableHeader}
+                                                onprivatecolumnheaderid={handleCheckboxHeaderId}>
                                             </lightning-primitive-header-factory>
                                         </template>
                                     </th>
@@ -167,6 +169,7 @@
                                                     row-key-value={row.key}
                                                     col-key-value={cell.colKeyValue}
                                                     value={cell.value}
+                                                    display-value={cell.displayValue}
                                                     icon-name={cell.iconName}
                                                     icon-label={cell.iconLabel}
                                                     icon-position={cell.iconPosition}
@@ -216,6 +219,7 @@
                                                     row-key-value={row.key}
                                                     col-key-value={cell.colKeyValue}
                                                     value={cell.value}
+                                                    display-value={cell.displayValue}
                                                     icon-name={cell.iconName}
                                                     icon-label={cell.iconLabel}
                                                     icon-position={cell.iconPosition}

package/src/lightning/dialog/README.md

@@ -1,4 +1,4 @@
-# Dialog
+# Dialog (Deprecated)
 
 ## Important:
 * **For any new modal work, starting in release 236, please use `lightning-modal`**

package/src/lightning/focusUtils/focus.js

@@ -81,6 +81,48 @@ export function getElementWithFocus() {
     return undefined;
 }
 
+/**
+ * Return the focus to an element if it is still attached to the DOM.
+ * @param {Element} element - element which will receive the focus.
+ * @returns {boolean} - true if the element is focused.
+ */
+export function returnFocusToElement(element) {
+    const isSavedElemInDOM = document.body.contains(element);
+    if (element) {
+        if (isSavedElemInDOM) {
+            element.focus();
+            return true;
+        }
+        const isElementInDOM = isElementInDocument(element);
+        if (isElementInDOM) {
+            element.focus();
+            return true;
+        }
+    }
+    return false;
+}
+
+/**
+ * Return true if the given element is in document (rather it is in shadow or not)
+ * @param {Element} element - element to be inspected
+ * @returns {boolean} - true if the element is in document, otherwise false
+ */
+function isElementInDocument(element) {
+    let currentElement = element;
+    // traverse all the way up to the document, to make sure
+    // the element is inside of the document.
+    while (currentElement && currentElement.parentNode) {
+        if (currentElement.parentNode === document) {
+            return true;
+        } else if (currentElement.parentNode instanceof DocumentFragment) {
+            currentElement = currentElement.parentNode.host;
+        } else {
+            currentElement = currentElement.parentNode;
+        }
+    }
+    return false;
+}
+
 /**
  * Recursively traverse an active tree and run callback on each non-inert node element.
  *

package/src/lightning/focusUtils/focusUtils.js

@@ -3,4 +3,5 @@ export {
     findAllFocusableNodes,
     getElementWithFocus,
     filterTooltips,
+    returnFocusToElement,
 } from './focus';

package/src/lightning/formattedAddress/formattedAddress.js

@@ -220,7 +220,7 @@ export default class LightningFormattedAddress extends LightningElement {
     }
 
     get mapUrl() {
-        return encodeURI(MAP_HOST + this.mapQuery);
+        return encodeURI(MAP_HOST) + encodeURIComponent(this.mapQuery);
     }
 
     get addressLink() {

package/src/lightning/input/__docs__/input.md

@@ -336,7 +336,7 @@ When `multiple` is used, the email field expects a single email address or a com
 
 #### File
 
-An input field for selecting files to upload using an `Upload Files` button or a drag-and-drop zone.
+An input field for selecting files to upload using an `Upload Files` button or a drag-and-drop zone. This field accepts files up to 3.5 MB.
 
 To retrieve the list of selected files, use
 `event.target.files` in the `onchange` event handler. Your selected files are returned in a `FileList` object, each specified as a `File` object with the `size` and `type` attributes.

package/src/lightning/input/input.html

@@ -75,6 +75,7 @@
                     onblur={handleBlur}
                     onfocus={handleFocus}
                     onchange={handleChange}
+                    onclick={handleCheckboxClick}
                     name={name}
                     required={required}
                     readonly={readOnly}
@@ -105,7 +106,7 @@
                             <abbr class="slds-required" title={i18n.required}>*</abbr>
                         </template>
                     </template>
-                    <input type="checkbox" 
+                    <input type="checkbox"
                         part="checkbox"
                         id="checkbox"
                         aria-label={computedAriaLabel}
@@ -114,6 +115,7 @@
                         onblur={handleBlur}
                         onfocus={handleFocus}
                         onchange={handleChange}
+                        onclick={handleCheckboxClick}
                         name={name}
                         required={required}
                         readonly={readOnly}
@@ -142,6 +144,7 @@
                 onblur={handleBlur}
                 onfocus={handleFocus}
                 onchange={handleChange}
+                onclick={handleCheckboxClick}
                 name={name}
                 required={required}
                 readonly={readOnly}
@@ -341,6 +344,6 @@
     </template>
 
     <template if:true={_helpMessage}>
-        <div id="help-message" class="slds-form-element__help" data-help-message role="alert" part="help-text">{_helpMessage}</div>
+        <div id="help-message" class={computedHelpMessageClass} data-help-message role="alert" part="help-text">{_helpMessage}</div>
     </template>
 </template>

package/src/lightning/input/input.js

@@ -533,7 +533,7 @@ export default class LightningInput extends LightningElement {
     @api
     get ariaLabelledBy() {
         // native version returns the auto linked value
-        if (this.isNative) {
+        if (this.isNative && this._rendered) {
             const ariaValues = this._inputElement.getAttribute(ARIA_LABELLEDBY);
             return filterNonAutoLink(ariaValues);
         }
@@ -574,7 +574,7 @@ export default class LightningInput extends LightningElement {
     }
 
     /**
-     * A Boolean value for aria-invalid.
+     * A boolean value that controls whether accessibility tools read empty required textboxes as invalid. Default value is false.
      * @type {boolean}
      */
     @api
@@ -1306,6 +1306,12 @@ export default class LightningInput extends LightningElement {
             .toString();
     }
 
+    get computedHelpMessageClass() {
+        return classSet('slds-form-element__help')
+            .add({ 'slds-m-left_none': this.variant !== VARIANT.LABEL_INLINE })
+            .toString();
+    }
+
     get normalizedMax() {
         return this._normalizeDateTimeString(this.max);
     }
@@ -1750,6 +1756,12 @@ export default class LightningInput extends LightningElement {
         }
     }
 
+    handleCheckboxClick() {
+        if (this.template.activeElement === null) {
+            this.template.querySelector("[type='checkbox']").focus();
+        }
+    }
+
     handleChange(event) {
         event.stopPropagation();