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

package/src/lightning/colorPickerCustom/colorPickerCustom.js

@@ -95,6 +95,18 @@ export default class LightningColorPickerCustom extends LightningShadowBaseClass
         this._currentColor = value;
         this._hex = fullHex;
         this._rgb = hexToRgb(fullHex);
+
+        // W-13851481 bug-fix: if canvas open, update it
+        if (this._canvas) {
+            const hue = rgbToHsl(this._rgb).hue;
+            const position = this.rgbToPosition(this._rgb);
+            const selectedColor = `#${rgbToHex(this._rgb)}`;
+
+            this.updateRainbow(hue);
+            this.setCanvasColor(hue);
+            this.setCanvasCursor(position.x, position.y);
+            this.updateSelectedColor(selectedColor);
+        }
     }
 
     @api

package/src/lightning/colorPickerPanel/colorPickerPanel.js

@@ -5,7 +5,7 @@ import labelDoneButton from '@salesforce/label/LightningColorPicker.doneButton';
 import { api, track } from 'lwc';
 import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet } from 'lightning/utils';
-import { keyCodes } from 'lightning/utilsPrivate';
+import { keyCodes, isCSR } from 'lightning/utilsPrivate';
 
 const i18n = {
     cancelButton: labelCancelButton,
@@ -26,6 +26,16 @@ export default class LightningColorPickerPanel extends LightningShadowBaseClass
         this._selectedColor = this.currentColor || DEFAULT_COLOR;
     }
 
+    renderedCallback() {
+        // W-14600421 bug fix: prevent panel from falling outside user focus,
+        // like when viewports are too small
+        if (isCSR && typeof document.body.scrollIntoView === 'function') {
+            this.template
+                .querySelector('lightning-color-picker-custom')
+                .scrollIntoView();
+        }
+    }
+
     get i18n() {
         return i18n;
     }

package/src/lightning/combobox/combobox.html

@@ -17,6 +17,7 @@
                 root-aria-node={templateRootNode}
                 required={required}
                 disabled={disabled}
+                exportparts="dropdown, option"
                 placeholder={placeholder}
                 items={_items}
                 input-text={_selectedLabel}

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

@@ -0,0 +1,11 @@
+<template>
+  <!-- Move this component to __examples__ -->
+  <!-- In playground add <datatable-custom-component-wrapper></datatable-custom-component-wrapper> -->
+        <datatable-my-custom-type-datatable
+        key-field="Id"
+        data={data}
+        columns={columns}
+        show-row-number-column
+      >
+      </datatable-my-custom-type-datatable> 
+</template>

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

@@ -0,0 +1,25 @@
+import { LightningElement } from 'lwc';
+import generateData from './generateData.js';
+const columns = [
+    {
+        label: 'Custom input',
+        type: 'customInput',
+    },
+    {
+        label: 'Custom Component Buttons',
+        type: 'customComponent',
+    },
+    { label: 'Label', fieldName: 'name' },
+    { label: 'Website', fieldName: 'website', type: 'url' },
+    { label: 'Phone', fieldName: 'phone', type: 'phone' },
+    { label: 'Balance', fieldName: 'amount', type: 'currency' },
+];
+export default class MyDatatable extends LightningElement {
+    data = [];
+    columns = columns;
+    rowOffset = 0;
+
+    connectedCallback() {
+        this.data = generateData({ amountOfRecords: 5 });
+    }
+}

package/src/lightning/datatable/__examples__disabled/customComponentWrapper/generateData.js

@@ -0,0 +1,15 @@
+export default function generateData({ amountOfRecords }) {
+    return [...Array(amountOfRecords)].map((_, index) => {
+        return {
+            name: `Name (${index})`,
+            website: 'www.salesforce.com',
+            amount: Math.floor(Math.random() * 100),
+            phone: `${
+                Math.floor(Math.random() * 900 + 100) * 10000000 + 5551212
+            }`,
+            closeAt: new Date(
+                Date.now() + 86400000 * Math.ceil(Math.random() * 20)
+            ),
+        };
+    });
+}

package/src/lightning/datatable/__examples__disabled/myCustomTypeDatatable/customInput.html

@@ -0,0 +1,4 @@
+<template>
+  <!-- Since this is a top level component we don't need to pass tabindex down through shadowroots -->
+  <lightning-input type="text" label="Enter some text" tabindex={internalTabIndex} data-navigation="enable"></lightning-input>
+</template>

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

@@ -0,0 +1,17 @@
+//myCustomTypeDatatable.js
+import LightningDatatable from 'lightning/datatable';
+import customInputTemplate from './customInput.html';
+import customComponentTemplate from './nestedSimpleComponentParent.html';
+
+export default class MyCustomTypeDatatable extends LightningDatatable {
+    static customTypes = {
+        customInput: {
+            template: customInputTemplate,
+            standardCellLayout: true,
+        },
+        customComponent: {
+            template: customComponentTemplate,
+            standardCellLayout: false,
+        },
+    };
+}

package/src/lightning/datatable/__examples__disabled/myCustomTypeDatatable/nestedSimpleComponentParent.html

@@ -0,0 +1,7 @@
+<template>
+    <!-- We add an internal component here so that we can garner access to a full LWC component including access to a JS file. -->
+    <!-- This is common if a custom component needs some kind of wiring up. -->
+    <!-- We pass tabindex down as we don't want this component to be shown as accessible in the dom, but we want children of it to be -->
+    <!-- We set data-navigation here as this component has children that are navigable -->
+    <datatable-simple-component-nested internal-tab-index={internalTabIndex} data-navigation="enable"></datatable-simple-component-nested>
+</template>

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

@@ -0,0 +1,9 @@
+<template>
+    <!-- We don't need to set data-navigation on this div as we are not traversing a shadowroot -->
+    <div>
+        <!-- Since this component needs to be navigable we set data-navigation to enable navigation. -->
+        <!-- As it is navigable we also need to set the tabindex=0 so that from a dom structure perspective it shows as navgiable. -->
+        <lightning-button variant="base" label="Base" title="Looks like a link" class="slds-m-left_x-small" data-navigation="enable" tabindex={internalTabIndex}></lightning-button>
+        <lightning-button label="Neutral" title="Non-primary action" class="slds-m-left_x-small" data-navigation="enable" tabindex={internalTabIndex}></lightning-button>
+    </div>
+</template>

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

@@ -0,0 +1,6 @@
+import { LightningElement, api } from 'lwc';
+
+export default class CustomComponent extends LightningElement {
+    // Passing internal tab index down from parent.
+    @api internalTabIndex;
+}

package/src/lightning/datatable/autoWidthStrategy.js

@@ -4,17 +4,6 @@ import { getColumnWidth, getTotalWidthsData } from './widthManagerShared';
 const MIN_MAX_THRESHOLD = 0.5;
 const TRUNCATION_ALLOWANCE = 20;
 
-/**
- * Determines if a column exists at a specified index
- *
- * @param {Array} columns An array of columns
- * @param {Integer} colIndex The column index to locate
- * @returns {Boolean} Whether the column exists at the specified index
- */
-function hasColumn(columns, colIndex) {
-    return columns.some((current) => current === colIndex);
-}
-
 /**
  * Calculates the total width of all columns
  *
@@ -61,34 +50,21 @@ function canAddWidth(currentWidth, widthToAdd, maxColumnWidth) {
  * @returns {Number} The expected width of the table
  */
 function getExpectedTableWidth(availableWidth, widthsData) {
-    const minExpectedTableWidth = getMinExpectedTableWidth(widthsData);
-    return widthsData.totalFlexibleColumns === 0
-        ? minExpectedTableWidth
-        : Math.max(minExpectedTableWidth, availableWidth);
-}
-
-/**
- * Determines the minimum expected table width
- *
- * @param {Object} widthsData The widths data
- * @returns {Number} The minimum expected table width
- */
-function getMinExpectedTableWidth(widthsData) {
     const minTotalFlexibleWidth =
         widthsData.totalFlexibleColumns * widthsData.minColumnWidth;
-    return (
+    const minExpectedTableWidth =
         minTotalFlexibleWidth +
         widthsData.totalFixedWidth +
-        widthsData.totalResizedWidth
-    );
+        widthsData.totalResizedWidth;
+    return widthsData.totalFlexibleColumns === 0
+        ? minExpectedTableWidth
+        : Math.max(minExpectedTableWidth, availableWidth);
 }
 
 /**
  * Strategy for columns that automatically determine their widths.
  */
 export class AutoWidthStrategy {
-    // Private variables
-
     // Instance array to hold column width ratios either calculated from visual distribution of column labels
     // or from distribution of data amongst the columns. These ratios are reused except when datatable reacts
     // to changes in data or columns and other variables at which point they are recalculated.
@@ -102,8 +78,6 @@ export class AutoWidthStrategy {
     // It is used in redistribution of extra space that is left or taken up while calculating auto widths
     columnWidthsDistribution = {};
 
-    /************************** LIFECYCLE HOOKS **************************/
-
     constructor(minColumnWidth, maxColumnWidth, wrapTextMaxLines = 3) {
         this.columnWidthData = {
             minColumnWidth,
@@ -114,8 +88,6 @@ export class AutoWidthStrategy {
         this.columnWidthsDistribution.colsWithMaxWidth = [];
     }
 
-    /************************** PRIVATE SETTERS **************************/
-
     /**
      * Sets the minimum column width
      *
@@ -182,7 +154,7 @@ export class AutoWidthStrategy {
             recomputeAutoWidthRatios &&
             this.columnWidthRatios.length !== columns.length
         ) {
-            return { expectedTableWidth, columnWidths: [] };
+            return { columnWidths: [] };
         }
 
         // First pass - Distribute widths as per ratios or defined widths if there are any
@@ -213,7 +185,7 @@ export class AutoWidthStrategy {
                 columns
             );
         }
-        return { columnWidths, expectedTableWidth };
+        return { columnWidths };
     }
 
     /**
@@ -535,7 +507,7 @@ export class AutoWidthStrategy {
                 const col = columns[colIndex];
                 const currentWidth = columnWidths[colIndex];
                 if (
-                    !hasColumn(colsWithMinWidth, colIndex) &&
+                    !colsWithMinWidth.includes(colIndex) &&
                     !getColumnWidth(col) &&
                     canRemoveWidth(
                         currentWidth,

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;
-}