lightning-base-components 1.21.3-alpha → 1.21.5-alpha

package/src/lightning/datatable/errors.js

@@ -1,39 +1,27 @@
-// 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
- *
+ * Sets row-level and table-level errors in datatable state object.
+ * Errors being set here overwrite the previous error object in the state.
  *
  * @param {Object} state - The untracked datatable state
  */
 export function setErrors(state, errors) {
-    return (state.errors = Object.assign({}, DEFAULT_ERROR_STATE, errors));
+    state.errors = Object.assign(
+        {
+            rows: {},
+            table: {},
+        },
+        errors
+    );
 }
 
 /**
- * Retrieves the row-level errors of a particular row from datatable's state object
- */
-export function getRowError(state, rowKey) {
-    const { rows } = state.errors;
-    return (rows && rows[rowKey]) || {};
-}
-
-/**
- * Retrieves the table-level errors from the datatable's state object
+ * Resets row-level and table-level errors in datatable state object.
+ *
+ * @param {Object} _state - The untracked datatable state
  */
-export function getTableError(state) {
-    return state.errors.table || {};
+export function resetErrors(state) {
+    state.errors = {
+        rows: {},
+        table: {},
+    };
 }

package/src/lightning/datatable/fixedWidthStrategy.js

@@ -8,27 +8,18 @@ import { getColumnWidth, getTotalWidthsData } from './widthManagerShared';
  * @returns {Number} The expected width of the table
  */
 function getExpectedTableWidth(availableWidth, widthsData) {
-    const minExpectedTableWidth = getMinExpectedTableWidth(widthsData);
-    return widthsData.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,
         totalResizedWidth,
         totalFlexibleColumns,
         minColumnWidth,
-    } = widthsMetadata;
+    } = widthsData;
     const minTotalFlexibleWidth = totalFlexibleColumns * minColumnWidth;
-    return minTotalFlexibleWidth + totalFixedWidth + totalResizedWidth;
+    const minExpectedTableWidth =
+        minTotalFlexibleWidth + totalFixedWidth + totalResizedWidth;
+    return widthsData.totalFlexibleColumns === 0
+        ? minExpectedTableWidth
+        : Math.max(minExpectedTableWidth, availableWidth);
 }
 
 /**
@@ -37,14 +28,10 @@ function getMinExpectedTableWidth(widthsMetadata) {
 export class FixedWidthStrategy {
     widthsData = {};
 
-    /************************** LIFECYCLE HOOKS **************************/
-
     constructor(minColumnWidth, maxColumnWidth) {
         this.widthsData = { minColumnWidth, maxColumnWidth };
     }
 
-    /************************** PRIVATE SETTERS **************************/
-
     /**
      * Sets the minimum column width
      *
@@ -82,7 +69,6 @@ export class FixedWidthStrategy {
             totalWidthsData,
             expectedTableWidth
         );
-
         const columnWidths = [];
         for (let colIndex = 0; colIndex < _columns.length; colIndex += 1) {
             const width =
@@ -90,8 +76,7 @@ export class FixedWidthStrategy {
                 expectedFlexibleColumnWidth;
             columnWidths[colIndex] = width;
         }
-
-        return { columnWidths, expectedTableWidth };
+        return { columnWidths };
     }
 
     /**

package/src/lightning/datatable/headerActions.js

@@ -1,6 +1,6 @@
 import { unwrap } from 'lwc';
-import { getUserColumnIndex, getColumns } from './columns';
-import { getActions, handleTriggeredAction } from './wrapText';
+import { getUserColumnIndex } from './columns';
+import { getInternalActions, handleTriggeredAction } from './wrapText';
 
 // Height of a clickable menu item
 const ACTION_REM_HEIGHT = 2.125;
@@ -10,32 +10,17 @@ const DIVIDER_REM_HEIGHT = 1.0625;
 
 /************************** 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
- * @returns {Array} All wrapText internal actions
- */
-export function getInternalActions(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
  */
-export function updateHeaderActions(state) {
-    const columns = getColumns(state);
-    for (let colIndex = 0; colIndex < columns.length; colIndex += 1) {
+export function updateHeaderInternalActions(state) {
+    const { columns } = state;
+    const { length: colCount } = columns;
+    for (let colIndex = 0; colIndex < colCount; colIndex += 1) {
         const col = columns[colIndex];
-        col.actions = {
-            menuAlignment: getMenuAlignment(columns, colIndex),
-            customerActions: Array.isArray(col.actions) ? col.actions : [],
-            internalActions: getInternalActions(state, col),
-        };
+        col.actions.internalActions = getInternalActions(state, col);
     }
 }
 
@@ -51,7 +36,7 @@ export function handleHeaderActionTriggered(event) {
     const { action, actionType, colKeyValue } = event.detail;
 
     if (actionType !== 'customer') {
-        handleTriggeredAction(this.state, action, colKeyValue);
+        handleTriggeredAction(this, action, colKeyValue);
     }
 
     dispatchHeaderActionEvent(this, action, colKeyValue);
@@ -105,18 +90,3 @@ function dispatchHeaderActionEvent(dt, action, colKeyValue) {
         })
     );
 }
-
-/**
- * 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
- * @returns {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';
-}

package/src/lightning/datatable/indexes.js

@@ -0,0 +1,42 @@
+import { generateColKeyValue } from './columns';
+
+export const HEADER_ROW_INDEX = -1;
+export const HEADER_ROW_KEY = 'HEADER';
+
+export function getCellFromIndexes(state, rowIndex, colIndex) {
+    const { columns, rows } = state;
+    if (columns.length > 0) {
+        return {
+            rowKeyValue:
+                rowIndex === HEADER_ROW_INDEX
+                    ? HEADER_ROW_KEY
+                    : rows[rowIndex].key,
+            colKeyValue: generateColKeyValue(columns[colIndex], colIndex),
+        };
+    }
+    return undefined;
+}
+
+export function getRowIndexByKey(state, rowKeyValue) {
+    const row = state.indexes[rowKeyValue];
+    return row ? row.rowIndex : undefined;
+}
+
+export function getRowByKey(state, key) {
+    return state.rows[getRowIndexByKey(state, key)];
+}
+
+export function getUserRowByCellKeys(state, rowKeyValue, colKeyValue) {
+    const rowIndex = state.indexes[rowKeyValue][colKeyValue][0];
+    return state.data[rowIndex];
+}
+
+export function isValidCell(state, rowKeyValue, colKeyValue) {
+    if (rowKeyValue === HEADER_ROW_KEY) {
+        return state.headerIndexes[colKeyValue] !== undefined;
+    }
+    const row = getRowByKey(state, rowKeyValue);
+    const colIndex = state.headerIndexes[colKeyValue];
+
+    return row && row.cells[colIndex];
+}

package/src/lightning/datatable/infiniteLoading.js

@@ -1,5 +1,9 @@
 import { normalizeBoolean } from 'lightning/utilsPrivate';
-import { getScrollOffsetFromTableEnd, isNonNegativeInteger } from './utils';
+import {
+    getScrollOffsetFromTableEnd,
+    getScrollerY,
+    isNonNegativeInteger,
+} from './utils';
 
 const SCROLL_ALLOWANCE = 2;
 export const DEFAULT_LOAD_MORE_OFFSET = 20;
@@ -7,17 +11,7 @@ export const DEFAULT_LOAD_MORE_OFFSET = 20;
 /*********************** STATE MANAGEMENT ************************/
 
 /**
- * Returns whether the datatable is in a loading state
- *
- * @param {Object} state The datatable state object
- * @returns {Boolean} The loading state
- */
-export function isLoading(state) {
-    return state.isLoading;
-}
-
-/**
- * Sets the loading state of the datatable
+ * Sets the loading state of the datatable.
  *
  * @param {Object} state The datatable state object
  * @param {Boolean} value The loading state to set
@@ -27,17 +21,7 @@ export function setLoading(state, value) {
 }
 
 /**
- * Returns whether infinite loading is enabled on the datatable
- *
- * @param {Object} state The datatable state object
- * @returns {Boolean} The infinite loading state
- */
-export function isInfiniteLoadingEnabled(state) {
-    return state.enableInfiniteLoading;
-}
-
-/**
- * Sets the infinite loading option on the datatable
+ * Sets the infinite loading option on the datatable.
  *
  * @param {Object} state The datatable state object
  * @param {Boolean} value The infinite loading state to set
@@ -79,7 +63,7 @@ export function setLoadMoreOffset(state, value) {
 
 /**
  * Checks whether the datatable should begin loading more content
- * and then dispatches the `loadmore` event indicating that directive.
+ * and then dispatches the 'loadmore' event indicating that directive.
  *
  * @param {Event} event
  */
@@ -104,25 +88,22 @@ export function handleLoadMoreCheck(event) {
 /**
  * Determines whether or not to prefetch data. If so,
  * dispatches the `loadmore` event.
- *
- * @param {Object} root  The datatable
- * @param {Object} state The datatable state object
  */
-export function handlePrefetch(root, state) {
+export function handlePrefetch() {
+    const { state, template } = this;
     if (
         state.isLoading ||
         !state.enableInfiniteLoading ||
         (this.viewportRendering &&
             this._renderManager &&
             !this._renderManager.hasWrapperHeight()) ||
-        !hasData(root)
+        !hasData(template)
     ) {
-        // Don't prefetch if already loading or data is not set yet
+        // Don't prefetch if already loading or data is not set yet.
         return;
     }
 
-    const scrollerY = root.querySelector('.slds-scrollable_y');
-
+    const scrollerY = getScrollerY(template);
     if (scrollerY && isScrollerVisible(scrollerY) && !isScrollable(scrollerY)) {
         this.dispatchEvent(new CustomEvent('loadmore'));
     }
@@ -134,7 +115,7 @@ export function handlePrefetch(root, state) {
  * Determines if a scroller element is scrollable.
  *
  * @param {Element} scroller The scroller element to check
- * @returns {Boolean} Whether or not the element is scrollable
+ * @returns {Boolean} Whether the element is scrollable
  */
 function isScrollable(scroller) {
     // scrollHeight should be greater than clientHeight by some allowance
@@ -144,8 +125,8 @@ function isScrollable(scroller) {
 /**
  * Determines if a scroller element's scroll bars are visible.
  *
- * @param {Element} scroller The DOM element to check
- * @returns {Boolean} Whether or not the scroller element's scroll bars are visible
+ * @param {Element} scroller The scroller element to check
+ * @returns {Boolean} Whether the scroller element's scroll bars are visible
  */
 function isScrollerVisible(scroller) {
     return !!(