lightning-base-components 1.22.2-alpha → 1.26.1-rc.0-alpha

package/src/lightning/datatable/rows.js

@@ -1,10 +1,16 @@
-import { assert, isRTL } from 'lightning/utilsPrivate';
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { features } from 'lightning/features';
+import { assert, isRTL, isUndefinedOrNull } from 'lightning/utilsPrivate';
 import {
     getTypeAttributesValues,
     getSubTypeAttributesValues,
     getCellAttributesValues,
 } from './columns';
-import { addHeaderIndex } from './indexes';
+import { HEADER_ROW_INDEX, HEADER_ROW_KEY } from './indexes';
 import {
     setInliningProperties,
     updateInlineCell,
@@ -14,8 +20,10 @@ import {
 import { getRowNumberError } from './rowNumber';
 import {
     getCurrentSelectionLength,
+    isInputTypeCheckbox,
     SELECTABLE_HEADER_TYPE,
     SORTING_MENU_HEADER_TYPE,
+    SINGLE_ROW_SELECTION_MODES,
 } from './rowSelectionShared';
 import { getAttributesNames } from './types';
 import { classSet, isObjectLike } from './utils';
@@ -71,24 +79,38 @@ export function updateRowsAndCells(state, types, datatableId) {
     } = state;
     const { privateCustomTypes } = types;
     const rtl = isRTL();
-    const { length: rowCount } = data;
     const { length: colCount } = columns;
-    const currentSelectionLength =
-        maxRowSelection === 1 ? 1 : getCurrentSelectionLength(state);
-    const inputType = maxRowSelection === 1 ? 'radio' : 'checkbox';
-    const isInputTypeCheckbox = inputType === 'checkbox';
+    const isInputCheckbox = isInputTypeCheckbox(state);
+    const currentSelectionLength = isInputCheckbox
+        ? getCurrentSelectionLength(state)
+        : 1;
+    const inputType = isInputCheckbox
+        ? SINGLE_ROW_SELECTION_MODES.CHECKBOX
+        : SINGLE_ROW_SELECTION_MODES.RADIO;
 
     let scopeCol;
     let treeColTypeAttrs;
 
     // Initializing all indexes.
     const indexes = {};
-    const headerIndexes = Array(colCount);
 
     for (let colIndex = 0; colIndex < colCount; colIndex += 1) {
         const col = columns[colIndex];
         const { colKeyValue, type: columnType } = col;
-        addHeaderIndex(headerIndexes, indexes, colKeyValue, colIndex);
+        // Create header cell to use for managing active cell state
+        const cellKeyValue = `${HEADER_ROW_KEY}-${colKeyValue}`;
+        const headerCell = {
+            cellKeyValue,
+            colIndex,
+            colKeyValue,
+            focused: false,
+            key: colKeyValue,
+            rowIndex: HEADER_ROW_INDEX,
+            rowKeyValue: HEADER_ROW_KEY,
+        };
+        // Store in caches early so data can be referenced by other methods
+        // during initialization.
+        indexes[cellKeyValue] = headerCell;
 
         // Find scopeCol
         if (!scopeCol && col.isScopeCol && types.isValidType(columnType)) {
@@ -104,14 +126,13 @@ export function updateRowsAndCells(state, types, datatableId) {
     const checkboxCells = [];
     const lookupCells = [];
     const shownUrlCells = [];
-    const rows = Array(rowCount);
+    const rows = [];
 
     // Store in caches early so data can be referenced by other methods
     // during initialization.
 
     // Untracked state changes.
     state.checkboxCells = checkboxCells;
-    state.headerIndexes = headerIndexes;
     state.indexes = indexes;
     state.lookupCells = lookupCells;
     state.shownUrlCells = shownUrlCells;
@@ -119,12 +140,11 @@ export function updateRowsAndCells(state, types, datatableId) {
     state.rows = rows;
 
     // Add row indexes.
-    for (let rowIndex = 0; rowIndex < rowCount; rowIndex += 1) {
-        const rowData = data[rowIndex];
+    data.forEach((rowData, rowIndex) => {
         const rowDataKeyField = rowData[keyField];
-        const rowKeyValue = rowDataKeyField
-            ? `${rowDataKeyField}`
-            : `row-${rowIndex}`;
+        const rowKeyValue = isUndefinedOrNull(rowDataKeyField)
+            ? `row-${rowIndex}`
+            : rowDataKeyField;
 
         state.indexes[rowKeyValue] = { rowIndex };
 
@@ -148,7 +168,7 @@ export function updateRowsAndCells(state, types, datatableId) {
             isSelected: isRowSelected,
             isDisabled:
                 !isRowSelected &&
-                maxRowSelection !== 1 &&
+                isInputCheckbox &&
                 currentSelectionLength === maxRowSelection,
             key: rowKeyValue,
             rowIndex,
@@ -188,7 +208,7 @@ export function updateRowsAndCells(state, types, datatableId) {
         // Store in caches early so data can be referenced by other methods
         // during initialization.
         indexes[rowKeyValue] = row;
-        rows[rowIndex] = row;
+        rows.push(row);
 
         // Add cell indexes.
         for (let colIndex = 0; colIndex < colCount; colIndex += 1) {
@@ -205,8 +225,17 @@ export function updateRowsAndCells(state, types, datatableId) {
                 ? typeAttributes.subType
                 : undefined;
             const hasTreeData = columnType === 'tree';
-            const privateType =
-                privateCustomTypes && privateCustomTypes.get(columnType);
+            let privateType;
+            if (features.ENABLE_TREE_GRID_CUSTOM_TYPES) {
+                privateType =
+                    privateCustomTypes &&
+                    privateCustomTypes.get(
+                        hasTreeData ? columnSubType : columnType
+                    );
+            } else {
+                privateType =
+                    privateCustomTypes && privateCustomTypes.get(columnType);
+            }
             const standardCellLayout = privateType
                 ? privateType.standardCellLayout
                 : false;
@@ -268,7 +297,12 @@ export function updateRowsAndCells(state, types, datatableId) {
                 let attributeNames;
                 let attributeValues;
                 if (columnSubType) {
-                    attributeNames = getAttributesNames(columnSubType);
+                    if (features.ENABLE_TREE_GRID_CUSTOM_TYPES) {
+                        attributeNames =
+                            types.getAttributesNames(columnSubType);
+                    } else {
+                        attributeNames = getAttributesNames(columnSubType);
+                    }
                     attributeValues = getSubTypeAttributesValues(col);
                 } else {
                     const typeDesc = types.getType(columnType);
@@ -324,19 +358,19 @@ export function updateRowsAndCells(state, types, datatableId) {
                 setInliningProperties(
                     state,
                     cell,
-                    isInputTypeCheckbox,
+                    isInputCheckbox,
                     datatableId
                 );
             }
             // Update cell properties including class, style, and value properties.
-            updateCell(state, rowIndex, colIndex);
+            updateCell(state, rowIndex, colIndex, rowData);
 
             // Update shownUrlCells state since it's dependent on updateCell
             if (cell.showUrlLink) {
                 shownUrlCells.push(cell);
             }
         }
-    }
+    });
 
     state.hasCalledUpdateRowsAndCells = true;
 }
@@ -353,14 +387,15 @@ export function updateCells(state, types) {
         updateRowsAndCells(state, types);
         return;
     }
-    const { rows } = state;
+    const { data, rows } = state;
     for (let rowIndex = 0; rowIndex < rows.length; rowIndex += 1) {
+        const rowData = data[rowIndex];
         for (
             let colIndex = 0;
             colIndex < rows[rowIndex].cells.length;
             colIndex += 1
         ) {
-            updateCell(state, rowIndex, colIndex);
+            updateCell(state, rowIndex, colIndex, rowData);
         }
     }
 }
@@ -369,37 +404,44 @@ export function updateCells(state, types) {
  * Performs a smaller update on the cell at the given rowIndex and colIndex.
  * Used by updateCells() and updateWrapTextAndMaxLinesValuesInCells().
  *
+ * rowData NEEDS to be a separate param to avoid a perf issue in Locker
+ * where accessing state.data directly calls slow getFilteredArray function
+ *
  * @param {Object} state - The tracked datatable state
  * @param {Object} rowIndex - The cell row index
  * @param {Object} colIndex - The cell column index
+ * @param {Object} rowData - the data object for a specific row
  */
-export function updateCell(state, rowIndex, colIndex) {
+export function updateCell(state, rowIndex, colIndex, rowData) {
     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 } = col;
+    const { colKeyValue, columnKey, fieldName, wrapText } = col;
+    let errorFieldNames = (rowErrors && rowErrors.fieldNames) || [];
+    let customErrorValidationMessage = null;
+    if (!Array.isArray(errorFieldNames)) {
+        errorFieldNames = Object.keys(errorFieldNames);
+        customErrorValidationMessage = rowErrors.fieldNames[fieldName];
+    }
     const dirtyValue = dirtyRowData && dirtyRowData[colKeyValue];
     const hasError = columnKey
         ? !!(cellErrors && cellErrors[columnKey])
         : !!(errorFieldNames && errorFieldNames.includes(fieldName));
     // 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;
-
+    cell.customErrorValidationMessage = customErrorValidationMessage;
     if (col.internal && col.type === 'rowNumber') {
         cell.typeAttribute0 = getRowNumberError(rowErrors, cell.scopeColValue);
     }
@@ -422,8 +464,9 @@ export function updateCell(state, rowIndex, colIndex) {
     if (renderModeRoleBased) {
         cellClass += (cellClass.length ? ' ' : '') + ROLE_BASED_CELL_CLASS;
     }
-
-    cell.class = cellClass;
+    // using fallback placeholder class for case where class is an empty string
+    // known LWC issue: https://github.com/salesforce/lwc/issues/4661
+    cell.class = cellClass || 'private-ssr-placeholder-class';
     cell.style = computeCellStyles(cell, col, renderModeRoleBased, cell.style);
 
     if (cell.isInlined) {
@@ -452,10 +495,10 @@ function computeCellStyles(cell, col, renderModeRoleBased, initValue = '') {
         cellStyle += ';';
     }
 
-    if (cell.isCustomBareLayout) {
+    if (!cellStyle && cell.isCustomBareLayout) {
         // When a custom type is not using the standard layout,
         // remove the padding that comes with the standard layout
-        cellStyle += 'padding: 0;';
+        cellStyle = 'padding: 0;';
     }
 
     // Width needs to be managed when rendering as divs

package/src/lightning/datatable/rowsInlining.js

@@ -1,3 +1,8 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 import labelEdit from '@salesforce/label/LightningDatatable.edit';
 import labelEditHasError from '@salesforce/label/LightningDatatable.editHasError';
 import labelEmailLabel from '@salesforce/label/LightningFormattedEmail.emailIconLabel';
@@ -12,7 +17,7 @@ import {
 import {
     isTextIgnoreRTL,
     isValidPhone,
-    makeAbsoluteUrl,
+    formatUrl,
     parseToFormattedLinkifiedParts,
     toFormattedLocation,
     toFormattedNumber,
@@ -22,7 +27,6 @@ import {
 import { TOOLTIP_ALLOWANCE } from './rowNumber';
 import { getDefaultState } from './state';
 
-const CELL_MARGIN_LEFT_CLASS = 'slds-m-left_x-small';
 const CELL_WRAP = 'slds-cell-wrap';
 const GRID_CLASS = 'slds-grid';
 const GRID_ALIGN_END_CLASS = 'slds-grid_align-end';
@@ -51,7 +55,6 @@ const BASE_INLINING_PROPS = {
     actionableElementsCount: 0,
     computedCellDivClass: '',
     computedCellDivStyle: '',
-    computedMarginClassWhenLeftIconExists: '',
     computedWrapperClass: '',
     currentInputIndex: 0,
     editIconAssistiveText: '',
@@ -229,6 +232,7 @@ export function updateInlineCell(cell) {
         cell.editIconAssistiveText = `${i18n.edit} ${cell.dataLabel}${
             cell.hasError ? ` ${i18n.editHasError}` : ''
         }`;
+        cell.editLabelId = `edit-${cell.cellKeyValue}`;
     } else {
         cell.shouldDisplayReadOnlyIcon = cell.displayReadOnlyIcon;
     }
@@ -266,7 +270,9 @@ export function updateInlineClassAndStyle(cell, cellClass) {
         const { wrapTextMaxLines } = cell;
         if (wrapTextMaxLines) {
             computedCellDivClass += ` ${LINE_CLAMP_CLASS}`;
-            computedCellDivStyle = `--lwc-lineClamp: ${wrapTextMaxLines};`;
+            computedCellDivStyle = `--lwc-lineClamp: ${wrapTextMaxLines}`;
+        } else {
+            computedCellDivStyle = 'overflow-wrap: anywhere;';
         }
     } else {
         computedCellDivClass += TRUNCATE_CLASS;
@@ -281,14 +287,6 @@ export function updateInlineClassAndStyle(cell, cellClass) {
         computedCellDivClass += ` ${LTR_CONTENT_IN_RTL_CLASS}`;
     }
 
-    let computedMarginClassWhenLeftIconExists = '';
-    if (cell.iconName) {
-        const { iconPosition } = cell;
-        if (!iconPosition || iconPosition === 'left') {
-            computedMarginClassWhenLeftIconExists = CELL_MARGIN_LEFT_CLASS;
-        }
-    }
-
     let computedWrapperClass = GRID_CLASS;
     if (
         alignment === 'right' ||
@@ -312,8 +310,6 @@ export function updateInlineClassAndStyle(cell, cellClass) {
     cell.class = cellClass;
     cell.computedCellDivClass = computedCellDivClass;
     cell.computedCellDivStyle = computedCellDivStyle;
-    cell.computedMarginClassWhenLeftIconExists =
-        computedMarginClassWhenLeftIconExists;
     cell.computedWrapperClass = computedWrapperClass;
 }
 
@@ -361,6 +357,7 @@ export function updateInlineCellValue(cell, value) {
                 // customer breakages for the time being. Ideally the use of toDate here will be
                 // temporary and we can remove use of the Date constructor in the future
                 value: toDate(value),
+                dateStyle: 'medium',
                 day: cell.typeAttribute0,
                 era: cell.typeAttribute1,
                 hour: cell.typeAttribute2,
@@ -452,7 +449,7 @@ export function updateInlineCellValue(cell, value) {
             handleUrlAnchorClick = (event) => {
                 cell._handleUrlAnchorClick(event);
             };
-            urlLink = makeAbsoluteUrl(value);
+            urlLink = formatUrl(value);
             urlLabel =
                 typeAttribute0 !== null &&
                 typeAttribute0 !== undefined &&

package/src/lightning/datatable/sort.js

@@ -1,3 +1,8 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 import { assert } from 'lightning/utilsPrivate';
 
 /**
@@ -42,7 +47,7 @@ export function setSortedDirection(state, value) {
             );
         });
         state.sortedDirection = value;
-    } else {
+    } else if (value) {
         assert(
             false,
             `The "sortedDirection" value passed into lightning:datatable
@@ -76,7 +81,6 @@ export function setSortedBy(state, value) {
  */
 export function updateSorting(state) {
     const { columns, defaultSortDirection, sortedBy, sortedDirection } = state;
-
     // Determine if sortedBy is an array
     const isSortedByArray = Array.isArray(sortedBy);
 
@@ -84,22 +88,23 @@ export function updateSorting(state) {
         const col = columns[i];
         if (
             col.sortable &&
-            (isSortedByArray
-                ? sortedBy.includes(col.name)
-                : sortedBy === col.name)
+            isSortedByArray &&
+            sortedBy.includes(col.name) &&
+            sortedDirection
         ) {
+            const sortIndex = sortedBy.indexOf(col.name);
+            const colSortedDirection = sortedDirection[sortIndex];
+            // When sortedBy is an array, set col.sorted to the index in the array + 1
+            // because 0 index is considered falsely in javascript
+            col.sorted = sortIndex + 1;
+            col.sortAriaLabel =
+                colSortedDirection === 'desc' ? 'descending' : 'ascending';
+            col.sortedDirection = colSortedDirection;
+        } else if (col.sortable && !isSortedByArray && sortedBy === col.name) {
             col.sorted = true;
             col.sortAriaLabel =
                 sortedDirection === 'desc' ? 'descending' : 'ascending';
-            col.sortedDirection = isSortedByArray
-                ? sortedDirection[sortedBy.indexOf(col.name)]
-                : sortedDirection;
-
-            // If sortedBy is an array, set col.sorted to the index in the array + 1 because
-            // 0 index is considered falsely in javascript Otherwise, set it to true
-            col.sorted = isSortedByArray
-                ? sortedBy.indexOf(col.name) + 1
-                : true;
+            col.sortedDirection = sortedDirection;
         } else {
             col.sorted = false;
             col.sortAriaLabel = col.sortable ? 'other' : null;

package/src/lightning/datatable/state.js

@@ -1,3 +1,8 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 /**
  * This function returns the initial state of the datatable.
  * The state object is further manipulated while it is passed around by datatable
@@ -28,12 +33,13 @@ export function getDefaultState() {
         selectedRowsKeys: {},
         lastSelectedRowKey: undefined,
         maxRowSelection: undefined,
+        singleRowSelectionMode: undefined,
 
         hideTableHeader: false,
-        wrapTableHeader: false,
+        wrapTableHeader: 'none',
 
         // indexes:
-        headerIndexes: [],
+        headerIndexes: {},
         indexes: {}, // cannot use a Map because they aren't trackable
 
         // keyboard
@@ -46,7 +52,6 @@ export function getDefaultState() {
         normalized: false,
 
         // header actions
-        wrapText: {},
         wrapTextMaxLines: undefined,
 
         // sort
@@ -100,7 +105,8 @@ export function getDefaultState() {
             table: {},
         },
 
-        // table rendered flag
+        // flags
+        hasReceivedFocus: false,
         hasRenderedFirstTime: false,
     };
 }

package/src/lightning/datatable/templates/div/div.css

@@ -1,2 +1,137 @@
-@import './div.lbc.synthetic.css';
 @import './div.lbc.native.css';
+
+/* TODO: fix last row's bottom border */
+
+.table-header {
+    height: 0;
+}
+
+/* Cells */
+[part='cell'] {
+    position: relative;
+    padding-inline: var(--slds-g-sizing-3, 0.5rem);
+    padding-block: var(--slds-g-sizing-2, 0.25rem);
+    white-space: nowrap;
+    align-items: center;
+}
+
+/* cell focus border color */
+[role='gridcell']:focus,
+[role='rowheader']:focus {
+    box-shadow: var(--slds-g-shadow-6, var(--lwc-shadowButtonFocus, 0 0 3px var(--slds-g-color-brand-base-50, #0176d3)));
+    outline: none;
+}
+
+/* Column Header Cells */
+[role='columnheader'] {
+    outline: none;
+    color: var(--slds-g-color-info-1, #514f4d);
+    font-weight: var(--slds-g-font-weight-7, 700);
+    line-height: normal;
+}
+
+/* Rows */
+
+/* Row borders */
+[data-row-key-value] {
+    border-top: var(--slds-g-sizing-border-1, 1px) solid var(--slds-g-color-border-1, #c9c9c9);
+}
+
+/* row border on hover */
+[data-rowgroup-body] [data-row-key-value]:hover [role='gridcell']:not(.slds-has-focus),
+[data-rowgroup-body] [data-row-key-value]:hover [role='rowheader']:not(.slds-has-focus) {
+    box-shadow: inset 0 var(--slds-g-sizing-border-1, 1px)
+            var(--slds-g-color-border-1, #c9c9c9),
+        inset 0 calc(var(--slds-g-sizing-border-1, 1px) * -1)
+            var(--slds-g-color-border-1, #c9c9c9);
+}
+
+.slds-table_header-fixed [data-row-key-value]:first-child {
+    border-top: 0;
+}
+
+[role='row'] {
+    /* Required for row numbers */
+    counter-increment: row-number;
+    display: flex;
+}
+
+
+/* TODO: Replace with styling hook */
+[role='row']:hover, [data-row-key-value="HEADER"] > * {
+    background-color: var(--slds-g-color-palette-neutral-95, #f3f2f2);
+}
+/* TODO: Replace with styling hook */
+[role='row'].slds-is-selected {
+    background-color: var(--slds-g-color-palette-neutral-90, #ecebea);
+}
+
+.slds-cell-edit:hover {
+    background-color: var(--slds-g-color-surface-container-1);
+}
+
+/* Avoid overwriting wrapping styles in inline mode */
+[part='cell'].slds-cell-wrap {
+    white-space: pre-line;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+}
+
+/* Inline styles from formattedNumber.css and formattedPhone.css */
+div[role='grid'][data-render-mode-inline='true']
+    > div[role='rowgroup'][data-rowgroup-body]
+    > div[role='row']
+    > div[role='gridcell']
+    > span
+    > div
+    > span[data-inline-type='formatted-number']:dir(rtl),
+div[role='grid'][data-render-mode-inline='true']
+    > div[role='rowgroup'][data-rowgroup-body]
+    > div[role='row']
+    > div[role='gridcell']
+    > span
+    > div
+    > a[data-inline-type='formatted-phone']:dir(rtl) {
+    direction: ltr;
+    unicode-bidi: embed;
+}
+
+/* Spinner */
+
+[part="spinner"] {
+    padding: var(--slds-g-sizing-2, 0.25rem) var(--slds-g-sizing-3, 0.5rem);
+    border-top: var(--slds-g-sizing-border-1, 1px) solid var(--slds-g-color-border-1, #c9c9c9);
+}
+
+/* Styles to move header out of
+   padding and improve perf */
+
+[data-rowgroup-header] {
+    display: block;
+}
+
+[data-row-key-value="HEADER"] {
+    display: table-row;
+}
+
+[data-row-key-value="HEADER"] > * {
+    display: table-cell;
+    position: relative;
+    border-bottom: var(--slds-g-sizing-border-1, 1px) solid var(--slds-g-color-neutral-base-70, var(--lwc-colorGray5, #dddbda));
+    padding: 0;
+    vertical-align: middle;
+}
+
+[data-row-key-value="HEADER"] > *:focus, [data-row-key-value="HEADER"] > *:hover {
+    outline: 0;
+    background-color: var(--slds-g-color-neutral-base-100, white);
+}
+
+[data-row-key-value="HEADER"] > *:focus, [data-row-key-value="HEADER"] > *.slds-has-focus {
+    box-shadow: #014486 0 0 0 1px inset, #014486 -0.25rem 0 0 inset;
+}
+
+[part='datagrid-header'] {
+    position: absolute;
+    top: 0;
+}