lightning-base-components 1.21.3-alpha → 1.21.4-alpha

package/src/lightning/datatable/columnWidthManager.js

@@ -1,48 +1,25 @@
-import {
-    getColumnsWidths,
-    getResizerDefaultState,
-    hasDefinedColumnsWidths,
-    isTableRenderedVisible,
-} from './columnResizer';
+import { RESIZER_DEFAULT_STATE, isTableRenderedVisible } from './columnResizer';
 import { AutoWidthStrategy } from './autoWidthStrategy';
 import { FixedWidthStrategy } from './fixedWidthStrategy';
+import { getScrollerXFromScrollerY, getScrollerY } from './utils';
 import {
     getRowNumberColumnIndex,
     getAdjustedRowNumberColumnWidth,
 } from './rowNumber';
-import {
-    getColumnWidth,
-    getDomWidth,
-    buildCSSWidthStyle,
-} from './widthManagerShared';
+import { getColumnWidth } from './widthManagerShared';
 import { isRTL } from 'lightning/utilsPrivate';
 
 const AUTO_WIDTH_MODE = 'auto';
 const FIXED_WIDTH_MODE = 'fixed';
 
-const tableTypes = {
-    default: {
-        BASE: '.slds-table',
-        CONTAINER: '.slds-scrollable_x',
-        DATA_CELL: 'tbody tr:first-child td,tbody tr:first-child th',
-        HEADER_CELL: 'thead tr th lightning-primitive-header-factory',
-    },
-    roleBased: {
-        BASE: '.slds-table',
-        CONTAINER: '.slds-scrollable_x',
-        DATA_CELL: 'div[data-rowgroup-body] div[role="row"]:first-child div',
-        HEADER_CELL: 'div.table-header lightning-primitive-header-factory',
-    },
-};
-
 /**
  * Computes and updates the `widthsData` for a datatable.
  *
- * @param {Object} adjustedWidths The adjusted widths object
  * @param {Array} columns The column definitions
  * @param {Object} widthsData The widths data to update
+ * @param {Object} adjustedWidths The adjusted widths object
  */
-export function updateColumnWidths(adjustedWidths, columns, widthsData) {
+export function updateColumnWidths(columns, widthsData, adjustedWidths) {
     const { columnWidths } = adjustedWidths;
     const { length: colCount } = columns;
     if (columnWidths.length !== colCount) {
@@ -55,8 +32,7 @@ export function updateColumnWidths(adjustedWidths, columns, widthsData) {
         const newWidth = columnWidths[colIndex];
         widthsData.columnWidths[colIndex] = newWidth;
         col.columnWidth = newWidth;
-        col.style = buildCSSWidthStyle(newWidth);
-
+        col.style = newWidth ? `width: ${newWidth}px;` : '';
         // In RTL, we need to explicitly position the column headers.
         // We do this by providing the offset (in pixels) from the start of the table.
         if (rtl) {
@@ -76,7 +52,6 @@ export function updateColumnWidths(adjustedWidths, columns, widthsData) {
  * on `column-widths-mode`: "auto" or "fixed"
  */
 export class ColumnWidthManager {
-    // Private variables
     columnWidthMode = FIXED_WIDTH_MODE;
     resizeObserverAvailable = typeof ResizeObserver === 'function';
 
@@ -92,11 +67,9 @@ export class ColumnWidthManager {
 
     constructor(widthsData) {
         const minColumnWidth =
-            widthsData.minColumnWidth ||
-            getResizerDefaultState().minColumnWidth;
+            widthsData.minColumnWidth || RESIZER_DEFAULT_STATE.minColumnWidth;
         const maxColumnWidth =
-            widthsData.maxColumnWidth ||
-            getResizerDefaultState().maxColumnWidth;
+            widthsData.maxColumnWidth || RESIZER_DEFAULT_STATE.maxColumnWidth;
         const fixedWidthStrategy = new FixedWidthStrategy(
             minColumnWidth,
             maxColumnWidth
@@ -163,15 +136,6 @@ export class ColumnWidthManager {
 
     /************************* HELPER FUNCTIONS **************************/
 
-    /**
-     * Sets the datatable's configured render mode.
-     *
-     * @param {String} mode Either "table" or "role-based"
-     */
-    setRenderMode(mode) {
-        this._renderMode = mode;
-    }
-
     /**
      * Determines if we should fire the resize event based on the previous
      * widths data and the column definition. The event is only fired when
@@ -184,8 +148,8 @@ export class ColumnWidthManager {
      */
     shouldFireResizeEvent(previousWidthsData, columns) {
         return (
-            this._columnWidthMode === FIXED_WIDTH_MODE &&
-            getColumnsWidths(previousWidthsData).length !== columns.length
+            this.columnWidthMode === FIXED_WIDTH_MODE &&
+            previousWidthsData.columnWidths.length !== columns.length
         );
     }
 
@@ -193,14 +157,14 @@ export class ColumnWidthManager {
      * Adjusts all the column sizes based on the supplied widths data.
      *
      * @param {Node} template The datatable template
-     * @param {Array} columnDefs The column definitions
+     * @param {Array} columns The column definitions
      * @param {Object} widthsData The widths data object
      */
     adjustColumnsSize(template, columns, widthsData) {
         const {
-            isResizingUpdateQueued,
-            isAutoResizingUpdateQueued,
             columnWidthStrategy,
+            isAutoResizingUpdateQueued,
+            isResizingUpdateQueued,
         } = this;
         if (isResizingUpdateQueued) {
             let adjustedWidths;
@@ -217,11 +181,11 @@ export class ColumnWidthManager {
                 // Otherwise update from previous widths
                 adjustedWidths = {
                     columnWidths: widthsData.columnWidths,
-                    expectedTableWidth: widthsData.tableWidth,
                 };
             }
-            updateColumnWidths(adjustedWidths, columns, widthsData);
+            updateColumnWidths(columns, widthsData, adjustedWidths);
         }
+
         this.isAutoResizingUpdateQueued = false;
         this.isResizingUpdateQueued = false;
     }
@@ -238,7 +202,7 @@ export class ColumnWidthManager {
             this.getDatatableInterface(template),
             columns
         );
-        updateColumnWidths(adjustedWidths, columns, widthsData);
+        updateColumnWidths(columns, widthsData, adjustedWidths);
     }
 
     /**
@@ -294,13 +258,13 @@ export class ColumnWidthManager {
      */
     handleRowNumberOffsetChange(state, widthsData) {
         const colIndex = getRowNumberColumnIndex(state);
-        if (colIndex > -1) {
+        if (colIndex !== -1) {
             const { columns } = state;
             const col = columns[colIndex];
             const newWidth = getAdjustedRowNumberColumnWidth(state);
             if (col.initialWidth !== newWidth) {
                 col.initialWidth = Math.max(newWidth, col.minWidth);
-                if (hasDefinedColumnsWidths(widthsData)) {
+                if (widthsData.columnWidths.length > 0) {
                     // When columns are resized with the resizer, a horizontal scroller appears.
                     // Adjusting the columns size will respect widths already set and try to fit this column.
                     this.isResizingUpdateQueued = true;
@@ -357,7 +321,7 @@ export class ColumnWidthManager {
     }
 
     /**
-     * Evalutes if there is a change between two sets of data.
+     * Evaluates if there is a change between two sets of data.
      *
      * @param {Array} previousData An array of previous data
      * @param {Array} newData An array of new data
@@ -381,7 +345,7 @@ export class ColumnWidthManager {
      * @returns {Boolean} Whether the column should resize with an update
      */
     shouldResizeWithUpdate(template, widthsData) {
-        if (hasDefinedColumnsWidths(widthsData)) {
+        if (widthsData.columnWidths.length > 0) {
             // Can resize from DOM when table is visible.
             // Otherwise, only when `ResizeObserver` is available in browser.
             return (
@@ -391,19 +355,6 @@ export class ColumnWidthManager {
         return true;
     }
 
-    /**
-     * @private
-     * Determines the appropriate selectors to use based on the datatable render mode.
-     *
-     * @returns {Object} Selectors based on datatable render mode
-     */
-    _getTableSelectors() {
-        if (this._renderMode === 'role-based') {
-            return tableTypes.roleBased;
-        }
-        return tableTypes.default;
-    }
-
     /**
      * Retrieves the datatable interface from the DOM
      *
@@ -411,17 +362,14 @@ export class ColumnWidthManager {
      * @returns {Object} The datatable interface
      */
     getDatatableInterface(template) {
-        const datatableSelectors = this._getTableSelectors();
         return {
             getAvailableWidthFromDom() {
-                const container = template.querySelector(
-                    datatableSelectors.CONTAINER
-                );
-                return getDomWidth(container);
+                const scrollerY = getScrollerY(template);
+                return getScrollerXFromScrollerY(scrollerY).offsetWidth;
             },
             getDataCellWidths() {
                 const cellElements = template.querySelectorAll(
-                    datatableSelectors.DATA_CELL
+                    '[data-rowgroup-body] [role="row"]:first-child > *'
                 );
                 const { length } = cellElements;
                 const result = Array(length);
@@ -432,7 +380,7 @@ export class ColumnWidthManager {
             },
             getHeaderCellWidths() {
                 const headerElements = template.querySelectorAll(
-                    datatableSelectors.HEADER_CELL
+                    '[role="columnheader"] lightning-primitive-header-factory'
                 );
                 const result = [];
                 for (let i = 0; i < headerElements.length; i += 1) {
@@ -444,11 +392,7 @@ export class ColumnWidthManager {
                 return result;
             },
             getTableElementWidth() {
-                const tableElement =
-                    template.querySelector(datatableSelectors.BASE) ||
-                    template.querySelector('[role="grid"]') ||
-                    template.querySelector('[role="treegrid"]');
-                return getDomWidth(tableElement);
+                return template.querySelector('.slds-table').offsetWidth;
             },
         };
     }