1.2.20

lib/components/menu/menu.tsx

@@ -1,6 +1,6 @@
 import { AnimatePresence, motion } from "framer-motion";
 import { useMemo, useState } from "react";
-import { Arrow, useLayer } from "react-laag";
+import { useLayer } from "react-laag";
 import { twMerge } from "tailwind-merge";
 import { useComponentStyle } from "../../customization/styles/theme.context";
 import { IMenu, IMenuItem, IMenuKey } from "./menu.types";
@@ -18,7 +18,7 @@ export const Menu = ({
 
   const theme = useComponentStyle("Menu");
 
-  const { triggerProps, layerProps, arrowProps, renderLayer } = useLayer({
+  const { triggerProps, layerProps, renderLayer } = useLayer({
     isOpen: open || isOpen,
     placement,
     auto: true,
@@ -41,9 +41,9 @@ export const Menu = ({
     return twMerge(theme.itemIcon());
   }, [theme]);
 
-  const arrowClasses = useMemo(() => {
-    return twMerge(theme.arrow());
-  }, [theme]);
+  // const arrowClasses = useMemo(() => {
+  //   return twMerge(theme.arrow());
+  // }, [theme]);
 
   const onMenuItemClick = (value: IMenuKey) => {
     if (value) {
@@ -90,14 +90,14 @@ export const Menu = ({
               {...layerProps}
             >
               {renderMenuItems()}
-              <Arrow
-                {...arrowProps}
+              {/* <Arrow
                 backgroundColor="var(--color-neutral-5)" // color-component-background
                 borderColor="transparent"
                 className={arrowClasses}
                 borderWidth={1}
                 size={8}
-              />
+                {...arrowProps}
+              /> */}
             </motion.ul>
           </AnimatePresence>
         )}

lib/components/popover/popover.stories.tsx

@@ -18,6 +18,11 @@ const meta = {
     children: {
       type: "string",
     },
+    trigger: {
+      description: "Popover trigger",
+      options: ["hover", "click"],
+      control: { type: "radio" },
+    },
     placement: {
       description: "Popover placement",
       options: [
@@ -54,6 +59,7 @@ export const Primary: Story = {
   args: {
     children: "Click me",
     placement: "bottom-start",
+    trigger: "hover",
     content:
       "Well, you only need the light when it's burning low. Only miss the sun when it starts to snow",
   },

lib/components/popover/popover.tsx

@@ -1,6 +1,6 @@
 import { AnimatePresence, motion } from "framer-motion";
 import { useMemo, useState } from "react";
-import { Arrow, useLayer } from "react-laag";
+import { Arrow, useHover, useLayer } from "react-laag";
 import { twMerge } from "tailwind-merge";
 import { useComponentStyle } from "../../customization/styles/theme.context";
 import { IPopover } from "./popover.types";
@@ -12,15 +12,21 @@ export const Popover = ({
   open,
   onOpenChange,
   popoverClassName,
+  trigger = "hover",
 }: IPopover) => {
+  const isHoverTrigger = trigger === "hover";
   const [isOpen, setOpen] = useState(false);
+  const [isHover, hoverProps] = useHover({
+    delayLeave: 200,
+  });
 
   const theme = useComponentStyle("Popover");
 
-  const { triggerProps, layerProps, arrowProps, renderLayer } = useLayer({
-    isOpen: open || isOpen,
+  const { triggerProps, layerProps, renderLayer, arrowProps } = useLayer({
+    isOpen: open || isOpen || isHover,
     placement,
     auto: true,
+
     triggerOffset: 10,
     onOutsideClick: () => {
       onOpenChange && onOpenChange(false);
@@ -39,16 +45,20 @@ export const Popover = ({
   return (
     <>
       <span
+        {...(!isHoverTrigger
+          ? {
+              onClick: () => {
+                const _isOpen = !isOpen;
+                setOpen(_isOpen);
+                onOpenChange && onOpenChange(_isOpen);
+              },
+            }
+          : hoverProps)}
         {...triggerProps}
-        onClick={() => {
-          const _isOpen = !isOpen;
-          setOpen(_isOpen);
-          onOpenChange && onOpenChange(_isOpen);
-        }}
       >
         {children}
       </span>
-      {(open || isOpen) &&
+      {(isHover || open || isOpen) &&
         renderLayer(
           <AnimatePresence>
             <motion.div
@@ -57,15 +67,18 @@ export const Popover = ({
               exit={{ opacity: 0 }}
               className={classes}
               {...layerProps}
+              {...(isHoverTrigger ? hoverProps : null)}
             >
               {content}
               <Arrow
+                onPointerEnterCapture={undefined}
+                onPointerLeaveCapture={undefined}
                 {...arrowProps}
                 backgroundColor="var(--color-neutral-5)" // color-component-background
                 borderColor="transparent"
                 className={arrowClasses}
                 borderWidth={1}
-                size={8} 
+                size={8}
               />
             </motion.div>
           </AnimatePresence>

lib/components/popover/popover.types.ts

@@ -17,4 +17,5 @@ export interface IPopover {
   content?: React.ReactNode;
   children?: React.ReactNode;
   popoverClassName?: string;
+  trigger?: "hover" | "click";
 }

lib/components/tooltip/tooltip.tsx

@@ -1,21 +1,23 @@
+import { AnimatePresence, motion } from "framer-motion";
+import { useMemo } from "react";
 import { Arrow, useHover, useLayer } from "react-laag";
 import { twMerge } from "tailwind-merge";
 import { useComponentStyle } from "../../customization/styles/theme.context";
-import { AnimatePresence, motion } from "framer-motion";
 import { ITooltip } from "./tooltip.types";
-import { useMemo } from "react";
 
 export const Tooltip = ({
   children,
   content,
   placement,
   tooltipClassName,
 }: ITooltip) => {
-  const [isHover, hoverProps] = useHover();
+  const [isHover, hoverProps] = useHover({
+    delayLeave: 200,
+  });
 
   const theme = useComponentStyle("Tooltip");
 
-  const { triggerProps, layerProps, arrowProps, renderLayer } = useLayer({
+  const { triggerProps, layerProps, renderLayer, arrowProps } = useLayer({
     isOpen: isHover,
     placement,
     auto: true,
@@ -44,9 +46,12 @@ export const Tooltip = ({
               exit={{ opacity: 0 }}
               className={classes}
               {...layerProps}
+              {...hoverProps}
             >
               {content}
               <Arrow
+                onPointerEnterCapture={undefined}
+                onPointerLeaveCapture={undefined}
                 {...arrowProps}
                 backgroundColor="black"
                 className={arrowClasses}