lightning-base-components 1.21.1-alpha → 1.21.3-alpha

package/src/lightning/datatable/sort.js

@@ -21,7 +21,7 @@ export function isValidSortDirection(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 current datatable state
+ * @param {Object} state The datatable state
  * @returns {String} The default sort direction
  */
 export function getDefaultSortDirection(state) {
@@ -36,21 +36,22 @@ export function getDefaultSortDirection(state) {
  * @param {String} value The value to update the default sort direction to
  */
 export function setDefaultSortDirection(state, value) {
+    if (isValidSortDirection(value)) {
+        state.defaultSortDirection = value;
+        return;
+    }
     assert(
-        isValidSortDirection(value),
+        false,
         `The "defaultSortDirection" value passed into lightning:datatable
         is incorrect, "defaultSortDirection" value should be one of
         ${Object.keys(VALID_SORT_DIRECTIONS).join()}.`
     );
-    state.defaultSortDirection = isValidSortDirection(value)
-        ? value
-        : getDefaultSortDirection(state);
 }
 
 /**
  * Gets the current sort direction
  *
- * @param {Object} state The current datatable state
+ * @param {Object} state The datatable state
  * @returns {String} The current sort direction
  */
 export function getSortedDirection(state) {
@@ -63,25 +64,28 @@ export function getSortedDirection(state) {
  * an error providing resolution information. In an error case,
  * `sortedDirection` will be `undefined`
  *
- * @param {Object} state The current datatable state
+ * @param {Object} state The datatable state
  * @param {String} value The value to update the sort direction to
  */
 export function setSortedDirection(state, value) {
-    const isValid = isValidSortDirection(value);
+    if (isValidSortDirection(value)) {
+        state.sortedDirection = value;
+        return;
+    }
     assert(
-        isValid,
+        false,
         `The "sortedDirection" value passed into lightning:datatable
         is incorrect, "sortedDirection" value should be one of
         ${Object.keys(VALID_SORT_DIRECTIONS).join()}.`
     );
-    state.sortedDirection = isValid ? value : undefined;
+    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 current datatable state
+ * @param {Object} state The datatable state
  * @returns {String} The current sort value
  */
 export function getSortedBy(state) {
@@ -94,7 +98,7 @@ export function getSortedBy(state) {
  * non-string value is provided, the sort value with fallback
  * to `undefined`
  *
- * @param {Object} state The current datatable state
+ * @param {Object} state The datatable state
  * @param {String} value The value to update the sort state to
  */
 export function setSortedBy(state, value) {
@@ -120,20 +124,20 @@ export function updateSorting(state) {
 /**
  * Applies sorting to a datatable column
  *
- * @param {Object} column The datatable column name to sort
+ * @param {Object} col The datatable column name to sort
  * @param {Object} state The current datatable state
  */
-export function updateColumnSortingState(column, state) {
+export function updateColumnSortingState(col, state) {
     const { sortedBy, sortedDirection, defaultSortDirection } = state;
-
-    if (column.sortable && getColumnName(column) === sortedBy) {
-        column.sorted = true;
-        column.sortAriaLabel =
+    const { sortable } = col;
+    if (sortable && getColumnName(col) === sortedBy) {
+        col.sorted = true;
+        col.sortAriaLabel =
             sortedDirection === 'desc' ? 'descending' : 'ascending';
-        column.sortedDirection = sortedDirection;
+        col.sortedDirection = sortedDirection;
     } else {
-        column.sorted = false;
-        column.sortAriaLabel = column.sortable ? 'other' : null;
-        column.sortedDirection = defaultSortDirection;
+        col.sorted = false;
+        col.sortAriaLabel = sortable ? 'other' : null;
+        col.sortedDirection = defaultSortDirection;
     }
 }

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

@@ -1,57 +1,2 @@
-/** Styles that aren't available from SLDS **/
-
-.cell {
-    display: inline-block;
-    padding: .25rem .5rem;
-    white-space: nowrap;
-}
-
-.column-header {
-    color: #514f4d;
-    padding: .25rem .5rem;
-    font-weight: 700;
-    line-height: normal;
-}
-
-.table-header {
-    height: 0;
-}
-
-/* Row borders */
-[data-row-key-value] {
-    border-top: 1px solid #dddbda;
-}
-
-.slds-table_header-fixed [data-row-key-value]:first-child {
-    border-top: 0;
-}
-
-/* Required for row numbers */
-[role="row"] {
-    counter-increment: row-number;
-}
-
-/* Move column header row to left;
-   TODO: See if there a better way */
-[role="grid"] > [role="rowgroup"]:nth-child(1) {
-    margin-left: -0.5rem;
-}
-
-[role="columnheader"] {
-    outline: none;
-}
-
-[role="row"]:hover {
-    background-color: var(--sds-c-color-background, #f3f2f2);
-}
-
-[role="row"].slds-is-selected {
-    background-color: var(--sds-c-color-background-dark, #ecebea);
-}
-
-[role="rowheader"].slds-has-focus,
-[role="rowheader"]:focus {
-    box-shadow: var(--sds-c-color-border-selection, #0176d3) 0 0 0 1px inset;
-    box-shadow: var(--sds-c-color-border-selection, #0176d3) 0 0 0 1px inset;
-    outline: 0;
-}
+@import './div.lbc.synthetic.css';
+@import './div.lbc.native.css';

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

@@ -7,7 +7,7 @@
         <span data-keyboard-mode="action" class={computedAriaLiveClassForActionMode}>{i18n.ariaLiveActionMode}</span>
     </span>
     <div lwc:dom="manual" class="dt-width-observer" style="width: 100%; height: 0px;"></div>
-    <div class="dt-outer-container" style="height: 100%; position: relative;">
+    <div part="datagrid-wrapper" class="dt-outer-container" style="height: 100%; position: relative;">
         <!-- Inline Edit Panel -->
         <lightning-primitive-datatable-iedit-panel
             data-iedit-panel="true"
@@ -27,6 +27,7 @@
             <div class="slds-scrollable_y" onscroll={handleVerticalScroll} style={computedScrollerStyle}>
                 <!-- Corresponds to <table> -->
                 <div class={computedTableClass}
+                    part="datagrid"
                     role={computedTableRole}
                     style={computedTableStyle}
                     onkeydown={handleTableKeydown}
@@ -35,6 +36,7 @@
                     onfocusout={handleTableFocusOut}
                     aria-label={ariaLabel}
                     aria-labelledby={ariaLabelledBy}
+                    aria-describedby={ariaDescribedBy}
                     aria-rowcount={ariaRowCount}
                     aria-colcount={ariaColCount}
                     data-num-rows={data.length}
@@ -46,6 +48,7 @@
                     <template if:true={hasValidKeyField}>
                         <!-- Corresponds to <thead> -->
                         <div
+                            part="datagrid-header"
                             data-rowgroup-header
                             role="rowgroup">
                             <!-- TODO: Fix aria-rowindex to not be hardcoded -->
@@ -59,7 +62,8 @@
                                 onprivateresizeend={handleResizeEnd}>
                                 <template for:each={state.columns} for:item="def" for:index="colIndex">
                                     <!-- Column Header -->
-                                    <div class="column-header cell"
+                                    <div part="cell"
+                                        class="column-header cell"
                                         style={def.style}
                                         role="columnheader"
                                         tabindex={def.tabIndex}
@@ -118,7 +122,7 @@
                             </div>
                         </div>
                         <!-- Corresponds to <tbody> -->
-                        <div
+                        <div part="datagrid-body"
                             data-rowgroup-body
                             role="rowgroup"
                             style={computedTbodyStyle}>
@@ -142,7 +146,8 @@
                                         <template for:each={row.cells} for:item="cell">
                                             <template if:true={cell.isCheckbox}>
                                                 <!-- Checkbox Cell -->
-                                                <div class={cell.class}
+                                                <div part="cell"
+                                                    class={cell.class}
                                                     style={cell.style}
                                                     role="gridcell"
                                                     tabindex={cell.tabIndex}
@@ -166,7 +171,8 @@
                                             </template>
                                             <template if:true={cell.isDataTypeScope}>
                                                 <!-- Row Header Cell -->
-                                                <div class={cell.class}
+                                                <div part="cell"
+                                                    class={cell.class}
                                                     role="rowheader"
                                                     style={cell.style}
                                                     aria-selected={cell.ariaSelected}
@@ -215,7 +221,8 @@
                                             </template>
                                             <template if:true={cell.isDataType}>
                                                 <!-- Non-Header Cells (Regular Data Cells) -->
-                                                <div class={cell.class}
+                                                <div part="cell"
+                                                    class={cell.class}
                                                     role="gridcell"
                                                     style={cell.style}
                                                     aria-selected={cell.ariaSelected}

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

@@ -0,0 +1,3 @@
+@import 'lightning/sldsCommon';
+@import 'lightning/sldsUtilsVisibility';
+@import '../../datagrid.slds.css';

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

@@ -0,0 +1,86 @@
+/* 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.
+ */
+
+.slds-table_header-fixed [part='datagrid-header'] {
+    position: sticky;
+    top: 0;
+    min-height: var(--slds-g-sizing-9);
+    z-index: 1;
+}
+
+.table-header {
+    height: 0;
+}
+
+/* required as header above is using position: sticky */
+.slds-table_header-fixed_container {
+    padding-top: unset;
+}
+
+/* Cells */
+[part='cell'] {
+    position: relative;
+    padding-inline: var(--slds-g-sizing-3);
+    padding-block: var(--slds-g-sizing-2);
+    white-space: nowrap;
+    align-items: center;
+}
+
+/* cell focus border color */
+[role='gridcell']:focus,
+[role='rowheader']:focus {
+    box-shadow: var(--slds-g-color-border-accent-2) 0 0 0 1px inset;
+}
+
+/* Column Header Cells */
+[role='columnheader'] {
+    outline: none;
+    color: #514f4d;
+    font-weight: 700;
+    line-height: normal;
+}
+
+/* Rows */
+
+/* Row borders */
+[data-row-key-value] {
+    border-top: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
+}
+
+/* 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);
+}
+
+.slds-table_header-fixed [data-row-key-value]:first-child {
+    border-top: 0;
+}
+
+
+[role="row"] {
+    /* Required for row numbers */
+    counter-increment: row-number;
+    display: flex;
+}
+
+/* Move column header row to left;
+   TODO: See if there a better way */
+[role="grid"]>[role="rowgroup"]:nth-child(1) {
+    margin-left: -0.5rem;
+}
+
+/* TODO: Replace with styling hook */
+[role="row"]:hover {
+    background-color: #f3f2f2;
+}
+/* TODO: Replace with styling hook */
+[role="row"].slds-is-selected {
+    background-color: #ecebea;
+}
+
+.slds-cell-edit:hover {
+    background-color: var(--slds-g-color-surface-container-1);
+}

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

@@ -34,6 +34,7 @@
                     onfocusout={handleTableFocusOut}
                     aria-label={ariaLabel}
                     aria-labelledby={ariaLabelledBy}
+                    aria-describedby={ariaDescribedBy}
                     data-num-rows={data.length}
                     data-num-selected-rows={selectedRows.length}
                     data-last-rendered-row={_lastRenderedRow}>

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;
@@ -52,8 +52,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);
 }
 
 /**
@@ -110,13 +110,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.`;

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,22 +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);
+    }
+    return totalWidthsData;
 }
 
 /**
@@ -54,12 +55,14 @@ 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;
+    return column.isResized
+        ? column.columnWidth || column.initialWidth
+        : column.initialWidth;
 }
 
 /**

package/src/lightning/datatable/wrapText.js

@@ -41,15 +41,13 @@ export function getWrapTextState(state = getDefaultState(), colKeyValue) {
  *
  * 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 definitions
  */
-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 (isWrappableType(col.type)) {
+        state.wrapText[col.colKeyValue] =
+            normalizeBoolean(col.wrapText) || WRAP_TEXT_DEFAULT;
     }
 }
 
@@ -59,7 +57,7 @@ export function setWrapTextState(state = getDefaultState(), columnDefinition) {
  * 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 {Object} state The datatable state
  * @param {Integer} value The maximum lines allowed
  */
 export function setWrapTextMaxLines(state, value) {
@@ -98,19 +96,19 @@ 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) {
+export function getActions(state, col) {
     const wrapTextActions = [];
-    const { hideDefaultActions, type, colKeyValue } = columnDefinition;
+    const { type, colKeyValue } = col;
 
-    // must be done first, so getWrapTextState correctly resolves
-    setWrapTextState(state, columnDefinition);
+    // Must be done first, so getWrapTextState correctly resolves.
+    setWrapTextState(state, col);
 
-    // if not hidden and isWrapable, sets the internal actions
-    if (isWrappableType(type) && !hideDefaultActions) {
+    // If not hidden and isWrapable, sets the internal actions.
+    if (!col.hideDefaultActions && isWrappableType(type)) {
         const isTextWrapped = getWrapTextState(state, colKeyValue);
 
         wrapTextActions.push({
@@ -136,18 +134,19 @@ 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} state The datatable state
  * @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') {
+    const { name } = action;
+    const isWrapText = name === 'wrapText';
+    if (isWrapText || name === 'clipText') {
         // 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);
         }
     }
@@ -166,8 +165,8 @@ function updateSelectedOptionInHeaderActions(state, colKeyValue) {
         return;
     }
     const columns = getColumns(state);
-    const colData = columns[colIndex];
-    const { internalActions } = colData.actions;
+    const col = columns[colIndex];
+    const { internalActions } = col.actions;
 
     for (let i = 0, { length } = internalActions; i < length; i += 1) {
         const action = internalActions[i];
@@ -182,7 +181,7 @@ 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);
+    col.actions = Object.assign({}, col.actions);
 }
 
 /************************** HELPER FUNCTIONS **************************/

package/src/lightning/datepicker/datepicker.css

@@ -1,3 +1 @@
-/* @import 'lightning/sldsCommon';
-@import './input-text.slds.css';
-@import './form-element.slds.css'; */
+@import './datepicker.lbc.native.css';