lightning-base-components 1.16.3-alpha → 1.16.4-alpha

package/src/lightning/timepicker/timepicker.js

@@ -285,11 +285,10 @@ export default class LightningTimePicker extends LightningElement {
             );
         }
 
-        const errorMessage = this.template.querySelector(
-            '[data-error-message]'
-        );
-
-        if (errorMessage) {
+        if (this._errorMessage) {
+            const errorMessage = this.template.querySelector(
+                '[data-error-message]'
+            );
             describedByElements.push(errorMessage);
         }
 
@@ -319,6 +318,11 @@ export default class LightningTimePicker extends LightningElement {
         return this.variant === VARIANT.LABEL_HIDDEN;
     }
 
+    get computedClass() {
+        let displayClass = this._errorMessage ? 'slds-show' : 'slds-hide';
+        return 'slds-form-element__help ' + displayClass;
+    }
+
     get computedLabelClass() {
         return classSet('slds-form-element__label')
             .add({ 'slds-assistive-text': this.isLabelHidden })

package/src/lightning/treeGrid/treeGrid.js

@@ -1,6 +1,12 @@
 import { LightningElement, api, track } from 'lwc';
 import { normalizeColumns, normalizeData } from './normalizer';
 import { arraysEqual } from 'lightning/utilsPrivate';
+const ROWS_ACTION = {
+    SELECT_ALL_ROWS: 'selectAllRows',
+    DESELECT_ALL_ROWS: 'deselectAllRows',
+    ROW_SELECT: 'rowSelect',
+    ROW_DESELECT: 'rowDeselect',
+};
 
 /**
  * Displays a hierarchical view of data in a table.
@@ -28,6 +34,8 @@ export default class LightningTreeGrid extends LightningElement {
      */
     @api isLoading = false;
 
+    _selectedRowKeys = [];
+
     /**
      * Required for better performance. Associates each row with a unique ID.
      * @type {string}
@@ -74,7 +82,7 @@ export default class LightningTreeGrid extends LightningElement {
      * The array of unique row IDs that are selected.
      * @type {array}
      */
-    @api selectedRows = [];
+    //@api selectedRows = [];
 
     /**
      * If present, the row number column are shown in the first column.
@@ -86,6 +94,7 @@ export default class LightningTreeGrid extends LightningElement {
     @track _columns;
     @track _data;
     @track _expandedRows = [];
+    @track _selectedRows = [];
 
     constructor() {
         super();
@@ -99,6 +108,10 @@ export default class LightningTreeGrid extends LightningElement {
         ); // event received by the tree column header
     }
 
+    connectedCallback() {
+        this._selectedRowKeys = this.selectedRows.slice();
+    }
+
     set columns(value) {
         this._rawColumns = value;
         this._columns = normalizeColumns(value);
@@ -159,6 +172,15 @@ export default class LightningTreeGrid extends LightningElement {
         return this._data;
     }
 
+    getSelectedRowKeys(rowKeys) {
+        let selRowKeys = [];
+        rowKeys.forEach((row) => {
+            // eslint-disable-next-line no-unused-expressions
+            selRowKeys.push(row.name);
+        });
+        return selRowKeys;
+    }
+
     // Methods
 
     /**
@@ -187,6 +209,7 @@ export default class LightningTreeGrid extends LightningElement {
     @api
     expandAll() {
         this.toggleAllRows(this.data, true);
+        this._selectedRows = this._selectedRowKeys.slice();
     }
 
     /**
@@ -195,6 +218,7 @@ export default class LightningTreeGrid extends LightningElement {
     @api
     collapseAll() {
         this.toggleAllRows(this.data, false);
+        this._selectedRows = this._selectedRowKeys.slice();
     }
 
     /**
@@ -210,6 +234,13 @@ export default class LightningTreeGrid extends LightningElement {
         this._ariaLabel = value;
     }
 
+    handleRowDeSelection(event) {
+        event.stopPropagation();
+        const { rowKeyValue } = event.detail;
+        let index = this._selectedRowKeys.indexOf(rowKeyValue);
+        this._selectedRowKeys.splice(index, 1);
+    }
+
     // Event handlers
 
     handleToggle(event) {
@@ -217,6 +248,15 @@ export default class LightningTreeGrid extends LightningElement {
         const { name, nextState } = event.detail;
         // toggle row in user provided data
         this.toggleRow(this.data, name, nextState);
+        this._selectedRows = this._selectedRowKeys.slice();
+    }
+    @api
+    set selectedRows(value) {
+        this._selectedRowKeys = this._selectedRows = value;
+    }
+
+    get selectedRows() {
+        return this._selectedRows;
     }
 
     handleToggleAll(event) {
@@ -224,11 +264,36 @@ export default class LightningTreeGrid extends LightningElement {
         const { nextState } = event.detail;
         // toggle all rows in user provided data
         this.toggleAllRows(this.data, nextState);
+        this._selectedRows = this._selectedRowKeys.slice();
     }
 
     handleRowSelection(event) {
         event.stopPropagation();
         // pass the event through
+        switch (event.detail.config.selection) {
+            case ROWS_ACTION.ROW_SELECT:
+                this._selectedRowKeys.push(event.detail.config.value);
+                break;
+            case ROWS_ACTION.ROW_DESELECT: {
+                const index = this._selectedRowKeys.indexOf(
+                    event.detail.config.value
+                );
+                this._selectedRowKeys.splice(index, 1);
+
+                break;
+            }
+            case ROWS_ACTION.SELECT_ALL_ROWS:
+            case ROWS_ACTION.DESELECT_ALL_ROWS:
+                this._selectedRowKeys = this.getSelectedRowKeys(
+                    event.detail.selectedRows
+                );
+                break;
+            default:
+                this._selectedRowKeys.push(event.detail.config.value);
+                break;
+        }
+        delete event.detail.config; // to prevent further propagation of the config
+
         this.fireSelectedRowsChange(event.detail);
     }
 

package/src/lightning/formattedAddress/__component__/formattedAddress.spec.js

@@ -1,61 +0,0 @@
-/* eslint-disable @lwc/lwc/no-async-await */
-/* eslint-disable @lwc/lwc/no-document-query */
-/* eslint-disable @lwc/lwc/no-async-operation */
-/* eslint-disable @lwc/lwc/no-rest-parameter */
-/* eslint-disable no-await-in-loop */
-import { createElement } from 'lwc';
-import Basic from 'x/basic';
-
-function createHtml(props = {}) {
-    const element = createElement('x-basic', { is: Basic });
-    Object.assign(element, props);
-    document.body.appendChild(element);
-    return element;
-}
-
-function wait(ms) {
-    return new Promise((resolve) => {
-        setTimeout(resolve, ms);
-    });
-}
-
-async function waitFor(callback) {
-    let msToWait = [50, 100, 150, 200, 250, 500, 1000];
-    let waiting = true;
-    while (waiting) {
-        let [msToWaitNow, ...msToWaitNext] = msToWait;
-        msToWait = msToWaitNext;
-        if (msToWaitNow !== undefined) {
-            await wait(msToWaitNow);
-            if (callback()) {
-                return true;
-            }
-        }
-    }
-    return false;
-}
-
-describe('lightning-formatted-address', () => {
-    it('should render the address with map', async () => {
-        const element = createHtml();
-
-        const formattedAddress = element.shadowRoot.querySelector(
-            'lightning-formatted-address'
-        );
-
-        const staticMap = formattedAddress.shadowRoot.querySelector(
-            'lightning-static-map'
-        );
-
-        const updated = await waitFor(() => {
-            const iframe = staticMap.shadowRoot
-                .querySelector('lightning-primitive-iframe')
-                .shadowRoot.querySelector('iframe');
-
-            const value = iframe.style.display;
-
-            return value === 'inherit';
-        });
-        expect(updated).toBeTruthy();
-    });
-});

package/src/lightning/formattedAddress/__component__/formattedAddressDisabled.spec.js

@@ -1,20 +0,0 @@
-import { createElement } from 'lwc';
-
-import Element from 'lightning/formattedAddress';
-
-function createHtml(props = {}) {
-    const element = createElement('x-basic', { is: Element });
-    Object.assign(element, props);
-    document.body.appendChild(element);
-    return element;
-}
-
-describe('lightning-formatted-address', () => {
-    it('should disable component', () => {
-        const element = createHtml({
-            disabled: true,
-        });
-
-        expect(element.disabled).toBeTruthy();
-    });
-});

package/src/lightning/formattedAddress/__component__/x/basic/basic.html

@@ -1,10 +0,0 @@
-<template>
-    <lightning-formatted-address
-        street="121 Spear St."
-        city="San Francisco"
-        country="US"
-        province="CA"
-        postal-code="94105"
-        show-static-map
-    ></lightning-formatted-address>
-</template>

package/src/lightning/formattedAddress/__component__/x/basic/basic.js

@@ -1,17 +0,0 @@
-import { LightningElement, track } from 'lwc';
-
-export default class Basic extends LightningElement {
-    @track label = 'Click here!';
-
-    handleClick() {
-        this.label = 'Clicked!';
-    }
-
-    handleFocus() {
-        this.label = 'Focused!';
-    }
-
-    handleBlur() {
-        this.label = 'Blurred!';
-    }
-}

package/src/lightning/input/__component__/inputCheckbox.spec.js

@@ -1,60 +0,0 @@
-import { createElement } from 'lwc';
-import Element from 'lightning/input';
-
-const defaultParams = {
-    name: 'input',
-    label: 'input',
-};
-
-const createInput = (params = {}) => {
-    const element = createElement('lightning-input', { is: Element });
-    Object.assign(element, defaultParams, params);
-    document.body.appendChild(element);
-    // set up some required attributes
-    return element;
-};
-
-describe('lightning-input type=checkbox', () => {
-    const type = 'checkbox';
-
-    it('should be valid when set from false to true', () => {
-        const element = createInput({
-            type,
-            checked: true,
-            required: true,
-        });
-
-        return Promise.resolve()
-            .then(() => {
-                expect(element.validity.valid).toBe(true);
-                element.checked = false;
-            })
-            .then(() => {
-                expect(element.validity.valid).toBe(false);
-                element.checked = true;
-            })
-            .then(() => {
-                expect(element.validity.valid).toBe(true);
-            });
-    });
-
-    it('should not allow selectionStart or selectionEnd to be set', () => {
-        const element = createInput({
-            type,
-            checked: true,
-            required: true,
-        });
-
-        element.focus();
-
-        return Promise.resolve().then(() => {
-            expect(() => {
-                element.selectionEnd = 7;
-            }).toThrow();
-
-            expect(() => {
-                element.selectionStart = 7;
-            }).toThrow();
-        });
-    });
-});

package/src/lightning/input/__component__/inputDateTimePicker.spec.js

@@ -1,60 +0,0 @@
-import { createElement } from 'lwc';
-import Element from 'lightning/input';
-
-const defaultParams = {
-    name: 'input',
-    label: 'input',
-};
-
-const createInput = (params = {}) => {
-    const element = createElement('lightning-input', { is: Element });
-    Object.assign(element, defaultParams, params);
-    document.body.appendChild(element);
-    // set up some required attributes
-    return element;
-};
-
-describe('lightning-input type=date', () => {
-    it('should have autocomplete set to off', () => {
-        const element = createInput({
-            type: 'date',
-        });
-
-        return Promise.resolve().then(() => {
-            const picker = element.shadowRoot.querySelector(
-                'lightning-datepicker'
-            );
-            expect(picker.autocomplete).toBe('off');
-        });
-    });
-});
-
-describe('lightning-input type=time', () => {
-    it('should have autocomplete set to off', () => {
-        const element = createInput({
-            type: 'time',
-        });
-
-        return Promise.resolve().then(() => {
-            const picker = element.shadowRoot.querySelector(
-                'lightning-timepicker'
-            );
-            expect(picker.autocomplete).toBe('off');
-        });
-    });
-});
-
-describe('lightning-input type=datetime', () => {
-    it('should have autocomplete set to off', () => {
-        const element = createInput({
-            type: 'datetime',
-        });
-
-        return Promise.resolve().then(() => {
-            const picker = element.shadowRoot.querySelector(
-                'lightning-datetimepicker'
-            );
-            expect(picker.autocomplete).toBe('off');
-        });
-    });
-});

package/src/lightning/input/__component__/inputNumber.spec.js

@@ -1,75 +0,0 @@
-import { createElement } from 'lwc';
-import Tall from 'x/tall';
-import { animationFrame } from 'lightning/utilsPrivate';
-
-const createTallPageWithInput = (params = {}) => {
-    const element = createElement('x-tall', { is: Tall });
-    Object.assign(element, params);
-    return element;
-};
-
-describe('lightning-input type=number', () => {
-    describe('focus', () => {
-        let element;
-        beforeEach(() => {
-            element = createTallPageWithInput();
-            document.body.appendChild(element);
-        });
-
-        afterEach(() => {
-            document.body.removeChild(element);
-        });
-
-        it('should scroll into view when focused', async () => {
-            const root = document.querySelector('x-tall').shadowRoot;
-
-            // Measure where the elements are on the page so we can tell later if they're on-screen.
-            let inputY =
-                window.pageYOffset +
-                root.querySelector('lightning-input').getBoundingClientRect().y;
-            let buttonY =
-                window.pageYOffset +
-                root.querySelector('button').getBoundingClientRect().y;
-
-            // 1. Focus the button at the bottom
-            root.querySelector('button').scrollIntoView();
-            root.querySelector('button').focus();
-
-            expect(document.activeElement.tagName.toLowerCase()).toBe(
-                'x-tall',
-                'the focused component should be x-tall'
-            );
-            expect(root.activeElement.tagName.toLowerCase()).toBe(
-                'button',
-                'the focused element in x-tall should be the button'
-            );
-
-            const isButtonOnScreen =
-                buttonY >= window.pageYOffset &&
-                buttonY <= window.pageYOffset + window.innerHeight;
-            expect(isButtonOnScreen).toBe(
-                true,
-                'Page did not scroll when the button was focused.'
-            );
-
-            // 2. Click the button to send focus to the input
-            root.querySelector('button').click();
-
-            // Click has async text selection, so we wait a moment for the browser to actually move focus.
-            await animationFrame();
-
-            expect(root.activeElement.tagName.toLowerCase()).toBe(
-                'lightning-input',
-                'active element was not lightning-input'
-            );
-
-            const isInputOnScreen =
-                inputY >= window.pageYOffset &&
-                inputY <= window.pageYOffset + window.innerHeight;
-            expect(isInputOnScreen).toBe(
-                true,
-                'Page did not scroll to input when focus was sent there.'
-            );
-        });
-    });
-});

package/src/lightning/input/__component__/inputSelection.spec.js

@@ -1,83 +0,0 @@
-import { createElement } from 'lwc';
-import Element from 'lightning/input';
-
-const defaultParams = {
-    name: 'input',
-    label: 'input',
-};
-
-const ERROR_INPUT_TYPES = ['range', 'file', 'checkbox'];
-
-const VALID_INPUT_TYPES_W_VALUE = [
-    // the W3 standards
-    ['text', 'default string of joy'],
-    ['search', 'beavis inc'],
-    ['tel', 345987345],
-    ['url', 'http://www.beavis.com'],
-    ['password', 'beavis9000'],
-
-    // some of the components that work bc our component is an enhancement above w3!
-    ['email', 'acdc@beavis.com'],
-];
-
-const createInput = (params = {}) => {
-    const element = createElement('lightning-input', { is: Element });
-    Object.assign(element, defaultParams, params);
-    document.body.appendChild(element);
-    return element;
-};
-
-describe('lightning-input', () => {
-    describe('selectionStart and selectionEnd', () => {
-        let element = null;
-        afterEach(() => {
-            document.body.removeChild(element);
-        });
-
-        ERROR_INPUT_TYPES.forEach((type) => {
-            it(`should not allow selectionStart or selectionEnd to be set when type is ${type}`, () => {
-                element = createInput({
-                    type,
-                });
-
-                element.focus();
-                return Promise.resolve().then(() => {
-                    expect(() => {
-                        element.selectionStart = 3;
-                    }).toThrow();
-
-                    expect(() => {
-                        element.selectionEnd = 7;
-                    }).toThrow();
-
-                    expect(element.selectionStart).toBe(null);
-                    expect(element.selectionEnd).toBe(null);
-                });
-            });
-        });
-
-        VALID_INPUT_TYPES_W_VALUE.forEach(([type, value]) => {
-            it(`should be valid when set after focus when type is ${type} w/ ${value}`, () => {
-                element = createInput({
-                    type,
-                    value,
-                    required: true,
-                });
-
-                element.focus();
-                element.selectionStart = 3;
-                element.selectionEnd = 7;
-
-                const inputElement = element.shadowRoot.querySelector('input');
-
-                return Promise.resolve().then(() => {
-                    expect(inputElement.selectionStart).toBe(3);
-                    expect(inputElement.selectionEnd).toBe(7);
-
-                    expect(element.selectionStart).toBe(3);
-                    expect(element.selectionEnd).toBe(7);
-                });
-            });
-        });
-    });
-});

package/src/lightning/input/__component__/x/tall/tall.css

@@ -1,5 +0,0 @@
-.spacer {
-    height:9000px;
-    background-color:black;
-    width:2px;
-}

package/src/lightning/input/__component__/x/tall/tall.html

@@ -1,5 +0,0 @@
-<template>
-    <lightning-input type="number" name="number1" label="type number" value="123"></lightning-input>
-    <div class="spacer"></div>
-    <button onclick={sendFocusToTop}>Send Focus To Top</button>
-</template>

package/src/lightning/input/__component__/x/tall/tall.js

@@ -1,7 +0,0 @@
-import { LightningElement } from 'lwc';
-
-export default class Tall extends LightningElement {
-    sendFocusToTop() {
-        this.template.querySelector('lightning-input').focus();
-    }
-}