lightning-base-components 1.21.1-alpha → 1.21.3-alpha

package/src/lightning/datatable/renderManager.js

@@ -66,9 +66,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 +283,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 +294,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,7 +1,5 @@
 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';
@@ -17,31 +15,19 @@ export class LightningDatatableResizeObserver {
     constructor(template, state, widthsData, columnWidthManager) {
         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
-            );
-        }
+        this._resizeObserver = new LightningResizeObserver(() => {
+            if (this._connected && isTableRenderedVisible(template)) {
+                columnWidthManager.adjustColumnsSizeAfterResize(
+                    template,
+                    getColumns(state),
+                    widthsData
+                );
+            }
+        });
+        this._resizeObserver.observe(resizeTarget);
 
         this._connected = true;
     }
@@ -75,37 +61,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

@@ -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._columns[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

@@ -4,15 +4,16 @@ 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';
 const i18n = {
     rowLevelErrorAssistiveText: labelRowLevelErrorAssistiveText,
     rowNumber: labelRowNumber,
 };
 
+export const TOOLTIP_ALLOWANCE = 20;
+
 /**
  * Returns the initial default column definition
  * for the row number column
@@ -74,22 +75,22 @@ export function isRowNumberColumn(column) {
 }
 
 /**
- * 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 */,
+            ROW_NUMBER_PADDING /* padding */ +
+            TOOLTIP_ALLOWANCE /* primitive-tooltip */,
         getRowNumberColumnDef().initialWidth
     );
 }
@@ -98,15 +99,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 (hasRowNumberColumn(state)) {
+        const { columns } = state;
+        for (let i = 0, { length } = columns; i < length; i += 1) {
+            if (columns[i].type === ROW_NUMBER_COLUMN_TYPE) {
                 return i;
             }
         }
@@ -124,13 +124,13 @@ export function getRowNumberColumnIndex(state) {
  * @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;
+    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,