lightning-base-components 1.14.2-alpha → 1.14.6-alpha

package/src/lightning/primitiveDatatableIeditTypeFactory/primitiveDatatableIeditTypeFactory.js

@@ -13,7 +13,7 @@ import DateLocalTpl from './dateLocal.html';
 import DateTpl from './date.html';
 import DefaultTpl from './default.html';
 
-const TYPE_TPL_MAPPINGS = {
+const TYPE_TEMPLATE_MAPPINGS = {
     text: TextTpl,
     phone: PhoneTpl,
     email: EmailTpl,
@@ -25,10 +25,14 @@ const TYPE_TPL_MAPPINGS = {
     'date-local': DateLocalTpl,
     date: DateTpl,
 };
-const INVALID_TYPE_FOR_EDIT = 'column type not supported for inline edit';
+const INVALID_TYPE_MESSAGE = 'column type not supported for inline edit';
 
 export default class LightningPrimitiveDatatableIeditTypeFactory extends LightningElement {
+    // Private Variables
     columnLabel;
+
+    /***************************** PUBLIC PROPERTIES *****************************/
+
     @api editedValue;
     @api required;
     @api typeAttributes;
@@ -41,54 +45,23 @@ export default class LightningPrimitiveDatatableIeditTypeFactory extends Lightni
     set columnDef(value) {
         assert(
             // eslint-disable-next-line no-prototype-builtins
-            TYPE_TPL_MAPPINGS.hasOwnProperty(value.type) ||
+            TYPE_TEMPLATE_MAPPINGS.hasOwnProperty(value.type) ||
                 value.editableCustomType,
-            INVALID_TYPE_FOR_EDIT
+            INVALID_TYPE_MESSAGE
         );
 
         this._columnDef = value;
         this.columnLabel = value.label;
     }
 
-    get columnType() {
-        return this._columnDef.type;
-    }
-
-    render() {
-        return this.isValidCustomType
-            ? this.customEditTemplate
-            : TYPE_TPL_MAPPINGS[this.columnType] || DefaultTpl;
-    }
-
-    connectedCallback() {
-        this._blurHandler = this.handleComponentBlur.bind(this);
-        this._focusHandler = this.handleComponentFocus.bind(this);
-        this._changeHandler = this.handleComponentChange.bind(this);
-    }
-
-    renderedCallback() {
-        if (this.concreteComponent) {
-            this.concreteComponent.addEventListener('blur', this._blurHandler);
-            this.concreteComponent.addEventListener(
-                'focus',
-                this._focusHandler
-            );
-            this.concreteComponent.addEventListener(
-                'change',
-                this._changeHandler
-            );
-        }
-    }
-
-    get concreteComponent() {
-        return this.template.querySelector('[data-inputable="true"]');
-    }
-
+    /**
+     * Checks if type is an custom type that is editable and
+     * has an editTemplate that contains [data-inputable="true"]
+     * Used when checking if cell can actually be edited
+     */
     @api
-    focus() {
-        if (this.concreteComponent) {
-            this.concreteComponent.focus();
-        }
+    get isEditableCustomValid() {
+        return this.isValidCustomType && this.concreteComponent;
     }
 
     @api
@@ -104,11 +77,47 @@ export default class LightningPrimitiveDatatableIeditTypeFactory extends Lightni
         return this.concreteComponent.validity;
     }
 
+    /***************************** PUBLIC METHODS *****************************/
+
+    /**
+     * Focuses on the input component that is rendered by the type factory
+     */
+    @api
+    focus() {
+        if (this.concreteComponent) {
+            this.concreteComponent.focus();
+        }
+    }
+
+    /**
+     * Displays error message if the input is invalid
+     */
     @api
     showHelpMessageIfInvalid() {
         this.concreteComponent.showHelpMessageIfInvalid();
     }
 
+    /***************************** PRIVATE GETTERS *****************************/
+
+    get columnType() {
+        return this._columnDef.type;
+    }
+
+    get concreteComponent() {
+        return this.template.querySelector('[data-inputable="true"]');
+    }
+
+    /**
+     * Returns editTemplate defined for custom type template
+     */
+    get customEditTemplate() {
+        return this._columnDef.editTemplate;
+    }
+
+    /**
+     * Retrieves the date set in the column and converts it to a value
+     * that can be passed into lightning-input type="datetime"
+     */
     get editedDateValue() {
         const dateValue = new Date(this.editedValue);
 
@@ -119,27 +128,17 @@ export default class LightningPrimitiveDatatableIeditTypeFactory extends Lightni
         return dateValue.toISOString();
     }
 
-    handleComponentFocus() {
-        this.dispatchEvent(new CustomEvent('focus'));
-    }
-
-    handleComponentBlur() {
-        this.dispatchEvent(new CustomEvent('blur'));
-    }
-
-    handleComponentChange() {
-        this.showHelpMessageIfInvalid();
-    }
-
     /**
-     * Returns editTemplate defined for custom type template
+     * Checks this custom type is editable and has editTemplate defined
      */
-    get customEditTemplate() {
-        return this._columnDef.editTemplate;
+    get isValidCustomType() {
+        return (
+            this._columnDef.editableCustomType && this._columnDef.editTemplate
+        );
     }
 
     /**
-     * for percent, currency types use if step passed in, if not fallback to default
+     * For percent, currency types use if step passed in, if not fallback to default
      * @returns {*|string}
      */
     get typeAttributeStep() {
@@ -151,22 +150,48 @@ export default class LightningPrimitiveDatatableIeditTypeFactory extends Lightni
         );
     }
 
+    /***************************** EVENT HANDLERS *****************************/
+
+    handleComponentFocus() {
+        this.dispatchEvent(new CustomEvent('focus'));
+    }
+
+    handleComponentBlur() {
+        this.dispatchEvent(new CustomEvent('blur'));
+    }
+
+    handleComponentChange() {
+        this.showHelpMessageIfInvalid();
+    }
+
+    /***************************** LIFECYCLE HOOKS *****************************/
+
     /**
-     * Checks this custom type is editable and has editTemplate defined
+     * Renders the appropriate template based on the column type
      */
-    get isValidCustomType() {
-        return (
-            this._columnDef.editableCustomType && this._columnDef.editTemplate
-        );
+    render() {
+        return this.isValidCustomType
+            ? this.customEditTemplate
+            : TYPE_TEMPLATE_MAPPINGS[this.columnType] || DefaultTpl;
     }
 
     /**
-     * Checks if type is an custom type that is editable and
-     * has an editTemplate that contains [data-inputable="true"]
-     * Used when checking if cell can actually be edited
+     * Attaches event handlers for `focus`, `blur` and `change` events
      */
-    @api
-    get isEditableCustomValid() {
-        return this.isValidCustomType && this.concreteComponent;
+    renderedCallback() {
+        if (this.concreteComponent) {
+            this.concreteComponent.addEventListener(
+                'focus',
+                this.handleComponentFocus.bind(this)
+            );
+            this.concreteComponent.addEventListener(
+                'blur',
+                this.handleComponentBlur.bind(this)
+            );
+            this.concreteComponent.addEventListener(
+                'change',
+                this.handleComponentChange.bind(this)
+            );
+        }
     }
 }

package/src/lightning/primitiveDatatableStatusBar/primitiveDatatableStatusBar.html

@@ -2,6 +2,7 @@
     <div class="slds-docked-form-footer slds-is-absolute">
         <div class="slds-grid slds-grid_align-center">
             <template if:true={showError}>
+                <!-- Error Tooltip -->
                 <lightning-primitive-datatable-tooltip
                     class="slds-button"
                     size="small"
@@ -12,18 +13,17 @@
                     offset={bubbleOffset}
                 ></lightning-primitive-datatable-tooltip>
             </template>
+            <!-- Cancel and Save Buttons -->
             <button
                 type="button"
                 class="slds-button slds-button_neutral"
-                onclick={handleCancelButtonClick}
-            >
+                onclick={handleCancelButtonClick}>
                 {i18n.cancel}
             </button>
             <button
                 type="button"
                 class="slds-button slds-button_brand save-btn"
-                onclick={handleSaveButtonClick}
-            >
+                onclick={handleSaveButtonClick}>
                 {i18n.save}
             </button>
         </div>

package/src/lightning/primitiveDatatableStatusBar/primitiveDatatableStatusBar.js

@@ -47,6 +47,10 @@ export default class LightningPrimitiveDatatableStatusBar extends LightningEleme
         };
     }
 
+    isSaveBtnFocused() {
+        return this.template.querySelector('button.save-btn:focus') !== null;
+    }
+
     handleCancelButtonClick(event) {
         event.preventDefault();
         event.stopPropagation();
@@ -78,10 +82,6 @@ export default class LightningPrimitiveDatatableStatusBar extends LightningEleme
         );
     }
 
-    isSaveBtnFocused() {
-        return this.template.querySelector('button.save-btn:focus') !== null;
-    }
-
     /**
      * Handling between displaying/focusing tooltip icon and/or error bubble
      * If showBubble property is set within error object, display/focus the error bubble.

package/src/lightning/primitiveHeaderActions/primitiveHeaderActions.js

@@ -10,24 +10,28 @@ const i18n = {
     wrapText: labelWrapText,
 };
 
+/**
+ * A header-level action.
+ */
 export default class PrimitiveHeaderActions extends LightningElement {
-    static delegatesFocus = true;
-    @api colKeyValue;
-
+    // Tracked objects
     @track containerRect;
     @track _internalActions = [];
     @track _customerActions = [];
+
+    // Private variables
+    static delegatesFocus = true;
     _actionMenuAlignment;
 
-    @api
-    focus() {
-        const btnMenu = this.template.querySelector('lightning-button-menu');
+    /************************** PUBLIC ATTRIBUTES ***************************/
 
-        if (btnMenu) {
-            btnMenu.focus();
-        }
-    }
+    @api colKeyValue;
 
+    /**
+     * Defines the actions on a header cell
+     *
+     * @type {Object}
+     */
     @api
     get actions() {
         return this._actions;
@@ -38,49 +42,60 @@ export default class PrimitiveHeaderActions extends LightningElement {
         this.updateActions();
     }
 
-    get i18n() {
-        return i18n;
-    }
-
-    updateActions() {
-        const actionTypeReducer = (type) => (actions, action) => {
-            const overrides = { _type: type, _action: action };
-            actions.push(Object.assign({}, action, overrides));
+    /************************** PUBLIC METHODS ***************************/
 
-            return actions;
-        };
+    /**
+     * Sets focus on a lightning-button-menu
+     */
+    @api
+    focus() {
+        const btnMenu = this.template.querySelector('lightning-button-menu');
 
-        this._internalActions = this.getActionsByType('internalActions').reduce(
-            actionTypeReducer('internal'),
-            []
-        );
+        if (btnMenu) {
+            btnMenu.focus();
+        }
+    }
 
-        this._customerActions = this.getActionsByType('customerActions').reduce(
-            actionTypeReducer('customer'),
-            []
-        );
+    /************************** PRIVATE GETTERS **************************/
 
-        // ToDo: W-8389508 Refactor so menu is outside of header
-        this._actionMenuAlignment =
-            this._actions.menuAlignment &&
-            this._actions.menuAlignment.replace('auto-', '');
+    /**
+     * Returns the internationalization definition object
+     *
+     * @return {Object} The i18n definition object
+     */
+    get i18n() {
+        return i18n;
     }
 
+    /**
+     * Determines whether or not a header has actions
+     *
+     * @return {Boolean}
+     */
     get hasActions() {
         return (
             this._internalActions.length > 0 || this._customerActions.length > 0
         );
     }
+
+    /**
+     * Determines whether or not a header has an action divider
+     *
+     * @return {Boolean}
+     */
     get hasActionsDivider() {
         return (
             this._internalActions.length > 0 && this._customerActions.length > 0
         );
     }
 
-    getActionsByType(type) {
-        return Array.isArray(this._actions[type]) ? this._actions[type] : [];
-    }
+    /************************ EVENT DISPATCHERS **************************/
 
+    /**
+     * Handles opening a menu
+     *
+     * @param {Event} event
+     */
     handleMenuOpen(event) {
         event.preventDefault();
         event.stopPropagation();
@@ -107,6 +122,9 @@ export default class PrimitiveHeaderActions extends LightningElement {
         );
     }
 
+    /**
+     * Handles closing a menu
+     */
     handleMenuClose() {
         this.dispatchEvent(
             new CustomEvent('privatecellheaderactionmenuclosed', {
@@ -117,8 +135,13 @@ export default class PrimitiveHeaderActions extends LightningElement {
         );
     }
 
-    handleActionSelect(evt) {
-        const action = evt.detail.value;
+    /**
+     * Handles selecting an action
+     *
+     * @param {Event} event
+     */
+    handleActionSelect(event) {
+        const action = event.detail.value;
 
         this.dispatchEvent(
             new CustomEvent('privatecellheaderactiontriggered', {
@@ -133,4 +156,43 @@ export default class PrimitiveHeaderActions extends LightningElement {
             })
         );
     }
+
+    /************************* HELPER FUNCTIONS **************************/
+
+    /**
+     * Updates the actions object
+     */
+    updateActions() {
+        const actionTypeReducer = (type) => (actions, action) => {
+            const overrides = { _type: type, _action: action };
+            actions.push(Object.assign({}, action, overrides));
+
+            return actions;
+        };
+
+        this._internalActions = this.getActionsByType('internalActions').reduce(
+            actionTypeReducer('internal'),
+            []
+        );
+
+        this._customerActions = this.getActionsByType('customerActions').reduce(
+            actionTypeReducer('customer'),
+            []
+        );
+
+        // TODO: W-8389508 Refactor so menu is outside of header
+        this._actionMenuAlignment =
+            this._actions.menuAlignment &&
+            this._actions.menuAlignment.replace('auto-', '');
+    }
+
+    /**
+     * Returns actions by action type
+     *
+     * @param {String} type The action type to filter by
+     * @return {Array} An array of actions that match the provided type
+     */
+    getActionsByType(type) {
+        return Array.isArray(this._actions[type]) ? this._actions[type] : [];
+    }
 }

package/src/lightning/progressIndicator/progressIndicator.js

@@ -53,7 +53,7 @@ export default class LightningProgressIndicator extends LightningElement {
     set currentStep(value) {
         this.privateCurrentStep = value;
         if (this.privateRendered) {
-            this.updateSteps();
+            this.updateSteps(value);
         }
     }
 

package/src/lightning/progressStep/progressStep.js

@@ -72,7 +72,7 @@ export default class LightningProgressStep extends LightningElement {
             'slds-is-completed': !isPath && status === 'completed',
             'slds-has-error': !isPath && status === 'error',
             'slds-is-active':
-                (type !== 'base' && isActive === true) ||
+                (isPath && isActive === true) ||
                 (type === 'base' && status === 'current'),
             'slds-path__item': isPath,
             'slds-is-complete': isPath && status === 'completed',

package/src/lightning/spinner/spinner.html

@@ -1,6 +1,6 @@
 <template>
     <div role="status" class={computedClass}>
-        <span if:true={validAlternativeText} class="slds-assistive-text">{alternativeText}</span>
+        <span if:true={validAlternativeText} class="slds-assistive-text">{_altText}</span>
         <div class="slds-spinner__dot-a"></div>
         <div class="slds-spinner__dot-b"></div>
     </div>

package/src/lightning/spinner/spinner.js

@@ -27,12 +27,24 @@ export default class LightningSpinner extends LightningElement {
      */
     @api variant;
 
+    _altText = '';
+
     connectedCallback() {
         this.classList.add('slds-spinner_container');
         this.template.addEventListener('mousewheel', this.stopScrolling);
         this.template.addEventListener('touchmove', this.stopScrolling);
     }
 
+    renderedCallback() {
+        // [W-10320761] We set the _altText in the next tick because screen readers are not reading out
+        // the text when the text along the aria-live container is inserted into the DOM together.
+        // It is only working when only aria-live container is setup on load and later the content changes
+        // eslint-disable-next-line @lwc/lwc/no-async-operation
+        setTimeout(() => {
+            this._altText = this.alternativeText;
+        }, 0);
+    }
+
     get normalizedVariant() {
         return normalize(this.variant, {
             fallbackValue: 'base',

package/src/lightning/staticMap/staticMap.html

@@ -6,6 +6,7 @@
                     oniframeload={handleIframeLoad}
                     width={width}
                     height={height}
+                    title={mapTitle}
                     frame-style={mapStyle}>
         </lightning-primitive-iframe>
         <div class="slds-iframe-cover"></div>

package/src/lightning/staticMap/staticMap.js

@@ -1,5 +1,7 @@
 import lang from '@salesforce/i18n/lang';
 import formFactor from '@salesforce/client/formFactor';
+import labelTitleWithAddress from '@salesforce/label/LightningMap.titleWithAddress';
+import labelTitleWithoutAddress from '@salesforce/label/LightningMap.iframeTitle';
 import { LightningElement, api, track } from 'lwc';
 import { ratioToScale, calculateSize } from './util';
 import {
@@ -9,12 +11,19 @@ import {
     postMessage,
 } from 'lightning/messageDispatcher';
 import { buildMapSourceUrl } from 'lightning/mapUtils';
+import { isEmptyString } from 'lightning/inputUtils';
+import { formatLabel } from 'lightning/utils';
 
 const EVENT_NAME = {
     LOADING_MAP: 'loadingMap',
     STATIC_MAP_LOADED: 'lightning:staticMapLoaded',
 };
 
+const i18n = {
+    titleWithAddress: labelTitleWithAddress,
+    titleWithoutAddress: labelTitleWithoutAddress,
+};
+
 export default class LightningStaticMap extends LightningElement {
     @api width;
     @api height;
@@ -23,6 +32,7 @@ export default class LightningStaticMap extends LightningElement {
     @api province;
     @api postalCode;
     @api country;
+    @api title;
 
     _zoom = 14;
     _scale = 1;
@@ -109,8 +119,7 @@ export default class LightningStaticMap extends LightningElement {
         return '';
     }
 
-    get address() {
-        // if latitude/longitude specified use that to avoid expensive Google geo-coding processing
+    get latLongString() {
         if (
             this.latitude != null &&
             this.latitude >= -90.0 &&
@@ -121,12 +130,40 @@ export default class LightningStaticMap extends LightningElement {
         ) {
             return `${this.latitude},${this.longitude}`;
         }
+        return null;
+    }
 
+    get addressString() {
         return `${this.street || ''} ${this.city || ''} ${
             this.province || ''
         } ${this.postalCode || ''} ${this.country || ''}`;
     }
 
+    get address() {
+        // if latitude/longitude specified use that to avoid expensive Google geo-coding processing
+        return this.latLongString || this.addressString;
+    }
+
+    /**
+     * getter for the i18 constant containing the localized strings
+     */
+    get i18n() {
+        return i18n;
+    }
+
+    get mapTitle() {
+        if (isEmptyString(this.title)) {
+            let titleAddress =
+                (this.addressString && this.addressString.trim()) ||
+                (this.latLongString && this.latLongString.trim());
+            if (isEmptyString(titleAddress)) {
+                return this.i18n.titleWithoutAddress;
+            }
+            return formatLabel(this.i18n.titleWithAddress, titleAddress);
+        }
+        return this.title;
+    }
+
     handleMessage(data) {
         if (data.event === EVENT_NAME.STATIC_MAP_LOADED) {
             this._mapLoaded = true;

package/src/lightning/utils/classSet.js

@@ -3,7 +3,10 @@ const classNamesHash = (classes) => {
         ? classes
               .trim()
               .split(/\s+/)
-              .reduce((acc, cn) => ({ ...acc, [cn]: true }), {})
+              .reduce((acc, cn) => {
+                  acc[cn] = true;
+                  return acc;
+              }, {})
         : classes;
 };
 

package/src/lightning/utilsPrivate/phonify.js

@@ -3,7 +3,7 @@ import locale from '@salesforce/i18n/locale';
 const NA_PHONE_NUMBER = '($1) $2-$3';
 const IS_TEN_DIGITS = /^\d{10}$/;
 const TEN_TO_NA = /(\d{3})(\d{3})(\d{4})/;
-const IS_ELEVEN_DIGITS = /^1\d{10}/;
+const IS_ELEVEN_DIGITS = /^1\d{10}$/;
 const ELEVEN_TO_NA = /1(\d{3})(\d{3})(\d{4})$/;
 
 // The locale argument has been added for tests since there's currently no clean way of mocking the locale

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

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

package/src/lightning/datatable/inlineEdit-shared.js

@@ -1,14 +0,0 @@
-export function getDirtyValue(state, rowKeyValue, colKeyValue) {
-    const dirtyValues = state.inlineEdit.dirtyValues;
-
-    if (
-        // eslint-disable-next-line no-prototype-builtins
-        dirtyValues.hasOwnProperty(rowKeyValue) &&
-        // eslint-disable-next-line no-prototype-builtins
-        dirtyValues[rowKeyValue].hasOwnProperty(colKeyValue)
-    ) {
-        return dirtyValues[rowKeyValue][colKeyValue];
-    }
-
-    return undefined;
-}