lightning-base-components 1.21.5-alpha → 1.21.6-alpha

package/metadata/raptor.json

@@ -3083,6 +3083,7 @@
     "minVersion": "45.0"
   },
   "platformScaleCenterApi": {},
+  "platformSharingApi": {},
   "platformShowToastEvent": {
     "minVersion": "45.0"
   },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lightning-base-components",
-    "version": "1.21.5-alpha",
+    "version": "1.21.6-alpha",
     "license": "MIT",
     "files": [
         "external",

package/src/lightning/badge/badge.slds.css

@@ -12,7 +12,7 @@
     align-items: center;
     padding: var(--slds-g-spacing-1) var(--slds-g-spacing-2);
     color: var(--slds-c-badge-text-color, var(--slds-g-color-on-surface-3));
-    font-size: var(--slds-c-badge-font-size, var(--slds-g-font-scale-neg-2));
+    font-size: var(--slds-c-badge-font-size, var(--slds-g-font-scale-neg-1));
     font-weight: var(--slds-g-font-weight-7);
     /* stylelint-disable */
     line-height: var(--slds-c-badge-font-lineheight, initial);

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

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

package/src/lightning/datatable/columns.js

@@ -43,7 +43,11 @@ const SELECTABLE_COLUMN = {
  * @param {Array} rawColumns - The user provided column definitions to normalize
  * @param {Object} types - The type handling factory
  */
-export function normalizeColumns(state, rawColumns, types) {
+export function setColumns(state, rawColumns, types) {
+    // Untracked state changes.
+    state.hadTreeDataTypePreviously = state.treeColumn !== undefined;
+    state.treeColumn = undefined;
+
     const { length: colCount } = rawColumns;
     if (colCount === 0) {
         // Tracked state change.
@@ -176,13 +180,22 @@ export function normalizeColumns(state, rawColumns, types) {
         }
 
         // Generate colKeyValue after normalizing customer column.
-        normCol.colKeyValue = generateColKeyValue(normCol, colIndex);
+        const colKeyValue =
+            normCol.colKeyValue ||
+            `${colName || colIndex}-${columnType}-${colIndex}`;
+
+        normCol.colKeyValue = colKeyValue;
         normCol.isScopeCol = colIndex === firstColumnForReaders;
         normCol.isLastCol = colIndex === normColCount - 1;
+        normCol.name = colName;
         normCol.tabIndex = -1;
 
         // normalize tree column
         if (normCol.type === 'tree') {
+            if (state.treeColumn === undefined) {
+                // Untracked state changes
+                state.treeColumn = normCol;
+            }
             // normalized subType attributes
             const { typeAttributes } = normCol;
             const typeAttributesOverrides = {};
@@ -201,10 +214,9 @@ export function normalizeColumns(state, rawColumns, types) {
 
         // partially inline updateHeaderInternalActions from datatable/headerActions
         const { actions } = normCol;
-        const isLastColumn = colIndex === normColCount - 1;
         normCol.actions = {
             menuAlignment:
-                isLastColumn ||
+                normCol.isLastCol ||
                 normalizedColumns[colIndex + 1].type === 'action'
                     ? 'auto-right'
                     : 'auto-left',
@@ -247,19 +259,6 @@ export function getCellAttributesValues(column) {
     return isObjectLike(cellAttributes) ? cellAttributes : {};
 }
 
-/**
- * Generates a unique column key value.
- *
- * @param {Object} columnMetadata The object for an specific column metadata
- * @param {Integer} index Optionally, the index of the column.
- * @returns {String} It generates the column key value based on the column field name and type.
- */
-export function generateColKeyValue(columnMetadata, index) {
-    const { columnKey, fieldName, type } = columnMetadata;
-    const prefix = columnKey || fieldName || index;
-    return `${prefix}-${type}-${index}`;
-}
-
 /**
  * Return the index in dt.columns (user definition) related to colKeyValue.
  *      -1 if no column with that key exist or if its internal.
@@ -296,7 +295,7 @@ export function getUserColumnIndex(state, colKeyValue) {
  */
 export const generateHeaderIndexes = function (columns) {
     return columns.reduce((prev, col, index) => {
-        prev[generateColKeyValue(col, index)] = index;
+        prev[col.colKeyValue] = index;
         return prev;
     }, {});
 };

package/src/lightning/datatable/datatable.js

@@ -15,7 +15,7 @@ import {
 import { LightningDatatableResizeObserver } from './resizeObserver';
 import { ColumnWidthManager } from './columnWidthManager';
 import { getDefaultState } from './state';
-import { normalizeColumns, generateHeaderIndexes } from './columns';
+import { setColumns, generateHeaderIndexes } from './columns';
 import {
     getCustomerColumnWidths,
     getResizerDefaultState,
@@ -29,7 +29,7 @@ import {
 import { setErrors } from './errors';
 import {
     setKeyField,
-    updateRowsAndCellIndexes,
+    updateRowsAndCells,
     updateCellClassForRoleBasedMode,
     recomputeCellStyles,
 } from './rows';
@@ -111,12 +111,7 @@ import {
     updateRowNavigationMode,
     updateRowTabIndex,
 } from './keyboard';
-import {
-    isViewportRenderingEnabled,
-    setViewportRendering,
-    setVirtualize,
-    RenderManager,
-} from './renderManager';
+import { setVirtualize, RenderManager } from './renderManager';
 import {
     setDefaultSortDirection,
     setSortedBy,
@@ -128,6 +123,8 @@ import {
     getRowDataSelector,
     getScrollerX,
     getScrollerY,
+    isObjectLike,
+    isRenderModeRoleBased,
 } from './utils';
 import { setWrapTextMaxLines } from './wrapText';
 import {
@@ -136,7 +133,6 @@ import {
     resetTableHeight,
     findFirstVisibleIndex,
 } from './virtualization';
-import { hasTreeDataType } from './tree';
 import DatatableTypes from './types';
 
 const i18n = {
@@ -188,6 +184,7 @@ export default class LightningDatatable extends LightningElement {
     _draftValues = [];
     _isResizing = false; // Whether resizing is in progress
     _lastRenderedRow = null; // last rendered row, used for UTAM
+    _positionRelationship;
     _privateTypes = {};
     _rawColumns = [];
     _renderConfig;
@@ -195,7 +192,7 @@ export default class LightningDatatable extends LightningElement {
     _renderMode = 'default';
     _shouldResetFocus = false; // used to ensure focus isn't lost from changes in renderedRows
     _suppressBottomBar = false;
-    _widthObserver = null; // Instance of LightningDatatableResizeObserver
+    _widthObserver; // Instance of LightningDatatableResizeObserver
 
     /************************* PUBLIC PROPERTIES *************************/
 
@@ -284,7 +281,7 @@ export default class LightningDatatable extends LightningElement {
 
         // do necessary updates since rows have changed
         if (this.hasValidKeyField) {
-            this.updateRowsState();
+            this.updateRows();
             resetTableHeight(state);
         }
         if (this._customerSelectedRows) {
@@ -362,7 +359,7 @@ export default class LightningDatatable extends LightningElement {
 
     set errors(value) {
         setErrors(this.state, value);
-        this.updateRowsState();
+        this.updateRows();
     }
 
     /**
@@ -452,7 +449,7 @@ export default class LightningDatatable extends LightningElement {
         setKeyField(state, value);
         // Tracked state change.
         setDirtyValues(state, this._draftValues);
-        this.updateRowsState();
+        this.updateRows();
     }
 
     /**
@@ -550,9 +547,7 @@ export default class LightningDatatable extends LightningElement {
     }
 
     set renderConfig(value) {
-        if (typeof value === 'object') {
-            setViewportRendering(this.state, value.viewportRendering);
-
+        if (isObjectLike(value)) {
             this._renderManager.configure(
                 this.state,
                 this.getWrapperHeight,
@@ -586,11 +581,23 @@ export default class LightningDatatable extends LightningElement {
 
     set renderMode(value) {
         const { _renderConfig, state } = this;
-        this._renderMode = normalizeString(value, {
+        const renderMode = normalizeString(value, {
             fallbackValue: 'default',
             validValues: ['default', 'role-based'],
         });
-        state.renderModeRoleBased = this._renderMode === 'role-based';
+        const renderModeRoleBased = isRenderModeRoleBased(renderMode);
+
+        this._renderMode = renderMode;
+        // Untracked state changes.
+        state.hasRenderedFirstTime = false;
+        state.renderModeRoleBased = renderModeRoleBased;
+        if (this.isConnected) {
+            const { _widthObserver } = this;
+            if (_widthObserver) {
+                _widthObserver.disconnect();
+            }
+            this._renderManager.disconnectResizeObserver();
+        }
         if (_renderConfig) {
             setVirtualize(state, _renderConfig.virtualize);
         }
@@ -688,9 +695,9 @@ export default class LightningDatatable extends LightningElement {
     }
 
     /**
-     * The column key or fieldName that controls the sorting order.
+     * The column key or fieldName(s) that controls the sorting order.
      * Sort the data using the onsort event handler.
-     * @type {String}
+     * @type {String|String[]}
      */
     @api
     get sortedBy() {
@@ -706,8 +713,8 @@ export default class LightningDatatable extends LightningElement {
     /**
      * Specifies the sorting direction.
      * Sort the data using the onsort event handler.
-     * Valid options include 'asc' and 'desc'.
-     * @type {String}
+     * Valid options include a single value of 'asc' or 'desc' or an array of such values.
+     * @type {String|String[]}
      */
     @api
     get sortedDirection() {
@@ -793,17 +800,8 @@ export default class LightningDatatable extends LightningElement {
 
     /************************** PRIVATE GETTERS **************************/
 
-    /**
-     * Retrieves the grid container:
-     * 1. For a table-based table, it will retrieve the <table role="grid"> element
-     * 2. For a role-based table, it will retrieve the <div role="grid"> element
-     * 3. If it is a tree grid, it will retrieve the <table role="treegrid"> element
-     */
     get gridContainer() {
-        return (
-            this.template.querySelector('[role="grid"]') ||
-            this.template.querySelector('[role="treegrid"]')
-        );
+        return getGridContainerFromScrollerY(getScrollerY(this.template));
     }
 
     get computedTableContainerClass() {
@@ -822,12 +820,12 @@ export default class LightningDatatable extends LightningElement {
             'slds-table_bordered': true,
             'slds-table_edit': true,
             'slds-table_resizable-cols': !this.widthsData.resizeColumnDisabled,
-            'slds-tree slds-table_tree': hasTreeDataType(state),
+            'slds-tree slds-table_tree': !!state.treeColumn,
         });
     }
 
     get computedTableRole() {
-        return hasTreeDataType(this.state) ? 'treegrid' : 'grid';
+        return this.state.treeColumn ? 'treegrid' : 'grid';
     }
 
     get computedTableStyle() {
@@ -957,10 +955,6 @@ export default class LightningDatatable extends LightningElement {
         return this._privateTypes;
     }
 
-    get viewportRendering() {
-        return isViewportRenderingEnabled(this.state);
-    }
-
     get renderedRows() {
         const { state } = this;
         const { virtualize, rows, renderedRowCount } = state;
@@ -972,7 +966,7 @@ export default class LightningDatatable extends LightningElement {
             this._shouldResetFocus = true;
             return rows.slice(firstIndex, lastIndex);
         }
-        if (this.viewportRendering) {
+        if (state.enableViewportRendering) {
             this._lastRenderedRow = renderedRowCount;
             return rows.slice(0, renderedRowCount);
         }
@@ -1100,11 +1094,17 @@ export default class LightningDatatable extends LightningElement {
     }
 
     renderedCallback() {
-        const { _columnWidthManager, state, template, widthsData } = this;
+        const {
+            _columnWidthManager,
+            gridContainer,
+            state,
+            template,
+            widthsData,
+        } = this;
 
         // This keeps underlying table element up to date if the aria-* properties on this element is dynamically changed.
         // It does the work of removing and adding the attribute if the value is empty(ish) or a normal string.
-        synchronizeAttrs(this.gridContainer, {
+        synchronizeAttrs(gridContainer, {
             'aria-label': this.ariaLabel,
             'aria-labelledby': this.ariaLabelledBy,
             'aria-describedby': this.ariaDescribedBy,
@@ -1122,6 +1122,10 @@ export default class LightningDatatable extends LightningElement {
                 columns,
                 widthsData
             );
+            // Managing cell widths is required for role-based render mode.
+            if (state.renderModeRoleBased) {
+                recomputeCellStyles(state);
+            }
             if (fireResizeEvent) {
                 this.fireOnResize(false);
             }
@@ -1140,6 +1144,10 @@ export default class LightningDatatable extends LightningElement {
                         state.columns,
                         widthsData
                     );
+                    // Managing cell widths is required for role-based render mode.
+                    if (state.renderModeRoleBased) {
+                        recomputeCellStyles(state);
+                    }
                 }
             );
             this._widthObserver = _widthObserver;
@@ -1147,12 +1155,6 @@ export default class LightningDatatable extends LightningElement {
             _widthObserver.observe(template);
         }
 
-        // Managing the cell widths is only required for the role-based table
-        if (state.renderModeRoleBased) {
-            // TODO: Look to further optimize - Do this only when required
-            recomputeCellStyles(this.privateTypes, state);
-        }
-
         handlePrefetch.call(this);
 
         // customerSelectedRows is only valid till render, after it, the one
@@ -1169,7 +1171,7 @@ export default class LightningDatatable extends LightningElement {
             const { activeCell } = state;
             if (
                 activeCell &&
-                activeCell.focused &&
+                activeCell.hasFocus &&
                 !state.inlineEdit.isPanelVisible
             ) {
                 const cellElement = getActiveCellElement(template, state);
@@ -1184,23 +1186,36 @@ export default class LightningDatatable extends LightningElement {
             }
         }
 
-        this.updateVirtualizedRowHeights();
+        const { hasRenderedFirstTime } = state;
+        const virtualize = !!state.virtualize;
+        const { length: rowCount } = state.rows;
 
-        if (this.viewportRendering || state.virtualize) {
-            const resizeTarget = this.template.querySelector(
-                'div.dt-outer-container'
-            );
-            this._renderManager.connectResizeObserver(resizeTarget);
-            if (!this._renderManager.hasWrapperHeight()) {
-                this._renderManager.updateWrapperHeight(this.getWrapperHeight);
+        // Untracked state changes.
+        // Set rendered flags BEFORE handlePrefetch() is called.
+        state.hasRenderedFirstTime = true;
+
+        if (virtualize || state.enableViewportRendering) {
+            const { _renderManager } = this;
+            if (rowCount) {
+                if (virtualize) {
+                    this.updateVirtualizedRowHeights();
+                }
+            }
+            if (!hasRenderedFirstTime) {
+                this._renderManager.connectResizeObserver(
+                    template.querySelector('div.dt-outer-container')
+                );
+            }
+            if (!_renderManager.hasWrapperHeight()) {
+                _renderManager.updateWrapperHeight(this.getWrapperHeight);
 
                 // Reset the row count if we already had one before updating the wrapper height.
                 // This can happen if the number of rows was calculated before the datatable
                 // was rendered.
-                if (this.state.renderedRowCount) {
-                    this._renderManager.updateViewportRendering(
-                        this.state,
-                        this.gridContainer,
+                if (state.renderedRowCount) {
+                    _renderManager.updateViewportRendering(
+                        state,
+                        gridContainer,
                         true
                     );
                 }
@@ -1324,16 +1339,16 @@ export default class LightningDatatable extends LightningElement {
                 this.state,
                 event.target.scrollTop
             );
-        } else if (this.viewportRendering) {
+        } else if (state.enableViewportRendering) {
             this._renderManager.handleScroll(state, event);
         }
     }
 
     /**
-     * Handles the `click` event on the <table> element and
+     * Handles the 'click' event on the <table> element and
      * the corresponding <div> in the role-based table
      *
-     * @param {MouseEvent} event - `click`
+     * @param {MouseEvent} event - 'click'
      */
     handleTableCellClick(event) {
         // handles the case when clicking on the margin/pading of the td/th
@@ -1343,20 +1358,22 @@ export default class LightningDatatable extends LightningElement {
             const { rowKeyValue, colKeyValue } =
                 target.querySelector(':first-child');
 
-            const { state, template } = this;
+            const { state } = this;
             if (
                 state.rowMode ||
                 !isActiveCell(state, rowKeyValue, colKeyValue)
             ) {
-                if (state.rowMode && state.activeCell) {
+                if (state.activeCell && state.rowMode) {
+                    // Untracked state change.
                     unsetRowNavigationMode(state);
                     const { rowIndex } = getIndexesActiveCell(state);
+                    // Tracked state change.
                     updateRowTabIndex(state, rowIndex, -1);
                 }
                 this.setActiveCell(rowKeyValue, colKeyValue);
             }
 
-            if (!datatableHasFocus(state, template)) {
+            if (!datatableHasFocus(state, this.template)) {
                 setCellClickedForFocus(state);
             }
         }
@@ -1369,8 +1386,36 @@ export default class LightningDatatable extends LightningElement {
      */
     handleUpdateColumnSort(event) {
         event.stopPropagation();
-        const { fieldName, columnKey, sortDirection } = event.detail;
-        this.fireSortedColumnChange(fieldName, columnKey, sortDirection);
+        const {
+            fieldNames,
+            sortDirections,
+            isMultiColumnSort,
+            fieldName,
+            columnKey,
+            sortDirection,
+        } = event.detail;
+
+        if (isMultiColumnSort) {
+            // multi-column sort
+            this.fireSortedColumnChange(
+                fieldNames,
+                sortDirections,
+                isMultiColumnSort,
+                fieldName,
+                columnKey,
+                sortDirection
+            );
+        } else {
+            // single-column sort
+            this.fireSortedColumnChange(
+                [fieldName],
+                [sortDirection],
+                false,
+                fieldName,
+                columnKey,
+                sortDirection
+            );
+        }
     }
 
     handleCheckboxHeaderId(event) {
@@ -1393,6 +1438,10 @@ export default class LightningDatatable extends LightningElement {
                 colIndex,
                 delta
             );
+            // Managing cell widths is required for role-based render mode.
+            if (state.renderModeRoleBased) {
+                recomputeCellStyles(state);
+            }
             this.fireOnResize(true);
             this.fixHeaderForSafari();
         }
@@ -1452,7 +1501,7 @@ export default class LightningDatatable extends LightningElement {
         const { rowKeyValue, colKeyValue, needsRefocusOnCellElement } =
             event.detail;
         if (!isActiveCell(state, rowKeyValue, colKeyValue)) {
-            if (state.rowMode && state.activeCell) {
+            if (state.activeCell && state.rowMode) {
                 unsetRowNavigationMode(state);
                 const { rowIndex } = getIndexesActiveCell(state);
                 updateRowTabIndex(state, rowIndex, -1);
@@ -1494,7 +1543,7 @@ export default class LightningDatatable extends LightningElement {
      * and when the active cell loses focus after renderedRows changes
      * on a virtualized table, in which case we don't want to lose focus.
      *
-     * We account for this by setting activeCell.focused to the value of
+     * We account for this by setting activeCell.hasFocus to the value of
      * _shouldResetFocus, which will be true if and only if focus was
      * lost due to a renderedRows change for a virtualized table.
      *
@@ -1504,7 +1553,7 @@ export default class LightningDatatable extends LightningElement {
         handleDatatableFocusOut.call(this, event);
         const { activeCell } = this.state;
         if (activeCell) {
-            activeCell.focused = this._shouldResetFocus;
+            activeCell.hasFocus = this._shouldResetFocus;
         }
     }
 
@@ -1621,10 +1670,24 @@ export default class LightningDatatable extends LightningElement {
         );
     }
 
-    fireSortedColumnChange(fieldName, columnKey, sortDirection) {
+    fireSortedColumnChange(
+        fieldNames,
+        sortDirections,
+        isMultiColumnSort,
+        fieldName,
+        columnKey,
+        sortDirection
+    ) {
         this.dispatchEvent(
             new CustomEvent('sort', {
-                detail: { fieldName, columnKey, sortDirection },
+                detail: {
+                    fieldNames,
+                    sortDirections,
+                    isMultiColumnSort,
+                    fieldName,
+                    columnKey,
+                    sortDirection,
+                },
             })
         );
     }
@@ -1645,7 +1708,7 @@ export default class LightningDatatable extends LightningElement {
 
     /************************* HELPER FUNCTIONS **************************/
 
-    updateRowsState() {
+    updateRows() {
         this.updateRowsBeforeIndexes();
         this.updateRowsAndCells();
         this.updateRowsAfterIndexes();
@@ -1658,7 +1721,7 @@ export default class LightningDatatable extends LightningElement {
 
     updateRowsAfterIndexes() {
         const { state, widthsData } = this;
-        if (this.viewportRendering || state.virtualize) {
+        if (state.enableViewportRendering || state.virtualize) {
             this._renderManager.updateViewportRendering(
                 state,
                 this.gridContainer,
@@ -1710,15 +1773,15 @@ export default class LightningDatatable extends LightningElement {
 
     updateColumnsBeforeIndexes(columns) {
         const { state } = this;
-        const hadTreeDataTypePreviously = hasTreeDataType(state);
         // Untracked state changes.
         // Calculate cell to focus next before indexes are updated.
         setCellToFocusFromPrev(state, this.template);
-        normalizeColumns(state, columns, this.privateTypes);
-        updateRowNavigationMode(hadTreeDataTypePreviously, state);
+        setColumns(state, columns, this.privateTypes);
+        updateRowNavigationMode(state);
         // Tracked state changes.
         setDirtyValues(state, this._draftValues);
-        // Updates state.wrapText and when isWrappableType, sets internal header actions
+        // Update state.wrapText and when type is not in NON_WRAPPABLE_TYPES
+        // and sets internal header actions.
         updateHeaderInternalActions(state);
     }
 
@@ -1753,7 +1816,7 @@ export default class LightningDatatable extends LightningElement {
     }
 
     updateRowsAndCells() {
-        updateRowsAndCellIndexes(this.state, this._privateTypes);
+        updateRowsAndCells(this.state, this._privateTypes);
     }
 
     updateVirtualizedRowHeights() {

package/src/lightning/datatable/indexes.js

@@ -1,5 +1,3 @@
-import { generateColKeyValue } from './columns';
-
 export const HEADER_ROW_INDEX = -1;
 export const HEADER_ROW_KEY = 'HEADER';
 
@@ -11,7 +9,7 @@ export function getCellFromIndexes(state, rowIndex, colIndex) {
                 rowIndex === HEADER_ROW_INDEX
                     ? HEADER_ROW_KEY
                     : rows[rowIndex].key,
-            colKeyValue: generateColKeyValue(columns[colIndex], colIndex),
+            colKeyValue: columns[colIndex].colKeyValue,
         };
     }
     return undefined;

package/src/lightning/datatable/infiniteLoading.js

@@ -94,7 +94,7 @@ export function handlePrefetch() {
     if (
         state.isLoading ||
         !state.enableInfiniteLoading ||
-        (this.viewportRendering &&
+        (state.enableViewportRendering &&
             this._renderManager &&
             !this._renderManager.hasWrapperHeight()) ||
         !hasData(template)