@fabric-msft/fabric-web 4.0.0-beta.1 → 5.0.0

package/dist/esm/components/popover/popover.js

@@ -1,14 +1,16 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
+import { attr, observable, nullableNumberConverter, FASTElement, css } from '@microsoft/fast-element';
+import { uniqueId } from '@microsoft/fast-web-utilities';
+import { debounce } from '../../utils/debounce.js';
+import { PositioningShorthand, PopoverRepositionModes, PopoverEventNames, PopoverPositions } from './popover.options.js';
+import { Positioning } from './positioning.js';
+
+var __decorate = globalThis && globalThis.__decorate || function (decorators, target, key, desc) {
+  var c = arguments.length,
+    r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+    d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { attr, css, FASTElement, nullableNumberConverter, observable } from "@microsoft/fast-element";
-import { uniqueId } from "@microsoft/fast-web-utilities";
-import { debounce } from "../../util/debounce";
-import { PopoverEventNames, PopoverPositions, PopoverRepositionModes, PositioningShorthand } from "./popover.options";
-import { Positioning } from "./positioning";
 const TRANSITION_DURATION_DEFAULT = 100;
 const TRANSITION_DELAY_DEFAULT = 0;
 /**
@@ -31,7 +33,6 @@ const TRANSITION_DELAY_DEFAULT = 0;
  * @attr {string} target-id - The ID of the target element.
  * @attr {PopoverRepositionMode} reposition-mode - The mode for repositioning the popover.
  * @attr {boolean} open - Whether the popover is open.
- * @attr {string} overflow-boundary-selector - The selector for the overflow boundary container.
  * @attr {number} transition-duration - The duration of the transition of the popover. The default value is 100.
  * @attr {number} transition-delay - The delay of the transition of the popover. The default value is 0.
  *
@@ -43,8 +44,7 @@ const TRANSITION_DELAY_DEFAULT = 0;
  * @prop {Array<PositioningShorthandValues>} openPositions - The array of open positions based on the collision edge.
  * @prop {HTMLPopoverElement | undefined} popoverReference - The reference to the popover element.
  * @prop {string | undefined} popoverRole - An optional user-defined role for the popover floating content element.
- * @prop {Element | null | undefined} overflowBoundaryRef - The boundary container of the popover for repositioning.
- * @prop {string | undefined} overflowBoundarySelector - The selector for the overflow boundary container.
+ * @prop {HTMLElement | undefined} overflowBoundary - The boundary container element of the popover for repositioning.
  *
  * @slot popover-trigger - Slot for the popover trigger element.
  * @slot popover-content - Slot for the popover content.
@@ -65,708 +65,657 @@ const TRANSITION_DELAY_DEFAULT = 0;
  * @method createPositioningManager - Creates the positioning manager for the popover.
  * @method removeEventListeners - Removes event listeners from the popover.
  *
- * @fires hide - Emits when the popover is hidden.
- * @fires show - Emits when the popover is shown.
- * @fires toggle - Emits when the popover is toggled.
- * @fires mouseEnter - Emits when the mouse enters the popover.
- * @fires mouseLeave - Emits when the mouse leaves the popover.
+ * @fires hide-popover - Emits when the popover is hidden.
+ * @fires show-popover - Emits when the popover is shown.
+ * @fires toggle-popover - Emits when the popover is toggled.
+ * @fires mouse-enter-popover - Emits when the mouse enters the popover.
+ * @fires mouse-leave-popover - Emits when the mouse leaves the popover.
  *
  * @extends FASTElement
  * @tagname fabric-popover
  * @public
  */
-export class Popover extends FASTElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * Whether the popover has a beak.
-         * @public
-         * @type {boolean}
-         * @attr
-         */
-        this.beak = false;
-        /**
-         * ## nonClickable
-         *
-         * controls whether the popover anchor is not clickable. When set to true, the popover will not close when the user clicks the trigger element.
-         *
-         * @public
-         * @type {boolean}
-         * @attr non-clickable
-         * @default true
-         */
-        this.nonClickable = false;
-        /**
-         * The size of the popover.
-         * @public
-         * @type {PopoverSize}
-         * @attr
-         */
-        this.size = "medium";
-        /**
-         * The mode of the popover. In auto mode, the popover closes when the user clicks outside of it. In manual mode, the popover stays open.
-         * @public
-         * @type {PopoverMode}
-         * @attr
-         */
-        this.mode = "manual";
-        /**
-         * The position of the popover.
-         * @public
-         * @type {PositioningShorthandValues}
-         * @attr
-         */
-        this.position = PositioningShorthand.belowCenter;
-        this.refsLoaded = false;
-        this.refsLoadedChanged = () => {
-            this.addTransitionStyles();
-        };
-        /**
-         * transitionDuration
-         *
-         * @summary - set the duration (in milliseconds) of popover transition for opening and close
-         */
-        this.transitionDuration = TRANSITION_DURATION_DEFAULT;
-        /**
-         * transitionDelay
-         *
-         * @summary - set the delay (in milliseconds) of popover transition for opening and close
-         */
-        this.transitionDelay = TRANSITION_DELAY_DEFAULT;
-        /**
-         * ## transitionComplete
-         *
-         * @summary - a boolean that is set to true when the transition is complete
-         */
-        this.transitionComplete = true;
-        /**
-         * ## onTransitionEnd
-         */
-        this.onTransitionEnd = () => {
-            if (!this.transitionComplete) {
-                this.transitionComplete = true;
-            }
-        };
-        /**
-         * ## onTransitionStart
-         */
-        this.onTransitionStart = () => {
-            if (this.transitionComplete) {
-                this.transitionComplete = false;
-            }
-        };
-        /**
-         * The mode for repositioning the popover.
-         * @public
-         * @type {PopoverRepositionMode}
-         * @attr reposition-mode
-         * @default flip
-         */
-        this.repositionMode = PopoverRepositionModes.flip;
-        /**
-         * ## openPositions
-         *
-         * @summary The array of open positions based on the collision edge.
-         *
-         * @public
-         * @type {Array<PositioningShorthandValues>}
-         * @observable
-         */
-        this.openPositions = [];
-        /**
-         * ## open
-         *
-         * @summary Opens and closes the popover. It's used to control the popover from the outside. However, it's not recommended to use this property to control the popover before load. To control the popover correctly, wait until the window has fully loaded before opening the popover. Whether the popover is open.
-         * @public
-         * @type {boolean}
-         * @attr
-         * @default false
-         */
-        this.open = false;
-        /**
-         * Registers the overflow boundary if the selector is set.
-         * @private
-         */
-        this.registerOverflowBoundary = () => {
-            if (this.overflowBoundarySelector) {
-                this.overflowBoundaryRef = document.querySelector(this.overflowBoundarySelector);
-            }
-        };
-        /**
-         * Hides the popover.
-         * @public
-         */
-        this.hidePopover = () => {
-            this.open = false;
-            this.emitHideEvent();
-        };
-        /**
-         * Shows the popover.
-         * @public
-         */
-        this.showPopover = () => {
-            this.open = true;
-            this.emitShowEvent();
-        };
-        /**
-         * Toggles the popover open state.
-         * @public
-         */
-        this.togglePopover = () => {
-            this.open = !this.open;
-            this.emitToggleEvent();
-            return this.open;
-        };
-        /**
-         * Emits the hide event for the popover.
-         * @public
-         */
-        this.emitHideEvent = () => {
-            var _a;
-            (_a = this.popoverReference) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent(PopoverEventNames.hide, {
-                bubbles: true,
-                composed: true,
-                detail: {
-                    target: this,
-                    open: this.open,
-                    newState: "closed"
-                }
-            }));
-        };
-        /**
-         * Emits the show event for the popover.
-         * @public
-         */
-        this.emitShowEvent = () => {
-            var _a;
-            (_a = this.popoverReference) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent(PopoverEventNames.show, {
-                bubbles: true,
-                composed: true,
-                detail: {
-                    target: this,
-                    open: this.open,
-                    newState: "open"
-                }
-            }));
-        };
-        /**
-         * Emits the mouse enter event for the popover.
-         * @public
-         */
-        this.emitMouseEnterEvent = () => {
-            this.dispatchEvent(new CustomEvent(PopoverEventNames.mouseEnter, {
-                bubbles: true,
-                composed: true,
-                detail: {
-                    target: this,
-                    open: this.open,
-                    newState: "open"
-                }
-            }));
-        };
-        /**
-         * Emits the mouse leave event for the popover.
-         * @public
-         */
-        this.emitMouseLeaveEvent = () => {
-            this.dispatchEvent(new CustomEvent(PopoverEventNames.mouseLeave, {
-                bubbles: true,
-                detail: {
-                    target: this,
-                    open: this.open,
-                    newState: "closed"
-                }
-            }));
-        };
-        /**
-         * ## addMouseOverEventListeners
-         *
-         * @summary Adds event listeners to the popoverReference to emit mouseEnter and mouseLeave events. Adds mouse over event listeners to the popover.
-         * @private
-         */
-        this.addMouseOverEventListeners = () => {
-            var _a, _b, _c, _d;
-            (_a = this.popoverReference) === null || _a === void 0 ? void 0 : _a.addEventListener("transitionstart", this.onTransitionStart);
-            (_b = this.popoverReference) === null || _b === void 0 ? void 0 : _b.addEventListener("transitionend", this.onTransitionEnd);
-            (_c = this.popoverReference) === null || _c === void 0 ? void 0 : _c.addEventListener("mouseenter", this.emitMouseEnterEvent);
-            (_d = this.popoverReference) === null || _d === void 0 ? void 0 : _d.addEventListener("mouseleave", this.emitMouseLeaveEvent);
-        };
-        /**
-         * Removes mouse over event listeners from the popover.
-         * @private
-         */
-        this.removeMouseOverEventListeners = () => {
-            var _a, _b, _c, _d;
-            (_a = this.popoverReference) === null || _a === void 0 ? void 0 : _a.removeEventListener("transitionstart", this.onTransitionStart);
-            (_b = this.popoverReference) === null || _b === void 0 ? void 0 : _b.removeEventListener("transitionend", this.onTransitionEnd);
-            (_c = this.popoverReference) === null || _c === void 0 ? void 0 : _c.removeEventListener("mouseenter", this.emitMouseEnterEvent);
-            (_d = this.popoverReference) === null || _d === void 0 ? void 0 : _d.removeEventListener("mouseleave", this.emitMouseLeaveEvent);
-        };
-        /**
-         * Updates the popover position.
-         * @private
-         */
-        this.updatePopoverPosition = () => {
-            this.observePopoverOverflow();
-        };
-        /**
-         * ## handleWindowChanges
-         *
-         * @summary debounced method to handle window changes. It observes the popover for overflow and repositions the popover when the window is resized or the overflowBoundary is scrolled. Handles window changes with a debounce.
-         * @private
-         */
-        this.handleWindowChanges = debounce(() => {
-            var _a;
-            const popover = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".popover");
-            if (popover) {
-                // The reason for adding and removing the transition styles is to prevent the popover from animating when the window is resized
-                this.removeTransitionStyles();
-            }
-            this.updatePopoverPosition();
-            setTimeout(() => {
-                if (popover) {
-                    // The reason for adding and removing the transition styles is to prevent the popover from animating when the window is resized
-                    this.addTransitionStyles();
-                }
-            }, 1000);
-        }, 50);
-        /**
-         * Handles window click events.
-         * @private
-         */
-        this.handleWindowClick = (event) => {
-            var _a;
-            if (this.anchorReferences &&
-                ((_a = this.anchorReferences[0]) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
-                return;
-            }
-            else if (this.open) {
-                this.hidePopover();
-            }
-        };
-        /**
-         * ## createOverflowHandler
-         *
-         * @summary handles the overflow of the popover based on the overflowBoundarySelector. Calls handleOverflow when the popover collides with its container or user defined overflowed boundary. Creates the overflow handler based on the overflow boundary selector.
-         * @private
-         */
-        this.createOverflowHandler = () => {
-            const options = { root: document };
-            if (this.overflowBoundaryRef) {
-                options.root = this.overflowBoundaryRef;
-            }
-            this.intersectionObserver = new IntersectionObserver(this.handleOverflow, options);
-        };
-        /**
-         * ## handleOverflow
-         *
-         * @summary Repositions the popover when it collides with its container or user defined overflowed boundary. Handles overflow collisions with the popover. Repositions the popover when it collides with its container or defined boundary. Called by the intersectionObserver in createOverflowHandler.
-         * @private
-         * @param {Array<IntersectionObserverEntry>} entries - The entries to observe.
-         */
-        this.handleOverflow = (entries) => {
-            if (this.positioning) {
-                this.positioning.position = this.originalPopoverPosition || this.position;
-            }
-            entries.forEach((entry) => {
-                var _a, _b;
-                if (entry.intersectionRatio < 1 && this.positioning) {
-                    this.openPositions =
-                        this.positioning.findOpenPositionsFromCollision(entry);
-                    if (((_a = this.openPositions) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-                        this.repositionPopover(this.openPositions);
-                    }
-                }
-                else if (((_b = this.openPositions) === null || _b === void 0 ? void 0 : _b.length) > 0) {
-                    this.releasePositions();
-                }
-            });
-        };
-        /**
-         * ## repositionPopover
-         *
-         * @summary Updates the position of the popover based on popover collisions. Repositions the popover based on collisions.
-         * @private
-         * @param {Array<PositioningShorthandValues>} openPositions - The array of open positions.
-         */
-        this.repositionPopover = (openPositions) => {
-            this.position = openPositions[0];
-            if (this.positioning) {
-                this.positioning.position = this.position;
-            }
-        };
-    }
-    nonClickableChanged() {
-        this.processAnchorEventListeners();
-    }
+class Popover extends FASTElement {
+  constructor() {
+    super(...arguments);
     /**
-     * Handles changes to the anchor references.
-     * Adds anchor attributes and event listeners when the anchor is added to the DOM.
+     * Whether the popover has a beak.
      * @public
+     * @type {boolean}
+     * @attr
      */
-    anchorReferencesChanged() {
-        this.initializeTargetId();
-        this.processAnchorEventListeners();
-        this.checkAllLoaded();
-    }
+    this.beak = false;
     /**
-     * ## checkAllLoaded
+     * ## nonClickable
      *
-     * @summary checks if all the refs are loaded. If they are, it sets the refsLoaded property to true.
+     * controls whether the popover anchor is not clickable. When set to true, the popover will not close when the user clicks the trigger element.
+     *
+     * @public
+     * @type {boolean}
+     * @attr non-clickable
+     * @default true
      */
-    checkAllLoaded() {
-        if (this.popoverReference &&
-            this.anchorReferences &&
-            this.anchorReferences.length > 0 &&
-            this.transitionDuration !== undefined &&
-            this.transitionDelay !== undefined) {
-            this.refsLoaded = true;
-        }
-    }
-    transitionDurationChanged() {
-        this.addTransitionStyles();
-    }
+    this.nonClickable = false;
     /**
-     * ## transitionDelayChanged
+     * The size of the popover.
+     * @public
+     * @type {PopoverSize}
+     * @attr
      */
-    transitionDelayChanged() {
-        this.addTransitionStyles();
-    }
+    this.size = "medium";
     /**
-     * ## addTransitionStyles
+     * The mode of the popover. In auto mode, the popover closes when the user clicks outside of it. In manual mode, the popover stays open.
+     * @public
+     * @type {PopoverMode}
+     * @attr
+     */
+    this.mode = "manual";
+    /**
+     * The position of the popover.
+     * @public
+     * @type {PositioningShorthandValues}
+     * @attr
+     */
+    this.position = PositioningShorthand.belowCenter;
+    this.refsLoaded = false;
+    this.refsLoadedChanged = () => {
+      this.addTransitionStyles();
+    };
+    /**
+     * transitionDuration
      *
-     * @summary - adds the transition styles to the popover element
+     * @summary - set the duration (in milliseconds) of popover transition for opening and close
      */
-    addTransitionStyles() {
-        var _a;
-        if (this.transitionDelay !== undefined &&
-            this.transitionDuration !== undefined) {
-            const newStyles = css /**css*/ `
-        :host {
-          --popoverTransition: ${this.transitionDuration.toString()}ms;
-          --popoverTransitionDelay: ${this.transitionDelay.toString()}ms;
-        }
-      `;
-            if (newStyles.styles[0] !== ((_a = this.styles) === null || _a === void 0 ? void 0 : _a.styles[0])) {
-                this.styles = newStyles;
-                this.$fastController.addStyles(this.styles);
-            }
-        }
-    }
+    this.transitionDuration = TRANSITION_DURATION_DEFAULT;
+    /**
+     * transitionDelay
+     *
+     * @summary - set the delay (in milliseconds) of popover transition for opening and close
+     */
+    this.transitionDelay = TRANSITION_DELAY_DEFAULT;
     /**
-     * ## removeTransitionStyles
+     * ## transitionComplete
      *
-     * @summary - removes the transition styles from the popover element
+     * @summary - a boolean that is set to true when the transition is complete
+     */
+    this.transitionComplete = true;
+    /**
+     * ## onTransitionEnd
      */
-    removeTransitionStyles() {
-        this.styles = css /**css*/ `
-      :host {
-        --popoverTransition: 0ms;
-        --popoverTransitionDelay: 0ms;
+    this.onTransitionEnd = () => {
+      if (!this.transitionComplete) {
+        this.transitionComplete = true;
       }
-    `;
-        this.$fastController.addStyles(this.styles);
-    }
+    };
+    /**
+     * ## onTransitionStart
+     */
+    this.onTransitionStart = () => {
+      if (this.transitionComplete) {
+        this.transitionComplete = false;
+      }
+    };
+    /**
+     * The mode for repositioning the popover.
+     * @public
+     * @type {PopoverRepositionMode}
+     * @attr reposition-mode
+     * @default flip
+     */
+    this.repositionMode = PopoverRepositionModes.flip;
     /**
      * ## openPositions
      *
-     * @summary An array of open positions based on the collisionEdge Handles changes to the reposition mode.
+     * @summary The array of open positions based on the collision edge.
+     *
      * @public
+     * @type {Array<PositioningShorthandValues>}
+     * @observable
      */
-    repositionModeChanged() {
-        if (this.positioning) {
-            this.positioning.repositionMode = this.repositionMode;
-        }
-    }
+    this.openPositions = [];
     /**
-     * ## openChanged
+     * ## open
      *
-     * @summary Adds and removes many of the event listeners for the popover. Handles changes to the open state of the popover. Opens and closes the popover, controlling it from the outside. It's recommended to wait until the window has fully loaded before opening the popover. Adds and removes many of the event listeners.
+     * @summary Opens and closes the popover. It's used to control the popover from the outside. However, it's not recommended to use this property to control the popover before load. To control the popover correctly, wait until the window has fully loaded before opening the popover. Whether the popover is open.
      * @public
+     * @type {boolean}
+     * @attr
+     * @default false
      */
-    openChanged() {
-        var _a;
-        if (this.popoverReference) {
-            if (!this.originalPopoverPosition) {
-                this.originalPopoverPosition = this.position;
-            }
-            if (this.open) {
-                this.popoverReference.classList.add("popover-open");
-                this.addActiveHandlers();
-                if (this.positioning &&
-                    !this.positioning.checkPosition(this.position)) {
-                    const positions = this.positioning.getOpenPositions();
-                    this.position = positions[0];
-                }
-            }
-            else {
-                (_a = this.popoverReference) === null || _a === void 0 ? void 0 : _a.classList.remove("popover-open");
-                this.removeEventListeners();
-            }
-        }
-    }
+    this.open = false;
     /**
-     * ## addActiveHandlers
-     *
-     * @summary Adds the event listeners for the popover when it is open. Adds active handlers for the popover.
-     * @private
+     * Hides the popover.
+     * @public
      */
-    addActiveHandlers() {
-        this.addRepositioningHandlers();
-        this.addOverlayEventListeners();
-        this.addMouseOverEventListeners();
-        this.createPositioningManager();
-    }
-    popoverReferenceChanged() {
-        this.checkAllLoaded();
-    }
+    this.hidePopover = () => {
+      this.open = false;
+      this.emitHideEvent();
+    };
     /**
-     * ## initializeTargetId
-     *
-     * @summary initializes the targetId with a random id if it's not set by the user. The usefulness of this may not be apparent by the code. When the aria-describedby attribute of the trigger is set to the id of the target (popover), the aria-describedby content will reflect the content of the popover.
-     * Initializes the target ID with a random ID if it's not set by the user.
-     * @private
+     * Shows the popover.
+     * @public
      */
-    initializeTargetId() {
-        if (!this.targetId) {
-            const popoverId = uniqueId("popover-target-");
-            this.targetId = popoverId;
-        }
-        if (this.anchorReferences && this.anchorReferences.length > 0) {
-            this.anchorReferences[0].setAttribute("aria-describedby", this.targetId);
-        }
-    }
+    this.showPopover = () => {
+      this.open = true;
+      this.emitShowEvent();
+    };
     /**
-     * Handles changes to the overflow boundary reference.
+     * Toggles the popover open state.
      * @public
      */
-    overflowBoundaryRefChanged() {
-        this.addOverflowBoundaryEventListeners();
-    }
+    this.togglePopover = () => {
+      this.open = !this.open;
+      this.emitToggleEvent();
+      return this.open;
+    };
     /**
-     * Emits the toggle event for the popover.
+     * Emits the hide event for the popover.
      * @public
      */
-    emitToggleEvent() {
-        var _a;
-        (_a = this.popoverReference) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent(PopoverEventNames.toggle, {
-            bubbles: true,
-            composed: true,
-            detail: {
-                target: this,
-                open: this.open,
-                newState: this.open ? "open" : "closed"
-            }
-        }));
-    }
+    this.emitHideEvent = () => {
+      var _a;
+      (_a = this.popoverReference) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent(PopoverEventNames.hide, {
+        bubbles: true,
+        composed: true,
+        detail: {
+          target: this,
+          open: this.open,
+          newState: "closed"
+        }
+      }));
+    };
     /**
-     * addAnchorEventListeners
-     *
-     * @summary the popover defaults to adding a click event listener on any clickable anchor reference
-     * Adds event listeners to the anchor.
-     * @private
+     * Emits the show event for the popover.
+     * @public
      */
-    processAnchorEventListeners() {
-        if (this.anchorReferences && this.anchorReferences.length) {
-            if (this.nonClickable === false) {
-                this.anchorReferences[0].addEventListener("click", this.togglePopover);
-            }
-            else {
-                this.anchorReferences[0].removeEventListener("click", this.togglePopover);
-            }
+    this.emitShowEvent = () => {
+      var _a;
+      (_a = this.popoverReference) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent(PopoverEventNames.show, {
+        bubbles: true,
+        composed: true,
+        detail: {
+          target: this,
+          open: this.open,
+          newState: "open"
         }
-    }
+      }));
+    };
     /**
-     * Adds overflow boundary event listeners if the overflow boundary exists.
-     * @private
+     * Emits the mouse enter event for the popover.
+     * @public
      */
-    addOverflowBoundaryEventListeners() {
-        if (this.overflowBoundaryRef) {
-            this.overflowBoundaryRef.addEventListener("scroll", this.handleWindowChanges);
+    this.emitMouseEnterEvent = () => {
+      this.dispatchEvent(new CustomEvent(PopoverEventNames.mouseEnter, {
+        bubbles: true,
+        composed: true,
+        detail: {
+          target: this,
+          open: this.open,
+          newState: "open"
         }
-    }
+      }));
+    };
     /**
-     * Adds window event listeners.
-     * @private
+     * Emits the mouse leave event for the popover.
+     * @public
      */
-    addWindowEventListeners() {
-        window.addEventListener("resize", this.handleWindowChanges);
-        window.addEventListener("scroll", this.handleWindowChanges);
-    }
+    this.emitMouseLeaveEvent = () => {
+      this.dispatchEvent(new CustomEvent(PopoverEventNames.mouseLeave, {
+        bubbles: true,
+        composed: true,
+        detail: {
+          target: this,
+          open: this.open,
+          newState: "closed"
+        }
+      }));
+    };
     /**
-     * Removes window event listeners.
+     * ## addMouseOverEventListeners
+     *
+     * @summary Adds event listeners to the popoverReference to emit mouseEnter and mouseLeave events. Adds mouse over event listeners to the popover.
      * @private
      */
-    removeWindowEventListeners() {
-        window.removeEventListener("resize", this.handleWindowChanges);
-        window.removeEventListener("scroll", this.handleWindowChanges);
-    }
+    this.addMouseOverEventListeners = () => {
+      var _a, _b, _c, _d;
+      (_a = this.popoverReference) === null || _a === void 0 ? void 0 : _a.addEventListener("transitionstart", this.onTransitionStart);
+      (_b = this.popoverReference) === null || _b === void 0 ? void 0 : _b.addEventListener("transitionend", this.onTransitionEnd);
+      (_c = this.popoverReference) === null || _c === void 0 ? void 0 : _c.addEventListener("mouseenter", this.emitMouseEnterEvent);
+      (_d = this.popoverReference) === null || _d === void 0 ? void 0 : _d.addEventListener("mouseleave", this.emitMouseLeaveEvent);
+    };
     /**
-     * ## addOverlayEventListeners
-     *
-     * @summary Adds event listeners to the window or overflowBoundaryRef to close the popover when the user clicks outside of the popover. Adds overlay event listeners.
+     * Removes mouse over event listeners from the popover.
      * @private
      */
-    addOverlayEventListeners() {
-        if (this.overflowBoundaryRef && this.mode === "auto") {
-            this.overflowBoundaryRef.addEventListener("click", this.handleWindowClick);
-        }
-        else if (this.mode === "auto") {
-            document.addEventListener("click", this.handleWindowClick);
-        }
-    }
+    this.removeMouseOverEventListeners = () => {
+      var _a, _b, _c, _d;
+      (_a = this.popoverReference) === null || _a === void 0 ? void 0 : _a.removeEventListener("transitionstart", this.onTransitionStart);
+      (_b = this.popoverReference) === null || _b === void 0 ? void 0 : _b.removeEventListener("transitionend", this.onTransitionEnd);
+      (_c = this.popoverReference) === null || _c === void 0 ? void 0 : _c.removeEventListener("mouseenter", this.emitMouseEnterEvent);
+      (_d = this.popoverReference) === null || _d === void 0 ? void 0 : _d.removeEventListener("mouseleave", this.emitMouseLeaveEvent);
+    };
     /**
-     * Removes overlay event listeners.
+     * Updates the popover position.
      * @private
      */
-    removeOverlayEventListeners() {
-        if (this.overflowBoundaryRef && this.mode === "auto") {
-            this.overflowBoundaryRef.removeEventListener("click", this.handleWindowClick);
-        }
-        else if (this.mode === "auto") {
-            document.removeEventListener("click", this.handleWindowClick);
-        }
-    }
+    this.updatePopoverPosition = () => {
+      this.observePopoverOverflow();
+    };
     /**
-     * ## addRepositioningHandlers
+     * ## handleWindowChanges
      *
-     * @summary Adds event listeners to the window and overflowBoundaryRef to reposition the popover when the window is resized or the overflowBoundaryRef is scrolled. Adds repositioning handlers to the popover.
-     * @public
+     * @summary debounced method to handle window changes. It observes the popover for overflow and repositions the popover when the window is resized or the overflowBoundary is scrolled. Handles window changes with a debounce.
+     * @private
      */
-    addRepositioningHandlers() {
-        if (this.repositionMode !== "none") {
-            this.registerOverflowBoundary();
-            this.createOverflowHandler();
-            this.addWindowEventListeners();
+    this.handleWindowChanges = debounce(() => {
+      var _a;
+      const popover = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".popover");
+      if (popover) {
+        // The reason for adding and removing the transition styles is to prevent the popover from animating when the window is resized
+        this.removeTransitionStyles();
+      }
+      this.updatePopoverPosition();
+      setTimeout(() => {
+        if (popover) {
+          // The reason for adding and removing the transition styles is to prevent the popover from animating when the window is resized
+          this.addTransitionStyles();
         }
-    }
+      }, 1000);
+    }, 50);
     /**
-     * ## addPositioningManager
-     *
-     * @summary Creates a new positioning manager for the popover. The positioning manager is used to calculate the position of the popover based on the anchor and the popover's collision with the window or overflowBoundaryRef. Creates the positioning manager for the popover.
-     * @public
+     * Handles window click events.
+     * Uses composedPath() to properly detect clicks inside shadow DOM triggers.
+     * @private
      */
-    createPositioningManager() {
-        var _a;
-        if (this.popoverReference && this.repositionMode !== "none") {
-            this.positioning = new Positioning({
-                repositionMode: this.repositionMode,
-                popoverReference: this.popoverReference,
-                anchorReference: (_a = this.anchorReferences) === null || _a === void 0 ? void 0 : _a[0],
-                overflowBoundaryReference: this.overflowBoundaryRef
-            });
-        }
-    }
+    this.handleWindowClick = event => {
+      const composedPath = event.composedPath();
+      if (this.anchorReferences && this.anchorReferences[0] && composedPath.includes(this.anchorReferences[0])) {
+        return;
+      } else if (this.open) {
+        this.hidePopover();
+      }
+    };
     /**
-     * Removes event listeners from the popover.
-     * @public
+     * ## createOverflowHandler
+     *
+     * @summary handles the overflow of the popover based on the overflowBoundary. Calls handleOverflow when the popover collides with its container or user defined overflowed boundary. Creates the overflow handler based on the overflow boundary.
+     * @private
      */
-    removeEventListeners() {
-        var _a;
-        if (this.popoverReference) {
-            this.removeWindowEventListeners();
-            this.removeOverlayEventListeners();
-            this.removeMouseOverEventListeners();
-            (_a = this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this.popoverReference);
-        }
-    }
+    this.createOverflowHandler = () => {
+      const options = {
+        root: document
+      };
+      if (this.overflowBoundary) {
+        options.root = this.overflowBoundary;
+      }
+      this.intersectionObserver = new IntersectionObserver(this.handleOverflow, options);
+    };
     /**
-     * ## releasePositions
+     * ## handleOverflow
      *
-     * @summary cleans the positions that are not allowed. Releases the open positions for the popover. Cleans the positions that are not allowed.
+     * @summary Repositions the popover when it collides with its container or user defined overflowed boundary. Handles overflow collisions with the popover. Repositions the popover when it collides with its container or defined boundary. Called by the intersectionObserver in createOverflowHandler.
      * @private
+     * @param {Array<IntersectionObserverEntry>} entries - The entries to observe.
      */
-    releasePositions() {
-        this.openPositions = [];
-        if (this.positioning) {
-            for (const key in PopoverPositions) {
-                const position = PopoverPositions[key];
-                const positionOpen = this.positioning.checkPosition(position);
-                if (positionOpen) {
-                    this.openPositions.push(position);
-                    if (position === this.originalPopoverPosition) {
-                        this.position = this.originalPopoverPosition;
-                    }
-                }
-            }
+    this.handleOverflow = entries => {
+      if (this.positioning) {
+        this.positioning.position = this.originalPopoverPosition || this.position;
+      }
+      entries.forEach(entry => {
+        var _a, _b;
+        if (entry.intersectionRatio < 1 && this.positioning) {
+          this.openPositions = this.positioning.findOpenPositionsFromCollision(entry);
+          if (((_a = this.openPositions) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            this.repositionPopover(this.openPositions);
+          }
+        } else if (((_b = this.openPositions) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+          this.releasePositions();
         }
-    }
+      });
+    };
     /**
-     * ## observePopoverOverflow
+     * ## repositionPopover
      *
-     * @summary Disconnects and re-observes the popoverReference for overflow. This is used to reposition the popover in the event that it collides with its container or user defined overflowed boundary. Disconnecting is required to reset the baseline for the intersection observer. This method will be called repeatedly on ui changes like resizing the window or scrolling the overflowBoundary. Observes the popover for overflow.  Disconnects and re-observes the popoverReference for overflow.
+     * @summary Updates the position of the popover based on popover collisions. Repositions the popover based on collisions.
      * @private
+     * @param {Array<PositioningShorthandValues>} openPositions - The array of open positions.
      */
-    observePopoverOverflow() {
-        var _a, _b;
-        (_a = this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-        if (this.popoverReference) {
-            (_b = this.intersectionObserver) === null || _b === void 0 ? void 0 : _b.observe(this.popoverReference);
+    this.repositionPopover = openPositions => {
+      this.position = openPositions[0];
+      if (this.positioning) {
+        this.positioning.position = this.position;
+      }
+    };
+  }
+  nonClickableChanged() {
+    this.processAnchorEventListeners();
+  }
+  /**
+   * Handles changes to the anchor references.
+   * Adds anchor attributes and event listeners when the anchor is added to the DOM.
+   * @public
+   */
+  anchorReferencesChanged() {
+    this.initializeTargetId();
+    this.processAnchorEventListeners();
+    this.checkAllLoaded();
+  }
+  /**
+   * ## checkAllLoaded
+   *
+   * @summary checks if all the refs are loaded. If they are, it sets the refsLoaded property to true.
+   */
+  checkAllLoaded() {
+    if (this.popoverReference && this.anchorReferences && this.anchorReferences.length > 0 && this.transitionDuration !== undefined && this.transitionDelay !== undefined) {
+      this.refsLoaded = true;
+    }
+  }
+  transitionDurationChanged() {
+    this.addTransitionStyles();
+  }
+  /**
+   * ## transitionDelayChanged
+   */
+  transitionDelayChanged() {
+    this.addTransitionStyles();
+  }
+  /**
+   * ## addTransitionStyles
+   *
+   * @summary - adds the transition styles to the popover element
+   */
+  addTransitionStyles() {
+    var _a;
+    if (this.transitionDelay !== undefined && this.transitionDuration !== undefined) {
+      const newStyles = css /**css*/`
+        :host{--popoverTransition:${this.transitionDuration.toString()}ms;--popoverTransitionDelay:${this.transitionDelay.toString()}ms}`;
+      if (newStyles.styles[0] !== ((_a = this.styles) === null || _a === void 0 ? void 0 : _a.styles[0])) {
+        this.styles = newStyles;
+        this.$fastController.addStyles(this.styles);
+      }
+    }
+  }
+  /**
+   * ## removeTransitionStyles
+   *
+   * @summary - removes the transition styles from the popover element
+   */
+  removeTransitionStyles() {
+    this.styles = css /**css*/`
+      :host{--popoverTransition:0ms;--popoverTransitionDelay:0ms}`;
+    this.$fastController.addStyles(this.styles);
+  }
+  /**
+   * ## openPositions
+   *
+   * @summary An array of open positions based on the collisionEdge Handles changes to the reposition mode.
+   * @public
+   */
+  repositionModeChanged() {
+    if (this.positioning) {
+      this.positioning.repositionMode = this.repositionMode;
+    }
+  }
+  /**
+   * ## openChanged
+   *
+   * @summary Adds and removes many of the event listeners for the popover. Handles changes to the open state of the popover. Opens and closes the popover, controlling it from the outside. It's recommended to wait until the window has fully loaded before opening the popover. Adds and removes many of the event listeners.
+   * @public
+   */
+  openChanged() {
+    var _a;
+    if (this.popoverReference) {
+      if (!this.originalPopoverPosition) {
+        this.originalPopoverPosition = this.position;
+      }
+      if (this.open) {
+        this.popoverReference.classList.add("popover-open");
+        this.addActiveHandlers();
+        if (this.positioning && !this.positioning.checkPosition(this.position)) {
+          const positions = this.positioning.getOpenPositions();
+          this.position = positions[0];
         }
+      } else {
+        (_a = this.popoverReference) === null || _a === void 0 ? void 0 : _a.classList.remove("popover-open");
+        this.removeEventListeners();
+      }
     }
-    connectedCallback() {
-        var _a;
-        super.connectedCallback();
-        if (this.open) {
-            (_a = this.popoverReference) === null || _a === void 0 ? void 0 : _a.classList.add("popover-open");
+  }
+  /**
+   * ## addActiveHandlers
+   *
+   * @summary Adds the event listeners for the popover when it is open. Adds active handlers for the popover.
+   * @private
+   */
+  addActiveHandlers() {
+    this.addRepositioningHandlers();
+    this.addOverlayEventListeners();
+    this.addMouseOverEventListeners();
+    this.createPositioningManager();
+  }
+  popoverReferenceChanged() {
+    this.checkAllLoaded();
+  }
+  /**
+   * ## initializeTargetId
+   *
+   * @summary initializes the targetId with a random id if it's not set by the user. The usefulness of this may not be apparent by the code. When the aria-describedby attribute of the trigger is set to the id of the target (popover), the aria-describedby content will reflect the content of the popover.
+   * Initializes the target ID with a random ID if it's not set by the user.
+   * @private
+   */
+  initializeTargetId() {
+    if (!this.targetId) {
+      const popoverId = uniqueId("popover-target-");
+      this.targetId = popoverId;
+    }
+    if (this.anchorReferences && this.anchorReferences.length > 0) {
+      this.anchorReferences[0].setAttribute("aria-describedby", this.targetId);
+    }
+  }
+  /**
+   * Handles changes to the overflow boundary.
+   * @public
+   */
+  overflowBoundaryChanged() {
+    this.addOverflowBoundaryEventListeners();
+  }
+  /**
+   * Emits the toggle event for the popover.
+   * @public
+   */
+  emitToggleEvent() {
+    var _a;
+    (_a = this.popoverReference) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent(PopoverEventNames.toggle, {
+      bubbles: true,
+      composed: true,
+      detail: {
+        target: this,
+        open: this.open,
+        newState: this.open ? "open" : "closed"
+      }
+    }));
+  }
+  /**
+   * addAnchorEventListeners
+   *
+   * @summary the popover defaults to adding a click event listener on any clickable anchor reference
+   * Adds event listeners to the anchor.
+   * @private
+   */
+  processAnchorEventListeners() {
+    if (this.anchorReferences && this.anchorReferences.length) {
+      if (this.nonClickable === false) {
+        this.anchorReferences[0].addEventListener("click", this.togglePopover);
+      } else {
+        this.anchorReferences[0].removeEventListener("click", this.togglePopover);
+      }
+    }
+  }
+  /**
+   * Adds overflow boundary event listeners if the overflow boundary exists.
+   * @private
+   */
+  addOverflowBoundaryEventListeners() {
+    if (this.overflowBoundary) {
+      this.overflowBoundary.addEventListener("scroll", this.handleWindowChanges);
+    }
+  }
+  /**
+   * Adds window event listeners.
+   * @private
+   */
+  addWindowEventListeners() {
+    window.addEventListener("resize", this.handleWindowChanges);
+    window.addEventListener("scroll", this.handleWindowChanges);
+  }
+  /**
+   * Removes window event listeners.
+   * @private
+   */
+  removeWindowEventListeners() {
+    window.removeEventListener("resize", this.handleWindowChanges);
+    window.removeEventListener("scroll", this.handleWindowChanges);
+  }
+  /**
+   * ## addOverlayEventListeners
+   *
+   * @summary Adds event listeners to the window or overflowBoundary to close the popover when the user clicks outside of the popover. Adds overlay event listeners.
+   * @private
+   */
+  addOverlayEventListeners() {
+    if (this.overflowBoundary && this.mode === "auto") {
+      this.overflowBoundary.addEventListener("click", this.handleWindowClick);
+    } else if (this.mode === "auto") {
+      document.addEventListener("click", this.handleWindowClick);
+    }
+  }
+  /**
+   * Removes overlay event listeners.
+   * @private
+   */
+  removeOverlayEventListeners() {
+    if (this.overflowBoundary && this.mode === "auto") {
+      this.overflowBoundary.removeEventListener("click", this.handleWindowClick);
+    } else if (this.mode === "auto") {
+      document.removeEventListener("click", this.handleWindowClick);
+    }
+  }
+  /**
+   * ## addRepositioningHandlers
+   *
+   * @summary Adds event listeners to the window and overflowBoundary to reposition the popover when the window is resized or the overflowBoundary is scrolled. Adds repositioning handlers to the popover.
+   * @public
+   */
+  addRepositioningHandlers() {
+    if (this.repositionMode !== "none") {
+      this.createOverflowHandler();
+      this.addWindowEventListeners();
+    }
+  }
+  /**
+   * ## addPositioningManager
+   *
+   * @summary Creates a new positioning manager for the popover. The positioning manager is used to calculate the position of the popover based on the anchor and the popover's collision with the window or overflowBoundary. Creates the positioning manager for the popover.
+   * @public
+   */
+  createPositioningManager() {
+    var _a;
+    if (this.popoverReference && this.repositionMode !== "none") {
+      this.positioning = new Positioning({
+        repositionMode: this.repositionMode,
+        popoverReference: this.popoverReference,
+        anchorReference: (_a = this.anchorReferences) === null || _a === void 0 ? void 0 : _a[0],
+        overflowBoundaryReference: this.overflowBoundary
+      });
+    }
+  }
+  /**
+   * Removes event listeners from the popover.
+   * @public
+   */
+  removeEventListeners() {
+    var _a;
+    if (this.popoverReference) {
+      this.removeWindowEventListeners();
+      this.removeOverlayEventListeners();
+      this.removeMouseOverEventListeners();
+      (_a = this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this.popoverReference);
+    }
+  }
+  /**
+   * ## releasePositions
+   *
+   * @summary cleans the positions that are not allowed. Releases the open positions for the popover. Cleans the positions that are not allowed.
+   * @private
+   */
+  releasePositions() {
+    this.openPositions = [];
+    if (this.positioning) {
+      for (const key in PopoverPositions) {
+        const position = PopoverPositions[key];
+        const positionOpen = this.positioning.checkPosition(position);
+        if (positionOpen) {
+          this.openPositions.push(position);
+          if (position === this.originalPopoverPosition) {
+            this.position = this.originalPopoverPosition;
+          }
         }
+      }
+    }
+  }
+  /**
+   * ## observePopoverOverflow
+   *
+   * @summary Disconnects and re-observes the popoverReference for overflow. This is used to reposition the popover in the event that it collides with its container or user defined overflowed boundary. Disconnecting is required to reset the baseline for the intersection observer. This method will be called repeatedly on ui changes like resizing the window or scrolling the overflowBoundary. Observes the popover for overflow.  Disconnects and re-observes the popoverReference for overflow.
+   * @private
+   */
+  observePopoverOverflow() {
+    var _a, _b;
+    (_a = this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    if (this.popoverReference) {
+      (_b = this.intersectionObserver) === null || _b === void 0 ? void 0 : _b.observe(this.popoverReference);
+    }
+  }
+  connectedCallback() {
+    var _a;
+    super.connectedCallback();
+    if (this.open) {
+      (_a = this.popoverReference) === null || _a === void 0 ? void 0 : _a.classList.add("popover-open");
     }
+  }
 }
-__decorate([
-    attr({ mode: "boolean" })
-], Popover.prototype, "beak", void 0);
-__decorate([
-    attr({ mode: "boolean", attribute: "non-clickable" })
-], Popover.prototype, "nonClickable", void 0);
-__decorate([
-    attr
-], Popover.prototype, "size", void 0);
-__decorate([
-    attr
-], Popover.prototype, "mode", void 0);
-__decorate([
-    attr
-], Popover.prototype, "position", void 0);
-__decorate([
-    attr({ attribute: "target-id" })
-], Popover.prototype, "targetId", void 0);
-__decorate([
-    observable
-], Popover.prototype, "anchorReferences", void 0);
-__decorate([
-    observable
-], Popover.prototype, "refsLoaded", void 0);
-__decorate([
-    attr({
-        attribute: "transition-duration",
-        converter: nullableNumberConverter
-    })
-], Popover.prototype, "transitionDuration", void 0);
-__decorate([
-    attr({
-        attribute: "transition-delay",
-        converter: nullableNumberConverter
-    })
-], Popover.prototype, "transitionDelay", void 0);
-__decorate([
-    attr({ attribute: "reposition-mode" })
-], Popover.prototype, "repositionMode", void 0);
-__decorate([
-    observable
-], Popover.prototype, "openPositions", void 0);
-__decorate([
-    attr({ mode: "boolean" })
-], Popover.prototype, "open", void 0);
-__decorate([
-    observable
-], Popover.prototype, "popoverReference", void 0);
-__decorate([
-    observable
-], Popover.prototype, "popoverRole", void 0);
-__decorate([
-    observable
-], Popover.prototype, "overflowBoundaryRef", void 0);
-__decorate([
-    attr({ attribute: "overflow-boundary-selector" })
-], Popover.prototype, "overflowBoundarySelector", void 0);
-//# sourceMappingURL=popover.js.map
+__decorate([attr({
+  mode: "boolean"
+})], Popover.prototype, "beak", void 0);
+__decorate([attr({
+  mode: "boolean",
+  attribute: "non-clickable"
+})], Popover.prototype, "nonClickable", void 0);
+__decorate([attr], Popover.prototype, "size", void 0);
+__decorate([attr], Popover.prototype, "mode", void 0);
+__decorate([attr], Popover.prototype, "position", void 0);
+__decorate([attr({
+  attribute: "target-id"
+})], Popover.prototype, "targetId", void 0);
+__decorate([observable], Popover.prototype, "anchorReferences", void 0);
+__decorate([observable], Popover.prototype, "refsLoaded", void 0);
+__decorate([attr({
+  attribute: "transition-duration",
+  converter: nullableNumberConverter
+})], Popover.prototype, "transitionDuration", void 0);
+__decorate([attr({
+  attribute: "transition-delay",
+  converter: nullableNumberConverter
+})], Popover.prototype, "transitionDelay", void 0);
+__decorate([attr({
+  attribute: "reposition-mode"
+})], Popover.prototype, "repositionMode", void 0);
+__decorate([observable], Popover.prototype, "openPositions", void 0);
+__decorate([attr({
+  mode: "boolean"
+})], Popover.prototype, "open", void 0);
+__decorate([observable], Popover.prototype, "popoverReference", void 0);
+__decorate([observable], Popover.prototype, "popoverRole", void 0);
+__decorate([observable], Popover.prototype, "overflowBoundary", void 0);
+
+export { Popover };