lightning-base-components 1.21.5-alpha → 1.21.7-alpha

package/src/lightning/datatable/errors.js

@@ -17,7 +17,7 @@ export function setErrors(state, errors) {
 /**
  * Resets row-level and table-level errors in datatable state object.
  *
- * @param {Object} _state - The untracked datatable state
+ * @param {Object} state - The datatable state
  */
 export function resetErrors(state) {
     state.errors = {

package/src/lightning/datatable/indexes.js

@@ -1,42 +1,53 @@
-import { generateColKeyValue } from './columns';
-
 export const HEADER_ROW_INDEX = -1;
 export const HEADER_ROW_KEY = 'HEADER';
 
 export function getCellFromIndexes(state, rowIndex, colIndex) {
     const { columns, rows } = state;
-    if (columns.length > 0) {
-        return {
-            rowKeyValue:
-                rowIndex === HEADER_ROW_INDEX
-                    ? HEADER_ROW_KEY
-                    : rows[rowIndex].key,
-            colKeyValue: generateColKeyValue(columns[colIndex], colIndex),
-        };
+    if (rows.length > rowIndex && columns.length > colIndex) {
+        const rowKeyValue =
+            rowIndex === HEADER_ROW_INDEX ? HEADER_ROW_KEY : rows[rowIndex].key;
+        const { colKeyValue } = columns[colIndex];
+        return state.indexes[`${rowKeyValue}-${colKeyValue}`];
     }
     return undefined;
 }
 
+export function getCellByKeys(state, rowKeyValue, colKeyValue) {
+    return state.indexes[`${rowKeyValue}-${colKeyValue}`];
+}
+
 export function getRowIndexByKey(state, rowKeyValue) {
     const row = state.indexes[rowKeyValue];
     return row ? row.rowIndex : undefined;
 }
 
-export function getRowByKey(state, key) {
-    return state.rows[getRowIndexByKey(state, key)];
+export function getRowByKey(state, rowKeyValue) {
+    return state.indexes[rowKeyValue];
 }
 
-export function getUserRowByCellKeys(state, rowKeyValue, colKeyValue) {
-    const rowIndex = state.indexes[rowKeyValue][colKeyValue][0];
-    return state.data[rowIndex];
+export function getUserRowByKey(state, rowKeyValue) {
+    const row = state.indexes[rowKeyValue];
+    return row ? state.data[row.rowIndex] : undefined;
 }
 
 export function isValidCell(state, rowKeyValue, colKeyValue) {
-    if (rowKeyValue === HEADER_ROW_KEY) {
-        return state.headerIndexes[colKeyValue] !== undefined;
-    }
-    const row = getRowByKey(state, rowKeyValue);
-    const colIndex = state.headerIndexes[colKeyValue];
+    return state.indexes[`${rowKeyValue}-${colKeyValue}`] !== undefined;
+}
 
-    return row && row.cells[colIndex];
+export function addHeaderIndex(headerIndexes, indexes, colKeyValue, colIndex) {
+    // Add header indexes.
+    const cellKeyValue = `${HEADER_ROW_KEY}-${colKeyValue}`;
+    const headerCell = {
+        cellKeyValue,
+        colIndex,
+        colKeyValue,
+        focused: false,
+        key: colKeyValue,
+        rowIndex: HEADER_ROW_INDEX,
+        rowKeyValue: HEADER_ROW_KEY,
+    };
+    // Store in caches early so data can be referenced by other methods
+    // during initialization.
+    headerIndexes[colIndex] = headerCell;
+    indexes[cellKeyValue] = headerCell;
 }

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)
@@ -137,14 +137,15 @@ function isScrollerVisible(scroller) {
 }
 
 /**
- * Determines if a root element has data
+ * Determines if a template has data
  *
- * @param {Element} root The parent element to check
+ * @param {Element} template The parent element to check
  * @returns {Boolean} Whether or not the element contains any data
  */
-function hasData(root) {
+function hasData(template) {
     return (
-        root.querySelectorAll('tbody > tr, [role="rowgroup"] > [role="row"]')
-            .length > 0
+        template.querySelectorAll(
+            'tbody > tr, [role="rowgroup"] > [role="row"]'
+        ).length > 0
     );
 }

package/src/lightning/datatable/inlineEdit.js

@@ -10,9 +10,9 @@ import {
     getActiveCellElement,
     isActiveCellEditable,
     NAVIGATION_DIR,
-    isValidCell,
+    getCellElementFromEventTarget,
 } from './keyboard';
-import { updateRowsAndCellIndexes, isCellEditable } from './rows';
+import { updateRowsAndCells } from './rows';
 import { getStateColumnIndex } from './columns';
 import { resetErrors } from './errors';
 import { setAriaSelectedOnCell, unsetAriaSelectedOnCell } from './rowSelection';
@@ -21,8 +21,9 @@ import {
     getSelectedRowsKeys,
     isSelectedRow,
 } from './rowSelectionShared';
+import { isObjectLike } from './utils';
 import { hasOwnProperties } from 'lightning/utilsPrivate';
-import { getRowByKey, getUserRowByCellKeys } from './indexes';
+import { getCellByKeys, getUserRowByKey, isValidCell } from './indexes';
 
 const IEDIT_PANEL_SELECTOR = '[data-iedit-panel="true"]';
 const HIDE_PANEL_THRESHOLD = 5; // hide panel on scroll
@@ -36,7 +37,8 @@ const HIDE_PANEL_THRESHOLD = 5; // hide panel on scroll
  *                              which to open the inline edit panel. Must be valid and truthy.
  */
 export function handleEditCell(event) {
-    openInlineEdit(this, event.target);
+    const cellElement = getCellElementFromEventTarget(event.target);
+    openInlineEdit(this, cellElement);
 }
 
 /**
@@ -161,7 +163,7 @@ export function cancelInlineEdit(dt) {
     resetErrors(state);
     state.inlineEdit.dirtyValues = {};
     dt._draftValues = [];
-    updateRowsAndCellIndexes(state, _privateTypes);
+    updateRowsAndCells(state, _privateTypes);
 }
 
 export function closeInlineEdit(dt) {
@@ -220,7 +222,11 @@ function processInlineEditFinish(dt, reason, rowKeyValue, colKeyValue) {
     if (shouldSaveData) {
         const panel = template.querySelector(IEDIT_PANEL_SELECTOR);
         const isValidEditValue = panel.validity.valid;
-        const currentValue = getCellValue(state, rowKeyValue, colKeyValue);
+        const currentValue = getCellByKeys(
+            state,
+            rowKeyValue,
+            colKeyValue
+        ).value;
         const { isMassEditChecked: updateAllSelectedRows, value: editValue } =
             panel;
 
@@ -247,7 +253,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);
         }
     }
 
@@ -285,10 +291,10 @@ function processInlineEditFinish(dt, reason, rowKeyValue, colKeyValue) {
  * @param {Object} target - The LWC component instance (lightning-primitive-cell-factory) representing the cell in the
  *                          datatable for which the inline edit panel is to be opened. Must be a truthy and valid reference.
  */
-function openInlineEdit(dt, target) {
-    startPanelPositioning(dt, target.parentElement);
+function openInlineEdit(dt, cellElement) {
+    startPanelPositioning(dt, cellElement);
 
-    const { state, template, privateTypes: types } = dt;
+    const { state, template, _privateTypes: types } = dt;
     const { inlineEdit: inlineEditState } = state;
 
     if (inlineEditState.isPanelVisible) {
@@ -302,15 +308,17 @@ function openInlineEdit(dt, target) {
         );
     }
 
-    const { rowKeyValue, colKeyValue } = target;
-    const colIndex = getStateColumnIndex(state, colKeyValue);
+    const { rowKeyValue } = cellElement.parentElement.dataset;
+    const { colKeyValue } = cellElement.dataset;
+    const cell = getCellByKeys(state, rowKeyValue, colKeyValue);
+    const { colIndex } = cell;
     const col = state.columns[colIndex];
 
     inlineEditState.isPanelVisible = true;
     inlineEditState.rowKeyValue = rowKeyValue;
     inlineEditState.colKeyValue = colKeyValue;
     inlineEditState.columnDef = col;
-    inlineEditState.editedValue = getCellValue(state, rowKeyValue, colKeyValue);
+    inlineEditState.editedValue = cell.value;
     inlineEditState.massEditSelectedRows = getCurrentSelectionLength(state);
     inlineEditState.massEditEnabled =
         inlineEditState.massEditSelectedRows > 1 &&
@@ -323,10 +331,9 @@ function openInlineEdit(dt, target) {
         inlineEditState.resolvedTypeAttributes = resolveNestedTypeAttributes(
             state,
             rowKeyValue,
-            colKeyValue,
+            colIndex,
             types,
-            typeAttributes,
-            colIndex
+            typeAttributes
         );
     }
 
@@ -368,10 +375,7 @@ export function openInlineEditOnActiveCell(dt) {
         if (!isActiveCellEditable(state)) {
             const firstEditableCell = getFirstEditableCell(dt);
             if (firstEditableCell) {
-                state.activeCell = {
-                    rowKeyValue: firstEditableCell.rowKeyValue,
-                    colKeyValue: firstEditableCell.colKeyValue,
-                };
+                state.activeCell = firstEditableCell;
                 setFocusAndOpenInlineEdit(dt);
             }
         } else {
@@ -440,7 +444,7 @@ function stopPanelPositioning(dt) {
     const { _positionRelationship } = dt;
     if (_positionRelationship) {
         stopPositioning(_positionRelationship);
-        dt._positionRelationship = null;
+        dt._positionRelationship = undefined;
     }
 }
 
@@ -571,9 +575,8 @@ function getResolvedCellChanges(state, rowChanges) {
                 const colKeyValue = changeColKeys[changeColIndex];
                 const colIndex = getStateColumnIndex(state, colKeyValue);
                 if (colIndex !== -1) {
-                    const col = columns[colIndex];
-                    cellChanges[col.columnKey || col.fieldName] =
-                        colChanges[colKeyValue];
+                    const { name: colName } = columns[colIndex];
+                    cellChanges[colName] = colChanges[colKeyValue];
                 }
             }
             result.push(cellChanges);
@@ -589,20 +592,18 @@ function getResolvedCellChanges(state, rowChanges) {
  *
  * @param {Object} state - The datatable state
  * @param {String} rowKeyValue - The row key
- * @param {String} colKeyValue - The column key
+ * @param {Number} colIndex - The column index
  * @param {Object} types - The type handling factory
  * @param {Object} typeAttributes - values of typeAttributes from column definition
- * @param {Number} colIndex - The column index
  *
  * @returns {Object} The resolved typeAttributes.
  */
 export function resolveNestedTypeAttributes(
     state,
     rowKeyValue,
-    colKeyValue,
+    colIndex,
     types,
-    typeAttributes,
-    colIndex
+    typeAttributes
 ) {
     const col = state.columns[colIndex];
     const typeDesc = typeAttributes && types.getType(col.type);
@@ -611,16 +612,20 @@ export function resolveNestedTypeAttributes(
     if (attributeNames) {
         const resolvedTypeAttributes = {};
         const { length: attributeNamesLength } = attributeNames;
-        const _rowData = getUserRowByCellKeys(state, rowKeyValue, colKeyValue);
-        // We only want to resolve typeAttributes based on the custom types configuration
-        // If the attribute is not in that configuration, the value of attrValue
-        // for that will be undefined. This behavior is consistent with view cell.
-        for (let i = 0; i < attributeNamesLength; i += 1) {
-            const attrName = attributeNames[i];
-            const attrValue = typeAttributes[attrName];
-            if (attrValue) {
-                resolvedTypeAttributes[attrName] =
-                    resolveNestedTypeAttributesHelper(_rowData, attrValue);
+        const _rowData = attributeNamesLength
+            ? getUserRowByKey(state, rowKeyValue)
+            : undefined;
+        if (_rowData) {
+            // We only want to resolve typeAttributes based on the custom types configuration
+            // If the attribute is not in that configuration, the value of attrValue
+            // for that will be undefined. This behavior is consistent with view cell.
+            for (let i = 0; i < attributeNamesLength; i += 1) {
+                const attrName = attributeNames[i];
+                const attrValue = typeAttributes[attrName];
+                if (attrValue) {
+                    resolvedTypeAttributes[attrName] =
+                        resolveNestedTypeAttributesHelper(_rowData, attrValue);
+                }
             }
         }
         return resolvedTypeAttributes;
@@ -646,7 +651,7 @@ export function resolveNestedTypeAttributes(
  */
 function resolveNestedTypeAttributesHelper(rowData, attrValue) {
     let resolvedTypeAttributes = {};
-    if (!(typeof attrValue === 'object' && attrValue !== null)) {
+    if (!isObjectLike(attrValue)) {
         // Primitive value.
         // For example, if the typeAttributes is { count: 5},
         // 5 will be the attrValue passed in to the function.
@@ -666,7 +671,7 @@ function resolveNestedTypeAttributesHelper(rowData, attrValue) {
             // so we need to check if key is 'fieldName' or not and resolve it immediately.
             if (name === 'fieldName') {
                 resolvedTypeAttributes = rowData[value];
-            } else if (typeof value === 'object' && value !== null) {
+            } else if (isObjectLike(value)) {
                 // This is the case when attrValue is something like {label: {fieldName: 'name'}}.
                 // It's an object but the value maps a field name
                 const { fieldName } = value;
@@ -710,17 +715,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)) {
-                    return {
-                        rowKeyValue,
-                        colKeyValue: editableColumn.colKeyValue,
-                    };
+                const { colKeyValue } = editableColumns[i];
+                const cell = getCellByKeys(state, rowKeyValue, colKeyValue);
+                if (cell && cell.editable) {
+                    return cell;
                 }
             }
         }
@@ -729,22 +733,6 @@ function getFirstEditableCell(dt) {
     return undefined;
 }
 
-/**
- * Returns the current value of the cell, already takes into account the dirty value
- *
- * @param {Object} state - state of the datatable
- * @param {String} rowKeyValue - row key
- * @param {String} colKeyValue - column key
- *
- * @returns {Object} the value for the current cell.
- */
-function getCellValue(state, rowKeyValue, colKeyValue) {
-    const row = getRowByKey(state, rowKeyValue);
-    const colIndex = getStateColumnIndex(state, colKeyValue);
-
-    return row.cells[colIndex].value;
-}
-
 /**
  * Sets `aria-selected` to true on cells whose rows are selected
  * and are in the same column as the cell being currently edited