x-ui-design 0.7.52 → 0.7.53

package/dist/index.esm.js

@@ -2841,59 +2841,42 @@ const TimePicker = ({
     });
   };
   const dropdownPossition = useCallback(() => {
-    if (!inputRef.current) {
-      return {};
-    }
-    const scrollableParents = getScrollParents(inputRef.current)[1];
-    const offsetHeight = getPopupContainer ? window.innerHeight : scrollableParents?.offsetHeight;
-    const shouldShowAbove = offsetHeight - (inputRef.current?.getBoundingClientRect().bottom || 0) < 230;
-    const shouldShowBelow = inputRef.current?.getBoundingClientRect().top < 230;
+    if (!inputRef.current) return {};
+    const inputRect = inputRef.current.getBoundingClientRect();
+    const popupEl = popupRef.current;
+    const dropdownHeight = popupEl?.offsetHeight || 230;
+    // 1️⃣ Determine the container for popup
+    const popupContainer = getPopupContainer ? getPopupContainer(document.body) : getScrollParents(inputRef.current)[1] || document.body;
+    const containerRect = popupContainer.getBoundingClientRect();
+    // 2️⃣ Compute visible space inside the container
+    const spaceAbove = inputRect.top - containerRect.top;
+    const spaceBelow = containerRect.bottom - inputRect.bottom;
+    const shouldShowAbove = spaceBelow < dropdownHeight && spaceAbove > dropdownHeight;
+    const shouldShowBelow = !shouldShowAbove;
+    // Debug
     console.log({
-      shouldShowBelow,
-      shouldShowAbove
+      container: popupContainer,
+      spaceAbove,
+      spaceBelow,
+      shouldShowAbove,
+      shouldShowBelow
     });
-    if (open && !shouldShowBelow && !shouldShowAbove) {
-      setDropdownPosition(previousDropdownPosition => {
-        if (!Object.keys(previousDropdownPosition).length) {
-          if (getPopupContainer) {
-            return {
-              top: (inputRef.current?.getBoundingClientRect().top || 0) + document.documentElement.scrollTop - 230,
-              left: (inputRef.current?.getBoundingClientRect().left || 0) + document.documentElement.scrollLeft
-            };
-          } else {
-            return {
-              top: (inputRef.current?.offsetTop || 0) + (inputRef.current?.offsetHeight || 0),
-              left: inputRef.current?.offsetLeft
-            };
-          }
-        }
-        return previousDropdownPosition;
-      });
-    }
+    // 3️⃣ Compute the position
     if (getPopupContainer) {
-      if (!shouldShowBelow) {
-        toBelow();
-        return;
-      }
-      if (!shouldShowAbove) {
+      // Position relative to container (like Antd with custom popup container)
+      if (shouldShowAbove) {
         toAbove();
+      } else {
+        toBelow();
       }
     } else {
-      if (shouldShowBelow) {
-        setDropdownPosition({
-          top: inputRef.current.offsetTop + inputRef.current.offsetHeight,
-          left: inputRef.current?.offsetLeft
-        });
-        return;
-      }
-      if (shouldShowAbove) {
-        setDropdownPosition({
-          top: inputRef.current?.offsetHeight - inputRef.current.offsetHeight - (popupRef.current?.offsetHeight || 0) - 8,
-          left: inputRef.current?.offsetLeft
-        });
-      }
+      // Position relative to nearest scrollable container (Antd default)
+      setDropdownPosition({
+        top: shouldShowAbove ? inputRef.current.offsetTop - (popupEl?.offsetHeight || dropdownHeight) - 8 : inputRef.current.offsetTop + inputRef.current.offsetHeight,
+        left: inputRef.current.offsetLeft
+      });
     }
-  }, [open, inputRef.current]);
+  }, [open, getPopupContainer]);
   const getScrollParents = useCallback(element => {
     const parents = [];
     let current = element.parentElement;