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

package/metadata/raptor.json

@@ -1284,6 +1284,11 @@
       {
         "name": "iconVariant"
       }
+    ],
+    "methods": [
+      {
+        "name": "focus"
+      }
     ]
   },
   "icon": {
@@ -1347,8 +1352,10 @@
   "industriesCibApi": {},
   "industriesDecisionMatrixDesignerApi": {},
   "industriesExplainabilityApi": {},
+  "industriesIdentityVerificationApi": {},
   "industriesInterestTaggingApi": {},
   "industriesLoyaltyEngineApi": {},
+  "industriesRcgTenantmanagementApi": {},
   "industriesRuleBuilderApi": {},
   "industriesSustainabilityRecalculateApi": {},
   "industriesSustainabilityRecordLockUnlockApi": {},

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lightning-base-components",
-    "version": "1.13.8-alpha",
+    "version": "1.14.2-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/ariaObserver/__component__/ariaObserver.spec.js

@@ -0,0 +1,103 @@
+import { createElement } from 'lwc';
+import AriaObserverContainer from 'lightningtest/ariaObserverContainer';
+
+function createTestElement(props = {}) {
+    const element = createElement('lightningtest-aria-observer-container', {
+        is: AriaObserverContainer,
+    });
+    Object.assign(element, props);
+    document.body.appendChild(element);
+
+    return element;
+}
+
+describe('AriaObserver', () => {
+    if (process.env.NATIVE_SHADOW) {
+        describe('native shadow', () => {
+            it('should copy the label content over and set aria-labelledby to be the internal label element', () => {
+                const container = createTestElement();
+                const testElement = container.testElement;
+
+                expect(container.labelContent).toEqual(
+                    testElement.labelContent
+                );
+            });
+
+            it('should react to label id changes', async () => {
+                const container = createTestElement();
+                const oldLabelContent = container.labelContent;
+
+                container.updateAriaLabelledby('alt-label-id');
+                await Promise.resolve();
+
+                const testElement = container.testElement;
+
+                expect(container.labelContent).not.toEqual(oldLabelContent);
+                expect(container.labelContent).toEqual(
+                    testElement.labelContent
+                );
+            });
+
+            it('should work with multiple label ids', async () => {
+                const container = createTestElement();
+                container.updateAriaLabelledby('id-label alt-label-id');
+                await Promise.resolve();
+
+                const testElement = container.testElement;
+                expect(testElement.labelContent).toEqual('Foo\nBar');
+            });
+
+            it('should update the internal label content when external content changes', async () => {
+                const container = createTestElement();
+                container.updateLabelContent();
+
+                // wait for component rehydration
+                await Promise.resolve();
+                // wait for mutation observer callback
+                await Promise.resolve();
+
+                const testElement = container.testElement;
+                expect(container.labelContent).toEqual(
+                    testElement.labelContent
+                );
+            });
+        });
+    } else {
+        describe('synthetic shadow', () => {
+            it('should set aria-labelledby to be the external label id', () => {
+                const container = createTestElement();
+                const testElement = container.testElement;
+
+                expect(container.labelId).toEqual(testElement.labelId);
+            });
+
+            it('should react to label id changes', async () => {
+                const container = createTestElement();
+                const oldLabelId = container.labelId;
+
+                container.updateAriaLabelledby('alt-label-id');
+                await Promise.resolve();
+
+                const testElement = container.testElement;
+
+                expect(container.labelId).not.toEqual(oldLabelId);
+                expect(container.labelId).toEqual(testElement.labelId);
+            });
+
+            it('should keep the label id unchanged when the label content changes', async () => {
+                const container = createTestElement();
+                container.updateLabelContent();
+                await Promise.resolve();
+
+                const testElement = container.testElement;
+                expect(container.labelId).toEqual(testElement.labelId);
+            });
+
+            it('should keep track of the live id', () => {
+                const container = createTestElement();
+                const testElement = container.testElement;
+                expect(testElement.labelId).toEqual(testElement.liveId);
+            });
+        });
+    }
+});

package/src/lightning/{utilsPrivate/contentMutation.js → ariaObserver/ariaObserver.js}

@@ -1,50 +1,11 @@
-import { guid } from './guid';
-import { smartSetAttribute } from './smartSetAttribute';
+import {
+    guid,
+    synchronizeAttrs,
+    isNativeComponent,
+} from 'lightning/utilsPrivate';
 
 const CONTENT_SEPARATOR = '\n';
 
-/**
-<template>
-    <span lwc:dom="manual" class="visually-hidden"></span>
-    <input>
-</template>
-
-class Foo extends LightningElement {
-    constructor() {
-        super();
-        this.ariaObserver = new ContentMutation(this);
-    }
-
-    connectedCallback() {
-        if (!this.ariaObserver) {
-            this.ariaObserver = new ContentMutation(this);
-        }
-    }
-
-    disconnectedCallback() {
-        if (this.ariaObserver) {
-            this.ariaObserver.disconnect();
-            this.ariaObserver = undefined;
-        }
-    }
-
-    @track ariaLabeledbyValue = '';
-
-    @api
-    get ariaLabeledby() {
-        return this.ariaLabeledbyValue; // whatever they set, is what they get back.
-    }
-    set ariaLabeledby(refs) {
-        this.ariaLabeledbyValue = refs;
-        this.ariaObserver.link('input', 'aria-labeledby', refs, 'span.visually-hidden');
-    }
-
-    renderedCallback() {
-        this.ariaObserver.sync();
-    }
-}
-**/
-
 function getAttr(elm, attr) {
     if (elm.tagName.match(/lightning/i)) {
         return elm[attr];
@@ -95,11 +56,10 @@ function addAriaRefWhenNeeded(elm, attrName, computedIds) {
     }
 
     if (suffix.length !== 0) {
-        smartSetAttribute(
-            elm,
-            attrName,
-            oldIds + (oldIds.length === 0 ? '' : ' ') + suffix.join(' ')
-        );
+        synchronizeAttrs(elm, {
+            [attrName]:
+                oldIds + (oldIds.length === 0 ? '' : ' ') + suffix.join(' '),
+        });
     }
 }
 
@@ -116,19 +76,28 @@ function removeAriaRefWhenPossible(elm, attrName, computedIds) {
             newValues.push(newIds[i]);
         }
     }
-    smartSetAttribute(elm, attrName, newValues.join(' '));
+
+    synchronizeAttrs(elm, {
+        [attrName]: newValues.join(' '),
+    });
 }
 
-export class ContentMutation {
+function createPlaceholderContainer() {
+    const container = document.createElement('span');
+    container.style.display = 'none';
+    container.setAttribute('placeholder-container', '');
+    return container;
+}
+
+export default class AriaObserver {
     constructor(component) {
         this.component = component;
         this.template = component.template;
-        this.isNative = this.template.constructor
-            .toString()
-            .match(/\[native code\]/);
+        this.isNative = isNativeComponent(component);
         this.state = {};
         this.liveIds = {};
         this.guid = guid();
+        this.placeholderContainer = null;
     }
 
     connectLiveIdRef(refs, callback) {
@@ -141,24 +110,26 @@ export class ContentMutation {
         this.liveIds[refs] = liveId;
     }
 
-    link(innerSelector, attrName, ids, placeholderContainerSelector) {
-        let attrState = this.state[attrName];
+    connect({ targetSelector, attribute, id, ids }) {
+        ids = ids || id;
+
+        let attrState = this.state[attribute];
         if (attrState) {
-            // note: we don't support linking to a different innerSelector,
-            // attrName, or placeholderContainerSelector
+            // note: we don't support linking to a different targetSelector, attribute
             if (!this.isNative) {
-                const elm = this.template.querySelector(innerSelector);
+                const elm = this.template.querySelector(
+                    attrState.innerSelector
+                );
                 if (elm) {
                     // removing the old ids if possible before setting the new ones
-                    removeAriaRefWhenPossible(elm, attrName, attrState.ids);
+                    removeAriaRefWhenPossible(elm, attribute, attrState.ids);
                 }
                 attrState.ids = ids;
             }
         } else {
-            attrState = this.state[attrName] = {
+            attrState = this.state[attribute] = {
                 ids,
-                innerSelector,
-                placeholderContainerSelector,
+                innerSelector: targetSelector,
             };
         }
         if (this.isNative) {
@@ -167,11 +138,15 @@ export class ContentMutation {
                 .split(/\s+/)
                 .map((ref) => `#${ref}`)
                 .join(',');
-            attrState.placeholder = document.createElement('span');
-            attrState.placeholder.id = `auto-link-${attrName}-${this.guid}`;
+
+            // create placeholder element for copied content
+            if (!attrState.placeholder) {
+                attrState.placeholder = document.createElement('span');
+                attrState.placeholder.id = `auto-link-${attribute}-${this.guid}`;
+            }
         }
         if (this.component.isConnected) {
-            this.privateUpdate(attrName);
+            this.privateUpdate(attribute);
         }
     }
 
@@ -238,12 +213,9 @@ export class ContentMutation {
         }
         let computedIds;
         if (this.isNative) {
-            const {
-                outerSelector,
-                content,
-                placeholder,
-                placeholderContainerSelector,
-            } = this.state[attrName];
+            const { outerSelector, content, placeholder } =
+                this.state[attrName];
+
             const newContent = extractContent(
                 extractElements(this.root, outerSelector)
             );
@@ -252,13 +224,14 @@ export class ContentMutation {
                     newContent;
             }
             if (!placeholder.parentNode) {
-                // inserting the placeholder once
-                const container = this.template.querySelector(
-                    placeholderContainerSelector
-                );
-                if (container) {
-                    container.appendChild(placeholder);
+                // create placeholder container at template root, if not already exist
+                if (!this.placeholderContainer) {
+                    this.placeholderContainer = createPlaceholderContainer();
+                    this.template.appendChild(this.placeholderContainer);
                 }
+
+                // inserting the placeholder once
+                this.placeholderContainer.appendChild(placeholder);
             }
             computedIds = placeholder.id;
         } else {

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,16 +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(
-            ';'
-        );
-    }
-
-    get computedTableHeaderClass() {
-        if (this.state.hideTableHeader) {
-            return 'slds-assistive-text';
-        }
-        return undefined;
+        return [
+            'table-layout:fixed',
+            getCSSWidthStyleOfTable(this.widthsData),
+        ].join(';');
     }
 
     get computedTbodyStyle() {
@@ -802,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() {
@@ -994,7 +988,7 @@ export default class LightningDatatable extends LightningElement {
         // Cell Interaction
         this.template.addEventListener(
             'privatecellkeydown',
-            handleCellKeydown.bind(this)
+            handleKeydownOnCell.bind(this)
         );
 
         this.template.addEventListener(
@@ -1133,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' &&
@@ -1255,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();
         }
@@ -1356,7 +1355,7 @@ export default class LightningDatatable extends LightningElement {
      * @param {FocusEvent} event - `focusout`
      */
     handleTableFocusOut(event) {
-        handleDatatableLosedFocus.call(this, event);
+        handleDatatableFocusOut.call(this, event);
     }
 
     /**
@@ -1446,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,
             },
         });
@@ -1508,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);
 }