lightning-base-components 1.14.3-alpha → 1.15.1-alpha

package/src/lightning/datatable/inlineEdit.js

@@ -8,14 +8,16 @@ import {
     reactToTabBackward,
     reactToTabForward,
     getActiveCellElement,
-    getCellElementByIndexes,
     updateActiveCell,
+    isActiveCellEditable,
+    isValidCell,
 } from './keyboard';
 import {
     updateRowsAndCellIndexes,
     getRowByKey,
     getKeyField,
     getUserRowByCellKeys,
+    isCellEditable,
 } from './rows';
 import {
     getColumnIndexByColumnKey,
@@ -315,6 +317,11 @@ function openInlineEdit(dt, target) {
 
     const { rowKeyValue, colKeyValue } = target;
 
+    // ensure that focus remains on inline edit panel instead of active cell
+    if (state.activeCell) {
+        state.activeCell.focused = false;
+    }
+
     inlineEdit.isPanelVisible = true;
     inlineEdit.rowKeyValue = rowKeyValue;
     inlineEdit.colKeyValue = colKeyValue;
@@ -378,11 +385,7 @@ function openInlineEdit(dt, target) {
 export function openInlineEditOnActiveCell(dt) {
     const hasData = dt.state.data && dt.state.data.length > 0;
     if (hasData) {
-        const activeCellElement = getActiveCellElement(dt.template, dt.state);
-        const isEditable = activeCellElement.editable;
-        if (isEditable) {
-            setFocusAndOpenInlineEdit(dt, activeCellElement);
-        } else {
+        if (!isActiveCellEditable(dt.state)) {
             const firstEditableCell = getFirstEditableCell(dt);
             if (firstEditableCell) {
                 updateActiveCell(
@@ -390,8 +393,10 @@ export function openInlineEditOnActiveCell(dt) {
                     firstEditableCell.rowKeyValue,
                     firstEditableCell.colKeyValue
                 );
-                setFocusAndOpenInlineEdit(dt, firstEditableCell);
+                setFocusAndOpenInlineEdit(dt, dt.state.activeCell);
             }
+        } else {
+            setFocusAndOpenInlineEdit(dt, dt.state.activeCell);
         }
     }
 }
@@ -400,11 +405,11 @@ export function openInlineEditOnActiveCell(dt) {
  * Async function to await setting focus on an editable cell before opening inline-edit panel
  *
  * @param {Object} dt - The datatable instance
- * @param {Object} cell - editable cell to be focused before open inline-edit panel
  */
 // eslint-disable-next-line @lwc/lwc/no-async-await
-async function setFocusAndOpenInlineEdit(dt, cell) {
+async function setFocusAndOpenInlineEdit(dt) {
     await setFocusActiveCell(dt.template, dt.state, 0);
+    const cell = getActiveCellElement(dt.template, dt.state);
     openInlineEdit(dt, cell);
 }
 
@@ -716,8 +721,8 @@ function resolveNestedTypeAttributesHelper(rowData, typeAttributesValue) {
 /************************** HELPER FUNCTIONS **************************/
 
 /**
- * Returns a reference to the first editable cell in the table. If no editable cells exist in the table
- * then undefined is returned.
+ * Returns the row and column keys of the first editable cell in the table.
+ * If no editable cells exist in the table then undefined is returned.
  *
  * @param {Object} dt - The datatable instance. Must be a truthy and valid datatable reference.
  */
@@ -732,18 +737,11 @@ function getFirstEditableCell(dt) {
                 // Loop through the editable columns in order and examine the corresponding cells
                 // in the current row for editability, returning the first such cell that is editable
                 const editableColumn = editableColumns[i];
-                const editableColumnIndex = getStateColumnIndex(
-                    dt.state,
-                    editableColumn.colKeyValue
-                );
-                const cell = getCellElementByIndexes(
-                    dt.template,
-                    rowIndex,
-                    editableColumnIndex,
-                    dt.state
-                );
-                if (cell.editable) {
-                    return cell;
+                if (isCellEditable(rows[rowIndex], editableColumn)) {
+                    return {
+                        rowKeyValue: rows[rowIndex].key,
+                        colKeyValue: editableColumn.colKeyValue,
+                    };
                 }
             }
         }
@@ -768,13 +766,6 @@ function getCellValue(state, rowKeyValue, colKeyValue) {
     return row.cells[colIndex].value;
 }
 
-function isValidCell(state, rowKeyValue, colKeyValue) {
-    const row = getRowByKey(state, rowKeyValue);
-    const colIndex = getStateColumnIndex(state, colKeyValue);
-
-    return row && row.cells[colIndex];
-}
-
 /**
  * Sets `aria-selected` to true on cells whose rows are selected
  * and are in the same column as the cell being currently edited

package/src/lightning/datatable/keyboard.js

@@ -1,16 +1,22 @@
-import { isCustomerColumn, generateColKeyValue } from './columns';
+import {
+    isCustomerColumn,
+    generateColKeyValue,
+    getStateColumnIndex,
+} from './columns';
 import {
     hasTreeDataType,
     getStateTreeColumn,
     fireRowToggleEvent,
 } from './tree';
+import { isCellEditable, getRowByKey } from './rows';
 import { isRTL, getShadowActiveElements } from 'lightning/utilsPrivate';
+import { findFirstVisibleIndex } from './virtualization';
 
 // Indicator/flag for a header row
 const HEADER_ROW = 'HEADER';
 
 // SLDS Class for Focus
-const FOCUS_CLASS = 'slds-has-focus';
+export const FOCUS_CLASS = 'slds-has-focus';
 
 // Keyboard Navigation Modes
 const NAVIGATION_MODE = 'NAVIGATION';
@@ -82,7 +88,7 @@ const SELECTORS = {
  * 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
+ * @param {Event} event Custom DOM event (privatecellkeydown) sent by the cell
  */
 export function handleKeydownOnCell(event) {
     event.stopPropagation();
@@ -104,7 +110,7 @@ export function handleKeydownOnCell(event) {
  * Those events are handled by `handleKeydownOnCell()` and the remaining are
  * handled by this function.
  *
- * @param {*} event
+ * @param {Event} event
  */
 export function handleKeydownOnTable(event) {
     const targetTagName = event.target.tagName.toLowerCase();
@@ -121,28 +127,28 @@ export function handleKeydownOnTable(event) {
  * Changes the datatable state based on the keyboard event sent from the cell component.
  * The result of those changes may trigger a re-render on the table
  *
- * @param {node} 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
+ * @param {Node} template 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
  */
-function reactToKeyboardInActionMode(element, state, event) {
+function reactToKeyboardInActionMode(template, state, event) {
     switch (event.detail.keyCode) {
         case ARROW_LEFT:
-            return reactToArrowLeft(element, state, event);
+            return reactToArrowLeft(template, state, event);
         case ARROW_RIGHT:
-            return reactToArrowRight(element, state, event);
+            return reactToArrowRight(template, state, event);
         case ARROW_UP:
-            return reactToArrowUp(element, state, event);
+            return reactToArrowUp(template, state, event);
         case ARROW_DOWN:
-            return reactToArrowDown(element, state, event);
+            return reactToArrowDown(template, state, event);
         case ENTER:
         case SPACE:
-            return reactToEnter(element, state, event);
+            return reactToEnter(template, state, event);
         case ESCAPE:
-            return reactToEscape(element, state, event);
+            return reactToEscape(template, state, event);
         case TAB:
-            return reactToTab(element, state, event);
+            return reactToTab(template, state, event);
         default:
             return state;
     }
@@ -642,12 +648,15 @@ function setDefaultActiveCell(state) {
  * Given a datatable template and state, returns an LWC component reference that represents
  * the currently active cell in the table.
  *
- * @param {Object} element - A reference to the datatable's template
+ * @param {Object} template - 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, state);
+export function getActiveCellElement(template, state) {
+    if (state.activeCell) {
+        const { rowKeyValue, colKeyValue } = state.activeCell;
+        return getCellElementByKeys(template, rowKeyValue, colKeyValue);
+    }
+    return null;
 }
 
 /**
@@ -805,45 +814,59 @@ function stillValidActiveCell(state) {
  * - 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 {node} template - the custom element template `this.template`
  * @param {object} state - datatable state
  * @param {int} direction - direction (-1 left, 1 right and 0 for no direction) its used to know which actionable element to activate.
- * @param {object} info - extra information when setting the cell mode.
+ * @param {object} info - extra information when setting the cell mode; currently only set when pressing tab
+ * @param {boolean} shouldScroll - true if scrollTop should be adjusted when setting focus
  */
-export function setFocusActiveCell(element, state, direction, info) {
+export function setFocusActiveCell(
+    template,
+    state,
+    direction,
+    info,
+    shouldScroll = true
+) {
     const { keyboardMode } = state;
     const { rowIndex, colIndex } = getIndexesActiveCell(state);
 
+    // if pressing tab on editable cell, focus will go to inline edit panel instead of cell
+    state.activeCell.focused =
+        !(info && isActiveCellEditable(state)) && isActiveCellValid(state);
     updateTabIndex(state, rowIndex, colIndex);
+
+    let cellElement = getActiveCellElement(template, state);
+    // if the cell wasn't found, but does exist in the table, scroll to where it should be
+    if (!cellElement && isActiveCellValid(state) && shouldScroll) {
+        scrollToCell(state, template, rowIndex);
+    }
+
     return new Promise((resolve) => {
         // eslint-disable-next-line @lwc/lwc/no-async-operation
         setTimeout(() => {
-            const cellElement = getCellElementByIndexes(
-                element,
-                rowIndex,
-                colIndex,
-                state
-            );
+            // reset cell element if falsy or no longer valid
+            if (
+                !cellElement ||
+                !isValidCell(
+                    state,
+                    cellElement.rowKeyValue,
+                    cellElement.colKeyValue
+                )
+            ) {
+                cellElement = getActiveCellElement(template, state);
+            }
             if (cellElement) {
                 if (direction) {
                     cellElement.resetCurrentInputIndex(direction, keyboardMode);
                 }
                 cellElement.addFocusStyles();
                 cellElement.parentElement.classList.add(FOCUS_CLASS);
-                cellElement.parentElement.focus();
+                cellElement.parentElement.focus({
+                    preventScroll: !shouldScroll,
+                });
                 cellElement.setMode(keyboardMode, info);
-
-                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;
+                if (shouldScroll) {
+                    updateScrollTop(state, template, cellElement);
                 }
             }
             resolve();
@@ -855,22 +878,27 @@ export function setFocusActiveCell(element, state, direction, info) {
  * 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 {node} template - the custom element root `this.template`
  * @param {object} state - datatable state
  */
-export function setBlurActiveCell(element, state) {
+export function setBlurActiveCell(template, state) {
     if (state.activeCell) {
         const { rowIndex, colIndex } = getIndexesActiveCell(state);
+        let cellElement = getActiveCellElement(template, state);
+        state.activeCell.focused = false;
         // 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.
+            // check cellElement; value may have changed
+            if (
+                !cellElement ||
+                !isValidCell(
+                    state,
+                    cellElement.rowKeyValue,
+                    cellElement.colKeyValue
+                )
+            ) {
+                cellElement = getActiveCellElement(template, state);
+            }
             if (cellElement) {
                 if (document.activeElement === cellElement) {
                     cellElement.blur();
@@ -940,18 +968,12 @@ export function resetCellToFocusFromPrev(state) {
 /**
  * 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 {node} template - the custom element template `this.template`
  * @param {object} state - datatable state
  */
-export function addFocusStylesToActiveCell(element, state) {
-    const { rowIndex, colIndex } = getIndexesActiveCell(state);
-
-    const cellElement = getCellElementByIndexes(
-        element,
-        rowIndex,
-        colIndex,
-        state
-    );
+export function addFocusStylesToActiveCell(template, state) {
+    const cellElement = getActiveCellElement(template, state);
+    state.activeCell.focused = true;
 
     if (cellElement) {
         cellElement.parentElement.classList.add(FOCUS_CLASS);
@@ -959,31 +981,22 @@ export function addFocusStylesToActiveCell(element, state) {
 }
 
 /**
- * It set the focus to the current activeCell, this operation imply multiple changes
+ * It set the focus to the row of current activeCell, this operation implies 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`
+ * - set the focus to the row
+ * @param {node} template - the custom element root `this.template`
  * @param {object} state - datatable state
  */
-function setFocusActiveRow(element, state) {
+function setFocusActiveRow(template, state) {
     const { rowIndex } = getIndexesActiveCell(state);
+    const row = getActiveCellRow(template, state);
 
     updateTabIndexRow(state, rowIndex);
     // eslint-disable-next-line @lwc/lwc/no-async-operation
     setTimeout(() => {
-        const row = getRowElementByIndexes(element, rowIndex, state);
-        row.focus();
-
-        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;
-        }
+        row.focus({ preventScroll: true });
+        updateScrollTop(state, template, row);
     }, 0);
 }
 
@@ -991,15 +1004,15 @@ function setFocusActiveRow(element, state) {
  * 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 {node} template - the custom element root `this.template`
  * @param {object} state - datatable state
  */
-function setBlurActiveRow(element, state) {
+function setBlurActiveRow(template, state) {
     if (state.activeCell) {
         const { rowIndex } = getIndexesActiveCell(state);
         // eslint-disable-next-line @lwc/lwc/no-async-operation
         setTimeout(() => {
-            const row = getRowElementByIndexes(element, rowIndex, state);
+            const row = getActiveCellRow(template, state);
             if (document.activeElement === row) {
                 row.blur();
             }
@@ -1017,13 +1030,7 @@ function setBlurActiveRow(element, state) {
  */
 export function refocusCellElement(template, state, needsRefocusOnCellElement) {
     if (needsRefocusOnCellElement) {
-        const { rowIndex, colIndex } = getIndexesActiveCell(state);
-        const cellElement = getCellElementByIndexes(
-            template,
-            rowIndex,
-            colIndex,
-            state
-        );
+        const cellElement = getActiveCellElement(template, state);
         if (cellElement) {
             cellElement.parentElement.focus();
         }
@@ -1056,13 +1063,8 @@ export function handleDatatableFocusIn(event) {
     // 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
-            );
+            state.activeCell.focused = 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) {
@@ -1090,13 +1092,7 @@ export function handleDatatableFocusOut(event) {
             state.isExitingActionMode)
     ) {
         if (state.activeCell && !state.rowMode) {
-            const { rowIndex, colIndex } = getIndexesActiveCell(state);
-            const cellElement = getCellElementByIndexes(
-                this.template,
-                rowIndex,
-                colIndex,
-                state
-            );
+            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) {
@@ -1317,40 +1313,24 @@ function isHeaderRow(rowIndex) {
     return rowIndex === -1;
 }
 
-function getHeaderRow(isRenderModeRoleBased) {
-    const selectors = SELECTORS.headerRow;
-    return isRenderModeRoleBased ? selectors.roleBased : selectors.default;
-}
-
-function getDataRow(rowIndex, isRenderModeRoleBased) {
-    const dataRowRowGroupSelector = isRenderModeRoleBased
-        ? SELECTORS.dataRowRowGroup.roleBased
-        : SELECTORS.dataRowRowGroup.default;
-    return `${dataRowRowGroupSelector} > :nth-child(${rowIndex + 1})`;
+export function getDataRow(rowKeyValue) {
+    return `[data-row-key-value="${rowKeyValue}"]`;
 }
 
-export function getCellElementByIndexes(element, rowIndex, colIndex, state) {
-    const isRenderModeRoleBased = state.renderModeRoleBased;
-    let selector = '';
-
-    if (isHeaderRow(rowIndex)) {
-        selector = `${getHeaderRow(isRenderModeRoleBased)}
-                    > :nth-child(${colIndex + 1}) > :first-child`;
-        return element.querySelector(selector);
-    }
-
-    selector = `${getDataRow(rowIndex, isRenderModeRoleBased)}
-                > :nth-child(${colIndex + 1}) > :first-child`;
-    return element.querySelector(selector);
+export function getCellElementByKeys(template, rowKeyValue, colKeyValue) {
+    const selector = `${getDataRow(
+        rowKeyValue
+    )} [data-col-key-value="${colKeyValue}"] > :first-child`;
+    return template.querySelector(selector);
 }
 
-function getRowElementByIndexes(element, rowIndex, state) {
-    const isRenderModeRoleBased = state.renderModeRoleBased;
-    if (isHeaderRow(rowIndex)) {
-        return element.querySelector(getHeaderRow(isRenderModeRoleBased));
+function getActiveCellRow(template, state) {
+    if (state.activeCell) {
+        const { rowKeyValue } = state.activeCell;
+        const selector = getDataRow(rowKeyValue);
+        return template.querySelector(selector);
     }
-
-    return element.querySelector(getDataRow(rowIndex, isRenderModeRoleBased));
+    return null;
 }
 
 export function getRowParent(state, rowLevel, rowIndex) {
@@ -1374,3 +1354,58 @@ function getCellFromIndexes(state, rowIndex, colIndex) {
     }
     return undefined;
 }
+
+function updateScrollTop(state, template, element) {
+    const scrollableY = template.querySelector('.slds-scrollable_y');
+    const scrollingParent = scrollableY.parentElement;
+    const parentRect = scrollingParent.getBoundingClientRect();
+    const findMeRect = element.getBoundingClientRect();
+    if (findMeRect.top < parentRect.top + TOP_MARGIN) {
+        scrollableY.scrollTop -= SCROLL_OFFSET;
+    } else if (findMeRect.bottom > parentRect.bottom - BOTTOM_MARGIN) {
+        scrollableY.scrollTop += SCROLL_OFFSET;
+    }
+    findFirstVisibleIndex(state, scrollableY.scrollTop);
+}
+
+function scrollToCell(state, template, rowIndex) {
+    const { firstVisibleIndex, bufferSize, renderedRowCount, rowHeight } =
+        state;
+
+    let scrollTop = rowIndex * rowHeight;
+    if (firstVisibleIndex > rowIndex) {
+        const rowsInViewport = renderedRowCount - 2 * bufferSize;
+        scrollTop = Math.max(scrollTop - rowsInViewport * rowHeight, 0);
+    }
+
+    const scrollableY = template.querySelector('.slds-scrollable_y');
+    scrollableY.scrollTop = scrollTop;
+    findFirstVisibleIndex(state, scrollTop);
+}
+
+export function isActiveCellEditable(state) {
+    const { activeCell, rows, columns } = state;
+    if (activeCell) {
+        const { rowIndex, colIndex } = getIndexesActiveCell(state);
+        return isCellEditable(rows[rowIndex], columns[colIndex]);
+    }
+    return false;
+}
+
+export function isValidCell(state, rowKeyValue, colKeyValue) {
+    if (rowKeyValue === HEADER_ROW) {
+        return state.headerIndexes[colKeyValue] !== undefined;
+    }
+    const row = getRowByKey(state, rowKeyValue);
+    const colIndex = getStateColumnIndex(state, colKeyValue);
+
+    return row && row.cells[colIndex];
+}
+
+function isActiveCellValid(state) {
+    if (state.activeCell) {
+        const { rowKeyValue, colKeyValue } = state.activeCell;
+        return isValidCell(state, rowKeyValue, colKeyValue);
+    }
+    return false;
+}