lightning-base-components 1.17.2-alpha → 1.17.3-alpha

package/metadata/raptor.json

@@ -1537,8 +1537,10 @@
   "iconUtils": {},
   "industriesActionPlanApi": {},
   "industriesActionablelistApi": {},
+  "industriesAssessmentApi": {},
   "industriesCibApi": {},
   "industriesClmApi": {},
+  "industriesDataloadingApi": {},
   "industriesDecisionMatrixDesignerApi": {},
   "industriesDocgenApi": {},
   "industriesEinsteinAIAcceleratorApi": {},
@@ -2315,13 +2317,13 @@
         "name": "disabled"
       },
       {
-        "name": "errorMessage"
+        "name": "entityOptions"
       },
       {
-        "name": "fieldLevelHelp"
+        "name": "errorMessage"
       },
       {
-        "name": "filterItems"
+        "name": "fieldLevelHelp"
       },
       {
         "name": "items"
@@ -2365,7 +2367,7 @@
     "slotNames": [],
     "properties": [
       {
-        "name": "filterItems"
+        "name": "entityOptions"
       },
       {
         "name": "items"
@@ -3671,6 +3673,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.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"
@@ -1082,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/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;
@@ -896,6 +906,7 @@ export default class LightningBaseCombobox extends LightningElement {
                 this._selectableItems < 3
                     ? SMALL_MIN_HEIGHT
                     : MEDIUM_MIN_HEIGHT,
+            keepInViewport: true,
         });
     }
 
@@ -1064,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/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/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>

package/src/lightning/card/card.js

@@ -140,7 +140,7 @@ export default class LightningCard extends LightningElement {
     get computedHidden() {
         if (!this.label && this.hideHeader) {
             console.warn(
-                'Setting header without a label can cause accessibility issues'
+                'A `lightning-card` with `hide-header` requires `label` to be set.'
             );
         }
         return !this.hideHeader;

package/src/lightning/datatable/datatable.js

@@ -213,6 +213,7 @@ export default class LightningDatatable extends LightningElement {
     _renderMode = 'table';
     _shouldResetFocus = false; // used to ensure focus isn't lost from changes in renderedRows
     _suppressBottomBar = false;
+    _checkboxColumnHeaderId;
 
     /************************* PUBLIC PROPERTIES *************************/
 
@@ -864,27 +865,13 @@ export default class LightningDatatable extends LightningElement {
         return styleToString(styles);
     }
 
-    /**
-     * Private method to get datatable header element
-     * used when getting checkboxColumnHeaderId for
-     * aria-labelledby in checkbox column
-     * @returns {(HTMLElement|null)}
-     */
-    get checkboxColumnHeaderElement() {
-        return this.template.querySelector(
-            'lightning-primitive-header-factory'
-        );
-    }
-
     /**
      * Private method to get computedCheckboxColumnHeaderId
      * from checkboxColumnHeaderElement for
      * aria-labelledby in checkbox column
      */
     get computedCheckboxColumnHeaderId() {
-        return this.checkboxColumnHeaderElement
-            ? this.checkboxColumnHeaderElement.computedColumnHeaderId
-            : '';
+        return this._checkboxColumnHeaderId;
     }
 
     get computedAriaLiveClassForNavMode() {
@@ -1344,6 +1331,10 @@ export default class LightningDatatable extends LightningElement {
         this.fireSortedColumnChange(fieldName, columnKey, sortDirection);
     }
 
+    handleCheckboxHeaderId(event) {
+        this._checkboxColumnHeaderId = event.detail;
+    }
+
     /**
      * Handles the `resizecol` event on lightning-datatable
      *

package/src/lightning/datatable/templates/div/div.html

@@ -84,7 +84,8 @@
                                                 sorted-direction={def.sortedDirection}
                                                 column-width={def.columnWidth}
                                                 show-checkbox={showSelectAllCheckbox}
-                                                hide-header={hideTableHeader}>
+                                                hide-header={hideTableHeader}
+                                                onprivatecolumnheaderid={handleCheckboxHeaderId}>
                                             </lightning-primitive-header-factory>
                                         </template>
                                         <template if:false={def.fixedWidth}>
@@ -105,7 +106,8 @@
                                                 column-width={def.columnWidth}
                                                 resizable={hasResizebleColumns}
                                                 resizestep={widthsData.resizeStep}
-                                                hide-header={hideTableHeader}>
+                                                hide-header={hideTableHeader}
+                                                onprivatecolumnheaderid={handleCheckboxHeaderId}>
                                             </lightning-primitive-header-factory>
                                         </template>
                                     </div>

package/src/lightning/datatable/templates/table/table.html

@@ -73,7 +73,8 @@
                                                 sorted-direction={def.sortedDirection}
                                                 column-width={def.columnWidth}
                                                 show-checkbox={showSelectAllCheckbox}
-                                                hide-header={hideTableHeader}>
+                                                hide-header={hideTableHeader}
+                                                onprivatecolumnheaderid={handleCheckboxHeaderId}>
                                             </lightning-primitive-header-factory>
                                         </template>
                                         <template if:false={def.fixedWidth}>
@@ -94,7 +95,8 @@
                                                 column-width={def.columnWidth}
                                                 resizable={hasResizebleColumns}
                                                 resizestep={widthsData.resizeStep}
-                                                hide-header={hideTableHeader}>
+                                                hide-header={hideTableHeader}
+                                                onprivatecolumnheaderid={handleCheckboxHeaderId}>
                                             </lightning-primitive-header-factory>
                                         </template>
                                     </th>

package/src/lightning/dialog/README.md

@@ -1,4 +1,4 @@
-# Dialog
+# Dialog (Deprecated)
 
 ## Important:
 * **For any new modal work, starting in release 236, please use `lightning-modal`**

package/src/lightning/input/__docs__/input.md

@@ -336,7 +336,7 @@ When `multiple` is used, the email field expects a single email address or a com
 
 #### File
 
-An input field for selecting files to upload using an `Upload Files` button or a drag-and-drop zone.
+An input field for selecting files to upload using an `Upload Files` button or a drag-and-drop zone. This field accepts files up to 3.5 MB.
 
 To retrieve the list of selected files, use
 `event.target.files` in the `onchange` event handler. Your selected files are returned in a `FileList` object, each specified as a `File` object with the `size` and `type` attributes.

package/src/lightning/input/input.js

@@ -574,7 +574,7 @@ export default class LightningInput extends LightningElement {
     }
 
     /**
-     * A Boolean value for aria-invalid.
+     * A boolean value that controls whether accessibility tools read empty required textboxes as invalid. Default value is false.
      * @type {boolean}
      */
     @api

package/src/lightning/modal/__docs__/modal.md

@@ -1,17 +1,17 @@
-A `lightningModal` component overlays a message modal on top of the current app window. A modal interrupts a user’s workflow and draws attention to the message. 
+A `lightningModal` component overlays a message modal on top of the current app window. A modal interrupts a user’s workflow and draws attention to the message.
 
 `LightningModal` implements the SLDS [modals](https://www.lightningdesignsystem.com/components/modals/) blueprint.
 
 Create a modal component in response to a user action, such as clicking a button or link. The modal blocks interaction with everything else on the page until the user acts upon or dismisses the modal.
 
-Unlike other components, this component doesn't use a `lightning-modal` tag or extend `LightningElement`. There is no `lightning-modal` component. Instead, you create a modal by extending `LightningModal` and using these helper `lightning-modal-*` components to provide a header, footer and the body of the modal. 
+Unlike other components, this component doesn't use a `lightning-modal` tag or extend `LightningElement`. There is no `lightning-modal` component. Instead, you create a modal by extending `LightningModal` and using these helper `lightning-modal-*` components to provide a header, footer and the body of the modal.
 - `lightning-modal-body`
 - `lightning-modal-header`
 - `lightning-modal-footer`
 
 To create a modal component, import `LightningModal` from `lightning/modal`. The component has access to the normal LWC resources as well as the special container, helper components, methods, and events of the `lightning/modal` module.
 
-In this example, the `content` property passes data to the modal from the component that invokes it. 
+In this example, the `content` property passes data to the modal from the component that invokes it.
 
 ```js
 /* c/myModal.js */
@@ -28,7 +28,7 @@ export default class MyModal extends LightningModal {
 }
 ```
 
-The modal’s HTML template uses helper `lightning-modal-*` components to provide a header, footer, and the body of the modal. In this example, the content for the modal body comes from the `content` property we defined in the modal's JavaScript file. 
+The modal’s HTML template uses helper `lightning-modal-*` components to provide a header, footer, and the body of the modal. In this example, the content for the modal body comes from the `content` property we defined in the modal's JavaScript file.
 
 ```html
 <!-- c/myModal.html -->
@@ -42,19 +42,19 @@ The modal’s HTML template uses helper `lightning-modal-*` components to provid
 </template>
 ```
 
-The `lightning-modal-body` component is required for the modal template. 
+The `lightning-modal-body` component is required for the modal template.
 
-The `lightning-modal-header` and `lightning-modal-footer` components are optional, but recommended. The `lightning-modal-*` components render in the order they appear in the template. Place the `lightning-modal-body` component after `lightning-modal-header` and before the `lightning-modal-footer` component. 
+The `lightning-modal-header` and `lightning-modal-footer` components are optional, but recommended. The `lightning-modal-*` components render in the order they appear in the template. Place the `lightning-modal-body` component after `lightning-modal-header` and before the `lightning-modal-footer` component.
 
 #### Open a Modal Instance
 
 `LightningModal` provides an `.open()` method which opens a modal and returns a promise that asynchronously resolves with the result of the user’s interaction with the modal.
 
-Each invocation of a modal component’s `.open()` method creates a unique instance of the modal. You can think of a modal as a self-contained application that starts from scratch when it opens. It displays the content you pass in through the `.open()` method or that you set within the modal's HTML template. 
+Each invocation of a modal component’s `.open()` method creates a unique instance of the modal. You can think of a modal as a self-contained application that starts from scratch when it opens. It displays the content you pass in through the `.open()` method or that you set within the modal's HTML template.
 
-When you close a modal, the modal instance is destroyed, not hidden. On close, the modal must save the user’s input data or pass it to the invoking component as the promise result. Otherwise, the data is lost when the modal instance is closed. 
+When you close a modal, the modal instance is destroyed, not hidden. On close, the modal must save the user’s input data or pass it to the invoking component as the promise result. Otherwise, the data is lost when the modal instance is closed.
 
-The `.open()` method lets you assign values to the modal's properties. `LightningModal` provides these properties. 
+The `.open()` method lets you assign values to the modal's properties. `LightningModal` provides these properties.
 
 * `label` - Required. Sets the modal's title and assistive device label. If the modal has a header, set `label` in the `lightning-modal-header` component. If the modal doesn't have a header, set the `label` property when opening the modal.
 
@@ -95,14 +95,14 @@ The HTML template for this app contains a button that opens the modal and displa
 <template>
     <lightning-button
         onclick={handleClick}
-        aria-haspopup="modal"
+        aria-haspopup="dialog"
         label="Open My Modal">
-    </lightning-button> 
+    </lightning-button>
     <p>Result: {result}</p>
 </template>
 ```
 
-You can also use `.open()` to pass data from your invoking component into the modal with custom properties decorated with `@api`. These properties can be any type, such as a string or an object that’s an array of key/value pairs to be assigned to the new modal instance. 
+You can also use `.open()` to pass data from your invoking component into the modal with custom properties decorated with `@api`. These properties can be any type, such as a string or an object that’s an array of key/value pairs to be assigned to the new modal instance.
 
 For example, this app component sets an `options` property to a set of key/value pairs in `MyModal.open()`. The promise is handled using an arrow function that logs the result to the console.
 
@@ -155,14 +155,14 @@ export default class MyModal extends LightningModal {
             >
                 {option.label}
             </lightning-button>
-        </template>   
+        </template>
     </lightning-modal-body>
 </template>
 ```
 
 #### Close a Modal Instance
 
-Use `this.close(result)` to close the modal, where `result` is anything you want to return from the modal. The `.close()` operation is asynchronous to display a brief fade out animation before the modal is destroyed. The `result` data can’t be modified after the close operation begins. 
+Use `this.close(result)` to close the modal, where `result` is anything you want to return from the modal. The `.close()` operation is asynchronous to display a brief fade out animation before the modal is destroyed. The `result` data can’t be modified after the close operation begins.
 
 You can also close the modal with the default close button, the X at the top right corner. Closing a modal like this is the same as calling `this.close()` with an `undefined` result, so any data input is lost.
 
@@ -320,7 +320,7 @@ export default class MyModalForm extends LightningModal {
 
 A modal can only fire events captured by the component that opened it, not the modal itself. Normal techniques can't catch events that fire from the modal, because the events bubble up to a top root element outside of the component that opened the modal.
 
-To capture modal events, attach them in the `.open()` method invoked by the component that opens the modal. 
+To capture modal events, attach them in the `.open()` method invoked by the component that opens the modal.
 
 For example, here's a custom `select` event dispatched from `MyModal`.
 
@@ -374,18 +374,185 @@ handleOpenModal() {
 
 See [Create and Dispatch Events](https://developer.salesforce.com/docs/component-library/documentation/en/lwc/events_create_dispatch) in the LWC Dev Guide for more information about events.
 
+#### Modal Events with Aura
+
+For `LightningModal`, only the top level LWC component or application can communicate to the parent Aura component or application layer with eventing. This topmost component is usually the one that opens the `LightningModal`. `LightningModal`'s child components can't event to a parent Aura component or application layer.
+
+All required eventing that should occur during the `LightningModal`'s life cycle must be passed in when you call `Modal.open()`. See `onselect` within `.open()` in the **Modal Events** section. 
+
+If you want the Aura layer to respond to events within child components embedded in the `LightningModal`, use event bubbling to move any data that you want to make available to the Aura layer into the topmost LWC component that opened the modal. Then, send the event from the LWC component.
+
+With this in mind, there are two suggested methods for extracting data from the `LightningModal` to the Aura layer.
+
+1. To only communicate data out of modal after it's closed, first, close the modal, and pass the data out with `this.close({ data })`, and handle the data received in `.then((result) { ... })` where the Modal is initially opened.
+2. To continuously communicate data out of the `LightningModal` while the modal remains open, use events created and passed in when opening the modal from `Modal.open({ size, title, onmyevent })`.
+
+These extracting methods fit into the larger LWC Modal-to-Aura event workflow.
+
+1. Pass any events that should occur within the modal through `LightningModal`'s `.open()` method
+2. Have the `LightningModal` JavaScript code fire any custom events
+3. In the topmost LWC component that opened the modal, create an event handler to process the events, including stopping propagation.
+4. Fire a separate event containing the LWC-processed event details and send it to the Aura parent component.
+5. Use an Aura-based event handler to handle and process the event.
+
+For more information, see [Send Events to an Enclosing Aura Component](https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.events_sending_to_aura_components) and [Events Best Practices](https://developer.salesforce.com/docs/component-library/documentation/en/lwc/events_best_practices).
+
+Let's see this workflow in action. In this example, we'll create a button (`lightning-button`) that launches a modal (`LightningModal`) containing a tree grid component (`lightning-tree-grid`) with a button in each record row that automatically navigates our user to that record's page (`lightning-navigation`). This use case requires data passing between our LWC components and a parent Aura component. 
+
+Because `lightning-navigation` requires you to pass in a `recordId` to construct a page reference, we need to pass the record's data out of `LightningModal`, and then use the methods provided by `lightning-navigation`. With modal's limitations for event bubbling to the Aura layer, we can't just wrap the button or treegrid with `lightning-navigation`. We need to pull that data up to the topmost LWC component, where the `LightningModal` `.open()` is called, for our Aura wrapper to handle the navigation.
+
+So, we `import` the `lightning-navigation` component into the topmost LWC component that sits within the Aura layer by passing the data through `LightningModal`'s close method, `this.close({ data })`. Then the parent LWC component invokes the methods provided by `lightning-navigation`, which handles the navigation away from the page after the modal exits. From a UX perspective, this also lets us close the modal first, since `lightning-navigation` takes the user away from the current page.
+
+Note that this sample code isn't fully functional. We're only showing the relevant code that makes the `lightning-navigation` use case work with `LightningModal`.
+
+Here's our Aura component, containing our topmost LWC component, `myLwcAppModalLauncher`.
+
+```html
+/* c/myApp.cmp */
+<aura:component>
+    <!-- <c:myLwcTreeGridWithNavigation/> component is a child component
+        inside of <c:myLwcAppModalLauncher/>
+    -->
+    <c:myLwcAppModalLauncher/>
+</aura:component>
+```
+
+The topmost component, `myLwcAppModalLauncher`, launches and handles events that occur within our modal (`MyModal`). `myLwcAppModalLauncher` is also where we import the `lightning-navigation` component and use the `rowId` handed up through modal's `this.close({ ..., rowId })` function.
+
+```html
+<!-- c/myLwcAppModalLauncher.html -->
+
+<template>
+    <lightning-button
+        onclick={handleModalOpen}
+        aria-haspopup="dialog"
+        label="Launch Navigation Modal">
+    </lightning-button>
+</template>
+```
+
+```js
+/* c/myLwcAppModalLauncher.js */
+
+import { LightningElement, wire } from 'lwc';
+import { NavigationMixin } from 'lightning/navigation';
+import MyModal from 'c/myModalWithTreeGridNavigation';
+
+export default class MyLwcAppModalLauncher extends NavigationMixin(LightningElement) {
+
+/// ... other modal code
+
+handleModalOpen() {
+    // open up the Modal
+    MyModal.open({
+        size: 'medium',
+        heading: 'Navigate to Record Page',
+        description: 'Navigate to a record page by clicking the row button',
+        options: [{ data }, { data }],
+    }).then((result) => {
+        // when the LightningModal closes, result is whatever
+        // data that was passed out using this.close({ data })
+        if (result === null) {
+            // do something else
+        } else {
+            // shouldNavigate is boolean, arbitrary
+            // rowId is what's needed for lightning-navigation
+            const { shouldNavigate, rowId } = result;
+            if (shouldNavigate) {
+                this.navigateToObjectHome(rowId);
+            }
+        }
+    });
+}
+
+navigateToObjectHome(rowId) {
+    // construct the page ref
+    const pageRef = {
+        type: 'standard__recordPage',
+        attributes: {
+            recordId: rowId,
+            actionName: 'view'
+        }
+    }
+    // then call the .Navigate method with the pageRef
+    this[NavigationMixin.Navigate](pageRef);
+}
+
+/* ... other modal code */
+```
+
+This `template` is our modal, containing a tree grid with the navigation buttons, named `c-my-lwc-tree-grid-with-navigation`. The `handleNavSelection` function in this component processes the `rowId` data for the modal component to pass to its parent.
+
+```html
+<!-- c/myModalWithTreeGridNavigation.html -->
+<template>
+    <lightning-modal-header label="My Modal Heading">
+        The modal tagline.
+    </lightning-modal-header>
+    <lightning-modal-body>
+        <h2>Choose a record to navigate to:</h2>
+        <!-- custom event listener when button clicked inside tree grid -->
+        <div onnavselection={handleNavSelection}>
+            <c-my-lwc-tree-grid-with-navigation></c-my-lwc-tree-grid-with-navigation>
+        </div>
+    </lightning-modal-body>
+    <!-- no <lightning-modal-footer> in this example -->
+</template>
+```
+
+```js
+/* c/myModalWithTreeGridNavigation.js */
+handleNavSelection(event) {
+    event.stopPropagation();
+    const { detail: { rowId } } = event;
+    if (rowId) {
+        // rowId value is important to lightning-navigation
+        // passing this data out through the LightningModal's
+        // .close() method, then handled in the .then((result) {})
+        // see code above: c/myLwcAppModalLauncher.js
+        this.close({ shouldNavigate: true, rowId });
+    }
+}
+```
+
+```js
+/* c/myLwcTreeGridWithNavigation.js */
+
+dispatchNavSelectionEvent(rowId) {
+    // add rowId to event.detail
+    // this custom event listener exists in
+    // LightningModal body code, see code above:
+    // c/myModalWithTreeGridNavigation.html
+    const eventToFire = new CustomEvent('navselection', {
+        detail: { rowId },
+        bubbles: true,
+        cancelable: false
+    });
+    // dispatch custom event
+    // see event listener added to lightning-modal-body
+    this.dispatchEvent(eventToFire);
+}
+
+handleRowButtonClick(event) {
+    // simplified handler to get row.Id
+    // from the tree grid row button that was clicked
+    const row = event.detail.row;
+    this.dispatchNavSelectionEvent(row.Id);
+}
+```
+
 #### Styling Variants
 
-The `lightning-modal-header` and `lightning-modal-footer` child components are optional, and you can choose to not include one or the other in your modal. 
+The `lightning-modal-header` and `lightning-modal-footer` child components are optional, and you can choose to not include one or the other in your modal.
 
 The headerless variant of `LightningModal` has these additional requirements.
 - Must set a descriptive modal title with the `label` property using `Modal.open({ label })` or you’ll get a console error.
--  The `label` property is required for all variants of `LightningModal`. Assistive devices read the `label` value, even though the headerless modal variant doesn't display the label. 
+-  The `label` property is required for all variants of `LightningModal`. Assistive devices read the `label` value, even though the headerless modal variant doesn't display the label.
 -  Because this variant doesn't use `lightning-modal-header`, you have to manually create an `<h1>` heading in `lightning-modal-body`. Provide accessible structure by starting with heading level `<h1>` and using levels up to `<h6>` appropriately. For more information, see [Semantic Structure, Headings on WebAim.org](https://webaim.org/techniques/semanticstructure/#headings).
 
 The `LightningModal` component also supports the SLDS [Directional variant](https://www.lightningdesignsystem.com/components/modals/#Directional) modal blueprint pattern.
 
-To achieve the directional button layout, place the buttons in a `div` with the `slds-modal__footer_directional` class. 
+To achieve the directional button layout, place the buttons in a `div` with the `slds-modal__footer_directional` class.
 
 ```html
 <!-- c/modalDirectional.html -->
@@ -403,7 +570,7 @@ To achieve the directional button layout, place the buttons in a `div` with the
 
 #### Styling Hooks
 
-The `lightning-modal-*` helper components support [style hooks](https://www.lightningdesignsystem.com/components/modals/#Styling-Hooks-Overview). The styling hooks for the template that invokes the helper components doesn't carry over to them, so you must style each helper component individually. 
+The `lightning-modal-*` helper components support [style hooks](https://www.lightningdesignsystem.com/components/modals/#Styling-Hooks-Overview). The styling hooks for the template that invokes the helper components doesn't carry over to them, so you must style each helper component individually.
 
 Customizing the styling on the white modal frame and background, close button, or gray backdrop isn't supported.
 
@@ -411,4 +578,4 @@ Customizing the styling on the white modal frame and background, close button, o
 
 The `lightning-modal-header` component renders the `label` value in an `<h1>` element. If your modal uses the header, begin any additional heading levels in the modal with `<h2>` for accessibility. Provide accessible structure by using heading levels up to `<h6>` appropriately. For more information, see [Semantic Structure, Headings on WebAim.org](https://webaim.org/techniques/semanticstructure/#headings).
 
-To include tagline text or link content for the header section, add it between the `<lightning-modal-header>` tags. 
+To include tagline text or link content for the header section, add it between the `<lightning-modal-header>` tags.

package/src/lightning/positionLibrary/overlayDetector.js

@@ -6,6 +6,7 @@ export const OVERLAY_TYPE = {
     DIALOG: 'lightning-dialog',
     POPOVER: 'lightning-popover',
     PANEL: 'uiPanel',
+    SLDSMODAL: 'slds-modal',
 };
 
 export function isOverlay(element) {
@@ -30,6 +31,13 @@ export function isOverlay(element) {
     if (isPanel) {
         return OVERLAY_TYPE.PANEL;
     }
+
+    const isSldsModal =
+        element.classList && element.classList.contains(OVERLAY_TYPE.SLDSMODAL);
+    if (isSldsModal) {
+        return OVERLAY_TYPE.SLDSMODAL;
+    }
+
     return OVERLAY_TYPE.NONE;
 }
 
@@ -80,7 +88,8 @@ export class OverlayDetector {
         return (
             this.isInside &&
             (this._detection.type === OVERLAY_TYPE.MODAL ||
-                this._detection.type === OVERLAY_TYPE.DIALOG)
+                this._detection.type === OVERLAY_TYPE.DIALOG ||
+                this._detection.type === OVERLAY_TYPE.SLDSMODAL)
         );
     }
 

package/src/lightning/primitiveCellCheckbox/primitiveCellCheckbox.js

@@ -11,12 +11,26 @@ const i18n = {
 };
 
 export default class PrimitiveCellCheckbox extends PrimitiveDatatableCell {
+    _columnHeaderId = '';
     @api rowIndex = 0;
     @api isSelected = false;
     @api isDisabled = false;
     @api type = 'checkbox';
     @api dtContextId;
-    @api columnHeaderId = ''; //required as a part for aria-labelledby
+    @api
+    get columnHeaderId() {
+        return this._columnHeaderId;
+    }
+
+    set columnHeaderId(id) {
+        this._columnHeaderId = id || '';
+        const labelId = this.computedLabelId;
+        if (labelId) {
+            synchronizeAttrs(this.template.querySelector('input'), {
+                'aria-labelledby': `${labelId} ${this._columnHeaderId}`,
+            });
+        }
+    }
 
     render() {
         if (this.type === 'radio') {

package/src/lightning/primitiveHeaderFactory/primitiveHeaderFactory.js

@@ -1,4 +1,5 @@
 import labelChooseARow from '@salesforce/label/LightningDatatable.chooseARow';
+import labelChooseARowSelectAll from '@salesforce/label/LightningDatatable.chooseARowSelectAll';
 import labelSelectAll from '@salesforce/label/LightningDatatable.selectAll';
 import labelSort from '@salesforce/label/LightningDatatable.sort';
 import labelSortAsc from '@salesforce/label/LightningDatatable.sortAsc';
@@ -15,6 +16,7 @@ import nonsortable from './nonsortableHeader.html';
 
 const i18n = {
     chooseARow: labelChooseARow,
+    chooseARowSelectAll: labelChooseARowSelectAll,
     selectAll: labelSelectAll,
     sort: labelSort,
     sortAsc: labelSortAsc,
@@ -201,6 +203,17 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
         );
     }
 
+    /**
+     * Computes column header label
+     *
+     * @return {string} The computed column header label
+     */
+    get computedColumnHeaderLabel() {
+        return this.showCheckbox
+            ? this.i18n.chooseARowSelectAll
+            : this.i18n.chooseARow;
+    }
+
     /**
      * Returns the header's aria role
      *
@@ -316,6 +329,22 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
         if (this.isSelectableHeader && this.showCheckbox) {
             this.updateBulkSelectionCheckbox();
         }
+        if (this.isSelectableHeader) {
+            const columnHeaderId = this.computedColumnHeaderId;
+            const columnHeaderEvent = new CustomEvent('privatecolumnheaderid', {
+                detail: columnHeaderId,
+            });
+            this.dispatchEvent(columnHeaderEvent);
+        }
+    }
+
+    disconnectedCallback() {
+        if (this.isSelectableHeader) {
+            const columnHeaderEvent = new CustomEvent('privatecolumnheaderid', {
+                detail: null,
+            });
+            this.dispatchEvent(columnHeaderEvent);
+        }
     }
 
     /************************** EVENT HANDLERS ***************************/

package/src/lightning/primitiveHeaderFactory/selectableHeader.html

@@ -1,9 +1,11 @@
 <template>
+    <span id="column-group-header" class="slds-assistive-text" data-column-header>
+        {computedColumnHeaderLabel}
+    </span>
     <!-- Header Content -->
     <div class="slds-th__action slds-th__action_form slds-cell-fixed" style={columnStyles}>
         <template if:true={showCheckbox}>
             <span class="slds-checkbox">
-                
                 <!-- Selectable Checkbox -->
                 <input
                     type="checkbox"
@@ -23,10 +25,5 @@
                 </label>
             </span>
         </template>
-        <template if:false={showCheckbox}>
-            <span id="column-group-header" class="slds-assistive-text" data-column-header>
-                {i18n.chooseARow}
-            </span>
-        </template>
     </div>
 </template>

package/src/lightning/progressIndicator/progressIndicator.js

@@ -33,7 +33,7 @@ export default class LightningProgressIndicator extends LightningElement {
 
     /**
      * Changes the appearance of the progress indicator for the base type only.
-     * Valid values are base or shaded. The shaded variant adds a light gray border to the step indicators.
+     * Valid values are base or shade. The shade variant adds a light gray border to the step indicators.
      * The default is base.
      * @type {string}
      * @default base

package/src/lightning/treeGrid/__docs__/treeGrid.md

@@ -36,6 +36,9 @@ include:
 -   Selecting of rows
 -   Text wrapping and clipping
 
+This component provides styling for up to 20 nested levels. For tree grids that require more than 20 nested levels,
+build your own component.
+
 A checkbox is displayed by default in the first column. The `hide-checkbox-column` attribute
 removes the checkbox.
 

package/src/lightning/treeGrid/treeGrid.js

@@ -272,39 +272,34 @@ export default class LightningTreeGrid extends LightningElement {
 
     handleRowSelection(event) {
         event.stopPropagation();
-        let selectedRowKeys;
         // pass the event through
-        switch (event.detail.config.action) {
-            case ROWS_ACTION.ROW_SELECT:
-                selectedRowKeys = this._selectedRowKeys.slice();
-                this._selectedRowKeys.push(event.detail.config.value);
-                break;
-            case ROWS_ACTION.ROW_DESELECT: {
-                const index = this._selectedRowKeys.indexOf(
-                    event.detail.config.value
-                );
-                selectedRowKeys = this._selectedRowKeys.slice();
-                this._selectedRowKeys.splice(index, 1);
-                break;
+        if (event.detail.config) {
+            switch (event.detail.config.action) {
+                case ROWS_ACTION.ROW_SELECT:
+                    this._selectedRowKeys.push(event.detail.config.value);
+                    break;
+                case ROWS_ACTION.ROW_DESELECT: {
+                    const index = this._selectedRowKeys.indexOf(
+                        event.detail.config.value
+                    );
+                    this._selectedRowKeys.splice(index, 1);
+                    break;
+                }
+                case ROWS_ACTION.SELECT_ALL_ROWS:
+                    this._selectedRowKeys = this.getSelectedRowKeys(
+                        event.detail.selectedRows
+                    );
+                    break;
+                case ROWS_ACTION.DESELECT_ALL_ROWS:
+                    this._selectedRowKeys = this.getSelectedRowKeys(
+                        event.detail.selectedRows
+                    );
+                    break;
+                default:
+                    break;
             }
-            case ROWS_ACTION.SELECT_ALL_ROWS:
-                selectedRowKeys = this._selectedRowKeys.slice();
-                this._selectedRowKeys = this.getSelectedRowKeys(
-                    event.detail.selectedRows
-                );
-                break;
-            case ROWS_ACTION.DESELECT_ALL_ROWS:
-                selectedRowKeys = this._selectedRowKeys.slice();
-                this._selectedRowKeys = this.getSelectedRowKeys(
-                    event.detail.selectedRows
-                );
-                break;
-            default:
-                this._selectedRowKeys.push(event.detail.config.value);
-                selectedRowKeys = this._selectedRowKeys.slice();
-                break;
+            event.detail.config.selectedRowKeys = this._selectedRowKeys.slice();
         }
-        event.detail.config.selectedRowKeys = selectedRowKeys;
         this.fireSelectedRowsChange(event.detail);
     }
 

package/src/lightning/utilsPrivate/normalize.js

@@ -25,6 +25,23 @@ export function normalizeBoolean(value) {
     return typeof value === 'string' || !!value;
 }
 
+const isNotNumber = (value) => {
+    // Need to make sure it is a number than check isNaN
+    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN#difference_between_number.isnan_and_global_isnan
+    if (
+        Number.isNaN(value) ||
+        value === null ||
+        value === undefined ||
+        value === '' ||
+        Array.isArray(value)
+    ) {
+        return true;
+    }
+    // to eliminate non numeric string or other non numeric-typed objects
+    const convertedNumber = Number(value);
+    return Number.isNaN(convertedNumber);
+};
+
 /**
  * A number normalization utility for attributes.
  * @param {number} value - The value to normalize.
@@ -39,18 +56,17 @@ export function normalizeNumber(value, config = {}) {
     const returnValueIfInvalid =
         (typeof fallbackValue === 'number' && fallbackValue) || undefined;
 
-    // Need to make sure it is a number than check isNaN
-    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN#difference_between_number.isnan_and_global_isnan
-    if (typeof value !== 'number' || Number.isNaN(value)) {
+    if (isNotNumber(value)) {
         return returnValueIfInvalid;
     }
-    if (typeof minValue === 'number' && value < minValue) {
+    if (!isNotNumber(value) && value < minValue) {
         return returnValueIfInvalid;
     }
-    if (typeof maxValue === 'number' && value > maxValue) {
+    if (!isNotNumber(value) && value > maxValue) {
         return returnValueIfInvalid;
     }
-    return value;
+    // multiplying 1 is to make sure to convert from a numeric string to a number
+    return value * 1;
 }
 
 export function normalizeArray(value) {