lightning-base-components 1.18.6-alpha → 1.18.7-alpha

package/src/lightning/{inputUtils/number.js → input/numberUtil.js}

@@ -5,7 +5,7 @@ import {
     toLocalizedDigits,
     numberFormat,
 } from 'lightning/internationalizationLibrary';
-import { isEmptyString } from './utils';
+import { isEmptyString } from 'lightning/inputUtils';
 import { normalizeNumber } from 'lightning/utilsPrivate';
 
 const VALID_NUMBER_CHARACTERS_EXPRESSION = new RegExp(

package/src/lightning/inputUtils/inputUtils.js

@@ -6,18 +6,23 @@ export {
     FieldConstraintApiWithProxyInput,
     FieldConstraintApi,
 } from './validity';
-export { normalizeInput, normalizeVariant, VARIANT } from './normalize';
-export { isValidEmail, isValidMultipleEmails } from './email';
-export {
-    calculateFractionDigitsFromStep,
-    formatNumber,
-    fromIsoDecimal,
-    hasValidNumberShortcut,
-    hasValidNumberSymbol,
-    increaseNumberByStep,
-    isValidNumber,
-    isValidNumberCharacter,
-    stringifyNumber,
-    toIsoDecimal,
-} from './number';
-export { isEmptyString, isEmptyObject } from './utils';
+export { normalizeVariant, VARIANT } from './normalize';
+
+export function isEmptyString(s) {
+    return (
+        s === undefined ||
+        s === null ||
+        (typeof s === 'string' && s.trim() === '')
+    );
+}
+
+export function isEmptyObject(obj) {
+    if (obj === undefined || obj === null || typeof obj !== 'object') {
+        return false;
+    }
+    // eslint-disable-next-line guard-for-in
+    for (const name in obj) {
+        return false;
+    }
+    return true;
+}

package/src/lightning/inputUtils/normalize.js

@@ -23,10 +23,3 @@ export function normalizeVariant(value) {
         ],
     });
 }
-
-export function normalizeInput(value) {
-    if (typeof value === 'number' || typeof value === 'string') {
-        return String(value);
-    }
-    return '';
-}

package/src/lightning/layout/layout.css

@@ -1,5 +1,5 @@
-@import 'lightning/sldsCommon';
-@import 'lightning/sldsUtilsGrid';
+/* @import 'lightning/sldsCommon';
+@import 'lightning/sldsUtilsGrid'; */
 
 @media all and (-ms-high-contrast: none),
 (-ms-high-contrast: active) {

package/src/lightning/layout/layout.js

@@ -1,5 +1,4 @@
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import {
     normalizeParam,
     computeLayoutClass,
@@ -12,9 +11,7 @@ import { normalizeBoolean } from 'lightning/utilsPrivate';
 /**
  * Represents a responsive grid system for arranging containers on a page.
  */
-export default class LightningLayout extends LightningShadowBaseClass {
-    static validationOptOut = ['class'];
-
+export default class LightningLayout extends LightningElement {
     /**
      * Determines how to spread the layout items horizontally.
      * The alignment options are center, space, spread, and end.
@@ -82,7 +79,6 @@ export default class LightningLayout extends LightningShadowBaseClass {
     _layoutClass = [];
 
     connectedCallback() {
-        super.connectedCallback();
         this.updateClassList();
     }
 

package/src/lightning/layoutItem/layoutItem.css

@@ -1,5 +1,5 @@
-@import 'lightning/sldsCommon';
+/* @import 'lightning/sldsCommon';
 @import 'lightning/sldsUtilsBox';
 @import 'lightning/sldsUtilsGrid';
 @import 'lightning/sldsUtilsPadding';
-@import 'lightning/sldsUtilsSizing';
+@import 'lightning/sldsUtilsSizing'; */

package/src/lightning/layoutItem/layoutItem.js

@@ -1,5 +1,4 @@
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import {
     normalizeFlexibility,
     normalizePadding,
@@ -14,9 +13,7 @@ import {
  * A layout item groups information together to define visual grids, spacing, and sections.
  * @slot default Placeholder for your content in lightning-layout-item.
  */
-export default class LightningLayoutItem extends LightningShadowBaseClass {
-    static validationOptOut = ['class'];
-
+export default class LightningLayoutItem extends LightningElement {
     /**
      * Make the item fluid so that it absorbs any extra space in its
      * container or shrinks when there is less space. Allowed values are:
@@ -139,7 +136,6 @@ export default class LightningLayoutItem extends LightningShadowBaseClass {
     _layoutClass = [];
 
     connectedCallback() {
-        super.connectedCallback();
         this.updateClassList();
     }
 

package/src/lightning/menuDivider/menuDivider.css

@@ -1,5 +1,5 @@
-@import 'lightning/sldsCommon';
-@import './menu-divider.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './menu-divider.slds.css'; */
 
 :host {
     display: block;

package/src/lightning/menuDivider/menuDivider.js

@@ -1,16 +1,14 @@
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { classSet } from 'lightning/utils';
 import { normalizeString as normalize } from 'lightning/utilsPrivate';
 
 /**
  * Creates a divider in the list of items for lightning-button-menu.
  */
-export default class LightningMenuDivider extends LightningShadowBaseClass {
+export default class LightningMenuDivider extends LightningElement {
     @track _variant = 'standard';
 
     connectedCallback() {
-        super.connectedCallback();
         this.setAttribute('role', 'separator');
     }
 

package/src/lightning/menuItem/menuItem.css

@@ -1,5 +1,5 @@
-@import 'lightning/sldsCommon';
-@import './menu-item.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './menu-item.slds.css'; */
 
 :host {
     display: block;

package/src/lightning/menuItem/menuItem.js

@@ -1,5 +1,4 @@
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { classSet } from 'lightning/utils';
 import {
     normalizeBoolean,
@@ -11,7 +10,7 @@ import { sanitizeURL, FALLBACK_URL } from 'lightning/utilsPrivate';
 /**
  * Represents a list item in a menu.
  */
-export default class LightningMenuItem extends LightningShadowBaseClass {
+export default class LightningMenuItem extends LightningElement {
     /**
      * A value associated with the menu item.
      * @type {string}
@@ -63,7 +62,6 @@ export default class LightningMenuItem extends LightningShadowBaseClass {
     @api draftAlternativeText;
 
     connectedCallback() {
-        super.connectedCallback();
         this.setAttribute('role', 'presentation');
     }
 

package/src/lightning/menuSubheader/menuSubheader.css

@@ -1,5 +1,5 @@
-@import 'lightning/sldsCommon';
-@import './menu-subheader.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './menu-subheader.slds.css'; */
 
 :host {
     display: block;

package/src/lightning/menuSubheader/menuSubheader.js

@@ -1,10 +1,9 @@
-import { api } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api } from 'lwc';
 
 /**
  * Creates a subheader in the list of items in lightning-button-menu.
  */
-export default class LightningMenuSubheader extends LightningShadowBaseClass {
+export default class LightningMenuSubheader extends LightningElement {
     /**
      * The text displayed in the subheader.
      * @type {string}
@@ -12,7 +11,6 @@ export default class LightningMenuSubheader extends LightningShadowBaseClass {
     @api label;
 
     connectedCallback() {
-        super.connectedCallback();
         this.setAttribute('role', 'separator');
     }
 }

package/src/lightning/pill/link.css

@@ -1,3 +1,3 @@
-@import 'lightning/sldsCommon';
+/* @import 'lightning/sldsCommon';
 @import './pill.slds.css';
-@import './avatar.slds.css';
+@import './avatar.slds.css'; */

package/src/lightning/pill/link.html

@@ -25,13 +25,14 @@
         <template if:false={hasHref}>
             <span class="slds-pill__label" title={label}>{label}</span>
         </template>
-        <lightning-button-icon icon-name="utility:close"
-                            class="slds-pill__remove"
-                            variant="bare"
-                            onclick={handleRemove}
-                            title={i18n.pillRemove}
-                            tabindex={_tabIndex}
-                            alternative-text={i18n.pillRemove}>
+        <lightning-button-icon
+            icon-name="utility:close"
+            class="slds-pill__remove"
+            variant="bare"
+            onclick={handleRemove}
+            title={computedPillRemoveLabel}
+            tabindex={_tabIndex}
+            alternative-text={computedPillRemoveLabel}>
         </lightning-button-icon>
     </span>
 </template>

package/src/lightning/pill/pill.js

@@ -4,8 +4,7 @@ import labelPillRemove from '@salesforce/label/LightningPill.remove';
 import labelPillWarning from '@salesforce/label/LightningPill.warning';
 import labelPillDeleteAndNavigate from '@salesforce/label/LightningPill.deleteAndNavigate';
 import formFactor from '@salesforce/client/formFactor';
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import {
     keyCodes,
     classListMutation,
@@ -17,6 +16,7 @@ import link from './link.html';
 import plain from './plain.html';
 import plainLink from './plainLink.html';
 import { updateRawLinkInfo } from 'lightning/routingService';
+import { formatLabel } from 'lightning/utils';
 
 const i18n = {
     pillDelete: labelPillDelete,
@@ -48,7 +48,7 @@ function modifyAttribute(el, name, value) {
  * A pill displays a label that can contain links and can be removed from view.
  * @slot default Placeholder for an image, such as an icon or avatar.
  */
-export default class LightningPill extends LightningShadowBaseClass {
+export default class LightningPill extends LightningElement {
     /**
      * The URL of the page that the link goes to.
      * @type {string}
@@ -140,8 +140,8 @@ export default class LightningPill extends LightningShadowBaseClass {
 
     get assistiveText() {
         return this.variant === VARIANT.PLAIN_LINK
-            ? this.i18n.pillDeleteAndNavigate
-            : this.i18n.pillDelete;
+            ? formatLabel(this.i18n.pillDeleteAndNavigate, this.label)
+            : formatLabel(this.i18n.pillDelete, this.label);
     }
 
     constructor() {
@@ -268,8 +268,11 @@ export default class LightningPill extends LightningShadowBaseClass {
         return !this._standardContainer || formFactor === 'Small';
     }
 
+    get computedPillRemoveLabel() {
+        return formatLabel(this.i18n.pillRemove, this.label);
+    }
+
     connectedCallback() {
-        super.connectedCallback();
         this._connected = true;
         if (this.isPlainLink || this.isLink) {
             this.updateLinkInfo(this.href);

package/src/lightning/pill/plain.css

@@ -1,3 +1,3 @@
-@import 'lightning/sldsCommon';
+/* @import 'lightning/sldsCommon';
 @import './pill.slds.css';
-@import './avatar.slds.css';
+@import './avatar.slds.css'; */

package/src/lightning/pill/plain.html

@@ -9,7 +9,7 @@
         <template if:false={useRemoveButton}>
             <lightning-primitive-icon
                 class="slds-icon_container slds-pill__remove"
-                title={i18n.pillRemove}
+                title={computedPillRemoveLabel}
                 icon-name="utility:close"
                 onclick={handleRemoveClick}
                 svg-class="slds-icon slds-icon_x-small slds-icon-text-default"
@@ -23,7 +23,7 @@
                 class="slds-pill__remove"
                 variant="bare"
                 onclick={handleRemoveClick}
-                title={i18n.pillRemove}
+                title={computedPillRemoveLabel}
                 tabindex={_tabIndex}
                 alternative-text={assistiveText}>
             </lightning-button-icon>

package/src/lightning/pill/plainLink.css

@@ -1,3 +1,3 @@
-@import 'lightning/sldsCommon';
+/* @import 'lightning/sldsCommon';
 @import './pill.slds.css';
-@import './avatar.slds.css';
+@import './avatar.slds.css'; */

package/src/lightning/pill/plainLink.html

@@ -19,11 +19,11 @@
             <span class="slds-pill__label">{label}</span>
             <template if:false={useRemoveButton}>
                 <lightning-primitive-icon
-                            class="slds-icon_container slds-pill__remove"
-                            title={i18n.pillRemove}
-                            icon-name="utility:close"
-                            svg-class="slds-icon slds-icon_x-small slds-icon-text-default"
-                            variant="bare">
+                    class="slds-icon_container slds-pill__remove"
+                    title={computedPillRemoveLabel}
+                    icon-name="utility:close"
+                    svg-class="slds-icon slds-icon_x-small slds-icon-text-default"
+                    variant="bare">
                 </lightning-primitive-icon>
                 <span class="slds-assistive-text">{assistiveText}</span>
             </template>
@@ -34,7 +34,7 @@
                 class="slds-pill__remove"
                 variant="bare"
                 onclick={handleRemoveClick}
-                title={i18n.pillRemove}
+                title={computedPillRemoveLabel}
                 tabindex={_tabIndex}
                 alternative-text={assistiveText}>
             </lightning-button-icon>

package/src/lightning/pillContainer/barePillContainer.css

@@ -1,3 +1,3 @@
-@import 'lightning/sldsCommon';
+/* @import 'lightning/sldsCommon';
 @import './pill.slds.css';
-@import './pill-container.slds.css';
+@import './pill-container.slds.css'; */

package/src/lightning/pillContainer/pillContainer.js

@@ -1,7 +1,6 @@
 import labelContainerLabel from '@salesforce/label/LightningPillContainer.label';
 import pillContainerMoreLabel from '@salesforce/label/LightningPillContainer.more';
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import LightningPillItem from './pillItem';
 import {
     keyCodes,
@@ -25,7 +24,7 @@ const i18n = {
 /**
  * A list of pills grouped in a container. This component requires API version 42.0 and later.
  */
-export default class LightningPillContainer extends LightningShadowBaseClass {
+export default class LightningPillContainer extends LightningElement {
     /**
      * Aria label for the pill container to describe the list of options.
      * @type {string}
@@ -42,7 +41,6 @@ export default class LightningPillContainer extends LightningShadowBaseClass {
     @track _pillContainerElementId;
 
     connectedCallback() {
-        super.connectedCallback();
         this._connected = true;
     }
 

package/src/lightning/pillContainer/standardPillContainer.css

@@ -1,4 +1,4 @@
-@import 'lightning/sldsCommon';
+/* @import 'lightning/sldsCommon';
 @import './pill.slds.css';
 @import './pill-container.slds.css';
-@import './listbox.slds.css';
+@import './listbox.slds.css'; */

package/src/lightning/popup/popup.css

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

package/src/lightning/popup/popup.js

@@ -1,5 +1,4 @@
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { AutoPosition } from 'lightning/positionLibrary';
 import {
     createAlignmentConfiguration,
@@ -8,7 +7,7 @@ import {
 import { getElementWithFocus } from 'lightning/focusUtils';
 import { isUndefinedOrNull, normalizeBoolean } from 'lightning/utilsPrivate';
 
-export default class LightningPopup extends LightningShadowBaseClass {
+export default class LightningPopup extends LightningElement {
     @track _visible;
     @track _queueShow;
     @track _ariaLabelledBy;

package/src/lightning/primitiveBubble/primitiveBubble.css

@@ -1,5 +1,5 @@
-@import 'lightning/sldsCommon';
-@import './tooltip.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './tooltip.slds.css'; */
 
 /* Fix for tooltip alignment issue, for details see: W-11677142
  *

package/src/lightning/primitiveBubble/primitiveBubble.js

@@ -1,7 +1,6 @@
 /* eslint-disable @lwc/lwc/no-api-reassignments */
 
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { classSet } from 'lightning/utils';
 
 const DEFAULT_ALIGN = {
@@ -9,7 +8,7 @@ const DEFAULT_ALIGN = {
     vertical: 'bottom',
 };
 
-export default class LightningPrimitiveBubble extends LightningShadowBaseClass {
+export default class LightningPrimitiveBubble extends LightningElement {
     @track
     state = {
         // tracks the `visibility` of the tooltip
@@ -40,7 +39,6 @@ export default class LightningPrimitiveBubble extends LightningShadowBaseClass {
     }
 
     connectedCallback() {
-        super.connectedCallback();
         this.setAttribute('role', 'tooltip');
         this.state.inDOM = true;
     }

package/src/lightning/primitiveButton/primitiveButton.js

@@ -1,5 +1,4 @@
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import {
     isIE11,
     isCSR,
@@ -27,7 +26,7 @@ const ROLE = 'role';
  *  - aria-labelledby: Role that depeneds on AriaObserver for native shadow.
  *  - aria-owns: Abstracts the logic of setting the id-reference on the host element.
  */
-export default class LightningPrimitiveButton extends LightningShadowBaseClass {
+export default class LightningPrimitiveButton extends LightningElement {
     /**** COMPONENT PRIVATE PROPERTIES ****/
     _initialized = false;
 

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

@@ -1,13 +1,12 @@
 import labelA11yTriggerText from '@salesforce/label/LightningColorPicker.a11yTriggerText';
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { Direction, AutoPosition } from 'lightning/positionLibrary';
 import { normalizeBoolean, reflectAttribute } from 'lightning/utilsPrivate';
 
 const i18n = {
     a11yTriggerText: labelA11yTriggerText,
 };
-export default class PrimitiveColorpickerButton extends LightningShadowBaseClass {
+export default class PrimitiveColorpickerButton extends LightningElement {
     static delegatesFocus = true;
 
     @track _isColorPickerPanelOpen = false;

package/src/lightning/primitiveIcon/primitiveIcon.css

@@ -1,5 +1,5 @@
-@import 'lightning/sldsCommon';
-@import './icon.slds.css';
+/* @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.js

@@ -1,5 +1,4 @@
-import { api } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api } from 'lwc';
 import { classSet } from 'lightning/utils';
 import { normalizeString as normalize, isCSR } from 'lightning/utilsPrivate';
 
@@ -10,7 +9,7 @@ import { getName, isValidName } 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';

package/src/lightning/radioGroup/radioGroup.css

@@ -1,5 +1,6 @@
-@import 'lightning/sldsCommon';
-@import './input-radio-group.slds.css';
+/* sldsCommon was missing earlier - check in review
+@import 'lightning/sldsCommon'; */
+/* @import './input-radio-group.slds.css'; */
 
 :host {
     display: block;

package/src/lightning/radioGroup/radioGroup.js

@@ -1,6 +1,5 @@
 import labelRequired from '@salesforce/label/LightningControl.required';
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import {
     normalizeBoolean,
     synchronizeAttrs,
@@ -26,7 +25,7 @@ const i18n = {
 /**
  * A radio button group that can have a single option selected.
  */
-export default class LightningRadioGroup extends LightningShadowBaseClass {
+export default class LightningRadioGroup extends LightningElement {
     static delegatesFocus = true;
 
     /**
@@ -78,7 +77,6 @@ export default class LightningRadioGroup extends LightningShadowBaseClass {
         });
     }
     connectedCallback() {
-        super.connectedCallback();
         this.classList.add('slds-form-element');
         this.updateClassList();
         this.interactingState = new InteractingState();

package/src/lightning/routingService/routingService.js

@@ -1,5 +1,6 @@
 import formFactor from '@salesforce/client/formFactor';
 import { shouldDispatchToApp } from './routingServiceUtils';
+import { isCSR } from 'lightning/utilsPrivate';
 
 const GET_LINK_INFO_EVENT = 'lightningroutingservicegetlinkinfo';
 
@@ -68,7 +69,7 @@ export function updateRawLinkInfo(element, { url, target }) {
 
     const dispatchToApp = shouldDispatchToApp(target, formFactor);
 
-    if (dispatchToApp) {
+    if (dispatchToApp && isCSR) {
         return getLinkInfo(element, {
             stateType: urlTypes.standard,
             attributes: {

package/src/lightning/select/select.css

@@ -1,3 +1,3 @@
-@import 'lightning/sldsCommon';
+/* @import 'lightning/sldsCommon';
 @import "./form-element.slds.css";
-@import "./select.slds.css";
+@import "./select.slds.css"; */

package/src/lightning/select/select.js

@@ -1,7 +1,6 @@
 import labelRequired from '@salesforce/label/LightningControl.required';
 import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helptextAlternativeText';
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { classSet, formatLabel } from 'lightning/utils';
 import {
     classListMutation,
@@ -24,7 +23,7 @@ const i18n = {
     helpTextAlternativeText: labelHelpTextAlternativeText,
 };
 
-export default class LightningSelect extends LightningShadowBaseClass {
+export default class LightningSelect extends LightningElement {
     static delegatesFocus = true;
 
     /**
@@ -72,7 +71,6 @@ export default class LightningSelect extends LightningShadowBaseClass {
     _size;
 
     connectedCallback() {
-        super.connectedCallback();
         this.classList.add('slds-form-element');
         this.updateClassList();
         this.interactingState = new InteractingState();

package/src/lightning/select/select.js-meta.xml

@@ -1,4 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
     <isExposed>true</isExposed>
+    <minApiVersion>59.0</minApiVersion>
+    <support>GA</support>
 </LightningComponentBundle>

package/src/lightning/spinner/spinner.css

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