x-ui-design 0.9.21 → 0.9.22

package/dist/index.esm.js

@@ -2618,7 +2618,7 @@ const ConditionalWrapper = ({
   children
 }) => condition ? wrapper(children) : children;
 
-const OFFSET = 12;
+const OFFSET = 11;
 const usePopupPosition = ({
   open,
   setOpen,
@@ -2630,6 +2630,7 @@ 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) {
@@ -2658,8 +2659,7 @@ const usePopupPosition = ({
       setPopupPosition({});
       return;
     }
-    if (popupRef.current) {
-      const popupRect = popupRef.current?.getBoundingClientRect();
+    if (popupRect) {
       const availableSpace = {
         top: container.top - (popupRect.height + OFFSET),
         bottom: (inBody ? window.innerHeight : scrollableParents?.clientHeight || 0) - (container.bottom + popupRect.height + OFFSET),
@@ -2694,7 +2694,7 @@ const usePopupPosition = ({
         case "bottom":
           setPopupPosition({
             top: positions.top + container.height,
-            left: positions.left + (container.width || 0) / 2 - (popupRef.current?.offsetWidth || 0) / 2
+            left: positions.left + (container.width || 0) / 2 - (popupRect?.width || 0) / 2
           });
           break;
         case "bottomLeft":
@@ -2706,31 +2706,31 @@ const usePopupPosition = ({
         case "bottomRight":
           setPopupPosition({
             top: positions.top + container.height,
-            left: positions.left + (container.width || 0) - (popupRef.current?.offsetWidth || 0)
+            left: positions.left + (container.width || 0) - (popupRect?.width || 0)
           });
           break;
         case "top":
           setPopupPosition({
-            top: positions.top - (popupRef.current?.clientHeight || 0) - OFFSET * 2,
-            left: positions.left + (container.width || 0) / 2 - (popupRef.current?.offsetWidth || 0) / 2
+            top: positions.top - (popupRect?.height || 0) - OFFSET * 2,
+            left: positions.left + (container.width || 0) / 2 - (popupRect?.width || 0) / 2
           });
           break;
         case "topLeft":
           setPopupPosition({
-            top: positions.top - (popupRef.current?.clientHeight || 0) - OFFSET * 2,
+            top: positions.top - (popupRect?.height || 0) - OFFSET * 2,
             left: positions.left
           });
           break;
         case "topRight":
           setPopupPosition({
-            top: positions.top - (popupRef.current?.clientHeight || 0) - OFFSET * 2,
-            left: positions.left + (container.width || 0) - (popupRef.current?.offsetWidth || 0)
+            top: positions.top - (popupRect?.height || 0) - OFFSET * 2,
+            left: positions.left + (container.width || 0) - (popupRect?.width || 0)
           });
           break;
       }
     };
     _calculation();
-  }, [targetRef, popupContainer, popupRef, inBody, _placement, setOpen]);
+  }, [targetRef, popupContainer, popupRect, inBody, _placement, setOpen]);
   useEffect(() => {
     if (!open) {
       return;
@@ -2744,7 +2744,6 @@ const usePopupPosition = ({
       scrollableParents
     } = getElementParentDetails(targetRef.current, true);
     scrollableParents?.addEventListener("scroll", calculatePosition, options);
-    // setPositionRelative('relative');
     calculatePosition();
     document.body.addEventListener("scroll", calculatePosition, options);
     document.body.addEventListener("resize", calculatePosition, options);
@@ -2752,13 +2751,13 @@ const usePopupPosition = ({
       controller.abort();
       setPopupPosition({});
     };
-  }, [open, calculatePosition]);
+  }, [open, targetRef, calculatePosition]);
   return {
     _placement,
     popupStyle: {
       zIndex: 10000,
       position: "absolute",
-      opacity: Object.keys(popupPosition).length ? 1 : 0,
+      opacity: Object.keys(popupPosition).length && popupRect?.width ? 1 : 0,
       ...popupPosition
     }
   };
@@ -5571,7 +5570,7 @@ function MenuInner({
     className: `${prefixCls}-menu`,
     ref: menuRef,
     role: "menu"
-  }, items.map(it => /*#__PURE__*/React.createElement("li", {
+  }, items?.map(it => /*#__PURE__*/React.createElement("li", {
     key: it.key,
     role: "menuitem",
     tabIndex: it.disabled ? -1 : 0,