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

package/metadata/raptor.json

@@ -49,9 +49,6 @@
       }
     ]
   },
-  "analyticsDataServiceApi": {
-    "minVersion": "52.0"
-  },
   "analyticsSmartDataDiscoveryApi": {},
   "analyticsWaveApi": {
     "minVersion": "52.0"
@@ -159,6 +156,9 @@
       {
         "name": "name"
       },
+      {
+        "name": "stretch"
+      },
       {
         "name": "type"
       },
@@ -490,6 +490,7 @@
     "minVersion": "52.0"
   },
   "cmsInternalDeliveryApi": {},
+  "cmsOrchestratorApi": {},
   "cmsTypeApi": {},
   "combobox": {
     "minVersion": "0.0",
@@ -563,6 +564,7 @@
     ]
   },
   "commerceApi": {},
+  "communityInfoApi": {},
   "communityMicrobatchingApi": {},
   "communityNavigationMenuApi": {},
   "communityRecordSeoPropertiesApi": {},
@@ -859,6 +861,7 @@
       }
     ]
   },
+  "flowBuilderApi": {},
   "flowRuntimeApi": {},
   "flowSupport": {
     "minVersion": "0.0"
@@ -894,6 +897,9 @@
       {
         "name": "latitude"
       },
+      {
+        "name": "locale"
+      },
       {
         "name": "longitude"
       },
@@ -1169,6 +1175,9 @@
   "groupedCombobox": {
     "slotNames": [],
     "properties": [
+      {
+        "name": "disableDefaultHighlight"
+      },
       {
         "name": "disabled"
       },
@@ -1350,10 +1359,13 @@
     "slotNames": []
   },
   "iconUtils": {},
+  "industriesActionPlanApi": {},
   "industriesCibApi": {},
+  "industriesClmApi": {},
   "industriesDecisionMatrixDesignerApi": {},
   "industriesEinsteinAIAcceleratorApi": {},
   "industriesExplainabilityApi": {},
+  "industriesHealthcloudApi": {},
   "industriesHealthcloudHpiApi": {},
   "industriesIdentityVerificationApi": {},
   "industriesInterestTaggingApi": {},
@@ -1361,6 +1373,7 @@
   "industriesPublicSectorApi": {},
   "industriesRcgTenantmanagementApi": {},
   "industriesRuleBuilderApi": {},
+  "industriesServiceExcellenceApi": {},
   "industriesSustainabilityBeiApi": {},
   "industriesSustainabilityDgfApi": {},
   "industriesSustainabilityRecalculateApi": {},
@@ -1545,6 +1558,9 @@
       {
         "name": "addressLabel"
       },
+      {
+        "name": "addressLookupLabel"
+      },
       {
         "name": "addressLookupPlaceholder"
       },
@@ -1578,6 +1594,9 @@
       {
         "name": "fieldLevelHelp"
       },
+      {
+        "name": "locale"
+      },
       {
         "name": "postalCode"
       },
@@ -2455,6 +2474,9 @@
       {
         "name": "size"
       },
+      {
+        "name": "suppressNoneOption"
+      },
       {
         "name": "validity"
       },
@@ -2549,6 +2571,7 @@
       }
     ]
   },
+  "platformNamedCredentialApi": {},
   "platformNotificationUtils": {},
   "platformOverlayUtils": {},
   "platformResourceLoader": {
@@ -2899,6 +2922,7 @@
       }
     ]
   },
+  "refresh": {},
   "relativeDateTime": {
     "minVersion": "0.0",
     "slotNames": [],
@@ -2976,6 +3000,7 @@
     ]
   },
   "routingService": {},
+  "salesEnablementProgramApi": {},
   "select": {
     "slotNames": [],
     "properties": [
@@ -3421,9 +3446,9 @@
   "uiRelatedListApi": {
     "minVersion": "53.0"
   },
-  "unstable_analyticsDataServiceApi": {},
   "unstable_analyticsSmartDataDiscoveryApi": {},
   "unstable_analyticsWaveApi": {},
+  "unstable_analyticsWavePrivateApi": {},
   "unstable_cmsAuthoringApi": {},
   "unstable_cmsDeliveryApi": {},
   "unstable_cmsTypeApi": {},
@@ -3447,6 +3472,7 @@
   "unstable_uiActionsApi": {},
   "unstable_uiAppsApi": {},
   "unstable_uiDuplicatesApi": {},
+  "unstable_uiGraphQLApi": {},
   "unstable_uiLayoutApi": {},
   "unstable_uiListApi": {},
   "unstable_uiListsApi": {},
@@ -3456,6 +3482,7 @@
   "unstable_uiRecordApi": {},
   "unstable_uiRecordAvatarApi": {},
   "unstable_uiRelatedListApi": {},
+  "unstable_uiSearchApi": {},
   "userConsentCookie": {
     "minVersion": "53.0"
   },

package/package.json

@@ -1,8 +1,8 @@
 {
     "name": "lightning-base-components",
-    "version": "1.14.6-alpha",
+    "version": "1.15.2-alpha",
     "engines": {
-        "node": ">=14.16.0"
+        "node": ">=14.18.2"
     },
     "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"
@@ -877,6 +881,10 @@
                 "name": "@salesforce/label/LightningMap.titleWithAddress",
                 "path": "scopedImports/@salesforce-label-LightningMap.titleWithAddress.js"
             },
+            {
+                "name": "@salesforce/label/LightningMap.defaultTitle",
+                "path": "scopedImports/@salesforce-label-LightningMap.defaultTitle.js"
+            },
             {
                 "name": "@salesforce/label/LightningPrimitiveCoordinate.selected",
                 "path": "scopedImports/@salesforce-label-LightningPrimitiveCoordinate.selected.js"
@@ -1085,6 +1093,7 @@
         "expose": [
             "lightning/accordion",
             "lightning/accordionSection",
+            "lightning/alert",
             "lightning/avatar",
             "lightning/badge",
             "lightning/baseFormattedText",
@@ -1102,6 +1111,7 @@
             "lightning/checkboxGroup",
             "lightning/combobox",
             "lightning/configProvider",
+            "lightning/confirm",
             "lightning/context",
             "lightning/datatable",
             "lightning/datatableKeyboardMixins",
@@ -1158,6 +1168,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-LightningMap.defaultTitle.js

@@ -0,0 +1 @@
+export default 'Map of {0} Markers';

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

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

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

@@ -0,0 +1,99 @@
+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.
+
+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/baseCombobox/baseCombobox.html

@@ -44,6 +44,7 @@
                     aria-expanded={computedAriaExpanded}
                     aria-haspopup="listbox"
                     name={name}
+                    role="combobox"
                     data-value={computedInputValue}
                     disabled={disabled}
                     aria-label={computedButtonTriggerAriaLabel}
@@ -60,7 +61,7 @@
                     </span>
                 </button>
             </template>
-            <template if:true={hasInputPill}>
+            <template if:true={isCloseVisible}>
                 <div class="slds-input__icon-group slds-input__icon-group_right">
                     <button onclick={handlePillRemove} type="button"
                         class="slds-button slds-button_icon slds-input__icon slds-input__icon_right"

package/src/lightning/baseCombobox/baseCombobox.js

@@ -13,6 +13,7 @@ import {
     normalizeBoolean,
     normalizeString,
     synchronizeAttrs,
+    computeAriaInvalid,
 } from 'lightning/utilsPrivate';
 // remove-next-line-for-c-namespace
 import { AutoPosition, Direction } from 'lightning/positionLibrary';
@@ -39,6 +40,7 @@ const ARIA_LABELLEDBY = 'aria-labelledby';
 const ARIA_DESCRIBEDBY = 'aria-describedby';
 const ARIA_LABEL = 'aria-label';
 const ARIA_ACTIVEDESCENDANT = 'aria-activedescendant';
+const ARIA_INVALID = 'aria-invalid';
 
 export default class LightningBaseCombobox extends LightningElement {
     static delegatesFocus = true;
@@ -89,6 +91,8 @@ export default class LightningBaseCombobox extends LightningElement {
     _inputAriaControls;
     _activeElementDomId;
     _autocomplete = 'off';
+    originDisableDefaultHighlight;
+    privateDisableDefaultHighlight;
 
     constructor() {
         super();
@@ -276,6 +280,21 @@ export default class LightningBaseCombobox extends LightningElement {
         }
     }
 
+    /**
+     * Whether disable the highlighting default item behavior
+     *
+     * @type {boolean}
+     * @memberof LightningBaseCombobox
+     */
+    @api
+    get disableDefaultHighlight() {
+        return this.originDisableDefaultHighlight;
+    }
+    set disableDefaultHighlight(value) {
+        this.originDisableDefaultHighlight = value;
+        this.privateDisableDefaultHighlight = normalizeBoolean(value);
+    }
+
     @api
     highlightInputText() {
         if (this._connected) {
@@ -331,6 +350,7 @@ export default class LightningBaseCombobox extends LightningElement {
             [ARIA_LABEL]: this.isUserInputDisabled
                 ? this.computedButtonTriggerAriaLabel
                 : this.inputLabel,
+            [ARIA_INVALID]: this.computedAriaInvalid,
         });
     }
 
@@ -880,6 +900,13 @@ export default class LightningBaseCombobox extends LightningElement {
         return this.inputPill && Object.keys(this.inputPill).length > 0;
     }
 
+    get isCloseVisible() {
+        if (this.disabled) {
+            return false;
+        }
+        return this.hasInputPill;
+    }
+
     handlePillRemove() {
         this.inputElement.focus();
         this._events.dispatchPillRemove(this.inputPill);
@@ -924,12 +951,14 @@ export default class LightningBaseCombobox extends LightningElement {
 
     highlightDefaultItem() {
         this.removeHighlight();
-        // eslint-disable-next-line @lwc/lwc/no-async-operation
-        requestAnimationFrame(() => {
-            this.highlightOptionAndScrollIntoView(
-                this.findOptionElementByIndex(this._highlightedItemIndex)
-            );
-        });
+        if (!this.privateDisableDefaultHighlight) {
+            // eslint-disable-next-line @lwc/lwc/no-async-operation
+            requestAnimationFrame(() => {
+                this.highlightOptionAndScrollIntoView(
+                    this.findOptionElementByIndex(this._highlightedItemIndex)
+                );
+            });
+        }
     }
 
     get isDropdownEmpty() {
@@ -1012,6 +1041,12 @@ export default class LightningBaseCombobox extends LightningElement {
             },
         };
     }
+
+    get computedAriaInvalid() {
+        const ariaInvalid =
+            this.template.host.getAttribute('data-aria-invalid');
+        return computeAriaInvalid(ariaInvalid, true);
+    }
 }
 
 function scrollIntoViewIfNeeded(element, scrollingParent) {

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

@@ -1,6 +1,9 @@
 import { api, track } from 'lwc';
 import { classSet } from 'lightning/utils';
-import { normalizeString as normalize } from 'lightning/utilsPrivate';
+import {
+    normalizeString as normalize,
+    normalizeBoolean,
+} from 'lightning/utilsPrivate';
 import LightningPrimitiveButton from 'lightning/primitiveButton';
 import template from './button.html';
 
@@ -9,6 +12,7 @@ import template from './button.html';
  */
 export default class LightningButton extends LightningPrimitiveButton {
     static delegatesFocus = true;
+    _stretch = false;
 
     /**
      * The name for the button element.
@@ -62,6 +66,22 @@ export default class LightningButton extends LightningPrimitiveButton {
      */
     @api iconPosition = 'left';
 
+    /**
+     * Setting it to true allows the button to take up the entire available width.
+     * This value defaults to false.
+     *
+     * @type {boolean}
+     * @default false
+     */
+    @api
+    get stretch() {
+        return this._stretch;
+    }
+
+    set stretch(value) {
+        this._stretch = normalizeBoolean(value);
+    }
+
     /**
      * Specifies the type of button.
      * Valid values are button, reset, and submit.
@@ -97,6 +117,7 @@ export default class LightningButton extends LightningPrimitiveButton {
                     this.normalizedVariant === 'destructive-text',
                 'slds-button_inverse': this.normalizedVariant === 'inverse',
                 'slds-button_success': this.normalizedVariant === 'success',
+                'slds-button_stretch': this.stretch,
             })
             .toString();
     }

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();