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

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';
@@ -161,7 +161,7 @@ export function cancelInlineEdit(dt) {
     resetErrors(state);
     state.inlineEdit.dirtyValues = {};
     dt._draftValues = [];
-    updateRowsAndCellIndexes(state, _privateTypes);
+    updateRowsAndCells(state, _privateTypes);
 }
 
 export function closeInlineEdit(dt) {
@@ -247,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);
         }
     }
 
@@ -572,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);
@@ -710,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,

package/src/lightning/datatable/keyboard.js

@@ -1,12 +1,7 @@
 import { getShadowActiveElements, isRTL } from 'lightning/utilsPrivate';
 import { getCellFromIndexes, HEADER_ROW_KEY, getRowByKey } from './indexes';
-import {
-    hasTreeDataType,
-    getStateTreeColumn,
-    fireRowToggleEvent,
-} from './tree';
-import { generateColKeyValue, getStateColumnIndex } from './columns';
-import { isCellEditable } from './rows';
+import { fireRowToggleEvent } from './tree';
+import { getStateColumnIndex } from './columns';
 import { findFirstVisibleIndex } from './virtualization';
 import { getColDataSelector, getRowDataSelector, getScrollerY } from './utils';
 
@@ -211,10 +206,7 @@ function reactToArrowLeft(state, template, event) {
         // Update activeCell.
         state.activeCell = {
             rowKeyValue,
-            colKeyValue: generateColKeyValue(
-                state.columns[nextColIndex],
-                nextColIndex
-            ),
+            colKeyValue: state.columns[nextColIndex].colKeyValue,
         };
         // Tracked state change.
         setFocusActiveCell(state, template, NAVIGATION_DIR.LEFT);
@@ -233,10 +225,7 @@ function reactToArrowRight(state, template, event) {
     // Update activeCell.
     state.activeCell = {
         rowKeyValue,
-        colKeyValue: generateColKeyValue(
-            state.columns[nextColIndex],
-            nextColIndex
-        ),
+        colKeyValue: state.columns[nextColIndex].colKeyValue,
     };
     setFocusActiveCell(state, template, NAVIGATION_DIR.RIGHT);
 }
@@ -375,10 +364,7 @@ export function reactToTabForward(state, template) {
     state.activeCell = {
         rowKeyValue:
             nextRowIndex === -1 ? HEADER_ROW_KEY : state.rows[nextRowIndex].key,
-        colKeyValue: generateColKeyValue(
-            state.columns[nextColIndex],
-            nextColIndex
-        ),
+        colKeyValue: state.columns[nextColIndex].colKeyValue,
     };
     // Tracked state change.
     setFocusActiveCell(state, template, NAVIGATION_DIR.TAB_FORWARD, {
@@ -395,10 +381,7 @@ export function reactToTabBackward(state, template) {
     state.activeCell = {
         rowKeyValue:
             nextRowIndex === -1 ? HEADER_ROW_KEY : state.rows[nextRowIndex].key,
-        colKeyValue: generateColKeyValue(
-            state.columns[nextColIndex],
-            nextColIndex
-        ),
+        colKeyValue: state.columns[nextColIndex].colKeyValue,
     };
     // Tracked state change.
     setFocusActiveCell(state, template, NAVIGATION_DIR.TAB_BACKWARD, {
@@ -505,7 +488,7 @@ function reactToArrowLeftOnRow(dt, state, template, event) {
     if (rowHasChildren && rowExpanded) {
         fireRowToggleEvent(dt, rowKeyValue, rowExpanded);
     } else if (rowLevel > 1) {
-        const treeColumn = getStateTreeColumn(state);
+        const { treeColumn } = state;
         if (treeColumn) {
             const { colKeyValue } = treeColumn;
             const { rowIndex } = getIndexesByKeys(
@@ -552,7 +535,7 @@ function reactToArrowRightOnRow(dt, state, template, event) {
 function reactToArrowUpOnRow(state, template, event) {
     // Move tabIndex 0 one row down.
     const { rowKeyValue, keyEvent } = event.detail;
-    const treeColumn = getStateTreeColumn(state);
+    const { treeColumn } = state;
 
     keyEvent.stopPropagation();
     keyEvent.preventDefault();
@@ -579,7 +562,7 @@ function reactToArrowUpOnRow(state, template, event) {
 function reactToArrowDownOnRow(state, template, event) {
     // Move tabIndex 0 one row down.
     const { rowKeyValue, keyEvent } = event.detail;
-    const treeColumn = getStateTreeColumn(state);
+    const { treeColumn } = state;
 
     keyEvent.stopPropagation();
     keyEvent.preventDefault();
@@ -624,7 +607,7 @@ function getDefaultActiveCell(state) {
         const { rows } = state;
         return {
             rowKeyValue: rows.length > 0 ? rows[0].key : HEADER_ROW_KEY,
-            colKeyValue: generateColKeyValue(columns[colIndex], colIndex),
+            colKeyValue: columns[colIndex].colKeyValue,
         };
     }
 
@@ -822,7 +805,7 @@ export function setFocusActiveCell(
     const { rowIndex, colIndex } = getIndexesActiveCell(state);
     let cellElement = getActiveCellElement(template, state);
 
-    state.activeCell.focused = !(info && isActiveCellValid(state));
+    state.activeCell.hasFocus = !(info && isActiveCellValid(state));
 
     updateCellTabIndex(state, rowIndex, colIndex);
 
@@ -874,7 +857,7 @@ export function setFocusActiveCell(
 export function setBlurActiveCell(state, template) {
     if (state.activeCell) {
         const { rowIndex, colIndex } = getIndexesActiveCell(state);
-        state.activeCell.focused = false;
+        state.activeCell.hasFocus = false;
         let cellElement = getActiveCellElement(template, state);
         // eslint-disable-next-line @lwc/lwc/no-async-operation
         setTimeout(() => {
@@ -957,7 +940,7 @@ export function updateCellToFocusFromPrev(state) {
  * @param {Node} template - The custom element template `this.template`
  */
 export function addFocusStylesToActiveCell(state, template) {
-    state.activeCell.focused = true;
+    state.activeCell.hasFocus = true;
     const cellElement = getActiveCellElement(template, state);
     if (cellElement) {
         cellElement.parentElement.classList.add(FOCUS_CLASS);
@@ -1053,7 +1036,7 @@ export function handleDatatableFocusIn(event) {
     // workaround for delegatesFocus issue that focusin is called when not supposed to W-6220418
     if (isFocusInside(event.currentTarget)) {
         if (state.activeCell && !state.rowMode) {
-            state.activeCell.focused = true;
+            state.activeCell.hasFocus = true;
             const cellElement = getActiveCellElement(this.template, state);
             // we need to check because of the tree,
             // at this point it may remove/change the rows/keys because opening or closing a row.
@@ -1243,10 +1226,7 @@ function getNextIndexDownWrapped(state, rowIndex) {
 /***************************** ROW NAVIGATION MODE *****************************/
 
 function canBeRowNavigationMode(state) {
-    return (
-        state.keyboardMode === KEYBOARD_NAVIGATION_MODE &&
-        hasTreeDataType(state)
-    );
+    return state.keyboardMode === KEYBOARD_NAVIGATION_MODE && state.treeColumn;
 }
 
 function isRowNavigationMode(state) {
@@ -1257,10 +1237,7 @@ function isRowNavigationMode(state) {
 }
 
 function setRowNavigationMode(state) {
-    if (
-        hasTreeDataType(state) &&
-        state.keyboardMode === KEYBOARD_NAVIGATION_MODE
-    ) {
+    if (state.treeColumn && state.keyboardMode === KEYBOARD_NAVIGATION_MODE) {
         state.rowMode = true;
     }
 }
@@ -1276,13 +1253,12 @@ export function unsetRowNavigationMode(state) {
  * Earlier it didn't have tree data, set rowMode to true to start
  * if rowMode is false and earlier it has tree data, keep it false
  * if rowMode is true and it has tree data, keep it true
- * @param {Boolean} hadTreeDataTypePreviously - state object
  * @param {Object} state - The state object
  */
-export function updateRowNavigationMode(hadTreeDataTypePreviously, state) {
-    if (!hasTreeDataType(state)) {
+export function updateRowNavigationMode(state) {
+    if (!state.treeColumn) {
         state.rowMode = false;
-    } else if (state.rowMode === false && !hadTreeDataTypePreviously) {
+    } else if (state.rowMode === false && !state.hadTreeDataTypePreviously) {
         state.rowMode = true;
     }
 }
@@ -1360,7 +1336,8 @@ function scrollToCell(state, template, rowIndex) {
 export function isActiveCellEditable(state) {
     if (state.activeCell) {
         const { rowIndex, colIndex } = getIndexesActiveCell(state);
-        return isCellEditable(state.rows[rowIndex], state.columns[colIndex]);
+        const activeCell = state.rows[rowIndex].cells[colIndex];
+        return activeCell ? activeCell.editable : false;
     }
     return false;
 }

package/src/lightning/datatable/renderManager.js

@@ -13,10 +13,6 @@ export function setViewportRendering(state, value) {
     state.enableViewportRendering = normalizeBoolean(value);
 }
 
-export function isViewportRenderingEnabled(state) {
-    return state.enableViewportRendering;
-}
-
 export function setVirtualize(state, value) {
     if (state.renderModeRoleBased) {
         state.virtualize = normalizeString(value, {
@@ -68,16 +64,11 @@ export class RenderManager {
      * @param {RenderManagerConfig} config - The render management config
      */
     configure(state, getWrapperHeight, config) {
-        const {
-            viewportRendering,
-            rowHeight,
-            virtualize,
-            bufferSize,
-            fixedHeight,
-        } = config;
-        setVirtualize(state, virtualize);
-
-        if (normalizeBoolean(viewportRendering) || state.virtualize) {
+        const { rowHeight, bufferSize } = config;
+        // Untracked state changes.
+        setVirtualize(state, config.virtualize);
+        setViewportRendering(state, config.viewportRendering);
+        if (state.virtualize || state.enableViewportRendering) {
             this.initializeResizeObserver(state, getWrapperHeight);
         }
         let computedBufferSize =
@@ -88,10 +79,10 @@ export class RenderManager {
             'non-negative',
             DEFAULT_BUFFER_SIZE
         );
-        state.fixedHeight = normalizeBoolean(fixedHeight);
+        state.fixedHeight = normalizeBoolean(config.fixedHeight);
         if (typeof rowHeight === 'number') {
             state.rowHeight = rowHeight;
-            this.threshold = ROW_THRESHOLD * state.rowHeight;
+            this.threshold = ROW_THRESHOLD * rowHeight;
         }
     }
 
@@ -212,7 +203,7 @@ export class RenderManager {
         const normalizedRowCount = rowCount
             ? Math.min(rowCount, totalRows)
             : totalRows;
-        if (isViewportRenderingEnabled(state)) {
+        if (state.enableViewportRendering) {
             if (state.renderedRowCount < normalizedRowCount) {
                 state.renderedRowCount = normalizedRowCount;
                 // Update our internal cache
@@ -247,7 +238,7 @@ export class RenderManager {
      * when the datatable component's height changes
      *
      * @param {Object} state - datatable state
-     * @param {Function} getWrapperHeight - function to get height of datatable wrapper
+     * @param {Function} getWrapperHeight - A function to get the height of datatable wrapper
      */
     initializeResizeObserver(state, getWrapperHeight) {
         if (!this._heightResizeObserver) {