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

package/src/lightning/primitiveCellFactory/cellWithStandardLayout.css

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

package/src/lightning/primitiveCellFactory/cellWithStandardLayout.html

@@ -1,22 +1,24 @@
 <template>
      <span class={computedWrapperClass}>
+
+        <!-- tree toggle -->
+        <template if:true={hasTreeData}>
+            <lightning-primitive-treegrid-cell-toggle row-key-value={rowKeyValue}
+                                                        col-key-value={colKeyValue}
+                                                        display-value={displayValue}
+                                                        url-label={urlLabel}
+                                                        value={value}
+                                                        has-children={typeAttribute21}
+                                                        is-expanded={typeAttribute22}
+                                                        tabindex={internalTabIndex}
+                                                        data-navigation="enable">
+            </lightning-primitive-treegrid-cell-toggle>
+        </template>
+
         <div class={computedCellDivClass} style={computedCssStyles}>
 
             <!-- *************** PREFIX ICONS DO NOT ADD ANY TYPE BEFORE THIS *************** -->
 
-            <!-- tree toggle -->
-            <template if:true={hasTreeData}>
-                <lightning-primitive-treegrid-cell-toggle row-key-value={rowKeyValue}
-                                                          col-key-value={colKeyValue}
-                                                          display-value={displayValue}
-                                                          value={value}
-                                                          has-children={typeAttribute21}
-                                                          is-expanded={typeAttribute22}
-                                                          tabindex={internalTabIndex}
-                                                          data-navigation="enable">
-                </lightning-primitive-treegrid-cell-toggle>
-            </template>
-
             <!-- left icon -->
             <template if:true={hasLeftIcon}>
                 <lightning-icon icon-name={iconName} size="x-small" class="slds-m-right_x-small" alternative-text={iconAlternativeText}></lightning-icon>
@@ -27,7 +29,7 @@
 
             <!-- action -->
             <template if:true={isAction}>
-                <lightning-primitive-cell-actions class={computedMarginClassWhenLeftIconExists} data-navigation="enable"
+                <lightning-primitive-cell-actions data-navigation="enable"
                                                   data-action-triggers="enter,space"
                                                   row-key-value={rowKeyValue}
                                                   col-key-value={colKeyValue}
@@ -40,7 +42,7 @@
 
             <!-- button -->
             <template if:true={isButton}>
-                <lightning-primitive-cell-button class={computedMarginClassWhenLeftIconExists} data-navigation="enable"
+                <lightning-primitive-cell-button data-navigation="enable"
                                                  data-action-triggers="enter,space"
                                                  row-key-value={rowKeyValue}
                                                  col-key-value={colKeyValue}
@@ -59,7 +61,7 @@
 
             <!-- button-icon-->
             <template if:true={isButtonIcon}>
-                <lightning-primitive-cell-button class={computedMarginClassWhenLeftIconExists} data-navigation="enable"
+                <lightning-primitive-cell-button data-navigation="enable"
                                                  data-action-triggers="enter,space"
                                                  type="button-icon"
                                                  row-key-value={rowKeyValue}
@@ -90,7 +92,7 @@
 
             <!-- currency -->
             <template if:true={isCurrency}>
-                <lightning-formatted-number class={computedMarginClassWhenLeftIconExists} value={value} format-style="currency"
+                <lightning-formatted-number value={value} format-style="currency"
                                             currency-code={typeAttribute0}
                                             currency-display-as={typeAttribute1}
                                             minimum-integer-digits={typeAttribute2}
@@ -104,7 +106,7 @@
             <!-- custom type -->
             <template if:true={isCustomType}>
                 <lightning-primitive-custom-cell
-                      class={computedMarginClassWhenLeftIconExists}
+                      lwc:ref="customCell"
                       types={types}
                       keyboard-mode={keyboardMode}
                       column-type={columnType}
@@ -132,7 +134,7 @@
 
             <!-- datetime -->
             <template if:true={isDateTime}>
-                <lightning-formatted-date-time class={computedMarginClassWhenLeftIconExists}
+                <lightning-formatted-date-time 
                                                value={dateValue}
                                                day={typeAttribute0}
                                                era={typeAttribute1}
@@ -150,7 +152,7 @@
 
             <!-- datetime -->
             <template if:true={isDateLocal}>
-                <lightning-formatted-date-time class={computedMarginClassWhenLeftIconExists}
+                <lightning-formatted-date-time 
                                                value={value}
                                                day={computedDateLocalDay}
                                                month={computedDateLocalMonth}
@@ -161,7 +163,8 @@
 
             <!-- email -->
             <template if:true={isEmail}>
-                 <lightning-formatted-email class={computedMarginClassWhenLeftIconExists}
+                 <lightning-formatted-email 
+                                            data-is-datatable
                                             data-navigation="enable"
                                             data-action-triggers="enter"
                                             value={value}
@@ -171,15 +174,13 @@
 
             <!-- location -->
             <template if:true={isLocation}>
-                <lightning-formatted-location class={computedMarginClassWhenLeftIconExists}
-                                              latitude={value.latitude}
-                                              longitude={value.longitude}>
+                <lightning-formatted-location latitude={value.latitude} longitude={value.longitude}>
                 </lightning-formatted-location>
             </template>
 
             <!-- number -->
             <template if:true={isNumber}>
-                <lightning-formatted-number class={computedMarginClassWhenLeftIconExists}
+                <lightning-formatted-number 
                                             value={value}
                                             minimum-integer-digits={typeAttribute0}
                                             minimum-fraction-digits={typeAttribute1}
@@ -191,7 +192,7 @@
 
             <!-- percent -->
             <template if:true={isPercent}>
-                    <lightning-formatted-number class={computedMarginClassWhenLeftIconExists}
+                    <lightning-formatted-number 
                                                 value={value} format-style="percent"
                                                 minimum-integer-digits={typeAttribute0}
                                                 minimum-fraction-digits={typeAttribute1}
@@ -203,7 +204,7 @@
 
             <!-- phone -->
             <template if:true={isPhone}>
-                <lightning-formatted-phone class={computedMarginClassWhenLeftIconExists}
+                <lightning-formatted-phone 
                                            data-navigation="enable"
                                            data-action-triggers="enter"
                                            value={value}
@@ -213,7 +214,7 @@
 
             <!-- Reference (Lookup) -->
             <template if:true={isReference}>
-                <lightning-formatted-lookup class={computedMarginClassWhenLeftIconExists}
+                <lightning-formatted-lookup 
                                             data-navigation="enable"
                                             data-action-triggers="enter"
                                             record-id={value}
@@ -243,15 +244,13 @@
 
             <!-- text -->
             <template if:true={isText}>
-                <lightning-base-formatted-text class={computedMarginClassWhenLeftIconExists}
-                                               value={value}
-                                               linkify={typeAttribute0}>
+                <lightning-base-formatted-text value={value} linkify={typeAttribute0}>
                 </lightning-base-formatted-text>
             </template>
 
             <!-- url -->
             <template if:true={isUrl}>
-                <lightning-formatted-url class={computedMarginClassWhenLeftIconExists}
+                <lightning-formatted-url 
                                          data-navigation="enable"
                                          data-action-triggers="enter"
                                          value={value}
@@ -272,15 +271,17 @@
         </div>
         <template if:true={isEditable}>
             <button tabindex={internalTabIndex}
-                    class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small"
+                    class="slds-button slds-button_icon slds-button_icon-small slds-cell-edit__button slds-m-left_x-small"
                     data-navigation="enable"
                     data-action-triggers="enter,space"
                     data-action-edit="true"
-                    onclick={handleEditButtonClick}>
+                    onclick={handleEditButtonClick}
+                    part="button button-icon">
                 <lightning-primitive-icon
                     icon-name="utility:edit"
                     size="xx-small"
-                    svg-class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_small slds-button__icon_edit">
+                    svg-class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_edit"
+                    exportparts="icon">
                 </lightning-primitive-icon>
                 <span class="slds-assistive-text">
                     {editIconAssistiveText}

package/src/lightning/primitiveCellFactory/cellWithStandardLayout.lbc.native.css

@@ -0,0 +1,9 @@
+@import 'lightning/sldsUtilsMargin';
+@import 'lightning/sldsUtilsGrid';
+@import 'lightning/sldsUtilsAlignment';
+@import 'lightning/sldsUtilsLineClamp';
+@import 'lightning/sldsUtilsHyphenation';
+@import 'lightning/sldsUtilsTruncation';
+@import 'lightning/sldsUtilsVisibility';
+@import './button-icon.slds.css';
+@import './primitive-cell-factory.slds.css';

package/src/lightning/primitiveCellFactory/primitive-cell-factory.slds.css

@@ -0,0 +1,59 @@
+
+:host([data-render-mode="shadow"]) .slds-row-number::after {
+  content: counter(row-number);
+}
+
+:host([data-render-mode="shadow"]) .slds-text-body_small {
+  font-size: var(--slds-g-font-scale-neg-1);
+}
+
+:host([data-render-mode="shadow"]) .slds-text-color_weak {
+  color: var(--slds-g-color-on-surface-1);
+}
+
+:host([data-render-mode="shadow"]) .slds-button_icon-small {
+  width: var(--slds-g-sizing-4);
+  height: var(--slds-g-sizing-4);
+}
+
+:host([data-render-mode="shadow"]) .slds-cell-edit__button {
+  width: var(--slds-g-sizing-6);
+  height: var(--slds-g-sizing-6);
+  flex-shrink: 0;
+}
+
+:host([data-render-mode="shadow"]) .slds-cell-edit__button:focus .slds-button__icon_edit {
+  opacity: 1;
+}
+
+:host([data-render-mode="shadow"]) .slds-cell-edit__button:disabled {
+  color: var(--slds-g-color-disabled-1);
+}
+
+:host([data-render-mode="shadow"]) .slds-button__icon_hint {
+  fill: var(--slds-s-button-color, var(--slds-g-color-on-surface-1));
+}
+
+:host([data-render-mode="shadow"]) .slds-button__icon_lock {
+  opacity: 1;
+}
+
+:host([data-render-mode="shadow"]) .slds-button__icon_edit {
+  opacity: 1;
+  fill: var(--slds-g-color-accent-2);
+}
+
+:host([data-render-mode="shadow"]) .slds-button__icon_edit:hover,:host([data-render-mode="shadow"]) 
+.slds-button__icon_edit:focus {
+  fill: var(--slds-g-color-on-surface-3);
+}
+
+:host([data-render-mode="shadow"]) [part='button button-icon'] {
+  border: none;
+  opacity: 0;
+}
+
+:host([data-render-mode="shadow"]:hover) [part='button button-icon'] {
+  opacity: 1;
+}
+

package/src/lightning/primitiveCellFactory/primitiveCellFactory.js

@@ -1,6 +1,12 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { features } from 'lightning/features';
 import PrimitiveDatatableCell from 'lightning/primitiveDatatableCell';
 import { api } from 'lwc';
-import { classSetToString } from 'lightning/utilsPrivate';
+import { classSetToString, isRTL } from 'lightning/utilsPrivate';
 import { toDate } from 'lightning/internationalizationLibrary';
 import cellWithStandardLayout from './cellWithStandardLayout.html';
 import bareCustomCell from './bareCustomCell.html';
@@ -28,6 +34,7 @@ function isSpreadComputedAlignment(computedAlignment) {
 }
 
 export default class PrivateCellFactory extends PrimitiveDatatableCell {
+    static validationOptOut = ['class'];
     @api types;
     @api alignment;
     @api value;
@@ -36,6 +43,7 @@ export default class PrivateCellFactory extends PrimitiveDatatableCell {
     @api iconLabel;
     @api iconPosition;
     @api iconAlternativeText;
+    @api isCustomBareLayout;
     @api editable;
     @api displayReadOnlyIcon;
     @api hasError;
@@ -58,9 +66,23 @@ export default class PrivateCellFactory extends PrimitiveDatatableCell {
 
     @api wrapTextMaxLines;
 
+    _isCustomType = false;
     _wrapText = false;
     _rowHasError = false;
 
+    @api
+    get isCustomType() {
+        if (features.ENABLE_TREE_GRID_CUSTOM_TYPES) {
+            return this._isCustomType;
+        }
+        const { types } = this;
+        return types ? types.isCustomType(this.columnType) : false;
+    }
+
+    set isCustomType(value) {
+        this._isCustomType = value;
+    }
+
     @api
     get wrapText() {
         return this._wrapText;
@@ -93,9 +115,7 @@ export default class PrivateCellFactory extends PrimitiveDatatableCell {
             this.template.querySelectorAll('[data-navigation="enable"]')
         );
 
-        const customType = this.template.querySelector(
-            'lightning-primitive-custom-cell'
-        );
+        const customType = this.refs.customCell;
 
         if (customType) {
             const wrapperActionableElements =
@@ -198,11 +218,6 @@ export default class PrivateCellFactory extends PrimitiveDatatableCell {
         return this.columnType === 'tree';
     }
 
-    get isCustomType() {
-        const { types } = this;
-        return types ? types.isCustomType(this.columnType) : false;
-    }
-
     /**
      * Returns true for all standard cells that are indicated as being editable
      * or for any custom cell that is not only indicated as being editable
@@ -217,6 +232,12 @@ export default class PrivateCellFactory extends PrimitiveDatatableCell {
     }
 
     render() {
+        if (features.ENABLE_TREE_GRID_CUSTOM_TYPES) {
+            if (this.types && this.isCustomType && this.isCustomBareLayout) {
+                return bareCustomCell;
+            }
+            return cellWithStandardLayout;
+        }
         const { columnType, types } = this;
         if (
             types &&
@@ -279,17 +300,17 @@ export default class PrivateCellFactory extends PrimitiveDatatableCell {
         const { columnType, _wrapText } = this;
         const isActionType =
             'action' === columnType || 'action' === this.columnSubType;
-        return classSetToString({
-            'slds-truncate':
-                columnType !== 'button-icon' && !isActionType && !_wrapText,
-            'slds-hyphenate': _wrapText,
-            'slds-line-clamp': _wrapText && this.wrapTextMaxLines,
-            'ltr-content-in-rtl': document.dir === 'rtl' && this.isLtrType(),
-        });
-    }
-
-    get computedMarginClassWhenLeftIconExists() {
-        return this.hasLeftIcon ? 'slds-m-left_x-small' : '';
+        // using fallback placeholder class for case where class is an empty string
+        // known LWC issue: https://github.com/salesforce/lwc/issues/4661
+        return (
+            classSetToString({
+                'slds-truncate':
+                    columnType !== 'button-icon' && !isActionType && !_wrapText,
+                'slds-hyphenate': _wrapText,
+                'slds-line-clamp': _wrapText && this.wrapTextMaxLines,
+                'ltr-content-in-rtl': isRTL() && this.isLtrType(),
+            }) || 'private-ssr-placeholder-class'
+        );
     }
 
     get computedWrapperClass() {
@@ -321,6 +342,10 @@ export default class PrivateCellFactory extends PrimitiveDatatableCell {
      *  When any new type is added, getter should be added here if there is need.
      */
 
+    get urlLabel() {
+        return this.isUrl && this.typeAttribute0;
+    }
+
     get urlTarget() {
         return this.typeAttribute1 || '_self';
     }
@@ -357,10 +382,13 @@ export default class PrivateCellFactory extends PrimitiveDatatableCell {
     }
 
     get computedCssStyles() {
-        if (this._wrapText && this.wrapTextMaxLines) {
-            return `${'--lwc-lineClamp'}: ${this.wrapTextMaxLines}`;
+        const { _wrapText, wrapTextMaxLines } = this;
+        if (_wrapText && wrapTextMaxLines) {
+            return `--lwc-lineClamp: ${wrapTextMaxLines}`;
+        } else if (_wrapText) {
+            return 'overflow-wrap: anywhere';
         }
-        return null;
+        return '';
     }
 
     get booleanCellAssistiveText() {

package/src/lightning/primitiveCellFactory/primitiveCellFactory.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/primitiveColorpickerButton/color-picker-button.slds.css

@@ -1,9 +1,6 @@
 
-/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
-Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /* :host::part(color-picker-button), */
-
   :host([data-render-mode="shadow"]) [part='color-picker-button'] {
     --slds-c-icon-color-foreground: var(--slds-g-color-on-surface-1);
     --slds-c-icon-sizing: 0.875rem;
@@ -25,24 +22,20 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     border-radius: var(--slds-g-radius-border-2);
     cursor: pointer;
   }
-
   :host([data-render-mode="shadow"]) [part='color-picker-button']:hover,:host([data-render-mode="shadow"]) 
   [part='color-picker-button']:focus {
-    --slds-c-icon-color-foreground: var(--slds-g-color-accent-4);
+    --slds-c-icon-color-foreground: var(--slds-s-button-color-hover, var(--slds-g-color-accent-3))
   }
-
   :host([data-render-mode="shadow"]) [part='color-picker-button']:focus {
     box-shadow: 0 0 3px var(--slds-s-button-shadow-focus);
     outline: 0;
   }
-
   :host([data-render-mode="shadow"]) [part='color-picker-button']:active {
     border-color: var(--slds-g-color-accent-3);
     --slds-c-icon-color-foreground: var(--slds-g-color-accent-4);
 
     outline: 0;
   }
-
   :host([data-render-mode="shadow"]) [part='color-picker-button'] .slds-swatch {
     display: inline-block;
     vertical-align: middle;
@@ -51,7 +44,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     border-radius: var(--slds-g-radius-border-1);
     box-shadow: inset 0 0 1px rgb(0 0 0 / 40%);
   }
-
   :host([data-render-mode="shadow"]) [part='color-picker-button'] .slds-assistive-text {
     position: absolute !important;
     margin: -1px !important;
@@ -64,21 +56,17 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     text-transform: none !important;
     white-space: nowrap !important;
   }
-
   :host([data-render-mode="shadow"][disabled]) [part='color-picker-button'] {
     --slds-c-icon-color-foreground: var(--slds-g-color-disabled-1);
 
     pointer-events: none;
     border-color: transparent;
   }
-
   /* TO DO: .panel and .panel-open should be renamed
   when working on color-input ticket */
-
   :host([data-render-mode="shadow"]) [part='color-picker-button'] + .panel {
     display: none;
   }
-
   :host([data-render-mode="shadow"]) [part='color-picker-button'] + .panel-open {
     display: block;
     width: 250px;

package/src/lightning/primitiveColorpickerButton/primitiveColorpickerButton.js

@@ -1,3 +1,8 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 import labelA11yTriggerText from '@salesforce/label/LightningColorPicker.a11yTriggerText';
 import labelA11yDefaultText from '@salesforce/label/LightningColorPicker.a11yDefaultText';
 import { api, track } from 'lwc';

package/src/lightning/primitiveColorpickerButton/primitiveColorpickerButton.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>