lightning-base-components 1.21.3-alpha → 1.21.5-alpha

package/src/lightning/datatable/wrapText.js

@@ -1,19 +1,18 @@
 import labelClipText from '@salesforce/label/LightningDatatable.clipText';
 import labelWrapText from '@salesforce/label/LightningDatatable.wrapText';
 import { normalizeBoolean } from 'lightning/utilsPrivate';
-import { getStateColumnIndex, getColumns } from './columns';
+import { getStateColumnIndex } from './columns';
 import { normalizeNumberAttribute } from './utils';
 import { getDefaultState } from './state';
 
-const WRAP_TEXT_DEFAULT = false;
-const NON_WRAPPABLE_TYPES = [
+const NON_WRAPPABLE_TYPES = new Set([
     'action',
     'boolean',
     'button',
     'button-icon',
     'date-local',
     'rowNumber',
-];
+]);
 
 const i18n = {
     clipText: labelClipText,
@@ -22,39 +21,23 @@ const i18n = {
 
 /************************** WRAP TEXT STATE **************************/
 
-/**
- * Returns a boolean representing whether or not the column should be text wrapped
- *
- * NOTE: Wrap text is not supported in IE, so default parameters are fine here.
- *
- * @param {Object} state Datatable's state object
- * @param {String} colKeyValue The column key value to look up wrap text configuration
- * @returns {Boolean} Whether the text is currently wrapped
- */
-export function getWrapTextState(state = getDefaultState(), colKeyValue) {
-    return state.wrapText[colKeyValue] || WRAP_TEXT_DEFAULT;
-}
-
 /**
  * Sets a boolean value in state's wrapText object against the column key value
  * representing whether or not the column is text wrapped.
  *
- * NOTE: Wrap text is not supported in IE, so default parameters are fine here.
- *
  * @param {Object} state The datatable state
- * @param {Object} col The datatable column definitions
+ * @param {Object} col The datatable column definition
  */
 export function setWrapTextState(state = getDefaultState(), col) {
-    if (isWrappableType(col.type)) {
-        state.wrapText[col.colKeyValue] =
-            normalizeBoolean(col.wrapText) || WRAP_TEXT_DEFAULT;
+    if (!NON_WRAPPABLE_TYPES.has(col.type)) {
+        state.wrapText[col.colKeyValue] = normalizeBoolean(col.wrapText);
     }
 }
 
 /************************** WRAP TEXT MAX LINES **************************/
 
 /**
- * Normalizes and sets wrapTextMaxLines in datatable's state object.
+ * Normalizes and sets wrapTextMaxLines in datatable state object.
  * The normalized value should be a positive integer or it'll fall back to undefined.
  *
  * @param {Object} state The datatable state
@@ -100,33 +83,30 @@ function updateWrapTextAndMaxLinesValuesInCells(state, colIndex, colKeyValue) {
  * @param {Object} col The datatable column definition
  * @returns {Array} An array of wrap text actions
  */
-export function getActions(state, col) {
-    const wrapTextActions = [];
-    const { type, colKeyValue } = col;
-
-    // Must be done first, so getWrapTextState correctly resolves.
+export function getInternalActions(state, col) {
+    // Untracked state change.
+    // Must be done first, so isTextWrapped correctly resolves.
     setWrapTextState(state, col);
-
     // If not hidden and isWrapable, sets the internal actions.
-    if (!col.hideDefaultActions && isWrappableType(type)) {
-        const isTextWrapped = getWrapTextState(state, colKeyValue);
-
-        wrapTextActions.push({
-            label: `${i18n.wrapText}`,
-            title: `${i18n.wrapText}`,
+    if (col.hideDefaultActions || NON_WRAPPABLE_TYPES.has(col.type)) {
+        return [];
+    }
+    const isTextWrapped = state.wrapText[col.colKeyValue] || false;
+    const { clipText, wrapText } = i18n;
+    return [
+        {
+            label: wrapText,
+            title: wrapText,
             checked: isTextWrapped,
             name: 'wrapText',
-        });
-
-        wrapTextActions.push({
-            label: `${i18n.clipText}`,
-            title: `${i18n.clipText}`,
+        },
+        {
+            label: clipText,
+            title: clipText,
             checked: !isTextWrapped,
             name: 'clipText',
-        });
-    }
-
-    return wrapTextActions;
+        },
+    ];
 }
 
 /**
@@ -134,14 +114,15 @@ export function getActions(state, col) {
  * needs to be changed in the state, change it to the new value and update
  * the check mark to represent the currently selected action
  *
- * @param {Object} state The datatable state
+ * @param {Object} dt The datatable
  * @param {String} action Action that was selected/triggered
  * @param {String} colKeyValue Column key value
  */
-export function handleTriggeredAction(state, action, colKeyValue) {
+export function handleTriggeredAction(dt, action, colKeyValue) {
     const { name } = action;
     const isWrapText = name === 'wrapText';
     if (isWrapText || name === 'clipText') {
+        const { state } = dt;
         // If state should be changed
         if (state.wrapText[colKeyValue] !== isWrapText) {
             state.shouldResetHeights = true;
@@ -164,7 +145,7 @@ function updateSelectedOptionInHeaderActions(state, colKeyValue) {
     if (colIndex === -1) {
         return;
     }
-    const columns = getColumns(state);
+    const { columns } = state;
     const col = columns[colIndex];
     const { internalActions } = col.actions;
 
@@ -183,15 +164,3 @@ function updateSelectedOptionInHeaderActions(state, colKeyValue) {
     // Force a refresh on this column, because the wrapText checked value changed.
     col.actions = Object.assign({}, col.actions);
 }
-
-/************************** HELPER FUNCTIONS **************************/
-
-/**
- * Determines if a given column type is wrappable.
- *
- * @param {String} type The type to check.
- * @returns {Boolean} Whether the given type is wrappable.
- */
-function isWrappableType(type) {
-    return NON_WRAPPABLE_TYPES.indexOf(type) < 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/dualListbox.js

@@ -249,10 +249,6 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
         reflectAttribute(this, 'variant', this._variant);
     }
 
-    set size(value) {
-        this._size = value;
-    }
-
     /**
      * Number of items that display in the listboxes before vertical scrollbars are displayed. Determines the vertical size of the listbox.
      * @type {number}
@@ -262,6 +258,9 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
     get size() {
         return this._size;
     }
+    set size(value) {
+        this._size = value;
+    }
 
     /**
      * Help text detailing the purpose and function of the dual listbox.
@@ -269,10 +268,6 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
      */
     @api fieldLevelHelp;
 
-    set disableReordering(value) {
-        this._disableReordering = normalizeBoolean(value);
-    }
-
     /**
      * If present, the Up and Down buttons used for reordering the selected list items are hidden.
      * @type {boolean}
@@ -283,6 +278,10 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
         return this._disableReordering;
     }
 
+    set disableReordering(value) {
+        this._disableReordering = normalizeBoolean(value);
+    }
+
     /**
      * If present, a spinner is displayed in the first listbox to indicate loading activity.
      * @type {boolean}

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

@@ -1,14 +1,15 @@
 import locale from '@salesforce/i18n/locale';
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
 import { normalizeString as normalize } from 'lightning/utilsPrivate';
 import { nameFormat } from 'lightning/internationalizationLibrary';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 
 const DEFAULT_FORMAT = 'long';
 
 /**
  * Displays a formatted name that can include a salutation and suffix.
  */
-export default class LightningFormattedName extends LightningElement {
+export default class LightningFormattedName extends LightningShadowBaseClass {
     /**
      * The format to use to display the name. Valid values include short, medium, and long. This value defaults to long.
      * @type {string}

package/src/lightning/formattedName/formattedName.js-meta.xml

@@ -3,4 +3,7 @@
     <isExposed>true</isExposed>
     <minApiVersion>42.0</minApiVersion>
     <support>GA</support>
+    <capabilities>
+        <capability>lightning__ServerRenderableWithHydration</capability>
+    </capabilities>
 </LightningComponentBundle>

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

@@ -1,11 +1,12 @@
-import { LightningElement, api } from 'lwc';
+import { api } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { numberFormat } from 'lightning/internationalizationLibrary';
 import { toFormattedNumber } from 'lightning/utilsPrivate';
 
 /**
  * Displays formatted numbers for decimals, currency, and percentages.
  */
-export default class LightningFormattedNumber extends LightningElement {
+export default class LightningFormattedNumber extends LightningShadowBaseClass {
     /**
      * The value to be formatted.
      * @type {number}

package/src/lightning/formattedNumber/formattedNumber.js-meta.xml

@@ -3,4 +3,7 @@
     <isExposed>true</isExposed>
     <minApiVersion>0.0</minApiVersion>
     <support>GA</support>
+    <capabilities>
+        <capability>lightning__ServerRenderableWithHydration</capability>
+    </capabilities>
 </LightningComponentBundle>

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/formattedRichText/richTextConfig.js

@@ -110,6 +110,7 @@ const attrWhitelist = Object.freeze([
     'nowrap',
     'open',
     'optimum',
+    'part',
     'pattern',
     'placeholder',
     'poster',

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

@@ -1 +1,8 @@
 @import './helptext.lbc.native.css';
+
+/* TODO: check if this style can be removed once W-14915319 is closed */
+/* Styles required for Multi-Column Sorting Modal in datatable */
+:host(.modal_header)  .slds-form-element__icon {
+    padding-top: unset;
+    padding-left: var(--slds-g-sizing-2);
+}

package/src/lightning/helptext/helptext.js

@@ -30,10 +30,9 @@ export default class LightningHelptext extends LightningShadowBaseClass {
     content;
 
     /**
-     * Reserved for internal use only.
-     * Should be set to -1 if button should not
-     * be focused during tab navigation and should
-     * be set to 0 if button should be focused.
+     * Reserved for internal use only. Use the global tabindex attribute instead.
+     * Set tab index to -1 to prevent focus on the button during tab navigation.
+     * The default value is 0, which makes the button focusable during tab navigation.
      * @type {number}
      */
     @api tabIndex;

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/icon/icon.html

@@ -2,7 +2,7 @@
     <span
         style={iconBgColorStyle}
         part="boundary">
-        <lightning-primitive-icon
+        <lightning-primitive-icon exportparts="icon"
             icon-name={_iconName}
             size={size}
             variant={variant}

package/src/lightning/input/input.html

@@ -15,6 +15,7 @@
             autocomplete={autocomplete}
             computed-label-class={computedLabelClass}
             disabled={disabled}
+            exportparts="input-text, input-container, input"
             field-level-help={fieldLevelHelp}
             formatter={formatter}
             format-fraction-digits={formatFractionDigits}
@@ -56,6 +57,7 @@
             aria-invalid={computedAriaInvalid}
             checked={checked}
             disabled={disabled}
+            exportparts="indicator"
             help-message={_helpMessage}
             label={label}
             message-toggle-active={messageToggleActive}
@@ -81,6 +83,7 @@
             aria-invalid={computedAriaInvalid}
             checked={checked}
             disabled={disabled}
+            exportparts="indicator"
             field-level-help={fieldLevelHelp}
             help-message={_helpMessage}
             helptext-alternative-text={helptextAlternativeText}
@@ -126,6 +129,7 @@
             aria-roledescription={ariaRoleDescription}
             aria-label={ariaLabel}
             disabled={disabled}
+            exportparts="indicator"
             help-message={_helpMessage}
             label={label}
             name={name}
@@ -148,6 +152,7 @@
             aria-roledescription={ariaRoleDescription}
             aria-label={computedAriaLabel}
             disabled={disabled}
+            exportparts="button"
             help-message={_helpMessage}
             label={label}
             label-class={computedLabelClass}

package/src/lightning/inputAddress/addressFormat.js

@@ -18,7 +18,12 @@ export const parseLocaleFormat = function (format) {
     return [];
 };
 
-export function getInputOrder(langCode, countryCode, hasCountryPicklist) {
+export function getInputOrder(
+    langCode,
+    countryCode,
+    hasCountryPicklist,
+    renderSubpremise
+) {
     let inputOrder = addressFormat.getAddressInputOrderAllField(
         langCode,
         countryCode
@@ -28,15 +33,37 @@ export function getInputOrder(langCode, countryCode, hasCountryPicklist) {
     if (hasCountryPicklist) {
         inputOrder = 'K' + inputOrder.replace('K', '');
     }
-    return parseLocaleFormat(inputOrder);
+
+    const parsed = parseLocaleFormat(inputOrder);
+
+    // TD-0120510 Render single textarea as two separate inputs
+    if (renderSubpremise) {
+        const index = parsed.indexOf('street');
+        if (index !== -1) {
+            parsed.splice(index, 1, 'addressLine1', 'addressLine2');
+        }
+    }
+
+    return parsed;
 }
 
-export function getRequiredFields(langCode, countryCode) {
+export function getRequiredFields(langCode, countryCode, renderSubpremise) {
     const requireFields = addressFormat.getAddressRequireFields(
         langCode,
         countryCode
     );
-    return parseLocaleFormat(requireFields);
+
+    const parsed = parseLocaleFormat(requireFields);
+
+    // TD-0120510 Subpremise is never required
+    if (renderSubpremise) {
+        const index = parsed.indexOf('street');
+        if (index !== -1) {
+            parsed.splice(index, 1, 'addressLine1');
+        }
+    }
+
+    return parsed;
 }
 
 function isValidFieldFormat(value) {

package/src/lightning/inputAddress/fieldsLayout.js

@@ -6,6 +6,12 @@ const FIELD_WIDTHS = {
     street: {
         width: 6,
     },
+    addressLine1: {
+        width: 6,
+    },
+    addressLine2: {
+        width: 6,
+    },
     city: {
         width: 4,
     },

package/src/lightning/inputAddress/inputAddress.html

@@ -4,7 +4,7 @@
         part="input-address"
     >
         <legend class={computedLegendClass}>
-            <template if:true={required}>
+            <template if:true={addressLabelRequired}>
                 <abbr class="slds-required" title={i18n.required}>*</abbr>
             </template>
             {addressLabel}
@@ -36,6 +36,24 @@
                 <template for:each={domFieldsMeta} for:item="row" for:index="index">
                     <div class="slds-form-element__row" key={row.name}>
                         <template for:each={row} for:item="field">
+                            <template if:true={field.isLookupAddress}>
+                                <lightning-lookup-address
+                                    always-render
+                                    key={field.name}
+                                    data-field={field.name}
+                                    class={field.classnames}
+                                    label={field.label}
+                                    name={field.name}
+                                    autocomplete={field.autocomplete}
+                                    input-text={field.value}
+                                    placeholder={field.placeholder}
+                                    required={field.required}
+                                    disabled={field.disabled}
+                                    onfocus={handleFocus}
+                                    onblur={handleBlur}
+                                    onchange={handleAddress}
+                                ></lightning-lookup-address>
+                            </template>
                             <template if:true={field.isInput}>
                                 <lightning-input
                                     key={field.name}