lightning-base-components 1.18.1-alpha → 1.18.2-alpha

package/src/lightning/buttonMenu/buttonMenu.css

@@ -1,2 +1,2 @@
-/* @import 'lightning/sldsCommon';
-@import "./dropdown.slds.css"; */
+@import 'lightning/sldsCommon';
+@import './button-menu.slds.css';

package/src/lightning/buttonMenu/buttonMenu.html

@@ -14,7 +14,7 @@
         onmousedown={handleButtonMouseDown}
         tabindex={tabIndex}
         part="button button-icon">
-        
+
         <abbr if:true={isDraft} class="slds-indicator_unsaved slds-p-right_xx-small" title={draftAlternativeText}>*</abbr>
         {label}
 
@@ -28,7 +28,7 @@
     </button>
     <template if:true={_dropdownOpened}>
         <div
-            part="overlay dropdown" 
+            part="overlay dropdown"
             class={computedDropdownClass}
             onmousedown={handleDropdownMouseDown}
             onmouseup={handleDropdownMouseUp}

package/src/lightning/buttonMenu/buttonMenu.js

@@ -1,6 +1,7 @@
 import labelLoading from '@salesforce/label/LightningButtonMenu.loading';
 import labelShowMenu from '@salesforce/label/LightningButtonMenu.showMenu';
-import { api, LightningElement, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet } from 'lightning/utils';
 import {
     normalizeBoolean,
@@ -28,9 +29,7 @@ const i18n = {
     showMenu: labelShowMenu,
 };
 
-// CSS class and selectors for menu items
-const menuItemCSSClassName = 'slds-dropdown__item';
-const menuItemCSSSelector = `.slds-dropdown__list .${menuItemCSSClassName}`;
+const menuItemTagName = 'LIGHTNING-MENU-ITEM';
 
 const validMenuAlignments = [
     'left',
@@ -48,7 +47,7 @@ validMenuAlignments.push(...['auto', 'auto-right', 'auto-left']);
  * Represents a dropdown menu with a list of actions or functions.
  * @slot default Placeholder for menu-item
  */
-export default class LightningButtonMenu extends LightningElement {
+export default class LightningButtonMenu extends LightningShadowBaseClass {
     static delegatesFocus = true;
 
     /**
@@ -147,6 +146,7 @@ export default class LightningButtonMenu extends LightningElement {
     _needsFocusAfterRender = false;
 
     connectedCallback() {
+        super.connectedCallback();
         this._connected = true;
         this.keyboardInterface = this.menuKeyboardInterface();
 
@@ -158,14 +158,13 @@ export default class LightningButtonMenu extends LightningElement {
         if (this.isDraft) {
             this.classList.add('slds-is-unsaved');
         }
-
-        if (!this.template.synthetic) {
-            this.template.host.setAttribute('data-render-mode', 'shadow');
-        }
     }
 
     disconnectedCallback() {
         this._connected = false;
+        if (this._tooltip) {
+            this._tooltip.disconnect();
+        }
     }
 
     renderedCallback() {
@@ -718,7 +717,7 @@ export default class LightningButtonMenu extends LightningElement {
     }
 
     getMenuItems() {
-        return Array.from(this.querySelectorAll(menuItemCSSSelector));
+        return Array.from(this.querySelectorAll(menuItemTagName));
     }
 
     getMenuItemByIndex(index) {
@@ -733,10 +732,7 @@ export default class LightningButtonMenu extends LightningElement {
         let currentNode = element;
         const stopAtElement = this.template.querySelector("[role='menu']");
         while (currentNode !== stopAtElement) {
-            if (
-                currentNode.classList &&
-                currentNode.classList.contains(menuItemCSSClassName)
-            ) {
+            if (currentNode.tagName === menuItemTagName) {
                 return currentNode;
             }
             if (currentNode.parentNode) {