lightning-base-components 1.14.2-alpha → 1.14.6-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,11 +38,11 @@ import {
     getCSSWidthStyleOfTable,
     updateColumnWidthsMetadata,
     getResizerDefaultState,
-} from './resizer';
+} from './columnResizer';
 import {
     syncSelectedRowsKeys,
     handleRowSelectionChange,
-    updateSelectionState,
+    updateBulkSelectionState,
     getMaxRowSelection,
     setMaxRowSelection,
     getSelectedRowsKeys,
@@ -53,7 +53,7 @@ import {
     handleDeselectRow,
     getHideSelectAllCheckbox,
     getCurrentSelectionLength,
-} from './selector';
+} from './rowSelection';
 import {
     syncActiveCell,
     handleKeydownOnCell,
@@ -80,6 +80,9 @@ import {
     handleKeydownOnTable,
     addFocusStylesToActiveCell,
     refocusCellElement,
+    isCellElement,
+    getActiveCellElement,
+    FOCUS_CLASS,
 } from './keyboard';
 import {
     getRowNumberOffset,
@@ -134,6 +137,9 @@ import {
 import {
     isViewportRenderingEnabled,
     setViewportRendering,
+    getDTWrapperHeight,
+    setFirstVisibleIndex,
+    setVirtualize,
     RenderManager,
 } from './renderManager';
 
@@ -144,6 +150,7 @@ import { generateUniqueId } from 'lightning/inputUtils';
 import DatatableTypes from './types';
 import labelAriaLiveNavigationMode from '@salesforce/label/LightningDatatable.ariaLiveNavigationMode';
 import labelAriaLiveActionMode from '@salesforce/label/LightningDatatable.ariaLiveActionMode';
+import { styleToString } from './utils';
 
 const i18n = {
     ariaLiveNavigationMode: labelAriaLiveNavigationMode,
@@ -196,7 +203,6 @@ export default class LightningDatatable extends LightningElement {
     _privateTypes = {};
     _privateWidthObserver = null; // Instance of LightningDatatableResizeObserver
     _renderMode = 'table';
-    _renderedRowCount = 0;
     _suppressBottomBar = false;
 
     /************************* PUBLIC PROPERTIES *************************/
@@ -332,6 +338,7 @@ export default class LightningDatatable extends LightningElement {
 
     set enableInfiniteLoading(value) {
         setInfiniteLoading(this.state, value);
+        handlePrefetch.call(this, this.template, this.state);
     }
 
     /**
@@ -493,6 +500,7 @@ export default class LightningDatatable extends LightningElement {
      * @type {object}
      * @property {boolean} viewportRendering - Specifies whether to defer rendering of rows outside the viewport until the user begins scrolling. To use this feature, create a fixed-height container element for lightning-datatable.
      * @property {number} rowHeight - Specifies the height of a row, in px
+     * @property {string} virtualize - specifies whether to enable virtualization. This requires the "role-based" render mode and a fixed-height container for lightning-datatable
      */
 
     /**
@@ -508,10 +516,21 @@ export default class LightningDatatable extends LightningElement {
 
     set renderConfig(value) {
         if (typeof value === 'object' && !isIE11) {
-            const enableViewportRendering = value.viewportRendering;
-            setViewportRendering(this.state, enableViewportRendering);
+            setViewportRendering(this.state, value.viewportRendering);
 
-            this._renderManager.configure(this, value);
+            this._renderManager.configure(
+                this.state,
+                this.getWrapperHeight,
+                value
+            );
+            // if renderConfig already exists, update rendering
+            if (this._renderConfig) {
+                this._renderManager.updateViewportRendering(
+                    this.state,
+                    this.gridContainer,
+                    true
+                );
+            }
             this._renderConfig = value;
         }
     }
@@ -536,6 +555,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);
     }
 
@@ -759,24 +782,40 @@ export default class LightningDatatable extends LightningElement {
 
     get computedTableStyle() {
         if (this._columnWidthManager.isAutoResizingUpdateQueued()) {
-            return ['table-layout:auto'].join(';');
+            return styleToString(['table-layout:auto']);
         }
-        return [
+        return styleToString([
             'table-layout:fixed',
             getCSSWidthStyleOfTable(this.widthsData),
-        ].join(';');
+        ]);
     }
 
+    /**
+     * Resets row-number counter to offset to show
+     * correct value when row number column is present
+     * and adds necessary position and height styles when
+     * virtualization is enabled
+     */
     get computedTbodyStyle() {
+        const style = [];
+        const { firstVisibleIndex, bufferSize, virtualize, rows, rowHeight } =
+            this.state;
         if (
             hasRowNumberColumn(this.state) &&
             getRowNumberOffset(this.state) >= 0
         ) {
-            return (
-                'counter-reset: row-number ' + getRowNumberOffset(this.state)
+            const firstRenderedRow = Math.max(
+                firstVisibleIndex - bufferSize,
+                0
             );
+            const rowNumber = firstRenderedRow + getRowNumberOffset(this.state);
+            style.push(`counter-reset: row-number ${rowNumber}`);
+        }
+        if (virtualize) {
+            const length = rows.length;
+            style.push('position: relative', `height:${length * rowHeight}px`);
         }
-        return '';
+        return styleToString(style);
     }
 
     /**
@@ -812,9 +851,7 @@ export default class LightningDatatable extends LightningElement {
             styles['overflow-x'] = 'auto';
         }
 
-        return Object.entries(styles)
-            .map(([key, value]) => key + ':' + value)
-            .join(';');
+        return styleToString(styles);
     }
 
     /**
@@ -897,10 +934,16 @@ export default class LightningDatatable extends LightningElement {
     }
 
     get renderedRows() {
+        const { virtualize, rows, renderedRowCount } = this.state;
+        if (virtualize) {
+            const { firstIndex, lastIndex } =
+                this._renderManager.getRenderedRange(this.state);
+            return rows.slice(firstIndex, lastIndex);
+        }
         if (this.viewportRendering && !isIE11) {
-            return this.state.rows.slice(0, this._renderedRowCount);
+            return rows.slice(0, renderedRowCount);
         }
-        return this.state.rows;
+        return rows;
     }
 
     get showSelectAllCheckbox() {
@@ -931,11 +974,11 @@ 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.getWrapperHeight = getDTWrapperHeight.bind(this);
     }
 
     /**
@@ -1081,6 +1124,10 @@ export default class LightningDatatable extends LightningElement {
             if (fireResizeEvent) {
                 this.fireOnResize(false);
             }
+
+            const role = '[role="' + this.computedTableRole + '"]';
+
+            this.template.querySelector(role).style = this.computedTableStyle;
         }
 
         // Managing the cell widths is only required for the role-based table
@@ -1094,17 +1141,35 @@ 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 (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._renderManager.connectResizeObserver(this);
+        if (this.viewportRendering || state.virtualize) {
+            const resizeTarget = this.template.querySelector(
+                'div.dt-outer-container'
+            );
+            this._renderManager.connectResizeObserver(resizeTarget);
             if (!this._renderManager.hasWrapperHeight()) {
-                this._renderManager.updateWrapperHeight(this);
+                this._renderManager.updateWrapperHeight(this.getWrapperHeight);
 
                 // 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) {
-                    this._renderManager.updateViewportRendering(this, true);
+                if (this.state.renderedRowCount) {
+                    this._renderManager.updateViewportRendering(
+                        this.state,
+                        this.gridContainer,
+                        true
+                    );
                 }
             }
         }
@@ -1187,9 +1252,10 @@ export default class LightningDatatable extends LightningElement {
         }
 
         handleInlineEditPanelScroll.call(this, event);
-
-        if (this.viewportRendering) {
-            this._renderManager.handleScroll(this, event);
+        if (this.state.virtualize) {
+            setFirstVisibleIndex(this.state, event.target.scrollTop);
+        } else if (this.viewportRendering) {
+            this._renderManager.handleScroll(this.state, event);
         }
     }
 
@@ -1202,8 +1268,9 @@ export default class LightningDatatable extends LightningElement {
     handleCellClick(event) {
         // handles the case when clicking on the margin/pading of the td/th
         const targetTagName = event.target.tagName.toLowerCase();
+        const targetRole = event.target.getAttribute('role');
 
-        if (targetTagName === 'td' || targetTagName === 'th') {
+        if (isCellElement(targetTagName, targetRole)) {
             // get the row/col key value from the primitive cell.
             const { rowKeyValue, colKeyValue } =
                 event.target.querySelector(':first-child');
@@ -1464,8 +1531,12 @@ export default class LightningDatatable extends LightningElement {
 
         this.updateRowsAndCellIndexes(state);
 
-        if (this.viewportRendering) {
-            this._renderManager.updateViewportRendering(this);
+        if (this.viewportRendering || state.virtualize) {
+            this._renderManager.updateViewportRendering(
+                this.state,
+                this.gridContainer,
+                !!state.virtualize
+            );
         }
 
         this._columnWidthManager.handleRowNumberOffsetChange(state, widthsData);
@@ -1505,10 +1576,10 @@ 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);
-        updateSelectionState(state);
+        updateBulkSelectionState(state);
         this._columnWidthManager.handleRowNumberOffsetChange(state, widthsData);
         updateColumnWidthsMetadata(getColumns(state), widthsData);
         // set the celltofocus next to null if the column still exists after indexes calculation

package/src/lightning/datatable/errors.js

@@ -1,25 +1,36 @@
-export function getErrorsState() {
-    return {
-        errors: {
-            rows: {},
-            table: {},
-        },
-    };
-}
+// Default empty error state
+const DEFAULT_ERROR_STATE = {
+    rows: {},
+    table: {},
+};
 
+/**
+ * Retrieves the errors object from datatable's state object
+ * Returns the set of row-level errors and table-level errors
+ */
 export function getErrors(state) {
     return state.errors;
 }
 
+/**
+ * Sets the row-level errors and table-level errors in datatable's state object
+ * Errors being set here overwrite the previous error object in the state
+ */
 export function setErrors(state, errors) {
-    return (state.errors = Object.assign({}, getErrorsState(), errors));
+    return (state.errors = Object.assign({}, DEFAULT_ERROR_STATE, errors));
 }
 
+/**
+ * Retrieves the row-level errors of a particular row from datatable's state object
+ */
 export function getRowError(state, rowKey) {
     const rows = getErrors(state).rows;
     return (rows && rows[rowKey]) || {};
 }
 
+/**
+ * Retrieves the table-level errors from the datatable's state object
+ */
 export function getTableError(state) {
     return getErrors(state).table || {};
 }

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

@@ -1,49 +1,31 @@
 import { unwrap } from 'lwc';
 import { getUserColumnIndex, getColumns } from './columns';
-import * as wraptext from './wrapText';
+import { getActions, handleTriggeredAction } from './wrapText';
 
-function handleTriggeredInternalAction(dt, action, colKeyValue) {
-    wraptext.handleTriggeredAction(dt.state, action, colKeyValue);
-    dispatchHeaderActionEvent(dt, action, colKeyValue);
-}
-
-function handleTriggeredCustomerAction(dt, action, colKeyValue) {
-    dispatchHeaderActionEvent(dt, action, colKeyValue);
-}
+// Height of a clickable menu item
+const ACTION_REM_HEIGHT = 2.125;
 
-function dispatchHeaderActionEvent(dt, action, colKeyValue) {
-    const userColumnIndex = getUserColumnIndex(dt.state, colKeyValue);
-    const customerColumnDefinition = dt.columns[userColumnIndex];
-
-    dt.dispatchEvent(
-        new CustomEvent('headeraction', {
-            detail: {
-                action: unwrap(action),
-                columnDefinition: unwrap(customerColumnDefinition),
-            },
-        })
-    );
-}
+// Height of the menu divider, 1 rem + 1px (1/16px)
+const DIVIDER_REM_HEIGHT = 1.0625;
 
-function getMenuAlignment(columns, index) {
-    const isLastColumn = index === columns.length - 1;
-
-    return isLastColumn || columns[index + 1].type === 'action'
-        ? 'auto-right'
-        : 'auto-left';
-}
+/************************** PUBLIC METHODS ***************************/
 
+/**
+ * Merges wrapText internal actions.
+ * If there are new internal actions in the future, they may be added here.
+ *
+ * @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
+ */
 export function getInternalActions(state, columnDefinition) {
-    // merge all internal actions here
-    // currently, only wrapText internal actions
-    // there may be new internal actions in the future
-    return [...wraptext.getActions(state, columnDefinition)];
+    return [...getActions(state, columnDefinition)];
 }
 
 /**
  * Overrides the actions with the internal ones, plus the customer ones.
  *
- * @param {Object} state The state of the datatable.
+ * @param {Object} state The state of the datatable
  */
 export function updateHeaderActions(state) {
     const columns = getColumns(state);
@@ -59,31 +41,36 @@ export function updateHeaderActions(state) {
     });
 }
 
+/**
+ * For internal actions, handles triggering the action.
+ * Then dispatches the header action event.
+ *
+ * @param {Event} event
+ */
 export function handleHeaderActionTriggered(event) {
+    event.stopPropagation();
+
     const { action, actionType, colKeyValue } = event.detail;
 
-    event.stopPropagation();
-    if (actionType === 'customer') {
-        handleTriggeredCustomerAction(this, action, colKeyValue);
-    } else {
-        handleTriggeredInternalAction(this, action, colKeyValue);
+    if (actionType !== 'customer') {
+        handleTriggeredAction(this.state, action, colKeyValue);
     }
-}
 
-export function getColumnActionsDefaultState() {
-    return Object.assign({}, wraptext.getDefaultState());
+    dispatchHeaderActionEvent(this, action, colKeyValue);
 }
 
-// in rem, the height of a clickable menu item
-const ACTION_HEIGHT = 2.125;
-// 1 rem + 1px (1/16px), height of the menu divider
-const DIVIDER_HEIGHT = 1.0625;
-
+/**
+ * Calculates the size and positioning of the header action
+ * menu when it is opened.
+ *
+ * @param {Event} event
+ */
 export function handleHeaderActionMenuOpening(event) {
     event.stopPropagation();
     event.preventDefault();
-    const actionsHeight = event.detail.actionsCount * ACTION_HEIGHT;
-    const dividersHeight = event.detail.dividersCount * DIVIDER_HEIGHT;
+
+    const actionsHeight = event.detail.actionsCount * ACTION_REM_HEIGHT;
+    const dividersHeight = event.detail.dividersCount * DIVIDER_REM_HEIGHT;
     const wrapperHeight = 1;
     this._actionsMinHeightStyle = `min-height:${
         actionsHeight + dividersHeight + wrapperHeight
@@ -91,6 +78,47 @@ export function handleHeaderActionMenuOpening(event) {
     event.detail.saveContainerPosition(this.getViewableRect());
 }
 
+/**
+ * Resets header action menu height when closed.
+ */
 export function handleHeaderActionMenuClosed() {
     this._actionsMinHeightStyle = '';
 }
+
+/************************** PRIVATE METHODS ***************************/
+
+/**
+ * Dispatches the `headeraction` event.
+ *
+ * @param {Object} dt The datatable
+ * @param {Object} action The action to dispatch
+ * @param {String} colKeyValue The column to dispatch the action on
+ */
+function dispatchHeaderActionEvent(dt, action, colKeyValue) {
+    const userColumnIndex = getUserColumnIndex(dt.state, colKeyValue);
+    const customerColumnDefinition = dt.columns[userColumnIndex];
+
+    dt.dispatchEvent(
+        new CustomEvent('headeraction', {
+            detail: {
+                action: unwrap(action),
+                columnDefinition: unwrap(customerColumnDefinition),
+            },
+        })
+    );
+}
+
+/**
+ * Determines the menu alignment based on column placement.
+ *
+ * @param {Array} columns Array of all the columns
+ * @param {Integer} index The current column index to check
+ * @return {String} The computed alignment
+ */
+function getMenuAlignment(columns, index) {
+    const isLastColumn = index === columns.length - 1;
+
+    return isLastColumn || columns[index + 1].type === 'action'
+        ? 'auto-right'
+        : 'auto-left';
+}