use the utils function in uui button and popover container

Author: JesmoDev

packages/uui-button/lib/uui-button.element.ts

@@ -2,7 +2,10 @@ import {
   UUIHorizontalShakeAnimationValue,
   UUIHorizontalShakeKeyframes,
 } from '@umbraco-ui/uui-base/lib/animations';
-import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';
+import {
+  demandCustomElement,
+  findAncestorByAttributeValue,
+} from '@umbraco-ui/uui-base/lib/utils';
 import { FormControlMixin, LabelMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import {
@@ -527,7 +530,7 @@ export class UUIButtonElement extends FormControlMixin(
   #updatePopover = () => {
     if (!this.popoverContainerElement) return;
 
-    const popoverContainerElement = this.#findAncestorWithAttribute(
+    const popoverContainerElement = findAncestorByAttributeValue(
       this,
       'id',
       this.popoverContainerElement
@@ -541,31 +544,6 @@ export class UUIButtonElement extends FormControlMixin(
         popoverContainerElement.showPopover();
   };
 
-  #findAncestorWithAttribute(
-    element: HTMLElement,
-    attributeName: string,
-    attributeValue: string
-  ) {
-    while (element !== null && element.parentElement !== null) {
-      element = element.parentElement;
-
-      const elementHasAttribute =
-        element.hasAttribute(attributeName) &&
-        element.getAttribute(attributeName) === attributeValue;
-      const elementContainsAttribute =
-        element.querySelector(`[${attributeName}="${attributeValue}"]`) !==
-        null;
-      if (elementHasAttribute) {
-        return element;
-      } else if (elementContainsAttribute) {
-        return element.querySelector(
-          `[${attributeName}="${attributeValue}"]`
-        ) as HTMLElement;
-      }
-    }
-    return null;
-  }
-
   render() {
     return this.href
       ? html`

packages/uui-popover-container/lib/uui-popover-container.element.ts

@@ -1,4 +1,5 @@
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
+import { findAncestorByAttributeValue } from '@umbraco-ui/uui-base/lib/utils';
 import { css, html, LitElement } from 'lit';
 import { property, state } from 'lit/decorators.js';
 
@@ -91,7 +92,7 @@ export class UUIPopoverContainerElement extends LitElement {
   #onBeforeToggle = async (event: any) => {
     this._open = event.newState === 'open';
 
-    this.#targetElement = this.#findAncestorWithAttribute(
+    this.#targetElement = findAncestorByAttributeValue(
       this,
       'popovertarget',
       this.id
@@ -306,31 +307,6 @@ export class UUIPopoverContainerElement extends LitElement {
       `${oppositeDirection}-${position}` as PopoverContainerPlacement;
   }
 
-  #findAncestorWithAttribute(
-    element: HTMLElement,
-    attributeName: string,
-    attributeValue: string
-  ) {
-    while (element !== null && element.parentElement !== null) {
-      element = element.parentElement;
-
-      const elementHasAttribute =
-        element.hasAttribute(attributeName) &&
-        element.getAttribute(attributeName) === attributeValue;
-      const elementContainsAttribute =
-        element.querySelector(`[${attributeName}="${attributeValue}"]`) !==
-        null;
-      if (elementHasAttribute) {
-        return element;
-      } else if (elementContainsAttribute) {
-        return element.querySelector(
-          `[${attributeName}="${attributeValue}"]`
-        ) as HTMLElement;
-      }
-    }
-    return null;
-  }
-
   render() {
     return html`<slot></slot>`;
   }