lightning-base-components 1.21.5-alpha → 1.21.7-alpha

package/src/lightning/datatable/keyboard.js

@@ -1,12 +1,15 @@
-import { getShadowActiveElements, isRTL } from 'lightning/utilsPrivate';
-import { getCellFromIndexes, HEADER_ROW_KEY, getRowByKey } from './indexes';
 import {
-    hasTreeDataType,
-    getStateTreeColumn,
-    fireRowToggleEvent,
-} from './tree';
-import { generateColKeyValue, getStateColumnIndex } from './columns';
-import { isCellEditable } from './rows';
+    getShadowActiveElements,
+    isRTL,
+    keyCodes,
+} from 'lightning/utilsPrivate';
+import {
+    getCellByKeys,
+    getCellFromIndexes,
+    HEADER_ROW_KEY,
+    isValidCell,
+} from './indexes';
+import { fireRowToggleEvent } from './tree';
 import { findFirstVisibleIndex } from './virtualization';
 import { getColDataSelector, getRowDataSelector, getScrollerY } from './utils';
 
@@ -190,7 +193,7 @@ function reactToKeyboardInNavMode(dt, event) {
 
 function reactToArrowLeft(state, template, event) {
     const { rowKeyValue, colKeyValue } = event.detail;
-    const { colIndex } = getIndexesByKeys(state, rowKeyValue, colKeyValue);
+    const { colIndex } = getCellByKeys(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)) {
@@ -209,13 +212,11 @@ function reactToArrowLeft(state, template, event) {
         setBlurActiveCell(state, template);
         // Untracked state change.
         // Update activeCell.
-        state.activeCell = {
+        state.activeCell = getCellByKeys(
+            state,
             rowKeyValue,
-            colKeyValue: generateColKeyValue(
-                state.columns[nextColIndex],
-                nextColIndex
-            ),
-        };
+            state.columns[nextColIndex].colKeyValue
+        );
         // Tracked state change.
         setFocusActiveCell(state, template, NAVIGATION_DIR.LEFT);
     }
@@ -223,7 +224,7 @@ function reactToArrowLeft(state, template, event) {
 
 function reactToArrowRight(state, template, event) {
     const { rowKeyValue, colKeyValue } = event.detail;
-    const { colIndex } = getIndexesByKeys(state, rowKeyValue, colKeyValue);
+    const { colIndex } = getCellByKeys(state, rowKeyValue, colKeyValue);
     const nextColIndex = getNextIndexRight(state, colIndex);
     if (nextColIndex === undefined) {
         return;
@@ -231,19 +232,17 @@ function reactToArrowRight(state, template, event) {
     setBlurActiveCell(state, template);
     // Untracked state change.
     // Update activeCell.
-    state.activeCell = {
+    state.activeCell = getCellByKeys(
+        state,
         rowKeyValue,
-        colKeyValue: generateColKeyValue(
-            state.columns[nextColIndex],
-            nextColIndex
-        ),
-    };
+        state.columns[nextColIndex].colKeyValue
+    );
     setFocusActiveCell(state, template, NAVIGATION_DIR.RIGHT);
 }
 
 function reactToArrowUp(state, template, event) {
     const { rowKeyValue, colKeyValue, keyEvent } = event.detail;
-    const { rowIndex } = getIndexesByKeys(state, rowKeyValue, colKeyValue);
+    const { rowIndex } = getCellByKeys(state, rowKeyValue, colKeyValue);
     const nextRowIndex = getNextIndexUp(state, rowIndex);
     if (
         nextRowIndex === undefined ||
@@ -259,18 +258,18 @@ function reactToArrowUp(state, template, event) {
     setBlurActiveCell(state, template);
     // Untracked state change.
     // Update activeCell.
-    state.activeCell = {
-        rowKeyValue:
-            nextRowIndex === -1 ? HEADER_ROW_KEY : state.rows[nextRowIndex].key,
-        colKeyValue,
-    };
+    state.activeCell = getCellByKeys(
+        state,
+        nextRowIndex === -1 ? HEADER_ROW_KEY : state.rows[nextRowIndex].key,
+        colKeyValue
+    );
     // Tracked state change.
     setFocusActiveCell(state, template, NAVIGATION_DIR.USE_CURRENT);
 }
 
 function reactToArrowDown(state, template, event) {
     const { rowKeyValue, colKeyValue, keyEvent } = event.detail;
-    const { rowIndex } = getIndexesByKeys(state, rowKeyValue, colKeyValue);
+    const { rowIndex } = getCellByKeys(state, rowKeyValue, colKeyValue);
     const nextRowIndex = getNextIndexDown(state, rowIndex);
     if (
         nextRowIndex === undefined ||
@@ -286,11 +285,12 @@ function reactToArrowDown(state, template, event) {
     setBlurActiveCell(state, template);
     // Untracked state change.
     // Update activeCell.
-    state.activeCell = {
-        rowKeyValue:
-            nextRowIndex === -1 ? HEADER_ROW_KEY : state.rows[nextRowIndex].key,
-        colKeyValue,
-    };
+    state.activeCell = getCellByKeys(
+        state,
+        nextRowIndex === -1 ? HEADER_ROW_KEY : state.rows[nextRowIndex].key,
+        colKeyValue
+    );
+    // Tracked state change.
     setFocusActiveCell(state, template, NAVIGATION_DIR.USE_CURRENT);
 }
 
@@ -299,7 +299,7 @@ function reactToEnter(state, template, event) {
         // Untracked state change.
         state.keyboardMode = KEYBOARD_ACTION_MODE;
         const { keyCode, keyEvent } = event.detail;
-        const { rowIndex, colIndex } = getIndexesActiveCell(state);
+        const { rowIndex, colIndex } = state.activeCell;
         if (keyEvent) {
             keyEvent.preventDefault();
         }
@@ -372,14 +372,11 @@ export function reactToTabForward(state, template) {
     setBlurActiveCell(state, template);
     // Untracked state change.
     // Update activeCell.
-    state.activeCell = {
-        rowKeyValue:
-            nextRowIndex === -1 ? HEADER_ROW_KEY : state.rows[nextRowIndex].key,
-        colKeyValue: generateColKeyValue(
-            state.columns[nextColIndex],
-            nextColIndex
-        ),
-    };
+    state.activeCell = getCellByKeys(
+        state,
+        nextRowIndex === -1 ? HEADER_ROW_KEY : state.rows[nextRowIndex].key,
+        state.columns[nextColIndex].colKeyValue
+    );
     // Tracked state change.
     setFocusActiveCell(state, template, NAVIGATION_DIR.TAB_FORWARD, {
         action: 'tab',
@@ -392,14 +389,11 @@ export function reactToTabBackward(state, template) {
     setBlurActiveCell(state, template);
     // Untracked state change.
     // Update activeCell.
-    state.activeCell = {
-        rowKeyValue:
-            nextRowIndex === -1 ? HEADER_ROW_KEY : state.rows[nextRowIndex].key,
-        colKeyValue: generateColKeyValue(
-            state.columns[nextColIndex],
-            nextColIndex
-        ),
-    };
+    state.activeCell = getCellByKeys(
+        state,
+        nextRowIndex === -1 ? HEADER_ROW_KEY : state.rows[nextRowIndex].key,
+        state.columns[nextColIndex].colKeyValue
+    );
     // Tracked state change.
     setFocusActiveCell(state, template, NAVIGATION_DIR.TAB_BACKWARD, {
         action: 'tab',
@@ -417,7 +411,7 @@ function getTabDirection(shiftKey) {
  * @returns {Object} - nextRowIndex, nextColIndex values, isExitCell boolean
  */
 function getNextIndexOnTab(state, direction = 'FORWARD') {
-    const { rowIndex, colIndex } = getIndexesActiveCell(state);
+    const { rowIndex, colIndex } = state.activeCell;
     // decide which function to use based on the value of direction
     return direction === 'BACKWARD'
         ? getNextIndexOnTabBackward(state, rowIndex, colIndex)
@@ -505,24 +499,21 @@ function reactToArrowLeftOnRow(dt, state, template, event) {
     if (rowHasChildren && rowExpanded) {
         fireRowToggleEvent(dt, rowKeyValue, rowExpanded);
     } else if (rowLevel > 1) {
-        const treeColumn = getStateTreeColumn(state);
+        const { treeColumn } = state;
         if (treeColumn) {
             const { colKeyValue } = treeColumn;
-            const { rowIndex } = getIndexesByKeys(
-                state,
-                rowKeyValue,
-                colKeyValue
-            );
+            const { rowIndex } = getCellByKeys(state, rowKeyValue, colKeyValue);
             const parentIndex = getRowParentIndex(state, rowLevel, rowIndex);
             if (parentIndex !== -1) {
                 // Tracked state change.
                 setBlurActiveRow(state, template);
                 // Untracked state change.
                 // Update activeCell for the row.
-                state.activeCell = {
-                    rowKeyValue: state.rows[parentIndex].key,
-                    colKeyValue,
-                };
+                state.activeCell = getCellByKeys(
+                    state,
+                    state.rows[parentIndex].key,
+                    colKeyValue
+                );
                 // Tracked state change.
                 setFocusActiveRow(state, template);
             }
@@ -552,24 +543,25 @@ function reactToArrowRightOnRow(dt, state, template, event) {
 function reactToArrowUpOnRow(state, template, event) {
     // Move tabIndex 0 one row down.
     const { rowKeyValue, keyEvent } = event.detail;
-    const treeColumn = getStateTreeColumn(state);
+    const { treeColumn } = state;
 
     keyEvent.stopPropagation();
     keyEvent.preventDefault();
 
     if (treeColumn) {
         const { colKeyValue } = treeColumn;
-        const { rowIndex } = getIndexesByKeys(state, rowKeyValue, colKeyValue);
+        const { rowIndex } = getCellByKeys(state, rowKeyValue, colKeyValue);
         const prevRowIndex = getNextIndexUpWrapped(state, rowIndex);
         if (prevRowIndex !== -1) {
             // Tracked state change.
             setBlurActiveRow(state, template);
             // Untracked state change.
             // Update activeCell for the row.
-            state.activeCell = {
-                rowKeyValue: state.rows[prevRowIndex].key,
-                colKeyValue,
-            };
+            state.activeCell = getCellByKeys(
+                state,
+                state.rows[prevRowIndex].key,
+                colKeyValue
+            );
             // Tracked state change.
             setFocusActiveRow(state, template);
         }
@@ -579,24 +571,25 @@ function reactToArrowUpOnRow(state, template, event) {
 function reactToArrowDownOnRow(state, template, event) {
     // Move tabIndex 0 one row down.
     const { rowKeyValue, keyEvent } = event.detail;
-    const treeColumn = getStateTreeColumn(state);
+    const { treeColumn } = state;
 
     keyEvent.stopPropagation();
     keyEvent.preventDefault();
 
     if (treeColumn) {
         const { colKeyValue } = treeColumn;
-        const { rowIndex } = getIndexesByKeys(state, rowKeyValue, colKeyValue);
+        const { rowIndex } = getCellByKeys(state, rowKeyValue, colKeyValue);
         const nextRowIndex = getNextIndexDownWrapped(state, rowIndex);
         if (nextRowIndex !== -1) {
             // Tracked state change.
             setBlurActiveRow(state, template);
             // Untracked state change.
             // Update activeCell for the row.
-            state.activeCell = {
-                rowKeyValue: state.rows[nextRowIndex].key,
-                colKeyValue,
-            };
+            state.activeCell = getCellByKeys(
+                state,
+                state.rows[nextRowIndex].key,
+                colKeyValue
+            );
             // Tracked state change.
             setFocusActiveRow(state, template);
         }
@@ -622,10 +615,11 @@ function getDefaultActiveCell(state) {
             colIndex = 0;
         }
         const { rows } = state;
-        return {
-            rowKeyValue: rows.length > 0 ? rows[0].key : HEADER_ROW_KEY,
-            colKeyValue: generateColKeyValue(columns[colIndex], colIndex),
-        };
+        return getCellByKeys(
+            state,
+            rows.length > 0 ? rows[0].key : HEADER_ROW_KEY,
+            columns[colIndex].colKeyValue
+        );
     }
 
     return undefined;
@@ -645,12 +639,12 @@ function setDefaultActiveCell(state) {
 export function getActiveCellElement(template, state) {
     const { activeCell } = state;
     return activeCell
-        ? getCellElementByKeys(
+        ? getCellElement(
               template,
               activeCell.rowKeyValue,
               activeCell.colKeyValue
           )
-        : null;
+        : undefined;
 }
 
 /**
@@ -744,7 +738,7 @@ function setNextActiveCellFromPrev(state) {
  */
 export function isActiveCellAnExitCell(state, direction) {
     // get next tab index values
-    const { rowIndex, colIndex } = getIndexesActiveCell(state);
+    const { rowIndex, colIndex } = state.activeCell;
     const { nextRowIndex, nextColIndex } = getNextIndexOnTab(state, direction);
     // is it an exit cell?
     if (
@@ -762,25 +756,24 @@ export function isActiveCellAnExitCell(state, direction) {
     return false;
 }
 
-export function getIndexesActiveCell(state) {
-    const {
-        activeCell: { rowKeyValue, colKeyValue },
-    } = state;
-    return getIndexesByKeys(state, rowKeyValue, colKeyValue);
-}
-
 function setModeActiveCell(state, template, info) {
     const cellElement = getActiveCellElement(template, state);
-    if (cellElement) {
-        cellElement.setMode(state.keyboardMode, info);
+    const cellElementChild = getCellElementChild(cellElement);
+    if (cellElementChild) {
+        const { keyboardMode } = state;
+        if (typeof cellElementChild.setMode === 'function') {
+            cellElementChild.setMode(keyboardMode, info);
+        } else {
+            // Tracked state change.
+            setMode(state.activeCell, cellElementChild, keyboardMode, info);
+        }
     }
 }
 
 function stillValidActiveCell(state) {
     const { activeCell, indexes } = state;
-    const { rowKeyValue, colKeyValue } = activeCell;
-    if (rowKeyValue === HEADER_ROW_KEY) {
-        if (state.rows.length) {
+    if (activeCell) {
+        if (activeCell.rowKeyValue === HEADER_ROW_KEY && state.rows.length) {
             const { columns } = state;
             let sortable = false;
             for (let colIndex = 0; colIndex < columns.length; colIndex += 1) {
@@ -793,9 +786,383 @@ function stillValidActiveCell(state) {
                 return false;
             }
         }
-        return state.headerIndexes[colKeyValue] !== undefined;
+        const indexedCell = indexes[activeCell.cellKeyValue];
+        // reset activeCell in case the rowIndex changed
+        // changed but not the cellKeyValue
+        if (indexedCell) {
+            state.activeCell = indexedCell;
+        }
+        return indexedCell !== undefined;
+    }
+    return false;
+}
+
+/***************************** CELL ELEMENT  *****************************/
+
+export function getCellElement(template, rowKeyValue, colKeyValue) {
+    const cellElement = template.querySelector(
+        `${getRowDataSelector(rowKeyValue)} ${getColDataSelector(colKeyValue)}`
+    );
+    return cellElement || undefined;
+}
+
+export function getCellElementChild(cellElement) {
+    const firstElementChild = cellElement
+        ? cellElement.firstElementChild
+        : undefined;
+    /*const localName = firstElementChild ? firstElementChild.localName : '';
+    if (localName === 'span') {
+        // span wrapper
+        const cellDiv = firstElementChild.firstElementChild;
+        if (cellDiv && cellDiv.localName === 'div') {
+            // cell div
+            return cellDiv;
+        }
+    } else if (localName === 'div') {
+        // lightning-primitive-custom-cell
+        return firstElementChild.firstElementChild;
+    }*/
+    // lightning-primitive-cell-factory or checkbox cell span
+    return firstElementChild;
+}
+
+export function getCellElementFromEventTarget(target) {
+    const cellElement = target.closest(
+        '[role="gridcell"],[role="columnheader"],[role="rowheader"]'
+    );
+    return cellElement || undefined;
+}
+
+/***************************** PRIMITIVE CELL METHODS *****************************/
+
+function canMoveBackward(cell) {
+    return cell.currentInputIndex > 0;
+}
+
+function canMoveForward(cell) {
+    const { actionableElementsCount } = cell;
+    return (
+        actionableElementsCount > 1 &&
+        cell.currentInputIndex < actionableElementsCount - 1
+    );
+}
+
+function canMoveLeft(cell) {
+    return isRTL() ? canMoveForward(cell) : canMoveBackward(cell);
+}
+
+function canMoveRight(cell) {
+    return isRTL() ? canMoveBackward(cell) : canMoveForward(cell);
+}
+
+function fireCellKeydown(cell, cellElementChild, keyEvent) {
+    const { rowKeyValue, colKeyValue } = cell;
+    const { keyCode, shiftKey } = keyEvent;
+
+    cellElementChild.dispatchEvent(
+        new CustomEvent('privatecellkeydown', {
+            bubbles: true,
+            composed: true,
+            cancelable: true,
+            detail: {
+                rowKeyValue,
+                colKeyValue,
+                keyCode,
+                shiftKey,
+                keyEvent,
+            },
+        })
+    );
+}
+
+function fireCellFocusByClickEvent(cell, cellElementChild) {
+    const { rowKeyValue, colKeyValue } = cell;
+
+    cellElementChild.dispatchEvent(
+        new CustomEvent('privatecellfocusedbyclick', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                rowKeyValue,
+                colKeyValue,
+            },
+        })
+    );
+}
+
+export function handlePrimitiveDatatableCellClick(event) {
+    const { state } = this;
+    const cellElement = state.renderModeInline
+        ? getCellElementFromEventTarget(event.target)
+        : undefined;
+
+    if (cellElement) {
+        const cellElementChild = getCellElementChild(cellElement);
+        const cell = getCellByKeys(
+            state,
+            cellElement.parentElement.dataset.rowKeyValue,
+            cellElement.dataset.colKeyValue
+        );
+        fireCellFocusByClickEvent(cell, cellElementChild);
+    }
+}
+
+export function handlePrimitiveDatatableCellFocus(event) {
+    const { state } = this;
+    const cellElement = state.renderModeInline
+        ? getCellElementFromEventTarget(event.target)
+        : undefined;
+
+    if (cellElement) {
+        const cellElementChild = getCellElementChild(cellElement);
+        const cell = getCellByKeys(
+            this.state,
+            cellElement.parentElement.dataset.rowKeyValue,
+            cellElement.dataset.colKeyValue
+        );
+        if (cell.mode === KEYBOARD_ACTION_MODE) {
+            // Tracked state change.
+            setFocusToActionableElement(
+                cell,
+                cellElementChild,
+                cell.currentInputIndex
+            );
+        }
+    }
+}
+
+export function handlePrimitiveDatatableCellKeydown(event) {
+    const { state } = this;
+    // Don't continue if clicking on a "lightning" element
+    // Or the outer td/th element and div equivalent
+    const cellElement =
+        state.renderModeInline &&
+        !event.target.shadowRoot &&
+        !event.target.getAttribute('role')
+            ? getCellElementFromEventTarget(event.target)
+            : undefined;
+
+    if (cellElement === undefined) {
+        return;
+    }
+
+    const cellElementChild = getCellElementChild(cellElement);
+    const cell = getCellByKeys(
+        this.state,
+        cellElement.parentElement.dataset.rowKeyValue,
+        cellElement.dataset.colKeyValue
+    );
+    const { mode } = cell;
+    const { keyCode, shiftKey } = event;
+
+    // if it is in Action mode, then traverse to the next or previous
+    // focusable element.
+    // if there is no focusable element, or reach outside of the range, then move to
+    // previous or next cell.
+    if (mode === KEYBOARD_ACTION_MODE) {
+        let passThroughEvent = keyCode !== keyCodes.shift;
+        if (keyCode === keyCodes.left) {
+            if (canMoveLeft(cell)) {
+                // There are still actionable element before the current one
+                // move to the previous actionable element.
+                event.preventDefault();
+                // Tracked state changes.
+                if (isRTL()) {
+                    moveToNextActionableElement(cell, cellElementChild);
+                } else {
+                    moveToPrevActionableElement(cell, cellElementChild);
+                }
+                passThroughEvent = false;
+            }
+        } else if (keyCode === keyCodes.right) {
+            if (canMoveRight(cell)) {
+                // There are still actionable element before the current one
+                // move to the previous actionable element.
+                event.preventDefault();
+                // Tracked state changes.
+                if (isRTL()) {
+                    moveToPrevActionableElement(cell, cellElementChild);
+                } else {
+                    moveToNextActionableElement(cell, cellElementChild);
+                }
+                passThroughEvent = false;
+            }
+        } else if (keyCode === keyCodes.tab) {
+            // If in action mode, try to navigate through the element inside.
+            // Always prevent the default tab behavior so that the tab will
+            // not focus outside of the table.
+            if (shiftKey) {
+                // Moving backward.
+                if (canMoveBackward(cell)) {
+                    event.preventDefault();
+                    // Tracked state change.
+                    moveToPrevActionableElement(cell, cellElementChild);
+                    passThroughEvent = false;
+                }
+            } else {
+                // Moving forward.
+                // eslint-disable-next-line no-lonely-if
+                if (canMoveForward(cell)) {
+                    event.preventDefault();
+                    // Tracked state change.
+                    moveToNextActionableElement(cell, cellElementChild);
+                    passThroughEvent = false;
+                }
+            }
+        }
+        if (passThroughEvent) {
+            fireCellKeydown(cell, cellElementChild, event);
+        }
+    } else if (mode === KEYBOARD_NAVIGATION_MODE) {
+        // click the header, press enter, it does not go to action mode without this code.
+        if (
+            keyCode === keyCodes.left ||
+            keyCode === keyCodes.right ||
+            keyCode === keyCodes.up ||
+            keyCode === keyCodes.down ||
+            keyCode === keyCodes.enter
+        ) {
+            fireCellKeydown(cell, cellElementChild, event);
+        }
+    }
+}
+
+function getActionableElements(cellElementChild) {
+    const result = Array.from(
+        cellElementChild.querySelectorAll('[data-navigation="enable"]')
+    );
+
+    const customType = cellElementChild.querySelector(
+        'lightning-primitive-custom-cell'
+    );
+
+    if (customType) {
+        const wrapperActionableElements = customType.getActionableElements();
+        wrapperActionableElements.forEach((elem) => result.push(elem));
+    }
+    return result;
+}
+
+function moveToNextActionableElement(cell, cellElementChild) {
+    // Tracked state change.
+    setFocusToActionableElement(
+        cell,
+        cellElementChild,
+        cell.currentInputIndex + 1
+    );
+}
+
+function moveToPrevActionableElement(cell, cellElementChild) {
+    // Tracked state change.
+    setFocusToActionableElement(
+        cell,
+        cellElementChild,
+        cell.currentInputIndex - 1
+    );
+}
+
+/**
+ * method to resetCurrentInputIndex when navigating from cell-to-cell
+ * called in navigation or action mode
+ *
+ * @param {Object} cell - The tracked datatable cell
+ * @param {Object} cellElementChild - The cell element child
+ * @param {number} direction -1, 1, 2
+ * @param {string} incomingMode is the new mode, needed because a cell can be in action mode but new mode being
+ * set can be navigation mode
+ */
+function resetCurrentInputIndex(
+    cell,
+    cellElementChild,
+    direction,
+    incomingMode
+) {
+    // Tracked state changes.
+    if (direction === -1) {
+        const { length } = getActionableElements(cellElementChild);
+        cell.currentInputIndex = length ? length - 1 : 0;
+    } else if (direction === 1 || direction === 2) {
+        cell.currentInputIndex = 0;
+    }
+    // when esc is pressed on a cell to enter navigation mode, other cells are still
+    // in action mode till we call setMode above. So need to check new incoming mode too if action mode
+    // otherwise we try to focus on an inner element with delegatesFocus and tabIndex -1 and
+    // it moves focus out of table
+    if (
+        incomingMode === KEYBOARD_ACTION_MODE &&
+        cell.mode === KEYBOARD_ACTION_MODE
+    ) {
+        // Tracked state change.
+        setFocusToActionableElement(
+            cell,
+            cellElementChild,
+            cell.currentInputIndex
+        );
+    }
+}
+
+function setFocusToActionableElement(cell, cellElementChild, activeInputIndex) {
+    const actionableElements = getActionableElements(cellElementChild);
+    const { length: actionableElementsLength } = actionableElements;
+    // Tracked state changes.
+    cell.actionableElementsCount = actionableElementsLength;
+    if (actionableElementsLength) {
+        if (
+            activeInputIndex > 0 &&
+            activeInputIndex < actionableElementsLength
+        ) {
+            // try to locate to the previous active index of previous row.
+            actionableElements[activeInputIndex].focus();
+            cell.currentInputIndex = activeInputIndex;
+        } else {
+            actionableElements[0].focus();
+            cell.currentInputIndex = 0;
+        }
+    }
+    // TODO: Fire event back to the datatable, so that the activeInputIndex can be
+    // stored in the datatable level state.  So that when user use up and down arrow to
+    // navigate through the datatable in ACTION mode, we can remember the active input position
+}
+
+function setMode(cell, cellElementChild, keyboardMode, info) {
+    const normalizedInfo = info || { action: 'none' };
+    // Tracked state changes.
+    cell.mode = keyboardMode;
+    if (keyboardMode === KEYBOARD_ACTION_MODE) {
+        cell.internalTabIndex = 0;
+        // focus without changing tabIndex doesn't work W-6185168
+        // eslint-disable-next-line @lwc/lwc/no-async-operation
+        setTimeout(() => {
+            setFocusToActionableElement(
+                cell,
+                cellElementChild,
+                cell.currentInputIndex
+            );
+        }, 0);
+
+        const actionableElements = getActionableElements(cellElementChild);
+        const { length: actionableElementsLength } = actionableElements;
+
+        // check if we have an edit button first (tab should open the inline edit)
+        if (normalizedInfo.action === 'tab') {
+            for (let i = 0; i < actionableElementsLength; i += 1) {
+                const elem = actionableElements[i];
+                if (elem.getAttribute('data-action-edit')) {
+                    elem.click();
+                    break;
+                }
+            }
+        } else if (actionableElementsLength === 1) {
+            const elem = actionableElements[0];
+            const defaultActions =
+                elem.getAttribute('data-action-triggers') || '';
+            if (defaultActions.indexOf(normalizedInfo.action) !== -1) {
+                elem.click();
+            }
+        }
+    } else {
+        cell.internalTabIndex = -1;
     }
-    return !!(indexes[rowKeyValue] && indexes[rowKeyValue][colKeyValue]);
 }
 
 /***************************** FOCUS MANAGEMENT *****************************/
@@ -819,10 +1186,10 @@ export function setFocusActiveCell(
     shouldScroll = true
 ) {
     const { keyboardMode } = state;
-    const { rowIndex, colIndex } = getIndexesActiveCell(state);
+    const { rowIndex, colIndex } = state.activeCell;
     let cellElement = getActiveCellElement(template, state);
 
-    state.activeCell.focused = !(info && isActiveCellValid(state));
+    state.activeCell.hasFocus = !(info && isActiveCellValid(state));
 
     updateCellTabIndex(state, rowIndex, colIndex);
 
@@ -831,6 +1198,9 @@ export function setFocusActiveCell(
         scrollToCell(state, template, rowIndex);
     }
 
+    const rowKeyValue =
+        cellElement && cellElement.parentElement.dataset.rowKeyValue;
+
     return new Promise((resolve) => {
         // eslint-disable-next-line @lwc/lwc/no-async-operation
         setTimeout(() => {
@@ -839,24 +1209,59 @@ export function setFocusActiveCell(
                 !cellElement ||
                 !isValidCell(
                     state,
-                    cellElement.rowKeyValue,
-                    cellElement.colKeyValue
+                    rowKeyValue,
+                    cellElement.dataset.colKeyValue
                 )
             ) {
                 cellElement = getActiveCellElement(template, state);
             }
             if (cellElement) {
-                if (direction) {
-                    cellElement.resetCurrentInputIndex(direction, keyboardMode);
+                const cellElementChild = getCellElementChild(cellElement);
+                const { activeCell } = state;
+                if (cellElementChild) {
+                    if (direction) {
+                        if (
+                            typeof cellElementChild.resetCurrentInputIndex ===
+                            'function'
+                        ) {
+                            cellElementChild.resetCurrentInputIndex(
+                                direction,
+                                keyboardMode
+                            );
+                        } else {
+                            resetCurrentInputIndex(
+                                activeCell,
+                                cellElement,
+                                direction,
+                                keyboardMode
+                            );
+                        }
+                    }
+                    if (typeof cellElementChild.addFocusStyles === 'function') {
+                        cellElementChild.addFocusStyles();
+                    }
+                }
+                cellElement.classList.add(FOCUS_CLASS);
+                // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#parameters
+                cellElement.focus({ preventScroll: !shouldScroll });
+                if (cellElementChild) {
+                    if (typeof cellElementChild.setMode === 'function') {
+                        cellElementChild.setMode(keyboardMode, info);
+                    } else {
+                        setMode(
+                            activeCell,
+                            cellElementChild,
+                            keyboardMode,
+                            info
+                        );
+                    }
                 }
-                cellElement.addFocusStyles();
-                cellElement.parentElement.classList.add(FOCUS_CLASS);
-                cellElement.parentElement.focus({
-                    preventScroll: !shouldScroll,
-                });
-                cellElement.setMode(keyboardMode, info);
                 if (shouldScroll) {
-                    updateScrollTop(state, template, cellElement);
+                    // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView#parameters
+                    cellElement.scrollIntoView({
+                        block: 'nearest',
+                        inline: 'nearest',
+                    });
                 }
             }
             resolve();
@@ -872,10 +1277,13 @@ export function setFocusActiveCell(
  * @param {Node} template - The custom element root `this.template`
  */
 export function setBlurActiveCell(state, template) {
-    if (state.activeCell) {
-        const { rowIndex, colIndex } = getIndexesActiveCell(state);
-        state.activeCell.focused = false;
+    const { activeCell } = state;
+    if (activeCell) {
+        const { rowIndex, colIndex } = activeCell;
+        state.activeCell.hasFocus = false;
         let cellElement = getActiveCellElement(template, state);
+        const rowKeyValue =
+            cellElement && cellElement.parentElement.dataset.rowKeyValue;
         // eslint-disable-next-line @lwc/lwc/no-async-operation
         setTimeout(() => {
             // check cellElement; value may have changed
@@ -883,18 +1291,31 @@ export function setBlurActiveCell(state, template) {
                 !cellElement ||
                 !isValidCell(
                     state,
-                    cellElement.rowKeyValue,
-                    cellElement.colKeyValue
+                    rowKeyValue,
+                    cellElement.dataset.colKeyValue
                 )
             ) {
                 cellElement = getActiveCellElement(template, state);
             }
             if (cellElement) {
-                if (document.activeElement === cellElement) {
-                    cellElement.blur();
+                const { activeElement } = document;
+                const cellElementChild = getCellElementChild(cellElement);
+                if (cellElementChild) {
+                    if (
+                        typeof cellElementChild.removeFocusStyles === 'function'
+                    ) {
+                        if (activeElement === cellElementChild) {
+                            cellElementChild.blur();
+                        }
+                        cellElementChild.removeFocusStyles(true);
+                    } else {
+                        state.activeCell.internalTabIndex = -1;
+                        if (cellElement.contains(activeElement)) {
+                            cellElement.blur();
+                        }
+                    }
                 }
-                cellElement.removeFocusStyles(true);
-                cellElement.parentElement.classList.remove(FOCUS_CLASS);
+                cellElement.classList.remove(FOCUS_CLASS);
             }
         }, 0);
         updateCellTabIndex(state, rowIndex, colIndex, -1);
@@ -912,15 +1333,16 @@ export function setBlurActiveCell(state, template) {
  * @param {Object} template - The datatable element
  */
 export function setCellToFocusFromPrev(state, template) {
+    const { activeCell } = state;
     if (
-        state.activeCell &&
+        activeCell &&
         !state.cellToFocusNext &&
         datatableHasFocus(state, template)
     ) {
         const { length: rowCount } = state.rows;
         const lastIndex = rowCount - 1;
         const { length: colCount } = state.columns;
-        let { rowIndex, colIndex } = getIndexesActiveCell(state);
+        let { rowIndex, colIndex } = activeCell;
         colIndex = 0; // default point to the first column
         if (rowIndex === lastIndex) {
             // if it is last row, make it point to its previous row
@@ -957,10 +1379,10 @@ export function updateCellToFocusFromPrev(state) {
  * @param {Node} template - The custom element template `this.template`
  */
 export function addFocusStylesToActiveCell(state, template) {
-    state.activeCell.focused = true;
+    state.activeCell.hasFocus = true;
     const cellElement = getActiveCellElement(template, state);
     if (cellElement) {
-        cellElement.parentElement.classList.add(FOCUS_CLASS);
+        cellElement.classList.add(FOCUS_CLASS);
     }
 }
 
@@ -974,7 +1396,7 @@ export function addFocusStylesToActiveCell(state, template) {
  * @param {Node} template - the custom element root `this.template`
  */
 function setFocusActiveRow(state, template) {
-    const { rowIndex } = getIndexesActiveCell(state);
+    const { rowIndex } = state.activeCell;
     const rowElement = getActiveCellRowElement(template, state);
 
     updateRowTabIndex(state, rowIndex);
@@ -993,8 +1415,8 @@ function setFocusActiveRow(state, template) {
  * @param {Node} template - The custom element root `this.template`
  */
 function setBlurActiveRow(state, template) {
-    if (state.activeCell) {
-        const { rowIndex } = getIndexesActiveCell(state);
+    const { activeCell } = state;
+    if (activeCell) {
         // eslint-disable-next-line @lwc/lwc/no-async-operation
         setTimeout(() => {
             const rowElement = getActiveCellRowElement(template, state);
@@ -1002,7 +1424,7 @@ function setBlurActiveRow(state, template) {
                 rowElement.blur();
             }
         }, 0);
-        updateRowTabIndex(state, rowIndex, -1);
+        updateRowTabIndex(state, activeCell.rowIndex, -1);
     }
 }
 
@@ -1017,7 +1439,7 @@ export function refocusCellElement(state, template, needsRefocusOnCellElement) {
     if (needsRefocusOnCellElement) {
         const cellElement = getActiveCellElement(template, state);
         if (cellElement) {
-            cellElement.parentElement.focus();
+            cellElement.focus();
         }
 
         // setTimeout so that focusin happens and then we set state.cellClicked to true
@@ -1053,14 +1475,19 @@ export function handleDatatableFocusIn(event) {
     // workaround for delegatesFocus issue that focusin is called when not supposed to W-6220418
     if (isFocusInside(event.currentTarget)) {
         if (state.activeCell && !state.rowMode) {
-            state.activeCell.focused = true;
+            state.activeCell.hasFocus = true;
             const cellElement = getActiveCellElement(this.template, state);
             // we need to check because of the tree,
             // at this point it may remove/change the rows/keys because opening or closing a row.
             if (cellElement) {
-                cellElement.addFocusStyles();
-                cellElement.parentElement.classList.add(FOCUS_CLASS);
-                cellElement.tabindex = 0;
+                const cellElementChild = getCellElementChild(cellElement);
+                if (cellElementChild) {
+                    if (typeof cellElementChild.addFocusStyles === 'function') {
+                        cellElementChild.addFocusStyles();
+                    }
+                    cellElement.tabIndex = 0;
+                }
+                cellElement.classList.add(FOCUS_CLASS);
             }
         }
         resetCellClickedForFocus(state);
@@ -1086,8 +1513,14 @@ export function handleDatatableFocusOut(event) {
             // 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);
+                const cellElementChild = getCellElementChild(cellElement);
+                if (
+                    cellElementChild &&
+                    typeof cellElementChild.removeFocusStyles === 'function'
+                ) {
+                    cellElementChild.removeFocusStyles();
+                }
+                cellElement.classList.remove(FOCUS_CLASS);
             }
         }
     }
@@ -1136,7 +1569,7 @@ export function updateCellTabIndex(state, rowIndex, colIndex, tabIndex = 0) {
  *
  * @param {Object} state - The datatable state
  * @param {number} rowIndex - the row index
- * @param {number} [index = 0] - the value for the tabindex
+ * @param {number} [tabIndex = 0] - the value for the tabindex
  */
 export function updateRowTabIndex(state, rowIndex, tabIndex = 0) {
     if (!isHeaderRow(rowIndex)) {
@@ -1179,28 +1612,6 @@ export function updateTabIndexActiveRow(state, index = 0) {
 
 /***************************** 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_KEY) {
-        return {
-            rowIndex: -1,
-            colIndex: state.headerIndexes[colKeyValue],
-        };
-    }
-
-    return {
-        rowIndex: state.indexes[rowKeyValue][colKeyValue][0],
-        colIndex: state.indexes[rowKeyValue][colKeyValue][1],
-    };
-}
-
 function getNextIndexUp(state, rowIndex) {
     return rowIndex === -1 ? undefined : rowIndex - 1;
 }
@@ -1243,10 +1654,7 @@ function getNextIndexDownWrapped(state, rowIndex) {
 /***************************** ROW NAVIGATION MODE *****************************/
 
 function canBeRowNavigationMode(state) {
-    return (
-        state.keyboardMode === KEYBOARD_NAVIGATION_MODE &&
-        hasTreeDataType(state)
-    );
+    return state.keyboardMode === KEYBOARD_NAVIGATION_MODE && state.treeColumn;
 }
 
 function isRowNavigationMode(state) {
@@ -1257,10 +1665,7 @@ function isRowNavigationMode(state) {
 }
 
 function setRowNavigationMode(state) {
-    if (
-        hasTreeDataType(state) &&
-        state.keyboardMode === KEYBOARD_NAVIGATION_MODE
-    ) {
+    if (state.treeColumn && state.keyboardMode === KEYBOARD_NAVIGATION_MODE) {
         state.rowMode = true;
     }
 }
@@ -1276,13 +1681,12 @@ export function unsetRowNavigationMode(state) {
  * Earlier it didn't have tree data, set rowMode to true to start
  * if rowMode is false and earlier it has tree data, keep it false
  * if rowMode is true and it has tree data, keep it true
- * @param {Boolean} hadTreeDataTypePreviously - state object
  * @param {Object} state - The state object
  */
-export function updateRowNavigationMode(hadTreeDataTypePreviously, state) {
-    if (!hasTreeDataType(state)) {
+export function updateRowNavigationMode(state) {
+    if (!state.treeColumn) {
         state.rowMode = false;
-    } else if (state.rowMode === false && !hadTreeDataTypePreviously) {
+    } else if (state.rowMode === false && !state.hadTreeDataTypePreviously) {
         state.rowMode = true;
     }
 }
@@ -1300,13 +1704,6 @@ function isHeaderRow(rowIndex) {
     return rowIndex === -1;
 }
 
-function getCellElementByKeys(template, rowKeyValue, colKeyValue) {
-    const selector = `${getRowDataSelector(rowKeyValue)} ${getColDataSelector(
-        colKeyValue
-    )} > :first-child`;
-    return template.querySelector(selector);
-}
-
 function getActiveCellRowElement(template, state) {
     let result;
     const { activeCell } = state;
@@ -1315,7 +1712,7 @@ function getActiveCellRowElement(template, state) {
             getRowDataSelector(activeCell.rowKeyValue)
         );
     }
-    return result || null;
+    return result || undefined;
 }
 
 export function getRowParentIndex(state, rowLevel, rowIndex) {
@@ -1358,21 +1755,8 @@ function scrollToCell(state, template, rowIndex) {
 }
 
 export function isActiveCellEditable(state) {
-    if (state.activeCell) {
-        const { rowIndex, colIndex } = getIndexesActiveCell(state);
-        return isCellEditable(state.rows[rowIndex], state.columns[colIndex]);
-    }
-    return false;
-}
-
-export function isValidCell(state, rowKeyValue, colKeyValue) {
-    if (rowKeyValue === HEADER_ROW_KEY) {
-        return state.headerIndexes[colKeyValue] !== undefined;
-    }
-    const row = getRowByKey(state, rowKeyValue);
-    const colIndex = getStateColumnIndex(state, colKeyValue);
-
-    return row && row.cells[colIndex];
+    const { activeCell } = state;
+    return activeCell ? activeCell.editable : false;
 }
 
 function isActiveCellValid(state) {
@@ -1388,16 +1772,20 @@ function isActiveCellValid(state) {
 }
 
 export function updateActiveCellTabIndexAfterSync(state, tabIndex = 0) {
-    if (state.activeCell && !isRowNavigationMode(state)) {
-        const { rowIndex, colIndex } = getIndexesActiveCell(state);
-        updateCellTabIndex(state, rowIndex, colIndex, tabIndex);
+    const { activeCell } = state;
+    if (activeCell && !isRowNavigationMode(state)) {
+        updateCellTabIndex(
+            state,
+            activeCell.rowIndex,
+            activeCell.colIndex,
+            tabIndex
+        );
     }
 }
 
 export function updateActiveRowTabIndexAfterSync(state, tabIndex = 0) {
     const { activeCell } = state;
     if (activeCell && isRowNavigationMode(state)) {
-        const { rowIndex } = getIndexesActiveCell(state);
-        updateRowTabIndex(state, rowIndex, tabIndex);
+        updateRowTabIndex(state, activeCell.rowIndex, tabIndex);
     }
 }