lightning-base-components 1.22.2-alpha → 1.22.3-alpha

package/src/lightning/datatable/columnWidthManager.js

@@ -156,10 +156,11 @@ export class ColumnWidthManager {
      * Adjusts all the column sizes based on the supplied widths data.
      *
      * @param {Node} template The datatable template
+     * @param {Object} refs The datatable refs
      * @param {Array} columns The column definitions
      * @param {Object} widthsData The widths data object
      */
-    adjustColumnsSize(template, columns, widthsData) {
+    adjustColumnsSize(template, refs, columns, widthsData) {
         const {
             columnWidthStrategy,
             isAutoResizingUpdateQueued,
@@ -170,9 +171,9 @@ export class ColumnWidthManager {
             // If table is hidden when updating and `ResizeObserver` is not available,
             // then updating sizes causes min widths to be set.
             // Hence, the check if ok update from DOM.
-            if (this.shouldResizeWithUpdate(template, widthsData)) {
+            if (this.shouldResizeWithUpdate(template, refs, widthsData)) {
                 adjustedWidths = columnWidthStrategy.getAdjustedColumnWidths(
-                    this.getDatatableInterface(template),
+                    this.getDatatableInterface(template, refs),
                     columns,
                     isAutoResizingUpdateQueued
                 );
@@ -193,12 +194,13 @@ export class ColumnWidthManager {
      * Adjusts all the column widths after a resize happens.
      *
      * @param {Node} template The datatable template
+     * @param {Object} refs The datatable refs
      * @param {Array} columns The column definitions
      * @param {Object} widthsData The widths data object
      */
-    adjustColumnsSizeAfterResize(template, columns, widthsData) {
+    adjustColumnsSizeAfterResize(dt, columns, widthsData) {
         const adjustedWidths = this.columnWidthStrategy.getAdjustedColumnWidths(
-            this.getDatatableInterface(template),
+            this.getDatatableInterface(dt.template, dt.refs),
             columns
         );
         updateColumnWidths(columns, widthsData, adjustedWidths);
@@ -346,14 +348,15 @@ export class ColumnWidthManager {
      * Determines if a column should resize with an update.
      *
      * @param {Node} template The datatable template
+     * @param {Object} refs The datatable refs
      * @param {Object} widthsData The source widths data
      * @returns {Boolean} Whether the column should resize with an update
      */
-    shouldResizeWithUpdate(template, widthsData) {
+    shouldResizeWithUpdate(template, refs, widthsData) {
         if (widthsData.columnWidths.length > 0) {
             // Can resize from DOM when table is visible.
             // Otherwise, only when `ResizeObserver` is available in browser.
-            return isTableRenderedVisible(template);
+            return isTableRenderedVisible(template, refs);
         }
         return true;
     }
@@ -362,12 +365,13 @@ export class ColumnWidthManager {
      * Retrieves the datatable interface from the DOM
      *
      * @param {Node} template The datatable template
+     * @param {Object} refs The datatable refs
      * @returns {Object} The datatable interface
      */
-    getDatatableInterface(template) {
+    getDatatableInterface(template, refs) {
         return {
             getAvailableWidthFromDom() {
-                const scrollerX = getScrollerX(template);
+                const scrollerX = getScrollerX(template, refs);
                 return scrollerX.offsetWidth;
             },
             getDataCellWidths() {
@@ -395,7 +399,9 @@ export class ColumnWidthManager {
                 return result;
             },
             getTableElementWidth() {
-                return template.querySelector('.slds-table').offsetWidth;
+                const elem =
+                    refs?.tableElement || template.querySelector('.slds-table');
+                return elem.offsetWidth;
             },
         };
     }

package/src/lightning/datatable/datatable.js

@@ -210,6 +210,8 @@ export default class LightningDatatable extends LightningElement {
     _widthObserver; // Instance of LightningDatatableResizeObserver
     _hasSetInitialCustomTypes = false;
     _shouldResetCustomTypes = false;
+    _headerHeight = '';
+    _recalculateHeaderHeight = false;
 
     /************************* PUBLIC PROPERTIES *************************/
 
@@ -466,9 +468,11 @@ export default class LightningDatatable extends LightningElement {
     }
 
     /**
-     * If present, the table header is wrapped.
-     * @type {Boolean}
-     * @default false
+     * Specifies how the table header is wrapped. Set to 'all' to wrap all column headers.
+     * Set to 'none' to clip all column headers. Set to 'by-column' to wrap/clip column headers
+     * based on the wrap/clip setting for that individual column. The default is 'by-column'.
+     * @type {String}
+     * @default by-column
      */
     @api
     get wrapTableHeader() {
@@ -477,7 +481,16 @@ export default class LightningDatatable extends LightningElement {
 
     set wrapTableHeader(value) {
         // Untracked state change.
-        this.state.wrapTableHeader = normalizeBoolean(value);
+        this.state.wrapTableHeader = normalizeString(value, {
+            fallbackValue: 'by-column',
+            validValues: ['all', 'by-column', 'none'],
+        });
+
+        if (this.state.wrapTableHeader !== 'none') {
+            this._recalculateHeaderHeight = true;
+        } else {
+            this._headerHeight = '';
+        }
     }
 
     /**
@@ -893,7 +906,9 @@ export default class LightningDatatable extends LightningElement {
     /************************** PRIVATE GETTERS **************************/
 
     get gridContainer() {
-        return getGridContainerFromScrollerY(getScrollerY(this.template));
+        return getGridContainerFromScrollerY(
+            getScrollerY(this.template, this.refs)
+        );
     }
 
     get computedTableContainerClass() {
@@ -987,9 +1002,9 @@ export default class LightningDatatable extends LightningElement {
         if (this._columnWidthManager.isAutoResizingUpdateQueued) {
             style += 'overflow-x: auto;';
         }
-        if (this.state.wrapTableHeader) {
-            // increase padding from 2rem to 3rem on the top when header wraps
-            style += 'padding-top: 3rem;';
+        if (this.state.wrapTableHeader !== 'none') {
+            // update padding style for dynamic header height when header can wrap
+            style += `padding-top: max(2rem, ${this._headerHeight})`;
         }
         return style;
     }
@@ -1102,7 +1117,12 @@ export default class LightningDatatable extends LightningElement {
             !!this._privateTypes.privateCustomTypes.size;
 
         this._renderManager = new RenderManager();
-        this.getWrapperHeight = () => getScrollerX(this.template).offsetHeight;
+        this.getWrapperHeight = () => {
+            const scrollerX = getScrollerX(this.template, this.refs);
+            const paddingTop =
+                parseFloat(getComputedStyle(scrollerX).paddingTop) || 0;
+            return scrollerX.offsetHeight - paddingTop;
+        };
     }
 
     /**
@@ -1230,6 +1250,7 @@ export default class LightningDatatable extends LightningElement {
         const {
             _columnWidthManager,
             gridContainer,
+            refs,
             state,
             template,
             widthsData,
@@ -1268,6 +1289,7 @@ export default class LightningDatatable extends LightningElement {
             // Tracked state changes.
             _columnWidthManager.adjustColumnsSize(
                 template,
+                refs,
                 columns,
                 widthsData
             );
@@ -1278,30 +1300,29 @@ export default class LightningDatatable extends LightningElement {
             if (fireResizeEvent) {
                 this.fireOnResize(false);
             }
+            this._recalculateHeaderHeight = true;
             this.updateTableAndScrollerStyleOnRender();
         }
 
         let { _widthObserver } = this;
         if (!_widthObserver) {
             // Tracked state changes.
-            _widthObserver = new LightningDatatableResizeObserver(
-                template,
-                () => {
-                    // Tracked state change.
-                    _columnWidthManager.adjustColumnsSizeAfterResize(
-                        template,
-                        state.columns,
-                        widthsData
-                    );
-                    // Managing cell widths is required for role-based render mode.
-                    if (state.renderModeRoleBased) {
-                        recomputeCellStyles(state);
-                    }
+            _widthObserver = new LightningDatatableResizeObserver(this, () => {
+                // Tracked state change.
+                _columnWidthManager.adjustColumnsSizeAfterResize(
+                    this,
+                    state.columns,
+                    widthsData
+                );
+                this._recalculateHeaderHeight = true;
+                // Managing cell widths is required for role-based render mode.
+                if (state.renderModeRoleBased) {
+                    recomputeCellStyles(state);
                 }
-            );
+            });
             this._widthObserver = _widthObserver;
         } else if (!_widthObserver.isConnected()) {
-            _widthObserver.observe(template);
+            _widthObserver.observe(template, refs);
         }
 
         handlePrefetch.call(this);
@@ -1332,7 +1353,14 @@ export default class LightningDatatable extends LightningElement {
                     !cellElementChild.classList.contains(FOCUS_CLASS)
                 ) {
                     // Tracked state change.
-                    setFocusActiveCell(state, template, null, null, false);
+                    setFocusActiveCell(
+                        state,
+                        template,
+                        refs,
+                        null,
+                        null,
+                        false
+                    );
                 }
             }
         }
@@ -1354,9 +1382,10 @@ export default class LightningDatatable extends LightningElement {
                 }
             }
             if (!hasRenderedFirstTime) {
-                _renderManager.connectResizeObserver(
-                    template.querySelector('div.dt-outer-container')
-                );
+                const outerContainer =
+                    refs?.outerContainer ||
+                    template.querySelector('div.dt-outer-container');
+                _renderManager.connectResizeObserver(outerContainer);
             }
             if (!_renderManager.hasWrapperHeight()) {
                 _renderManager.updateWrapperHeight(this.getWrapperHeight);
@@ -1381,10 +1410,38 @@ export default class LightningDatatable extends LightningElement {
                 this.updateUrlCellsLinkInfo();
             }
         }
+
+        this.updateHeaderHeight();
+    }
+
+    updateHeaderHeight() {
+        if (
+            this.state.wrapTableHeader !== 'none' &&
+            this._recalculateHeaderHeight
+        ) {
+            // Need to wait a frame for width changes on last render to take effect
+            // eslint-disable-next-line @lwc/lwc/no-async-operation
+            requestAnimationFrame(() => {
+                const headerElements = this.template.querySelectorAll(
+                    '[role="columnheader"] lightning-primitive-header-factory'
+                );
+                let headerHeight = 0;
+                for (let i = 0; i < headerElements.length; i += 1) {
+                    const headerCellHeight = headerElements[i].getDomHeight();
+                    if (headerCellHeight > headerHeight) {
+                        headerHeight = headerCellHeight;
+                    }
+                }
+                // Header height only accounts for the height of the text
+                // Add 16 px for padding around the text
+                this._headerHeight = `max(2rem, ${headerHeight + 16}px)`;
+                this._recalculateHeaderHeight = false;
+            });
+        }
     }
 
     updateTableAndScrollerStyleOnRender() {
-        const scrollYEle = getScrollerY(this.template);
+        const scrollYEle = getScrollerY(this.template, this.refs);
         const tableElement = getGridContainerFromScrollerY(scrollYEle);
         if (tableElement) {
             tableElement.style = this.computedTableStyle;
@@ -1593,6 +1650,7 @@ export default class LightningDatatable extends LightningElement {
             }
             this.fireOnResize(true);
             this.fixHeaderForSafari();
+            this._recalculateHeaderHeight = true;
         }
     }
 
@@ -1673,7 +1731,7 @@ export default class LightningDatatable extends LightningElement {
             this.setActiveCell(rowKeyValue, colKeyValue);
         }
         // Tracked state change.
-        setFocusActiveCell(state, this.template);
+        setFocusActiveCell(state, this.template, this.refs);
     }
 
     /**
@@ -1991,7 +2049,7 @@ export default class LightningDatatable extends LightningElement {
         // if there is previously focused cell which was deleted set focus from cellToFocusNext
         if (state.activeCell && state.cellToFocusNext) {
             // Tracked state change.
-            setFocusActiveCell(state, this.template);
+            setFocusActiveCell(state, this.template, this.refs);
         }
     }
 
@@ -2043,7 +2101,7 @@ export default class LightningDatatable extends LightningElement {
         // If there is previously focused cell which was deleted set focus from cellToFocusNext.
         if (state.activeCell && state.cellToFocusNext) {
             // Tracked state change.
-            setFocusActiveCell(state, this.template);
+            setFocusActiveCell(state, this.template, this.refs);
         }
     }
 
@@ -2069,11 +2127,16 @@ export default class LightningDatatable extends LightningElement {
 
         // no need to handle other virtualization/row height logic
         // if heights need to be reset
-        if (this.state.shouldResetHeights) {
+        if (state.shouldResetHeights) {
             resetRowHeights(state);
-            this.state.shouldResetHeights = false;
+            state.shouldResetHeights = false;
         } else if (virtualizedRows) {
-            handleVariableRowHeights(this.template, state, this.renderedRows);
+            handleVariableRowHeights(
+                this.template,
+                state,
+                this.renderedRows,
+                this.refs
+            );
         }
     }
 
@@ -2129,10 +2192,10 @@ export default class LightningDatatable extends LightningElement {
      * @returns {Object} containing the visible dimensions of the table { left, right, top, bottom, }
      */
     getViewableRect() {
-        const { template } = this;
-        const scrollerY = getScrollerY(template);
+        const { refs, template } = this;
+        const scrollerY = getScrollerY(template, refs);
         const scrollerYRect = scrollerY.getBoundingClientRect();
-        const scrollerX = getScrollerX(template);
+        const scrollerX = getScrollerX(template, refs);
         const scrollerXRect = scrollerX.getBoundingClientRect();
 
         return {

package/src/lightning/datatable/infiniteLoading.js

@@ -90,20 +90,20 @@ export function handleLoadMoreCheck(event) {
  * dispatches the `loadmore` event.
  */
 export function handlePrefetch() {
-    const { state, template } = this;
+    const { state, template, refs } = this;
     if (
         state.isLoading ||
         !state.enableInfiniteLoading ||
         (state.enableViewportRendering &&
             this._renderManager &&
             !this._renderManager.hasWrapperHeight()) ||
-        !hasData(template)
+        !state.rows.length
     ) {
         // Don't prefetch if already loading or data is not set yet.
         return;
     }
 
-    const scrollerY = getScrollerY(template);
+    const scrollerY = getScrollerY(template, refs);
     if (scrollerY && isScrollerVisible(scrollerY) && !isScrollable(scrollerY)) {
         this.dispatchEvent(new CustomEvent('loadmore'));
     }
@@ -124,28 +124,16 @@ function isScrollable(scroller) {
 
 /**
  * Determines if a scroller element's scroll bars are visible.
+ * Check for values over 1 since div tables have a height of 1 on
+ * initial render but should not trigger loadmore.
  *
  * @param {Element} scroller The scroller element to check
  * @returns {Boolean} Whether the scroller element's scroll bars are visible
  */
 function isScrollerVisible(scroller) {
     return !!(
-        scroller.offsetParent ||
-        scroller.offsetHeight ||
-        scroller.offsetWidth
-    );
-}
-
-/**
- * Determines if a template has data
- *
- * @param {Element} template The parent element to check
- * @returns {Boolean} Whether or not the element contains any data
- */
-function hasData(template) {
-    return (
-        template.querySelectorAll(
-            'tbody > tr, [role="rowgroup"] > [role="row"]'
-        ).length > 0
+        scroller.offsetParent &&
+        scroller.offsetHeight > 1 &&
+        scroller.offsetWidth > 1
     );
 }

package/src/lightning/datatable/inlineEdit.js

@@ -211,7 +211,7 @@ export function closeInlineEdit(dt) {
  * @param {string} colKeyValue - column key of the edited cell
  */
 function processInlineEditFinish(dt, reason, rowKeyValue, colKeyValue) {
-    const { state, template } = dt;
+    const { state, template, refs } = dt;
     const { inlineEdit: inlineEditState } = state;
 
     const shouldSaveData =
@@ -259,11 +259,16 @@ function processInlineEditFinish(dt, reason, rowKeyValue, colKeyValue) {
 
     if (reason !== 'lost-focus') {
         if (reason === 'tab-pressed-next') {
-            reactToTabForward(state, template);
+            reactToTabForward(state, template, refs);
         } else if (reason === 'tab-pressed-prev') {
-            reactToTabBackward(state, template);
+            reactToTabBackward(state, template, refs);
         } else {
-            setFocusActiveCell(state, template, NAVIGATION_DIR.USE_CURRENT);
+            setFocusActiveCell(
+                state,
+                template,
+                refs,
+                NAVIGATION_DIR.USE_CURRENT
+            );
         }
     }
 
@@ -391,8 +396,8 @@ export function openInlineEditOnActiveCell(dt) {
  */
 // eslint-disable-next-line @lwc/lwc/no-async-await
 async function setFocusAndOpenInlineEdit(dt) {
-    const { state, template } = dt;
-    await setFocusActiveCell(state, template, NAVIGATION_DIR.USE_CURRENT);
+    const { state, template, refs } = dt;
+    await setFocusActiveCell(state, template, refs, NAVIGATION_DIR.USE_CURRENT);
     const cellElement = getActiveCellElement(template, state);
     openInlineEdit(dt, cellElement);
 }