lightning-base-components 1.20.2-alpha → 1.21.0-alpha

package/metadata/raptor.json

@@ -80,6 +80,7 @@
   "analyticsWaveApi": {
     "minVersion": "52.0"
   },
+  "ariaObserver": {},
   "auraDynamic": {},
   "auraUtilsMock": {},
   "avatar": {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lightning-base-components",
-    "version": "1.20.2-alpha",
+    "version": "1.21.0-alpha",
     "license": "MIT",
     "files": [
         "external",
@@ -1372,6 +1372,7 @@
             "lightning/accordion",
             "lightning/accordionSection",
             "lightning/alert",
+            "lightning/ariaObserver",
             "lightning/avatar",
             "lightning/badge",
             "lightning/barcodeScanner",

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

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

package/src/lightning/datatable/__examples__/customDatatableWrapper/customDatatableWrapper.html

@@ -0,0 +1,11 @@
+<template>
+    <datatable-custom-datatype-table
+        key-field="id"
+        data={data}
+        columns={columns}
+        onprivatemoverowup={moveRowUp}
+        onprivatemoverowdown={moveRowDown}
+        onprivatedeleterow={deleteRow}
+        hide-checkbox-column>
+    </datatable-custom-datatype-table>
+</template>

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

@@ -0,0 +1,158 @@
+import { LightningElement, track } from 'lwc';
+
+// Add <datatable-custom-datatable-wrapper></datatable-custom-datatable-wrapper> to the lwr-playground to see the table
+
+const columns = [
+    {
+        label: 'Reorder',
+        type: 'orderingButtons',
+        fixedWidth: 90,
+        fieldName: 'id',
+        typeAttributes: {
+            isFirstRow: { fieldName: 'isFirstRow' },
+            isLastRow: { fieldName: 'isLastRow' },
+        },
+    },
+    {
+        label: 'Account Name',
+        type: 'customName',
+        typeAttributes: {
+            accountName: { fieldName: 'name' },
+        },
+    },
+    {
+        label: 'Website',
+        fieldName: 'website',
+        type: 'customLink',
+        typeAttributes: {
+            label: { fieldName: 'name' },
+            tooltip: { fieldName: 'name' },
+        },
+        hideDefaultActions: true,
+        actions: [
+            { label: 'Action 1', name: 'action1' },
+            { label: 'Action 2', name: 'action2' },
+        ],
+    },
+    {
+        label: 'Amount',
+        type: 'customNumber',
+        fieldName: 'amount',
+        editable: true,
+        typeAttributes: {
+            min: 0,
+        },
+    },
+    { label: 'Icon', type: 'iconPill' },
+    {
+        label: '',
+        type: 'deleteRowButton',
+        fieldName: 'id',
+        fixedWidth: 70,
+        typeAttributes: {
+            attrA: { fieldName: 'attrA' },
+            attrB: { fieldName: 'attrB' },
+        },
+    },
+];
+
+const exampleData = [
+    {
+        id: 1,
+        name: 'Name 1',
+        website: 'https://www.google.com',
+        amount: 200.0,
+        isFirstRow: true,
+        isLastRow: false,
+    },
+    {
+        id: 2,
+        name: 'Name 2',
+        website: 'https://www.salesforce.com',
+        amount: 500000.0,
+        isFirstRow: false,
+        isLastRow: false,
+    },
+    {
+        id: 3,
+        name: 'Name 3',
+        website: 'https://www.quora.com',
+        amount: 600.0,
+        isFirstRow: false,
+        isLastRow: true,
+    },
+];
+
+export default class CustomDatatableWrapper extends LightningElement {
+    @track data = exampleData;
+    @track columns = columns;
+
+    moveRowUp(event) {
+        const { rowId } = event.detail;
+        const index = findRowIndex(this.data, rowId);
+        if (index > 0) {
+            const row = this.data[index];
+            const previous = this.data[index - 1];
+            this.data = this.data
+                .slice(0, index - 1)
+                .concat([row, previous])
+                .concat(this.data.slice(index + 1));
+            if (index - 1 === 0) {
+                this.data[0].isFirstRow = true;
+                this.data[1].isFirstRow = false;
+            } else if (index === this.data.length - 1) {
+                this.data[index].isLastRow = true;
+                this.data[index - 1].isLastRow = false;
+            }
+        }
+    }
+
+    moveRowDown(event) {
+        const { rowId } = event.detail;
+        const index = findRowIndex(this.data, rowId);
+        const length = this.data.length;
+        if (index < length - 1) {
+            const row = this.data[index];
+            const next = this.data[index + 1];
+            this.data = this.data
+                .slice(0, index)
+                .concat([next, row])
+                .concat(this.data.slice(index + 2));
+            if (index === 0) {
+                this.data[0].isFirstRow = true;
+                this.data[1].isFirstRow = false;
+            } else if (index === this.data.length - 2) {
+                this.data[index].isLastRow = false;
+                this.data[index + 1].isLastRow = true;
+            }
+        }
+    }
+
+    deleteRow(event) {
+        const { rowId } = event.detail;
+        const index = findRowIndex(this.data, rowId);
+        const length = this.data.length;
+        if (index >= 0) {
+            this.data = this.data
+                .slice(0, index)
+                .concat(this.data.slice(index + 1));
+            if (index === 0) {
+                this.data[0].isFirstRow = true;
+            } else if (index === length - 1) {
+                this.data[length - 2].isLastRow = true;
+            }
+        }
+    }
+}
+
+function findRowIndex(data, rowId) {
+    let index = -1;
+    data.some((row, i) => {
+        if (row.id === rowId) {
+            index = i;
+            return true;
+        }
+        return false;
+    });
+    return index;
+}

package/src/lightning/datatable/__examples__/customDatatypeDeleteRowBtn/customDatatypeDeleteRowBtn.html

@@ -0,0 +1,6 @@
+<template>
+    <div style="text-align: center;">
+        <lightning-button-icon icon-name="utility:delete" onclick={fireDeleteRow}>
+        </lightning-button-icon>
+    </div>
+</template>

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

@@ -0,0 +1,28 @@
+import { LightningElement, api } from 'lwc';
+import { baseNavigation } from 'lightning/datatableKeyboardMixins';
+import template from './customDatatypeDeleteRowBtn.html';
+
+export default class CustomDatatypeDeleteRowBtn extends baseNavigation(
+    LightningElement
+) {
+    @api rowId;
+    @api attrA;
+    @api attrB;
+
+    // Required for mixins
+    render() {
+        return template;
+    }
+
+    fireDeleteRow() {
+        const event = CustomEvent('privatedeleterow', {
+            composed: true,
+            bubbles: true,
+            cancelable: true,
+            detail: {
+                rowId: this.rowId,
+            },
+        });
+        this.dispatchEvent(event);
+    }
+}

package/src/lightning/datatable/__examples__/customDatatypeLink/customDatatypeLink.html

@@ -0,0 +1,9 @@
+<template>
+    <div>
+        <p><lightning-formatted-url value={url} tooltip="Omit leading slash" label={label} target="_blank"></lightning-formatted-url></p>
+        <p><lightning-formatted-url value={url} tooltip="Use full domain name" label={label}
+                target="_blank"></lightning-formatted-url></p>
+        <p><lightning-formatted-url value={url} tooltip="Use https://domain-name"
+                label={label} target="_blank"></lightning-formatted-url></p>
+    </div>
+</template>

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

@@ -0,0 +1,15 @@
+import { LightningElement, api } from 'lwc';
+import mix from 'lightning/mixinBuilder';
+import { baseNavigation } from 'lightning/datatableKeyboardMixins';
+import template from './customDatatypeLink.html';
+
+export default class CustomDatatypeLink extends mix(LightningElement).with(
+    baseNavigation
+) {
+    @api url;
+    @api label;
+
+    render() {
+        return template;
+    }
+}

package/src/lightning/datatable/__examples__/customDatatypeNumber/customDatatypeNumber.html

@@ -0,0 +1,10 @@
+<template>
+    <div class={computedClass}>
+        <lightning-formatted-number format-style="currency" value={value}>
+        </lightning-formatted-number>
+        <lightning-icon class="slds-p-horizontal_xx-small" icon-name={computedIcon} size="xx-small"
+            variant={iconVariant}>
+        </lightning-icon>
+        ({range})
+    </div>
+</template>

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

@@ -0,0 +1,21 @@
+import { LightningElement, api } from 'lwc';
+
+export default class CustomDatatypeNumber extends LightningElement {
+    @api value;
+    get range() {
+        return this.value > 50000 ? 'High' : 'Low';
+    }
+    get computedClass() {
+        return this.value > 50000
+            ? 'slds-text-color_success'
+            : 'slds-text-color_error';
+    }
+
+    get computedIcon() {
+        return this.value > 50000 ? 'utility:arrowup' : 'utility:arrowdown';
+    }
+
+    get iconVariant() {
+        return this.value > 50000 ? 'success' : 'error';
+    }
+}

package/src/lightning/datatable/__examples__/customDatatypeRowOrderingBtn/customDatatypeRowOrderingBtn.html

@@ -0,0 +1,10 @@
+<template>
+    <div style="text-align: center; padding: 4px;">
+        <div class="slds-button-group" role="group">
+            <lightning-button-icon icon-name="utility:up" alternative-text="up" title="up" size="x-small"
+            onclick={fireMoveRowUp} disabled={isFirstRow}></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:down" alternative-text="down" title="down" size="x-small"
+            onclick={fireMoveRowDown} disabled={isLastRow}></lightning-button-icon>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,40 @@
+import { LightningElement, api } from 'lwc';
+import mix from 'lightning/mixinBuilder';
+import { baseNavigation } from 'lightning/datatableKeyboardMixins';
+import template from './customDatatypeRowOrderingBtn.html';
+
+export default class CustomDatatypeRowOrderingBtn extends mix(
+    LightningElement
+).with(baseNavigation) {
+    @api rowId;
+    @api isFirstRow;
+    @api isLastRow;
+
+    render() {
+        return template;
+    }
+
+    fireMoveRowUp() {
+        const event = new CustomEvent('privatemoverowup', {
+            composed: true,
+            bubbles: true,
+            cancelable: true,
+            detail: {
+                rowId: this.rowId,
+            },
+        });
+        this.dispatchEvent(event);
+    }
+
+    fireMoveRowDown() {
+        const event = new CustomEvent('privatemoverowdown', {
+            composed: true,
+            bubbles: true,
+            cancelable: true,
+            detail: {
+                rowId: this.rowId,
+            },
+        });
+        this.dispatchEvent(event);
+    }
+}

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

@@ -0,0 +1,38 @@
+import LightningDatatable from 'lightning/datatable';
+import deleteRow from './deleteRow.html';
+import orderingButtons from './orderingButtons.html';
+import iconPill from './iconPill.html';
+import customName from './customName.html';
+import customNumber from './customNumber.html';
+import customLink from './customLink.html';
+import customNumberEdit from './customNumberEdit.html';
+
+export default class CustomDatatypeTable extends LightningDatatable {
+    static customTypes = {
+        deleteRowButton: {
+            template: deleteRow,
+            typeAttributes: ['attrA', 'attrB'],
+        },
+        orderingButtons: {
+            template: orderingButtons,
+            typeAttributes: ['isFirstRow', 'isLastRow'],
+        },
+        customLink: {
+            template: customLink,
+            typeAttributes: ['label', 'tooltip'],
+        },
+        iconPill: {
+            template: iconPill,
+        },
+        customName: {
+            template: customName,
+            typeAttributes: ['accountName'],
+        },
+        customNumber: {
+            template: customNumber,
+            editTemplate: customNumberEdit,
+            standardCellLayout: true,
+            typeAttributes: ['min'],
+        },
+    };
+}

package/src/lightning/datatable/__examples__/customDatatypeTable/customLink.html

@@ -0,0 +1,9 @@
+<template>
+    <datatable-custom-datatype-link
+        data-navigation="enable"
+        url={value}
+        label={typeAttributes.label}
+        tabindex={internalTabIndex}
+        keyboard-mode={keyboardMode}>
+    </datatable-custom-datatype-link>
+</template>

package/src/lightning/datatable/__examples__/customDatatypeTable/customName.html

@@ -0,0 +1,4 @@
+<template>
+    <lightning-badge label={typeAttributes.accountName} icon-name="standard:account">
+    </lightning-badge>
+</template>

package/src/lightning/datatable/__examples__/customDatatypeTable/customNumber.html

@@ -0,0 +1,3 @@
+<template>
+    <datatable-custom-datatype-number value={value}></datatable-custom-datatype-number>
+</template>

package/src/lightning/datatable/__examples__/customDatatypeTable/customNumberEdit.html

@@ -0,0 +1,10 @@
+<template>
+    <lightning-input
+        type="number"
+        value={editedValue}
+        required={required}
+        label={columnLabel}
+        data-inputable="true"
+        min={typeAttributes.min}>
+    </lightning-input>
+</template>

package/src/lightning/datatable/__examples__/customDatatypeTable/deleteRow.html

@@ -0,0 +1,8 @@
+<template>
+    <datatable-custom-datatype-delete-row-btn
+        data-navigation="enable"
+        row-id={value}
+        attr-a={typeAttributes.attrA}
+        attr-b={typeAttributes.attrB}>
+    </datatable-custom-datatype-delete-row-btn>
+</template>

package/src/lightning/datatable/__examples__/customDatatypeTable/iconPill.html

@@ -0,0 +1,17 @@
+<template>
+    <div style="padding: 0 10px;">
+        <span class="slds-pill slds-pill_link">
+            <span class="slds-pill__icon_container">
+                <span class="slds-icon_container slds-icon-standard-account" title="Account">
+                    <lightning-icon class="slds-icon" icon-name="standard:account" alternative-text="Account" title="Account"></lightning-icon>
+                </span>
+            </span>
+            <a href="javascript:void(0);" class="slds-pill__action" title="Full pill label verbiage mirrored here"
+                tabindex={internalTabIndex}>
+                <span class="slds-pill__label">Pill Label</span>
+            </a>
+            <lightning-button-icon class="slds-button slds-button_icon slds-button_icon slds-pill__remove" icon-name="utility:close" size="x-small" alternative-text="close"
+                title="close" variant="bare"></lightning-button-icon>
+        </span>
+    </div>
+</template>

package/src/lightning/datatable/__examples__/customDatatypeTable/orderingButtons.html

@@ -0,0 +1,10 @@
+<template>
+    <datatable-custom-datatype-row-ordering-btn
+        row-id={value}
+        is-first-row={typeAttributes.isFirstRow}
+        is-last-row={typeAttributes.isLastRow}
+        data-navigation="enable"
+        tabindex={internalTabIndex}
+        keyboard-mode={keyboardMode}>
+    </datatable-custom-datatype-row-ordering-btn>
+</template>

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

@@ -0,0 +1,23 @@
+export default function generateData({ amountOfRecords }) {
+    return [...Array(amountOfRecords)].map((_, index) => {
+        return {
+            name: `Name (${index})`,
+            boolean: Math.random() < 0.5,
+            website: 'www.salesforce.com',
+            phone: `${Math.floor(Math.random() * 9000000000) + 1000000000}`,
+            currency: Math.floor(Math.random() * 100),
+            date: new Date(
+                Date.now() + 86400000 * Math.ceil(Math.random() * 20)
+            ),
+            dateLocal: new Date(Date.now()),
+            email: 'test@salesforce.com',
+            location: {
+                latitude: (Math.random() * 90).toFixed(2),
+                longitude: (Math.random() * 180).toFixed(2),
+            },
+            number: Math.floor(Math.random() * 100),
+            percent: Math.random(),
+            iconName: 'action:approval',
+        };
+    });
+}

package/src/lightning/datatable/__examples__/withAllColumnTypes/withAllColumnTypes.html

@@ -0,0 +1,11 @@
+<template>
+    <div style="height: 300px;">
+        <lightning-datatable
+            key-field="id"
+            hide-checkbox-column
+            data={data}
+            columns={columns}
+            column-widths-mode="auto">
+        </lightning-datatable>
+    </div>
+</template>

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

@@ -0,0 +1,71 @@
+import { LightningElement } from 'lwc';
+import generateData from './generateData';
+
+// Add <datatable-with-all-column-types></datatable-with-all-column-types> to the lwr-playground to see the table
+
+const columns = [
+    { label: 'Name', fieldName: 'name' },
+    { label: 'Boolean', fieldName: 'boolean', type: 'boolean' },
+    { label: 'Url', fieldName: 'url', type: 'url' },
+    { label: 'Phone', fieldName: 'phone', type: 'phone' },
+    {
+        label: 'Currency',
+        fieldName: 'currency',
+        type: 'currency',
+        typeAttributes: {
+            currencyCode: 'EUR',
+        },
+    },
+    { label: 'Date', fieldName: 'date', type: 'date' },
+    {
+        label: 'Date-local',
+        fieldName: 'dateLocal',
+        type: 'date-local',
+        typeAttributes: {
+            month: '2-digit',
+            day: '2-digit',
+        },
+    },
+    { label: 'Email', fieldName: 'email', type: 'email' },
+    { label: 'Location', fieldName: 'location', type: 'location' },
+    { label: 'Number', fieldName: 'number', type: 'number' },
+    { label: 'Percent', fieldName: 'percent', type: 'percent' },
+    {
+        label: 'Action',
+        type: 'action',
+        typeAttributes: {
+            rowActions: [
+                { label: 'action 1', name: 'action1' },
+                { label: 'action 2', name: 'action2' },
+            ],
+        },
+    },
+    {
+        label: 'Button',
+        type: 'button',
+        typeAttributes: {
+            label: 'Submit',
+            name: 'submitAction',
+            iconName: { fieldName: 'iconName' },
+        },
+    },
+    {
+        label: 'Button-icon',
+        type: 'button-icon',
+        typeAttributes: {
+            label: 'Submit',
+            name: 'submitAction',
+            iconName: { fieldName: 'iconName' },
+        },
+    },
+];
+
+export default class DatatableWithAllColumnTypes extends LightningElement {
+    data = [];
+    columns = columns;
+
+    connectedCallback() {
+        const data = generateData({ amountOfRecords: 100 });
+        this.data = data;
+    }
+}

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

@@ -0,0 +1,14 @@
+export default function generateData({ amountOfRecords }) {
+    return [...Array(amountOfRecords)].map((_, index) => {
+        return {
+            id: index + 1,
+            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__/withColResizing/withColResizing.html

@@ -0,0 +1,47 @@
+<template>
+    <p>Datatable with resize-column disabled</p>
+    <lightning-datatable
+        key-field="id"
+        data={data}
+        columns={columns}
+        resize-column-disabled>
+    </lightning-datatable>
+
+    <p>Datatable with min and max column widths. Resize step: {resizeStep} </p>
+    <lightning-button
+        label="Increase resize step"
+        class="increaseResizeStep"
+        onclick={increaseResizeStep}>
+    </lightning-button>
+    <lightning-button
+        label="Decrease resize step"
+        class="decreaseResizeStep"
+        onclick={decreaseResizeStep}>
+    </lightning-button>
+    <lightning-datatable
+        key-field="id"
+        data={data}
+        columns={columns}
+        min-column-width="100"
+        max-column-width="300"
+        resize-step={resizeStep}>
+    </lightning-datatable>
+
+    <p>Datatable with column-widths-mode='{mode}'</p>
+    <lightning-button
+        label="Change Widths Mode"
+        class="changeWidthsMode"
+        onclick={changeWidthsMode}>
+    </lightning-button>
+    <lightning-button
+        label="Add Column"
+        column="addColumn"
+        onclick={addColumn}>
+    </lightning-button>
+    <lightning-datatable
+        key-field="id"
+        data={data}
+        columns={columns}
+        column-widths-mode={mode}>
+    </lightning-datatable>
+</template>

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

@@ -0,0 +1,42 @@
+import { LightningElement } from 'lwc';
+import generateData from './generateData';
+
+// Add <datatable-with-col-resizing></datatable-with-col-resizing> to the lwr-playground to see table
+
+const columns = [
+    { label: 'Label', fieldName: 'name' },
+    { label: 'Website', fieldName: 'website', type: 'url' },
+    { label: 'Phone', fieldName: 'phone', type: 'phone' },
+    { label: 'Balance', fieldName: 'amount', type: 'currency' },
+    { label: 'CloseAt', fieldName: 'closeAt', type: 'date' },
+];
+
+export default class DatatableWithResize extends LightningElement {
+    data = [];
+    columns = columns;
+    mode = 'fixed';
+    resizeStep = 10;
+
+    connectedCallback() {
+        this.data = generateData({ amountOfRecords: 25 });
+    }
+
+    changeWidthsMode() {
+        this.mode = this.mode === 'fixed' ? 'auto' : 'fixed';
+    }
+
+    increaseResizeStep() {
+        this.resizeStep += 10;
+    }
+
+    decreaseResizeStep() {
+        this.resizeStep =
+            this.resizeStep > 10 ? (this.resizeStep -= 10) : this.resizeStep;
+    }
+
+    addColumn() {
+        const cols = Array.from(this.columns);
+        cols.push({ label: 'ID', fieldName: 'id' });
+        this.columns = cols;
+    }
+}

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

@@ -0,0 +1,14 @@
+export default function generateData({ amountOfRecords }) {
+    return [...Array(amountOfRecords)].map((_, index) => {
+        return {
+            id: index + 1,
+            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__/withErrors/withErrors.html

@@ -0,0 +1,13 @@
+<template>
+    <lightning-button
+        label="Trigger error"
+        class="triggerError"
+        onclick={triggerError}>
+    </lightning-button>
+    <lightning-datatable
+        key-field="id"
+        data={data}
+        columns={columns}
+        errors={errors}>
+    </lightning-datatable>
+</template>

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

@@ -0,0 +1,44 @@
+import { LightningElement } from 'lwc';
+import generateData from './generateData';
+
+// Add <datatable-with-errors></datatable-with-errors> to the lwr-playground to see the table
+
+const columns = [
+    { label: 'Label', fieldName: 'name', editable: true },
+    { label: 'Website', fieldName: 'website', type: 'url', editable: true },
+    { label: 'Phone', fieldName: 'phone', type: 'phone', editable: true },
+    { label: 'Balance', fieldName: 'amount', type: 'currency' },
+    { label: 'CloseAt', fieldName: 'closeAt', type: 'date', editable: true },
+];
+
+export default class DatatableWithError extends LightningElement {
+    data = [];
+    columns = columns;
+    errors = {};
+
+    connectedCallback() {
+        this.data = generateData({ amountOfRecords: 100 });
+    }
+
+    triggerError() {
+        this.errors = {
+            rows: {
+                1: {
+                    title: 'We found 2 errors.',
+                    messages: [
+                        'Enter a valid name',
+                        'Verify the phone number and try again.',
+                    ],
+                    fieldNames: ['name', 'phone'],
+                },
+            },
+            table: {
+                title: 'Your entry cannot be saved. Fix the errors and try again.',
+                messages: [
+                    'Row 1 name must be valid text',
+                    'Row 1 phone number is invalid',
+                ],
+            },
+        };
+    }
+}

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

@@ -6,7 +6,8 @@
             data={data}
             columns={columns}
             enable-infinite-loading
-            onloadmore={handleLoadMore}>
+            onloadmore={handleLoadMore}
+            load-more-offset={loadMoreOffset}>
         </lightning-datatable>
     </div>
     <p>{loadMoreStatus}</p>

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

@@ -14,6 +14,7 @@ export default class DatatableWithInfiniteLoading extends LightningElement {
     columns = columns;
     loadMoreStatus;
     totalNumberOfRows = 250;
+    loadMoreOffset = 20;
 
     // eslint-disable-next-line @lwc/lwc/no-async-await
     async connectedCallback() {

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

@@ -6,6 +6,7 @@
                 show-row-number-column
                 row-number-offset={rowOffset}
                 suppress-bottom-bar
+                draft-values={draftValues}
                 columns={columns}>
         </lightning-datatable>
     </div>

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

@@ -13,6 +13,7 @@ export default class DatatableWithInlineEdit extends LightningElement {
     data = [];
     columns = columns;
     rowOffset = 0;
+    draftValues = [];
 
     connectedCallback() {
         this.data = generateData({ amountOfRecords: 100 });

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

@@ -0,0 +1,14 @@
+export default function generateData({ amountOfRecords }) {
+    return [...Array(amountOfRecords)].map((_, index) => {
+        return {
+            id: index + 1,
+            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__/withRowSelection/withRowSelection.html

@@ -0,0 +1,21 @@
+<template>
+    <p>Max row selection value: {maxRowSelection}</p>
+    <lightning-button
+        label="Increase max row selection"
+        class="increaseMaxRowSelection"
+        onclick={increaseMaxRowSelection}>
+    </lightning-button>
+    <lightning-button
+        label="Decrease max row selection"
+        class="decreaseMaxRowSelection"
+        onclick={decreaseMaxRowSelection}>
+    </lightning-button>
+    <lightning-datatable
+        key-field="id"
+        columns={columns}
+        data={data}
+        selected-rows={selectedRows}
+        row-number-offset="0"
+        max-row-selection={maxRowSelection}>
+    </lightning-datatable>
+</template>

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

@@ -0,0 +1,34 @@
+import { LightningElement } from 'lwc';
+import generateData from './generateData';
+
+// Add <datatable-with-row-selection></datatable-with-row-selection> to the lwr-playground to see the table
+
+const columns = [
+    { label: 'Label', fieldName: 'name' },
+    { label: 'Website', fieldName: 'website', type: 'url' },
+    { label: 'Phone', fieldName: 'phone', type: 'phone' },
+    { label: 'Balance', fieldName: 'amount', type: 'currency' },
+    { label: 'CloseAt', fieldName: 'closeAt', type: 'date' },
+];
+
+export default class DatatableWithRowSelection extends LightningElement {
+    data = [];
+    columns = columns;
+    selectedRows = ['1', '2', '4'];
+    maxRowSelection = 4;
+
+    connectedCallback() {
+        this.data = generateData({ amountOfRecords: 100 });
+    }
+
+    increaseMaxRowSelection() {
+        this.maxRowSelection += 1;
+    }
+
+    decreaseMaxRowSelection() {
+        this.maxRowSelection =
+            this.maxRowSelection > 0
+                ? (this.maxRowSelection -= 1)
+                : this.maxRowSelection;
+    }
+}

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

@@ -0,0 +1,16 @@
+export default function generateData({ amountOfRecords }) {
+    return [...Array(amountOfRecords)].map((_, index) => {
+        return {
+            id: index + 1,
+            name: `Name (${index})`,
+            description:
+                'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.',
+            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__/withTextWrapping/withTextWrapping.html

@@ -0,0 +1,14 @@
+<template>
+    <lightning-button
+        label="Change text wrapping max lines"
+        class="changeTextWrappingMaxLines"
+        onclick={changeTextWrappingMaxLines}>
+    </lightning-button>
+    <lightning-datatable
+        key-field="id"
+        columns={columns}
+        data={data}
+        hide-checkbox-column
+        wrap-text-max-lines={wrapTextMaxLines}>
+    </lightning-datatable>
+</template>

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

@@ -0,0 +1,31 @@
+import { LightningElement } from 'lwc';
+import generateData from './generateData';
+
+// Add <datatable-with-text-wrapping></datatable-with-text-wrapping> to the lwr-playground to see the table
+
+const columns = [
+    { label: 'Label', fieldName: 'name' },
+    {
+        label: 'Description',
+        fieldName: 'description',
+        wrapText: true,
+    },
+    { label: 'Website', fieldName: 'website', type: 'url' },
+    { label: 'Phone', fieldName: 'phone', type: 'phone' },
+    { label: 'Balance', fieldName: 'amount', type: 'currency' },
+    { label: 'CloseAt', fieldName: 'closeAt', type: 'date' },
+];
+
+export default class DatatablewithTextWrapping extends LightningElement {
+    data = [];
+    columns = columns;
+    wrapTextMaxLines;
+
+    connectedCallback() {
+        this.data = generateData({ amountOfRecords: 25 });
+    }
+
+    changeTextWrappingMaxLines() {
+        this.wrapTextMaxLines = 3;
+    }
+}

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

@@ -0,0 +1,14 @@
+export default function generateData({ amountOfRecords }) {
+    return [...Array(amountOfRecords)].map((_, index) => {
+        return {
+            id: index + 1,
+            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__/withVirtualization/withVirtualization.html

@@ -0,0 +1,12 @@
+<template>
+    <div style="height:100vh;">
+        <lightning-datatable
+            data-render-mode="role-based"
+            key-field="id"
+            data={data}
+            columns={columns}
+            render-mode="role-based"
+            render-config={renderConfig}>
+        </lightning-datatable>
+    </div>
+</template>

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

@@ -0,0 +1,27 @@
+import { LightningElement } from 'lwc';
+import generateData from './generateData';
+
+// Add <datatable-with-virtualization></datatable-with-virtualization> to the lwr-playground to see the table
+
+const columns = [
+    { label: 'Label', fieldName: 'name' },
+    { label: 'Website', fieldName: 'website', type: 'url' },
+    { label: 'Phone', fieldName: 'phone', type: 'phone' },
+    { label: 'Balance', fieldName: 'amount', type: 'currency' },
+    { label: 'CloseAt', fieldName: 'closeAt', type: 'date' },
+];
+
+export default class DatatableWithVirtualization extends LightningElement {
+    data = [];
+    columns = columns;
+    renderConfig = {
+        virtualize: 'vertical',
+        bufferSize: 10,
+        fixedHeight: true,
+    };
+
+    connectedCallback() {
+        const data = generateData({ amountOfRecords: 100 });
+        this.data = data;
+    }
+}

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

@@ -0,0 +1,14 @@
+export default function generateData({ amountOfRecords }) {
+    return [...Array(amountOfRecords)].map((_, index) => {
+        return {
+            id: index + 1,
+            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__/withoutTableHeader/withoutTableHeader.html

@@ -0,0 +1,10 @@
+<template>
+    <div style="height: 300px;">
+        <lightning-datatable
+            key-field="id"
+            data={data}
+            columns={columns}
+            hide-table-header>
+        </lightning-datatable>
+    </div>
+</template>

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

@@ -0,0 +1,22 @@
+import { LightningElement } from 'lwc';
+import generateData from './generateData';
+
+// Add <datatable-without-table-header></datatable-without-table-header> to the lwr-playground to see the table
+
+const columns = [
+    { label: 'Label', fieldName: 'name' },
+    { label: 'Website', fieldName: 'website', type: 'url' },
+    { label: 'Phone', fieldName: 'phone', type: 'phone' },
+    { label: 'Balance', fieldName: 'amount', type: 'currency' },
+    { label: 'CloseAt', fieldName: 'closeAt', type: 'date' },
+];
+
+export default class DatatableWithoutTableHeader extends LightningElement {
+    data = [];
+    columns = columns;
+
+    connectedCallback() {
+        const data = generateData({ amountOfRecords: 100 });
+        this.data = data;
+    }
+}

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

@@ -80,7 +80,9 @@ Clicking the remove button on the pill fires the `remove` event and then the `cl
 
 When an `href` value is present, clicking the text label navigates to a link, but clicking the icon or avatar doesn’t. To prevent your browser from navigating to a link when you click a pill's label, call `event.preventDefault()` in the `onclick` handler.
 
-To disable a pill's link, set `variant="plain"`, which removes the anchor element.
+When an `href` value is present, the default variant is `link`. If no `href` is present, the default variant is `plain`.
+
+To disable a pill's link, set `variant="plain"`, which removes the anchor element. The `plain` variant renders the pill without a link and ignores the `href` attribute.
 
 This example hides a pill when the remove button is clicked.
 
@@ -192,7 +194,9 @@ When using `lightning-avatar`, use the `alternative-text` attribute to describe
 
 When using `lightning-icon`, use the `alternative-text` attribute to describe the icon. For example, specify "Account" instead of "Pill icon". This description is used as assistive text on the pill.
 
-Press the Tab key to focus on a pill. To remove a pill, press the Delete or Backspace key on the pill when it receives focus. Alternatively, press the Enter key when you tab to the remove button. You can define your own behavior to remove the pill from view, such as using the `onremove` handler shown in **Interacting with Pills**. Press the Enter key to navigate to a link on a pill.
+Press the Tab key to move focus to a pill with a link, and tab again to move focus to the remove button. To remove a pill, press the Enter key or space bar when the focus is on the remove button. You can define your own behavior to remove the pill from view, such as using the `onremove` handler shown in **Interacting with Pills**. To navigate to the target of a link on a pill, press the Enter key when the focus is on the pill.
+
+If a pill doesn't have a link, the only focusable item is the remove button.
 
 #### Custom Events
 

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

@@ -16,7 +16,7 @@ To specify the pills, set the `items` attribute to an array of values in your co
 By default, all pills in the container are displayed and wrap to additional lines if they can't fit on one line.
 For information about changing the behavior, see **Managing Pill Layout in the Container**.
 
-This example creates three pills: a text-only pill, a pill with an avatar, and
+This example creates three pills: a text-only pill, a pill with a link and an avatar, and
 a pill with an icon.
 
 ```html
@@ -37,6 +37,7 @@ export default class PillContainerExample extends LightningElement {
         {
             type: 'avatar',
             label: 'Avatar Pill',
+            href: 'https://www.example.com',
             name: 'avatarpill',
             src: '/my/path/avatar.jpg',
             fallbackIconName: 'standard:user',
@@ -60,11 +61,15 @@ be used to create a pill with an avatar or icon.
 -   `label`: Required. The text label that displays in the pill.
 -   `name`: The name for the pill. This value is optional and can be used to identify the pill in a callback.
 
+To create a pill with a link, use the following attribute.
+
+-  `href`: Required. The URL for the link.
+
 To create a pill with an avatar, use the following attributes.
 
 -   `type`: The media type. Use `avatar`.
 -   `src`: Required. The URL of the avatar.
--   `fallbackIconName`: The Lightning Design System name of the icon used as a fallback when the image fails to load. The initials fallback relies on this icon for its background color. Names are written in the format 'standard:account' where 'standard' is the category, and 'account' is the specific icon to be displayed. Only icons from the standard and custom categories are allowed.
+-   `fallbackIconName`: The Lightning Design System name of the icon to use as a fallback when the image fails to load. Names are written in the format 'standard:account' where 'standard' is the category, and 'account' is the specific icon to be displayed. Only icons from the standard and custom categories are allowed.
 -   `variant`: Changes the shape of the avatar. Valid values are empty, circle, and square. This value defaults to square.
 -   `alternativeText`: The alternative text used to describe the avatar, which is displayed as hover text on the image.
 
@@ -74,7 +79,7 @@ To create a pill with an icon, use the following attributes.
 -   `iconName`: Required. The Lightning Design System name of the icon. Names are written in the format 'utility:down' where 'utility' is the category, and 'down' is the specific icon to be displayed. Only utility icons can be used for the `iconName`.
 -   `alternativeText`: The alternative text used to describe the icon. Describe what happens when you click the button, for example 'Upload File', not what the icon looks like, 'Paperclip'.
 
-`lightning-pill-container` provides two variants: `bare` and `standard` (default). They are visually the same. However, the `standard` variant renders pills in an unordered list element. For more information, see the **Accessibility** section.
+`lightning-pill-container` provides two variants: `bare` and `standard` (default). They’re visually the same. However, the `standard` variant renders pills in an unordered list element. For more information, see the **Accessibility** section.
 
 #### Removing Pills
 
@@ -133,7 +138,7 @@ set to false by default, which makes all pills display and wrap to multiple line
 
 - `is-collapsible`: Determines whether the list of pills can be expanded and collapsed. If `is-collapsible` is true, `is-expanded` can determine whether a pill list displays all the pills or one line of pills. If `is-collapsible` is false or not specified, the `is-expanded` attribute has no effect regardless of its value.
 - `is-expanded`: Determines whether the full list of pills is shown. Set `is-collapsible` to true if you want to set `is-expanded` to expand and collapse the list. If you set `is-expanded` to false and don't set `is-collapsible` to true, the list is expanded.
-- `single-line`: Specifies that the pill container can display one line of pills. By default, if pills can't fit on one line, they are wrapped to additional lines to fit the container. Set `single-line` to true to limit pill display to one line. This attribute overrides `is-collapsible` and `is-expanded`.
+- `single-line`: Specifies that the pill container can display one line of pills. By default, if pills can't fit on one line, they’re wrapped to additional lines to fit the container. Set `single-line` to true to limit pill display to one line. This attribute overrides `is-collapsible` and `is-expanded`.
 
 If all pills aren't displayed, the component shows a text button indicating how many more pills there are.
 For example, if there are five more pills that aren’t displayed, the text button shows `+5 more`. The text button fires the `focus` event when you click it.
@@ -255,13 +260,16 @@ To understand how we implemented SLDS in `lightning-pill-container`, see the **S
 
 #### Accessibility
 
-By default, `lightning-pill-container` renders pills using the `standard` variant, which uses an unordered list element to display pills. Press the Tab key to focus on the first pill and use the Left Arrow and Right Arrow keys to navigate through the pills. Tabbing and navigating with arrow keys puts focus only on the pill borders, not on the remove buttons. The `standard` variant renders `aria` and `role` attributes in the list elements.
+By default, `lightning-pill-container` renders pills using the `standard` variant, which uses an unordered list element to display pills. Press the Tab key to focus on the first pill and use the Left Arrow and Right Arrow keys to navigate through the pills. Use the Tab key to navigate to the remove button in a pill with a link. Use arrow keys to navigate between pills.
+The focus goes to a link if present, otherwise focus goes to the remove button.
+
+The `bare` variant only supports the Tab key for navigating between focusable elements in the container's pills. The arrow keys aren't supported.
 
-The `bare` variant provides a focusable remove button. Tab to focus on the pill and tab again to focus on the remove button. The `bare` variant doesn't render `aria` and `role` attributes.
+On mobile devices, both container variants display pills with the close button as a focusable element for accessibility.
 
-On mobile devices, both variants display the close button as a focusable element for accessibility.
+To remove a pill, press Enter or the space bar when the pill's remove button receives focus. On mobile devices, you can tap the remove button to remove a pill.
 
-To remove a pill, press the Delete or Backspace key when the pill receives focus. On mobile devices, you can tap the remove button to remove a pill.
+For pills with links, use the Tab key or arrow keys to focus on the pill's link, then press Enter to navigate to the link target. If you don't navigate away from the pill, tabbing again puts focus on the remove button.
 
 #### Custom Events