lightning-base-components 1.17.1-alpha → 1.17.3-alpha

package/metadata/raptor.json

@@ -20,6 +20,9 @@
       "actions"
     ],
     "properties": [
+      {
+        "name": "headingLevel"
+      },
       {
         "name": "label"
       },
@@ -352,6 +355,9 @@
     "minVersion": "0.0",
     "slotNames": [],
     "properties": [
+      {
+        "name": "disabled"
+      },
       {
         "name": "groupOrder"
       },
@@ -398,9 +404,15 @@
       {
         "name": "headingLevel"
       },
+      {
+        "name": "hideHeader"
+      },
       {
         "name": "iconName"
       },
+      {
+        "name": "label"
+      },
       {
         "name": "variant"
       }
@@ -860,6 +872,7 @@
     "minVersion": "54.0"
   },
   "experienceModelApi": {},
+  "f6Controller": {},
   "fieldDependencyManager": {},
   "fieldUtils": {},
   "fileDownload": {
@@ -1524,8 +1537,10 @@
   "iconUtils": {},
   "industriesActionPlanApi": {},
   "industriesActionablelistApi": {},
+  "industriesAssessmentApi": {},
   "industriesCibApi": {},
   "industriesClmApi": {},
+  "industriesDataloadingApi": {},
   "industriesDecisionMatrixDesignerApi": {},
   "industriesDocgenApi": {},
   "industriesEinsteinAIAcceleratorApi": {},
@@ -2302,13 +2317,13 @@
         "name": "disabled"
       },
       {
-        "name": "errorMessage"
+        "name": "entityOptions"
       },
       {
-        "name": "fieldLevelHelp"
+        "name": "errorMessage"
       },
       {
-        "name": "filterItems"
+        "name": "fieldLevelHelp"
       },
       {
         "name": "items"
@@ -2339,19 +2354,7 @@
     "slotNames": [],
     "properties": [
       {
-        "name": "errorMessage"
-      },
-      {
-        "name": "fieldLevelHelp"
-      },
-      {
-        "name": "label"
-      },
-      {
-        "name": "required"
-      },
-      {
-        "name": "variant"
+        "name": "disabled"
       }
     ],
     "methods": [
@@ -2364,7 +2367,7 @@
     "slotNames": [],
     "properties": [
       {
-        "name": "filterItems"
+        "name": "entityOptions"
       },
       {
         "name": "items"
@@ -3560,6 +3563,11 @@
       {
         "name": "variant"
       }
+    ],
+    "methods": [
+      {
+        "name": "focus"
+      }
     ]
   },
   "toastContainer": {
@@ -3588,6 +3596,9 @@
       {
         "name": "header"
       },
+      {
+        "name": "headingLevel"
+      },
       {
         "name": "items"
       },
@@ -3662,6 +3673,7 @@
   "uiGraphQLApi": {
     "minVersion": "57.0"
   },
+  "uiGraphQLBatchApi": {},
   "uiLayoutApi": {},
   "uiLearningContentPlatformApi": {},
   "uiListApi": {
@@ -3808,6 +3820,9 @@
       ""
     ],
     "properties": [
+      {
+        "name": "headingLevel"
+      },
       {
         "name": "label"
       }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lightning-base-components",
-    "version": "1.17.1-alpha",
+    "version": "1.17.3-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"
@@ -910,6 +914,10 @@
                 "name": "@salesforce/label/LightningLookup.messageWhenMissingInformation",
                 "path": "scopedImports/@salesforce-label-LightningLookup.messageWhenMissingInformation.js"
             },
+            {
+                "name": "@salesforce/label/LightningLookup.noAccess",
+                "path": "scopedImports/@salesforce-label-LightningLookup.noAccess.js"
+            },
             {
                 "name": "@salesforce/label/LightningPicklist.available",
                 "path": "scopedImports/@salesforce-label-LightningPicklist.available.js"
@@ -1067,16 +1075,8 @@
                 "path": "scopedImports/@salesforce-label-LightningToast.errorLabel.js"
             },
             {
-                "name": "@salesforce/label/LightningToast.missingToastLabel",
-                "path": "scopedImports/@salesforce-label-LightningToast.missingToastLabel.js"
-            },
-            {
-                "name": "@salesforce/label/LightningToastContainer.missingToastProperty",
-                "path": "scopedImports/@salesforce-label-LightningToastContainer.missingToastProperty.js"
-            },
-            {
-                "name": "@salesforce/label/LightningToastContainer.missingToastConfig",
-                "path": "scopedImports/@salesforce-label-LightningToastContainer.missingToastConfig.js"
+                "name": "@salesforce/label/LightningToast.close",
+                "path": "scopedImports/@salesforce-label-LightningToast.close.js"
             },
             {
                 "name": "@salesforce/label/Global_Entity.created_by",
@@ -1086,6 +1086,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"

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

@@ -0,0 +1 @@
+export default 'No access';

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

@@ -0,0 +1 @@
+export default 'Close';

package/src/lightning/accordionSection/accordionSection.html

@@ -1,7 +1,7 @@
 <template>
     <section class={computedSectionClasses}>
         <div class="slds-accordion__summary">
-            <h3 onkeydown={handleKeyDown} class="slds-accordion__summary-heading">
+            <h2 aria-level={_privateHeadingAriaLevel} onkeydown={handleKeyDown} class="slds-accordion__summary-heading">
                 <button class="section-control slds-button slds-button_reset slds-accordion__summary-action"
                         type="button"
                         aria-expanded={computedAriaExpanded}
@@ -14,7 +14,7 @@
                     </lightning-primitive-icon>
                     <span class="slds-accordion__summary-content" title={label}>{label}</span>
                 </button>
-            </h3>
+            </h2>
             <slot name="actions"></slot>
         </div>
         <div id='lgt-accordion-section' hidden={computedHidden} aria-hidden={computedAriaHidden} class="slds-accordion__content">

package/src/lightning/accordionSection/accordionSection.js

@@ -1,7 +1,7 @@
 import { LightningElement, api, track } from 'lwc';
-import { classSet } from 'lightning/utils';
 import { generateUniqueId } from 'lightning/inputUtils';
-import { keyCodes } from 'lightning/utilsPrivate';
+import { keyCodes, isHeadingLevelValid } from 'lightning/utilsPrivate';
+import { classSet } from 'lightning/utils';
 
 /**
  * A single section that is nested in an accordion component.
@@ -30,6 +30,25 @@ export default class LightningAccordionSection extends LightningElement {
 
     @track privateIsOpen = false;
 
+    _privateHeadingAriaLevel;
+
+    /**
+     * Changes the 'aria-level' attribute value for the
+     * <h2> markup tag in the card's title element. Supported values
+     * are (1, 2, 3, 4, 5, 6).
+     * @type {string | number}
+     */
+    @api
+    get headingLevel() {
+        return this._privateHeadingAriaLevel;
+    }
+
+    set headingLevel(value) {
+        if (isHeadingLevelValid(value)) {
+            this._privateHeadingAriaLevel = value;
+        }
+    }
+
     /**
      * Section should have received focus, but hasn't yet.
      */

package/src/lightning/baseCombobox/baseCombobox.html

@@ -75,7 +75,7 @@
             <template if:false={hasInputPill}>
                 <div class="slds-input__icon-group slds-input__icon-group_right">
                     <template if:true={showInputActivityIndicator}>
-                        <div role="status" class="slds-spinner slds-spinner_brand slds-spinner_x-small slds-input__spinner">
+                        <div class="slds-spinner slds-spinner_brand slds-spinner_x-small slds-input__spinner">
                             <span class="slds-assistive-text">{i18n.loadingText}</span>
                             <div class="slds-spinner__dot-a"></div>
                             <div class="slds-spinner__dot-b"></div>

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,8 +92,10 @@ export default class LightningBaseCombobox extends LightningElement {
     _inputAriaControls;
     _activeElementDomId;
     _autocomplete = 'off';
+    _dropdownAlignment = 'left';
     originDisableDefaultHighlight;
     privateDisableDefaultHighlight;
+    _editingMode = false;
 
     constructor() {
         super();
@@ -114,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();
@@ -124,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;
@@ -347,12 +358,14 @@ export default class LightningBaseCombobox extends LightningElement {
         synchronizeAttrs(input, {
             [ARIA_LABELLEDBY]: this.inputLabelledById,
             [ARIA_DESCRIBEDBY]: this.computedAriaDescribedBy,
-            [ARIA_ACTIVEDESCENDANT]: this._activeElementDomId,
             [ARIA_CONTROLS]: this.computedInputControls,
             [ARIA_LABEL]: this.isUserInputDisabled
                 ? this.computedButtonTriggerAriaLabel
                 : this.inputLabel,
             [ARIA_INVALID]: this.computedAriaInvalid,
+            [ARIA_ACTIVEDESCENDANT]: this._editingMode
+                ? undefined
+                : this._activeElementDomId,
         });
     }
 
@@ -605,6 +618,7 @@ export default class LightningBaseCombobox extends LightningElement {
 
     handleOptionMouseEnter(event) {
         if (event.target.hasAttribute('aria-selected')) {
+            this._editingMode = false;
             this.highlightOption(event.target);
         }
     }
@@ -662,6 +676,10 @@ export default class LightningBaseCombobox extends LightningElement {
         if (this.dropdownDisabled) {
             return;
         }
+        // For details: https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event
+        if (event.isComposing || event.keyCode === 229) {
+            return;
+        }
         if (this.hasInputPill) {
             this.handlePillKeyDown(event);
         } else {
@@ -888,6 +906,7 @@ export default class LightningBaseCombobox extends LightningElement {
                 this._selectableItems < 3
                     ? SMALL_MIN_HEIGHT
                     : MEDIUM_MIN_HEIGHT,
+            keepInViewport: true,
         });
     }
 
@@ -953,7 +972,7 @@ export default class LightningBaseCombobox extends LightningElement {
 
     highlightDefaultItem() {
         this.removeHighlight();
-        if (!this.privateDisableDefaultHighlight) {
+        if (!this.privateDisableDefaultHighlight && !this._editingMode) {
             // eslint-disable-next-line @lwc/lwc/no-async-operation
             requestAnimationFrame(() => {
                 this.highlightOptionAndScrollIntoView(
@@ -1041,6 +1060,13 @@ export default class LightningBaseCombobox extends LightningElement {
             closeDropdown() {
                 that.closeDropdown();
             },
+            setEditingMode(isEditing) {
+                that._editingMode = isEditing;
+                if (isEditing) {
+                    that._activeElementDomId = null;
+                }
+                that.synchronizeA11y();
+            },
         };
     }
 
@@ -1049,6 +1075,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

@@ -157,6 +157,31 @@ const eventKeyToHandlerMap = {
     Delete: handleDeletionKeys,
 };
 
+const NON_EDITING_KEYS = [
+    'Enter',
+    'PageUp',
+    'PageDown',
+    'Home',
+    'End',
+    'Down',
+    'Up',
+    'ArrowUp',
+    'ArrowDown',
+    'Esc',
+    'Escape',
+    'Tab',
+];
+const isAnEditingKey = (key) => {
+    return !NON_EDITING_KEYS.includes(key);
+};
+const handleEditingMode = ({ event, dropdownInterface }) => {
+    if (isAnEditingKey(event.key)) {
+        dropdownInterface.setEditingMode(true);
+    } else {
+        dropdownInterface.setEditingMode(false);
+    }
+};
+
 export function handleKeyDownOnInput({
     event,
     currentIndex,
@@ -168,4 +193,5 @@ export function handleKeyDownOnInput({
     } else {
         handleTypedCharacters(parameters);
     }
+    handleEditingMode(parameters);
 }

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/buttonGroup/buttonGroup.css

@@ -1,2 +1,11 @@
 /* @import 'lightning/sldsCommon';
 @import './button-group.slds.css'; */
+
+/* Fix for lihgtning-button-icon not being flush with lightning-button, for details see: W-11658757
+ *
+ * :host:not([data-render-mode]) - specifies that this style will only be applied in synthetic shadow mode
+ */
+
+ :host:not([data-render-mode]) .fix_button-group-flexbox {
+    display: inline-flex;
+ }

package/src/lightning/buttonGroup/buttonGroup.html

@@ -1,5 +1,5 @@
 <template>
-    <div part="button-group">
+    <div part="button-group" class="fix_button-group-flexbox">
         <slot onslotchange={handleSlotChange}></slot>
     </div>
 </template>

package/src/lightning/buttonStateful/buttonStateful.html

@@ -4,7 +4,8 @@
             onblur={handleButtonBlur}
             onclick={handleButtonClick}
             aria-live="polite"
-            part="button">
+            part="button"
+            disabled={disabled}>
 
             <span class="slds-text-not-selected">
                 <template if:true={iconNameWhenOff}>

package/src/lightning/buttonStateful/buttonStateful.js

@@ -22,6 +22,11 @@ export default class LightningButtonStateful extends LightningElement {
         isClicked: false,
     };
 
+    /**
+     * Passthrough to pass disabled attribute onto button
+     */
+    @api disabled;
+
     /**
      * The name of the icon to be used in the format 'utility:check' when the state is true.
      *
@@ -104,6 +109,11 @@ export default class LightningButtonStateful extends LightningElement {
         this.state.selected = normalizeBoolean(value);
     }
 
+    renderedCallback() {
+        // change host style to disable pointer event.
+        this.template.host.style.pointerEvents = this.disabled ? 'none' : '';
+    }
+
     /**
      * Sets focus on the button.
      */

package/src/lightning/card/__docs__/card.md

@@ -58,7 +58,7 @@ For a View All link, set the href value of the tag to a URL to take the user to
         <lightning-button label="Old" slot="actions"></lightning-button>
         <p class="slds-p-horizontal_small">Card Body (custom component)</p>
         <div slot="footer">
-            <a class="slds-card__footer-action" href="javascript:void(0);"
+            <a class="slds-card__footer-action" href="#"
                 >View All
                 <span class="slds-assistive-text">Accounts</span>
             </a>
@@ -111,4 +111,4 @@ This component has usage differences from its Aura counterpart. See [Base Compon
 
 #### Source Code
 
-`lightning-card` is available in the [Base Components Recipes GitHub repository](https://github.com/salesforce/base-components-recipes#documentation). It's transpiled into the `c` namespace so that you can use it in your own projects.
+`lightning-card` is available in the [Base Components Recipes GitHub repository](https://github.com/salesforce/base-components-recipes#documentation). It's transpiled into the `c` namespace so that you can use it in your own projects.

package/src/lightning/card/card.html

@@ -1,5 +1,6 @@
 <template>
-    <article class={computedWrapperClassNames} part="card">
+    <article class={computedWrapperClassNames} aria-label={label} part="card">
+        <template if:true={computedHidden}>
         <div class="slds-card__header slds-grid">
             <header class="slds-media slds-media_center slds-has-flexi-truncate" part="header">
                 <template if:true={hasIcon}>
@@ -32,6 +33,7 @@
                 </div>
             </header>
         </div>
+        </template>
         <div class="slds-card__body" part="body">
             <slot></slot>
         </div>

package/src/lightning/card/card.js

@@ -1,11 +1,7 @@
 import { LightningElement, api } from 'lwc';
 import { classSet } from 'lightning/utils';
-import {
-    isNarrow,
-    isBase,
-    isHeadingLevelValid,
-    DEFAULT_HEADING_LEVEL,
-} from './utils';
+import { isNarrow, isBase } from './utils';
+import { isHeadingLevelValid } from 'lightning/utilsPrivate';
 
 /**
  * Cards apply a container around a related grouping of information.
@@ -81,15 +77,7 @@ export default class LightningCard extends LightningElement {
         }
     }
 
-    _privateHeadingAriaLevel = DEFAULT_HEADING_LEVEL;
-
-    set headingLevel(value) {
-        if (isHeadingLevelValid(value)) {
-            this._privateHeadingAriaLevel = value;
-        } else {
-            this._privateHeadingAriaLevel = DEFAULT_HEADING_LEVEL;
-        }
-    }
+    _privateHeadingAriaLevel;
 
     /**
      * The headingLevel changes the 'aria-level' attribute value of
@@ -104,6 +92,12 @@ export default class LightningCard extends LightningElement {
         return this._privateHeadingAriaLevel;
     }
 
+    set headingLevel(value) {
+        if (isHeadingLevelValid(value)) {
+            this._privateHeadingAriaLevel = value;
+        }
+    }
+
     get titleSlot() {
         return this.template.querySelector('slot[name=title]');
     }
@@ -125,4 +119,46 @@ export default class LightningCard extends LightningElement {
     get hasStringTitle() {
         return !!this.title;
     }
+
+    privateHeaderLabel;
+
+    /**
+     * Assistive label for the card header. Only shown if `hideHeader` attribute is set to `true`.
+     * @type {string}
+     */
+    @api
+    get label() {
+        if (!this._hasTitle || this.hideHeader) {
+            return this.privateHeaderLabel;
+        }
+        return null;
+    }
+    set label(value) {
+        this.privateHeaderLabel = value;
+    }
+
+    get computedHidden() {
+        if (!this.label && this.hideHeader) {
+            console.warn(
+                'A `lightning-card` with `hide-header` requires `label` to be set.'
+            );
+        }
+        return !this.hideHeader;
+    }
+
+    hiddenHeader = false;
+
+    /**
+     * Hides the header chunk of the card when set to `true`.
+     * Requires you to set the `label` attribute to supplement a non-rendered header. If `label` isn't set, you get a `console.warn` error.
+     * @type {boolean}
+     * @default {false}
+     */
+    @api
+    get hideHeader() {
+        return this.hiddenHeader;
+    }
+    set hideHeader(value) {
+        this.hiddenHeader = value;
+    }
 }

package/src/lightning/card/utils.js

@@ -1,10 +1,3 @@
-/**
- * These are all values that can be set to "aria-level" attribute of h2 tag for the card's title.
- */
-export const VALID_HEADING_LEVELS = ['1', '2', '3', '4', '5', '6'];
-
-export const DEFAULT_HEADING_LEVEL = '2';
-
 export function isNarrow(variant) {
     return typeof variant === 'string' && variant.toLowerCase() === 'narrow';
 }
@@ -12,10 +5,3 @@ export function isNarrow(variant) {
 export function isBase(variant) {
     return typeof variant === 'string' && variant.toLowerCase() === 'base';
 }
-
-export function isHeadingLevelValid(level) {
-    return (
-        (typeof level === 'string' || typeof level === 'number') &&
-        VALID_HEADING_LEVELS.includes(String(level))
-    );
-}