lightning-base-components 1.21.2-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 current 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,25 +9,16 @@ export function getDefaultSortDirection(state) {
  * @param {String} value The value to update the default sort direction to
  */
 export function setDefaultSortDirection(state, value) {
+    if (value === 'asc' || value === 'desc') {
+        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()}.`
+        'asc' or 'desc'.`
     );
-    state.defaultSortDirection = isValidSortDirection(value)
-        ? value
-        : getDefaultSortDirection(state);
-}
-
-/**
- * Gets the current sort direction
- *
- * @param {Object} state The current datatable state
- * @returns {String} The current sort direction
- */
-export function getSortedDirection(state) {
-    return state.sortedDirection;
 }
 
 /**
@@ -63,29 +27,21 @@ 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 (value === 'asc' || value === 'desc') {
+        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()}.`
+        'asc' or 'desc'.`
     );
-    state.sortedDirection = isValid ? value : 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
- * @returns {String} The current sort value
- */
-export function getSortedBy(state) {
-    return state.sortedBy;
+    state.sortedDirection = undefined;
 }
 
 /**
@@ -94,7 +50,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) {
@@ -111,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} column The datatable column name to sort
- * @param {Object} state The current datatable state
- */
-export function updateColumnSortingState(column, state) {
-    const { sortedBy, sortedDirection, defaultSortDirection } = state;
-
-    if (column.sortable && getColumnName(column) === sortedBy) {
-        column.sorted = true;
-        column.sortAriaLabel =
-            sortedDirection === 'desc' ? 'descending' : 'ascending';
-        column.sortedDirection = sortedDirection;
-    } else {
-        column.sorted = false;
-        column.sortAriaLabel = column.sortable ? 'other' : null;
-        column.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.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"
@@ -23,18 +23,20 @@
             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}
                     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,11 +171,13 @@
                                             </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}
                                                     aria-readonly={cell.ariaReadOnly}
+                                                    aria-describedby={cell.describedBy}
                                                     tabindex={cell.tabIndex}
                                                     data-label={cell.dataLabel}
                                                     data-col-key-value={cell.colKeyValue}
@@ -211,11 +218,15 @@
                                                         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}>
                                                 <!-- 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}
@@ -227,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}
@@ -260,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>
@@ -268,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.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,80 @@
+/* TODO: fix last row's bottom border */
+
+.slds-table_header-fixed [part='datagrid-header'] {
+    position: absolute;
+    top: 0;
+    min-height: var(--slds-g-sizing-9);
+    z-index: 1;
+}
+
+.table-header {
+    height: 0;
+}
+
+/* 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

@@ -22,18 +22,19 @@
             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}
                     aria-labelledby={ariaLabelledBy}
+                    aria-describedby={ariaDescribedBy}
                     data-num-rows={data.length}
                     data-num-selected-rows={selectedRows.length}
                     data-last-rendered-row={_lastRenderedRow}>
@@ -111,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}
@@ -149,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}
@@ -156,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}
@@ -194,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}>
@@ -206,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}
@@ -244,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>
@@ -252,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);
+    }
 }