lightning-base-components 1.21.1-alpha → 1.21.3-alpha

package/src/lightning/datatable/inlineEdit.js

@@ -60,9 +60,7 @@ export function handleEditCell(event) {
  */
 export function handleInlineEditFinish(event) {
     stopPanelPositioning(this);
-
     const { reason, rowKeyValue, colKeyValue } = event.detail;
-
     processInlineEditFinish(this, reason, rowKeyValue, colKeyValue);
 }
 
@@ -77,11 +75,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 +97,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;
+    if (scroller.classList.contains('slds-scrollable_x')) {
+        const scrollX = scroller.scrollLeft;
+        if (this._lastScrollX == null) {
+            this._lastScrollX = scrollX;
         } else {
-            delta = Math.abs(this.privateLastScrollX - scrollX);
+            delta = Math.abs(this._lastScrollX - scrollX);
         }
     } else {
         // When user scrolls vertically
-        const scrollY = container.scrollTop;
-        if (this.privateLastScrollY == null) {
-            this.privateLastScrollY = scrollY;
+        const scrollY = scroller.scrollTop;
+        if (this._lastScrollY == null) {
+            this._lastScrollY = scrollY;
         } else {
-            delta = Math.abs(this.privateLastScrollY - scrollY);
+            delta = Math.abs(this._lastScrollY - scrollY);
         }
     }
 
@@ -129,8 +130,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 +148,14 @@ export function handleInlineEditPanelScroll(event) {
  * Dispatches the `cellchange` event with the `draftValues` in the
  * detail object.
  *
- * @param {Object} dtInstance - datatable instance
+ * @param {Object} dt - datatable instance
  * @param {Object} cellChange - object containing cell changes
  */
-function dispatchCellChangeEvent(dtInstance, cellChange) {
-    dtInstance.dispatchEvent(
+function dispatchCellChangeEvent(dt, cellChange) {
+    dt.dispatchEvent(
         new CustomEvent('cellchange', {
             detail: {
-                draftValues: getResolvedCellChanges(
-                    dtInstance.state,
-                    cellChange
-                ),
+                draftValues: getResolvedCellChanges(dt.state, cellChange),
             },
         })
     );
@@ -175,7 +174,7 @@ export function cancelInlineEdit(dt) {
 }
 
 export function closeInlineEdit(dt) {
-    const inlineEditState = dt.state.inlineEdit;
+    const { inlineEdit: inlineEditState } = dt.state;
 
     if (inlineEditState.isPanelVisible) {
         processInlineEditFinish(
@@ -213,46 +212,49 @@ 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);
+        !(inlineEditState.massEditEnabled && reason === 'lost-focus');
 
     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);
@@ -260,24 +262,19 @@ function processInlineEditFinish(dt, reason, rowKeyValue, colKeyValue) {
     }
 
     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(template, state);
+        } else if (reason === 'tab-pressed-prev') {
+            reactToTabBackward(template, state);
+        } else {
+            setFocusActiveCell(template, state, 0);
         }
     }
 
     unsetAriaSelectedOnAllSelectedRows(state);
     unsetAriaSelectedOnCell(state, rowKeyValue, colKeyValue);
 
+    // Tracked state change.
     inlineEditState.isPanelVisible = false;
 }
 
@@ -302,45 +299,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
+    const col = getColumns(state)[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) {
+        // Ehen the inline edit panel is opened resolve the typeAttributes if available
         // then assign the resolved values to inlineEdit.resolvedTypeAttributes
-        inlineEdit.resolvedTypeAttributes = resolveNestedTypeAttributes(
+        inlineEditState.resolvedTypeAttributes = resolveNestedTypeAttributes(
             state,
             rowKeyValue,
             colKeyValue,
             types,
-            typeAttributesFromColumnDef,
+            typeAttributes,
             colIndex
         );
     }
@@ -357,8 +352,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 +373,20 @@ 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,
+                    state,
                     firstEditableCell.rowKeyValue,
                     firstEditableCell.colKeyValue
                 );
-                setFocusAndOpenInlineEdit(dt, dt.state.activeCell);
+                setFocusAndOpenInlineEdit(dt, state.activeCell);
             }
         } else {
-            setFocusAndOpenInlineEdit(dt, dt.state.activeCell);
+            setFocusAndOpenInlineEdit(dt, state.activeCell);
         }
     }
 }
@@ -403,8 +398,9 @@ 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);
+    const { state, template } = dt;
+    await setFocusActiveCell(template, state, 0);
+    const cell = getActiveCellElement(template, state);
     openInlineEdit(dt, cell);
 }
 
@@ -432,12 +428,13 @@ function startPanelPositioning(dt, target) {
         // will retain previous alignment
         stopPanelPositioning(dt);
 
-        dt.privatePositionRelationship = startPositioning(dt, {
+        dt._positionRelationship = startPositioning(dt, {
             target,
-            element: () =>
-                dt.template
-                    .querySelector(IEDIT_PANEL_SELECTOR)
-                    .getPositionedElement(),
+            element() {
+                const panel = dt.template.querySelector(IEDIT_PANEL_SELECTOR);
+                return panel.getPositionedElement();
+            },
+            autoFlip: true,
             align: {
                 horizontal: Direction.Left,
                 vertical: Direction.Top,
@@ -446,15 +443,15 @@ function startPanelPositioning(dt, target) {
                 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 +459,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();
         }
     });
 }
@@ -489,39 +487,40 @@ 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 {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) {
+export function setDirtyValues(state, values) {
     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;
-    }, {});
+    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);
+        delete colChanges[keyField];
+        result[rowValues[keyField]] = colChanges;
+    }
+    state.inlineEdit.dirtyValues = 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 } ... }
+ * @param {Object} changes - An object in the form of { rowKeyValue: { colKeyValue1: value, ..., colKeyValueN: value } ... }
  */
-function updateDirtyValues(state, rowColKeyValues) {
+function updateDirtyValues(state, changes) {
     const dirtyValues = state.inlineEdit.dirtyValues;
-
-    Object.keys(rowColKeyValues).forEach((rowKey) => {
-        if (!Object.prototype.hasOwnProperty.call(dirtyValues, rowKey)) {
-            dirtyValues[rowKey] = {};
+    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] = {};
         }
 
-        Object.assign(dirtyValues[rowKey], rowColKeyValues[rowKey]);
-    });
+        Object.assign(dirtyValues[rowKeyValue], changes[rowKeyValue]);
+    }
 }
 
 /**
@@ -530,21 +529,26 @@ function updateDirtyValues(state, rowColKeyValues) {
  * { <colKeyValue: "<editedValue>"> }; Ex. { "name-text-2": "My changes" }
  *
  * @param {Object} state - datatable's state object
- * @param {Object} changes - internal representation of changes in a row
+ * @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, 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 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 result;
-    }, {});
+    }
+    return colChanges;
 }
 
 /**
@@ -553,19 +557,28 @@ function getCellChangesFromCustomer(state, changes) {
  * { <columnName>: "<changes>"} -> Ex. { name: "My changes" }
  *
  * @param {Object} state - Datatable state
- * @param {Object} changes - The internal representation of changes in a row
+ * @param {Object} colChanges - 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;
-    }, {});
+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;
 }
 
 /**
@@ -578,25 +591,31 @@ function getCellChangesByColumn(state, changes) {
  * 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} 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) {
+function getResolvedCellChanges(state, rowChanges) {
     const keyField = getKeyField(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];
 
-    return Object.keys(changes).reduce((result, rowKey) => {
         // Get the changes made by column
-        const cellChanges = getCellChangesByColumn(state, changes[rowKey]);
-
+        const cellChanges = getCellChangesByColumn(state, colChanges);
         if (Object.keys(cellChanges).length > 0) {
             // Add identifier for which row has change
-            cellChanges[keyField] = rowKey;
+            cellChanges[keyField] = rowKeyValue;
             result.push(cellChanges);
         }
-
-        return result;
-    }, []);
+    }
+    return result;
 }
 
 /************************** TYPE ATTRIBUTES RESOLUTION **************************/
@@ -608,8 +627,8 @@ function getResolvedCellChanges(state, changes) {
  * @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} typeAttributes - values of typeAttributes from column definition
+ * @param {number} colIndex - The column index
  *
  * @returns {Object} the resolved typeAttributes.
  */
@@ -618,35 +637,31 @@ export function resolveNestedTypeAttributes(
     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
         // 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;
 }
 
 /**
@@ -665,48 +680,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 (!isObjectLike(attrValue)) {
+        // 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 (isObjectLike(value)) {
+                // 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 +733,22 @@ function resolveNestedTypeAttributesHelper(rowData, typeAttributesValue) {
  * @param {Object} dt - The datatable instance. Must be a truthy and valid datatable reference.
  */
 function getFirstEditableCell(dt) {
+    const { state } = 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 { 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 +783,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 = getSelectedRowsKeys(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 +801,12 @@ function setAriaSelectedOnAllSelectedRows(state) {
  */
 function unsetAriaSelectedOnAllSelectedRows(state) {
     const { colKeyValue } = state.inlineEdit;
-    const selectedRowKeys = getSelectedRowsKeys(state);
-
-    selectedRowKeys.forEach((rowKeyValue) => {
-        unsetAriaSelectedOnCell(state, rowKeyValue, colKeyValue);
-    });
+    const selectedRowsKeys = getSelectedRowsKeys(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);
+        }
+    }
 }