lightning-base-components 1.21.2-alpha → 1.21.4-alpha

package/src/lightning/datatable/keyboard.js

@@ -1,28 +1,21 @@
-import {
-    isCustomerColumn,
-    generateColKeyValue,
-    getStateColumnIndex,
-} from './columns';
+import { getShadowActiveElements, isRTL } from 'lightning/utilsPrivate';
+import { getCellFromIndexes, HEADER_ROW_KEY, getRowByKey } from './indexes';
 import {
     hasTreeDataType,
     getStateTreeColumn,
     fireRowToggleEvent,
 } from './tree';
-import { isCellEditable, getRowByKey } from './rows';
-import { isRTL, getShadowActiveElements } from 'lightning/utilsPrivate';
+import { generateColKeyValue, getStateColumnIndex } from './columns';
+import { isCellEditable } from './rows';
 import { findFirstVisibleIndex } from './virtualization';
-
-import { escapeDoubleQuotes } from './utils';
-
-// Indicator/flag for a header row
-const HEADER_ROW = 'HEADER';
+import { getColDataSelector, getRowDataSelector, getScrollerY } from './utils';
 
 // SLDS Class for Focus
 export const FOCUS_CLASS = 'slds-has-focus';
 
 // Keyboard Navigation Modes
-const NAVIGATION_MODE = 'NAVIGATION';
-const ACTION_MODE = 'ACTION';
+export const KEYBOARD_NAVIGATION_MODE = 'NAVIGATION';
+export const KEYBOARD_ACTION_MODE = 'ACTION';
 
 // Pixel Values
 const TOP_MARGIN = 80;
@@ -40,43 +33,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,
-    };
-})();
-
-// Selectors
-const SELECTORS = {
-    headerRow: {
-        default: `thead > :nth-child(1)`,
-        roleBased: `[role="grid"] > [role="rowgroup"]:nth-child(1) > [role="row"]`,
-    },
-    dataRowRowGroup: {
-        default: `tbody`,
-        roleBased: `[role="grid"] > [role="rowgroup"]:nth-child(2)`,
-    },
-    cell: {
-        default: ['td', 'th'],
-        roleBased: ['rowheader', 'gridcell', 'columnheader'],
-    },
-};
+export 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,
+      };
 
 /***************************** KEYDOWN HANDLERS *****************************/
 
@@ -94,7 +67,7 @@ const SELECTORS = {
  */
 export function handleKeydownOnCell(event) {
     event.stopPropagation();
-    reactToKeyboardInActionMode(this.template, this.state, event);
+    reactToKeyboardInActionMode(this, event);
 }
 
 /**
@@ -115,13 +88,10 @@ export function handleKeydownOnCell(event) {
  * @param {Event} event
  */
 export function handleKeydownOnTable(event) {
-    const targetTagName = event.target.tagName.toLowerCase();
-    const targetRole = event.target.getAttribute('role');
-
     // Checks if the keydown happened on a cell element and not
     // on an actionable element when in Action Mode.
-    if (isCellElement(targetTagName, targetRole)) {
-        reactToKeyboardInNavMode(this.template, this.state, event);
+    if (isCellElement(event.target)) {
+        reactToKeyboardInNavMode(this, event);
     }
 }
 
@@ -129,280 +99,309 @@ export function handleKeydownOnTable(event) {
  * Changes the datatable state based on the keyboard event sent from the cell component.
  * The result of those changes may trigger a re-render on the table
  *
- * @param {Node} template The custom element root `this.template`
- * @param {Object} state Datatable state
+ * @param {Object} dt - The datatable instance
  * @param {Event} event Custom DOM event sent by the cell
  * @returns {Object} Mutated state
  */
-function reactToKeyboardInActionMode(template, state, event) {
+function reactToKeyboardInActionMode(dt, event) {
+    const { state, template } = dt;
     switch (event.detail.keyCode) {
         case ARROW_LEFT:
-            return reactToArrowLeft(template, state, event);
+            reactToArrowLeft(state, template, event);
+            break;
         case ARROW_RIGHT:
-            return reactToArrowRight(template, state, event);
+            reactToArrowRight(state, template, event);
+            break;
         case ARROW_UP:
-            return reactToArrowUp(template, state, event);
+            reactToArrowUp(state, template, event);
+            break;
         case ARROW_DOWN:
-            return reactToArrowDown(template, state, event);
+            reactToArrowDown(state, template, event);
+            break;
         case ENTER:
         case SPACE:
-            return reactToEnter(template, state, event);
+            reactToEnter(state, template, event);
+            break;
         case ESCAPE:
-            return reactToEscape(template, state, event);
+            reactToEscape(state, template, event);
+            break;
         case TAB:
-            return reactToTab(template, state, event);
+            reactToTab(state, template, event);
+            break;
         default:
-            return state;
+            break;
     }
 }
 
-function reactToKeyboardInNavMode(element, state, event) {
+function reactToKeyboardInNavMode(dt, event) {
+    const { state, template } = dt;
+    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,
+            colKeyValue,
+            rowKeyValue,
+            keyCode,
+            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(state, template, syntheticEvent);
+            break;
         case ARROW_RIGHT:
             event.preventDefault();
-            return reactToArrowRight(element, state, syntheticEvent);
+            reactToArrowRight(state, template, syntheticEvent);
+            break;
         case ARROW_UP:
             event.preventDefault();
-            return reactToArrowUp(element, state, syntheticEvent);
+            reactToArrowUp(state, template, syntheticEvent);
+            break;
         case ARROW_DOWN:
             event.preventDefault();
-            return reactToArrowDown(element, state, syntheticEvent);
+            reactToArrowDown(state, template, syntheticEvent);
+            break;
         case ENTER:
         case SPACE:
             event.preventDefault();
-            return reactToEnter(element, state, syntheticEvent);
+            reactToEnter(state, template, 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(state, template, syntheticEvent);
+            break;
         case TAB:
-            return reactToTab(element, state, syntheticEvent);
+            reactToTab(state, template, syntheticEvent);
+            break;
         default:
-            return state;
+            break;
     }
 }
 
-function moveFromCellToRow(element, state) {
-    setBlurActiveCell(element, state);
-    setRowNavigationMode(state);
-    setFocusActiveRow(element, state);
-}
-
-function reactToArrowLeft(element, state, event) {
+function reactToArrowLeft(state, template, 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);
+        // Tracked state change.
+        // Move from cell to row.
+        setBlurActiveCell(state, template);
+        // Untracked state change.
+        setRowNavigationMode(state);
+        // Tracked state change.
+        setFocusActiveRow(state, template);
     } else {
         const nextColIndex = getNextIndexLeft(state, colIndex);
-
         if (nextColIndex === undefined) {
             return;
         }
-
-        setBlurActiveCell(element, state);
-
-        // update activeCell
+        setBlurActiveCell(state, template);
+        // Untracked state change.
+        // Update activeCell.
         state.activeCell = {
             rowKeyValue,
             colKeyValue: generateColKeyValue(
-                columns[nextColIndex],
+                state.columns[nextColIndex],
                 nextColIndex
             ),
         };
-        setFocusActiveCell(element, state, NAVIGATION_DIR.LEFT);
+        // Tracked state change.
+        setFocusActiveCell(state, template, NAVIGATION_DIR.LEFT);
     }
 }
 
-function reactToArrowRight(element, state, event) {
+function reactToArrowRight(state, template, 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
+    setBlurActiveCell(state, template);
+    // 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);
+    setFocusActiveCell(state, template, NAVIGATION_DIR.RIGHT);
 }
 
-function reactToArrowUp(element, state, event) {
+function reactToArrowUp(state, template, 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();
     }
-
-    setBlurActiveCell(element, state);
-
-    // update activeCell
+    // Tracked state change.
+    setBlurActiveCell(state, template);
+    // Untracked state change.
+    // Update activeCell.
     state.activeCell = {
-        rowKeyValue: nextRowIndex !== -1 ? rows[nextRowIndex].key : HEADER_ROW,
+        rowKeyValue:
+            nextRowIndex === -1 ? HEADER_ROW_KEY : state.rows[nextRowIndex].key,
         colKeyValue,
     };
-    setFocusActiveCell(element, state, NAVIGATION_DIR.USE_CURRENT);
+    // Tracked state change.
+    setFocusActiveCell(state, template, NAVIGATION_DIR.USE_CURRENT);
 }
 
-function reactToArrowDown(element, state, event) {
+function reactToArrowDown(state, template, 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();
     }
-
-    setBlurActiveCell(element, state);
-
-    // update activeCell
+    // Tracked state change.
+    setBlurActiveCell(state, template);
+    // Untracked state change.
+    // Update activeCell.
     state.activeCell = {
-        rowKeyValue: nextRowIndex !== -1 ? rows[nextRowIndex].key : HEADER_ROW,
+        rowKeyValue:
+            nextRowIndex === -1 ? HEADER_ROW_KEY : state.rows[nextRowIndex].key,
         colKeyValue,
     };
-    setFocusActiveCell(element, state, NAVIGATION_DIR.USE_CURRENT);
+    setFocusActiveCell(state, template, NAVIGATION_DIR.USE_CURRENT);
 }
 
-function reactToEnter(element, state, event) {
-    if (state.keyboardMode === NAVIGATION_MODE) {
-        state.keyboardMode = ACTION_MODE;
+function reactToEnter(state, template, event) {
+    if (state.keyboardMode === KEYBOARD_NAVIGATION_MODE) {
+        // Untracked state change.
+        state.keyboardMode = KEYBOARD_ACTION_MODE;
+        const { keyCode, keyEvent } = event.detail;
         const { rowIndex, colIndex } = getIndexesActiveCell(state);
-
-        const actionsMap = {};
-        actionsMap[SPACE] = 'space';
-        actionsMap[ENTER] = 'enter';
-
-        if (event.detail.keyEvent) {
-            event.detail.keyEvent.preventDefault();
+        if (keyEvent) {
+            keyEvent.preventDefault();
         }
-        setModeActiveCell(element, state, {
-            action: actionsMap[event.detail.keyCode],
-        });
-        updateTabIndex(state, rowIndex, colIndex, -1);
+        const info = { action: undefined };
+        if (keyCode === SPACE) {
+            info.action = 'space';
+        } else if (keyCode === ENTER) {
+            info.action = 'enter';
+        }
+        // Tracked state changes.
+        setModeActiveCell(state, template, info);
+        updateCellTabIndex(state, rowIndex, colIndex, -1);
     }
 }
 
-function reactToEscape(element, state, event) {
-    if (state.keyboardMode === ACTION_MODE) {
+function reactToEscape(state, template, event) {
+    if (state.keyboardMode === KEYBOARD_ACTION_MODE) {
         // 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();
-        state.keyboardMode = NAVIGATION_MODE;
-        setModeActiveCell(element, state);
-        setFocusActiveCell(element, state, NAVIGATION_DIR.RESET);
+        // Untracked state change.
+        state.keyboardMode = KEYBOARD_NAVIGATION_MODE;
+        // Tracked state changes.
+        setModeActiveCell(state, template);
+        setFocusActiveCell(state, template, NAVIGATION_DIR.RESET);
     }
 }
 
-function reactToTab(element, state, event) {
+function reactToTab(state, template, 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 (state.keyboardMode === ACTION_MODE) {
-        // if not on last or first cell, tab through each cell of the grid
+    // If in ACTION mode.
+    if (state.keyboardMode === KEYBOARD_ACTION_MODE) {
+        // 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);
+                reactToTabBackward(state, template);
             } else {
-                reactToTabForward(element, state);
+                reactToTabForward(state, template);
             }
         } else {
-            // exit ACTION mode
-            state.keyboardMode = NAVIGATION_MODE;
-            setModeActiveCell(element, state);
+            // Untracked state change.
+            // Exit ACTION mode.
+            state.keyboardMode = KEYBOARD_NAVIGATION_MODE;
+            // Tracked state change.
+            setModeActiveCell(state, template);
+            // 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;
-
-    setBlurActiveCell(element, state);
-
-    // update activeCell
+export function reactToTabForward(state, template) {
+    const { nextColIndex, nextRowIndex } = getNextIndexOnTab(state, 'FORWARD');
+    // Tracked state change.
+    setBlurActiveCell(state, template);
+    // 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_KEY : state.rows[nextRowIndex].key,
+        colKeyValue: generateColKeyValue(
+            state.columns[nextColIndex],
+            nextColIndex
+        ),
     };
-    setFocusActiveCell(element, state, NAVIGATION_DIR.TAB_FORWARD, {
+    // Tracked state change.
+    setFocusActiveCell(state, template, NAVIGATION_DIR.TAB_FORWARD, {
         action: 'tab',
     });
 }
 
-export function reactToTabBackward(element, state) {
-    const { nextRowIndex, nextColIndex } = getNextIndexOnTab(state, 'BACKWARD');
-    const { columns, rows } = state;
-
-    setBlurActiveCell(element, state);
-
-    // update activeCell
+export function reactToTabBackward(state, template) {
+    const { nextColIndex, nextRowIndex } = getNextIndexOnTab(state, 'BACKWARD');
+    // Tracked state change.
+    setBlurActiveCell(state, template);
+    // 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_KEY : state.rows[nextRowIndex].key,
+        colKeyValue: generateColKeyValue(
+            state.columns[nextColIndex],
+            nextColIndex
+        ),
     };
-    setFocusActiveCell(element, state, NAVIGATION_DIR.TAB_BACKWARD, {
+    // Tracked state change.
+    setFocusActiveCell(state, template, NAVIGATION_DIR.TAB_BACKWARD, {
         action: 'tab',
     });
 }
@@ -413,20 +412,16 @@ function getTabDirection(shiftKey) {
 
 /**
  * Retrieve the next index values for row & column when tab is pressed
- * @param {object} state - datatable state
- * @param {string} direction - 'FORWARD' or 'BACKWARD'
- * @returns {object} - nextRowIndex, nextColIndex values, isExitCell boolean
+ * @param {Object} state - datatable state
+ * @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,105 +466,91 @@ 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 {*} state - The datatable state object
- * @param {*} event - The keydown event
+ * @param {Object} dt - The datatable instance
+ * @param {Object} event - The keydown event
  * @returns Mutated state
  */
-export function reactToKeyboardOnRow(datatable, state, event) {
+export function reactToKeyboardOnRow(dt, event) {
+    const { state, template } = dt;
     // 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;
         switch (event.detail.keyCode) {
             case ARROW_LEFT:
-                return reactToArrowLeftOnRow.call(
-                    datatable,
-                    element,
-                    state,
-                    event
-                );
+                reactToArrowLeftOnRow(dt, state, template, event);
+                break;
             case ARROW_RIGHT:
-                return reactToArrowRightOnRow.call(
-                    datatable,
-                    element,
-                    state,
-                    event
-                );
+                reactToArrowRightOnRow(dt, state, template, event);
+                break;
             case ARROW_UP:
-                return reactToArrowUpOnRow.call(
-                    datatable,
-                    element,
-                    state,
-                    event
-                );
+                reactToArrowUpOnRow(dt, state, template, event);
+                break;
             case ARROW_DOWN:
-                return reactToArrowDownOnRow.call(
-                    datatable,
-                    element,
-                    state,
-                    event
-                );
+                reactToArrowDownOnRow(dt, state, template, event);
+                break;
             default:
-                return state;
+                break;
         }
     }
-    return state;
 }
 
-function reactToArrowLeftOnRow(element, state, event) {
+function reactToArrowLeftOnRow(dt, state, template, 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);
+        fireRowToggleEvent(dt, 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;
-                setBlurActiveRow(element, state);
-                // update activeCell for the row
+                // Tracked state change.
+                setBlurActiveRow(state, template);
+                // Untracked state change.
+                // Update activeCell for the row.
                 state.activeCell = {
-                    rowKeyValue: rows[parentIndex].key,
+                    rowKeyValue: state.rows[parentIndex].key,
                     colKeyValue,
                 };
-                setFocusActiveRow(element, state);
+                // Tracked state change.
+                setFocusActiveRow(state, template);
             }
         }
     }
 }
 
-function moveFromRowToCell(element, state) {
-    setBlurActiveRow(element, state);
-    unsetRowNavigationMode(state);
-    setFocusActiveCell(element, state, NAVIGATION_DIR.USE_CURRENT);
-}
-
-function reactToArrowRightOnRow(element, state, event) {
+function reactToArrowRightOnRow(dt, state, template, 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);
+        fireRowToggleEvent(dt, rowKeyValue, rowExpanded);
     } else {
-        moveFromRowToCell(element, state);
+        // Tracked state change.
+        // Move from row to cell.
+        setBlurActiveRow(state, template);
+        // Untracked state change.
+        unsetRowNavigationMode(state);
+        // Tracked state change.
+        setFocusActiveCell(state, template, NAVIGATION_DIR.USE_CURRENT);
     }
 }
 
-function reactToArrowUpOnRow(element, state, event) {
-    // move tabindex 0 one row down
+function reactToArrowUpOnRow(state, template, event) {
+    // Move tabIndex 0 one row down.
     const { rowKeyValue, keyEvent } = event.detail;
     const treeColumn = getStateTreeColumn(state);
 
@@ -577,24 +558,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) {
-            setBlurActiveRow(element, state);
-            // update activeCell for the row
+            // Tracked state change.
+            setBlurActiveRow(state, template);
+            // Untracked state change.
+            // Update activeCell for the row.
             state.activeCell = {
-                rowKeyValue: rows[prevRowIndex].key,
+                rowKeyValue: state.rows[prevRowIndex].key,
                 colKeyValue,
             };
-            setFocusActiveRow(element, state);
+            // Tracked state change.
+            setFocusActiveRow(state, template);
         }
     }
 }
 
-function reactToArrowDownOnRow(element, state, event) {
-    // move tabindex 0 one row down
+function reactToArrowDownOnRow(state, template, event) {
+    // Move tabIndex 0 one row down.
     const { rowKeyValue, keyEvent } = event.detail;
     const treeColumn = getStateTreeColumn(state);
 
@@ -602,18 +585,20 @@ 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) {
-            setBlurActiveRow(element, state);
-            // update activeCell for the row
+            // Tracked state change.
+            setBlurActiveRow(state, template);
+            // Untracked state change.
+            // Update activeCell for the row.
             state.activeCell = {
-                rowKeyValue: rows[nextRowIndex].key,
+                rowKeyValue: state.rows[nextRowIndex].key,
                 colKeyValue,
             };
-            setFocusActiveRow(element, state);
+            // Tracked state change.
+            setFocusActiveRow(state, template);
         }
     }
 }
@@ -621,20 +606,24 @@ 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 (columns[i].internal !== true) {
+                existCustomerColumn = true;
+                break;
+            }
+        }
         if (!existCustomerColumn) {
             colIndex = 0;
         }
-
+        const { rows } = state;
         return {
-            rowKeyValue: rows.length > 0 ? rows[0].key : HEADER_ROW,
+            rowKeyValue: rows.length > 0 ? rows[0].key : HEADER_ROW_KEY,
             colKeyValue: generateColKeyValue(columns[colIndex], colIndex),
         };
     }
@@ -650,31 +639,35 @@ function setDefaultActiveCell(state) {
  * Given a datatable template and state, returns an LWC component reference that represents
  * the currently active cell in the table.
  *
- * @param {Object} template - A reference to the datatable's template
- * @param {Object} state - A reference to the datatable's state
+ * @param {Object} template - The datatable template
+ * @param {Object} state - The datatable 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;
 }
 
 /**
  * Returns if the pair rowKeyValue, colKeyValue are the current activeCell values
  *
- * @param {object} state - datatable state
- * @param {string} rowKeyValue  - the unique row key value
- * @param {string} colKeyValue {string} - the unique col key value
- * @returns {boolean} - true if rowKeyValue, colKeyValue are the current activeCell values.
+ * @param {Object} state - datatable state
+ * @param {String} rowKeyValue  - the unique row key value
+ * @param {String} colKeyValue {string} - the unique col key value
+ * @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
@@ -683,41 +676,26 @@ export function isActiveCell(state, rowKeyValue, colKeyValue) {
     return false;
 }
 
-/**
- * Updates the current activeCell in the state with the new rowKeyValue, colKeyValue
- * @param {object} state - datatable state
- * @param {string} rowKeyValue  - the unique row key value
- * @param {string} colKeyValue {string} - the unique col key value
- * @returns {object} state - mutated datatable state
- */
-export function updateActiveCell(state, rowKeyValue, colKeyValue) {
-    state.activeCell = {
-        rowKeyValue,
-        colKeyValue,
-    };
-    return state;
-}
-
 /**
  * It check if in the current (data, columns) the activeCell still valid.
  * When data changed the activeCell could be removed, then we check if there is cellToFocusNext
  * which is calculated from previously focused cell, if so we sync to that
  * If active cell is still valid we keep it the same
  *
- * @param {object} state - datatable state
- * @returns {object} state - mutated datatable state
+ * @param {Object} state - The 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,37 +709,38 @@ 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 {
         setDefaultActiveCell(state);
     }
-    state.keyboardMode = NAVIGATION_MODE;
+    state.keyboardMode = KEYBOARD_NAVIGATION_MODE;
 }
 
 /**
  * Check if we're in an escape/exit cell (first or last of grid)
- * @param {object} state - datatable state
- * @param {string} direction - 'FORWARD' or 'BACKWARD'
- * @returns {boolean} - if the current cell is or isn't an exit cell
+ * @param {Object} state - The datatable state
+ * @param {String} direction - 'FORWARD' or 'BACKWARD'
+ * @returns {Boolean} - if the current cell is or isn't an exit cell
  */
 export function isActiveCellAnExitCell(state, direction) {
     // get next tab index values
@@ -790,60 +769,65 @@ export function getIndexesActiveCell(state) {
     return getIndexesByKeys(state, rowKeyValue, colKeyValue);
 }
 
-function setModeActiveCell(element, state, info) {
-    const cellElement = getActiveCellElement(element, state);
+function setModeActiveCell(state, template, info) {
+    const cellElement = getActiveCellElement(template, state);
     if (cellElement) {
         cellElement.setMode(state.keyboardMode, info);
     }
 }
 
 function stillValidActiveCell(state) {
-    const {
-        activeCell: { rowKeyValue, colKeyValue },
-    } = state;
-
-    let sortableColumns = state.columns.filter((column) => column.sortable);
-
-    if (rowKeyValue === HEADER_ROW) {
-        if (state.rows.length && sortableColumns.length === 0) {
-            return false;
+    const { activeCell, indexes } = state;
+    const { rowKeyValue, colKeyValue } = activeCell;
+    if (rowKeyValue === HEADER_ROW_KEY) {
+        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 *****************************/
 
 /**
  * It set the focus to the current activeCell, this operation imply multiple changes
- * - update the tabindex of the activeCell
+ * - update the tabIndex of the activeCell
  * - set the current keyboard mode
  * - set the focus to the cell
- * @param {node} template - the custom element template `this.template`
- * @param {object} state - datatable state
- * @param {int} direction - direction (-1 left, 1 right and 0 for no direction) its used to know which actionable element to activate.
- * @param {object} info - extra information when setting the cell mode; currently only set when pressing tab
- * @param {boolean} shouldScroll - true if scrollTop should be adjusted when setting focus
+ * @param {Object} state - The datatable state
+ * @param {Node} template - The custom element template `this.template`
+ * @param {Integer} direction - The direction (-1 left, 1 right and 0 for no direction) its used to know which actionable element to activate.
+ * @param {Object} info - Extra information when setting the cell mode; currently only set when pressing tab
+ * @param {Boolean} [shouldScroll = true] - Whether scrollTop should be adjusted when setting focus
  */
 export function setFocusActiveCell(
-    template,
     state,
+    template,
     direction,
     info,
     shouldScroll = true
 ) {
     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);
     }
 
@@ -883,15 +867,15 @@ export function setFocusActiveCell(
 /**
  * It blur to the current activeCell, this operation imply multiple changes
  * - blur the activeCell
- * - update the tabindex to -1
- * @param {node} template - the custom element root `this.template`
- * @param {object} state - datatable state
+ * - update the tabIndex to -1
+ * @param {Object} state - The datatable state
+ * @param {Node} template - The custom element root `this.template`
  */
-export function setBlurActiveCell(template, state) {
+export function setBlurActiveCell(state, template) {
     if (state.activeCell) {
         const { rowIndex, colIndex } = getIndexesActiveCell(state);
-        let cellElement = getActiveCellElement(template, state);
         state.activeCell.focused = false;
+        let cellElement = getActiveCellElement(template, state);
         // eslint-disable-next-line @lwc/lwc/no-async-operation
         setTimeout(() => {
             // check cellElement; value may have changed
@@ -913,7 +897,7 @@ export function setBlurActiveCell(template, state) {
                 cellElement.parentElement.classList.remove(FOCUS_CLASS);
             }
         }, 0);
-        updateTabIndex(state, rowIndex, colIndex, -1);
+        updateCellTabIndex(state, rowIndex, colIndex, -1);
     }
 }
 
@@ -924,23 +908,26 @@ export function setBlurActiveCell(template, state) {
  * there is state.indexes
  * there is no  previously set state.cellToFocusNext
  * Indexes are calculated as to what to focus on next
- * @param {object} state - datatable state
- * @param {object} template - datatable element
+ * @param {Object} state - The datatable state
+ * @param {Object} template - The datatable element
  */
 export function setCellToFocusFromPrev(state, template) {
     if (
         state.activeCell &&
-        datatableHasFocus(state, template) &&
-        state.indexes &&
-        !state.cellToFocusNext
+        !state.cellToFocusNext &&
+        datatableHasFocus(state, template)
     ) {
+        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 +936,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,29 +945,20 @@ 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;
     }
 }
 
-/**
- * reset celltofocusnext to null (used after render)
- * @param {object} state - datatable state
- */
-export function resetCellToFocusFromPrev(state) {
-    state.cellToFocusNext = null;
-}
-
 /**
  * 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 {Object} state - The datatable state
+ * @param {Node} template - The custom element template `this.template`
  */
-export function addFocusStylesToActiveCell(template, state) {
-    const cellElement = getActiveCellElement(template, state);
+export function addFocusStylesToActiveCell(state, template) {
     state.activeCell.focused = true;
-
+    const cellElement = getActiveCellElement(template, state);
     if (cellElement) {
         cellElement.parentElement.classList.add(FOCUS_CLASS);
     }
@@ -988,53 +966,54 @@ export function addFocusStylesToActiveCell(template, state) {
 
 /**
  * It set the focus to the row of current activeCell, this operation implies multiple changes
- * - update the tabindex of the activeCell
+ * - update the tabIndex of the activeCell
  * - set the current keyboard mode
  * - set the focus to the row
- * @param {node} template - the custom element root `this.template`
- * @param {object} state - datatable state
+ *
+ * @param {Object} state - The datatable state
+ * @param {Node} template - the custom element root `this.template`
  */
-function setFocusActiveRow(template, state) {
+function setFocusActiveRow(state, template) {
     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);
 }
 
 /**
  * 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
+ * - update the tabIndex to -1
+ * @param {Object} state - The datatable state
+ * @param {Node} template - The custom element root `this.template`
  */
-function setBlurActiveRow(template, state) {
+function setBlurActiveRow(state, template) {
     if (state.activeCell) {
         const { rowIndex } = getIndexesActiveCell(state);
         // eslint-disable-next-line @lwc/lwc/no-async-operation
         setTimeout(() => {
-            const row = getActiveCellRow(template, state);
-            if (document.activeElement === row) {
-                row.blur();
+            const rowElement = getActiveCellRowElement(template, state);
+            if (document.activeElement === rowElement) {
+                rowElement.blur();
             }
         }, 0);
-        updateTabIndexRow(state, rowIndex, -1);
+        updateRowTabIndex(state, rowIndex, -1);
     }
 }
 
 /**
  * This method is needed in IE11 where clicking on the cell (factory) makes the div or the span active element
  * It refocuses on the cell element td or th or div[role=gridcell/rowheader]
- * @param {object} template - datatable element
- * @param {object} state - datatable state
- * @param {boolean} needsRefocusOnCellElement - flag indicating whether or not to refocus on the cell td/th or div[role=gridcell/rowheader]
+ * @param {Object} state - The datatable state
+ * @param {Object} template - The datatable element
+ * @param {Boolean} needsRefocusOnCellElement - flag indicating whether or not to refocus on the cell td/th or div[role=gridcell/rowheader]
  */
-export function refocusCellElement(template, state, needsRefocusOnCellElement) {
+export function refocusCellElement(state, template, needsRefocusOnCellElement) {
     if (needsRefocusOnCellElement) {
         const cellElement = getActiveCellElement(template, state);
         if (cellElement) {
@@ -1052,23 +1031,28 @@ export function refocusCellElement(template, state, needsRefocusOnCellElement) {
 }
 
 export function datatableHasFocus(state, template) {
-    return isFocusInside(template) || state.cellClicked;
+    return state.cellClicked || isFocusInside(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 +1069,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);
@@ -1111,7 +1095,7 @@ export function handleDatatableFocusOut(event) {
 
 /**
  * This is needed to check if datatable has lost focus but cell has been clicked recently
- * @param {object} state - datatable state
+ * @param {Object} state - The datatable state
  */
 export function setCellClickedForFocus(state) {
     state.cellClicked = true;
@@ -1119,7 +1103,7 @@ export function setCellClickedForFocus(state) {
 
 /**
  * Once the dt regains focus there is no need to set this
- *  @param {object} state - datatable state
+ *  @param {Object} state - The datatable state
  */
 function resetCellClickedForFocus(state) {
     state.cellClicked = false;
@@ -1130,19 +1114,18 @@ function resetCellClickedForFocus(state) {
 /**
  * It update the tabIndex value of a cell in the state for the rowIndex, colIndex passed
  * as consequence of this change
- * datatable is gonna re-render the cell affected with the new tabindex value
+ * datatable is gonna re-render the cell affected with the new tabIndex value
  *
- * @param {object} state - datatable state
+ * @param {Object} state - The datatable state
  * @param {number} rowIndex - the row index
  * @param {number} colIndex - the column index
- * @param {number} [index = 0] - the value for the tabindex
+ * @param {number} [tabIndex = 0] - the value for the tabIndex
  */
-export function updateTabIndex(state, rowIndex, colIndex, index = 0) {
+export function updateCellTabIndex(state, rowIndex, colIndex, tabIndex = 0) {
     if (isHeaderRow(rowIndex)) {
-        const { columns } = state;
-        columns[colIndex].tabIndex = index;
+        state.columns[colIndex].tabIndex = tabIndex;
     } else {
-        state.rows[rowIndex].cells[colIndex].tabIndex = index;
+        state.rows[rowIndex].cells[colIndex].tabIndex = tabIndex;
     }
 }
 
@@ -1151,50 +1134,47 @@ export function updateTabIndex(state, rowIndex, colIndex, index = 0) {
  * as consequence of this change
  * datatable is gonna re-render the row affected with the new tabindex value
  *
- * @param {object} state - datatable state
+ * @param {Object} state - The datatable state
  * @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, tabIndex = 0) {
     if (!isHeaderRow(rowIndex)) {
         // TODO what to do when rowIndex is header row
-        state.rows[rowIndex].tabIndex = index;
+        state.rows[rowIndex].tabIndex = tabIndex;
     }
 }
+
 /**
- * It update the tabindex for the current activeCell.
- * @param {object} state - datatable state
+ * Updates the tabIndex for the current activeCell.
+ *
+ * @param {Object} state - The 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;
 }
 
 /**
- * It updates the tabindex for the row of the current activeCell.
- * This happens in rowMode of NAVIGATION_MODE
- * @param {object} state - datatable state
+ * It updates the tabIndex for the row of the current activeCell.
+ * This happens in rowMode of KEYBOARD_NAVIGATION_MODE
+ * @param {Object} state - The datatable state
  * @param {number} [index = 0] - the value for the tabindex
- * @returns {object} state - mutated 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
-    if (state.activeCell && isRowNavigationMode(state)) {
-        const { rowIndex } = getIndexesActiveCell(state);
-        updateTabIndexRow(state, rowIndex, index);
-    }
-    return state;
+    // Tracked state change.
+    // We need to check again because maybe there is no active cell after sync.
+    updateActiveRowTabIndexAfterSync(state, index);
 }
 
 /***************************** INDEX COMPUTATIONS *****************************/
@@ -1208,7 +1188,7 @@ export function updateTabIndexActiveRow(state, index = 0) {
  * @returns {object} - {rowIndex, colIndex}
  */
 export function getIndexesByKeys(state, rowKeyValue, colKeyValue) {
-    if (rowKeyValue === HEADER_ROW) {
+    if (rowKeyValue === HEADER_ROW_KEY) {
         return {
             rowIndex: -1,
             colIndex: state.headerIndexes[colKeyValue],
@@ -1239,42 +1219,48 @@ 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: rowCount } = state.rows;
+    return rowIndex === -1 ? rowCount - 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 *****************************/
 
 function canBeRowNavigationMode(state) {
-    return state.keyboardMode === NAVIGATION_MODE && hasTreeDataType(state);
+    return (
+        state.keyboardMode === KEYBOARD_NAVIGATION_MODE &&
+        hasTreeDataType(state)
+    );
 }
 
 function isRowNavigationMode(state) {
-    return state.keyboardMode === NAVIGATION_MODE && state.rowMode === true;
+    return (
+        state.keyboardMode === KEYBOARD_NAVIGATION_MODE &&
+        state.rowMode === true
+    );
 }
 
 function setRowNavigationMode(state) {
-    if (hasTreeDataType(state) && state.keyboardMode === NAVIGATION_MODE) {
+    if (
+        hasTreeDataType(state) &&
+        state.keyboardMode === KEYBOARD_NAVIGATION_MODE
+    ) {
         state.rowMode = true;
     }
 }
@@ -1284,15 +1270,14 @@ export function unsetRowNavigationMode(state) {
 }
 
 /**
- * If new set of columns doesnt have tree data, mark it to false, as it
+ * If new set of columns doesn't have tree data, mark it to false, as it
  * could be true earlier
  * Else if it has tree data, check if rowMode is false
- * Earlier it didnt have tree data, set rowMode to true to start
+ * 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 - state object
- * @returns {object} state - mutated state
+ * @param {Boolean} hadTreeDataTypePreviously - state object
+ * @param {Object} state - The state object
  */
 export function updateRowNavigationMode(hadTreeDataTypePreviously, state) {
     if (!hasTreeDataType(state)) {
@@ -1300,15 +1285,14 @@ export function updateRowNavigationMode(hadTreeDataTypePreviously, state) {
     } else if (state.rowMode === false && !hadTreeDataTypePreviously) {
         state.rowMode = true;
     }
-    return state;
 }
 
 /***************************** HELPER FUNCTIONS *****************************/
 
-export function isCellElement(tagName, role) {
+export function isCellElement(target) {
+    const role = target.getAttribute('role');
     return (
-        SELECTORS.cell.default.includes(tagName) ||
-        SELECTORS.cell.roleBased.includes(role)
+        role === 'gridcell' || role === 'columnheader' || role === 'rowheader'
     );
 }
 
@@ -1316,31 +1300,27 @@ function isHeaderRow(rowIndex) {
     return rowIndex === -1;
 }
 
-export function getDataRow(rowKeyValue) {
-    return `[data-row-key-value="${escapeDoubleQuotes(rowKeyValue)}"]`;
-}
-
-export function getCellElementByKeys(template, rowKeyValue, colKeyValue) {
-    const selector = `${getDataRow(
-        rowKeyValue
-    )} [data-col-key-value="${escapeDoubleQuotes(
+function getCellElementByKeys(template, rowKeyValue, colKeyValue) {
+    const selector = `${getRowDataSelector(rowKeyValue)} ${getColDataSelector(
         colKeyValue
-    )}"] > :first-child`;
+    )} > :first-child`;
     return template.querySelector(selector);
 }
 
-function getActiveCellRow(template, state) {
-    if (state.activeCell) {
-        const { rowKeyValue } = state.activeCell;
-        const selector = getDataRow(rowKeyValue);
-        return template.querySelector(selector);
+function getActiveCellRowElement(template, state) {
+    let result;
+    const { activeCell } = state;
+    if (activeCell) {
+        result = template.querySelector(
+            getRowDataSelector(activeCell.rowKeyValue)
+        );
     }
-    return null;
+    return result || 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;
@@ -1349,19 +1329,8 @@ export function getRowParent(state, rowLevel, rowIndex) {
     return -1;
 }
 
-function getCellFromIndexes(state, rowIndex, colIndex) {
-    const { columns, rows } = state;
-    if (columns.length > 0) {
-        return {
-            rowKeyValue: rowIndex === -1 ? HEADER_ROW : rows[rowIndex].key,
-            colKeyValue: generateColKeyValue(columns[colIndex], colIndex),
-        };
-    }
-    return undefined;
-}
-
 function updateScrollTop(state, template, element) {
-    const scrollableY = template.querySelector('.slds-scrollable_y');
+    const scrollableY = getScrollerY(template);
     const scrollingParent = scrollableY.parentElement;
     const parentRect = scrollingParent.getBoundingClientRect();
     const findMeRect = element.getBoundingClientRect();
@@ -1383,22 +1352,21 @@ function scrollToCell(state, template, rowIndex) {
         scrollTop = Math.max(scrollTop - rowsInViewport * rowHeight, 0);
     }
 
-    const scrollableY = template.querySelector('.slds-scrollable_y');
+    const scrollableY = getScrollerY(template);
     scrollableY.scrollTop = scrollTop;
     findFirstVisibleIndex(state, scrollTop);
 }
 
 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;
 }
 
 export function isValidCell(state, rowKeyValue, colKeyValue) {
-    if (rowKeyValue === HEADER_ROW) {
+    if (rowKeyValue === HEADER_ROW_KEY) {
         return state.headerIndexes[colKeyValue] !== undefined;
     }
     const row = getRowByKey(state, rowKeyValue);
@@ -1408,16 +1376,28 @@ 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);
+    }
+}
+
+export function updateActiveRowTabIndexAfterSync(state, tabIndex = 0) {
+    const { activeCell } = state;
+    if (activeCell && isRowNavigationMode(state)) {
+        const { rowIndex } = getIndexesActiveCell(state);
+        updateRowTabIndex(state, rowIndex, tabIndex);
     }
 }