lightning-base-components 1.21.2-alpha → 1.21.4-alpha

package/src/lightning/datatable/utils.js

@@ -1,6 +1,6 @@
 import { classSetToString } from 'lightning/utilsPrivate';
 
-const CLASSSET_PROTOTYPE = {
+const CLASS_SET_PROTOTYPE = {
     add(className) {
         if (typeof className === 'string') {
             this[className] = true;
@@ -22,9 +22,12 @@ const CLASSSET_PROTOTYPE = {
     },
 };
 
+const NON_NEGATIVE_INTEGER_REGEXP = /^\d+$/;
+const POSITIVE_INTEGER_REGEXP = /^[0-9]*[1-9][0-9]*$/;
+
 /**
- * function for escaping double quotes, later can be
- * extended in future for any other usecase
+ * Escapes double quotes. Later can be
+ * extended in future for any other use case.
  */
 export function escapeDoubleQuotes(value) {
     if (typeof value == 'string') {
@@ -52,8 +55,8 @@ export const isObjectLike = function (value) {
  */
 export function classSet(config) {
     return typeof config === 'string'
-        ? { __proto__: CLASSSET_PROTOTYPE, [config]: true }
-        : Object.assign({ __proto__: CLASSSET_PROTOTYPE }, config);
+        ? { __proto__: CLASS_SET_PROTOTYPE, [config]: true }
+        : Object.assign({ __proto__: CLASS_SET_PROTOTYPE }, config);
 }
 
 /**
@@ -68,24 +71,64 @@ export function clamp(num, min, max) {
     return num <= min ? min : num >= max ? max : num;
 }
 
+export function getColDataSelector(colKeyValue) {
+    return `[data-col-key-value="${escapeDoubleQuotes(colKeyValue)}"]`;
+}
+
+export function getRowDataSelector(rowKeyValue) {
+    return `[data-row-key-value="${escapeDoubleQuotes(rowKeyValue)}"]`;
+}
+
+/**
+ * Gets the grid container element from the scrollerY element.
+ *
+ * @param {Node} scrollerY The scrollerY element
+ * @returns {Node} The grid container element
+ */
+export function getGridContainerFromScrollerY(scrollerY) {
+    const { firstElementChild: gridContainer } = scrollerY;
+    return gridContainer;
+}
+
 /**
- * Tests if the value passed in is a value greater than 0.
+ * Gets the scrollerX element from the scrollerY element.
+ *
+ * @param {Node} scrollerY The scrollerY element
+ * @returns {Node} The scrollerX element
+ */
+export function getScrollerXFromScrollerY(scrollerY) {
+    const { parentElement: scrollerX } = scrollerY;
+    return scrollerX;
+}
+
+/**
+ * Gets the scrollerY element from the template.
+ *
+ * @param {Node} template The datatable template
+ * @returns {Node} The scrollerY element
+ */
+export function getScrollerY(template) {
+    return template.querySelector('.slds-scrollable_y');
+}
+
+/**
+ * Tests if value represents an integer greater than 0.
  *
  * @param {Integer} value Value to test
  * @returns {Boolean} Whether the value is greater than 0
  */
 export function isPositiveInteger(value) {
-    return /^[0-9]*[1-9][0-9]*$/.test(value);
+    return POSITIVE_INTEGER_REGEXP.test(value);
 }
 
 /**
- * Tests if the value passed in is 0 or a number greater than 0.
+ * Tests if value represents 0 or an integer greater than 0.
  *
  * @param {Integer} value Value to test
  * @returns {Boolean} Whether the value is greater than or equal to 0
  */
 export function isNonNegativeInteger(value) {
-    return /^\d+$/.test(value);
+    return NON_NEGATIVE_INTEGER_REGEXP.test(value);
 }
 
 /**
@@ -110,13 +153,13 @@ export function normalizeNumberAttribute(
     let warningMessage;
     if (numberType === 'positive') {
         if (isPositiveInteger(value)) {
-            return parseInt(value, 10);
+            return Number.parseInt(value, 10);
         }
 
         warningMessage = `The attribute "${attrName}" value passed in is incorrect. "${attrName}" value should be an integer > 0.`;
     } else if (numberType === 'non-negative') {
         if (isNonNegativeInteger(value)) {
-            return parseInt(value, 10);
+            return Number.parseInt(value, 10);
         }
 
         warningMessage = `The attribute "${attrName}" value passed in is incorrect. "${attrName}" value should be an integer >= 0.`;
@@ -143,21 +186,3 @@ export function getScrollOffsetFromTableEnd(el) {
         el.scrollHeight - el.parentNode.scrollTop - el.parentNode.clientHeight
     );
 }
-
-/**
- * Utility for converting arrays and plain objects to style strings.
- *
- * @param {Array | Object} style The CSS style array/object
- * @returns {String} Representing array/object as a string
- */
-export function styleToString(style) {
-    if (Array.isArray(style)) {
-        return style.join(';');
-    }
-    const entries = Object.keys(style);
-    for (let i = 0, { length } = entries; i < length; i += 1) {
-        const key = entries[i];
-        entries[i] = `${key}:${style[key]}`;
-    }
-    return entries.join(';');
-}

package/src/lightning/datatable/virtualization.js

@@ -1,4 +1,4 @@
-import { styleToString, escapeDoubleQuotes } from './utils';
+import { escapeDoubleQuotes } from './utils';
 
 /**
  * sets an initial table height in the datatable state
@@ -311,9 +311,6 @@ function updateVirtualizeStyles(template, state, renderedRows) {
 
     // update top of rendered rows based on offsets
     renderedRows.forEach((row) => {
-        row.style = styleToString({
-            position: 'absolute',
-            top: `${state.offsets[row.rowIndex]}px`,
-        });
+        row.style = `position:absolute;top:${state.offsets[row.rowIndex]}px;`;
     });
 }

package/src/lightning/datatable/widthManagerShared.js

@@ -3,11 +3,11 @@
  * number of fixed, flexible, and resized columns in the table
  *
  * @param {Object} columnWidthMetaData The initial column widths metadata
- * @param {Object} columnDefs The column definition object
+ * @param {Object} columns The state column definitions
  * @returns {Object} The computed metadata
  */
-export function getTotalWidthsMetadata(columnWidthMetaData, columnDefs) {
-    const initial = {
+export function getTotalWidthsData(columnWidthMetaData, columns) {
+    const totalWidthsData = {
         totalFixedWidth: 0,
         totalFixedColumns: 0,
         totalResizedWidth: 0,
@@ -17,32 +17,23 @@ export function getTotalWidthsMetadata(columnWidthMetaData, columnDefs) {
         maxColumnWidth: columnWidthMetaData.maxColumnWidth,
         wrapTextMaxLines: columnWidthMetaData.wrapTextMaxLines,
     };
-
-    return columnDefs.reduce((prev, col) => {
-        if (col.fixedWidth) {
-            prev.totalFixedWidth += col.fixedWidth;
-            prev.totalFixedColumns += 1;
+    for (let colIndex = 0; colIndex < columns.length; colIndex += 1) {
+        const col = columns[colIndex];
+        const { fixedWidth, initialWidth } = col;
+        if (fixedWidth) {
+            totalWidthsData.totalFixedWidth += fixedWidth;
+            totalWidthsData.totalFixedColumns += 1;
         } else if (col.isResized) {
-            prev.totalResizedWidth += col.columnWidth;
-            prev.totalResizedColumns += 1;
-        } else if (col.initialWidth) {
-            prev.totalResizedWidth += col.initialWidth;
-            prev.totalResizedColumns += 1;
+            totalWidthsData.totalResizedWidth += col.columnWidth;
+            totalWidthsData.totalResizedColumns += 1;
+        } else if (initialWidth) {
+            totalWidthsData.totalResizedWidth += initialWidth;
+            totalWidthsData.totalResizedColumns += 1;
         } else {
-            prev.totalFlexibleColumns += 1;
+            totalWidthsData.totalFlexibleColumns += 1;
         }
-        return prev;
-    }, initial);
-}
-
-/**
- * Gets the width of a DOM element.
- *
- * @param {Node} element Target DOM element
- * @returns {Number} The width of the DOM element
- */
-export function getDomWidth(element) {
-    return element.offsetWidth;
+    }
+    return totalWidthsData;
 }
 
 /**
@@ -54,20 +45,12 @@ export function getDomWidth(element) {
  * @param {Object} column The column object
  * @returns {Number} The fixed width, resized width, or initial width of the column (in that priority order)
  */
-export function getColumnWidthFromDef(column) {
-    let resizedWidth;
-    if (column.isResized) {
-        resizedWidth = column.columnWidth;
+export function getColumnWidth(column) {
+    const { fixedWidth } = column;
+    if (fixedWidth) {
+        return fixedWidth;
     }
-    return column.fixedWidth || resizedWidth || column.initialWidth;
-}
-
-/**
- * Creates a width CSS style string from a numeric value
- *
- * @param {Number} pixels Number of pixels
- * @returns {String} The CSS width definition
- */
-export function buildCSSWidthStyle(pixels) {
-    return pixels > 0 ? `width:${pixels}px` : '';
+    return column.isResized
+        ? column.columnWidth || column.initialWidth
+        : column.initialWidth;
 }

package/src/lightning/datatable/wrapText.js

@@ -1,19 +1,18 @@
 import labelClipText from '@salesforce/label/LightningDatatable.clipText';
 import labelWrapText from '@salesforce/label/LightningDatatable.wrapText';
 import { normalizeBoolean } from 'lightning/utilsPrivate';
-import { getStateColumnIndex, getColumns } from './columns';
+import { getStateColumnIndex } from './columns';
 import { normalizeNumberAttribute } from './utils';
 import { getDefaultState } from './state';
 
-const WRAP_TEXT_DEFAULT = false;
-const NON_WRAPPABLE_TYPES = [
+const NON_WRAPPABLE_TYPES = new Set([
     'action',
     'boolean',
     'button',
     'button-icon',
     'date-local',
     'rowNumber',
-];
+]);
 
 const i18n = {
     clipText: labelClipText,
@@ -22,44 +21,26 @@ const i18n = {
 
 /************************** WRAP TEXT STATE **************************/
 
-/**
- * Returns a boolean representing whether or not the column should be text wrapped
- *
- * NOTE: Wrap text is not supported in IE, so default parameters are fine here.
- *
- * @param {Object} state Datatable's state object
- * @param {String} colKeyValue The column key value to look up wrap text configuration
- * @returns {Boolean} Whether the text is currently wrapped
- */
-export function getWrapTextState(state = getDefaultState(), colKeyValue) {
-    return state.wrapText[colKeyValue] || WRAP_TEXT_DEFAULT;
-}
-
 /**
  * Sets a boolean value in state's wrapText object against the column key value
  * representing whether or not the column is text wrapped.
  *
- * NOTE: Wrap text is not supported in IE, so default parameters are fine here.
- *
- * @param {Object} state Datatable's state object
- * @param {Object} columnDefinition Datatable's column definitions
+ * @param {Object} state The datatable state
+ * @param {Object} col The datatable column definition
  */
-export function setWrapTextState(state = getDefaultState(), columnDefinition) {
-    const { colKeyValue, type, wrapText } = columnDefinition;
-
-    if (isWrappableType(type)) {
-        state.wrapText[colKeyValue] =
-            normalizeBoolean(wrapText) || WRAP_TEXT_DEFAULT;
+export function setWrapTextState(state = getDefaultState(), col) {
+    if (!NON_WRAPPABLE_TYPES.has(col.type)) {
+        state.wrapText[col.colKeyValue] = normalizeBoolean(col.wrapText);
     }
 }
 
 /************************** WRAP TEXT MAX LINES **************************/
 
 /**
- * Normalizes and sets wrapTextMaxLines in datatable's state object.
+ * Normalizes and sets wrapTextMaxLines in datatable state object.
  * The normalized value should be a positive integer or it'll fall back to undefined.
  *
- * @param {Object} state Datatable's state object
+ * @param {Object} state The datatable state
  * @param {Integer} value The maximum lines allowed
  */
 export function setWrapTextMaxLines(state, value) {
@@ -98,37 +79,34 @@ function updateWrapTextAndMaxLinesValuesInCells(state, colIndex, colKeyValue) {
  * provides - Wrap Text and Clip Text.
  * Each header action contains a label, title, action name and its selected value (checked)
  *
- * @param {Object} state Datatable's state object
- * @param {Object} columnDefinition Datatable's column definitions
+ * @param {Object} state The datatable state
+ * @param {Object} col The datatable column definition
  * @returns {Array} An array of wrap text actions
  */
-export function getActions(state, columnDefinition) {
-    const wrapTextActions = [];
-    const { hideDefaultActions, type, colKeyValue } = columnDefinition;
-
-    // must be done first, so getWrapTextState correctly resolves
-    setWrapTextState(state, columnDefinition);
-
-    // if not hidden and isWrapable, sets the internal actions
-    if (isWrappableType(type) && !hideDefaultActions) {
-        const isTextWrapped = getWrapTextState(state, colKeyValue);
-
-        wrapTextActions.push({
-            label: `${i18n.wrapText}`,
-            title: `${i18n.wrapText}`,
+export function getInternalActions(state, col) {
+    // Untracked state change.
+    // Must be done first, so isTextWrapped correctly resolves.
+    setWrapTextState(state, col);
+    // If not hidden and isWrapable, sets the internal actions.
+    if (col.hideDefaultActions || NON_WRAPPABLE_TYPES.has(col.type)) {
+        return [];
+    }
+    const isTextWrapped = state.wrapText[col.colKeyValue] || false;
+    const { clipText, wrapText } = i18n;
+    return [
+        {
+            label: wrapText,
+            title: wrapText,
             checked: isTextWrapped,
             name: 'wrapText',
-        });
-
-        wrapTextActions.push({
-            label: `${i18n.clipText}`,
-            title: `${i18n.clipText}`,
+        },
+        {
+            label: clipText,
+            title: clipText,
             checked: !isTextWrapped,
             name: 'clipText',
-        });
-    }
-
-    return wrapTextActions;
+        },
+    ];
 }
 
 /**
@@ -136,18 +114,20 @@ export function getActions(state, columnDefinition) {
  * needs to be changed in the state, change it to the new value and update
  * the check mark to represent the currently selected action
  *
- * @param {Object} state Datatable's state object
+ * @param {Object} dt The datatable
  * @param {String} action Action that was selected/triggered
  * @param {String} colKeyValue Column key value
  */
-export function handleTriggeredAction(state, action, colKeyValue) {
-    const actionName = action.name;
-    if (actionName === 'wrapText' || actionName === 'clipText') {
+export function handleTriggeredAction(dt, action, colKeyValue) {
+    const { name } = action;
+    const isWrapText = name === 'wrapText';
+    if (isWrapText || name === 'clipText') {
+        const { state } = dt;
         // If state should be changed
-        if (state.wrapText[colKeyValue] !== (actionName === 'wrapText')) {
+        if (state.wrapText[colKeyValue] !== isWrapText) {
             state.shouldResetHeights = true;
-            state.wrapText[colKeyValue] = actionName === 'wrapText';
-
+            // Untracked state changes.
+            state.wrapText[colKeyValue] = isWrapText;
             updateSelectedOptionInHeaderActions(state, colKeyValue);
         }
     }
@@ -165,9 +145,9 @@ function updateSelectedOptionInHeaderActions(state, colKeyValue) {
     if (colIndex === -1) {
         return;
     }
-    const columns = getColumns(state);
-    const colData = columns[colIndex];
-    const { internalActions } = colData.actions;
+    const { columns } = state;
+    const col = columns[colIndex];
+    const { internalActions } = col.actions;
 
     for (let i = 0, { length } = internalActions; i < length; i += 1) {
         const action = internalActions[i];
@@ -182,17 +162,5 @@ function updateSelectedOptionInHeaderActions(state, colKeyValue) {
     updateWrapTextAndMaxLinesValuesInCells(state, colIndex, colKeyValue);
 
     // Force a refresh on this column, because the wrapText checked value changed.
-    colData.actions = Object.assign({}, colData.actions);
-}
-
-/************************** HELPER FUNCTIONS **************************/
-
-/**
- * Determines if a given column type is wrappable.
- *
- * @param {String} type The type to check.
- * @returns {Boolean} Whether the given type is wrappable.
- */
-function isWrappableType(type) {
-    return NON_WRAPPABLE_TYPES.indexOf(type) < 0;
+    col.actions = Object.assign({}, col.actions);
 }

package/src/lightning/datepicker/datepicker.js

@@ -78,6 +78,8 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
 
     _min;
     _max;
+    _userMaxValue;
+    _userMinValue;
     _displayMin;
     _displayMax;
     _dateStyle = DATE_STYLE.MEDIUM;
@@ -110,6 +112,17 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
         }
     }
 
+    setNormalisedIsoDateMin() {
+        const normalizedDate = normalizeISODate(
+            this._userMinValue,
+            this._dateStyle
+        );
+        if (normalizedDate.isoValue) {
+            this._min = normalizedDate.isoValue;
+            this._displayMin = normalizedDate.displayValue;
+        }
+    }
+
     @api
     get min() {
         return this._min;
@@ -119,11 +132,19 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
         // normalization of the given value is possible.
         this._min = value;
         this._displayMin = value;
+        this._userMinValue = value;
 
-        const normalizedDate = normalizeISODate(value, this.dateStyle);
+        this.setNormalisedIsoDateMin();
+    }
+
+    setNormalisedIsoDateMax() {
+        const normalizedDate = normalizeISODate(
+            this._userMaxValue,
+            this._dateStyle
+        );
         if (normalizedDate.isoValue) {
-            this._min = normalizedDate.isoValue;
-            this._displayMin = normalizedDate.displayValue;
+            this._max = normalizedDate.isoValue;
+            this._displayMax = normalizedDate.displayValue;
         }
     }
 
@@ -136,12 +157,9 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
         // normalization of the given value is possible.
         this._max = value;
         this._displayMax = value;
+        this._userMaxValue = value;
 
-        const normalizedDate = normalizeISODate(value, this.dateStyle);
-        if (normalizedDate.isoValue) {
-            this._max = normalizedDate.isoValue;
-            this._displayMax = normalizedDate.displayValue;
-        }
+        this.setNormalisedIsoDateMax();
     }
 
     @api
@@ -381,8 +399,13 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
             validValues: [DATE_STYLE.SHORT, DATE_STYLE.MEDIUM, DATE_STYLE.LONG],
         });
 
-        const normalizedDate = normalizeISODate(this._value, this.dateStyle);
+        const normalizedDate = normalizeISODate(this._value, this._dateStyle);
         this._displayValue = normalizedDate.displayValue;
+
+        // W-14161407 min and max setters are being called before dateStyle is being set
+        // hence updating the min max values
+        this.setNormalisedIsoDateMax();
+        this.setNormalisedIsoDateMin();
     }
 
     constructor() {

package/src/lightning/datepicker/datepicker.js-meta.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <capabilities>
+        <capability>lightning__ServerRenderableWithHydration</capability>
+    </capabilities>
+</LightningComponentBundle>