lightning-base-components 1.13.9-alpha → 1.14.1-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lightning-base-components",
-    "version": "1.13.9-alpha",
+    "version": "1.14.1-alpha",
     "engines": {
         "node": ">=12.18.3"
     },
@@ -793,6 +793,10 @@
                 "name": "@salesforce/label/LightningLookup.recentObject",
                 "path": "scopedImports/@salesforce-label-LightningLookup.recentObject.js"
             },
+            {
+                "name": "@salesforce/label/LightningLookup.recentItems",
+                "path": "scopedImports/@salesforce-label-LightningLookup.recentItems.js"
+            },
             {
                 "name": "@salesforce/label/LightningLookup.resultsListHeaderMobile",
                 "path": "scopedImports/@salesforce-label-LightningLookup.resultsListHeaderMobile.js"

package/scopedImports/@salesforce-internal-core.appVersion.js

@@ -1 +1 @@
-export default '234';
+export default '236';

package/scopedImports/@salesforce-label-LightningLookup.recentItems.js

@@ -0,0 +1 @@
+export default 'Recent Items';

package/src/lightning/baseCombobox/baseCombobox.html

@@ -46,6 +46,7 @@
                     name={name}
                     data-value={computedInputValue}
                     disabled={disabled}
+                    aria-label={computedButtonTriggerAriaLabel}
                     onfocus={handleFocus}
                     onkeydown={handleInputKeyDown}
                     onblur={handleBlur}>

package/src/lightning/baseCombobox/baseCombobox.js

@@ -328,7 +328,9 @@ export default class LightningBaseCombobox extends LightningElement {
             [ARIA_DESCRIBEDBY]: this.computedAriaDescribedBy,
             [ARIA_ACTIVEDESCENDANT]: this._activeElementDomId,
             [ARIA_CONTROLS]: this.computedInputControls,
-            [ARIA_LABEL]: this.inputLabel,
+            [ARIA_LABEL]: this.isUserInputDisabled
+                ? this.computedButtonTriggerAriaLabel
+                : this.inputLabel,
         });
     }
 
@@ -441,6 +443,17 @@ export default class LightningBaseCombobox extends LightningElement {
         return this.hasInputPill ? this.inputPill.label : this.inputText;
     }
 
+    get computedButtonTriggerAriaLabel() {
+        const label = this.inputLabel;
+        const value = this.computedInputValue || this.computedPlaceholder;
+
+        if (!label) {
+            return value;
+        }
+
+        return `${label}, ${value}`;
+    }
+
     handleListboxScroll(event) {
         // We don't want this to bubble up to the modal which due to event retargeting wouldn't be able
         // to know what is actually being scrolled and thus may lead to the scrolling of the modal

package/src/lightning/combobox/combobox.css

@@ -1,3 +1,15 @@
 :host {
     display: block;
 }
+
+/**
+     This is adding the red border around the combobox input when there's an error
+     Should be removed once SLDS has added support for this (@W-9240038)
+*/
+:host.slds-has-error {
+    --slds-c-input-color-border:#ea001e;
+    --slds-c-input-shadow:#ea001e 0 0 0 1px inset;
+    --slds-c-input-color-background:var(--slds-c-input-color-background, var(--sds-c-input-color-background, white));
+    --slds-c-input-text-color:var(--slds-c-input-text-color, var(--sds-c-input-text-color), #74747);
+}
+

package/src/lightning/combobox/combobox.html

@@ -15,6 +15,7 @@
             placeholder={placeholder}
             items={_items}
             input-text={_selectedLabel}
+            input-label={label}
             input-icon-size="xx-small"
             input-icon-name="utility:down"
             show-dropdown-activity-indicator={spinnerActive}

package/src/lightning/datatable/columnWidthManager.js

@@ -13,7 +13,7 @@ import {
 import {
     getColumnWidthFromDef,
     getDomWidth,
-    getWidthStyle,
+    buildCSSWidthStyle,
 } from './widthManagerShared';
 import { isRTL } from 'lightning/utilsPrivate';
 
@@ -35,7 +35,7 @@ export function computeColumnWidths(adjustedWidths, columnDefs, widthsData) {
         const newWidth = columnWidths[index];
         widthsData.columnWidths[index] = newWidth;
         columnDef.columnWidth = newWidth;
-        columnDef.style = getWidthStyle(newWidth);
+        columnDef.style = buildCSSWidthStyle(newWidth);
 
         // In RTL, we need to explicitly position the column headers.
         // We do this by providing the offset (in pixels) from the start of the table.
@@ -312,7 +312,11 @@ export class ColumnWidthManager {
                 return [];
             },
             getTableElementWidth() {
-                const tableElement = root.querySelector(TABLE_SEL);
+                // TODO: Figure out a clean way to retrieve and use the correct selectors
+                // Currently outside scope of this work. Should be addressed in W-8540110
+                const tableElement =
+                    root.querySelector(TABLE_SEL) ||
+                    root.querySelector('[role="grid"]');
                 return getDomWidth(tableElement);
             },
         };

package/src/lightning/datatable/datatable.js

@@ -35,7 +35,7 @@ import {
     getColumnsWidths,
     resizeColumnWithDelta,
     getCustomerColumnWidths,
-    getTableWidthStyle,
+    getCSSWidthStyleOfTable,
     updateColumnWidthsMetadata,
     getResizerDefaultState,
 } from './resizer';
@@ -56,7 +56,7 @@ import {
 } from './selector';
 import {
     syncActiveCell,
-    handleCellKeydown,
+    handleKeydownOnCell,
     updateActiveCell,
     setBlurActiveCell,
     setFocusActiveCell,
@@ -67,7 +67,7 @@ import {
     updateTabIndexActiveRow,
     unsetRowNavigationMode,
     updateRowNavigationMode,
-    handleDatatableLosedFocus,
+    handleDatatableFocusOut,
     handleDatatableFocusIn,
     updateTabIndexRow,
     getIndexesActiveCell,
@@ -77,7 +77,7 @@ import {
     resetCellToFocusFromPrev,
     datatableHasFocus,
     setCellClickedForFocus,
-    handleKeyDown,
+    handleKeydownOnTable,
     addFocusStylesToActiveCell,
     refocusCellElement,
 } from './keyboard';
@@ -448,7 +448,7 @@ export default class LightningDatatable extends LightningElement {
 
     set maxColumnWidth(value) {
         const { state, widthsData } = this;
-        setMaxColumnWidth(state, widthsData, value);
+        setMaxColumnWidth(getColumns(state), widthsData, value);
         this._columnWidthManager.maxColumnWidth = this.maxColumnWidth;
     }
 
@@ -484,7 +484,7 @@ export default class LightningDatatable extends LightningElement {
 
     set minColumnWidth(value) {
         const { state, widthsData } = this;
-        setMinColumnWidth(state, widthsData, value);
+        setMinColumnWidth(getColumns(state), widthsData, value);
         this._columnWidthManager.minColumnWidth = this.minColumnWidth;
     }
 
@@ -761,9 +761,10 @@ export default class LightningDatatable extends LightningElement {
         if (this._columnWidthManager.isAutoResizingUpdateQueued()) {
             return ['table-layout:auto'].join(';');
         }
-        return ['table-layout:fixed', getTableWidthStyle(this.widthsData)].join(
-            ';'
-        );
+        return [
+            'table-layout:fixed',
+            getCSSWidthStyleOfTable(this.widthsData),
+        ].join(';');
     }
 
     get computedTbodyStyle() {
@@ -795,7 +796,7 @@ export default class LightningDatatable extends LightningElement {
         if (this._columnWidthManager.isAutoResizingUpdateQueued()) {
             return `${minHeight}overflow-x:auto`;
         }
-        return `${minHeight}${getTableWidthStyle(this.widthsData)}`;
+        return `${minHeight}${getCSSWidthStyleOfTable(this.widthsData)}`;
     }
 
     get scrollerXStyles() {
@@ -987,7 +988,7 @@ export default class LightningDatatable extends LightningElement {
         // Cell Interaction
         this.template.addEventListener(
             'privatecellkeydown',
-            handleCellKeydown.bind(this)
+            handleKeydownOnCell.bind(this)
         );
 
         this.template.addEventListener(
@@ -1126,15 +1127,15 @@ export default class LightningDatatable extends LightningElement {
      * @param {KeyboardEvent} event - `keydown`
      */
     handleTableKeydown(event) {
-        handleKeyDown.call(this, event);
+        handleKeydownOnTable.call(this, event);
     }
 
     /**
-     * Handles the `keydown` event on <tr> (table-based) and div[role="row"] (role-based)
+     * Handles the `keydown` event on data row <tr> (table-based) and div[role="row"] (role-based)
      *
      * @param {KeyboardEvent} event - `keydown`
      */
-    handleTrRowKeyDown(event) {
+    handleKeydownOnDataRow(event) {
         // we probably should not be doing this unless we actually are interested in it
         if (
             this.state.keyboardMode === 'NAVIGATION' &&
@@ -1248,7 +1249,12 @@ export default class LightningDatatable extends LightningElement {
         const { state, widthsData } = this;
         const { colIndex, widthDelta } = event.detail;
         if (widthDelta !== 0) {
-            resizeColumnWithDelta(state, widthsData, colIndex, widthDelta);
+            resizeColumnWithDelta(
+                getColumns(state),
+                widthsData,
+                colIndex,
+                widthDelta
+            );
             this.fireOnResize(true);
             this.safariHeaderFix();
         }
@@ -1349,7 +1355,7 @@ export default class LightningDatatable extends LightningElement {
      * @param {FocusEvent} event - `focusout`
      */
     handleTableFocusOut(event) {
-        handleDatatableLosedFocus.call(this, event);
+        handleDatatableFocusOut.call(this, event);
     }
 
     /**
@@ -1439,7 +1445,10 @@ export default class LightningDatatable extends LightningElement {
         const { state, widthsData } = this;
         const event = new CustomEvent('resize', {
             detail: {
-                columnWidths: getCustomerColumnWidths(state, widthsData),
+                columnWidths: getCustomerColumnWidths(
+                    getColumns(state),
+                    widthsData
+                ),
                 isUserTriggered: !!isUserTriggered,
             },
         });
@@ -1501,7 +1510,7 @@ export default class LightningDatatable extends LightningElement {
         this.updateRowsAndCellIndexes(state);
         updateSelectionState(state);
         this._columnWidthManager.handleRowNumberOffsetChange(state, widthsData);
-        updateColumnWidthsMetadata(state, widthsData);
+        updateColumnWidthsMetadata(getColumns(state), widthsData);
         // set the celltofocus next to null if the column still exists after indexes calculation
         updateCellToFocusFromPrev(state);
 

package/src/lightning/datatable/inlineEdit.js

@@ -233,9 +233,21 @@ function openInlineEdit(dt, target) {
 
     // eslint-disable-next-line @lwc/lwc/no-async-operation
     setTimeout(() => {
-        template
-            .querySelector('lightning-primitive-datatable-iedit-panel')
-            .focus();
+        const panel = template.querySelector(
+            'lightning-primitive-datatable-iedit-panel'
+        );
+        if (!panel.isEditableValid) {
+            // if panel can't be edited, cancel edit process
+            processInlineEditFinish(
+                dt,
+                'edit-canceled',
+                inlineEdit.rowKeyValue,
+                inlineEdit.colKeyValue
+            );
+        } else {
+            // if panel can be edited, focus
+            panel.focus();
+        }
     }, 0);
 }