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

package/src/lightning/modal/__docs__/modal.md

@@ -411,6 +411,8 @@ Let's see this workflow in action. In this example, we'll create a button (`ligh
 
 Because `lightning-navigation` requires you to pass in a `recordId` to construct a page reference, we need to pass the record's data out of `LightningModal`, and then use the methods provided by `lightning-navigation`. With modal's limitations for event bubbling to the Aura layer, we can't just wrap the button or treegrid with `lightning-navigation`. We need to pull that data up to the topmost LWC component, where the `LightningModal` `.open()` is called, for our Aura wrapper to handle the navigation.
 
+However, in [Aura-based Experience Builder sites](https://developer.salesforce.com/docs/atlas.en-us.communities_dev.meta/communities_dev/communities_dev_basics_templates.htm), the `NavigationMixin` event can reach the Aura layer without being affected by the modal's limitations.
+
 So, we `import` the `lightning-navigation` component into the topmost LWC component that sits within the Aura layer by passing the data through `LightningModal`'s close method, `this.close({ data })`. Then the parent LWC component invokes the methods provided by `lightning-navigation`, which handles the navigation away from the page after the modal exits. From a UX perspective, this also lets us close the modal first, since `lightning-navigation` takes the user away from the current page.
 
 Note that this sample code isn't fully functional. We're only showing the relevant code that makes the `lightning-navigation` use case work with `LightningModal`.

package/src/lightning/modalBase/modalBase.html

@@ -18,6 +18,8 @@
             onprivatemodalfooterregister={handleFooterRegister}
             onprivateclose={handlePrivateClose}
             onprivatedisableclosebutton={handlePrivateDisableCloseButton}
+            onfocusin={handleModalBaseFocusin}
+            onprivatelightningmodallastfocus={handleLastFocusedElem}
             data-modal
         >
             <template if:true={showAriaDescribedBy}>

package/src/lightning/modalBase/modalBase.js

@@ -19,7 +19,7 @@ import {
 import closeButtonAltText from '@salesforce/label/LightningModalBase.cancelandclose';
 import disableCloseBtnMessage from '@salesforce/label/LightningModalBase.waitstate';
 import AriaObserver from 'lightning/ariaObserver';
-import { isLwcModalActive } from 'lightning/overlayManager';
+import { modalFocusinEventHandler } from 'lightning/modalUtils';
 
 const DEBOUNCE_RESIZE = 300;
 const SMALL_SCREEN_SIZE = 480;
@@ -27,7 +27,6 @@ const SIZE_SMALL = 'small';
 const SIZE_MEDIUM = 'medium';
 const SIZE_LARGE = 'large';
 const SIZE_FULL = 'full';
-const MODAL_CONTAINER = 'lightning-overlay-container';
 
 export default class LightningModalBase extends LightningShadowBaseClass {
     // this is visible in DOM, changed from 'lightning-modal-base'
@@ -69,10 +68,9 @@ export default class LightningModalBase extends LightningShadowBaseClass {
     portraitMatchMedia = null;
     screenOrientationChangeHandler = null;
 
-    // state utilized when performing keyboard Tab/Shift-Tab interactions
+    // state utilized when performing keyboard focus trap
     focusinEventBound = false;
-    focusinEventHandler = null;
-    lastFocussedElementOnModal = null;
+    lastFocusedElement = null;
 
     // modalFooter, child
     footerRegistered = false;
@@ -468,27 +466,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         }
     }
 
-    /**
-     * Handler for 'focusin' events, responsible for trapping user focus to open Modal
-     * @param e - Event
-     */
-    handleFocusinEvents(e) {
-        // eslint-disable-next-line @lwc/lwc/no-async-operation
-        requestAnimationFrame(() => {
-            // is current active (open) modal is lwc
-            if (isLwcModalActive() && this.isModalOpen) {
-                const isTargetRelatedToModal =
-                    e.target?.closest(MODAL_CONTAINER) ||
-                    e.relatedTarget?.closest(MODAL_CONTAINER);
-                if (isTargetRelatedToModal) {
-                    this.lastFocussedElementOnModal = getElementWithFocus();
-                } else {
-                    returnFocusToElement(this.lastFocussedElementOnModal);
-                }
-            }
-        });
-    }
-
     /**
      * Opening the modal involves first performing necessary steps to
      * prepare for when the modal closes
@@ -794,7 +771,11 @@ export default class LightningModalBase extends LightningShadowBaseClass {
             : fallbackFocusElem;
 
         if (focusElem !== null) {
-            focusElem.focus();
+            this.lastFocusedElement = focusElem;
+            // eslint-disable-next-line @lwc/lwc/no-async-operation
+            requestAnimationFrame(() => {
+                focusElem.focus();
+            });
             this.autoFocusCompletedOnce = true;
         } else {
             // Should never happen since outerModalElem always present
@@ -1178,8 +1159,10 @@ export default class LightningModalBase extends LightningShadowBaseClass {
     addFocusinEventListener() {
         if (!this.focusinEventBound) {
             this.focusinEventBound = true;
-            this.focusinEventHandler = this.handleFocusinEvents.bind(this);
-            window.addEventListener('focusin', this.focusinEventHandler);
+            window.addEventListener(
+                'focusin',
+                modalFocusinEventHandler.bind(this)
+            );
         }
     }
 
@@ -1192,11 +1175,27 @@ export default class LightningModalBase extends LightningShadowBaseClass {
     removeFocusinEventListener() {
         if (this.focusinEventBound) {
             this.focusinEventBound = false;
-            window.removeEventListener('focusin', this.focusinEventHandler);
-            this.focusinEventHandler = null;
+            window.removeEventListener(
+                'focusin',
+                modalFocusinEventHandler.bind(this)
+            );
         }
     }
 
+    handleModalBaseFocusin = modalFocusinEventHandler.bind(this);
+
+    handleLastFocusedElem(e) {
+        if (!(e.detail && e.detail[secure])) {
+            console.error(
+                'Invalid access to onprivatelightningmodallastfocus event'
+            );
+            return;
+        }
+        e.stopPropagation();
+
+        this.lastFocusedElement = e.detail.privatelightningmodallastfocus;
+    }
+
     /**
      * determine if the current screen is less than SMALL_SCREEN_SIZE
      * for Modal, screen size detection is simplified to what's required

package/src/lightning/modalBody/modalBody.html

@@ -5,6 +5,7 @@
         part="modal-body"
         data-content-container
         onprivatescrollablecontainer={handleScrollableContainerRepositionEvent}
+        onfocusin={handleModalBodyFocusin}
     >
         <slot
             data-default-slot

package/src/lightning/modalBody/modalBody.js

@@ -2,6 +2,7 @@ import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet } from 'lightning/utils';
 import { getRealDOMId } from 'lightning/utilsPrivate';
 import { findAllTabbableElements, filterTooltips } from 'lightning/focusUtils';
+import { modalFocusinEventHandler } from 'lightning/modalUtils';
 
 /**
  * The modal body component to display main content area in lightning modal.
@@ -294,6 +295,8 @@ export default class LightningModalBody extends LightningShadowBaseClass {
         this.dispatchEvent(evtRegister);
     }
 
+    handleModalBodyFocusin = modalFocusinEventHandler.bind(this);
+
     /**
      * When modal body is being created, initialize
      * private tracked modal body state

package/src/lightning/modalFooter/modalFooter.html

@@ -1,5 +1,9 @@
 <template>
-    <div class={footerCssClasses} part="modal-footer">
+    <div
+        class={footerCssClasses}
+        part="modal-footer"
+        onfocusin={handleModalFooterFocusin}
+    >
         <slot
             data-footer-slot
             onslotchange={handleDefaultSlotChange}

package/src/lightning/modalFooter/modalFooter.js

@@ -1,5 +1,6 @@
 import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet } from 'lightning/utils';
+import { modalFocusinEventHandler } from 'lightning/modalUtils';
 
 // SLDS Modal Footer classes
 const footerClass = 'slds-modal__footer';
@@ -104,6 +105,8 @@ export default class LightningModalFooter extends LightningShadowBaseClass {
         this.dispatchEvent(evtRegister);
     }
 
+    handleModalFooterFocusin = modalFocusinEventHandler.bind(this);
+
     /**
      * When modal footer is being created, initialize
      * private tracked modal footer state

package/src/lightning/modalHeader/modalHeader.html

@@ -1,5 +1,8 @@
 <template>
-    <div class="slds-modal__header" part="modal-header">
+    <div class="slds-modal__header"
+         part="modal-header"
+         onfocusin={handleModalHeaderFocusin}
+    >
         <template if:true={label}>
             <h1
                 id="modal-label"

package/src/lightning/modalHeader/modalHeader.js

@@ -1,6 +1,7 @@
 import { api } from 'lwc';
 import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { getRealDOMId } from 'lightning/utilsPrivate';
+import { modalFocusinEventHandler } from 'lightning/modalUtils';
 
 // selectors
 const modalHeaderSelector = '.slds-modal__header';
@@ -152,6 +153,8 @@ export default class LightningModalHeader extends LightningShadowBaseClass {
         this.dispatchEvent(evtRegister);
     }
 
+    handleModalHeaderFocusin = modalFocusinEventHandler.bind(this);
+
     /**
      * When modal header is being created, initialize
      * private tracked modal header state

package/src/lightning/overlayManager/overlayManager.js

@@ -436,7 +436,7 @@ function initAuraOverlayState() {
 
 /**
  * Helper function to detect if a lightning-modal is currently open
- * Used in modalBase.js to trap a user's focus while lightning-modal is open
+ * Used in modalUtil.js to trap a user's focus while lightning-modal is open
  * @returns {boolean}
  */
 export function isLwcModalActive() {

package/src/lightning/pillContainer/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:

package/src/lightning/positionLibrary/elementProxy.js

@@ -1,4 +1,4 @@
-import { isInDom, WindowManager, pxToInt } from './util';
+import { isInDom, WindowManager, pxToFloat, getTransformValues } from './util';
 
 export class ElementProxy {
     constructor(el, id) {
@@ -137,18 +137,21 @@ export class ElementProxy {
 
         const originalLeft = style.left.match(/auto|fixed/)
             ? '0'
-            : parseInt(style.left.replace('px', ''), 10);
+            : pxToFloat(style.left);
         const originalTop = style.top.match(/auto|fixed/)
             ? '0'
-            : parseInt(style.top.replace('px', ''), 10);
+            : pxToFloat(style.top);
 
         const marginOffset =
             this.top < absPos.top
-                ? pxToInt(style.marginBottom)
-                : pxToInt(style.marginTop) * -1;
+                ? pxToFloat(style.marginBottom) * -1
+                : pxToFloat(style.marginTop);
+
+        const transform = getTransformValues(style.transform);
+        const topOffset = transform.y;
 
         let leftDif = Math.round(this.left - (absPos.left + scrollLeft));
-        const topDif = this.top - (absPos.top + marginOffset + scrollTop);
+        const topDif = this.top - (absPos.top + scrollTop) + topOffset;
 
         const viewPortWidth = w.innerWidth || document.body.clientWidth;
         let rightPos = parseInt(style.right, 10);
@@ -164,6 +167,10 @@ export class ElementProxy {
 
         this._node.style.left = `${originalLeft + leftDif}px`;
         this._node.style.top = `${originalTop + topDif}px`;
+        // translate3d enables CSS Hardware Acceleration and switches to GPU
+        this._node.style.transform = `translate3d(0, ${
+            topOffset ? topOffset : marginOffset
+        }px, 0)`;
 
         if (this._restoreSize) {
             // Only store the first height/width which is the original height/width.

package/src/lightning/positionLibrary/util.js

@@ -244,6 +244,24 @@ function isPx(value) {
     return value.slice(-2) === 'px';
 }
 
-export function pxToInt(value) {
-    return value && isPx(value) ? parseInt(value, 10) : 0;
+export function pxToFloat(value) {
+    return value && isPx(value) ? parseFloat(value) : 0;
+}
+
+export function getTransformValues(value = '') {
+    // DOMMatrix is used to get scalar values for css transform string
+    // https://developer.mozilla.org/en-US/docs/Web/API/DOMMatrixReadOnly
+    const matrix = new DOMMatrixReadOnly(value);
+    if (matrix.is2D) {
+        return {
+            x: matrix.e, // translateX
+            y: matrix.f, // translateY
+            z: 0,
+        };
+    }
+    return {
+        x: matrix.m41, // translateX
+        y: matrix.m42, // translateY
+        z: matrix.m43, // translateZ
+    };
 }

package/src/lightning/primitiveBubble/primitiveBubble.js

@@ -130,6 +130,9 @@ export default class LightningPrimitiveBubble extends LightningShadowBaseClass {
     // manually create <div>, add positional styling, and append as child to bubble
     createInvisibleDivManually() {
         if (this.state.visible) {
+            // for native shadow, we need to get styles from popover parent and append
+            // to popover body so that it is added/removed from DOM depending on tooltip visibility
+            const popoverParent = this.template.querySelector('.slds-popover');
             const popoverBody = this.template.querySelector(
                 '.slds-popover__body'
             );
@@ -137,8 +140,8 @@ export default class LightningPrimitiveBubble extends LightningShadowBaseClass {
             const { vertical } = this.align;
 
             let computedStyle = null;
-            if (window && popoverBody) {
-                computedStyle = window.getComputedStyle(popoverBody);
+            if (window && popoverParent && popoverBody) {
+                computedStyle = window.getComputedStyle(popoverParent);
                 invisibleDiv.style.width =
                     computedStyle.getPropertyValue('width');
 
@@ -151,8 +154,10 @@ export default class LightningPrimitiveBubble extends LightningShadowBaseClass {
                 */
                 if (vertical === 'bottom') {
                     invisibleDiv.style.top =
-                        Math.max(POPOVER_MIN_HEIGHT, popoverBody.offsetHeight) +
-                        'px';
+                        Math.max(
+                            POPOVER_MIN_HEIGHT,
+                            popoverParent.offsetHeight
+                        ) + 'px';
                     invisibleDiv.style.height =
                         DEFAULT_INVISIBLE_DIV_STYLES.height;
                 } else {

package/src/lightning/primitiveCellActions/primitiveCellActions.html

@@ -1,5 +1,6 @@
 <template>
     <lightning-button-menu
+        lwc:ref="buttonMenu"
         icon-size="x-small"
         alternative-text={buttonAlternateText}
         menu-alignment={computedMenuAlignment}

package/src/lightning/primitiveCellActions/primitiveCellActions.js

@@ -68,7 +68,7 @@ export default class PrimitiveCellActions extends LightningElement {
     @api
     focus() {
         if (this._connected) {
-            this.template.querySelector('lightning-button-menu').focus();
+            this.refs.buttonMenu.focus();
         }
     }
 
@@ -81,7 +81,7 @@ export default class PrimitiveCellActions extends LightningElement {
             // focus/click without changing tabindex doesnt work W-6185168
             // eslint-disable-next-line @lwc/lwc/no-async-operation
             setTimeout(() => {
-                this.template.querySelector('lightning-button-menu').click();
+                this.refs.buttonMenu.click();
             }, 0);
         }
     }
@@ -141,9 +141,7 @@ export default class PrimitiveCellActions extends LightningElement {
      * Handles the opening of an action menu
      */
     handleMenuOpen() {
-        this.elementRect = this.template
-            .querySelector('lightning-button-menu')
-            .getBoundingClientRect();
+        this.elementRect = this.refs.buttonMenu.getBoundingClientRect();
 
         const detail = {
             rowKeyValue: this.rowKeyValue,

package/src/lightning/primitiveCellButton/primitiveCellButton.html

@@ -1,6 +1,7 @@
 <template>
     <template if:true={isButtonIconType}>
         <lightning-button-icon
+            lwc:ref="buttonIcon"
             variant={variant}
             alternative-text={alternativeText}
             icon-name={iconName}
@@ -14,6 +15,7 @@
     </template>
     <template if:false={isButtonIconType}>
         <lightning-button
+            lwc:ref="button"
             variant={variant}
             label={label}
             icon-name={iconName}

package/src/lightning/primitiveCellButton/primitiveCellButton.js

@@ -61,11 +61,9 @@ export default class PrivateCellButton extends LightningElement {
 
     get buttonCustomElement() {
         if (this._connected) {
-            const qs = this.isButtonIconType
-                ? 'lightning-button-icon'
-                : 'lightning-button';
-
-            return this.template.querySelector(qs);
+            return this.isButtonIconType
+                ? this.refs.buttonIcon
+                : this.refs.button;
         }
         return undefined;
     }

package/src/lightning/primitiveCellCheckbox/checkbox.html

@@ -4,7 +4,8 @@
         onclick={handleCheckboxContainerClick}
         onmousedown={handleCheckboxContainerMouseDown}
     >
-        <input type="checkbox"
+        <input lwc:ref="input"
+               type="checkbox"
                name={computedOptionName}
                id="primitive-cell-checkbox-id"
                tabindex={internalTabIndex}
@@ -13,7 +14,7 @@
                onclick={handleCheckboxClick}
                disabled={isDisabled}
                checked={isSelected}>
-        <label
+        <label lwc:ref="label"
             id={labelId}
             class="slds-checkbox__label"
             for="primitive-cell-checkbox-id"

package/src/lightning/primitiveCellCheckbox/primitiveCellCheckbox.js

@@ -26,7 +26,7 @@ export default class PrimitiveCellCheckbox extends PrimitiveDatatableCell {
         this._columnHeaderId = id || '';
         const labelId = this.computedLabelId;
         if (labelId) {
-            synchronizeAttrs(this.template.querySelector('input'), {
+            synchronizeAttrs(this.refs.input, {
                 'aria-labelledby': `${labelId} ${this._columnHeaderId}`,
             });
         }
@@ -41,13 +41,16 @@ export default class PrimitiveCellCheckbox extends PrimitiveDatatableCell {
 
     renderedCallback() {
         //give input the correct aria-labelledby value
-        synchronizeAttrs(this.template.querySelector('input'), {
+        synchronizeAttrs(this.refs.input, {
             'aria-labelledby': `${this.computedLabelId} ${this.columnHeaderId}`,
         });
     }
 
     get computedLabelId() {
-        return getRealDOMId(this.template.querySelector('label'));
+        if (this.isConnected && this.refs) {
+            return getRealDOMId(this.refs.label);
+        }
+        return null;
     }
 
     get selectItemAssistiveText() {

package/src/lightning/primitiveCellCheckbox/radio.html

@@ -1,6 +1,7 @@
 <template>
     <span class="slds-radio">
-        <input type="radio"
+        <input lwc:ref="input"
+               type="radio"
                name={computedOptionName}
                id="primitive-checkbox-radio-id"
                tabindex={internalTabIndex}
@@ -11,9 +12,9 @@
                disabled={isDisabled}
                onkeydown={handleRadioKeyDown}
                checked={isSelected}>
-        <label 
-            id={labelId} 
-            class="slds-radio__label" 
+        <label lwc:ref="label"
+            id={labelId}
+            class="slds-radio__label"
             for="primitive-checkbox-radio-id">
             <span class="slds-radio_faux"></span>
             <span class="slds-form-element__label slds-assistive-text">

package/src/lightning/primitiveCellEditableButton/primitiveCellEditableButton.html

@@ -1,5 +1,5 @@
 <template>
-    <button tabindex={tabIndex} class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small">
+    <button lwc:ref="button" tabindex={tabIndex} class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small">
         <lightning-primitive-icon
             icon-name="utility:edit"
             size="xx-small"

package/src/lightning/primitiveCellEditableButton/primitiveCellEditableButton.js

@@ -38,7 +38,7 @@ export default class PrivateCellEditableButton extends LightningElement {
 
     get htmlButton() {
         if (!this._htmlButton) {
-            this._htmlButton = this.template.querySelector('button');
+            this._htmlButton = this.refs.button;
         }
 
         return this._htmlButton;

package/src/lightning/primitiveCellFactory/bareCustomCell.html

@@ -1,6 +1,7 @@
 <template>
     <div class={computedCellDivClass} style={computedCssStyles}>
         <lightning-primitive-custom-cell
+            lwc:ref="customCell"
             types={types}
             keyboard-mode={keyboardMode}
             column-type={columnType}

package/src/lightning/primitiveCellFactory/cellWithStandardLayout.html

@@ -104,6 +104,7 @@
             <!-- custom type -->
             <template if:true={isCustomType}>
                 <lightning-primitive-custom-cell
+                      lwc:ref="customCell"
                       class={computedMarginClassWhenLeftIconExists}
                       types={types}
                       keyboard-mode={keyboardMode}

package/src/lightning/primitiveCellFactory/primitiveCellFactory.js

@@ -93,9 +93,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 =
@@ -283,7 +281,7 @@ export default class PrivateCellFactory extends PrimitiveDatatableCell {
             'slds-truncate':
                 columnType !== 'button-icon' && !isActionType && !_wrapText,
             'slds-hyphenate': _wrapText,
-            'slds-line-clamp': _wrapText && this.wrapTextMaxLines,
+            'slds-line-clamp': _wrapText,
             'ltr-content-in-rtl': document.dir === 'rtl' && this.isLtrType(),
         });
     }
@@ -357,8 +355,8 @@ export default class PrivateCellFactory extends PrimitiveDatatableCell {
     }
 
     get computedCssStyles() {
-        if (this._wrapText && this.wrapTextMaxLines) {
-            return `${'--lwc-lineClamp'}: ${this.wrapTextMaxLines}`;
+        if (this._wrapText) {
+            return `${'--lwc-lineClamp'}: ${this.wrapTextMaxLines || 'none'}`;
         }
         return null;
     }

package/src/lightning/primitiveColumnSorter/primitiveColumnSorter.html

@@ -12,6 +12,7 @@
                 <lightning-button-icon tooltip={i18n.moveDownTooltip} icon-name="utility:arrowdown" onclick={handleMoveDown} disabled={isDownDisabled} variant="border-filled" alternative-text="Arrow Down"></lightning-button-icon>
             </lightning-button-group>
             <lightning-combobox
+                lwc:ref="combobox"
                 name="column select"
                 disabled={rule.disableInputs}
                 placeholder={i18n.dropdownPlaceholder}

package/src/lightning/primitiveColumnSorter/primitiveColumnSorter.js

@@ -26,7 +26,7 @@ export default class PrimitiveColumnSorter extends LightningElement {
     @api
     get combobox() {
         if (!this._combobox) {
-            this._combobox = this.template.querySelector('lightning-combobox');
+            this._combobox = this.refs.combobox;
         }
         return this._combobox;
     }

package/src/lightning/primitiveDatatableIeditPanel/primitiveDatatableIeditPanel.html

@@ -1,6 +1,7 @@
 <template>
     <section
         if:true={visible}
+        lwc:ref="section"
         class="slds-popover slds-popover_edit"
         role="dialog"
         aria-label={dialogAriaLabel}
@@ -35,6 +36,7 @@
                 <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"
@@ -60,12 +62,12 @@
                         onclick={cancelEditing}>
                     </lightning-button>
                     <lightning-button
+                        lwc:ref="formLastElement"
                         label={i18n.apply}
                         style="margin-left: .25rem"
                         variant="brand"
                         onblur={handleTypeElemBlur}
                         onfocus={handleTypeElemFocus}
-                        data-form-last-element="true"
                         onclick={processSubmission}>
                     </lightning-button>
                 </div>

package/src/lightning/primitiveDatatableIeditPanel/primitiveDatatableIeditPanel.js

@@ -53,7 +53,7 @@ export default class PrimitiveDatatableIeditPanel extends LightningElement {
     get isMassEditChecked() {
         return (
             this.isMassEditEnabled &&
-            this.template.querySelector('[data-mass-selection="true"]').checked
+            this.refs.massSelectCheckbox.checked
         );
     }
 
@@ -95,7 +95,7 @@ export default class PrimitiveDatatableIeditPanel extends LightningElement {
      */
     @api
     getPositionedElement() {
-        return this.template.querySelector('section');
+        return this.refs.section;
     }
 
     /************************* PRIVATE GETTERS *************************/
@@ -279,7 +279,7 @@ export default class PrimitiveDatatableIeditPanel extends LightningElement {
     /************************* HELPER FUNCTIONS *************************/
 
     focusLastElement() {
-        this.template.querySelector('[data-form-last-element="true"]').focus();
+        this.refs.formLastElement.focus();
     }
 
     processSubmission() {

package/src/lightning/primitiveDatatableStatusBar/primitiveDatatableStatusBar.html

@@ -4,6 +4,7 @@
             <template if:true={showError}>
                 <!-- Error Tooltip -->
                 <lightning-primitive-datatable-tooltip
+                    lwc:ref="tooltip"
                     class="slds-button"
                     size="small"
                     variant="error"