lightning-base-components 1.17.2-alpha → 1.17.5-alpha

package/metadata/raptor.json

@@ -57,6 +57,7 @@
     "minVersion": "52.0"
   },
   "auraDynamic": {},
+  "auraUtilsMock": {},
   "avatar": {
     "minVersion": "0.0",
     "slotNames": [],
@@ -532,6 +533,7 @@
     "minVersion": "52.0"
   },
   "cmsInternalDeliveryApi": {},
+  "cmsManagementApi": {},
   "cmsOrchestratorApi": {},
   "cmsTypeApi": {},
   "combobox": {
@@ -606,6 +608,7 @@
     ]
   },
   "commerceApi": {},
+  "commerceExtensionApi": {},
   "communityInfoApi": {},
   "communityMicrobatchingApi": {},
   "communityNavigationMenuApi": {},
@@ -636,6 +639,7 @@
       ""
     ]
   },
+  "dataProviderApi": {},
   "datatable": {
     "minVersion": "41.0",
     "slotNames": [],
@@ -958,6 +962,9 @@
       {
         "name": "contexts"
       },
+      {
+        "name": "disabled"
+      },
       {
         "name": "editing"
       },
@@ -1003,6 +1010,9 @@
       {
         "name": "contextName"
       },
+      {
+        "name": "disabled"
+      },
       {
         "name": "editing"
       },
@@ -1042,11 +1052,17 @@
       ""
     ],
     "properties": [
+      {
+        "name": "disabled"
+      },
       {
         "name": "errors"
       },
       {
         "name": "showErrorIcon"
+      },
+      {
+        "name": "variant"
       }
     ],
     "methods": [
@@ -1537,24 +1553,38 @@
   "iconUtils": {},
   "industriesActionPlanApi": {},
   "industriesActionablelistApi": {},
+  "industriesAssessmentApi": {},
+  "industriesAuditTrailExportApi": {},
   "industriesCibApi": {},
   "industriesClmApi": {},
+  "industriesContextApi": {},
+  "industriesCpqApi": {},
+  "industriesCriteriaBasedSearchFilterApi": {},
+  "industriesDataloadingApi": {},
   "industriesDecisionMatrixDesignerApi": {},
   "industriesDocgenApi": {},
+  "industriesEducationApi": {},
   "industriesEinsteinAIAcceleratorApi": {},
   "industriesEpcApi": {},
   "industriesEriApi": {},
   "industriesExplainabilityApi": {},
+  "industriesExternalDocumentApi": {},
+  "industriesFeatureValidationApi": {},
+  "industriesFundraisingApi": {},
+  "industriesGroupApi": {},
   "industriesHealthcloudApi": {},
   "industriesHealthcloudHpiApi": {},
   "industriesIdentityVerificationApi": {},
   "industriesInterestTaggingApi": {},
   "industriesLoyaltyEngineApi": {},
+  "industriesPricingApi": {},
   "industriesPublicSectorApi": {},
   "industriesRcgTenantmanagementApi": {},
   "industriesRuleBuilderApi": {},
   "industriesSalesExcellenceApi": {},
+  "industriesSchedulerApi": {},
   "industriesServiceExcellenceApi": {},
+  "industriesServiceprocessApi": {},
   "industriesSustainabilityBeiApi": {},
   "industriesSustainabilityDgfApi": {},
   "industriesSustainabilityRecalculateApi": {},
@@ -1851,6 +1881,9 @@
     "minVersion": "42.0",
     "slotNames": [],
     "properties": [
+      {
+        "name": "autocomplete"
+      },
       {
         "name": "dirty"
       },
@@ -2163,6 +2196,9 @@
       }
     ]
   },
+  "logger": {
+    "minVersion": "0.0"
+  },
   "lookup": {
     "slotNames": [],
     "properties": [
@@ -2318,10 +2354,10 @@
         "name": "errorMessage"
       },
       {
-        "name": "fieldLevelHelp"
+        "name": "fieldApiName"
       },
       {
-        "name": "filterItems"
+        "name": "fieldLevelHelp"
       },
       {
         "name": "items"
@@ -2329,12 +2365,21 @@
       {
         "name": "label"
       },
+      {
+        "name": "objectInfos"
+      },
       {
         "name": "pills"
       },
+      {
+        "name": "record"
+      },
       {
         "name": "required"
       },
+      {
+        "name": "selectedTargetApiName"
+      },
       {
         "name": "textInfo"
       },
@@ -2365,7 +2410,10 @@
     "slotNames": [],
     "properties": [
       {
-        "name": "filterItems"
+        "name": "entityOptions"
+      },
+      {
+        "name": "entitySelectedAssistiveLabel"
       },
       {
         "name": "items"
@@ -2376,6 +2424,9 @@
       {
         "name": "placeholder"
       },
+      {
+        "name": "selectedEntityLabel"
+      },
       {
         "name": "showActivityIndicator"
       }
@@ -2519,6 +2570,15 @@
       {
         "name": "filterIconName"
       },
+      {
+        "name": "filterInputText"
+      },
+      {
+        "name": "filterItems"
+      },
+      {
+        "name": "filterLabel"
+      },
       {
         "name": "inputText"
       },
@@ -2753,7 +2813,9 @@
       }
     ]
   },
+  "placeQuoteApi": {},
   "platformExternalServicesApi": {},
+  "platformGlobalizationApi": {},
   "platformNamedCredentialApi": {},
   "platformNotificationUtils": {},
   "platformOverlayUtils": {},
@@ -3084,6 +3146,23 @@
       }
     ]
   },
+  "recordPicker": {
+    "slotNames": [],
+    "properties": [
+      {
+        "name": "filter"
+      },
+      {
+        "name": "label"
+      },
+      {
+        "name": "objectApiName"
+      },
+      {
+        "name": "placeholder"
+      }
+    ]
+  },
   "recordUtils": {},
   "recordViewForm": {
     "minVersion": "41.0",
@@ -3185,8 +3264,10 @@
     ]
   },
   "routingService": {},
+  "salesAutomationRulesApi": {},
   "salesEnablementProgramApi": {},
   "salesPeopleApi": {},
+  "salesUserWorkingHoursApi": {},
   "select": {
     "slotNames": [],
     "properties": [
@@ -3256,6 +3337,48 @@
     "minVersion": "52.0",
     "slotNames": [],
     "methods": [
+      {
+        "name": "acceptCall"
+      },
+      {
+        "name": "addParticipant"
+      },
+      {
+        "name": "declineCall"
+      },
+      {
+        "name": "endCall"
+      },
+      {
+        "name": "hold"
+      },
+      {
+        "name": "merge"
+      },
+      {
+        "name": "mute"
+      },
+      {
+        "name": "pauseRecording"
+      },
+      {
+        "name": "resume"
+      },
+      {
+        "name": "resumeRecording"
+      },
+      {
+        "name": "sendDigits"
+      },
+      {
+        "name": "startPreviewCall"
+      },
+      {
+        "name": "swap"
+      },
+      {
+        "name": "unmute"
+      },
       {
         "name": "updateNextBestActions"
       }
@@ -3415,6 +3538,7 @@
       }
     ]
   },
+  "tableauEmbeddingApi": {},
   "tabset": {
     "minVersion": "44.0",
     "slotNames": [
@@ -3569,6 +3693,7 @@
     ]
   },
   "toastContainer": {
+    "minVersion": "58.0",
     "slotNames": [],
     "properties": [
       {
@@ -3671,6 +3796,7 @@
   "uiGraphQLApi": {
     "minVersion": "57.0"
   },
+  "uiGraphQLBatchApi": {},
   "uiLayoutApi": {},
   "uiLearningContentPlatformApi": {},
   "uiListApi": {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lightning-base-components",
-    "version": "1.17.2-alpha",
+    "version": "1.17.5-alpha",
     "license": "MIT",
     "files": [
         "external",
@@ -506,6 +506,10 @@
                 "name": "@salesforce/label/LightningDatatable.chooseARow",
                 "path": "scopedImports/@salesforce-label-LightningDatatable.chooseARow.js"
             },
+            {
+                "name": "@salesforce/label/LightningDatatable.chooseARowSelectAll",
+                "path": "scopedImports/@salesforce-label-LightningDatatable.chooseARowSelectAll.js"
+            },
             {
                 "name": "@salesforce/label/LightningDatatable.save",
                 "path": "scopedImports/@salesforce-label-LightningDatatable.save.js"
@@ -1006,6 +1010,10 @@
                 "name": "@salesforce/label/LightningInput.helptextAlternativeText",
                 "path": "scopedImports/@salesforce-label-LightningInput.helptextAlternativeText.js"
             },
+            {
+                "name": "@salesforce/label/LightningInput.mailingAddressFieldsUpdateText",
+                "path": "scopedImports/@salesforce-label-LightningInput.mailingAddressFieldsUpdateText.js"
+            },
             {
                 "name": "@salesforce/label/LightningRating.readOnlyAssistiveText",
                 "path": "scopedImports/@salesforce-label-LightningRating.readOnlyAssistiveText.js"
@@ -1074,6 +1082,14 @@
                 "name": "@salesforce/label/LightningToast.close",
                 "path": "scopedImports/@salesforce-label-LightningToast.close.js"
             },
+            {
+                "name": "@salesforce/label/LightningToast.macNavigationAssistiveText",
+                "path": "scopedImports/@salesforce-label-LightningToast.macNavigationAssistiveText.js"
+            },
+            {
+                "name": "@salesforce/label/LightningToast.genericNavigationAssistiveText",
+                "path": "scopedImports/@salesforce-label-LightningToast.genericNavigationAssistiveText.js"
+            },
             {
                 "name": "@salesforce/label/Global_Entity.created_by",
                 "path": "scopedImports/@salesforce-label-Global_Entity.created_by.js"
@@ -1082,6 +1098,10 @@
                 "name": "@salesforce/label/Global_Entity.last_modified_by",
                 "path": "scopedImports/@salesforce-label-Global_Entity.last_modified_by.js"
             },
+            {
+                "name": "@salesforce/label/AddressAutocomplete.LookupButton",
+                "path": "scopedImports/@salesforce-label-AddressAutocomplete.LookupButton.js"
+            },
             {
                 "name": "@salesforce/i18n/lang",
                 "path": "scopedImports/@salesforce-i18n-lang.js"
@@ -1264,6 +1284,7 @@
             "lightning/dialog",
             "lightning/dualListbox",
             "lightning/dynamicIcon",
+            "lightning/f6Controller",
             "lightning/fileDownload",
             "lightning/focusTrap",
             "lightning/formattedAddress",
@@ -1329,6 +1350,7 @@
             "lightning/relativeDateTime",
             "lightning/routingService",
             "lightning/select",
+            "lightning/showToastEvent",
             "lightning/slider",
             "lightning/spinner",
             "lightning/stackedTab",
@@ -1337,6 +1359,8 @@
             "lightning/tabset",
             "lightning/textarea",
             "lightning/tile",
+            "lightning/toast",
+            "lightning/toastContainer",
             "lightning/tree",
             "lightning/treeGrid",
             "lightning/utils",

package/scopedImports/@salesforce-label-AddressAutocomplete.LookupButton.js

@@ -0,0 +1 @@
+export default 'Search Address';

package/scopedImports/@salesforce-label-LightningDatatable.chooseARowSelectAll.js

@@ -0,0 +1 @@
+export default 'Choose a Row';

package/scopedImports/@salesforce-label-LightningInput.mailingAddressFieldsUpdateText.js

@@ -0,0 +1 @@
+export default 'Mailing Address updated for country {0}';

package/scopedImports/@salesforce-label-LightningToast.genericNavigationAssistiveText.js

@@ -0,0 +1 @@
+export default 'Press Control + F6 to navigate to the next toast notification or focusable region.';

package/scopedImports/@salesforce-label-LightningToast.macNavigationAssistiveText.js

@@ -0,0 +1 @@
+export default 'Press Command + F6 to navigate to the next toast notification or focusable region.';

package/src/lightning/ariaObserver/__examples__/connect/connect.html

@@ -0,0 +1,19 @@
+<template>
+    <div>
+        <label id="foo">Foo</label>
+    </div>
+    <div>
+        <label id="bar">Bar</label>
+    </div>
+    <div>
+        <label id="hello">Hello</label>
+    </div>
+    <div>
+        <label id="world">World</label>
+    </div>
+    <div>
+        <ariaobserver-connect-child aria-labelledby={connectIds}></ariaobserver-connect-child>
+        <div>Current Id: {connectIds}</div>
+        <div><button onclick={handleUpdateIds}>Update Ids to 'foo bar hello world'</button></div>
+    </div>
+</template>

package/src/lightning/ariaObserver/__examples__/connect/connect.js

@@ -0,0 +1,10 @@
+import { LightningElement } from 'lwc';
+
+export default class AriaObserverConnect extends LightningElement {
+
+    connectIds = 'foo bar';
+
+    handleUpdateIds() {
+        this.connectIds = 'foo bar hello world';
+    }
+}

package/src/lightning/ariaObserver/__examples__/connectChild/connectChild.html

@@ -0,0 +1,3 @@
+<template>
+    <input type="text" />
+</template>

package/src/lightning/ariaObserver/__examples__/connectChild/connectChild.js

@@ -0,0 +1,45 @@
+import { LightningElement, api } from 'lwc';
+
+import AriaObserver from 'lightning/ariaObserver';
+
+export default class AriaObserverConnectChild extends LightningElement {
+
+    constructor() {
+        super();
+        this.ariaObserver = new AriaObserver(this);
+    }
+
+    connectedCallback() {
+        if (!this.ariaObserver) {
+            this.ariaObserver = new AriaObserver(this);
+        }
+    }
+
+    disconnectedCallback() {
+        if (this.ariaObserver) {
+            this.ariaObserver.disconnect();
+            this.ariaObserver = undefined;
+        }
+    }
+
+    renderedCallback() {
+        this.ariaObserver.sync();
+    }
+
+    _ariaLabelledBy = '';
+
+    @api
+    get ariaLabelledBy() {
+        return this._ariaLabelledBy;
+    }
+    set ariaLabelledBy(refs) {
+        this._ariaLabelledBy = refs;
+
+        this.ariaObserver.connect({
+            targetSelector: 'input',
+            attribute: 'aria-labelledby',
+            id: refs
+        });
+    }
+
+}

package/src/lightning/ariaObserver/ariaObserver.js

@@ -110,7 +110,7 @@ export default class AriaObserver {
             .split(/\s+/)
             .map((ref) => `[id*="${ref}"]`)
             .join(',');
-        const liveId = { selector, callback };
+        const liveId = { refs, selector, callback };
         this.liveIds[refs] = liveId;
     }
 
@@ -165,6 +165,16 @@ export default class AriaObserver {
         }
     }
 
+    privateExtractCorrectElements(selector, elements) {
+        // Example: 'foo' + '-1'
+        const selectors = selector.split(/\s/g);
+        const matchSelectors = `(${selectors.join('|')})`;
+        const regex = new RegExp(`^${matchSelectors}(-[0-9]+)$`);
+        return [...elements].filter((element) => {
+            return regex.test(element.id);
+        });
+    }
+
     privateExtractIds(elements) {
         return elements
             .map((el) => {
@@ -189,7 +199,11 @@ export default class AriaObserver {
                         root.querySelectorAll(thisId.selector)
                     );
                 }
-                const newIds = this.privateExtractIds(thisId.elements);
+                const newThisId = this.privateExtractCorrectElements(
+                    thisId.refs,
+                    thisId.elements
+                );
+                const newIds = this.privateExtractIds(newThisId);
                 // only fire calback if the value changed
                 if (newIds !== thisId.ids) {
                     thisId.callback(newIds);

package/src/lightning/baseCombobox/baseCombobox.js

@@ -69,7 +69,6 @@ export default class LightningBaseCombobox extends LightningElement {
     @api inputMaxlength;
     @api showInputActivityIndicator = false;
     @api required = false;
-    @api dropdownAlignment = 'left';
     @api placeholder = i18n.placeholder;
     @api inputLabel;
 
@@ -93,6 +92,7 @@ export default class LightningBaseCombobox extends LightningElement {
     _inputAriaControls;
     _activeElementDomId;
     _autocomplete = 'off';
+    _dropdownAlignment = 'left';
     originDisableDefaultHighlight;
     privateDisableDefaultHighlight;
     _editingMode = false;
@@ -115,6 +115,7 @@ export default class LightningBaseCombobox extends LightningElement {
     }
 
     connectedCallback() {
+        this.overrideDropdownAlignment();
         this.classList.add('slds-combobox_container');
         this._connected = true;
         this._keyboardInterface = this.dropdownKeyboardInterface();
@@ -125,6 +126,15 @@ export default class LightningBaseCombobox extends LightningElement {
         this._listBoxElementCache = undefined;
     }
 
+    @api
+    get dropdownAlignment() {
+        return this._dropdownAlignment;
+    }
+
+    set dropdownAlignment(value) {
+        this._dropdownAlignment = value;
+    }
+
     @api
     get inputControlsElement() {
         return this._inputAriaControls;
@@ -353,9 +363,7 @@ export default class LightningBaseCombobox extends LightningElement {
                 ? this.computedButtonTriggerAriaLabel
                 : this.inputLabel,
             [ARIA_INVALID]: this.computedAriaInvalid,
-            [ARIA_ACTIVEDESCENDANT]: this._editingMode
-                ? undefined
-                : this._activeElementDomId,
+            [ARIA_ACTIVEDESCENDANT]: this.computedAriaActiveDescendant,
         });
     }
 
@@ -451,6 +459,16 @@ export default class LightningBaseCombobox extends LightningElement {
         );
     }
 
+    /**
+     * Do not set aria-activedescendant when editing the text in the combobox.
+     * Rest of the times, set it to active element DOM id.
+     */
+    get computedAriaActiveDescendant() {
+        return this.isUserInputDisabled || !this._editingMode
+            ? this._activeElementDomId
+            : undefined;
+    }
+
     get computedAriaAutocomplete() {
         if (this.hasInputPill) {
             // no aria-autocomplete when pill is showing
@@ -896,6 +914,7 @@ export default class LightningBaseCombobox extends LightningElement {
                 this._selectableItems < 3
                     ? SMALL_MIN_HEIGHT
                     : MEDIUM_MIN_HEIGHT,
+            keepInViewport: true,
         });
     }
 
@@ -1064,6 +1083,33 @@ export default class LightningBaseCombobox extends LightningElement {
             this.template.host.getAttribute('data-aria-invalid');
         return computeAriaInvalid(ariaInvalid, true);
     }
+
+    isShadowRoot(node) {
+        return node && node.nodeType === 11;
+    }
+
+    parentNodeContainsClass(host, className) {
+        let element = host;
+        while (element.parentNode) {
+            element = this.isShadowRoot(element.parentNode)
+                ? element.parentNode.host
+                : element.parentNode;
+            if (element.classList && element.classList.contains(className)) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    overrideDropdownAlignment() {
+        let isModal = this.parentNodeContainsClass(
+            this.template.host,
+            'slds-modal'
+        );
+        if (isModal) {
+            this._dropdownAlignment = 'auto';
+        }
+    }
 }
 
 function scrollIntoViewIfNeeded(element, scrollingParent) {

package/src/lightning/baseCombobox/keyboard.js

@@ -106,6 +106,9 @@ function handleDeletionKeys({ event, dropdownInterface }) {
     if (dropdownInterface.shouldPreventInputDeletion()) {
         event.preventDefault();
     }
+    if (!dropdownInterface.isDropdownVisible()) {
+        dropdownInterface.openDropdownIfNotEmpty();
+    }
 }
 
 function handleTypedCharacters({ event, currentIndex, dropdownInterface }) {

package/src/lightning/breadcrumb/__docs__/breadcrumb.md

@@ -23,11 +23,9 @@ Here is an example.
 
 #### Creating Links Using Breadcrumbs
 
-The behavior of a breadcrumb is similar to a link. If a link is not provided
-via the `href` attribute, the value defaults to `javascript:void(0);`. To
-provide custom navigation, use an `onclick` handler with `lightning-navigation`. If you provide a link in the `href` attribute,
-calling `event.preventDefault()` enables you to bypass the link and use your
-custom navigation instead.
+The behavior of a breadcrumb is similar to a link for the purpose of navigation. If a link is not provided via the `href` attribute, the value defaults to `#`. Since a breadcrumb is used as navigation, we don't recommend leaving out the `href` attribute since `#` links to the same page when middle-clicked or opened in a new tab. 
+
+To provide custom navigation, use an `onclick` handler with `lightning-navigation`. If you provide a link in the `href` attribute, calling `event.preventDefault()` enables you to bypass the link and use your custom navigation instead.
 
 ```html
 <template>
@@ -67,7 +65,8 @@ handleNavigateToCustomPage2(event) {
 
 #### Generating Breadcrumbs with Iteration
 
-Iterate over a list of items using `for:each` to generate breadcrumbs.
+Iterate over a list of items using `for:each` to generate breadcrumbs. If you don't provide a link with an `onclick` handler, `href` defaults to `#`.
+ 
 For example, you can create an array of breadcrumbs with label and name
 values.
 

package/src/lightning/breadcrumb/breadcrumb.css

@@ -1,3 +1,6 @@
+/* @import 'lightning/sldsCommon';
+@import './breadcrumb.slds.css'; */
+
 :host {
     display: list-item;
 }

package/src/lightning/breadcrumb/breadcrumb.html

@@ -1,3 +1,3 @@
 <template>
-    <a onclick={handleClick} href={computedHref} aria-current={ariaCurrent}>{label}</a>
+    <a onclick={handleClick} href={computedHref} aria-current={ariaCurrent} part="breadcrumb">{label}</a>
 </template>