x-ui-design 0.9.21 → 0.9.23

package/lib/components/Dropdown/Dropdown.tsx

@@ -201,7 +201,7 @@ function MenuInner({
 }: DropdownMenuInnerProps) {
     return (
         <ul className={`${prefixCls}-menu`} ref={menuRef} role='menu'>
-            {items.map((it) => (
+            {items?.map((it) => (
                 <li
                     key={it.key}
                     role='menuitem'

package/lib/hooks/usePopupPosition.ts

@@ -11,7 +11,7 @@ import {
 import { Placement } from "../types";
 import { getElementParentDetails } from "../helpers";
 
-const OFFSET = 12;
+const OFFSET = 11;
 
 type TPopupPosition = {
     open: boolean;
@@ -37,6 +37,7 @@ export const usePopupPosition = ({
     const [popupPosition, setPopupPosition] = useState<CSSProperties>({});
 
     const inBody = useMemo(() => popupContainer?.tagName === 'BODY', [popupContainer]);
+    const popupRect = useMemo(() => popupRef.current?.getBoundingClientRect(), [popupRef.current]);
 
     const calculatePosition = useCallback((e?: Event) => {
         const container = targetRef.current?.getBoundingClientRect();
@@ -75,9 +76,7 @@ export const usePopupPosition = ({
             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),
@@ -122,7 +121,7 @@ export 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":
@@ -134,32 +133,32 @@ export 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) {
@@ -172,8 +171,6 @@ export const usePopupPosition = ({
         const { scrollableParents } = getElementParentDetails(targetRef.current, true);
         scrollableParents?.addEventListener("scroll", calculatePosition, options);
 
-        // setPositionRelative('relative');
-
         calculatePosition();
 
         document.body.addEventListener("scroll", calculatePosition, options);
@@ -184,14 +181,20 @@ export const usePopupPosition = ({
 
             setPopupPosition({});
         };
-    }, [open, calculatePosition]);
+    }, [open, targetRef, calculatePosition]);
+
+    const opacity = useMemo(() => {
+        console.log(popupRect?.width, popupPosition);
+
+        return Object.keys(popupPosition).length && popupRect?.width ? 1 : 0
+    }, [popupPosition, popupRect?.width])
 
     return {
         _placement,
         popupStyle: {
             zIndex: 10000,
             position: "absolute",
-            opacity: Object.keys(popupPosition).length ? 1 : 0,
+            opacity: opacity,
             ...popupPosition
         }
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x-ui-design",
-  "version": "0.9.21",
+  "version": "0.9.23",
   "license": "ISC",
   "author": "Gabriel Boyajyan",
   "main": "dist/index.js",

package/src/app/page.tsx

@@ -10,6 +10,7 @@ import { Menu } from '../../lib/components/Menu';
 import { ArrowIcon, ClearIcon } from "../../lib/components/Icons/Icons";
 import { ItemType } from "../../lib/types/menu";
 import { lazy, Suspense } from "react";
+import MenuItem from '../../lib/components/Menu/Item/Item';
 
 const Result = lazy(() => import('../../lib/components/Result/Result'))
 
@@ -155,7 +156,7 @@ export default function Home() {
                 <Popover
                     placement='bottomLeft'
                     content={
-                        <Suspense>
+                        <Suspense fallback={<div style={{ width: 12, height: 12 }}></div>}>
                             <Result
                                 status="success"
                                 title="Success"
@@ -173,6 +174,15 @@ export default function Home() {
                     Menu
                 </Popover>
                 {/* <DatePicker getPopupContainer={() => document.body} /> */}
+                {/* <Dropdown overlay={() => {
+                    return <Menu>
+                        {items.map((item) => {
+                            return <MenuItem key={item.key} itemKey={item.key} label={item.label} />
+                        })}
+                    </Menu>
+                }}>
+                    DropDown
+                </Dropdown> */}
             </div>
             <div style={{ minWidth: 1500 }} />
         </div>