lightning-base-components 1.14.6-alpha → 1.15.1-alpha

package/metadata/raptor.json

@@ -49,9 +49,7 @@
       }
     ]
   },
-  "analyticsDataServiceApi": {
-    "minVersion": "52.0"
-  },
+  "analyticsDataServiceApi": {},
   "analyticsSmartDataDiscoveryApi": {},
   "analyticsWaveApi": {
     "minVersion": "52.0"
@@ -490,6 +488,7 @@
     "minVersion": "52.0"
   },
   "cmsInternalDeliveryApi": {},
+  "cmsOrchestratorApi": {},
   "cmsTypeApi": {},
   "combobox": {
     "minVersion": "0.0",
@@ -859,6 +858,7 @@
       }
     ]
   },
+  "flowBuilderApi": {},
   "flowRuntimeApi": {},
   "flowSupport": {
     "minVersion": "0.0"
@@ -1351,6 +1351,7 @@
   },
   "iconUtils": {},
   "industriesCibApi": {},
+  "industriesClmApi": {},
   "industriesDecisionMatrixDesignerApi": {},
   "industriesEinsteinAIAcceleratorApi": {},
   "industriesExplainabilityApi": {},
@@ -3424,6 +3425,7 @@
   "unstable_analyticsDataServiceApi": {},
   "unstable_analyticsSmartDataDiscoveryApi": {},
   "unstable_analyticsWaveApi": {},
+  "unstable_analyticsWavePrivateApi": {},
   "unstable_cmsAuthoringApi": {},
   "unstable_cmsDeliveryApi": {},
   "unstable_cmsTypeApi": {},

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lightning-base-components",
-    "version": "1.14.6-alpha",
+    "version": "1.15.1-alpha",
     "engines": {
         "node": ">=14.16.0"
     },
@@ -309,6 +309,10 @@
                 "name": "@salesforce/label/LightningProgressBar.progress",
                 "path": "scopedImports/@salesforce-label-LightningProgressBar.progress.js"
             },
+            {
+                "name": "@salesforce/label/LightningProgressBar.progressBar",
+                "path": "scopedImports/@salesforce-label-LightningProgressBar.progressBar.js"
+            },
             {
                 "name": "@salesforce/label/LightningClickToDial.enabled",
                 "path": "scopedImports/@salesforce-label-LightningClickToDial.enabled.js"
@@ -1085,6 +1089,7 @@
         "expose": [
             "lightning/accordion",
             "lightning/accordionSection",
+            "lightning/alert",
             "lightning/avatar",
             "lightning/badge",
             "lightning/baseFormattedText",
@@ -1102,6 +1107,7 @@
             "lightning/checkboxGroup",
             "lightning/combobox",
             "lightning/configProvider",
+            "lightning/confirm",
             "lightning/context",
             "lightning/datatable",
             "lightning/datatableKeyboardMixins",
@@ -1158,6 +1164,7 @@
             "lightning/progressIndicator",
             "lightning/progressRing",
             "lightning/progressStep",
+            "lightning/prompt",
             "lightning/purifyLib",
             "lightning/radioGroup",
             "lightning/relativeDateTime",

package/scopedImports/@salesforce-internal-core.appVersion.js

@@ -1 +1 @@
-export default '236';
+export default '238';

package/scopedImports/@salesforce-label-LightningProgressBar.progressBar.js

@@ -0,0 +1 @@
+export default 'Progress Bar';

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

@@ -0,0 +1,101 @@
+The `lightning/alert` module lets you create an alert modal within your component. Use `LightningAlert` on your components to communicate a state that affects the entire system, not just a feature or page.
+
+`lightning/alert` is not supported on mobile devices.
+
+Use `LightningAlert.open()` instead of the native `window.alert()` for a more consistent user experience. They have similar functions, but `LightningAlert.open()` works in cross-origin iframes, where the `.alert()` method is no longer supported in Chrome and Safari. Unlike `window.alert()`, `LightningAlert.open()` doesn't halt execution on the page, it returns a Promise. Use `async`/`await` or `.then()` for any code you want to execute after the alert has closed.
+
+Import `LightningAlert` from the `lightning/alert` module in the component that will launch the alert modal, and call `LightningAlert.open()` with your desired attributes.
+
+This example creates an alert modal with an error message and **OK** button. The `.open()` function returns a promise that resolves when you click **OK**.
+
+```html
+<!-- c/myApp.html -->
+<template>
+    <lightning-button onclick="{handleAlertClick}" label="Open Alert Modal">
+    </lightning-button>
+</template>
+```
+
+```javascript
+import { LightningElement } from 'lwc';
+import LightningAlert from 'lightning/alert';
+
+export default class MyApp extends LightningElement {
+    async handleAlertClick() {
+        await LightningAlert.open({
+            message: 'this is the alert message',
+            theme: 'error', // a red theme intended for error states
+            label: 'Error!', // this is the header text
+        });
+        //Alert has been closed
+    }
+}
+```
+
+#### Component Styling
+
+This component uses the Salesforce Lightning Design System (SLDS) [`prompt` blueprint](https://www.lightningdesignsystem.com/components/prompt/#site-main-content).
+
+`LightningAlert` supports the following attributes:
+
+-   `message`: Message text that displays in the alert.
+-   `label`: Header text, also used as the `aria-label`. Default string is `Alert`.
+-   `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, `LightningAlert` uses the `default` theme.
+
+#### Testing Your Component's Alert
+
+Code using `LightningAlert` can be tested by mocking the `LightningAlert.open()` method.
+
+The example below uses a button to open an alert dialog with text that changes when the alert opens.
+
+```html
+<button data-button onclick="{handleClick}">Open Alert</button>
+<template if:true="{alertViewed}">
+    <div data-text>Content Viewed</div>
+</template>
+<template if:false="{alertViewed}">
+    <div data-text>Click to View Content</div>
+</template>
+```
+
+```javascript
+import LightningAlert from 'lightning/alert';
+jest.mock('lightning/alert');
+​
+test(() => {
+    // Create and appendChild(element)
+​
+    const buttonEle = element.shadowRoot.querySelector('[data-button]');
+    const textEle = element.shadowRoot.querySelector('[data-text]');
+​
+    // Mock .open()
+    // No value passed since LightningAlert doesn't have a return value
+    LightningAlert.open = jest.fn().mockResolvedValue();
+    // Initial value
+    expect(textEle.textContent).toBe('Click to View Content');
+    // Click modal open button
+    buttonEle.click();
+​
+    // Click handler render cycle
+    await Promise.resolve();
+    // Render cycle triggered by tracked value {result}
+    await Promise.resolve();
+​
+    // Verify alertViewed has updated in template
+    expect(textEle.textContent).toBe('Content Viewed');
+    // Open triggered once
+    expect(LightningAlert.open.mock.calls).toHaveLength(1);
+})
+```

package/src/lightning/alert/__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/alert/__examples__disabled/basic/basic.html

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

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

@@ -0,0 +1,14 @@
+import { LightningElement } from 'lwc';
+import LightningAlert from 'lightning/alert';
+
+export default class AlertBasic extends LightningElement {
+    handleAlertModal() {
+        LightningAlert.open({
+            message: 'this is the alert message',
+            //label defaults to "Alert"
+            variant: 'headerless',
+        }).then((result) => {
+            console.log('alert result', result);
+        });
+    }
+}

package/src/lightning/alert/alert.html

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

package/src/lightning/alert/alert.js

@@ -0,0 +1,78 @@
+import { api } from 'lwc';
+import LightningInteractiveDialogBase from 'lightning/interactiveDialogBase';
+import LightningOverlay from 'lightning/overlay';
+import { parent, instanceName, secure } from 'lightning/overlayUtils';
+import labelDefault from '@salesforce/label/LightningAlert.defaultLabel';
+
+/**
+ * Create an alert modal within your component that communicates
+ * a state that affects the entire system, not just a feature or page.
+ */
+
+export default class LightningAlert extends LightningOverlay {
+    static [instanceName] = 'lightning-alert';
+    static [parent] = LightningInteractiveDialogBase;
+
+    /**
+     * value to use for header text in "header" variant
+     * or aria-label in "headerless" variant
+     * @type {string}
+     * @default "Alert" (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: true,
+                showDescription: true,
+                role: 'alertdialog',
+            },
+        });
+        this.dispatchEvent(evt);
+    }
+}

package/src/lightning/alert/alert.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/button/__wdio__/utam/utam.html

@@ -0,0 +1,3 @@
+<template>
+    <lightning-button label="Click me" variant="brand"></lightning-button>
+</template>

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

@@ -0,0 +1,3 @@
+import { LightningElement } from 'lwc';
+
+export default class ButtonUtam extends LightningElement {}

package/src/lightning/button/__wdio__/utam/utam.spec.js

@@ -0,0 +1,20 @@
+const Button = require('pageobjects/button');
+
+describe('button utam test', () => {
+    let root;
+
+    beforeEach(async () => {
+        await browser.url('/button/utam');
+        root = await $('button-utam');
+        await root.waitForDisplayed();
+    });
+
+    it('should get the button name', async () => {
+        const button = await utam.load(Button, {
+            element: await root.shadow$('lightning-button'),
+        });
+
+        const label = await button.getButtonName();
+        expect(label).toBe('Click me');
+    });
+});

package/src/lightning/buttonMenu/buttonMenu.js

@@ -778,6 +778,18 @@ export default class LightningButtonMenu extends LightningElement {
     }
 
     handlePrivateBlur(event) {
+        // During navigation of menuitems, after the blur event, focus is set on a new menuitem and hence it should not trigger a blur on the menu itself which causes the menu to close.
+        // If navigation is by mouse, this is taken care of by the "handleMouseOverOnMenuItem" function which "cancels" the blur on the menu.
+        // If navigation is by touch in mobile, no equivalent handler is available for blur event hence we are using
+        // the detail.relatedTarget to know that the blur is from a menuitem and it should not cause blur on the menu itself.
+        if (event.detail.relatedTarget) {
+            const menuItem = this.findMenuItemFromEventTarget(
+                event.detail.relatedTarget
+            );
+            if (menuItem) {
+                this.cancelBlur();
+            }
+        }
         // The event may be synthetic from the menu items
         event.stopPropagation();
 

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

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

@@ -0,0 +1,17 @@
+<template>
+    <div style="height:160px">
+        <lightning-datatable
+            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>
+    
+    <lightning-button label="Enable Loading State" onclick={handleLoadingClick}></lightning-button>
+    <lightning-button label="Add More Rows" onclick={handleMoreRowsClick}></lightning-button>
+</template>