From 144081154733792f91d90b521ab9e209e5ff0030 Mon Sep 17 00:00:00 2001
From: Pranay Kothapalli <pranaykothapalli@gmail.com>
Date: Sat, 30 Nov 2024 16:07:47 +0530
Subject: [PATCH] Update hover card delays and add arrow height and spacing.-
 Set open delay to 100 and close delay to 200

---
 .../ui/HoverCard/fragments/HoverCardRoot.tsx    | 17 ++++++-----------
 .../ui/HoverCard/fragments/HoverCardTrigger.tsx |  3 ++-
 .../ui/HoverCard/stories/HoverCard.stories.js   |  3 ++-
 3 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/components/ui/HoverCard/fragments/HoverCardRoot.tsx b/src/components/ui/HoverCard/fragments/HoverCardRoot.tsx
index 3aedfc8b..2c915366 100644
--- a/src/components/ui/HoverCard/fragments/HoverCardRoot.tsx
+++ b/src/components/ui/HoverCard/fragments/HoverCardRoot.tsx
@@ -16,9 +16,12 @@ type HoverCardRootProps = {
     props: React.HTMLAttributes<HTMLElement>
 }
 
-const HoverCardRoot = ({ children, open: controlledOpen = undefined, onOpenChange, customRootClass = '', openDelay = 300, closeDelay = 750, ...props }: HoverCardRootProps) => {
+const HoverCardRoot = ({ children, open: controlledOpen = undefined, onOpenChange, customRootClass = '', openDelay = 100, closeDelay = 200, ...props }: HoverCardRootProps) => {
     const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
     const arrowRef = useRef(null);
+    const ARROW_HEIGHT = 8;
+    const SPACING_GAP = 2;
+
     const { refs: floatingRefs, floatingStyles, context: floatingContext } = Floater.useFloating({
         placement: 'bottom',
         strategy: 'fixed',
@@ -26,18 +29,10 @@ const HoverCardRoot = ({ children, open: controlledOpen = undefined, onOpenChang
             Floater.arrow({
                 element: arrowRef
             }),
-            Floater.offset(7),
+            Floater.offset(ARROW_HEIGHT + SPACING_GAP),
             Floater.flip({
                 mainAxis: true
-                // fallbackStrategy: 'initialPlacement'
-            }
-            )
-            // Floater.shift({
-            //     crossAxis: true
-            // })
-            // Floater.hide({
-            //     strategy: 'referenceHidden' // 'referenceHidden' by default
-            // })
+            })
         ]
     });
 
diff --git a/src/components/ui/HoverCard/fragments/HoverCardTrigger.tsx b/src/components/ui/HoverCard/fragments/HoverCardTrigger.tsx
index 5d1cac2a..8a60c132 100644
--- a/src/components/ui/HoverCard/fragments/HoverCardTrigger.tsx
+++ b/src/components/ui/HoverCard/fragments/HoverCardTrigger.tsx
@@ -12,7 +12,8 @@ const HoverCardTrigger = ({ children, ...props }) => {
             onClick={() => {}}
             onMouseEnter={openWithDelay} onMouseLeave={closeWithDelay}
             ref={floatingRefs.setReference}
-            asChild>{children}</Primitive.span>
+            {...props}
+        >{children}</Primitive.span>
     </>;
 };
 
diff --git a/src/components/ui/HoverCard/stories/HoverCard.stories.js b/src/components/ui/HoverCard/stories/HoverCard.stories.js
index fe672848..883ecddf 100644
--- a/src/components/ui/HoverCard/stories/HoverCard.stories.js
+++ b/src/components/ui/HoverCard/stories/HoverCard.stories.js
@@ -1,5 +1,6 @@
 import HoverCard from '../HoverCard';
 import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
+import Button from '~/components/ui/Button/Button';
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
@@ -15,7 +16,7 @@ export default {
         };
         return <SandboxEditor className='bg-gray-200 h-[400px] flex items-center justify-center'>
             <HoverCard className='text-gray-900 text-center' content={<Content />} {...args} >
-                <span>Hover me</span>
+                <div className="p-10 bg-gray-100 rounded-md shadow">Hover me</div>
             </HoverCard>
         </SandboxEditor>;
     }