lightning-base-components 1.13.9-alpha → 1.14.3-alpha

package/src/lightning/combobox/combobox.css

@@ -1,3 +1,15 @@
 :host {
     display: block;
 }
+
+/**
+     This is adding the red border around the combobox input when there's an error
+     Should be removed once SLDS has added support for this (@W-9240038)
+*/
+:host.slds-has-error {
+    --slds-c-input-color-border:#ea001e;
+    --slds-c-input-shadow:#ea001e 0 0 0 1px inset;
+    --slds-c-input-color-background:var(--slds-c-input-color-background, var(--sds-c-input-color-background, white));
+    --slds-c-input-text-color:var(--slds-c-input-text-color, var(--sds-c-input-text-color), #74747);
+}
+

package/src/lightning/combobox/combobox.html

@@ -15,6 +15,7 @@
             placeholder={placeholder}
             items={_items}
             input-text={_selectedLabel}
+            input-label={label}
             input-icon-size="xx-small"
             input-icon-name="utility:down"
             show-dropdown-activity-indicator={spinnerActive}

package/src/lightning/datatable/__docs__/datatable.md

@@ -244,6 +244,28 @@ Valid data types and their supported attributes include:
 | text        | Displays text using [lightning-formatted-text](bundle/lightning-formatted-text/). This is the default data type.                                                                                                                                                                                                                                                       | linkify                                                                                                                                                       |
 | url         | Displays a URL using [lightning-formatted-url](bundle/lightning-formatted-url/)                                                                                                                                                                                                                                                                                        | label, target, tooltip                                                                                                                                        |
 
+In some situations, multiple columns reference the same `fieldName` but have different `fieldApiNames` and different ways of working with the field information. To give a column a unique ID when using the same field name for two columns, use the attribute `columnKey` instead of `fieldName` on one of the column definitions.
+
+```javascript
+get columns() {
+    return [
+        // Column using 'fieldName' as identifier
+        {
+            label: 'Lead',
+            fieldName: 'leadId',
+            ...
+        },
+        // Column using 'columnKey' as identifier
+        {
+            label: 'Company',
+            columnKey: 'leadCompany',
+            fieldName: 'leadId',
+            ...
+        }
+    ]
+}
+```
+
 #### Custom Formatting Examples
 
 To customize the formatting based on the data type, pass in the attributes for
@@ -494,6 +516,21 @@ const columns = [
 
 Custom classes are currently not supported. To apply custom styling on your datatable cells, create a custom data type and then apply your custom CSS classes. See [Custom Data Type Layout and Styles](docs/component-library/documentation/lwc/lwc.data_table_custom_types_styling).
 
+#### Displaying Indicators for Read-Only Fields
+
+You can display a lock icon on read-only fields to specify they're not editable. To specify that a column's field as read-only, set the column attribute `editable` to `false` and the column attribute `displayReadOnlyIcon` to `true` in the associated column definition. This example displays a lock icon on each field in a column called "Website."
+
+```javascript
+const columns = [
+    {
+        label: 'Website',
+        fieldName: 'website',
+        type: 'url',
+        editable: false,
+        displayReadOnlyIcon: true,
+    }
+```
+
 #### Using Infinite Scrolling to Load More Rows
 
 Infinite scrolling enables you to load a subset of data and then display more
@@ -1031,6 +1068,24 @@ handleSave(event) {
 }
 ```
 
+You can also program an external element, such as a button, to open an inline edit panel on the currently active cell or next editable cell in the datatable. Invoke the `openInlineEdit()` method in the external element that should direct a user to the first editable cell in your datatable component.
+
+This example opens a datatable cell for inline edit when the user clicks an "Edit" button.
+
+```javascript
+import { LightningElement } from 'lwc';
+export default class DatatableWithInlineEdit extends LightningElement {
+    data = [];
+    columns = columns;
+    rowOffset = 0;
+
+    handleClick() {
+        const dt = this.template.querySelector('lightning-datatable');
+        dt.openInlineEdit();
+    }
+}
+```
+
 For more information, see [Display Data in a Table with Inline Editing](docs/component-library/documentation/lwc/lwc.data_table_inline_edit).
 
 #### Displaying Errors

package/src/lightning/datatable/__examples__/basic/basic.html

@@ -5,5 +5,5 @@
                 data={data}
                 columns={columns}>
         </lightning-datatable>
-    </div>    
+    </div>
 </template>

package/src/lightning/datatable/columnWidthManager.js

@@ -13,7 +13,7 @@ import {
 import {
     getColumnWidthFromDef,
     getDomWidth,
-    getWidthStyle,
+    buildCSSWidthStyle,
 } from './widthManagerShared';
 import { isRTL } from 'lightning/utilsPrivate';
 
@@ -35,7 +35,7 @@ export function computeColumnWidths(adjustedWidths, columnDefs, widthsData) {
         const newWidth = columnWidths[index];
         widthsData.columnWidths[index] = newWidth;
         columnDef.columnWidth = newWidth;
-        columnDef.style = getWidthStyle(newWidth);
+        columnDef.style = buildCSSWidthStyle(newWidth);
 
         // In RTL, we need to explicitly position the column headers.
         // We do this by providing the offset (in pixels) from the start of the table.
@@ -312,7 +312,11 @@ export class ColumnWidthManager {
                 return [];
             },
             getTableElementWidth() {
-                const tableElement = root.querySelector(TABLE_SEL);
+                // TODO: Figure out a clean way to retrieve and use the correct selectors
+                // Currently outside scope of this work. Should be addressed in W-8540110
+                const tableElement =
+                    root.querySelector(TABLE_SEL) ||
+                    root.querySelector('[role="grid"]');
                 return getDomWidth(tableElement);
             },
         };

package/src/lightning/datatable/columns-shared.js

@@ -4,7 +4,7 @@
  * which also has a dependency on `columns.js` for `getColumnName()`.
  *
  * We split out some of the functions that could cause circular dependencies with
- * `column.js` into the `*-shared.js` files. `inlineEdit-shared.js` is another.
+ * `column.js` into the `*-shared.js` files. `inlineEditShared.js` is another.
  */
 
 export function getColumnName(column) {

package/src/lightning/datatable/datatable.js

@@ -35,14 +35,14 @@ import {
     getColumnsWidths,
     resizeColumnWithDelta,
     getCustomerColumnWidths,
-    getTableWidthStyle,
+    getCSSWidthStyleOfTable,
     updateColumnWidthsMetadata,
     getResizerDefaultState,
 } from './resizer';
 import {
     syncSelectedRowsKeys,
     handleRowSelectionChange,
-    updateSelectionState,
+    updateBulkSelectionState,
     getMaxRowSelection,
     setMaxRowSelection,
     getSelectedRowsKeys,
@@ -53,10 +53,10 @@ import {
     handleDeselectRow,
     getHideSelectAllCheckbox,
     getCurrentSelectionLength,
-} from './selector';
+} from './rowSelection';
 import {
     syncActiveCell,
-    handleCellKeydown,
+    handleKeydownOnCell,
     updateActiveCell,
     setBlurActiveCell,
     setFocusActiveCell,
@@ -67,7 +67,7 @@ import {
     updateTabIndexActiveRow,
     unsetRowNavigationMode,
     updateRowNavigationMode,
-    handleDatatableLosedFocus,
+    handleDatatableFocusOut,
     handleDatatableFocusIn,
     updateTabIndexRow,
     getIndexesActiveCell,
@@ -77,9 +77,10 @@ import {
     resetCellToFocusFromPrev,
     datatableHasFocus,
     setCellClickedForFocus,
-    handleKeyDown,
+    handleKeydownOnTable,
     addFocusStylesToActiveCell,
     refocusCellElement,
+    isCellElement,
 } from './keyboard';
 import {
     getRowNumberOffset,
@@ -134,7 +135,13 @@ import {
 import {
     isViewportRenderingEnabled,
     setViewportRendering,
+    getDTRows,
+    getDTRenderedRowCount,
+    setDTRenderedRowCount,
+    getDTWrapperHeight,
+    normalizeVirtualization,
     RenderManager,
+    DEFAULT_ROW_HEIGHT,
 } from './renderManager';
 
 import { hasTreeDataType } from './tree';
@@ -144,6 +151,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,
@@ -192,12 +200,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
     _privateTypes = {};
     _privateWidthObserver = null; // Instance of LightningDatatableResizeObserver
     _renderMode = 'table';
     _renderedRowCount = 0;
     _suppressBottomBar = false;
+    _virtualize = '';
 
     /************************* PUBLIC PROPERTIES *************************/
 
@@ -448,7 +458,7 @@ export default class LightningDatatable extends LightningElement {
 
     set maxColumnWidth(value) {
         const { state, widthsData } = this;
-        setMaxColumnWidth(state, widthsData, value);
+        setMaxColumnWidth(getColumns(state), widthsData, value);
         this._columnWidthManager.maxColumnWidth = this.maxColumnWidth;
     }
 
@@ -484,7 +494,7 @@ export default class LightningDatatable extends LightningElement {
 
     set minColumnWidth(value) {
         const { state, widthsData } = this;
-        setMinColumnWidth(state, widthsData, value);
+        setMinColumnWidth(getColumns(state), widthsData, value);
         this._columnWidthManager.minColumnWidth = this.minColumnWidth;
     }
 
@@ -493,6 +503,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 +519,28 @@ export default class LightningDatatable extends LightningElement {
 
     set renderConfig(value) {
         if (typeof value === 'object' && !isIE11) {
-            const enableViewportRendering = value.viewportRendering;
-            setViewportRendering(this.state, enableViewportRendering);
+            const { viewportRendering, virtualize } = value;
+            setViewportRendering(this.state, viewportRendering);
+            if (this.state.renderModeRoleBased) {
+                this._virtualize = normalizeVirtualization(virtualize);
+            }
 
-            this._renderManager.configure(this, value);
+            this._renderManager.configure(
+                this.getRows,
+                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.gridContainer,
+                    true
+                );
+            }
             this._renderConfig = value;
         }
     }
@@ -759,23 +788,38 @@ export default class LightningDatatable extends LightningElement {
 
     get computedTableStyle() {
         if (this._columnWidthManager.isAutoResizingUpdateQueued()) {
-            return ['table-layout:auto'].join(';');
+            return styleToString(['table-layout:auto']);
         }
-        return ['table-layout:fixed', getTableWidthStyle(this.widthsData)].join(
-            ';'
-        );
+        return styleToString([
+            'table-layout:fixed',
+            getCSSWidthStyleOfTable(this.widthsData),
+        ]);
     }
 
+    /**
+     * 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 = [];
         if (
             hasRowNumberColumn(this.state) &&
             getRowNumberOffset(this.state) >= 0
         ) {
-            return (
+            style.push(
                 'counter-reset: row-number ' + getRowNumberOffset(this.state)
             );
         }
-        return '';
+        if (this._virtualize) {
+            const length = this.state.rows.length;
+            style.push(
+                'position: relative',
+                `height:${length * DEFAULT_ROW_HEIGHT}px`
+            );
+        }
+        return styleToString(style);
     }
 
     /**
@@ -795,7 +839,7 @@ export default class LightningDatatable extends LightningElement {
         if (this._columnWidthManager.isAutoResizingUpdateQueued()) {
             return `${minHeight}overflow-x:auto`;
         }
-        return `${minHeight}${getTableWidthStyle(this.widthsData)}`;
+        return `${minHeight}${getCSSWidthStyleOfTable(this.widthsData)}`;
     }
 
     get scrollerXStyles() {
@@ -811,9 +855,7 @@ export default class LightningDatatable extends LightningElement {
             styles['overflow-x'] = 'auto';
         }
 
-        return Object.entries(styles)
-            .map(([key, value]) => key + ':' + value)
-            .join(';');
+        return styleToString(styles);
     }
 
     /**
@@ -896,6 +938,14 @@ export default class LightningDatatable extends LightningElement {
     }
 
     get renderedRows() {
+        if (this._virtualize) {
+            const { firstIndex, lastIndex } =
+                this._renderManager.getRenderedRange(
+                    this._firstVisibleIndex,
+                    this._renderedRowCount
+                );
+            return this.state.rows.slice(firstIndex, lastIndex);
+        }
         if (this.viewportRendering && !isIE11) {
             return this.state.rows.slice(0, this._renderedRowCount);
         }
@@ -935,6 +985,10 @@ export default class LightningDatatable extends LightningElement {
         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);
     }
 
     /**
@@ -987,7 +1041,7 @@ export default class LightningDatatable extends LightningElement {
         // Cell Interaction
         this.template.addEventListener(
             'privatecellkeydown',
-            handleCellKeydown.bind(this)
+            handleKeydownOnCell.bind(this)
         );
 
         this.template.addEventListener(
@@ -1094,16 +1148,24 @@ export default class LightningDatatable extends LightningElement {
         // set the previous focused cell to null after render is done
         resetCellToFocusFromPrev(state);
 
-        if (this.viewportRendering) {
-            this._renderManager.connectResizeObserver(this);
+        if (this.viewportRendering || this._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);
+                    this._renderManager.updateViewportRendering(
+                        this.state.rows,
+                        this.setRenderedRowCount,
+                        this.gridContainer,
+                        true
+                    );
                 }
             }
         }
@@ -1126,15 +1188,15 @@ export default class LightningDatatable extends LightningElement {
      * @param {KeyboardEvent} event - `keydown`
      */
     handleTableKeydown(event) {
-        handleKeyDown.call(this, event);
+        handleKeydownOnTable.call(this, event);
     }
 
     /**
-     * Handles the `keydown` event on <tr> (table-based) and div[role="row"] (role-based)
+     * Handles the `keydown` event on data row <tr> (table-based) and div[role="row"] (role-based)
      *
      * @param {KeyboardEvent} event - `keydown`
      */
-    handleTrRowKeyDown(event) {
+    handleKeydownOnDataRow(event) {
         // we probably should not be doing this unless we actually are interested in it
         if (
             this.state.keyboardMode === 'NAVIGATION' &&
@@ -1186,9 +1248,16 @@ export default class LightningDatatable extends LightningElement {
         }
 
         handleInlineEditPanelScroll.call(this, event);
-
-        if (this.viewportRendering) {
-            this._renderManager.handleScroll(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
+            );
         }
     }
 
@@ -1201,8 +1270,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');
@@ -1248,7 +1318,12 @@ export default class LightningDatatable extends LightningElement {
         const { state, widthsData } = this;
         const { colIndex, widthDelta } = event.detail;
         if (widthDelta !== 0) {
-            resizeColumnWithDelta(state, widthsData, colIndex, widthDelta);
+            resizeColumnWithDelta(
+                getColumns(state),
+                widthsData,
+                colIndex,
+                widthDelta
+            );
             this.fireOnResize(true);
             this.safariHeaderFix();
         }
@@ -1349,7 +1424,7 @@ export default class LightningDatatable extends LightningElement {
      * @param {FocusEvent} event - `focusout`
      */
     handleTableFocusOut(event) {
-        handleDatatableLosedFocus.call(this, event);
+        handleDatatableFocusOut.call(this, event);
     }
 
     /**
@@ -1439,7 +1514,10 @@ export default class LightningDatatable extends LightningElement {
         const { state, widthsData } = this;
         const event = new CustomEvent('resize', {
             detail: {
-                columnWidths: getCustomerColumnWidths(state, widthsData),
+                columnWidths: getCustomerColumnWidths(
+                    getColumns(state),
+                    widthsData
+                ),
                 isUserTriggered: !!isUserTriggered,
             },
         });
@@ -1455,8 +1533,12 @@ export default class LightningDatatable extends LightningElement {
 
         this.updateRowsAndCellIndexes(state);
 
-        if (this.viewportRendering) {
-            this._renderManager.updateViewportRendering(this);
+        if (this.viewportRendering || this._virtualize) {
+            this._renderManager.updateViewportRendering(
+                this.state.rows,
+                this.setRenderedRowCount,
+                this.gridContainer
+            );
         }
 
         this._columnWidthManager.handleRowNumberOffsetChange(state, widthsData);
@@ -1499,9 +1581,9 @@ export default class LightningDatatable extends LightningElement {
         // Updates state.wrapText and when isWrapableType, sets internal header actions
         updateHeaderActions(state);
         this.updateRowsAndCellIndexes(state);
-        updateSelectionState(state);
+        updateBulkSelectionState(state);
         this._columnWidthManager.handleRowNumberOffsetChange(state, widthsData);
-        updateColumnWidthsMetadata(state, widthsData);
+        updateColumnWidthsMetadata(getColumns(state), widthsData);
         // set the celltofocus next to null if the column still exists after indexes calculation
         updateCellToFocusFromPrev(state);
 

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 || {};
 }