lightning-base-components 1.22.1-alpha → 1.22.3-alpha

package/src/lightning/datatable/templates/table/table.html

@@ -5,8 +5,8 @@
         <span data-keyboard-mode="navigation" class={computedAriaLiveClassForNavMode}>{i18n.ariaLiveNavigationMode}</span>
         <span data-keyboard-mode="action" class={computedAriaLiveClassForActionMode}>{i18n.ariaLiveActionMode}</span>
     </span>
-    <div lwc:dom="manual" class="dt-width-observer" style="width: 100%; height: 0px;"></div>
-    <div class="dt-outer-container" style="height: 100%; position: relative;">
+    <div lwc:ref="widthObserver" lwc:dom="manual" class="dt-width-observer" style="width: 100%; height: 0px;"></div>
+    <div lwc:ref="outerContainer" class="dt-outer-container" style="height: 100%; position: relative;">
         <!-- Inline Edit Panel -->
         <lightning-primitive-datatable-iedit-panel
             data-iedit-panel="true"
@@ -22,10 +22,11 @@
             onmasscheckboxchange={handleMassCheckboxChange}>
         </lightning-primitive-datatable-iedit-panel>
         <!-- Table Container -->
-        <div class={computedTableContainerClass} onscroll={handleHorizontalScroll} style={computedScrollerXStyle}>
-            <div class="slds-scrollable_y" onscroll={handleVerticalScroll} style={computedScrollerYStyle}>
+        <div lwc:ref="scrollerX" class={computedTableContainerClass} onscroll={handleHorizontalScroll} style={computedScrollerXStyle}>
+            <div lwc:ref="scrollerY" class="slds-scrollable_y" onscroll={handleVerticalScroll} style={computedScrollerYStyle}>
                 <!-- Table -->
-                <table class={computedTableClass}
+                <table lwc:ref="tableElement"
+                    class={computedTableClass}
                     role={computedTableRole}
                     style={computedTableStyle}
                     onkeydown={handleTableKeydown}
@@ -66,6 +67,7 @@
                                                 style={def.style}
                                                 def={def}
                                                 dt-context-id={_datatableId}
+                                                header-height={_headerHeight}
                                                 key={def.colKeyValue}
                                                 row-key-value="HEADER"
                                                 col-key-value={def.colKeyValue}
@@ -79,7 +81,8 @@
                                                 show-checkbox={showSelectAllCheckbox}
                                                 hide-header={hideTableHeader}
                                                 onprivatecolumnheaderid={handleCheckboxHeaderId}
-                                                wrap-table-header={wrapTableHeader}>
+                                                wrap-table-header={wrapTableHeader}
+                                                wrap-text-max-lines={state.wrapTextMaxLines}>
                                             </lightning-primitive-header-factory>
                                         </template>
                                         <template if:false={def.fixedWidth}>
@@ -93,6 +96,7 @@
                                                 col-key-value={def.colKeyValue}
                                                 col-index={colIndex}
                                                 has-focus={def.hasFocus}
+                                                header-height={_headerHeight}
                                                 actions={def.actions}
                                                 sortable={def.sortable}
                                                 sorted={def.sorted}
@@ -102,7 +106,8 @@
                                                 resizestep={widthsData.resizeStep}
                                                 hide-header={hideTableHeader}
                                                 onprivatecolumnheaderid={handleCheckboxHeaderId}
-                                                wrap-table-header={wrapTableHeader}>
+                                                wrap-table-header={wrapTableHeader}
+                                                wrap-text-max-lines={state.wrapTextMaxLines}>
                                             </lightning-primitive-header-factory>
                                         </template>
                                     </th>
@@ -259,10 +264,23 @@
                                                                     <!-- boolean -->
                                                                     <template if:true={cell.isBoolean}>
                                                                         <template if:true={cell.isChecked}>
-                                                                            <lightning-primitive-icon
-                                                                                size="x-small"
-                                                                                icon-name="utility:check">
-                                                                            </lightning-primitive-icon>
+                                                                            <!-- Caution: Modify generate-inlined-icons script before changing comments -->
+                                                                            <!-- START utility:check -->
+                                                                            <template lwc:if={cell.isRTL}>
+                                                                                <svg class="slds-icon slds-icon-text-default slds-icon_x-small" focusable="false" data-key="check" aria-hidden="true" viewBox="0 0 520 520" part="icon">
+                                                                                    <g>
+                                                                             <path d="M191 425L26 259c-6-6-6-16 0-22l22-22c6-6 16-6 22 0l124 125a10 10 0 0015 0L452 95c6-6 16-6 22 0l22 22c6 6 6 16 0 22L213 425c-6 7-16 7-22 0z"></path>
+                                                                            </g>
+                                                                                </svg>
+                                                                            </template>
+                                                                            <template lwc:else>
+                                                                                <svg class="slds-icon slds-icon-text-default slds-icon_x-small" focusable="false" data-key="check" aria-hidden="true" viewBox="0 0 520 520" part="icon">
+                                                                                    <g>
+                                                                             <path d="M191 425L26 259c-6-6-6-16 0-22l22-22c6-6 16-6 22 0l124 125a10 10 0 0015 0L452 95c6-6 16-6 22 0l22 22c6 6 6 16 0 22L213 425c-6 7-16 7-22 0z"></path>
+                                                                            </g>
+                                                                                </svg>
+                                                                            </template>
+                                                                            <!-- END utility:check -->
                                                                         </template>
                                                                         <span class="slds-assistive-text">{cell.booleanCellAssistiveText}</span>
                                                                     </template>
@@ -333,11 +351,24 @@
                                                                                 href={cell.emailLink}
                                                                                 tabindex={cell.internalTabIndex}>
                                                                                 <template if:false={cell.emailIconHidden}>
-                                                                                    <lightning-primitive-icon
-                                                                                        icon-name="utility:email"
-                                                                                        size="x-small">
-                                                                                    </lightning-primitive-icon>
-                                                                                    <span class="slds-assistive-text">{cell.emailIconAssistiveText}</span>
+                                                                                    <!-- Caution: Modify generate-inlined-icons script before changing comments -->
+                                                                                    <!-- START utility:email -->
+                                                                                    <template lwc:if={cell.isRTL}>
+                                                                                        <svg class="slds-icon slds-icon-text-default slds-icon_x-small" focusable="false" data-key="email" aria-hidden="true" viewBox="0 0 520 520" part="icon">
+                                                                                            <g>
+                                                                                     <path d="M249 301c6 6 15 6 21 0L496 91c4-8 3-21-13-21L36 71c-12 0-22 11-13 21zm251-128c0-10-12-16-20-9L303 327c-12 11-27 17-43 17s-31-6-43-16L41 164c-8-7-20-2-20 9-1-3-1 227-1 227a40 40 0 0040 40h400a40 40 0 0040-40z"></path>
+                                                                                    </g>
+                                                                                        </svg>
+                                                                                    </template>
+                                                                                    <template lwc:else>
+                                                                                        <svg class="slds-icon slds-icon-text-default slds-icon_x-small" focusable="false" data-key="email" aria-hidden="true" viewBox="0 0 520 520" part="icon">
+                                                                                            <g>
+                                                                                     <path d="M249 301c6 6 15 6 21 0L496 91c4-8 3-21-13-21L36 71c-12 0-22 11-13 21zm251-128c0-10-12-16-20-9L303 327c-12 11-27 17-43 17s-31-6-43-16L41 164c-8-7-20-2-20 9-1-3-1 227-1 227a40 40 0 0040 40h400a40 40 0 0040-40z"></path>
+                                                                                    </g>
+                                                                                        </svg>
+                                                                                    </template>
+                                                                                    <!-- END utility:email -->
+                                                                                <span class="slds-assistive-text">{cell.emailIconAssistiveText}</span>
                                                                                 </template> {cell.emailLabel}
                                                                             </a>
                                                                         </template>
@@ -492,17 +523,30 @@
                                                                 </div>
                                                                 <template if:true={cell.isEditable}>
                                                                     <button class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small"
+                                                                            aria-labelledby={cell.editLabelId}
                                                                             data-action-edit="true"
                                                                             data-action-triggers="enter,space"
                                                                             data-navigation="enable"
                                                                             tabindex={cell.internalTabIndex}
                                                                             onclick={handleInlinedEditButtonClick}>
-                                                                        <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">
-                                                                        </lightning-primitive-icon>
-                                                                        <span class="slds-assistive-text">
+                                                                        <!-- Caution: Modify generate-inlined-icons script before changing comments -->
+                                                                        <!-- START utility:edit -->
+                                                                        <template lwc:if={cell.isRTL}>
+                                                                            <svg class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_edit slds-icon slds-icon-text-default slds-icon_xx-small" focusable="false" data-key="edit" aria-hidden="true" viewBox="0 0 520 520" part="icon">
+                                                                                <g>
+                                                                         <path d="M95 334l89 89c4 4 10 4 14 0l222-223c4-4 4-10 0-14l-88-88a10 10 0 00-14 0L95 321c-4 4-4 10 0 13zM361 57a10 10 0 000 14l88 88c4 4 10 4 14 0l25-25a38 38 0 000-55l-47-47a40 40 0 00-57 0zM21 482c-2 10 7 19 17 17l109-26c4-1 7-3 9-5l2-2c2-2 3-9-1-13l-90-90c-4-4-11-3-13-1l-2 2a20 20 0 00-5 9z"></path>
+                                                                        </g>
+                                                                            </svg>
+                                                                        </template>
+                                                                        <template lwc:else>
+                                                                            <svg class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_edit slds-icon slds-icon-text-default slds-icon_xx-small" focusable="false" data-key="edit" aria-hidden="true" viewBox="0 0 520 520" part="icon">
+                                                                                <g>
+                                                                         <path d="M95 334l89 89c4 4 10 4 14 0l222-223c4-4 4-10 0-14l-88-88a10 10 0 00-14 0L95 321c-4 4-4 10 0 13zM361 57a10 10 0 000 14l88 88c4 4 10 4 14 0l25-25a38 38 0 000-55l-47-47a40 40 0 00-57 0zM21 482c-2 10 7 19 17 17l109-26c4-1 7-3 9-5l2-2c2-2 3-9-1-13l-90-90c-4-4-11-3-13-1l-2 2a20 20 0 00-5 9z"></path>
+                                                                        </g>
+                                                                            </svg>
+                                                                        </template>
+                                                                        <!-- END utility:edit -->
+                                                                        <span hidden id={cell.editLabelId}>
                                                                             {cell.editIconAssistiveText}
                                                                         </span>
                                                                     </button>
@@ -513,11 +557,23 @@
                                                                 <template if:true={cell.shouldDisplayReadOnlyIcon}>
                                                                     <!-- TODO: Update the svg-classes once the SLDS team updates their read only icon design to not use classes that have the word 'button'
                                                                     in them in cases when the cell is read only and hence no button is actually rendered -->
-                                                                    <lightning-primitive-icon
-                                                                        icon-name="utility:lock"
-                                                                        size="xx-small"
-                                                                        svg-class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_small">
-                                                                    </lightning-primitive-icon>
+                                                                    <!-- Caution: Modify generate-inlined-icons script before changing comments -->
+                                                                    <!-- START utility:lock -->
+                                                                    <template lwc:if={cell.isRTL}>
+                                                                        <svg class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_edit slds-icon slds-icon-text-default slds-icon_xx-small" focusable="false" data-key="lock" aria-hidden="true" viewBox="0 0 520 520" part="icon">
+                                                                            <g>
+                                                                     <path d="M110 190h40c6 0 10-3 10-9v-1A100 100 0 01267 80c53 4 93 50 93 104v-3c0 6 4 9 10 9h40c6 0 10-3 10-9v-1A160 160 0 00252 20c-85 4-150 76-152 161 1 5 5 9 10 9zm-10-9v4zm360 89a40 40 0 00-40-40H100a40 40 0 00-40 40v190a40 40 0 0040 40h320a40 40 0 0040-40zM306 427c2 6-3 13-10 13h-73c-7 0-11-6-10-13l18-60a48 48 0 01-21-48 50 50 0 0139-38c32-6 60 17 60 47 0 16-8 31-21 39z"></path>
+                                                                    </g>
+                                                                        </svg>
+                                                                    </template>
+                                                                    <template lwc:else>
+                                                                        <svg class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_edit slds-icon slds-icon-text-default slds-icon_xx-small" focusable="false" data-key="lock" aria-hidden="true" viewBox="0 0 520 520" part="icon">
+                                                                            <g>
+                                                                     <path d="M110 190h40c6 0 10-3 10-9v-1A100 100 0 01267 80c53 4 93 50 93 104v-3c0 6 4 9 10 9h40c6 0 10-3 10-9v-1A160 160 0 00252 20c-85 4-150 76-152 161 1 5 5 9 10 9zm-10-9v4zm360 89a40 40 0 00-40-40H100a40 40 0 00-40 40v190a40 40 0 0040 40h320a40 40 0 0040-40zM306 427c2 6-3 13-10 13h-73c-7 0-11-6-10-13l18-60a48 48 0 01-21-48 50 50 0 0139-38c32-6 60 17 60 47 0 16-8 31-21 39z"></path>
+                                                                    </g>
+                                                                        </svg>
+                                                                    </template>
+                                                                    <!-- END utility:lock -->
                                                                 </template>
                                                             </span>
                                                         </template>
@@ -645,10 +701,23 @@
                                                                 <!-- boolean -->
                                                                 <template if:true={cell.isBoolean}>
                                                                     <template if:true={cell.isChecked}>
-                                                                        <lightning-primitive-icon
-                                                                            size="x-small"
-                                                                            icon-name="utility:check">
-                                                                        </lightning-primitive-icon>
+                                                                        <!-- Caution: Modify generate-inlined-icons script before changing comments -->
+                                                                        <!-- START utility:check -->
+                                                                        <template lwc:if={cell.isRTL}>
+                                                                            <svg class="slds-icon slds-icon-text-default slds-icon_x-small" focusable="false" data-key="check" aria-hidden="true" viewBox="0 0 520 520" part="icon">
+                                                                                <g>
+                                                                         <path d="M191 425L26 259c-6-6-6-16 0-22l22-22c6-6 16-6 22 0l124 125a10 10 0 0015 0L452 95c6-6 16-6 22 0l22 22c6 6 6 16 0 22L213 425c-6 7-16 7-22 0z"></path>
+                                                                        </g>
+                                                                            </svg>
+                                                                        </template>
+                                                                        <template lwc:else>
+                                                                            <svg class="slds-icon slds-icon-text-default slds-icon_x-small" focusable="false" data-key="check" aria-hidden="true" viewBox="0 0 520 520" part="icon">
+                                                                                <g>
+                                                                         <path d="M191 425L26 259c-6-6-6-16 0-22l22-22c6-6 16-6 22 0l124 125a10 10 0 0015 0L452 95c6-6 16-6 22 0l22 22c6 6 6 16 0 22L213 425c-6 7-16 7-22 0z"></path>
+                                                                        </g>
+                                                                            </svg>
+                                                                        </template>
+                                                                        <!-- END utility:check -->
                                                                     </template>
                                                                     <span class="slds-assistive-text">{cell.booleanCellAssistiveText}</span>
                                                                 </template>
@@ -719,10 +788,23 @@
                                                                             href={cell.emailLink}
                                                                             tabindex={cell.internalTabIndex}>
                                                                             <template if:false={cell.emailIconHidden}>
-                                                                                <lightning-primitive-icon
-                                                                                    icon-name="utility:email"
-                                                                                    size="x-small">
-                                                                                </lightning-primitive-icon>
+                                                                                <!-- Caution: Modify generate-inlined-icons script before changing comments -->
+                                                                                <!-- START utility:email -->
+                                                                                <template lwc:if={cell.isRTL}>
+                                                                                    <svg class="slds-icon slds-icon-text-default slds-icon_x-small" focusable="false" data-key="email" aria-hidden="true" viewBox="0 0 520 520" part="icon">
+                                                                                        <g>
+                                                                                 <path d="M249 301c6 6 15 6 21 0L496 91c4-8 3-21-13-21L36 71c-12 0-22 11-13 21zm251-128c0-10-12-16-20-9L303 327c-12 11-27 17-43 17s-31-6-43-16L41 164c-8-7-20-2-20 9-1-3-1 227-1 227a40 40 0 0040 40h400a40 40 0 0040-40z"></path>
+                                                                                </g>
+                                                                                    </svg>
+                                                                                </template>
+                                                                                <template lwc:else>
+                                                                                    <svg class="slds-icon slds-icon-text-default slds-icon_x-small" focusable="false" data-key="email" aria-hidden="true" viewBox="0 0 520 520" part="icon">
+                                                                                        <g>
+                                                                                 <path d="M249 301c6 6 15 6 21 0L496 91c4-8 3-21-13-21L36 71c-12 0-22 11-13 21zm251-128c0-10-12-16-20-9L303 327c-12 11-27 17-43 17s-31-6-43-16L41 164c-8-7-20-2-20 9-1-3-1 227-1 227a40 40 0 0040 40h400a40 40 0 0040-40z"></path>
+                                                                                </g>
+                                                                                    </svg>
+                                                                                </template>
+                                                                                <!-- END utility:email -->
                                                                                 <span class="slds-assistive-text">{cell.emailIconAssistiveText}</span>
                                                                             </template> {cell.emailLabel}
                                                                         </a>
@@ -881,17 +963,30 @@
                                                             </div>
                                                             <template if:true={cell.isEditable}>
                                                                 <button class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small"
+                                                                        aria-labelledby={cell.editLabelId}
                                                                         data-action-edit="true"
                                                                         data-action-triggers="enter,space"
                                                                         data-navigation="enable"
                                                                         tabindex={cell.internalTabIndex}
                                                                         onclick={handleInlinedEditButtonClick}>
-                                                                    <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">
-                                                                    </lightning-primitive-icon>
-                                                                    <span class="slds-assistive-text">
+                                                                    <!-- Caution: Modify generate-inlined-icons script before changing comments -->
+                                                                    <!-- START utility:edit -->
+                                                                    <template lwc:if={cell.isRTL}>
+                                                                        <svg class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_edit slds-icon slds-icon-text-default slds-icon_xx-small" focusable="false" data-key="edit" aria-hidden="true" viewBox="0 0 520 520" part="icon">
+                                                                            <g>
+                                                                     <path d="M95 334l89 89c4 4 10 4 14 0l222-223c4-4 4-10 0-14l-88-88a10 10 0 00-14 0L95 321c-4 4-4 10 0 13zM361 57a10 10 0 000 14l88 88c4 4 10 4 14 0l25-25a38 38 0 000-55l-47-47a40 40 0 00-57 0zM21 482c-2 10 7 19 17 17l109-26c4-1 7-3 9-5l2-2c2-2 3-9-1-13l-90-90c-4-4-11-3-13-1l-2 2a20 20 0 00-5 9z"></path>
+                                                                    </g>
+                                                                        </svg>
+                                                                    </template>
+                                                                    <template lwc:else>
+                                                                        <svg class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_edit slds-icon slds-icon-text-default slds-icon_xx-small" focusable="false" data-key="edit" aria-hidden="true" viewBox="0 0 520 520" part="icon">
+                                                                            <g>
+                                                                     <path d="M95 334l89 89c4 4 10 4 14 0l222-223c4-4 4-10 0-14l-88-88a10 10 0 00-14 0L95 321c-4 4-4 10 0 13zM361 57a10 10 0 000 14l88 88c4 4 10 4 14 0l25-25a38 38 0 000-55l-47-47a40 40 0 00-57 0zM21 482c-2 10 7 19 17 17l109-26c4-1 7-3 9-5l2-2c2-2 3-9-1-13l-90-90c-4-4-11-3-13-1l-2 2a20 20 0 00-5 9z"></path>
+                                                                    </g>
+                                                                        </svg>
+                                                                    </template>
+                                                                    <!-- END utility:edit -->
+                                                                    <span hidden id={cell.editLabelId}>
                                                                         {cell.editIconAssistiveText}
                                                                     </span>
                                                                 </button>
@@ -902,11 +997,23 @@
                                                             <template if:true={cell.shouldDisplayReadOnlyIcon}>
                                                                 <!-- TODO: Update the svg-classes once the SLDS team updates their read only icon design to not use classes that have the word 'button'
                                                                 in them in cases when the cell is read only and hence no button is actually rendered -->
-                                                                <lightning-primitive-icon
-                                                                    icon-name="utility:lock"
-                                                                    size="xx-small"
-                                                                    svg-class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_small">
-                                                                </lightning-primitive-icon>
+                                                                <!-- Caution: Modify generate-inlined-icons script before changing comments -->
+                                                                <!-- START utility:lock -->
+                                                                <template lwc:if={cell.isRTL}>
+                                                                    <svg class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_edit slds-icon slds-icon-text-default slds-icon_xx-small" focusable="false" data-key="lock" aria-hidden="true" viewBox="0 0 520 520" part="icon">
+                                                                        <g>
+                                                                 <path d="M110 190h40c6 0 10-3 10-9v-1A100 100 0 01267 80c53 4 93 50 93 104v-3c0 6 4 9 10 9h40c6 0 10-3 10-9v-1A160 160 0 00252 20c-85 4-150 76-152 161 1 5 5 9 10 9zm-10-9v4zm360 89a40 40 0 00-40-40H100a40 40 0 00-40 40v190a40 40 0 0040 40h320a40 40 0 0040-40zM306 427c2 6-3 13-10 13h-73c-7 0-11-6-10-13l18-60a48 48 0 01-21-48 50 50 0 0139-38c32-6 60 17 60 47 0 16-8 31-21 39z"></path>
+                                                                </g>
+                                                                    </svg>
+                                                                </template>
+                                                                <template lwc:else>
+                                                                    <svg class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_edit slds-icon slds-icon-text-default slds-icon_xx-small" focusable="false" data-key="lock" aria-hidden="true" viewBox="0 0 520 520" part="icon">
+                                                                        <g>
+                                                                 <path d="M110 190h40c6 0 10-3 10-9v-1A100 100 0 01267 80c53 4 93 50 93 104v-3c0 6 4 9 10 9h40c6 0 10-3 10-9v-1A160 160 0 00252 20c-85 4-150 76-152 161 1 5 5 9 10 9zm-10-9v4zm360 89a40 40 0 00-40-40H100a40 40 0 00-40 40v190a40 40 0 0040 40h320a40 40 0 0040-40zM306 427c2 6-3 13-10 13h-73c-7 0-11-6-10-13l18-60a48 48 0 01-21-48 50 50 0 0139-38c32-6 60 17 60 47 0 16-8 31-21 39z"></path>
+                                                                </g>
+                                                                    </svg>
+                                                                </template>
+                                                                <!-- END utility:lock -->
                                                             </template>
                                                         </span>
                                                     </template>

package/src/lightning/datatable/utils.js

@@ -99,20 +99,26 @@ export function getGridContainerFromScrollerY(scrollerY) {
  * Gets the scrollerX element from the template.
  *
  * @param {Node} template The datatable template
+ * @param {Object} refs The datatable refs
  * @returns {Node} The scrollerX element
  */
-export function getScrollerX(template) {
-    return template.querySelector('.slds-scrollable_x');
+export function getScrollerX(template, refs) {
+    return (
+        (refs && refs.scrollerX) || template.querySelector('.slds-scrollable_x')
+    );
 }
 
 /**
  * Gets the scrollerY element from the template.
  *
  * @param {Node} template The datatable template
+ * @param {Object} refs The datatable refs
  * @returns {Node} The scrollerY element
  */
-export function getScrollerY(template) {
-    return template.querySelector('.slds-scrollable_y');
+export function getScrollerY(template, refs) {
+    return (
+        (refs && refs.scrollerY) || template.querySelector('.slds-scrollable_y')
+    );
 }
 
 /**

package/src/lightning/datatable/virtualization.js

@@ -48,8 +48,9 @@ export function resetRowHeights(state) {
  * @param {Node} template - the custom element root `this.template` from datatable.js
  * @param {Object} state - datatable state
  * @param {Array} renderedRows  - array of rows currently being rendered
+ * @param {Object} refs - datatable refs
  */
-export function handleVariableRowHeights(template, state, renderedRows) {
+export function handleVariableRowHeights(template, state, renderedRows, refs) {
     const currentRange = {
         start: renderedRows[0].rowIndex,
         end: renderedRows[renderedRows.length - 1].rowIndex + 1,
@@ -93,7 +94,7 @@ export function handleVariableRowHeights(template, state, renderedRows) {
         adjustFromIndex,
         adjustmentValue
     );
-    updateVirtualizeStyles(template, state, renderedRows);
+    updateVirtualizeStyles(template, state, renderedRows, refs);
 }
 
 /**
@@ -318,9 +319,10 @@ function checkOverlap(range1, range2) {
  * updates scrollTop and top values for rows when
  * using virtualization
  */
-function updateVirtualizeStyles(template, state, renderedRows) {
+function updateVirtualizeStyles(template, state, renderedRows, refs) {
     // update scrollTop so firstVisibleIndex is correctly placed in viewport
-    const scrollerY = template.querySelector('.slds-scrollable_y');
+    const scrollerY =
+        refs?.scrollerY || template.querySelector('.slds-scrollable_y');
     scrollerY.scrollTop =
         state.offsets[state.firstVisibleIndex] + state.firstRowOffset;
 

package/src/lightning/datatable/wrapText.js

@@ -4,7 +4,6 @@ import { normalizeBoolean } from 'lightning/utilsPrivate';
 import { getStateColumnIndex } from './columns';
 import { updateCell } from './rows';
 import { normalizeNumberAttribute } from './utils';
-import { getDefaultState } from './state';
 
 const NON_WRAPPABLE_TYPES = new Set([
     'action',
@@ -23,15 +22,16 @@ const i18n = {
 /************************** WRAP TEXT STATE **************************/
 
 /**
- * Sets a boolean value in state's wrapText object against the column key value
- * representing whether or not the column is text wrapped.
+ * Normalizes the value for the column's wrapText property
+ * Based on cell type and current wrapText value.
  *
- * @param {Object} state The datatable state
  * @param {Object} col The datatable column definition
  */
-export function setWrapTextState(state = getDefaultState(), col) {
+export function setWrapTextState(col) {
     if (!NON_WRAPPABLE_TYPES.has(col.type)) {
-        state.wrapText[col.colKeyValue] = normalizeBoolean(col.wrapText);
+        col.wrapText = normalizeBoolean(col.wrapText);
+    } else {
+        col.wrapText = false;
     }
 }
 
@@ -81,14 +81,13 @@ function updateWrapTextAndMaxLinesValuesInCells(state, colIndex) {
  * @returns {Array} An array of wrap text actions
  */
 export function getInternalActions(state, col) {
-    // Untracked state change.
-    // Must be done first, so isTextWrapped correctly resolves.
-    setWrapTextState(state, col);
+    // Must be done first to ensure isTextWrapped correctly resolves.
+    setWrapTextState(col);
     // If not hidden and isWrapable, sets the internal actions.
     if (col.hideDefaultActions || NON_WRAPPABLE_TYPES.has(col.type)) {
         return [];
     }
-    const isTextWrapped = state.wrapText[col.colKeyValue] || false;
+    const isTextWrapped = col.wrapText || false;
     const { clipText, wrapText } = i18n;
     return [
         {
@@ -120,14 +119,16 @@ export function handleTriggeredAction(dt, action, colKeyValue) {
     const isWrapText = name === 'wrapText';
     if (isWrapText || name === 'clipText') {
         const { state } = dt;
+        const colIndex = getStateColumnIndex(state, colKeyValue);
+        const col = state.columns[colIndex];
         // If state should be changed
-        if (state.wrapText[colKeyValue] !== isWrapText) {
+        if (col.wrapText !== isWrapText) {
             state.shouldResetHeights = true;
-            // Untracked state changes.
-            state.wrapText[colKeyValue] = isWrapText;
+            col.wrapText = isWrapText;
             updateSelectedOptionInHeaderActions(state, colKeyValue);
         }
     }
+    dt._recalculateHeaderHeight = true;
 }
 
 /**
@@ -150,9 +151,9 @@ function updateSelectedOptionInHeaderActions(state, colKeyValue) {
         const action = internalActions[i];
         const { name } = action;
         if (name === 'wrapText') {
-            action.checked = state.wrapText[colKeyValue];
+            action.checked = col.wrapText;
         } else if (name === 'clipText') {
-            action.checked = !state.wrapText[colKeyValue];
+            action.checked = !col.wrapText;
         }
     }
 

package/src/lightning/groupedCombobox/groupedCombobox.js

@@ -382,10 +382,7 @@ export default class LightningGroupedCombobox extends LightningShadowBaseClass {
         this.interactingState.enter();
         this._expandPillContainer = true;
 
-        if (!this._hasFocus) {
-            this._hasFocus = true;
-            this.dispatchEvent(new CustomEvent('focus'));
-        }
+        this.dispatchEvent(new CustomEvent('focus'));
     }
 
     handlePillsFocus() {
@@ -401,36 +398,32 @@ export default class LightningGroupedCombobox extends LightningShadowBaseClass {
     }
 
     handleBlur() {
-        this._hasFocus = false;
-
         // Once https://github.com/salesforce/lwc/issues/444 is fixed, consider switching to
         // `onfocusout` and `event.relatedTarget` to determine whether the focus stayed in the component,
         // this way the use of async blur can be avoided.
         // eslint-disable-next-line @lwc/lwc/no-async-operation
         requestAnimationFrame(() => {
-            if (!this._hasFocus) {
-                this.interactingState.leave();
-
-                this.dispatchEvent(new CustomEvent('blur'));
-                if (this.pills && this.pills.length > 0) {
-                    // Sometimes (involves focusing on lower pills) the pill container scrolls and the top
-                    // line with the "+ n more" button does not show so we have to manually scroll to the top.
-                    // We need to figure a better solution for this.
-                    // eslint-disable-next-line @lwc/lwc/no-async-operation
-                    requestAnimationFrame(() => {
-                        if (this._connected) {
-                            // If a new pill has been added but the markup-conditional hasn't had a chance to
-                            // initialize the pill container, and causes a null gack. Adding a quick safety
-                            // check here to avoid this case
-                            const pillContainer = this.template.querySelector(
-                                'lightning-pill-container'
-                            );
-                            if (pillContainer) {
-                                pillContainer.scrollTop = 0;
-                            }
+            this.interactingState.leave();
+
+            this.dispatchEvent(new CustomEvent('blur'));
+            if (this.pills && this.pills.length > 0) {
+                // Sometimes (involves focusing on lower pills) the pill container scrolls and the top
+                // line with the "+ n more" button does not show so we have to manually scroll to the top.
+                // We need to figure a better solution for this.
+                // eslint-disable-next-line @lwc/lwc/no-async-operation
+                requestAnimationFrame(() => {
+                    if (this._connected) {
+                        // If a new pill has been added but the markup-conditional hasn't had a chance to
+                        // initialize the pill container, and causes a null gack. Adding a quick safety
+                        // check here to avoid this case
+                        const pillContainer = this.template.querySelector(
+                            'lightning-pill-container'
+                        );
+                        if (pillContainer) {
+                            pillContainer.scrollTop = 0;
                         }
-                    });
-                }
+                    }
+                });
             }
         });
     }

package/src/lightning/helptext/button-icon.slds.css

@@ -299,6 +299,14 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
    --sds-c-button-text-color-disabled: var(--slds-g-color-on-disabled-1);
    --sds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-1);
+
+   /** 
+    * Needed to override 
+    * `pointer-event: none` coming from sds
+    * that prevent tooltip from showing
+   */
+   pointer-events: auto;
+   cursor: default;
 }
 /**
   * A note about fallbacks on the default variant:

package/src/lightning/helptext/helptext.html

@@ -5,9 +5,10 @@
             icon-class={computedIconClass}
             variant={computedButtonVariant}
             alternative-text={alternativeText}
+            disable-alternative-text-title
             tooltip={content}
-            onprivatebuttoniconregister={handleButtonIconRegister}
             tabindex={tabIndex}
+            tooltip-type="toggle"
         ></lightning-button-icon>
     </div>
 </template>

package/src/lightning/helptext/helptext.js

@@ -3,7 +3,6 @@ import { api, track } from 'lwc';
 import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { isValidName } from 'lightning/iconUtils';
 import { normalizeString } from 'lightning/utilsPrivate';
-import { TooltipType } from 'lightning/tooltipLibrary';
 
 const DEFAULT_BUTTON_ALT_TEXT = labelButtonAlternativeText;
 const DEFAULT_ICON_NAME = 'utility:info';
@@ -145,15 +144,4 @@ export default class LightningHelptext extends LightningShadowBaseClass {
                 return '';
         }
     }
-
-    /**
-     * Set lightning-button-icon tooltips to be created with toggle events
-     * and without the title attribute computed from alternative text (see W-12496300)
-     * @param {*} event
-     */
-    handleButtonIconRegister(event) {
-        event.stopPropagation();
-        event.detail.setTooltipType(TooltipType.Toggle);
-        event.detail.showTitle(false);
-    }
 }

package/src/lightning/input/input.html

@@ -233,7 +233,6 @@
             name={name}
             accesskey={accesskey}
             aria-label={ariaLabel}
-            aria-details={ariaDetails}
             aria-disabled={ariaDisabled}
             variant={variant}
             time-style={timeStyle}

package/src/lightning/interactiveDialogBase/button.slds.css

@@ -296,6 +296,14 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
    --sds-c-button-text-color-disabled: var(--slds-g-color-on-disabled-1);
    --sds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-1);
+
+   /** 
+    * Needed to override 
+    * `pointer-event: none` coming from sds
+    * that prevent tooltip from showing
+   */
+   pointer-events: auto;
+   cursor: default;
 }
 /**
   * A note about fallbacks on the default variant: