lightning-base-components 1.14.2-alpha → 1.14.3-alpha

package/src/lightning/datatable/rowSelectionShared.js

@@ -0,0 +1,79 @@
+/**
+ * This file exists in order to get around circular dependencies.
+ * In this case, rowSelection.js has a dependency on rows.js;
+ * but rows.js also has a dependency on rowSelection.js for
+ * `isSelectedRow()` among others.
+ *
+ * We split out the functions that could cause circular dependencies with
+ * `rowSelection.js` into the `*Shared.js` files.
+ */
+
+/**
+ * Returns whether or not the row is selected using the state and the rowKeyValue
+ * The state maintains the list of selected rows from which
+ * this value can be retrieved.
+ *
+ * @param {Object} state - datatable state object
+ * @param {String} rowKeyValue
+ * @returns
+ */
+export function isSelectedRow(state, rowKeyValue) {
+    return !!state.selectedRowsKeys[rowKeyValue];
+}
+
+/**
+ * Returns whether the row (whose row key value is specified)
+ * should be disabled or not.
+ * Should not disable if the row is selected.
+ * If the particular row is not selected, the row should be disabled
+ * when max-row-selection > 1 and the selection limit is reached
+ *
+ * Note: Do not disable selection when max-row-selection = 1 and
+ * a row has been selected.
+ *
+ * @param {Object} state
+ * @param {String} rowKeyValue
+ * @returns {Boolean} whether the row should be disabled or not
+ */
+export function isDisabledRow(state, rowKeyValue) {
+    if (!isSelectedRow(state, rowKeyValue)) {
+        const maxRowSelection = getMaxRowSelection(state);
+
+        // when selection is 1, we should not disable selection
+        return (
+            maxRowSelection !== 1 &&
+            getCurrentSelectionLength(state) === maxRowSelection
+        );
+    }
+
+    return false;
+}
+
+/**
+ * Returns which input type to use for row selection.
+ * If max-row-selection = 1, use radio buttons,
+ * otherwise, use checkboxes.
+ *
+ * @param {Object} state - datatable's state object
+ * @returns
+ */
+export function getRowSelectionInputType(state) {
+    if (getMaxRowSelection(state) === 1) {
+        return 'radio';
+    }
+    return 'checkbox';
+}
+
+export function getMaxRowSelection(state) {
+    return state.maxRowSelection;
+}
+
+export function getCurrentSelectionLength(state) {
+    return getSelectedRowsKeys(state).length;
+}
+
+export function getSelectedRowsKeys(state) {
+    return Object.keys(state.selectedRowsKeys).filter(
+        (key) => state.selectedRowsKeys[key]
+    );
+}

package/src/lightning/datatable/rows.js

@@ -1,11 +1,11 @@
 import { assert } from 'lightning/utilsPrivate';
-import { classSet, isObjectLike } from './utils';
+import { classSet, isObjectLike, styleToString } from './utils';
 import { isTreeType, getAttributesNames } from './types';
 import {
     isSelectedRow,
     isDisabledRow,
     getRowSelectionInputType,
-} from './selector-shared';
+} from './rowSelectionShared';
 import { getTreeStateIndicatorFieldNames, getStateTreeColumn } from './tree';
 import {
     getColumns,
@@ -17,7 +17,8 @@ import {
 } from './columns';
 import { isRowNumberColumn, getRowNumberErrorColumnDef } from './rowNumber';
 import { getRowError } from './errors';
-import { getDirtyValue } from './inlineEdit-shared';
+import { getDirtyValueFromCell } from './inlineEditShared';
+import { DEFAULT_ROW_HEIGHT } from './renderManager';
 
 export function getData(state) {
     return state.data;
@@ -114,7 +115,7 @@ export function uniqueRowKeyGenerator(keyField) {
  * @param {object} state - the current datatable state
  */
 export function updateRowsAndCellIndexes() {
-    const { state, privateTypes: types } = this;
+    const { state, privateTypes: types, _virtualize } = this;
     const { keyField, renderModeRoleBased } = state;
     const data = getData(state);
     const columns = getColumns(state);
@@ -141,11 +142,21 @@ export function updateRowsAndCellIndexes() {
         row.classnames = resolveRowClassNames(row);
         Object.assign(row, getRowStateForTree(rowData, state));
         row.tabIndex = -1;
+        if (_virtualize) {
+            row.style = styleToString({
+                position: 'absolute',
+                top: `${rowIndex * DEFAULT_ROW_HEIGHT}px`,
+            });
+        }
 
         columns.reduce((currentRow, colData, colIndex) => {
             const { fieldName } = colData;
             const colKeyValue = generateColKeyValue(colData, colIndex);
-            const dirtyValue = getDirtyValue(state, row.key, colKeyValue);
+            const dirtyValue = getDirtyValueFromCell(
+                state,
+                row.key,
+                colKeyValue
+            );
             const cellHasErrors = hasCellErrors(
                 rowErrors,
                 colData.fieldName,

package/src/lightning/datatable/state.js

@@ -17,8 +17,9 @@ export const getDefaultState = function () {
         rows: [],
         indexes: {},
 
-        // selector
+        // row selection
         selectedRowsKeys: {},
+        lastSelectedRowKey: undefined,
         maxRowSelection: undefined,
 
         headerIndexes: {},
@@ -59,7 +60,15 @@ export const getDefaultState = function () {
 
         // inline edit
         inlineEdit: {
+            rowKeyValue: undefined,
+            colKeyValue: undefined,
+            columnDef: {},
             dirtyValues: {},
+            editedValue: undefined,
+            isPanelVisible: false,
+            massEditEnabled: false,
+            massEditSelectedRows: undefined,
+            resolvedAttributeTypes: {},
         },
 
         // errors

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

@@ -22,6 +22,10 @@
     border-top: 1px solid #dddbda;
 }
 
+.slds-table_header-fixed [data-row-key-value]:first-child {
+    border-top: 0;
+}
+
 /* Required for row numbers */
 [role="row"] {
     counter-increment: row-number;

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

@@ -120,6 +120,7 @@
                                     aria-setsize={row.setSize}
                                     aria-posinset={row.posInSet}
                                     aria-rowindex={row.ariaRowIndex}
+                                    style={row.style}
                                     tabindex={row.tabIndex}>
                                     <template for:each={row.cells} for:item="cell">
                                         <template if:true={cell.isCheckbox}>

package/src/lightning/datatable/utils.js

@@ -109,3 +109,17 @@ export function getScrollOffsetFromTableEnd(el) {
         el.scrollHeight - el.parentNode.scrollTop - el.parentNode.clientHeight
     );
 }
+
+/**
+ * Utility for converting arrays and plain objects to style strings
+ * @param {Array|Object} style
+ * @returns {string} representing array/object as a string
+ */
+export function styleToString(style) {
+    if (!Array.isArray(style)) {
+        return Object.entries(style)
+            .map(([key, value]) => `${key}:${value}`)
+            .join(';');
+    }
+    return style.join(';');
+}

package/src/lightning/dualListbox/dualListbox.html

@@ -9,7 +9,7 @@
         <lightning-helptext if:true={fieldLevelHelp} content={fieldLevelHelp}></lightning-helptext>
         <div class="slds-form-element__control">
             <div class="slds-dueling-list" onfocusin={handleFocus} onfocusout={handleBlur}>
-                <div class="slds-assistive-text" id="assertive-thing" aria-live="assertive"></div>
+                <div class="slds-assistive-text" id="assertive-thing" aria-live="assertive">{_messageToDisplay}</div>
                 <div class="slds-assistive-text" id="keyboard-interacton">{i18n.componentAssistiveText}</div>
                 <div class={computedLeftColumnClass}>
                     <span class="slds-form-element__label" id="source-list-label">{sourceLabel}</span>

package/src/lightning/dualListbox/dualListbox.js

@@ -14,6 +14,8 @@ import labelRequiredOptionError from '@salesforce/label/LightningDualListbox.req
 import labelUpButtonAssistiveText from '@salesforce/label/LightningDualListbox.upButtonAssistiveText';
 import labelMoveSelectionToAssistiveText from '@salesforce/label/LightningDualListbox.moveSelectionToAssistiveText';
 import labelLoadingText from '@salesforce/label/LightningCombobox.loadingText';
+import labelMovedOptionsSingular from '@salesforce/label/LightningDualListbox.movedOptionsSingular';
+import labelMovedOptionsPlural from '@salesforce/label/LightningDualListbox.movedOptionsPlural';
 import { LightningElement, api, track } from 'lwc';
 import { handleKeyDownOnOption } from './keyboard';
 import { classSet, formatLabel } from 'lightning/utils';
@@ -47,6 +49,8 @@ const i18n = {
     upButtonAssistiveText: labelUpButtonAssistiveText,
     moveSelectionToAssistiveText: labelMoveSelectionToAssistiveText,
     loadingText: labelLoadingText,
+    movedOptionsSingular: labelMovedOptionsSingular,
+    movedOptionsPlural: labelMovedOptionsPlural,
 };
 
 /**
@@ -117,6 +121,9 @@ export default class LightningDualListbox extends LightningElement {
     @track highlightedOptions = [];
     @track focusableInSource;
     @track focusableInSelected;
+    @track highlightedOptionsLabel = [];
+
+    _messageToDisplay = '';
 
     isFocusOnList = false;
 
@@ -705,6 +712,8 @@ export default class LightningDualListbox extends LightningElement {
             );
         }
 
+        this.movedOptions(addToSelect);
+
         const oldSelectedValues = this._selectedValues;
         this._selectedValues = newValues;
         const invalidMove =
@@ -730,6 +739,7 @@ export default class LightningDualListbox extends LightningElement {
             this.interactingState.leave();
             this.isFocusOnList = false;
             this.highlightedOptions = [];
+            this.highlightedOptionsLabel = [];
             this.optionToFocus = null;
         }
 
@@ -785,6 +795,7 @@ export default class LightningDualListbox extends LightningElement {
         const start = all ? options.length : this.lastSelected;
         let val, select;
         this.highlightedOptions = [];
+        this.highlightedOptionsLabel = [];
         for (let i = 0; i < options.length; i++) {
             select = (i - start) * (i - end) <= 0;
             if (select) {
@@ -889,6 +900,7 @@ export default class LightningDualListbox extends LightningElement {
         if (this.selectedList !== currentList || !isMultiple) {
             if (this.selectedList) {
                 this.highlightedOptions = [];
+                this.highlightedOptionsLabel = [];
                 this.lastSelected = -1;
             }
             this.selectedList = currentList;
@@ -1013,6 +1025,36 @@ export default class LightningDualListbox extends LightningElement {
         }
         if (!isSame) {
             this.highlightedOptions = [];
+            this.highlightedOptionsLabel = [];
+        }
+    }
+
+    movedOptions(addToSelect) {
+        const listName = addToSelect ? this.selectedLabel : this.sourceLabel;
+
+        for (let i = 0; i < this.highlightedOptions.length; i++) {
+            let selectedOption = addToSelect
+                ? this.computedSourceList.filter(
+                      (item) => item.value === this.highlightedOptions[i]
+                  )
+                : this.computedSelectedList.filter(
+                      (item) => item.value === this.highlightedOptions[i]
+                  );
+            this.highlightedOptionsLabel.push(selectedOption[0].label);
+        }
+
+        if (this.highlightedOptions.length) {
+            const strToFormat =
+                this.highlightedOptions.length > 1
+                    ? i18n.movedOptionsPlural
+                    : i18n.movedOptionsSingular;
+            this._messageToDisplay = formatLabel(
+                strToFormat,
+                this.highlightedOptionsLabel.join(', '),
+                listName
+            );
+        } else {
+            this._messageToDisplay = '';
         }
     }
 }

package/src/lightning/inputUtils/validity.js

@@ -7,6 +7,7 @@ import labelTooLong from '@salesforce/label/LightningErrorMessage.validityTooLon
 import labelTooShort from '@salesforce/label/LightningErrorMessage.validityTooShort';
 import labelTypeMismatch from '@salesforce/label/LightningErrorMessage.validityTypeMismatch';
 import labelValueMissing from '@salesforce/label/LightningErrorMessage.validityValueMissing';
+import labelSelectAtleastOneValue from '@salesforce/label/LightningErrorMessage.validitySelectAtleastOne';
 import { assert } from 'lightning/utilsPrivate';
 
 const constraintsSortedByPriority = [
@@ -20,6 +21,7 @@ const constraintsSortedByPriority = [
     'tooShort',
     'typeMismatch',
     'valueMissing',
+    'selectAtleastOneValue',
 ];
 
 const defaultLabels = {
@@ -33,6 +35,7 @@ const defaultLabels = {
     tooShort: labelTooShort,
     typeMismatch: labelTypeMismatch,
     valueMissing: labelValueMissing,
+    selectAtleastOneValue: labelSelectAtleastOneValue,
 };
 
 function resolveBestMatch(validity) {
@@ -103,6 +106,12 @@ function newValidityState(constraintsProvider) {
         get badInput() {
             return computeConstraint(constraintsProvider, 'badInput');
         }
+        get selectAtleastOneValue() {
+            return computeConstraint(
+                constraintsProvider,
+                'validitySelectAtleastOneValue'
+            );
+        }
 
         get valid() {
             return !(
@@ -115,7 +124,8 @@ function newValidityState(constraintsProvider) {
                 this.rangeOverflow ||
                 this.stepMismatch ||
                 this.customError ||
-                this.badInput
+                this.badInput ||
+                this.selectAtleastOneValue
             );
         }
     }
@@ -200,6 +210,7 @@ export class FieldConstraintApi {
             tooLong: this.inputComponent.messageWhenTooLong,
             typeMismatch: this.inputComponent.messageWhenTypeMismatch,
             valueMissing: this.inputComponent.messageWhenValueMissing,
+            selectAtleastOneValue: this.inputComponent.messageWhenValueMissing,
         });
     }
 

package/src/lightning/pillContainer/__docs__/pillContainer.md

@@ -14,6 +14,7 @@ selections when filtering a list, such as from a multi-select picklist.
 To specify the pills, set the `items` attribute to an array of values in your component's JavaScript. 
 
 By default, all pills in the container are displayed and wrap to additional lines if they can't fit on one line. 
+For information about changing the behavior, see **Managing Pill Layout in the Container**.
 
 This example creates three pills: a text-only pill, a pill with an avatar, and
 a pill with an icon.
@@ -70,7 +71,7 @@ To create a pill with an avatar, use the following attributes.
 To create a pill with an icon, use the following attributes.
 
 -   `type`: The media type. Use `icon`.
--   `iconName`: Required. The Lightning Design System name of the icon. Names are written in the format '\utility:down\' where 'utility' is the category, and 'down' is the specific icon to be displayed. Only utility icons can be used in this component.
+-   `iconName`: Required. The Lightning Design System name of the icon. Names are written in the format 'utility:down' where 'utility' is the category, and 'down' is the specific icon to be displayed. Only utility icons can be used for the `iconName`.
 -   `alternativeText`: The alternative text used to describe the icon. Describe what happens when you click the button, for example 'Upload File', not what the icon looks like, 'Paperclip'.
 
 `lightning-pill-container` provides two variants: `bare` and `standard` (default). They are visually the same. However, the `standard` variant renders pills in an unordered list element. For more information, see the **Accessibility** section.
@@ -135,9 +136,12 @@ set to false by default, which makes all pills display and wrap to multiple line
 - `single-line`: Specifies that the pill container can display one line of pills. By default, if pills can't fit on one line, they are wrapped to additional lines to fit the container. Set `single-line` to true to limit pill display to one line. This attribute overrides `is-collapsible` and `is-expanded`.
 
 If all pills aren't displayed, the component shows a text button indicating how many more pills there are.
+For example, if there are five more pills that aren’t displayed, the text button shows `+5 more`. The text button fires the `focus` event when you click it.
 
 To display a long list of pills as collapsed, set `is-collapsible` to true and optionally set `is-expanded` to false. Otherwise, pills are displayed expanded.
 
+##### Expand and Collapse Pills Programmatically
+
 Use `is-collapsible` and `is-expanded` to programmatically expand and collapse the pills.
 
 This example sets `is-collapsible` and uses a button to change the value of `is-expanded`.
@@ -175,6 +179,46 @@ export default class PillContainerCanCollapse extends LightningElement {
     ];
 }
 ```
+##### Display All Pills With the `+n more` Button
+
+If all pills aren't displayed, the component shows a text button labeled `+n more` to indicate more pills can be displayed. By default, `lightning-pill-container` doesn’t handle the `focus` event that’s fired when you click the button. You can handle the event to display more pills or write logic to do something else when the button is clicked.
+
+This example sets the pills to be collapsible but not expanded and handles the focus event.
+
+```html
+<template>
+    <div style="width: 600px">
+            <lightning-pill-container
+                items={items}
+                is-collapsible={collapsible}
+	            is-expanded={expanded}
+                onfocus={handlePillExpansion}
+            >
+            </lightning-pill-container>
+    </div>
+  </template>
+  ```
+
+The list of pills is initially collapsed. When there are too many pills to be displayed, the text button labeled `+n more` displays. The handler for the `focus` event enables all the pills to display.
+
+```javascript
+import { LightningElement } from 'lwc';
+
+export default class PillContainerMoreButtonExpands extends LightningElement {
+    collapsible = true;
+	expanded = false;
+
+handlePillExpansion(){
+    this.expanded = true;
+}
+
+    items = [
+        { 
+        //define the pills
+        }
+    ];
+}
+```
 
 #### Component Styling
 

package/src/lightning/positionLibrary/positionLibrary.js

@@ -131,50 +131,38 @@ function createRelationship(
     );
 
     const autoShrink = config.autoShrink.height || config.autoShrink.width;
-    const modal = new OverlayDetector(originalConfig.target);
-    if (
-        (config.scrollableParentBound && scrollableParent) ||
-        (modal.isInsideModal && modal.overlay && autoShrink)
-    ) {
-        let parent;
-        if (config.scrollableParentBound && scrollableParent) {
-            parent = normalizeElement(scrollableParent);
-        } else if (modal.isInsideModal && modal.overlay) {
-            parent = normalizeElement(modal.overlay);
-        }
-        if (parent) {
-            const boxConfig = {
-                element: config.element,
-                enabled: config.enabled,
-                target: createProxy(parent),
-                align: {},
-                targetAlign: {},
-                pad: 3,
-                boxDirections: {
-                    top: true,
-                    bottom: true,
-                    left: true,
-                    right: true,
-                },
-            };
-
-            if (autoShrink) {
-                const style = boxConfig.element.getNode().style;
-                if (!style.minHeight) {
-                    style.minHeight = config.minHeight;
-                    boxConfig.element._removeMinHeight = true;
-                }
-
-                boxConfig.boxDirections = {
-                    top: !!config.autoShrink.height,
-                    bottom: !!config.autoShrink.height,
-                    left: !!config.autoShrink.width,
-                    right: !!config.autoShrink.width,
-                };
-                constraintList.push(new Constraint('shrinking box', boxConfig));
-            } else {
-                constraintList.push(new Constraint('bounding box', boxConfig));
+    if (config.scrollableParentBound && scrollableParent) {
+        const parent = normalizeElement(scrollableParent);
+        const boxConfig = {
+            element: config.element,
+            enabled: config.enabled,
+            target: createProxy(parent),
+            align: {},
+            targetAlign: {},
+            pad: 3,
+            boxDirections: {
+                top: true,
+                bottom: true,
+                left: true,
+                right: true,
+            },
+        };
+        if (autoShrink) {
+            const style = boxConfig.element.getNode().style;
+            if (!style.minHeight) {
+                style.minHeight = config.minHeight;
+                boxConfig.element._removeMinHeight = true;
             }
+
+            boxConfig.boxDirections = {
+                top: !!config.autoShrink.height,
+                bottom: !!config.autoShrink.height,
+                left: !!config.autoShrink.width,
+                right: !!config.autoShrink.width,
+            };
+            constraintList.push(new Constraint('shrinking box', boxConfig));
+        } else {
+            constraintList.push(new Constraint('bounding box', boxConfig));
         }
     }
 

package/src/lightning/primitiveCellActions/primitiveCellActions.js

@@ -21,28 +21,33 @@ const i18n = {
     showActions: labelShowActions,
 };
 
+/**
+ * A cell-level action.
+ */
 export default class PrimitiveCellActions extends LightningElement {
-    static delegatesFocus = true;
-
-    @api rowKeyValue;
-    @api colKeyValue;
-    @api rowActions;
-
+    // Tracked objects
     @track containerRect;
     @track _actions = [];
 
+    // Private variables
+    static delegatesFocus = true;
     _isLoadingActions;
     _menuAlignment = DEFAULT_MENU_ALIGNMENT;
     _internalTabIndex = false;
 
-    connectedCallback() {
-        this._connected = true;
-    }
+    /************************** PUBLIC ATTRIBUTES ***************************/
 
-    disconnectedCallback() {
-        this._connected = false;
-    }
+    @api rowKeyValue;
+    @api colKeyValue;
+    @api rowActions;
 
+    /**
+     * Defines the current menu alignment
+     * See `VALID_MENU_ALIGNMENT` for valid menu alignment values
+     * See `DEFAULT_MENU_ALIGNMENT` for the default menu alignment
+     *
+     * @type {string}
+     */
     @api
     get menuAlignment() {
         return this._menuAlignment;
@@ -55,6 +60,11 @@ export default class PrimitiveCellActions extends LightningElement {
         });
     }
 
+    /************************** PUBLIC METHODS ***************************/
+
+    /**
+     * Sets focus on a lightning-button-menu
+     */
     @api
     focus() {
         if (this._connected) {
@@ -62,6 +72,9 @@ export default class PrimitiveCellActions extends LightningElement {
         }
     }
 
+    /**
+     * Clicks a lightning-button-menu
+     */
     @api
     click() {
         if (this._connected) {
@@ -73,18 +86,42 @@ export default class PrimitiveCellActions extends LightningElement {
         }
     }
 
+    /************************** PRIVATE GETTERS **************************/
+
+    /**
+     * Returns the computed menu alignment value
+     *
+     * @return {string} Current computed menu alignment
+     */
     get computedMenuAlignment() {
         return this.menuAlignment;
     }
 
+    /**
+     * Returns the button alternative text in the appropriate language
+     *
+     * @return {string} Language-specific button alternative text
+     */
     get buttonAlternateText() {
         return `${i18n.showActions}`;
     }
 
+    /**
+     * Returns the spinner alternative text in the appropriate language
+     *
+     * @return {string} Language-specific spinner alternative text
+     */
     get spinnerAlternateText() {
         return `${i18n.loadingActions}`;
     }
 
+    /************************ EVENT DISPATCHERS **************************/
+
+    /**
+     * Handles selecting an action
+     *
+     * @param {Event} event
+     */
     handleActionSelect(event) {
         this.dispatchEvent(
             new CustomEvent('privatecellactiontriggered', {
@@ -100,6 +137,9 @@ export default class PrimitiveCellActions extends LightningElement {
         );
     }
 
+    /**
+     * Handles the opening of an action menu
+     */
     handleMenuOpen() {
         this.elementRect = this.template
             .querySelector('lightning-button-menu')
@@ -135,6 +175,23 @@ export default class PrimitiveCellActions extends LightningElement {
         }
     }
 
+    /************************** LIFECYCLE HOOKS **************************/
+
+    connectedCallback() {
+        this._connected = true;
+    }
+
+    disconnectedCallback() {
+        this._connected = false;
+    }
+
+    /************************* HELPER FUNCTIONS **************************/
+
+    /**
+     * Resets loading state when all actions have been loaded
+     *
+     * @param {object} actions - Actions displayed in the menu
+     */
     finishLoadingActions(actions) {
         this._isLoadingActions = false;
         this._actions = actions;