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

package/src/lightning/datatable/sort.js

@@ -1,33 +1,6 @@
 import { assert } from 'lightning/utilsPrivate';
 import { getColumnName } from './columns-shared';
 
-const VALID_SORT_DIRECTIONS = {
-    asc: true,
-    desc: true,
-};
-
-/**
- * Determines if the supplied sort direction is valid.
- * Refer to `VALID_SORT_DIRECTIONS` for valid solid directions.
- *
- * @param {String} value The sort direction to validate
- * @returns {Boolean} Whether the supplied sort direction is valid
- */
-export function isValidSortDirection(value) {
-    return !!VALID_SORT_DIRECTIONS[value];
-}
-
-/**
- * Gets the default sort direction. When clicking on a header to sort,
- * the default sort direction is applied first. Clicking again reverses it
- *
- * @param {Object} state The datatable state
- * @returns {String} The default sort direction
- */
-export function getDefaultSortDirection(state) {
-    return state.defaultSortDirection;
-}
-
 /**
  * Sets the default sort direction. When clicking on a header to sort,
  * the default sort direction is applied first. Clicking again reverses it
@@ -36,7 +9,7 @@ export function getDefaultSortDirection(state) {
  * @param {String} value The value to update the default sort direction to
  */
 export function setDefaultSortDirection(state, value) {
-    if (isValidSortDirection(value)) {
+    if (value === 'asc' || value === 'desc') {
         state.defaultSortDirection = value;
         return;
     }
@@ -44,20 +17,10 @@ export function setDefaultSortDirection(state, value) {
         false,
         `The "defaultSortDirection" value passed into lightning:datatable
         is incorrect, "defaultSortDirection" value should be one of
-        ${Object.keys(VALID_SORT_DIRECTIONS).join()}.`
+        'asc' or 'desc'.`
     );
 }
 
-/**
- * Gets the current sort direction
- *
- * @param {Object} state The datatable state
- * @returns {String} The current sort direction
- */
-export function getSortedDirection(state) {
-    return state.sortedDirection;
-}
-
 /**
  * Sets the current sort direction.
  * In the case an invalid sort direction is provided, throw
@@ -68,7 +31,7 @@ export function getSortedDirection(state) {
  * @param {String} value The value to update the sort direction to
  */
 export function setSortedDirection(state, value) {
-    if (isValidSortDirection(value)) {
+    if (value === 'asc' || value === 'desc') {
         state.sortedDirection = value;
         return;
     }
@@ -76,22 +39,11 @@ export function setSortedDirection(state, value) {
         false,
         `The "sortedDirection" value passed into lightning:datatable
         is incorrect, "sortedDirection" value should be one of
-        ${Object.keys(VALID_SORT_DIRECTIONS).join()}.`
+        'asc' or 'desc'.`
     );
     state.sortedDirection = undefined;
 }
 
-/**
- * Gets the current sort value. The value will match the name
- * of a given column in the datatable
- *
- * @param {Object} state The datatable state
- * @returns {String} The current sort value
- */
-export function getSortedBy(state) {
-    return state.sortedBy;
-}
-
 /**
  * Sets the current sort value. The value should match the name
  * of a given column in the datatable. In the case that a
@@ -115,29 +67,18 @@ export function setSortedBy(state, value) {
  * @param {Object} state The current datatable state
  */
 export function updateSorting(state) {
-    const { columns } = state;
+    const { columns, defaultSortDirection, sortedBy, sortedDirection } = state;
     for (let i = 0, { length } = columns; i < length; i += 1) {
-        updateColumnSortingState(columns[i], state);
-    }
-}
-
-/**
- * Applies sorting to a datatable column
- *
- * @param {Object} col The datatable column name to sort
- * @param {Object} state The current datatable state
- */
-export function updateColumnSortingState(col, state) {
-    const { sortedBy, sortedDirection, defaultSortDirection } = state;
-    const { sortable } = col;
-    if (sortable && getColumnName(col) === sortedBy) {
-        col.sorted = true;
-        col.sortAriaLabel =
-            sortedDirection === 'desc' ? 'descending' : 'ascending';
-        col.sortedDirection = sortedDirection;
-    } else {
-        col.sorted = false;
-        col.sortAriaLabel = sortable ? 'other' : null;
-        col.sortedDirection = defaultSortDirection;
+        const col = columns[i];
+        if (col.sortable && getColumnName(col) === sortedBy) {
+            col.sorted = true;
+            col.sortAriaLabel =
+                sortedDirection === 'desc' ? 'descending' : 'ascending';
+            col.sortedDirection = sortedDirection;
+        } else {
+            col.sorted = false;
+            col.sortAriaLabel = col.sortable ? 'other' : null;
+            col.sortedDirection = defaultSortDirection;
+        }
     }
 }

package/src/lightning/datatable/templates/div/div.html

@@ -23,15 +23,15 @@
             onmasscheckboxchange={handleMassCheckboxChange}
         ></lightning-primitive-datatable-iedit-panel>
         <!-- Table Container -->
-        <div class={computedTableContainerClass} onscroll={handleHorizontalScroll} style={scrollerXStyles}>
-            <div class="slds-scrollable_y" onscroll={handleVerticalScroll} style={computedScrollerStyle}>
+        <div class={computedTableContainerClass} onscroll={handleHorizontalScroll} style={computedScrollerXStyle}>
+            <div class="slds-scrollable_y" onscroll={handleVerticalScroll} style={computedScrollerYStyle}>
                 <!-- Corresponds to <table> -->
                 <div class={computedTableClass}
                     part="datagrid"
                     role={computedTableRole}
                     style={computedTableStyle}
                     onkeydown={handleTableKeydown}
-                    onclick={handleCellClick}
+                    onclick={handleTableCellClick}
                     onfocusin={handleTableFocusIn}
                     onfocusout={handleTableFocusOut}
                     aria-label={ariaLabel}
@@ -177,6 +177,7 @@
                                                     style={cell.style}
                                                     aria-selected={cell.ariaSelected}
                                                     aria-readonly={cell.ariaReadOnly}
+                                                    aria-describedby={cell.describedBy}
                                                     tabindex={cell.tabIndex}
                                                     data-label={cell.dataLabel}
                                                     data-col-key-value={cell.colKeyValue}
@@ -217,6 +218,9 @@
                                                         type-attribute-21={cell.typeAttribute21}
                                                         type-attribute-22={cell.typeAttribute22}>
                                                     </lightning-primitive-cell-factory>
+                                                    <template if:true={cell.describedBy}>
+                                                        <span id={cell.describedBy} class="slds-hide">Unsaved</span>
+                                                    </template>
                                                 </div>
                                             </template>
                                             <template if:true={cell.isDataType}>
@@ -234,6 +238,7 @@
                                                     <lightning-primitive-cell-factory
                                                         types={privateTypes}
                                                         aria-selected={cell.ariaSelected}
+                                                        aria-describedby={cell.describedBy}
                                                         data-label={cell.dataLabel}
                                                         alignment={cell.alignment}
                                                         has-focus={cell.hasFocus}
@@ -267,6 +272,9 @@
                                                         type-attribute-21={cell.typeAttribute21}
                                                         type-attribute-22={cell.typeAttribute22}>
                                                     </lightning-primitive-cell-factory>
+                                                    <template if:true={cell.describedBy}>
+                                                        <span id={cell.describedBy} class="slds-hide">Unsaved</span>
+                                                    </template>
                                                 </div>
                                         </template>
                                     </template>
@@ -275,7 +283,7 @@
                             <!-- Loading Indicator -->
                             <template if:true={isLoading}>
                                 <div>
-                                    <div colspan={numberOfColumns} class="slds-is-relative">
+                                    <div colspan={state.columns.length} class="slds-is-relative">
                                         <lightning-primitive-datatable-loading-indicator></lightning-primitive-datatable-loading-indicator>
                                     </div>
                                 </div>

package/src/lightning/datatable/templates/div/div.lbc.synthetic.css

@@ -1,9 +1,7 @@
-/* TODO: fix first row's top border and last row's bottom border. first row issue is due to
- * using a sticky header. further investigation is needed for the last row issue.
- */
+/* TODO: fix last row's bottom border */
 
 .slds-table_header-fixed [part='datagrid-header'] {
-    position: sticky;
+    position: absolute;
     top: 0;
     min-height: var(--slds-g-sizing-9);
     z-index: 1;
@@ -13,11 +11,6 @@
     height: 0;
 }
 
-/* required as header above is using position: sticky */
-.slds-table_header-fixed_container {
-    padding-top: unset;
-}
-
 /* Cells */
 [part='cell'] {
     position: relative;
@@ -51,16 +44,17 @@
 /* row border on hover */
 [data-row-key-value]:hover [role='gridcell']:not(.slds-has-focus),
 [data-row-key-value]:hover [role='rowheader']:not(.slds-has-focus) {
-    box-shadow: inset 0 var(--slds-g-sizing-border-1) var(--slds-g-color-border-1),
-        inset 0 calc(var(--slds-g-sizing-border-1) * -1) var(--slds-g-color-border-1);
+    box-shadow: inset 0 var(--slds-g-sizing-border-1)
+            var(--slds-g-color-border-1),
+        inset 0 calc(var(--slds-g-sizing-border-1) * -1)
+            var(--slds-g-color-border-1);
 }
 
 .slds-table_header-fixed [data-row-key-value]:first-child {
     border-top: 0;
 }
 
-
-[role="row"] {
+[role='row'] {
     /* Required for row numbers */
     counter-increment: row-number;
     display: flex;
@@ -68,16 +62,16 @@
 
 /* Move column header row to left;
    TODO: See if there a better way */
-[role="grid"]>[role="rowgroup"]:nth-child(1) {
+[role='grid'] > [role='rowgroup']:nth-child(1) {
     margin-left: -0.5rem;
 }
 
 /* TODO: Replace with styling hook */
-[role="row"]:hover {
+[role='row']:hover {
     background-color: #f3f2f2;
 }
 /* TODO: Replace with styling hook */
-[role="row"].slds-is-selected {
+[role='row'].slds-is-selected {
     background-color: #ecebea;
 }
 

package/src/lightning/datatable/templates/table/table.html

@@ -22,14 +22,14 @@
             onmasscheckboxchange={handleMassCheckboxChange}>
         </lightning-primitive-datatable-iedit-panel>
         <!-- Table Container -->
-        <div class={computedTableContainerClass} onscroll={handleHorizontalScroll} style={scrollerXStyles}>
-            <div class="slds-scrollable_y" onscroll={handleVerticalScroll} style={computedScrollerStyle}>
+        <div class={computedTableContainerClass} onscroll={handleHorizontalScroll} style={computedScrollerXStyle}>
+            <div class="slds-scrollable_y" onscroll={handleVerticalScroll} style={computedScrollerYStyle}>
                 <!-- Table -->
                 <table class={computedTableClass}
                     role={computedTableRole}
                     style={computedTableStyle}
                     onkeydown={handleTableKeydown}
-                    onclick={handleCellClick}
+                    onclick={handleTableCellClick}
                     onfocusin={handleTableFocusIn}
                     onfocusout={handleTableFocusOut}
                     aria-label={ariaLabel}
@@ -112,6 +112,7 @@
                             <template for:each={renderedRows} for:item="row" for:index="rowIndex">
                                 <!-- Data Rows -->
                                 <tr class={row.classnames}
+                                    role="row"
                                     onkeydown={handleKeydownOnDataRow}
                                     onprivatelookupitempicked={handlePrivateLookupItemPicked}
                                     key={row.key}
@@ -150,6 +151,7 @@
                                         <template if:true={cell.isDataTypeScope}>
                                             <!-- Row Header Cell -->
                                             <th class={cell.class}
+                                                role="rowheader"
                                                 style={cell.style}
                                                 aria-selected={cell.ariaSelected}
                                                 aria-readonly={cell.ariaReadOnly}
@@ -157,7 +159,8 @@
                                                 tabindex={cell.tabIndex}
                                                 data-label={cell.dataLabel}
                                                 data-col-key-value={cell.colKeyValue}
-                                                key={cell.colKeyValue}>
+                                                key={cell.colKeyValue}
+                                                aria-describedby={cell.describedBy}>
                                                 <lightning-primitive-cell-factory
                                                     types={privateTypes}
                                                     aria-selected={cell.ariaSelected}
@@ -195,6 +198,9 @@
                                                     type-attribute-21={cell.typeAttribute21}
                                                     type-attribute-22={cell.typeAttribute22}>
                                                 </lightning-primitive-cell-factory>
+                                                <template if:true={cell.describedBy}>
+                                                    <span id={cell.describedBy} class="slds-hide">Unsaved</span>
+                                                </template>
                                             </th>
                                         </template>
                                         <template if:true={cell.isDataType}>
@@ -207,6 +213,7 @@
                                                 tabindex={cell.tabIndex}
                                                 data-label={cell.dataLabel}
                                                 data-col-key-value={cell.colKeyValue}
+                                                aria-describedby={cell.describedBy}
                                                 key={cell.colKeyValue}>
                                                 <lightning-primitive-cell-factory
                                                     types={privateTypes}
@@ -245,6 +252,9 @@
                                                     type-attribute-21={cell.typeAttribute21}
                                                     type-attribute-22={cell.typeAttribute22}>
                                                 </lightning-primitive-cell-factory>
+                                                <template if:true={cell.describedBy}>
+                                                    <span id={cell.describedBy} class="slds-hide">Unsaved</span>
+                                                </template>
                                             </td>
                                         </template>
                                     </template>
@@ -253,7 +263,7 @@
                             <!-- Loading Indicator -->
                             <template if:true={isLoading}>
                                 <tr>
-                                    <td colspan={numberOfColumns} class="slds-is-relative">
+                                    <td colspan={state.columns.length} class="slds-is-relative">
                                         <lightning-primitive-datatable-loading-indicator></lightning-primitive-datatable-loading-indicator>
                                     </td>
                                 </tr>

package/src/lightning/datatable/tree.js

@@ -1,23 +1,3 @@
-import { getColumns } from './columns';
-import { isTreeType } from './types';
-
-/**
- * Retrieves the default values for the tree state indicator field names.
- * These values are used to make logic decisions later and may be updated
- * during normal operation.
- *
- * @returns {Object} The default tree state indicator field names
- */
-export function getTreeStateIndicatorFieldNames() {
-    return {
-        children: 'hasChildren',
-        level: 'level',
-        expanded: 'isExpanded',
-        position: 'posInSet',
-        setsize: 'setSize',
-    };
-}
-
 /**
  * Determines if any of the columns in the datatable are of a tree-type.
  *
@@ -25,9 +5,9 @@ export function getTreeStateIndicatorFieldNames() {
  * @returns {Boolean} Whether any of the columns are of a tree-type
  */
 export function hasTreeDataType(state) {
-    const columns = getColumns(state);
+    const { columns } = state;
     for (let i = 0, { length } = columns; i < length; i += 1) {
-        if (isTreeType(columns[i].type)) {
+        if (columns[i].type === 'tree') {
             return true;
         }
     }
@@ -41,10 +21,10 @@ export function hasTreeDataType(state) {
  * @returns {Object} The first tree-type column, else `null`
  */
 export function getStateTreeColumn(state) {
-    const columns = getColumns(state);
+    const { columns } = state;
     for (let i = 0, { length } = columns; i < length; i += 1) {
         const col = columns[i];
-        if (isTreeType(col.type)) {
+        if (col.type === 'tree') {
             return col;
         }
     }
@@ -54,18 +34,20 @@ export function getStateTreeColumn(state) {
 /**
  * Dispatches an event when a row is toggled to be expanded or collapsed.
  *
+ * @param {Object} dt - The datatable instance
  * @param {String} rowKeyValue The row key being acted upon
  * @param {Boolean} expanded The current expand/collapse state of the row
  */
-export function fireRowToggleEvent(rowKeyValue, expanded) {
-    const customEvent = new CustomEvent('privatetogglecell', {
-        bubbles: true,
-        composed: true,
-        cancelable: true,
-        detail: {
-            name: rowKeyValue,
-            nextState: expanded ? false : true, // True = expanded, False = collapsed
-        },
-    });
-    this.dispatchEvent(customEvent);
+export function fireRowToggleEvent(dt, rowKeyValue, expanded) {
+    dt.dispatchEvent(
+        new CustomEvent('privatetogglecell', {
+            bubbles: true,
+            composed: true,
+            cancelable: true,
+            detail: {
+                name: rowKeyValue,
+                nextState: expanded ? false : true, // True = expanded, False = collapsed
+            },
+        })
+    );
 }

package/src/lightning/datatable/types.js

@@ -149,26 +149,6 @@ export function isValidType(typeName) {
     return STANDARD_TYPE_NAMES.has(typeName);
 }
 
-/**
- * Determines if a supplied type is a tree type.
- *
- * @param {String} typeName The type to validate
- * @returns {Boolean} Whether the supplied type is a tree type
- */
-export function isTreeType(typeName) {
-    return typeName === 'tree';
-}
-
-/**
- * Determines if a supplied type is valid for a tree type datatable.
- *
- * @param {String} typeName The type to validate
- * @returns {Boolean} Whether the supplied type is valid for a tree
- */
-export function isValidTypeForTree(typeName) {
-    return TREE_SUPPORTED_TYPES.has(typeName);
-}
-
 /**
  * Retrieves the attributes for a given type. Additionally, verifies
  * the supplied type is valid.
@@ -181,16 +161,6 @@ export function getAttributesNames(typeName) {
         isValidType(typeName),
         `You are trying to access an invalid type (${typeName})`
     );
-    return getStandardTypeAttributesNames(typeName);
-}
-
-/**
- * Retrieves the attributes for a given type.
- *
- * @param {String} typeName The type to get the attributes for
- * @returns {Array} An array of attributes for the supplied type
- */
-function getStandardTypeAttributesNames(typeName) {
     return STANDARD_TYPE_NAMES.get(typeName) || [];
 }
 
@@ -199,7 +169,6 @@ function getStandardTypeAttributesNames(typeName) {
  */
 export default class DatatableTypes {
     privateCustomTypes = new Map();
-    isValidTypeForTree = isValidTypeForTree;
 
     constructor(types) {
         if (typeof types === 'object' && types !== null) {
@@ -296,4 +265,14 @@ export default class DatatableTypes {
         const privateType = this.privateCustomTypes.get(typeName);
         return privateType ? privateType.standardCellLayout : false;
     }
+
+    /**
+     * Determines if a supplied type is valid for a tree type datatable.
+     *
+     * @param {String} typeName The type to validate
+     * @returns {Boolean} Whether the supplied type is valid for a tree
+     */
+    isValidTypeForTree(typeName) {
+        return TREE_SUPPORTED_TYPES.has(typeName);
+    }
 }

package/src/lightning/datatable/utils.js

@@ -22,9 +22,12 @@ const CLASS_SET_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') {
@@ -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);
 }
 
 /**
@@ -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

@@ -36,16 +36,6 @@ export function getTotalWidthsData(columnWidthMetaData, columns) {
     return totalWidthsData;
 }
 
-/**
- * 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;
-}
-
 /**
  * Gets the width of a column. If the column has a fixed width,
  * it will always return that value. If the column does not have a fixed
@@ -64,13 +54,3 @@ export function getColumnWidth(column) {
         ? column.columnWidth || column.initialWidth
         : 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` : '';
-}