lightning-base-components 1.21.4-alpha → 1.21.6-alpha

package/src/lightning/datatable/sort.js

@@ -1,5 +1,4 @@
 import { assert } from 'lightning/utilsPrivate';
-import { getColumnName } from './columns-shared';
 
 /**
  * Sets the default sort direction. When clicking on a header to sort,
@@ -28,20 +27,29 @@ export function setDefaultSortDirection(state, value) {
  * `sortedDirection` will be `undefined`
  *
  * @param {Object} state The datatable state
- * @param {String} value The value to update the sort direction to
+ * @param {String|String[]} value The value or values to update the sort direction to
  */
 export function setSortedDirection(state, value) {
-    if (value === 'asc' || value === 'desc') {
+    if (typeof value === 'string' && (value === 'asc' || value === 'desc')) {
         state.sortedDirection = value;
-        return;
+    } else if (Array.isArray(value)) {
+        // If value is an array, validate each item
+        value.forEach((item) => {
+            assert(
+                item === 'asc' || item === 'desc',
+                `The "sortedDirection" value passed into lightning:datatable
+                is incorrect. All values should be one of 'asc' or 'desc'.`
+            );
+        });
+        state.sortedDirection = value;
+    } else {
+        assert(
+            false,
+            `The "sortedDirection" value passed into lightning:datatable
+            is incorrect. It should be either a single value of 'asc' or 'desc'
+            or an array of such values.`
+        );
     }
-    assert(
-        false,
-        `The "sortedDirection" value passed into lightning:datatable
-        is incorrect, "sortedDirection" value should be one of
-        'asc' or 'desc'.`
-    );
-    state.sortedDirection = undefined;
 }
 
 /**
@@ -51,10 +59,10 @@ export function setSortedDirection(state, value) {
  * to `undefined`
  *
  * @param {Object} state The datatable state
- * @param {String} value The value to update the sort state to
+ * @param {String|String[]} value The value or values to update the sort state to
  */
 export function setSortedBy(state, value) {
-    if (typeof value === 'string') {
+    if (typeof value === 'string' || Array.isArray(value)) {
         state.sortedBy = value;
     } else {
         state.sortedBy = undefined;
@@ -68,13 +76,26 @@ export function setSortedBy(state, value) {
  */
 export function updateSorting(state) {
     const { columns, defaultSortDirection, sortedBy, sortedDirection } = state;
+
+    // Determine if sortedBy is an array
+    const isSortedByArray = Array.isArray(sortedBy);
+
     for (let i = 0, { length } = columns; i < length; i += 1) {
         const col = columns[i];
-        if (col.sortable && getColumnName(col) === sortedBy) {
+        if (
+            col.sortable &&
+            (isSortedByArray
+                ? sortedBy.includes(col.name)
+                : sortedBy === col.name)
+        ) {
             col.sorted = true;
             col.sortAriaLabel =
                 sortedDirection === 'desc' ? 'descending' : 'ascending';
             col.sortedDirection = sortedDirection;
+
+            // If sortedBy is an array, set col.sorted to the index in the array
+            // Otherwise, set it to true
+            col.sorted = isSortedByArray ? sortedBy.indexOf(col.name) : true;
         } else {
             col.sorted = false;
             col.sortAriaLabel = col.sortable ? 'other' : null;

package/src/lightning/datatable/state.js

@@ -10,7 +10,9 @@ export const getDefaultState = function () {
     return {
         // columns
         columns: [],
+        hadTreeDataTypePreviously: false,
         hideCheckboxColumn: false,
+        treeColumn: undefined,
 
         // rows
         data: [],
@@ -90,5 +92,8 @@ export const getDefaultState = function () {
             rows: {},
             table: {},
         },
+
+        // table rendered flag
+        hasRenderedFirstTime: false,
     };
 };

package/src/lightning/datatable/tree.js

@@ -1,36 +1,3 @@
-/**
- * Determines if any of the columns in the datatable are of a tree-type.
- *
- * @param {Object} state The datatable state
- * @returns {Boolean} Whether any of the columns are of a tree-type
- */
-export function hasTreeDataType(state) {
-    const { columns } = state;
-    for (let i = 0, { length } = columns; i < length; i += 1) {
-        if (columns[i].type === 'tree') {
-            return true;
-        }
-    }
-    return false;
-}
-
-/**
- * Retrieves the first tree-type column from the state.
- *
- * @param {Object} state The datatable state
- * @returns {Object} The first tree-type column, else `null`
- */
-export function getStateTreeColumn(state) {
-    const { columns } = state;
-    for (let i = 0, { length } = columns; i < length; i += 1) {
-        const col = columns[i];
-        if (col.type === 'tree') {
-            return col;
-        }
-    }
-    return null;
-}
-
 /**
  * Dispatches an event when a row is toggled to be expanded or collapsed.
  *

package/src/lightning/datatable/utils.js

@@ -24,6 +24,7 @@ const CLASS_SET_PROTOTYPE = {
 
 const NON_NEGATIVE_INTEGER_REGEXP = /^\d+$/;
 const POSITIVE_INTEGER_REGEXP = /^[0-9]*[1-9][0-9]*$/;
+const RENDER_MODE_ROLE_BASED_REGEXP = /\brole-based\b/;
 
 /**
  * Escapes double quotes. Later can be
@@ -91,14 +92,13 @@ export function getGridContainerFromScrollerY(scrollerY) {
 }
 
 /**
- * Gets the scrollerX element from the scrollerY element.
+ * Gets the scrollerX element from the template.
  *
- * @param {Node} scrollerY The scrollerY element
+ * @param {Node} template The datatable template
  * @returns {Node} The scrollerX element
  */
-export function getScrollerXFromScrollerY(scrollerY) {
-    const { parentElement: scrollerX } = scrollerY;
-    return scrollerX;
+export function getScrollerX(template) {
+    return template.querySelector('.slds-scrollable_x');
 }
 
 /**
@@ -131,6 +131,16 @@ export function isNonNegativeInteger(value) {
     return NON_NEGATIVE_INTEGER_REGEXP.test(value);
 }
 
+/**
+ * Tests if render mode is role-based.
+ *
+ * @param {String} renderMode The render mode to test
+ * @returns {Boolean} Whether the render mode is role-based
+ */
+export function isRenderModeRoleBased(renderMode) {
+    return RENDER_MODE_ROLE_BASED_REGEXP.test(renderMode);
+}
+
 /**
  * Accepts a value which may be an Integer or String and tests that value
  * with respect to the numberType:

package/src/lightning/datepicker/datepicker.js

@@ -681,9 +681,14 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
     hideCalendarAndFocusTrigger() {
         this.hideCalendar();
 
-        if (this.calendarTrigger) {
-            this.calendarTrigger.focus();
-        }
+        if (this.calendarTrigger)
+            if (this.calendarTrigger === this.calendarButtonElement) {
+                // Fix for W-14258862, focus is transferred to the input element
+                // instead of the button element when trigger is button
+                this.inputElement.focus();
+            } else {
+                this.calendarTrigger.focus();
+            }
     }
 
     focusCalendar() {
@@ -752,6 +757,10 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
         return this.template.querySelector('input');
     }
 
+    get calendarButtonElement() {
+        return this.template.querySelector('lightning-button-icon');
+    }
+
     dispatchChangeEvent() {
         this.dispatchEvent(
             new CustomEvent('change', {

package/src/lightning/datepicker/form-element.slds.css

@@ -187,7 +187,10 @@
     }
 
 :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
-        border-bottom: 0; /* Remove border when using legacy version of slds-form-element */
+        /* @W-14518344 The following line still exists in SLDS-internal
+           but it was removed here because it was causing the input 
+           component to not display it's bottom border
+        border-bottom: 0; Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
 

package/src/lightning/datetimepicker/form-element.slds.css

@@ -187,7 +187,10 @@
     }
 
 :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
-        border-bottom: 0; /* Remove border when using legacy version of slds-form-element */
+        /* @W-14518344 The following line still exists in SLDS-internal
+           but it was removed here because it was causing the input 
+           component to not display it's bottom border
+        border-bottom: 0; Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
 

package/src/lightning/dualListbox/__docs__/dualListbox.md

@@ -176,7 +176,3 @@ The event properties are as follows.
 | bubbles    | true  | This event bubbles up through the DOM.                                                                    |
 | cancelable | false | This event has no default behavior that can be canceled. You can't call `preventDefault()` on this event. |
 | composed   | true  | This event propagates outside of the component in which it was dispatched.                                |
-
-#### Source Code
-
-`lightning-dual-listbox` 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/dualListbox/form-element.slds.css

@@ -187,7 +187,10 @@
     }
 
 :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
-        border-bottom: 0; /* Remove border when using legacy version of slds-form-element */
+        /* @W-14518344 The following line still exists in SLDS-internal
+           but it was removed here because it was causing the input 
+           component to not display it's bottom border
+        border-bottom: 0; Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
 

package/src/lightning/dynamicIcon/__docs__/dynamicIcon.md

@@ -60,7 +60,3 @@ However, on smaller screens and windows the `lightning-dynamic-icon` can also be
 informational. In this case, include `alternative-text`. If you don't include
 `alternative-text`, check smaller screens and windows to ensure that the
 `lightning-dynamic-icon` is only decorative on all formats.
-
-#### Source Code
-
-`lightning-dynamic-icon` 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/formattedDateTime/__docs__/formattedDateTime.md

@@ -219,10 +219,6 @@ Displays: December 03, 2017, 12:00 PM
 
 This component has usage differences from its Aura counterpart. See [Base Components: Aura Vs Lightning Web Components](https://developer.salesforce.com/docs/platform/lwc/guide/migrate-map-aura-lwc-components) in the Lightning Web Components Developer Guide.
 
-#### Source Code
-
-`lightning-formatted-date-time` 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.
-
 #### LWC Recipes
 
 The [LWC Recipes GitHub repository](https://github.com/trailheadapps/lwc-recipes) contains code examples for Lightning Web Components that you can test in an org.

package/src/lightning/formattedLocation/__docs__/formattedLocation.md

@@ -27,7 +27,3 @@ longitude of -122.3948370.
     </lightning-formatted-location>
 </template>
 ```
-
-#### Source Code
-
-`lightning-formatted-location` 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/formattedName/__docs__/formattedName.md

@@ -47,7 +47,3 @@ in the Salesforce Help.
 To create a form that takes in user input for names, you can use the
 `lightning-input-name` component, which displays a name compound field that
 supports user input for salutation, suffix, and so on.
-
-#### Source Code
-
-`lightning-formatted-name` 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/formattedNumber/__docs__/formattedNumber.md

@@ -166,10 +166,6 @@ The locale set in your Salesforce user preferences determines how numbers are fo
 The `format-style` attribute is called the `style` attribute in the Aura version of this component.
 See [Base Components: Aura Vs Lightning Web Components](https://developer.salesforce.com/docs/platform/lwc/guide/migrate-map-aura-lwc-components).
 
-#### Source Code
-
-`lightning-formatted-number` 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.
-
 #### LWC Recipes
 
 The [LWC Recipes GitHub repository](https://github.com/trailheadapps/lwc-recipes) contains code examples for Lightning Web Components that you can test in an org.

package/src/lightning/formattedPhone/__docs__/formattedPhone.md

@@ -67,10 +67,6 @@ To display the phone number in plain text without a hyperlink, include the
 </template>
 ```
 
-#### Source Code
-
-`lightning-formatted-phone` 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.
-
 #### LWC Recipes
 
 The [LWC Recipes GitHub repository](https://github.com/trailheadapps/lwc-recipes) contains code examples for Lightning Web Components that you can test in an org.

package/src/lightning/formattedText/__docs__/formattedText.md

@@ -52,7 +52,3 @@ use `lightning-formatted-email`.
 
 For rich text that uses tags beyond anchor tags, use
 `lightning-formatted-rich-text` instead.
-
-#### Source Code
-
-`lightning-formatted-text` 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/formattedTime/__docs__/formattedTime.md

@@ -33,7 +33,3 @@ The following example returns `10:12:30 PM`.
 Salesforce uses the format HH:mm:ss.SSSZ for time fields. The time field is a
 timestamp without the date included. Time values in Salesforce are not
 localized or associated with a time zone.
-
-#### Source Code
-
-`lightning-formatted-time` 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/formattedUrl/__docs__/formattedUrl.md

@@ -113,7 +113,3 @@ behavior with `lightning-formatted-url`.
 To create a link with a
 custom `onclick` event handler, use the HTML anchor tag `<a>` instead. To create a URL that navigates to another page in Salesforce, use
 [`lightning-navigation`](bundle/lightning-navigation/documentation).
-
-#### Source Code
-
-`lightning-formatted-url` 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/groupedCombobox/form-element.slds.css

@@ -187,7 +187,10 @@
     }
 
 :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
-        border-bottom: 0; /* Remove border when using legacy version of slds-form-element */
+        /* @W-14518344 The following line still exists in SLDS-internal
+           but it was removed here because it was causing the input 
+           component to not display it's bottom border
+        border-bottom: 0; Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
 

package/src/lightning/helptext/form-element.slds.css

@@ -187,7 +187,10 @@
     }
 
 :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
-        border-bottom: 0; /* Remove border when using legacy version of slds-form-element */
+        /* @W-14518344 The following line still exists in SLDS-internal
+           but it was removed here because it was causing the input 
+           component to not display it's bottom border
+        border-bottom: 0; Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
 

package/src/lightning/icon/__docs__/icon.md

@@ -176,7 +176,3 @@ screens and windows to ensure that the icon is decorative on all formats.
 Icons are not available in Lightning Out, but they are available in Lightning Components for Visualforce and other experiences.
 
 For IE11, the custom icon feature is disabled for now due to performance issues.
-
-#### Source Code
-
-`lightning-icon` 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/input/form-element.slds.css

@@ -187,7 +187,10 @@
     }
 
 :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
-        border-bottom: 0; /* Remove border when using legacy version of slds-form-element */
+        /* @W-14518344 The following line still exists in SLDS-internal
+           but it was removed here because it was causing the input 
+           component to not display it's bottom border
+        border-bottom: 0; Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
 

package/src/lightning/inputAddress/form-element.slds.css

@@ -187,7 +187,10 @@
     }
 
 :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
-        border-bottom: 0; /* Remove border when using legacy version of slds-form-element */
+        /* @W-14518344 The following line still exists in SLDS-internal
+           but it was removed here because it was causing the input 
+           component to not display it's bottom border
+        border-bottom: 0; Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
 

package/src/lightning/inputAddress/inputAddress.js

@@ -311,16 +311,18 @@ export default class LightningInputAddress extends LightningShadowBaseClass {
     }
 
     /**
-     * If present, a compact address lookup using Google Maps is enabled.
+     * If present, the street field is rendered as two separate inputs instead of a single textarea.
+     * In addition, the search field is no longer rendered as a separate input and its functionality
+     * is moved to the street field.
      * @type {boolean}
      * @default false
      */
     @api
-    get showCompactAddressLookup() {
-        return this._showAddressLookup;
+    get showCompactAddress() {
+        return this._showCompactAddress;
     }
-    set showCompactAddressLookup(value) {
-        this._showCompactAddressLookup = normalizeBoolean(value);
+    set showCompactAddress(value) {
+        this._showCompactAddress = normalizeBoolean(value);
     }
 
     /**
@@ -491,6 +493,10 @@ export default class LightningInputAddress extends LightningShadowBaseClass {
         reflectAttribute(this, 'variant', this.variant);
     }
 
+    get showCompactAddressLookup() {
+        return this._showAddressLookup && this._showCompactAddress;
+    }
+
     get computedFieldsetClass() {
         return classSet(
             'slds-form-element slds-form-element_compound slds-form-element_address'
@@ -571,7 +577,7 @@ export default class LightningInputAddress extends LightningShadowBaseClass {
             langCode,
             countryCode,
             hasCountryPicklist,
-            this._showCompactAddressLookup
+            this._showCompactAddress
         );
     }
 
@@ -580,7 +586,7 @@ export default class LightningInputAddress extends LightningShadowBaseClass {
         return getRequiredFields(
             langCode,
             countryCode,
-            this._showCompactAddressLookup
+            this._showCompactAddress
         );
     }
 

package/src/lightning/inputLocation/__docs__/inputLocation.md

@@ -81,7 +81,3 @@ The `change` event properties are as follows.
 | bubbles    | true  | This event bubbles up through the DOM.                                                                    |
 | cancelable | false | This event has no default behavior that can be canceled. You can't call `preventDefault()` on this event. |
 | composed   | true  | This event propagates outside of the component in which it was dispatched.                                |
-
-#### Source Code
-
-`lightning-input-location` 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/inputLocation/form-element.slds.css

@@ -187,7 +187,10 @@
     }
 
 :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
-        border-bottom: 0; /* Remove border when using legacy version of slds-form-element */
+        /* @W-14518344 The following line still exists in SLDS-internal
+           but it was removed here because it was causing the input 
+           component to not display it's bottom border
+        border-bottom: 0; Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
 

package/src/lightning/inputName/form-element.slds.css

@@ -187,7 +187,10 @@
     }
 
 :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
-        border-bottom: 0; /* Remove border when using legacy version of slds-form-element */
+        /* @W-14518344 The following line still exists in SLDS-internal
+           but it was removed here because it was causing the input 
+           component to not display it's bottom border
+        border-bottom: 0; Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
 

package/src/lightning/layout/__docs__/layout.md

@@ -136,7 +136,3 @@ which creates two columns with fixed widths.
     <div class="slds-col slds-size_2-of-3">Columns 2 content</div>
 </div>
 ```
-
-#### Source Code
-
-`lightning-layout` 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/layoutItem/__docs__/layoutItem.md

@@ -81,7 +81,3 @@ Here is an example using default values.
 #### Usage Considerations
 
 This component has usage differences from its Aura counterpart. See [Base Components: Aura Vs Lightning Web Components](https://developer.salesforce.com/docs/platform/lwc/guide/migrate-map-aura-lwc-components) in the Lightning Web Components Developer Guide.
-
-#### Source Code
-
-`lightning-layout-item` 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/lookupAddress/form-element.slds.css

@@ -187,7 +187,10 @@
     }
 
 :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
-        border-bottom: 0; /* Remove border when using legacy version of slds-form-element */
+        /* @W-14518344 The following line still exists in SLDS-internal
+           but it was removed here because it was causing the input 
+           component to not display it's bottom border
+        border-bottom: 0; Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
 

package/src/lightning/menuItem/__docs__/menuItem.md

@@ -120,7 +120,3 @@ is shown for the menu item when `is-draft` is `true`. The
 reason the item is considered in a draft state. The draft state might be used
 to show there is unsaved state or data that could be lost, for example if
 there's a user change in a customizable menu.
-
-#### Source Code
-
-`lightning-menu-item` 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/menuSubheader/menu-subheader.slds.css

@@ -3,7 +3,7 @@
   Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   :host([data-render-mode="shadow"]) .slds-dropdown__header {
-    font-size: var(--slds-g-font-scale-neg-1);
+    font-size: var(--slds-g-font-size-base);
     font-weight: var(--slds-g-font-weight-7);
     padding-block: var(--slds-g-spacing-2);
     padding-inline: var(--slds-g-spacing-3);