lightning-base-components 1.22.1-alpha → 1.22.3-alpha

package/src/lightning/datatable/keyboard.js

@@ -107,29 +107,29 @@ export function handleKeydownOnTable(event) {
  * @returns {Object} Mutated state
  */
 function reactToKeyboardInActionMode(dt, event) {
-    const { state, template } = dt;
+    const { refs, state, template } = dt;
     switch (event.detail.keyCode) {
         case ARROW_LEFT:
-            reactToArrowLeft(state, template, event);
+            reactToArrowLeft(state, template, refs, event);
             break;
         case ARROW_RIGHT:
-            reactToArrowRight(state, template, event);
+            reactToArrowRight(state, template, refs, event);
             break;
         case ARROW_UP:
-            reactToArrowUp(state, template, event);
+            reactToArrowUp(state, template, refs, event);
             break;
         case ARROW_DOWN:
-            reactToArrowDown(state, template, event);
+            reactToArrowDown(state, template, refs, event);
             break;
         case ENTER:
         case SPACE:
-            reactToEnter(state, template, event);
+            reactToEnter(state, template, refs, event);
             break;
         case ESCAPE:
-            reactToEscape(state, template, event);
+            reactToEscape(state, template, refs, event);
             break;
         case TAB:
-            reactToTab(state, template, event);
+            reactToTab(state, template, refs, event);
             break;
         default:
             break;
@@ -137,7 +137,7 @@ function reactToKeyboardInActionMode(dt, event) {
 }
 
 function reactToKeyboardInNavMode(dt, event) {
-    const { state, template } = dt;
+    const { refs, state, template } = dt;
     const {
         activeCell: { colKeyValue, rowKeyValue },
     } = state;
@@ -157,41 +157,41 @@ function reactToKeyboardInNavMode(dt, event) {
     switch (event.keyCode) {
         case ARROW_LEFT:
             event.preventDefault();
-            reactToArrowLeft(state, template, syntheticEvent);
+            reactToArrowLeft(state, template, refs, syntheticEvent);
             break;
         case ARROW_RIGHT:
             event.preventDefault();
-            reactToArrowRight(state, template, syntheticEvent);
+            reactToArrowRight(state, template, refs, syntheticEvent);
             break;
         case ARROW_UP:
             event.preventDefault();
-            reactToArrowUp(state, template, syntheticEvent);
+            reactToArrowUp(state, template, refs, syntheticEvent);
             break;
         case ARROW_DOWN:
             event.preventDefault();
-            reactToArrowDown(state, template, syntheticEvent);
+            reactToArrowDown(state, template, refs, syntheticEvent);
             break;
         case ENTER:
         case SPACE:
             event.preventDefault();
-            reactToEnter(state, template, syntheticEvent);
+            reactToEnter(state, template, refs, syntheticEvent);
             break;
         case ESCAPE:
             // td, th or div[role=gridcell/rowheader] is the active element in the
             // action mode if cell doesn't have action elements; hence this can be
             // reached and we should react to escape as exiting from action mode
             syntheticEvent.detail.keyEvent = event;
-            reactToEscape(state, template, syntheticEvent);
+            reactToEscape(state, template, refs, syntheticEvent);
             break;
         case TAB:
-            reactToTab(state, template, syntheticEvent);
+            reactToTab(state, template, refs, syntheticEvent);
             break;
         default:
             break;
     }
 }
 
-function reactToArrowLeft(state, template, event) {
+function reactToArrowLeft(state, template, refs, event) {
     const { rowKeyValue, colKeyValue } = event.detail;
     const { colIndex } = getCellByKeys(state, rowKeyValue, colKeyValue);
     // Move from navigation mode to row mode when user
@@ -203,7 +203,7 @@ function reactToArrowLeft(state, template, event) {
         // Untracked state change.
         setRowNavigationMode(state);
         // Tracked state change.
-        setFocusActiveRow(state, template);
+        setFocusActiveRow(state, template, refs);
     } else {
         const nextColIndex = getNextIndexLeft(state, colIndex);
         if (nextColIndex === undefined) {
@@ -218,11 +218,11 @@ function reactToArrowLeft(state, template, event) {
             state.columns[nextColIndex].colKeyValue
         );
         // Tracked state change.
-        setFocusActiveCell(state, template, NAVIGATION_DIR.LEFT);
+        setFocusActiveCell(state, template, refs, NAVIGATION_DIR.LEFT);
     }
 }
 
-function reactToArrowRight(state, template, event) {
+function reactToArrowRight(state, template, refs, event) {
     const { rowKeyValue, colKeyValue } = event.detail;
     const { colIndex } = getCellByKeys(state, rowKeyValue, colKeyValue);
     const nextColIndex = getNextIndexRight(state, colIndex);
@@ -237,10 +237,10 @@ function reactToArrowRight(state, template, event) {
         rowKeyValue,
         state.columns[nextColIndex].colKeyValue
     );
-    setFocusActiveCell(state, template, NAVIGATION_DIR.RIGHT);
+    setFocusActiveCell(state, template, refs, NAVIGATION_DIR.RIGHT);
 }
 
-function reactToArrowUp(state, template, event) {
+function reactToArrowUp(state, template, refs, event) {
     const { rowKeyValue, colKeyValue, keyEvent } = event.detail;
     const { rowIndex } = getCellByKeys(state, rowKeyValue, colKeyValue);
     const nextRowIndex = getNextIndexUp(state, rowIndex);
@@ -264,10 +264,10 @@ function reactToArrowUp(state, template, event) {
         colKeyValue
     );
     // Tracked state change.
-    setFocusActiveCell(state, template, NAVIGATION_DIR.USE_CURRENT);
+    setFocusActiveCell(state, template, refs, NAVIGATION_DIR.USE_CURRENT);
 }
 
-function reactToArrowDown(state, template, event) {
+function reactToArrowDown(state, template, refs, event) {
     const { rowKeyValue, colKeyValue, keyEvent } = event.detail;
     const { rowIndex } = getCellByKeys(state, rowKeyValue, colKeyValue);
     const nextRowIndex = getNextIndexDown(state, rowIndex);
@@ -291,10 +291,10 @@ function reactToArrowDown(state, template, event) {
         colKeyValue
     );
     // Tracked state change.
-    setFocusActiveCell(state, template, NAVIGATION_DIR.USE_CURRENT);
+    setFocusActiveCell(state, template, refs, NAVIGATION_DIR.USE_CURRENT);
 }
 
-function reactToEnter(state, template, event) {
+function reactToEnter(state, template, refs, event) {
     if (state.keyboardMode === KEYBOARD_NAVIGATION_MODE) {
         // Untracked state change.
         state.keyboardMode = KEYBOARD_ACTION_MODE;
@@ -315,7 +315,7 @@ function reactToEnter(state, template, event) {
     }
 }
 
-function reactToEscape(state, template, event) {
+function reactToEscape(state, template, refs, event) {
     if (state.keyboardMode === KEYBOARD_ACTION_MODE) {
         // When the table is in action mode this event shouldn't bubble
         // because if the table in inside a modal it should prevent the modal closes
@@ -324,11 +324,11 @@ function reactToEscape(state, template, event) {
         state.keyboardMode = KEYBOARD_NAVIGATION_MODE;
         // Tracked state changes.
         setModeActiveCell(state, template);
-        setFocusActiveCell(state, template, NAVIGATION_DIR.RESET);
+        setFocusActiveCell(state, template, refs, NAVIGATION_DIR.RESET);
     }
 }
 
-function reactToTab(state, template, event) {
+function reactToTab(state, template, refs, event) {
     event.preventDefault();
     event.stopPropagation();
 
@@ -347,9 +347,9 @@ function reactToTab(state, template, event) {
             }
             // Tab in proper direction based on shift key press.
             if (direction === 'BACKWARD') {
-                reactToTabBackward(state, template);
+                reactToTabBackward(state, template, refs);
             } else {
-                reactToTabForward(state, template);
+                reactToTabForward(state, template, refs);
             }
         } else {
             // Untracked state change.
@@ -366,7 +366,7 @@ function reactToTab(state, template, event) {
     }
 }
 
-export function reactToTabForward(state, template) {
+export function reactToTabForward(state, template, refs) {
     const { nextColIndex, nextRowIndex } = getNextIndexOnTab(state, 'FORWARD');
     // Tracked state change.
     setBlurActiveCell(state, template);
@@ -378,12 +378,12 @@ export function reactToTabForward(state, template) {
         state.columns[nextColIndex].colKeyValue
     );
     // Tracked state change.
-    setFocusActiveCell(state, template, NAVIGATION_DIR.TAB_FORWARD, {
+    setFocusActiveCell(state, template, refs, NAVIGATION_DIR.TAB_FORWARD, {
         action: 'tab',
     });
 }
 
-export function reactToTabBackward(state, template) {
+export function reactToTabBackward(state, template, refs) {
     const { nextColIndex, nextRowIndex } = getNextIndexOnTab(state, 'BACKWARD');
     // Tracked state change.
     setBlurActiveCell(state, template);
@@ -395,7 +395,7 @@ export function reactToTabBackward(state, template) {
         state.columns[nextColIndex].colKeyValue
     );
     // Tracked state change.
-    setFocusActiveCell(state, template, NAVIGATION_DIR.TAB_BACKWARD, {
+    setFocusActiveCell(state, template, refs, NAVIGATION_DIR.TAB_BACKWARD, {
         action: 'tab',
     });
 }
@@ -465,7 +465,7 @@ function getNextIndexOnTabBackward(state, rowIndex, colIndex) {
  * @returns Mutated state
  */
 export function reactToKeyboardOnRow(dt, event) {
-    const { state, template } = dt;
+    const { refs, state, template } = dt;
     // TODO: Adapt this selector to also work in a role-based table once tree-grid is also migrated
     const { localName } = event.target;
     if (
@@ -475,16 +475,16 @@ export function reactToKeyboardOnRow(dt, event) {
     ) {
         switch (event.detail.keyCode) {
             case ARROW_LEFT:
-                reactToArrowLeftOnRow(dt, state, template, event);
+                reactToArrowLeftOnRow(dt, state, template, refs, event);
                 break;
             case ARROW_RIGHT:
-                reactToArrowRightOnRow(dt, state, template, event);
+                reactToArrowRightOnRow(dt, state, template, refs, event);
                 break;
             case ARROW_UP:
-                reactToArrowUpOnRow(dt, state, template, event);
+                reactToArrowUpOnRow(state, template, refs, event);
                 break;
             case ARROW_DOWN:
-                reactToArrowDownOnRow(dt, state, template, event);
+                reactToArrowDownOnRow(state, template, refs, event);
                 break;
             default:
                 break;
@@ -492,7 +492,7 @@ export function reactToKeyboardOnRow(dt, event) {
     }
 }
 
-function reactToArrowLeftOnRow(dt, state, template, event) {
+function reactToArrowLeftOnRow(dt, state, template, refs, event) {
     const { rowKeyValue, rowHasChildren, rowExpanded, rowLevel } = event.detail;
     // Check if row needs to be collapsed.
     // If not, go to parent and focus there.
@@ -515,13 +515,13 @@ function reactToArrowLeftOnRow(dt, state, template, event) {
                     colKeyValue
                 );
                 // Tracked state change.
-                setFocusActiveRow(state, template);
+                setFocusActiveRow(state, template, refs);
             }
         }
     }
 }
 
-function reactToArrowRightOnRow(dt, state, template, event) {
+function reactToArrowRightOnRow(dt, state, template, refs, event) {
     const { rowKeyValue, rowHasChildren, rowExpanded } = event.detail;
     // Check if row needs to be expanded.
     // Expand row if has children and is collapsed.
@@ -536,11 +536,11 @@ function reactToArrowRightOnRow(dt, state, template, event) {
         // Untracked state change.
         unsetRowNavigationMode(state);
         // Tracked state change.
-        setFocusActiveCell(state, template, NAVIGATION_DIR.USE_CURRENT);
+        setFocusActiveCell(state, template, refs, NAVIGATION_DIR.USE_CURRENT);
     }
 }
 
-function reactToArrowUpOnRow(state, template, event) {
+function reactToArrowUpOnRow(state, template, refs, event) {
     // Move tabIndex 0 one row down.
     const { rowKeyValue, keyEvent } = event.detail;
     const { treeColumn } = state;
@@ -563,12 +563,12 @@ function reactToArrowUpOnRow(state, template, event) {
                 colKeyValue
             );
             // Tracked state change.
-            setFocusActiveRow(state, template);
+            setFocusActiveRow(state, template, refs);
         }
     }
 }
 
-function reactToArrowDownOnRow(state, template, event) {
+function reactToArrowDownOnRow(state, template, refs, event) {
     // Move tabIndex 0 one row down.
     const { rowKeyValue, keyEvent } = event.detail;
     const { treeColumn } = state;
@@ -591,7 +591,7 @@ function reactToArrowDownOnRow(state, template, event) {
                 colKeyValue
             );
             // Tracked state change.
-            setFocusActiveRow(state, template);
+            setFocusActiveRow(state, template, refs);
         }
     }
 }
@@ -1175,6 +1175,7 @@ function setMode(cell, cellElementChild, keyboardMode, info) {
  * - set the focus to the cell
  * @param {Object} state - The datatable state
  * @param {Node} template - The custom element template `this.template`
+ * @param {Object} refs - The datatable refs
  * @param {Integer} direction - The direction (-1 left, 1 right and 0 for no direction) its used to know which actionable element to activate.
  * @param {Object} info - Extra information when setting the cell mode; currently only set when pressing tab
  * @param {Boolean} [shouldScroll = true] - Whether scrollTop should be adjusted when setting focus
@@ -1182,6 +1183,7 @@ function setMode(cell, cellElementChild, keyboardMode, info) {
 export function setFocusActiveCell(
     state,
     template,
+    refs,
     direction,
     info,
     shouldScroll = true
@@ -1196,7 +1198,7 @@ export function setFocusActiveCell(
 
     // if the cell wasn't found, but does exist in the table, scroll to where it should be
     if (shouldScroll && !cellElement && isActiveCellValid(state)) {
-        scrollToCell(state, template, rowIndex);
+        scrollToCell(state, template, refs, rowIndex);
     }
 
     const rowKeyValue =
@@ -1395,8 +1397,9 @@ export function addFocusStylesToActiveCell(state, template) {
  *
  * @param {Object} state - The datatable state
  * @param {Node} template - the custom element root `this.template`
+ * @param {Object} refs - The datatable refs
  */
-function setFocusActiveRow(state, template) {
+function setFocusActiveRow(state, template, refs) {
     const { rowIndex } = state.activeCell;
     const rowElement = getActiveCellRowElement(template, state);
 
@@ -1404,7 +1407,7 @@ function setFocusActiveRow(state, template) {
     // eslint-disable-next-line @lwc/lwc/no-async-operation
     setTimeout(() => {
         rowElement.focus({ preventScroll: true });
-        updateScrollTop(state, template, rowElement);
+        updateScrollTop(state, template, refs, rowElement);
     }, 0);
 }
 
@@ -1727,8 +1730,8 @@ export function getRowParentIndex(state, rowLevel, rowIndex) {
     return -1;
 }
 
-function updateScrollTop(state, template, element) {
-    const scrollableY = getScrollerY(template);
+function updateScrollTop(state, template, refs, element) {
+    const scrollableY = getScrollerY(template, refs);
     const scrollingParent = scrollableY.parentElement;
     const parentRect = scrollingParent.getBoundingClientRect();
     const findMeRect = element.getBoundingClientRect();
@@ -1740,7 +1743,7 @@ function updateScrollTop(state, template, element) {
     findFirstVisibleIndex(state, scrollableY.scrollTop);
 }
 
-function scrollToCell(state, template, rowIndex) {
+function scrollToCell(state, template, refs, rowIndex) {
     const { firstVisibleIndex, bufferSize, renderedRowCount, rowHeight } =
         state;
 
@@ -1750,7 +1753,7 @@ function scrollToCell(state, template, rowIndex) {
         scrollTop = Math.max(scrollTop - rowsInViewport * rowHeight, 0);
     }
 
-    const scrollableY = getScrollerY(template);
+    const scrollableY = getScrollerY(template, refs);
     scrollableY.scrollTop = scrollTop;
     findFirstVisibleIndex(state, scrollTop);
 }

package/src/lightning/datatable/resizeObserver.js

@@ -9,13 +9,16 @@ export class LightningDatatableResizeObserver {
     /**
      * Create either a standard ResizeObserver via LightningResizeObserver.
      */
-    constructor(template, resizeCallback) {
-        const resizeTarget = template.querySelector(WIDTH_OBSERVER_SELECTOR);
+    constructor(dt, resizeCallback) {
+        const resizeTarget =
+            dt.refs?.widthObserver ||
+            dt.template.querySelector(WIDTH_OBSERVER_SELECTOR);
         // Create ResizeObserver and begin observing for changes.
         // Calculate and modify the column widths when there are changes to the dimensions
         // and when the table is rendered and visible on screen.
         this._resizeObserver = new LightningResizeObserver(() => {
-            if (this._connected && isTableRenderedVisible(template)) {
+            const { refs, template } = dt;
+            if (this._connected && isTableRenderedVisible(template, refs)) {
                 resizeCallback();
             }
         });
@@ -24,8 +27,10 @@ export class LightningDatatableResizeObserver {
     }
 
     // Begins observing the specified element for changes in dimension
-    observe(template) {
-        const targetElement = template.querySelector(WIDTH_OBSERVER_SELECTOR);
+    observe(template, refs) {
+        const targetElement =
+            refs?.widthObserver ||
+            template.querySelector(WIDTH_OBSERVER_SELECTOR);
 
         if (this._resizeObserver) {
             this._resizeObserver.observe(targetElement);

package/src/lightning/datatable/rows.js

@@ -385,14 +385,13 @@ export function updateCell(state, rowIndex, colIndex) {
     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;
     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;
@@ -404,7 +403,8 @@ export function updateCell(state, rowIndex, colIndex) {
         cell.typeAttribute0 = getRowNumberError(rowErrors, cell.scopeColValue);
     }
 
-    let cellClass = cell.class || '';
+    const cellAttributes = getCellAttributesValues(col);
+    let cellClass = resolveAttributeValue(cellAttributes.class, rowData) || '';
     if (cell.hasTreeData && !cellClass) {
         cellClass += (cellClass.length ? ' ' : '') + TREE__ITEM_CLASS;
     }

package/src/lightning/datatable/rowsInlining.js

@@ -229,6 +229,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;
     }
@@ -264,10 +265,10 @@ export function updateInlineClassAndStyle(cell, cellClass) {
         cellClass += (cellClass.length ? ' ' : '') + CELL_WRAP;
         computedCellDivClass += HYPHENATE_CLASS;
         const { wrapTextMaxLines } = cell;
-        if (wrapTextMaxLines) {
-            computedCellDivClass += ` ${LINE_CLAMP_CLASS}`;
-            computedCellDivStyle = `--lwc-lineClamp: ${wrapTextMaxLines};`;
-        }
+        computedCellDivClass += ` ${LINE_CLAMP_CLASS}`;
+        computedCellDivStyle = `--lwc-lineClamp: ${
+            wrapTextMaxLines || 'none'
+        };`;
     } else {
         computedCellDivClass += TRUNCATE_CLASS;
     }

package/src/lightning/datatable/state.js

@@ -30,7 +30,7 @@ export function getDefaultState() {
         maxRowSelection: undefined,
 
         hideTableHeader: false,
-        wrapTableHeader: false,
+        wrapTableHeader: 'by-column',
 
         // indexes:
         headerIndexes: [],
@@ -46,7 +46,6 @@ export function getDefaultState() {
         normalized: false,
 
         // header actions
-        wrapText: {},
         wrapTextMaxLines: undefined,
 
         // sort