lightning-base-components 1.21.6-alpha → 1.21.7-alpha

package/src/lightning/datatable/renderManager.js

@@ -159,23 +159,28 @@ export class RenderManager {
         const firstVisibleKey =
             rows[firstVisibleIndex] && rows[firstVisibleIndex].key;
 
+        // if using variable heights, see if we can get more
+        // accurate estimate based on known row heights
         if (!fixedHeight && heightCache[firstVisibleKey]) {
             let i = firstVisibleIndex;
             let currentHeight = 0;
-            const knownRowHeight = rows[i] && heightCache[rows[i].key];
+            let knownRowHeight = rows[i] && heightCache[rows[i].key];
             // loop through rows until we find last row based on wrapper height
             while (knownRowHeight && currentHeight < this.wrapperHeight) {
                 currentHeight += knownRowHeight;
                 i = i + 1;
+                knownRowHeight = rows[i] && heightCache[rows[i].key];
             }
             if (currentHeight >= this.wrapperHeight) {
-                // row heights were measured; i represents last visible index
-                lastIndex = i + bufferSize - 1;
+                // all row heights were measured; i is first non-visible index
+                lastIndex = i + bufferSize;
             } else {
-                // row heights not yet measured, i is last visible index with known height
+                // at least some row heights not yet measured
+                // i is first visible index with unknown height
                 // guess lastIndex based on default row height
-                const extraRowEstimate =
-                    (this.wrapperHeight - currentHeight) / rowHeight;
+                const extraRowEstimate = Math.ceil(
+                    (this.wrapperHeight - currentHeight) / rowHeight
+                );
                 lastIndex = i + extraRowEstimate + bufferSize;
             }
         }
@@ -186,7 +191,7 @@ export class RenderManager {
             renderedRowCount === rows.length &&
             lastIndex <= rows.length - bufferSize
         ) {
-            lastIndex = renderedRowCount - 1;
+            lastIndex = renderedRowCount;
         }
         return { firstIndex, lastIndex };
     }
@@ -302,8 +307,6 @@ export class RenderManager {
      * Used to determine how many additional rows to render
      */
     getRowCountWithBuffer(state) {
-        // buffer is before and after with virtualization
-        // but only after with viewport rendering
         const multiplier = state.virtualize ? 2 : 1;
         return (
             this.getRowCountInViewport(state) + state.bufferSize * multiplier

package/src/lightning/datatable/rowLevelActions.js

@@ -1,5 +1,5 @@
 import { unwrap } from 'lwc';
-import { getUserRowByCellKeys } from './indexes';
+import { getUserRowByKey } from './indexes';
 import { getUserColumnIndex } from './columns';
 
 /**
@@ -10,12 +10,8 @@ import { getUserColumnIndex } from './columns';
 export function handleRowActionTriggered(event) {
     event.stopPropagation();
 
-    const { action, colKeyValue, rowKeyValue } = event.detail;
-    const selectedRow = getUserRowByCellKeys(
-        this.state,
-        rowKeyValue,
-        colKeyValue
-    );
+    const { action, rowKeyValue } = event.detail;
+    const selectedRow = getUserRowByKey(this.state, rowKeyValue);
 
     this.dispatchEvent(
         new CustomEvent('rowaction', {
@@ -37,16 +33,11 @@ export function handleLoadDynamicActions(event) {
 
     const {
         actionsProviderFunction,
-        colKeyValue,
         doneCallback,
         rowKeyValue,
         saveContainerPosition,
     } = event.detail;
-    const selectedRow = getUserRowByCellKeys(
-        this.state,
-        rowKeyValue,
-        colKeyValue
-    );
+    const selectedRow = getUserRowByKey(this.state, rowKeyValue);
 
     saveContainerPosition(this.getViewableRect());
     actionsProviderFunction(unwrap(selectedRow), doneCallback);
@@ -62,7 +53,7 @@ export function handleCellButtonClick(event) {
 
     const { state } = this;
     const { colKeyValue, rowKeyValue } = event.detail;
-    const selectedRow = getUserRowByCellKeys(state, rowKeyValue, colKeyValue);
+    const selectedRow = getUserRowByKey(state, rowKeyValue);
     const colIndex = getUserColumnIndex(state, colKeyValue);
     const col = this._rawColumns[colIndex];
 

package/src/lightning/datatable/rowSelection.js

@@ -1,5 +1,9 @@
-import { getRowByKey, getRowIndexByKey, HEADER_ROW_KEY } from './indexes';
-import { getStateColumnIndex } from './columns';
+import {
+    getCellByKeys,
+    getRowByKey,
+    getRowIndexByKey,
+    HEADER_ROW_KEY,
+} from './indexes';
 import { isNonNegativeInteger } from './utils';
 import {
     getCurrentSelectionLength,
@@ -7,6 +11,7 @@ import {
     isDisabledRow,
     SELECTABLE_HEADER_TYPE,
 } from './rowSelectionShared';
+import { setInliningProperties } from './rowsInlining';
 
 const MAX_ROW_SELECTION_DEFAULT = undefined;
 
@@ -494,7 +499,7 @@ function getLastRowSelection(state) {
     const { lastSelectedRowKey } = state;
     const keyIsValid =
         lastSelectedRowKey !== undefined &&
-        getRowIndexByKey(state, lastSelectedRowKey) !== undefined;
+        getRowByKey(state, lastSelectedRowKey) !== undefined;
 
     return keyIsValid ? lastSelectedRowKey : undefined;
 }
@@ -532,15 +537,33 @@ export function inputTypeNeedsToChange(
     );
 }
 
-export function updateRowSelectionInputType(state) {
-    const type = state.maxRowSelection === 1 ? 'radio' : 'checkbox';
+export function updateRowSelectionInputType(state, datatableId) {
+    const isInputTypeCheckbox = state.maxRowSelection !== 1;
+    const type = isInputTypeCheckbox ? 'checkbox' : 'radio';
     const { rows } = state;
 
+    // Determine if inlining props need resetting
+    // And which column to reset if so
+    let resetInliningProps = false;
+    let checkboxColIndex;
+    if (state.renderModeInline && !state.hideCheckboxColumn) {
+        resetInliningProps = true;
+        checkboxColIndex = state.showRowNumberColumn ? 1 : 0;
+    }
+
     for (let i = 0, { length: rowCount } = rows; i < rowCount; i += 1) {
         // Tracked state changes.
         const row = rows[i];
         row.inputType = type;
         row.isDisabled = isDisabledRow(state, row.key);
+        if (resetInliningProps) {
+            setInliningProperties(
+                state,
+                row.cells[checkboxColIndex],
+                isInputTypeCheckbox,
+                datatableId
+            );
+        }
     }
 }
 
@@ -557,7 +580,7 @@ export function updateRowSelectionInputType(state) {
  * @param {Object} state - The datatable state
  * @param {Number | String} - value to set for maxRowSelection
  */
-export function setMaxRowSelection(state, value) {
+export function setMaxRowSelection(state, value, datatableId) {
     const previousSelectedRowsKeys = getSelectedRowsKeys(state);
     // Tracked state changes.
     markAllRowsDeselected(state);
@@ -579,7 +602,7 @@ export function setMaxRowSelection(state, value) {
             inputTypeNeedsToChange(previousMaxRowSelection, newMaxRowSelection)
         ) {
             // Tracked state changes.
-            updateRowSelectionInputType(state);
+            updateRowSelectionInputType(state, datatableId);
             updateBulkSelectionState(state);
         }
     } else {
@@ -662,11 +685,9 @@ function getRowIntervalIndexes(state, startRowKey, endRowKey) {
  * @param {String} colKeyValue - The column key of the cell to mark selected
  */
 export function setAriaSelectedOnCell(state, rowKeyValue, colKeyValue) {
-    const row = getRowByKey(state, rowKeyValue);
-    const colIndex = getStateColumnIndex(state, colKeyValue);
-
-    if (row && colIndex) {
-        row.cells[colIndex].ariaSelected = 'true';
+    const cell = getCellByKeys(state, rowKeyValue, colKeyValue);
+    if (cell) {
+        cell.ariaSelected = 'true';
     }
 }
 
@@ -682,11 +703,9 @@ export function setAriaSelectedOnCell(state, rowKeyValue, colKeyValue) {
  * @param {String} colKeyValue - The column key of the cell to select
  */
 export function unsetAriaSelectedOnCell(state, rowKeyValue, colKeyValue) {
-    const row = getRowByKey(state, rowKeyValue);
-    const colIndex = getStateColumnIndex(state, colKeyValue);
-
-    if (row && colIndex) {
-        row.cells[colIndex].ariaSelected = false;
+    const cell = getCellByKeys(state, rowKeyValue, colKeyValue);
+    if (cell) {
+        cell.ariaSelected = false;
     }
 }
 

package/src/lightning/datatable/rowSelectionShared.js

@@ -1,4 +1,5 @@
 export const SELECTABLE_HEADER_TYPE = 'SELECTABLE_CHECKBOX';
+export const SORTING_MENU_HEADER_TYPE = 'SELECTABLE_BUTTON_MENU';
 
 /**
  * This file exists in order to get around circular dependencies.

package/src/lightning/datatable/rows.js

@@ -1,16 +1,24 @@
-import { assert } from 'lightning/utilsPrivate';
-import { classSet, isObjectLike } from './utils';
-import { getAttributesNames } from './types';
-import {
-    getCurrentSelectionLength,
-    SELECTABLE_HEADER_TYPE,
-} from './rowSelectionShared';
+import { assert, isRTL } from 'lightning/utilsPrivate';
 import {
     getTypeAttributesValues,
     getSubTypeAttributesValues,
     getCellAttributesValues,
 } from './columns';
+import { addHeaderIndex } from './indexes';
+import {
+    setInliningProperties,
+    updateInlineCell,
+    updateInlineClassAndStyle,
+    updateInlineCellValue,
+} from './rowsInlining';
 import { getRowNumberError } from './rowNumber';
+import {
+    getCurrentSelectionLength,
+    SELECTABLE_HEADER_TYPE,
+    SORTING_MENU_HEADER_TYPE,
+} from './rowSelectionShared';
+import { getAttributesNames } from './types';
+import { classSet, isObjectLike } from './utils';
 
 const CELL_EDIT_CLASS = 'slds-cell-edit';
 const HAS_ERROR_CLASS = 'slds-has-error';
@@ -51,21 +59,38 @@ export function setKeyField(state, value) {
  * @param {Object} state - The datatable state
  * @param {Object} types - The type handling factory
  */
-export function updateRowsAndCells(state, types) {
-    const { columns, data, keyField, maxRowSelection, virtualize, rowHeight } =
-        state;
+export function updateRowsAndCells(state, types, datatableId) {
+    const {
+        columns,
+        data,
+        keyField,
+        maxRowSelection,
+        renderModeInline,
+        rowHeight,
+        virtualize,
+    } = state;
     const { privateCustomTypes } = types;
+    const rtl = isRTL();
     const { length: rowCount } = data;
     const { length: colCount } = columns;
     const currentSelectionLength =
         maxRowSelection === 1 ? 1 : getCurrentSelectionLength(state);
     const inputType = maxRowSelection === 1 ? 'radio' : 'checkbox';
+    const isInputTypeCheckbox = inputType === 'checkbox';
 
     let scopeCol;
     let treeColTypeAttrs;
+
+    // Initializing all indexes.
+    const indexes = {};
+    const headerIndexes = Array(colCount);
+
     for (let colIndex = 0; colIndex < colCount; colIndex += 1) {
         const col = columns[colIndex];
-        const { type: columnType } = col;
+        const { colKeyValue, type: columnType } = col;
+        addHeaderIndex(headerIndexes, indexes, colKeyValue, colIndex);
+
+        // Find scopeCol
         if (!scopeCol && col.isScopeCol && types.isValidType(columnType)) {
             scopeCol = col;
         }
@@ -74,13 +99,26 @@ export function updateRowsAndCells(state, types) {
         }
     }
 
-    // initializing indexes
-    state.indexes = {};
-
+    // create arrays to track inlined checkbox, lookup and url cells
+    // so they can get necessary updates on re-renders
+    const checkboxCells = [];
+    const lookupCells = [];
+    const shownUrlCells = [];
     const rows = Array(rowCount);
+
+    // Store in caches early so data can be referenced by other methods
+    // during initialization.
+
+    // Untracked state changes.
+    state.checkboxCells = checkboxCells;
+    state.headerIndexes = headerIndexes;
+    state.indexes = indexes;
+    state.lookupCells = lookupCells;
+    state.shownUrlCells = shownUrlCells;
     // Tracked state changes.
     state.rows = rows;
 
+    // Add row indexes.
     for (let rowIndex = 0; rowIndex < rowCount; rowIndex += 1) {
         const rowData = data[rowIndex];
         const rowDataKeyField = rowData[keyField];
@@ -91,15 +129,17 @@ export function updateRowsAndCells(state, types) {
         state.indexes[rowKeyValue] = { rowIndex };
 
         const isRowSelected = !!state.selectedRowsKeys[rowKeyValue];
+        const ariaSelected = isRowSelected ? 'true' : false;
         const rowNumber = rowIndex + 1;
         const scopeColValue = scopeCol
             ? rowData[scopeCol.fieldName]
             : undefined;
         const cells = Array(colCount);
+        const checkboxHidden = state.hideCheckboxColumn;
 
         const row = {
             ariaRowIndex: rowIndex + 2, // aria attrs are base-1 and also count header as a row
-            ariaSelected: isRowSelected ? 'true' : false,
+            ariaSelected: checkboxHidden ? null : ariaSelected,
             cells,
             classnames: `slds-hint-parent${
                 isRowSelected ? ' slds-is-selected' : ''
@@ -145,6 +185,9 @@ export function updateRowsAndCells(state, types) {
                 resolveAttributeValue(treeColTypeAttrs.setSize, rowData) || 1;
         }
 
+        // Store in caches early so data can be referenced by other methods
+        // during initialization.
+        indexes[rowKeyValue] = row;
         rows[rowIndex] = row;
 
         // Add cell indexes.
@@ -157,6 +200,7 @@ export function updateRowsAndCells(state, types) {
                 type: columnType,
                 typeAttributes,
             } = col;
+            const cellKeyValue = `${rowKeyValue}-${colKeyValue}`;
             const columnSubType = typeAttributes
                 ? typeAttributes.subType
                 : undefined;
@@ -168,30 +212,44 @@ export function updateRowsAndCells(state, types) {
                 : false;
             const displayReadOnlyIcon = !!col.displayReadOnlyIcon;
             const editable = !!resolveAttributeValue(col.editable, rowData);
+            const isEditable = editable && types.isEditableType(columnType);
             const isValidType = types.isValidType(columnType);
             const isCheckbox = columnType === SELECTABLE_HEADER_TYPE;
+            const isSortingMenu = columnType === SORTING_MENU_HEADER_TYPE;
             const isCustom = privateType !== undefined;
             const isCustomBareLayout = isCustom && !standardCellLayout;
+            const isCustomStandardLayout = isCustom && standardCellLayout;
             const isDataType = isValidType && !isScopeCol;
             const isDataTypeScope = isValidType && isScopeCol;
 
             // cell object creation
             const cell = {
                 ariaReadOnly: !editable,
+                cellKeyValue,
                 class: '',
+                colIndex,
                 colKeyValue, // unique column key value
                 columnSubType,
                 columnType,
                 dataLabel,
                 displayReadOnlyIcon,
                 displayValue: rowData.displayValue || '',
+                describedBy: null,
                 editable,
                 hasError: undefined,
+                hasTreeData,
                 isCheckbox,
+                isCustom,
                 isCustomBareLayout,
+                isCustomStandardLayout,
                 isDataType,
                 isDataTypeScope,
+                isEditable,
+                isRTL: rtl,
+                isSortingMenu,
+                rowIndex,
                 rowKeyValue, // unique row key value
+                rowNumber,
                 scopeColValue,
                 style: '',
                 tabIndex: -1,
@@ -200,6 +258,11 @@ export function updateRowsAndCells(state, types) {
                 wrapTextMaxLines: 0,
             };
 
+            // Store in caches early so data can be referenced by other methods
+            // during initialization.
+            indexes[cellKeyValue] = cell;
+            cells[colIndex] = cell;
+
             if (!col.internal) {
                 // Assign cell type or cell subType attributes.
                 let attributeNames;
@@ -208,7 +271,8 @@ export function updateRowsAndCells(state, types) {
                     attributeNames = getAttributesNames(columnSubType);
                     attributeValues = getSubTypeAttributesValues(col);
                 } else {
-                    attributeNames = types.getType(columnType).typeAttributes;
+                    const typeDesc = types.getType(columnType);
+                    attributeNames = typeDesc && typeDesc.typeAttributes;
                     attributeValues = getTypeAttributesValues(col);
                 }
                 const attributeNamesLength = attributeNames
@@ -230,7 +294,7 @@ export function updateRowsAndCells(state, types) {
                 // object in each row.
                 const cellAttributes = getCellAttributesValues(col);
                 const keys = Object.keys(cellAttributes);
-                for (let i = 0, { length } = keys; i < length; i += 1) {
+                for (let i = 0; i < keys.length; i += 1) {
                     const attrName = keys[i];
                     const attrValue = cellAttributes[attrName];
                     cell[attrName] = resolveAttributeValue(attrValue, rowData);
@@ -256,20 +320,58 @@ export function updateRowsAndCells(state, types) {
             state.indexes[row.key][colKeyValue] = [rowIndex, colIndex];
             cells[colIndex] = cell;
 
+            if (renderModeInline) {
+                setInliningProperties(
+                    state,
+                    cell,
+                    isInputTypeCheckbox,
+                    datatableId
+                );
+            }
             // Update cell properties including class, style, and value properties.
             updateCell(state, rowIndex, colIndex);
+
+            // Update shownUrlCells state since it's dependent on updateCell
+            if (cell.showUrlLink) {
+                shownUrlCells.push(cell);
+            }
+        }
+    }
+
+    state.hasCalledUpdateRowsAndCells = true;
+}
+
+/**
+ * Cells are normally updated via updateRowsAndCells().
+ * However, a smaller update can be used when modifying datatable properties
+ * such as dt.errors and dt.wrapTextMaxLines.
+ *
+ * @param {Object} state - The datatable state
+ */
+export function updateCells(state, types) {
+    if (!state.hasCalledUpdateRowsAndCells) {
+        updateRowsAndCells(state, types);
+        return;
+    }
+    const { rows } = state;
+    for (let rowIndex = 0; rowIndex < rows.length; rowIndex += 1) {
+        for (
+            let colIndex = 0;
+            colIndex < rows[rowIndex].cells.length;
+            colIndex += 1
+        ) {
+            updateCell(state, rowIndex, colIndex);
         }
     }
 }
 
 /**
  * Performs a smaller update on the cell at the given rowIndex and colIndex.
- * Used by updateCells() and updateCellsByColIndex().
+ * Used by updateCells() and updateWrapTextAndMaxLinesValuesInCells().
  *
  * @param {Object} state - The tracked datatable state
  * @param {Object} rowIndex - The cell row index
  * @param {Object} colIndex - The cell column index
- * @param {Object} [_state = state] - The untracked datatable state
  */
 export function updateCell(state, rowIndex, colIndex) {
     const { renderModeRoleBased } = state;
@@ -283,12 +385,11 @@ export function updateCell(state, rowIndex, colIndex) {
     const errorFieldNames = rowErrors && rowErrors.fieldNames;
     const col = state.columns[colIndex];
     const cell = row.cells[colIndex];
-    const { colKeyValue, columnKey, fieldName, type: columnType } = col;
+    const { colKeyValue, columnKey, fieldName } = col;
     const dirtyValue = dirtyRowData && dirtyRowData[colKeyValue];
     const hasError = columnKey
         ? !!(cellErrors && cellErrors[columnKey])
         : !!(errorFieldNames && errorFieldNames.includes(fieldName));
-    const hasTreeData = columnType === 'tree';
     // value based on the fieldName
     const value = dirtyValue === undefined ? rowData[fieldName] : dirtyValue;
     const wrapText = state.wrapText[colKeyValue];
@@ -303,11 +404,11 @@ export function updateCell(state, rowIndex, colIndex) {
         cell.typeAttribute0 = getRowNumberError(rowErrors, cell.scopeColValue);
     }
 
-    let cellClass = '';
+    let cellClass = cell.class;
     if (cell.displayReadOnlyIcon || cell.editable) {
-        cellClass += CELL_EDIT_CLASS;
+        cellClass += (cellClass.length ? ' ' : '') + CELL_EDIT_CLASS;
     }
-    if (hasTreeData) {
+    if (cell.hasTreeData) {
         cellClass += (cellClass.length ? ' ' : '') + TREE__ITEM_CLASS;
     }
     if (hasError) {
@@ -315,6 +416,7 @@ export function updateCell(state, rowIndex, colIndex) {
     }
     if (dirtyValue !== undefined) {
         cellClass += (cellClass.length ? ' ' : '') + IS_EDITED_CLASS;
+        cell.describedBy = 'unsaved-cell-notification';
     }
     if (renderModeRoleBased) {
         cellClass += (cellClass.length ? ' ' : '') + ROLE_BASED_CELL_CLASS;
@@ -322,6 +424,12 @@ export function updateCell(state, rowIndex, colIndex) {
 
     cell.class = cellClass;
     cell.style = computeCellStyles(cell, col, renderModeRoleBased);
+
+    if (cell.isInlined) {
+        updateInlineCell(cell);
+        updateInlineClassAndStyle(cell, cellClass);
+        updateInlineCellValue(cell, value);
+    }
 }
 
 /**