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

package/src/lightning/tooltipLibrary/tooltipLibrary.js

@@ -222,6 +222,13 @@ export class Tooltip {
                     this.hideIfNotSelfCover(event)
                 )
             );
+            target.addEventListener('keydown', (event) => {
+                if (event.keyCode === 13 && !this._visible) {
+                    this.toggle();
+                } else {
+                    this.hide();
+                }
+            });
         }
     }
     handleEscape(e) {

package/src/lightning/tree/tree.html

@@ -1,7 +1,7 @@
 <template>
     <div class="slds-tree_container">
         <template if:true={header}>
-            <h4 class="slds-tree__group-header" id="treeheading">{header}</h4>
+            <h4 class="slds-tree__group-header" id="treeheading" aria-level={_privateHeadingAriaLevel}>{header}</h4>
         </template>
 
         <lightning-tree-item if:true={hasChildren} class="slds-tree" role="tree" aria-labelledby={computedLabelledBy}

package/src/lightning/tree/tree.js

@@ -1,6 +1,10 @@
 import { LightningElement, api, track } from 'lwc';
 import { TreeData } from './treeData';
-import { keyCodes, deepCopy } from 'lightning/utilsPrivate';
+import {
+    keyCodes,
+    deepCopy,
+    isHeadingLevelValid,
+} from 'lightning/utilsPrivate';
 
 /**
  * Displays a nested tree.
@@ -41,6 +45,26 @@ export default class LightningTree extends LightningElement {
         );
     }
 
+    _privateHeadingAriaLevel;
+
+    /**
+     * Changes the 'aria-level' attribute value for the
+     * <h2> markup tag in the card's title element. Supported values
+     * are (1, 2, 3, 4, 5, 6).
+     *
+     * @type {string | number}
+     * @default 2
+     */
+    @api
+    get headingLevel() {
+        return this._privateHeadingAriaLevel;
+    }
+
+    set headingLevel(value) {
+        if (isHeadingLevelValid(value)) {
+            this._privateHeadingAriaLevel = value;
+        }
+    }
     /**
      * An array of key-value pairs that describe the tree. See the Documentation tab for more information.
      * @type {array}

package/src/lightning/treeGrid/__docs__/treeGrid.md

@@ -36,6 +36,9 @@ include:
 -   Selecting of rows
 -   Text wrapping and clipping
 
+This component provides styling for up to 20 nested levels. For tree grids that require more than 20 nested levels,
+build your own component.
+
 A checkbox is displayed by default in the first column. The `hide-checkbox-column` attribute
 removes the checkbox.
 
@@ -507,6 +510,18 @@ Use the following `aria` attributes on `lightning-tree-grid` to provide a captio
 | aria-label      | string            | Provides an assistive label to identify a table from other tables on a page.                                                       |
 | aria-labelledby | ID reference list | Specifies the ID or list of IDs of the element or elements that contain visible descriptive text to caption or describe the table. |
 
+You can add a `displayValue` on the dropdown arrow for a row. This `displayValue` replaces the default row `title` for the dropdown arrow's label.
+
+```javascript
+    {
+        name: '125313-7j',
+        accountName: 'Dach-Welch',
+        displayValue: 'Display Value One',
+        phone: '995-523-7024',
+    }
+```
+
+
 ##### Provide an Accessible Label for the Table
 
 Use the `aria-label` attribute to provide a more descriptive label for the table for assistive technology. The `aria-label` attribute and its value are passed down to the rendered `table` element.

package/src/lightning/treeGrid/treeGrid.js

@@ -273,30 +273,33 @@ export default class LightningTreeGrid extends LightningElement {
     handleRowSelection(event) {
         event.stopPropagation();
         // pass the event through
-        switch (event.detail.config.selection) {
-            case ROWS_ACTION.ROW_SELECT:
-                this._selectedRowKeys.push(event.detail.config.value);
-                break;
-            case ROWS_ACTION.ROW_DESELECT: {
-                const index = this._selectedRowKeys.indexOf(
-                    event.detail.config.value
-                );
-                this._selectedRowKeys.splice(index, 1);
-
-                break;
+        if (event.detail.config) {
+            switch (event.detail.config.action) {
+                case ROWS_ACTION.ROW_SELECT:
+                    this._selectedRowKeys.push(event.detail.config.value);
+                    break;
+                case ROWS_ACTION.ROW_DESELECT: {
+                    const index = this._selectedRowKeys.indexOf(
+                        event.detail.config.value
+                    );
+                    this._selectedRowKeys.splice(index, 1);
+                    break;
+                }
+                case ROWS_ACTION.SELECT_ALL_ROWS:
+                    this._selectedRowKeys = this.getSelectedRowKeys(
+                        event.detail.selectedRows
+                    );
+                    break;
+                case ROWS_ACTION.DESELECT_ALL_ROWS:
+                    this._selectedRowKeys = this.getSelectedRowKeys(
+                        event.detail.selectedRows
+                    );
+                    break;
+                default:
+                    break;
             }
-            case ROWS_ACTION.SELECT_ALL_ROWS:
-            case ROWS_ACTION.DESELECT_ALL_ROWS:
-                this._selectedRowKeys = this.getSelectedRowKeys(
-                    event.detail.selectedRows
-                );
-                break;
-            default:
-                this._selectedRowKeys.push(event.detail.config.value);
-                break;
+            event.detail.config.selectedRowKeys = this._selectedRowKeys.slice();
         }
-        delete event.detail.config; // to prevent further propagation of the config
-
         this.fireSelectedRowsChange(event.detail);
     }
 

package/src/lightning/utilsPrivate/ariaLevelHeadingUtils.js

@@ -0,0 +1,11 @@
+/**
+ * These are all values that can be set to "aria-level" attribute of h2 tag for the card's title.
+ */
+export const VALID_HEADING_LEVELS = ['1', '2', '3', '4', '5', '6'];
+
+export function isHeadingLevelValid(level) {
+    return (
+        (typeof level === 'string' || typeof level === 'number') &&
+        VALID_HEADING_LEVELS.includes(level.toString())
+    );
+}

package/src/lightning/utilsPrivate/normalize.js

@@ -25,6 +25,23 @@ export function normalizeBoolean(value) {
     return typeof value === 'string' || !!value;
 }
 
+const isNotNumber = (value) => {
+    // Need to make sure it is a number than check isNaN
+    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN#difference_between_number.isnan_and_global_isnan
+    if (
+        Number.isNaN(value) ||
+        value === null ||
+        value === undefined ||
+        value === '' ||
+        Array.isArray(value)
+    ) {
+        return true;
+    }
+    // to eliminate non numeric string or other non numeric-typed objects
+    const convertedNumber = Number(value);
+    return Number.isNaN(convertedNumber);
+};
+
 /**
  * A number normalization utility for attributes.
  * @param {number} value - The value to normalize.
@@ -39,18 +56,17 @@ export function normalizeNumber(value, config = {}) {
     const returnValueIfInvalid =
         (typeof fallbackValue === 'number' && fallbackValue) || undefined;
 
-    // Need to make sure it is a number than check isNaN
-    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN#difference_between_number.isnan_and_global_isnan
-    if (typeof value !== 'number' || Number.isNaN(value)) {
+    if (isNotNumber(value)) {
         return returnValueIfInvalid;
     }
-    if (typeof minValue === 'number' && value < minValue) {
+    if (!isNotNumber(value) && value < minValue) {
         return returnValueIfInvalid;
     }
-    if (typeof maxValue === 'number' && value > maxValue) {
+    if (!isNotNumber(value) && value > maxValue) {
         return returnValueIfInvalid;
     }
-    return value;
+    // multiplying 1 is to make sure to convert from a numeric string to a number
+    return value * 1;
 }
 
 export function normalizeArray(value) {

package/src/lightning/utilsPrivate/os.js

@@ -0,0 +1,36 @@
+/**
+ * Verify if user is using MAC OS or not
+ * @returns {boolean} - true if Mac OS
+ */
+export const isMacOSTest = ({ userAgent }) => {
+    return /(macintosh|macintel|macppc|mac68k|macos)/i.test(userAgent);
+};
+
+/**
+ * Verify if user is using iOS or not
+ * @returns {boolean} - true, if iOS
+ */
+export const isiOSTest = ({ userAgent }) => {
+    return /(iphone|ipad|ipod)/i.test(userAgent);
+};
+
+/**
+ * Verify if user is using Windows OS or not
+ * @returns {boolean} - true, if Windows OS
+ */
+export const isWindowsOSTest = ({ userAgent }) => {
+    return /(win32|win64|windows)/i.test(userAgent);
+};
+
+/**
+ * Verify if user is using Android OS or not
+ * @returns {boolean} - true, if Android OS
+ */
+export const isAndroidOSTest = ({ userAgent }) => {
+    return /android/i.test(userAgent);
+};
+
+export const isMacOS = isMacOSTest(navigator);
+export const isWindowsOS = isWindowsOSTest(navigator);
+export const isiOS = isiOSTest(navigator);
+export const isAndroidOS = isAndroidOSTest(navigator);

package/src/lightning/utilsPrivate/utilsPrivate.js

@@ -42,8 +42,15 @@ export {
     parseToFormattedParts,
 } from './linkify';
 export { isValidPageReference } from './pageReference';
+export { isMacOS, isWindowsOS, isiOS, isAndroidOS } from './os';
+
 import { smartSetAttribute } from './smartSetAttribute';
 
+export {
+    VALID_HEADING_LEVELS,
+    isHeadingLevelValid,
+} from './ariaLevelHeadingUtils.js';
+
 /**
  * @param {HTMLElement} element Element to act on
  * @param {Object} values values and attributes to set, if the value is

package/src/lightning/verticalNavigationSection/verticalNavigationSection.html

@@ -1,6 +1,6 @@
 <template>
     <div class="slds-nav-vertical__section" onprivateoverflowregister={handleOverflowRegister}>
-        <h2 id="vertical-navigation-section-heading" class="slds-nav-vertical__title">{label}</h2>
+        <h2 id="vertical-navigation-section-heading" class="slds-nav-vertical__title" aria-level={_privateHeadingAriaLevel}>{label}</h2>
         <div role="list" aria-describedby="vertical-navigation-section-heading">
             <slot></slot>
         </div>

package/src/lightning/verticalNavigationSection/verticalNavigationSection.js

@@ -1,5 +1,5 @@
 import { LightningElement, api, track } from 'lwc';
-import { guid } from 'lightning/utilsPrivate';
+import { guid, isHeadingLevelValid } from 'lightning/utilsPrivate';
 
 export default class LightningVerticalNavigationSection extends LightningElement {
     headingId = guid();
@@ -28,4 +28,25 @@ export default class LightningVerticalNavigationSection extends LightningElement
         const item = event.detail;
         item.callbacks.updateAssistiveText(this.label);
     }
+
+    _privateHeadingAriaLevel;
+
+    /**
+     * Changes the 'aria-level' attribute value for the
+     * <h2> markup tag in the card's title element. Supported values
+     * are (1, 2, 3, 4, 5, 6).
+     *
+     * @type {string | number}
+     * @default 2
+     */
+    @api
+    get headingLevel() {
+        return this._privateHeadingAriaLevel;
+    }
+
+    set headingLevel(value) {
+        if (isHeadingLevelValid(value)) {
+            this._privateHeadingAriaLevel = value;
+        }
+    }
 }

package/scopedImports/@salesforce-label-LightningToast.missingToastLabel.js

@@ -1 +0,0 @@
-export default 'Provide at least the "label" property to show the toast.';

package/scopedImports/@salesforce-label-LightningToastContainer.missingToastConfig.js

@@ -1 +0,0 @@
-export default 'Unable to show toast, missing toast config.';

package/scopedImports/@salesforce-label-LightningToastContainer.missingToastProperty.js

@@ -1 +0,0 @@
-export default 'Unable to show toast, missing toast property\'s "{0}".';