@odx/foundation 1.0.0-beta.83 → 1.0.0-beta.85

package/dist/components/dropdown/dropdown.d.ts

@@ -18,7 +18,7 @@ export declare class OdxDropdown extends PopoverHost {
     get options(): PopoverPlacementOptions;
     connectedCallback(): void;
     mountPopover(referenceElement: HTMLElement | null): void;
-    unmountPopover(referenceElement: HTMLElement | null): void;
+    unmountPopover(referenceElement: HTMLElement): void;
     protected render(): TemplateResult;
     protected willUpdate(props: PropertyValues<this>): void;
 }

package/dist/components/popover/popover-host.d.ts

@@ -6,8 +6,8 @@ export declare abstract class PopoverHost extends PopoverHost_base {
     #private;
     static readonly styles: import('lit').CSSResult;
     protected popoverElement: OdxPopover;
-    referenceElement: HTMLElement | null;
-    anchor: string;
+    set referenceElement(value: HTMLElement | null);
+    get referenceElement(): HTMLElement | null;
     placement: Placement;
     fpsLimit: number;
     get options(): PopoverPlacementOptions;
@@ -16,7 +16,7 @@ export declare abstract class PopoverHost extends PopoverHost_base {
     disconnectedCallback(): void;
     hasMountedPopover(element: HTMLElement): boolean;
     mountPopover(referenceElement: HTMLElement | null): void;
-    unmountPopover(_referenceElement: HTMLElement | null): void;
+    unmountPopover(_referenceElement: HTMLElement): void;
     isPopoverOpen(): boolean;
     showPopover(): Promise<void>;
     hidePopover(): void;

package/dist/components/popover/popover-observer.d.ts

@@ -2,11 +2,10 @@ import { PopoverHost } from './popover-host.js';
 export declare class PopoverObserver {
     #private;
     readonly host: PopoverHost;
-    readonly root: ShadowRoot | Document;
+    readonly root: Document;
     constructor(host: PopoverHost);
     hasMountedPopover(element: HTMLElement): boolean;
     observe(): void;
     disconnect(): void;
-    updateReferenceElements(): void;
 }
 //# sourceMappingURL=popover-observer.d.ts.map

package/dist/components/select/select.d.ts

@@ -10,7 +10,6 @@ declare global {
 export declare class OdxSelect extends ListboxFormControl<OptionControl> {
     #private;
     protected options: OdxOption[];
-    protected readonly trigger: HTMLElement;
     protected readonly dropdown: OdxDropdown;
     maxVisibleSelectedOptions: number;
     constructor();

package/dist/components/tooltip/tooltip.d.ts

@@ -29,7 +29,7 @@ export declare class OdxTooltip extends PopoverHost {
     connectedCallback(): void;
     onPopoverShow(): void;
     onBeforePopoverHide(): void;
-    mountPopover(referenceElement: HTMLElement | null): void;
+    mountPopover(referenceElement: HTMLElement): void;
     unmountPopover(referenceElement: HTMLElement): void;
     protected render(): TemplateResult;
     protected willUpdate(props: PropertyValues<this>): void;

package/dist/components.js

@@ -1,5 +1,5 @@
 import { _ as __decorateClass } from './_virtual_class-decorator-runtime.js';
-import { CustomElement, ExpandableItemManager, customElement, CanBeExpanded, InteractiveElement, getUniqueId, toAriaBooleanAttribute, Size, Variant, optionalAttr, InteractiveLink, getElementFromEvent, Shape, CanBeDisabled, optionalSlot, CheckboxFormControl, CheckboxGroupFormControl, SharedResizeObserver, findClosestDocument, Placement, waitForAnimations, PopoverPlacementOptions, computePopoverPlacement, getKeyInfo, FormControl, ActiveDescendantsController, getAssignedElement, parseDate, forwardEvent, OptionControl, toPx, RadioGroupFormControl, ListboxFormControl, IsDraggable, NumberFormControl, IS_DRAG_ACTIVE_ATTRIBUTE, DragController } from '@odx/foundation';
+import { CustomElement, ExpandableItemManager, customElement, CanBeExpanded, InteractiveElement, getUniqueId, toAriaBooleanAttribute, Size, Variant, optionalAttr, InteractiveLink, getElementFromEvent, Shape, CanBeDisabled, optionalSlot, CheckboxFormControl, CheckboxGroupFormControl, SharedResizeObserver, Placement, waitForAnimations, PopoverPlacementOptions, computePopoverPlacement, getKeyInfo, FormControl, ActiveDescendantsController, getAssignedElement, parseDate, forwardEvent, OptionControl, toPx, RadioGroupFormControl, ListboxFormControl, IsDraggable, NumberFormControl, IS_DRAG_ACTIVE_ATTRIBUTE, DragController } from '@odx/foundation';
 import { queryAssignedElements, property, query, state, queryAll } from 'lit/decorators.js';
 import { html, isServer, unsafeCSS, css, nothing } from 'lit';
 import { when } from 'lit/directives/when.js';
@@ -197,7 +197,7 @@ const _OdxActionButton = class _OdxActionButton extends OdxButton {
       ${when(
       !this.replaceContent && this.statusMessage,
       (statusMessage) => html`
-          <odx-tooltip anchor=${this.id} placement="top" .popover=${"manual"} .show=${this.isStatusMessageShown} timeout=${this.statusMessageTimeout}>
+          <odx-tooltip placement="top" .popover=${"manual"} .show=${this.isStatusMessageShown} timeout=${this.statusMessageTimeout}>
             <odx-text size="sm" strong>${statusMessage}</odx-text>
           </odx-tooltip>
         `
@@ -942,30 +942,28 @@ class PopoverObserver {
   #mutationObserver;
   constructor(host) {
     this.host = host;
-    this.root = findClosestDocument(host) ?? document;
-    this.#mutationObserver = new MutationObserver(async (mutations) => {
-      if (mutations.length === 0) return;
-      await 0;
-      this.updateReferenceElements();
-    });
+    this.root = host.ownerDocument ?? document;
   }
   hasMountedPopover(element) {
     return this.#referenceElements.has(element);
   }
   observe() {
-    this.#mutationObserver?.observe(this.root, { attributes: true, subtree: true, childList: true, attributeFilter: [popoverTargetAttribute] });
-    this.updateReferenceElements();
+    this.#mutationObserver ??= new MutationObserver((mutations) => {
+      if (mutations.length === 0) return;
+      this.#updateReferenceElements();
+    });
+    this.#mutationObserver.observe(this.root, { attributes: true, subtree: true, childList: true, attributeFilter: [popoverTargetAttribute] });
+    this.#updateReferenceElements();
   }
   disconnect() {
     this.#mutationObserver?.disconnect();
   }
-  updateReferenceElements() {
+  #updateReferenceElements() {
     for (const element of Array.from(this.root.querySelectorAll(`[${popoverTargetAttribute}]`))) {
-      if (this.#referenceElements.has(element)) continue;
       const popoverId = element.getAttribute(popoverTargetAttribute);
       if (popoverId !== this.host.id) continue;
       this.#referenceElements.set(element, popoverId);
-      this.host.mountPopover?.(element);
+      this.host.mountPopover(element);
     }
   }
 }
@@ -973,9 +971,8 @@ class PopoverObserver {
 class PopoverHost extends CanBeDisabled(CustomElement) {
   constructor() {
     super();
+    this.#currentReferenceElement = null;
     this.#openPopovers = /* @__PURE__ */ new WeakSet();
-    this.referenceElement = null;
-    this.anchor = "";
     this.placement = Placement.BOTTOM;
     this.fpsLimit = 60;
     this.#handleToggle = async (event) => {
@@ -1002,9 +999,17 @@ class PopoverHost extends CanBeDisabled(CustomElement) {
   static {
     this.styles = unsafeCSS(styles$Z);
   }
+  #currentReferenceElement;
   #openPopovers;
   #positionUpdater;
   #observer;
+  set referenceElement(value) {
+    if (this.#currentReferenceElement === value) return;
+    this.#currentReferenceElement = value;
+  }
+  get referenceElement() {
+    return this.#currentReferenceElement;
+  }
   get options() {
     return PopoverPlacementOptions({ arrowElement: this.popoverElement.arrowElement, placement: this.placement });
   }
@@ -1017,7 +1022,7 @@ class PopoverHost extends CanBeDisabled(CustomElement) {
     super.disconnectedCallback();
     this.#disconnectObserver();
     if (!this.referenceElement) return;
-    this.unmountPopover?.(this.referenceElement);
+    this.unmountPopover(this.referenceElement);
     this.hidePopover();
   }
   hasMountedPopover(element) {
@@ -1067,7 +1072,7 @@ class PopoverHost extends CanBeDisabled(CustomElement) {
   updateReferenceElementFromEvent(event) {
     const referenceElement = getElementFromEvent(event, (element) => this.hasMountedPopover(element));
     if (!referenceElement) return;
-    this.referenceElement = getElementFromEvent(event, (element) => this.hasMountedPopover(element));
+    this.referenceElement = referenceElement;
   }
   willUpdate(props) {
     super.willUpdate(props);
@@ -1094,10 +1099,7 @@ __decorateClass([
 ], PopoverHost.prototype, "popoverElement", 2);
 __decorateClass([
   property({ attribute: false })
-], PopoverHost.prototype, "referenceElement", 2);
-__decorateClass([
-  property({ reflect: true, useDefault: true })
-], PopoverHost.prototype, "anchor", 2);
+], PopoverHost.prototype, "referenceElement", 1);
 __decorateClass([
   property({ reflect: true, useDefault: true })
 ], PopoverHost.prototype, "placement", 2);
@@ -1141,14 +1143,14 @@ const _OdxDropdown = class _OdxDropdown extends PopoverHost {
     this.id ||= getUniqueId("odx-dropdown");
   }
   mountPopover(referenceElement) {
-    super.mountPopover?.(referenceElement);
+    super.mountPopover(referenceElement);
     if (this.disabled || !referenceElement) return;
     this.#updateAriaAttributes(referenceElement, this.id);
     referenceElement.addEventListener("click", this.#handleClick);
     referenceElement.addEventListener("keydown", this.#handleKeyboardEvent);
   }
   unmountPopover(referenceElement) {
-    super.unmountPopover?.(referenceElement);
+    super.unmountPopover(referenceElement);
     if (!referenceElement) return;
     this.#updateAriaAttributes(referenceElement, null);
     referenceElement.removeEventListener("click", this.#handleClick);
@@ -1168,7 +1170,9 @@ const _OdxDropdown = class _OdxDropdown extends PopoverHost {
     }
     if (props.has("disabled")) {
       if (this.disabled) {
-        this.unmountPopover(this.referenceElement);
+        if (this.referenceElement) {
+          this.unmountPopover(this.referenceElement);
+        }
       } else {
         this.mountPopover(this.referenceElement);
       }
@@ -2499,14 +2503,14 @@ class OdxMenu extends PopoverHost {
     this.role ||= "menu";
   }
   mountPopover(referenceElement) {
-    super.mountPopover?.(referenceElement);
+    super.mountPopover(referenceElement);
     referenceElement?.addEventListener("click", this.#handleReferenceInteraction);
     referenceElement?.addEventListener("keydown", this.#handleReferenceKeyDown);
   }
   unmountPopover(referenceElement) {
     referenceElement.removeEventListener("keydown", this.#handleReferenceKeyDown);
     referenceElement.removeEventListener("click", this.#handleReferenceInteraction);
-    super.unmountPopover?.(referenceElement);
+    super.unmountPopover(referenceElement);
   }
   onBeforePopoverShow() {
     this.#tabindexController.update({ elements: () => this.getItems() });
@@ -3292,7 +3296,7 @@ const _OdxSelect = class _OdxSelect extends ListboxFormControl {
     )}
         <odx-icon class="indicator" name="core::chevron-down"></odx-icon>
       </div>
-      <odx-dropdown part="dropdown" role="listbox" tabindex="-1" ?disabled=${this.disabled || this.readonly} match-reference-width .referenceElement=${this.trigger}>
+      <odx-dropdown part="dropdown" role="listbox" tabindex="-1" ?disabled=${this.disabled || this.readonly} match-reference-width>
         <slot @slotchange=${this.#handleSlotChange}></slot>
       </odx-dropdown>
     `;
@@ -3328,9 +3332,6 @@ const _OdxSelect = class _OdxSelect extends ListboxFormControl {
 __decorateClass([
   queryAssignedElements({ selector: '[role="option"]', flatten: true })
 ], _OdxSelect.prototype, "options", 2);
-__decorateClass([
-  query(".base", true)
-], _OdxSelect.prototype, "trigger", 2);
 __decorateClass([
   query(OdxDropdown.tagName, true)
 ], _OdxSelect.prototype, "dropdown", 2);
@@ -4346,28 +4347,22 @@ const _OdxTooltip = class _OdxTooltip extends PopoverHost {
     clearTimeout(this.#timeout);
   }
   mountPopover(referenceElement) {
-    super.mountPopover?.(referenceElement);
+    super.mountPopover(referenceElement);
     if (!referenceElement) return;
     this.#updateAriaAttributes(referenceElement, this.id);
     if (this.popover === "manual") return;
-    this.addEventListener("mouseleave", this.#handleMouseEvents);
     referenceElement.addEventListener("mouseenter", this.#handleMouseEvents);
     referenceElement.addEventListener("mouseleave", this.#handleReferenceMouseLeave);
     referenceElement.addEventListener("keyup", this.#handleKeyboardFocus);
     referenceElement.addEventListener("keydown", this.#handleKeyboardFocus);
-    referenceElement.addEventListener("keyup", this.#handleKeyboardFocus);
-    referenceElement.addEventListener("keydown", this.#handleKeyboardFocus);
   }
   unmountPopover(referenceElement) {
-    super.unmountPopover?.(referenceElement);
+    super.unmountPopover(referenceElement);
     this.#updateAriaAttributes(referenceElement, null);
     referenceElement.removeEventListener("keyup", this.#handleKeyboardFocus);
     referenceElement.removeEventListener("keydown", this.#handleKeyboardFocus);
-    this.removeEventListener("mouseleave", this.#handleMouseEvents);
     referenceElement.removeEventListener("mouseenter", this.#handleMouseEvents);
     referenceElement.removeEventListener("mouseleave", this.#handleReferenceMouseLeave);
-    referenceElement.removeEventListener("keyup", this.#handleKeyboardFocus);
-    referenceElement.removeEventListener("keydown", this.#handleKeyboardFocus);
   }
   render() {
     return html`

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@odx/foundation",
   "description": "A library of Web Component building blocks for ODX",
-  "version": "1.0.0-beta.83",
+  "version": "1.0.0-beta.85",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://odx.draeger.com",