lightning-base-components 1.14.3-alpha → 1.15.1-alpha

package/src/lightning/datatable/datatable.js

@@ -9,7 +9,7 @@ import {
     isSafari,
     synchronizeAttrs,
 } from 'lightning/utilsPrivate';
-import { LightningDatatableResizeObserver } from './datatableResizeObserver';
+import { LightningDatatableResizeObserver } from './resizeObserver';
 import { ColumnWidthManager } from './columnWidthManager';
 import { getDefaultState } from './state';
 import { getColumns, normalizeColumns, generateHeaderIndexes } from './columns';
@@ -38,7 +38,7 @@ import {
     getCSSWidthStyleOfTable,
     updateColumnWidthsMetadata,
     getResizerDefaultState,
-} from './resizer';
+} from './columnResizer';
 import {
     syncSelectedRowsKeys,
     handleRowSelectionChange,
@@ -81,6 +81,9 @@ import {
     addFocusStylesToActiveCell,
     refocusCellElement,
     isCellElement,
+    getActiveCellElement,
+    getDataRow,
+    FOCUS_CLASS,
 } from './keyboard';
 import {
     getRowNumberOffset,
@@ -135,14 +138,16 @@ import {
 import {
     isViewportRenderingEnabled,
     setViewportRendering,
-    getDTRows,
-    getDTRenderedRowCount,
-    setDTRenderedRowCount,
     getDTWrapperHeight,
-    normalizeVirtualization,
+    setVirtualize,
     RenderManager,
-    DEFAULT_ROW_HEIGHT,
 } from './renderManager';
+import {
+    handleVariableRowHeights,
+    resetRowHeights,
+    resetTableHeight,
+    findFirstVisibleIndex,
+} from './virtualization';
 
 import { hasTreeDataType } from './tree';
 import { setErrors, getTableError, getErrors } from './errors';
@@ -200,14 +205,14 @@ export default class LightningDatatable extends LightningElement {
     _customerSelectedRows = null;
     _datatableId = generateUniqueId('lgt-datatable');
     _draftValues = [];
-    _firstVisibleIndex = 0; // first row that should be visible in viewport, used for virtualization
     _isResizing = false; // Whether resizing is in progress
+    _lastRenderedRow = null; // last rendered row, used for UTAM
     _privateTypes = {};
     _privateWidthObserver = null; // Instance of LightningDatatableResizeObserver
     _renderMode = 'table';
-    _renderedRowCount = 0;
+    _shouldResetFocus = false; // used to ensure focus isn't lost from changes in renderedRows
+    _shouldResetHeights = false;
     _suppressBottomBar = false;
-    _virtualize = '';
 
     /************************* PUBLIC PROPERTIES *************************/
 
@@ -287,6 +292,7 @@ export default class LightningDatatable extends LightningElement {
         // do necessary updates since rows have changed
         if (hasValidKeyField(this.state)) {
             this.updateRowsState();
+            resetTableHeight(this.state);
         }
         if (this._customerSelectedRows) {
             this.setSelectedRows(this._customerSelectedRows);
@@ -342,6 +348,7 @@ export default class LightningDatatable extends LightningElement {
 
     set enableInfiniteLoading(value) {
         setInfiniteLoading(this.state, value);
+        handlePrefetch.call(this, this.template, this.state);
     }
 
     /**
@@ -519,24 +526,17 @@ export default class LightningDatatable extends LightningElement {
 
     set renderConfig(value) {
         if (typeof value === 'object' && !isIE11) {
-            const { viewportRendering, virtualize } = value;
-            setViewportRendering(this.state, viewportRendering);
-            if (this.state.renderModeRoleBased) {
-                this._virtualize = normalizeVirtualization(virtualize);
-            }
+            setViewportRendering(this.state, value.viewportRendering);
 
             this._renderManager.configure(
-                this.getRows,
+                this.state,
                 this.getWrapperHeight,
-                this.getRenderedRowCount,
-                this.setRenderedRowCount,
                 value
             );
             // if renderConfig already exists, update rendering
             if (this._renderConfig) {
                 this._renderManager.updateViewportRendering(
-                    this.state.rows,
-                    this.setRenderedRowCount,
+                    this.state,
                     this.gridContainer,
                     true
                 );
@@ -565,6 +565,10 @@ export default class LightningDatatable extends LightningElement {
             validValues: ['default', 'role-based'],
         });
         this.state.renderModeRoleBased = this._renderMode === 'role-based';
+        this._columnWidthManager.setRenderMode(this.renderMode);
+        if (this._renderConfig) {
+            setVirtualize(this.state, this._renderConfig.virtualize);
+        }
         updateCellClassForRoleBasedMode(this.state);
     }
 
@@ -803,21 +807,23 @@ export default class LightningDatatable extends LightningElement {
      * virtualization is enabled
      */
     get computedTbodyStyle() {
-        const style = [];
+        const style = {};
+        const { firstVisibleIndex, bufferSize, virtualize, tableHeight } =
+            this.state;
         if (
             hasRowNumberColumn(this.state) &&
             getRowNumberOffset(this.state) >= 0
         ) {
-            style.push(
-                'counter-reset: row-number ' + getRowNumberOffset(this.state)
+            const firstRenderedRow = Math.max(
+                firstVisibleIndex - bufferSize,
+                0
             );
+            const rowNumber = firstRenderedRow + getRowNumberOffset(this.state);
+            style['counter-reset'] = `row-number ${rowNumber}`;
         }
-        if (this._virtualize) {
-            const length = this.state.rows.length;
-            style.push(
-                'position: relative',
-                `height:${length * DEFAULT_ROW_HEIGHT}px`
-            );
+        if (virtualize) {
+            style.position = 'relative';
+            style.height = `${tableHeight}px`;
         }
         return styleToString(style);
     }
@@ -938,18 +944,21 @@ export default class LightningDatatable extends LightningElement {
     }
 
     get renderedRows() {
-        if (this._virtualize) {
+        const { virtualize, rows, renderedRowCount } = this.state;
+        if (virtualize) {
             const { firstIndex, lastIndex } =
-                this._renderManager.getRenderedRange(
-                    this._firstVisibleIndex,
-                    this._renderedRowCount
-                );
-            return this.state.rows.slice(firstIndex, lastIndex);
+                this._renderManager.getRenderedRange(this.state);
+            this._lastRenderedRow = lastIndex + 1; // UTAM rows are 1-indexed
+            // we shouldn't lose focus from re-renders caused by a change in renderedRows
+            this._shouldResetFocus = true;
+            return rows.slice(firstIndex, lastIndex);
         }
         if (this.viewportRendering && !isIE11) {
-            return this.state.rows.slice(0, this._renderedRowCount);
+            this._lastRenderedRow = renderedRowCount;
+            return rows.slice(0, renderedRowCount);
         }
-        return this.state.rows;
+        this._lastRenderedRow = rows.length;
+        return rows;
     }
 
     get showSelectAllCheckbox() {
@@ -980,14 +989,10 @@ export default class LightningDatatable extends LightningElement {
         super();
 
         this._privateTypes = new DatatableTypes(this.constructor.customTypes);
-
         this._columnWidthManager = new ColumnWidthManager(this.widthsData);
         this.updateRowsAndCellIndexes = updateRowsAndCellIndexes.bind(this);
 
         this._renderManager = new RenderManager();
-        this.getRenderedRowCount = getDTRenderedRowCount.bind(this);
-        this.setRenderedRowCount = setDTRenderedRowCount.bind(this);
-        this.getRows = getDTRows.bind(this);
         this.getWrapperHeight = getDTWrapperHeight.bind(this);
     }
 
@@ -1134,6 +1139,7 @@ export default class LightningDatatable extends LightningElement {
             if (fireResizeEvent) {
                 this.fireOnResize(false);
             }
+            this.updateTableAndScrollerStyleOnRender();
         }
 
         // Managing the cell widths is only required for the role-based table
@@ -1147,8 +1153,25 @@ export default class LightningDatatable extends LightningElement {
         this._customerSelectedRows = null;
         // set the previous focused cell to null after render is done
         resetCellToFocusFromPrev(state);
+        // reset focus styles on re-render
+        if (this._shouldResetFocus) {
+            // since focus is now getting reset, can change this back to false
+            this._shouldResetFocus = false;
+            if (state.activeCell && state.activeCell.focused) {
+                const cellElement = getActiveCellElement(template, state);
+                if (
+                    cellElement &&
+                    cellElement.parentElement &&
+                    !cellElement.parentElement.classList.contains(FOCUS_CLASS)
+                ) {
+                    setFocusActiveCell(template, state, null, null, false);
+                }
+            }
+        }
 
-        if (this.viewportRendering || this._virtualize) {
+        this.updateVirtualizedRowHeights();
+
+        if (this.viewportRendering || state.virtualize) {
             const resizeTarget = this.template.querySelector(
                 'div.dt-outer-container'
             );
@@ -1159,10 +1182,9 @@ export default class LightningDatatable extends LightningElement {
                 // Reset the row count if we already had one before updating the wrapper height.
                 // This can happen if the number of rows was calculated before the datatable
                 // was rendered.
-                if (this._renderedRowCount) {
+                if (this.state.renderedRowCount) {
                     this._renderManager.updateViewportRendering(
-                        this.state.rows,
-                        this.setRenderedRowCount,
+                        this.state,
                         this.gridContainer,
                         true
                     );
@@ -1171,6 +1193,18 @@ export default class LightningDatatable extends LightningElement {
         }
     }
 
+    updateTableAndScrollerStyleOnRender() {
+        const role = '[role="' + this.computedTableRole + '"]';
+        const tableElement = this.template.querySelector(role);
+        const scrollYEle = this.template.querySelector('.slds-scrollable_y');
+        if (tableElement) {
+            tableElement.style = this.computedTableStyle;
+        }
+        if (scrollYEle) {
+            scrollYEle.style = this.computedScrollerStyle;
+        }
+    }
+
     disconnectedCallback() {
         if (this._privateWidthObserver) {
             this._privateWidthObserver.disconnect();
@@ -1248,16 +1282,13 @@ export default class LightningDatatable extends LightningElement {
         }
 
         handleInlineEditPanelScroll.call(this, event);
-        if (this._virtualize) {
-            this._firstVisibleIndex =
-                this._renderManager.getFirstVisibleIndex(event);
-        } else if (this.viewportRendering) {
-            this._renderManager.handleScroll(
-                this.state.rows,
-                this._renderedRowCount,
-                this.setRenderedRowCount,
-                event
+        if (this.state.virtualize) {
+            this.state.firstVisibleIndex = findFirstVisibleIndex(
+                this.state,
+                event.target.scrollTop
             );
+        } else if (this.viewportRendering) {
+            this._renderManager.handleScroll(this.state, event);
         }
     }
 
@@ -1349,6 +1380,7 @@ export default class LightningDatatable extends LightningElement {
     handleResizeEnd(event) {
         event.stopPropagation();
         this._isResizing = false;
+        this._shouldResetHeights = true;
     }
 
     /**
@@ -1421,10 +1453,19 @@ export default class LightningDatatable extends LightningElement {
      * Handles the `focusout` event on <table> and the corresponding
      * <div> on the role-based table
      *
+     * This gets called both when we expect the table to lose focus
+     * and when the active cell loses focus after renderedRows changes
+     * on a virtualized table, in which case we don't want to lose focus.
+     *
+     * We account for this by setting activeCell.focused to the value of
+     * _shouldResetFocus, which will be true if and only if focus was
+     * lost due to a renderedRows change for a virtualized table.
+     *
      * @param {FocusEvent} event - `focusout`
      */
     handleTableFocusOut(event) {
         handleDatatableFocusOut.call(this, event);
+        this.state.activeCell.focused = this._shouldResetFocus;
     }
 
     /**
@@ -1533,11 +1574,11 @@ export default class LightningDatatable extends LightningElement {
 
         this.updateRowsAndCellIndexes(state);
 
-        if (this.viewportRendering || this._virtualize) {
+        if (this.viewportRendering || state.virtualize) {
             this._renderManager.updateViewportRendering(
-                this.state.rows,
-                this.setRenderedRowCount,
-                this.gridContainer
+                this.state,
+                this.gridContainer,
+                !!state.virtualize
             );
         }
 
@@ -1578,7 +1619,7 @@ export default class LightningDatatable extends LightningElement {
         setDirtyValues(state, this._draftValues);
         updateRowNavigationMode(hadTreeDataTypePreviously, state);
         state.headerIndexes = generateHeaderIndexes(getColumns(state));
-        // Updates state.wrapText and when isWrapableType, sets internal header actions
+        // Updates state.wrapText and when isWrappableType, sets internal header actions
         updateHeaderActions(state);
         this.updateRowsAndCellIndexes(state);
         updateBulkSelectionState(state);
@@ -1603,6 +1644,41 @@ export default class LightningDatatable extends LightningElement {
         }
     }
 
+    updateVirtualizedRowHeights() {
+        const state = this.state;
+        const virtualizedRows = state.virtualize && this.renderedRows.length;
+
+        // no need to handle other virtualization/row height logic
+        // if heights need to be reset
+        if (this._shouldResetHeights) {
+            resetRowHeights(state);
+            this._shouldResetHeights = false;
+        } else if (virtualizedRows && !state.fixedHeight) {
+            // if row heights aren't fixed, we need to update items
+            // in state to know where rows should be positioned
+            handleVariableRowHeights(this.template, state, this.renderedRows);
+        } else if (virtualizedRows && state.fixedHeight) {
+            // if heights are fixed, we only need to check height of first row
+            const rowElement = this.template.querySelector(
+                getDataRow(this.renderedRows[0].key)
+            );
+            // increase height by 1 since first rendered row is missing an extra 1px border
+            if (rowElement) {
+                const height = rowElement.getBoundingClientRect().height + 1;
+                if (state.rowHeight !== height) {
+                    state.rowHeight = height;
+                    resetTableHeight(state);
+                    state.rows.forEach((row) => {
+                        row.style = styleToString({
+                            position: 'absolute',
+                            top: `${row.rowIndex * height}px`,
+                        });
+                    });
+                }
+            }
+        }
+    }
+
     setSelectedRows(value) {
         setSelectedRowsKeys(this.state, value);
         handleRowSelectionChange.call(this);
@@ -1622,7 +1698,7 @@ export default class LightningDatatable extends LightningElement {
     }
 
     /**
-     * @return {Object} containing the visible dimensions of the table { left, right, top, bottom, }
+     * @returns {Object} containing the visible dimensions of the table { left, right, top, bottom, }
      */
     getViewableRect() {
         const scrollerX = this.template

package/src/lightning/datatable/fixedWidthStrategy.js

@@ -3,13 +3,26 @@ import {
     getColumnWidthFromDef,
 } from './widthManagerShared';
 
+/**
+ * Determines the expected table width
+ *
+ * @param {Number} availableWidth The available width for the entire table
+ * @param {Object} widthsMetadata The widths metadata object
+ * @returns {Number} The expected width of the table
+ */
 function getExpectedTableWidth(availableWidth, widthsMetadata) {
     const minExpectedTableWidth = getMinExpectedTableWidth(widthsMetadata);
-    return hasNoFlexibleColumns(widthsMetadata)
+    return widthsMetadata.totalFlexibleColumns === 0
         ? minExpectedTableWidth
         : Math.max(minExpectedTableWidth, availableWidth);
 }
 
+/**
+ * Determines the minimum expected table width
+ *
+ * @param {Object} widthsMetadata The widths metadata object
+ * @returns {Number} The minimum expected table width
+ */
 function getMinExpectedTableWidth(widthsMetadata) {
     const {
         totalFixedWidth,
@@ -21,21 +34,35 @@ function getMinExpectedTableWidth(widthsMetadata) {
     return minTotalFlexibleWidth + totalFixedWidth + totalResizedWidth;
 }
 
-function hasNoFlexibleColumns(widthsMetadata) {
-    return widthsMetadata.totalFlexibleColumns === 0;
-}
-
+/**
+ * Strategy for columns with defined fixed widths.
+ */
 export class FixedWidthStrategy {
+    // Private variables
     _columnWidthMetaData = {};
 
+    /************************** LIFECYCLE HOOKS **************************/
+
     constructor(minColumnWidth, maxColumnWidth) {
         this._columnWidthMetaData = { minColumnWidth, maxColumnWidth };
     }
 
+    /************************** PRIVATE SETTERS **************************/
+
+    /**
+     * Sets the minimum column width
+     *
+     * @param {Number} value The minimum width
+     */
     set minColumnWidth(value) {
         this._columnWidthMetaData.minColumnWidth = value;
     }
 
+    /**
+     * Sets the maximum column width
+     *
+     * @param {Number} value The maximum width
+     */
     set maxColumnWidth(value) {
         this._columnWidthMetaData.maxColumnWidth = value;
     }
@@ -43,9 +70,10 @@ export class FixedWidthStrategy {
     /**
      * Get adjusted column widths either from defined widths in columnDefs or by dividing total width
      * equally amongst the possible columns
-     * @param datatableInterface - interface to datatable with callbacks giving width information
-     * @param columnDefs - column definitions array with defined widths and other attributes
-     * @returns {object} with columnWidths: [], expectedTableWidth: (number)
+     *
+     * @param {Object} datatableInterface Interface to datatable with callbacks giving width information
+     * @param {Array} columnDefs Ccolumn definitions array with defined widths and other attributes
+     * @returns {Object} columnWidths: [], expectedTableWidth: (number)
      */
     getAdjustedColumnWidths(datatableInterface, columnDefs) {
         const widthsMetadata = getTotalWidthsMetadata(
@@ -73,6 +101,13 @@ export class FixedWidthStrategy {
         return { columnWidths, expectedTableWidth };
     }
 
+    /**
+     * Determines the expected flexible column width
+     *
+     * @param {Object} widthsMetadata The widths metadata object
+     * @param {Number} totalTableWidth The total available width for the table
+     * @returns {Number} The column width
+     */
     _getFlexibleColumnWidth(widthsMetadata, totalTableWidth) {
         const {
             totalFixedWidth,

package/src/lightning/datatable/headerActions.js

@@ -16,7 +16,7 @@ const DIVIDER_REM_HEIGHT = 1.0625;
  *
  * @param {Object} state The state of the datatable
  * @param {Object} columnDefinition The column definition to extract internal actions from
- * @return {Array} All wrapText internal actions
+ * @returns {Array} All wrapText internal actions
  */
 export function getInternalActions(state, columnDefinition) {
     return [...getActions(state, columnDefinition)];
@@ -113,7 +113,7 @@ function dispatchHeaderActionEvent(dt, action, colKeyValue) {
  *
  * @param {Array} columns Array of all the columns
  * @param {Integer} index The current column index to check
- * @return {String} The computed alignment
+ * @returns {String} The computed alignment
  */
 function getMenuAlignment(columns, index) {
     const isLastColumn = index === columns.length - 1;

package/src/lightning/datatable/infiniteLoading.js

@@ -1,34 +1,67 @@
 import { normalizeBoolean } from 'lightning/utilsPrivate';
 import { getScrollOffsetFromTableEnd, isNonNegativeInteger } from './utils';
 
-const SCROLLABLE_CONTAINER_SEL = '.slds-scrollable_y';
 const SCROLL_ALLOWANCE = 2;
+export const DEFAULT_LOAD_MORE_OFFSET = 20;
 
-export function getInfiniteLoadingDefaultState() {
-    return {
-        enableInfiniteLoading: false,
-        loadMoreOffset: 20,
-        isLoading: false,
-    };
-}
+/*********************** STATE MANAGEMENT ************************/
 
+/**
+ * Returns whether the datatable is in a loading state
+ *
+ * @param {Object} state The datatable state object
+ * @returns {Boolean} The loading state
+ */
 export function isLoading(state) {
     return state.isLoading;
 }
+
+/**
+ * Sets the loading state of the datatable
+ *
+ * @param {Object} state The datatable state object
+ * @param {Boolean} value The loading state to set
+ */
 export function setLoading(state, value) {
     state.isLoading = normalizeBoolean(value);
 }
 
+/**
+ * Returns whether infinite loading is enabled on the datatable
+ *
+ * @param {Object} state The datatable state object
+ * @returns {Boolean} The infinite loading state
+ */
 export function isInfiniteLoadingEnabled(state) {
     return state.enableInfiniteLoading;
 }
+
+/**
+ * Sets the infinite loading option on the datatable
+ *
+ * @param {Object} state The datatable state object
+ * @param {Boolean} value The infinite loading state to set
+ */
 export function setInfiniteLoading(state, value) {
     state.enableInfiniteLoading = normalizeBoolean(value);
 }
 
+/**
+ * Returns the load more offset
+ *
+ * @param {Object} state The datatable state object
+ * @returns {Number} The currently configured load more offset value
+ */
 export function getLoadMoreOffset(state) {
     return state.loadMoreOffset;
 }
+
+/**
+ * Sets the load more offset value. Must be a number >= 0.
+ *
+ * @param {Object} state The datatable state object
+ * @param {Boolean} value The load more offset value to set
+ */
 export function setLoadMoreOffset(state, value) {
     if (!isNonNegativeInteger(value)) {
         // eslint-disable-next-line no-console
@@ -40,9 +73,17 @@ export function setLoadMoreOffset(state, value) {
 
     state.loadMoreOffset = isNonNegativeInteger(value)
         ? parseInt(value, 10)
-        : getInfiniteLoadingDefaultState().loadMoreOffset;
+        : DEFAULT_LOAD_MORE_OFFSET;
 }
 
+/************************** PUBLIC METHODS ***************************/
+
+/**
+ * Checks whether the datatable should begin loading more content
+ * and then dispatches the `loadmore` event indicating that directive.
+ *
+ * @param {Event} event
+ */
 export function handleLoadMoreCheck(event) {
     if (isLoading(this.state)) {
         return;
@@ -60,24 +101,13 @@ export function handleLoadMoreCheck(event) {
     }
 }
 
-function isScrollable(element) {
-    // scrollHeight should be greater than clientHeight by some allowance
-    return (
-        element &&
-        element.scrollHeight > element.clientHeight + SCROLL_ALLOWANCE
-    );
-}
-
-function isScrollerVisible(elem) {
-    return (
-        elem && !!(elem.offsetParent || elem.offsetHeight || elem.offsetWidth)
-    );
-}
-
-function hasData(root) {
-    return root.querySelectorAll('tbody > tr').length > 0;
-}
-
+/**
+ * Determines whether or not to prefetch data. If so,
+ * dispatches the `loadmore` event.
+ *
+ * @param {Object} root  The datatable
+ * @param {Object} state The datatable state object
+ */
 export function handlePrefetch(root, state) {
     if (
         !isInfiniteLoadingEnabled(state) ||
@@ -91,9 +121,51 @@ export function handlePrefetch(root, state) {
         return;
     }
 
-    const elem = root.querySelector(SCROLLABLE_CONTAINER_SEL);
+    const elem = root.querySelector('.slds-scrollable_y');
 
     if (isScrollerVisible(elem) && !isScrollable(elem)) {
         this.dispatchEvent(new CustomEvent('loadmore'));
     }
 }
+
+/************************** PRIVATE METHODS ***************************/
+
+/**
+ * Determines if a DOM element is scrollable
+ *
+ * @param {Element} element The DOM element to check
+ * @returns {Boolean} Whether or not the element is scrollable
+ */
+function isScrollable(element) {
+    // scrollHeight should be greater than clientHeight by some allowance
+    return (
+        element &&
+        element.scrollHeight > element.clientHeight + SCROLL_ALLOWANCE
+    );
+}
+
+/**
+ * Determines if a DOM element's scroll bars are visible
+ *
+ * @param {Element} element The DOM element to check
+ * @returns {Boolean} Whether or not the element's scroll bars are visible
+ */
+function isScrollerVisible(element) {
+    return (
+        element &&
+        !!(element.offsetParent || element.offsetHeight || element.offsetWidth)
+    );
+}
+
+/**
+ * Determines if a root element has data
+ *
+ * @param {Element} root The parent element to check
+ * @returns {Boolean} Whether or not the element contains any data
+ */
+function hasData(root) {
+    return (
+        root.querySelectorAll('tbody > tr, [role="rowgroup"] > [role="row"]')
+            .length > 0
+    );
+}