react-edge-dock 1.0.10 → 1.0.11

package/dist/types.d.ts

@@ -64,7 +64,32 @@ export interface EdgeDockConfig {
     onPopupChange?: (isOpen: boolean) => void;
     /** Whether the button is draggable. Defaults to true. */
     draggable?: boolean;
+    /**
+     * Sticky position configuration for non-draggable mode.
+     * Can be a single position, an array of positions (for responsive),
+     * or an object with named breakpoints.
+     */
+    sticky?: StickyConfig;
 }
+/**
+ * Sticky position coordinates.
+ * Values can be numbers (pixels) or strings (percentage/css units).
+ */
+export interface StickyPosition {
+    top?: number | string;
+    bottom?: number | string;
+    left?: number | string;
+    right?: number | string;
+}
+/**
+ * Sticky configuration supporting responsive breakpoints.
+ */
+export type StickyConfig = StickyPosition | StickyPosition[] | {
+    mobile?: StickyPosition;
+    tablet?: StickyPosition;
+    desktop?: StickyPosition;
+    largeDesktop?: StickyPosition;
+};
 /**
  * Props for EdgeDock component
  */

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

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

package/dist/useEdgeDock.js

@@ -139,11 +139,81 @@ function calculatePopupPosition(buttonPos, buttonDimensions, popupDimensions, vi
         origin,
     };
 }
+/**
+ * Resolve sticky position based on viewport width
+ */
+function resolveStickyConfig(config, viewportWidth) {
+    if (!config)
+        return undefined;
+    // Single position object
+    if ('top' in config || 'bottom' in config || 'left' in config || 'right' in config) {
+        return config;
+    }
+    // Array format: [mobile, tablet, desktop, largeDesktop]
+    if (Array.isArray(config)) {
+        if (viewportWidth < 768)
+            return config[0];
+        if (viewportWidth < 1024)
+            return config[1] ?? config[0];
+        if (viewportWidth < 1440)
+            return config[2] ?? config[1] ?? config[0];
+        return config[3] ?? config[2] ?? config[1] ?? config[0];
+    }
+    // Object format with named breakpoints
+    const breakpoints = config;
+    if (viewportWidth < 768)
+        return breakpoints.mobile;
+    if (viewportWidth < 1024)
+        return breakpoints.tablet ?? breakpoints.mobile;
+    if (viewportWidth < 1440)
+        return breakpoints.desktop ?? breakpoints.tablet ?? breakpoints.mobile;
+    return breakpoints.largeDesktop ?? breakpoints.desktop ?? breakpoints.tablet ?? breakpoints.mobile;
+}
+/**
+ * Calculate absolute coordinates from sticky position
+ */
+function calculateStickyCoordinates(stickyPos, viewport) {
+    let x = 0;
+    let y = 0;
+    // Helper to resolve value (number or percentage string)
+    const resolveVal = (val, dimension) => {
+        if (typeof val === 'number')
+            return val;
+        if (typeof val === 'string' && val.endsWith('%')) {
+            return (parseFloat(val) / 100) * dimension;
+        }
+        return parseFloat(val) || 0;
+    };
+    // Horizontal
+    if (stickyPos.left !== undefined) {
+        x = resolveVal(stickyPos.left, viewport.width);
+    }
+    else if (stickyPos.right !== undefined) {
+        x = viewport.width - resolveVal(stickyPos.right, viewport.width);
+    }
+    else {
+        // Default to center if neither specified? Or default to checking dockMode...
+        // For sticky, let's assume if omitted, it stays current or 0. 
+        // But returning 0 might jump. Let's assume left: 0 if nothing.
+        x = 0;
+    }
+    // Vertical
+    if (stickyPos.top !== undefined) {
+        y = resolveVal(stickyPos.top, viewport.height);
+    }
+    else if (stickyPos.bottom !== undefined) {
+        y = viewport.height - resolveVal(stickyPos.bottom, viewport.height);
+    }
+    else {
+        y = 0;
+    }
+    return { x, y };
+}
 /**
  * Main hook for edge dock functionality
  */
 export function useEdgeDock(config = {}) {
-    const { dockMode = 'auto', dockEdge, allowedEdges, position: controlledPosition, animation = true, popupGap = 12, edgeOffset, zIndex = 9999, onDockChange, isPopupOpen: controlledPopupOpen, onPopupChange, draggable = true, } = config;
+    const { dockMode = 'auto', dockEdge, allowedEdges, position: controlledPosition, animation = true, popupGap = 12, edgeOffset, zIndex = 9999, onDockChange, isPopupOpen: controlledPopupOpen, onPopupChange, draggable = true, sticky, } = config;
     const buttonRef = useRef(null);
     const popupRef = useRef(null);
     const isMountedRef = useRef(false);
@@ -183,19 +253,49 @@ export function useEdgeDock(config = {}) {
             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, edgeOffset);
-            if (dockMode === 'auto') {
-                const edge = getClosestEdge(initialPos, viewport, allowedEdges);
-                initialPos = snapToEdge(initialPos, edge, viewport, buttonDimensions, edgeOffset);
-                setDockedEdge(edge);
+            // Check for sticky config first if not draggable
+            if (!draggable && sticky) {
+                const stickyPos = resolveStickyConfig(sticky, viewport.width);
+                if (stickyPos) {
+                    initialPos = calculateStickyCoordinates(stickyPos, viewport);
+                    // Adjust for center origin point of the button
+                    // The button is positioned with transform: translate(-50%, -50%)
+                    // So if sticky says left: 20, right now x=20.
+                    // However, calculateStickyCoordinates returns the exact point for left/top.
+                    // If we use that directly with translate(-50%, -50%), the center of button is at that point.
+                    // Usually sticky means "distance from edge to edge of element".
+                    // If left: 20, we want left edge of button at 20.
+                    // So center should be 20 + width/2.
+                    if (stickyPos.left !== undefined) {
+                        initialPos.x += buttonDimensions.width / 2;
+                    }
+                    else if (stickyPos.right !== undefined) {
+                        initialPos.x -= buttonDimensions.width / 2;
+                    }
+                    if (stickyPos.top !== undefined) {
+                        initialPos.y += buttonDimensions.height / 2;
+                    }
+                    else if (stickyPos.bottom !== undefined) {
+                        initialPos.y -= buttonDimensions.height / 2;
+                    }
+                }
             }
-            else if (dockMode === 'manual' && dockEdge) {
-                initialPos = snapToEdge(initialPos, dockEdge, viewport, buttonDimensions, edgeOffset);
-                setDockedEdge(dockEdge);
+            else {
+                // Normal dock logic
+                initialPos = constrainToViewport(initialPos, viewport, buttonDimensions, edgeOffset);
+                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]);
+    }, [controlledPosition, dockMode, dockEdge, allowedEdges, edgeOffset, draggable, sticky]);
     // Update controlled position
     useEffect(() => {
         if (controlledPosition) {
@@ -382,7 +482,29 @@ export function useEdgeDock(config = {}) {
                 const buttonRect = buttonRef.current.getBoundingClientRect();
                 const viewport = getViewport();
                 const buttonDimensions = { width: buttonRect.width, height: buttonRect.height };
-                let newPos = constrainToViewport(position, viewport, buttonDimensions, edgeOffset);
+                let newPos = position;
+                if (!draggable && sticky) {
+                    const stickyPos = resolveStickyConfig(sticky, viewport.width);
+                    if (stickyPos) {
+                        newPos = calculateStickyCoordinates(stickyPos, viewport);
+                        // Adjust for center origin
+                        if (stickyPos.left !== undefined) {
+                            newPos.x += buttonDimensions.width / 2;
+                        }
+                        else if (stickyPos.right !== undefined) {
+                            newPos.x -= buttonDimensions.width / 2;
+                        }
+                        if (stickyPos.top !== undefined) {
+                            newPos.y += buttonDimensions.height / 2;
+                        }
+                        else if (stickyPos.bottom !== undefined) {
+                            newPos.y -= buttonDimensions.height / 2;
+                        }
+                        setPositionInternal(newPos);
+                        return;
+                    }
+                }
+                newPos = constrainToViewport(position, viewport, buttonDimensions, edgeOffset);
                 if (dockMode === 'auto') {
                     const edge = getClosestEdge(newPos, viewport, allowedEdges);
                     newPos = snapToEdge(newPos, edge, viewport, buttonDimensions, edgeOffset);
@@ -396,7 +518,7 @@ export function useEdgeDock(config = {}) {
         };
         window.addEventListener('resize', handleResize);
         return () => window.removeEventListener('resize', handleResize);
-    }, [position, dockMode, dockEdge, edgeOffset, allowedEdges]);
+    }, [position, dockMode, dockEdge, edgeOffset, allowedEdges, draggable, sticky]);
     // Button styles
     const buttonStyles = {
         position: 'fixed',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-edge-dock",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "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",
@@ -22,8 +22,7 @@
     "dev": "tsc --watch",
     "clean": "rm -rf dist",
     "prepublishOnly": "npm run clean && npm run build",
-    "prepack": "npm run build",
-    "publish": "npm publish --access public"
+    "prepack": "npm run build"
   },
   "keywords": [
     "react",