lightning-base-components 1.21.4-alpha → 1.21.6-alpha

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,
@@ -126,8 +121,10 @@ import {
 import {
     getGridContainerFromScrollerY,
     getRowDataSelector,
-    getScrollerXFromScrollerY,
+    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);
         }
@@ -1011,8 +1005,7 @@ export default class LightningDatatable extends LightningElement {
         this._privateTypes = new DatatableTypes(this.constructor.customTypes);
 
         this._renderManager = new RenderManager();
-        this.getWrapperHeight = () =>
-            getScrollerXFromScrollerY(getScrollerY(this.template)).offsetHeight;
+        this.getWrapperHeight = () => getScrollerX(this.template).offsetHeight;
     }
 
     /**
@@ -1101,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,
@@ -1123,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);
             }
@@ -1141,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;
@@ -1148,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
@@ -1170,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);
@@ -1185,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
                     );
                 }
@@ -1325,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
@@ -1344,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);
             }
         }
@@ -1370,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) {
@@ -1394,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();
         }
@@ -1453,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);
@@ -1495,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.
      *
@@ -1505,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;
         }
     }
 
@@ -1622,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,
+                },
             })
         );
     }
@@ -1646,7 +1708,7 @@ export default class LightningDatatable extends LightningElement {
 
     /************************* HELPER FUNCTIONS **************************/
 
-    updateRowsState() {
+    updateRows() {
         this.updateRowsBeforeIndexes();
         this.updateRowsAndCells();
         this.updateRowsAfterIndexes();
@@ -1659,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,
@@ -1711,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);
     }
 
@@ -1754,7 +1816,7 @@ export default class LightningDatatable extends LightningElement {
     }
 
     updateRowsAndCells() {
-        updateRowsAndCellIndexes(this.state, this._privateTypes);
+        updateRowsAndCells(this.state, this._privateTypes);
     }
 
     updateVirtualizedRowHeights() {
@@ -1819,7 +1881,7 @@ export default class LightningDatatable extends LightningElement {
         const { template } = this;
         const scrollerY = getScrollerY(template);
         const scrollerYRect = scrollerY.getBoundingClientRect();
-        const scrollerX = getScrollerXFromScrollerY(scrollerY);
+        const scrollerX = getScrollerX(template);
         const scrollerXRect = scrollerX.getBoundingClientRect();
 
         return {

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)

package/src/lightning/datatable/inlineEdit.js

@@ -12,7 +12,7 @@ import {
     NAVIGATION_DIR,
     isValidCell,
 } from './keyboard';
-import { updateRowsAndCellIndexes, isCellEditable } from './rows';
+import { updateRowsAndCells } from './rows';
 import { getStateColumnIndex } from './columns';
 import { resetErrors } from './errors';
 import { setAriaSelectedOnCell, unsetAriaSelectedOnCell } from './rowSelection';
@@ -160,7 +160,8 @@ export function cancelInlineEdit(dt) {
     const { state, _privateTypes } = dt;
     resetErrors(state);
     state.inlineEdit.dirtyValues = {};
-    updateRowsAndCellIndexes(state, _privateTypes);
+    dt._draftValues = [];
+    updateRowsAndCells(state, _privateTypes);
 }
 
 export function closeInlineEdit(dt) {
@@ -246,7 +247,7 @@ function processInlineEditFinish(dt, reason, rowKeyValue, colKeyValue) {
             dispatchCellChangeEvent(dt, changes);
 
             // TODO: do we need to update all rows in the dt or just the one that was modified?
-            updateRowsAndCellIndexes(state, dt._privateTypes);
+            updateRowsAndCells(state, dt._privateTypes);
         }
     }
 
@@ -571,8 +572,7 @@ function getResolvedCellChanges(state, rowChanges) {
                 const colIndex = getStateColumnIndex(state, colKeyValue);
                 if (colIndex !== -1) {
                     const col = columns[colIndex];
-                    cellChanges[col.columnKey || col.fieldName] =
-                        colChanges[colKeyValue];
+                    cellChanges[col.name] = colChanges[colKeyValue];
                 }
             }
             result.push(cellChanges);
@@ -709,13 +709,16 @@ function getFirstEditableCell(dt) {
     if (editableColumnsLength > 0) {
         const { rows } = state;
         for (let rowIndex = 0; rowIndex < rows.length; rowIndex += 1) {
-            const { key: rowKeyValue } = rows[rowIndex];
+            const row = rows[rowIndex];
+            const { key: rowKeyValue } = row;
             for (let i = 0; i < editableColumnsLength; i += 1) {
                 // Loop through the editable columns in order and examine the
                 // corresponding cells in the current row for editability,
                 // returning the first such cell that is editable.
                 const editableColumn = editableColumns[i];
-                if (isCellEditable(rows[rowIndex], editableColumn)) {
+                const { colKeyValue } = editableColumns[i];
+                const cell = row.cells[getStateColumnIndex(state, colKeyValue)];
+                if (cell && cell.editable) {
                     return {
                         rowKeyValue,
                         colKeyValue: editableColumn.colKeyValue,