x-ui-design 0.9.80 → 0.9.81

package/lib/components/Dropdown/Dropdown.tsx

@@ -60,14 +60,34 @@ const Dropdown = ({
     }, [controlledOpen]);
 
     useEffect(() => {
-        if (open && autoFocus) {
-            requestAnimationFrame(() => {
-                const first = menuRef.current?.querySelector(
-                    "[role='menuitem']:not([aria-disabled='true'])"
-                ) as HTMLElement | null;
-
-                first?.focus();
-            });
+        const handleClickOutside = (e: MouseEvent) => {
+            if (
+                popupRef.current &&
+                !popupRef.current.contains(e.target as Node) &&
+                targetRef.current &&
+                !targetRef.current.contains(e.target as Node)
+            ) {
+                setOpenInternal(false);
+                onVisibleChange?.(false);
+            }
+        };
+
+        if (open) {
+            if (autoFocus) {
+                requestAnimationFrame(() => {
+                    const first = menuRef.current?.querySelector(
+                        "[role='menuitem']:not([aria-disabled='true'])"
+                    ) as HTMLElement | null;
+    
+                    first?.focus();
+                });
+            }
+
+            document.addEventListener('mousedown', handleClickOutside);
+        } else {
+            return () => {
+                document.removeEventListener('mousedown', handleClickOutside);
+            };
         }
     }, [open]);
 
@@ -84,26 +104,6 @@ const Dropdown = ({
         onVisibleChange?.(next)
     };
 
-    useEffect(() => {
-        const handleClickOutside = (e: MouseEvent) => {
-            if (
-                popupRef.current &&
-                !popupRef.current.contains(e.target as Node) &&
-                targetRef.current &&
-                !targetRef.current.contains(e.target as Node)
-            ) {
-                setOpenInternal(false);
-                onVisibleChange?.(false);
-            }
-        };
-
-        document.addEventListener('mousedown', handleClickOutside);
-
-        return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, []);
-
     const triggers = Array.isArray(trigger) ? trigger : [trigger];
 
     const onTriggerClick = (e: SyntheticEvent) => {
@@ -208,7 +208,7 @@ function MenuInner({
                     aria-disabled={it.disabled ?? false}
                     onClick={(e) => {
                         console.log(1);
-                        
+
                         if (it.disabled) {
                             return;
                         }

package/package.json

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

package/src/app/page.tsx

@@ -1,18 +1,16 @@
 'use client'
 
-import { Popover } from '../../lib/components/Popover';
+import { Dropdown } from '../../lib/components/Dropdown';
 
 export default function Home() {
     return (
-        <Popover
-            trigger={'hover'}
+        <Dropdown
+            trigger={['click']}
             placement='bottomRight'
-            content={
-                <div>Popover</div>
-            }
+            getPopupContainer={() => document.body}
         >
             Menu
-        </Popover>
+        </Dropdown>
     )
 }