lightning-base-components 1.21.2-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
@@ -60,10 +47,10 @@ export function handleEditCell(event) {
  */
 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;
 }
 
 /**
@@ -77,11 +64,12 @@ export function handleMassCheckboxChange(event) {
     if (event.detail.checked) {
         setAriaSelectedOnAllSelectedRows(state);
     } else {
+        const { inlineEdit: inlineEditState } = state;
         unsetAriaSelectedOnAllSelectedRows(this.state);
         setAriaSelectedOnCell(
             state,
-            state.inlineEdit.rowKeyValue,
-            state.inlineEdit.colKeyValue
+            inlineEditState.rowKeyValue,
+            inlineEditState.colKeyValue
         );
     }
 }
@@ -98,30 +86,32 @@ export function handleMassCheckboxChange(event) {
  * @returns
  */
 export function handleInlineEditPanelScroll(event) {
-    const { isPanelVisible, rowKeyValue, colKeyValue } = this.state.inlineEdit;
+    const { state } = this;
+    const { inlineEdit: inlineEditState } = state;
+    const { isPanelVisible } = inlineEditState;
 
     if (!isPanelVisible) {
         return;
     }
 
     let delta = 0;
-    const container = event.target;
+    const { target: scroller } = event;
 
-    // When user scrolls horizontally
-    if (container.classList.contains('slds-scrollable_x')) {
-        const scrollX = container.scrollLeft;
-        if (this.privateLastScrollX == null) {
-            this.privateLastScrollX = scrollX;
+    // 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.privateLastScrollX - scrollX);
+            delta = Math.abs(this._lastScrollY - scrollY);
         }
     } else {
-        // When user scrolls vertically
-        const scrollY = container.scrollTop;
-        if (this.privateLastScrollY == null) {
-            this.privateLastScrollY = scrollY;
+        // When user scrolls horizontally.
+        const scrollX = scroller.scrollLeft;
+        if (this._lastScrollX == null) {
+            this._lastScrollX = scrollX;
         } else {
-            delta = Math.abs(this.privateLastScrollY - scrollY);
+            delta = Math.abs(this._lastScrollX - scrollX);
         }
     }
 
@@ -129,8 +119,9 @@ export function handleInlineEditPanelScroll(event) {
     // reset stored scroll values, hide panel and
     // process inline edit completion
     if (delta > HIDE_PANEL_THRESHOLD) {
-        this.privateLastScrollX = null;
-        this.privateLastScrollY = null;
+        const { rowKeyValue, colKeyValue } = inlineEditState;
+        this._lastScrollX = null;
+        this._lastScrollY = null;
         stopPanelPositioning(this);
         processInlineEditFinish(this, 'lost-focus', rowKeyValue, colKeyValue);
     } else {
@@ -146,17 +137,14 @@ export function handleInlineEditPanelScroll(event) {
  * Dispatches the `cellchange` event with the `draftValues` in the
  * detail object.
  *
- * @param {Object} dtInstance - datatable instance
- * @param {Object} cellChange - object containing cell changes
+ * @param {Object} dt - The datatable instance
+ * @param {Object} changes - Object containing cell changes
  */
-function dispatchCellChangeEvent(dtInstance, cellChange) {
-    dtInstance.dispatchEvent(
+function dispatchCellChangeEvent(dt, changes) {
+    dt.dispatchEvent(
         new CustomEvent('cellchange', {
             detail: {
-                draftValues: getResolvedCellChanges(
-                    dtInstance.state,
-                    cellChange
-                ),
+                draftValues: getResolvedCellChanges(dt.state, changes),
             },
         })
     );
@@ -165,17 +153,18 @@ function dispatchCellChangeEvent(dtInstance, 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) {
-    const inlineEditState = dt.state.inlineEdit;
+    const { inlineEdit: inlineEditState } = dt.state;
 
     if (inlineEditState.isPanelVisible) {
         processInlineEditFinish(
@@ -213,71 +202,68 @@ export function closeInlineEdit(dt) {
  *
  * If the user inline edit panel lost focus, the datatable should react accordingly.
  *
- * @param {Object} dt - datatable instance
+ * @param {Object} dt - The datatable instance
  * @param {string} reason - reason to finish the edit; valid reasons are: edit-canceled | lost-focus | tab-pressed | submit-action
  * @param {string} rowKeyValue - row key of the edited cell
  * @param {string} colKeyValue - column key of the edited cell
  */
 function processInlineEditFinish(dt, reason, rowKeyValue, colKeyValue) {
-    const state = dt.state;
-    const inlineEditState = state.inlineEdit;
+    const { state, template } = dt;
+    const { inlineEdit: inlineEditState } = state;
 
     const shouldSaveData =
+        isValidCell(state, rowKeyValue, colKeyValue) &&
         reason !== 'edit-canceled' &&
-        !(inlineEditState.massEditEnabled && reason === 'lost-focus') &&
-        isValidCell(dt.state, rowKeyValue, colKeyValue);
+        !(reason === 'lost-focus' && inlineEditState.massEditEnabled);
 
     if (shouldSaveData) {
-        const panel = dt.template.querySelector(IEDIT_PANEL_SELECTOR);
-        const editValue = panel.value;
+        const panel = template.querySelector(IEDIT_PANEL_SELECTOR);
         const isValidEditValue = panel.validity.valid;
-        const updateAllSelectedRows = panel.isMassEditChecked;
         const currentValue = getCellValue(state, rowKeyValue, colKeyValue);
+        const { isMassEditChecked: updateAllSelectedRows, value: editValue } =
+            panel;
 
         if (
             isValidEditValue &&
             (editValue !== currentValue || updateAllSelectedRows)
         ) {
-            const cellChange = {};
-            cellChange[rowKeyValue] = {};
-            cellChange[rowKeyValue][colKeyValue] = editValue;
-
+            const changes = {
+                [rowKeyValue]: {
+                    [colKeyValue]: editValue,
+                },
+            };
             if (updateAllSelectedRows) {
-                const selectedRowKeys = getSelectedRowsKeys(state);
-                selectedRowKeys.forEach((rowKey) => {
-                    cellChange[rowKey] = {};
-                    cellChange[rowKey][colKeyValue] = editValue;
-                });
+                const selectedRowsKeys = getSelectedRowsKeys(state);
+                for (let i = 0; i < selectedRowsKeys.length; i += 1) {
+                    const otherRowKeyValue = selectedRowsKeys[i];
+                    changes[otherRowKeyValue] = {
+                        [colKeyValue]: editValue,
+                    };
+                }
             }
 
-            updateDirtyValues(state, cellChange);
-
-            dispatchCellChangeEvent(dt, cellChange);
+            updateDirtyValues(state, changes);
+            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') {
-        switch (reason) {
-            case 'tab-pressed-next': {
-                reactToTabForward(dt.template, state);
-                break;
-            }
-            case 'tab-pressed-prev': {
-                reactToTabBackward(dt.template, state);
-                break;
-            }
-            default: {
-                setFocusActiveCell(dt.template, state, 0);
-            }
+        if (reason === 'tab-pressed-next') {
+            reactToTabForward(state, template);
+        } else if (reason === 'tab-pressed-prev') {
+            reactToTabBackward(state, template);
+        } else {
+            setFocusActiveCell(state, template, NAVIGATION_DIR.USE_CURRENT);
         }
     }
 
     unsetAriaSelectedOnAllSelectedRows(state);
     unsetAriaSelectedOnCell(state, rowKeyValue, colKeyValue);
 
+    // Tracked state change.
     inlineEditState.isPanelVisible = false;
 }
 
@@ -302,45 +288,43 @@ function openInlineEdit(dt, target) {
     startPanelPositioning(dt, target.parentElement);
 
     const { state, template, privateTypes: types } = dt;
-    const inlineEdit = state.inlineEdit;
+    const { inlineEdit: inlineEditState } = state;
 
-    if (inlineEdit.isPanelVisible) {
+    if (inlineEditState.isPanelVisible) {
         // A special case when we are trying to open a edit but we have one open. (click on another edit while editing)
         // in this case we will need to process the values before re-open the edit panel with the new values or we may lose the edition.
         processInlineEditFinish(
             dt,
             'lost-focus',
-            inlineEdit.rowKeyValue,
-            inlineEdit.colKeyValue
+            inlineEditState.rowKeyValue,
+            inlineEditState.colKeyValue
         );
     }
 
     const { rowKeyValue, colKeyValue } = target;
-
-    inlineEdit.isPanelVisible = true;
-    inlineEdit.rowKeyValue = rowKeyValue;
-    inlineEdit.colKeyValue = colKeyValue;
-
-    inlineEdit.editedValue = getCellValue(state, rowKeyValue, colKeyValue);
-    inlineEdit.massEditSelectedRows = getCurrentSelectionLength(state);
-    inlineEdit.massEditEnabled =
-        isSelectedRow(state, rowKeyValue) &&
-        inlineEdit.massEditSelectedRows > 1;
-
-    // pass the column definition
     const colIndex = getStateColumnIndex(state, colKeyValue);
-    inlineEdit.columnDef = getColumns(state)[colIndex];
-    const typeAttributesFromColumnDef =
-        inlineEdit.columnDef && inlineEdit.columnDef.typeAttributes;
-    if (typeAttributesFromColumnDef) {
-        // when the inline edit panel is opened resolve the typeAttributes if available
-        // then assign the resolved values to inlineEdit.resolvedTypeAttributes
-        inlineEdit.resolvedTypeAttributes = resolveNestedTypeAttributes(
+    const col = state.columns[colIndex];
+
+    inlineEditState.isPanelVisible = true;
+    inlineEditState.rowKeyValue = rowKeyValue;
+    inlineEditState.colKeyValue = colKeyValue;
+    inlineEditState.columnDef = col;
+    inlineEditState.editedValue = getCellValue(state, rowKeyValue, colKeyValue);
+    inlineEditState.massEditSelectedRows = getCurrentSelectionLength(state);
+    inlineEditState.massEditEnabled =
+        inlineEditState.massEditSelectedRows > 1 &&
+        isSelectedRow(state, rowKeyValue);
+
+    const { typeAttributes } = col || {};
+    if (typeAttributes) {
+        // 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,
             colKeyValue,
             types,
-            typeAttributesFromColumnDef,
+            typeAttributes,
             colIndex
         );
     }
@@ -357,8 +341,8 @@ function openInlineEdit(dt, target) {
             processInlineEditFinish(
                 dt,
                 'edit-canceled',
-                inlineEdit.rowKeyValue,
-                inlineEdit.colKeyValue
+                inlineEditState.rowKeyValue,
+                inlineEditState.colKeyValue
             );
         } else {
             // if panel can be edited, focus
@@ -378,20 +362,19 @@ function openInlineEdit(dt, target) {
  * @param {Object} dt - The datatable instance. Must be a truthy and valid datatable reference.
  */
 export function openInlineEditOnActiveCell(dt) {
-    const hasData = dt.state.data && dt.state.data.length > 0;
-    if (hasData) {
-        if (!isActiveCellEditable(dt.state)) {
+    const { state } = dt;
+    if (state.data && state.data.length > 0) {
+        if (!isActiveCellEditable(state)) {
             const firstEditableCell = getFirstEditableCell(dt);
             if (firstEditableCell) {
-                updateActiveCell(
-                    dt.state,
-                    firstEditableCell.rowKeyValue,
-                    firstEditableCell.colKeyValue
-                );
-                setFocusAndOpenInlineEdit(dt, dt.state.activeCell);
+                state.activeCell = {
+                    rowKeyValue: firstEditableCell.rowKeyValue,
+                    colKeyValue: firstEditableCell.colKeyValue,
+                };
+                setFocusAndOpenInlineEdit(dt);
             }
         } else {
-            setFocusAndOpenInlineEdit(dt, dt.state.activeCell);
+            setFocusAndOpenInlineEdit(dt);
         }
     }
 }
@@ -403,9 +386,10 @@ export function openInlineEditOnActiveCell(dt) {
  */
 // eslint-disable-next-line @lwc/lwc/no-async-await
 async function setFocusAndOpenInlineEdit(dt) {
-    await setFocusActiveCell(dt.template, dt.state, 0);
-    const cell = getActiveCellElement(dt.template, dt.state);
-    openInlineEdit(dt, cell);
+    const { state, template } = dt;
+    await setFocusActiveCell(state, template, NAVIGATION_DIR.USE_CURRENT);
+    const cellElement = getActiveCellElement(template, state);
+    openInlineEdit(dt, cellElement);
 }
 
 /************************** PANEL POSITIONING **************************/
@@ -422,39 +406,40 @@ 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
         // will retain previous alignment
         stopPanelPositioning(dt);
 
-        dt.privatePositionRelationship = startPositioning(dt, {
-            target,
-            element: () =>
-                dt.template
-                    .querySelector(IEDIT_PANEL_SELECTOR)
-                    .getPositionedElement(),
+        dt._positionRelationship = startPositioning(dt, {
+            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,
             },
-            autoFlip: true,
         });
     });
 }
 
 function stopPanelPositioning(dt) {
-    if (dt.privatePositionRelationship) {
-        stopPositioning(dt.privatePositionRelationship);
-        dt.privatePositionRelationship = null;
+    const { _positionRelationship } = dt;
+    if (_positionRelationship) {
+        stopPositioning(_positionRelationship);
+        dt._positionRelationship = null;
     }
 }
 
@@ -462,13 +447,14 @@ function stopPanelPositioning(dt) {
  * Repositions the inline edit panel. this does not realign the element,
  * so it doesn't fix alignment when size of panel changes
  *
- * @param {Object} dt - datatable instance
+ * @param {Object} dt - The datatable instance
  */
 function repositionPanel(dt) {
     // eslint-disable-next-line @lwc/lwc/no-async-operation
     requestAnimationFrame(() => {
-        if (dt.privatePositionRelationship) {
-            dt.privatePositionRelationship.reposition();
+        const { _positionRelationship } = dt;
+        if (_positionRelationship) {
+            _positionRelationship.reposition();
         }
     });
 }
@@ -476,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 }, {...}, {...}]
@@ -488,84 +474,59 @@ export function getDirtyValues(state) {
 /**
  * Sets the dirty values in the datatable.
  *
- * @param {Object} state Datatable state object.
- * @param {Array} value An array of objects, each object describing the dirty values in the form { colName : dirtyValue }.
+ * @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, value) {
-    const keyField = getKeyField(state);
-    const dirtyValues = Array.isArray(value) ? value : [];
-
-    state.inlineEdit.dirtyValues = dirtyValues.reduce((result, rowValues) => {
-        const changes = getCellChangesFromCustomer(state, rowValues);
-        delete changes[keyField];
-
-        result[rowValues[keyField]] = changes;
-
-        return result;
-    }, {});
-}
-
-/**
- * Updates the dirty values specified in rowColKeyValues
- *
- * @param {Object} state - state of the datatable
- * @param {Object} rowColKeyValues - An object in the form of { rowKeyValue: { colKeyValue1: value, ..., colKeyValueN: value } ... }
- */
-function updateDirtyValues(state, rowColKeyValues) {
-    const dirtyValues = state.inlineEdit.dirtyValues;
-
-    Object.keys(rowColKeyValues).forEach((rowKey) => {
-        if (!Object.prototype.hasOwnProperty.call(dirtyValues, rowKey)) {
-            dirtyValues[rowKey] = {};
+export function setDirtyValues(state, values) {
+    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 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;
+                }
+            }
         }
-
-        Object.assign(dirtyValues[rowKey], rowColKeyValues[rowKey]);
-    });
+        delete colChanges[keyField];
+        result[rowValues[keyField]] = colChanges;
+    }
+    state.inlineEdit.dirtyValues = result;
 }
 
 /**
- * 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" }
+ * Updates the dirty values specified in the `changes` object.
  *
- * @param {Object} state - datatable's state object
- * @param {Object} changes - internal representation of changes in a row
- * @returns {Object} - changes in a column that can be referenced by the column key
+ * @param {Object} state - The datatable state
+ * @param {Object} changes - An object in the form of { rowKeyValue: { colKeyValue1: value, ..., colKeyValueN: value } ... }
  */
-function getCellChangesFromCustomer(state, changes) {
-    return Object.keys(changes).reduce((result, externalColumnKey) => {
-        const columns = getColumns(state);
-        const columnIndex = getColumnIndexByColumnKey(state, externalColumnKey);
-
-        if (columnIndex >= 0) {
-            const colKey = columns[columnIndex].colKeyValue;
-            result[colKey] = changes[externalColumnKey];
+function updateDirtyValues(state, changes) {
+    const dirtyValues = state.inlineEdit.dirtyValues;
+    const rowKeys = Object.keys(changes);
+    for (let rowKeyIndex = 0; rowKeyIndex < rowKeys.length; rowKeyIndex += 1) {
+        const rowKeyValue = rowKeys[rowKeyIndex];
+        if (!Object.prototype.hasOwnProperty.call(dirtyValues, rowKeyValue)) {
+            dirtyValues[rowKeyValue] = {};
         }
 
-        return result;
-    }, {});
-}
-
-/**
- * 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} changes - The internal representation of changes in a row
- * @returns {Object} - the list of customer changes in a column
- */
-function getCellChangesByColumn(state, changes) {
-    return Object.keys(changes).reduce((result, colKey) => {
-        const columns = getColumns(state);
-        const columnIndex = getStateColumnIndex(state, colKey);
-        const columnDef = columns[columnIndex];
-
-        result[columnDef.columnKey || columnDef.fieldName] = changes[colKey];
-
-        return result;
-    }, {});
+        Object.assign(dirtyValues[rowKeyValue], changes[rowKeyValue]);
+    }
 }
 
 /**
@@ -577,26 +538,47 @@ function getCellChangesByColumn(state, changes) {
  * 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} changes - list of cell changes to be resolved
+ * @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, changes) {
-    const keyField = getKeyField(state);
-
-    return Object.keys(changes).reduce((result, rowKey) => {
-        // Get the changes made by column
-        const cellChanges = getCellChangesByColumn(state, changes[rowKey]);
-
-        if (Object.keys(cellChanges).length > 0) {
-            // Add identifier for which row has change
-            cellChanges[keyField] = rowKey;
+function getResolvedCellChanges(state, rowChanges) {
+    const { columns, keyField } = state;
+    const result = [];
+    const changeRowKeys = Object.keys(rowChanges);
+    for (
+        let changeRowIndex = 0, { length: changeRowCount } = changeRowKeys;
+        changeRowIndex < changeRowCount;
+        changeRowIndex += 1
+    ) {
+        const rowKeyValue = changeRowKeys[changeRowIndex];
+        const colChanges = rowChanges[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);
         }
-
-        return result;
-    }, []);
+    }
+    return result;
 }
 
 /************************** TYPE ATTRIBUTES RESOLUTION **************************/
@@ -604,53 +586,49 @@ function getResolvedCellChanges(state, changes) {
 /**
  * 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} typeAttributesFromColumnDef - values of typeAttributes from column definition
- * @param {number} stateColIndex - state 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,
     rowKeyValue,
     colKeyValue,
     types,
-    typeAttributesFromColumnDef,
-    stateColIndex
+    typeAttributes,
+    colIndex
 ) {
-    const rowData = getUserRowByCellKeys(state, rowKeyValue, colKeyValue);
-    const column = state.columns[stateColIndex];
-    const validTypeAttributes = types.getType(column.type).typeAttributes;
-    const resolvedTypeAttributes = {};
-
-    // Check if typeAttributesValues and typeAttributes are available
-    if (isObjectLike(typeAttributesFromColumnDef) && validTypeAttributes) {
+    const col = state.columns[colIndex];
+    const typeDesc = typeAttributes && types.getType(col.type);
+    const attributeNames = typeDesc && typeDesc.typeAttributes;
+    // Check if attrValue and typeAttributes are available.
+    if (attributeNames) {
+        const resolvedTypeAttributes = {};
+        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.
-
-        Object.keys(validTypeAttributes).forEach((key) => {
-            const typeAttributeName = validTypeAttributes[key];
-            const typeAttributesValue =
-                typeAttributesFromColumnDef[typeAttributeName];
-            if (typeAttributesValue) {
-                resolvedTypeAttributes[typeAttributeName] =
-                    resolveNestedTypeAttributesHelper(
-                        rowData,
-                        typeAttributesValue
-                    );
+        for (let i = 0; i < attributeNamesLength; i += 1) {
+            const attrName = attributeNames[i];
+            const attrValue = typeAttributes[attrName];
+            if (attrValue) {
+                resolvedTypeAttributes[attrName] =
+                    resolveNestedTypeAttributesHelper(_rowData, attrValue);
             }
-        });
+        }
         return resolvedTypeAttributes;
     }
-    return typeAttributesFromColumnDef;
+    return typeAttributes;
 }
 
 /**
- * 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: {
@@ -665,48 +643,44 @@ export function resolveNestedTypeAttributes(
  *     }
  * }
  */
-function resolveNestedTypeAttributesHelper(rowData, typeAttributesValue) {
+function resolveNestedTypeAttributesHelper(rowData, attrValue) {
     let resolvedTypeAttributes = {};
-    if (typeAttributesValue !== undefined) {
-        if (isObjectLike(typeAttributesValue)) {
-            Object.keys(typeAttributesValue).forEach((key) => {
-                const value = typeAttributesValue[key];
-                if (value !== undefined) {
-                    // since resolveNestedTypeAttributes will be creating the top level attribute
-                    // and we  resolve values while creating the new object, the typeAttributesValue passed in
-                    // could be something like {fieldName: 'someField'}.
-                    // For example, if the typeAttributes is { targetName: {fieldName: 'name'}},
-                    // {fieldName: 'name'} will be the typeAttributesValue passed in to the function,
-                    // so we need to check if key is 'fieldName' or not and resolve it immediately.
-                    if (key === 'fieldName') {
-                        resolvedTypeAttributes = rowData[value];
-                    } else if (isObjectLike(value)) {
-                        // This is the case when typeAttributesValue is something like {label: {fieldName: 'name'}}.
-                        // It's an object but the value maps a field name
-                        if (value.fieldName) {
-                            resolvedTypeAttributes[key] =
-                                rowData[value.fieldName];
-                        } else {
-                            // Nested object case, need to recursively resolve it.
-                            // For example, { targetName: {value: {fieldName: 'name'}}}}.
-                            resolvedTypeAttributes[key] =
-                                resolveNestedTypeAttributesHelper(
-                                    rowData,
-                                    value
-                                );
-                        }
-                    } else {
-                        // Primitive value
-                        resolvedTypeAttributes[key] = value;
-                    }
+    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.
+        // nothing needs to be resolved, just return it.
+        return attrValue === undefined ? resolvedTypeAttributes : attrValue;
+    }
+    const typeAttributesNames = Object.keys(attrValue);
+    for (let i = 0, { length } = typeAttributesNames; i < length; i += 1) {
+        const name = typeAttributesNames[i];
+        const value = attrValue[name];
+        if (value !== undefined) {
+            // since resolveNestedTypeAttributes will be creating the top level attribute
+            // and we  resolve values while creating the new object, the attrValue passed in
+            // could be something like {fieldName: 'someField'}.
+            // For example, if the typeAttributes is { targetName: {fieldName: 'name'}},
+            // {fieldName: 'name'} will be the attrValue passed in to the function,
+            // so we need to check if key is 'fieldName' or not and resolve it immediately.
+            if (name === 'fieldName') {
+                resolvedTypeAttributes = rowData[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;
+                if (fieldName) {
+                    resolvedTypeAttributes[name] = rowData[fieldName];
+                } else {
+                    // Nested object case, need to recursively resolve it.
+                    // For example, { targetName: {value: {fieldName: 'name'}}}}.
+                    resolvedTypeAttributes[name] =
+                        resolveNestedTypeAttributesHelper(rowData, value);
                 }
-            });
-        } else {
-            // Primitive value.
-            // For example, if the typeAttributes is { count: 5},
-            // 5 will be the typeAttributesValue passed in to the function.
-            // nothing needs to be resolved, just return it.
-            return typeAttributesValue;
+            } else {
+                // Primitive value
+                resolvedTypeAttributes[name] = value;
+            }
         }
     }
 
@@ -722,19 +696,28 @@ function resolveNestedTypeAttributesHelper(rowData, typeAttributesValue) {
  * @param {Object} dt - The datatable instance. Must be a truthy and valid datatable reference.
  */
 function getFirstEditableCell(dt) {
-    const columns = getColumns(dt.state);
-    const editableColumns = getEditableColumns(columns);
-
-    if (editableColumns.length > 0) {
-        const rows = dt.state.rows;
-        for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
-            for (let i = 0; i < editableColumns.length; i++) {
-                // 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 { state } = dt;
+    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;
+        for (let rowIndex = 0; rowIndex < rows.length; rowIndex += 1) {
+            const { key: rowKeyValue } = rows[rowIndex];
+            for (let i = 0; i < editableColumnsLength; i += 1) {
+                // 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];
                 if (isCellEditable(rows[rowIndex], editableColumn)) {
                     return {
-                        rowKeyValue: rows[rowIndex].key,
+                        rowKeyValue,
                         colKeyValue: editableColumn.colKeyValue,
                     };
                 }
@@ -769,11 +752,14 @@ function getCellValue(state, rowKeyValue, colKeyValue) {
  */
 function setAriaSelectedOnAllSelectedRows(state) {
     const { colKeyValue } = state.inlineEdit;
-    const selectedRowKeys = getSelectedRowsKeys(state);
-
-    selectedRowKeys.forEach((rowKeyValue) => {
-        setAriaSelectedOnCell(state, rowKeyValue, colKeyValue);
-    });
+    const { selectedRowsKeys } = state;
+    const keys = Object.keys(selectedRowsKeys);
+    for (let i = 0, { length } = keys; i < length; i += 1) {
+        const rowKeyValue = keys[i];
+        if (selectedRowsKeys[rowKeyValue]) {
+            setAriaSelectedOnCell(state, rowKeyValue, colKeyValue);
+        }
+    }
 }
 
 /**
@@ -784,9 +770,12 @@ function setAriaSelectedOnAllSelectedRows(state) {
  */
 function unsetAriaSelectedOnAllSelectedRows(state) {
     const { colKeyValue } = state.inlineEdit;
-    const selectedRowKeys = getSelectedRowsKeys(state);
-
-    selectedRowKeys.forEach((rowKeyValue) => {
-        unsetAriaSelectedOnCell(state, rowKeyValue, colKeyValue);
-    });
+    const { selectedRowsKeys } = state;
+    const keys = Object.keys(selectedRowsKeys);
+    for (let i = 0, { length } = keys; i < length; i += 1) {
+        const rowKeyValue = keys[i];
+        if (selectedRowsKeys[rowKeyValue]) {
+            unsetAriaSelectedOnCell(state, rowKeyValue, colKeyValue);
+        }
+    }
 }