react-edge-dock 1.0.2 → 1.0.3

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,EAGlB,MAAM,SAAS,CAAC;AAwKjB;;GAEG;AACH,wBAAgB,WAAW,CAAC,MAAM,GAAE,cAAmB,GAAG,iBAAiB,CAwT1E"}
+{"version":3,"file":"useEdgeDock.d.ts","sourceRoot":"","sources":["../src/useEdgeDock.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,cAAc,EAId,iBAAiB,EAGlB,MAAM,SAAS,CAAC;AAwKjB;;GAEG;AACH,wBAAgB,WAAW,CAAC,MAAM,GAAE,cAAmB,GAAG,iBAAiB,CAgV1E"}

package/dist/useEdgeDock.js

@@ -131,10 +131,10 @@ export function useEdgeDock(config = {}) {
     const { dockMode = 'auto', dockEdge, allowedEdges, position: controlledPosition, animation = true, popupGap = 12, edgeOffset = 0, zIndex = 9999, onDockChange, isPopupOpen: controlledPopupOpen, onPopupChange, } = config;
     const buttonRef = useRef(null);
     const popupRef = useRef(null);
-    // Get initial viewport safely
-    const initialViewport = getViewport();
-    // Internal state
-    const [position, setPositionInternal] = useState(controlledPosition || { x: initialViewport.width - 60, y: initialViewport.height - 60 });
+    const isMountedRef = useRef(false);
+    // Use a fixed initial position to avoid SSR hydration mismatch
+    // This will be updated after mount on the client
+    const [position, setPositionInternal] = useState(controlledPosition || { x: 100, y: 100 });
     const [dockedEdge, setDockedEdge] = useState(null);
     const [isDragging, setIsDragging] = useState(false);
     const [isPopupOpenInternal, setIsPopupOpenInternal] = useState(false);
@@ -158,6 +158,28 @@ export function useEdgeDock(config = {}) {
         isDragging,
         isPopupOpen,
     };
+    // Initialize position after mount (client-side only) to avoid hydration mismatch
+    useEffect(() => {
+        if (!isMountedRef.current && !controlledPosition && buttonRef.current) {
+            isMountedRef.current = true;
+            const viewport = getViewport();
+            const buttonRect = buttonRef.current.getBoundingClientRect();
+            const buttonDimensions = { width: buttonRect.width, height: buttonRect.height };
+            // Set initial position on client after mount
+            let initialPos = { x: viewport.width - 60, y: viewport.height - 60 };
+            initialPos = constrainToViewport(initialPos, viewport, buttonDimensions);
+            if (dockMode === 'auto') {
+                const edge = getClosestEdge(initialPos, viewport, allowedEdges);
+                initialPos = snapToEdge(initialPos, edge, viewport, buttonDimensions, edgeOffset);
+                setDockedEdge(edge);
+            }
+            else if (dockMode === 'manual' && dockEdge) {
+                initialPos = snapToEdge(initialPos, dockEdge, viewport, buttonDimensions, edgeOffset);
+                setDockedEdge(dockEdge);
+            }
+            setPositionInternal(initialPos);
+        }
+    }, [controlledPosition, dockMode, dockEdge, allowedEdges, edgeOffset]);
     // Update controlled position
     useEffect(() => {
         if (controlledPosition) {

package/package.json

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