@kelet-ai/feedback-ui 1.2.0 → 1.3.0

package/dist/components/vote-feedback.d.ts

@@ -1,8 +1,9 @@
+import { default as React } from 'react';
 import { DownvoteButtonProps, PopoverProps, SubmitButtonProps, TextareaProps, UpvoteButtonProps, VoteFeedbackRootProps } from '../types';
 export declare const VoteFeedback: {
     Root: ({ children, onFeedback, defaultText, session_id: sessionIdProp, metadata, trigger_name: triggerProp, trace_id, }: VoteFeedbackRootProps) => import("react/jsx-runtime").JSX.Element;
     UpvoteButton: ({ asChild, children, onClick, ...props }: UpvoteButtonProps) => import("react/jsx-runtime").JSX.Element;
-    DownvoteButton: ({ asChild, children, onClick, ...props }: DownvoteButtonProps) => string | number | bigint | true | Iterable<import('react').ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<import('react').ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element;
+    DownvoteButton: ({ asChild, children, onClick, ...props }: DownvoteButtonProps) => string | number | bigint | true | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element;
     Popover: ({ asChild, children, ...props }: PopoverProps) => import("react/jsx-runtime").JSX.Element | null;
     Textarea: ({ asChild, value, onChange, ...props }: TextareaProps) => import("react/jsx-runtime").JSX.Element;
     SubmitButton: ({ asChild, children, onClick, ...props }: SubmitButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/feedback-ui.es.js

@@ -1,4 +1,4 @@
-import require$$0$1, { createContext, useEffect, useContext, useCallback, isValidElement, cloneElement, useState, useRef, useId } from "react";
+import require$$0$1, { createContext, useEffect, useContext, useCallback, isValidElement, cloneElement, useRef, useState, useId } from "react";
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
 }
@@ -575,6 +575,11 @@ const VoteFeedbackRoot = ({
     setVote(null);
     setTimeout(() => triggerRef.current?.focus(), 0);
   }, [session_id, defaultText]);
+  const closePopover = useCallback(() => {
+    setShowPopover(false);
+    setFeedbackText(defaultText);
+    setTimeout(() => triggerRef.current?.focus(), 0);
+  }, [defaultText]);
   const handleUpvote = useCallback(async () => {
     setVote("upvote");
     const data = {
@@ -673,9 +678,7 @@ const VoteFeedbackRoot = ({
   const handleKeyDown = 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((_) => {
@@ -698,7 +701,7 @@ const VoteFeedbackRoot = ({
         }
       }
     },
-    [handleSubmit, showPopover, popoverId, defaultText]
+    [handleSubmit, showPopover, popoverId, closePopover]
   );
   const contextValue = {
     onFeedback: handler,
@@ -714,6 +717,7 @@ const VoteFeedbackRoot = ({
     handleTextareaChange,
     handleSubmit,
     handleKeyDown,
+    closePopover,
     textareaRef,
     triggerRef,
     popoverId,
@@ -803,7 +807,25 @@ const DownvoteButton = ({
   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 = useRef(null);
+  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;
   }
@@ -819,14 +841,14 @@ const Popover = ({ asChild, children, ...props }) => {
   };
   if (asChild && isValidElement(children)) {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-      cloneElement(
-        children,
-        mergeProps(slotProps, children.props)
-      ),
+      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
   ] });