lightning-base-components 1.15.2-alpha → 1.16.1-alpha

package/src/lightning/internationalizationLibrary/number/utils.js

@@ -1,23 +1,12 @@
+// TODO: when migrating off aura, remove functions
+// and variables only needed for numberOptions
 import locale from '@salesforce/i18n/locale';
-import numberFormat from '@salesforce/i18n/number.numberFormat';
-import percentFormat from '@salesforce/i18n/number.percentFormat';
-import currencyFormat from '@salesforce/i18n/number.currencyFormat';
-import currency from '@salesforce/i18n/currency';
+import { getNumberFormat } from 'lightning/i18nService';
 
 // For possible parameters, see the Intl.NumberFormat spec:
 // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat#Parameters
-const POSSIBLE_OPTS = {
-    style: true,
-    currency: true,
-    currencyDisplay: true,
-    useGrouping: true,
-    minimumIntegerDigits: true,
-    minimumFractionDigits: true,
-    maximumFractionDigits: true,
-    minimumSignificantDigits: true,
-    maximumSignificantDigits: true,
-};
-const STYLE = {
+
+export const STYLE = {
     DECIMAL: 'decimal',
     CURRENCY: 'currency',
     PERCENT: 'percent',
@@ -30,55 +19,83 @@ const CURRENCY_DISPLAY = {
 const SAFE_NUM_LENGTH = 15;
 const SAFE_NUM_REGEXP = /0+$/;
 
-const numberFormatInstancesCache = {};
-
-function getStringOfChar(char, amount) {
-    return new Array(amount + 1).join(char);
-}
-
-function getGroupingCount(skeleton) {
-    const match = skeleton.match(/,[#0]*\./);
-    return match ? match[0].length - 2 : 0;
+function toNumber(value) {
+    return parseInt(value, 10);
 }
 
-function getOptionsUniqueKey(options) {
-    return Object.keys(options)
-        .sort()
-        .reduce((prev, optionName) => {
-            if (POSSIBLE_OPTS[optionName]) {
-                return prev + optionName + options[optionName] + '';
-            }
-            return prev;
-        }, '');
+/**
+ * Gets portion of skeleton for decimal portion of number
+ */
+function getFractionSkeleton(skeleton) {
+    const format = skeleton.split(';')[0];
+    return format.split('.')[1] || '';
 }
 
-function toNumber(value, defaultValue) {
-    const number = parseInt(value, 10);
-    if (isNaN(number)) {
-        return defaultValue;
+/**
+ * Sets minimum and maximum fraction digits in options based on
+ * default skeleton and current values; needed to adjust skeleton
+ *
+ * @param {string} skeleton
+ */
+function normalizeFractionDigits(skeleton, options) {
+    const fractionSkeleton = getFractionSkeleton(skeleton);
+    const defaultMinimum = fractionSkeleton.replace(/[^0]/g, '').length; // number of 0s in skeleton
+    const defaultMaximum = fractionSkeleton.replace(/[^0#]/g, '').length; // number of 0s and #s in skeleton
+    const minDigits = toNumber(options.minimumFractionDigits);
+    const maxDigits = toNumber(options.maximumFractionDigits);
+    if (!isFinite(options.minimumFractionDigits)) {
+        // min fraction digits shouldn't be more than max digits
+        options.minimumFractionDigits = Math.min(
+            defaultMinimum,
+            isNaN(maxDigits) ? defaultMinimum : maxDigits
+        );
+    }
+    if (!isFinite(options.maximumFractionDigits) || maxDigits < minDigits) {
+        // max fraction digits shouldn't be less than min digits
+        options.maximumFractionDigits = Math.max(
+            defaultMaximum,
+            isNaN(minDigits) ? defaultMaximum : minDigits
+        );
     }
-    return number;
 }
 
+/**
+ * Gets the fraction/decimal portion of the number formatting
+ * string based on the provided formatting options
+ *
+ * @param {Object} options - number formatting options
+ * @returns {string}
+ */
 function getFractionPart(options) {
-    const minimumDigits = toNumber(options.minimumFractionDigits, 0);
-    const maximumDigits = Math.max(
-        toNumber(options.maximumFractionDigits, 0),
-        minimumDigits
-    );
-
+    const { minimumFractionDigits, maximumFractionDigits } = options;
     return (
         '.' +
-        new Array(minimumDigits + 1).join('0') +
-        new Array(maximumDigits - minimumDigits + 1).join('#')
+        '0'.repeat(minimumFractionDigits) +
+        '#'.repeat(maximumFractionDigits - minimumFractionDigits)
     );
 }
 
-function updateFractionPart(skeleton, options) {
+/**
+ * Updates "skeleton" for number format
+ * based on the formatting options provided
+ *
+ * @param {string} skeleton - outline for number format
+ * @param {Object} options - number formatting options
+ * @returns {string} updated skeleton
+ */
+export function updateFractionPart(skeleton, options) {
+    normalizeFractionDigits(skeleton, options);
     const fractionPart = getFractionPart(options);
     return addFractionsToPattern(skeleton, fractionPart);
 }
 
+/**
+ * Updates provided pattern to use provided
+ * fractionPart for fraction/decimal portion
+ * @param {string} pattern - current string for number format
+ * @param {string} fractionPart - string to use for fraction part of number formatting
+ * @returns {string} updated pattern
+ */
 function addFractionsToPattern(pattern, fractionPart) {
     if (!fractionPart) {
         return pattern;
@@ -109,56 +126,81 @@ function addFractionsToPattern(pattern, fractionPart) {
     ].join('');
 }
 
-function updateCurrencySymbol(skeleton, currencyCode, options) {
-    const symbol = String.fromCharCode(164);
-    if (options.currencyDisplay === CURRENCY_DISPLAY.NAME) {
-        // append the currency code at the end.
-        return skeleton.replace(symbol, '') + currencyCode;
-    }
-    return skeleton.replace(symbol, currencyCode);
+/**
+ * Gets count of numbers in last "grouping" before decimal
+ * e.g. for en-IN pattern "#,##,##0.###" this returns 3
+ * @param {Object} skeleton
+ * @returns {Number}
+ */
+function getGroupingCount(skeleton) {
+    const match = skeleton.match(/,[#0]*\./);
+    return match ? match[0].length - 2 : 0;
 }
 
-function updateIntegerPart(skeleton, options) {
+/**
+ * Updates integer part of string representation for number format
+ * for number as needed based on minimumIntegerDigits option
+ *
+ * @param {string} skeleton - string of default number format
+ * @param {Object} options - number format options
+ * @returns skeleton with integer part updated for options
+ */
+export function updateIntegerPart(skeleton, options) {
     const minimumIntegerDigits = options.minimumIntegerDigits;
     const groupingCount = getGroupingCount(skeleton);
     if (!minimumIntegerDigits) {
         return skeleton;
     }
     if (minimumIntegerDigits <= groupingCount) {
+        // handle case where number will include grouping e.g., "1,234"
         return skeleton.replace(
             /,[#0]*\./,
             ',' +
-                getStringOfChar('#', groupingCount - minimumIntegerDigits) +
-                getStringOfChar('0', minimumIntegerDigits) +
+                '#'.repeat(groupingCount - minimumIntegerDigits) +
+                '0'.repeat(minimumIntegerDigits) +
                 '.'
         );
     }
+    // handle case where number will not include grouping e.g., "123"
     return skeleton.replace(
         /[#0]*\./,
-        getStringOfChar('0', minimumIntegerDigits - groupingCount) +
+        '0'.repeat(minimumIntegerDigits - groupingCount) +
             ',' +
-            getStringOfChar('0', groupingCount) +
+            '0'.repeat(groupingCount) +
             '.'
     );
 }
 
+/**
+ * Gets string for how to display currency for provided
+ * currency code and display style by formatting value
+ * and removing remainder of string a set
+ *
+ * @param {string} code - currency code to format number with
+ * @param {string} currencyDisplay - style for displaying currency
+ * @returns {string} for currency
+ */
 function getBestMatchCurrencySymbol(code, currencyDisplay) {
-    if (!('Intl' in window)) {
-        return code; // fail gracefully.
-    }
     const opts = {
-        style: 'currency',
+        style: STYLE.CURRENCY,
         currency: code,
         minimumFractionDigits: 0,
     };
     if (currencyDisplay) {
         opts.currencyDisplay = currencyDisplay;
     }
-    const nf = getFromCache(opts);
+    const nf = getNumberFormat(locale, opts);
     return nf.format(2).replace(/2/g, '');
 }
 
-function getCurrency(options) {
+/**
+ * Returns string for how currency should be displayed
+ * based on provided number formatting options
+ *
+ * @param {Object} options - number formatting options
+ * @returns {string} for how currency will show in formatted number
+ */
+export function getCurrency(options) {
     const currencyDisplay = options.currencyDisplay || CURRENCY_DISPLAY.SYMBOL;
     if (
         currencyDisplay === CURRENCY_DISPLAY.SYMBOL ||
@@ -166,21 +208,35 @@ function getCurrency(options) {
     ) {
         return getBestMatchCurrencySymbol(options.currency, currencyDisplay);
     }
-    return options.currency;
-}
-
-function getFromCache(options) {
-    const optionsUniqueKey = getOptionsUniqueKey(options);
-    let numberFormatInstance = numberFormatInstancesCache[optionsUniqueKey];
-    if (numberFormatInstance) {
-        return numberFormatInstance;
+    return options.currency; // if displaying code no formatting needed
+}
+
+/**
+ * Updates "skeleton" to include currency code/name
+ * based on provided currencyCode and options
+ *
+ * @param {string} skeleton - current number formatting skeleton
+ * @param {string} currencyCode - currency code to use
+ * @param {Object} options - number formatting options
+ * @returns {string} updated skeleton
+ */
+export function updateCurrencySymbol(skeleton, currencyCode, options) {
+    const symbol = String.fromCharCode(164); // corresponds to "¤"
+    if (options.currencyDisplay === CURRENCY_DISPLAY.NAME) {
+        // append the currency code at the end
+        return skeleton.replace(symbol, '') + currencyCode;
     }
-    numberFormatInstance = new Intl.NumberFormat(locale, options);
-    numberFormatInstancesCache[optionsUniqueKey] = numberFormatInstance;
-    return numberFormatInstance;
+    return skeleton.replace(symbol, currencyCode);
 }
 
-function exceedsSafeLength(value) {
+/**
+ * Determines whether or not the provided value has more
+ * significant digits than what Intl.NumberFormat supports
+ *
+ * @param {Number|String} value - value to check
+ * @returns {boolean} true if value exceeds safe length for Intl.NumberFormat
+ */
+export function exceedsSafeLength(value) {
     const numberAsString = value.toString();
     const [intPart, fractionPart] = numberAsString.split('.');
     // This count strips out insignificant trailing zeroes in the fraction part of the number.
@@ -189,56 +245,3 @@ function exceedsSafeLength(value) {
         (fractionPart ? fractionPart.replace(SAFE_NUM_REGEXP, '').length : 0);
     return digitCount >= SAFE_NUM_LENGTH;
 }
-
-function normalizedMinimumFractionDigits(options) {
-    const fractionSkeleton = getFallbackFractionSkeleton(options.style);
-    const fractionDigits = fractionSkeleton.replace(/[^0]/g, '');
-    return fractionDigits.length;
-}
-
-function normalizedMaximumFractionDigits(options) {
-    const fractionSkeleton = getFallbackFractionSkeleton(options.style);
-    const fractionDigits = fractionSkeleton.replace(/[^0#]/g, '');
-    return Math.max(options.minimumFractionDigits, fractionDigits.length);
-}
-
-function getFallbackFractionSkeleton(style) {
-    let styleFormat = numberFormat;
-    if (style === STYLE.CURRENCY) {
-        styleFormat = currencyFormat;
-    } else if (style === STYLE.PERCENT) {
-        styleFormat = percentFormat;
-    }
-    const format = styleFormat.split(';')[0];
-    return format.split('.')[1] || '';
-}
-
-function normalizeOptions(options) {
-    const normalizedOpts = Object.assign({}, options);
-
-    normalizedOpts.currency = normalizedOpts.currency || currency;
-
-    if (normalizedOpts.minimumFractionDigits === undefined) {
-        normalizedOpts.minimumFractionDigits =
-            normalizedMinimumFractionDigits(normalizedOpts);
-    }
-    if (
-        normalizedOpts.maximumFractionDigits === undefined ||
-        normalizedOpts.maximumFractionDigits <
-            normalizedOpts.minimumFractionDigits
-    ) {
-        normalizedOpts.maximumFractionDigits =
-            normalizedMaximumFractionDigits(normalizedOpts);
-    }
-    return normalizedOpts;
-}
-
-export {
-    exceedsSafeLength,
-    getFromCache,
-    getCurrency,
-    normalizeOptions,
-    updateIntegerPart,
-    updateFractionPart,
-    updateCurrencySymbol,
-};

package/src/lightning/internationalizationLibrary/utils.js

@@ -0,0 +1,14 @@
+/**
+ * Used to determine if aura localization service is available
+ * This should be true on-core and false off-core, and will
+ * no longer be needed when we fully migrate off aura's service
+ */
+export const isAuraL10NAvailable = window.$A && window.$A.localizationService;
+
+/**
+ * Returns string to use when throwing an error message
+ * if an invalid value is provided when parsing a datetime
+ */
+export const getDateTimeErrorMessage = (value) =>
+    `datetime component: The value attribute accepts a valid ISO8601 formatted string ` +
+    `with timezone offset. but we are getting the ${typeof value} value "${value}" instead.`;

package/src/lightning/iso8601Utils/iso8601Utils.js

@@ -1,3 +1,4 @@
+// TODO: remove file when migrating off aura
 /*
  * Regex to test a string for an ISO8601 Date. The following formats are matched.
  * Note that if a time element is present (e.g. 'T'), the string should have a time zone designator (Z or +hh:mm or -hh:mm).
@@ -13,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
@@ -21,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);
@@ -48,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/modalBase/modalBase.css

@@ -1,9 +1,5 @@
 /* Modal close button */
 
-.fix-slds-modal-close-disabled {
-    opacity: 0.15;
-}
-
 /* Required for autofocus to work correctly:
    - child elements of modal appear 'visibility: hidden' at
      the moment that they are being reviewed for eligibility

package/src/lightning/modalBase/modalBase.html

@@ -38,7 +38,7 @@
                     data-container
                 >
                     <lightning-button-icon
-                        class={modalCloseButtonCssClasses}
+                        class="slds-modal__close"
                         icon-name="utility:close"
                         variant="bare-inverse"
                         alternative-text={closeButtonAltText}

package/src/lightning/modalBase/modalBase.js

@@ -110,7 +110,6 @@ export default class LightningModalBase extends LightningElement {
         if (!modal) {
             return sizeDefault;
         }
-
         // get the size value from <lightning-modal>
         return normalizeString(modal.size, {
             fallbackValue: sizeDefault,
@@ -314,19 +313,6 @@ export default class LightningModalBase extends LightningElement {
         return classes.toString();
     }
 
-    /**
-     * Gets the CSS classes for the modal close button
-     * @returns {string} CSS class string
-     * @private
-     */
-    get modalCloseButtonCssClasses() {
-        let classes = classSet('slds-modal__close');
-        classes.add({
-            'fix-slds-modal-close-disabled': this.disableCloseButton,
-        });
-        return classes;
-    }
-
     /**
      * Saves the current active focused element on modal creation
      * in order to be able to set focus back to that previous element

package/src/lightning/navigation/__docs__/navigation.md

@@ -14,8 +14,6 @@ pageRef;
 
 The key-value pairs of the PageReference `state` property are serialized to URL query parameters. To create a deep link that describes the page and that a user can bookmark, update the `state` property. See [Change Page State](docs/component-library/documentation/lwc/lwc.use_navigate#events_navigate__page_state).
 
-Note: Experience Builder sites don't support the `state` property.
-
 #### NavigationMixin
 
 Apply the `NavigationMixin` to the component's base class to gain access to its APIs.

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/overlayContainer/overlayContainer.html

@@ -1,3 +1,3 @@
 <template>
-    <div lwc:dom="manual"></div>
-</template>
+    <div data-overlay-container lwc:dom="manual"></div>
+</template>