@adyen/adyen-platform-experience-web 0.1.1 → 1.0.0-beta

package/dist/usePopoverPositioner-882fea89.mjs

@@ -0,0 +1,182 @@
+import getIntersectionObserver from "./es/components/internal/Popover/utils/utils.js";
+import { h, T, _, p } from "./hooks.module-8565d716.mjs";
+import useReflex from "./es/hooks/useReflex/hooks/useReflex.js";
+var PopoverContainerVariant = /* @__PURE__ */ ((PopoverContainerVariant2) => {
+  PopoverContainerVariant2["TOOLTIP"] = "tooltip";
+  PopoverContainerVariant2["POPOVER"] = "popover";
+  return PopoverContainerVariant2;
+})(PopoverContainerVariant || {});
+var PopoverContainerPosition = /* @__PURE__ */ ((PopoverContainerPosition2) => {
+  PopoverContainerPosition2["TOP"] = "top";
+  PopoverContainerPosition2["TOP_LEFT"] = "top-left";
+  PopoverContainerPosition2["RIGHT"] = "right";
+  PopoverContainerPosition2["BOTTOM"] = "bottom";
+  PopoverContainerPosition2["BOTTOM_LEFT"] = "bottom-left";
+  PopoverContainerPosition2["LEFT"] = "left";
+  return PopoverContainerPosition2;
+})(PopoverContainerPosition || {});
+var PopoverContainerSize = /* @__PURE__ */ ((PopoverContainerSize2) => {
+  PopoverContainerSize2["MEDIUM"] = "medium";
+  PopoverContainerSize2["WIDE"] = "wide";
+  return PopoverContainerSize2;
+})(PopoverContainerSize || {});
+const calculateOffset = ({
+  popover,
+  offset,
+  targetElement,
+  position,
+  variant,
+  fullWidth
+}) => {
+  const currentTarget = targetElement == null ? void 0 : targetElement.current;
+  let dimensionX = 0;
+  let dimensionY = 0;
+  const targetPosition = currentTarget.getBoundingClientRect();
+  const bodyPosition = document.body.getBoundingClientRect();
+  const popoverContent = popover == null ? void 0 : popover.firstChild;
+  const toCenterFullWidth = bodyPosition.left + bodyPosition.width / 2 - popoverContent.offsetWidth / 2;
+  const toCenterX = targetPosition.left + targetPosition.width / 2 - popoverContent.offsetWidth / 2;
+  const toCenterY = targetPosition.top + targetPosition.height / 2 - popoverContent.offsetHeight / 2;
+  switch (position) {
+    case PopoverContainerPosition.BOTTOM:
+      dimensionX = fullWidth ? toCenterFullWidth : variant === PopoverContainerVariant.TOOLTIP ? toCenterX + window.scrollX : (targetPosition == null ? void 0 : targetPosition.left) + window.scrollX;
+      dimensionY = (targetPosition == null ? void 0 : targetPosition.top) + (targetPosition == null ? void 0 : targetPosition.height) + window.scrollY + offset[1];
+      break;
+    case PopoverContainerPosition.BOTTOM_LEFT:
+      dimensionX = (targetPosition == null ? void 0 : targetPosition.right) + window.scrollX - popover.clientWidth;
+      dimensionY = (targetPosition == null ? void 0 : targetPosition.top) + (targetPosition == null ? void 0 : targetPosition.height) + window.scrollY + offset[1];
+      break;
+    case PopoverContainerPosition.TOP:
+      dimensionX = variant === PopoverContainerVariant.TOOLTIP ? toCenterX + window.scrollX : targetPosition.left + window.scrollX;
+      dimensionY = (targetPosition == null ? void 0 : targetPosition.top) - (popoverContent == null ? void 0 : popoverContent.clientHeight) + window.scrollY - offset[0];
+      break;
+    case PopoverContainerPosition.RIGHT:
+      dimensionX = targetPosition.left + targetPosition.width + window.scrollX + offset[2];
+      dimensionY = variant === PopoverContainerVariant.TOOLTIP ? toCenterY + window.scrollY : (targetPosition == null ? void 0 : targetPosition.top) - (targetPosition == null ? void 0 : targetPosition.height) / 2 + window.scrollY;
+      break;
+    case PopoverContainerPosition.LEFT:
+      dimensionX = (targetPosition == null ? void 0 : targetPosition.left) - (popover == null ? void 0 : popover.clientWidth) + window.scrollX - offset[3];
+      dimensionY = variant === PopoverContainerVariant.TOOLTIP ? toCenterY + window.scrollY : (targetPosition == null ? void 0 : targetPosition.top) + window.scrollY - (targetPosition == null ? void 0 : targetPosition.height) / 2;
+      break;
+  }
+  const result = [dimensionX, dimensionY, 0];
+  const res = result.reduce((acc, currentVal, index) => {
+    if (index === 0) {
+      return acc + `${currentVal}px,`;
+    } else if (index === result.length - 1) {
+      return acc + ` ${currentVal}px)`;
+    } else {
+      return acc + ` ${currentVal}px,`;
+    }
+  }, "translate3d(");
+  return `position:absolute;inset:0 auto auto 0;margin: 0;transform: ${res};visibility:hidden`;
+};
+const usePopoverPositioner = (offset, targetElement, variant, position, arrowRef, setToTargetWidth, showOverlay, fitPosition, ref) => {
+  const [initialPosition, setInitialPosition] = h(true);
+  const [showPopover, setShowPopover] = h(fitPosition ? !fitPosition : !!position);
+  const [currentPosition, setCurrentPosition] = h(position || PopoverContainerPosition.TOP);
+  const [checkedPositions, setCheckedPosition] = h([]);
+  const observerCallback = T(
+    (entry) => {
+      if (entry.intersectionRatio === 1)
+        return setShowPopover(true);
+      if (!initialPosition && entry.intersectionRatio !== 1) {
+        if (checkedPositions && checkedPositions.length === (fitPosition ? 5 : 4)) {
+          const bestPos = checkedPositions.reduce((res, pos) => {
+            if (pos[1] > res[1])
+              return pos;
+            return res;
+          }, checkedPositions[0]);
+          setCurrentPosition(bestPos[0]);
+          setShowPopover(true);
+          return;
+        }
+        setShowPopover(false);
+        switch (currentPosition) {
+          case PopoverContainerPosition.TOP:
+            setCheckedPosition((value) => [...value, [PopoverContainerPosition.TOP, entry.intersectionRatio]]);
+            setCurrentPosition(PopoverContainerPosition.BOTTOM);
+            break;
+          case PopoverContainerPosition.BOTTOM:
+            setCheckedPosition((value) => [...value, [PopoverContainerPosition.BOTTOM, entry.intersectionRatio]]);
+            setCurrentPosition(fitPosition ? PopoverContainerPosition.BOTTOM_LEFT : PopoverContainerPosition.RIGHT);
+            break;
+          case PopoverContainerPosition.BOTTOM_LEFT:
+            setCheckedPosition((value) => [...value, [PopoverContainerPosition.BOTTOM, entry.intersectionRatio]]);
+            setCurrentPosition(PopoverContainerPosition.RIGHT);
+            break;
+          case PopoverContainerPosition.RIGHT:
+            setCheckedPosition((value) => [...value, [PopoverContainerPosition.RIGHT, entry.intersectionRatio]]);
+            setCurrentPosition(PopoverContainerPosition.LEFT);
+            break;
+          case PopoverContainerPosition.LEFT:
+            setCheckedPosition((value) => [...value, [PopoverContainerPosition.LEFT, entry.intersectionRatio]]);
+            setCurrentPosition(PopoverContainerPosition.TOP);
+            break;
+        }
+      }
+    },
+    [initialPosition, checkedPositions, currentPosition, fitPosition]
+  );
+  const observerCallbackRef = _(observerCallback);
+  p(() => {
+    getIntersectionObserver(observerCallbackRef.current).remove();
+    observerCallbackRef.current = observerCallback;
+  }, [observerCallback]);
+  return useReflex(
+    T(
+      (current, previous) => {
+        var _a, _b;
+        if (previous && (!position || fitPosition)) {
+          const observer = getIntersectionObserver(observerCallback).observer;
+          observer.unobserve(previous);
+        }
+        if (current && targetElement.current) {
+          if (!position || fitPosition) {
+            const observer = getIntersectionObserver(observerCallback).observer;
+            observer.observe(current);
+          }
+          if (!(current instanceof Element))
+            return;
+          const popoverStyle = calculateOffset({
+            popover: current,
+            offset,
+            targetElement,
+            position: currentPosition,
+            variant,
+            fullWidth: showOverlay ?? false
+          });
+          const style = showPopover ? popoverStyle + ";visibility:visible" : popoverStyle;
+          const styleWithWidth = setToTargetWidth ? style + ";min-width:fit-content;width:" + ((_a = targetElement.current) == null ? void 0 : _a.clientWidth) + "px" : style;
+          current.setAttribute("style", `${styleWithWidth}`);
+          if (initialPosition)
+            setInitialPosition(false);
+          if (variant && variant === PopoverContainerVariant.TOOLTIP && arrowRef) {
+            (_b = arrowRef.current) == null ? void 0 : _b.setAttribute("data-popover-placement", currentPosition);
+          }
+        }
+      },
+      [
+        offset,
+        targetElement,
+        currentPosition,
+        position,
+        variant,
+        observerCallback,
+        showPopover,
+        initialPosition,
+        setToTargetWidth,
+        arrowRef,
+        showOverlay,
+        fitPosition
+      ]
+    ),
+    ref
+  );
+};
+export {
+  PopoverContainerSize as P,
+  PopoverContainerVariant as a,
+  PopoverContainerPosition as b,
+  usePopoverPositioner as u
+};