x-ui-design 0.9.16 → 0.9.17

package/dist/index.esm.js

@@ -2653,13 +2653,18 @@ 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)
       };
       let newPlacement = _placement;
       if (availableSpace.bottom < 0 && availableSpace.top > 0) {
@@ -2674,13 +2679,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 +2756,7 @@ const usePopupPosition = ({
     document.body.addEventListener("resize", calculatePosition, options);
     return () => {
       controller.abort();
+      setPopupPosition({});
       // setPositionRelative('unset');
     };
   }, [open, targetRef, popupContainer, inBody, calculatePosition]);