lightning-base-components 1.21.2-alpha → 1.21.3-alpha

package/src/lightning/datatable/keyboard.js

@@ -40,27 +40,23 @@ const TAB = 9;
 const SPACE = 32;
 
 // Navigation Direction
-const NAVIGATION_DIR = (() => {
-    if (isRTL()) {
-        return {
-            RIGHT: -1,
-            LEFT: 1,
-            USE_CURRENT: 0,
-            RESET: 2,
-            TAB_FORWARD: -1,
-            TAB_BACKWARD: 1,
-        };
-    }
-
-    return {
-        RIGHT: 1,
-        LEFT: -1,
-        USE_CURRENT: 0,
-        RESET: 2,
-        TAB_FORWARD: 1,
-        TAB_BACKWARD: -1,
-    };
-})();
+const NAVIGATION_DIR = isRTL()
+    ? {
+          RIGHT: -1,
+          LEFT: 1,
+          USE_CURRENT: 0,
+          RESET: 2,
+          TAB_FORWARD: -1,
+          TAB_BACKWARD: 1,
+      }
+    : {
+          RIGHT: 1,
+          LEFT: -1,
+          USE_CURRENT: 0,
+          RESET: 2,
+          TAB_FORWARD: 1,
+          TAB_BACKWARD: -1,
+      };
 
 // Selectors
 const SELECTORS = {
@@ -137,66 +133,83 @@ export function handleKeydownOnTable(event) {
 function reactToKeyboardInActionMode(template, state, event) {
     switch (event.detail.keyCode) {
         case ARROW_LEFT:
-            return reactToArrowLeft(template, state, event);
+            reactToArrowLeft(template, state, event);
+            break;
         case ARROW_RIGHT:
-            return reactToArrowRight(template, state, event);
+            reactToArrowRight(template, state, event);
+            break;
         case ARROW_UP:
-            return reactToArrowUp(template, state, event);
+            reactToArrowUp(template, state, event);
+            break;
         case ARROW_DOWN:
-            return reactToArrowDown(template, state, event);
+            reactToArrowDown(template, state, event);
+            break;
         case ENTER:
         case SPACE:
-            return reactToEnter(template, state, event);
+            reactToEnter(template, state, event);
+            break;
         case ESCAPE:
-            return reactToEscape(template, state, event);
+            reactToEscape(template, state, event);
+            break;
         case TAB:
-            return reactToTab(template, state, event);
+            reactToTab(template, state, event);
+            break;
         default:
-            return state;
+            break;
     }
 }
 
 function reactToKeyboardInNavMode(element, state, event) {
+    const {
+        activeCell: { colKeyValue, rowKeyValue },
+    } = state;
+    const { keyCode, shiftKey } = event;
     const syntheticEvent = {
         detail: {
-            rowKeyValue: state.activeCell.rowKeyValue,
-            colKeyValue: state.activeCell.colKeyValue,
-            keyCode: event.keyCode,
-            shiftKey: event.shiftKey,
+            rowKeyValue,
+            colKeyValue,
+            keyCode: keyCode,
+            shiftKey: shiftKey,
         },
         preventDefault: () => {},
         stopPropagation: () => {},
     };
-
     // We need event.preventDefault so that actions like arrow up or down
     // does not scroll the table but instead sets focus on the right cells
     switch (event.keyCode) {
         case ARROW_LEFT:
             event.preventDefault();
-            return reactToArrowLeft(element, state, syntheticEvent);
+            reactToArrowLeft(element, state, syntheticEvent);
+            break;
         case ARROW_RIGHT:
             event.preventDefault();
-            return reactToArrowRight(element, state, syntheticEvent);
+            reactToArrowRight(element, state, syntheticEvent);
+            break;
         case ARROW_UP:
             event.preventDefault();
-            return reactToArrowUp(element, state, syntheticEvent);
+            reactToArrowUp(element, state, syntheticEvent);
+            break;
         case ARROW_DOWN:
             event.preventDefault();
-            return reactToArrowDown(element, state, syntheticEvent);
+            reactToArrowDown(element, state, syntheticEvent);
+            break;
         case ENTER:
         case SPACE:
             event.preventDefault();
-            return reactToEnter(element, state, syntheticEvent);
+            reactToEnter(element, state, syntheticEvent);
+            break;
         case ESCAPE:
             // td, th or div[role=gridcell/rowheader] is the active element in the
             // action mode if cell doesn't have action elements; hence this can be
             // reached and we should react to escape as exiting from action mode
             syntheticEvent.detail.keyEvent = event;
-            return reactToEscape(element, state, syntheticEvent);
+            reactToEscape(element, state, syntheticEvent);
+            break;
         case TAB:
-            return reactToTab(element, state, syntheticEvent);
+            reactToTab(element, state, syntheticEvent);
+            break;
         default:
-            return state;
+            break;
     }
 }
 
@@ -209,29 +222,26 @@ function moveFromCellToRow(element, state) {
 function reactToArrowLeft(element, state, event) {
     const { rowKeyValue, colKeyValue } = event.detail;
     const { colIndex } = getIndexesByKeys(state, rowKeyValue, colKeyValue);
-    const { columns } = state;
-
     // Move from navigation mode to row mode when user
     // arrows left when in nav mode and on the first column
     if (colIndex === 0 && canBeRowNavigationMode(state)) {
         moveFromCellToRow(element, state);
     } else {
         const nextColIndex = getNextIndexLeft(state, colIndex);
-
         if (nextColIndex === undefined) {
             return;
         }
-
         setBlurActiveCell(element, state);
-
-        // update activeCell
+        // Untracked state change.
+        // Update activeCell.
         state.activeCell = {
             rowKeyValue,
             colKeyValue: generateColKeyValue(
-                columns[nextColIndex],
+                state.columns[nextColIndex],
                 nextColIndex
             ),
         };
+        // Tracked state change.
         setFocusActiveCell(element, state, NAVIGATION_DIR.LEFT);
     }
 }
@@ -240,18 +250,18 @@ function reactToArrowRight(element, state, event) {
     const { rowKeyValue, colKeyValue } = event.detail;
     const { colIndex } = getIndexesByKeys(state, rowKeyValue, colKeyValue);
     const nextColIndex = getNextIndexRight(state, colIndex);
-    const { columns } = state;
-
     if (nextColIndex === undefined) {
         return;
     }
-
     setBlurActiveCell(element, state);
-
-    // update activeCell
+    // Untracked state change.
+    // Update activeCell.
     state.activeCell = {
         rowKeyValue,
-        colKeyValue: generateColKeyValue(columns[nextColIndex], nextColIndex),
+        colKeyValue: generateColKeyValue(
+            state.columns[nextColIndex],
+            nextColIndex
+        ),
     };
     setFocusActiveCell(element, state, NAVIGATION_DIR.RIGHT);
 }
@@ -260,25 +270,23 @@ function reactToArrowUp(element, state, event) {
     const { rowKeyValue, colKeyValue, keyEvent } = event.detail;
     const { rowIndex } = getIndexesByKeys(state, rowKeyValue, colKeyValue);
     const nextRowIndex = getNextIndexUp(state, rowIndex);
-    const { rows } = state;
-
-    if (nextRowIndex === undefined) {
-        return;
-    }
-
-    if (state.hideTableHeader && nextRowIndex === -1) {
+    if (
+        nextRowIndex === undefined ||
+        (state.hideTableHeader && nextRowIndex === -1)
+    ) {
         return;
     }
 
     if (keyEvent) {
         keyEvent.stopPropagation();
     }
-
+    // Tracked state change.
     setBlurActiveCell(element, state);
-
-    // update activeCell
+    // Untracked state change.
+    // Update activeCell.
     state.activeCell = {
-        rowKeyValue: nextRowIndex !== -1 ? rows[nextRowIndex].key : HEADER_ROW,
+        rowKeyValue:
+            nextRowIndex !== -1 ? state.rows[nextRowIndex].key : HEADER_ROW,
         colKeyValue,
     };
     setFocusActiveCell(element, state, NAVIGATION_DIR.USE_CURRENT);
@@ -288,25 +296,23 @@ function reactToArrowDown(element, state, event) {
     const { rowKeyValue, colKeyValue, keyEvent } = event.detail;
     const { rowIndex } = getIndexesByKeys(state, rowKeyValue, colKeyValue);
     const nextRowIndex = getNextIndexDown(state, rowIndex);
-    const { rows } = state;
-
-    if (nextRowIndex === undefined) {
-        return;
-    }
-
-    if (state.hideTableHeader && nextRowIndex === -1) {
+    if (
+        nextRowIndex === undefined ||
+        (state.hideTableHeader && nextRowIndex === -1)
+    ) {
         return;
     }
 
     if (keyEvent) {
         keyEvent.stopPropagation();
     }
-
+    // Tracked state change.
     setBlurActiveCell(element, state);
-
-    // update activeCell
+    // Untracked state change.
+    // Update activeCell.
     state.activeCell = {
-        rowKeyValue: nextRowIndex !== -1 ? rows[nextRowIndex].key : HEADER_ROW,
+        rowKeyValue:
+            nextRowIndex !== -1 ? state.rows[nextRowIndex].key : HEADER_ROW,
         colKeyValue,
     };
     setFocusActiveCell(element, state, NAVIGATION_DIR.USE_CURRENT);
@@ -314,20 +320,26 @@ function reactToArrowDown(element, state, event) {
 
 function reactToEnter(element, state, event) {
     if (state.keyboardMode === NAVIGATION_MODE) {
+        // Untracked state change.
         state.keyboardMode = ACTION_MODE;
+        const { keyCode, keyEvent } = event.detail;
         const { rowIndex, colIndex } = getIndexesActiveCell(state);
+        if (keyEvent) {
+            keyEvent.preventDefault();
+        }
 
+        const info = { action: undefined };
+        if (keyCode === SPACE) {
+            info.action = 'space';
+        } else if (keyCode === ENTER) {
+            info.action = 'enter';
+        }
         const actionsMap = {};
         actionsMap[SPACE] = 'space';
         actionsMap[ENTER] = 'enter';
-
-        if (event.detail.keyEvent) {
-            event.detail.keyEvent.preventDefault();
-        }
-        setModeActiveCell(element, state, {
-            action: actionsMap[event.detail.keyCode],
-        });
-        updateTabIndex(state, rowIndex, colIndex, -1);
+        // Tracked state changes.
+        setModeActiveCell(element, state, info);
+        updateCellTabIndex(state, rowIndex, colIndex, -1);
     }
 }
 
@@ -336,7 +348,9 @@ function reactToEscape(element, state, event) {
         // When the table is in action mode this event shouldn't bubble
         // because if the table in inside a modal it should prevent the modal closes
         event.detail.keyEvent.stopPropagation();
+        // Untracked state change.
         state.keyboardMode = NAVIGATION_MODE;
+        // Tracked state changes.
         setModeActiveCell(element, state);
         setFocusActiveCell(element, state, NAVIGATION_DIR.RESET);
     }
@@ -346,62 +360,74 @@ function reactToTab(element, state, event) {
     event.preventDefault();
     event.stopPropagation();
 
-    const { shiftKey } = event.detail;
-    const direction = getTabDirection(shiftKey);
+    const { detail } = event;
+    const direction = getTabDirection(detail.shiftKey);
     const isExitCell = isActiveCellAnExitCell(state, direction);
 
-    // if in ACTION mode
+    // If in ACTION mode.
     if (state.keyboardMode === ACTION_MODE) {
-        // if not on last or first cell, tab through each cell of the grid
+        // If not on last or first cell, tab through each cell of the grid.
         if (isExitCell === false) {
-            // prevent default key event in action mode when actually moving within the grid
-            if (event.detail.keyEvent) {
-                event.detail.keyEvent.preventDefault();
+            // Prevent default key event in action mode when actually moving within the grid.
+            const { keyEvent } = detail;
+            if (keyEvent) {
+                keyEvent.preventDefault();
             }
-            // tab in proper direction based on shift key press
+            // Tab in proper direction based on shift key press.
             if (direction === 'BACKWARD') {
                 reactToTabBackward(element, state);
             } else {
                 reactToTabForward(element, state);
             }
         } else {
-            // exit ACTION mode
+            // Untracked state change.
+            // Exit ACTION mode.
             state.keyboardMode = NAVIGATION_MODE;
+            // Tracked state change.
             setModeActiveCell(element, state);
+            // Untracked state change.
             state.isExitingActionMode = true;
         }
     } else {
+        // Untracked state change.
         state.isExitingActionMode = true;
     }
 }
 
 export function reactToTabForward(element, state) {
-    const { nextRowIndex, nextColIndex } = getNextIndexOnTab(state, 'FORWARD');
-    const { columns, rows } = state;
-
+    const { nextColIndex, nextRowIndex } = getNextIndexOnTab(state, 'FORWARD');
+    // Tracked state change.
     setBlurActiveCell(element, state);
-
-    // update activeCell
+    // Update activeCell.
     state.activeCell = {
-        rowKeyValue: nextRowIndex !== -1 ? rows[nextRowIndex].key : HEADER_ROW,
-        colKeyValue: generateColKeyValue(columns[nextColIndex], nextColIndex),
+        rowKeyValue:
+            nextRowIndex === -1 ? HEADER_ROW : state.rows[nextRowIndex].key,
+        colKeyValue: generateColKeyValue(
+            state.columns[nextColIndex],
+            nextColIndex
+        ),
     };
+    // Tracked state change.
     setFocusActiveCell(element, state, NAVIGATION_DIR.TAB_FORWARD, {
         action: 'tab',
     });
 }
 
 export function reactToTabBackward(element, state) {
-    const { nextRowIndex, nextColIndex } = getNextIndexOnTab(state, 'BACKWARD');
-    const { columns, rows } = state;
-
+    const { nextColIndex, nextRowIndex } = getNextIndexOnTab(state, 'BACKWARD');
+    // Tracked state change.
     setBlurActiveCell(element, state);
-
-    // update activeCell
+    // Untracked state change.
+    // Update activeCell.
     state.activeCell = {
-        rowKeyValue: nextRowIndex !== -1 ? rows[nextRowIndex].key : HEADER_ROW,
-        colKeyValue: generateColKeyValue(columns[nextColIndex], nextColIndex),
+        rowKeyValue:
+            nextRowIndex === -1 ? HEADER_ROW : state.rows[nextRowIndex].key,
+        colKeyValue: generateColKeyValue(
+            state.columns[nextColIndex],
+            nextColIndex
+        ),
     };
+    // Tracked state change.
     setFocusActiveCell(element, state, NAVIGATION_DIR.TAB_BACKWARD, {
         action: 'tab',
     });
@@ -417,16 +443,12 @@ function getTabDirection(shiftKey) {
  * @param {string} direction - 'FORWARD' or 'BACKWARD'
  * @returns {object} - nextRowIndex, nextColIndex values, isExitCell boolean
  */
-function getNextIndexOnTab(state, direction) {
+function getNextIndexOnTab(state, direction = 'FORWARD') {
     const { rowIndex, colIndex } = getIndexesActiveCell(state);
-
     // decide which function to use based on the value of direction
-    const nextTabFunc = {
-        FORWARD: getNextIndexOnTabForward,
-        BACKWARD: getNextIndexOnTabBackward,
-    };
-
-    return nextTabFunc[direction](state, rowIndex, colIndex);
+    return direction === 'BACKWARD'
+        ? getNextIndexOnTabBackward(state, rowIndex, colIndex)
+        : getNextIndexOnTabForward(state, rowIndex, colIndex);
 }
 
 function getNextIndexOnTabForward(state, rowIndex, colIndex) {
@@ -471,78 +493,65 @@ function getNextIndexOnTabBackward(state, rowIndex, colIndex) {
  *               and will remove the user from row mode and place them in navigation mode
  *  Arrow Left: If cell is expanded, this will collapse the expanded row
  *
- * @param {*} datatable - The datatable component/instance
+ * @param {*} dt - The datatable instance
  * @param {*} state - The datatable state object
  * @param {*} event - The keydown event
  * @returns Mutated state
  */
-export function reactToKeyboardOnRow(datatable, state, event) {
+export function reactToKeyboardOnRow(dt, state, event) {
     // TODO: Adapt this selector to also work in a role-based table once tree-grid is also migrated
+    const { localName } = event.target;
     if (
-        isRowNavigationMode(state) &&
-        event.target.localName.indexOf('tr') !== -1
+        localName &&
+        localName.indexOf('tr') !== -1 &&
+        isRowNavigationMode(state)
     ) {
-        const element = datatable.template;
+        const element = dt.template;
         switch (event.detail.keyCode) {
             case ARROW_LEFT:
-                return reactToArrowLeftOnRow.call(
-                    datatable,
-                    element,
-                    state,
-                    event
-                );
+                reactToArrowLeftOnRow.call(dt, element, state, event);
+                break;
             case ARROW_RIGHT:
-                return reactToArrowRightOnRow.call(
-                    datatable,
-                    element,
-                    state,
-                    event
-                );
+                reactToArrowRightOnRow.call(dt, element, state, event);
+                break;
             case ARROW_UP:
-                return reactToArrowUpOnRow.call(
-                    datatable,
-                    element,
-                    state,
-                    event
-                );
+                reactToArrowUpOnRow.call(dt, element, state, event);
+                break;
             case ARROW_DOWN:
-                return reactToArrowDownOnRow.call(
-                    datatable,
-                    element,
-                    state,
-                    event
-                );
+                reactToArrowDownOnRow.call(dt, element, state, event);
+                break;
             default:
-                return state;
+                break;
         }
     }
-    return state;
 }
 
 function reactToArrowLeftOnRow(element, state, event) {
     const { rowKeyValue, rowHasChildren, rowExpanded, rowLevel } = event.detail;
-    // check if row needs to be collapsed
-    // if not go to parent and focus there
+    // Check if row needs to be collapsed.
+    // If not, go to parent and focus there.
     if (rowHasChildren && rowExpanded) {
         fireRowToggleEvent.call(this, rowKeyValue, rowExpanded);
     } else if (rowLevel > 1) {
         const treeColumn = getStateTreeColumn(state);
         if (treeColumn) {
-            const colKeyValue = treeColumn.colKeyValue;
+            const { colKeyValue } = treeColumn;
             const { rowIndex } = getIndexesByKeys(
                 state,
                 rowKeyValue,
                 colKeyValue
             );
-            const parentIndex = getRowParent(state, rowLevel, rowIndex);
+            const parentIndex = getRowParentIndex(state, rowLevel, rowIndex);
             if (parentIndex !== -1) {
-                const rows = state.rows;
+                // Tracked state change.
                 setBlurActiveRow(element, state);
-                // update activeCell for the row
+                // Untracked state change.
+                // Update activeCell for the row.
                 state.activeCell = {
-                    rowKeyValue: rows[parentIndex].key,
+                    rowKeyValue: state.rows[parentIndex].key,
                     colKeyValue,
                 };
+                // Tracked state change.
                 setFocusActiveRow(element, state);
             }
         }
@@ -550,17 +559,20 @@ function reactToArrowLeftOnRow(element, state, event) {
 }
 
 function moveFromRowToCell(element, state) {
+    // Tracked state change.
     setBlurActiveRow(element, state);
+    // Untracked state change.
     unsetRowNavigationMode(state);
+    // Tracked state change.
     setFocusActiveCell(element, state, NAVIGATION_DIR.USE_CURRENT);
 }
 
 function reactToArrowRightOnRow(element, state, event) {
     const { rowKeyValue, rowHasChildren, rowExpanded } = event.detail;
-    // check if row needs to be expanded
-    // expand row if has children and is collapsed
-    // otherwise make this.state.rowMode = false
-    // move tabindex 0 to first cell in the row and focus there
+    // Check if row needs to be expanded.
+    // Expand row if has children and is collapsed.
+    // Otherwise, make this.state.rowMode = false.
+    // Move tabindex 0 to first cell in the row and focus there.
     if (rowHasChildren && !rowExpanded) {
         fireRowToggleEvent.call(this, rowKeyValue, rowExpanded);
     } else {
@@ -569,7 +581,7 @@ function reactToArrowRightOnRow(element, state, event) {
 }
 
 function reactToArrowUpOnRow(element, state, event) {
-    // move tabindex 0 one row down
+    // Move tabindex 0 one row down.
     const { rowKeyValue, keyEvent } = event.detail;
     const treeColumn = getStateTreeColumn(state);
 
@@ -577,24 +589,26 @@ function reactToArrowUpOnRow(element, state, event) {
     keyEvent.preventDefault();
 
     if (treeColumn) {
-        const colKeyValue = treeColumn.colKeyValue;
+        const { colKeyValue } = treeColumn;
         const { rowIndex } = getIndexesByKeys(state, rowKeyValue, colKeyValue);
         const prevRowIndex = getNextIndexUpWrapped(state, rowIndex);
-        const { rows } = state;
         if (prevRowIndex !== -1) {
+            // Tracked state change.
             setBlurActiveRow(element, state);
-            // update activeCell for the row
+            // Untracked state change.
+            // Update activeCell for the row.
             state.activeCell = {
-                rowKeyValue: rows[prevRowIndex].key,
+                rowKeyValue: state.rows[prevRowIndex].key,
                 colKeyValue,
             };
+            // Tracked state change.
             setFocusActiveRow(element, state);
         }
     }
 }
 
 function reactToArrowDownOnRow(element, state, event) {
-    // move tabindex 0 one row down
+    // Move tabindex 0 one row down.
     const { rowKeyValue, keyEvent } = event.detail;
     const treeColumn = getStateTreeColumn(state);
 
@@ -602,17 +616,19 @@ function reactToArrowDownOnRow(element, state, event) {
     keyEvent.preventDefault();
 
     if (treeColumn) {
-        const colKeyValue = treeColumn.colKeyValue;
+        const { colKeyValue } = treeColumn;
         const { rowIndex } = getIndexesByKeys(state, rowKeyValue, colKeyValue);
         const nextRowIndex = getNextIndexDownWrapped(state, rowIndex);
-        const { rows } = state;
         if (nextRowIndex !== -1) {
+            // Tracked state change.
             setBlurActiveRow(element, state);
+            // Untracked state change.
             // update activeCell for the row
             state.activeCell = {
-                rowKeyValue: rows[nextRowIndex].key,
+                rowKeyValue: state.rows[nextRowIndex].key,
                 colKeyValue,
             };
+            // Tracked state change.
             setFocusActiveRow(element, state);
         }
     }
@@ -621,18 +637,22 @@ function reactToArrowDownOnRow(element, state, event) {
 /***************************** ACTIVE CELL *****************************/
 
 function getDefaultActiveCell(state) {
-    const { columns, rows } = state;
-    if (columns.length > 0) {
-        let colIndex;
-        const existCustomerColumn = columns.some((column, index) => {
-            colIndex = index;
-            return isCustomerColumn(column);
-        });
-
+    const { columns } = state;
+    const { length: colCount } = columns;
+    if (colCount) {
+        let colIndex = 0;
+        let existCustomerColumn = false;
+        for (let i = 0; i < colCount; i += 1) {
+            colIndex = i;
+            if (isCustomerColumn(columns[i])) {
+                existCustomerColumn = true;
+                break;
+            }
+        }
         if (!existCustomerColumn) {
             colIndex = 0;
         }
-
+        const { rows } = state;
         return {
             rowKeyValue: rows.length > 0 ? rows[0].key : HEADER_ROW,
             colKeyValue: generateColKeyValue(columns[colIndex], colIndex),
@@ -654,11 +674,14 @@ function setDefaultActiveCell(state) {
  * @param {Object} state - A reference to the datatable's state
  */
 export function getActiveCellElement(template, state) {
-    if (state.activeCell) {
-        const { rowKeyValue, colKeyValue } = state.activeCell;
-        return getCellElementByKeys(template, rowKeyValue, colKeyValue);
-    }
-    return null;
+    const { activeCell } = state;
+    return activeCell
+        ? getCellElementByKeys(
+              template,
+              activeCell.rowKeyValue,
+              activeCell.colKeyValue
+          )
+        : null;
 }
 
 /**
@@ -670,11 +693,12 @@ export function getActiveCellElement(template, state) {
  * @returns {boolean} - true if rowKeyValue, colKeyValue are the current activeCell values.
  */
 export function isActiveCell(state, rowKeyValue, colKeyValue) {
-    if (state.activeCell) {
+    const { activeCell } = state;
+    if (activeCell) {
         const {
             rowKeyValue: currentRowKeyValue,
             colKeyValue: currentColKeyValue,
-        } = state.activeCell;
+        } = activeCell;
         return (
             currentRowKeyValue === rowKeyValue &&
             currentColKeyValue === colKeyValue
@@ -705,19 +729,19 @@ export function updateActiveCell(state, rowKeyValue, colKeyValue) {
  * If active cell is still valid we keep it the same
  *
  * @param {object} state - datatable state
- * @returns {object} state - mutated datatable state
  */
 export function syncActiveCell(state) {
-    if (!state.activeCell || !stillValidActiveCell(state)) {
-        if (state.activeCell && state.cellToFocusNext) {
-            // there is previously focused cell
+    const { activeCell } = state;
+    if (!activeCell || !stillValidActiveCell(state)) {
+        // Untracked state changes.
+        if (activeCell && state.cellToFocusNext) {
+            // There is previously focused cell.
             setNextActiveCellFromPrev(state);
         } else {
-            // there is no active cell or there is no previously focused cell
+            // There is no active cell or there is no previously focused cell.
             setDefaultActiveCell(state);
         }
     }
-    return state;
 }
 
 /**
@@ -731,24 +755,26 @@ export function syncActiveCell(state) {
  */
 function setNextActiveCellFromPrev(state) {
     const { rowIndex, colIndex } = state.cellToFocusNext;
+    const { columns, rows } = state;
+    const { length: rowCount } = rows;
     let nextRowIndex = rowIndex;
-    let nextColIndex = colIndex;
-    const rowsCount = state.rows ? state.rows.length : 0;
-    const colsCount = state.columns.length ? state.columns.length : 0;
 
-    if (nextRowIndex > rowsCount - 1) {
+    if (nextRowIndex > rowCount - 1) {
         // row index not existing after update to new 5 > 5-1, 6 > 5-1,
-        nextRowIndex = rowsCount - 1;
+        nextRowIndex = rowCount - 1;
     }
-    if (nextColIndex > colsCount - 1) {
+    const { length: colCount } = columns;
+    let nextColIndex = colIndex;
+    if (nextColIndex > colCount - 1) {
         // col index not existing after update to new
-        nextColIndex = colsCount - 1;
+        nextColIndex = colCount - 1;
     }
     const nextActiveCell = getCellFromIndexes(
         state,
         nextRowIndex,
         nextColIndex
     );
+    // Untracked state changes.
     if (nextActiveCell) {
         state.activeCell = nextActiveCell;
     } else {
@@ -798,21 +824,25 @@ function setModeActiveCell(element, state, info) {
 }
 
 function stillValidActiveCell(state) {
-    const {
-        activeCell: { rowKeyValue, colKeyValue },
-    } = state;
-
-    let sortableColumns = state.columns.filter((column) => column.sortable);
-
+    const { activeCell, indexes } = state;
+    const { rowKeyValue, colKeyValue } = activeCell;
     if (rowKeyValue === HEADER_ROW) {
-        if (state.rows.length && sortableColumns.length === 0) {
-            return false;
+        if (state.rows.length) {
+            const { columns } = state;
+            let sortable = false;
+            for (let colIndex = 0; colIndex < columns.length; colIndex += 1) {
+                if (columns[colIndex].sortable) {
+                    sortable = true;
+                    break;
+                }
+            }
+            if (!sortable) {
+                return false;
+            }
         }
         return state.headerIndexes[colKeyValue] !== undefined;
     }
-    return !!(
-        state.indexes[rowKeyValue] && state.indexes[rowKeyValue][colKeyValue]
-    );
+    return !!(indexes[rowKeyValue] && indexes[rowKeyValue][colKeyValue]);
 }
 
 /***************************** FOCUS MANAGEMENT *****************************/
@@ -837,13 +867,14 @@ export function setFocusActiveCell(
 ) {
     const { keyboardMode } = state;
     const { rowIndex, colIndex } = getIndexesActiveCell(state);
+    let cellElement = getActiveCellElement(template, state);
 
     state.activeCell.focused = !(info && isActiveCellValid(state));
-    updateTabIndex(state, rowIndex, colIndex);
 
-    let cellElement = getActiveCellElement(template, state);
+    updateCellTabIndex(state, rowIndex, colIndex);
+
     // if the cell wasn't found, but does exist in the table, scroll to where it should be
-    if (!cellElement && isActiveCellValid(state) && shouldScroll) {
+    if (shouldScroll && !cellElement && isActiveCellValid(state)) {
         scrollToCell(state, template, rowIndex);
     }
 
@@ -913,7 +944,7 @@ export function setBlurActiveCell(template, state) {
                 cellElement.parentElement.classList.remove(FOCUS_CLASS);
             }
         }, 0);
-        updateTabIndex(state, rowIndex, colIndex, -1);
+        updateCellTabIndex(state, rowIndex, colIndex, -1);
     }
 }
 
@@ -934,13 +965,17 @@ export function setCellToFocusFromPrev(state, template) {
         state.indexes &&
         !state.cellToFocusNext
     ) {
+        const { length: rowCount } = state.rows;
+        const lastIndex = rowCount - 1;
+        const { length: colCount } = state.columns;
         let { rowIndex, colIndex } = getIndexesActiveCell(state);
         colIndex = 0; // default point to the first column
-        if (state.rows && rowIndex === state.rows.length - 1) {
+        if (rowIndex === lastIndex) {
             // if it is last row, make it point to its previous row
-            rowIndex = state.rows.length - 1;
-            colIndex = state.columns ? state.columns.length - 1 : 0;
+            rowIndex = lastIndex;
+            colIndex = colCount ? colCount - 1 : 0;
         }
+        // Untracked state change.
         state.cellToFocusNext = {
             rowIndex,
             colIndex,
@@ -949,8 +984,8 @@ export function setCellToFocusFromPrev(state, template) {
 }
 
 /**
- * if the current new active still is valid (exists) then set the celltofocusnext to null
- * @param {object} state - datatable state
+ * If the current new active still is valid (exists) then set the celltofocusnext to null.
+ * @param {object} state - The datatable state
  */
 export function updateCellToFocusFromPrev(state) {
     if (
@@ -958,7 +993,7 @@ export function updateCellToFocusFromPrev(state) {
         state.cellToFocusNext &&
         stillValidActiveCell(state)
     ) {
-        // if the previous focus is there and valid,  don't set the prevActiveFocusedCell
+        // If the previous focus is there and valid,  don't set the prevActiveFocusedCell.
         state.cellToFocusNext = null;
     }
 }
@@ -974,13 +1009,12 @@ export function resetCellToFocusFromPrev(state) {
 /**
  * It adds and the focus classes to the th/td or div[role=gridcell/rowheader].
  *
- * @param {node} template - the custom element template `this.template`
- * @param {object} state - datatable state
+ * @param {node} template - The custom element template `this.template`
+ * @param {object} state - The datatable state
  */
 export function addFocusStylesToActiveCell(template, state) {
-    const cellElement = getActiveCellElement(template, state);
     state.activeCell.focused = true;
-
+    const cellElement = getActiveCellElement(template, state);
     if (cellElement) {
         cellElement.parentElement.classList.add(FOCUS_CLASS);
     }
@@ -996,13 +1030,13 @@ export function addFocusStylesToActiveCell(template, state) {
  */
 function setFocusActiveRow(template, state) {
     const { rowIndex } = getIndexesActiveCell(state);
-    const row = getActiveCellRow(template, state);
+    const rowElement = getActiveCellRowElement(template, state);
 
-    updateTabIndexRow(state, rowIndex);
+    updateRowTabIndex(state, rowIndex);
     // eslint-disable-next-line @lwc/lwc/no-async-operation
     setTimeout(() => {
-        row.focus({ preventScroll: true });
-        updateScrollTop(state, template, row);
+        rowElement.focus({ preventScroll: true });
+        updateScrollTop(state, template, rowElement);
     }, 0);
 }
 
@@ -1010,20 +1044,20 @@ function setFocusActiveRow(template, state) {
  * It blurs the active row, this operation implies multiple changes
  * - blur the active row
  * - update the tabindex to -1
- * @param {node} template - the custom element root `this.template`
- * @param {object} state - datatable state
+ * @param {node} template - The custom element root `this.template`
+ * @param {object} state - The datatable state
  */
 function setBlurActiveRow(template, state) {
     if (state.activeCell) {
         const { rowIndex } = getIndexesActiveCell(state);
         // eslint-disable-next-line @lwc/lwc/no-async-operation
         setTimeout(() => {
-            const row = getActiveCellRow(template, state);
+            const row = getActiveCellRowElement(template, state);
             if (document.activeElement === row) {
                 row.blur();
             }
         }, 0);
-        updateTabIndexRow(state, rowIndex, -1);
+        updateRowTabIndex(state, rowIndex, -1);
     }
 }
 
@@ -1057,18 +1091,23 @@ export function datatableHasFocus(state, template) {
 
 function isFocusInside(currentTarget) {
     const activeElements = getShadowActiveElements();
-    return activeElements.some((element) => {
-        return currentTarget.contains(element);
-    });
+    for (let i = 0, { length } = activeElements; i < length; i += 1) {
+        if (currentTarget.contains(activeElements[i])) {
+            return true;
+        }
+    }
+    return false;
 }
 
 export function handleDatatableFocusIn(event) {
     const { state } = this;
+
+    // Untracked state change.
     state.isExitingActionMode = false;
 
     // workaround for delegatesFocus issue that focusin is called when not supposed to W-6220418
     if (isFocusInside(event.currentTarget)) {
-        if (!state.rowMode && state.activeCell) {
+        if (state.activeCell && !state.rowMode) {
             state.activeCell.focused = true;
             const cellElement = getActiveCellElement(this.template, state);
             // we need to check because of the tree,
@@ -1085,17 +1124,17 @@ export function handleDatatableFocusIn(event) {
 
 export function handleDatatableFocusOut(event) {
     const { state } = this;
+    const { currentTarget, relatedTarget } = event;
+    const containsRelatedTarget =
+        relatedTarget && currentTarget.contains(relatedTarget);
     // workarounds for delegatesFocus issues
     if (
         // needed for initial focus where relatedTarget is empty
-        !event.relatedTarget ||
+        !relatedTarget ||
         // needed when clicked outside
-        (event.relatedTarget &&
-            !event.currentTarget.contains(event.relatedTarget)) ||
+        (relatedTarget && !containsRelatedTarget) ||
         // needed when datatable leaves focus and related target is still within datatable W-6185154
-        (event.relatedTarget &&
-            event.currentTarget.contains(event.relatedTarget) &&
-            state.isExitingActionMode)
+        (relatedTarget && containsRelatedTarget && state.isExitingActionMode)
     ) {
         if (state.activeCell && !state.rowMode) {
             const cellElement = getActiveCellElement(this.template, state);
@@ -1137,10 +1176,9 @@ function resetCellClickedForFocus(state) {
  * @param {number} colIndex - the column index
  * @param {number} [index = 0] - the value for the tabindex
  */
-export function updateTabIndex(state, rowIndex, colIndex, index = 0) {
+export function updateCellTabIndex(state, rowIndex, colIndex, index = 0) {
     if (isHeaderRow(rowIndex)) {
-        const { columns } = state;
-        columns[colIndex].tabIndex = index;
+        state.columns[colIndex].tabIndex = index;
     } else {
         state.rows[rowIndex].cells[colIndex].tabIndex = index;
     }
@@ -1155,7 +1193,7 @@ export function updateTabIndex(state, rowIndex, colIndex, index = 0) {
  * @param {number} rowIndex - the row index
  * @param {number} [index = 0] - the value for the tabindex
  */
-export function updateTabIndexRow(state, rowIndex, index = 0) {
+export function updateRowTabIndex(state, rowIndex, index = 0) {
     if (!isHeaderRow(rowIndex)) {
         // TODO what to do when rowIndex is header row
         state.rows[rowIndex].tabIndex = index;
@@ -1165,16 +1203,15 @@ export function updateTabIndexRow(state, rowIndex, index = 0) {
  * It update the tabindex for the current activeCell.
  * @param {object} state - datatable state
  * @param {number} [index = 0] - the value for the tabindex
- * @returns {object} state - mutated state
  */
 export function updateTabIndexActiveCell(state, index = 0) {
     if (state.activeCell && !stillValidActiveCell(state)) {
+        // Untracked state change.
         syncActiveCell(state);
     }
-
-    // we need to check again because maybe there is no active cell after sync
+    // Tracked state change.
+    // We need to check again because maybe there is no active cell after sync.
     updateActiveCellTabIndexAfterSync(state, index);
-    return state;
 }
 
 /**
@@ -1182,17 +1219,18 @@ export function updateTabIndexActiveCell(state, index = 0) {
  * This happens in rowMode of NAVIGATION_MODE
  * @param {object} state - datatable state
  * @param {number} [index = 0] - the value for the tabindex
- * @returns {object} state - mutated state
+ * @returns {object} state - The datatable state
  */
 export function updateTabIndexActiveRow(state, index = 0) {
     if (state.activeCell && !stillValidActiveCell(state)) {
+        // Untracked state change.
         syncActiveCell(state);
     }
-
-    // we need to check again because maybe there is no active cell after sync
+    // Tracked state change.
+    // We need to check again because maybe there is no active cell after sync.
     if (state.activeCell && isRowNavigationMode(state)) {
         const { rowIndex } = getIndexesActiveCell(state);
-        updateTabIndexRow(state, rowIndex, index);
+        updateRowTabIndex(state, rowIndex, index);
     }
     return state;
 }
@@ -1239,28 +1277,25 @@ function getPrevColumnIndex(colIndex) {
 }
 
 function getNextIndexRight(state, colIndex) {
-    if (isRTL()) {
-        return getPrevColumnIndex(colIndex);
-    }
-
-    return getNextColumnIndex(state.columns.length, colIndex);
+    return isRTL()
+        ? getPrevColumnIndex(colIndex)
+        : getNextColumnIndex(state.columns.length, colIndex);
 }
 
 function getNextIndexLeft(state, colIndex) {
-    if (isRTL()) {
-        return getNextColumnIndex(state.columns.length, colIndex);
-    }
-    return getPrevColumnIndex(colIndex);
+    return isRTL()
+        ? getNextColumnIndex(state.columns.length, colIndex)
+        : getPrevColumnIndex(colIndex);
 }
 
 function getNextIndexUpWrapped(state, rowIndex) {
-    const rowsCount = state.rows.length;
-    return rowIndex === 0 ? -1 : rowIndex === -1 ? rowsCount - 1 : rowIndex - 1;
+    const { length: rowsCount } = state.rows;
+    return rowIndex === -1 ? rowsCount - 1 : rowIndex - 1;
 }
 
 function getNextIndexDownWrapped(state, rowIndex) {
-    const rowsCount = state.rows.length;
-    return rowIndex + 1 < rowsCount ? rowIndex + 1 : -1;
+    const { length: rowCount } = state.rows;
+    return rowIndex + 1 < rowCount ? rowIndex + 1 : -1;
 }
 
 /***************************** ROW NAVIGATION MODE *****************************/
@@ -1292,7 +1327,6 @@ export function unsetRowNavigationMode(state) {
  * if rowMode is true and it has tree data, keep it true
  * @param {boolean} hadTreeDataTypePreviously - state object
  * @param {object} state - state object
- * @returns {object} state - mutated state
  */
 export function updateRowNavigationMode(hadTreeDataTypePreviously, state) {
     if (!hasTreeDataType(state)) {
@@ -1300,7 +1334,6 @@ export function updateRowNavigationMode(hadTreeDataTypePreviously, state) {
     } else if (state.rowMode === false && !hadTreeDataTypePreviously) {
         state.rowMode = true;
     }
-    return state;
 }
 
 /***************************** HELPER FUNCTIONS *****************************/
@@ -1316,12 +1349,12 @@ function isHeaderRow(rowIndex) {
     return rowIndex === -1;
 }
 
-export function getDataRow(rowKeyValue) {
+export function getRowDataSelector(rowKeyValue) {
     return `[data-row-key-value="${escapeDoubleQuotes(rowKeyValue)}"]`;
 }
 
 export function getCellElementByKeys(template, rowKeyValue, colKeyValue) {
-    const selector = `${getDataRow(
+    const selector = `${getRowDataSelector(
         rowKeyValue
     )} [data-col-key-value="${escapeDoubleQuotes(
         colKeyValue
@@ -1329,18 +1362,18 @@ export function getCellElementByKeys(template, rowKeyValue, colKeyValue) {
     return template.querySelector(selector);
 }
 
-function getActiveCellRow(template, state) {
-    if (state.activeCell) {
-        const { rowKeyValue } = state.activeCell;
-        const selector = getDataRow(rowKeyValue);
+function getActiveCellRowElement(template, state) {
+    const { activeCell } = state;
+    if (activeCell) {
+        const selector = getRowDataSelector(activeCell.rowKeyValue);
         return template.querySelector(selector);
     }
     return null;
 }
 
-export function getRowParent(state, rowLevel, rowIndex) {
+export function getRowParentIndex(state, rowLevel, rowIndex) {
     const parentIndex = rowIndex - 1;
-    const rows = state.rows;
+    const { rows } = state;
     for (let i = parentIndex; i >= 0; i--) {
         if (rows[i].level === rowLevel - 1) {
             return i;
@@ -1389,10 +1422,9 @@ function scrollToCell(state, template, rowIndex) {
 }
 
 export function isActiveCellEditable(state) {
-    const { activeCell, rows, columns } = state;
-    if (activeCell) {
+    if (state.activeCell) {
         const { rowIndex, colIndex } = getIndexesActiveCell(state);
-        return isCellEditable(rows[rowIndex], columns[colIndex]);
+        return isCellEditable(state.rows[rowIndex], state.columns[colIndex]);
     }
     return false;
 }
@@ -1408,16 +1440,20 @@ export function isValidCell(state, rowKeyValue, colKeyValue) {
 }
 
 function isActiveCellValid(state) {
-    if (state.activeCell) {
-        const { rowKeyValue, colKeyValue } = state.activeCell;
-        return isValidCell(state, rowKeyValue, colKeyValue);
+    const { activeCell } = state;
+    if (activeCell) {
+        return isValidCell(
+            state,
+            activeCell.rowKeyValue,
+            activeCell.colKeyValue
+        );
     }
     return false;
 }
 
-export function updateActiveCellTabIndexAfterSync(state, index = 0) {
+export function updateActiveCellTabIndexAfterSync(state, tabIndex = 0) {
     if (state.activeCell && !isRowNavigationMode(state)) {
         const { rowIndex, colIndex } = getIndexesActiveCell(state);
-        updateTabIndex(state, rowIndex, colIndex, index);
+        updateCellTabIndex(state, rowIndex, colIndex, tabIndex);
     }
 }