lightning-base-components 1.14.3-alpha → 1.14.4-alpha

package/metadata/raptor.json

@@ -1356,6 +1356,7 @@
   "industriesIdentityVerificationApi": {},
   "industriesInterestTaggingApi": {},
   "industriesLoyaltyEngineApi": {},
+  "industriesPublicSectorApi": {},
   "industriesRcgTenantmanagementApi": {},
   "industriesRuleBuilderApi": {},
   "industriesSustainabilityRecalculateApi": {},
@@ -3413,6 +3414,28 @@
   "uiRelatedListApi": {
     "minVersion": "53.0"
   },
+  "unstable_analyticsDataServiceApi": {},
+  "unstable_analyticsWaveApi": {},
+  "unstable_cmsAuthoringApi": {},
+  "unstable_cmsDeliveryApi": {},
+  "unstable_cmsTypeApi": {},
+  "unstable_commerceApi": {},
+  "unstable_communityNavigationMenuApi": {},
+  "unstable_communityRecordSeoPropertiesApi": {},
+  "unstable_communitySitesSearchApi": {},
+  "unstable_experienceMarketingIntegrationApi": {},
+  "unstable_industriesCibApi": {},
+  "unstable_industriesDecisionMatrixDesignerApi": {},
+  "unstable_industriesExplainabilityApi": {},
+  "unstable_industriesHealthcloudHpiApi": {},
+  "unstable_industriesInterestTaggingApi": {},
+  "unstable_industriesLoyaltyEngineApi": {},
+  "unstable_industriesPublicSectorApi": {},
+  "unstable_industriesRcgTenantmanagementApi": {},
+  "unstable_industriesRuleBuilderApi": {},
+  "unstable_platformAdminSuccessGuidanceApi": {},
+  "unstable_platformInteractionOrchestratorApi": {},
+  "unstable_platformScaleCenterApi": {},
   "unstable_uiActionsApi": {},
   "unstable_uiAppsApi": {},
   "unstable_uiDuplicatesApi": {},

package/package.json

@@ -1,8 +1,8 @@
 {
     "name": "lightning-base-components",
-    "version": "1.14.3-alpha",
+    "version": "1.14.4-alpha",
     "engines": {
-        "node": ">=12.18.3"
+        "node": ">=14.16.0"
     },
     "files": [
         "external",
@@ -958,8 +958,8 @@
                 "path": "scopedImports/@salesforce-label-LightningRating.nStars.js"
             },
             {
-                "name": "@salesforce/label/LightningModalBase.close",
-                "path": "scopedImports/@salesforce-label-LightningModalBase.close.js"
+                "name": "@salesforce/label/LightningModalBase.cancelandclose",
+                "path": "scopedImports/@salesforce-label-LightningModalBase.cancelandclose.js"
             },
             {
                 "name": "@salesforce/label/LightningModalBase.waitstate",

package/scopedImports/@salesforce-label-LightningModalBase.cancelandclose.js

@@ -0,0 +1 @@
+export default 'Cancel and close';

package/src/lightning/ariaObserver/__component__/ariaObserver.spec.js

@@ -47,6 +47,15 @@ describe('AriaObserver', () => {
                 expect(testElement.labelContent).toEqual('Foo\nBar');
             });
 
+            it('should work with label ids appearing in the opposite of document order', async () => {
+                const container = createTestElement();
+                container.updateAriaLabelledby('alt-label-id id-label');
+                await Promise.resolve();
+
+                const testElement = container.testElement;
+                expect(testElement.labelContent).toEqual('Bar\nFoo');
+            });
+
             it('should update the internal label content when external content changes', async () => {
                 const container = createTestElement();
                 container.updateLabelContent();

package/src/lightning/ariaObserver/ariaObserver.js

@@ -13,11 +13,13 @@ function getAttr(elm, attr) {
     return elm.getAttribute(attr);
 }
 
-function extractElements(root, selector) {
-    if (typeof selector !== 'string' || selector === '') {
+function extractElements(root, ids) {
+    if (typeof ids !== 'string' || ids === '') {
         return [];
     }
-    return [].slice.call(root.querySelectorAll(selector));
+    // We must query the elements in the order of ids, so that
+    // the content will be extracted in the correct order.
+    return splitIds(ids).map((id) => root.querySelector(`#${id}`));
 }
 
 function extractContent(elements) {
@@ -113,38 +115,28 @@ export default class AriaObserver {
     connect({ targetSelector, attribute, id, ids }) {
         ids = ids || id;
 
-        let attrState = this.state[attribute];
-        if (attrState) {
-            // note: we don't support linking to a different targetSelector, attribute
-            if (!this.isNative) {
-                const elm = this.template.querySelector(
-                    attrState.innerSelector
-                );
-                if (elm) {
-                    // removing the old ids if possible before setting the new ones
-                    removeAriaRefWhenPossible(elm, attribute, attrState.ids);
-                }
-                attrState.ids = ids;
+        this.state[attribute] = this.state[attribute] || {};
+        const attrState = this.state[attribute];
+
+        // note: we don't support linking to a different targetSelector
+        attrState.innerSelector = attrState.innerSelector || targetSelector;
+
+        // removing the old ids if possible before setting the new ones
+        if (!this.isNative && attrState.ids) {
+            const elm = this.template.querySelector(attrState.innerSelector);
+            if (elm) {
+                removeAriaRefWhenPossible(elm, attribute, attrState.ids);
             }
-        } else {
-            attrState = this.state[attribute] = {
-                ids,
-                innerSelector: targetSelector,
-            };
         }
-        if (this.isNative) {
-            attrState.outerSelector = (ids + '')
-                .trim()
-                .split(/\s+/)
-                .map((ref) => `#${ref}`)
-                .join(',');
 
+        attrState.ids = ids;
+
+        if (this.isNative && !attrState.placeholder) {
             // create placeholder element for copied content
-            if (!attrState.placeholder) {
-                attrState.placeholder = document.createElement('span');
-                attrState.placeholder.id = `auto-link-${attribute}-${this.guid}`;
-            }
+            attrState.placeholder = document.createElement('span');
+            attrState.placeholder.id = `auto-link-${attribute}-${this.guid}`;
         }
+
         if (this.component.isConnected) {
             this.privateUpdate(attribute);
         }
@@ -213,12 +205,9 @@ export default class AriaObserver {
         }
         let computedIds;
         if (this.isNative) {
-            const { outerSelector, content, placeholder } =
-                this.state[attrName];
+            const { ids, content, placeholder } = this.state[attrName];
 
-            const newContent = extractContent(
-                extractElements(this.root, outerSelector)
-            );
+            const newContent = extractContent(extractElements(this.root, ids));
             if (content !== newContent) {
                 this.state[attrName].content = placeholder.textContent =
                     newContent;

package/src/lightning/datatable/datatable.js

@@ -81,6 +81,8 @@ import {
     addFocusStylesToActiveCell,
     refocusCellElement,
     isCellElement,
+    getActiveCellElement,
+    FOCUS_CLASS,
 } from './keyboard';
 import {
     getRowNumberOffset,
@@ -135,11 +137,9 @@ import {
 import {
     isViewportRenderingEnabled,
     setViewportRendering,
-    getDTRows,
-    getDTRenderedRowCount,
-    setDTRenderedRowCount,
     getDTWrapperHeight,
-    normalizeVirtualization,
+    setFirstVisibleIndex,
+    setVirtualize,
     RenderManager,
     DEFAULT_ROW_HEIGHT,
 } from './renderManager';
@@ -200,14 +200,11 @@ export default class LightningDatatable extends LightningElement {
     _customerSelectedRows = null;
     _datatableId = generateUniqueId('lgt-datatable');
     _draftValues = [];
-    _firstVisibleIndex = 0; // first row that should be visible in viewport, used for virtualization
     _isResizing = false; // Whether resizing is in progress
     _privateTypes = {};
     _privateWidthObserver = null; // Instance of LightningDatatableResizeObserver
     _renderMode = 'table';
-    _renderedRowCount = 0;
     _suppressBottomBar = false;
-    _virtualize = '';
 
     /************************* PUBLIC PROPERTIES *************************/
 
@@ -519,24 +516,17 @@ export default class LightningDatatable extends LightningElement {
 
     set renderConfig(value) {
         if (typeof value === 'object' && !isIE11) {
-            const { viewportRendering, virtualize } = value;
-            setViewportRendering(this.state, viewportRendering);
-            if (this.state.renderModeRoleBased) {
-                this._virtualize = normalizeVirtualization(virtualize);
-            }
+            setViewportRendering(this.state, value.viewportRendering);
 
             this._renderManager.configure(
-                this.getRows,
+                this.state,
                 this.getWrapperHeight,
-                this.getRenderedRowCount,
-                this.setRenderedRowCount,
                 value
             );
             // if renderConfig already exists, update rendering
             if (this._renderConfig) {
                 this._renderManager.updateViewportRendering(
-                    this.state.rows,
-                    this.setRenderedRowCount,
+                    this.state,
                     this.gridContainer,
                     true
                 );
@@ -565,6 +555,9 @@ export default class LightningDatatable extends LightningElement {
             validValues: ['default', 'role-based'],
         });
         this.state.renderModeRoleBased = this._renderMode === 'role-based';
+        if (this._renderConfig) {
+            setVirtualize(this.state, this._renderConfig.virtualize);
+        }
         updateCellClassForRoleBasedMode(this.state);
     }
 
@@ -804,16 +797,20 @@ export default class LightningDatatable extends LightningElement {
      */
     get computedTbodyStyle() {
         const style = [];
+        const { firstVisibleIndex, bufferSize, virtualize, rows } = this.state;
         if (
             hasRowNumberColumn(this.state) &&
             getRowNumberOffset(this.state) >= 0
         ) {
-            style.push(
-                'counter-reset: row-number ' + getRowNumberOffset(this.state)
+            const firstRenderedRow = Math.max(
+                firstVisibleIndex - bufferSize,
+                0
             );
+            const rowNumber = firstRenderedRow + getRowNumberOffset(this.state);
+            style.push(`counter-reset: row-number ${rowNumber}`);
         }
-        if (this._virtualize) {
-            const length = this.state.rows.length;
+        if (virtualize) {
+            const length = rows.length;
             style.push(
                 'position: relative',
                 `height:${length * DEFAULT_ROW_HEIGHT}px`
@@ -938,18 +935,16 @@ export default class LightningDatatable extends LightningElement {
     }
 
     get renderedRows() {
-        if (this._virtualize) {
+        const { virtualize, rows, renderedRowCount } = this.state;
+        if (virtualize) {
             const { firstIndex, lastIndex } =
-                this._renderManager.getRenderedRange(
-                    this._firstVisibleIndex,
-                    this._renderedRowCount
-                );
-            return this.state.rows.slice(firstIndex, lastIndex);
+                this._renderManager.getRenderedRange(this.state);
+            return rows.slice(firstIndex, lastIndex);
         }
         if (this.viewportRendering && !isIE11) {
-            return this.state.rows.slice(0, this._renderedRowCount);
+            return rows.slice(0, renderedRowCount);
         }
-        return this.state.rows;
+        return rows;
     }
 
     get showSelectAllCheckbox() {
@@ -985,9 +980,6 @@ export default class LightningDatatable extends LightningElement {
         this.updateRowsAndCellIndexes = updateRowsAndCellIndexes.bind(this);
 
         this._renderManager = new RenderManager();
-        this.getRenderedRowCount = getDTRenderedRowCount.bind(this);
-        this.setRenderedRowCount = setDTRenderedRowCount.bind(this);
-        this.getRows = getDTRows.bind(this);
         this.getWrapperHeight = getDTWrapperHeight.bind(this);
     }
 
@@ -1147,8 +1139,19 @@ export default class LightningDatatable extends LightningElement {
         this._customerSelectedRows = null;
         // set the previous focused cell to null after render is done
         resetCellToFocusFromPrev(state);
+        // reset focus styles on re-render
+        if (state.activeCell && state.activeCell.focused) {
+            const cellElement = getActiveCellElement(template, state);
+            if (
+                cellElement &&
+                cellElement.parentElement &&
+                !cellElement.parentElement.classList.contains(FOCUS_CLASS)
+            ) {
+                setFocusActiveCell(template, state, null, null, false);
+            }
+        }
 
-        if (this.viewportRendering || this._virtualize) {
+        if (this.viewportRendering || state.virtualize) {
             const resizeTarget = this.template.querySelector(
                 'div.dt-outer-container'
             );
@@ -1159,10 +1162,9 @@ export default class LightningDatatable extends LightningElement {
                 // Reset the row count if we already had one before updating the wrapper height.
                 // This can happen if the number of rows was calculated before the datatable
                 // was rendered.
-                if (this._renderedRowCount) {
+                if (this.state.renderedRowCount) {
                     this._renderManager.updateViewportRendering(
-                        this.state.rows,
-                        this.setRenderedRowCount,
+                        this.state,
                         this.gridContainer,
                         true
                     );
@@ -1248,16 +1250,10 @@ export default class LightningDatatable extends LightningElement {
         }
 
         handleInlineEditPanelScroll.call(this, event);
-        if (this._virtualize) {
-            this._firstVisibleIndex =
-                this._renderManager.getFirstVisibleIndex(event);
+        if (this.state.virtualize) {
+            setFirstVisibleIndex(this.state, event.target.scrollTop);
         } else if (this.viewportRendering) {
-            this._renderManager.handleScroll(
-                this.state.rows,
-                this._renderedRowCount,
-                this.setRenderedRowCount,
-                event
-            );
+            this._renderManager.handleScroll(this.state, event);
         }
     }
 
@@ -1533,10 +1529,9 @@ export default class LightningDatatable extends LightningElement {
 
         this.updateRowsAndCellIndexes(state);
 
-        if (this.viewportRendering || this._virtualize) {
+        if (this.viewportRendering || state.virtualize) {
             this._renderManager.updateViewportRendering(
-                this.state.rows,
-                this.setRenderedRowCount,
+                this.state,
                 this.gridContainer
             );
         }
@@ -1578,7 +1573,7 @@ export default class LightningDatatable extends LightningElement {
         setDirtyValues(state, this._draftValues);
         updateRowNavigationMode(hadTreeDataTypePreviously, state);
         state.headerIndexes = generateHeaderIndexes(getColumns(state));
-        // Updates state.wrapText and when isWrapableType, sets internal header actions
+        // Updates state.wrapText and when isWrappableType, sets internal header actions
         updateHeaderActions(state);
         this.updateRowsAndCellIndexes(state);
         updateBulkSelectionState(state);

package/src/lightning/datatable/infiniteLoading.js

@@ -1,34 +1,67 @@
 import { normalizeBoolean } from 'lightning/utilsPrivate';
 import { getScrollOffsetFromTableEnd, isNonNegativeInteger } from './utils';
 
-const SCROLLABLE_CONTAINER_SEL = '.slds-scrollable_y';
 const SCROLL_ALLOWANCE = 2;
+export const DEFAULT_LOAD_MORE_OFFSET = 20;
 
-export function getInfiniteLoadingDefaultState() {
-    return {
-        enableInfiniteLoading: false,
-        loadMoreOffset: 20,
-        isLoading: false,
-    };
-}
+/*********************** STATE MANAGEMENT ************************/
 
+/**
+ * Returns whether the datatable is in a loading state
+ *
+ * @param {Object} state The datatable state object
+ * @returns {Boolean} The loading state
+ */
 export function isLoading(state) {
     return state.isLoading;
 }
+
+/**
+ * Sets the loading state of the datatable
+ *
+ * @param {Object} state The datatable state object
+ * @param {Boolean} value The loading state to set
+ */
 export function setLoading(state, value) {
     state.isLoading = normalizeBoolean(value);
 }
 
+/**
+ * Returns whether infinite loading is enabled on the datatable
+ *
+ * @param {Object} state The datatable state object
+ * @returns {Boolean} The infinite loading state
+ */
 export function isInfiniteLoadingEnabled(state) {
     return state.enableInfiniteLoading;
 }
+
+/**
+ * Sets the infinite loading option on the datatable
+ *
+ * @param {Object} state The datatable state object
+ * @param {Boolean} value The infinite loading state to set
+ */
 export function setInfiniteLoading(state, value) {
     state.enableInfiniteLoading = normalizeBoolean(value);
 }
 
+/**
+ * Returns the load more offset
+ *
+ * @param {Object} state The datatable state object
+ * @returns {Number} The currently configured load more offset value
+ */
 export function getLoadMoreOffset(state) {
     return state.loadMoreOffset;
 }
+
+/**
+ * Sets the load more offset value. Must be a number >= 0.
+ *
+ * @param {Object} state The datatable state object
+ * @param {Boolean} value The load more offset value to set
+ */
 export function setLoadMoreOffset(state, value) {
     if (!isNonNegativeInteger(value)) {
         // eslint-disable-next-line no-console
@@ -40,9 +73,17 @@ export function setLoadMoreOffset(state, value) {
 
     state.loadMoreOffset = isNonNegativeInteger(value)
         ? parseInt(value, 10)
-        : getInfiniteLoadingDefaultState().loadMoreOffset;
+        : DEFAULT_LOAD_MORE_OFFSET;
 }
 
+/************************** PUBLIC METHODS ***************************/
+
+/**
+ * Checks whether the datatable should begin loading more content
+ * and then dispatches the `loadmore` event indicating that directive.
+ *
+ * @param {Event} event
+ */
 export function handleLoadMoreCheck(event) {
     if (isLoading(this.state)) {
         return;
@@ -60,24 +101,13 @@ export function handleLoadMoreCheck(event) {
     }
 }
 
-function isScrollable(element) {
-    // scrollHeight should be greater than clientHeight by some allowance
-    return (
-        element &&
-        element.scrollHeight > element.clientHeight + SCROLL_ALLOWANCE
-    );
-}
-
-function isScrollerVisible(elem) {
-    return (
-        elem && !!(elem.offsetParent || elem.offsetHeight || elem.offsetWidth)
-    );
-}
-
-function hasData(root) {
-    return root.querySelectorAll('tbody > tr').length > 0;
-}
-
+/**
+ * Determines whether or not to prefetch data. If so,
+ * dispatches the `loadmore` event.
+ *
+ * @param {Object} root  The datatable
+ * @param {Object} state The datatable state object
+ */
 export function handlePrefetch(root, state) {
     if (
         !isInfiniteLoadingEnabled(state) ||
@@ -91,9 +121,51 @@ export function handlePrefetch(root, state) {
         return;
     }
 
-    const elem = root.querySelector(SCROLLABLE_CONTAINER_SEL);
+    const elem = root.querySelector('.slds-scrollable_y');
 
     if (isScrollerVisible(elem) && !isScrollable(elem)) {
         this.dispatchEvent(new CustomEvent('loadmore'));
     }
 }
+
+/************************** PRIVATE METHODS ***************************/
+
+/**
+ * Determines if a DOM element is scrollable
+ *
+ * @param {Element} element The DOM element to check
+ * @returns {Boolean} Whether or not the element is scrollable
+ */
+function isScrollable(element) {
+    // scrollHeight should be greater than clientHeight by some allowance
+    return (
+        element &&
+        element.scrollHeight > element.clientHeight + SCROLL_ALLOWANCE
+    );
+}
+
+/**
+ * Determines if a DOM element's scroll bars are visible
+ *
+ * @param {Element} element The DOM element to check
+ * @returns {Boolean} Whether or not the element's scroll bars are visible
+ */
+function isScrollerVisible(element) {
+    return (
+        element &&
+        !!(element.offsetParent || element.offsetHeight || element.offsetWidth)
+    );
+}
+
+/**
+ * Determines if a root element has data
+ *
+ * @param {Element} root The parent element to check
+ * @returns {Boolean} Whether or not the element contains any data
+ */
+function hasData(root) {
+    return (
+        root.querySelectorAll('tbody > tr, [role="rowgroup"] > [role="row"]')
+            .length > 0
+    );
+}

package/src/lightning/datatable/inlineEdit.js

@@ -8,14 +8,16 @@ import {
     reactToTabBackward,
     reactToTabForward,
     getActiveCellElement,
-    getCellElementByIndexes,
     updateActiveCell,
+    isActiveCellEditable,
+    isValidCell,
 } from './keyboard';
 import {
     updateRowsAndCellIndexes,
     getRowByKey,
     getKeyField,
     getUserRowByCellKeys,
+    isCellEditable,
 } from './rows';
 import {
     getColumnIndexByColumnKey,
@@ -315,6 +317,11 @@ function openInlineEdit(dt, target) {
 
     const { rowKeyValue, colKeyValue } = target;
 
+    // ensure that focus remains on inline edit panel instead of active cell
+    if (state.activeCell) {
+        state.activeCell.focused = false;
+    }
+
     inlineEdit.isPanelVisible = true;
     inlineEdit.rowKeyValue = rowKeyValue;
     inlineEdit.colKeyValue = colKeyValue;
@@ -378,11 +385,7 @@ function openInlineEdit(dt, target) {
 export function openInlineEditOnActiveCell(dt) {
     const hasData = dt.state.data && dt.state.data.length > 0;
     if (hasData) {
-        const activeCellElement = getActiveCellElement(dt.template, dt.state);
-        const isEditable = activeCellElement.editable;
-        if (isEditable) {
-            setFocusAndOpenInlineEdit(dt, activeCellElement);
-        } else {
+        if (!isActiveCellEditable(dt.state)) {
             const firstEditableCell = getFirstEditableCell(dt);
             if (firstEditableCell) {
                 updateActiveCell(
@@ -390,8 +393,10 @@ export function openInlineEditOnActiveCell(dt) {
                     firstEditableCell.rowKeyValue,
                     firstEditableCell.colKeyValue
                 );
-                setFocusAndOpenInlineEdit(dt, firstEditableCell);
+                setFocusAndOpenInlineEdit(dt, dt.state.activeCell);
             }
+        } else {
+            setFocusAndOpenInlineEdit(dt, dt.state.activeCell);
         }
     }
 }
@@ -400,11 +405,11 @@ export function openInlineEditOnActiveCell(dt) {
  * Async function to await setting focus on an editable cell before opening inline-edit panel
  *
  * @param {Object} dt - The datatable instance
- * @param {Object} cell - editable cell to be focused before open inline-edit panel
  */
 // eslint-disable-next-line @lwc/lwc/no-async-await
-async function setFocusAndOpenInlineEdit(dt, cell) {
+async function setFocusAndOpenInlineEdit(dt) {
     await setFocusActiveCell(dt.template, dt.state, 0);
+    const cell = getActiveCellElement(dt.template, dt.state);
     openInlineEdit(dt, cell);
 }
 
@@ -716,8 +721,8 @@ function resolveNestedTypeAttributesHelper(rowData, typeAttributesValue) {
 /************************** HELPER FUNCTIONS **************************/
 
 /**
- * Returns a reference to the first editable cell in the table. If no editable cells exist in the table
- * then undefined is returned.
+ * Returns the row and column keys of the first editable cell in the table.
+ * If no editable cells exist in the table then undefined is returned.
  *
  * @param {Object} dt - The datatable instance. Must be a truthy and valid datatable reference.
  */
@@ -732,18 +737,11 @@ function getFirstEditableCell(dt) {
                 // Loop through the editable columns in order and examine the corresponding cells
                 // in the current row for editability, returning the first such cell that is editable
                 const editableColumn = editableColumns[i];
-                const editableColumnIndex = getStateColumnIndex(
-                    dt.state,
-                    editableColumn.colKeyValue
-                );
-                const cell = getCellElementByIndexes(
-                    dt.template,
-                    rowIndex,
-                    editableColumnIndex,
-                    dt.state
-                );
-                if (cell.editable) {
-                    return cell;
+                if (isCellEditable(rows[rowIndex], editableColumn)) {
+                    return {
+                        rowKeyValue: rows[rowIndex].key,
+                        colKeyValue: editableColumn.colKeyValue,
+                    };
                 }
             }
         }
@@ -768,13 +766,6 @@ function getCellValue(state, rowKeyValue, colKeyValue) {
     return row.cells[colIndex].value;
 }
 
-function isValidCell(state, rowKeyValue, colKeyValue) {
-    const row = getRowByKey(state, rowKeyValue);
-    const colIndex = getStateColumnIndex(state, colKeyValue);
-
-    return row && row.cells[colIndex];
-}
-
 /**
  * Sets `aria-selected` to true on cells whose rows are selected
  * and are in the same column as the cell being currently edited