lightning-base-components 1.14.2-alpha → 1.14.6-alpha

package/src/lightning/datatable/rowSelectionShared.js

@@ -0,0 +1,79 @@
+/**
+ * This file exists in order to get around circular dependencies.
+ * In this case, rowSelection.js has a dependency on rows.js;
+ * but rows.js also has a dependency on rowSelection.js for
+ * `isSelectedRow()` among others.
+ *
+ * We split out the functions that could cause circular dependencies with
+ * `rowSelection.js` into the `*Shared.js` files.
+ */
+
+/**
+ * Returns whether or not the row is selected using the state and the rowKeyValue
+ * The state maintains the list of selected rows from which
+ * this value can be retrieved.
+ *
+ * @param {Object} state - datatable state object
+ * @param {String} rowKeyValue
+ * @returns
+ */
+export function isSelectedRow(state, rowKeyValue) {
+    return !!state.selectedRowsKeys[rowKeyValue];
+}
+
+/**
+ * Returns whether the row (whose row key value is specified)
+ * should be disabled or not.
+ * Should not disable if the row is selected.
+ * If the particular row is not selected, the row should be disabled
+ * when max-row-selection > 1 and the selection limit is reached
+ *
+ * Note: Do not disable selection when max-row-selection = 1 and
+ * a row has been selected.
+ *
+ * @param {Object} state
+ * @param {String} rowKeyValue
+ * @returns {Boolean} whether the row should be disabled or not
+ */
+export function isDisabledRow(state, rowKeyValue) {
+    if (!isSelectedRow(state, rowKeyValue)) {
+        const maxRowSelection = getMaxRowSelection(state);
+
+        // when selection is 1, we should not disable selection
+        return (
+            maxRowSelection !== 1 &&
+            getCurrentSelectionLength(state) === maxRowSelection
+        );
+    }
+
+    return false;
+}
+
+/**
+ * Returns which input type to use for row selection.
+ * If max-row-selection = 1, use radio buttons,
+ * otherwise, use checkboxes.
+ *
+ * @param {Object} state - datatable's state object
+ * @returns
+ */
+export function getRowSelectionInputType(state) {
+    if (getMaxRowSelection(state) === 1) {
+        return 'radio';
+    }
+    return 'checkbox';
+}
+
+export function getMaxRowSelection(state) {
+    return state.maxRowSelection;
+}
+
+export function getCurrentSelectionLength(state) {
+    return getSelectedRowsKeys(state).length;
+}
+
+export function getSelectedRowsKeys(state) {
+    return Object.keys(state.selectedRowsKeys).filter(
+        (key) => state.selectedRowsKeys[key]
+    );
+}

package/src/lightning/datatable/rows.js

@@ -1,11 +1,11 @@
 import { assert } from 'lightning/utilsPrivate';
-import { classSet, isObjectLike } from './utils';
+import { classSet, isObjectLike, styleToString } from './utils';
 import { isTreeType, getAttributesNames } from './types';
 import {
     isSelectedRow,
     isDisabledRow,
     getRowSelectionInputType,
-} from './selector-shared';
+} from './rowSelectionShared';
 import { getTreeStateIndicatorFieldNames, getStateTreeColumn } from './tree';
 import {
     getColumns,
@@ -17,7 +17,7 @@ import {
 } from './columns';
 import { isRowNumberColumn, getRowNumberErrorColumnDef } from './rowNumber';
 import { getRowError } from './errors';
-import { getDirtyValue } from './inlineEdit-shared';
+import { getDirtyValueFromCell } from './inlineEditShared';
 
 export function getData(state) {
     return state.data;
@@ -115,7 +115,7 @@ export function uniqueRowKeyGenerator(keyField) {
  */
 export function updateRowsAndCellIndexes() {
     const { state, privateTypes: types } = this;
-    const { keyField, renderModeRoleBased } = state;
+    const { keyField, renderModeRoleBased, virtualize, rowHeight } = state;
     const data = getData(state);
     const columns = getColumns(state);
     const computeUniqueRowKey = uniqueRowKeyGenerator(keyField);
@@ -134,6 +134,7 @@ export function updateRowsAndCellIndexes() {
 
         state.indexes[row.key] = { rowIndex };
 
+        row.rowIndex = rowIndex;
         row.inputType = getRowSelectionInputType(state);
         row.isSelected = isSelectedRow(state, row.key);
         row.ariaSelected = row.isSelected ? 'true' : false;
@@ -141,11 +142,21 @@ export function updateRowsAndCellIndexes() {
         row.classnames = resolveRowClassNames(row);
         Object.assign(row, getRowStateForTree(rowData, state));
         row.tabIndex = -1;
+        if (virtualize) {
+            row.style = styleToString({
+                position: 'absolute',
+                top: `${rowIndex * rowHeight}px`,
+            });
+        }
 
         columns.reduce((currentRow, colData, colIndex) => {
             const { fieldName } = colData;
             const colKeyValue = generateColKeyValue(colData, colIndex);
-            const dirtyValue = getDirtyValue(state, row.key, colKeyValue);
+            const dirtyValue = getDirtyValueFromCell(
+                state,
+                row.key,
+                colKeyValue
+            );
             const cellHasErrors = hasCellErrors(
                 rowErrors,
                 colData.fieldName,
@@ -391,7 +402,7 @@ function computeCellEditable(row, column) {
  * @param {object} row - a row data object stored in datatable state. Must be truthy.
  * @param {object} column - a column data object stored in datatable state. Must be truthy.
  */
-function isCellEditable(row, column) {
+export function isCellEditable(row, column) {
     return !!resolveAttributeValue(column.editable, row);
 }
 

package/src/lightning/datatable/state.js

@@ -17,8 +17,9 @@ export const getDefaultState = function () {
         rows: [],
         indexes: {},
 
-        // selector
+        // row selection
         selectedRowsKeys: {},
+        lastSelectedRowKey: undefined,
         maxRowSelection: undefined,
 
         headerIndexes: {},
@@ -54,12 +55,25 @@ export const getDefaultState = function () {
         // table render mode
         renderModeRoleBased: false,
 
-        // viewport rendering
+        // viewport rendering and virtualization
         enableViewportRendering: undefined,
+        virtualize: '',
+        bufferSize: 5, // number of extra rows rendered on each side outside of viewport
+        rowHeight: 30.5,
+        renderedRowCount: 0,
+        firstVisibleIndex: 0, // first row that should be visible in viewport
 
         // inline edit
         inlineEdit: {
+            rowKeyValue: undefined,
+            colKeyValue: undefined,
+            columnDef: {},
             dirtyValues: {},
+            editedValue: undefined,
+            isPanelVisible: false,
+            massEditEnabled: false,
+            massEditSelectedRows: undefined,
+            resolvedAttributeTypes: {},
         },
 
         // errors

package/src/lightning/datatable/templates/div/div.css

@@ -22,6 +22,10 @@
     border-top: 1px solid #dddbda;
 }
 
+.slds-table_header-fixed [data-row-key-value]:first-child {
+    border-top: 0;
+}
+
 /* Required for row numbers */
 [role="row"] {
     counter-increment: row-number;

package/src/lightning/datatable/templates/div/div.html

@@ -41,13 +41,16 @@
                     </template>
                     <template if:true={hasValidKeyField}>
                         <!-- Corresponds to <thead> -->
-                        <div role="rowgroup">
+                        <div
+                            data-rowgroup-header
+                            role="rowgroup">
                             <!-- TODO: Fix aria-rowindex to not be hardcoded -->
                             <!-- TODO: might need to move the table-header class out or rename -->
                             <!-- Column Header Row -->
                             <div class="slds-line-height_reset table-header"
                                 role="row"
                                 aria-rowindex="1"
+                                data-row-key-value="HEADER"
                                 onprivateresizestart={handleResizeStart}
                                 onprivateresizeend={handleResizeEnd}>
                                 <template for:each={state.columns} for:item="def" for:index="colIndex">
@@ -58,6 +61,7 @@
                                         tabindex={def.tabIndex}
                                         aria-label={def.ariaLabel}
                                         aria-sort={def.sortAriaLabel}
+                                        data-col-key-value={def.colKeyValue}
                                         key={def.colKeyValue}>
 
                                         <template if:true={def.fixedWidth}>
@@ -106,8 +110,11 @@
                             </div>
                         </div>
                         <!-- Corresponds to <tbody> -->
-                        <div style={computedTbodyStyle} role="rowgroup">
-                            <template for:each={renderedRows} for:item="row" for:index="rowIndex">
+                        <div
+                            data-rowgroup-body
+                            role="rowgroup"
+                            style={computedTbodyStyle}>
+                            <template for:each={renderedRows} for:item="row">
                                 <!-- Data Rows -->
                                 <div class={row.classnames}
                                     role="row"
@@ -120,126 +127,130 @@
                                     aria-setsize={row.setSize}
                                     aria-posinset={row.posInSet}
                                     aria-rowindex={row.ariaRowIndex}
+                                    style={row.style}
                                     tabindex={row.tabIndex}>
-                                    <template for:each={row.cells} for:item="cell">
-                                        <template if:true={cell.isCheckbox}>
-                                            <!-- Checkbox Cell -->
-                                            <div class={cell.class}
-                                                style={cell.style}
-                                                role="gridcell"
-                                                tabindex={cell.tabIndex}
-                                                data-label={cell.dataLabel}
-                                                key={cell.colKeyValue}>
-                                                <lightning-primitive-cell-checkbox
-                                                    dt-context-id={_datatableId}
-                                                    has-focus={cell.hasFocus}
+                                        <template for:each={row.cells} for:item="cell">
+                                            <template if:true={cell.isCheckbox}>
+                                                <!-- Checkbox Cell -->
+                                                <div class={cell.class}
+                                                    style={cell.style}
+                                                    role="gridcell"
+                                                    tabindex={cell.tabIndex}
                                                     data-label={cell.dataLabel}
-                                                    key={cell.key}
-                                                    row-key-value={row.key}
-                                                    col-key-value={cell.colKeyValue}
-                                                    row-index={rowIndex}
-                                                    type={row.inputType}
-                                                    is-selected={row.isSelected}
-                                                    is-disabled={row.isDisabled}
-                                                    column-header-id={computedCheckboxColumnHeaderId}>
-                                                </lightning-primitive-cell-checkbox>
-                                            </div>
-                                        </template>
-                                        <template if:true={cell.isDataTypeScope}>
-                                            <!-- Row Header Cell -->
-                                            <div class={cell.class}
-                                                role="rowheader"
-                                                style={cell.style}
-                                                aria-selected={cell.ariaSelected}
-                                                aria-readonly={cell.ariaReadOnly}
-                                                tabindex={cell.tabIndex}
-                                                data-label={cell.dataLabel}
-                                                key={cell.colKeyValue}>
-                                                <lightning-primitive-cell-factory
-                                                    types={privateTypes}
+                                                    data-col-key-value={cell.colKeyValue}
+                                                    key={cell.colKeyValue}>
+                                                    <lightning-primitive-cell-checkbox
+                                                        dt-context-id={_datatableId}
+                                                        has-focus={cell.hasFocus}
+                                                        data-label={cell.dataLabel}
+                                                        key={cell.key}
+                                                        row-key-value={row.key}
+                                                        col-key-value={cell.colKeyValue}
+                                                        row-index={row.rowIndex}
+                                                        type={row.inputType}
+                                                        is-selected={row.isSelected}
+                                                        is-disabled={row.isDisabled}
+                                                        column-header-id={computedCheckboxColumnHeaderId}>
+                                                    </lightning-primitive-cell-checkbox>
+                                                </div>
+                                            </template>
+                                            <template if:true={cell.isDataTypeScope}>
+                                                <!-- Row Header Cell -->
+                                                <div class={cell.class}
+                                                    role="rowheader"
+                                                    style={cell.style}
                                                     aria-selected={cell.ariaSelected}
+                                                    aria-readonly={cell.ariaReadOnly}
+                                                    tabindex={cell.tabIndex}
                                                     data-label={cell.dataLabel}
-                                                    alignment={cell.alignment}
-                                                    has-error={cell.hasError}
-                                                    has-focus={cell.hasFocus}
-                                                    column-label={cell.dataLabel}
-                                                    column-type={cell.columnType}
-                                                    column-sub-type={cell.columnSubType}
-                                                    wrap-text={cell.wrapText}
-                                                    wrap-text-max-lines={cell.wrapTextMaxLines}
-                                                    key={cell.columnType}
-                                                    row-key-value={row.key}
-                                                    col-key-value={cell.colKeyValue}
-                                                    value={cell.value}
-                                                    icon-name={cell.iconName}
-                                                    icon-label={cell.iconLabel}
-                                                    icon-position={cell.iconPosition}
-                                                    icon-alternative-text={cell.iconAlternativeText}
-                                                    editable={cell.editable}
-                                                    display-read-only-icon={cell.displayReadOnlyIcon}
-                                                    type-attribute-0={cell.typeAttribute0}
-                                                    type-attribute-1={cell.typeAttribute1}
-                                                    type-attribute-2={cell.typeAttribute2}
-                                                    type-attribute-3={cell.typeAttribute3}
-                                                    type-attribute-4={cell.typeAttribute4}
-                                                    type-attribute-5={cell.typeAttribute5}
-                                                    type-attribute-6={cell.typeAttribute6}
-                                                    type-attribute-7={cell.typeAttribute7}
-                                                    type-attribute-8={cell.typeAttribute8}
-                                                    type-attribute-9={cell.typeAttribute9}
-                                                    type-attribute-10={cell.typeAttribute10}
-                                                    type-attribute-21={cell.typeAttribute21}
-                                                    type-attribute-22={cell.typeAttribute22}>
-                                                </lightning-primitive-cell-factory>
-                                            </div>
-                                        </template>
-                                        <template if:true={cell.isDataType}>
-                                            <!-- Non-Header Cells (Regular Data Cells) -->
-                                            <div class={cell.class}
-                                                role="gridcell"
-                                                style={cell.style}
-                                                aria-selected={cell.ariaSelected}
-                                                aria-readonly={cell.ariaReadOnly}
-                                                tabindex={cell.tabIndex}
-                                                data-label={cell.dataLabel}
-                                                key={cell.colKeyValue}>
-                                                <lightning-primitive-cell-factory
-                                                    types={privateTypes}
+                                                    data-col-key-value={cell.colKeyValue}
+                                                    key={cell.colKeyValue}>
+                                                    <lightning-primitive-cell-factory
+                                                        types={privateTypes}
+                                                        aria-selected={cell.ariaSelected}
+                                                        data-label={cell.dataLabel}
+                                                        alignment={cell.alignment}
+                                                        has-error={cell.hasError}
+                                                        has-focus={cell.hasFocus}
+                                                        column-label={cell.dataLabel}
+                                                        column-type={cell.columnType}
+                                                        column-sub-type={cell.columnSubType}
+                                                        wrap-text={cell.wrapText}
+                                                        wrap-text-max-lines={cell.wrapTextMaxLines}
+                                                        key={cell.columnType}
+                                                        row-key-value={row.key}
+                                                        col-key-value={cell.colKeyValue}
+                                                        value={cell.value}
+                                                        icon-name={cell.iconName}
+                                                        icon-label={cell.iconLabel}
+                                                        icon-position={cell.iconPosition}
+                                                        icon-alternative-text={cell.iconAlternativeText}
+                                                        editable={cell.editable}
+                                                        display-read-only-icon={cell.displayReadOnlyIcon}
+                                                        type-attribute-0={cell.typeAttribute0}
+                                                        type-attribute-1={cell.typeAttribute1}
+                                                        type-attribute-2={cell.typeAttribute2}
+                                                        type-attribute-3={cell.typeAttribute3}
+                                                        type-attribute-4={cell.typeAttribute4}
+                                                        type-attribute-5={cell.typeAttribute5}
+                                                        type-attribute-6={cell.typeAttribute6}
+                                                        type-attribute-7={cell.typeAttribute7}
+                                                        type-attribute-8={cell.typeAttribute8}
+                                                        type-attribute-9={cell.typeAttribute9}
+                                                        type-attribute-10={cell.typeAttribute10}
+                                                        type-attribute-21={cell.typeAttribute21}
+                                                        type-attribute-22={cell.typeAttribute22}>
+                                                    </lightning-primitive-cell-factory>
+                                                </div>
+                                            </template>
+                                            <template if:true={cell.isDataType}>
+                                                <!-- Non-Header Cells (Regular Data Cells) -->
+                                                <div class={cell.class}
+                                                    role="gridcell"
+                                                    style={cell.style}
                                                     aria-selected={cell.ariaSelected}
+                                                    aria-readonly={cell.ariaReadOnly}
+                                                    tabindex={cell.tabIndex}
                                                     data-label={cell.dataLabel}
-                                                    alignment={cell.alignment}
-                                                    has-focus={cell.hasFocus}
-                                                    has-error={cell.hasError}
-                                                    column-label={cell.dataLabel}
-                                                    column-type={cell.columnType}
-                                                    column-sub-type={cell.columnSubType}
-                                                    wrap-text={cell.wrapText}
-                                                    wrap-text-max-lines={cell.wrapTextMaxLines}
-                                                    key={cell.columnType}
-                                                    row-key-value={row.key}
-                                                    col-key-value={cell.colKeyValue}
-                                                    value={cell.value}
-                                                    icon-name={cell.iconName}
-                                                    icon-label={cell.iconLabel}
-                                                    icon-position={cell.iconPosition}
-                                                    icon-alternative-text={cell.iconAlternativeText}
-                                                    editable={cell.editable}
-                                                    display-read-only-icon={cell.displayReadOnlyIcon}
-                                                    type-attribute-0={cell.typeAttribute0}
-                                                    type-attribute-1={cell.typeAttribute1}
-                                                    type-attribute-2={cell.typeAttribute2}
-                                                    type-attribute-3={cell.typeAttribute3}
-                                                    type-attribute-4={cell.typeAttribute4}
-                                                    type-attribute-5={cell.typeAttribute5}
-                                                    type-attribute-6={cell.typeAttribute6}
-                                                    type-attribute-7={cell.typeAttribute7}
-                                                    type-attribute-8={cell.typeAttribute8}
-                                                    type-attribute-9={cell.typeAttribute9}
-                                                    type-attribute-10={cell.typeAttribute10}
-                                                    type-attribute-21={cell.typeAttribute21}
-                                                    type-attribute-22={cell.typeAttribute22}>
-                                                </lightning-primitive-cell-factory>
-                                            </div>
+                                                    data-col-key-value={cell.colKeyValue}
+                                                    key={cell.colKeyValue}>
+                                                    <lightning-primitive-cell-factory
+                                                        types={privateTypes}
+                                                        aria-selected={cell.ariaSelected}
+                                                        data-label={cell.dataLabel}
+                                                        alignment={cell.alignment}
+                                                        has-focus={cell.hasFocus}
+                                                        has-error={cell.hasError}
+                                                        column-label={cell.dataLabel}
+                                                        column-type={cell.columnType}
+                                                        column-sub-type={cell.columnSubType}
+                                                        wrap-text={cell.wrapText}
+                                                        wrap-text-max-lines={cell.wrapTextMaxLines}
+                                                        key={cell.columnType}
+                                                        row-key-value={row.key}
+                                                        col-key-value={cell.colKeyValue}
+                                                        value={cell.value}
+                                                        icon-name={cell.iconName}
+                                                        icon-label={cell.iconLabel}
+                                                        icon-position={cell.iconPosition}
+                                                        icon-alternative-text={cell.iconAlternativeText}
+                                                        editable={cell.editable}
+                                                        display-read-only-icon={cell.displayReadOnlyIcon}
+                                                        type-attribute-0={cell.typeAttribute0}
+                                                        type-attribute-1={cell.typeAttribute1}
+                                                        type-attribute-2={cell.typeAttribute2}
+                                                        type-attribute-3={cell.typeAttribute3}
+                                                        type-attribute-4={cell.typeAttribute4}
+                                                        type-attribute-5={cell.typeAttribute5}
+                                                        type-attribute-6={cell.typeAttribute6}
+                                                        type-attribute-7={cell.typeAttribute7}
+                                                        type-attribute-8={cell.typeAttribute8}
+                                                        type-attribute-9={cell.typeAttribute9}
+                                                        type-attribute-10={cell.typeAttribute10}
+                                                        type-attribute-21={cell.typeAttribute21}
+                                                        type-attribute-22={cell.typeAttribute22}>
+                                                    </lightning-primitive-cell-factory>
+                                                </div>
                                         </template>
                                     </template>
                                 </div>

package/src/lightning/datatable/templates/table/table.html

@@ -41,6 +41,7 @@
                         <thead>
                             <!-- Column Header Row -->
                             <tr class="slds-line-height_reset"
+                                data-row-key-value="HEADER"
                                 onprivateresizestart={handleResizeStart}
                                 onprivateresizeend={handleResizeEnd}>
                                 <template for:each={state.columns} for:item="def" for:index="colIndex">
@@ -50,6 +51,7 @@
                                         tabindex={def.tabIndex}
                                         aria-label={def.ariaLabel}
                                         aria-sort={def.sortAriaLabel}
+                                        data-col-key-value={def.colKeyValue}
                                         key={def.colKeyValue}>
 
                                         <template if:true={def.fixedWidth}>
@@ -117,6 +119,7 @@
                                                 role="gridcell"
                                                 tabindex={cell.tabIndex}
                                                 data-label={cell.dataLabel}
+                                                data-col-key-value={cell.colKeyValue}
                                                 key={cell.colKeyValue}>
                                                 <lightning-primitive-cell-checkbox
                                                     dt-context-id={_datatableId}
@@ -142,6 +145,7 @@
                                                 scope="row"
                                                 tabindex={cell.tabIndex}
                                                 data-label={cell.dataLabel}
+                                                data-col-key-value={cell.colKeyValue}
                                                 key={cell.colKeyValue}>
                                                 <lightning-primitive-cell-factory
                                                     types={privateTypes}
@@ -190,6 +194,7 @@
                                                 aria-readonly={cell.ariaReadOnly}
                                                 tabindex={cell.tabIndex}
                                                 data-label={cell.dataLabel}
+                                                data-col-key-value={cell.colKeyValue}
                                                 key={cell.colKeyValue}>
                                                 <lightning-primitive-cell-factory
                                                     types={privateTypes}

package/src/lightning/datatable/utils.js

@@ -109,3 +109,17 @@ export function getScrollOffsetFromTableEnd(el) {
         el.scrollHeight - el.parentNode.scrollTop - el.parentNode.clientHeight
     );
 }
+
+/**
+ * Utility for converting arrays and plain objects to style strings
+ * @param {Array|Object} style
+ * @returns {string} representing array/object as a string
+ */
+export function styleToString(style) {
+    if (!Array.isArray(style)) {
+        return Object.entries(style)
+            .map(([key, value]) => `${key}:${value}`)
+            .join(';');
+    }
+    return style.join(';');
+}

package/src/lightning/datatable/widthManagerShared.js

@@ -1,3 +1,11 @@
+/**
+ * Creates and returns a metadata object the contains information about the
+ * number of fixed, flexible, and resized columns in the table
+ *
+ * @param {Object} columnWidthMetaData The initial column widths metadata
+ * @param {Object} columnDefs The column definition object
+ * @returns {Object} The computed metadata
+ */
 export function getTotalWidthsMetadata(columnWidthMetaData, columnDefs) {
     const initial = {
         totalFixedWidth: 0,
@@ -28,14 +36,24 @@ export function getTotalWidthsMetadata(columnWidthMetaData, columnDefs) {
 }
 
 /**
- * Get width of dom element.
- * @param  {node} element - target dom element
- * @returns {number} - integer width of element
+ * Gets the width of a DOM element.
+ *
+ * @param {Node} element Target DOM element
+ * @returns {Number} The width of the DOM element
  */
 export function getDomWidth(element) {
     return element.offsetWidth;
 }
 
+/**
+ * Gets the width of a column. If the column has a fixed width,
+ * it will always return that value. If the column does not have a fixed
+ * width, it will return the resized value (if applicable), otherwise
+ * the initial width.
+ *
+ * @param {Object} column The column object
+ * @returns {Number} The fixed width, resized width, or initial width of the column (in that priority order)
+ */
 export function getColumnWidthFromDef(column) {
     let resizedWidth;
     if (column.isResized) {
@@ -44,6 +62,12 @@ export function getColumnWidthFromDef(column) {
     return column.fixedWidth || resizedWidth || column.initialWidth;
 }
 
+/**
+ * Creates a width CSS style string from a numeric value
+ *
+ * @param {Number} pixels Number of pixels
+ * @returns {String} The CSS width definition
+ */
 export function buildCSSWidthStyle(pixels) {
     return pixels > 0 ? `width:${pixels}px` : '';
 }