lightning-base-components 1.22.2-alpha → 1.26.1-rc.0-alpha

package/src/lightning/primitiveCustomCell/primitiveCustomCell.js-meta.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
+    <capabilities>
+        <capability>lightning__ServerRenderableWithHydration</capability>
+    </capabilities>
+</LightningComponentBundle>

package/src/lightning/primitiveDatatableCell/primitiveDatatableCell.js

@@ -1,7 +1,13 @@
-import { LightningElement, api } from 'lwc';
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { api } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { keyCodes, isRTL } from 'lightning/utilsPrivate';
 
-export default class PrimitiveDatatableCell extends LightningElement {
+export default class PrimitiveDatatableCell extends LightningShadowBaseClass {
     @api rowKeyValue;
     @api colKeyValue;
 
@@ -99,7 +105,11 @@ export default class PrimitiveDatatableCell extends LightningElement {
         switch (direction) {
             case -1: {
                 const inputs = this.getActionableElements();
-                this._currentInputIndex = inputs.length ? inputs.length - 1 : 0;
+                if(incomingMode === 'NAVIGATION'){
+                    this._currentInputIndex = 0;
+                } else {
+                    this._currentInputIndex = inputs.length ? inputs.length - 1 : 0;
+                }
                 break;
             }
             case 1:
@@ -119,6 +129,7 @@ export default class PrimitiveDatatableCell extends LightningElement {
     }
 
     connectedCallback() {
+        super.connectedCallback();
         this.addEventListener('focus', this.handleFocus.bind(this));
         this.addEventListener('click', this.handleClick.bind(this));
         this.addEventListener('keydown', this.handleKeydown.bind(this));

package/src/lightning/primitiveDatatableCell/primitiveDatatableCell.js-meta.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
+    <capabilities>
+        <capability>lightning__ServerRenderableWithHydration</capability>
+    </capabilities>
+</LightningComponentBundle>

package/src/lightning/primitiveDatatableIeditInputWrapper/primitiveDatatableIeditInputWrapper.css

@@ -0,0 +1 @@
+@import './primitiveDatatableIeditInputWrapper.lbc.native.css';

package/src/lightning/primitiveDatatableIeditInputWrapper/primitiveDatatableIeditInputWrapper.js

@@ -1,8 +1,13 @@
-import { LightningElement, api } from 'lwc';
-
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { api } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 /**
  * @TODO: This component should be removed once the issue with label is solved in SLDS or IO
  */
-export default class LightningPrimitiveDatatableIeditInputWrapper extends LightningElement {
+export default class LightningPrimitiveDatatableIeditInputWrapper extends LightningShadowBaseClass {
     @api required;
 }

package/src/lightning/primitiveDatatableIeditInputWrapper/primitiveDatatableIeditInputWrapper.js-meta.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
+    <capabilities>
+        <capability>lightning__ServerRenderableWithHydration</capability>
+    </capabilities>
+</LightningComponentBundle>

package/src/lightning/primitiveDatatableIeditInputWrapper/primitiveDatatableIeditInputWrapper.lbc.native.css

@@ -0,0 +1,3 @@
+@import 'lightning/sldsUtilsGrid';
+@import 'lightning/sldsUtilsMargin';
+@import 'lightning/sldsFormElementUtils';

package/src/lightning/primitiveDatatableIeditPanel/popover.slds.css

@@ -0,0 +1,129 @@
+
+  :host([data-render-mode="shadow"]) .slds-popover {
+      position: relative;
+      border-radius: var(--slds-g-radius-border-2);
+      width: var(--slds-g-sizing-15);
+      min-height: calc(var(--slds-g-sizing-5) * 2);
+      z-index: var(--slds-c-popover-position-zindex, 6000);
+      background-color: var(--slds-c-popover-color-background,
+          var(--slds-g-color-surface-container-1));
+      display: inline-block;
+      box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 16%);
+      border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover_edit {
+    border-block-start: 0;
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover_edit .slds-popover__body {
+    padding: var(--slds-g-spacing-1);
+    padding-inline-start: 0;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover__meta {
+      margin-block-end: var(--slds-g-sizing-4);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover__body {
+      padding-block: var(--slds-g-spacing-2);
+      padding-inline: var(--slds-g-spacing-3);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover__body .slds-popover__header {
+      padding-block: 0 var(--slds-g-sizing-3);
+      padding-inline: 0;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover__body,:host([data-render-mode="shadow"]) 
+  .slds-popover__header,:host([data-render-mode="shadow"]) 
+  .slds-popover__footer {
+      position: relative;
+      padding-block: var(--slds-g-spacing-2);
+      padding-inline: var(--slds-g-spacing-3);
+      word-wrap: break-word;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover__header {
+      border-bottom: 0;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover__footer {
+      border-block-start: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
+      background-color: var(--slds-g-color-surface-container-2);
+      border-end-start-radius: inherit;
+      border-end-end-radius: inherit;
+      padding-block: var(--slds-g-spacing-2);
+      padding-inline: var(--slds-g-spacing-3);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover__footer_form {
+      text-align: center;
+      background: var(--slds-g-color-surface-container-2);
+      border-radius: 0 0 var(--slds-g-radius-border-2) var(--slds-g-radius-border-2);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover__body_small {
+      max-height: var(--slds-g-sizing-14);
+      overflow-y: auto;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover__close {
+      position: relative;
+      margin-block: var(--slds-g-spacing-1);
+      margin-inline: var(--slds-g-spacing-1);
+      z-index: calc(var(--slds-c-popover-position-zindex, 6000) + 1);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover_small {
+      max-width: var(--slds-g-sizing-14);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover_medium {
+      min-width: var(--slds-g-sizing-15);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover_large {
+      min-width: 25rem;
+      max-width: 512px;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover[class*="theme_"] {
+      border: 0;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover *:last-child {
+      margin-bottom: 0;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover_full-width {
+      width: 100%;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover_hide {
+      display: none;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover_dark {
+      background-color: var(--slds-g-color-accent-container-3);
+      color: var(--slds-g-color-on-accent-1);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover_dark .slds-badge {
+      background-color: var(--slds-g-color-surface-container-1);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover_dark .slds-popover__close {
+      color: var(--slds-g-color-on-accent-1);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover_dark .slds-icon-text-default {
+      fill: var(--slds-g-color-on-accent-1);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover_dark .slds-popover__footer {
+      border-top-color: var(--slds-g-color-border-accent-2);
+      background-color: var(--slds-g-color-on-accent-2);
+  }

package/src/lightning/primitiveDatatableIeditPanel/primitiveDatatableIeditPanel.css

@@ -0,0 +1 @@
+@import './primitiveDatatableIeditPanel.lbc.native.css';

package/src/lightning/primitiveDatatableIeditPanel/primitiveDatatableIeditPanel.html

@@ -1,12 +1,13 @@
 <template>
     <section
         if:true={visible}
+        lwc:ref="section"
         class="slds-popover slds-popover_edit"
         role="dialog"
         aria-label={dialogAriaLabel}
         tabindex="-1"
-        onblur={handleTypeElemBlur}
-        onfocus={handleTypeElemFocus}
+        onfocusout={handleTypeElemBlur}
+        onfocusin={handleTypeElemFocus}
         onkeydown={handleCellKeydown}
         style={computedStyle}>
 
@@ -21,13 +22,14 @@
                     <template for:each={_forceRerenderHackKey} for:item="reRenderItem">
                         <!-- Renders the appropriate input type in the inline edit panel -->
                         <lightning-primitive-datatable-iedit-type-factory
+                            custom-error-validation-message={customErrorValidationMessage}
                             required={required}
                             class="dt-type-edit-factory slds-col"
                             column-def={columnDef}
                             type-attributes={resolvedTypeAttributes}
                             edited-value={editedValue}
-                            onblur={handleTypeElemBlur}
-                            onfocus={handleTypeElemFocus}
+                            onfocusout={handleTypeElemBlur}
+                            onfocusin={handleTypeElemFocus}
                             key={inputKey}>
                         </lightning-primitive-datatable-iedit-type-factory>
                     </template>
@@ -35,13 +37,14 @@
                 <template if:true={isMassEditEnabled}>
                     <!-- Checkbox to select in order to mass edit multiple rows -->
                     <lightning-input
+                        lwc:ref="massSelectCheckbox"
                         data-mass-selection="true"
                         type="checkbox"
                         name="dt-iedit-mass-edit"
                         label={massEditCheckboxLabel}
                         onchange={handleMassCheckboxChange}
-                        onblur={handleTypeElemBlur}
-                        onfocus={handleTypeElemFocus}>
+                        onfocusout={handleTypeElemBlur}
+                        onfocusin={handleTypeElemFocus}>
                     </lightning-input>
                 </template>
                 <template if:false={isMassEditEnabled}>
@@ -55,16 +58,17 @@
                 <div class="slds-grid slds-grid_align-end">
                     <lightning-button
                         label={i18n.cancel}
-                        onblur={handleTypeElemBlur}
-                        onfocus={handleTypeElemFocus}
+                        onfocusout={handleTypeElemBlur}
+                        onfocusin={handleTypeElemFocus}
                         onclick={cancelEditing}>
                     </lightning-button>
                     <lightning-button
+                        lwc:ref="formLastElement"
                         label={i18n.apply}
                         style="margin-left: .25rem"
                         variant="brand"
-                        onblur={handleTypeElemBlur}
-                        onfocus={handleTypeElemFocus}
+                        onfocusout={handleTypeElemBlur}
+                        onfocusin={handleTypeElemFocus}
                         data-form-last-element="true"
                         onclick={processSubmission}>
                     </lightning-button>

package/src/lightning/primitiveDatatableIeditPanel/primitiveDatatableIeditPanel.js

@@ -1,10 +1,17 @@
-import { LightningElement, api } from 'lwc';
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { api } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import labelEdit from '@salesforce/label/LightningDatatable.edit';
 import labelUpdateSelectedItems from '@salesforce/label/LightningDatatable.updateSelectedItems';
 import labelCancel from '@salesforce/label/LightningDatatable.cancel';
 import labelApply from '@salesforce/label/LightningDatatable.apply';
-import { InteractingState } from 'lightning/inputUtils';
+import { getStatCount } from 'lightning/overlayManager';
 import { formatLabel } from 'lightning/utils';
+import { isCSR } from 'lightning/utilsPrivate';
 
 const i18n = {
     edit: labelEdit,
@@ -13,10 +20,14 @@ const i18n = {
     apply: labelApply,
 };
 
-export default class PrimitiveDatatableIeditPanel extends LightningElement {
+export default class PrimitiveDatatableIeditPanel extends LightningShadowBaseClass {
+    _focusTimeout = null;
     _forceRerenderHackKey = [''];
+    // utilized for scenario where datatable exists within a modal, and edit panel is used
+    // to launch a modal. enables edit panel to stay in DOM, and focus to be returned to it
+    _tableInModal = false;
     /************************* PUBLIC PROPERTIES *************************/
-
+    @api customErrorValidationMessage;
     @api visible;
     @api rowKeyValue;
     @api colKeyValue;
@@ -51,10 +62,7 @@ export default class PrimitiveDatatableIeditPanel extends LightningElement {
      */
     @api
     get isMassEditChecked() {
-        return (
-            this.isMassEditEnabled &&
-            this.template.querySelector('[data-mass-selection="true"]').checked
-        );
+        return this.isMassEditEnabled && this.refs.massSelectCheckbox.checked;
     }
 
     /**
@@ -82,7 +90,7 @@ export default class PrimitiveDatatableIeditPanel extends LightningElement {
     @api
     focus() {
         const elem = this.inputableElement;
-        this.interactingState.enter();
+        clearTimeout(this._focusTimeout);
 
         if (elem) {
             elem.focus();
@@ -95,7 +103,7 @@ export default class PrimitiveDatatableIeditPanel extends LightningElement {
      */
     @api
     getPositionedElement() {
-        return this.template.querySelector('section');
+        return this.refs.section;
     }
 
     /************************* PRIVATE GETTERS *************************/
@@ -115,7 +123,9 @@ export default class PrimitiveDatatableIeditPanel extends LightningElement {
     }
 
     get inputableElement() {
-        return this.template.querySelector('.dt-type-edit-factory');
+        return isCSR
+            ? this.template.querySelector('.dt-type-edit-factory')
+            : null;
     }
 
     get inputKey() {
@@ -150,7 +160,7 @@ export default class PrimitiveDatatableIeditPanel extends LightningElement {
      * If mass edit is not enabled, it will process completion of inline edit
      */
     handleFormStartFocus() {
-        this.interactingState.enter();
+        clearTimeout(this._focusTimeout);
 
         if (this.isMassEditEnabled) {
             // on mass edit the panel dont loses the focus with the keyboard.
@@ -168,7 +178,7 @@ export default class PrimitiveDatatableIeditPanel extends LightningElement {
      * If mass edit is not enabled, it will process the completion of inline edit
      */
     handleFormEndsFocus() {
-        this.interactingState.enter();
+        clearTimeout(this._focusTimeout);
 
         if (this.isMassEditEnabled) {
             // on mass edit the panel dont loses the focus with the keyboard.
@@ -181,24 +191,38 @@ export default class PrimitiveDatatableIeditPanel extends LightningElement {
     }
 
     /**
-     * This is executed when interactingState.leave is triggered
-     * which happens when the inline edit panel loses focus
+     * This is executed when the inline edit panel loses focus
      */
     handlePanelLostFocus() {
         if (this.visible) {
-            this.triggerEditFinished({
-                reason: 'lost-focus',
-            });
+            // In a scenario where the edit panel contains an action that opens a Modal above the datatable,
+            // the edit panel should not close or be removed from the DOM, if it has lost focus to the Modal.
+            // This enables the Modal to pass focus back to the correct place in the DOM after it closes.
+            // TODO: Find way to know if focus is in same modal as the edit panel to avoid
+            // issues if multiple modals are layered on top of each other (W-16369107)
+            const isModalOpen =
+                getStatCount('lwcModalCount') || getStatCount('auraModalCount');
+            if (
+                !this.template.activeElement &&
+                (!isModalOpen || this._tableInModal)
+            ) {
+                this.triggerEditFinished({
+                    reason: 'lost-focus',
+                });
+            }
         }
     }
 
     handleTypeElemFocus() {
-        this.interactingState.enter();
+        clearTimeout(this._focusTimeout);
     }
 
     handleTypeElemBlur() {
         if (this.visible && !this.template.activeElement) {
-            this.interactingState.leave();
+            // eslint-disable-next-line @lwc/lwc/no-async-operation
+            this._focusTimeout = setTimeout(() => {
+                this.handlePanelLostFocus();
+            }, 0);
         }
     }
 
@@ -269,17 +293,19 @@ export default class PrimitiveDatatableIeditPanel extends LightningElement {
     /************************* LIFECYCLE HOOKS *************************/
 
     connectedCallback() {
-        this.interactingState = new InteractingState({
-            duration: 10,
-            debounceInteraction: true,
-        });
-        this.interactingState.onleave(() => this.handlePanelLostFocus());
+        super.connectedCallback();
+        this._tableInModal =
+            isCSR && !!this.template.host.closest('lightning-modal, .uiModal');
+    }
+
+    disconnectedCallback() {
+        this._tableInModal = false;
     }
 
     /************************* HELPER FUNCTIONS *************************/
 
     focusLastElement() {
-        this.template.querySelector('[data-form-last-element="true"]').focus();
+        this.refs.formLastElement.focus();
     }
 
     processSubmission() {

package/src/lightning/primitiveDatatableIeditPanel/primitiveDatatableIeditPanel.js-meta.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
+    <capabilities>
+        <capability>lightning__ServerRenderableWithHydration</capability>
+    </capabilities>
+</LightningComponentBundle>

package/src/lightning/primitiveDatatableIeditPanel/primitiveDatatableIeditPanel.lbc.native.css

@@ -0,0 +1,4 @@
+@import 'lightning/sldsUtilsPadding';
+@import 'lightning/sldsUtilsGrid';
+@import 'lightning/sldsUtilsVisibility';
+@import './popover.slds.css';

package/src/lightning/primitiveDatatableIeditTypeFactory/primitiveDatatableIeditTypeFactory.js

@@ -1,5 +1,11 @@
-import { LightningElement, api } from 'lwc';
-import { assert } from 'lightning/utilsPrivate';
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { api } from 'lwc';
+import { assert, isCSR } from 'lightning/utilsPrivate';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 
 import TextTpl from './text.html';
 import PhoneTpl from './phone.html';
@@ -27,12 +33,11 @@ const TYPE_TEMPLATE_MAPPINGS = {
 };
 const INVALID_TYPE_MESSAGE = 'column type not supported for inline edit';
 
-export default class LightningPrimitiveDatatableIeditTypeFactory extends LightningElement {
+export default class LightningPrimitiveDatatableIeditTypeFactory extends LightningShadowBaseClass {
     // Private Variables
     columnLabel;
 
     /***************************** PUBLIC PROPERTIES *****************************/
-
     @api editedValue;
     @api required;
     @api typeAttributes;
@@ -54,6 +59,26 @@ export default class LightningPrimitiveDatatableIeditTypeFactory extends Lightni
         this.columnLabel = value.label;
     }
 
+    @api
+    get customErrorValidationMessage() {
+        return this._customErrorValidationMessage;
+    }
+
+    set customErrorValidationMessage(value) {
+        this._customErrorValidationMessage = value;
+        if (value && !isCSR) {
+            this.setAndReportInputValidity();
+        }
+    }
+
+    setAndReportInputValidity() {
+        if (this.concreteComponent) {
+            this.concreteComponent.setCustomValidity(
+                this.customErrorValidationMessage
+            );
+            this.concreteComponent.reportValidity();
+        }
+    }
     /**
      * Checks if type is an custom type that is editable and
      * has an editTemplate that contains [data-inputable="true"]
@@ -67,14 +92,14 @@ export default class LightningPrimitiveDatatableIeditTypeFactory extends Lightni
     @api
     get value() {
         if (this.columnDef.type === 'boolean') {
-            return this.concreteComponent.checked;
+            return this.concreteComponent?.checked;
         }
-        return this.concreteComponent.value;
+        return this.concreteComponent?.value;
     }
 
     @api
     get validity() {
-        return this.concreteComponent.validity;
+        return this.concreteComponent?.validity;
     }
 
     /***************************** PUBLIC METHODS *****************************/
@@ -104,7 +129,9 @@ export default class LightningPrimitiveDatatableIeditTypeFactory extends Lightni
     }
 
     get concreteComponent() {
-        return this.template.querySelector('[data-inputable="true"]');
+        return isCSR
+            ? this.template.querySelector('[data-inputable="true"]')
+            : null;
     }
 
     /**
@@ -192,6 +219,9 @@ export default class LightningPrimitiveDatatableIeditTypeFactory extends Lightni
                 'change',
                 this.handleComponentChange.bind(this)
             );
+            if (this.customErrorValidationMessage) {
+                this.setAndReportInputValidity();
+            }
         }
     }
 }

package/src/lightning/primitiveDatatableIeditTypeFactory/primitiveDatatableIeditTypeFactory.js-meta.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
+    <capabilities>
+        <capability>lightning__ServerRenderableWithHydration</capability>
+    </capabilities>
+</LightningComponentBundle>

package/src/lightning/primitiveDatatableLoadingIndicator/primitiveDatatableLoadingIndicator.html

@@ -1,4 +1,4 @@
 <template>
-    <lightning-spinner size="small" variant="brand" alternative-text={i18n.loading} style="height: 40px;">
+    <lightning-spinner size="small" variant="brand" alternative-text={i18n.loading}>
     </lightning-spinner>
 </template>

package/src/lightning/primitiveDatatableLoadingIndicator/primitiveDatatableLoadingIndicator.js

@@ -1,11 +1,16 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 import labelLoading from '@salesforce/label/LightningDatatable.loading';
-import { LightningElement } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 
 const i18n = {
     loading: labelLoading,
 };
 
-export default class LightningPrimitiveDatatableLoadingIndicator extends LightningElement {
+export default class LightningPrimitiveDatatableLoadingIndicator extends LightningShadowBaseClass {
     get i18n() {
         return i18n;
     }

package/src/lightning/primitiveDatatableLoadingIndicator/primitiveDatatableLoadingIndicator.js-meta.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
+    <capabilities>
+        <capability>lightning__ServerRenderableWithHydration</capability>
+    </capabilities>
+</LightningComponentBundle>