@stephenov/feedbackwidget 2.0.0 → 2.0.2

package/dist/index.js

@@ -288,61 +288,45 @@ function FeedbackTrigger({
   accentColor = "#BDE0C2",
   tooltip = "Send feedback"
 }) {
-  const [coords, setCoords] = (0, import_react.useState)(null);
+  const [offsets, setOffsets] = (0, import_react.useState)(null);
   const [isDragging, setIsDragging] = (0, import_react.useState)(false);
   const [dragStart, setDragStart] = (0, import_react.useState)(null);
   const [hasMoved, setHasMoved] = (0, import_react.useState)(false);
   const buttonRef = (0, import_react.useRef)(null);
-  const getDefaultPosition = (0, import_react.useCallback)(() => {
-    const w = typeof window !== "undefined" ? window.innerWidth : 1024;
-    const h = typeof window !== "undefined" ? window.innerHeight : 768;
-    switch (position) {
-      case "top-left":
-        return { x: DEFAULT_OFFSET, y: DEFAULT_OFFSET };
-      case "top-right":
-        return { x: w - BUTTON_SIZE - DEFAULT_OFFSET, y: DEFAULT_OFFSET };
-      case "bottom-left":
-        return { x: DEFAULT_OFFSET, y: h - BUTTON_SIZE - DEFAULT_OFFSET - 80 };
-      case "bottom-right":
-      default:
-        return { x: w - BUTTON_SIZE - DEFAULT_OFFSET, y: h - BUTTON_SIZE - DEFAULT_OFFSET - 80 };
-    }
-  }, [position]);
+  const getDefaultOffsets = (0, import_react.useCallback)(() => {
+    return {
+      right: DEFAULT_OFFSET,
+      bottom: DEFAULT_OFFSET + 80,
+      // Extra offset from bottom
+      hasBeenDragged: false
+    };
+  }, []);
   (0, import_react.useEffect)(() => {
     const saved = localStorage.getItem(POSITION_KEY);
     if (saved) {
       try {
         const parsed = JSON.parse(saved);
-        const maxX = window.innerWidth - BUTTON_SIZE - DEFAULT_OFFSET;
-        const maxY = window.innerHeight - BUTTON_SIZE - DEFAULT_OFFSET;
-        setCoords({
-          x: Math.min(Math.max(DEFAULT_OFFSET, parsed.x), maxX),
-          y: Math.min(Math.max(DEFAULT_OFFSET, parsed.y), maxY)
-        });
+        if (typeof parsed.right === "number" && typeof parsed.bottom === "number") {
+          setOffsets({
+            right: Math.max(DEFAULT_OFFSET, parsed.right),
+            bottom: Math.max(DEFAULT_OFFSET, parsed.bottom),
+            hasBeenDragged: true
+          });
+        } else {
+          setOffsets(getDefaultOffsets());
+        }
       } catch {
-        setCoords(getDefaultPosition());
+        setOffsets(getDefaultOffsets());
       }
     } else {
-      setCoords(getDefaultPosition());
-    }
-  }, [getDefaultPosition]);
-  (0, import_react.useEffect)(() => {
-    const handleResize = () => {
-      if (coords) {
-        const maxX = window.innerWidth - BUTTON_SIZE - DEFAULT_OFFSET;
-        const maxY = window.innerHeight - BUTTON_SIZE - DEFAULT_OFFSET;
-        const newX = Math.min(coords.x, maxX);
-        const newY = Math.min(coords.y, maxY);
-        if (newX !== coords.x || newY !== coords.y) {
-          setCoords({ x: newX, y: newY });
-        }
-      }
-    };
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, [coords]);
-  const savePosition = (0, import_react.useCallback)((pos) => {
-    localStorage.setItem(POSITION_KEY, JSON.stringify(pos));
+      setOffsets(getDefaultOffsets());
+    }
+  }, [getDefaultOffsets]);
+  const savePosition = (0, import_react.useCallback)((newOffsets) => {
+    localStorage.setItem(POSITION_KEY, JSON.stringify({
+      right: newOffsets.right,
+      bottom: newOffsets.bottom
+    }));
   }, []);
   const handleMouseDown = (e) => {
     if (e.button !== 0) return;
@@ -359,20 +343,24 @@ function FeedbackTrigger({
   };
   const handleMove = (0, import_react.useCallback)(
     (clientX, clientY) => {
-      if (!isDragging || !dragStart || !coords) return;
+      if (!isDragging || !dragStart || !offsets) return;
       const deltaX = clientX - dragStart.x;
       const deltaY = clientY - dragStart.y;
       if (Math.abs(deltaX) > 5 || Math.abs(deltaY) > 5) {
         setHasMoved(true);
       }
-      const maxX = window.innerWidth - BUTTON_SIZE - DEFAULT_OFFSET;
-      const maxY = window.innerHeight - BUTTON_SIZE - DEFAULT_OFFSET;
-      const newX = Math.min(Math.max(DEFAULT_OFFSET, coords.x + deltaX), maxX);
-      const newY = Math.min(Math.max(DEFAULT_OFFSET, coords.y + deltaY), maxY);
-      setCoords({ x: newX, y: newY });
+      const maxRight = window.innerWidth - BUTTON_SIZE - DEFAULT_OFFSET;
+      const maxBottom = window.innerHeight - BUTTON_SIZE - DEFAULT_OFFSET;
+      const newRight = Math.min(Math.max(DEFAULT_OFFSET, offsets.right - deltaX), maxRight);
+      const newBottom = Math.min(Math.max(DEFAULT_OFFSET, offsets.bottom - deltaY), maxBottom);
+      setOffsets({
+        right: newRight,
+        bottom: newBottom,
+        hasBeenDragged: true
+      });
       setDragStart({ x: clientX, y: clientY });
     },
-    [isDragging, dragStart, coords]
+    [isDragging, dragStart, offsets]
   );
   const handleMouseMove = (0, import_react.useCallback)(
     (e) => handleMove(e.clientX, e.clientY),
@@ -383,12 +371,12 @@ function FeedbackTrigger({
     [handleMove]
   );
   const handleEnd = (0, import_react.useCallback)(() => {
-    if (isDragging && coords) {
-      savePosition(coords);
+    if (isDragging && offsets) {
+      savePosition(offsets);
     }
     setIsDragging(false);
     setDragStart(null);
-  }, [isDragging, coords, savePosition]);
+  }, [isDragging, offsets, savePosition]);
   (0, import_react.useEffect)(() => {
     if (isDragging) {
       window.addEventListener("mousemove", handleMouseMove);
@@ -408,7 +396,7 @@ function FeedbackTrigger({
       onClick();
     }
   };
-  if (!coords || isOpen) return null;
+  if (!offsets || isOpen) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "button",
     {
@@ -421,8 +409,8 @@ function FeedbackTrigger({
         isDragging && "fw-trigger--dragging"
       ),
       style: {
-        left: coords.x,
-        top: coords.y,
+        right: offsets.right,
+        bottom: offsets.bottom,
         width: BUTTON_SIZE,
         height: BUTTON_SIZE,
         backgroundColor: accentColor