@adyen/adyen-platform-experience-web 1.0.0-beta → 1.0.0-beta.2

package/dist/usePopoverPositioner-882fea89.mjs

@@ -1,182 +0,0 @@
-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
-};