@globalpayments/vega 2.73.0 → 2.76.0

package/dist/cjs/{element-appender-slimmer-12f40b8b.js → element-appender-slimmer-34e4eb56.js}

@@ -1,17 +1,19 @@
 'use strict';
 
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
-const ui = require('./ui-9e181079.js');
-const functionExtension = require('./function-extension-78ec27e0.js');
+const ui = require('./ui-234ea151.js');
+const internalVegaZIndexManager = require('./internal-vega-z-index-manager-f03ddb37.js');
 const dynamicSlimmer = require('./dynamic-slimmer-f31fdfd7.js');
-const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-11937d6f.js');
+const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-7f065ee1.js');
 const ui$1 = require('./ui-32e69595.js');
-const typeGuard = require('./type-guard-69d2cf01.js');
-const responsiveFormatFacade = require('./responsive-format-facade-96c5f598.js');
+const typeGuard = require('./type-guard-407ba0b8.js');
+const responsiveFormatFacade = require('./responsive-format-facade-ea59bdcd.js');
+const tryGetDocument = require('./try-get-document-c0ebd39a.js');
+const featureFlagController = require('./feature-flag-controller-04cb1e69.js');
 const changeManager = require('./change-manager-a297e4d2.js');
 const staticSubjectTitle = require('./static-subject-title-5829a298.js');
 const observer = require('./observer-f49483e8.js');
-const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-1c8f7880.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-c62823de.js');
 const vegaInternalEventId = require('./vega-internal-event-id-f2465f1b.js');
 
 var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -270,6 +272,17 @@ __decorate$6([
  * calculate position
  */
 class BasePositionCalculationStrategy extends globalSlimmerRegistry.VegaSlimmer {
+  /**
+   * Whether the controller should adjust/recompute position at this time.
+   *
+   * This hook allows strategies to avoid unnecessary work (for example, on scroll) by deciding
+   * whether a re-position is required.
+   *
+   * @returns {boolean} True when the controller should proceed with width/height/position adjustments.
+   */
+  shouldAdjustPosition() {
+    return true;
+  }
   /**
    * Get the position box.
    *
@@ -295,121 +308,46 @@ class BasePositionCalculationStrategy extends globalSlimmerRegistry.VegaSlimmer
     return positionBox;
   }
   /**
-   * "Get the width, height, and top position of an element."
-   *
-   * The function takes an element as an argument and returns an object with three properties: width,
-   * height, and top.
-   *
-   * Note: If element is hide, we should temporary change it to `block` to get the bounding client rect of element,
-   * After do that, this element will change to origin `hide`, if not, it will be contained in the calculate of `document.documentElement.scrollHeight`
-   *
-   * @returns {ElementBoundBox} An object with the width, height, and top properties of the element.
-   */
-  getElementBoundBox() {
-    const element = this.showConfig.appendableElement;
-    const isElementHide = element.classList.contains('vega-force-hidden');
-    if (isElementHide)
-      element.classList.remove('vega-force-hidden');
-    const elementRect = element.getBoundingClientRect();
-    if (isElementHide)
-      element.classList.add('vega-force-hidden');
-    return {
-      width: elementRect.width,
-      height: elementRect.height,
-      left: elementRect.left,
-      top: elementRect.top,
-    };
-  }
-  /**
-   * It takes a placement string or array of placements and returns an array of placements
-   * if given placement is single, we should completion the placements with the default {@link Placements}
-   * and make given placement as default.
-   * if given placement is array, we should use it directly, even it partial of {@link Placements}.
-   * if not placement give. we should use {@link Placements}.
-   *
-   * @returns {PlacementType[]} ordered placements.
-   */
-  getPlacements() {
-    const placement = this.showConfig.placement;
-    if (typeof placement === 'string') {
-      const partial = ui$1.Placements.filter((direction) => direction !== placement);
-      return [placement, ...partial];
-    }
-    else if (Array.isArray(placement)) {
-      return placement;
-    }
-    else {
-      return [...ui$1.Placements];
-    }
-  }
-  /**
-   * It returns acceptable alignments.
-   *
-   * @returns {PositionAlignmentType[]} acceptable alignments
-   */
-  getAlignments() {
-    const alignment = this.showConfig.alignment;
-    if (typeof alignment === 'string') {
-      const partial = ui$1.Alignments.filter((item) => item !== alignment);
-      return [alignment, ...partial];
-    }
-    else if (Array.isArray(alignment)) {
-      return alignment;
-    }
-    else {
-      return [...ui$1.Alignments];
-    }
-  }
-  /**
-   * It takes a placement, a target box, and a element box, and returns an element box
+   * Whether the alignment space is enough
    *
-   * @param {ElementBoundBox} elementBox - The position of the element element.
+   * @param {ElementScrollDimension} containerBox - The bounding box of the container element.
    * @param {ElementBoundBox} targetBox - The position of the target element.
-   * @param {PlacementType} placement - The placement of the element.
-   * @param {PositionAlignmentType} alignment - The alignment of the element
-   * @returns {ElementPositionBox} An object with top and left properties.
-   */
-  calculatePosition(elementBox, targetBox, placement, alignment) {
-    return {
-      top: this.calculateTop(elementBox, targetBox, placement, alignment),
-      left: this.calculateLeft(elementBox, targetBox, placement, alignment),
-    };
-  }
-  /**
-   * It returns the translocation of the element relative to the target element
-   *
-   * @param {PlacementType} placement - The suitable placement of the element.
-   * @returns {TranslocationType} A translocation object with X and Y properties.
+   * @param {ElementBoundBox} elementBox - The box of the element that we're trying to position.
+   * @param {PlacementType} placement - The placement of the element relative to the target.
+   * @param {PlacementType} alignment - The alignment of the element relative to the target.
+   * @returns {boolean} return true if it has enough space, otherwise false
    */
-  getTranslocationBox(placement) {
-    const originPlacement = Array.isArray(this.showConfig.placement)
-      ? this.showConfig.placement[0]
-      : this.showConfig.placement;
-    const translocation = this.getTranslocation();
-    const result = { X: 0, Y: 0 };
-    if (typeGuard.isTranslocationType(translocation)) {
-      let xValue = translocation.X;
-      let yValue = translocation.Y;
-      // If originPlacement and placement is not in same axis, it should reverse axis.
-      if ((originPlacement &&
-        ['left', 'right'].includes(originPlacement) &&
-        ['top', 'bottom'].includes(placement)) ||
-        (originPlacement &&
-          ['top', 'bottom'].includes(originPlacement) &&
-          ['left', 'right'].includes(placement))) {
-        xValue = translocation.Y;
-        yValue = translocation.X;
-      }
-      if (['bottom', 'top'].includes(placement)) {
-        result.Y = placement === 'top' ? -yValue : yValue;
-        result.X = xValue;
+  hasEnoughAlignmentSpace(containerBox, targetBox, elementBox, placement, alignment) {
+    if (['top', 'bottom'].includes(placement)) {
+      switch (alignment) {
+        case 'start': {
+          return targetBox.left + elementBox.width <= containerBox.width;
+        }
+        case 'center': {
+          return (targetBox.left >= (elementBox.width - targetBox.width) / 2 &&
+            targetBox.left + targetBox.width / 2 + elementBox.width / 2 <= containerBox.width);
+        }
+        case 'end': {
+          return targetBox.left + targetBox.width >= elementBox.width;
+        }
       }
-      if (['left', 'right'].includes(placement)) {
-        result.X = placement === 'left' ? -xValue : xValue;
-        result.Y = yValue;
+    }
+    if (['right', 'left'].includes(placement)) {
+      switch (alignment) {
+        case 'start': {
+          return targetBox.top + elementBox.height <= containerBox.height;
+        }
+        case 'center': {
+          return (targetBox.top >= (elementBox.height - targetBox.height) / 2 &&
+            targetBox.top + targetBox.height / 2 + elementBox.height / 2 <= containerBox.height);
+        }
+        case 'end': {
+          return targetBox.top + targetBox.height >= elementBox.height;
+        }
       }
     }
-    return result;
+    /* istanbul ignore next */
+    return false;
   }
   /**
    * Calculate the left position of the element
@@ -479,6 +417,24 @@ class BasePositionCalculationStrategy extends globalSlimmerRegistry.VegaSlimmer
         throw new Error(`Unexpected placement: ${placement}. Expected values are top, bottom, left, or right.`);
     }
   }
+  /**
+   * It returns acceptable alignments.
+   *
+   * @returns {PositionAlignmentType[]} acceptable alignments
+   */
+  getAlignments() {
+    const alignment = this.showConfig.alignment;
+    if (typeof alignment === 'string') {
+      const partial = ui$1.Alignments.filter((item) => item !== alignment);
+      return [alignment, ...partial];
+    }
+    else if (Array.isArray(alignment)) {
+      return alignment;
+    }
+    else {
+      return [...ui$1.Alignments];
+    }
+  }
   /**
    * It takes a list of placements and returns the first placement that has enough space to place the
    * element
@@ -503,6 +459,105 @@ class BasePositionCalculationStrategy extends globalSlimmerRegistry.VegaSlimmer
       return defaultPlacement;
     }
   }
+  /**
+   * "Get the width, height, and top position of an element."
+   *
+   * The function takes an element as an argument and returns an object with three properties: width,
+   * height, and top.
+   *
+   * Note: If element is hide, we should temporary change it to `block` to get the bounding client rect of element,
+   * After do that, this element will change to origin `hide`, if not, it will be contained in the calculate of `document.documentElement.scrollHeight`
+   *
+   * @returns {ElementBoundBox} An object with the width, height, and top properties of the element.
+   */
+  getElementBoundBox() {
+    const element = this.showConfig.appendableElement;
+    const isElementHide = element.classList.contains('vega-force-hidden');
+    if (isElementHide)
+      element.classList.remove('vega-force-hidden');
+    const elementRect = element.getBoundingClientRect();
+    if (isElementHide)
+      element.classList.add('vega-force-hidden');
+    return {
+      width: elementRect.width,
+      height: elementRect.height,
+      left: elementRect.left,
+      top: elementRect.top,
+    };
+  }
+  /**
+   * It takes a placement string or array of placements and returns an array of placements
+   * if given placement is single, we should completion the placements with the default {@link Placements}
+   * and make given placement as default.
+   * if given placement is array, we should use it directly, even it partial of {@link Placements}.
+   * if not placement give. we should use {@link Placements}.
+   *
+   * @returns {PlacementType[]} ordered placements.
+   */
+  getPlacements() {
+    const placement = this.showConfig.placement;
+    if (typeof placement === 'string') {
+      const partial = ui$1.Placements.filter((direction) => direction !== placement);
+      return [placement, ...partial];
+    }
+    else if (Array.isArray(placement)) {
+      return placement;
+    }
+    else {
+      return [...ui$1.Placements];
+    }
+  }
+  /**
+   * It takes a placement, a target box, and a element box, and returns an element box
+   *
+   * @param {ElementBoundBox} elementBox - The position of the element element.
+   * @param {ElementBoundBox} targetBox - The position of the target element.
+   * @param {PlacementType} placement - The placement of the element.
+   * @param {PositionAlignmentType} alignment - The alignment of the element
+   * @returns {ElementPositionBox} An object with top and left properties.
+   */
+  calculatePosition(elementBox, targetBox, placement, alignment) {
+    return {
+      top: this.calculateTop(elementBox, targetBox, placement, alignment),
+      left: this.calculateLeft(elementBox, targetBox, placement, alignment),
+    };
+  }
+  /**
+   * It returns the translocation of the element relative to the target element
+   *
+   * @param {PlacementType} placement - The suitable placement of the element.
+   * @returns {TranslocationType} A translocation object with X and Y properties.
+   */
+  getTranslocationBox(placement) {
+    const originPlacement = Array.isArray(this.showConfig.placement)
+      ? this.showConfig.placement[0]
+      : this.showConfig.placement;
+    const translocation = this.getTranslocation();
+    const result = { X: 0, Y: 0 };
+    if (typeGuard.isTranslocationType(translocation)) {
+      let xValue = translocation.X;
+      let yValue = translocation.Y;
+      // If originPlacement and placement is not in same axis, it should reverse axis.
+      if ((originPlacement &&
+        ['left', 'right'].includes(originPlacement) &&
+        ['top', 'bottom'].includes(placement)) ||
+        (originPlacement &&
+          ['top', 'bottom'].includes(originPlacement) &&
+          ['left', 'right'].includes(placement))) {
+        xValue = translocation.Y;
+        yValue = translocation.X;
+      }
+      if (['bottom', 'top'].includes(placement)) {
+        result.Y = placement === 'top' ? -yValue : yValue;
+        result.X = xValue;
+      }
+      if (['left', 'right'].includes(placement)) {
+        result.X = placement === 'left' ? -xValue : xValue;
+        result.Y = yValue;
+      }
+    }
+    return result;
+  }
   /**
    * It takes a list of alignments and returns the suitable one that has enough space to fit the element
    *
@@ -527,48 +582,6 @@ class BasePositionCalculationStrategy extends globalSlimmerRegistry.VegaSlimmer
       return defaultAlignment;
     }
   }
-  /**
-   * Whether the alignment space is enough
-   *
-   * @param {ElementScrollDimension} containerBox - The bounding box of the container element.
-   * @param {ElementBoundBox} targetBox - The position of the target element.
-   * @param {ElementBoundBox} elementBox - The box of the element that we're trying to position.
-   * @param {PlacementType} placement - The placement of the element relative to the target.
-   * @param {PlacementType} alignment - The alignment of the element relative to the target.
-   * @returns {boolean} return true if it has enough space, otherwise false
-   */
-  hasEnoughAlignmentSpace(containerBox, targetBox, elementBox, placement, alignment) {
-    if (['top', 'bottom'].includes(placement)) {
-      switch (alignment) {
-        case 'start': {
-          return targetBox.left + elementBox.width <= containerBox.width;
-        }
-        case 'center': {
-          return (targetBox.left >= (elementBox.width - targetBox.width) / 2 &&
-            targetBox.left + targetBox.width / 2 + elementBox.width / 2 <= containerBox.width);
-        }
-        case 'end': {
-          return targetBox.left + targetBox.width >= elementBox.width;
-        }
-      }
-    }
-    if (['right', 'left'].includes(placement)) {
-      switch (alignment) {
-        case 'start': {
-          return targetBox.top + elementBox.height <= containerBox.height;
-        }
-        case 'center': {
-          return (targetBox.top >= (elementBox.height - targetBox.height) / 2 &&
-            targetBox.top + targetBox.height / 2 + elementBox.height / 2 <= containerBox.height);
-        }
-        case 'end': {
-          return targetBox.top + targetBox.height >= elementBox.height;
-        }
-      }
-    }
-    /* istanbul ignore next */
-    return false;
-  }
   /**
    * If the placement is top or left, then the target's top or left position must be greater than or
    * equal to the element's height or width. If the placement is bottom or right, then the container's
@@ -671,6 +684,60 @@ __decorate$5([
   globalSlimmerRegistry.MapToComponentField()
 ], BodyPositionCalculationStrategy.prototype, "showConfig", void 0);
 
+/**
+ * Updates position on scroll When the target rect changes, we recompute placement/alignment.
+ */
+class ScreenScrollPositionUpdate {
+  constructor() {
+    this.viewportWidth = window.innerWidth;
+    this.viewportHeight = window.innerHeight;
+  }
+  /**
+   * Determines whether the appendable element's position should update on scroll.
+   *
+   * @param {ScrollPositionUpdateStrategyContext} context - Current/previous rectangles plus viewport size.
+   * @returns {ScrollPositionUpdateDecision} Decision that indicates whether to recompute position.
+   */
+  shouldUpdatePosition(context) {
+    const { previousTargetRect, currentTargetRect, appendableRect, viewportWidth, viewportHeight, } = context;
+    this.viewportWidth = viewportWidth;
+    this.viewportHeight = viewportHeight;
+    const targetChanged = !previousTargetRect ||
+      currentTargetRect.left !== previousTargetRect.left ||
+      currentTargetRect.top !== previousTargetRect.top;
+    const isTargetWithinViewport = !this.isRectOutsideViewport(currentTargetRect);
+    const isAppendableNotEntirelyInViewport = !this.isRectEntirelyWithinViewport(appendableRect);
+    return {
+      shouldUpdate: targetChanged && isTargetWithinViewport && isAppendableNotEntirelyInViewport,
+    };
+  }
+  /**
+   * Whether the rect is fully within the viewport bounds.
+   *
+   * @param {DOMRect} rect - The DOMRect to check.
+   * @returns {boolean} True when rect is fully within the viewport.
+   */
+  isRectEntirelyWithinViewport(rect) {
+    return (rect.left >= 0 &&
+      rect.top >= 0 &&
+      rect.right <= this.viewportWidth &&
+      rect.bottom <= this.viewportHeight);
+  }
+  /**
+   * Whether the element is fully outside the viewport.
+   * If true, the rect has "disappeared" from the viewport.
+   *
+   * @param {DOMRect} rect - The DOMRect to check.
+   * @returns {boolean} True when rect is completely outside viewport bounds.
+   */
+  isRectOutsideViewport(rect) {
+    return (rect.right <= 0 ||
+      rect.bottom <= 0 ||
+      rect.left >= this.viewportWidth ||
+      rect.top >= this.viewportHeight);
+  }
+}
+
 var __decorate$4 = (undefined && undefined.__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);
@@ -681,6 +748,76 @@ var __decorate$4 = (undefined && undefined.__decorate) || function (decorators,
  * calculate position by screen container
  */
 class ScreenPositionCalculationStrategy extends BasePositionCalculationStrategy {
+  constructor() {
+    super(...arguments);
+    this.scrollFrameRequestId = null;
+    this.usePreviousPlacement = false;
+    this.scrollPositionUpdateStrategy = new ScreenScrollPositionUpdate();
+  }
+  /**
+   * For screen-positioned appendable we may get a lot of scroll events.
+   * This hook throttles the check with requestAnimationFrame and only allows an adjust when
+   * the strategy determines we should update.
+   *
+   * @returns {boolean} True when controller should perform a position adjustment.
+   */
+  shouldAdjustPosition() {
+    if (this.scrollFrameRequestId !== null) {
+      return false;
+    }
+    if (!featureFlagController.FeatureFlag.isEnabled('VEGA_ELEMENT_APPENDER.AUTO_PLACEMENT')) {
+      this.usePreviousPlacement = true;
+      return true;
+    }
+    if (!this.previousTargetRect) {
+      this.previousTargetRect = this.showConfig.target.getBoundingClientRect();
+      this.usePreviousPlacement = false;
+      return true;
+    }
+    /**
+     * This avoids doing expensive DOM reads on every scroll event, while still
+     * updating placement/alignment when the trigger moves and the appendable
+     * would be clipped by the viewport (auto placement).
+     *
+     * The below method is e2e-test covered in @see{module:the-screen-position-scroll-RAFCallback-trigger-as-expected}
+     */
+    /* istanbul ignore next */
+    this.scrollFrameRequestId = requestAnimationFrame(() => {
+      var _a;
+      this.scrollFrameRequestId = null;
+      let viewportWidth = window.innerWidth;
+      let viewportHeight = window.innerHeight;
+      if (this.showConfig.positionRelativeTo) {
+        const containerDom = (_a = tryGetDocument.tryGetDocument()) === null || _a === void 0 ? void 0 : _a.querySelector(this.showConfig.positionRelativeTo);
+        if (containerDom) {
+          viewportWidth = containerDom.getBoundingClientRect().width;
+          viewportHeight = containerDom.getBoundingClientRect().height;
+        }
+      }
+      const currentTargetRect = this.showConfig.target.getBoundingClientRect();
+      const appendableRect = this.showConfig.appendableElement.getBoundingClientRect();
+      const { shouldUpdate } = this.scrollPositionUpdateStrategy.shouldUpdatePosition({
+        currentTargetRect,
+        previousTargetRect: this.previousTargetRect,
+        appendableRect,
+        viewportWidth,
+        viewportHeight,
+      });
+      this.usePreviousPlacement = !shouldUpdate;
+      this.previousTargetRect = currentTargetRect;
+    });
+    return true;
+  }
+  /**
+   * Clears any pending scroll animation frame callback.
+   * Call this when popover is hidden/destroyed to avoid leaks and stale callbacks.
+   */
+  clearScrollFrame() {
+    if (this.scrollFrameRequestId !== null) {
+      cancelAnimationFrame(this.scrollFrameRequestId);
+      this.scrollFrameRequestId = null;
+    }
+  }
   /**
    * Get the position of the element in the container according to the target element and the placement
    * If give a translocation, it will apply the translocation to the result.
@@ -690,7 +827,8 @@ class ScreenPositionCalculationStrategy extends BasePositionCalculationStrategy
    * returns an ElementPositionBox.
    */
   getPosition(usePreviousPlacement) {
-    const positionBox = usePreviousPlacement
+    const stayPlacement = usePreviousPlacement ? this.usePreviousPlacement : false;
+    const positionBox = stayPlacement
       ? this.getPositionBox([this.previousPositionBox.placement], [this.previousPositionBox.alignment])
       : this.getPositionBox();
     this.previousPositionBox = positionBox;
@@ -724,6 +862,43 @@ class ScreenPositionCalculationStrategy extends BasePositionCalculationStrategy
       height: window.innerHeight,
     };
   }
+  /**
+   * Whether the alignment space is enough
+   *
+   * @param {ElementScrollDimension} containerBox - The bounding box of the container element.
+   * @param {ElementBoundBox} targetBox - The position of the target element.
+   * @param {ElementBoundBox} elementBox - The box of the element that we're trying to position.
+   * @param {PlacementType} placement - The placement of the element relative to the target.
+   * @param {PlacementType} alignment - The alignment of the element relative to the target.
+   * @returns {boolean} return true if it has enough space, otherwise false
+   */
+  hasEnoughAlignmentSpace(containerBox, targetBox, elementBox, placement, alignment) {
+    const left = this.calculateLeft(elementBox, targetBox, placement, alignment);
+    const top = this.calculateTop(elementBox, targetBox, placement, alignment);
+    return (left >= 0 &&
+      top >= 0 &&
+      left + elementBox.width <= containerBox.width &&
+      top + elementBox.height <= containerBox.height);
+  }
+  /**
+   * Screen-specific suitable placement selection.
+   * Tries to find a placement that has enough alignment space within the viewport first,
+   * otherwise falls back to the base strategy.
+   *
+   * @param {ElementScrollDimension} containerBox - The bounding box of the container.
+   * @param {ElementBoundBox} elementBox - The box of the element to place.
+   * @param {ElementBoundBox} targetBox - The box of the target element.
+   * @param {PlacementType[]} placements - Ordered list of placements to try.
+   * @returns {PlacementType} The chosen placement.
+   */
+  getSuitablePlacement(containerBox, elementBox, targetBox, placements) {
+    const alignments = this.getAlignments();
+    const suitablePlacement = placements.find((placement) => alignments.some((alignment) => this.hasEnoughAlignmentSpace(containerBox, targetBox, elementBox, placement, alignment)));
+    if (suitablePlacement) {
+      return suitablePlacement;
+    }
+    return super.getSuitablePlacement(containerBox, elementBox, targetBox, placements);
+  }
 }
 __decorate$4([
   globalSlimmerRegistry.MapToComponentField()
@@ -744,6 +919,13 @@ class PositionCalculationController extends globalSlimmerRegistry.VegaSlimmer {
     this.bodyPositionStrategy = new BodyPositionCalculationStrategy();
     this.screenPositionStrategy = new ScreenPositionCalculationStrategy();
   }
+  /**
+   * Clears any pending screen-position scroll animation frame callback.
+   * Call this when the appendable is hidden/destroyed.
+   */
+  clearScreenPositionScrollFrame() {
+    this.screenPositionStrategy.clearScrollFrame();
+  }
   /**
    * Sets the calculate postion strategy.
    */
@@ -758,6 +940,8 @@ class PositionCalculationController extends globalSlimmerRegistry.VegaSlimmer {
    * @param {boolean} [usePreviousPlacement] - Should keep use previous placement and alignment.
    */
   adjustPosition(usePreviousPlacement) {
+    if (!this.positionStrategy.shouldAdjustPosition())
+      return;
     this.adjustWidth();
     this.adjustHeight();
     this.applyPosition(this.positionStrategy.getPosition(usePreviousPlacement));
@@ -920,6 +1104,7 @@ class ElementAppender {
    * @returns {void} Nothing is being returned.
    */
   show() {
+    this.positionCalculationController.clearScreenPositionScrollFrame();
     this.setShowConfig();
     if (!this.showConfig.target) {
       globalSlimmerRegistry.LogUtility.error(`No target element found, please add it at new elementAppender.`);
@@ -943,19 +1128,16 @@ class ElementAppender {
   hide() {
     if (!this.showConfig)
       return;
+    this.positionCalculationController.clearScreenPositionScrollFrame();
     this.toggleShow(false);
     this.resetContainerPosition();
-    functionExtension.InternalVegaZIndexManager.removeZIndex(this.showConfig.appendableElement, 'base');
+    internalVegaZIndexManager.InternalVegaZIndexManager.removeZIndex(this.showConfig.appendableElement, 'base');
   }
   /**
    * Update position while window scroll.
    */
   onScroll() {
-    var _a;
-    const currentTargetRect = this.showConfig.target.getBoundingClientRect();
-    if (this.showConfig.isScreenPosition &&
-      (currentTargetRect.left !== ((_a = this.previousTargetRect) === null || _a === void 0 ? void 0 : _a.left) ||
-        currentTargetRect.top !== this.previousTargetRect.top)) {
+    if (this.showConfig.isScreenPosition) {
       this.adjustPosition(true);
     }
   }
@@ -967,9 +1149,10 @@ class ElementAppender {
   destroy() {
     if (!this.showConfig)
       return;
+    this.positionCalculationController.clearScreenPositionScrollFrame();
     this.removeVisibleAppendElement(this.showConfig.appendableElement);
     this.resetContainerPosition();
-    functionExtension.InternalVegaZIndexManager.removeZIndex(this.showConfig.appendableElement, 'base');
+    internalVegaZIndexManager.InternalVegaZIndexManager.removeZIndex(this.showConfig.appendableElement, 'base');
     this.showConfig.appendableElement.remove();
     this.disconnectResizeObserver();
   }
@@ -1124,7 +1307,7 @@ class ElementAppender {
    * @returns {void}
    */
   setZIndex() {
-    functionExtension.InternalVegaZIndexManager.setZIndex(this.showConfig.appendableElement, 'base');
+    internalVegaZIndexManager.InternalVegaZIndexManager.setZIndex(this.showConfig.appendableElement, 'base');
   }
   /**
    * If the showConfigCallback is a function, call it and return the result, otherwise return the
@@ -1259,6 +1442,106 @@ __decorate$1([
   globalSlimmerRegistry.MapToComponentMethod('hide')
 ], ElementAppenderHierarchyTreeManager.prototype, "onHide", null);
 
+/**
+ * ClickTriggerStrategy handles 'targetClick' and 'globalMouseDown' events to toggle or hide the appendable element.
+ */
+class ClickTriggerStrategy {
+  /**
+   * Determines if the strategy can evaluate the given event type.
+   *
+   * @param {VegaEAEventType} type - The type of the event.
+   * @returns {boolean} True if the event type is 'targetClick' or 'globalMouseDown', otherwise false.
+   */
+  canEvaluate(type) {
+    return type === 'target-click' || type === 'click-outside';
+  }
+  /**
+   * Evaluates the trigger context and determines whether to show, hide, or toggle the appendable element.
+   *
+   * @param {VegaEATriggerContext} context - The context of the trigger event.
+   * @returns {VegaEATriggerResult} An object indicating whether to show, hide, or toggle the appendable element.
+   */
+  evaluate(context) {
+    if (context.eventType === 'target-click') {
+      return {
+        nextAction: context.currentState.isVisible ? 'hide' : 'show',
+      };
+    }
+    if (context.eventType === 'click-outside' && context.currentState.isVisible) {
+      return {
+        nextAction: 'hide',
+      };
+    }
+    return {};
+  }
+}
+
+/**
+ * HoverTriggerStrategy handles mouse enter and leave events on the target and appendable elements,
+ * as well as global mouse down events to show or hide the appendable element.
+ */
+class HoverTriggerStrategy {
+  /**
+   * Determines if the strategy can evaluate the given event type.
+   *
+   * @param {VegaEAEventType} type - The type of the event.
+   * @returns {boolean} True if the event type is related to hover actions or global mouse down, otherwise false.
+   */
+  canEvaluate(type) {
+    return [
+      'target-mouseenter',
+      'target-mouseleave',
+      'element-mouseenter',
+      'element-mouseleave',
+    ].includes(type);
+  }
+  /**
+   * Evaluates the trigger context and determines whether to show, hide, or toggle the appendable element.
+   *
+   * @param {VegaEATriggerContext} context - The context of the trigger event.
+   * @returns {VegaEATriggerResult} An object indicating whether to show, hide, or toggle the appendable element.
+   */
+  evaluate(context) {
+    if (['target-mouseenter', 'element-mouseenter'].includes(context.eventType)) {
+      return !context.currentState.isVisible
+        ? {
+          nextAction: 'show',
+        }
+        : {};
+    }
+    if (['target-mouseleave', 'element-mouseleave'].includes(context.eventType)) {
+      return {
+        nextAction: 'hide',
+      };
+    }
+    /* istanbul ignore next */
+    return {};
+  }
+}
+
+/**
+ * NoneTriggerStrategy does not respond to any events and always indicates no action.
+ */
+class NoneTriggerStrategy {
+  /**
+   * Determines if the strategy can evaluate the given event type.
+   *
+   * @returns {boolean} Always false as this strategy does not respond to any events.
+   */
+  canEvaluate() {
+    return false;
+  }
+  /* istanbul ignore next */
+  /**
+   * Evaluates the trigger context and always indicates no action.
+   *
+   * @returns {VegaEATriggerResult} An object indicating no action (no show, hide, or toggle).
+   */
+  evaluate() {
+    return {};
+  }
+}
+
 var __decorate = (undefined && undefined.__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);
@@ -1290,25 +1573,28 @@ class ElementAppenderSlimmer extends globalSlimmerRegistry.VegaSlimmer {
     };
     /* It's a function that listens to the click event on the dropdown. It checks if the trigger
     property is equal to 'click'. If it is, then it toggles the dropdown. */
-    this.targetClickHandler = () => {
-      if (this.shouldListenerWork('click')) {
-        this.isShowing() ? this.hide() : this.show();
+    this.targetClickHandler = (event) => {
+      const triggerStrategy = this.getTriggerStrategy();
+      if (triggerStrategy.canEvaluate('target-click')) {
+        this.executeTriggerStrategy(triggerStrategy, event, 'target-click');
       }
     };
     /* It's a function that listens to the mouseenter event on the dropdown. It checks if the trigger
     property is equal to 'hover'. If it is, then it clears the timer. */
-    this.targetMouseEnterHandler = () => {
-      if (this.shouldListenerWork('hover')) {
-        this.isShowing() === false && this.show();
+    this.targetMouseEnterHandler = (event) => {
+      const triggerStrategy = this.getTriggerStrategy();
+      if (triggerStrategy.canEvaluate('target-mouseenter')) {
+        this.executeTriggerStrategy(triggerStrategy, event, 'target-mouseenter');
         this.clearDelayHideTimer();
       }
     };
     /* It's a function that listens to the mouseleave event on the dropdown. It checks if the trigger
     property is equal to 'hover'. If it is, then it creates a timer that will hide the dropdown after a
     certain amount of time. */
-    this.targetMouseLeaveHandler = () => {
-      if (this.shouldListenerWork('hover')) {
-        this.createDelayHideTimer();
+    this.targetMouseLeaveHandler = (event) => {
+      const triggerStrategy = this.getTriggerStrategy();
+      if (triggerStrategy.canEvaluate('target-mouseleave')) {
+        this.createDelayHideTimer(event, 'target-mouseleave');
       }
     };
     /* istanbul ignore next */
@@ -1316,7 +1602,7 @@ class ElementAppenderSlimmer extends globalSlimmerRegistry.VegaSlimmer {
     this.targetFocusoutHandler = (e) => {
       var _a;
       if (!ui.isParent(e.relatedTarget, (_a = this.showConfig) === null || _a === void 0 ? void 0 : _a.appendableElement)) {
-        this.targetMouseLeaveHandler();
+        this.targetMouseLeaveHandler(e);
       }
     };
     /* It's a function that listens to the mouseenter event on the dropdown. It checks if the trigger
@@ -1324,18 +1610,20 @@ class ElementAppenderSlimmer extends globalSlimmerRegistry.VegaSlimmer {
     this.elementMouseEnterHandler = () => {
       var _a;
       (_a = this.hierarchyTreeManager.getParent()) === null || _a === void 0 ? void 0 : _a.elementMouseEnterHandler();
-      if (this.shouldListenerWork('hover') && !this.disableInteractiveGetter()) {
+      const triggerStrategy = this.getTriggerStrategy();
+      if (triggerStrategy.canEvaluate('element-mouseenter') && !this.disableInteractiveGetter()) {
         this.clearDelayHideTimer();
       }
     };
     /* It's a function that listens to the mouseleave event on the dropdown. It checks if the trigger
     property is equal to 'hover'. If it is, then it creates a timer that will hide the dropdown after a
     certain amount of time. */
-    this.elementMouseLeaveHandler = () => {
+    this.elementMouseLeaveHandler = (event) => {
       var _a;
-      (_a = this.hierarchyTreeManager.getParent()) === null || _a === void 0 ? void 0 : _a.elementMouseLeaveHandler();
-      if (this.shouldListenerWork('hover') && !this.disableInteractiveGetter()) {
-        this.createDelayHideTimer();
+      (_a = this.hierarchyTreeManager.getParent()) === null || _a === void 0 ? void 0 : _a.elementMouseLeaveHandler(event);
+      const triggerStrategy = this.getTriggerStrategy();
+      if (triggerStrategy.canEvaluate('element-mouseleave') && !this.disableInteractiveGetter()) {
+        this.createDelayHideTimer(event, 'element-mouseleave');
       }
     };
     /* It's a function that listens to the global mousedown event. It checks if the dropdown is showing,
@@ -1346,15 +1634,15 @@ class ElementAppenderSlimmer extends globalSlimmerRegistry.VegaSlimmer {
       const hasChildShowing = this.hierarchyTreeManager
         .getChildren()
         .some((child) => child.isShowing());
+      const triggerStrategy = this.getTriggerStrategy();
       if (!hasChildShowing &&
-        this.shouldListenerWork('custom') &&
-        this.isShowing() &&
+        triggerStrategy.canEvaluate('click-outside') &&
         this.showConfig &&
         !ui.isParent(currentTarget, this.showConfig.appendableElement) &&
         !ui.isParent(currentTarget, this.showConfig.target) &&
         (this.showConfig.isScreenPosition ||
           ui.findParent(currentTarget, 'vega-modal') === ui.findParent(this.showConfig.target, 'vega-modal'))) {
-        this.hide();
+        this.executeTriggerStrategy(triggerStrategy, e, 'click-outside');
       }
     };
     /* istanbul ignore next */
@@ -1366,9 +1654,10 @@ class ElementAppenderSlimmer extends globalSlimmerRegistry.VegaSlimmer {
       }
     };
     /* A timer that will hide the dropdown after a certain amount of time. */
-    this.createDelayHideTimer = () => {
+    this.createDelayHideTimer = (event, eventType) => {
+      const triggerStrategy = this.getTriggerStrategy();
       this.delayHideTimer = setTimeout(() => {
-        this.hide();
+        this.executeTriggerStrategy(triggerStrategy, event, eventType);
         clearTimeout(this.delayHideTimer);
       }, ElementAppenderSlimmer.DELAY_HIDE_TIME);
     };
@@ -1376,19 +1665,22 @@ class ElementAppenderSlimmer extends globalSlimmerRegistry.VegaSlimmer {
     this.clearDelayHideTimer = () => {
       this.delayHideTimer && clearTimeout(this.delayHideTimer);
     };
-    /* It's a function that checks if the listener should work or not. */
-    this.shouldListenerWork = (trigger) => {
-      const currentTrigger = this.getTrigger();
-      switch (trigger) {
-        case 'custom':
-          return currentTrigger !== 'none';
-        case 'click':
-          return currentTrigger === 'click';
-        case 'hover':
-          return currentTrigger === 'hover';
+    this.executeTriggerStrategy = (triggerStrategy, event, eventType) => {
+      if (this.showConfig) {
+        const result = triggerStrategy.evaluate({
+          target: this.showConfig.target,
+          appendableElement: this.showConfig.appendableElement,
+          htmlEvent: event,
+          eventType: eventType,
+          currentState: {
+            isVisible: this.isShowing(),
+          },
+        });
+        if (result) {
+          result.nextAction === 'hide' && this.hide();
+          result.nextAction === 'show' && this.show();
+        }
       }
-      /* istanbul ignore next */
-      throw new Error(`Unexpected trigger: ${trigger}. Expected values are custom, click, or hover.`);
     };
     this.showConfigFactory = showConfigFactory;
     this.getTrigger = getTrigger;
@@ -1490,6 +1782,21 @@ class ElementAppenderSlimmer extends globalSlimmerRegistry.VegaSlimmer {
   removeShadowRootElementScrolling() {
     changeManager.ChangeManager.unregister(staticSubjectTitle.SHADOW_ROOT_ELEMENT_SCROLLING, this.shadowRootElementScrollingObserver);
   }
+  getTriggerStrategy() {
+    const trigger = this.getTrigger();
+    if (trigger === 'click') {
+      return new ClickTriggerStrategy();
+    }
+    else if (trigger === 'hover') {
+      return new HoverTriggerStrategy();
+    }
+    else if (typeGuard.isEATriggerStrategy(trigger)) {
+      return trigger;
+    }
+    else {
+      return new NoneTriggerStrategy();
+    }
+  }
 }
 ElementAppenderSlimmer.DELAY_HIDE_TIME = 100;
 __decorate([