From 944c670ca88316fd3658e9d7c893724db2def3ac Mon Sep 17 00:00:00 2001
From: Aria Minaei <aria.minaei@gmail.com>
Date: Thu, 2 Sep 2021 12:19:27 +0200
Subject: [PATCH] Fixed the auto-close bug with usePopover()

---
 .../src/panels/DetailPanel/ProjectDetails/ProjectDetails.tsx  | 4 ++--
 theatre/studio/src/uiComponents/Popover/usePopover.tsx        | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/theatre/studio/src/panels/DetailPanel/ProjectDetails/ProjectDetails.tsx b/theatre/studio/src/panels/DetailPanel/ProjectDetails/ProjectDetails.tsx
index 4746d74..e70ea0d 100644
--- a/theatre/studio/src/panels/DetailPanel/ProjectDetails/ProjectDetails.tsx
+++ b/theatre/studio/src/panels/DetailPanel/ProjectDetails/ProjectDetails.tsx
@@ -59,12 +59,12 @@ const ProjectDetails: React.FC<{
   }, [])
 
   const [tooltip, openExportTooltip] = usePopover(
-    {pointerDistanceThreshold: 50},
+    {pointerDistanceThreshold: 50, closeWhenPointerIsDistant: false},
     () => (
       <ExportTooltip>
         This will create a JSON file with the state of your project. You can
         commit this file to your git repo and include it in your production
-        bundle.{' '}
+        bundle.
         <a href="https://docs.theatrejs.com/export.html" target="_blank">
           Here is a quick guide on how to export to production.
         </a>
diff --git a/theatre/studio/src/uiComponents/Popover/usePopover.tsx b/theatre/studio/src/uiComponents/Popover/usePopover.tsx
index 6bd8dda..8808959 100644
--- a/theatre/studio/src/uiComponents/Popover/usePopover.tsx
+++ b/theatre/studio/src/uiComponents/Popover/usePopover.tsx
@@ -48,7 +48,7 @@ export default function usePopover(
 
   const portalLayer = useContext(PortalContext)
   const onPointerOutside = useMemo(() => {
-    if (opts.closeOnClickOutside === false) return undefined
+    if (opts.closeWhenPointerIsDistant === false) return undefined
     return {
       threshold: opts.pointerDistanceThreshold ?? 100,
       callback: close,