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

package/src/lightning/colorPickerPanel/colorPickerPanel.css

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

package/src/lightning/colorPickerPanel/colorPickerPanel.html

@@ -31,12 +31,8 @@
         </div>
         <footer class="slds-popover__footer">
             <div class="slds-color-picker__selector-footer">
-                <button name="cancel" class="slds-button slds-button_neutral" onclick={handleCancelClick}>
-                    {i18n.cancelButton}
-                </button>
-                <button name="done" class="slds-button slds-button_brand" onclick={handleDoneClick}>
-                    {i18n.doneButton}
-                </button>
+                <lightning-button label={i18n.cancelButton} name="cancel" stretch onclick={handleCancelClick}></lightning-button>
+                <lightning-button variant="brand" label={i18n.doneButton} name="done" stretch onclick={handleDoneClick}></lightning-button>
             </div>
         </footer>
     </section>

package/src/lightning/combobox/__docs__/combobox.md

@@ -27,9 +27,9 @@ The `options` attribute specifies the name of an array of items for the dropdown
         name="status"
         label="Status"
         placeholder="Choose Status"
-        value="{value}"
-        onchange="{handleChange}"
-        options="{statusOptions}"
+        value={value}
+        onchange={handleChange}
+        options={statusOptions}
     >
     </lightning-combobox>
     <p>Selected option: {value}</p>

package/src/lightning/combobox/combobox.html

@@ -5,7 +5,7 @@
         </template>
         {label}
     </label>
-    <lightning-helptext if:true={_fieldLevelHelp} content={_fieldLevelHelp}></lightning-helptext>
+    <lightning-helptext if:true={_fieldLevelHelp} content={_fieldLevelHelp} alternative-text={helptextAlternativeText}></lightning-helptext>
 
     <div class="slds-form-element__control">
         <lightning-base-combobox name={name}

package/src/lightning/combobox/combobox.js

@@ -1,7 +1,8 @@
 import labelRequired from '@salesforce/label/LightningControl.required';
 import labelPlaceholder from '@salesforce/label/LightningCombobox.placeholder';
+import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helptextAlternativeText';
 import { LightningElement, api, track } from 'lwc';
-import { classSet } from 'lightning/utils';
+import { classSet, formatLabel } from 'lightning/utils';
 import {
     normalizeBoolean,
     normalizeArray,
@@ -19,6 +20,7 @@ import {
 const i18n = {
     required: labelRequired,
     placeholder: labelPlaceholder,
+    helpTextAlternativeText: labelHelpTextAlternativeText,
 };
 /**
  * A widget that provides an input field that is readonly,
@@ -493,4 +495,8 @@ export default class LightningCombobox extends LightningElement {
         }
         return this._constraintApi;
     }
+
+    get helptextAlternativeText() {
+        return formatLabel(i18n.helpTextAlternativeText, this.label);
+    }
 }

package/src/lightning/configProvider/defaultLocalizationConfig.js

@@ -1,5 +1,5 @@
-// default implementation of localization service for en-US locale. This covers the current usage of the localizationService in the code base.
-// This should be removed when the framework team moves auraLocalizationService to a separate module
+// default implementation of localization service. This covers the current usage of the localizationService in the code base.
+// This should be removed/heavily reworked when migrating off Aura
 import {
     isValidISOTimeString,
     isValidISODateTimeString,
@@ -9,6 +9,9 @@ import {
     TIME_SEPARATOR,
 } from 'lightning/iso8601Utils';
 import Duration from './defaultDurationConfig';
+import locale from '@salesforce/i18n/locale';
+import commonDigits from '@salesforce/i18n/common.digits';
+import currentDigits from '@salesforce/i18n/defaultNumberingSystem';
 
 const MONTH_NAMES = [
     'January',
@@ -42,6 +45,8 @@ const TIME_FORMAT_SIMPLE = {
     long: 'h:m:s a',
 };
 
+const BUDDHIST_YEAR_OFFSET = 543;
+
 // Only works with dates and iso strings
 // formats the date object by ignoring the timezone offset
 // e.g. assume date is Mar 11 2019 00:00:00 GMT+1100:
@@ -190,23 +195,55 @@ function WallTimeToUTC(date, timezone, callback) {
     callback(addTimezoneOffset(localDate));
 }
 
-// We're assuming en-US locale so we don't need translation between calendar systems
+// Similar to Aura equivalent; add years for buddhist calendar
 function translateToOtherCalendar(date) {
+    if (locale === 'th-TH') {
+        date.setFullYear(date.getFullYear() + BUDDHIST_YEAR_OFFSET);
+    }
     return date;
 }
 
-// We're assuming en-US locale so we don't need translation between calendar systems
+// Similar to Aura equivalent; subtract years for buddhist calendar
 function translateFromOtherCalendar(date) {
+    if (locale === 'th-TH') {
+        date.setFullYear(date.getFullYear() - BUDDHIST_YEAR_OFFSET);
+    }
     return date;
 }
 
-// We're assuming en-US locale so we don't need translation of digits
+/**
+ * Converts input from 'fromDigits' numbering system
+ * to 'toDigits' numbering system
+ */
+function convertDigits(input, fromDigits, toDigits) {
+    if (!input || !commonDigits[fromDigits] || !commonDigits[toDigits]) {
+        return input;
+    }
+    const digitMap = {};
+    commonDigits[fromDigits].split('').forEach((digit, index) => {
+        digitMap[digit] = commonDigits[toDigits][index];
+    });
+    return input
+        .split('')
+        .map((number) => {
+            return digitMap[number];
+        })
+        .join('');
+}
+
+// Translates from latn digits to digits of current locale
 function translateToLocalizedDigits(input) {
+    if (currentDigits !== 'latn') {
+        return convertDigits(input, 'latn', currentDigits);
+    }
     return input;
 }
 
-// We're assuming en-US locale so we don't need translation of digits
+// Translates from current locale digits to latn digits
 function translateFromLocalizedDigits(input) {
+    if (currentDigits !== 'latn') {
+        return convertDigits(input, currentDigits, 'latn');
+    }
     return input;
 }
 

package/src/lightning/confirm/__docs__/confirm.md

@@ -9,7 +9,7 @@ This example creates a headerless confirm modal with two buttons, **OK** and **C
 ```html
 <!-- c/myApp.html -->
 <template>
-    <lightning-button onclick="{handleConfirmClick}" label="Open Confirm Modal">
+    <lightning-button onclick={handleConfirmClick} label="Open Confirm Modal">
     </lightning-button>
 </template>
 ```
@@ -62,7 +62,7 @@ Code using `LightningConfirm` can be tested by mocking the `LightningConfirm.ope
 The example below uses a button to open a confirm dialog and sets the result in a template.
 
 ```html
-<button data-button onclick="{handleClick}">Open Confirm</button>
+<button data-button onclick={handleClick}>Open Confirm</button>
 <div data-result>{result}</div>
 ```
 

package/src/lightning/datatable/__docs__/datatable.md

@@ -30,7 +30,6 @@ include:
 
 -   Displaying and formatting of columns with appropriate data types
 -   Infinite scrolling of rows
--   Virtualized rendering
 -   Inline editing for some data types
 -   Header actions
 -   Row-level actions
@@ -52,10 +51,10 @@ Selecting the checkbox selects the entire row of data and triggers the `onrowsel
 ```html
 <template>
     <lightning-datatable
-        data="{data}"
-        columns="{columns}"
+        data={data}
+        columns={columns}
         key-field="id"
-        onrowselection="{getSelectedName}"
+        onrowselection={getSelectedName}
     >
     </lightning-datatable>
 </template>
@@ -551,11 +550,11 @@ there are no more data to load.
 <template>
     <div style="height: 500px">
         <lightning-datatable
-            columns="{columns}"
-            data="{data}"
+            columns={columns}
+            data={data}
             key-field="id"
             enable-infinite-loading
-            onloadmore="{loadMoreData}"
+            onloadmore={loadMoreData}
         >
         </lightning-datatable>
     </div>
@@ -607,50 +606,6 @@ the `totalNumberOfRows` attribute during initialization.
     SELECT COUNT(Id) FROM Contact
 ```
 
-#### Virtualize Rendering
-
-A virtualized datatable only renders the rows that are visible and a buffer of a few rows above and below them. This makes scrolling a lot smoother for datatables with more than 200 rows. This example shows how to enable virtualization for a datatable. 
-
-In the JavaScript file of your component, create a `renderConfig` object with the attribute `virtualize` set to `vertical`.
-
-```
-import { LightningElement } from 'lwc';
-
-export default class DataTable extends LightningElement {
-    // set data
-    // set columns
-    renderConfig = {
-        virtualize: 'vertical',
-        // additional customization
-    };
-}
-```
-
-In your `lightning-datatable` component file, set the `render-config` attribute to the `renderConfig` object you created. Set the component’s `render-mode` attribute to `role-based` and set the `lightning-datatable` component’s parent container to an explicit height. This can be a pixel value, a percentage, or an inherited height.
-
-```
-<template>
-    <div style="height: 300px;">
-        <lightning-datatable
-            key-field="id"
-            data={data}
-            columns={columns}
-            render-mode="role-based"
-            render-config={renderConfig}>
-        </lightning-datatable>
-    </div>
-</template>
-```
-
-The `render-config` attribute supports these properties. 
-Property|Type|Default Value|Description
------|-----|-----|-----
-`bufferSize`|Number|`5`|Sets the number of additional rows that the component renders before and after the rows displayed in the viewport.
-`fixedHeight`|Boolean|`false`|Makes every row the same height to reduce the load time that's spent caching the height of each row separately. If column wrapping is also enabled, rows can be positioned improperly.
-`rowHeight`|Number|`30.5`|Height in pixels of a table row with one line of text.
-`virtualize`|String|Empty string|Enables virtualization when set to `vertical`.
-
-
 #### Creating Header Actions
 
 Header actions refer to tasks you can perform on a column of data, such
@@ -700,10 +655,10 @@ Publishing State column matches either the Published or Unpublished state.
 ```html
 <template>
     <lightning-datatable
-        columns="{mycolumns}"
-        data="{mydata}"
+        columns={mycolumns}
+        data={mydata}
         key-field="id"
-        onheaderaction="{handleHeaderAction}"
+        onheaderaction={handleHeaderAction}
     >
     </lightning-datatable>
 </template>
@@ -789,10 +744,10 @@ Supported attributes for the row actions are as follows.
 ```html
 <template>
     <lightning-datatable
-        columns="{mycolumns}"
-        data="{mydata}"
+        columns={mycolumns}
+        data={mydata}
         key-field="id"
-        onrowaction="{handleRowAction}"
+        onrowaction={handleRowAction}
     >
     </lightning-datatable>
 </template>
@@ -936,8 +891,8 @@ Columns have a default minimum width of 50px and maximum width of 1000px. To cha
 ```html
 <lightning-datatable
     key-field="id"
-    data="{data}"
-    columns="{columns}"
+    data={data}
+    columns={columns}
     min-column-width="80"
 >
 </lightning-datatable>
@@ -950,9 +905,9 @@ Resizing a column fires the `resize` event. For more information, See the **Cust
 ```html
 <lightning-datatable
     key-field="id"
-    data="{data}"
-    columns="{columns}"
-    onresize="{handleResize}"
+    data={data}
+    columns={columns}
+    onresize={handleResize}
 >
 </lightning-datatable>
 ```
@@ -1025,13 +980,13 @@ useful when you want to preselect rows.
 
 ```html
 <lightning-datatable
-    columns="{columns}"
-    data="{data}"
+    columns={columns}
+    data={data}
     key-field="id"
-    selected-rows="{selectedRows}"
+    selected-rows={selectedRows}
 >
 </lightning-datatable>
-<lightning-button label="Select" onclick="{handleSelect}"> </lightning-button>
+<lightning-button label="Select" onclick={handleSelect}> </lightning-button>
 ```
 
 To select a row programmatically, pass in the row `key-field` value.
@@ -1097,9 +1052,9 @@ press the Enter or Tab key, or move away from the cell.
 <template>
     <lightning-datatable
         key-field="id"
-        data="{data}"
-        columns="{columns}"
-        onsave="{handleSave}"
+        data={data}
+        columns={columns}
+        onsave={handleSave}
     >
     </lightning-datatable>
 </template>
@@ -1150,12 +1105,12 @@ Your `lightning-datatable` component should look like this.
 <template>
     <lightning-datatable
         key-field="id"
-        data="{data}"
-        columns="{columns}"
-        errors="{errors}"
+        data={data}
+        columns={columns}
+        errors={errors}
     >
     </lightning-datatable>
-    <lightning-button label="Trigger error" onclick="{triggerError}">
+    <lightning-button label="Trigger error" onclick={triggerError}>
     </lightning-button>
 </template>
 ```
@@ -1230,8 +1185,8 @@ This example displays three lines of text and hides the rest; the text on line 3
 
 ```html
 <lightning-datatable
-    data="{data}"
-    columns="{columns}"
+    data={data}
+    columns={columns}
     key-field="id"
     wrap-text-max-lines="3"
 >
@@ -1293,8 +1248,8 @@ If you have descriptions on an element or on multiple elements for the table, se
 <lightning-datatable
     aria-labelledby="table-desc1 table-desc2"
     key-field="id"
-    data="{data}"
-    columns="{columns}"
+    data={data}
+    columns={columns}
 >
 </lightning-datatable>
 ```

package/src/lightning/datatable/__examples__/basic/basic.js

@@ -1,5 +1,5 @@
 import { LightningElement } from 'lwc';
-import fetchDataHelper from './fetchDataHelper';
+import generateData from './generateData';
 
 const columns = [
     { label: 'Label', fieldName: 'name' },
@@ -13,9 +13,8 @@ export default class BasicDatatable extends LightningElement {
     data = [];
     columns = columns;
 
-    // eslint-disable-next-line @lwc/lwc/no-async-await
-    async connectedCallback() {
-        const data = await fetchDataHelper({ amountOfRecords: 100 });
+    connectedCallback() {
+        const data = generateData({ amountOfRecords: 100 });
         this.data = data;
     }
 }

package/src/lightning/datatable/__examples__/basic/generateData.js

@@ -0,0 +1,13 @@
+export default function generateData({ amountOfRecords }) {
+    return [...Array(amountOfRecords)].map((_, index) => {
+        return {
+            name: `Name (${index})`,
+            website: 'www.salesforce.com',
+            amount: Math.floor(Math.random() * 100),
+            phone: `${Math.floor(Math.random() * 9000000000) + 1000000000}`,
+            closeAt: new Date(
+                Date.now() + 86400000 * Math.ceil(Math.random() * 20)
+            ),
+        };
+    });
+}

package/src/lightning/datatable/__examples__/withInfiniteLoading/generateDataWithDelay.js

@@ -0,0 +1,18 @@
+// eslint-disable-next-line @lwc/lwc/no-async-await
+export default async function generateData({ amountOfRecords }) {
+    // Adding fake delay
+    // eslint-disable-next-line @lwc/lwc/no-async-operation
+    await new Promise((resolve) => setTimeout(resolve, 2000));
+
+    return [...Array(amountOfRecords)].map((_, index) => {
+        return {
+            name: `Name (${index})`,
+            website: 'www.salesforce.com',
+            amount: Math.floor(Math.random() * 100),
+            phone: `${Math.floor(Math.random() * 9000000000) + 1000000000}`,
+            closeAt: new Date(
+                Date.now() + 86400000 * Math.ceil(Math.random() * 20)
+            ),
+        };
+    });
+}

package/src/lightning/datatable/__examples__/withInfiniteLoading/withInfiniteLoading.js

@@ -1,5 +1,5 @@
 import { LightningElement } from 'lwc';
-import fetchData from './fetchDataHelper';
+import generateDataWithDelay from './generateDataWithDelay';
 
 const columns = [
     { label: 'Label', fieldName: 'name' },
@@ -17,7 +17,7 @@ export default class DatatableWithInfiniteLoading extends LightningElement {
 
     // eslint-disable-next-line @lwc/lwc/no-async-await
     async connectedCallback() {
-        const data = await fetchData(100);
+        const data = await generateDataWithDelay({ amountOfRecords: 100 });
         this.data = data;
     }
 
@@ -29,7 +29,7 @@ export default class DatatableWithInfiniteLoading extends LightningElement {
         //Displays "Loading" text when more data is being loaded
         this.loadMoreStatus = 'Loading';
 
-        const newData = await fetchData(50);
+        const newData = await generateDataWithDelay({ amountOfRecords: 50 });
         if (this.data.length >= this.totalNumberOfRows) {
             datatable.enableInfiniteLoading = false;
             this.loadMoreStatus = 'No more data to load';

package/src/lightning/datatable/__examples__/withInlineEdit/generateData.js

@@ -0,0 +1,13 @@
+export default function generateData({ amountOfRecords }) {
+    return [...Array(amountOfRecords)].map((_, index) => {
+        return {
+            name: `Name (${index})`,
+            website: 'www.salesforce.com',
+            amount: Math.floor(Math.random() * 100),
+            phone: `${Math.floor(Math.random() * 9000000000) + 1000000000}`,
+            closeAt: new Date(
+                Date.now() + 86400000 * Math.ceil(Math.random() * 20)
+            ),
+        };
+    });
+}

package/src/lightning/datatable/__examples__/withInlineEdit/withInlineEdit.js

@@ -1,5 +1,5 @@
 import { LightningElement } from 'lwc';
-import fetchDataHelper from './fetchDataHelper';
+import generateData from './generateData';
 
 const columns = [
     { label: 'Label', fieldName: 'name', editable: true },
@@ -14,8 +14,7 @@ export default class DatatableWithInlineEdit extends LightningElement {
     columns = columns;
     rowOffset = 0;
 
-    // eslint-disable-next-line @lwc/lwc/no-async-await
-    async connectedCallback() {
-        this.data = await fetchDataHelper({ amountOfRecords: 100 });
+    connectedCallback() {
+        this.data = generateData({ amountOfRecords: 100 });
     }
 }

package/src/lightning/datatable/__examples__/withRowActions/generateData.js

@@ -0,0 +1,13 @@
+export default function generateData({ amountOfRecords }) {
+    return [...Array(amountOfRecords)].map((_, index) => {
+        return {
+            name: `Name (${index})`,
+            website: 'www.salesforce.com',
+            amount: Math.floor(Math.random() * 100),
+            phone: `${Math.floor(Math.random() * 9000000000) + 1000000000}`,
+            closeAt: new Date(
+                Date.now() + 86400000 * Math.ceil(Math.random() * 20)
+            ),
+        };
+    });
+}

package/src/lightning/datatable/__examples__/withRowActions/withRowActions.js

@@ -1,5 +1,5 @@
 import { LightningElement } from 'lwc';
-import fetchDataHelper from './fetchDataHelper';
+import generateData from './generateData';
 
 const actions = [
     { label: 'Show details', name: 'show_details' },
@@ -23,9 +23,8 @@ export default class DatatableWithRowActions extends LightningElement {
     columns = columns;
     record = {};
 
-    // eslint-disable-next-line @lwc/lwc/no-async-await
-    async connectedCallback() {
-        this.data = await fetchDataHelper({ amountOfRecords: 100 });
+    connectedCallback() {
+        this.data = generateData({ amountOfRecords: 100 });
     }
 
     handleRowAction(event) {

package/src/lightning/datatable/__examples__/withRowNumbers/generateData.js

@@ -0,0 +1,13 @@
+export default function generateData({ amountOfRecords }) {
+    return [...Array(amountOfRecords)].map((_, index) => {
+        return {
+            name: `Name (${index})`,
+            website: 'www.salesforce.com',
+            amount: Math.floor(Math.random() * 100),
+            phone: `${Math.floor(Math.random() * 9000000000) + 1000000000}`,
+            closeAt: new Date(
+                Date.now() + 86400000 * Math.ceil(Math.random() * 20)
+            ),
+        };
+    });
+}

package/src/lightning/datatable/__examples__/withRowNumbers/withRowNumbers.js

@@ -1,5 +1,5 @@
 import { LightningElement } from 'lwc';
-import fetchDataHelper from './fetchDataHelper';
+import generateData from './generateData';
 
 const columns = [
     { label: 'Label', fieldName: 'name' },
@@ -14,9 +14,8 @@ export default class BasicDatatable extends LightningElement {
     columns = columns;
     rowOffset = 0;
 
-    // eslint-disable-next-line @lwc/lwc/no-async-await
-    async connectedCallback() {
-        this.data = await fetchDataHelper({ amountOfRecords: 100 });
+    connectedCallback() {
+        this.data = generateData({ amountOfRecords: 100 });
     }
 
     increaseRowOffset() {

package/src/lightning/datatable/datatable.js

@@ -514,7 +514,7 @@ export default class LightningDatatable extends LightningElement {
 
     /**
      * Enables and configures advanced rendering modes.
-     * It supports properties 'bufferSize', 'fixedHeight', 'rowHeight', and 'virtualize'.
+     * It supports properties 'bufferSize', 'fixedHeight', and 'rowHeight'.
      *
      * @type {RenderManagerConfig} value - config object for datatable rendering
      */
@@ -551,8 +551,7 @@ export default class LightningDatatable extends LightningElement {
      * `default`    -> Renders <table>
      */
     /**
-     * Enables virtual rendering when set to 'role-based'.
-     * Default value is 'default'.
+     * Reserved for internal use.
      */
     @api
     get renderMode() {
@@ -1470,7 +1469,9 @@ export default class LightningDatatable extends LightningElement {
      */
     handleTableFocusOut(event) {
         handleDatatableFocusOut.call(this, event);
-        this.state.activeCell.focused = this._shouldResetFocus;
+        if (this.state.activeCell) {
+            this.state.activeCell.focused = this._shouldResetFocus;
+        }
     }
 
     /**

package/src/lightning/datatable/infiniteLoading.js

@@ -66,8 +66,7 @@ export function setLoadMoreOffset(state, value) {
     if (!isNonNegativeInteger(value)) {
         // eslint-disable-next-line no-console
         console.warn(
-            `The "loadMoreOffset" value passed into lightning:datatable
-            is incorrect. "loadMoreOffset" value should be an integer >= 0.`
+            `The "loadMoreOffset" value passed into lightning:datatable is incorrect. "loadMoreOffset" value should be an integer >= 0.`
         );
     }
 

package/src/lightning/datatable/keyboard.js

@@ -12,6 +12,8 @@ import { isCellEditable, getRowByKey } from './rows';
 import { isRTL, getShadowActiveElements } from 'lightning/utilsPrivate';
 import { findFirstVisibleIndex } from './virtualization';
 
+import { escapeDoubleQuotes } from './utils';
+
 // Indicator/flag for a header row
 const HEADER_ROW = 'HEADER';
 
@@ -1318,13 +1320,15 @@ function isHeaderRow(rowIndex) {
 }
 
 export function getDataRow(rowKeyValue) {
-    return `[data-row-key-value="${rowKeyValue}"]`;
+    return `[data-row-key-value="${escapeDoubleQuotes(rowKeyValue)}"]`;
 }
 
 export function getCellElementByKeys(template, rowKeyValue, colKeyValue) {
     const selector = `${getDataRow(
         rowKeyValue
-    )} [data-col-key-value="${colKeyValue}"] > :first-child`;
+    )} [data-col-key-value="${escapeDoubleQuotes(
+        colKeyValue
+    )}"] > :first-child`;
     return template.querySelector(selector);
 }