lightning-base-components 1.14.6-alpha → 1.14.7-alpha

package/src/lightning/datatable/virtualization.js

@@ -0,0 +1,319 @@
+import { styleToString } from './utils';
+
+/**
+ * sets an initial table height in the datatable state
+ *
+ * @param {Object} state - datatable state
+ */
+export function resetTableHeight(state) {
+    state.tableHeight = state.rowHeight * state.rows.length;
+}
+
+/**
+ * resets state properties relevant to virtualization
+ * rowHeights when fixedHeight is false
+ *
+ * @param {Object} state - datatable state
+ */
+export function resetRowHeights(state) {
+    state.heightCache = {};
+    state.offsets = [0];
+    state.offsetRanges = [];
+    if (state.virtualize && state.rows.length) {
+        resetTableHeight(state);
+    }
+}
+
+/**
+ * updates state properties relevant to virtualization
+ * rowHeights when fixedHeight is false
+ *
+ * @param {Node} template - the custom element root `this.template` from datatable.js
+ * @param {Object} state - datatable state
+ * @param {Array} renderedRows  - array of rows currently being rendered
+ */
+export function handleVariableRowHeights(template, state, renderedRows) {
+    const currentRange = {
+        start: renderedRows[0].rowIndex,
+        end: renderedRows[renderedRows.length - 1].rowIndex + 1,
+    };
+    let adjustFromIndex;
+    let adjustmentValue = 0;
+    let offsetRangeIndex = findOffsetRangeIndex(
+        state.offsetRanges,
+        currentRange.start
+    );
+
+    renderedRows.forEach((row) => {
+        if (!state.heightCache[row.key]) {
+            // need to get row actual element so we can find its height
+            const rowElement = template.querySelector(
+                `[data-row-key-value="${row.key}"]`
+            );
+            if (rowElement) {
+                // first rendered row needs height increased by 1 to account for missing border
+                let height = rowElement.getBoundingClientRect().height;
+                if (row.rowIndex === currentRange.start) {
+                    height++;
+                }
+                state.heightCache[row.key] = height;
+
+                // calculate estimate of row offset
+                setOffset(state, row, offsetRangeIndex, height);
+
+                // update variables used to adjust later row offsets
+                adjustmentValue += height - state.rowHeight;
+                adjustFromIndex = row.rowIndex + 2;
+            }
+        }
+    });
+    state.tableHeight += adjustmentValue;
+    updateOffsetRanges(
+        state,
+        offsetRangeIndex,
+        currentRange,
+        adjustFromIndex,
+        adjustmentValue
+    );
+    updateVirtualizeStyles(template, state, renderedRows);
+}
+
+/**
+ * uses binary search with offsets and offsetRange
+ * to determine what the first visible index should be
+ * for a given scrollTop value
+ */
+export function findFirstVisibleIndex(state, scrollTop) {
+    const { offsetRanges, offsets, rowHeight, fixedHeight, virtualize } = state;
+    if (virtualize && fixedHeight) {
+        return scrollTop / rowHeight;
+    }
+    let start = 0;
+    let end = offsetRanges.length - 1;
+
+    while (start <= end) {
+        let mid = Math.floor((start + end) / 2);
+        const prevRange = offsetRanges[mid];
+        const nextRange = offsetRanges[mid + 1];
+        const startOffset = offsets[prevRange.start];
+        const endOffset = offsets[prevRange.end];
+
+        const scrollTopAfterPrevStart = startOffset <= scrollTop;
+        const scrollTopInPrevRange =
+            scrollTopAfterPrevStart && scrollTop <= endOffset;
+        const scrollTopBeforeNextRange =
+            !nextRange || scrollTop < offsets[nextRange.start];
+        const scrollTopBetweenRanges =
+            scrollTopAfterPrevStart && scrollTopBeforeNextRange;
+
+        // check if scrollTop is in prevAdj offset values
+        // or between prevAdj and nextAdj offsetValues
+        if (scrollTopInPrevRange) {
+            // find offset in prevRange to use for firstVisibleIndex
+            return searchForOffset(state, prevRange, scrollTop);
+        } else if (scrollTopBetweenRanges) {
+            // use scrollTop and rowHeight to calculate firstVisibleIndex
+            const diff = scrollTop - endOffset;
+            const extraRows = Math.floor(diff / rowHeight);
+            state._firstRowOffset = diff % rowHeight;
+            return prevRange.end + extraRows;
+        }
+        // update start or end for next round of binary search
+        if (scrollTop < startOffset) {
+            end = mid - 1;
+        } else {
+            start = mid + 1;
+        }
+    }
+    return -1;
+}
+
+/**
+ * determines the rowIndex for given scrollTop
+ * within a provided offset range using binary search
+ * also sets firstRowOffset to correct value
+ *
+ * @param {object} range - object with start and end index for binary search
+ * @param {number} scrollTop - value to find offset rowIndex for
+ * @returns {number} representing firstVisibleIndex for given scrollTop
+ */
+function searchForOffset(state, range, scrollTop) {
+    let { start, end } = range;
+    const offsets = state.offsets;
+
+    while (start <= end) {
+        const mid = Math.floor((start + end) / 2);
+        const currentOffsetUnderScrollTop = offsets[mid] <= scrollTop;
+        const nextOffsetUnderScrollTop =
+            offsets[mid + 1] && offsets[mid + 1] <= scrollTop;
+
+        if (currentOffsetUnderScrollTop && !nextOffsetUnderScrollTop) {
+            // store how many pixels scrollTop is from top of row
+            state.firstRowOffset = scrollTop - offsets[mid];
+            return mid;
+        } else if (currentOffsetUnderScrollTop) {
+            start = mid + 1;
+        } else {
+            end = mid - 1;
+        }
+    }
+    return -1;
+}
+
+/**
+ * uses a binary search to find the offsetRange index that
+ * encompasses the provided row index, or the one immediately
+ * before if no offsetRange encompasses the provided rowIndex
+ */
+function findOffsetRangeIndex(offsetRanges, rowIndex) {
+    let start = 0;
+    let end = offsetRanges.length - 1;
+    while (start <= end) {
+        let mid = Math.floor((start + end) / 2);
+        const currentRangeStartsBeforeRowIndex =
+            offsetRanges[mid].start <= rowIndex;
+        const nextRangeStartsBeforeRowIndex =
+            offsetRanges[mid + 1] && offsetRanges[mid + 1].start <= rowIndex;
+
+        // check if rowIndex is between start of range at "mid"
+        // and start of range at "mid + 1" (or if there is no "mid + 1")
+        if (
+            currentRangeStartsBeforeRowIndex &&
+            !nextRangeStartsBeforeRowIndex
+        ) {
+            return mid;
+        } else if (currentRangeStartsBeforeRowIndex) {
+            // look for earlier offsetRanges
+            start = mid + 1;
+        } else {
+            // look for later offsetRanges
+            end = mid - 1;
+        }
+    }
+    return -1;
+}
+
+/**
+ * sets the offset value for a given row and the next
+ * based on the closest set offset value, the default
+ * row height and the height of the current row
+ *
+ * @param {object} state - datatable state
+ * @param {object} row - specific row object from state
+ * @param {number} offsetRangeIndex - index of offset range to use for row
+ * @param {number} height - height of row's node
+ */
+function setOffset(state, row, offsetRangeIndex, height) {
+    let currentRange = state.offsetRanges[offsetRangeIndex];
+    let currentOffset = state.offsets[row.rowIndex];
+    // if no offset is set for current row, estimate it
+    // based on most recent offset and default rowHeight
+    if (!currentOffset) {
+        currentOffset = 0;
+        if (currentRange) {
+            const baseOffset = state.offsets[currentRange.end];
+            const estimatedRowOffsets =
+                (row.rowIndex - currentRange.end) * state.rowHeight;
+            currentOffset = baseOffset + estimatedRowOffsets;
+            state.offsets[row.rowIndex] = currentOffset;
+        }
+    }
+    // set next offset based on current offset and height
+    state.offsets[row.rowIndex + 1] = currentOffset + height;
+}
+
+/**
+ * merges or adds new offset range and
+ * updates offsets and range values as needed
+ *
+ * @param {number} offsetRangeIndex
+ * @param {*} state - datatable state
+ * @param {object} currentRange - range for current rendered rows
+ * @param {number} adjustFromIndex  - first index to increase by rangeValue
+ * @param {number} rangeValue - amount to increase offsets after adjustFromIndex
+ */
+function updateOffsetRanges(
+    state,
+    offsetRangeIndex,
+    currentRange,
+    adjustFromIndex,
+    adjustmentValue
+) {
+    const { offsets, offsetRanges } = state;
+    let prevRange = offsetRanges[offsetRangeIndex];
+    let nextRange = offsetRanges[offsetRangeIndex + 1];
+    const overlapsWithPrevRange =
+        prevRange && checkOverlap(prevRange, currentRange);
+    const overlapsWithNextRange =
+        nextRange && checkOverlap(currentRange, nextRange);
+
+    // update remaining values in next range by
+    // adjustment value if we're overlapping it
+    if (overlapsWithNextRange && adjustmentValue) {
+        for (let i = adjustFromIndex; i <= nextRange.end; i++) {
+            offsets[i] = offsets[i] + adjustmentValue;
+        }
+    }
+
+    // update state.offsetRanges
+    if (overlapsWithPrevRange && overlapsWithNextRange) {
+        nextRange.start = prevRange.start;
+        nextRange.end = Math.max(currentRange.end, nextRange.end);
+        state.offsetRanges.splice(offsetRangeIndex, 1); // removes prevRange
+    } else if (overlapsWithPrevRange) {
+        prevRange.end = Math.max(prevRange.end, currentRange.end);
+    } else if (overlapsWithNextRange) {
+        nextRange.start = currentRange.start;
+        nextRange.end = Math.max(currentRange.end, nextRange.end);
+        // increase offsetRangeIndex; since it's values have already been updated
+        // we want to skip it when adjusting offsets in later ranges
+        offsetRangeIndex = offsetRangeIndex + 1;
+    } else {
+        state.offsetRanges.splice(offsetRangeIndex + 1, 0, currentRange);
+        // need to increase offsetRangeIndex so we don't
+        // unnecessarily add adjustmentValue to currentRange
+        offsetRangeIndex = offsetRangeIndex + 1;
+    }
+
+    // loop through every offset range after the current one
+    // and increase the offset for each index by adjustmentValue
+    if (offsetRangeIndex >= 0) {
+        for (let i = offsetRangeIndex + 1; i < offsetRanges.length; i++) {
+            const { start: rangeStart, end: rangeEnd } = offsetRanges[i];
+            for (let j = rangeStart; j <= rangeEnd; j++) {
+                offsets[j] = offsets[j] + adjustmentValue;
+            }
+        }
+    }
+}
+
+/**
+ * compares start/end of two ranges to see if the values overlap
+ * used to determine if renderedRows are part of an existent offsetRange
+ * or if a new offsetRange will need to be added
+ */
+function checkOverlap(range1, range2) {
+    return (
+        (range1.start <= range2.start && range2.start <= range1.end) ||
+        (range1.start <= range2.end && range2.end <= range1.end)
+    );
+}
+
+/**
+ * updates scrollTop and top values for rows when
+ * using virtualization with fixedHeight of false
+ */
+function updateVirtualizeStyles(template, state, renderedRows) {
+    // update scrollTop so firstVisibleIndex is correctly placed in viewport
+    const scrollerY = template.querySelector('.slds-scrollable_y');
+    scrollerY.scrollTop =
+        state.offsets[state.firstVisibleIndex] + state.firstRowOffset;
+
+    // update top of rendered rows based on offsets
+    renderedRows.forEach((row) => {
+        row.style = styleToString({
+            position: 'absolute',
+            top: `${state.offsets[row.rowIndex]}px`,
+        });
+    });
+}

package/src/lightning/datatable/wrapText.js

@@ -1,7 +1,7 @@
 import labelClipText from '@salesforce/label/LightningDatatable.clipText';
 import labelWrapText from '@salesforce/label/LightningDatatable.wrapText';
-import { getStateColumnIndex, getColumns } from './columns';
 import { normalizeBoolean } from 'lightning/utilsPrivate';
+import { getStateColumnIndex, getColumns } from './columns';
 import { normalizeNumberAttribute } from './utils';
 import { getDefaultState } from './state';
 
@@ -22,13 +22,28 @@ const i18n = {
 
 /************************** WRAP TEXT STATE **************************/
 
-// Returns a boolean representing whether or not the column should be text wrapped
+/**
+ * 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
+/**
+ * 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
+ */
 export function setWrapTextState(state = getDefaultState(), columnDefinition) {
     const { colKeyValue, type, wrapText } = columnDefinition;
 
@@ -40,8 +55,13 @@ export function setWrapTextState(state = getDefaultState(), columnDefinition) {
 
 /************************** WRAP TEXT MAX LINES **************************/
 
-// Normalizes and sets wrapTextMaxLines in datatable's state object
-// The normalized value should be a positive integer or it'll fall back to undefined
+/**
+ * Normalizes and sets wrapTextMaxLines in datatable's 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 {Integer} value The maximum lines allowed
+ */
 export function setWrapTextMaxLines(state, value) {
     state.wrapTextMaxLines = normalizeNumberAttribute(
         'wrapTextMaxLines',
@@ -51,8 +71,14 @@ export function setWrapTextMaxLines(state, value) {
     );
 }
 
-// Sets the `wrapText` and `wrapTextMaxLines` values in the cell object for all cells in a column
-// These values are used by primitiveCellFactory to set the required classes on the cell for wrapping
+/**
+ * Sets the `wrapText` and `wrapTextMaxLines` values in the cell object for all cells in a column.
+ * These values are used by primitiveCellFactory to set the required classes on the cell for wrapping
+ *
+ * @param {Object} state Datatable's state object
+ * @param {Number} colIndex The column index to update
+ * @param {String} colKeyValue The column key value to look up wrap text configuration
+ */
 function updateWrapTextAndMaxLinesValuesInCells(state, colIndex, colKeyValue) {
     state.rows.forEach((row) => {
         const cell = row.cells[colIndex];
@@ -70,9 +96,9 @@ 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
- * @returns
+ * @param {Object} state Datatable's state object
+ * @param {Object} columnDefinition Datatable's column definitions
+ * @returns {Array} An array of wrap text actions
  */
 export function getActions(state, columnDefinition) {
     const wrapTextActions = [];
@@ -108,9 +134,9 @@ 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 {String} action - action that was selected/triggered
- * @param {String} colKeyValue - column key value
+ * @param {Object} state Datatable's state object
+ * @param {String} action Action that was selected/triggered
+ * @param {String} colKeyValue Column key value
  */
 export function handleTriggeredAction(state, action, colKeyValue) {
     const actionName = action.name;
@@ -124,8 +150,13 @@ export function handleTriggeredAction(state, action, colKeyValue) {
     }
 }
 
-// Update the 'checked' value of the each action to show which action is selected
-// and which action is not selected
+/**
+ * Update the 'checked' value of the each action to show which action is selected
+ * and which action is not selected.
+ *
+ * @param {Object} state The datatable state.
+ * @param {String} colKeyValue The column key.
+ */
 function updateSelectedOptionInHeaderActions(state, colKeyValue) {
     const columns = getColumns(state);
     const colIndex = getStateColumnIndex(state, colKeyValue);
@@ -148,6 +179,12 @@ function updateSelectedOptionInHeaderActions(state, colKeyValue) {
 
 /************************** 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;
 }

package/src/lightning/iconSvgTemplates/buildTemplates/standard/dashboard_component.html

@@ -0,0 +1,7 @@
+<template>
+    <svg class={computedClass} focusable="false" data-key={name} aria-hidden="true" viewBox="0 0 100 100">
+        <g>
+ <path d="M43.66 20H23.94A4 4 0 0020 23.94v19.72a4 4 0 003.94 3.94h19.72a4 4 0 003.94-3.94V23.94A4 4 0 0043.66 20zM76.06 20H56.34a4 4 0 00-3.94 3.94v19.72a4 4 0 003.94 3.94h19.72A4 4 0 0080 43.66V23.94A4 4 0 0076.06 20zM43.66 52.4H23.94A4 4 0 0020 56.34v19.72A4 4 0 0023.94 80h19.72a4 4 0 003.94-3.94V56.34a4 4 0 00-3.94-3.94zM76.06 52.4H56.34a4 4 0 00-3.94 3.94v19.72A4 4 0 0056.34 80h19.72A4 4 0 0080 76.06V56.34a4 4 0 00-3.94-3.94z"></path>
+</g>
+    </svg>
+</template>

package/src/lightning/iconSvgTemplates/buildTemplates/standard/slack.html

@@ -0,0 +1,7 @@
+<template>
+    <svg class={computedClass} focusable="false" data-key={name} aria-hidden="true" viewBox="0 0 100 100">
+        <g>
+ <path d="M32.6 57.9a6.3 6.3 0 11-6.3-6.3h6.3zM35.8 57.9a6.43 6.43 0 016.1-6.6 6.36 6.36 0 016.6 6.1v16.3a6.35 6.35 0 01-12.7 0zM42.1 32.6a6.3 6.3 0 116.3-6.3v6.3zM42.1 35.8a6.43 6.43 0 016.6 6.1 6.36 6.36 0 01-6.1 6.6H26.3a6.35 6.35 0 010-12.7zM67.4 42.1a6.3 6.3 0 116.3 6.3h-6.3zM64.2 42.1a6.43 6.43 0 01-6.1 6.6 6.36 6.36 0 01-6.6-6.1V26.3a6.35 6.35 0 0112.7 0zM57.9 67.4a6.3 6.3 0 11-6.3 6.3v-6.3zM57.9 64.2a6.43 6.43 0 01-6.6-6.1 6.36 6.36 0 016.1-6.6h16.3a6.35 6.35 0 010 12.7z"></path>
+</g>
+    </svg>
+</template>

package/src/lightning/iconSvgTemplates/buildTemplates/standard/tableau.html

@@ -0,0 +1,7 @@
+<template>
+    <svg class={computedClass} focusable="false" data-key={name} aria-hidden="true" viewBox="0 0 100 100">
+        <g>
+ <path d="M60 51.6h-8.3V61h-3.3v-9.4H40v-3.3h8.3V39h3.3v9.4H60zM43 63.3h-7.1V55h-2.7v8.3H26v2.5h7.2V74h2.7v-8.2H43zM74 34.2h-7.2V26h-2.7v8.2H57v2.6h7.2V45h2.7v-8.2H74zM56 71.8h-4.8V66h-2.3v5.8H44v2.3h4.9V80h2.3v-5.9H56zM43 34.2h-7.2V26h-2.6v8.2H26v2.5h7.2V45h2.6v-8.3H43zM80 48.8h-4.8V43h-2.3v5.8H68v2.3h4.9V57h2.3v-5.8H80zM74 63.3h-7.2V55h-2.7v8.3H57v2.5h7.2V74h2.7v-8.2H74zM56 25.7h-5.1V20H49v5.7h-5v1.7h5.1V33H51v-5.6h5zM32 49.2h-5.1V44H25v5.2h-5v1.6h5.1V56H27v-5.2h5z"></path>
+</g>
+    </svg>
+</template>

package/src/lightning/iconSvgTemplates/buildTemplates/standard/travel_mode.html

@@ -1,10 +1,10 @@
 <template>
     <svg class={computedClass} focusable="false" data-key={name} aria-hidden="true" viewBox="0 0 100 100">
         <g>
- <mask id="pwa" height="60" maskUnits="userSpaceOnUse" width="60" x="20" y="20">
+ <mask id="pza" height="60" maskUnits="userSpaceOnUse" width="60" x="20" y="20">
   <path d="M20 20h60v60H20z" fill-rule="evenodd"></path>
  </mask>
- <g mask="url(#pwa)">
+ <g mask="url(#pza)">
   <path d="M53.77 72.12C54 59.88 62.25 50 72.49 50a22.49 22.49 0 01-18.66 22.12M27.49 50C37.75 50 46 59.88 46.16 72.12A22.5 22.5 0 0127.49 50M50 27.51a22.44 22.44 0 0121.12 15H28.88a22.44 22.44 0 0121.12-15M50 20a30 30 0 1030 30 30 30 0 00-30-30" fill-rule="evenodd"></path>
  </g>
 </g>