lightning-base-components 1.21.2-alpha → 1.21.4-alpha

package/src/lightning/datatable/renderManager.js

@@ -28,10 +28,6 @@ export function setVirtualize(state, value) {
     }
 }
 
-export function getDTWrapperHeight() {
-    return this.template.querySelector('.slds-scrollable_x').offsetHeight;
-}
-
 function getDefaultPreviousInfo() {
     return {
         renderedRowCount: 0,
@@ -66,9 +62,10 @@ export class RenderManager {
     /**
      * Updates and normalizes configuration for RenderManager
      * Used when setting renderConfig for datatable
-     * @param {Object} state - datatable state
-     * @param {Function} getWrapperHeight - function to get height of datatable wrapper
-     * @param {RenderManagerConfig} config - set of properties used for render management
+     *
+     * @param {Object} state - The datatable state
+     * @param {Function} getWrapperHeight - A function to get height of datatable wrapper
+     * @param {RenderManagerConfig} config - The render management config
      */
     configure(state, getWrapperHeight, config) {
         const {
@@ -282,8 +279,9 @@ export class RenderManager {
      * @param {Node} resizeTarget
      */
     connectResizeObserver(resizeTarget) {
-        if (this._heightResizeObserver) {
-            this._heightResizeObserver.observe(resizeTarget);
+        const { _heightResizeObserver } = this;
+        if (_heightResizeObserver) {
+            _heightResizeObserver.observe(resizeTarget);
             this._resizeObserverConnected = true;
         }
     }
@@ -292,9 +290,10 @@ export class RenderManager {
      * Disconnect the resize observer
      */
     disconnectResizeObserver() {
-        if (this._heightResizeObserver) {
+        const { _heightResizeObserver } = this;
+        if (_heightResizeObserver) {
             this._resizeObserverConnected = false;
-            this._heightResizeObserver.disconnect();
+            _heightResizeObserver.disconnect();
         }
     }
 

package/src/lightning/datatable/resizeObserver.js

@@ -1,48 +1,25 @@
 import { LightningResizeObserver } from 'lightning/resizeObserver';
 import { isTableRenderedVisible } from './columnResizer';
-import { ResizeSensor } from './resizeSensor';
-import { debounce } from 'lightning/inputUtils';
-import { getColumns } from './columns';
 
 const WIDTH_OBSERVER_SELECTOR = '.dt-width-observer';
 
 export class LightningDatatableResizeObserver {
     _connected = false;
-    _resizeObserverAvailable = typeof ResizeObserver === 'function';
 
     /**
-     * Depending on the browser/availability, this will create either a (standard)
-     * ResizeObserver via LightningResizeObserver or fallback to the ResizeSensor
+     * Create either a standard ResizeObserver via LightningResizeObserver.
      */
-    constructor(template, state, widthsData, columnWidthManager) {
+    constructor(template, resizeCallback) {
         const resizeTarget = template.querySelector(WIDTH_OBSERVER_SELECTOR);
-
-        // If ResizeObserver is available on the browser, create one and begin observing for changes
+        // Create ResizeObserver and begin observing for changes.
         // Calculate and modify the column widths when there are changes to the dimensions
-        // and when the table is rendered and visible on screen
-        if (this._resizeObserverAvailable) {
-            this._resizeObserver = new LightningResizeObserver(() => {
-                if (this._connected && isTableRenderedVisible(template)) {
-                    columnWidthManager.adjustColumnsSizeAfterResize(
-                        template,
-                        getColumns(state),
-                        widthsData
-                    );
-                }
-            });
-            this._resizeObserver.observe(resizeTarget);
-        } else {
-            // fallback behavior for IE11 using existing resize sensor functionality (less performant)
-            this._resizeSensor = createResizeSensorForIE11(
-                this,
-                columnWidthManager,
-                template,
-                state,
-                widthsData,
-                resizeTarget
-            );
-        }
-
+        // and when the table is rendered and visible on screen.
+        this._resizeObserver = new LightningResizeObserver(() => {
+            if (this._connected && isTableRenderedVisible(template)) {
+                resizeCallback();
+            }
+        });
+        this._resizeObserver.observe(resizeTarget);
         this._connected = true;
     }
 
@@ -75,37 +52,3 @@ export class LightningDatatableResizeObserver {
         return this._connected;
     }
 }
-
-/**
- * Creates a ResizeSensor which is used to observe the dimensions of an element.
- *
- * This ResizeSensor is only used in the event that the standard ResizeObserver
- * is NOT available on the browser.
- * Currently only IE11 does not support the ResizeObserver. We should be able to
- * remove this once we fully drop support of IE11.
- */
-function createResizeSensorForIE11(
-    dtObserver,
-    columnWidthManager,
-    template,
-    state,
-    widthsData,
-    resizeTarget
-) {
-    return new ResizeSensor(
-        resizeTarget,
-        debounce(() => {
-            // since this event handler is debounced, it might be the case that at the time the handler is called,
-            // the element is disconnected (this.hasDetachedListeners)
-            // the scroll event which the ResizeSensor uses can happen when table is hidden (as in console when switching tabs)
-            // and hence the need for isTableRenderedVisible check
-            if (dtObserver.isConnected() && isTableRenderedVisible(template)) {
-                columnWidthManager.adjustColumnsSizeAfterResize(
-                    template,
-                    getColumns(state),
-                    widthsData
-                );
-            }
-        }, 200)
-    );
-}

package/src/lightning/datatable/rowLevelActions.js

@@ -1,5 +1,5 @@
 import { unwrap } from 'lwc';
-import { getUserRowByCellKeys } from './rows';
+import { getUserRowByCellKeys } from './indexes';
 import { getUserColumnIndex } from './columns';
 
 /**
@@ -60,16 +60,17 @@ export function handleLoadDynamicActions(event) {
 export function handleCellButtonClick(event) {
     event.stopPropagation();
 
+    const { state } = this;
     const { colKeyValue, rowKeyValue } = event.detail;
-    const row = getUserRowByCellKeys(this.state, rowKeyValue, colKeyValue);
-    const userColumnIndex = getUserColumnIndex(this.state, colKeyValue);
-    const userColumnDefinition = this._columns[userColumnIndex];
+    const selectedRow = getUserRowByCellKeys(state, rowKeyValue, colKeyValue);
+    const colIndex = getUserColumnIndex(state, colKeyValue);
+    const col = this._rawColumns[colIndex];
 
     this.dispatchEvent(
         new CustomEvent('rowaction', {
             detail: {
-                action: unwrap(userColumnDefinition.typeAttributes),
-                row: unwrap(row),
+                action: unwrap(col.typeAttributes),
+                row: unwrap(selectedRow),
             },
         })
     );

package/src/lightning/datatable/rowNumber.js

@@ -1,60 +1,18 @@
 import { normalizeNumberAttribute } from './utils';
 import labelRowLevelErrorAssistiveText from '@salesforce/label/LightningDatatable.rowLevelErrorAssistiveText';
-import labelRowNumber from '@salesforce/label/LightningDatatable.rowNumber';
 import { formatLabel } from 'lightning/utils';
-import { normalizeBoolean } from 'lightning/utilsPrivate';
 
-export const TOOLTIP_ALLOWANCE = 20;
 const CHAR_WIDTH = 10;
-const ROWNUMBER_PADDING = 12;
+const ROW_NUMBER_PADDING = 12;
 const ROW_NUMBER_COLUMN_TYPE = 'rowNumber';
+
+export const ROW_NUMBER_INITIAL_WIDTH = 52;
+export const TOOLTIP_ALLOWANCE = 20;
+
 const i18n = {
     rowLevelErrorAssistiveText: labelRowLevelErrorAssistiveText,
-    rowNumber: labelRowNumber,
 };
 
-/**
- * Returns the initial default column definition
- * for the row number column
- */
-export function getRowNumberColumnDef() {
-    return {
-        type: ROW_NUMBER_COLUMN_TYPE,
-        ariaLabel: i18n.rowNumber,
-        sortable: false,
-        initialWidth: 52,
-        minWidth: 52,
-        maxWidth: 1000,
-        tabIndex: -1,
-        internal: true,
-        resizable: false,
-    };
-}
-
-/**
- * Retrieves showRowNumberColumn from the state
- * Can be used to determine if the datatable should
- * show the row number column or not
- */
-export function hasRowNumberColumn(state) {
-    return state.showRowNumberColumn;
-}
-
-/**
- * Normalizes the passed in `value` to a boolean and
- * sets it to showRowNumberColumn in the state
- */
-export function setShowRowNumberColumn(state, value) {
-    state.showRowNumberColumn = normalizeBoolean(value);
-}
-
-/**
- * Retrieves rowNumberOffset from the state
- */
-export function getRowNumberOffset(state) {
-    return state.rowNumberOffset;
-}
-
 /**
  * Normalizes the passed in value to a non-negative number
  * and sets it to the rowNumberOffset in the state.
@@ -69,28 +27,24 @@ export function setRowNumberOffset(state, value) {
     );
 }
 
-export function isRowNumberColumn(column) {
-    return column.type === ROW_NUMBER_COLUMN_TYPE;
-}
-
 /**
- * Calculates the width of the row number column
+ * Calculates the width of the row number column.
  * This takes into account the number of digits in the row number
  * (ex. 3 for 100 rows), padding in the cell and
- * space allowance for the error tooltip which is rendered in this cell
+ * space allowance for the error tooltip which is rendered in this cell.
  *
- * @param {Object} state - datatable's state object
+ * @param {Object} state - The datatable state
  * @returns
  */
 export function getAdjustedRowNumberColumnWidth(state) {
-    const numOfRows = state.rows.length;
-    const offset = state.rowNumberOffset;
-    const numberOfChars = String(numOfRows + offset).length;
+    const numberOfChars = String(
+        state.rows.length + state.rowNumberOffset
+    ).length;
     return Math.max(
         CHAR_WIDTH * numberOfChars +
-            ROWNUMBER_PADDING /* padding */ +
-            TOOLTIP_ALLOWANCE /* primitive-tootlip */,
-        getRowNumberColumnDef().initialWidth
+            ROW_NUMBER_PADDING /* padding */ +
+            TOOLTIP_ALLOWANCE /* primitive-tooltip */,
+        ROW_NUMBER_INITIAL_WIDTH
     );
 }
 
@@ -98,15 +52,14 @@ export function getAdjustedRowNumberColumnWidth(state) {
  * Retrieves the column index of the row number column
  * Returns -1 if the row number column is not present
  *
- * @param {Object} state - datatable's state object
+ * @param {Object} state - The datatable state
  * @returns {Number} index of row number column. Returns -1 if not present
  */
 export function getRowNumberColumnIndex(state) {
-    if (hasRowNumberColumn(state) && state.columns.length > 0) {
-        const columns = state.columns;
-        for (let i = 0; i < columns.length; i++) {
-            const column = columns[i];
-            if (column.type === ROW_NUMBER_COLUMN_TYPE) {
+    if (state.showRowNumberColumn) {
+        const { columns } = state;
+        for (let i = 0, { length } = columns; i < length; i += 1) {
+            if (columns[i].type === ROW_NUMBER_COLUMN_TYPE) {
                 return i;
             }
         }
@@ -115,33 +68,42 @@ export function getRowNumberColumnIndex(state) {
 }
 
 /**
- * Constructs and returns the column definition for the row number column
- * Column definition contains the row number column's row type and
- * the error object containing the title, error messages and alt text
+ * Constructs columns definition error object containing the title, error messages and alt text.
  *
  * @param {Object} rowErrors - object containing metadata of errors in the row
  * @param {String} rowTitle - value of the cell which has the scope of the row/rowheader
  * @returns
  */
-export function getRowNumberErrorColumnDef(rowErrors, rowTitle) {
-    const { title, messages } = rowErrors;
-
-    const numberOfErrors = rowErrors.cells
-        ? Object.keys(rowErrors.cells).length
-        : rowErrors.fieldNames
-        ? rowErrors.fieldNames.length
-        : 0;
-
+export function getRowNumberError(rowErrors, rowTitle) {
+    const { cells, fieldNames, messages, title } = rowErrors || {};
+    let numberOfErrors = 0;
+    if (cells) {
+        numberOfErrors = Object.keys(cells).length;
+    } else if (fieldNames) {
+        numberOfErrors = fieldNames.length;
+    }
     const alternativeText = formatLabel(
         i18n.rowLevelErrorAssistiveText,
         rowTitle || '',
         numberOfErrors
     );
+    return { title, messages, alternativeText };
+}
 
+/**
+ * Constructs and returns the column definition for the row number column
+ * Column definition contains the row number column's row type and
+ * the error object containing the title, error messages and alt text
+ *
+ * @param {Object} rowErrors - object containing metadata of errors in the row
+ * @param {String} rowTitle - value of the cell which has the scope of the row/rowheader
+ * @returns
+ */
+export function getRowNumberErrorColumnDef(rowErrors, rowTitle) {
     return {
         type: ROW_NUMBER_COLUMN_TYPE,
         typeAttributes: {
-            error: { title, messages, alternativeText },
+            error: getRowNumberError(rowErrors, rowTitle),
         },
     };
 }