@eightshift/ui-components 5.2.0 → 5.3.0

package/dist/{OverlayArrow-EZ0v_ljk.js → OverlayArrow-DivvkAVb.js}

@@ -1,7 +1,7 @@
 import { k as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, a as $64fa3d84918910a7$export$29f1550f4b0d4415, h as $64fa3d84918910a7$export$4d86445c2cf5e3 } from "./utils-cvK1vxO7.js";
-import { r as reactDomExports } from "./index-CBHA_HDD.js";
+import { r as reactDomExports } from "./index-D8-Zjpbd.js";
 import React__default, { useEffect, useState, useCallback, useRef, forwardRef, createContext } from "react";
-import { C as $c87311424ea30a05$export$78551043582a6a98, a as $458b0a5536c1a7cf$export$40bfa8c7b0832715 } from "./useHover-44IApaa2.js";
+import { C as $c87311424ea30a05$export$78551043582a6a98, a as $458b0a5536c1a7cf$export$40bfa8c7b0832715 } from "./useHover-LmGemtHE.js";
 import { $ as $9446cca9a3875146$export$7d15b64cf5a3a4c4 } from "./number-7sOvrqo0.js";
 import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "./context-DMOmz986.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "./filterDOMProps-D2C6R0DK.js";
@@ -142,7 +142,7 @@ function $edcf132a9284368a$var$getContainerDimensions(containerNode) {
       left = $edcf132a9284368a$var$visualViewport.offsetLeft;
     }
   } else {
-    ({ width, height, top, left } = $edcf132a9284368a$var$getOffset(containerNode));
+    ({ width, height, top, left } = $edcf132a9284368a$var$getOffset(containerNode, false));
     scroll.top = containerNode.scrollTop;
     scroll.left = containerNode.scrollLeft;
     totalWidth = width;
@@ -284,7 +284,8 @@ function $edcf132a9284368a$export$6839422d1f33cee9(placementInput, childOffset,
   delta = $edcf132a9284368a$var$getDelta(crossAxis, position[crossAxis], overlaySize[crossSize], boundaryDimensions, containerDimensions, padding, containerOffsetWithBoundary);
   position[crossAxis] += delta;
   let arrowPosition = {};
-  let preferredArrowPosition = childOffset[crossAxis] + 0.5 * childOffset[crossSize] - position[crossAxis] - margins[$edcf132a9284368a$var$AXIS[crossAxis]];
+  let origin = childOffset[crossAxis] - position[crossAxis] - margins[$edcf132a9284368a$var$AXIS[crossAxis]];
+  let preferredArrowPosition = origin + 0.5 * childOffset[crossSize];
   const arrowMinPosition = arrowSize / 2 + arrowBoundaryOffset;
   var _margins_left, _margins_right, _margins_top, _margins_bottom;
   const overlayMargin = $edcf132a9284368a$var$AXIS[crossAxis] === "left" ? ((_margins_left = margins.left) !== null && _margins_left !== void 0 ? _margins_left : 0) + ((_margins_right = margins.right) !== null && _margins_right !== void 0 ? _margins_right : 0) : ((_margins_top = margins.top) !== null && _margins_top !== void 0 ? _margins_top : 0) + ((_margins_bottom = margins.bottom) !== null && _margins_bottom !== void 0 ? _margins_bottom : 0);
@@ -293,12 +294,22 @@ function $edcf132a9284368a$export$6839422d1f33cee9(placementInput, childOffset,
   const arrowOverlappingChildMaxEdge = childOffset[crossAxis] + childOffset[crossSize] - arrowSize / 2 - (position[crossAxis] + margins[$edcf132a9284368a$var$AXIS[crossAxis]]);
   const arrowPositionOverlappingChild = $9446cca9a3875146$export$7d15b64cf5a3a4c4(preferredArrowPosition, arrowOverlappingChildMinEdge, arrowOverlappingChildMaxEdge);
   arrowPosition[crossAxis] = $9446cca9a3875146$export$7d15b64cf5a3a4c4(arrowPositionOverlappingChild, arrowMinPosition, arrowMaxPosition);
+  ({ placement, crossPlacement } = placementInfo);
+  if (arrowSize) origin = arrowPosition[crossAxis];
+  else if (crossPlacement === "right") origin += childOffset[crossSize];
+  else if (crossPlacement === "center") origin += childOffset[crossSize] / 2;
+  let crossOrigin = placement === "left" || placement === "top" ? overlaySize[size] : 0;
+  let triggerAnchorPoint = {
+    x: placement === "top" || placement === "bottom" ? origin : crossOrigin,
+    y: placement === "left" || placement === "right" ? origin : crossOrigin
+  };
   return {
     position,
     maxHeight,
     arrowOffsetLeft: arrowPosition.left,
     arrowOffsetTop: arrowPosition.top,
-    placement: placementInfo.placement
+    placement,
+    triggerAnchorPoint
   };
 }
 function $edcf132a9284368a$export$b3ceb0cbf1056d98(opts) {
@@ -307,13 +318,13 @@ function $edcf132a9284368a$export$b3ceb0cbf1056d98(opts) {
   let isViewportContainer = container === document.documentElement;
   const containerPositionStyle = window.getComputedStyle(container).position;
   let isContainerPositioned = !!containerPositionStyle && containerPositionStyle !== "static";
-  let childOffset = isViewportContainer ? $edcf132a9284368a$var$getOffset(targetNode) : $edcf132a9284368a$var$getPosition(targetNode, container);
+  let childOffset = isViewportContainer ? $edcf132a9284368a$var$getOffset(targetNode, false) : $edcf132a9284368a$var$getPosition(targetNode, container, false);
   if (!isViewportContainer) {
     let { marginTop, marginLeft } = window.getComputedStyle(targetNode);
     childOffset.top += parseInt(marginTop, 10) || 0;
     childOffset.left += parseInt(marginLeft, 10) || 0;
   }
-  let overlaySize = $edcf132a9284368a$var$getOffset(overlayNode);
+  let overlaySize = $edcf132a9284368a$var$getOffset(overlayNode, true);
   let margins = $edcf132a9284368a$var$getMargins(overlayNode);
   var _margins_left, _margins_right;
   overlaySize.width += ((_margins_left = margins.left) !== null && _margins_left !== void 0 ? _margins_left : 0) + ((_margins_right = margins.right) !== null && _margins_right !== void 0 ? _margins_right : 0);
@@ -322,15 +333,28 @@ function $edcf132a9284368a$export$b3ceb0cbf1056d98(opts) {
   let scrollSize = $edcf132a9284368a$var$getScroll(scrollNode);
   let boundaryDimensions = $edcf132a9284368a$var$getContainerDimensions(boundaryElement);
   let containerDimensions = $edcf132a9284368a$var$getContainerDimensions(container);
-  let containerOffsetWithBoundary = boundaryElement.tagName === "BODY" ? $edcf132a9284368a$var$getOffset(container) : $edcf132a9284368a$var$getPosition(container, boundaryElement);
+  let containerOffsetWithBoundary = boundaryElement.tagName === "BODY" ? $edcf132a9284368a$var$getOffset(container, false) : $edcf132a9284368a$var$getPosition(container, boundaryElement, false);
   if (container.tagName === "HTML" && boundaryElement.tagName === "BODY") {
     containerDimensions.scroll.top = 0;
     containerDimensions.scroll.left = 0;
   }
   return $edcf132a9284368a$export$6839422d1f33cee9(placement, childOffset, overlaySize, scrollSize, margins, padding, shouldFlip, boundaryDimensions, containerDimensions, containerOffsetWithBoundary, offset, crossOffset, isContainerPositioned, maxHeight, arrowSize, arrowBoundaryOffset);
 }
-function $edcf132a9284368a$var$getOffset(node) {
+function $edcf132a9284368a$export$4b834cebd9e5cebe(node, ignoreScale) {
   let { top, left, width, height } = node.getBoundingClientRect();
+  if (ignoreScale && node instanceof node.ownerDocument.defaultView.HTMLElement) {
+    width = node.offsetWidth;
+    height = node.offsetHeight;
+  }
+  return {
+    top,
+    left,
+    width,
+    height
+  };
+}
+function $edcf132a9284368a$var$getOffset(node, ignoreScale) {
+  let { top, left, width, height } = $edcf132a9284368a$export$4b834cebd9e5cebe(node, ignoreScale);
   let { scrollTop, scrollLeft, clientTop, clientLeft } = document.documentElement;
   return {
     top: top + scrollTop - clientTop,
@@ -339,20 +363,13 @@ function $edcf132a9284368a$var$getOffset(node) {
     height
   };
 }
-function $edcf132a9284368a$var$getPosition(node, parent) {
+function $edcf132a9284368a$var$getPosition(node, parent, ignoreScale) {
   let style = window.getComputedStyle(node);
   let offset;
-  if (style.position === "fixed") {
-    let { top, left, width, height } = node.getBoundingClientRect();
-    offset = {
-      top,
-      left,
-      width,
-      height
-    };
-  } else {
-    offset = $edcf132a9284368a$var$getOffset(node);
-    let parentOffset = $edcf132a9284368a$var$getOffset(parent);
+  if (style.position === "fixed") offset = $edcf132a9284368a$export$4b834cebd9e5cebe(node, ignoreScale);
+  else {
+    offset = $edcf132a9284368a$var$getOffset(node, ignoreScale);
+    let parentOffset = $edcf132a9284368a$var$getOffset(parent, ignoreScale);
     let parentStyle = window.getComputedStyle(parent);
     parentOffset.top += (parseInt(parentStyle.borderTopWidth, 10) || 0) - parent.scrollTop;
     parentOffset.left += (parseInt(parentStyle.borderLeftWidth, 10) || 0) - parent.scrollLeft;
@@ -401,13 +418,14 @@ function $dd149f63282afbbf$export$18fc8428861184da(opts) {
 let $2a41e45df1593e64$var$visualViewport = typeof document !== "undefined" ? window.visualViewport : null;
 function $2a41e45df1593e64$export$d39e1813b3bdd0e1(props) {
   let { direction } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
-  let { arrowSize = 0, targetRef, overlayRef, scrollRef = overlayRef, placement = "bottom", containerPadding = 12, shouldFlip = true, boundaryElement = typeof document !== "undefined" ? document.body : null, offset = 0, crossOffset = 0, shouldUpdatePosition = true, isOpen = true, onClose, maxHeight, arrowBoundaryOffset = 0 } = props;
+  let { arrowSize, targetRef, overlayRef, arrowRef, scrollRef = overlayRef, placement = "bottom", containerPadding = 12, shouldFlip = true, boundaryElement = typeof document !== "undefined" ? document.body : null, offset = 0, crossOffset = 0, shouldUpdatePosition = true, isOpen = true, onClose, maxHeight, arrowBoundaryOffset = 0 } = props;
   let [position, setPosition] = useState(null);
   let deps = [
     shouldUpdatePosition,
     placement,
     overlayRef.current,
     targetRef.current,
+    arrowRef === null || arrowRef === void 0 ? void 0 : arrowRef.current,
     scrollRef.current,
     containerPadding,
     shouldFlip,
@@ -464,7 +482,7 @@ function $2a41e45df1593e64$export$d39e1813b3bdd0e1(props) {
       offset,
       crossOffset,
       maxHeight,
-      arrowSize,
+      arrowSize: arrowSize !== null && arrowSize !== void 0 ? arrowSize : (arrowRef === null || arrowRef === void 0 ? void 0 : arrowRef.current) ? $edcf132a9284368a$export$4b834cebd9e5cebe(arrowRef.current, true).width : 0,
       arrowBoundaryOffset
     });
     if (!position2.position) return;
@@ -526,17 +544,20 @@ function $2a41e45df1593e64$export$d39e1813b3bdd0e1(props) {
     isOpen,
     onClose: onClose && close
   });
-  var _position_maxHeight, _position_placement;
+  var _position_maxHeight, _position_placement, _position_triggerAnchorPoint;
   return {
     overlayProps: {
       style: {
-        position: "absolute",
+        position: position ? "absolute" : "fixed",
+        top: !position ? 0 : void 0,
+        left: !position ? 0 : void 0,
         zIndex: 1e5,
         ...position === null || position === void 0 ? void 0 : position.position,
         maxHeight: (_position_maxHeight = position === null || position === void 0 ? void 0 : position.maxHeight) !== null && _position_maxHeight !== void 0 ? _position_maxHeight : "100vh"
       }
     },
     placement: (_position_placement = position === null || position === void 0 ? void 0 : position.placement) !== null && _position_placement !== void 0 ? _position_placement : null,
+    triggerAnchorPoint: (_position_triggerAnchorPoint = position === null || position === void 0 ? void 0 : position.triggerAnchorPoint) !== null && _position_triggerAnchorPoint !== void 0 ? _position_triggerAnchorPoint : null,
     arrowProps: {
       "aria-hidden": "true",
       role: "presentation",