lightning-base-components 1.15.4-alpha → 1.16.2-alpha

package/src/lightning/internationalizationLibrary/internationalizationLibrary.js

@@ -27,9 +27,10 @@ export {
     getCurrentTimeString,
     getDateFormatFromStyle,
     getTimeFormatFromStyle,
-    getDateTimeFormatFromStyle,
 } from './datetime/dateTimeUtils';
 
+export { toDate } from './datetime/intlFormat';
+
 export {
     isBefore,
     isAfter,

package/src/lightning/iso8601Utils/iso8601Utils.js

@@ -14,7 +14,7 @@
  * @see: https://www.w3.org/TR/NOTE-datetime
  */
 const ISO8601_STRICT_PATTERN =
-    /^\d{4}(-\d\d(-\d\d(T\d\d:\d\d(:\d\d)?(\.\d+)?(([+-]\d\d:\d\d)|Z){1})?)?)?$/i;
+    /^\d{4}(-\d\d(-\d\d(T\d\d:\d\d(:\d\d)?(\.\d+)?(([+-]\d\d[:]?\d\d)|Z){1})?)?)?$/i;
 
 /* Regex to test a string for an ISO8601 partial time or full time:
  * hh:mm
@@ -22,12 +22,13 @@ const ISO8601_STRICT_PATTERN =
  * hh:mm:ss.S
  * full time = partial time + TZD
  */
-const ISO8601_TIME_PATTERN = /^\d\d:\d\d(:\d\d)?(\.\d+)?(([+-]\d\d:\d\d)|Z)?$/i;
+const ISO8601_TIME_PATTERN =
+    /^\d\d:\d\d(:\d\d)?(\.\d+)?(([+-]\d\d[:]?\d\d)|Z)?$/i;
 
 export const STANDARD_TIME_FORMAT = 'HH:mm:ss.SSS';
 export const STANDARD_DATE_FORMAT = 'YYYY-MM-DD';
 export const TIME_SEPARATOR = 'T';
-const TIMEZONE_INDICATOR = /(Z|([+-])(\d{2}):(\d{2}))$/;
+const TIMEZONE_INDICATOR = /(Z|([+-])(\d{2})[:]?(\d{2}))$/;
 
 export function isValidISODateTimeString(dateTimeString) {
     return isValidISO8601String(dateTimeString) && isValidDate(dateTimeString);
@@ -49,6 +50,47 @@ export function removeTimeZoneSuffix(dateTimeString) {
     return dateTimeString;
 }
 
+/**
+ * Ensures that any valid ISO string with a milliseconds
+ * component has exactly three digits
+ *
+ * @param {any} dateTimeString
+ * @returns {any}
+ */
+export function padMilliseconds(dateTimeString) {
+    if (
+        typeof dateTimeString === 'string' &&
+        (isValidDate(dateTimeString) || isValidISOTimeString(dateTimeString))
+    ) {
+        const millisecondIndex = dateTimeString.indexOf('.');
+        let timezoneIndex = dateTimeString.search(TIMEZONE_INDICATOR);
+        if (timezoneIndex === -1) {
+            timezoneIndex = dateTimeString.length;
+        }
+        // if milliseconds present, make sure exactly 3 digits present
+        if (millisecondIndex !== -1) {
+            const milliseconds = dateTimeString.substring(
+                millisecondIndex + 1,
+                timezoneIndex
+            );
+            let newMilliseconds = milliseconds;
+            if (milliseconds.length > 3) {
+                // if more than 3 digits, cut to three digits
+                newMilliseconds = newMilliseconds.substring(0, 3);
+            } else if (milliseconds.length < 3) {
+                // if less than 3 digits, add zeros to make it 3 digits
+                const extraZeros = '0'.repeat(3 - milliseconds.length);
+                newMilliseconds = `${newMilliseconds}${extraZeros}`;
+            }
+            // replace old milliseconds with new 3 digit milliseconds
+            const start = dateTimeString.substring(0, millisecondIndex);
+            const end = dateTimeString.substring(timezoneIndex);
+            return `${start}.${newMilliseconds}${end}`;
+        }
+    }
+    return dateTimeString;
+}
+
 function isValidISO8601String(dateTimeString) {
     if (typeof dateTimeString !== 'string') {
         return false;

package/src/lightning/layout/__docs__/layout.md

@@ -84,7 +84,7 @@ To create columns with widths that are based on their content, use `flexibility=
 ```html
 <template>
     <div class="c-container">
-        <lightning-layout horizontal-align="{horizontalAlign}">
+        <lightning-layout horizontal-align={horizontalAlign}>
             <lightning-layout-item flexibility="auto" padding="around-small">
                 1
             </lightning-layout-item>

package/src/lightning/overlay/__docs__/overlay.md

@@ -67,7 +67,7 @@ Usage for the `MyMenu` in a custom app would like like below.
 
 ```html
 <template>
-    <button click="{handleClick}">{label}</button>
+    <button click={handleClick}>{label}</button>
 </template>
 ```
 

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

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

package/src/lightning/picklist/README.md

@@ -24,9 +24,9 @@ To create a dropdown menu for single selection, pass the `label` and `value` pai
 ```html
 <lightning-picklist
     label="Status"
-    value="{picklistVal}"
-    options="{statusOptions}"
-    onchange="{handleChange}"
+    value={picklistVal}
+    options={statusOptions}
+    onchange={handleChange}
 >
 </lightning-picklist>
 ```
@@ -55,9 +55,9 @@ For multiple selection, include the `multiple` attribute. Providing your own `se
 ```html
 <lightning-picklist
     label="Languages"
-    value="{picklistVal}"
-    options="{langOptions}"
-    onchange="{handleChange}"
+    value={picklistVal}
+    options={langOptions}
+    onchange={handleChange}
     multiple
 >
 </lightning-picklist>
@@ -172,8 +172,8 @@ The event fired when the dropdown menu is opened.
     <aura:attribute name="value" type="String" default="fr" />
     <lightning:picklist
         label="Status"
-        options="{!v.options}"
-        value="{!v.value}"
+        options={!v.options}
+        value={!v.value}
     />
 </aura:component>
 ```

package/src/lightning/pill/__docs__/pill.md

@@ -24,7 +24,7 @@ This example creates a basic pill with a link.
     <lightning-pill
         label="Pill Label"
         href="https://www.example.com"
-        onremove="{handleRemove}"
+        onremove={handleRemove}
     >
     </lightning-pill>
 </template>
@@ -86,12 +86,12 @@ This example hides a pill when the remove button is clicked.
 
 ```html
 <template>
-    <template if:true="{showPill}">
+    <template if:true={showPill}>
         <lightning-pill
             label="Account"
             href="https://www.example.com"
-            onremove="{handleRemoveOnly}"
-            onclick="{handleClick}"
+            onremove={handleRemoveOnly}
+            onclick={handleClick}
         >
         </lightning-pill>
     </template>

package/src/lightning/pillContainer/__docs__/pillContainer.md

@@ -21,7 +21,7 @@ a pill with an icon.
 
 ```html
 <template>
-    <lightning-pill-container items="{items}"> </lightning-pill-container>
+    <lightning-pill-container items={items}> </lightning-pill-container>
 </template>
 ```
 
@@ -82,7 +82,7 @@ Clicking the remove button triggers the `onitemremove` handler.
 
 ```html
 <template>
-    <lightning-pill-container items="{items}" onitemremove="{handleItemRemove}">
+    <lightning-pill-container items={items} onitemremove={handleItemRemove}>
     </lightning-pill-container>
 </template>
 ```

package/src/lightning/pillContainer/barePillContainer.html

@@ -1,7 +1,11 @@
 <template>
     <div class={computedWrapperClass}>
         <template if:true={_showMore}>
-            <span class="slds-listbox-toggle" aria-hidden="true"><button class="slds-button" tabindex="-1" onclick={handleMoreClick}>{computedPillCountMoreLabel}</button></span>
+            <span class="slds-listbox-toggle" aria-hidden="true">
+                <button class="slds-button" tabindex="-1" onclick={handleMoreClick}>
+                    {computedPillCountMoreLabel}
+                </button>
+            </span>
         </template>
         <template for:each={pillViewModels} for:item="pillViewModel" for:index="index">
             <!--

package/src/lightning/popup/README.md

@@ -37,7 +37,7 @@ is a set of div elements that specify `slds-popover` classes and enclose a `ligh
 <template>
     <lightning-button
         label="Click to show a popup"
-        onclick="{openPopup}"
+        onclick={openPopup}
     ></lightning-button>
 
     <lightning-popup aria-describedby="popup-body">
@@ -48,12 +48,12 @@ is a set of div elements that specify `slds-popover` classes and enclose a `ligh
                     <lightning-button
                         variant="brand"
                         label="Save"
-                        onclick="{handleSave}"
+                        onclick={handleSave}
                     ></lightning-button>
                     <lightning-button
                         variant="brand"
                         label="Cancel"
-                        onclick="{handleCancel}"
+                        onclick={handleCancel}
                     ></lightning-button>
                 </div>
             </div>

package/src/lightning/positionLibrary/__component__/positionLibraryBounding.spec.js

@@ -82,7 +82,10 @@ function waitForBubbleAlignment(element, expected) {
         function waitCondition() {
             const bubble = element.querySelector('lightning-primitive-bubble');
             if (bubble && bubble.visible) {
-                const classList = bubble.getAttribute('class').split(' ');
+                const overlay =
+                    bubble.shadowRoot.querySelector('[part="overlay"]');
+
+                const classList = overlay.getAttribute('class').split(' ');
                 const positioned = classList.indexOf(expected) > -1;
                 if (positioned) {
                     resolve(positioned);

package/src/lightning/primitiveBubble/primitiveBubble.css

@@ -0,0 +1,2 @@
+@import 'lightning/sldsCommon';
+@import './tooltip.slds.css';

package/src/lightning/primitiveBubble/primitiveBubble.html

@@ -1,3 +1,5 @@
 <template>
-    <div class="slds-popover__body" lwc:dom="manual" onmouseleave={handleMouseLeave}></div>
+    <div part="overlay" class={computedPopoverClass} ontransitionend={handleTransitionEnd}>
+        <div class="slds-popover__body" lwc:dom="manual" onmouseleave={handleMouseLeave}></div>
+    </div>
 </template>

package/src/lightning/primitiveBubble/primitiveBubble.js

@@ -2,7 +2,6 @@
 
 import { LightningElement, api, track } from 'lwc';
 import { classSet } from 'lightning/utils';
-import { classListMutation } from 'lightning/utilsPrivate';
 
 const DEFAULT_ALIGN = {
     horizontal: 'left',
@@ -12,12 +11,13 @@ const DEFAULT_ALIGN = {
 export default class LightningPrimitiveBubble extends LightningElement {
     @track
     state = {
+        // tracks the `visibility` of the tooltip
         visible: false,
+        // tracks the `display` of the tooltip
+        hidden: true,
         contentId: '',
     };
 
-    divElement;
-
     @api
     get contentId() {
         return this.state.contentId;
@@ -32,7 +32,6 @@ export default class LightningPrimitiveBubble extends LightningElement {
     }
 
     connectedCallback() {
-        this.updateClassList();
         this.setAttribute('role', 'tooltip');
         this.state.inDOM = true;
     }
@@ -67,7 +66,6 @@ export default class LightningPrimitiveBubble extends LightningElement {
     }
     set align(value) {
         this.state.align = value;
-        this.updateClassList();
     }
 
     @api
@@ -77,7 +75,18 @@ export default class LightningPrimitiveBubble extends LightningElement {
 
     set visible(value) {
         this.state.visible = value;
-        this.updateClassList();
+
+        if (this.state.visible) {
+            // Show the tooltip before css animation
+            this.state.hidden = false;
+        }
+    }
+
+    handleTransitionEnd() {
+        // Hide the tooltip after css animation
+        if (!this.state.visible) {
+            this.state.hidden = true;
+        }
     }
 
     setIdManually() {
@@ -92,13 +101,14 @@ export default class LightningPrimitiveBubble extends LightningElement {
     }
 
     // compute class value for this bubble
-    updateClassList() {
+    get computedPopoverClass() {
         const classes = classSet('slds-popover').add('slds-popover_tooltip');
 
         // show or hide bubble
         classes.add({
             'slds-rise-from-ground': this.visible,
             'slds-fall-into-ground': !this.visible,
+            'slds-hide': this.state.hidden,
         });
 
         // apply the proper nubbin CSS class
@@ -119,7 +129,7 @@ export default class LightningPrimitiveBubble extends LightningElement {
                 horizontal === 'right' && vertical === 'center',
         });
 
-        classListMutation(this.classList, classes);
+        return classes.toString();
     }
 
     handleMouseLeave() {