lightning-base-components 1.21.6-alpha → 1.21.8-alpha

package/src/lightning/datatable/__examples__disabled/simpleComponentPopupNested/simpleComponentPopupNested.html

@@ -0,0 +1,31 @@
+  <template>
+    <lightning-button-icon
+            icon-name="utility:price_book_entries"
+            class="slds-m-horizontal_small price-selector-icon"
+            variant="bare" size="medium" alternative-text="Pricing Options"
+            onclick={openPopup}
+            data-navigation="enable"
+            tabindex={internalTabIndex}
+    ></lightning-button-icon>
+
+    <!-- Since the only element that will appear on focus or blur of the custom cell is the button icon -->
+    <!-- We do not need to pass data-navigation here or tabindex since the popup will not exist on focus or blur -->
+    <!-- Which is where focus handling is handled by the datatable -->
+    <lightning-popup aria-describedby="popup-body" onkeydown={handleKeyDown}>
+        <div class="slds-popover slds-is-absolute slds-m-top_medium">
+            <header class="slds-popover__header price-selector-header slds-p-around_small">
+                <h2 class="slds-text-title_bold">Header</h2>
+            </header>
+            <div id="popup-body" class="slds-popover__body">
+                <div class="price-selector slds-p-horizontal_small">
+                    <lightning-radio-group options={priceOptions1}
+                                           type="radio">
+                    </lightning-radio-group>
+                </div>
+                <div class="price-selector-button slds-p-top_medium slds-p-bottom_xx-small">
+                        <lightning-button variant="brand" label={buttonLabel1} title={buttonLabel1} class="slds-m-left_x-small"  onclick={closePopup}></lightning-button>
+                </div>
+            </div>
+        </div>
+    </lightning-popup>
+</template>

package/src/lightning/datatable/__examples__disabled/simpleComponentPopupNested/simpleComponentPopupNested.js

@@ -0,0 +1,36 @@
+import { LightningElement, api } from 'lwc';
+
+export default class CustomComponent extends LightningElement {
+    // Passing internal tab index down from parent.
+    @api internalTabIndex;
+    buttonLabel1 = 'XYZ';
+    priceOptions;
+    priceOptions1 = [
+        { label: 'Sales', value: 'option1' },
+        { label: 'Force', value: 'option2' },
+    ];
+    // When inside the popup we want to ensure that the keypresses do no bubble up to the table
+    handleKeyDown(event) {
+        event.stopPropagation();
+    }
+
+    openPopup() {
+        const referenceElement = this.template.querySelector(
+            'lightning-button-icon'
+        );
+        // Show the popup relative to the button, and left-align
+        // the top of the popup with the bottom of the button
+        this.popup.show(referenceElement, {
+            reference: { horizontal: 'left', vertical: 'bottom' },
+            popup: { horizontal: 'left', vertical: 'top' },
+        });
+    }
+
+    closePopup() {
+        this.popup.close();
+    }
+
+    get popup() {
+        return this.template.querySelector('lightning-popup');
+    }
+}

package/src/lightning/datatable/columnWidthManager.js

@@ -53,7 +53,6 @@ export function updateColumnWidths(columns, widthsData, adjustedWidths) {
  */
 export class ColumnWidthManager {
     columnWidthMode = FIXED_WIDTH_MODE;
-    resizeObserverAvailable = typeof ResizeObserver === 'function';
 
     // Flag to indicate resetting column widths is needed.
     // Could be with or without `autoResizingUpdate`.
@@ -212,17 +211,11 @@ export class ColumnWidthManager {
      * @param {Object} newData The new data
      * @param {Array} columns The column definitions
      */
-    handleDataChange(previousData, newData, columns) {
-        if (columns.length > 0) {
-            // Resize columns with auto-resizing update only if...
-            // The mode is auto and new data length is equal to previous data
-            // length (change in data) or previously there was no data at all.
-            if (this.columnWidthMode === AUTO_WIDTH_MODE) {
-                if (this.hasDataChanged(previousData, newData)) {
-                    this.isResizingUpdateQueued = true;
-                    this.setAutoResizingUpdate(columns);
-                }
-            }
+    handleDataChange(columns) {
+        // Resize columns with auto-resizing update only if the mode is auto
+        if (this.columnWidthMode === AUTO_WIDTH_MODE) {
+            this.isResizingUpdateQueued = true;
+            this.setAutoResizingUpdate(columns);
         }
     }
 
@@ -268,7 +261,6 @@ export class ColumnWidthManager {
                     // 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;
-                    this.setAutoResizingUpdate(columns);
                 }
             }
         }
@@ -287,6 +279,19 @@ export class ColumnWidthManager {
         }
     }
 
+    /**
+     * React to change in show-actions-menu
+     *
+     * @param {Any} previousValue The previous column value
+     * @param {Any} newValue The new column value
+     * @param {Array} columns The column definitions
+     */
+    handleActionsColumnChange(previousValue, newValue, columns) {
+        if (columns.length > 0 && previousValue !== newValue) {
+            this.isResizingUpdateQueued = true;
+        }
+    }
+
     /**
      * React to change in show-row-number-column
      *
@@ -348,9 +353,7 @@ export class ColumnWidthManager {
         if (widthsData.columnWidths.length > 0) {
             // Can resize from DOM when table is visible.
             // Otherwise, only when `ResizeObserver` is available in browser.
-            return (
-                this.resizeObserverAvailable || isTableRenderedVisible(template)
-            );
+            return isTableRenderedVisible(template);
         }
         return true;
     }

package/src/lightning/datatable/columns.js

@@ -2,8 +2,12 @@ import labelRowNumber from '@salesforce/label/LightningDatatable.rowNumber';
 import rowActionsDefaultAriaLabel from '@salesforce/label/LightningDatatable.rowActionsDefaultAriaLabel';
 import { normalizeBoolean } from 'lightning/utilsPrivate';
 import { isObjectLike } from './utils';
+import { addHeaderIndex, getCellByKeys, HEADER_ROW_KEY } from './indexes';
 import { ROW_NUMBER_INITIAL_WIDTH } from './rowNumber';
-import { SELECTABLE_HEADER_TYPE } from './rowSelectionShared';
+import {
+    SELECTABLE_HEADER_TYPE,
+    SORTING_MENU_HEADER_TYPE,
+} from './rowSelectionShared';
 
 const i18n = {
     rowActionsDefaultAriaLabel,
@@ -29,6 +33,14 @@ const SELECTABLE_COLUMN = {
     tabIndex: -1,
 };
 
+const SORTING_MENU_COLUMN = {
+    type: SORTING_MENU_HEADER_TYPE,
+    fixedWidth: 32,
+    internal: true,
+    tabIndex: -1,
+    resizable: false,
+};
+
 /**
  * Steps through and corrects column definitions inconsistencies.
  *
@@ -48,14 +60,28 @@ export function setColumns(state, rawColumns, types) {
     state.hadTreeDataTypePreviously = state.treeColumn !== undefined;
     state.treeColumn = undefined;
 
+    // Remove old header indexes.
+    let { headerIndexes } = state;
+    const { indexes } = state;
+    // Don't clear all indexes just remove old header indexes from the shared indexes object.
+    for (let i = 0, { length } = headerIndexes; i < length; i += 1) {
+        // Setting to `undefined` instead of using `delete` for better performance.
+        indexes[headerIndexes[i].cellKeyValue] = undefined;
+    }
+
     const { length: colCount } = rawColumns;
     if (colCount === 0) {
         // Tracked state change.
         state.columns = [];
+        // Untracked state changes.
+        state.headerIndexes = [];
         return;
     }
+
+    // var to track the column where the last action column is present
+    let lastActionColumnIndex = -1;
     let normColCount = colCount;
-    let { showRowNumberColumn } = state;
+    let { showRowNumberColumn, showActionsMenu } = state;
     const notHideCheckboxColumn = !state.hideCheckboxColumn;
 
     if (!showRowNumberColumn) {
@@ -74,10 +100,33 @@ export function setColumns(state, rawColumns, types) {
     if (notHideCheckboxColumn) {
         normColCount += 1;
     }
-    const normalizedColumns = Array(normColCount);
 
+    // set variable to see if there is an 'action' column present
+    rawColumns.forEach((column, index) => {
+        if (column.type === 'action') {
+            lastActionColumnIndex = index;
+        }
+    });
+
+    const isActionColumnInEnd = lastActionColumnIndex === rawColumns.length - 1;
+
+    /**
+     * only want to add an extra column for the sorting menu if type='action' column is
+     * not in the last column of datatable, if it is, then we can use its column header
+     * for the sorting menu
+     **/
+    if (showActionsMenu && !isActionColumnInEnd) {
+        normColCount += 1;
+    }
+    let normalizedColumns = Array(normColCount);
+
+    // Store in caches early so data can be referenced by other methods
+    // during initialization.
+    headerIndexes = Array(normColCount);
     // Tracked state change.
     state.columns = normalizedColumns;
+    // Untracked state change.
+    state.headerIndexes = headerIndexes;
 
     let firstColumnForReaders = 0;
     if (showRowNumberColumn) {
@@ -94,6 +143,15 @@ export function setColumns(state, rawColumns, types) {
         );
         firstColumnForReaders += 1;
     }
+
+    // if there is no action column existing, assign SORTING_MENU_COLUMN to last column
+    if (showActionsMenu && !isActionColumnInEnd) {
+        normalizedColumns[normColCount - 1] = Object.assign(
+            // Assign to the last column
+            {},
+            SORTING_MENU_COLUMN
+        );
+    }
     for (let colIndex = 0; colIndex < colCount; colIndex += 1) {
         normalizedColumns[colIndex + firstColumnForReaders] =
             rawColumns[colIndex];
@@ -185,11 +243,13 @@ export function setColumns(state, rawColumns, types) {
             `${colName || colIndex}-${columnType}-${colIndex}`;
 
         normCol.colKeyValue = colKeyValue;
-        normCol.isScopeCol = colIndex === firstColumnForReaders;
         normCol.isLastCol = colIndex === normColCount - 1;
+        normCol.isScopeCol = colIndex === firstColumnForReaders;
         normCol.name = colName;
         normCol.tabIndex = -1;
 
+        addHeaderIndex(headerIndexes, indexes, colKeyValue, colIndex);
+
         // normalize tree column
         if (normCol.type === 'tree') {
             if (state.treeColumn === undefined) {
@@ -221,7 +281,7 @@ export function setColumns(state, rawColumns, types) {
                     ? 'auto-right'
                     : 'auto-left',
             customerActions: Array.isArray(actions) ? actions : [],
-            internalActions: undefined,
+            internalActions: [],
         };
     }
 }
@@ -269,8 +329,13 @@ export function getCellAttributesValues(column) {
  */
 export function getUserColumnIndex(state, colKeyValue) {
     const { columns } = state;
-    const colIndex = state.headerIndexes[colKeyValue];
-    if (columns[colIndex].internal) {
+    const headerCell = getCellByKeys(state, HEADER_ROW_KEY, colKeyValue);
+    const colIndex = headerCell && headerCell.colIndex;
+    if (
+        colIndex === undefined ||
+        colIndex === -1 ||
+        columns[colIndex].internal
+    ) {
         return -1;
     }
     let internalColumns = 0;
@@ -283,23 +348,6 @@ export function getUserColumnIndex(state, colKeyValue) {
     return colIndex - internalColumns;
 }
 
-/**
- * It generate headerIndexes based in the current metadata
- * headerIndexes represent the position of the header(column)
- * based on the unique colKeyValue
- *
- * These indexes are set in the state object - `state.headerIndexes`
- *
- * @param {Object} columns The current normalized column metadata
- * @returns {Object} headerIndexes e.g. { 'name-text': 0, 'amount-number': 1 }
- */
-export const generateHeaderIndexes = function (columns) {
-    return columns.reduce((prev, col, index) => {
-        prev[col.colKeyValue] = index;
-        return prev;
-    }, {});
-};
-
 /**
  * Return the index in state.columns (internal definition) related to colKeyValue.
  *
@@ -308,5 +356,6 @@ export const generateHeaderIndexes = function (columns) {
  * @returns {Number} The index in state.columns
  */
 export function getStateColumnIndex(state, colKeyValue) {
-    return state.headerIndexes[colKeyValue];
+    const headerCell = getCellByKeys(state, HEADER_ROW_KEY, colKeyValue);
+    return headerCell === undefined ? -1 : headerCell.colIndex;
 }