lightning-base-components 1.21.3-alpha → 1.21.5-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,7 +33,7 @@ const TAB = 9;
 const SPACE = 32;
 
 // Navigation Direction
-const NAVIGATION_DIR = isRTL()
+export const NAVIGATION_DIR = isRTL()
     ? {
           RIGHT: -1,
           LEFT: 1,
@@ -58,22 +51,6 @@ const NAVIGATION_DIR = isRTL()
           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'],
-    },
-};
-
 /***************************** KEYDOWN HANDLERS *****************************/
 
 /**
@@ -90,7 +67,7 @@ const SELECTORS = {
  */
 export function handleKeydownOnCell(event) {
     event.stopPropagation();
-    reactToKeyboardInActionMode(this.template, this.state, event);
+    reactToKeyboardInActionMode(this, event);
 }
 
 /**
@@ -111,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);
     }
 }
 
@@ -125,51 +99,52 @@ 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:
-            reactToArrowLeft(template, state, event);
+            reactToArrowLeft(state, template, event);
             break;
         case ARROW_RIGHT:
-            reactToArrowRight(template, state, event);
+            reactToArrowRight(state, template, event);
             break;
         case ARROW_UP:
-            reactToArrowUp(template, state, event);
+            reactToArrowUp(state, template, event);
             break;
         case ARROW_DOWN:
-            reactToArrowDown(template, state, event);
+            reactToArrowDown(state, template, event);
             break;
         case ENTER:
         case SPACE:
-            reactToEnter(template, state, event);
+            reactToEnter(state, template, event);
             break;
         case ESCAPE:
-            reactToEscape(template, state, event);
+            reactToEscape(state, template, event);
             break;
         case TAB:
-            reactToTab(template, state, event);
+            reactToTab(state, template, event);
             break;
         default:
             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,
             colKeyValue,
-            keyCode: keyCode,
-            shiftKey: shiftKey,
+            rowKeyValue,
+            keyCode,
+            shiftKey,
         },
         preventDefault: () => {},
         stopPropagation: () => {},
@@ -179,59 +154,59 @@ function reactToKeyboardInNavMode(element, state, event) {
     switch (event.keyCode) {
         case ARROW_LEFT:
             event.preventDefault();
-            reactToArrowLeft(element, state, syntheticEvent);
+            reactToArrowLeft(state, template, syntheticEvent);
             break;
         case ARROW_RIGHT:
             event.preventDefault();
-            reactToArrowRight(element, state, syntheticEvent);
+            reactToArrowRight(state, template, syntheticEvent);
             break;
         case ARROW_UP:
             event.preventDefault();
-            reactToArrowUp(element, state, syntheticEvent);
+            reactToArrowUp(state, template, syntheticEvent);
             break;
         case ARROW_DOWN:
             event.preventDefault();
-            reactToArrowDown(element, state, syntheticEvent);
+            reactToArrowDown(state, template, syntheticEvent);
             break;
         case ENTER:
         case SPACE:
             event.preventDefault();
-            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;
-            reactToEscape(element, state, syntheticEvent);
+            reactToEscape(state, template, syntheticEvent);
             break;
         case TAB:
-            reactToTab(element, state, syntheticEvent);
+            reactToTab(state, template, syntheticEvent);
             break;
         default:
             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);
     // 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);
+        setBlurActiveCell(state, template);
         // Untracked state change.
         // Update activeCell.
         state.activeCell = {
@@ -242,18 +217,18 @@ function reactToArrowLeft(element, state, event) {
             ),
         };
         // Tracked state change.
-        setFocusActiveCell(element, state, NAVIGATION_DIR.LEFT);
+        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);
     if (nextColIndex === undefined) {
         return;
     }
-    setBlurActiveCell(element, state);
+    setBlurActiveCell(state, template);
     // Untracked state change.
     // Update activeCell.
     state.activeCell = {
@@ -263,10 +238,10 @@ function reactToArrowRight(element, state, event) {
             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);
@@ -281,18 +256,19 @@ function reactToArrowUp(element, state, event) {
         keyEvent.stopPropagation();
     }
     // Tracked state change.
-    setBlurActiveCell(element, state);
+    setBlurActiveCell(state, template);
     // Untracked state change.
     // Update activeCell.
     state.activeCell = {
         rowKeyValue:
-            nextRowIndex !== -1 ? state.rows[nextRowIndex].key : HEADER_ROW,
+            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);
@@ -307,56 +283,52 @@ function reactToArrowDown(element, state, event) {
         keyEvent.stopPropagation();
     }
     // Tracked state change.
-    setBlurActiveCell(element, state);
+    setBlurActiveCell(state, template);
     // Untracked state change.
     // Update activeCell.
     state.activeCell = {
         rowKeyValue:
-            nextRowIndex !== -1 ? state.rows[nextRowIndex].key : HEADER_ROW,
+            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) {
+function reactToEnter(state, template, event) {
+    if (state.keyboardMode === KEYBOARD_NAVIGATION_MODE) {
         // Untracked state change.
-        state.keyboardMode = ACTION_MODE;
+        state.keyboardMode = KEYBOARD_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';
         // Tracked state changes.
-        setModeActiveCell(element, state, info);
+        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();
         // Untracked state change.
-        state.keyboardMode = NAVIGATION_MODE;
+        state.keyboardMode = KEYBOARD_NAVIGATION_MODE;
         // Tracked state changes.
-        setModeActiveCell(element, state);
-        setFocusActiveCell(element, state, NAVIGATION_DIR.RESET);
+        setModeActiveCell(state, template);
+        setFocusActiveCell(state, template, NAVIGATION_DIR.RESET);
     }
 }
 
-function reactToTab(element, state, event) {
+function reactToTab(state, template, event) {
     event.preventDefault();
     event.stopPropagation();
 
@@ -365,7 +337,7 @@ function reactToTab(element, state, event) {
     const isExitCell = isActiveCellAnExitCell(state, direction);
 
     // If in ACTION mode.
-    if (state.keyboardMode === 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.
@@ -375,16 +347,16 @@ function reactToTab(element, state, event) {
             }
             // 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 {
             // Untracked state change.
             // Exit ACTION mode.
-            state.keyboardMode = NAVIGATION_MODE;
+            state.keyboardMode = KEYBOARD_NAVIGATION_MODE;
             // Tracked state change.
-            setModeActiveCell(element, state);
+            setModeActiveCell(state, template);
             // Untracked state change.
             state.isExitingActionMode = true;
         }
@@ -394,41 +366,42 @@ function reactToTab(element, state, event) {
     }
 }
 
-export function reactToTabForward(element, state) {
+export function reactToTabForward(state, template) {
     const { nextColIndex, nextRowIndex } = getNextIndexOnTab(state, 'FORWARD');
     // Tracked state change.
-    setBlurActiveCell(element, state);
+    setBlurActiveCell(state, template);
+    // Untracked state change.
     // Update activeCell.
     state.activeCell = {
         rowKeyValue:
-            nextRowIndex === -1 ? HEADER_ROW : state.rows[nextRowIndex].key,
+            nextRowIndex === -1 ? HEADER_ROW_KEY : state.rows[nextRowIndex].key,
         colKeyValue: generateColKeyValue(
             state.columns[nextColIndex],
             nextColIndex
         ),
     };
     // Tracked state change.
-    setFocusActiveCell(element, state, NAVIGATION_DIR.TAB_FORWARD, {
+    setFocusActiveCell(state, template, NAVIGATION_DIR.TAB_FORWARD, {
         action: 'tab',
     });
 }
 
-export function reactToTabBackward(element, state) {
+export function reactToTabBackward(state, template) {
     const { nextColIndex, nextRowIndex } = getNextIndexOnTab(state, 'BACKWARD');
     // Tracked state change.
-    setBlurActiveCell(element, state);
+    setBlurActiveCell(state, template);
     // Untracked state change.
     // Update activeCell.
     state.activeCell = {
         rowKeyValue:
-            nextRowIndex === -1 ? HEADER_ROW : state.rows[nextRowIndex].key,
+            nextRowIndex === -1 ? HEADER_ROW_KEY : state.rows[nextRowIndex].key,
         colKeyValue: generateColKeyValue(
             state.columns[nextColIndex],
             nextColIndex
         ),
     };
     // Tracked state change.
-    setFocusActiveCell(element, state, NAVIGATION_DIR.TAB_BACKWARD, {
+    setFocusActiveCell(state, template, NAVIGATION_DIR.TAB_BACKWARD, {
         action: 'tab',
     });
 }
@@ -439,9 +412,9 @@ 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 = 'FORWARD') {
     const { rowIndex, colIndex } = getIndexesActiveCell(state);
@@ -493,12 +466,12 @@ 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 {*} dt - The datatable 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(dt, 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 (
@@ -506,19 +479,18 @@ export function reactToKeyboardOnRow(dt, state, event) {
         localName.indexOf('tr') !== -1 &&
         isRowNavigationMode(state)
     ) {
-        const element = dt.template;
         switch (event.detail.keyCode) {
             case ARROW_LEFT:
-                reactToArrowLeftOnRow.call(dt, element, state, event);
+                reactToArrowLeftOnRow(dt, state, template, event);
                 break;
             case ARROW_RIGHT:
-                reactToArrowRightOnRow.call(dt, element, state, event);
+                reactToArrowRightOnRow(dt, state, template, event);
                 break;
             case ARROW_UP:
-                reactToArrowUpOnRow.call(dt, element, state, event);
+                reactToArrowUpOnRow(dt, state, template, event);
                 break;
             case ARROW_DOWN:
-                reactToArrowDownOnRow.call(dt, element, state, event);
+                reactToArrowDownOnRow(dt, state, template, event);
                 break;
             default:
                 break;
@@ -526,12 +498,12 @@ export function reactToKeyboardOnRow(dt, state, event) {
     }
 }
 
-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.
     if (rowHasChildren && rowExpanded) {
-        fireRowToggleEvent.call(this, rowKeyValue, rowExpanded);
+        fireRowToggleEvent(dt, rowKeyValue, rowExpanded);
     } else if (rowLevel > 1) {
         const treeColumn = getStateTreeColumn(state);
         if (treeColumn) {
@@ -544,7 +516,7 @@ function reactToArrowLeftOnRow(element, state, event) {
             const parentIndex = getRowParentIndex(state, rowLevel, rowIndex);
             if (parentIndex !== -1) {
                 // Tracked state change.
-                setBlurActiveRow(element, state);
+                setBlurActiveRow(state, template);
                 // Untracked state change.
                 // Update activeCell for the row.
                 state.activeCell = {
@@ -552,36 +524,33 @@ function reactToArrowLeftOnRow(element, state, event) {
                     colKeyValue,
                 };
                 // Tracked state change.
-                setFocusActiveRow(element, state);
+                setFocusActiveRow(state, template);
             }
         }
     }
 }
 
-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) {
+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.
+    // 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);
 
@@ -594,7 +563,7 @@ function reactToArrowUpOnRow(element, state, event) {
         const prevRowIndex = getNextIndexUpWrapped(state, rowIndex);
         if (prevRowIndex !== -1) {
             // Tracked state change.
-            setBlurActiveRow(element, state);
+            setBlurActiveRow(state, template);
             // Untracked state change.
             // Update activeCell for the row.
             state.activeCell = {
@@ -602,13 +571,13 @@ function reactToArrowUpOnRow(element, state, event) {
                 colKeyValue,
             };
             // Tracked state change.
-            setFocusActiveRow(element, state);
+            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);
 
@@ -621,15 +590,15 @@ function reactToArrowDownOnRow(element, state, event) {
         const nextRowIndex = getNextIndexDownWrapped(state, rowIndex);
         if (nextRowIndex !== -1) {
             // Tracked state change.
-            setBlurActiveRow(element, state);
+            setBlurActiveRow(state, template);
             // Untracked state change.
-            // update activeCell for the row
+            // Update activeCell for the row.
             state.activeCell = {
                 rowKeyValue: state.rows[nextRowIndex].key,
                 colKeyValue,
             };
             // Tracked state change.
-            setFocusActiveRow(element, state);
+            setFocusActiveRow(state, template);
         }
     }
 }
@@ -644,7 +613,7 @@ function getDefaultActiveCell(state) {
         let existCustomerColumn = false;
         for (let i = 0; i < colCount; i += 1) {
             colIndex = i;
-            if (isCustomerColumn(columns[i])) {
+            if (columns[i].internal !== true) {
                 existCustomerColumn = true;
                 break;
             }
@@ -654,7 +623,7 @@ function getDefaultActiveCell(state) {
         }
         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),
         };
     }
@@ -670,8 +639,8 @@ 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) {
     const { activeCell } = state;
@@ -687,10 +656,10 @@ export function getActiveCellElement(template, state) {
 /**
  * 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) {
     const { activeCell } = state;
@@ -707,28 +676,13 @@ 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
+ * @param {Object} state - The datatable state
  */
 export function syncActiveCell(state) {
     const { activeCell } = state;
@@ -758,7 +712,6 @@ function setNextActiveCellFromPrev(state) {
     const { columns, rows } = state;
     const { length: rowCount } = rows;
     let nextRowIndex = rowIndex;
-
     if (nextRowIndex > rowCount - 1) {
         // row index not existing after update to new 5 > 5-1, 6 > 5-1,
         nextRowIndex = rowCount - 1;
@@ -780,14 +733,14 @@ function setNextActiveCellFromPrev(state) {
     } 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
@@ -816,8 +769,8 @@ 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);
     }
@@ -826,7 +779,7 @@ function setModeActiveCell(element, state, info) {
 function stillValidActiveCell(state) {
     const { activeCell, indexes } = state;
     const { rowKeyValue, colKeyValue } = activeCell;
-    if (rowKeyValue === HEADER_ROW) {
+    if (rowKeyValue === HEADER_ROW_KEY) {
         if (state.rows.length) {
             const { columns } = state;
             let sortable = false;
@@ -849,18 +802,18 @@ function stillValidActiveCell(state) {
 
 /**
  * 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
@@ -914,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
@@ -955,15 +908,14 @@ 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;
@@ -985,7 +937,7 @@ export function setCellToFocusFromPrev(state, template) {
 
 /**
  * If the current new active still is valid (exists) then set the celltofocusnext to null.
- * @param {object} state - The datatable state
+ * @param {Object} state - The datatable state
  */
 export function updateCellToFocusFromPrev(state) {
     if (
@@ -998,21 +950,13 @@ export function updateCellToFocusFromPrev(state) {
     }
 }
 
-/**
- * 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 - The datatable state
+ * @param {Object} state - The datatable state
+ * @param {Node} template - The custom element template `this.template`
  */
-export function addFocusStylesToActiveCell(template, state) {
+export function addFocusStylesToActiveCell(state, template) {
     state.activeCell.focused = true;
     const cellElement = getActiveCellElement(template, state);
     if (cellElement) {
@@ -1022,13 +966,14 @@ 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 rowElement = getActiveCellRowElement(template, state);
 
@@ -1043,18 +988,18 @@ 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 - The 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 = getActiveCellRowElement(template, state);
-            if (document.activeElement === row) {
-                row.blur();
+            const rowElement = getActiveCellRowElement(template, state);
+            if (document.activeElement === rowElement) {
+                rowElement.blur();
             }
         }, 0);
         updateRowTabIndex(state, rowIndex, -1);
@@ -1064,11 +1009,11 @@ function setBlurActiveRow(template, state) {
 /**
  * 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) {
@@ -1086,7 +1031,7 @@ export function refocusCellElement(template, state, needsRefocusOnCellElement) {
 }
 
 export function datatableHasFocus(state, template) {
-    return isFocusInside(template) || state.cellClicked;
+    return state.cellClicked || isFocusInside(template);
 }
 
 function isFocusInside(currentTarget) {
@@ -1150,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;
@@ -1158,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;
@@ -1169,18 +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 updateCellTabIndex(state, rowIndex, colIndex, index = 0) {
+export function updateCellTabIndex(state, rowIndex, colIndex, tabIndex = 0) {
     if (isHeaderRow(rowIndex)) {
-        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;
     }
 }
 
@@ -1189,19 +1134,21 @@ export function updateCellTabIndex(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 updateRowTabIndex(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
  */
 export function updateTabIndexActiveCell(state, index = 0) {
@@ -1215,11 +1162,10 @@ export function updateTabIndexActiveCell(state, index = 0) {
 }
 
 /**
- * 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 - The datatable state
  */
 export function updateTabIndexActiveRow(state, index = 0) {
     if (state.activeCell && !stillValidActiveCell(state)) {
@@ -1228,11 +1174,7 @@ export function updateTabIndexActiveRow(state, index = 0) {
     }
     // 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);
-        updateRowTabIndex(state, rowIndex, index);
-    }
-    return state;
+    updateActiveRowTabIndexAfterSync(state, index);
 }
 
 /***************************** INDEX COMPUTATIONS *****************************/
@@ -1246,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],
@@ -1289,8 +1231,8 @@ function getNextIndexLeft(state, colIndex) {
 }
 
 function getNextIndexUpWrapped(state, rowIndex) {
-    const { length: rowsCount } = state.rows;
-    return rowIndex === -1 ? rowsCount - 1 : rowIndex - 1;
+    const { length: rowCount } = state.rows;
+    return rowIndex === -1 ? rowCount - 1 : rowIndex - 1;
 }
 
 function getNextIndexDownWrapped(state, rowIndex) {
@@ -1301,15 +1243,24 @@ function getNextIndexDownWrapped(state, rowIndex) {
 /***************************** 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;
     }
 }
@@ -1319,14 +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
+ * @param {Boolean} hadTreeDataTypePreviously - state object
+ * @param {Object} state - The state object
  */
 export function updateRowNavigationMode(hadTreeDataTypePreviously, state) {
     if (!hasTreeDataType(state)) {
@@ -1338,10 +1289,10 @@ export function updateRowNavigationMode(hadTreeDataTypePreviously, 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'
     );
 }
 
@@ -1349,26 +1300,22 @@ function isHeaderRow(rowIndex) {
     return rowIndex === -1;
 }
 
-export function getRowDataSelector(rowKeyValue) {
-    return `[data-row-key-value="${escapeDoubleQuotes(rowKeyValue)}"]`;
-}
-
-export function getCellElementByKeys(template, rowKeyValue, colKeyValue) {
-    const selector = `${getRowDataSelector(
-        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 getActiveCellRowElement(template, state) {
+    let result;
     const { activeCell } = state;
     if (activeCell) {
-        const selector = getRowDataSelector(activeCell.rowKeyValue);
-        return template.querySelector(selector);
+        result = template.querySelector(
+            getRowDataSelector(activeCell.rowKeyValue)
+        );
     }
-    return null;
+    return result || null;
 }
 
 export function getRowParentIndex(state, rowLevel, rowIndex) {
@@ -1382,19 +1329,8 @@ export function getRowParentIndex(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();
@@ -1416,7 +1352,7 @@ 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);
 }
@@ -1430,7 +1366,7 @@ export function isActiveCellEditable(state) {
 }
 
 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);
@@ -1457,3 +1393,11 @@ export function updateActiveCellTabIndexAfterSync(state, tabIndex = 0) {
         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);
+    }
+}