react-edge-dock 1.0.6 → 1.0.8

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,CA8W1E"}

package/dist/useEdgeDock.js

@@ -164,6 +164,7 @@ export function useEdgeDock(config = {}) {
         startPosX: 0,
         startPosY: 0,
         hasMoved: false,
+        popupWasOpen: false,
     });
     const isPopupOpen = controlledPopupOpen ?? isPopupOpenInternal;
     // Get current state
@@ -201,6 +202,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 +232,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 +282,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)
@@ -274,14 +297,11 @@ export function useEdgeDock(config = {}) {
             startPosX: position.x,
             startPosY: position.y,
             hasMoved: false,
+            popupWasOpen: isPopupOpen,
         };
         setIsDragging(true);
         setIsAnimating(false);
-        // Close popup when starting to drag
-        if (isPopupOpen) {
-            closePopup();
-        }
-    }, [position, isPopupOpen, closePopup]);
+    }, [position, isPopupOpen]);
     // Pointer move handler
     useEffect(() => {
         const handlePointerMove = (e) => {
@@ -291,6 +311,12 @@ export function useEdgeDock(config = {}) {
             const deltaY = e.clientY - dragStateRef.current.startY;
             // Mark as moved if dragged more than 5px
             if (Math.abs(deltaX) > 5 || Math.abs(deltaY) > 5) {
+                if (!dragStateRef.current.hasMoved) {
+                    // First time detecting movement - close popup if it was open
+                    if (dragStateRef.current.popupWasOpen) {
+                        closePopup();
+                    }
+                }
                 dragStateRef.current.hasMoved = true;
             }
             const newPos = {
@@ -337,7 +363,7 @@ export function useEdgeDock(config = {}) {
             document.removeEventListener('pointermove', handlePointerMove);
             document.removeEventListener('pointerup', handlePointerUp);
         };
-    }, [position, dockMode, dockEdge, animation, edgeOffset, allowedEdges]);
+    }, [position, dockMode, dockEdge, animation, edgeOffset, allowedEdges, closePopup]);
     // Click handler (only trigger if not dragged)
     const handleClick = useCallback((e) => {
         if (dragStateRef.current.hasMoved) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-edge-dock",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "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",