use tooltips for navigation groups

toolkit/chakra/tooltip.tsx

@@ -17,7 +17,9 @@ export interface TooltipProps extends ChakraTooltip.RootProps {
 export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
   function Tooltip(props, ref) {
     const {
-      showArrow = true,
+      showArrow: showArrowProp,
+      onOpenChange,
+      visual,
       selected,
       children,
       disabled,
@@ -33,9 +35,10 @@ export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
     const isMobile = useIsMobile();
     const triggerRef = useClickAway<HTMLButtonElement>(() => setOpen(false));
 
-    const handleOpenChange = React.useCallback(({ open }: { open: boolean }) => {
-      setOpen(open);
-    }, []);
+    const handleOpenChange = React.useCallback((details: { open: boolean }) => {
+      setOpen(details.open);
+      onOpenChange?.(details);
+    }, [ onOpenChange ]);
 
     const handleTriggerClick = React.useCallback(() => {
       setOpen((prev) => !prev);
@@ -43,6 +46,9 @@ export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
 
     if (disabled) return children;
 
+    const defaultShowArrow = visual === 'popover' ? false : true;
+    const showArrow = showArrowProp !== undefined ? showArrowProp : defaultShowArrow;
+
     const positioning = {
       ...rest.positioning,
       offset: {
@@ -58,6 +64,7 @@ export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
         open={ open }
         onOpenChange={ isMobile ? undefined : handleOpenChange }
         closeOnClick={ false }
+        visual={ visual }
         { ...rest }
         positioning={ positioning }
       >

toolkit/theme/recipes/tooltip.recipe.ts

@@ -63,6 +63,16 @@ export const recipe = defineSlotRecipe({
           display: 'none',
         },
       },
+      popover: {
+        content: {
+          bg: 'popover.bg',
+          color: 'popover.fg',
+          p: '4',
+          boxShadow: 'popover',
+          boxShadowColor: 'popover.shadow',
+          borderRadius: 'md',
+        },
+      },
     },
   },
   defaultVariants: {

ui/snippets/navigation/horizontal/NavLinkGroup.tsx

@@ -3,7 +3,8 @@ import React from 'react';
 
 import type { NavGroupItem } from 'types/client/navigation';
 
-import { PopoverRoot, PopoverBody, PopoverContent, PopoverTrigger } from 'toolkit/chakra/popover';
+import { Tooltip } from 'toolkit/chakra/tooltip';
+import { useDisclosure } from 'toolkit/hooks/useDisclosure';
 import IconSvg from 'ui/shared/IconSvg';
 
 import LightningLabel from '../LightningLabel';
@@ -14,29 +15,48 @@ interface Props {
 }
 
 const NavLinkGroup = ({ item }: Props) => {
-  const [ isOpen, setIsOpen ] = React.useState(false);
-  // const bgColor = item.isActive ? colors.bg.active : colors.bg.default;
-  // const color = item.isActive ? colors.text.active : colors.text.default;
+  const { open, onOpenChange } = useDisclosure();
 
   const isHighlighted = checkRouteHighlight(item.subItems);
   const hasGroups = item.subItems.some((subItem) => Array.isArray(subItem));
 
-  const handleOpenChange = React.useCallback(({ open }: { open: boolean }) => {
-    setIsOpen(open);
-  }, []);
+  const content = hasGroups ? (
+    <HStack separator={ <Separator/> } alignItems="flex-start">
+      { item.subItems.map((subItem, index) => {
+        if (!Array.isArray(subItem)) {
+          return <NavLink key={ subItem.text } item={ subItem }/>;
+        }
+
+        return (
+          <chakra.ul key={ index } display="flex" flexDir="column" rowGap={ 1 }>
+            { subItem.map((navItem) => <NavLink key={ navItem.text } item={ navItem }/>) }
+          </chakra.ul>
+        );
+      }) }
+    </HStack>
+  ) : (
+    <chakra.ul display="flex" flexDir="column" rowGap={ 1 }>
+      { item.subItems.map((subItem) => {
+        if (Array.isArray(subItem)) {
+          return null;
+        }
+        return <NavLink key={ subItem.text } item={ subItem }/>;
+      }) }
+    </chakra.ul>
+  );
 
   return (
-    <PopoverRoot
-      // TODO @tom2drum make menu open on hover
-      // trigger="hover"
-      onOpenChange={ handleOpenChange }
+    <Tooltip
+      visual="popover"
+      content={ content }
+      onOpenChange={ onOpenChange }
       lazyMount
       positioning={{
         placement: 'bottom',
         offset: { mainAxis: 8 },
       }}
+      interactive
     >
-      <PopoverTrigger>
       <Link
         as="li"
         listStyleType="none"
@@ -48,7 +68,7 @@ const NavLinkGroup = ({ item }: Props) => {
         fontWeight={ 500 }
         visual="navigation"
         { ...(item.isActive ? { 'data-selected': true } : {}) }
-          { ...(isOpen ? { 'data-active': true } : {}) }
+        { ...(open ? { 'data-active': true } : {}) }
         borderRadius="base"
       >
         { item.text }
@@ -61,36 +81,7 @@ const NavLinkGroup = ({ item }: Props) => {
         ) }
         <IconSvg name="arrows/east-mini" boxSize={ 5 } transform="rotate(-90deg)" ml={ 1 }/>
       </Link>
-      </PopoverTrigger>
-      <PopoverContent>
-        <PopoverBody>
-          { hasGroups ? (
-            <HStack separator={ <Separator/> } alignItems="flex-start">
-              { item.subItems.map((subItem, index) => {
-                if (!Array.isArray(subItem)) {
-                  return <NavLink key={ subItem.text } item={ subItem }/>;
-                }
-
-                return (
-                  <chakra.ul key={ index } display="flex" flexDir="column" rowGap={ 1 }>
-                    { subItem.map((navItem) => <NavLink key={ navItem.text } item={ navItem }/>) }
-                  </chakra.ul>
-                );
-              }) }
-            </HStack>
-          ) : (
-            <chakra.ul display="flex" flexDir="column" rowGap={ 1 }>
-              { item.subItems.map((subItem) => {
-                if (Array.isArray(subItem)) {
-                  return null;
-                }
-                return <NavLink key={ subItem.text } item={ subItem }/>;
-              }) }
-            </chakra.ul>
-          ) }
-        </PopoverBody>
-      </PopoverContent>
-    </PopoverRoot>
+    </Tooltip>
   );
 };
 

ui/snippets/navigation/vertical/NavLinkGroup.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import type { NavGroupItem } from 'types/client/navigation';
 
-import { PopoverBody, PopoverContent, PopoverRoot, PopoverTrigger } from 'toolkit/chakra/popover';
+import { Tooltip } from 'toolkit/chakra/tooltip';
 import IconSvg from 'ui/shared/IconSvg';
 
 import LightningLabel from '../LightningLabel';
@@ -24,16 +24,43 @@ const NavLinkGroup = ({ item, isCollapsed }: Props) => {
 
   const isHighlighted = checkRouteHighlight(item.subItems);
 
+  const content = (
+    <Box width="220px" top={{ lg: isExpanded ? '-16px' : 0, xl: isCollapsed ? 0 : '-16px' }}>
+      <Text color="text.secondary" fontSize="sm" mb={ 1 } display={{ lg: isExpanded ? 'none' : 'block', xl: isCollapsed ? 'block' : 'none' }}>
+        { item.text }
+      </Text>
+      <VStack gap={ 1 } alignItems="start" as="ul">
+        { item.subItems.map((subItem, index) => Array.isArray(subItem) ? (
+          <Box
+            key={ index }
+            w="100%"
+            as="ul"
+            _notLast={{
+              mb: 2,
+              pb: 2,
+              borderBottomWidth: '1px',
+              borderColor: 'border.divider',
+            }}
+          >
+            { subItem.map(subSubItem => <NavLink key={ subSubItem.text } item={ subSubItem } isCollapsed={ false }/>) }
+          </Box>
+        ) :
+          <NavLink key={ subItem.text } item={ subItem } isCollapsed={ false }/>,
+        ) }
+      </VStack>
+    </Box>
+  );
+
   return (
     <Box as="li" listStyleType="none" w="100%">
-      <PopoverRoot
-        // TODO @tom2drum fix trigger
-        // trigger="hover"
-        positioning={{ placement: 'right-start', offset: { crossAxis: 8, mainAxis: 8 } }}
+      <Tooltip
+        content={ content }
+        positioning={{ placement: 'right-start', offset: { crossAxis: 0, mainAxis: 8 } }}
         // should not be lazy to help google indexing pages
         lazyMount={ false }
+        visual="popover"
+        interactive
       >
-        <PopoverTrigger>
         <Box
           { ...styleProps.itemProps }
           w={{ lg: isExpanded ? '180px' : '60px', xl: isCollapsed ? '60px' : '180px' }}
@@ -70,34 +97,7 @@ const NavLinkGroup = ({ item, isCollapsed }: Props) => {
             />
           </HStack>
         </Box>
-        </PopoverTrigger>
-        <PopoverContent width="252px" top={{ lg: isExpanded ? '-16px' : 0, xl: isCollapsed ? 0 : '-16px' }}>
-          <PopoverBody p={ 4 }>
-            <Text color="text.secondary" fontSize="sm" mb={ 1 } display={{ lg: isExpanded ? 'none' : 'block', xl: isCollapsed ? 'block' : 'none' }}>
-              { item.text }
-            </Text>
-            <VStack gap={ 1 } alignItems="start" as="ul">
-              { item.subItems.map((subItem, index) => Array.isArray(subItem) ? (
-                <Box
-                  key={ index }
-                  w="100%"
-                  as="ul"
-                  _notLast={{
-                    mb: 2,
-                    pb: 2,
-                    borderBottomWidth: '1px',
-                    borderColor: 'border.divider',
-                  }}
-                >
-                  { subItem.map(subSubItem => <NavLink key={ subSubItem.text } item={ subSubItem } isCollapsed={ false }/>) }
-                </Box>
-              ) :
-                <NavLink key={ subItem.text } item={ subItem } isCollapsed={ false }/>,
-              ) }
-            </VStack>
-          </PopoverBody>
-        </PopoverContent>
-      </PopoverRoot>
+      </Tooltip>
     </Box>
   );
 };