@kelet-ai/feedback-ui 1.2.0 → 1.3.0

package/dist/feedback-ui.umd.js

@@ -578,6 +578,11 @@
       setVote(null);
       setTimeout(() => triggerRef.current?.focus(), 0);
     }, [session_id, defaultText]);
+    const closePopover = require$$0$1.useCallback(() => {
+      setShowPopover(false);
+      setFeedbackText(defaultText);
+      setTimeout(() => triggerRef.current?.focus(), 0);
+    }, [defaultText]);
     const handleUpvote = require$$0$1.useCallback(async () => {
       setVote("upvote");
       const data = {
@@ -676,9 +681,7 @@
     const handleKeyDown = require$$0$1.useCallback(
       (e) => {
         if (e.key === "Escape") {
-          setShowPopover(false);
-          setFeedbackText(defaultText);
-          triggerRef.current?.focus();
+          closePopover();
         } else if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
           e.preventDefault();
           handleSubmit().then((_) => {
@@ -701,7 +704,7 @@
           }
         }
       },
-      [handleSubmit, showPopover, popoverId, defaultText]
+      [handleSubmit, showPopover, popoverId, closePopover]
     );
     const contextValue = {
       onFeedback: handler,
@@ -717,6 +720,7 @@
       handleTextareaChange,
       handleSubmit,
       handleKeyDown,
+      closePopover,
       textareaRef,
       triggerRef,
       popoverId,
@@ -806,7 +810,25 @@
     return /* @__PURE__ */ jsxRuntimeExports.jsx("button", { ...slotProps, children: typeof children === "function" ? children({ isSelected }) : children });
   };
   const Popover = ({ asChild, children, ...props }) => {
-    const { showPopover, handleKeyDown, popoverId, triggerId } = useVoteFeedbackContext();
+    const {
+      showPopover,
+      closePopover,
+      handleKeyDown,
+      popoverId,
+      triggerId,
+      triggerRef
+    } = useVoteFeedbackContext();
+    const containerRef = require$$0$1.useRef(null);
+    require$$0$1.useEffect(() => {
+      if (!showPopover) return;
+      const handleMouseDown = (event) => {
+        if (containerRef.current && !containerRef.current.contains(event.target) && !triggerRef.current?.contains(event.target)) {
+          closePopover();
+        }
+      };
+      document.addEventListener("mousedown", handleMouseDown);
+      return () => document.removeEventListener("mousedown", handleMouseDown);
+    }, [showPopover, closePopover, triggerRef]);
     if (!showPopover) {
       return null;
     }
@@ -822,14 +844,14 @@
     };
     if (asChild && require$$0$1.isValidElement(children)) {
       return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        require$$0$1.cloneElement(
-          children,
-          mergeProps(slotProps, children.props)
-        ),
+        require$$0$1.cloneElement(children, {
+          ...mergeProps(slotProps, children.props),
+          ref: containerRef
+        }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: `${popoverId}-description`, className: "sr-only", children: "Provide additional feedback for your downvote" })
       ] });
     }
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ...slotProps, children: [
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: containerRef, ...slotProps, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: `${popoverId}-description`, className: "sr-only", children: "Provide additional feedback for your downvote" }),
       children
     ] });