lightning-base-components 1.15.1-alpha → 1.15.4-alpha

package/scopedImports/@salesforce-label-LightningMap.defaultTitle.js

@@ -0,0 +1 @@
+export default 'Map of {0} Markers';

package/src/lightning/alert/__docs__/alert.md

@@ -1,7 +1,5 @@
 The `lightning/alert` module lets you create an alert modal within your component. Use `LightningAlert` on your components to communicate a state that affects the entire system, not just a feature or page.
 
-`lightning/alert` is not supported on mobile devices.
-
 Use `LightningAlert.open()` instead of the native `window.alert()` for a more consistent user experience. They have similar functions, but `LightningAlert.open()` works in cross-origin iframes, where the `.alert()` method is no longer supported in Chrome and Safari. Unlike `window.alert()`, `LightningAlert.open()` doesn't halt execution on the page, it returns a Promise. Use `async`/`await` or `.then()` for any code you want to execute after the alert has closed.
 
 Import `LightningAlert` from the `lightning/alert` module in the component that will launch the alert modal, and call `LightningAlert.open()` with your desired attributes.
@@ -11,7 +9,7 @@ This example creates an alert modal with an error message and **OK** button. The
 ```html
 <!-- c/myApp.html -->
 <template>
-    <lightning-button onclick="{handleAlertClick}" label="Open Alert Modal">
+    <lightning-button onclick={handleAlertClick} label="Open Alert Modal">
     </lightning-button>
 </template>
 ```
@@ -61,11 +59,11 @@ Code using `LightningAlert` can be tested by mocking the `LightningAlert.open()`
 The example below uses a button to open an alert dialog with text that changes when the alert opens.
 
 ```html
-<button data-button onclick="{handleClick}">Open Alert</button>
-<template if:true="{alertViewed}">
+<button data-button onclick={handleClick}>Open Alert</button>
+<template if:true={alertViewed}>
     <div data-text>Content Viewed</div>
 </template>
-<template if:false="{alertViewed}">
+<template if:false={alertViewed}>
     <div data-text>Click to View Content</div>
 </template>
 ```

package/src/lightning/baseCombobox/baseCombobox.html

@@ -44,9 +44,11 @@
                     aria-expanded={computedAriaExpanded}
                     aria-haspopup="listbox"
                     name={name}
+                    role="combobox"
                     data-value={computedInputValue}
                     disabled={disabled}
                     aria-label={computedButtonTriggerAriaLabel}
+                    aria-required={required}
                     onfocus={handleFocus}
                     onkeydown={handleInputKeyDown}
                     onblur={handleBlur}>
@@ -60,7 +62,7 @@
                     </span>
                 </button>
             </template>
-            <template if:true={hasInputPill}>
+            <template if:true={isCloseVisible}>
                 <div class="slds-input__icon-group slds-input__icon-group_right">
                     <button onclick={handlePillRemove} type="button"
                         class="slds-button slds-button_icon slds-input__icon slds-input__icon_right"

package/src/lightning/baseCombobox/baseCombobox.js

@@ -2,6 +2,7 @@ import labelAriaSelectedOptions from '@salesforce/label/LightningCombobox.ariaSe
 import labelDeselectOptionKeyboard from '@salesforce/label/LightningCombobox.deselectOptionKeyboard';
 import labelLoadingText from '@salesforce/label/LightningCombobox.loadingText';
 import labelPillCloseButtonAlternativeText from '@salesforce/label/LightningCombobox.pillCloseButtonAlternativeText';
+import labelPlaceholder from '@salesforce/label/LightningCombobox.placeholder';
 import { api, LightningElement, track } from 'lwc';
 import { handleKeyDownOnInput } from './keyboard';
 import { BaseComboboxEvents } from './baseComboboxEvents';
@@ -13,6 +14,7 @@ import {
     normalizeBoolean,
     normalizeString,
     synchronizeAttrs,
+    computeAriaInvalid,
 } from 'lightning/utilsPrivate';
 // remove-next-line-for-c-namespace
 import { AutoPosition, Direction } from 'lightning/positionLibrary';
@@ -23,6 +25,7 @@ const i18n = {
     deselectOptionKeyboard: labelDeselectOptionKeyboard,
     pillCloseButtonAlternativeText: labelPillCloseButtonAlternativeText,
     loadingText: labelLoadingText,
+    placeholder: labelPlaceholder,
 };
 
 const SMALL_MIN_HEIGHT = '2.25rem';
@@ -39,6 +42,7 @@ const ARIA_LABELLEDBY = 'aria-labelledby';
 const ARIA_DESCRIBEDBY = 'aria-describedby';
 const ARIA_LABEL = 'aria-label';
 const ARIA_ACTIVEDESCENDANT = 'aria-activedescendant';
+const ARIA_INVALID = 'aria-invalid';
 
 export default class LightningBaseCombobox extends LightningElement {
     static delegatesFocus = true;
@@ -66,7 +70,7 @@ export default class LightningBaseCombobox extends LightningElement {
     @api showInputActivityIndicator = false;
     @api required = false;
     @api dropdownAlignment = 'left';
-    @api placeholder = 'Select an Item';
+    @api placeholder = i18n.placeholder;
     @api inputLabel;
 
     @api name;
@@ -89,6 +93,8 @@ export default class LightningBaseCombobox extends LightningElement {
     _inputAriaControls;
     _activeElementDomId;
     _autocomplete = 'off';
+    originDisableDefaultHighlight;
+    privateDisableDefaultHighlight;
 
     constructor() {
         super();
@@ -276,6 +282,21 @@ export default class LightningBaseCombobox extends LightningElement {
         }
     }
 
+    /**
+     * Whether disable the highlighting default item behavior
+     *
+     * @type {boolean}
+     * @memberof LightningBaseCombobox
+     */
+    @api
+    get disableDefaultHighlight() {
+        return this.originDisableDefaultHighlight;
+    }
+    set disableDefaultHighlight(value) {
+        this.originDisableDefaultHighlight = value;
+        this.privateDisableDefaultHighlight = normalizeBoolean(value);
+    }
+
     @api
     highlightInputText() {
         if (this._connected) {
@@ -331,6 +352,7 @@ export default class LightningBaseCombobox extends LightningElement {
             [ARIA_LABEL]: this.isUserInputDisabled
                 ? this.computedButtonTriggerAriaLabel
                 : this.inputLabel,
+            [ARIA_INVALID]: this.computedAriaInvalid,
         });
     }
 
@@ -880,6 +902,13 @@ export default class LightningBaseCombobox extends LightningElement {
         return this.inputPill && Object.keys(this.inputPill).length > 0;
     }
 
+    get isCloseVisible() {
+        if (this.disabled) {
+            return false;
+        }
+        return this.hasInputPill;
+    }
+
     handlePillRemove() {
         this.inputElement.focus();
         this._events.dispatchPillRemove(this.inputPill);
@@ -924,12 +953,14 @@ export default class LightningBaseCombobox extends LightningElement {
 
     highlightDefaultItem() {
         this.removeHighlight();
-        // eslint-disable-next-line @lwc/lwc/no-async-operation
-        requestAnimationFrame(() => {
-            this.highlightOptionAndScrollIntoView(
-                this.findOptionElementByIndex(this._highlightedItemIndex)
-            );
-        });
+        if (!this.privateDisableDefaultHighlight) {
+            // eslint-disable-next-line @lwc/lwc/no-async-operation
+            requestAnimationFrame(() => {
+                this.highlightOptionAndScrollIntoView(
+                    this.findOptionElementByIndex(this._highlightedItemIndex)
+                );
+            });
+        }
     }
 
     get isDropdownEmpty() {
@@ -1012,6 +1043,12 @@ export default class LightningBaseCombobox extends LightningElement {
             },
         };
     }
+
+    get computedAriaInvalid() {
+        const ariaInvalid =
+            this.template.host.getAttribute('data-aria-invalid');
+        return computeAriaInvalid(ariaInvalid, true);
+    }
 }
 
 function scrollIntoViewIfNeeded(element, scrollingParent) {

package/src/lightning/button/button.js

@@ -1,6 +1,9 @@
 import { api, track } from 'lwc';
 import { classSet } from 'lightning/utils';
-import { normalizeString as normalize } from 'lightning/utilsPrivate';
+import {
+    normalizeString as normalize,
+    normalizeBoolean,
+} from 'lightning/utilsPrivate';
 import LightningPrimitiveButton from 'lightning/primitiveButton';
 import template from './button.html';
 
@@ -9,6 +12,7 @@ import template from './button.html';
  */
 export default class LightningButton extends LightningPrimitiveButton {
     static delegatesFocus = true;
+    _stretch = false;
 
     /**
      * The name for the button element.
@@ -62,6 +66,22 @@ export default class LightningButton extends LightningPrimitiveButton {
      */
     @api iconPosition = 'left';
 
+    /**
+     * Setting it to true allows the button to take up the entire available width.
+     * This value defaults to false.
+     *
+     * @type {boolean}
+     * @default false
+     */
+    @api
+    get stretch() {
+        return this._stretch;
+    }
+
+    set stretch(value) {
+        this._stretch = normalizeBoolean(value);
+    }
+
     /**
      * Specifies the type of button.
      * Valid values are button, reset, and submit.
@@ -97,6 +117,7 @@ export default class LightningButton extends LightningPrimitiveButton {
                     this.normalizedVariant === 'destructive-text',
                 'slds-button_inverse': this.normalizedVariant === 'inverse',
                 'slds-button_success': this.normalizedVariant === 'success',
+                'slds-button_stretch': this.stretch,
             })
             .toString();
     }

package/src/lightning/buttonIcon/buttonIcon.js

@@ -233,9 +233,6 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
                 default:
             }
         }
-        if (this.getVariantModifier(normalizedVariant) === 'inverse') {
-            classes.add('slds-button_icon-inverse');
-        }
 
         return classes.toString();
     }

package/src/lightning/calendar/calendar.html

@@ -61,7 +61,8 @@
                                     class={day.className}
                                     key={day.dateValue}
                                     tabindex={day.tabIndex}
-                                    data-value={day.dateValue}>
+                                    data-value={day.dateValue}
+                                    aria-label={day.dateValue}>
                                     <span class="slds-day" onclick={handleDateClick} tabindex="-1" role="button">{day.dayInMonth}</span>
                                 </td>
                             </template>

package/src/lightning/calendar/calendar.js

@@ -13,7 +13,7 @@ import showJapaneseCalendar from '@salesforce/i18n/showJapaneseCalendar';
 import {
     toOtherCalendar,
     toLocalizedDigits,
-    getToday,
+    getCurrentDateString,
     isBefore,
     isAfter,
     parseDateTime,
@@ -95,7 +95,7 @@ export default class LightningCalendar extends LightningElement {
     connectedCallback() {
         this._connected = true;
 
-        this.todayDate = getToday();
+        this.todayDate = getCurrentDateString();
         const renderDate = this.getSelectedDate() || this.getTodaysDate();
         this.renderCalendar(renderDate);
 

package/src/lightning/checkboxGroup/checkboxGroup.html

@@ -1,5 +1,5 @@
 <template>
-    <fieldset aria-describedby={computearaiDescriedBy}>
+    <fieldset>
 
         <legend class={computedLegendClass}>
             <template if:true={required}>
@@ -32,6 +32,6 @@
         <template if:true={_helpMessage}>
             <div id="helptext" data-helptext class="slds-form-element__help">{_helpMessage}</div>
         </template>
-        
+
     </fieldset>
 </template>

package/src/lightning/checkboxGroup/checkboxGroup.js

@@ -97,8 +97,17 @@ export default class LightningCheckboxGroup extends LightningElement {
         });
     }
 
+    get fieldsetElement() {
+        return this.template.querySelector('fieldset');
+    }
+
     renderedCallback() {
         this.synchronizeA11y();
+        synchronizeAttrs(this.fieldsetElement, {
+            'aria-describedby': getRealDOMId(
+                this.template.querySelector('[data-helptext]')
+            ),
+        });
     }
 
     /**
@@ -313,9 +322,4 @@ export default class LightningCheckboxGroup extends LightningElement {
             })
             .toString();
     }
-
-    computearaiDescriedBy() {
-        const helpMessage = this.template.querySelector('[data-helptext]');
-        return getRealDOMId(helpMessage);
-    }
 }

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

@@ -118,9 +118,11 @@ We recommend using the HTML `<select>` element on mobile instead.
 
 You must provide a text label for accessibility to make the information
 available to assistive technology. The `label` attribute creates an HTML label
-element for your input component. To hide a label from view and make it
+element for your component. To hide a label from view and make it
 available to assistive technology, use the `label-hidden` variant.
 
+This component uses `button` elements for select-only comboboxes to comply with the [Lightning Design System combobox blueprint](https://www.lightningdesignsystem.com/components/combobox/#%22Input%22-markup).
+
 #### Custom Events
 
 **`change`**

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,
@@ -300,7 +302,6 @@ export default class LightningCombobox extends LightningElement {
     /**
      * Represents the validity states that an element can be in, with respect to constraint validation.
      * @type {object}
-     * @required
      */
     @api
     get validity() {
@@ -494,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

@@ -1,7 +1,5 @@
 The `lightning/confirm` module lets you create a confirm modal within your component. Use `LightningConfirm` on your component to ask the user to respond before they continue.
 
-`lightning/confirm` is not supported on mobile devices.
-
 Use `LightningConfirm.open()` instead of the native `window.confirm()` for a more consistent user experience. They have similar functions, but `LightningConfirm.open()` works in cross-origin iframes, where the `.confirm()` method is no longer supported in Chrome and Safari. Unlike `window.confirm()`, `LightningConfirm.open()` doesn't halt execution on the page, it returns a Promise. Use `async`/`await` or `.then()` for any code you want to execute after the confirm has closed.
 
 Import `LightningConfirm` from the `lightning/confirm` module in the component that will launch the confirm modal, and call `LightningConfirm.open()` with your desired attributes.
@@ -11,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>
 ```
@@ -64,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/__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)
+            ),
+        };
+    });
+}