lightning-base-components 1.21.3-alpha → 1.21.4-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/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/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/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/formattedRichText/richTextConfig.js

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

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/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}

package/src/lightning/inputAddress/inputAddress.js

@@ -31,6 +31,7 @@ const FIELD_TYPE = {
     TEXTAREA: 'textarea',
     INPUT: 'input',
     PICKLIST: 'combobox',
+    LOOKUP_ADDRESS: 'address',
 };
 
 const i18n = {
@@ -57,6 +58,13 @@ export default class LightningInputAddress extends LightningShadowBaseClass {
      */
     @api streetLabel;
 
+    /**
+     * The label for the subpremise field.
+     * Visible only when using show-compact-address-lookup.
+     * @type {string}
+     */
+    @api subpremiseLabel;
+
     /**
      * The label for the city field.
      * @type {string}
@@ -87,6 +95,13 @@ export default class LightningInputAddress extends LightningShadowBaseClass {
      */
     @api streetPlaceholder;
 
+    /**
+     * The placeholder for the subpremise field.
+     * Visible only when using show-compact-address-lookup.
+     * @type {string}
+     */
+    @api subpremisePlaceholder;
+
     /**
      * The placeholder for the city field.
      * @type {string}
@@ -155,6 +170,7 @@ export default class LightningInputAddress extends LightningShadowBaseClass {
     @track _fieldLevelHelp;
     @track _variant;
     @track _street = '';
+    @track _subpremise = '';
     @track _city = '';
     @track _province = '';
     @track _country = '';
@@ -186,7 +202,8 @@ export default class LightningInputAddress extends LightningShadowBaseClass {
 
     /**
      * The value for the street field.
-     * Maximum length is 255 characters.
+     * Maximum length is 255 characters when rendered as a textarea.
+     * Maximum length is 80 characters when rendered as an input (when using show-compact-address-lookup).
      * @type {string}
      *
      */
@@ -198,6 +215,19 @@ export default class LightningInputAddress extends LightningShadowBaseClass {
         this._street = value;
     }
 
+    /**
+     * The value for the subpremise field.
+     * Maximum length is 80 characters.
+     * @type {string}
+     */
+    @api
+    get subpremise() {
+        return this._subpremise;
+    }
+    set subpremise(value) {
+        this._subpremise = value;
+    }
+
     /**
      * The value for the city field.
      * Maximum length is 40 characters.
@@ -280,6 +310,19 @@ export default class LightningInputAddress extends LightningShadowBaseClass {
         this._showAddressLookup = normalizeBoolean(value);
     }
 
+    /**
+     * If present, a compact address lookup using Google Maps is enabled.
+     * @type {boolean}
+     * @default false
+     */
+    @api
+    get showCompactAddressLookup() {
+        return this._showAddressLookup;
+    }
+    set showCompactAddressLookup(value) {
+        this._showCompactAddressLookup = normalizeBoolean(value);
+    }
+
     /**
      * If present, the address fields are read-only and cannot be edited.
      * @type {boolean}
@@ -424,6 +467,10 @@ export default class LightningInputAddress extends LightningShadowBaseClass {
         return this.disabled || this.readOnly;
     }
 
+    get addressLabelRequired() {
+        return this.addressLabel && this.required;
+    }
+
     get i18n() {
         return i18n;
     }
@@ -473,6 +520,18 @@ export default class LightningInputAddress extends LightningShadowBaseClass {
                 maxlength: 255,
                 type: FIELD_TYPE.TEXTAREA,
             },
+            addressLine1: {
+                autocomplete: 'address-line1',
+                name: 'street',
+                maxlength: 80,
+                type: FIELD_TYPE.LOOKUP_ADDRESS,
+            },
+            addressLine2: {
+                autocomplete: 'address-line2',
+                name: 'subpremise',
+                maxlength: 80,
+                type: FIELD_TYPE.INPUT,
+            },
             city: {
                 autocomplete: 'address-level2',
                 name: 'city',
@@ -508,12 +567,21 @@ export default class LightningInputAddress extends LightningShadowBaseClass {
         const hasCountryPicklist =
             this.fieldsTypeMeta.country.type === FIELD_TYPE.PICKLIST;
         const [langCode, countryCode] = this.locale.split('-');
-        return getInputOrder(langCode, countryCode, hasCountryPicklist);
+        return getInputOrder(
+            langCode,
+            countryCode,
+            hasCountryPicklist,
+            this._showCompactAddressLookup
+        );
     }
 
     get requiredFields() {
         const [langCode, countryCode] = this.locale.split('-');
-        return getRequiredFields(langCode, countryCode);
+        return getRequiredFields(
+            langCode,
+            countryCode,
+            this._showCompactAddressLookup
+        );
     }
 
     get fieldsMeta() {
@@ -554,6 +622,7 @@ export default class LightningInputAddress extends LightningShadowBaseClass {
                     isInput: type === FIELD_TYPE.INPUT,
                     isPicklist: type === FIELD_TYPE.PICKLIST,
                     isTextArea: type === FIELD_TYPE.TEXTAREA,
+                    isLookupAddress: type === FIELD_TYPE.LOOKUP_ADDRESS,
                     value: value,
                     options: this.getFieldOptions(name),
                     required: this.required && !!required,
@@ -586,6 +655,7 @@ export default class LightningInputAddress extends LightningShadowBaseClass {
         const address = evt.detail.address || {};
 
         this.street = address.street || '';
+        this.subpremise = address.subpremise || '';
         this.city = address.city || '';
         this.province = address.state || '';
 
@@ -636,6 +706,7 @@ export default class LightningInputAddress extends LightningShadowBaseClass {
                 bubbles: true,
                 detail: {
                     street: this.street,
+                    subpremise: this.subpremise,
                     city: this.city,
                     province: this.province,
                     country: this.country,