lightning-base-components 1.14.6-alpha → 1.15.2-alpha

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

@@ -300,7 +300,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() {

package/src/lightning/confirm/__docs__/confirm.md

@@ -0,0 +1,98 @@
+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.
+
+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.
+
+This example creates a headerless confirm modal with two buttons, **OK** and **Cancel**. The `.open()` function returns a promise that resolves to true when you click **OK** and false when you  click **Cancel**.
+
+```html
+<!-- c/myApp.html -->
+<template>
+    <lightning-button onclick="{handleConfirmClick}" label="Open Confirm Modal">
+    </lightning-button>
+</template>
+```
+
+```javascript
+import { LightningElement } from 'lwc';
+import LightningConfirm from 'lightning/confirm';
+
+export default class MyApp extends LightningElement {
+    async handleConfirmClick() {
+        const result = await LightningConfirm.open({
+            message: 'this is the prompt message',
+            variant: 'headerless',
+            label: 'this is the aria-label value',
+            // setting theme would have no effect
+        });
+        //Confirm has been closed
+        //result is true if OK was clicked
+        //and false if cancel was clicked
+    }
+}
+```
+
+#### Component Styling
+
+This component uses the Salesforce Lightning Design System (SLDS) [`prompt` blueprint](https://www.lightningdesignsystem.com/components/prompt/#site-main-content).
+
+`LightningConfirm` supports the following attributes:
+
+-   `message`: Message text that displays in the confirm.
+-   `label`: Header text, also used as the `aria-label`. Default string is `Confirm`.
+-   `variant`: Two values, `header` and `headerless`. Default value is `header`.
+-   `theme`: Color theme for the header. The `theme` attribute supports the following [options](https://www.lightningdesignsystem.com/utilities/themes/#site-main-content) from SLDS:
+    -   `default`: white
+    -   `shade`: gray
+    -   `inverse`: dark blue
+    -   `alt-inverse`: darker blue
+    -   `success`: green
+    -   `info`: gray-ish blue
+    -   `warning`: yellow
+    -   `error`: red
+    -   `offline`: ​black​
+
+If an invalid value is provided, `LightningConfirm` uses the `default` theme.
+
+#### Testing Your Component's Confirm
+
+Code using `LightningConfirm` can be tested by mocking the `LightningConfirm.open()` method.
+
+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>
+<div data-result>{result}</div>
+```
+
+```js
+import LightningConfirm from 'lightning/confirm';
+jest.mock('lightning/confirm');
+​
+test(() => {
+    // Create and appendChild(element)
+​
+    const buttonEle = element.shadowRoot.querySelector('[data-button]');
+    const resultEle = element.shadowRoot.querySelector('[data-result]');
+​
+    // Mock .open()
+    // Pass true if testing when user clicks "OK"
+    // Pass false if testing when user clicks "Cancel"
+    LightningConfirm.open = jest.fn().mockResolvedValue(true);
+    // Initial value
+    expect(resultEle.textContent).toBe('unknown');
+    // Click modal open button
+    buttonEle.click();
+​
+    // Click handler render cycle
+    await Promise.resolve();
+    // Render cycle triggered by tracked value {result}
+    await Promise.resolve();
+​
+    // Verify result is set in the template
+    expect(resultEle.textContent).toBe('true');
+    // Open triggered once
+    expect(LightningConfirm.open.mock.calls).toHaveLength(1);
+})
+```

package/src/lightning/confirm/__examples__disabled/basic/basic.css

@@ -0,0 +1,7 @@
+.example {
+    margin: 0.5rem;
+    border-radius: 0.5rem;
+    background: #FFF;
+    box-shadow: 0 1px 0.25rem rgba(0, 0, 0, 0.2);
+    padding: 1rem;
+}

package/src/lightning/confirm/__examples__disabled/basic/basic.html

@@ -0,0 +1,8 @@
+<template>
+    <div class="example">
+        <button
+            aria-haspopup="modal"
+            onclick={handleConfirmModal}
+        >Open the Confirm Modal</button>
+    </div>
+</template>

package/src/lightning/confirm/__examples__disabled/basic/basic.js

@@ -0,0 +1,14 @@
+import { LightningElement } from 'lwc';
+import LightningConfirm from 'lightning/confirm';
+
+export default class ConfirmBasic extends LightningElement {
+    handleConfirmModal() {
+        LightningConfirm.open({
+            message: 'this is the confirm message',
+            label: 'Please Confirm',
+            theme: 'warning',
+        }).then((result) => {
+            console.log('confirm result', result);
+        });
+    }
+}

package/src/lightning/confirm/confirm.html

@@ -0,0 +1,3 @@
+<template>
+    <p>{message}</p>
+</template>

package/src/lightning/confirm/confirm.js

@@ -0,0 +1,80 @@
+import { api } from 'lwc';
+import LightningInteractiveDialogBase from 'lightning/interactiveDialogBase';
+import { parent, instanceName, secure } from 'lightning/overlayUtils';
+import LightningOverlay from 'lightning/overlay';
+import labelDefault from '@salesforce/label/LightningConfirm.defaultLabel';
+
+/**
+ * Create a confirm modal within your component that asks the user
+ * to respond before they continue.
+ */
+
+export default class LightningConfirm extends LightningOverlay {
+    static [instanceName] = 'lightning-confirm';
+    static [parent] = LightningInteractiveDialogBase;
+
+    /**
+     * value to use for header text in "header" variant
+     * or aria-label in "headerless" variant
+     * @type {string}
+     * @default "Confirm" (translated accordingly)
+     */
+    @api label = labelDefault;
+
+    /**
+     * text to display in body of modal
+     */
+    @api message = '';
+
+    /**
+     * variant to use for alert; may be
+     * set to "header" or "headerless"
+     */
+    @api variant = 'header';
+
+    /**
+     * theme to use when variant is "header"
+     * valid values are based on SLDS themes and are
+     * listed in "themeOptions" of interactiveDialogBase.js
+     */
+    @api theme = 'default';
+
+    /**
+     * Dispatches privateclose event
+     * and closes dialog
+     */
+    close(result) {
+        const promise = new Promise((resolve) => {
+            this.dispatchEvent(
+                new CustomEvent('privateclose', {
+                    detail: {
+                        resolve,
+                        [secure]: true,
+                    },
+                    bubbles: true,
+                })
+            );
+        });
+        super.close(result, promise);
+    }
+
+    /**
+     * Dispatches privatechildrender event
+     * with data parent needs to correctly render
+     */
+    renderedCallback() {
+        const evt = new CustomEvent('privatechildrender', {
+            bubbles: true,
+            detail: {
+                message: this.message,
+                label: this.label,
+                hideCancel: false,
+                showDescription: true,
+                getOkValue: () => true,
+                getCancelValue: () => false,
+                role: 'alertdialog',
+            },
+        });
+        this.dispatchEvent(evt);
+    }
+}

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

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

package/src/lightning/datatable/__docs__/datatable.md

@@ -30,6 +30,7 @@ include:
 
 -   Displaying and formatting of columns with appropriate data types
 -   Infinite scrolling of rows
+-   Virtualized rendering
 -   Inline editing for some data types
 -   Header actions
 -   Row-level actions
@@ -606,6 +607,50 @@ the `totalNumberOfRows` attribute during initialization.
     SELECT COUNT(Id) FROM Contact
 ```
 
+#### Virtualize Rendering
+
+A virtualized datatable only renders the rows that are visible and a buffer of a few rows above and below them. This makes scrolling a lot smoother for datatables with more than 200 rows. This example shows how to enable virtualization for a datatable. 
+
+In the JavaScript file of your component, create a `renderConfig` object with the attribute `virtualize` set to `vertical`.
+
+```
+import { LightningElement } from 'lwc';
+
+export default class DataTable extends LightningElement {
+    // set data
+    // set columns
+    renderConfig = {
+        virtualize: 'vertical',
+        // additional customization
+    };
+}
+```
+
+In your `lightning-datatable` component file, set the `render-config` attribute to the `renderConfig` object you created. Set the component’s `render-mode` attribute to `role-based` and set the `lightning-datatable` component’s parent container to an explicit height. This can be a pixel value, a percentage, or an inherited height.
+
+```
+<template>
+    <div style="height: 300px;">
+        <lightning-datatable
+            key-field="id"
+            data={data}
+            columns={columns}
+            render-mode="role-based"
+            render-config={renderConfig}>
+        </lightning-datatable>
+    </div>
+</template>
+```
+
+The `render-config` attribute supports these properties. 
+Property|Type|Default Value|Description
+-----|-----|-----|-----
+`bufferSize`|Number|`5`|Sets the number of additional rows that the component renders before and after the rows displayed in the viewport.
+`fixedHeight`|Boolean|`false`|Makes every row the same height to reduce the load time that's spent caching the height of each row separately. If column wrapping is also enabled, rows can be positioned improperly.
+`rowHeight`|Number|`30.5`|Height in pixels of a table row with one line of text.
+`virtualize`|String|Empty string|Enables virtualization when set to `vertical`.
+
+
 #### Creating Header Actions
 
 Header actions refer to tasks you can perform on a column of data, such

package/src/lightning/datatable/__wdio__/utam/utam.html

@@ -0,0 +1,32 @@
+<template>
+    <div style="height:160px">
+        <lightning-datatable
+            data-render-mode="default"
+            key-field="id"
+            columns={columns}
+            data={data}
+            default-sort-direction={defaultSortDirection}
+            sorted-direction={sortDirection}
+            sorted-by={sortedBy}
+            onsort={onHandleSort}
+            is-loading={loading}>
+        </lightning-datatable>
+    </div>
+    <div style="height:160px">
+        <lightning-datatable
+            data-render-mode="role-based"
+            key-field="id"
+            columns={columns}
+            data={data}
+            default-sort-direction={defaultSortDirection}
+            sorted-direction={sortDirection}
+            sorted-by={sortedBy}
+            onsort={onHandleSort}
+            is-loading={loading}
+            render-mode="role-based">
+        </lightning-datatable>
+    </div>
+    
+    <lightning-button label="Enable Loading State" onclick={handleLoadingClick}></lightning-button>
+    <lightning-button label="Add More Rows" onclick={handleMoreRowsClick}></lightning-button>
+</template>

package/src/lightning/datatable/__wdio__/utam/utam.js

@@ -0,0 +1,91 @@
+import { LightningElement } from 'lwc';
+
+const data = [
+    { id: 1, name: 'Billy Simmons', age: 40, email: 'billy@salesforce.com' },
+    { id: 2, name: 'Kelsey Denesik', age: 35, email: 'kelsey@salesforce.com' },
+    { id: 3, name: 'Kyle Ruecker', age: 50, email: 'kyle@salesforce.com' },
+    {
+        id: 4,
+        name: 'Krystina Kerluke',
+        age: 37,
+        email: 'krystina@salesforce.com',
+    },
+];
+
+const actions = [
+    { label: 'Show details', name: 'show_details' },
+    { label: 'Delete', name: 'delete' },
+];
+
+const columns = [
+    { label: 'Name', fieldName: 'name' },
+    {
+        label: 'Age',
+        fieldName: 'age',
+        type: 'number',
+        sortable: true,
+        cellAttributes: { alignment: 'left' },
+    },
+    {
+        label: 'Email',
+        fieldName: 'email',
+        type: 'email',
+        hideDefaultActions: true,
+    },
+    {
+        type: 'action',
+        typeAttributes: { rowActions: actions, menuAlignment: 'right' },
+    },
+];
+
+export default class DemoApp extends LightningElement {
+    data = data;
+    columns = columns;
+    defaultSortDirection = 'asc';
+    sortDirection = 'asc';
+    sortedBy;
+    loading = false;
+
+    // Used to sort the 'Age' column
+    sortBy(field, reverse, primer) {
+        const key = primer
+            ? function (x) {
+                  return primer(x[field]);
+              }
+            : function (x) {
+                  return x[field];
+              };
+
+        return function (a, b) {
+            a = key(a);
+            b = key(b);
+            return reverse * ((a > b) - (b > a));
+        };
+    }
+
+    onHandleSort(event) {
+        const { fieldName: sortedBy, sortDirection } = event.detail;
+        const cloneData = [...this.data];
+
+        cloneData.sort(this.sortBy(sortedBy, sortDirection === 'asc' ? 1 : -1));
+        this.data = cloneData;
+        this.sortDirection = sortDirection;
+        this.sortedBy = sortedBy;
+    }
+
+    handleLoadingClick() {
+        this.loading = !this.loading;
+    }
+
+    handleMoreRowsClick() {
+        const control = [
+            {
+                id: 20,
+                name: 'Jacqueline Palmer',
+                age: 60,
+                email: 'jacqueline@salesforce.com',
+            },
+        ];
+        this.data = this.data.concat(this.data).concat(control);
+    }
+}