lightning-base-components 1.16.7-alpha → 1.17.1-alpha

package/src/lightning/primitiveColorpickerButton/primitiveColorpickerButton.css

@@ -1,2 +1,2 @@
-@import 'lightning/sldsCommon';
-@import './color-picker-button.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './color-picker-button.slds.css'; */

package/src/lightning/primitiveIcon/primitiveIcon.css

@@ -1,6 +1,3 @@
-@import 'lightning/sldsCommon';
-@import './icon.slds.css';
-
 /*
 "Temporary" fix for Edge SVG quirk. We can remove this when it is fixed either
 at the SLDS level or at the browser level.

package/src/lightning/primitiveIcon/primitiveIcon.html

@@ -1,5 +1,5 @@
 <template>
-    <svg class={computedClass} focusable="false" data-key={name} aria-hidden="true" part="icon">
+    <svg class={computedClass} focusable="false" data-key={name} aria-hidden="true">
         <use xlink:href={href}></use>
     </svg>
 </template>

package/src/lightning/primitiveIcon/primitiveIcon.js

@@ -1,16 +1,14 @@
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
-import { api } from 'lwc';
+import { LightningElement, api } from 'lwc';
 import { classSet } from 'lightning/utils';
 import { normalizeString as normalize } from 'lightning/utilsPrivate';
 
 import standardTemplate from './primitiveIcon.html';
-import iconStylesheets from './primitiveIcon.css';
 
 import { getName, isValidName, polyfill } from 'lightning/iconUtils';
 import dir from '@salesforce/i18n/dir';
 import { fetchIconLibrary, hasIconLibrary, getIconLibrary } from './fetch';
 
-export default class LightningPrimitiveIcon extends LightningShadowBaseClass {
+export default class LightningPrimitiveIcon extends LightningElement {
     @api src;
     @api svgClass;
     _size = 'medium';
@@ -25,7 +23,6 @@ export default class LightningPrimitiveIcon extends LightningShadowBaseClass {
     }
     set size(val) {
         this._size = val;
-        this.setAttribute('size', this.normalizeSize(this._size));
     }
 
     @api
@@ -34,7 +31,6 @@ export default class LightningPrimitiveIcon extends LightningShadowBaseClass {
     }
     set variant(val) {
         this._variant = val;
-        this.setAttribute('variant', this.normalizeVariant(this._variant));
     }
 
     @api
@@ -99,11 +95,6 @@ export default class LightningPrimitiveIcon extends LightningShadowBaseClass {
                         this._iconLibrary[`${spriteName}_${iconName}`];
 
                     if (template) {
-                        // manually attach the stylesheets in native shadow mode
-                        if (!this.template.synthetic) {
-                            template.stylesheets = iconStylesheets;
-                        }
-
                         return template;
                     }
                 }
@@ -120,14 +111,14 @@ export default class LightningPrimitiveIcon extends LightningShadowBaseClass {
         return getName(this.iconName);
     }
 
-    normalizeSize(val) {
-        return normalize(val, {
+    get normalizedSize() {
+        return normalize(this._size, {
             fallbackValue: 'medium',
             validValues: ['xx-small', 'x-small', 'small', 'medium', 'large'],
         });
     }
 
-    normalizeVariant(val) {
+    get normalizedVariant() {
         // NOTE: Leaving a note here because I just wasted a bunch of time
         // investigating why both 'bare' and 'inverse' are supported in
         // lightning-primitive-icon. lightning-icon also has a deprecated
@@ -135,7 +126,7 @@ export default class LightningPrimitiveIcon extends LightningShadowBaseClass {
         // that no classes should be applied. So this component needs to
         // support both 'bare' and 'inverse' while lightning-icon only needs to
         // support 'inverse'.
-        return normalize(val, {
+        return normalize(this._variant, {
             fallbackValue: '',
             validValues: ['bare', 'error', 'inverse', 'warning', 'success'],
         });
@@ -143,12 +134,13 @@ export default class LightningPrimitiveIcon extends LightningShadowBaseClass {
 
     get computedClass() {
         const classes = classSet(this.svgClass);
+        const { normalizedSize, normalizedVariant } = this;
 
-        if (this._variant !== 'bare') {
+        if (normalizedVariant !== 'bare') {
             classes.add('slds-icon');
         }
 
-        switch (this._variant) {
+        switch (normalizedVariant) {
             case 'error':
                 classes.add('slds-icon-text-error');
                 break;
@@ -169,8 +161,8 @@ export default class LightningPrimitiveIcon extends LightningShadowBaseClass {
                 }
         }
 
-        if (this._size !== 'medium') {
-            classes.add(`slds-icon_${this._size}`);
+        if (normalizedSize !== 'medium') {
+            classes.add(`slds-icon_${normalizedSize}`);
         }
 
         return classes.toString();

package/src/lightning/prompt/__examples__disabled/basic/basic.css

@@ -2,6 +2,6 @@
     margin: 0.5rem;
     border-radius: 0.5rem;
     background: #FFF;
-    box-shadow: 0 1px 0.25rem rgba(0, 0, 0, 0.2);
+    box-shadow: 0 1px 0.25rem rgb(0 0 0 / 20%);
     padding: 1rem;
 }

package/src/lightning/prompt/prompt.css

@@ -1,23 +1,24 @@
 .slds-form-element__label {
     overflow-wrap: break-word;
     word-wrap: break-word;
-    -webkit-hyphens: auto;
-    -ms-hyphens: auto;
+    hyphens: auto;
+    hyphens: auto;
     hyphens: auto;
     display: inline-block;
-    color: var(--slds-g-color-neutral-base-30, #444444);
+    color: var(--slds-g-color-neutral-base-30, #444);
     font-size: 0.75rem;
     padding-right: 0.5rem;
     padding-top: 0.25rem;
     margin-bottom: 0.125rem;
 }
+
 .slds-form-element__label:empty {
     margin: 0;
 }
 
 .slds-no-flex {
     -webkit-box-flex: 0;
-    -ms-flex: none;
+    flex: none;
     flex: none;
 }
 
@@ -42,26 +43,29 @@
     line-height: 1.875rem;
     border: 1px solid var(--slds-c-input-color-border, var(--sds-c-input-color-border, var(--slds-g-color-border-base-4,#c9c9c9)));
     border-radius: var(--slds-c-input-radius-border, var(--sds-c-input-radius-border, 0.25rem));
-    background-color: var(--slds-c-input-color-background, var(--sds-c-input-color-background, var(--slds-g-color-neutral-base-100, #ffffff)));
+    background-color: var(--slds-c-input-color-background, var(--sds-c-input-color-background, var(--slds-g-color-neutral-base-100, #fff)));
     color: var(--slds-c-input-text-color, var(--sds-c-input-text-color));
-    -webkit-box-shadow: var(--slds-c-input-shadow, var(--sds-c-input-shadow));
     box-shadow: var(--slds-c-input-shadow, var(--sds-c-input-shadow));
-    -webkit-transition: border 0.1s linear, background-color 0.1s linear;
+    box-shadow: var(--slds-c-input-shadow, var(--sds-c-input-shadow));
+    transition: border 0.1s linear, background-color 0.1s linear;
     transition: border 0.1s linear, background-color 0.1s linear;
     display: inline-block;
 }
+
 .slds-input:focus,
 .slds-input:active {
     /*! @css-var-fallback border-color */
     border-color: var(--sds-c-input-color-border-focus, var(--slds-g-color-border-brand-2,#1b96ff));
+
     /*! @css-var-fallback background-color */
     background-color: var(
         --sds-c-input-color-background-focus,
-        var(--sds-c-input-color-background, var(--slds-g-color-neutral-base-100, #ffffff))
+        var(--sds-c-input-color-background, var(--slds-g-color-neutral-base-100, #fff))
     );
     color: var(--sds-c-input-text-color-focus);
+
     /*! @css-var-fallback box-shadow */
-    -webkit-box-shadow: var(--sds-c-input-shadow-focus, 0 0 3px var(--slds-g-color-brand-base-50, #0176d3));
+    box-shadow: var(--sds-c-input-shadow-focus, 0 0 3px var(--slds-g-color-brand-base-50, #0176d3));
     box-shadow: var(--sds-c-input-shadow-focus, 0 0 3px var(--slds-g-color-brand-base-50, #0176d3));
     outline: 0;
 }
@@ -74,8 +78,8 @@ input {
 }
 
 *,
-*:before,
-*:after {
-    -webkit-box-sizing: border-box;
+*::before,
+*::after {
+    box-sizing: border-box;
     box-sizing: border-box;
 }

package/src/lightning/radioGroup/input-radio-group.slds.css

@@ -538,7 +538,7 @@
 /* Apply left borders to anything radio button after the first button */
 
 :host([data-render-mode="shadow"]) .slds-radio_button + .slds-radio_button {
-  border-left: var(--sds-g-sizing-border-1, 1px) solid var(--sds-g-color-palette-neutral-90, #e5e5e5);
+  border-inline-start: var(--sds-g-sizing-border-1, 1px) solid var(--sds-g-color-palette-neutral-90, #e5e5e5);
   margin: 0;
 }
 
@@ -546,13 +546,15 @@
 
 :host([data-render-mode="shadow"]) .slds-radio_button:first-child > .slds-radio_button__label,:host([data-render-mode="shadow"]) 
 .slds-radio_button:first-child > .slds-radio_faux {
-  border-radius: var(--sds-g-radius-border-2, 0.25rem) 0 0 var(--sds-g-radius-border-2, 0.25rem);
+  border-start-start-radius: var(--sds-g-radius-border-2, 0.25rem);
+    border-end-start-radius: var(--sds-g-radius-border-2, 0.25rem);
 }
 
 :host([data-render-mode="shadow"]) .slds-button_last > .slds-radio_faux,:host([data-render-mode="shadow"]) 
 .slds-radio_button:last-child > .slds-radio_faux,:host([data-render-mode="shadow"]) 
 .slds-radio_button:last-child > .slds-radio_button__label {
-  border-radius: 0 var(--sds-g-radius-border-2, 0.25rem) var(--sds-g-radius-border-2, 0.25rem) 0;
+  border-start-end-radius: var(--sds-g-radius-border-2, 0.25rem);
+    border-end-end-radius: var(--sds-g-radius-border-2, 0.25rem);
 }
 
 /* Checked State with Interactions */

package/src/lightning/radioGroup/radioGroup.css

@@ -1,4 +1,4 @@
-@import './input-radio-group.slds.css';
+/* @import './input-radio-group.slds.css'; */
 
 :host {
     display: block;

package/src/lightning/sldsCommon/sldsCommon.css

@@ -39,13 +39,13 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
  [type='button'],
  [type='reset'],
  [type='submit'] {
-   -webkit-appearance: button;
+   appearance: button;
    appearance: button;
    cursor: pointer;
  }
 
  [type='search'] {
-   -webkit-appearance: textfield;
+   appearance: textfield;
    outline-offset: -2px;
  }
 
@@ -62,11 +62,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
  }
 
  ::-webkit-search-decoration {
-   -webkit-appearance: none;
+   appearance: none;
  }
 
  ::-webkit-file-upload-button {
-   -webkit-appearance: button;
+   appearance: button;
    font: inherit;
  }
 

package/src/lightning/spinner/spinner.css

@@ -1,2 +1,2 @@
-@import 'lightning/sldsCommon';
-@import './spinner.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './spinner.slds.css'; */

package/src/lightning/tile/__examples__/basic/basic.css

@@ -1,7 +1,7 @@
 .lgc-bg {
-    background-color: rgb(242, 242, 242);
+    background-color: rgb(242 242 242);
 }
 
 .lgc-bg-inverse {
-    background-color: rgb(22, 50, 92);
+    background-color: rgb(22 50 92);
 }

package/src/lightning/tile/__examples__/list/list.css

@@ -1,7 +1,7 @@
 .lgc-bg {
-    background-color: rgb(242, 242, 242);
+    background-color: rgb(242 242 242);
 }
 
 .lgc-bg-inverse {
-    background-color: rgb(22, 50, 92);
+    background-color: rgb(22 50 92);
 }

package/src/lightning/tile/__examples__/withAvatar/withAvatar.css

@@ -1,7 +1,7 @@
 .lgc-bg {
-    background-color: rgb(242, 242, 242);
+    background-color: rgb(242 242 242);
 }
 
 .lgc-bg-inverse {
-    background-color: rgb(22, 50, 92);
+    background-color: rgb(22 50 92);
 }

package/src/lightning/tile/__examples__/withIcon/withIcon.css

@@ -1,7 +1,7 @@
 .lgc-bg {
-    background-color: rgb(242, 242, 242);
+    background-color: rgb(242 242 242);
 }
 
 .lgc-bg-inverse {
-    background-color: rgb(22, 50, 92);
+    background-color: rgb(22 50 92);
 }

package/src/lightning/tooltipLibrary/tooltipLibrary.js

@@ -85,6 +85,7 @@ export class Tooltip {
     _disabled = true;
     _initialized = false;
     _visible = false;
+    _isFocusEvent = false;
 
     _config = {};
 
@@ -171,7 +172,7 @@ export class Tooltip {
                 target.addEventListener(name, () => this.show())
             );
             // Unlike the tooltip in Aura, we want clicks and keys to dismiss the tooltip.
-            ['mouseleave', 'blur', 'click'].forEach((name) =>
+            ['mouseleave', 'blur', 'click', 'keydown'].forEach((name) =>
                 target.addEventListener(name, (event) =>
                     this.hideIfNotSelfCover(event)
                 )
@@ -180,34 +181,24 @@ export class Tooltip {
     }
 
     hideIfNotSelfCover(event) {
-        if (this._visible) {
-            if (
-                (event.type === 'mouseleave' &&
-                    event.clientX &&
-                    event.clientY) ||
-                event.key === 'Escape'
-            ) {
-                // In any chance, if mouseleave is caused by tooltip itself, it would means
-                // tooltip cover the target which mostly caused by dynamic resize of tooltip by CSS or JS.
-                try {
-                    const elementMouseIsOver = document.elementFromPoint
-                        ? document.elementFromPoint(
-                              event.clientX,
-                              event.clientY
-                          )
-                        : null;
-                    if (elementMouseIsOver === this._element()) {
-                        if (!isResizeObserverSupported()) {
-                            this.startPositioning();
-                        }
-                        return;
+        if (event.type === 'mouseleave' && event.clientX && event.clientY) {
+            // In any chance, if mouseleave is caused by tooltip itself, it would means
+            // tooltip cover the target which mostly caused by dynamic resize of tooltip by CSS or JS.
+            try {
+                const elementMouseIsOver = document.elementFromPoint
+                    ? document.elementFromPoint(event.clientX, event.clientY)
+                    : null;
+                if (elementMouseIsOver === this._element()) {
+                    if (!isResizeObserverSupported()) {
+                        this.startPositioning();
                     }
-                } catch (ex) {
-                    // Jest Throw Exception
+                    return;
                 }
+            } catch (ex) {
+                // Jest Throw Exception
             }
-            this.hide();
         }
+        this.hide();
     }
 
     handleDocumentTouch() {
@@ -224,7 +215,7 @@ export class Tooltip {
                 this.toggle();
             });
             ['mouseenter', 'focus'].forEach((name) =>
-                target.addEventListener(name, () => this.show())
+                target.addEventListener(name, (event) => this.show(event))
             );
             ['mouseleave', 'blur'].forEach((name) =>
                 target.addEventListener(name, (event) =>
@@ -234,7 +225,7 @@ export class Tooltip {
         }
     }
     handleEscape(e) {
-        if (e.key === 'Escape') {
+        if (e.key === 'Escape' && this._isFocusEvent) {
             e.stopPropagation();
             this.hideIfNotSelfCover(e);
         }
@@ -251,10 +242,11 @@ export class Tooltip {
         return this._resizeObserver;
     }
 
-    show() {
+    show(ev) {
         if (this._disabled) {
             return;
         }
+        this._isFocusEvent = ev && (ev.type === 'focus' ? true : false);
 
         this._visible = true;
         const tooltip = this._element();

package/src/lightning/tree/__examples__/basic/basic.css

@@ -1,7 +1,7 @@
 .lgc-bg {
-    background-color: rgb(242, 242, 242);
+    background-color: rgb(242 242 242);
 }
 
 .lgc-bg-inverse {
-    background-color: rgb(22, 50, 92);
+    background-color: rgb(22 50 92);
 }

package/src/lightning/tree/__examples__/deeplyNested/deeplyNested.css

@@ -1,7 +1,7 @@
 .lgc-bg {
-    background-color: rgb(242, 242, 242);
+    background-color: rgb(242 242 242);
 }
 
 .lgc-bg-inverse {
-    background-color: rgb(22, 50, 92);
+    background-color: rgb(22 50 92);
 }

package/src/lightning/tree/__examples__/links/links.css

@@ -1,7 +1,7 @@
 .lgc-bg {
-    background-color: rgb(242, 242, 242);
+    background-color: rgb(242 242 242);
 }
 
 .lgc-bg-inverse {
-    background-color: rgb(22, 50, 92);
+    background-color: rgb(22 50 92);
 }

package/src/lightning/tree/__examples__/metatext/metatext.css

@@ -1,7 +1,7 @@
 .lgc-bg {
-    background-color: rgb(242, 242, 242);
+    background-color: rgb(242 242 242);
 }
 
 .lgc-bg-inverse {
-    background-color: rgb(22, 50, 92);
+    background-color: rgb(22 50 92);
 }

package/src/lightning/tree/__examples__/onselect/onselect.css

@@ -1,7 +1,7 @@
 .lgc-bg {
-    background-color: rgb(242, 242, 242);
+    background-color: rgb(242 242 242);
 }
 
 .lgc-bg-inverse {
-    background-color: rgb(22, 50, 92);
+    background-color: rgb(22 50 92);
 }

package/src/lightning/tree/tree.html

@@ -1,8 +1,10 @@
 <template>
     <div class="slds-tree_container">
-        <h4 class="slds-tree__group-header" id="treeheading">{header}</h4>
+        <template if:true={header}>
+            <h4 class="slds-tree__group-header" id="treeheading">{header}</h4>
+        </template>
 
-        <lightning-tree-item if:true={hasChildren} class="slds-tree" role="tree" aria-labelledby="treeheading"
+        <lightning-tree-item if:true={hasChildren} class="slds-tree" role="tree" aria-labelledby={computedLabelledBy}
             is-root node-key={rootElement} child-items={children} focused-child={focusedChild} >
         </lightning-tree-item>
     </div>

package/src/lightning/tree/tree.js

@@ -81,6 +81,13 @@ export default class LightningTree extends LightningElement {
         return this._focusedChild;
     }
 
+    get computedLabelledBy() {
+        if (this.header) {
+            return 'treeheading';
+        }
+        return null;
+    }
+
     syncSelected() {
         if (this.treedata && this._childNodes.length > 0) {
             this._selectedItem = this.treedata.syncSelectedToData(

package/src/lightning/treeGrid/__examples__/basic/basic.css

@@ -1,7 +1,7 @@
 .lgc-bg {
-    background-color: rgb(242, 242, 242);
+    background-color: rgb(242 242 242);
 }
 
 .lgc-bg-inverse {
-    background-color: rgb(22, 50, 92);
+    background-color: rgb(22 50 92);
 }

package/src/lightning/treeGrid/__examples__/expanded/expanded.css

@@ -1,7 +1,7 @@
 .lgc-bg {
-    background-color: rgb(242, 242, 242);
+    background-color: rgb(242 242 242);
 }
 
 .lgc-bg-inverse {
-    background-color: rgb(22, 50, 92);
+    background-color: rgb(22 50 92);
 }

package/src/lightning/treeGrid/__examples__/lazyLoading/lazyLoading.css

@@ -1,7 +1,7 @@
 .lgc-bg {
-    background-color: rgb(242, 242, 242);
+    background-color: rgb(242 242 242);
 }
 
 .lgc-bg-inverse {
-    background-color: rgb(22, 50, 92);
+    background-color: rgb(22 50 92);
 }

package/src/lightning/utilsPrivate/aria.js

@@ -155,8 +155,12 @@ export function updateAriaInvalidOnElement(element, isInvalid) {
  * @param value
  * @returns {boolean|undefined}
  */
-export function computeAriaInvalid(isInvalid, value) {
+export function computeAriaInvalid(isInvalid, value, ariaInvalid) {
+    if (typeof ariaInvalid !== 'undefined') {
+        return ariaInvalid;
+    }
     if (value === undefined || value === null || value === '') {
+        /* To Preserve backward compatibility */
         return undefined;
     }
     return !!isInvalid || undefined;

package/src/lightning/utilsPrivate/url.js

@@ -8,3 +8,32 @@ export function makeAbsoluteUrl(url) {
     const protocol = window.location.protocol;
     return isAbsoluteUrl(url) ? url : `${protocol}//${url}`;
 }
+
+export const FALLBACK_URL = 'about:blank';
+const IS_SCRIPT_OR_DATA = /^(?:\w+script|data):/i;
+const IS_HTML_ENTITY = /&#(\w+)(^\w|;)?/g;
+const htmlCtrlEntityRegex = /&(newline|tab);/gi;
+const ctrlCharactersRegex =
+    // eslint-disable-next-line no-control-regex
+    /[\u0000-\u001F\u007F-\u009F\u2000-\u200D\uFEFF]/gim;
+
+function decodeHtmlCharacters(str) {
+    return str.replace(IS_HTML_ENTITY, (match, dec) => {
+        return String.fromCharCode(dec);
+    });
+}
+/**
+ * Mark sure to preventDefault, when sanitized url matches FALLBACK_URL
+ * W-12029667 - Making FALLBACK_URL as '#' causes click action to fail on tests
+ * */
+export function sanitizeURL(url) {
+    if (url) {
+        // remove html entity characters from url
+        const sanitizedUrl = decodeHtmlCharacters(url)
+            .replace(htmlCtrlEntityRegex, '')
+            .replace(ctrlCharactersRegex, '')
+            .trim();
+        return sanitizedUrl.match(IS_SCRIPT_OR_DATA) ? FALLBACK_URL : url;
+    }
+    return FALLBACK_URL;
+}

package/src/lightning/utilsPrivate/utilsPrivate.js

@@ -9,7 +9,12 @@ export {
 export { EventEmitter } from './eventEmitter';
 export { toNorthAmericanPhoneNumber } from './phonify';
 export * from './linkUtils';
-export { isAbsoluteUrl, makeAbsoluteUrl } from './url';
+export {
+    isAbsoluteUrl,
+    makeAbsoluteUrl,
+    sanitizeURL,
+    FALLBACK_URL,
+} from './url';
 export { deepCopy, arraysEqual, ArraySlice } from './utility';
 export { guid } from './guid';
 export { classListMutation } from './classListMutation';