lightning-base-components 1.21.5-alpha → 1.21.7-alpha

package/src/lightning/datatable/renderManager.js

@@ -13,10 +13,6 @@ export function setViewportRendering(state, value) {
     state.enableViewportRendering = normalizeBoolean(value);
 }
 
-export function isViewportRenderingEnabled(state) {
-    return state.enableViewportRendering;
-}
-
 export function setVirtualize(state, value) {
     if (state.renderModeRoleBased) {
         state.virtualize = normalizeString(value, {
@@ -68,16 +64,11 @@ export class RenderManager {
      * @param {RenderManagerConfig} config - The render management config
      */
     configure(state, getWrapperHeight, config) {
-        const {
-            viewportRendering,
-            rowHeight,
-            virtualize,
-            bufferSize,
-            fixedHeight,
-        } = config;
-        setVirtualize(state, virtualize);
-
-        if (normalizeBoolean(viewportRendering) || state.virtualize) {
+        const { rowHeight, bufferSize } = config;
+        // Untracked state changes.
+        setVirtualize(state, config.virtualize);
+        setViewportRendering(state, config.viewportRendering);
+        if (state.virtualize || state.enableViewportRendering) {
             this.initializeResizeObserver(state, getWrapperHeight);
         }
         let computedBufferSize =
@@ -88,10 +79,10 @@ export class RenderManager {
             'non-negative',
             DEFAULT_BUFFER_SIZE
         );
-        state.fixedHeight = normalizeBoolean(fixedHeight);
+        state.fixedHeight = normalizeBoolean(config.fixedHeight);
         if (typeof rowHeight === 'number') {
             state.rowHeight = rowHeight;
-            this.threshold = ROW_THRESHOLD * state.rowHeight;
+            this.threshold = ROW_THRESHOLD * rowHeight;
         }
     }
 
@@ -168,23 +159,28 @@ export class RenderManager {
         const firstVisibleKey =
             rows[firstVisibleIndex] && rows[firstVisibleIndex].key;
 
+        // if using variable heights, see if we can get more
+        // accurate estimate based on known row heights
         if (!fixedHeight && heightCache[firstVisibleKey]) {
             let i = firstVisibleIndex;
             let currentHeight = 0;
-            const knownRowHeight = rows[i] && heightCache[rows[i].key];
+            let knownRowHeight = rows[i] && heightCache[rows[i].key];
             // loop through rows until we find last row based on wrapper height
             while (knownRowHeight && currentHeight < this.wrapperHeight) {
                 currentHeight += knownRowHeight;
                 i = i + 1;
+                knownRowHeight = rows[i] && heightCache[rows[i].key];
             }
             if (currentHeight >= this.wrapperHeight) {
-                // row heights were measured; i represents last visible index
-                lastIndex = i + bufferSize - 1;
+                // all row heights were measured; i is first non-visible index
+                lastIndex = i + bufferSize;
             } else {
-                // row heights not yet measured, i is last visible index with known height
+                // at least some row heights not yet measured
+                // i is first visible index with unknown height
                 // guess lastIndex based on default row height
-                const extraRowEstimate =
-                    (this.wrapperHeight - currentHeight) / rowHeight;
+                const extraRowEstimate = Math.ceil(
+                    (this.wrapperHeight - currentHeight) / rowHeight
+                );
                 lastIndex = i + extraRowEstimate + bufferSize;
             }
         }
@@ -195,7 +191,7 @@ export class RenderManager {
             renderedRowCount === rows.length &&
             lastIndex <= rows.length - bufferSize
         ) {
-            lastIndex = renderedRowCount - 1;
+            lastIndex = renderedRowCount;
         }
         return { firstIndex, lastIndex };
     }
@@ -212,7 +208,7 @@ export class RenderManager {
         const normalizedRowCount = rowCount
             ? Math.min(rowCount, totalRows)
             : totalRows;
-        if (isViewportRenderingEnabled(state)) {
+        if (state.enableViewportRendering) {
             if (state.renderedRowCount < normalizedRowCount) {
                 state.renderedRowCount = normalizedRowCount;
                 // Update our internal cache
@@ -247,7 +243,7 @@ export class RenderManager {
      * when the datatable component's height changes
      *
      * @param {Object} state - datatable state
-     * @param {Function} getWrapperHeight - function to get height of datatable wrapper
+     * @param {Function} getWrapperHeight - A function to get the height of datatable wrapper
      */
     initializeResizeObserver(state, getWrapperHeight) {
         if (!this._heightResizeObserver) {
@@ -311,8 +307,6 @@ export class RenderManager {
      * Used to determine how many additional rows to render
      */
     getRowCountWithBuffer(state) {
-        // buffer is before and after with virtualization
-        // but only after with viewport rendering
         const multiplier = state.virtualize ? 2 : 1;
         return (
             this.getRowCountInViewport(state) + state.bufferSize * multiplier

package/src/lightning/datatable/rowLevelActions.js

@@ -1,5 +1,5 @@
 import { unwrap } from 'lwc';
-import { getUserRowByCellKeys } from './indexes';
+import { getUserRowByKey } from './indexes';
 import { getUserColumnIndex } from './columns';
 
 /**
@@ -10,12 +10,8 @@ import { getUserColumnIndex } from './columns';
 export function handleRowActionTriggered(event) {
     event.stopPropagation();
 
-    const { action, colKeyValue, rowKeyValue } = event.detail;
-    const selectedRow = getUserRowByCellKeys(
-        this.state,
-        rowKeyValue,
-        colKeyValue
-    );
+    const { action, rowKeyValue } = event.detail;
+    const selectedRow = getUserRowByKey(this.state, rowKeyValue);
 
     this.dispatchEvent(
         new CustomEvent('rowaction', {
@@ -37,16 +33,11 @@ export function handleLoadDynamicActions(event) {
 
     const {
         actionsProviderFunction,
-        colKeyValue,
         doneCallback,
         rowKeyValue,
         saveContainerPosition,
     } = event.detail;
-    const selectedRow = getUserRowByCellKeys(
-        this.state,
-        rowKeyValue,
-        colKeyValue
-    );
+    const selectedRow = getUserRowByKey(this.state, rowKeyValue);
 
     saveContainerPosition(this.getViewableRect());
     actionsProviderFunction(unwrap(selectedRow), doneCallback);
@@ -62,7 +53,7 @@ export function handleCellButtonClick(event) {
 
     const { state } = this;
     const { colKeyValue, rowKeyValue } = event.detail;
-    const selectedRow = getUserRowByCellKeys(state, rowKeyValue, colKeyValue);
+    const selectedRow = getUserRowByKey(state, rowKeyValue);
     const colIndex = getUserColumnIndex(state, colKeyValue);
     const col = this._rawColumns[colIndex];
 

package/src/lightning/datatable/rowSelection.js

@@ -1,5 +1,9 @@
-import { getRowByKey, getRowIndexByKey, HEADER_ROW_KEY } from './indexes';
-import { getStateColumnIndex } from './columns';
+import {
+    getCellByKeys,
+    getRowByKey,
+    getRowIndexByKey,
+    HEADER_ROW_KEY,
+} from './indexes';
 import { isNonNegativeInteger } from './utils';
 import {
     getCurrentSelectionLength,
@@ -7,6 +11,7 @@ import {
     isDisabledRow,
     SELECTABLE_HEADER_TYPE,
 } from './rowSelectionShared';
+import { setInliningProperties } from './rowsInlining';
 
 const MAX_ROW_SELECTION_DEFAULT = undefined;
 
@@ -494,7 +499,7 @@ function getLastRowSelection(state) {
     const { lastSelectedRowKey } = state;
     const keyIsValid =
         lastSelectedRowKey !== undefined &&
-        getRowIndexByKey(state, lastSelectedRowKey) !== undefined;
+        getRowByKey(state, lastSelectedRowKey) !== undefined;
 
     return keyIsValid ? lastSelectedRowKey : undefined;
 }
@@ -532,15 +537,33 @@ export function inputTypeNeedsToChange(
     );
 }
 
-export function updateRowSelectionInputType(state) {
-    const type = state.maxRowSelection === 1 ? 'radio' : 'checkbox';
+export function updateRowSelectionInputType(state, datatableId) {
+    const isInputTypeCheckbox = state.maxRowSelection !== 1;
+    const type = isInputTypeCheckbox ? 'checkbox' : 'radio';
     const { rows } = state;
 
+    // Determine if inlining props need resetting
+    // And which column to reset if so
+    let resetInliningProps = false;
+    let checkboxColIndex;
+    if (state.renderModeInline && !state.hideCheckboxColumn) {
+        resetInliningProps = true;
+        checkboxColIndex = state.showRowNumberColumn ? 1 : 0;
+    }
+
     for (let i = 0, { length: rowCount } = rows; i < rowCount; i += 1) {
         // Tracked state changes.
         const row = rows[i];
         row.inputType = type;
         row.isDisabled = isDisabledRow(state, row.key);
+        if (resetInliningProps) {
+            setInliningProperties(
+                state,
+                row.cells[checkboxColIndex],
+                isInputTypeCheckbox,
+                datatableId
+            );
+        }
     }
 }
 
@@ -557,7 +580,7 @@ export function updateRowSelectionInputType(state) {
  * @param {Object} state - The datatable state
  * @param {Number | String} - value to set for maxRowSelection
  */
-export function setMaxRowSelection(state, value) {
+export function setMaxRowSelection(state, value, datatableId) {
     const previousSelectedRowsKeys = getSelectedRowsKeys(state);
     // Tracked state changes.
     markAllRowsDeselected(state);
@@ -579,7 +602,7 @@ export function setMaxRowSelection(state, value) {
             inputTypeNeedsToChange(previousMaxRowSelection, newMaxRowSelection)
         ) {
             // Tracked state changes.
-            updateRowSelectionInputType(state);
+            updateRowSelectionInputType(state, datatableId);
             updateBulkSelectionState(state);
         }
     } else {
@@ -662,11 +685,9 @@ function getRowIntervalIndexes(state, startRowKey, endRowKey) {
  * @param {String} colKeyValue - The column key of the cell to mark selected
  */
 export function setAriaSelectedOnCell(state, rowKeyValue, colKeyValue) {
-    const row = getRowByKey(state, rowKeyValue);
-    const colIndex = getStateColumnIndex(state, colKeyValue);
-
-    if (row && colIndex) {
-        row.cells[colIndex].ariaSelected = 'true';
+    const cell = getCellByKeys(state, rowKeyValue, colKeyValue);
+    if (cell) {
+        cell.ariaSelected = 'true';
     }
 }
 
@@ -682,11 +703,9 @@ export function setAriaSelectedOnCell(state, rowKeyValue, colKeyValue) {
  * @param {String} colKeyValue - The column key of the cell to select
  */
 export function unsetAriaSelectedOnCell(state, rowKeyValue, colKeyValue) {
-    const row = getRowByKey(state, rowKeyValue);
-    const colIndex = getStateColumnIndex(state, colKeyValue);
-
-    if (row && colIndex) {
-        row.cells[colIndex].ariaSelected = false;
+    const cell = getCellByKeys(state, rowKeyValue, colKeyValue);
+    if (cell) {
+        cell.ariaSelected = false;
     }
 }
 

package/src/lightning/datatable/rowSelectionShared.js

@@ -1,4 +1,5 @@
 export const SELECTABLE_HEADER_TYPE = 'SELECTABLE_CHECKBOX';
+export const SORTING_MENU_HEADER_TYPE = 'SELECTABLE_BUTTON_MENU';
 
 /**
  * This file exists in order to get around circular dependencies.