lightning-base-components 1.21.2-alpha → 1.21.4-alpha

package/src/lightning/toastContainer/toast.slds.css

@@ -1,13 +1,13 @@
 
-@supports (--styling-hooks: '') {
   /* re-assign current slds hooks using deprecated naming conventions */
   :host([data-render-mode="shadow"]) {
-    --slds-c-toast-spacing-block-end: var(--slds-c-toast-spacing-blockend);
-    --slds-c-toast-spacing-block-start: var(--slds-c-toast-spacing-blockstart);
-    --slds-c-toast-spacing-inline-end: var(--slds-c-toast-spacing-inlineend);
-    --slds-c-toast-spacing-inline-start: var(--slds-c-toast-spacing-inlinestart);
+    /* stylelint-disable */
+    --slds-c-toast-spacing-blockend: var(--slds-c-toast-spacing-block-end);
+    --slds-c-toast-spacing-blockstart: var(--slds-c-toast-spacing-block-start);
+    --slds-c-toast-spacing-inlineend: var(--slds-c-toast-spacing-inline-end);
+    --slds-c-toast-spacing-inlinestart: var(--slds-c-toast-spacing-inline-start);
+    /* stylelint-enable */
   }
-
   :host([data-render-mode="shadow"]) .slds-notify_toast {
     display: inline-flex;
     align-items: center;
@@ -25,32 +25,26 @@
     text-align: left;
     justify-content: flex-start;
   }
-
   :host([data-render-mode="shadow"]) .slds-notify_toast a {
     color: currentcolor;
     border: var(--slds-g-sizing-border-1) solid transparent;
     border-radius: var(--slds-g-radius-border-2);
   }
-
   :host([data-render-mode="shadow"]) .slds-notify_toast a:hover,:host([data-render-mode="shadow"]) 
   .slds-notify_toast a:focus {
     text-decoration: none;
     outline: 0;
   }
-
   :host([data-render-mode="shadow"]) .slds-notify_toast a:focus {
     box-shadow: 0 0 3px var(--slds-g-info-container-1);
     border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-on-info-1);
   }
-
   :host([data-render-mode="shadow"]) .slds-notify_toast a:active {
     color: var(--slds-g-color-neutral-100-opacity-50, rgba(255, 255, 255, 50%));
   }
-
   :host([data-render-mode="shadow"]) .slds-notify_toast a[disabled] {
     color: var(--slds-g-color-neutral-100-opacity-10, rgba(255, 255, 255, 15%));
   }
-
   :host([data-render-mode="shadow"]) .slds-notify_toast .slds-notify__close {
     float: right;
     position: absolute;
@@ -59,19 +53,16 @@
     margin-inline-start: var(--slds-g-spacing-1);
     transform: translateY(-0.125rem);
   }
-
   :host([data-render-mode="shadow"]) .slds-region_narrow .slds-notify_toast {
     min-width: auto;
     width: 100%;
     margin-inline-start: 0;
   }
-
   /* TODO W-12674349: remove after name-value-list utils are added */
   :host([data-render-mode="shadow"]) .slds-list--inline {
     display: inline-flex;
     max-width: 100%;
   }
-
   /* TODO W-12674349: remove after assistive text util is added */
   :host([data-render-mode="shadow"]) .slds-assistive-text {
     position: absolute !important;
@@ -85,13 +76,11 @@
     text-transform: none !important;
     white-space: nowrap !important;
   }
-
   /* TODO W-12674349: remove after text utils are added */
   :host([data-render-mode="shadow"]) .slds-text-heading_small {
     font-size: var(--slds-g-font-size-base);
     line-height: var(--slds-g-font-lineheight-2);
   }
-
   /* TODO W-12674349: remove after alert is added */
   :host([data-render-mode="shadow"]) .slds-notify__close {
     position: absolute;
@@ -100,4 +89,3 @@
     margin-inline-start: var(--slds-g-spacing-1);
     transform: translateY(-50%);
   }
-}

package/src/lightning/toastContainer/toastContainer.js

@@ -6,7 +6,11 @@ import {
     requiredProperties,
 } from 'lightning/overlayUtils';
 import { SHOW_TOAST_EVENT_NAME } from 'lightning/showToastEvent';
-import { normalizeNumber, normalizeString } from 'lightning/utilsPrivate';
+import {
+    normalizeNumber,
+    normalizeString,
+    isCSR,
+} from 'lightning/utilsPrivate';
 import { createF6Controller } from 'lightning/f6Controller';
 import {
     getElementWithFocus,
@@ -449,22 +453,26 @@ export default class ToastContainer extends LightningOverlay {
      * @returns {ToastContainer} instance of the toast container
      */
     static instance(config = {}) {
-        // create a instance if container does not exist
-        if (globalContainer.length < MAX_NUM_GLOBAL_TOAST_CONTAINER) {
-            ToastContainer.open(config);
-            return getGlobalContainer();
-        }
-        let toastContainer = getGlobalContainer();
-        if (!toastContainer.isConnected) {
-            // remove the container if it does not attached to the DOM anymore
-            toastContainer.close();
-            toastContainer = null;
-            // create a new one and returns it
-            ToastContainer.open(config);
-            return getGlobalContainer();
+        if (isCSR) {
+            // create a instance if container does not exist
+            if (globalContainer.length < MAX_NUM_GLOBAL_TOAST_CONTAINER) {
+                ToastContainer.open(config);
+                return getGlobalContainer();
+            }
+            let toastContainer = getGlobalContainer();
+            if (!toastContainer.isConnected) {
+                // remove the container if it does not attached to the DOM anymore
+                toastContainer.close();
+                toastContainer = null;
+                // create a new one and returns it
+                ToastContainer.open(config);
+                return getGlobalContainer();
+            }
+            // set container attribute if already exists
+            configure(toastContainer, config);
+            return toastContainer;
         }
-        // set container attribute if already exists
-        configure(toastContainer, config);
-        return toastContainer;
+        // Return an empty object in the server context, any property assignments will be harmless
+        return {};
     }
 }

package/src/lightning/tooltipLibrary/tooltipLibrary.js

@@ -97,6 +97,8 @@ export class Tooltip {
         this._config = { ...config };
         this._config.align = config.align || {};
         this._config.targetAlign = config.targetAlign || {};
+        this._config.disableAriaDescribedBy =
+            config.disableAriaDescribedBy || false;
 
         this._type = normalizeString(config.type, {
             fallbackValue: TooltipType.Info,
@@ -148,20 +150,21 @@ export class Tooltip {
                     break;
             }
 
-            this._ariaObserver = new AriaObserver(this._root);
-
-            this._ariaObserver.connect({
-                attribute: ARIA_DESCRIBEDBY,
-                targetNode: this._target(),
-                relatedNodes: this._element(),
-            });
+            if (!this._config.disableAriaDescribedBy) {
+                this._ariaObserver = new AriaObserver(this._root);
 
+                this._ariaObserver.connect({
+                    attribute: ARIA_DESCRIBEDBY,
+                    targetNode: this._target(),
+                    relatedNodes: this._element(),
+                });
+            }
             this._initialized = true;
         }
     }
 
     disconnect() {
-        this._ariaObserver.disconnect();
+        if (this._ariaObserver) this._ariaObserver.disconnect();
     }
 
     addInfoListeners() {
@@ -225,31 +228,40 @@ export class Tooltip {
         const target = this._target();
 
         if (!this._initialized && target) {
-            target.addEventListener('touchstart', (e) => {
-                e.stopPropagation();
-                this.toggle();
-            });
-            ['mouseenter', 'focus'].forEach((name) =>
-                target.addEventListener(name, (event) => this.show(event))
+            ['touchstart', 'click'].forEach((eventName) =>
+                target.addEventListener(eventName, (event) =>
+                    this.toggleIfTouchOrClick(event)
+                )
+            );
+
+            ['mouseenter', 'focus'].forEach((eventName) =>
+                target.addEventListener(eventName, (event) => this.show(event))
             );
-            ['mouseleave', 'blur'].forEach((name) =>
-                target.addEventListener(name, (event) =>
+            ['mouseleave', 'blur'].forEach((eventName) =>
+                target.addEventListener(eventName, (event) =>
                     this.hideIfNotSelfCover(event)
                 )
             );
 
             target.addEventListener('keydown', (event) => {
-                if (event.keyCode === 13 && !this._visible) {
-                    this.toggle();
-                } else if (this._visible) {
-                    this.hide();
-                    if (event.key === 'Escape') {
-                        event.stopPropagation();
-                    }
+                if (event.key === 'Escape' && this._visible) {
+                    this.hideIfNotSelfCover(event);
+                    event.stopPropagation();
                 }
             });
         }
     }
+
+    /* mobile listens for both 'click' and 'touchstart', but we only want to listen to
+       either 'touchstart' and not 'click', otherwise it will double toggle. Call preventDefault() to prevent the
+       'click' event from bubbling after a 'touchstart' is detected on mobile.
+    */
+    toggleIfTouchOrClick(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.toggle();
+    }
+
     handleEscape(e) {
         if (e.key === 'Escape' && this._isFocusEvent) {
             e.stopPropagation();
@@ -308,7 +320,7 @@ export class Tooltip {
         tooltip.visible = this._visible;
         tooltip.content = this._value;
 
-        if (this._root && this._root.isConnected) {
+        if (this._ariaObserver && this._root && this._root.isConnected) {
             this._ariaObserver.sync();
         }
 

package/src/lightning/tree/tree.js

@@ -247,6 +247,8 @@ export default class LightningTree extends LightningElement {
                 new CustomEvent('change', {
                     detail: {
                         items: deepCopy(this._items),
+                        key: node.nodeRef.name,
+                        expand: node.nodeRef.expanded,
                     },
                 })
             );

package/src/lightning/utils/classSet.js

@@ -1,5 +1,3 @@
-import { classSetToString } from 'lightning/utilsPrivate';
-
 function classNamesHash(hash, classes) {
     if (typeof classes === 'string') {
         const array = classes.trim().split(/\s+/);
@@ -24,7 +22,15 @@ const proto = {
         return this;
     },
     toString() {
-        return classSetToString(this);
+        let string = '';
+        const keys = Object.keys(this);
+        for (let i = 0, { length } = keys; i < length; i += 1) {
+            const key = keys[i];
+            if (this[key]) {
+                string += (string.length ? ' ' : '') + key;
+            }
+        }
+        return string;
     },
 };
 

package/src/lightning/utilsPrivate/formatUtils.js

@@ -0,0 +1,158 @@
+import {
+    isValidDate,
+    isValidLatitude,
+    isValidLongitude,
+} from './validationUtils';
+
+/**
+ * Convert a LightningFormattedDate instance (or similar) to a dateTimeFormat
+ * options object.
+ *
+ * @param {LightningFormattedDateLike} instance
+ *      An instance of the LightningFormattedDate class,
+ *      or config object matching the public API.
+ * @returns {object} The dateTimeFormat options object.
+ */
+export function toDateTimeFormatOptions(instance) {
+    const options = {
+        weekday: instance.weekday,
+        era: instance.era,
+        year: instance.year,
+        month: instance.month,
+        day: instance.day,
+        hour: instance.hour,
+        hourCycle: undefined,
+        hour12: undefined,
+        minute: instance.minute,
+        second: instance.second,
+        timeZoneName: instance.timeZoneName,
+        timeZone: instance.timeZone,
+    };
+    const { hour12 } = instance;
+    // If hour12 is set, then we use it, otherwise locale defaults will be used
+    if (instance._hour12Set) {
+        // TODO: W-7787708: Remove hourCycle workaround below when possible.
+        // W-7583911: Temporarily works around an hourCycle spec bug that only Chrome has
+        // implemented causing the default hourCycle to be 'h24' rather than 'h23' when hour12 is
+        // false in 12-hour locales. Chrome ends up displaying times like '24:45'. Spec bug fix PR:
+        // https://github.com/tc39/ecma402/pull/436/files
+        if (hour12 === false) {
+            options.hourCycle = 'h23';
+        } else {
+            options.hour12 = hour12;
+        }
+    }
+    return options;
+}
+
+/**
+ * Convert a LightningFormattedDate instance (or similar) to a string.
+ * Allows for formatting a date without the overhead of instantiating a whole
+ * component.
+ *
+ * @param {LightningFormattedDateLike} instance
+ *      An instance of the LightningFormattedDate class,
+ *      or config object matching the public API.
+ * @returns {string} The date as a string.
+ */
+export function toFormattedDate(instance, dateTimeFormat) {
+    const { value } = instance;
+    if (isValidDate(value)) {
+        const formatted = dateTimeFormat(
+            toDateTimeFormatOptions(instance)
+        ).format(value);
+        if (formatted) {
+            return formatted;
+        }
+    }
+    // eslint-disable-line no-console
+    console.warn(
+        `<lightning-formatted-date-time> The value attribute accepts either a Date object, a timestamp, or a valid ISO8601 formatted string ` +
+            `with timezone offset. but we are getting the ${typeof value} value "${value}" instead.`
+    );
+    return '';
+}
+
+/**
+ * Convert a LightningFormattedLocation instance (or similar) to a string.
+ * Allows for formatting a location without the overhead of instantiating a whole
+ * component.
+ *
+ * @param {LightningFormattedLocationLike} instance
+ *      An instance of the LightningFormattedLocation class,
+ *      or config object matching the public API.
+ * @returns {string} The latitude and longitude as a string.
+ */
+export function toFormattedLocation(instance) {
+    const { latitude, longitude } = instance;
+    if (isValidLatitude(latitude) && isValidLongitude(longitude)) {
+        return `${latitude}, ${longitude}`;
+    }
+    // eslint-disable-next-line no-console
+    console.warn(
+        `<lightning-formatted-location> expects latitude in range [-90.0, 90.0], longitude in range [-180.0, 180.0].`
+    );
+    return '';
+}
+
+/**
+ * Convert a LightningFormattedNumber instance (or similar) to a string.
+ * Allows for formatting a number without the overhead of instantiating a whole
+ * component.
+ *
+ * @param {LightningFormattedNumberLike} instance
+ *      An instance of the LightningFormattedNumber class,
+ *      or config object matching the public API.
+ * @returns {string} The number as a string.
+ */
+export function toFormattedNumber(instance, numberFormat) {
+    const { value } = instance;
+    if (
+        value !== null &&
+        value !== undefined &&
+        value !== '' &&
+        isFinite(value)
+    ) {
+        const { formatStyle } = instance;
+        const options = {
+            style: formatStyle,
+            currency: instance.currencyCode,
+            currencyDisplay: instance.currencyDisplayAs,
+            minimumIntegerDigits: instance.minimumIntegerDigits,
+            minimumFractionDigits: instance.minimumFractionDigits,
+            maximumFractionDigits: instance.maximumFractionDigits,
+            minimumSignificantDigits: instance.minimumSignificantDigits,
+            maximumSignificantDigits: instance.maximumSignificantDigits,
+        };
+
+        const valueAsString = String(value);
+
+        let valueToFormat = valueAsString;
+
+        // percent-fixed just divides the value by 100
+        // before passing to the library, this is to deal with the
+        // fact that percentages in salesforce are 0-100, not 0-1
+        if (formatStyle === 'percent-fixed') {
+            options.style = 'percent';
+
+            valueToFormat = parseFloat(value) / 100;
+
+            // If the number contains fraction digits and is not in an exponent format
+            if (
+                valueAsString.indexOf('.') > 0 &&
+                valueAsString.indexOf('e') < 0
+            ) {
+                // Depending on the input number, division by 100 may lead to rounding errors
+                // (e.g 0.785 / 100 is 0.007850000000000001), so we need to round back
+                // to the correct precision, that is - existing number of fractional digits
+                // plus extra 2 for division by 100.
+                valueToFormat = valueToFormat.toFixed(
+                    valueAsString.split('.')[1].length + 2
+                );
+            }
+        }
+        return numberFormat(options).format(valueToFormat);
+    }
+
+    return '';
+}

package/src/lightning/utilsPrivate/textUtils.js

@@ -0,0 +1,16 @@
+const hexColorCodesRegExp = /^#[0-9abcdef]{6}$/i;
+
+/**
+ * Determine if a value should ignore RTL text formatting.
+ *
+ * @param {any} value The value to check.
+ * @returns {boolean} Whether the provided value should ignore RTL text formatting.
+ */
+export function isTextIgnoreRTL(value) {
+    return (
+        typeof value === 'string' &&
+        value !== '' &&
+        // Ignoring RTL for hex color codes
+        hexColorCodesRegExp.test(value)
+    );
+}

package/src/lightning/utilsPrivate/utilsPrivate.js

@@ -1,3 +1,6 @@
+import formFactor from '@salesforce/client/formFactor';
+import { isCSR } from './ssr';
+
 export { assert } from './assert';
 export {
     ARIA,
@@ -44,30 +47,70 @@ export {
 } 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';
+export {
+    toDateTimeFormatOptions,
+    toFormattedDate,
+    toFormattedLocation,
+    toFormattedNumber,
+} from './formatUtils';
+export { isTextIgnoreRTL } from './textUtils';
+export {
+    isValidDate,
+    isValidLatitude,
+    isValidLongitude,
+    isValidPhone,
+} from './validationUtils';
+export { isCSR };
 
-export { isCSR } from './ssr';
-import formFactor from '@salesforce/client/formFactor';
+const LIGHTNING_TAG_REGEXP = /^LIGHTNING/i;
+const LIGHTNING_DASH_NAME_REGEXP = /-\w/g;
+
+function dashWordCharReplacement(dashWordCharMatch) {
+    return dashWordCharMatch[1].toUpperCase();
+}
+
+function synchronizeHTMLElementAttrs(element, attrs) {
+    const attrNames = Object.keys(attrs);
+    for (let i = 0, { length } = attrNames; i < length; i += 1) {
+        const attrName = attrNames[i];
+        const attrValue = attrs[attrName];
+        if (attrValue) {
+            element.setAttribute(attrName, attrValue);
+        } else {
+            element.removeAttribute(attrName);
+        }
+    }
+}
+
+function synchronizeLightningElementAttrs(element, attrs) {
+    const attrNames = Object.keys(attrs);
+    for (let i = 0, { length } = attrNames; i < length; i += 1) {
+        const attrName = attrNames[i];
+        const attrValue = attrs[attrName];
+        const normalizedName = attrName.replace(
+            LIGHTNING_DASH_NAME_REGEXP,
+            dashWordCharReplacement
+        );
+        element[normalizedName] = attrValue || null;
+    }
+}
 
 /**
  * @param {HTMLElement} element Element to act on
  * @param {Object} values values and attributes to set, if the value is
  *                        falsy it the attribute will be removed
  */
-export function synchronizeAttrs(element, values) {
-    if (!element) {
-        return;
-    }
-    const attributes = Object.keys(values);
-    for (let i = 0, { length } = attributes; i < length; i += 1) {
-        const attr = attributes[i];
-        smartSetAttribute(element, attr, values[attr]);
+export function synchronizeAttrs(element, attrs) {
+    if (element) {
+        if (LIGHTNING_TAG_REGEXP.test(element.tagName)) {
+            synchronizeLightningElementAttrs(element, attrs);
+        } else {
+            synchronizeHTMLElementAttrs(element, attrs);
+        }
     }
 }
 
@@ -142,7 +185,6 @@ export function getShadowActiveElements() {
 }
 
 export function isRTL() {
-    const isCSR = typeof window !== 'undefined';
     // document does not exist on server and MRT does not support RTL below the root component (https://gus.lightning.force.com/lightning/r/ADM_Epic__c/a3QEE000000KEOb2AO/view)
     return isCSR && document.dir === 'rtl';
 }
@@ -166,7 +208,6 @@ export function getZIndexBaseline() {
     // When SLDS styles are present, typically on Core
     // this currently resolves to: '9000' (string)
     // If function is called in server context, use default as window and document are not available.
-    const isCSR = typeof window !== 'undefined';
     const modalZindexValueLwc = isCSR
         ? (
               window.getComputedStyle(document.documentElement) ||

package/src/lightning/utilsPrivate/validationUtils.js

@@ -0,0 +1,59 @@
+import { isValidISODateTimeString } from 'lightning/iso8601Utils';
+
+const MAX_LONGITUDE = 180.0;
+const MAX_LATITUDE = 90.0;
+
+/**
+ * Determine if a value is a valid date.
+ *
+ * @param {any} value The value to validate.
+ * @returns {boolean} Whether the provided value is a valid date or not.
+ */
+export function isValidDate(value) {
+    if (value === null || value === undefined || value === '') {
+        return false;
+    }
+    return isFinite(value) || isValidISODateTimeString(value);
+}
+
+/**
+ * Determine if a value is a valid latitude.
+ *
+ * @param {any} value The value to validate.
+ * @returns {boolean} Whether the provided value is a valid latitude or not.
+ */
+export function isValidLatitude(value) {
+    return (
+        value !== null &&
+        value !== undefined &&
+        value !== '' &&
+        isFinite(value) &&
+        Math.abs(value) <= MAX_LATITUDE
+    );
+}
+
+/**
+ * Determine if a value is a valid longitude.
+ *
+ * @param {any} value The value to validate.
+ * @returns {boolean} Whether the provided value is a valid longitude or not.
+ */
+export function isValidLongitude(value) {
+    return (
+        value !== null &&
+        value !== undefined &&
+        value !== '' &&
+        isFinite(value) &&
+        Math.abs(value) <= MAX_LONGITUDE
+    );
+}
+
+/**
+ * Determine if a value is a valid phone value.
+ *
+ * @param {any} value The value to validate.
+ * @returns {boolean} Whether the provided value is a valid phone value or not.
+ */
+export function isValidPhone(value) {
+    return typeof value === 'string' && value !== '';
+}

package/src/lightning/verticalNavigation/vertical-navigation.slds.css

@@ -2,3 +2,17 @@
 :host([data-render-mode="shadow"]) [part='vertical-navigation'] {
   position: relative;
 }
+
+:host([data-render-mode="shadow"]) .slds-nav-vertical_compact {
+  --slds-c-verticalnavigationitem-spacing-blockstart: var(--slds-g-spacing-1);
+  --slds-c-verticalnavigationitem-spacing-blockend: var(--slds-g-spacing-1);
+  --slds-c-verticalnavigationitem-spacing-inlinestart: var(--slds-g-spacing-5);
+  --slds-c-verticalnavigationsection-spacing-blockstart: var(--slds-g-spacing-1);
+  --slds-c-verticalnavigationsection-spacing-blockend: var(--slds-g-spacing-1);
+  --slds-c-verticalnavigationsection-spacing-inlinestart: var(--slds-g-spacing-5);
+}
+
+:host([data-render-mode="shadow"]) .slds-nav-vertical_shade {
+  --slds-c-verticalnavigationitem-color: var(--slds-g-color-neutral-base-100);
+  --slds-c-verticalnavigationitem-border-color: var(--slds-g-color-neutral-base-90);
+}

package/src/lightning/verticalNavigation/verticalNavigation.css

@@ -1 +1 @@
-@import './verticalNavigation.lbc.native.css';
+@import './verticalNavigation.lbc.native.css';

package/src/lightning/verticalNavigation/verticalNavigation.html

@@ -1,5 +1,5 @@
 <template>
-    <nav class={computedClass} onprivateitemselect={handleItemSelect} onprivateitemregister={handleItemRegister} aria-label={ariaLabel} part="vertical-navigation">
+    <nav class={computedClass} aria-label={ariaLabel} part="vertical-navigation">
         <slot></slot>
     </nav>
 </template>