lightning-base-components 1.21.3-alpha → 1.21.4-alpha

package/src/lightning/datatable/inlineEdit.js

@@ -1,41 +1,28 @@
 import {
     startPositioning,
     stopPositioning,
-    Direction,
+    Direction as DIRECTION,
 } from 'lightning/positionLibrary';
 import {
     setFocusActiveCell,
     reactToTabBackward,
     reactToTabForward,
     getActiveCellElement,
-    updateActiveCell,
     isActiveCellEditable,
+    NAVIGATION_DIR,
     isValidCell,
 } from './keyboard';
+import { updateRowsAndCellIndexes, isCellEditable } from './rows';
+import { getStateColumnIndex } from './columns';
+import { resetErrors } from './errors';
+import { setAriaSelectedOnCell, unsetAriaSelectedOnCell } from './rowSelection';
 import {
-    updateRowsAndCellIndexes,
-    getRowByKey,
-    getKeyField,
-    getUserRowByCellKeys,
-    isCellEditable,
-} from './rows';
-import {
-    getColumnIndexByColumnKey,
-    getColumns,
-    getStateColumnIndex,
-    getEditableColumns,
-} from './columns';
-import { setErrors } from './errors';
-import {
-    setAriaSelectedOnCell,
-    unsetAriaSelectedOnCell,
-    isSelectedRow,
     getCurrentSelectionLength,
     getSelectedRowsKeys,
-} from './rowSelection';
-import { isObjectLike } from './utils';
-
-export { getDirtyValueFromCell } from './inlineEditShared';
+    isSelectedRow,
+} from './rowSelectionShared';
+import { hasOwnProperties } from 'lightning/utilsPrivate';
+import { getRowByKey, getUserRowByCellKeys } from './indexes';
 
 const IEDIT_PANEL_SELECTOR = '[data-iedit-panel="true"]';
 const HIDE_PANEL_THRESHOLD = 5; // hide panel on scroll
@@ -62,6 +49,8 @@ export function handleInlineEditFinish(event) {
     stopPanelPositioning(this);
     const { reason, rowKeyValue, colKeyValue } = event.detail;
     processInlineEditFinish(this, reason, rowKeyValue, colKeyValue);
+    // Set private draftValues var to new value
+    this._draftValues = this.draftValues;
 }
 
 /**
@@ -108,22 +97,22 @@ export function handleInlineEditPanelScroll(event) {
     let delta = 0;
     const { target: scroller } = event;
 
-    // When user scrolls horizontally
-    if (scroller.classList.contains('slds-scrollable_x')) {
-        const scrollX = scroller.scrollLeft;
-        if (this._lastScrollX == null) {
-            this._lastScrollX = scrollX;
-        } else {
-            delta = Math.abs(this._lastScrollX - scrollX);
-        }
-    } else {
-        // When user scrolls vertically
+    // When user scrolls vertically.
+    if (scroller.classList.contains('slds-scrollable_y')) {
         const scrollY = scroller.scrollTop;
         if (this._lastScrollY == null) {
             this._lastScrollY = scrollY;
         } else {
             delta = Math.abs(this._lastScrollY - scrollY);
         }
+    } else {
+        // When user scrolls horizontally.
+        const scrollX = scroller.scrollLeft;
+        if (this._lastScrollX == null) {
+            this._lastScrollX = scrollX;
+        } else {
+            delta = Math.abs(this._lastScrollX - scrollX);
+        }
     }
 
     // If user has scrolled past threshold,
@@ -148,14 +137,14 @@ export function handleInlineEditPanelScroll(event) {
  * Dispatches the `cellchange` event with the `draftValues` in the
  * detail object.
  *
- * @param {Object} dt - datatable instance
- * @param {Object} cellChange - object containing cell changes
+ * @param {Object} dt - The datatable instance
+ * @param {Object} changes - Object containing cell changes
  */
-function dispatchCellChangeEvent(dt, cellChange) {
+function dispatchCellChangeEvent(dt, changes) {
     dt.dispatchEvent(
         new CustomEvent('cellchange', {
             detail: {
-                draftValues: getResolvedCellChanges(dt.state, cellChange),
+                draftValues: getResolvedCellChanges(dt.state, changes),
             },
         })
     );
@@ -164,13 +153,14 @@ function dispatchCellChangeEvent(dt, cellChange) {
 /************************** INLINE EDIT STATE MANAGEMENT **************************/
 
 export function isInlineEditTriggered(state) {
-    return Object.keys(state.inlineEdit.dirtyValues).length > 0;
+    return hasOwnProperties(state.inlineEdit.dirtyValues);
 }
 
 export function cancelInlineEdit(dt) {
-    dt.state.inlineEdit.dirtyValues = {};
-    setErrors(dt.state, {});
-    updateRowsAndCellIndexes.call(dt);
+    const { state, _privateTypes } = dt;
+    resetErrors(state);
+    state.inlineEdit.dirtyValues = {};
+    updateRowsAndCellIndexes(state, _privateTypes);
 }
 
 export function closeInlineEdit(dt) {
@@ -224,7 +214,7 @@ function processInlineEditFinish(dt, reason, rowKeyValue, colKeyValue) {
     const shouldSaveData =
         isValidCell(state, rowKeyValue, colKeyValue) &&
         reason !== 'edit-canceled' &&
-        !(inlineEditState.massEditEnabled && reason === 'lost-focus');
+        !(reason === 'lost-focus' && inlineEditState.massEditEnabled);
 
     if (shouldSaveData) {
         const panel = template.querySelector(IEDIT_PANEL_SELECTOR);
@@ -242,7 +232,6 @@ function processInlineEditFinish(dt, reason, rowKeyValue, colKeyValue) {
                     [colKeyValue]: editValue,
                 },
             };
-
             if (updateAllSelectedRows) {
                 const selectedRowsKeys = getSelectedRowsKeys(state);
                 for (let i = 0; i < selectedRowsKeys.length; i += 1) {
@@ -257,17 +246,17 @@ function processInlineEditFinish(dt, reason, rowKeyValue, colKeyValue) {
             dispatchCellChangeEvent(dt, changes);
 
             // TODO: do we need to update all rows in the dt or just the one that was modified?
-            updateRowsAndCellIndexes.call(dt);
+            updateRowsAndCellIndexes(state, dt._privateTypes);
         }
     }
 
     if (reason !== 'lost-focus') {
         if (reason === 'tab-pressed-next') {
-            reactToTabForward(template, state);
+            reactToTabForward(state, template);
         } else if (reason === 'tab-pressed-prev') {
-            reactToTabBackward(template, state);
+            reactToTabBackward(state, template);
         } else {
-            setFocusActiveCell(template, state, 0);
+            setFocusActiveCell(state, template, NAVIGATION_DIR.USE_CURRENT);
         }
     }
 
@@ -314,7 +303,7 @@ function openInlineEdit(dt, target) {
 
     const { rowKeyValue, colKeyValue } = target;
     const colIndex = getStateColumnIndex(state, colKeyValue);
-    const col = getColumns(state)[colIndex];
+    const col = state.columns[colIndex];
 
     inlineEditState.isPanelVisible = true;
     inlineEditState.rowKeyValue = rowKeyValue;
@@ -328,8 +317,8 @@ function openInlineEdit(dt, target) {
 
     const { typeAttributes } = col || {};
     if (typeAttributes) {
-        // Ehen the inline edit panel is opened resolve the typeAttributes if available
-        // then assign the resolved values to inlineEdit.resolvedTypeAttributes
+        // When the inline edit panel is opened resolve the typeAttributes if available
+        // then assign the resolved values to inlineEdit.resolvedTypeAttributes.
         inlineEditState.resolvedTypeAttributes = resolveNestedTypeAttributes(
             state,
             rowKeyValue,
@@ -378,15 +367,14 @@ export function openInlineEditOnActiveCell(dt) {
         if (!isActiveCellEditable(state)) {
             const firstEditableCell = getFirstEditableCell(dt);
             if (firstEditableCell) {
-                updateActiveCell(
-                    state,
-                    firstEditableCell.rowKeyValue,
-                    firstEditableCell.colKeyValue
-                );
-                setFocusAndOpenInlineEdit(dt, state.activeCell);
+                state.activeCell = {
+                    rowKeyValue: firstEditableCell.rowKeyValue,
+                    colKeyValue: firstEditableCell.colKeyValue,
+                };
+                setFocusAndOpenInlineEdit(dt);
             }
         } else {
-            setFocusAndOpenInlineEdit(dt, state.activeCell);
+            setFocusAndOpenInlineEdit(dt);
         }
     }
 }
@@ -399,9 +387,9 @@ export function openInlineEditOnActiveCell(dt) {
 // eslint-disable-next-line @lwc/lwc/no-async-await
 async function setFocusAndOpenInlineEdit(dt) {
     const { state, template } = dt;
-    await setFocusActiveCell(template, state, 0);
-    const cell = getActiveCellElement(template, state);
-    openInlineEdit(dt, cell);
+    await setFocusActiveCell(state, template, NAVIGATION_DIR.USE_CURRENT);
+    const cellElement = getActiveCellElement(template, state);
+    openInlineEdit(dt, cellElement);
 }
 
 /************************** PANEL POSITIONING **************************/
@@ -418,10 +406,10 @@ async function setFocusAndOpenInlineEdit(dt) {
  *   - horizontal - Left -> align panel to left edge of cell
  *   - vertical   - Top  -> align panel to top of the cell
  *
- * @param {Object} dt - datatable instance
- * @param {HTMLElement} target - cell on which inline edit should open
+ * @param {Object} dt - The datatable instance
+ * @param {HTMLElement} cellElement - The cell element on which inline edit should open
  */
-function startPanelPositioning(dt, target) {
+function startPanelPositioning(dt, cellElement) {
     // eslint-disable-next-line @lwc/lwc/no-async-operation
     requestAnimationFrame(() => {
         // we need to discard previous binding otherwise the panel
@@ -429,19 +417,19 @@ function startPanelPositioning(dt, target) {
         stopPanelPositioning(dt);
 
         dt._positionRelationship = startPositioning(dt, {
-            target,
+            target: cellElement,
             element() {
                 const panel = dt.template.querySelector(IEDIT_PANEL_SELECTOR);
                 return panel.getPositionedElement();
             },
             autoFlip: true,
             align: {
-                horizontal: Direction.Left,
-                vertical: Direction.Top,
+                horizontal: DIRECTION.Left,
+                vertical: DIRECTION.Top,
             },
             targetAlign: {
-                horizontal: Direction.Left,
-                vertical: Direction.Top,
+                horizontal: DIRECTION.Left,
+                vertical: DIRECTION.Top,
             },
         });
     });
@@ -474,7 +462,7 @@ function repositionPanel(dt) {
 /************************** DIRTY/UNSAVED VALUES **************************/
 
 /**
- * @param {Object} state - Datatable state object.
+ * @param {Object} state - The datatable state
  * @returns {Array} - An array of objects, each object describing the dirty values in the form { colName : dirtyValue }.
  *                   A special key is the { [keyField]: value } pair used to identify the row containing this changed values.
  *                   The returned array will be in the form - [{colName : dirtyValue, ... , [keyField]: value }, {...}, {...}]
@@ -486,18 +474,36 @@ export function getDirtyValues(state) {
 /**
  * Sets the dirty values in the datatable.
  *
- * @param {Object} state Datatable state object.
+ * @param {Object} state The datatable state
  * @param {Array} values An untracked array of objects, each object describing the dirty values in the form { colName : dirtyValue }.
  *                      A special key is the { [keyField]: value } pair used to identify the row containing this changed values.
  */
 export function setDirtyValues(state, values) {
-    const keyField = getKeyField(state);
+    const { columns, keyField } = state;
     const dirtyValues = Array.isArray(values) ? values : [];
-
     const result = {};
     for (let dirtyIndex = 0; dirtyIndex < dirtyValues.length; dirtyIndex += 1) {
         const rowValues = dirtyValues[dirtyIndex];
-        const colChanges = getCellChangesFromCustomer(state, rowValues);
+        const colKeys = Object.keys(rowValues);
+        const colChanges = {};
+        for (
+            let colKeysIndex = 0, { length: colKeysLength } = colKeys;
+            colKeysIndex < colKeysLength;
+            colKeysIndex += 1
+        ) {
+            const externalColKeyValue = colKeys[colKeysIndex];
+            for (let colIndex = 0; colIndex < columns.length; colIndex += 1) {
+                const col = columns[colIndex];
+                if (
+                    col.columnKey === externalColKeyValue ||
+                    (!col.columnKey && col.fieldName === externalColKeyValue)
+                ) {
+                    colChanges[col.colKeyValue] =
+                        rowValues[externalColKeyValue];
+                    break;
+                }
+            }
+        }
         delete colChanges[keyField];
         result[rowValues[keyField]] = colChanges;
     }
@@ -505,9 +511,9 @@ export function setDirtyValues(state, values) {
 }
 
 /**
- * Updates the dirty values specified in rowColKeyValues
+ * Updates the dirty values specified in the `changes` object.
  *
- * @param {Object} state - state of the datatable
+ * @param {Object} state - The datatable state
  * @param {Object} changes - An object in the form of { rowKeyValue: { colKeyValue1: value, ..., colKeyValueN: value } ... }
  */
 function updateDirtyValues(state, changes) {
@@ -523,64 +529,6 @@ function updateDirtyValues(state, changes) {
     }
 }
 
-/**
- * Constructs and returns an object that contains the cell changes which can
- * be referenced by the column key value. It follows this format:
- * { <colKeyValue: "<editedValue>"> }; Ex. { "name-text-2": "My changes" }
- *
- * @param {Object} state - datatable's state object
- * @param {Object} rowValues - internal representation of changes in a row
- * @returns {Object} - changes in a column that can be referenced by the column key
- */
-function getCellChangesFromCustomer(state, rowValues) {
-    const columns = getColumns(state);
-    const colKeys = Object.keys(rowValues);
-    const colChanges = {};
-    for (
-        let colKeysIndex = 0, { length: colKeysLength } = colKeys;
-        colKeysIndex < colKeysLength;
-        colKeysIndex += 1
-    ) {
-        const externalColKeyValue = colKeys[colKeysIndex];
-        const colIndex = getColumnIndexByColumnKey(state, externalColKeyValue);
-        if (colIndex >= 0) {
-            const colKey = columns[colIndex].colKeyValue;
-            colChanges[colKey] = rowValues[externalColKeyValue];
-        }
-    }
-    return colChanges;
-}
-
-/**
- * Retrieves the changes in cells in a particular column
- * Returns an object where each item follows this format:
- * { <columnName>: "<changes>"} -> Ex. { name: "My changes" }
- *
- * @param {Object} state - Datatable state
- * @param {Object} colChanges - The internal representation of changes in a row
- * @returns {Object} - the list of customer changes in a column
- */
-function getCellChangesByColumn(state, colChanges) {
-    const columns = getColumns(state);
-    const changeColKeys = Object.keys(colChanges);
-    const { length: changeColCount } = changeColKeys;
-    const cellChanges = {};
-    for (
-        let changeColIndex = 0;
-        changeColIndex < changeColCount;
-        changeColIndex += 1
-    ) {
-        const colKeyValue = changeColKeys[changeColIndex];
-        const colIndex = getStateColumnIndex(state, colKeyValue);
-        if (colIndex !== -1) {
-            const col = columns[colIndex];
-            cellChanges[col.columnKey || col.fieldName] =
-                colChanges[colKeyValue];
-        }
-    }
-    return cellChanges;
-}
-
 /**
  * Constructs an array of resolved cell changes made via inline edit
  * Each array item consists of an identifier of the row and column in order to locate
@@ -590,13 +538,13 @@ function getCellChangesByColumn(state, colChanges) {
  * Ex. [{ name: "My changes", id: "2" }]; where column name is 'name' and 'id' is the keyField
  * The keyField can be used to identify the row.
  *
- * @param {Object} state - datatable state object
+ * @param {Object} state - The datatable state
  * @param {Object} rowChanges - list of cell changes to be resolved
  * @returns {Array} - array containing changes and identifiers of column and row where the changes
  *                    should be applied
  */
 function getResolvedCellChanges(state, rowChanges) {
-    const keyField = getKeyField(state);
+    const { columns, keyField } = state;
     const result = [];
     const changeRowKeys = Object.keys(rowChanges);
     for (
@@ -606,12 +554,27 @@ function getResolvedCellChanges(state, rowChanges) {
     ) {
         const rowKeyValue = changeRowKeys[changeRowIndex];
         const colChanges = rowChanges[rowKeyValue];
-
-        // Get the changes made by column
-        const cellChanges = getCellChangesByColumn(state, colChanges);
-        if (Object.keys(cellChanges).length > 0) {
-            // Add identifier for which row has change
-            cellChanges[keyField] = rowKeyValue;
+        const changeColKeys = Object.keys(colChanges);
+        const { length: changeColCount } = changeColKeys;
+        if (changeColCount) {
+            const cellChanges = {
+                // Add identifier for which row has change
+                [keyField]: rowKeyValue,
+            };
+            // Get the changes made by column
+            for (
+                let changeColIndex = 0;
+                changeColIndex < changeColCount;
+                changeColIndex += 1
+            ) {
+                const colKeyValue = changeColKeys[changeColIndex];
+                const colIndex = getStateColumnIndex(state, colKeyValue);
+                if (colIndex !== -1) {
+                    const col = columns[colIndex];
+                    cellChanges[col.columnKey || col.fieldName] =
+                        colChanges[colKeyValue];
+                }
+            }
             result.push(cellChanges);
         }
     }
@@ -623,14 +586,14 @@ function getResolvedCellChanges(state, rowChanges) {
 /**
  * Returns the resolved typeAttributes
  *
- * @param {Object} state - state of the datatable
- * @param {String} rowKeyValue - row key
- * @param {String} colKeyValue - column key
- * @param {object} types - types
- * @param {object} typeAttributes - values of typeAttributes from column definition
- * @param {number} colIndex - The column index
+ * @param {Object} state - The datatable state
+ * @param {String} rowKeyValue - The row key
+ * @param {String} colKeyValue - The column key
+ * @param {Object} types - The type handling factory
+ * @param {Object} typeAttributes - values of typeAttributes from column definition
+ * @param {Number} colIndex - The column index
  *
- * @returns {Object} the resolved typeAttributes.
+ * @returns {Object} The resolved typeAttributes.
  */
 export function resolveNestedTypeAttributes(
     state,
@@ -649,7 +612,7 @@ export function resolveNestedTypeAttributes(
         const { length: attributeNamesLength } = attributeNames;
         const _rowData = getUserRowByCellKeys(state, rowKeyValue, colKeyValue);
         // We only want to resolve typeAttributes based on the custom types configuration
-        // If the attribute is not in that configuration, the value of typeAttributesValues
+        // If the attribute is not in that configuration, the value of attrValue
         // for that will be undefined. This behavior is consistent with view cell.
         for (let i = 0; i < attributeNamesLength; i += 1) {
             const attrName = attributeNames[i];
@@ -665,7 +628,7 @@ export function resolveNestedTypeAttributes(
 }
 
 /**
- * Helper function to recursively traverse and resolve the nested typeAttributesValues object.
+ * Helper function to recursively traverse and resolve the nested attrValue object.
  * For example, resolve {
  *     editTypeAttributes: {
  *         value: {
@@ -682,7 +645,7 @@ export function resolveNestedTypeAttributes(
  */
 function resolveNestedTypeAttributesHelper(rowData, attrValue) {
     let resolvedTypeAttributes = {};
-    if (!isObjectLike(attrValue)) {
+    if (!(typeof attrValue === 'object' && attrValue !== null)) {
         // Primitive value.
         // For example, if the typeAttributes is { count: 5},
         // 5 will be the attrValue passed in to the function.
@@ -702,7 +665,7 @@ function resolveNestedTypeAttributesHelper(rowData, attrValue) {
             // so we need to check if key is 'fieldName' or not and resolve it immediately.
             if (name === 'fieldName') {
                 resolvedTypeAttributes = rowData[value];
-            } else if (isObjectLike(value)) {
+            } else if (typeof value === 'object' && value !== null) {
                 // This is the case when attrValue is something like {label: {fieldName: 'name'}}.
                 // It's an object but the value maps a field name
                 const { fieldName } = value;
@@ -734,8 +697,14 @@ function resolveNestedTypeAttributesHelper(rowData, attrValue) {
  */
 function getFirstEditableCell(dt) {
     const { state } = dt;
-    const columns = getColumns(dt.state);
-    const editableColumns = getEditableColumns(columns);
+    const { columns } = state;
+    const editableColumns = [];
+    for (let i = 0, { length } = columns; i < length; i += 1) {
+        const col = columns[i];
+        if (col.editable) {
+            editableColumns.push(col);
+        }
+    }
     const { length: editableColumnsLength } = editableColumns;
     if (editableColumnsLength > 0) {
         const { rows } = state;
@@ -783,7 +752,7 @@ function getCellValue(state, rowKeyValue, colKeyValue) {
  */
 function setAriaSelectedOnAllSelectedRows(state) {
     const { colKeyValue } = state.inlineEdit;
-    const selectedRowsKeys = getSelectedRowsKeys(state);
+    const { selectedRowsKeys } = state;
     const keys = Object.keys(selectedRowsKeys);
     for (let i = 0, { length } = keys; i < length; i += 1) {
         const rowKeyValue = keys[i];
@@ -801,7 +770,7 @@ function setAriaSelectedOnAllSelectedRows(state) {
  */
 function unsetAriaSelectedOnAllSelectedRows(state) {
     const { colKeyValue } = state.inlineEdit;
-    const selectedRowsKeys = getSelectedRowsKeys(state);
+    const { selectedRowsKeys } = state;
     const keys = Object.keys(selectedRowsKeys);
     for (let i = 0, { length } = keys; i < length; i += 1) {
         const rowKeyValue = keys[i];