lightning-base-components 1.14.2-alpha → 1.14.6-alpha

package/src/lightning/datatable/inlineEditShared.js

@@ -0,0 +1,24 @@
+/**
+ * Retrieves the dirty/unsaved value of a cell that resulted from an inline
+ * edit change. If no change was made on the cell, this function
+ * returns `undefined`.
+ *
+ * @param {Object} state - datatable's state object
+ * @param {String} rowKeyValue - computed id for the row
+ * @param {String} colKeyValue - computed id for the column
+ * @returns {String} The dirty/unsaved value of the cell.
+ *                   If no change was made, this returns `undefined`
+ */
+export function getDirtyValueFromCell(state, rowKeyValue, colKeyValue) {
+    const dirtyValues = state.inlineEdit.dirtyValues;
+
+    if (
+        dirtyValues &&
+        dirtyValues[rowKeyValue] &&
+        dirtyValues[rowKeyValue][colKeyValue]
+    ) {
+        return dirtyValues[rowKeyValue][colKeyValue];
+    }
+
+    return undefined;
+}

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 { setFirstVisibleIndex } from './renderManager';
 
 // 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';
@@ -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 {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) {
@@ -1306,7 +1302,7 @@ export function updateRowNavigationMode(hadTreeDataTypePreviously, state) {
 
 /***************************** HELPER FUNCTIONS *****************************/
 
-function isCellElement(tagName, role) {
+export function isCellElement(tagName, role) {
     return (
         SELECTORS.cell.default.includes(tagName) ||
         SELECTORS.cell.roleBased.includes(role)
@@ -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(rowKeyValue) {
+    return `[data-row-key-value="${rowKeyValue}"]`;
 }
 
-function getDataRow(rowIndex, isRenderModeRoleBased) {
-    const dataRowRowGroupSelector = isRenderModeRoleBased
-        ? SELECTORS.dataRowRowGroup.roleBased
-        : SELECTORS.dataRowRowGroup.default;
-    return `${dataRowRowGroupSelector} > :nth-child(${rowIndex + 1})`;
+export function getCellElementByKeys(template, rowKeyValue, colKeyValue) {
+    const selector = `${getDataRow(
+        rowKeyValue
+    )} [data-col-key-value="${colKeyValue}"] > :first-child`;
+    return template.querySelector(selector);
 }
 
-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);
-}
-
-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;
+    }
+    setFirstVisibleIndex(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;
+    setFirstVisibleIndex(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;
+}