lightning-base-components 1.21.4-alpha → 1.21.6-alpha

package/src/lightning/datatable/keyboard.js

@@ -1,12 +1,7 @@
 import { getShadowActiveElements, isRTL } from 'lightning/utilsPrivate';
 import { getCellFromIndexes, HEADER_ROW_KEY, getRowByKey } from './indexes';
-import {
-    hasTreeDataType,
-    getStateTreeColumn,
-    fireRowToggleEvent,
-} from './tree';
-import { generateColKeyValue, getStateColumnIndex } from './columns';
-import { isCellEditable } from './rows';
+import { fireRowToggleEvent } from './tree';
+import { getStateColumnIndex } from './columns';
 import { findFirstVisibleIndex } from './virtualization';
 import { getColDataSelector, getRowDataSelector, getScrollerY } from './utils';
 
@@ -211,10 +206,7 @@ function reactToArrowLeft(state, template, event) {
         // Update activeCell.
         state.activeCell = {
             rowKeyValue,
-            colKeyValue: generateColKeyValue(
-                state.columns[nextColIndex],
-                nextColIndex
-            ),
+            colKeyValue: state.columns[nextColIndex].colKeyValue,
         };
         // Tracked state change.
         setFocusActiveCell(state, template, NAVIGATION_DIR.LEFT);
@@ -233,10 +225,7 @@ function reactToArrowRight(state, template, event) {
     // Update activeCell.
     state.activeCell = {
         rowKeyValue,
-        colKeyValue: generateColKeyValue(
-            state.columns[nextColIndex],
-            nextColIndex
-        ),
+        colKeyValue: state.columns[nextColIndex].colKeyValue,
     };
     setFocusActiveCell(state, template, NAVIGATION_DIR.RIGHT);
 }
@@ -375,10 +364,7 @@ export function reactToTabForward(state, template) {
     state.activeCell = {
         rowKeyValue:
             nextRowIndex === -1 ? HEADER_ROW_KEY : state.rows[nextRowIndex].key,
-        colKeyValue: generateColKeyValue(
-            state.columns[nextColIndex],
-            nextColIndex
-        ),
+        colKeyValue: state.columns[nextColIndex].colKeyValue,
     };
     // Tracked state change.
     setFocusActiveCell(state, template, NAVIGATION_DIR.TAB_FORWARD, {
@@ -395,10 +381,7 @@ export function reactToTabBackward(state, template) {
     state.activeCell = {
         rowKeyValue:
             nextRowIndex === -1 ? HEADER_ROW_KEY : state.rows[nextRowIndex].key,
-        colKeyValue: generateColKeyValue(
-            state.columns[nextColIndex],
-            nextColIndex
-        ),
+        colKeyValue: state.columns[nextColIndex].colKeyValue,
     };
     // Tracked state change.
     setFocusActiveCell(state, template, NAVIGATION_DIR.TAB_BACKWARD, {
@@ -505,7 +488,7 @@ function reactToArrowLeftOnRow(dt, state, template, event) {
     if (rowHasChildren && rowExpanded) {
         fireRowToggleEvent(dt, rowKeyValue, rowExpanded);
     } else if (rowLevel > 1) {
-        const treeColumn = getStateTreeColumn(state);
+        const { treeColumn } = state;
         if (treeColumn) {
             const { colKeyValue } = treeColumn;
             const { rowIndex } = getIndexesByKeys(
@@ -552,7 +535,7 @@ function reactToArrowRightOnRow(dt, state, template, event) {
 function reactToArrowUpOnRow(state, template, event) {
     // Move tabIndex 0 one row down.
     const { rowKeyValue, keyEvent } = event.detail;
-    const treeColumn = getStateTreeColumn(state);
+    const { treeColumn } = state;
 
     keyEvent.stopPropagation();
     keyEvent.preventDefault();
@@ -579,7 +562,7 @@ function reactToArrowUpOnRow(state, template, event) {
 function reactToArrowDownOnRow(state, template, event) {
     // Move tabIndex 0 one row down.
     const { rowKeyValue, keyEvent } = event.detail;
-    const treeColumn = getStateTreeColumn(state);
+    const { treeColumn } = state;
 
     keyEvent.stopPropagation();
     keyEvent.preventDefault();
@@ -624,7 +607,7 @@ function getDefaultActiveCell(state) {
         const { rows } = state;
         return {
             rowKeyValue: rows.length > 0 ? rows[0].key : HEADER_ROW_KEY,
-            colKeyValue: generateColKeyValue(columns[colIndex], colIndex),
+            colKeyValue: columns[colIndex].colKeyValue,
         };
     }
 
@@ -822,7 +805,7 @@ export function setFocusActiveCell(
     const { rowIndex, colIndex } = getIndexesActiveCell(state);
     let cellElement = getActiveCellElement(template, state);
 
-    state.activeCell.focused = !(info && isActiveCellValid(state));
+    state.activeCell.hasFocus = !(info && isActiveCellValid(state));
 
     updateCellTabIndex(state, rowIndex, colIndex);
 
@@ -874,7 +857,7 @@ export function setFocusActiveCell(
 export function setBlurActiveCell(state, template) {
     if (state.activeCell) {
         const { rowIndex, colIndex } = getIndexesActiveCell(state);
-        state.activeCell.focused = false;
+        state.activeCell.hasFocus = false;
         let cellElement = getActiveCellElement(template, state);
         // eslint-disable-next-line @lwc/lwc/no-async-operation
         setTimeout(() => {
@@ -957,7 +940,7 @@ export function updateCellToFocusFromPrev(state) {
  * @param {Node} template - The custom element template `this.template`
  */
 export function addFocusStylesToActiveCell(state, template) {
-    state.activeCell.focused = true;
+    state.activeCell.hasFocus = true;
     const cellElement = getActiveCellElement(template, state);
     if (cellElement) {
         cellElement.parentElement.classList.add(FOCUS_CLASS);
@@ -1053,7 +1036,7 @@ export function handleDatatableFocusIn(event) {
     // workaround for delegatesFocus issue that focusin is called when not supposed to W-6220418
     if (isFocusInside(event.currentTarget)) {
         if (state.activeCell && !state.rowMode) {
-            state.activeCell.focused = true;
+            state.activeCell.hasFocus = true;
             const cellElement = getActiveCellElement(this.template, state);
             // we need to check because of the tree,
             // at this point it may remove/change the rows/keys because opening or closing a row.
@@ -1243,10 +1226,7 @@ function getNextIndexDownWrapped(state, rowIndex) {
 /***************************** ROW NAVIGATION MODE *****************************/
 
 function canBeRowNavigationMode(state) {
-    return (
-        state.keyboardMode === KEYBOARD_NAVIGATION_MODE &&
-        hasTreeDataType(state)
-    );
+    return state.keyboardMode === KEYBOARD_NAVIGATION_MODE && state.treeColumn;
 }
 
 function isRowNavigationMode(state) {
@@ -1257,10 +1237,7 @@ function isRowNavigationMode(state) {
 }
 
 function setRowNavigationMode(state) {
-    if (
-        hasTreeDataType(state) &&
-        state.keyboardMode === KEYBOARD_NAVIGATION_MODE
-    ) {
+    if (state.treeColumn && state.keyboardMode === KEYBOARD_NAVIGATION_MODE) {
         state.rowMode = true;
     }
 }
@@ -1276,13 +1253,12 @@ export function unsetRowNavigationMode(state) {
  * Earlier it didn't have tree data, set rowMode to true to start
  * if rowMode is false and earlier it has tree data, keep it false
  * if rowMode is true and it has tree data, keep it true
- * @param {Boolean} hadTreeDataTypePreviously - state object
  * @param {Object} state - The state object
  */
-export function updateRowNavigationMode(hadTreeDataTypePreviously, state) {
-    if (!hasTreeDataType(state)) {
+export function updateRowNavigationMode(state) {
+    if (!state.treeColumn) {
         state.rowMode = false;
-    } else if (state.rowMode === false && !hadTreeDataTypePreviously) {
+    } else if (state.rowMode === false && !state.hadTreeDataTypePreviously) {
         state.rowMode = true;
     }
 }
@@ -1360,7 +1336,8 @@ function scrollToCell(state, template, rowIndex) {
 export function isActiveCellEditable(state) {
     if (state.activeCell) {
         const { rowIndex, colIndex } = getIndexesActiveCell(state);
-        return isCellEditable(state.rows[rowIndex], state.columns[colIndex]);
+        const activeCell = state.rows[rowIndex].cells[colIndex];
+        return activeCell ? activeCell.editable : false;
     }
     return false;
 }

package/src/lightning/datatable/renderManager.js

@@ -13,10 +13,6 @@ export function setViewportRendering(state, value) {
     state.enableViewportRendering = normalizeBoolean(value);
 }
 
-export function isViewportRenderingEnabled(state) {
-    return state.enableViewportRendering;
-}
-
 export function setVirtualize(state, value) {
     if (state.renderModeRoleBased) {
         state.virtualize = normalizeString(value, {
@@ -68,16 +64,11 @@ export class RenderManager {
      * @param {RenderManagerConfig} config - The render management config
      */
     configure(state, getWrapperHeight, config) {
-        const {
-            viewportRendering,
-            rowHeight,
-            virtualize,
-            bufferSize,
-            fixedHeight,
-        } = config;
-        setVirtualize(state, virtualize);
-
-        if (normalizeBoolean(viewportRendering) || state.virtualize) {
+        const { rowHeight, bufferSize } = config;
+        // Untracked state changes.
+        setVirtualize(state, config.virtualize);
+        setViewportRendering(state, config.viewportRendering);
+        if (state.virtualize || state.enableViewportRendering) {
             this.initializeResizeObserver(state, getWrapperHeight);
         }
         let computedBufferSize =
@@ -88,10 +79,10 @@ export class RenderManager {
             'non-negative',
             DEFAULT_BUFFER_SIZE
         );
-        state.fixedHeight = normalizeBoolean(fixedHeight);
+        state.fixedHeight = normalizeBoolean(config.fixedHeight);
         if (typeof rowHeight === 'number') {
             state.rowHeight = rowHeight;
-            this.threshold = ROW_THRESHOLD * state.rowHeight;
+            this.threshold = ROW_THRESHOLD * rowHeight;
         }
     }
 
@@ -212,7 +203,7 @@ export class RenderManager {
         const normalizedRowCount = rowCount
             ? Math.min(rowCount, totalRows)
             : totalRows;
-        if (isViewportRenderingEnabled(state)) {
+        if (state.enableViewportRendering) {
             if (state.renderedRowCount < normalizedRowCount) {
                 state.renderedRowCount = normalizedRowCount;
                 // Update our internal cache
@@ -247,7 +238,7 @@ export class RenderManager {
      * when the datatable component's height changes
      *
      * @param {Object} state - datatable state
-     * @param {Function} getWrapperHeight - function to get height of datatable wrapper
+     * @param {Function} getWrapperHeight - A function to get the height of datatable wrapper
      */
     initializeResizeObserver(state, getWrapperHeight) {
         if (!this._heightResizeObserver) {

package/src/lightning/datatable/rows.js

@@ -9,7 +9,6 @@ import {
     getTypeAttributesValues,
     getSubTypeAttributesValues,
     getCellAttributesValues,
-    generateColKeyValue,
 } from './columns';
 import { getRowNumberError } from './rowNumber';
 
@@ -19,6 +18,16 @@ const IS_EDITED_CLASS = 'slds-is-edited';
 const ROLE_BASED_CELL_CLASS = 'cell';
 const TREE__ITEM_CLASS = 'slds-tree__item';
 
+function resolveAttributeValue(attrValue, rowData) {
+    if (isObjectLike(attrValue)) {
+        const { fieldName } = attrValue;
+        if (fieldName) {
+            return rowData[fieldName];
+        }
+    }
+    return attrValue;
+}
+
 export function setKeyField(state, value) {
     if (typeof value === 'string') {
         state.keyField = value;
@@ -32,8 +41,7 @@ export function setKeyField(state, value) {
 }
 
 /**
- * It compute the state.rows collection based on the current normalized (data, columns)
- * and generate cells indexes map(state.indexes)
+ * Compute state.rows and state.indexes based on the current normalized (data, columns).
  *
  * TODO: Reduce redundant calls to this function. This is indirectly called by the
  * setters of 'data' and 'columns'. Additionally, for the role-based table, if we are
@@ -43,18 +51,11 @@ export function setKeyField(state, value) {
  * @param {Object} state - The datatable state
  * @param {Object} types - The type handling factory
  */
-export function updateRowsAndCellIndexes(state, types) {
-    const {
-        columns,
-        data,
-        keyField,
-        maxRowSelection,
-        renderModeRoleBased,
-        virtualize,
-        rowHeight,
-    } = state;
+export function updateRowsAndCells(state, types) {
+    const { columns, data, keyField, maxRowSelection, virtualize, rowHeight } =
+        state;
+    const { privateCustomTypes } = types;
     const { length: rowCount } = data;
-    const { dirtyValues } = state.inlineEdit;
     const { length: colCount } = columns;
     const currentSelectionLength =
         maxRowSelection === 1 ? 1 : getCurrentSelectionLength(state);
@@ -76,7 +77,6 @@ export function updateRowsAndCellIndexes(state, types) {
     // initializing indexes
     state.indexes = {};
 
-    const { rows: errorsRows } = state.errors;
     const rows = Array(rowCount);
     // Tracked state changes.
     state.rows = rows;
@@ -87,37 +87,36 @@ export function updateRowsAndCellIndexes(state, types) {
         const rowKeyValue = rowDataKeyField
             ? `${rowDataKeyField}`
             : `row-${rowIndex}`;
-        const dirtyRowData = dirtyValues[rowKeyValue];
-        const rowErrors = errorsRows && errorsRows[rowKeyValue];
-        const cellErrors = rowErrors && rowErrors.cells;
-        const errorFieldNames = rowErrors && rowErrors.fieldNames;
 
         state.indexes[rowKeyValue] = { rowIndex };
 
         const isRowSelected = !!state.selectedRowsKeys[rowKeyValue];
         const rowNumber = rowIndex + 1;
+        const scopeColValue = scopeCol
+            ? rowData[scopeCol.fieldName]
+            : undefined;
         const cells = Array(colCount);
 
         const row = {
-            key: rowKeyValue,
-            cells,
-            rowIndex,
-            rowNumber, // for UTAM since methods are base-1
             ariaRowIndex: rowIndex + 2, // aria attrs are base-1 and also count header as a row
+            ariaSelected: isRowSelected ? 'true' : false,
+            cells,
+            classnames: `slds-hint-parent${
+                isRowSelected ? ' slds-is-selected' : ''
+            }`,
             inputType,
             isSelected: isRowSelected,
-            ariaSelected: isRowSelected ? 'true' : false,
             isDisabled:
                 !isRowSelected &&
                 maxRowSelection !== 1 &&
                 currentSelectionLength === maxRowSelection,
-            classnames: `slds-hint-parent${
-                isRowSelected ? ' slds-is-selected' : ''
-            }`,
-            tabIndex: -1,
+            key: rowKeyValue,
+            rowIndex,
+            rowNumber, // for UTAM since methods are base-1
             style: virtualize
                 ? `position:absolute;top:${rowIndex * rowHeight}px;`
                 : '',
+            tabIndex: -1,
             level: undefined,
             posInSet: undefined,
             setSize: undefined,
@@ -152,29 +151,27 @@ export function updateRowsAndCellIndexes(state, types) {
         for (let colIndex = 0; colIndex < colCount; colIndex += 1) {
             const col = columns[colIndex];
             const {
-                columnKey,
-                fieldName,
+                colKeyValue,
                 isScopeCol,
                 label: dataLabel,
                 type: columnType,
                 typeAttributes,
             } = col;
-            const colKeyValue = generateColKeyValue(col, colIndex);
             const columnSubType = typeAttributes
                 ? typeAttributes.subType
                 : undefined;
-            const dirtyValue = dirtyRowData && dirtyRowData[colKeyValue];
-            const hasError = columnKey
-                ? !!(cellErrors && cellErrors[columnKey])
-                : !!(errorFieldNames && errorFieldNames.includes(fieldName));
             const hasTreeData = columnType === 'tree';
-            // value based on the fieldName
-            const value =
-                dirtyValue === undefined ? rowData[fieldName] : dirtyValue;
+            const privateType =
+                privateCustomTypes && privateCustomTypes.get(columnType);
+            const standardCellLayout = privateType
+                ? privateType.standardCellLayout
+                : false;
             const displayReadOnlyIcon = !!col.displayReadOnlyIcon;
-            const editable = isCellEditable(rowData, col);
+            const editable = !!resolveAttributeValue(col.editable, rowData);
             const isValidType = types.isValidType(columnType);
             const isCheckbox = columnType === SELECTABLE_HEADER_TYPE;
+            const isCustom = privateType !== undefined;
+            const isCustomBareLayout = isCustom && !standardCellLayout;
             const isDataType = isValidType && !isScopeCol;
             const isDataTypeScope = isValidType && isScopeCol;
 
@@ -186,31 +183,23 @@ export function updateRowsAndCellIndexes(state, types) {
                 columnSubType,
                 columnType,
                 dataLabel,
-                describedBy: dirtyValue ? 'unsaved-cell-notification' : null,
                 displayReadOnlyIcon,
                 displayValue: rowData.displayValue || '',
                 editable,
-                hasError,
+                hasError: undefined,
                 isCheckbox,
+                isCustomBareLayout,
                 isDataType,
                 isDataTypeScope,
-                rowKeyValue: row.key, // unique row key value
-                style: computeCellStyles(types, col, renderModeRoleBased),
+                rowKeyValue, // unique row key value
+                scopeColValue,
+                style: '',
                 tabIndex: -1,
-                value,
-                wrapText: state.wrapText[colKeyValue], // wrapText state
-                wrapTextMaxLines: state.wrapText[colKeyValue]
-                    ? state.wrapTextMaxLines
-                    : undefined,
+                value: undefined,
+                wrapText: undefined, // wrapText state
+                wrapTextMaxLines: 0,
             };
 
-            cell.class = computeCellClassNames(
-                cell,
-                hasTreeData,
-                dirtyValue,
-                renderModeRoleBased
-            );
-
             if (!col.internal) {
                 // Assign cell type or cell subType attributes.
                 let attributeNames;
@@ -260,40 +249,79 @@ export function updateRowsAndCellIndexes(state, types) {
                     cell.typeAttribute22 = row.isExpanded === 'true';
                 }
             }
-            // Populate row number attributes.
-            else if (columnType === 'rowNumber') {
-                const scopeColValue = rowData[scopeCol.fieldName];
-                // computes and sets the resolved typeAttribute for the row
-                // number column error state
-                cell.typeAttribute0 = getRowNumberError(
-                    rowErrors,
-                    scopeColValue
-                );
-            }
 
             // adding cell indexes to state.indexes
             // Keeping the hash for backward compatibility, but we need to have 2 indexes, 1 for columns and one for rows,
             // because of memory usage and also at certain point we might have the data but not the columns
             state.indexes[row.key][colKeyValue] = [rowIndex, colIndex];
             cells[colIndex] = cell;
+
+            // Update cell properties including class, style, and value properties.
+            updateCell(state, rowIndex, colIndex);
         }
     }
 }
 
 /**
- * Returns true in the following three cases:
+ * Performs a smaller update on the cell at the given rowIndex and colIndex.
+ * Used by updateCells() and updateCellsByColIndex().
  *
- * (1) typeof column.editable !== 'object' && column.editable
- * (2) typeof column.editable === 'object' && !column.editable.fieldName
- * (3) typeof column.editable === 'object' && column.editable.fieldName && row[column.editable.fieldName]
- *
- * Returns false in all other cases.
- *
- * @param {object} rowData - a row data object stored in datatable state. Must be truthy.
- * @param {object} col - a column data object stored in datatable state. Must be truthy.
+ * @param {Object} state - The tracked datatable state
+ * @param {Object} rowIndex - The cell row index
+ * @param {Object} colIndex - The cell column index
+ * @param {Object} [_state = state] - The untracked datatable state
  */
-export function isCellEditable(rowData, col) {
-    return !!resolveAttributeValue(col.editable, rowData);
+export function updateCell(state, rowIndex, colIndex) {
+    const { renderModeRoleBased } = state;
+    const { rows: errorsRows } = state.errors;
+    const row = state.rows[rowIndex];
+    const rowData = state.data[rowIndex];
+    const { key: rowKeyValue } = row;
+    const dirtyRowData = state.inlineEdit.dirtyValues[rowKeyValue];
+    const rowErrors = errorsRows && errorsRows[rowKeyValue];
+    const cellErrors = rowErrors && rowErrors.cells;
+    const errorFieldNames = rowErrors && rowErrors.fieldNames;
+    const col = state.columns[colIndex];
+    const cell = row.cells[colIndex];
+    const { colKeyValue, columnKey, fieldName, type: columnType } = col;
+    const dirtyValue = dirtyRowData && dirtyRowData[colKeyValue];
+    const hasError = columnKey
+        ? !!(cellErrors && cellErrors[columnKey])
+        : !!(errorFieldNames && errorFieldNames.includes(fieldName));
+    const hasTreeData = columnType === 'tree';
+    // value based on the fieldName
+    const value = dirtyValue === undefined ? rowData[fieldName] : dirtyValue;
+    const wrapText = state.wrapText[colKeyValue];
+    const wrapTextMaxLines = wrapText ? state.wrapTextMaxLines : undefined;
+
+    cell.hasError = hasError;
+    cell.wrapText = wrapText;
+    cell.wrapTextMaxLines = wrapTextMaxLines;
+    cell.value = value;
+
+    if (col.internal && col.type === 'rowNumber') {
+        cell.typeAttribute0 = getRowNumberError(rowErrors, cell.scopeColValue);
+    }
+
+    let cellClass = '';
+    if (cell.displayReadOnlyIcon || cell.editable) {
+        cellClass += CELL_EDIT_CLASS;
+    }
+    if (hasTreeData) {
+        cellClass += (cellClass.length ? ' ' : '') + TREE__ITEM_CLASS;
+    }
+    if (hasError) {
+        cellClass += (cellClass.length ? ' ' : '') + HAS_ERROR_CLASS;
+    }
+    if (dirtyValue !== undefined) {
+        cellClass += (cellClass.length ? ' ' : '') + IS_EDITED_CLASS;
+    }
+    if (renderModeRoleBased) {
+        cellClass += (cellClass.length ? ' ' : '') + ROLE_BASED_CELL_CLASS;
+    }
+
+    cell.class = cellClass;
+    cell.style = computeCellStyles(cell, col, renderModeRoleBased);
 }
 
 /**
@@ -308,14 +336,9 @@ export function isCellEditable(rowData, col) {
  * @param {Boolean} renderModeRoleBased - render mode of datatable (div || table)
  * @returns {String} - styles to be set on the cell
  */
-function computeCellStyles(types, col, renderModeRoleBased) {
-    const columnType = col.type;
-
+function computeCellStyles(cell, col, renderModeRoleBased) {
     let cellStyle = '';
-    if (
-        types.isCustomType(columnType) &&
-        !types.isStandardCellLayoutForCustomType(columnType)
-    ) {
+    if (cell.isCustomBareLayout) {
         // When a custom type is not using the standard layout,
         // remove the padding that comes with the standard layout
         cellStyle = 'padding: 0;';
@@ -332,45 +355,6 @@ function computeCellStyles(types, col, renderModeRoleBased) {
     return cellStyle;
 }
 
-function computeCellClassNames(
-    cell,
-    hasTreeData,
-    dirtyValue,
-    renderModeRoleBased
-) {
-    // TODO: With the current SLDS design, the 'slds-cell-edit' class is required on a cell in cases
-    // where the read only icon is to be displayed. This is an issue with their design that will need to
-    // be addressed on their end, so once they do that we can modify this code accordingly.
-    let cellClass = '';
-    if (cell.displayReadOnlyIcon || cell.editable) {
-        cellClass += CELL_EDIT_CLASS;
-    }
-    if (hasTreeData) {
-        cellClass += (cellClass.length ? ' ' : '') + TREE__ITEM_CLASS;
-    }
-    if (cell.hasError) {
-        cellClass += (cellClass.length ? ' ' : '') + HAS_ERROR_CLASS;
-    }
-    if (dirtyValue !== undefined) {
-        cellClass += (cellClass.length ? ' ' : '') + IS_EDITED_CLASS;
-    }
-    if (renderModeRoleBased) {
-        cellClass += (cellClass.length ? ' ' : '') + ROLE_BASED_CELL_CLASS;
-    }
-    return cellClass;
-}
-
-function resolveAttributeValue(attrValue, rowData) {
-    if (isObjectLike(attrValue)) {
-        const { fieldName } = attrValue;
-        if (fieldName) {
-            return rowData[fieldName];
-        }
-    }
-
-    return attrValue;
-}
-
 /**
  * For the role-based table, we need to manage the width of each cell separately.
  * Re-compute the cell styles so that the width of the cell is set
@@ -378,27 +362,27 @@ function resolveAttributeValue(attrValue, rowData) {
  *
  * @param {Object} state - Datatable's state object
  */
-export function recomputeCellStyles(types, state) {
+export function recomputeCellStyles(state) {
     const { columns } = state;
     state.rows.forEach((row) => {
         row.cells.forEach((cell, colIndex) => {
             const colData = columns[colIndex];
-            cell.style = computeCellStyles(types, colData, true);
+            cell.style = computeCellStyles(cell, colData, true);
         });
     });
 }
 
 /**
- * The cells' classes are normally updated via `updateRowsAndCellIndexes()`. This ideally
- * happens after renderMode is set since `updateRowsAndCellIndexes` requires the final
+ * The cells' classes are normally updated via `updateRowsAndCells()`. This ideally
+ * happens after renderMode is set since `updateRowsAndCells` requires the final
  * renderMode value in order to set the 'cell' class on each cell.
  *
- * However, in some cases, it's possible that updateRowsAndCellIndexes is called
+ * However, in some cases, it's possible that updateRowsAndCells is called
  * before the renderMode is set (to 'role-based'). This will cause the 'cell' class to NOT be set
  * in the individual cells because state.renderModeRoleBased will be `false` at that point.
  * As a result, positioning of the cell content will be off.
  *
- * In such a case where the renderMode is 'role-based' and when the updateRowsAndCellIndexes
+ * In such a case where the renderMode is 'role-based' and when the updateRowsAndCells
  * has already been called (indicated by the presence of 'state.rows'), retroactively
  * add the 'cell' class to each cell.
  *