x-ui-design 0.9.22 → 0.9.24

package/dist/index.esm.js

@@ -2618,7 +2618,7 @@ const ConditionalWrapper = ({
   children
 }) => condition ? wrapper(children) : children;
 
-const OFFSET = 11;
+const OFFSET = 12;
 const usePopupPosition = ({
   open,
   setOpen,
@@ -2630,7 +2630,6 @@ const usePopupPosition = ({
   const [_placement, _setPlacement] = useState(placement ?? "bottomLeft");
   const [popupPosition, setPopupPosition] = useState({});
   const inBody = useMemo(() => popupContainer?.tagName === 'BODY', [popupContainer]);
-  const popupRect = useMemo(() => popupRef.current?.getBoundingClientRect(), [popupRef.current]);
   const calculatePosition = useCallback(e => {
     const container = targetRef.current?.getBoundingClientRect();
     if (!container) {
@@ -2659,6 +2658,7 @@ const usePopupPosition = ({
       setPopupPosition({});
       return;
     }
+    const popupRect = popupRef.current?.getBoundingClientRect();
     if (popupRect) {
       const availableSpace = {
         top: container.top - (popupRect.height + OFFSET),
@@ -2690,11 +2690,14 @@ const usePopupPosition = ({
       _setPlacement(newPlacement);
     }
     const _calculation = () => {
+      if (!popupRect?.width) {
+        return;
+      }
       switch (_placement) {
         case "bottom":
           setPopupPosition({
             top: positions.top + container.height,
-            left: positions.left + (container.width || 0) / 2 - (popupRect?.width || 0) / 2
+            left: positions.left + (container.width || 0) / 2 - (popupRef.current?.offsetWidth || 0) / 2
           });
           break;
         case "bottomLeft":
@@ -2706,31 +2709,31 @@ const usePopupPosition = ({
         case "bottomRight":
           setPopupPosition({
             top: positions.top + container.height,
-            left: positions.left + (container.width || 0) - (popupRect?.width || 0)
+            left: positions.left + (container.width || 0) - (popupRef.current?.offsetWidth || 0)
           });
           break;
         case "top":
           setPopupPosition({
-            top: positions.top - (popupRect?.height || 0) - OFFSET * 2,
-            left: positions.left + (container.width || 0) / 2 - (popupRect?.width || 0) / 2
+            top: positions.top - (popupRef.current?.clientHeight || 0) - OFFSET * 2,
+            left: positions.left + (container.width || 0) / 2 - (popupRef.current?.offsetWidth || 0) / 2
           });
           break;
         case "topLeft":
           setPopupPosition({
-            top: positions.top - (popupRect?.height || 0) - OFFSET * 2,
+            top: positions.top - (popupRef.current?.clientHeight || 0) - OFFSET * 2,
             left: positions.left
           });
           break;
         case "topRight":
           setPopupPosition({
-            top: positions.top - (popupRect?.height || 0) - OFFSET * 2,
-            left: positions.left + (container.width || 0) - (popupRect?.width || 0)
+            top: positions.top - (popupRef.current?.clientHeight || 0) - OFFSET * 2,
+            left: positions.left + (container.width || 0) - (popupRef.current?.offsetWidth || 0)
           });
           break;
       }
     };
     _calculation();
-  }, [targetRef, popupContainer, popupRect, inBody, _placement, setOpen]);
+  }, [targetRef, popupContainer, popupRef, inBody, _placement, setOpen]);
   useEffect(() => {
     if (!open) {
       return;
@@ -2757,7 +2760,7 @@ const usePopupPosition = ({
     popupStyle: {
       zIndex: 10000,
       position: "absolute",
-      opacity: Object.keys(popupPosition).length && popupRect?.width ? 1 : 0,
+      opacity: Object.keys(popupPosition).length ? 1 : 0,
       ...popupPosition
     }
   };