lightning-base-components 1.20.2-alpha → 1.21.1-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.1-alpha",
     "license": "MIT",
     "files": [
         "external",
@@ -454,6 +454,14 @@
                 "name": "@salesforce/label/LightningDualListbox.movedOptionsPlural",
                 "path": "scopedImports/@salesforce-label-LightningDualListbox.movedOptionsPlural.js"
             },
+            {
+                "name": "@salesforce/label/LightningDualListbox.verticallyMovedOptions",
+                "path": "scopedImports/@salesforce-label-LightningDualListbox.verticallyMovedOptions.js"
+            },
+            {
+                "name": "@salesforce/label/LightningDualListbox.moveToAssistiveText",
+                "path": "scopedImports/@salesforce-label-LightningDualListbox.moveToAssistiveText.js"
+            },
             {
                 "name": "@salesforce/label/LightningProgressIndicator.stageComplete",
                 "path": "scopedImports/@salesforce-label-LightningProgressIndicator.stageComplete.js"
@@ -1372,6 +1380,7 @@
             "lightning/accordion",
             "lightning/accordionSection",
             "lightning/alert",
+            "lightning/ariaObserver",
             "lightning/avatar",
             "lightning/badge",
             "lightning/barcodeScanner",

package/scopedImports/@salesforce-label-LightningCombobox.currentSelection.js

@@ -1 +1 @@
-export default 'Current Selection:';
+export default '{0} - Current selection: {1}';

package/scopedImports/@salesforce-label-LightningDualListbox.moveToAssistiveText.js

@@ -0,0 +1 @@
+export default 'Move to {0}';

package/scopedImports/@salesforce-label-LightningDualListbox.verticallyMovedOptions.js

@@ -0,0 +1 @@
+export default '{0} moved to position {1}';

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/baseCombobox/baseCombobox.js

@@ -3,10 +3,11 @@ import labelDeselectOptionKeyboard from '@salesforce/label/LightningCombobox.des
 import labelLoadingText from '@salesforce/label/LightningCombobox.loadingText';
 import labelPillCloseButtonAlternativeText from '@salesforce/label/LightningCombobox.pillCloseButtonAlternativeText';
 import labelPlaceholder from '@salesforce/label/LightningCombobox.placeholder';
+import labelCurrentSelection from '@salesforce/label/LightningCombobox.currentSelection';
 import { api, track, LightningElement } from 'lwc';
 import { handleKeyDownOnInput } from './keyboard';
 import { BaseComboboxEvents } from './baseComboboxEvents';
-import { classSet } from 'lightning/utils';
+import { classSet, formatLabel } from 'lightning/utils';
 import {
     assert,
     computeAriaInvalid,
@@ -580,7 +581,7 @@ export default class LightningBaseCombobox extends LightningElement {
             return value;
         }
 
-        return `${label} - Current selection: ${value}`;
+        return formatLabel(labelCurrentSelection, label, value);
     }
 
     handleListboxScroll(event) {

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)
+            ),
+        };
+    });
+}