@ultraviolet/ui 1.51.2 → 1.51.4

package/dist/components/Popup/helpers.cjs

@@ -0,0 +1,216 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const ARROW_WIDTH = 8;
+const SPACE = 4;
+const TOTAL_USED_SPACE = 0;
+const DEFAULT_POSITIONS = {
+  arrowLeft: 0,
+  arrowTop: 0,
+  arrowTransform: "translate(-50%, -50)",
+  placement: "top",
+  rotate: 135,
+  popupInitialPosition: "translate3d(0px, 0px, 0)",
+  popupPosition: "translate3d(0px, 0px, 0)"
+};
+const computePlacement = ({
+  childrenStructuredRef,
+  popupStructuredRef,
+  offsetParentRect,
+  offsetParent,
+  popupPortalTarget
+}) => {
+  const {
+    top: childrenTop,
+    left: childrenLeft,
+    right: childrenRight,
+    width: childrenWidth
+  } = childrenStructuredRef;
+  const {
+    top: parentTop,
+    left: parentLeft
+  } = offsetParentRect;
+  const isPopupPortalTargetBody = popupPortalTarget === document.body || offsetParent === document.body;
+  const overloadedChildrenLeft = isPopupPortalTargetBody ? childrenLeft : childrenLeft - parentLeft;
+  const overloadedChildrenTop = isPopupPortalTargetBody ? childrenTop : childrenTop - parentTop;
+  const overloadedChildrenRight = isPopupPortalTargetBody ? childrenRight : childrenLeft - parentLeft + childrenWidth;
+  const {
+    width: popupWidth,
+    height: popupHeight
+  } = popupStructuredRef;
+  if (overloadedChildrenTop - popupHeight - TOTAL_USED_SPACE < 0) {
+    return "bottom";
+  }
+  if (overloadedChildrenLeft - popupWidth - TOTAL_USED_SPACE < 0) {
+    return "right";
+  }
+  if (overloadedChildrenRight + popupWidth + TOTAL_USED_SPACE > window.innerWidth) {
+    return "left";
+  }
+  return "top";
+};
+const findOffsetParent = (element) => {
+  const offsetParent = element?.current?.offsetParent;
+  if (offsetParent && !["TH", "TD", "TABLE"].includes(offsetParent.tagName)) {
+    return offsetParent;
+  }
+  let currentElement = element?.current;
+  while (currentElement && currentElement.tagName !== "BODY") {
+    const {
+      position
+    } = window.getComputedStyle(currentElement);
+    if (position !== "static") {
+      return currentElement;
+    }
+    currentElement = currentElement.parentElement;
+  }
+  return document.body;
+};
+const getPopupOverflowFromParent = (position, offsetParentRect, childrenRect, popupStructuredRef) => {
+  const {
+    top: parentTop,
+    left: parentLeft,
+    right: parentRight
+  } = offsetParentRect;
+  const {
+    top: childrenTop,
+    bottom: childrenBottom,
+    left: childrenLeft,
+    right: childrenRight,
+    width: childrenWidth
+  } = childrenRect;
+  const {
+    width: popupWidth,
+    height: popupHeight
+  } = popupStructuredRef;
+  const popupHalfWidthWithArrow = popupWidth / 2 - ARROW_WIDTH;
+  const popupHalfHeightWithArrow = popupHeight / 2 - ARROW_WIDTH;
+  if (position === "top" || position === "bottom") {
+    const popupOverflowRight = childrenRight - childrenWidth / 2 + popupWidth / 2;
+    const popupOverflowLeft = childrenLeft + childrenWidth / 2 - parentLeft - popupWidth / 2;
+    if (popupOverflowRight > parentRight) {
+      if (Math.abs(popupOverflowRight - parentRight) > popupHalfWidthWithArrow) {
+        return -popupHalfWidthWithArrow;
+      }
+      return parentRight - popupOverflowRight;
+    }
+    if (popupOverflowLeft < 0) {
+      if (Math.abs(popupOverflowLeft) > popupHalfWidthWithArrow) {
+        return popupHalfWidthWithArrow;
+      }
+      return Math.abs(popupOverflowLeft);
+    }
+  }
+  if (position === "left" || position === "right") {
+    const popupOverflowTop = childrenTop - parentTop - popupHeight / 2;
+    if (popupOverflowTop < 0) {
+      if (Math.abs(childrenTop - parentTop - popupHalfHeightWithArrow) > popupHalfHeightWithArrow) {
+        return popupHalfHeightWithArrow;
+      }
+      return Math.abs(popupOverflowTop);
+    }
+    if (childrenBottom + popupHeight > window.innerHeight) {
+      return -popupHalfHeightWithArrow;
+    }
+  }
+  return 0;
+};
+const computePositions = ({
+  placement,
+  childrenRef,
+  popupRef,
+  popupPortalTarget
+}) => {
+  const childrenRect = childrenRef.current.getBoundingClientRect();
+  const offsetParent = findOffsetParent(childrenRef);
+  const offsetParentRect = offsetParent?.getBoundingClientRect() ?? {
+    top: 0,
+    left: 0,
+    right: 0
+  };
+  const popupStructuredRef = popupRef.current.getBoundingClientRect();
+  const placementBasedOnWindowSize = placement === "auto" ? computePlacement({
+    childrenStructuredRef: childrenRect,
+    popupStructuredRef,
+    offsetParentRect,
+    popupPortalTarget,
+    offsetParent
+  }) : placement;
+  const {
+    top: childrenTop,
+    left: childrenLeft,
+    right: childrenRight,
+    width: childrenWidth,
+    height: childrenHeight
+  } = childrenRect;
+  const {
+    top: parentTop,
+    left: parentLeft
+  } = offsetParentRect;
+  const {
+    width: popupWidth,
+    height: popupHeight
+  } = popupStructuredRef;
+  const isPopupPortalTargetBody = popupPortalTarget === document.body || offsetParent === document.body;
+  const scrollTopValue = isPopupPortalTargetBody ? document.documentElement.scrollTop : offsetParent.scrollTop;
+  const overloadedChildrenLeft = isPopupPortalTargetBody ? childrenLeft : childrenLeft - parentLeft;
+  const overloadedChildrenTop = isPopupPortalTargetBody ? childrenTop : childrenTop - parentTop;
+  const overloadedChildrenRight = isPopupPortalTargetBody ? childrenRight : childrenLeft - parentLeft + childrenWidth;
+  const popupOverflow = getPopupOverflowFromParent(placementBasedOnWindowSize, offsetParentRect, childrenRect, popupStructuredRef);
+  switch (placementBasedOnWindowSize) {
+    case "bottom": {
+      const positionX = overloadedChildrenLeft + childrenWidth / 2 - popupWidth / 2;
+      const positionY = overloadedChildrenTop + scrollTopValue + childrenHeight + ARROW_WIDTH + SPACE;
+      return {
+        arrowLeft: popupWidth / 2 + popupOverflow * -1,
+        arrowTop: -ARROW_WIDTH - 5,
+        arrowTransform: "",
+        placement: "bottom",
+        rotate: 180,
+        popupInitialPosition: `translate3d(${positionX + popupOverflow}px, ${positionY - TOTAL_USED_SPACE}px, 0)`,
+        popupPosition: `translate3d(${positionX + popupOverflow}px, ${positionY}px, 0)`
+      };
+    }
+    case "left": {
+      const positionX = overloadedChildrenLeft - popupWidth - ARROW_WIDTH - SPACE * 2;
+      const positionY = overloadedChildrenTop + scrollTopValue - popupHeight / 2 + childrenHeight / 2;
+      return {
+        arrowLeft: popupWidth + ARROW_WIDTH + 5,
+        arrowTop: popupHeight / 2 + popupOverflow * -1,
+        arrowTransform: "translate(-50%, -50%)",
+        placement: "left",
+        rotate: -90,
+        popupInitialPosition: `translate3d(${positionX + TOTAL_USED_SPACE}px, ${positionY + popupOverflow}px, 0)`,
+        popupPosition: `translate3d(${positionX}px, ${positionY + popupOverflow}px, 0)`
+      };
+    }
+    case "right": {
+      const positionX = overloadedChildrenRight + ARROW_WIDTH + SPACE * 2;
+      const positionY = overloadedChildrenTop + scrollTopValue - popupHeight / 2 + childrenHeight / 2;
+      return {
+        arrowLeft: -ARROW_WIDTH - 5,
+        arrowTop: popupHeight / 2 + popupOverflow * -1,
+        arrowTransform: "translate(50%, -50%)",
+        placement: "right",
+        rotate: 90,
+        popupInitialPosition: `translate3d(${positionX - TOTAL_USED_SPACE}px, ${positionY + popupOverflow}px, 0)`,
+        popupPosition: `translate3d(${positionX}px, ${positionY + popupOverflow}px, 0)`
+      };
+    }
+    default: {
+      const positionX = overloadedChildrenLeft + childrenWidth / 2 - popupWidth / 2;
+      const positionY = overloadedChildrenTop + scrollTopValue - popupHeight - ARROW_WIDTH - SPACE;
+      return {
+        arrowLeft: popupWidth / 2 + popupOverflow * -1,
+        arrowTop: popupHeight - 1,
+        arrowTransform: "",
+        placement: "top",
+        rotate: 0,
+        popupInitialPosition: `translate3d(${positionX + popupOverflow}px, ${positionY + TOTAL_USED_SPACE}px, 0)`,
+        popupPosition: `translate3d(${positionX + popupOverflow}px, ${positionY}px, 0)`
+      };
+    }
+  }
+};
+exports.ARROW_WIDTH = ARROW_WIDTH;
+exports.DEFAULT_POSITIONS = DEFAULT_POSITIONS;
+exports.computePositions = computePositions;

package/dist/components/Popup/helpers.js

@@ -23,12 +23,18 @@ const computePlacement = ({
     right: childrenRight,
     width: childrenWidth
   } = childrenStructuredRef;
-  const { top: parentTop, left: parentLeft } = offsetParentRect;
+  const {
+    top: parentTop,
+    left: parentLeft
+  } = offsetParentRect;
   const isPopupPortalTargetBody = popupPortalTarget === document.body || offsetParent === document.body;
   const overloadedChildrenLeft = isPopupPortalTargetBody ? childrenLeft : childrenLeft - parentLeft;
   const overloadedChildrenTop = isPopupPortalTargetBody ? childrenTop : childrenTop - parentTop;
   const overloadedChildrenRight = isPopupPortalTargetBody ? childrenRight : childrenLeft - parentLeft + childrenWidth;
-  const { width: popupWidth, height: popupHeight } = popupStructuredRef;
+  const {
+    width: popupWidth,
+    height: popupHeight
+  } = popupStructuredRef;
   if (overloadedChildrenTop - popupHeight - TOTAL_USED_SPACE < 0) {
     return "bottom";
   }
@@ -47,7 +53,9 @@ const findOffsetParent = (element) => {
   }
   let currentElement = element?.current;
   while (currentElement && currentElement.tagName !== "BODY") {
-    const { position } = window.getComputedStyle(currentElement);
+    const {
+      position
+    } = window.getComputedStyle(currentElement);
     if (position !== "static") {
       return currentElement;
     }
@@ -68,7 +76,10 @@ const getPopupOverflowFromParent = (position, offsetParentRect, childrenRect, po
     right: childrenRight,
     width: childrenWidth
   } = childrenRect;
-  const { width: popupWidth, height: popupHeight } = popupStructuredRef;
+  const {
+    width: popupWidth,
+    height: popupHeight
+  } = popupStructuredRef;
   const popupHalfWidthWithArrow = popupWidth / 2 - ARROW_WIDTH;
   const popupHalfHeightWithArrow = popupHeight / 2 - ARROW_WIDTH;
   if (position === "top" || position === "bottom") {
@@ -129,19 +140,20 @@ const computePositions = ({
     width: childrenWidth,
     height: childrenHeight
   } = childrenRect;
-  const { top: parentTop, left: parentLeft } = offsetParentRect;
-  const { width: popupWidth, height: popupHeight } = popupStructuredRef;
+  const {
+    top: parentTop,
+    left: parentLeft
+  } = offsetParentRect;
+  const {
+    width: popupWidth,
+    height: popupHeight
+  } = popupStructuredRef;
   const isPopupPortalTargetBody = popupPortalTarget === document.body || offsetParent === document.body;
   const scrollTopValue = isPopupPortalTargetBody ? document.documentElement.scrollTop : offsetParent.scrollTop;
   const overloadedChildrenLeft = isPopupPortalTargetBody ? childrenLeft : childrenLeft - parentLeft;
   const overloadedChildrenTop = isPopupPortalTargetBody ? childrenTop : childrenTop - parentTop;
   const overloadedChildrenRight = isPopupPortalTargetBody ? childrenRight : childrenLeft - parentLeft + childrenWidth;
-  const popupOverflow = getPopupOverflowFromParent(
-    placementBasedOnWindowSize,
-    offsetParentRect,
-    childrenRect,
-    popupStructuredRef
-  );
+  const popupOverflow = getPopupOverflowFromParent(placementBasedOnWindowSize, offsetParentRect, childrenRect, popupStructuredRef);
   switch (placementBasedOnWindowSize) {
     case "bottom": {
       const positionX = overloadedChildrenLeft + childrenWidth / 2 - popupWidth / 2;