lightning-base-components 1.14.3-alpha → 1.14.7-alpha

package/metadata/raptor.json

@@ -49,9 +49,8 @@
       }
     ]
   },
-  "analyticsDataServiceApi": {
-    "minVersion": "52.0"
-  },
+  "analyticsDataServiceApi": {},
+  "analyticsSmartDataDiscoveryApi": {},
   "analyticsWaveApi": {
     "minVersion": "52.0"
   },
@@ -489,6 +488,7 @@
     "minVersion": "52.0"
   },
   "cmsInternalDeliveryApi": {},
+  "cmsOrchestratorApi": {},
   "cmsTypeApi": {},
   "combobox": {
     "minVersion": "0.0",
@@ -858,6 +858,7 @@
       }
     ]
   },
+  "flowBuilderApi": {},
   "flowRuntimeApi": {},
   "flowSupport": {
     "minVersion": "0.0"
@@ -1350,17 +1351,23 @@
   },
   "iconUtils": {},
   "industriesCibApi": {},
+  "industriesClmApi": {},
   "industriesDecisionMatrixDesignerApi": {},
+  "industriesEinsteinAIAcceleratorApi": {},
   "industriesExplainabilityApi": {},
   "industriesHealthcloudHpiApi": {},
   "industriesIdentityVerificationApi": {},
   "industriesInterestTaggingApi": {},
   "industriesLoyaltyEngineApi": {},
+  "industriesPublicSectorApi": {},
   "industriesRcgTenantmanagementApi": {},
   "industriesRuleBuilderApi": {},
+  "industriesSustainabilityBeiApi": {},
+  "industriesSustainabilityDgfApi": {},
   "industriesSustainabilityRecalculateApi": {},
   "industriesSustainabilityRecordLockUnlockApi": {},
   "industriesSustainabilityReferenceDataApi": {},
+  "industriesTimelineApi": {},
   "industriesVideoVisitsApi": {},
   "input": {
     "minVersion": "0.0",
@@ -2212,6 +2219,7 @@
       }
     ]
   },
+  "marketingAssetcreationApi": {},
   "menuDivider": {
     "minVersion": "0.0",
     "slotNames": [],
@@ -3395,6 +3403,7 @@
   "uiAssistantPlatformApi": {},
   "uiDuplicatesApi": {},
   "uiLayoutApi": {},
+  "uiLearningContentPlatformApi": {},
   "uiListApi": {
     "minVersion": "45.0"
   },
@@ -3407,12 +3416,36 @@
   },
   "uiRecordActionsApi": {},
   "uiRecordApi": {
-    "minVersion": "45.0"
+    "minVersion": "46.0"
   },
   "uiRecordAvatarApi": {},
   "uiRelatedListApi": {
     "minVersion": "53.0"
   },
+  "unstable_analyticsDataServiceApi": {},
+  "unstable_analyticsSmartDataDiscoveryApi": {},
+  "unstable_analyticsWaveApi": {},
+  "unstable_analyticsWavePrivateApi": {},
+  "unstable_cmsAuthoringApi": {},
+  "unstable_cmsDeliveryApi": {},
+  "unstable_cmsTypeApi": {},
+  "unstable_commerceApi": {},
+  "unstable_communityNavigationMenuApi": {},
+  "unstable_communityRecordSeoPropertiesApi": {},
+  "unstable_communitySitesSearchApi": {},
+  "unstable_experienceMarketingIntegrationApi": {},
+  "unstable_industriesCibApi": {},
+  "unstable_industriesDecisionMatrixDesignerApi": {},
+  "unstable_industriesExplainabilityApi": {},
+  "unstable_industriesHealthcloudHpiApi": {},
+  "unstable_industriesInterestTaggingApi": {},
+  "unstable_industriesLoyaltyEngineApi": {},
+  "unstable_industriesPublicSectorApi": {},
+  "unstable_industriesRcgTenantmanagementApi": {},
+  "unstable_industriesRuleBuilderApi": {},
+  "unstable_platformAdminSuccessGuidanceApi": {},
+  "unstable_platformInteractionOrchestratorApi": {},
+  "unstable_platformScaleCenterApi": {},
   "unstable_uiActionsApi": {},
   "unstable_uiAppsApi": {},
   "unstable_uiDuplicatesApi": {},

package/package.json

@@ -1,8 +1,8 @@
 {
     "name": "lightning-base-components",
-    "version": "1.14.3-alpha",
+    "version": "1.14.7-alpha",
     "engines": {
-        "node": ">=12.18.3"
+        "node": ">=14.16.0"
     },
     "files": [
         "external",
@@ -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"
@@ -958,8 +962,8 @@
                 "path": "scopedImports/@salesforce-label-LightningRating.nStars.js"
             },
             {
-                "name": "@salesforce/label/LightningModalBase.close",
-                "path": "scopedImports/@salesforce-label-LightningModalBase.close.js"
+                "name": "@salesforce/label/LightningModalBase.cancelandclose",
+                "path": "scopedImports/@salesforce-label-LightningModalBase.cancelandclose.js"
             },
             {
                 "name": "@salesforce/label/LightningModalBase.waitstate",
@@ -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-label-LightningModalBase.cancelandclose.js

@@ -0,0 +1 @@
+export default 'Cancel and close';

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/ariaObserver/__component__/ariaObserver.spec.js

@@ -47,6 +47,15 @@ describe('AriaObserver', () => {
                 expect(testElement.labelContent).toEqual('Foo\nBar');
             });
 
+            it('should work with label ids appearing in the opposite of document order', async () => {
+                const container = createTestElement();
+                container.updateAriaLabelledby('alt-label-id id-label');
+                await Promise.resolve();
+
+                const testElement = container.testElement;
+                expect(testElement.labelContent).toEqual('Bar\nFoo');
+            });
+
             it('should update the internal label content when external content changes', async () => {
                 const container = createTestElement();
                 container.updateLabelContent();

package/src/lightning/ariaObserver/ariaObserver.js

@@ -13,11 +13,13 @@ function getAttr(elm, attr) {
     return elm.getAttribute(attr);
 }
 
-function extractElements(root, selector) {
-    if (typeof selector !== 'string' || selector === '') {
+function extractElements(root, ids) {
+    if (typeof ids !== 'string' || ids === '') {
         return [];
     }
-    return [].slice.call(root.querySelectorAll(selector));
+    // We must query the elements in the order of ids, so that
+    // the content will be extracted in the correct order.
+    return splitIds(ids).map((id) => root.querySelector(`#${id}`));
 }
 
 function extractContent(elements) {
@@ -113,38 +115,28 @@ export default class AriaObserver {
     connect({ targetSelector, attribute, id, ids }) {
         ids = ids || id;
 
-        let attrState = this.state[attribute];
-        if (attrState) {
-            // note: we don't support linking to a different targetSelector, attribute
-            if (!this.isNative) {
-                const elm = this.template.querySelector(
-                    attrState.innerSelector
-                );
-                if (elm) {
-                    // removing the old ids if possible before setting the new ones
-                    removeAriaRefWhenPossible(elm, attribute, attrState.ids);
-                }
-                attrState.ids = ids;
+        this.state[attribute] = this.state[attribute] || {};
+        const attrState = this.state[attribute];
+
+        // note: we don't support linking to a different targetSelector
+        attrState.innerSelector = attrState.innerSelector || targetSelector;
+
+        // removing the old ids if possible before setting the new ones
+        if (!this.isNative && attrState.ids) {
+            const elm = this.template.querySelector(attrState.innerSelector);
+            if (elm) {
+                removeAriaRefWhenPossible(elm, attribute, attrState.ids);
             }
-        } else {
-            attrState = this.state[attribute] = {
-                ids,
-                innerSelector: targetSelector,
-            };
         }
-        if (this.isNative) {
-            attrState.outerSelector = (ids + '')
-                .trim()
-                .split(/\s+/)
-                .map((ref) => `#${ref}`)
-                .join(',');
 
+        attrState.ids = ids;
+
+        if (this.isNative && !attrState.placeholder) {
             // create placeholder element for copied content
-            if (!attrState.placeholder) {
-                attrState.placeholder = document.createElement('span');
-                attrState.placeholder.id = `auto-link-${attribute}-${this.guid}`;
-            }
+            attrState.placeholder = document.createElement('span');
+            attrState.placeholder.id = `auto-link-${attribute}-${this.guid}`;
         }
+
         if (this.component.isConnected) {
             this.privateUpdate(attribute);
         }
@@ -213,12 +205,9 @@ export default class AriaObserver {
         }
         let computedIds;
         if (this.isNative) {
-            const { outerSelector, content, placeholder } =
-                this.state[attrName];
+            const { ids, content, placeholder } = this.state[attrName];
 
-            const newContent = extractContent(
-                extractElements(this.root, outerSelector)
-            );
+            const newContent = extractContent(extractElements(this.root, ids));
             if (content !== newContent) {
                 this.state[attrName].content = placeholder.textContent =
                     newContent;

package/src/lightning/baseFormattedText/baseFormattedText.html

@@ -1,5 +1,10 @@
 <template>
-    <template if:false={shouldFormat}>{normalizedValue}</template>
+    <template if:false={shouldFormat}>
+        <template if:true={ignoreRTL}>
+            <span dir="ltr">{normalizedValue}</span>
+        </template>
+        <template if:false={ignoreRTL}>{normalizedValue}</template>
+    </template>
     <template if:true={shouldFormat} for:each={formattedParts} for:item="part">
         <template if:true={part.isLink}>
             <a key={part.key} target='_blank' href={part.href} rel="noopener">{part.value}</a>

package/src/lightning/baseFormattedText/baseFormattedText.js

@@ -64,4 +64,9 @@ export default class BaseFormattedText extends LightningElement {
         }
         return parseToFormattedLinkifiedParts(this.value, true);
     }
+
+    get ignoreRTL() {
+        // Ignoring RTL for hex color codes
+        return this.isString && this.value.match(/^#[0-9abcdef]{6}$/i) !== null;
+    }
 }

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>