lightning-base-components 1.13.6-alpha → 1.14.1-alpha

package/src/lightning/datatable/keyboard.js

@@ -1,5 +1,4 @@
-import { isCustomerColumn } from './columns';
-import { generateColKeyValue } from './keys';
+import { isCustomerColumn, generateColKeyValue } from './columns';
 import {
     hasTreeDataType,
     getStateTreeColumn,
@@ -7,15 +6,33 @@ import {
 } from './tree';
 import { isRTL, getShadowActiveElements } from 'lightning/utilsPrivate';
 
-export const ARROW_RIGHT = 39;
-export const ARROW_LEFT = 37;
-export const ARROW_DOWN = 40;
-export const ARROW_UP = 38;
-export const ENTER = 13;
-export const ESCAPE = 27;
-export const TAB = 9;
-export const SPACE = 32;
-export const NAVIGATION_DIR = (() => {
+// Indicator/flag for a header row
+const HEADER_ROW = 'HEADER';
+
+// SLDS Class for Focus
+const FOCUS_CLASS = 'slds-has-focus';
+
+// Keyboard Navigation Modes
+const NAVIGATION_MODE = 'NAVIGATION';
+const ACTION_MODE = 'ACTION';
+
+// Pixel Values
+const TOP_MARGIN = 80;
+const BOTTOM_MARGIN = 80;
+const SCROLL_OFFSET = 20;
+
+// Key Code Values
+const ARROW_RIGHT = 39;
+const ARROW_LEFT = 37;
+const ARROW_DOWN = 40;
+const ARROW_UP = 38;
+const ENTER = 13;
+const ESCAPE = 27;
+const TAB = 9;
+const SPACE = 32;
+
+// Navigation Direction
+const NAVIGATION_DIR = (() => {
     if (isRTL()) {
         return {
             RIGHT: -1,
@@ -37,618 +54,696 @@ export const NAVIGATION_DIR = (() => {
     };
 })();
 
-const TOP_MARGIN = 80;
-const BOTTOM_MARGIN = 80;
-const SCROLL_OFFSET = 20;
-const NAVIGATION_MODE = 'NAVIGATION';
+// 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 function getKeyboardDefaultState() {
-    return {
-        keyboardMode: NAVIGATION_MODE,
-        rowMode: false,
-        activeCell: undefined,
-        tabindex: 0,
-        cellToFocusNext: null,
-        cellClicked: false,
-    };
-}
+/***************************** KEYDOWN HANDLERS *****************************/
 
 /**
- * It update 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
+ * Handler for the `privatecellkeydown` event that is fired by
+ * lightning-primitive-datatable-cell.
+ * This component is extended by primitive-cell-factory, primitive-cell-checkbox
+ * and primitive-header-factory.
+ *
+ * Typically this handler is invoked when the user is in ACTION mode and the
+ * user keys down on a cell that contains actionable items (ex. edit button, links,
+ * email, buttons).
+ *
+ * @param {Event} event - Custom DOM event (privatecellkeydown) sent by the cell
  */
-export const updateActiveCell = function (state, rowKeyValue, colKeyValue) {
-    state.activeCell = {
-        rowKeyValue,
-        colKeyValue,
-    };
-    return state;
-};
+export function handleKeydownOnCell(event) {
+    event.stopPropagation();
+    reactToKeyboardInActionMode(this.template, this.state, event);
+}
 
 /**
- * It return 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.
+ * Handler for keydown on the <table> element or the corresponding [role="grid"]
+ * on the role-based table.
+ *
+ * This handler is invoked whenever a keydown occurs on the table. However, we
+ * only react to the keyboard here if the user is in Navigation mode OR in Action
+ * mode when the cell does not have actionable items (like buttons, links etc).
+ *
+ * The Action mode keydowns are filtered out here. If a keydown occurs on an actionable
+ * element, the target element will not be the cell element (td/th, role=gridcell etc).
+ * The target element in that case will likely be the components extending
+ * primitiveDatatableCell (primitive-cell-factory/primitive-cell-checkbox/primitive-header-factory)
+ * Those events are handled by `handleKeydownOnCell()` and the remaining are
+ * handled by this function.
+ *
+ * @param {*} event
  */
-export const isActiveCell = function (state, rowKeyValue, colKeyValue) {
-    if (state.activeCell) {
-        const {
-            rowKeyValue: currentRowKeyValue,
-            colKeyValue: currentColKeyValue,
-        } = state.activeCell;
-        return (
-            currentRowKeyValue === rowKeyValue &&
-            currentColKeyValue === colKeyValue
-        );
+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);
     }
-    return false;
-};
+}
 
 /**
- * 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
+ * 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} element - the custom element root `this.template`
  * @param {object} state - datatable state
- * @returns {object} state - mutated datatable state
+ * @param {event} event - custom DOM event sent by the cell
+ * @returns {object} - mutated state
  */
-export const syncActiveCell = function (state) {
-    if (!state.activeCell || !stillValidActiveCell(state)) {
-        if (state.activeCell && state.cellToFocusNext) {
-            // there is previously focused cell
-            setNextActiveCellFromPrev(state);
-        } else {
-            // there is no active cell or there is no previously focused cell
-            setDefaultActiveCell(state);
-        }
+function reactToKeyboardInActionMode(element, state, event) {
+    switch (event.detail.keyCode) {
+        case ARROW_LEFT:
+            return reactToArrowLeft(element, state, event);
+        case ARROW_RIGHT:
+            return reactToArrowRight(element, state, event);
+        case ARROW_UP:
+            return reactToArrowUp(element, state, event);
+        case ARROW_DOWN:
+            return reactToArrowDown(element, state, event);
+        case ENTER:
+        case SPACE:
+            return reactToEnter(element, state, event);
+        case ESCAPE:
+            return reactToEscape(element, state, event);
+        case TAB:
+            return reactToTab(element, state, event);
+        default:
+            return state;
     }
-    return state;
-};
+}
 
-export const datatableHasFocus = function (state, template) {
-    return isFocusInside(template) || state.cellClicked;
-};
+function reactToKeyboardInNavMode(element, state, event) {
+    const syntheticEvent = {
+        detail: {
+            rowKeyValue: state.activeCell.rowKeyValue,
+            colKeyValue: state.activeCell.colKeyValue,
+            keyCode: event.keyCode,
+            shiftKey: event.shiftKey,
+        },
+        preventDefault: () => {},
+        stopPropagation: () => {},
+    };
 
-/**
- * Sets the row and col index of cell to focus next if
- * there is state.activecell
- * datatable has focus
- * 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
- */
-export const setCellToFocusFromPrev = function (state, template) {
-    if (
-        state.activeCell &&
-        datatableHasFocus(state, template) &&
-        state.indexes &&
-        !state.cellToFocusNext
-    ) {
-        let { rowIndex, colIndex } = getIndexesActiveCell(state);
-        colIndex = 0; // default point to the first column
-        if (state.rows && rowIndex === state.rows.length - 1) {
-            // 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;
+    // 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);
+        case ARROW_RIGHT:
+            event.preventDefault();
+            return reactToArrowRight(element, state, syntheticEvent);
+        case ARROW_UP:
+            event.preventDefault();
+            return reactToArrowUp(element, state, syntheticEvent);
+        case ARROW_DOWN:
+            event.preventDefault();
+            return reactToArrowDown(element, state, syntheticEvent);
+        case ENTER:
+        case SPACE:
+            event.preventDefault();
+            return reactToEnter(element, state, syntheticEvent);
+        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);
+        case TAB:
+            return reactToTab(element, state, syntheticEvent);
+        default:
+            return state;
+    }
+}
+
+function moveFromCellToRow(element, state) {
+    setBlurActiveCell(element, state);
+    setRowNavigationMode(state);
+    setFocusActiveRow(element, state);
+}
+
+function reactToArrowLeft(element, state, event) {
+    const { rowKeyValue, colKeyValue } = event.detail;
+    const { colIndex } = getIndexesByKeys(state, rowKeyValue, colKeyValue);
+    const { columns } = state;
+
+    // Move from navigation mode to row mode when user
+    // arrows left when in nav mode and on the first column
+    if (colIndex === 0 && canBeRowNavigationMode(state)) {
+        moveFromCellToRow(element, state);
+    } else {
+        const nextColIndex = getNextIndexLeft(state, colIndex);
+
+        if (nextColIndex === undefined) {
+            return;
         }
-        state.cellToFocusNext = {
-            rowIndex,
-            colIndex,
+
+        setBlurActiveCell(element, state);
+
+        // update activeCell
+        state.activeCell = {
+            rowKeyValue,
+            colKeyValue: generateColKeyValue(
+                columns[nextColIndex],
+                nextColIndex
+            ),
         };
+        setFocusActiveCell(element, state, NAVIGATION_DIR.LEFT);
     }
-};
+}
 
-/**
- * if the current new active still is valid ie exists then set the celltofocusnext to null
- * @param {object} state - datatable state
- */
-export const updateCellToFocusFromPrev = function (state) {
-    if (
-        state.activeCell &&
-        state.cellToFocusNext &&
-        stillValidActiveCell(state)
-    ) {
-        // if the previous focused is there and valid,  dont set the prevActiveFocusedCell
-        state.cellToFocusNext = null;
+function reactToArrowRight(element, state, event) {
+    const { rowKeyValue, colKeyValue } = event.detail;
+    const { colIndex } = getIndexesByKeys(state, rowKeyValue, colKeyValue);
+    const nextColIndex = getNextIndexRight(state, colIndex);
+    const { columns } = state;
+
+    if (nextColIndex === undefined) {
+        return;
     }
-};
 
-/**
- * reset celltofocusnext to null (used after render)
- * @param {object} state - datatable state
- */
-export const resetCellToFocusFromPrev = function (state) {
-    state.cellToFocusNext = null;
-};
+    setBlurActiveCell(element, state);
 
-/**
- * Sets the next active if there is a previously focused active cell
- * Logic is:
- * if the rowIndex is existing one - cell = (rowIndex, 0)
- * if the rowIndex is > the number of rows (focused was last row or more) = (lastRow, lastColumn)
- * for columns
- * same as above except if the colIndex is > the number of cols (means no data) = set it to null??
- * @param {object} state - datatable state
- */
-function setNextActiveCellFromPrev(state) {
-    const { rowIndex, colIndex } = state.cellToFocusNext;
-    let nextRowIndex = rowIndex;
-    let nextColIndex = colIndex;
-    const rowsCount = state.rows ? state.rows.length : 0;
-    const colsCount = state.columns.length ? state.columns.length : 0;
+    // update activeCell
+    state.activeCell = {
+        rowKeyValue,
+        colKeyValue: generateColKeyValue(columns[nextColIndex], nextColIndex),
+    };
+    setFocusActiveCell(element, state, NAVIGATION_DIR.RIGHT);
+}
 
-    if (nextRowIndex > rowsCount - 1) {
-        // row index not existing after update to new 5 > 5-1, 6 > 5-1,
-        nextRowIndex = rowsCount - 1;
+function reactToArrowUp(element, state, event) {
+    const { rowKeyValue, colKeyValue, keyEvent } = event.detail;
+    const { rowIndex } = getIndexesByKeys(state, rowKeyValue, colKeyValue);
+    const nextRowIndex = getNextIndexUp(state, rowIndex);
+    const { rows } = state;
+
+    if (nextRowIndex === undefined) {
+        return;
     }
-    if (nextColIndex > colsCount - 1) {
-        // col index not existing after update to new
-        nextColIndex = colsCount - 1;
+
+    if (state.hideTableHeader && nextRowIndex === -1) {
+        return;
     }
-    const nextActiveCell = getCellFromIndexes(
-        state,
-        nextRowIndex,
-        nextColIndex
-    );
-    if (nextActiveCell) {
-        state.activeCell = nextActiveCell;
-    } else {
-        setDefaultActiveCell(state);
+
+    if (keyEvent) {
+        keyEvent.stopPropagation();
     }
-    state.keyboardMode = 'NAVIGATION';
-}
 
-/**
- * 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
- *
- * @param {object} state - datatable state
- * @param {number} rowIndex - the row index
- * @param {number} colIndex - the column index
- * @param {number} [index = 0] - the value for the tabindex
- */
-export const updateTabIndex = function (state, rowIndex, colIndex, index = 0) {
-    if (isHeaderRow(rowIndex)) {
-        const { columns } = state;
-        columns[colIndex].tabIndex = index;
-    } else {
-        state.rows[rowIndex].cells[colIndex].tabIndex = index;
+    setBlurActiveCell(element, state);
+
+    // update activeCell
+    state.activeCell = {
+        rowKeyValue: nextRowIndex !== -1 ? rows[nextRowIndex].key : HEADER_ROW,
+        colKeyValue,
+    };
+    setFocusActiveCell(element, state, NAVIGATION_DIR.USE_CURRENT);
+}
+
+function reactToArrowDown(element, state, event) {
+    const { rowKeyValue, colKeyValue, keyEvent } = event.detail;
+    const { rowIndex } = getIndexesByKeys(state, rowKeyValue, colKeyValue);
+    const nextRowIndex = getNextIndexDown(state, rowIndex);
+    const { rows } = state;
+
+    if (nextRowIndex === undefined) {
+        return;
     }
-};
 
-/**
- * It updates the tabIndex value of a row in the state for the rowIndex passed
- * as consequence of this change
- * datatable is gonna re-render the row affected with the new tabindex value
- *
- * @param {object} state - datatable state
- * @param {number} rowIndex - the row index
- * @param {number} [index = 0] - the value for the tabindex
- */
-export const updateTabIndexRow = function (state, rowIndex, index = 0) {
-    if (!isHeaderRow(rowIndex)) {
-        // TODO what to do when rowIndex is header row
-        state.rows[rowIndex].tabIndex = index;
+    if (state.hideTableHeader && nextRowIndex === -1) {
+        return;
     }
-};
-/**
- * It update the tabindex for the current activeCell.
- * @param {object} state - datatable state
- * @param {number} [index = 0] - the value for the tabindex
- * @returns {object} state - mutated state
- */
-export const updateTabIndexActiveCell = function (state, index = 0) {
-    if (state.activeCell && !stillValidActiveCell(state)) {
-        syncActiveCell(state);
+
+    if (keyEvent) {
+        keyEvent.stopPropagation();
     }
 
-    // we need to check again because maybe there is no active cell after sync
-    if (state.activeCell && !isRowNavigationMode(state)) {
+    setBlurActiveCell(element, state);
+
+    // update activeCell
+    state.activeCell = {
+        rowKeyValue: nextRowIndex !== -1 ? rows[nextRowIndex].key : HEADER_ROW,
+        colKeyValue,
+    };
+    setFocusActiveCell(element, state, NAVIGATION_DIR.USE_CURRENT);
+}
+
+function reactToEnter(element, state, event) {
+    if (state.keyboardMode === NAVIGATION_MODE) {
+        state.keyboardMode = ACTION_MODE;
         const { rowIndex, colIndex } = getIndexesActiveCell(state);
-        updateTabIndex(state, rowIndex, colIndex, 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
- * @param {number} [index = 0] - the value for the tabindex
- * @returns {object} state - mutated state
- */
-export const updateTabIndexActiveRow = function (state, index = 0) {
-    if (state.activeCell && !stillValidActiveCell(state)) {
-        syncActiveCell(state);
-    }
+        const actionsMap = {};
+        actionsMap[SPACE] = 'space';
+        actionsMap[ENTER] = 'enter';
 
-    // 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);
+        if (event.detail.keyEvent) {
+            event.detail.keyEvent.preventDefault();
+        }
+        setModeActiveCell(element, state, {
+            action: actionsMap[event.detail.keyCode],
+        });
+        updateTabIndex(state, rowIndex, colIndex, -1);
     }
-    return state;
-};
+}
 
-/**
- * If new set of columns doesnt 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
- * 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
- */
-export function updateRowNavigationMode(hadTreeDataTypePreviously, state) {
-    if (!hasTreeDataType(state)) {
-        state.rowMode = false;
-    } else if (state.rowMode === false && !hadTreeDataTypePreviously) {
-        state.rowMode = true;
+function reactToEscape(element, state, event) {
+    if (state.keyboardMode === 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);
     }
-    return state;
 }
 
-/**
- * It return the indexes { rowIndex, colIndex } of a cell based of the unique cell values
- * rowKeyValue, colKeyValue
- * @param {object} state - datatable state
- * @param {string} rowKeyValue - the row key value
- * @param {string} colKeyValue - the column key value
- * @returns {object} - {rowIndex, colIndex}
- */
-export const getIndexesByKeys = function (state, rowKeyValue, colKeyValue) {
-    if (rowKeyValue === 'HEADER') {
-        return {
-            rowIndex: -1,
-            colIndex: state.headerIndexes[colKeyValue],
-        };
-    }
+function reactToTab(element, state, event) {
+    event.preventDefault();
+    event.stopPropagation();
 
-    return {
-        rowIndex: state.indexes[rowKeyValue][colKeyValue][0],
-        colIndex: state.indexes[rowKeyValue][colKeyValue][1],
-    };
-};
+    const { shiftKey } = event.detail;
+    const direction = getTabDirection(shiftKey);
+    const isExitCell = isActiveCellAnExitCell(state, direction);
 
-/**
- * It set the focus to the current activeCell, this operation imply multiple changes
- * - update the tabindex of the activeCell
- * - set the current keyboard mode
- * - set the focus to the cell
- * @param {node} element - 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.
- */
-export const setFocusActiveCell = function (element, state, direction, info) {
-    const { keyboardMode } = state;
-    const { rowIndex, colIndex } = getIndexesActiveCell(state);
+    // if in ACTION mode
+    if (state.keyboardMode === 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();
+            }
+            // tab in proper direction based on shift key press
+            if (direction === 'BACKWARD') {
+                reactToTabBackward(element, state);
+            } else {
+                reactToTabForward(element, state);
+            }
+        } else {
+            // exit ACTION mode
+            state.keyboardMode = NAVIGATION_MODE;
+            setModeActiveCell(element, state);
+            state.isExitingActionMode = true;
+        }
+    } else {
+        state.isExitingActionMode = true;
+    }
+}
 
-    updateTabIndex(state, rowIndex, colIndex);
-    return new Promise((resolve) => {
-        // eslint-disable-next-line @lwc/lwc/no-async-operation
-        setTimeout(() => {
-            const cellElement = getCellElementByIndexes(
-                element,
-                rowIndex,
-                colIndex
-            );
-            if (cellElement) {
-                if (direction) {
-                    cellElement.resetCurrentInputIndex(direction, keyboardMode);
-                }
-                cellElement.addFocusStyles();
-                cellElement.parentElement.classList.add('slds-has-focus');
-                cellElement.parentElement.focus();
-                cellElement.setMode(keyboardMode, info);
+export function reactToTabForward(element, state) {
+    const { nextRowIndex, nextColIndex } = getNextIndexOnTab(state, 'FORWARD');
+    const { columns, rows } = state;
 
-                const scrollableY = element.querySelector('.slds-scrollable_y');
-                const scrollingParent = scrollableY.parentElement;
-                const parentRect = scrollingParent.getBoundingClientRect();
-                const findMeRect = cellElement.getBoundingClientRect();
-                if (findMeRect.top < parentRect.top + TOP_MARGIN) {
-                    scrollableY.scrollTop -= SCROLL_OFFSET;
-                } else if (
-                    findMeRect.bottom >
-                    parentRect.bottom - BOTTOM_MARGIN
-                ) {
-                    scrollableY.scrollTop += SCROLL_OFFSET;
-                }
-            }
-            resolve();
-        }, 0);
+    setBlurActiveCell(element, state);
+
+    // update activeCell
+    state.activeCell = {
+        rowKeyValue: nextRowIndex !== -1 ? rows[nextRowIndex].key : HEADER_ROW,
+        colKeyValue: generateColKeyValue(columns[nextColIndex], nextColIndex),
+    };
+    setFocusActiveCell(element, state, NAVIGATION_DIR.TAB_FORWARD, {
+        action: 'tab',
     });
-};
+}
 
-/**
- * It adds and the focus classes to the th/td.
- *
- * @param {node} element - the custom element template `this.template`
- * @param {object} state - datatable state
- */
-export const addFocusStylesToActiveCell = function (element, state) {
-    const { rowIndex, colIndex } = getIndexesActiveCell(state);
+export function reactToTabBackward(element, state) {
+    const { nextRowIndex, nextColIndex } = getNextIndexOnTab(state, 'BACKWARD');
+    const { columns, rows } = state;
 
-    const cellElement = getCellElementByIndexes(element, rowIndex, colIndex);
+    setBlurActiveCell(element, state);
 
-    if (cellElement) {
-        cellElement.parentElement.classList.add('slds-has-focus');
-    }
-};
+    // update activeCell
+    state.activeCell = {
+        rowKeyValue: nextRowIndex !== -1 ? rows[nextRowIndex].key : HEADER_ROW,
+        colKeyValue: generateColKeyValue(columns[nextColIndex], nextColIndex),
+    };
+    setFocusActiveCell(element, state, NAVIGATION_DIR.TAB_BACKWARD, {
+        action: 'tab',
+    });
+}
+
+function getTabDirection(shiftKey) {
+    return shiftKey ? 'BACKWARD' : 'FORWARD';
+}
 
 /**
- * It blur to the current activeCell, this operation imply multiple changes
- * - blur the activeCell
- * - update the tabindex to -1
- * @param {node} element - the custom element root `this.template`
- * @param {object} state - datatable state
- */
-export const setBlurActiveCell = function (element, state) {
-    if (state.activeCell) {
-        const { rowIndex, colIndex } = getIndexesActiveCell(state);
-        // eslint-disable-next-line @lwc/lwc/no-async-operation
-        setTimeout(() => {
-            const cellElement = getCellElementByIndexes(
-                element,
-                rowIndex,
-                colIndex
-            );
-            // we need to check because of the tree,
-            // at this point it may remove/change the rows/keys because opening or closing a row.
-            if (cellElement) {
-                if (document.activeElement === cellElement) {
-                    cellElement.blur();
-                }
-                cellElement.removeFocusStyles(true);
-                cellElement.parentElement.classList.remove('slds-has-focus');
-            }
-        }, 0);
-        updateTabIndex(state, rowIndex, colIndex, -1);
-    }
-};
-/**
- * It set the focus to the current activeCell, this operation imply multiple changes
- * - update the tabindex of the activeCell
- * - set the current keyboard mode
- * - set the focus to the cell
- * @param {node} element - the custom element root `this.template`
+ * 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
  */
-export const setFocusActiveRow = function (element, state) {
-    const { rowIndex } = getIndexesActiveCell(state);
+function getNextIndexOnTab(state, direction) {
+    const { rowIndex, colIndex } = getIndexesActiveCell(state);
 
-    updateTabIndexRow(state, rowIndex);
-    // eslint-disable-next-line @lwc/lwc/no-async-operation
-    setTimeout(() => {
-        const row = getRowElementByIndexes(element, rowIndex);
-        row.focus();
+    // decide which function to use based on the value of direction
+    const nextTabFunc = {
+        FORWARD: getNextIndexOnTabForward,
+        BACKWARD: getNextIndexOnTabBackward,
+    };
 
-        const scrollableY = element.querySelector('.slds-scrollable_y');
-        const scrollingParent = scrollableY.parentElement;
-        const parentRect = scrollingParent.getBoundingClientRect();
-        const findMeRect = row.getBoundingClientRect();
-        if (findMeRect.top < parentRect.top + TOP_MARGIN) {
-            scrollableY.scrollTop -= SCROLL_OFFSET;
-        } else if (findMeRect.bottom > parentRect.bottom - BOTTOM_MARGIN) {
-            scrollableY.scrollTop += SCROLL_OFFSET;
-        }
-    }, 0);
-};
+    return nextTabFunc[direction](state, rowIndex, colIndex);
+}
 
-/**
- * It blur the active Row, this operation imply multiple changes
- * - blur the active row
- * - update the tabindex to -1
- * @param {node} element - the custom element root `this.template`
- * @param {object} state - datatable state
- */
-export const setBlurActiveRow = function (element, state) {
-    if (state.activeCell) {
-        const { rowIndex } = getIndexesActiveCell(state);
-        // eslint-disable-next-line @lwc/lwc/no-async-operation
-        setTimeout(() => {
-            const row = getRowElementByIndexes(element, rowIndex);
-            if (document.activeElement === row) {
-                row.blur();
-            }
-        }, 0);
-        updateTabIndexRow(state, rowIndex, -1);
-    }
-};
-/**
- * It changes the datable state based on the keyboard event sent from the cell component,
- * the result of those change may trigger re-render on the table
- * @param {node} element - the custom element root `this.template`
- * @param {object} state - datatable state
- * @param {event} event - custom DOM event sent by the cell
- * @returns {object} - mutated state
- */
-export const reactToKeyboard = function (element, state, event) {
-    switch (event.detail.keyCode) {
-        case ARROW_RIGHT:
-            return reactToArrowRight(element, state, event);
-        case ARROW_LEFT:
-            return reactToArrowLeft(element, state, event);
-        case ARROW_DOWN:
-            return reactToArrowDown(element, state, event);
-        case ARROW_UP:
-            return reactToArrowUp(element, state, event);
-        case ENTER:
-        case SPACE:
-            return reactToEnter(element, state, event);
-        case ESCAPE:
-            return reactToEscape(element, state, event);
-        case TAB:
-            return reactToTab(element, state, event);
-        default:
-            return state;
+function getNextIndexOnTabForward(state, rowIndex, colIndex) {
+    const columnsCount = state.columns.length;
+    if (columnsCount > colIndex + 1) {
+        return {
+            nextRowIndex: rowIndex,
+            nextColIndex: colIndex + 1,
+        };
     }
-};
-
-function reactToKeyboardInNavMode(element, state, event) {
-    const mockEvent = {
-        detail: {
-            rowKeyValue: state.activeCell.rowKeyValue,
-            colKeyValue: state.activeCell.colKeyValue,
-            keyCode: event.keyCode,
-            shiftKey: event.shiftKey,
-        },
-        preventDefault: () => {},
-        stopPropagation: () => {},
+    return {
+        nextRowIndex: getNextIndexDownWrapped(state, rowIndex),
+        nextColIndex: 0,
     };
+}
 
-    switch (event.keyCode) {
-        case ARROW_RIGHT:
-            event.preventDefault();
-            return reactToArrowRight(element, state, mockEvent);
-        case ARROW_LEFT:
-            event.preventDefault();
-            return reactToArrowLeft(element, state, mockEvent);
-        case ARROW_DOWN:
-            event.preventDefault();
-            return reactToArrowDown(element, state, mockEvent);
-        case ARROW_UP:
-            event.preventDefault();
-            return reactToArrowUp(element, state, mockEvent);
-        case ENTER:
-        case SPACE:
-            event.preventDefault();
-            return reactToEnter(element, state, mockEvent);
-        case ESCAPE:
-            // td, th is the active element in the action mode if cell doesnt have action elements
-            // hence this can be reached and we should react to escape as exiting from action mode
-            mockEvent.detail.keyEvent = event;
-            return reactToEscape(element, state, mockEvent);
-        case TAB:
-            // event.preventDefault();
-            return reactToTab(element, state, mockEvent);
-        default:
-            return state;
+function getNextIndexOnTabBackward(state, rowIndex, colIndex) {
+    const columnsCount = state.columns.length;
+    if (colIndex > 0) {
+        return {
+            nextRowIndex: rowIndex,
+            nextColIndex: colIndex - 1,
+        };
     }
+    return {
+        nextRowIndex: getNextIndexUpWrapped(state, rowIndex),
+        nextColIndex: columnsCount - 1,
+    };
 }
 
-export const reactToKeyboardOnRow = function (dt, state, event) {
+/**
+ * This set of keyboard actions is specific to tree-grid.
+ *
+ * When the user first tabs into the tree-grid, the user is set in row mode
+ * and the entire row is highlighted.
+ *
+ * Keyboard Interaction Model:
+ *  Arrow Up: Moves focus to the row above
+ *  Arrow Down: Moves focus to the row below
+ *  Arrow Right: Expands the row to reveal nested items if any
+ *               Pressing the right arrow again will set focus on a cell
+ *               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
+ * @returns Mutated state
+ */
+export function reactToKeyboardOnRow(datatable, state, event) {
+    // TODO: Adapt this selector to also work in a role-based table once tree-grid is also migrated
     if (
         isRowNavigationMode(state) &&
         event.target.localName.indexOf('tr') !== -1
     ) {
-        const element = dt.template;
+        const element = datatable.template;
         switch (event.detail.keyCode) {
-            case ARROW_RIGHT:
-                return reactToArrowRightOnRow.call(dt, element, state, event);
             case ARROW_LEFT:
-                return reactToArrowLeftOnRow.call(dt, element, state, event);
-            case ARROW_DOWN:
-                return reactToArrowDownOnRow.call(dt, element, state, event);
+                return reactToArrowLeftOnRow.call(
+                    datatable,
+                    element,
+                    state,
+                    event
+                );
+            case ARROW_RIGHT:
+                return reactToArrowRightOnRow.call(
+                    datatable,
+                    element,
+                    state,
+                    event
+                );
             case ARROW_UP:
-                return reactToArrowUpOnRow.call(dt, element, state, event);
+                return reactToArrowUpOnRow.call(
+                    datatable,
+                    element,
+                    state,
+                    event
+                );
+            case ARROW_DOWN:
+                return reactToArrowDownOnRow.call(
+                    datatable,
+                    element,
+                    state,
+                    event
+                );
             default:
                 return state;
         }
     }
     return state;
-};
-
-function isRowNavigationMode(state) {
-    return state.keyboardMode === 'NAVIGATION' && state.rowMode === true;
 }
 
-export function setRowNavigationMode(state) {
-    if (hasTreeDataType(state) && state.keyboardMode === 'NAVIGATION') {
-        state.rowMode = true;
+function reactToArrowLeftOnRow(element, state, event) {
+    const { rowKeyValue, rowHasChildren, rowExpanded, rowLevel } = event.detail;
+    // check if row needs to be collapsed
+    // if not go to parent and focus there
+    if (rowHasChildren && rowExpanded) {
+        fireRowToggleEvent.call(this, rowKeyValue, rowExpanded);
+    } else if (rowLevel > 1) {
+        const treeColumn = getStateTreeColumn(state);
+        if (treeColumn) {
+            const colKeyValue = treeColumn.colKeyValue;
+            const { rowIndex } = getIndexesByKeys(
+                state,
+                rowKeyValue,
+                colKeyValue
+            );
+            const parentIndex = getRowParent(state, rowLevel, rowIndex);
+            if (parentIndex !== -1) {
+                const rows = state.rows;
+                setBlurActiveRow(element, state);
+                // update activeCell for the row
+                state.activeCell = {
+                    rowKeyValue: rows[parentIndex].key,
+                    colKeyValue,
+                };
+                setFocusActiveRow(element, state);
+            }
+        }
     }
 }
 
-export function unsetRowNavigationMode(state) {
-    state.rowMode = false;
+function moveFromRowToCell(element, state) {
+    setBlurActiveRow(element, state);
+    unsetRowNavigationMode(state);
+    setFocusActiveCell(element, state, NAVIGATION_DIR.USE_CURRENT);
 }
 
-export function canBeRowNavigationMode(state) {
-    return hasTreeDataType(state) && state.keyboardMode === 'NAVIGATION';
+function reactToArrowRightOnRow(element, state, event) {
+    const { rowKeyValue, rowHasChildren, rowExpanded } = event.detail;
+    // check if row needs to be expanded
+    // expand row if has children and is collapsed
+    // otherwise make this.state.rowMode = false
+    // move tabindex 0 to first cell in the row and focus there
+    if (rowHasChildren && !rowExpanded) {
+        fireRowToggleEvent.call(this, rowKeyValue, rowExpanded);
+    } else {
+        moveFromRowToCell(element, state);
+    }
 }
 
-function isHeaderRow(rowIndex) {
-    return rowIndex === -1;
-}
+function reactToArrowUpOnRow(element, state, event) {
+    // move tabindex 0 one row down
+    const { rowKeyValue, keyEvent } = event.detail;
+    const treeColumn = getStateTreeColumn(state);
 
-export function getCellElementByIndexes(element, rowIndex, colIndex) {
-    if (isHeaderRow(rowIndex)) {
-        return element.querySelector(
-            `thead > :nth-child(1) >
-                :nth-child(${colIndex + 1}) > :first-child`
-        );
-    }
+    keyEvent.stopPropagation();
+    keyEvent.preventDefault();
 
-    return element.querySelector(
-        `tbody > :nth-child(${rowIndex + 1}) >
-            :nth-child(${colIndex + 1}) > :first-child`
-    );
+    if (treeColumn) {
+        const colKeyValue = treeColumn.colKeyValue;
+        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
+            state.activeCell = {
+                rowKeyValue: rows[prevRowIndex].key,
+                colKeyValue,
+            };
+            setFocusActiveRow(element, state);
+        }
+    }
 }
 
-function getRowElementByIndexes(element, rowIndex) {
-    if (isHeaderRow(rowIndex)) {
-        return element.querySelector(`thead > tr:nth-child(1)`);
+function reactToArrowDownOnRow(element, state, event) {
+    // move tabindex 0 one row down
+    const { rowKeyValue, keyEvent } = event.detail;
+    const treeColumn = getStateTreeColumn(state);
+
+    keyEvent.stopPropagation();
+    keyEvent.preventDefault();
+
+    if (treeColumn) {
+        const colKeyValue = treeColumn.colKeyValue;
+        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
+            state.activeCell = {
+                rowKeyValue: rows[nextRowIndex].key,
+                colKeyValue,
+            };
+            setFocusActiveRow(element, state);
+        }
     }
-    return element.querySelector(`tbody > tr:nth-child(${rowIndex + 1})`);
 }
 
-function reactToEnter(element, state, event) {
-    if (state.keyboardMode === 'NAVIGATION') {
-        state.keyboardMode = 'ACTION';
-        const { rowIndex, colIndex } = getIndexesActiveCell(state);
+/***************************** ACTIVE CELL *****************************/
 
-        const actionsMap = {};
-        actionsMap[SPACE] = 'space';
-        actionsMap[ENTER] = 'enter';
+function getDefaultActiveCell(state) {
+    const { columns, rows } = state;
+    if (columns.length > 0) {
+        let colIndex;
+        const existCustomerColumn = columns.some((column, index) => {
+            colIndex = index;
+            return isCustomerColumn(column);
+        });
 
-        if (event.detail.keyEvent) {
-            event.detail.keyEvent.preventDefault();
+        if (!existCustomerColumn) {
+            colIndex = 0;
         }
-        setModeActiveCell(element, state, {
-            action: actionsMap[event.detail.keyCode],
-        });
-        updateTabIndex(state, rowIndex, colIndex, -1);
+
+        return {
+            rowKeyValue: rows.length > 0 ? rows[0].key : HEADER_ROW,
+            colKeyValue: generateColKeyValue(columns[colIndex], colIndex),
+        };
     }
+
+    return undefined;
 }
 
-function reactToEscape(element, state, event) {
-    if (state.keyboardMode === 'ACTION') {
-        // When the table is in action mode this event shouldn't bubble
-        // because if the table in inside a modal it should prevent the model closes
-        event.detail.keyEvent.stopPropagation();
-        state.keyboardMode = 'NAVIGATION';
-        setModeActiveCell(element, state);
-        setFocusActiveCell(element, state, NAVIGATION_DIR.RESET);
-    }
+function setDefaultActiveCell(state) {
+    state.activeCell = getDefaultActiveCell(state);
 }
 
 /**
- * Retrieve the next tab index values for row & column
- * @param {object} state - datatable state
- * @param {string} direction - 'FORWARD' or 'BACKWARD'
- * @returns {object} - nextRowIndex, nextColIndex values, isExitCell boolean
+ * Given a datatable template and state, returns an LWC component reference that represents
+ * the currently active cell in the table.
+ *
+ * @param {Object} element - A reference to the datatable's template
+ * @param {Object} state - A reference to the datatable's state
  */
-function getNextTabIndex(state, direction) {
+export function getActiveCellElement(element, state) {
     const { rowIndex, colIndex } = getIndexesActiveCell(state);
+    return getCellElementByIndexes(element, rowIndex, colIndex, state);
+}
 
-    // decide which function to use based on the value of direction
-    const nextTabFunc = {
-        FORWARD: getNextTabIndexForward,
-        BACKWARD: getNextTabIndexBackward,
+/**
+ * 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.
+ */
+export function isActiveCell(state, rowKeyValue, colKeyValue) {
+    if (state.activeCell) {
+        const {
+            rowKeyValue: currentRowKeyValue,
+            colKeyValue: currentColKeyValue,
+        } = state.activeCell;
+        return (
+            currentRowKeyValue === rowKeyValue &&
+            currentColKeyValue === 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
+ */
+export function syncActiveCell(state) {
+    if (!state.activeCell || !stillValidActiveCell(state)) {
+        if (state.activeCell && state.cellToFocusNext) {
+            // there is previously focused cell
+            setNextActiveCellFromPrev(state);
+        } else {
+            // there is no active cell or there is no previously focused cell
+            setDefaultActiveCell(state);
+        }
+    }
+    return state;
+}
+
+/**
+ * Sets the next active if there is a previously focused active cell
+ * Logic is:
+ * if the rowIndex is existing one - cell = (rowIndex, 0)
+ * if the rowIndex is > the number of rows (focused was last row or more) = (lastRow, lastColumn)
+ * for columns
+ * same as above except if the colIndex is > the number of cols (means no data) = set it to null??
+ * @param {object} state - datatable state
+ */
+function setNextActiveCellFromPrev(state) {
+    const { rowIndex, colIndex } = state.cellToFocusNext;
+    let nextRowIndex = rowIndex;
+    let nextColIndex = colIndex;
+    const rowsCount = state.rows ? state.rows.length : 0;
+    const colsCount = state.columns.length ? state.columns.length : 0;
 
-    return nextTabFunc[direction](state, rowIndex, colIndex);
+    if (nextRowIndex > rowsCount - 1) {
+        // row index not existing after update to new 5 > 5-1, 6 > 5-1,
+        nextRowIndex = rowsCount - 1;
+    }
+    if (nextColIndex > colsCount - 1) {
+        // col index not existing after update to new
+        nextColIndex = colsCount - 1;
+    }
+    const nextActiveCell = getCellFromIndexes(
+        state,
+        nextRowIndex,
+        nextColIndex
+    );
+    if (nextActiveCell) {
+        state.activeCell = nextActiveCell;
+    } else {
+        setDefaultActiveCell(state);
+    }
+    state.keyboardMode = NAVIGATION_MODE;
 }
 
 /**
@@ -660,7 +755,7 @@ function getNextTabIndex(state, direction) {
 export function isActiveCellAnExitCell(state, direction) {
     // get next tab index values
     const { rowIndex, colIndex } = getIndexesActiveCell(state);
-    const { nextRowIndex, nextColIndex } = getNextTabIndex(state, direction);
+    const { nextRowIndex, nextColIndex } = getNextIndexOnTab(state, direction);
     // is it an exit cell?
     if (
         // if first cell and moving backward
@@ -677,41 +772,11 @@ export function isActiveCellAnExitCell(state, direction) {
     return false;
 }
 
-function reactToTab(element, state, event) {
-    event.preventDefault();
-    event.stopPropagation();
-
-    const { shiftKey } = event.detail;
-    const direction = getTabDirection(shiftKey);
-    const isExitCell = isActiveCellAnExitCell(state, direction);
-
-    // if in ACTION mode
-    if (state.keyboardMode === 'ACTION') {
-        // 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();
-            }
-            // tab in proper direction based on shift key press
-            if (direction === 'BACKWARD') {
-                reactToTabBackward(element, state);
-            } else {
-                reactToTabForward(element, state);
-            }
-        } else {
-            // exit ACTION mode
-            state.keyboardMode = 'NAVIGATION';
-            setModeActiveCell(element, state);
-            state.isExiting = true;
-        }
-    } else {
-        state.isExiting = true;
-    }
-}
-
-function getTabDirection(shiftKey) {
-    return shiftKey ? 'BACKWARD' : 'FORWARD';
+export function getIndexesActiveCell(state) {
+    const {
+        activeCell: { rowKeyValue, colKeyValue },
+    } = state;
+    return getIndexesByKeys(state, rowKeyValue, colKeyValue);
 }
 
 function setModeActiveCell(element, state, info) {
@@ -721,260 +786,440 @@ function setModeActiveCell(element, state, info) {
     }
 }
 
-/**
- * Given a datatable template and state, returns an LWC component reference that represents
- * the currently active cell in the table.
- *
- * @param {Object} element - A reference to the datatable's template
- * @param {Object} state - A reference to the datatable's state
- */
-export function getActiveCellElement(element, state) {
-    const { rowIndex, colIndex } = getIndexesActiveCell(state);
-    return getCellElementByIndexes(element, rowIndex, colIndex);
-}
-
-export function getIndexesActiveCell(state) {
+function stillValidActiveCell(state) {
     const {
         activeCell: { rowKeyValue, colKeyValue },
     } = state;
-    return getIndexesByKeys(state, rowKeyValue, colKeyValue);
+    if (rowKeyValue === HEADER_ROW) {
+        return state.headerIndexes[colKeyValue] !== undefined;
+    }
+    return !!(
+        state.indexes[rowKeyValue] && state.indexes[rowKeyValue][colKeyValue]
+    );
 }
 
-function reactToArrowRight(element, state, event) {
-    const { rowKeyValue, colKeyValue } = event.detail;
-    const { colIndex } = getIndexesByKeys(state, rowKeyValue, colKeyValue);
-    const nextColIndex = getNextIndexRight(state, colIndex);
-    const { columns } = state;
-
-    if (nextColIndex === undefined) {
-        return;
-    }
+/***************************** FOCUS MANAGEMENT *****************************/
 
-    setBlurActiveCell(element, state);
-    // update activeCell
-    state.activeCell = {
-        rowKeyValue,
-        colKeyValue: generateColKeyValue(columns[nextColIndex], nextColIndex),
-    };
-    setFocusActiveCell(element, state, NAVIGATION_DIR.RIGHT);
-}
+/**
+ * It set the focus to the current activeCell, this operation imply multiple changes
+ * - update the tabindex of the activeCell
+ * - set the current keyboard mode
+ * - set the focus to the cell
+ * @param {node} element - 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.
+ */
+export function setFocusActiveCell(element, state, direction, info) {
+    const { keyboardMode } = state;
+    const { rowIndex, colIndex } = getIndexesActiveCell(state);
 
-function reactToArrowLeft(element, state, event) {
-    const { rowKeyValue, colKeyValue } = event.detail;
-    const { colIndex } = getIndexesByKeys(state, rowKeyValue, colKeyValue);
-    if (colIndex === 0 && canBeRowNavigationMode(state)) {
-        moveFromCellToRow(element, state);
-    } else {
-        const nextColIndex = getNextIndexLeft(state, colIndex);
+    updateTabIndex(state, rowIndex, colIndex);
+    return new Promise((resolve) => {
+        // eslint-disable-next-line @lwc/lwc/no-async-operation
+        setTimeout(() => {
+            const cellElement = getCellElementByIndexes(
+                element,
+                rowIndex,
+                colIndex,
+                state
+            );
+            if (cellElement) {
+                if (direction) {
+                    cellElement.resetCurrentInputIndex(direction, keyboardMode);
+                }
+                cellElement.addFocusStyles();
+                cellElement.parentElement.classList.add(FOCUS_CLASS);
+                cellElement.parentElement.focus();
+                cellElement.setMode(keyboardMode, info);
 
-        if (nextColIndex === undefined) {
-            return;
-        }
+                const scrollableY = element.querySelector('.slds-scrollable_y');
+                const scrollingParent = scrollableY.parentElement;
+                const parentRect = scrollingParent.getBoundingClientRect();
+                const findMeRect = cellElement.getBoundingClientRect();
+                if (findMeRect.top < parentRect.top + TOP_MARGIN) {
+                    scrollableY.scrollTop -= SCROLL_OFFSET;
+                } else if (
+                    findMeRect.bottom >
+                    parentRect.bottom - BOTTOM_MARGIN
+                ) {
+                    scrollableY.scrollTop += SCROLL_OFFSET;
+                }
+            }
+            resolve();
+        }, 0);
+    });
+}
 
-        const { columns } = state;
-        setBlurActiveCell(element, state);
-        // update activeCell
-        state.activeCell = {
-            rowKeyValue,
-            colKeyValue: generateColKeyValue(
-                columns[nextColIndex],
-                nextColIndex
-            ),
-        };
-        setFocusActiveCell(element, state, NAVIGATION_DIR.LEFT);
+/**
+ * It blur to the current activeCell, this operation imply multiple changes
+ * - blur the activeCell
+ * - update the tabindex to -1
+ * @param {node} element - the custom element root `this.template`
+ * @param {object} state - datatable state
+ */
+export function setBlurActiveCell(element, state) {
+    if (state.activeCell) {
+        const { rowIndex, colIndex } = getIndexesActiveCell(state);
+        // eslint-disable-next-line @lwc/lwc/no-async-operation
+        setTimeout(() => {
+            const cellElement = getCellElementByIndexes(
+                element,
+                rowIndex,
+                colIndex,
+                state
+            );
+            // we need to check because of the tree,
+            // at this point it may remove/change the rows/keys because opening or closing a row.
+            if (cellElement) {
+                if (document.activeElement === cellElement) {
+                    cellElement.blur();
+                }
+                cellElement.removeFocusStyles(true);
+                cellElement.parentElement.classList.remove(FOCUS_CLASS);
+            }
+        }, 0);
+        updateTabIndex(state, rowIndex, colIndex, -1);
     }
 }
 
-function reactToArrowRightOnRow(element, state, event) {
-    const { rowKeyValue, rowHasChildren, rowExpanded } = event.detail;
-    // check if row needs to be expanded
-    // expand row if has children and is collapsed
-    // otherwise make this.state.rowMode = false
-    // move tabindex 0 to first cell in the row and focus there
-    if (rowHasChildren && !rowExpanded) {
-        fireRowToggleEvent.call(this, rowKeyValue, rowExpanded);
-    } else {
-        moveFromRowToCell(element, state);
+/**
+ * Sets the row and col index of cell to focus next if
+ * there is state.activecell
+ * datatable has focus
+ * 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
+ */
+export function setCellToFocusFromPrev(state, template) {
+    if (
+        state.activeCell &&
+        datatableHasFocus(state, template) &&
+        state.indexes &&
+        !state.cellToFocusNext
+    ) {
+        let { rowIndex, colIndex } = getIndexesActiveCell(state);
+        colIndex = 0; // default point to the first column
+        if (state.rows && rowIndex === state.rows.length - 1) {
+            // 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;
+        }
+        state.cellToFocusNext = {
+            rowIndex,
+            colIndex,
+        };
     }
 }
 
-function reactToArrowLeftOnRow(element, state, event) {
-    const { rowKeyValue, rowHasChildren, rowExpanded, rowLevel } = event.detail;
-    // check if row needs to be collapsed
-    // if not go to parent and focus there
-    if (rowHasChildren && rowExpanded) {
-        fireRowToggleEvent.call(this, rowKeyValue, rowExpanded);
-    } else if (rowLevel > 1) {
-        const treeColumn = getStateTreeColumn(state);
-        if (treeColumn) {
-            const colKeyValue = treeColumn.colKeyValue;
-            const { rowIndex } = getIndexesByKeys(
-                state,
-                rowKeyValue,
-                colKeyValue
-            );
-            const parentIndex = getRowParent(state, rowLevel, rowIndex);
-            if (parentIndex !== -1) {
-                const rows = state.rows;
-                setBlurActiveRow(element, state);
-                // update activeCell for the row
-                state.activeCell = {
-                    rowKeyValue: rows[parentIndex].key,
-                    colKeyValue,
-                };
-                setFocusActiveRow(element, state);
-            }
-        }
+/**
+ * if the current new active still is valid (exists) then set the celltofocusnext to null
+ * @param {object} state - datatable state
+ */
+export function updateCellToFocusFromPrev(state) {
+    if (
+        state.activeCell &&
+        state.cellToFocusNext &&
+        stillValidActiveCell(state)
+    ) {
+        // if the previous focus is there and valid,  don't set the prevActiveFocusedCell
+        state.cellToFocusNext = null;
     }
 }
 
-function reactToArrowDownOnRow(element, state, event) {
-    // move tabindex 0 one row down
-    const { rowKeyValue } = event.detail;
-    const treeColumn = getStateTreeColumn(state);
+/**
+ * reset celltofocusnext to null (used after render)
+ * @param {object} state - datatable state
+ */
+export function resetCellToFocusFromPrev(state) {
+    state.cellToFocusNext = null;
+}
 
-    event.detail.keyEvent.stopPropagation();
-    event.detail.keyEvent.preventDefault();
+/**
+ * It adds and the focus classes to the th/td or div[role=gridcell/rowheader].
+ *
+ * @param {node} element - the custom element template `this.template`
+ * @param {object} state - datatable state
+ */
+export function addFocusStylesToActiveCell(element, state) {
+    const { rowIndex, colIndex } = getIndexesActiveCell(state);
 
-    if (treeColumn) {
-        const colKeyValue = treeColumn.colKeyValue;
-        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
-            state.activeCell = {
-                rowKeyValue: rows[nextRowIndex].key,
-                colKeyValue,
-            };
-            setFocusActiveRow(element, state);
-        }
+    const cellElement = getCellElementByIndexes(
+        element,
+        rowIndex,
+        colIndex,
+        state
+    );
+
+    if (cellElement) {
+        cellElement.parentElement.classList.add(FOCUS_CLASS);
     }
 }
 
-function reactToArrowUpOnRow(element, state, event) {
-    // move tabindex 0 one row down
-    // move tabindex 0 one row down
-    const { rowKeyValue } = event.detail;
-    const treeColumn = getStateTreeColumn(state);
+/**
+ * It set the focus to the current activeCell, this operation imply multiple changes
+ * - update the tabindex of the activeCell
+ * - set the current keyboard mode
+ * - set the focus to the cell
+ * @param {node} element - the custom element root `this.template`
+ * @param {object} state - datatable state
+ */
+function setFocusActiveRow(element, state) {
+    const { rowIndex } = getIndexesActiveCell(state);
 
-    event.detail.keyEvent.stopPropagation();
-    event.detail.keyEvent.preventDefault();
+    updateTabIndexRow(state, rowIndex);
+    // eslint-disable-next-line @lwc/lwc/no-async-operation
+    setTimeout(() => {
+        const row = getRowElementByIndexes(element, rowIndex, state);
+        row.focus();
 
-    if (treeColumn) {
-        const colKeyValue = treeColumn.colKeyValue;
-        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
-            state.activeCell = {
-                rowKeyValue: rows[prevRowIndex].key,
-                colKeyValue,
-            };
-            setFocusActiveRow(element, state);
+        const scrollableY = element.querySelector('.slds-scrollable_y');
+        const scrollingParent = scrollableY.parentElement;
+        const parentRect = scrollingParent.getBoundingClientRect();
+        const findMeRect = row.getBoundingClientRect();
+        if (findMeRect.top < parentRect.top + TOP_MARGIN) {
+            scrollableY.scrollTop -= SCROLL_OFFSET;
+        } else if (findMeRect.bottom > parentRect.bottom - BOTTOM_MARGIN) {
+            scrollableY.scrollTop += SCROLL_OFFSET;
         }
+    }, 0);
+}
+
+/**
+ * It blurs the active row, this operation implies multiple changes
+ * - blur the active row
+ * - update the tabindex to -1
+ * @param {node} element - the custom element root `this.template`
+ * @param {object} state - datatable state
+ */
+function setBlurActiveRow(element, state) {
+    if (state.activeCell) {
+        const { rowIndex } = getIndexesActiveCell(state);
+        // eslint-disable-next-line @lwc/lwc/no-async-operation
+        setTimeout(() => {
+            const row = getRowElementByIndexes(element, rowIndex, state);
+            if (document.activeElement === row) {
+                row.blur();
+            }
+        }, 0);
+        updateTabIndexRow(state, rowIndex, -1);
     }
 }
 
-function moveFromCellToRow(element, state) {
-    setBlurActiveCell(element, state);
-    setRowNavigationMode(state);
-    setFocusActiveRow(element, 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]
+ */
+export function refocusCellElement(template, state, needsRefocusOnCellElement) {
+    if (needsRefocusOnCellElement) {
+        const { rowIndex, colIndex } = getIndexesActiveCell(state);
+        const cellElement = getCellElementByIndexes(
+            template,
+            rowIndex,
+            colIndex,
+            state
+        );
+        if (cellElement) {
+            cellElement.parentElement.focus();
+        }
+
+        // setTimeout so that focusin happens and then we set state.cellClicked to true
+        // eslint-disable-next-line @lwc/lwc/no-async-operation
+        setTimeout(() => {
+            setCellClickedForFocus(state);
+        }, 0);
+    } else if (!datatableHasFocus(state, template)) {
+        setCellClickedForFocus(state);
+    }
 }
 
-function moveFromRowToCell(element, state) {
-    setBlurActiveRow(element, state);
-    unsetRowNavigationMode(state);
-    setFocusActiveCell(element, state, NAVIGATION_DIR.USE_CURRENT);
+export function datatableHasFocus(state, template) {
+    return isFocusInside(template) || state.cellClicked;
 }
 
-export function reactToTabForward(element, state) {
-    const { nextRowIndex, nextColIndex } = getNextTabIndex(state, 'FORWARD');
-    const { columns, rows } = state;
+function isFocusInside(currentTarget) {
+    const activeElements = getShadowActiveElements();
+    return activeElements.some((element) => {
+        return currentTarget.contains(element);
+    });
+}
 
-    setBlurActiveCell(element, state);
+export function handleDatatableFocusIn(event) {
+    const { state } = this;
+    state.isExitingActionMode = false;
 
-    // update activeCell
-    state.activeCell = {
-        rowKeyValue: nextRowIndex !== -1 ? rows[nextRowIndex].key : 'HEADER',
-        colKeyValue: generateColKeyValue(columns[nextColIndex], nextColIndex),
-    };
-    setFocusActiveCell(element, state, NAVIGATION_DIR.TAB_FORWARD, {
-        action: 'tab',
-    });
+    // workaround for delegatesFocus issue that focusin is called when not supposed to W-6220418
+    if (isFocusInside(event.currentTarget)) {
+        if (!state.rowMode && state.activeCell) {
+            const { rowIndex, colIndex } = getIndexesActiveCell(state);
+            const cellElement = getCellElementByIndexes(
+                this.template,
+                rowIndex,
+                colIndex,
+                state
+            );
+            // we need to check because of the tree,
+            // at this point it may remove/change the rows/keys because opening or closing a row.
+            if (cellElement) {
+                cellElement.addFocusStyles();
+                cellElement.parentElement.classList.add(FOCUS_CLASS);
+                cellElement.tabindex = 0;
+            }
+        }
+        resetCellClickedForFocus(state);
+    }
 }
 
-export function reactToTabBackward(element, state) {
-    const { nextRowIndex, nextColIndex } = getNextTabIndex(state, 'BACKWARD');
-    const { columns, rows } = state;
+export function handleDatatableFocusOut(event) {
+    const { state } = this;
+    // workarounds for delegatesFocus issues
+    if (
+        // needed for initial focus where relatedTarget is empty
+        !event.relatedTarget ||
+        // needed when clicked outside
+        (event.relatedTarget &&
+            !event.currentTarget.contains(event.relatedTarget)) ||
+        // needed when datatable leaves focus and related target is still within datatable W-6185154
+        (event.relatedTarget &&
+            event.currentTarget.contains(event.relatedTarget) &&
+            state.isExitingActionMode)
+    ) {
+        if (state.activeCell && !state.rowMode) {
+            const { rowIndex, colIndex } = getIndexesActiveCell(state);
+            const cellElement = getCellElementByIndexes(
+                this.template,
+                rowIndex,
+                colIndex,
+                state
+            );
+            // we need to check because of the tree,
+            // at this point it may remove/change the rows/keys because opening or closing a row.
+            if (cellElement) {
+                cellElement.removeFocusStyles();
+                cellElement.parentElement.classList.remove(FOCUS_CLASS);
+            }
+        }
+    }
+}
 
-    setBlurActiveCell(element, state);
+/**
+ * This is needed to check if datatable has lost focus but cell has been clicked recently
+ * @param {object} state - datatable state
+ */
+export function setCellClickedForFocus(state) {
+    state.cellClicked = true;
+}
 
-    // update activeCell
-    state.activeCell = {
-        rowKeyValue: nextRowIndex !== -1 ? rows[nextRowIndex].key : 'HEADER',
-        colKeyValue: generateColKeyValue(columns[nextColIndex], nextColIndex),
-    };
-    setFocusActiveCell(element, state, NAVIGATION_DIR.TAB_BACKWARD, {
-        action: 'tab',
-    });
+/**
+ * Once the dt regains focus there is no need to set this
+ *  @param {object} state - datatable state
+ */
+function resetCellClickedForFocus(state) {
+    state.cellClicked = false;
 }
 
-function reactToArrowDown(element, state, event) {
-    const { rowKeyValue, colKeyValue } = event.detail;
-    const { rowIndex } = getIndexesByKeys(state, rowKeyValue, colKeyValue);
-    const nextRowIndex = getNextIndexDown(state, rowIndex);
-    const { rows } = state;
+/***************************** TABINDEX MANAGEMENT *****************************/
 
-    if (nextRowIndex === undefined) {
-        return;
+/**
+ * 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
+ *
+ * @param {object} state - datatable state
+ * @param {number} rowIndex - the row index
+ * @param {number} colIndex - the column index
+ * @param {number} [index = 0] - the value for the tabindex
+ */
+export function updateTabIndex(state, rowIndex, colIndex, index = 0) {
+    if (isHeaderRow(rowIndex)) {
+        const { columns } = state;
+        columns[colIndex].tabIndex = index;
+    } else {
+        state.rows[rowIndex].cells[colIndex].tabIndex = index;
     }
+}
 
-    if (state.hideTableHeader && nextRowIndex === -1) {
-        return;
+/**
+ * It updates the tabIndex value of a row in the state for the rowIndex passed
+ * as consequence of this change
+ * datatable is gonna re-render the row affected with the new tabindex value
+ *
+ * @param {object} state - datatable state
+ * @param {number} rowIndex - the row index
+ * @param {number} [index = 0] - the value for the tabindex
+ */
+export function updateTabIndexRow(state, rowIndex, index = 0) {
+    if (!isHeaderRow(rowIndex)) {
+        // TODO what to do when rowIndex is header row
+        state.rows[rowIndex].tabIndex = index;
+    }
+}
+/**
+ * It update the tabindex for the current activeCell.
+ * @param {object} state - datatable state
+ * @param {number} [index = 0] - the value for the tabindex
+ * @returns {object} state - mutated state
+ */
+export function updateTabIndexActiveCell(state, index = 0) {
+    if (state.activeCell && !stillValidActiveCell(state)) {
+        syncActiveCell(state);
     }
 
-    if (event.detail.keyEvent) {
-        event.detail.keyEvent.stopPropagation();
+    // we need to check again because maybe there is no active cell after sync
+    if (state.activeCell && !isRowNavigationMode(state)) {
+        const { rowIndex, colIndex } = getIndexesActiveCell(state);
+        updateTabIndex(state, rowIndex, colIndex, index);
     }
-
-    setBlurActiveCell(element, state);
-    // update activeCell
-    state.activeCell = {
-        rowKeyValue: nextRowIndex !== -1 ? rows[nextRowIndex].key : 'HEADER',
-        colKeyValue,
-    };
-    setFocusActiveCell(element, state, NAVIGATION_DIR.USE_CURRENT);
+    return state;
 }
 
-function reactToArrowUp(element, state, event) {
-    const { rowKeyValue, colKeyValue } = event.detail;
-    const { rowIndex } = getIndexesByKeys(state, rowKeyValue, colKeyValue);
-    const nextRowIndex = getNextIndexUp(state, rowIndex);
-    const { rows } = state;
-
-    if (nextRowIndex === undefined) {
-        return;
+/**
+ * It updates the tabindex for the row of the current activeCell.
+ * This happens in rowMode of NAVIGATION_MODE
+ * @param {object} state - datatable state
+ * @param {number} [index = 0] - the value for the tabindex
+ * @returns {object} state - mutated state
+ */
+export function updateTabIndexActiveRow(state, index = 0) {
+    if (state.activeCell && !stillValidActiveCell(state)) {
+        syncActiveCell(state);
     }
 
-    if (state.hideTableHeader && nextRowIndex === -1) {
-        return;
+    // 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;
+}
 
-    if (event.detail.keyEvent) {
-        event.detail.keyEvent.stopPropagation();
+/***************************** INDEX COMPUTATIONS *****************************/
+
+/**
+ * It return the indexes { rowIndex, colIndex } of a cell based of the unique cell values
+ * rowKeyValue, colKeyValue
+ * @param {object} state - datatable state
+ * @param {string} rowKeyValue - the row key value
+ * @param {string} colKeyValue - the column key value
+ * @returns {object} - {rowIndex, colIndex}
+ */
+export function getIndexesByKeys(state, rowKeyValue, colKeyValue) {
+    if (rowKeyValue === HEADER_ROW) {
+        return {
+            rowIndex: -1,
+            colIndex: state.headerIndexes[colKeyValue],
+        };
     }
 
-    setBlurActiveCell(element, state);
-    // update activeCell
-    state.activeCell = {
-        rowKeyValue: nextRowIndex !== -1 ? rows[nextRowIndex].key : 'HEADER',
-        colKeyValue,
+    return {
+        rowIndex: state.indexes[rowKeyValue][colKeyValue][0],
+        colIndex: state.indexes[rowKeyValue][colKeyValue][1],
     };
-    setFocusActiveCell(element, state, NAVIGATION_DIR.USE_CURRENT);
 }
 
 function getNextIndexUp(state, rowIndex) {
@@ -1019,215 +1264,113 @@ function getNextIndexDownWrapped(state, rowIndex) {
     return rowIndex + 1 < rowsCount ? rowIndex + 1 : -1;
 }
 
-function getNextTabIndexForward(state, rowIndex, colIndex) {
-    const columnsCount = state.columns.length;
-    if (columnsCount > colIndex + 1) {
-        return {
-            nextRowIndex: rowIndex,
-            nextColIndex: colIndex + 1,
-        };
-    }
-    return {
-        nextRowIndex: getNextIndexDownWrapped(state, rowIndex),
-        nextColIndex: 0,
-    };
-}
+/***************************** ROW NAVIGATION MODE *****************************/
 
-function getNextTabIndexBackward(state, rowIndex, colIndex) {
-    const columnsCount = state.columns.length;
-    if (colIndex > 0) {
-        return {
-            nextRowIndex: rowIndex,
-            nextColIndex: colIndex - 1,
-        };
-    }
-    return {
-        nextRowIndex: getNextIndexUpWrapped(state, rowIndex),
-        nextColIndex: columnsCount - 1,
-    };
+function canBeRowNavigationMode(state) {
+    return state.keyboardMode === NAVIGATION_MODE && hasTreeDataType(state);
 }
 
-export function getRowParent(state, rowLevel, rowIndex) {
-    const parentIndex = rowIndex - 1;
-    const rows = state.rows;
-    for (let i = parentIndex; i >= 0; i--) {
-        if (rows[i].level === rowLevel - 1) {
-            return i;
-        }
-    }
-    return -1;
+function isRowNavigationMode(state) {
+    return state.keyboardMode === NAVIGATION_MODE && state.rowMode === true;
 }
 
-function stillValidActiveCell(state) {
-    const {
-        activeCell: { rowKeyValue, colKeyValue },
-    } = state;
-    if (rowKeyValue === 'HEADER') {
-        return state.headerIndexes[colKeyValue] !== undefined;
+function setRowNavigationMode(state) {
+    if (hasTreeDataType(state) && state.keyboardMode === NAVIGATION_MODE) {
+        state.rowMode = true;
     }
-    return !!(
-        state.indexes[rowKeyValue] && state.indexes[rowKeyValue][colKeyValue]
-    );
 }
 
-function setDefaultActiveCell(state) {
-    state.activeCell = getDefaultActiveCell(state);
+export function unsetRowNavigationMode(state) {
+    state.rowMode = false;
 }
 
-function getDefaultActiveCell(state) {
-    const { columns, rows } = state;
-    if (columns.length > 0) {
-        let colIndex;
-        const existCustomerColumn = columns.some((column, index) => {
-            colIndex = index;
-            return isCustomerColumn(column);
-        });
-
-        if (!existCustomerColumn) {
-            colIndex = 0;
-        }
-
-        return {
-            rowKeyValue: rows.length > 0 ? rows[0].key : 'HEADER',
-            colKeyValue: generateColKeyValue(columns[colIndex], colIndex),
-        };
+/**
+ * If new set of columns doesnt 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
+ * 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
+ */
+export function updateRowNavigationMode(hadTreeDataTypePreviously, state) {
+    if (!hasTreeDataType(state)) {
+        state.rowMode = false;
+    } else if (state.rowMode === false && !hadTreeDataTypePreviously) {
+        state.rowMode = true;
     }
+    return state;
+}
 
-    return undefined;
+/***************************** HELPER FUNCTIONS *****************************/
+
+function isCellElement(tagName, role) {
+    return (
+        SELECTORS.cell.default.includes(tagName) ||
+        SELECTORS.cell.roleBased.includes(role)
+    );
 }
 
-function getCellFromIndexes(state, rowIndex, colIndex) {
-    const { columns, rows } = state;
-    if (columns.length > 0) {
-        return {
-            rowKeyValue: rowIndex === -1 ? 'HEADER' : rows[rowIndex].key,
-            colKeyValue: generateColKeyValue(columns[colIndex], colIndex),
-        };
-    }
-    return undefined;
+function isHeaderRow(rowIndex) {
+    return rowIndex === -1;
 }
 
-export function handleCellKeydown(event) {
-    event.stopPropagation();
-    reactToKeyboard(this.template, this.state, event);
+function getHeaderRow(isRenderModeRoleBased) {
+    const selectors = SELECTORS.headerRow;
+    return isRenderModeRoleBased ? selectors.roleBased : selectors.default;
 }
 
-export function handleKeyDown(event) {
-    const targetTagName = event.target.tagName.toLowerCase();
-    // when the event came from the td is cause it has the focus.
-    if (targetTagName === 'td' || targetTagName === 'th') {
-        reactToKeyboardInNavMode(this.template, this.state, event);
-    }
+function getDataRow(rowIndex, isRenderModeRoleBased) {
+    const dataRowRowGroupSelector = isRenderModeRoleBased
+        ? SELECTORS.dataRowRowGroup.roleBased
+        : SELECTORS.dataRowRowGroup.default;
+    return `${dataRowRowGroupSelector} > :nth-child(${rowIndex + 1})`;
 }
 
-/**
- * This is needed to check if datatable has lost focus but cell has been clicked recently
- * @param {object} state - datatable state
- */
-export const setCellClickedForFocus = function (state) {
-    state.cellClicked = true;
-};
+export function getCellElementByIndexes(element, rowIndex, colIndex, state) {
+    const isRenderModeRoleBased = state.renderModeRoleBased;
+    let selector = '';
 
-/**
- * Once the dt regains focus there is no need to set this
- *  @param {object} state - datatable state
- */
-export const resetCellClickedForFocus = function (state) {
-    state.cellClicked = false;
-};
+    if (isHeaderRow(rowIndex)) {
+        selector = `${getHeaderRow(isRenderModeRoleBased)}
+                    > :nth-child(${colIndex + 1}) > :first-child`;
+        return element.querySelector(selector);
+    }
 
-/**
- * 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
- * @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
- */
-export const refocusCellElement = function (
-    template,
-    state,
-    needsRefocusOnCellElement
-) {
-    if (needsRefocusOnCellElement) {
-        const { rowIndex, colIndex } = getIndexesActiveCell(state);
-        const cellElement = getCellElementByIndexes(
-            template,
-            rowIndex,
-            colIndex
-        );
-        if (cellElement) {
-            cellElement.parentElement.focus();
-        }
+    selector = `${getDataRow(rowIndex, isRenderModeRoleBased)}
+                > :nth-child(${colIndex + 1}) > :first-child`;
+    return element.querySelector(selector);
+}
 
-        // setTimeout so that focusin happens and then we set state.cellClicked to true
-        // eslint-disable-next-line @lwc/lwc/no-async-operation
-        setTimeout(() => {
-            setCellClickedForFocus(state);
-        }, 0);
-    } else if (!datatableHasFocus(state, template)) {
-        setCellClickedForFocus(state);
+function getRowElementByIndexes(element, rowIndex, state) {
+    const isRenderModeRoleBased = state.renderModeRoleBased;
+    if (isHeaderRow(rowIndex)) {
+        return element.querySelector(getHeaderRow(isRenderModeRoleBased));
     }
-};
 
-export const handleDatatableLosedFocus = function (event) {
-    const { state } = this;
-    // workarounds for delegatesFocus issues
-    if (
-        // needed for initial focus where relatedTarget is empty
-        !event.relatedTarget ||
-        // needed when clicked outside
-        (event.relatedTarget &&
-            !event.currentTarget.contains(event.relatedTarget)) ||
-        // needed when datatable leaves focus and related target is still within datatable W-6185154
-        (event.relatedTarget &&
-            event.currentTarget.contains(event.relatedTarget) &&
-            state.isExiting)
-    ) {
-        if (state.activeCell && !state.rowMode) {
-            const { rowIndex, colIndex } = getIndexesActiveCell(state);
-            const cellElement = getCellElementByIndexes(
-                this.template,
-                rowIndex,
-                colIndex
-            );
-            // we need to check because of the tree,
-            // at this point it may remove/change the rows/keys because opening or closing a row.
-            if (cellElement) {
-                cellElement.removeFocusStyles();
-                cellElement.parentElement.classList.remove('slds-has-focus');
-            }
+    return element.querySelector(getDataRow(rowIndex, isRenderModeRoleBased));
+}
+
+export function getRowParent(state, rowLevel, rowIndex) {
+    const parentIndex = rowIndex - 1;
+    const rows = state.rows;
+    for (let i = parentIndex; i >= 0; i--) {
+        if (rows[i].level === rowLevel - 1) {
+            return i;
         }
     }
-};
-
-function isFocusInside(currentTarget) {
-    const activeElements = getShadowActiveElements();
-    return activeElements.some((element) => {
-        return currentTarget.contains(element);
-    });
+    return -1;
 }
 
-export const handleDatatableFocusIn = function (event) {
-    const { state } = this;
-    state.isExiting = false;
-
-    // workaround for delegatesFocus issue that focusin is called when not supposed to W-6220418
-    if (isFocusInside(event.currentTarget)) {
-        if (!state.rowMode && state.activeCell) {
-            const { rowIndex, colIndex } = getIndexesActiveCell(state);
-            const cellElement = getCellElementByIndexes(
-                this.template,
-                rowIndex,
-                colIndex
-            );
-            // we need to check because of the tree,
-            // at this point it may remove/change the rows/keys because opening or closing a row.
-            if (cellElement) {
-                cellElement.addFocusStyles();
-                cellElement.parentElement.classList.add('slds-has-focus');
-                cellElement.tabindex = 0;
-            }
-        }
-        resetCellClickedForFocus(state);
+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;
+}