lightning-base-components 1.15.2-alpha → 1.15.3-alpha

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
@@ -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

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() * 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() * 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() * 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() * 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() * 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/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);
 }
 

package/src/lightning/datatable/utils.js

@@ -20,6 +20,17 @@ const CLASSSET_PROTOTYPE = {
     },
 };
 
+/**
+ * function for escaping double quotes, later can be
+ * extended in future for any other usecase
+ */
+export function escapeDoubleQuotes(value) {
+    if (typeof value == 'string') {
+        return value.replace(/"/g, '\\"');
+    }
+    return value;
+}
+
 /**
  * Determines if a given value is object-like.
  *

package/src/lightning/datatable/virtualization.js

@@ -1,4 +1,4 @@
-import { styleToString } from './utils';
+import { styleToString, escapeDoubleQuotes } from './utils';
 
 /**
  * sets an initial table height in the datatable state
@@ -48,7 +48,7 @@ export function handleVariableRowHeights(template, state, renderedRows) {
         if (!state.heightCache[row.key]) {
             // need to get row actual element so we can find its height
             const rowElement = template.querySelector(
-                `[data-row-key-value="${row.key}"]`
+                `[data-row-key-value="${escapeDoubleQuotes(row.key)}"]`
             );
             if (rowElement) {
                 // first rendered row needs height increased by 1 to account for missing border

package/src/lightning/datepicker/datepicker.html

@@ -7,7 +7,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>
         </template>
         <template if:true={isRangeMessageVisible}>
             <span id="range-message" data-range-message class="slds-assistive-text">{rangeMessage}</span>
@@ -55,7 +55,7 @@
         </div>
     </div>
 
-    <template if:true={errorMessage}>
-        <div id="error-message" data-error-message class="slds-form-element__help" aria-live="assertive">{errorMessage}</div>
-    </template>
+
+        <div id="error-message" data-error-message class={computedClass} aria-live="assertive">{errorMessage}</div>
+
 </template>