react-edge-dock 1.0.6 → 1.0.7

package/dist/useEdgeDock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useEdgeDock.d.ts","sourceRoot":"","sources":["../src/useEdgeDock.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,cAAc,EAId,iBAAiB,EAIlB,MAAM,SAAS,CAAC;AAwLjB;;GAEG;AACH,wBAAgB,WAAW,CAAC,MAAM,GAAE,cAAmB,GAAG,iBAAiB,CAgV1E"}
+{"version":3,"file":"useEdgeDock.d.ts","sourceRoot":"","sources":["../src/useEdgeDock.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,cAAc,EAId,iBAAiB,EAIlB,MAAM,SAAS,CAAC;AAwLjB;;GAEG;AACH,wBAAgB,WAAW,CAAC,MAAM,GAAE,cAAmB,GAAG,iBAAiB,CA2W1E"}

package/dist/useEdgeDock.js

@@ -201,6 +201,26 @@ export function useEdgeDock(config = {}) {
             setPositionInternal(controlledPosition);
         }
     }, [controlledPosition]);
+    // Toggle popup
+    const togglePopup = useCallback(() => {
+        const newState = !isPopupOpen;
+        if (controlledPopupOpen === undefined) {
+            setIsPopupOpenInternal(newState);
+        }
+        onPopupChange?.(newState);
+    }, [isPopupOpen, controlledPopupOpen, onPopupChange]);
+    const closePopup = useCallback(() => {
+        if (controlledPopupOpen === undefined) {
+            setIsPopupOpenInternal(false);
+        }
+        onPopupChange?.(false);
+    }, [controlledPopupOpen, onPopupChange]);
+    const openPopup = useCallback(() => {
+        if (controlledPopupOpen === undefined) {
+            setIsPopupOpenInternal(true);
+        }
+        onPopupChange?.(true);
+    }, [controlledPopupOpen, onPopupChange]);
     // Calculate popup position when it opens or button moves
     useEffect(() => {
         if (isPopupOpen && buttonRef.current && popupRef.current) {
@@ -211,6 +231,28 @@ export function useEdgeDock(config = {}) {
             setPopupOrigin(result.origin);
         }
     }, [isPopupOpen, position, popupGap]);
+    // Close popup when clicking outside
+    useEffect(() => {
+        if (!isPopupOpen || !isBrowser)
+            return;
+        const handleClickOutside = (e) => {
+            const target = e.target;
+            // Check if click is outside both button and popup
+            const isOutsideButton = buttonRef.current && !buttonRef.current.contains(target);
+            const isOutsidePopup = popupRef.current && !popupRef.current.contains(target);
+            if (isOutsideButton && isOutsidePopup) {
+                closePopup();
+            }
+        };
+        // Use setTimeout to avoid closing immediately on the same click that opened it
+        const timeoutId = setTimeout(() => {
+            document.addEventListener('mousedown', handleClickOutside);
+        }, 0);
+        return () => {
+            clearTimeout(timeoutId);
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isPopupOpen, closePopup]);
     // Notify state changes
     useEffect(() => {
         if (onDockChange) {
@@ -239,26 +281,6 @@ export function useEdgeDock(config = {}) {
         }
         setPositionInternal(finalPos);
     }, [dockMode, dockEdge, allowedEdges, edgeOffset]);
-    // Toggle popup
-    const togglePopup = useCallback(() => {
-        const newState = !isPopupOpen;
-        if (controlledPopupOpen === undefined) {
-            setIsPopupOpenInternal(newState);
-        }
-        onPopupChange?.(newState);
-    }, [isPopupOpen, controlledPopupOpen, onPopupChange]);
-    const closePopup = useCallback(() => {
-        if (controlledPopupOpen === undefined) {
-            setIsPopupOpenInternal(false);
-        }
-        onPopupChange?.(false);
-    }, [controlledPopupOpen, onPopupChange]);
-    const openPopup = useCallback(() => {
-        if (controlledPopupOpen === undefined) {
-            setIsPopupOpenInternal(true);
-        }
-        onPopupChange?.(true);
-    }, [controlledPopupOpen, onPopupChange]);
     // Pointer down handler
     const handlePointerDown = useCallback((e) => {
         if (!buttonRef.current)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-edge-dock",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "A zero-dependency React TypeScript library for customizable draggable edge-docked floating buttons with popup support",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",