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

package/src/lightning/datatable/columnResizer.js

@@ -1,119 +1,61 @@
-import { normalizeBoolean, isRTL } from 'lightning/utilsPrivate';
-import { isCustomerColumn } from './columns';
-import { clamp, normalizeNumberAttribute } from './utils';
-import { buildCSSWidthStyle } from './widthManagerShared';
+import { isRTL, normalizeBoolean } from 'lightning/utilsPrivate';
+import { clamp, getScrollerY, normalizeNumberAttribute } from './utils';
 
 /**
- * Returns the default state/values of the resizer metadata
+ * Returns the default state/values of the resizer metadata.
+ *
  * @returns {Object} - resizer default state
  */
 export function getResizerDefaultState() {
     return {
+        columnWidths: [],
+        columnWidthsMode: 'fixed',
+        maxColumnWidth: 1000,
+        minColumnWidth: 50,
         resizeColumnDisabled: false,
         resizeStep: 10,
-        columnWidths: [],
         tableWidth: 0,
-        minColumnWidth: 50,
-        maxColumnWidth: 1000,
-        columnWidthsMode: 'fixed',
     };
 }
 
-/***************** GETTERS / SETTERS for Resizer Metadata (widthsData) *****************/
+export const RESIZER_DEFAULT_STATE = getResizerDefaultState();
 
-/************* resizeColumnDisabled *************/
+/***************** GETTERS / SETTERS *****************/
 
-export function isResizeColumnDisabled(widthsData) {
-    return widthsData.resizeColumnDisabled;
-}
 export function setResizeColumnDisabled(widthsData, value) {
+    // Untracked state change.
     widthsData.resizeColumnDisabled = normalizeBoolean(value);
 }
 
-/************* resizeStep *************/
-
-export function getResizeStep(widthsData) {
-    return widthsData.resizeStep;
-}
-
 export function setResizeStep(widthsData, value) {
+    // Tracked state change.
     widthsData.resizeStep = normalizeNumberAttribute(
         'resizeStep',
         value,
         'non-negative',
-        getResizerDefaultState().resizeStep
+        RESIZER_DEFAULT_STATE.resizeStep
     );
 }
 
-/************* columnWidths *************/
-
-/**
- * Returns the columnsWidths saved in the state
- * @param {object} widthsData - data regarding column and table widths
- * @returns {Array|*} - list of column widths
- */
-export function getColumnsWidths(widthsData) {
-    return widthsData.columnWidths;
-}
-/**
- * Sets columnWidths to empty array
- * @param {object} widthsData - data regarding column and table widths
- */
-export function resetColumnWidths(widthsData) {
-    widthsData.columnWidths = [];
-}
-/**
- * Returns true if there are widths stored in the state
- * @param {object} widthsData - data regarding column and table widths
- * @returns {boolean} - true if there are widths store in the state
- */
-export function hasDefinedColumnsWidths(widthsData) {
-    return widthsData.columnWidths.length > 0;
-}
-
-/************* tableWidth *************/
-
-/**
- * Get the full width of table
- * @param {object} widthsData - data regarding column and table widths
- * @returns {number} - table's width
- */
-function getTableWidth(widthsData) {
-    return widthsData.tableWidth;
-}
-function setTableWidth(widthsData, tableWidth) {
-    widthsData.tableWidth = tableWidth;
-}
-
-/************* minColumnWidth *************/
-
-export function getMinColumnWidth(widthsData) {
-    return widthsData.minColumnWidth;
-}
-
 export function setMinColumnWidth(columns, widthsData, value) {
+    // Untracked state changes.
     widthsData.minColumnWidth = normalizeNumberAttribute(
         'minColumnWidth',
         value,
         'non-negative',
-        getResizerDefaultState().minColumnWidth
+        RESIZER_DEFAULT_STATE.minColumnWidth
     );
     // Tracked state change.
     updateColumnWidthsMetadata(columns, widthsData);
 }
 
-/************* maxColumnWidth *************/
-
-export function getMaxColumnWidth(widthsData) {
-    return widthsData.maxColumnWidth;
-}
 export function setMaxColumnWidth(columns, widthsData, value) {
     // Untracked state change.
     widthsData.maxColumnWidth = normalizeNumberAttribute(
         'maxColumnWidth',
         value,
         'non-negative',
-        getResizerDefaultState().maxColumnWidth
+        RESIZER_DEFAULT_STATE.maxColumnWidth
     );
     // Tracked state change.
     updateColumnWidthsMetadata(columns, widthsData);
@@ -122,93 +64,61 @@ export function setMaxColumnWidth(columns, widthsData, value) {
 /***************************** RESIZE LOGIC *****************************/
 
 /**
- * Get the style to match the full width of table
- * @param {object} widthsData - data regarding column and table widths
- * @returns {string} - style string
- */
-export function getCSSWidthStyleOfTable(widthsData) {
-    return buildCSSWidthStyle(getTableWidth(widthsData));
-}
-
-/**
- * - It adjusts the columns widths from the state
- * - It is used when there are columnwidths in state but the table is hidden with offsetwidth 0
- * - In this case we reset the columns to the width in state
+ * Resizes a column width.
  *
- * @param {object} state - table state
- */
-export function adjustColumnsSizeFromState(state) {
-    const columnsWidths = getColumnsWidths(state);
-    let columnsWidthSum = 0;
-    const columns = getColumns(state);
-    for (let i = 0, { length } = columns; i < length; i += 1) {
-        const width = columnsWidths[i];
-        if (width !== undefined) {
-            const col = columns[i];
-            if (isRTL()) {
-                col.offset = columnsWidthSum;
-            }
-            columnsWidthSum += width;
-            col.columnWidth = width;
-            col.style = buildCSSWidthStyle(width);
-        }
-    }
-    setTableWidth(state, columnsWidthSum);
-}
-
-/**
- * Resizes a column width
- * @param {object} columns - all columns on the table
- * @param {object} widthsData - object containing the resizer metadata
- * @param {number} colIndex - the index of the column based on state.columns
- * @param {number} width - the new width is gonna be applied
+ * @param {Object} columns - The column definitions
+ * @param {Object} widthsData - The widths data
+ * @param {number} colIndex - The index of the column based on state.columns
+ * @param {number} width - The new width is gonna be applied
  */
 export function resizeColumn(columns, widthsData, colIndex, width) {
     const col = columns[colIndex];
-    const columnWidths = getColumnsWidths(widthsData);
+    const { columnWidths } = widthsData;
     const currentWidth = columnWidths[colIndex];
     const { minWidth, maxWidth } = col;
     const newWidth = clamp(width, minWidth, maxWidth);
     if (currentWidth !== newWidth) {
         const newDelta = newWidth - currentWidth;
-        setTableWidth(widthsData, getTableWidth(widthsData) + newDelta);
-        updateColumnWidth(columns, widthsData, colIndex, newWidth);
+        // Untracked state changes.
+        columnWidths[colIndex] = newWidth;
+        widthsData.tableWidth += newDelta;
+        // Tracked state changes.
+        col.columnWidth = newWidth;
+        col.style = newWidth ? `width: ${newWidth}px;` : '';
         // Workaround for header positioning issues in RTL
-        updateColumnOffsets(columns, colIndex + 1, newDelta);
+        if (isRTL()) {
+            // update column offsets
+            for (let i = colIndex + 1; i < columns.length; i += 1) {
+                // Tracked state change.
+                columns[i].offset += newDelta;
+            }
+        }
         // Tracked state change.
         col.isResized = true;
     }
 }
 
 /**
- * Resize a column width with an additional delta
+ * Resize a column width with an additional delta.
+ *
  * @param {object} columns - The column definitions
  * @param {object} widthsData - The widths data
  * @param {number} colIndex - The index of the column based on state.columns
  * @param {number} delta - The delta that creates the new width
  */
 export function resizeColumnWithDelta(columns, widthsData, colIndex, delta) {
-    const currentWidth = getColumnsWidths(widthsData)[colIndex];
+    const currentWidth = widthsData.columnWidths[colIndex];
     resizeColumn(columns, widthsData, colIndex, currentWidth + delta);
 }
 
-function updateColumnWidth(columns, widthsData, colIndex, newWidth) {
-    const columnsWidths = getColumnsWidths(widthsData);
-    columnsWidths[colIndex] = newWidth;
-
-    const column = columns[colIndex];
-    column.columnWidth = newWidth;
-    column.style = buildCSSWidthStyle(newWidth);
-}
-
 export function updateColumnWidthsMetadata(columns, widthsData) {
+    const { maxColumnWidth, minColumnWidth } = widthsData;
     for (let colIndex = 0; colIndex < columns.length; colIndex += 1) {
         const col = columns[colIndex];
         if (!col.internal) {
-            col.minWidth = getMinColumnWidth(widthsData);
-            col.maxWidth = getMaxColumnWidth(widthsData);
+            col.maxWidth = maxColumnWidth;
+            col.minWidth = minColumnWidth;
         }
-
         const { initialWidth } = col;
         if (initialWidth) {
             const { minWidth: min, maxWidth: max } = col;
@@ -218,26 +128,10 @@ export function updateColumnWidthsMetadata(columns, widthsData) {
 }
 
 /**
- * Updates the column offsets based on the specified delta, starting from the specified index.
- * This is used to position the column headers properly in RTL.
+ * Returns the current widths for customer columns.
  *
- * @param {object} columns - All columns of the table
- * @param {number} colIndex - The first index to start applying the change in column width
- * @param {number} newDelta - The change in column width to apply to
- */
-function updateColumnOffsets(columns, colIndex, newDelta) {
-    if (isRTL()) {
-        for (let i = colIndex, { length } = columns; i < length; i += 1) {
-            // Tracked state change.
-            columns[i].offset += newDelta;
-        }
-    }
-}
-
-/**
- * Returns the current widths for customer columns
- * @param {object} columns - The columns of the table
- * @param {object} widthsData - The data regarding column and table widths
+ * @param {Object} columns - The columns of the table
+ * @param {Object} widthsData - The data regarding column and table widths
  * @returns {Array} - The widths collection, every element
  * belong to a column with the same index in column prop
  */
@@ -245,7 +139,7 @@ export function getCustomerColumnWidths(columns, widthsData) {
     const widths = [];
     const { columnWidths } = widthsData;
     for (let colIndex = 0; colIndex < columns.length; colIndex += 1) {
-        if (isCustomerColumn(columns[colIndex])) {
+        if (columns[colIndex].internal !== true) {
             widths.push(columnWidths[colIndex]);
         }
     }
@@ -253,13 +147,13 @@ export function getCustomerColumnWidths(columns, widthsData) {
 }
 
 /**
- * It returns if table is rendered and not hidden
- * @param {node} root - table root element
- * @returns {boolean} - true or false if dt is rendered and not hidden on the page
+ * It returns if table is rendered and not hidden.
+ *
+ * @param {Node} template - The datatable template
+ * @returns {boolean} - Whether the datatable is rendered and not hidden on the page
  */
-export function isTableRenderedVisible(root) {
-    const CONTAINER_SEL = '.slds-scrollable_y';
-    const scrollerY = root.querySelector(CONTAINER_SEL);
+export function isTableRenderedVisible(template) {
+    const scrollerY = getScrollerY(template);
     return (
         scrollerY &&
         !!(
@@ -269,7 +163,3 @@ export function isTableRenderedVisible(root) {
         )
     );
 }
-
-function getColumns(state) {
-    return state.columns;
-}

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 { getScrollerX } 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 scrollerX = getScrollerX(template);
+                return scrollerX.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;
             },
         };
     }