lightning-base-components 1.13.8-alpha → 1.14.2-alpha

package/src/lightning/datatable/resizer.js

@@ -1,10 +1,11 @@
 import { normalizeBoolean, isRTL } from 'lightning/utilsPrivate';
 import { isCustomerColumn } from './columns';
 import { clamp, normalizeNumberAttribute } from './utils';
+import { buildCSSWidthStyle } from './widthManagerShared';
 
 /**
- * It return the default portion of state use it for the resizer
- * @returns {{resizer: {columnWidths: Array}}} - resizer default state
+ * Returns the default state/values of the resizer metadata
+ * @returns {Object} - resizer default state
  */
 export function getResizerDefaultState() {
     return {
@@ -18,13 +19,9 @@ export function getResizerDefaultState() {
     };
 }
 
-// *******************************
-// states Getters/Setters
-// *******************************
+/***************** GETTERS / SETTERS for Resizer Metadata (widthsData) *****************/
 
-/**
- * resizeColumnDisabled
- */
+/************* resizeColumnDisabled *************/
 
 export function isResizeColumnDisabled(widthsData) {
     return widthsData.resizeColumnDisabled;
@@ -33,9 +30,11 @@ export function setResizeColumnDisabled(widthsData, value) {
     widthsData.resizeColumnDisabled = normalizeBoolean(value);
 }
 
-/**
- * resizeStep
- */
+/************* resizeStep *************/
+
+export function getResizeStep(widthsData) {
+    return widthsData.resizeStep;
+}
 
 export function setResizeStep(widthsData, value) {
     widthsData.resizeStep = normalizeNumberAttribute(
@@ -45,24 +44,11 @@ export function setResizeStep(widthsData, value) {
         getResizerDefaultState().resizeStep
     );
 }
-export function getResizeStep(widthsData) {
-    return widthsData.resizeStep;
-}
 
-/**
- * columnWidths
- */
+/************* columnWidths *************/
 
 /**
- * It return true if there are widths store in the state
- * @param {object} widthsData - data regarding column and table widths
- * @returns {boolean} - true if there are widths store in the state
- */
-export function hasDefinedColumnsWidths(widthsData) {
-    return widthsData.columnWidths.length > 0;
-}
-/**
- * It return the columnsWidths saved in the state
+ * Returns the columnsWidths saved in the state
  * @param {object} widthsData - data regarding column and table widths
  * @returns {Array|*} - list of column widths
  */
@@ -70,16 +56,22 @@ export function getColumnsWidths(widthsData) {
     return widthsData.columnWidths;
 }
 /**
- * It set columnWidths to empty array
+ * Sets columnWidths to empty array
  * @param {object} widthsData - data regarding column and table widths
  */
 export function resetColumnWidths(widthsData) {
     widthsData.columnWidths = [];
 }
-
 /**
- * tableWidth
+ * Returns true if there are widths stored in the state
+ * @param {object} widthsData - data regarding column and table widths
+ * @returns {boolean} - true if there are widths store in the state
  */
+export function hasDefinedColumnsWidths(widthsData) {
+    return widthsData.columnWidths.length > 0;
+}
+
+/************* tableWidth *************/
 
 /**
  * Get the full width of table
@@ -93,11 +85,13 @@ function setTableWidth(widthsData, tableWidth) {
     widthsData.tableWidth = tableWidth;
 }
 
-/**
- * minColumnWidth
- */
+/************* minColumnWidth *************/
+
+export function getMinColumnWidth(widthsData) {
+    return widthsData.minColumnWidth;
+}
 
-export function setMinColumnWidth(state, widthsData, value) {
+export function setMinColumnWidth(columns, widthsData, value) {
     widthsData.minColumnWidth = normalizeNumberAttribute(
         'minColumnWidth',
         value,
@@ -105,20 +99,15 @@ export function setMinColumnWidth(state, widthsData, value) {
         getResizerDefaultState().minColumnWidth
     );
 
-    updateColumnWidthsMetadata(state, widthsData);
-}
-export function getMinColumnWidth(widthsData) {
-    return widthsData.minColumnWidth;
+    updateColumnWidthsMetadata(columns, widthsData);
 }
 
-/**
- * maxColumnWidth
- */
+/************* maxColumnWidth *************/
 
 export function getMaxColumnWidth(widthsData) {
     return widthsData.maxColumnWidth;
 }
-export function setMaxColumnWidth(state, widthsData, value) {
+export function setMaxColumnWidth(columns, widthsData, value) {
     widthsData.maxColumnWidth = normalizeNumberAttribute(
         'maxColumnWidth',
         value,
@@ -126,20 +115,18 @@ export function setMaxColumnWidth(state, widthsData, value) {
         getResizerDefaultState().maxColumnWidth
     );
 
-    updateColumnWidthsMetadata(state, widthsData);
+    updateColumnWidthsMetadata(columns, widthsData);
 }
 
-// *******************************
-// Logics
-// *******************************
+/***************************** RESIZE LOGIC *****************************/
 
 /**
  * Get the style to match the full width of table
  * @param {object} widthsData - data regarding column and table widths
  * @returns {string} - style string
  */
-export function getTableWidthStyle(widthsData) {
-    return getWidthStyle(getTableWidth(widthsData));
+export function getCSSWidthStyleOfTable(widthsData) {
+    return buildCSSWidthStyle(getTableWidth(widthsData));
 }
 
 /**
@@ -149,7 +136,7 @@ export function getTableWidthStyle(widthsData) {
  *
  * @param {object} state - table state
  */
-export const adjustColumnsSizeFromState = function (state) {
+export function adjustColumnsSizeFromState(state) {
     const columnsWidths = getColumnsWidths(state);
     let columnsWidthSum = 0;
     getColumns(state).forEach((column, colIndex) => {
@@ -160,80 +147,64 @@ export const adjustColumnsSizeFromState = function (state) {
             }
             columnsWidthSum += width;
             column.columnWidth = columnsWidths[colIndex];
-            column.style = getWidthStyle(columnsWidths[colIndex]);
+            column.style = buildCSSWidthStyle(columnsWidths[colIndex]);
         }
     });
     setTableWidth(state, columnsWidthSum);
-};
+}
 
 /**
- * It resize a column width
- * @param {object} state - table state
+ * Resizes a column width
+ * @param {object} columns - all columns on the table
+ * @param {object} widthsData - object containing the resizer metadata
  * @param {number} colIndex - the index of the column based on state.columns
  * @param {number} width - the new width is gonna be applied
  */
-export const resizeColumn = function (state, widthsData, colIndex, width) {
-    const column = getColumns(state)[colIndex];
+export function resizeColumn(columns, widthsData, colIndex, width) {
+    const columnToResize = columns[colIndex];
     const columnsWidths = getColumnsWidths(widthsData);
     const currentWidth = columnsWidths[colIndex];
-    const { minWidth, maxWidth } = column;
+    const { minWidth, maxWidth } = columnToResize;
 
     const newWidth = clamp(width, minWidth, maxWidth);
     if (currentWidth !== newWidth) {
         const newDelta = newWidth - currentWidth;
         setTableWidth(widthsData, getTableWidth(widthsData) + newDelta);
-        updateColumnWidth(state, widthsData, colIndex, newWidth);
+        updateColumnWidth(columns, widthsData, colIndex, newWidth);
         // Workaround for header positioning issues in RTL
-        updateColumnOffsets(state, colIndex + 1, newDelta);
-        column.isResized = true;
+        updateColumnOffsets(columns, colIndex + 1, newDelta);
+        columnToResize.isResized = true;
     }
-};
+}
 
 /**
- * It resize a column width
- * @param {object} state - table state
+ * Resize a column width with an additional delta
+ * @param {object} columns - all columns of the table
  * @param {object} widthsData - data regarding column and table widths
  * @param {number} colIndex - the index of the column based on state.columns
  * @param {number} widthDelta - the delta that creates the new width
  */
-export const resizeColumnWithDelta = function (
-    state,
+export function resizeColumnWithDelta(
+    columns,
     widthsData,
     colIndex,
     widthDelta
 ) {
     const currentWidth = getColumnsWidths(widthsData)[colIndex];
-    resizeColumn(state, widthsData, colIndex, currentWidth + widthDelta);
-};
+    resizeColumn(columns, widthsData, colIndex, currentWidth + widthDelta);
+}
 
-function updateColumnWidth(state, widthsData, colIndex, newWidth) {
+function updateColumnWidth(columns, widthsData, colIndex, newWidth) {
     const columnsWidths = getColumnsWidths(widthsData);
     columnsWidths[colIndex] = newWidth;
 
-    const column = getColumns(state)[colIndex];
+    const column = columns[colIndex];
     column.columnWidth = newWidth;
-    column.style = getWidthStyle(newWidth);
-}
-
-/**
- * It return the current widths for customer columns
- * @param {object} state - table state
- * @param {object} widthsData - data regarding column and table widths
- * @returns {Array} - the widths collection, every element
- * belong to a column with the same index in column prop
- */
-export function getCustomerColumnWidths(state, widthsData) {
-    const columns = getColumns(state);
-    return columns.reduce((prev, column, index) => {
-        if (isCustomerColumn(column)) {
-            prev.push(widthsData.columnWidths[index]);
-        }
-        return prev;
-    }, []);
+    column.style = buildCSSWidthStyle(newWidth);
 }
 
-export function updateColumnWidthsMetadata(state, widthsData) {
-    getColumns(state).forEach((col) => {
+export function updateColumnWidthsMetadata(columns, widthsData) {
+    columns.forEach((col) => {
         if (!col.internal) {
             col.minWidth = getMinColumnWidth(widthsData);
             col.maxWidth = getMaxColumnWidth(widthsData);
@@ -249,6 +220,39 @@ export function updateColumnWidthsMetadata(state, widthsData) {
     });
 }
 
+/**
+ * Updates the column offsets based on the specified delta, starting from the specified index.
+ * This is used to position the column headers properly in RTL.
+ *
+ * @param {object} columns - All columns of the table
+ * @param {number} colIndex - The first index to start applying the change in column width
+ * @param {number} newDelta - The change in column width to apply to
+ */
+function updateColumnOffsets(columns, colIndex, newDelta) {
+    if (isRTL()) {
+        const offsetColumns = columns.slice(colIndex);
+        offsetColumns.forEach((column) => {
+            column.offset += newDelta;
+        });
+    }
+}
+
+/**
+ * Returns the current widths for customer columns
+ * @param {object} columns - all columns of the table
+ * @param {object} widthsData - data regarding column and table widths
+ * @returns {Array} - the widths collection, every element
+ * belong to a column with the same index in column prop
+ */
+export function getCustomerColumnWidths(columns, widthsData) {
+    return columns.reduce((prev, column, index) => {
+        if (isCustomerColumn(column)) {
+            prev.push(widthsData.columnWidths[index]);
+        }
+        return prev;
+    }, []);
+}
+
 /**
  * It returns if table is rendered and not hidden
  * @param {node} root - table root element
@@ -262,27 +266,6 @@ export function isTableRenderedVisible(root) {
     );
 }
 
-function getWidthStyle(pixels) {
-    return pixels > 0 ? `width:${pixels}px` : '';
-}
-
 function getColumns(state) {
     return state.columns;
 }
-
-/**
- * Updates the column offsets based on the specified delta, starting from the specified index.
- * This is used to position the column headers properly in RTL.
- *
- * @param {object} state
- * @param {number} colIndex - The first index to start applying the change in column width
- * @param {number} newDelta - The change in column width to apply to
- */
-function updateColumnOffsets(state, colIndex, newDelta) {
-    if (isRTL()) {
-        const columns = getColumns(state).slice(colIndex);
-        columns.forEach((column) => {
-            column.offset += newDelta;
-        });
-    }
-}

package/src/lightning/datatable/state.js

@@ -46,15 +46,6 @@ export const getDefaultState = function () {
         showRowNumberColumn: false,
         rowNumberOffset: 0,
 
-        // resizer
-        resizeColumnDisabled: false,
-        resizeStep: 10,
-        columnWidths: [],
-        tableWidth: 0,
-        minColumnWidth: 50,
-        maxColumnWidth: 1000,
-        columnWidthsMode: 'fixed',
-
         // infinite loading
         enableInfiniteLoading: false,
         loadMoreOffset: 20,

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

@@ -32,3 +32,22 @@
 [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 {
+    -webkit-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;
+}

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

@@ -2,8 +2,8 @@
     <!-- aria-live region to announce the keyboard navigation mode -->
     <span aria-live="polite">
         <!-- TODO: Look to merge this to a single span -->
-        <span class={computedAriaLiveClassForNavMode}>{i18n.ariaLiveNavigationMode}</span>
-        <span class={computedAriaLiveClassForActionMode}>{i18n.ariaLiveActionModeText}</span>
+        <span data-keyboard-mode="navigation" class={computedAriaLiveClassForNavMode}>{i18n.ariaLiveNavigationMode}</span>
+        <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;">
@@ -41,7 +41,7 @@
                     </template>
                     <template if:true={hasValidKeyField}>
                         <!-- Corresponds to <thead> -->
-                        <div class={computedTableHeaderClass} role="rowgroup">
+                        <div role="rowgroup">
                             <!-- TODO: Fix aria-rowindex to not be hardcoded -->
                             <!-- TODO: might need to move the table-header class out or rename -->
                             <!-- Column Header Row -->
@@ -54,7 +54,7 @@
                                     <!-- Column Header -->
                                     <div class="column-header cell"
                                         style={def.style}
-                                        role=”columnheader”
+                                        role="columnheader"
                                         tabindex={def.tabIndex}
                                         aria-label={def.ariaLabel}
                                         aria-sort={def.sortAriaLabel}
@@ -76,7 +76,8 @@
                                                 sorted={def.sorted}
                                                 sorted-direction={def.sortedDirection}
                                                 column-width={def.columnWidth}
-                                                show-checkbox={showSelectAllCheckbox}>
+                                                show-checkbox={showSelectAllCheckbox}
+                                                hide-header={hideTableHeader}>
                                             </lightning-primitive-header-factory>
                                         </template>
                                         <template if:false={def.fixedWidth}>
@@ -96,7 +97,8 @@
                                                 sorted-direction={def.sortedDirection}
                                                 column-width={def.columnWidth}
                                                 resizable={hasResizebleColumns}
-                                                resizestep={state.resizeStep}>
+                                                resizestep={widthsData.resizeStep}
+                                                hide-header={hideTableHeader}>
                                             </lightning-primitive-header-factory>
                                         </template>
                                     </div>
@@ -110,7 +112,7 @@
                                 <div class={row.classnames}
                                     role="row"
                                     key={row.key}
-                                    onkeydown={handleTrRowKeyDown}
+                                    onkeydown={handleKeydownOnDataRow}
                                     data-row-key-value={row.key}
                                     aria-selected={row.ariaSelected}
                                     aria-level={row.level}
@@ -126,7 +128,7 @@
                                                 style={cell.style}
                                                 role="gridcell"
                                                 tabindex={cell.tabIndex}
-                                                data-label={cell.dataLabel} 
+                                                data-label={cell.dataLabel}
                                                 key={cell.colKeyValue}>
                                                 <lightning-primitive-cell-checkbox
                                                     dt-context-id={_datatableId}

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

@@ -1,8 +1,8 @@
 <template>
     <!-- aria-live region to announce the keyboard navigation mode -->
     <span aria-live="polite">
-        <span class={computedAriaLiveClassForNavMode}>{i18n.ariaLiveNavigationMode}</span>
-        <span class={computedAriaLiveClassForActionMode}>{i18n.ariaLiveActionMode}</span>
+        <span data-keyboard-mode="navigation" class={computedAriaLiveClassForNavMode}>{i18n.ariaLiveNavigationMode}</span>
+        <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;">
@@ -38,7 +38,7 @@
                         <!-- empty since keyField wasn't provided TODO: Why is this here? Test and remove! -->
                     </template>
                     <template if:true={hasValidKeyField}>
-                        <thead class={computedTableHeaderClass}>
+                        <thead>
                             <!-- Column Header Row -->
                             <tr class="slds-line-height_reset"
                                 onprivateresizestart={handleResizeStart}
@@ -68,7 +68,8 @@
                                                 sorted={def.sorted}
                                                 sorted-direction={def.sortedDirection}
                                                 column-width={def.columnWidth}
-                                                show-checkbox={showSelectAllCheckbox}>
+                                                show-checkbox={showSelectAllCheckbox}
+                                                hide-header={hideTableHeader}>
                                             </lightning-primitive-header-factory>
                                         </template>
                                         <template if:false={def.fixedWidth}>
@@ -88,7 +89,8 @@
                                                 sorted-direction={def.sortedDirection}
                                                 column-width={def.columnWidth}
                                                 resizable={hasResizebleColumns}
-                                                resizestep={state.resizeStep}>
+                                                resizestep={widthsData.resizeStep}
+                                                hide-header={hideTableHeader}>
                                             </lightning-primitive-header-factory>
                                         </template>
                                     </th>
@@ -99,7 +101,7 @@
                             <template for:each={renderedRows} for:item="row" for:index="rowIndex">
                                 <!-- Data Rows -->
                                 <tr class={row.classnames}
-                                    onkeydown={handleTrRowKeyDown}
+                                    onkeydown={handleKeydownOnDataRow}
                                     key={row.key}
                                     data-row-key-value={row.key}
                                     aria-selected={row.ariaSelected}

package/src/lightning/datatable/widthManagerShared.js

@@ -44,6 +44,6 @@ export function getColumnWidthFromDef(column) {
     return column.fixedWidth || resizedWidth || column.initialWidth;
 }
 
-export function getWidthStyle(pixels) {
+export function buildCSSWidthStyle(pixels) {
     return pixels > 0 ? `width:${pixels}px` : '';
 }

package/src/lightning/formattedRichText/__docs__/formattedRichText.md

@@ -102,6 +102,7 @@ We recommend using the `em` element instead of `i` to emphasize text with italic
 -   cid
 -   xmpp
 -   ciscotel
+-   navision
 
 URLs such as `www.salesforce.com` or `salesforce.com` are also displayed as links. All links, including those that don't include a protocol, are displayed using the anchor tag with a target value of `_blank`. To display links with other target values, use [lightning-formatted-url](bundle/lightning-formatted-url/) instead.
 

package/src/lightning/helptext/helptext.js

@@ -125,6 +125,14 @@ export default class LightningHelptext extends LightningElement {
         }
     }
 
+    /**
+     * Sets focus on the button.
+     */
+    @api
+    focus() {
+        this.template.querySelector('button').focus();
+    }
+
     _tooltip = null;
 
     disconnectedCallback() {