x-ui-design 0.9.20 → 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) {
@@ -2640,10 +2641,6 @@ const usePopupPosition = ({
       relativePosition
     } = getElementParentDetails(targetRef.current, true);
     const _containsElement = scrollableParents?.contains(popupContainer) && popupContainer !== scrollableParents;
-    const popupRect = popupRef.current?.getBoundingClientRect();
-    if (!popupRect?.width) {
-      return;
-    }
     const positions = !popupContainer ? {
       top: (targetRef.current?.offsetTop || 0) + OFFSET,
       left: targetRef.current?.offsetLeft || 0
@@ -2697,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":
@@ -2709,41 +2706,35 @@ 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.current, inBody, _placement, setOpen]);
+  }, [targetRef, popupContainer, popupRect, inBody, _placement, setOpen]);
   useEffect(() => {
     if (!open) {
       return;
     }
-    // const setPositionRelative = (position: string) => {
-    //     (scrollableParents as HTMLDivElement).style.position = position;
-    //     if (popupContainer) {
-    //         (popupContainer as HTMLDivElement).style.position = position;
-    //     }
-    // }
     const controller = new AbortController();
     const options = {
       passive: true,
@@ -2753,22 +2744,20 @@ 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);
     return () => {
       controller.abort();
       setPopupPosition({});
-      // setPositionRelative('unset');
     };
-  }, [open, targetRef, popupContainer, inBody, 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
     }
   };
@@ -5581,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,