x-ui-design 0.9.16 → 0.9.18

package/dist/index.esm.js

@@ -2640,6 +2640,15 @@ const usePopupPosition = ({
       relativePosition
     } = getElementParentDetails(targetRef.current, true);
     const _containsElement = scrollableParents?.contains(popupContainer) && popupContainer !== scrollableParents;
+    console.info({
+      container,
+      scrollableParents,
+      relativePosition,
+      positions: !popupContainer,
+      _containsElement,
+      inBody,
+      popupRef
+    });
     const positions = !popupContainer ? {
       top: (targetRef.current?.offsetTop || 0) + OFFSET,
       left: targetRef.current?.offsetLeft || 0
@@ -2653,14 +2662,23 @@ const usePopupPosition = ({
       top: (relativePosition.top || 0) + (targetRef.current?.offsetTop || 0) - (scrollableParents?.offsetTop || 0) + OFFSET,
       left: relativePosition.left + (targetRef.current?.offsetLeft || 0) - (targetRef.current?.clientWidth || 0) / 2
     };
-    if (!inBody && popupRef.current) {
+    if (e?.target === scrollableParents && inBody) {
+      setOpen(false);
+      setPopupPosition({});
+      return;
+    }
+    if (popupRef.current) {
       const popupRect = popupRef.current.getBoundingClientRect();
       const availableSpace = {
         top: container.top - (popupRect.height + OFFSET),
-        bottom: (scrollableParents?.clientHeight || 0) - (container.bottom + popupRect.height + OFFSET),
+        bottom: (inBody ? window.innerHeight : scrollableParents?.clientHeight || 0) - (container.bottom + popupRect.height + OFFSET),
         left: container.left - (popupRect.width + OFFSET),
-        right: (scrollableParents?.clientWidth || 0) - (container.right + popupRect.width + OFFSET)
+        right: (inBody ? window.innerWidth : scrollableParents?.clientWidth || 0) - (container.right + popupRect.width + OFFSET)
       };
+      console.info({
+        popupRect,
+        availableSpace
+      });
       let newPlacement = _placement;
       if (availableSpace.bottom < 0 && availableSpace.top > 0) {
         newPlacement = newPlacement.replace('bottom', 'top');
@@ -2674,13 +2692,16 @@ const usePopupPosition = ({
       if (availableSpace.right < 0 && availableSpace.left > 0) {
         newPlacement = newPlacement.replace('Left', 'Right');
       }
+      if (availableSpace.right < 0 && availableSpace.left < 0) {
+        if (newPlacement.includes('Right')) {
+          positions.left = popupRef.current.clientWidth - positions.left + container.left;
+        }
+        if (newPlacement.includes('Left')) {
+          positions.left = positions.left - popupRef.current.clientWidth + container.width;
+        }
+      }
       _setPlacement(newPlacement);
     }
-    if (e?.target === scrollableParents && inBody) {
-      setOpen(false);
-      setPopupPosition({});
-      return;
-    }
     const _calculation = () => {
       switch (_placement) {
         case "bottom":
@@ -2748,6 +2769,7 @@ const usePopupPosition = ({
     document.body.addEventListener("resize", calculatePosition, options);
     return () => {
       controller.abort();
+      setPopupPosition({});
       // setPositionRelative('unset');
     };
   }, [open, targetRef, popupContainer, inBody, calculatePosition]);