render ActionList.Item as NavItem and wrap with li

Author: broccolinisoup

src/UnderlineNav2/UnderlineNav.tsx

@@ -224,6 +224,8 @@ export const UnderlineNav = forwardRef(
 
     const isCoarsePointer = useMedia('(pointer: coarse)')
 
+    const [asNavItem, setAsNavItem] = useState('a')
+
     const [selectedLink, setSelectedLink] = useState<RefObject<HTMLElement> | undefined>(undefined)
 
     const [focusedLink, setFocusedLink] = useState<RefObject<HTMLElement> | null>(null)
@@ -347,6 +349,7 @@ export const UnderlineNav = forwardRef(
           selectedLinkText,
           setSelectedLinkText,
           setFocusedLink,
+          setAsNavItem,
           selectEvent,
           afterSelect: afterSelectHandler,
           variant,
@@ -383,9 +386,9 @@ export const UnderlineNav = forwardRef(
                         {actions.map((action, index) => {
                           const {children: actionElementChildren, ...actionElementProps} = action.props
                           return (
-                            <Box key={index} as="li">
+                            <Box key={index} as="li" sx={{listStyle: 'none', textDecoration: 'none'}}>
                               <ActionList.Item
-                                key={index}
+                                as={asNavItem}
                                 sx={menuItemStyles}
                                 {...actionElementProps}
                                 onSelect={(

src/UnderlineNav2/UnderlineNavContext.tsx

@@ -10,6 +10,7 @@ export const UnderlineNavContext = createContext<{
   selectedLinkText: string
   setSelectedLinkText: React.Dispatch<React.SetStateAction<string>>
   setFocusedLink: React.Dispatch<React.SetStateAction<RefObject<HTMLElement> | null>>
+  setAsNavItem: React.Dispatch<React.SetStateAction<string>>
   selectEvent: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement> | null
   afterSelect?: (event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>) => void
   variant: 'default' | 'small'
@@ -24,6 +25,7 @@ export const UnderlineNavContext = createContext<{
   selectedLinkText: '',
   setSelectedLinkText: () => null,
   setFocusedLink: () => null,
+  setAsNavItem: () => null,
   selectEvent: null,
   variant: 'default',
   loadingCounters: false,

src/UnderlineNav2/UnderlineNavItem.tsx

@@ -72,6 +72,7 @@ export const UnderlineNavItem = forwardRef(
       selectedLinkText,
       setSelectedLinkText,
       setFocusedLink,
+      setAsNavItem,
       selectEvent,
       afterSelect,
       variant,
@@ -107,6 +108,8 @@ export const UnderlineNavItem = forwardRef(
         if (typeof onSelect === 'function' && selectEvent !== null) onSelect(selectEvent)
         setSelectedLinkText('')
       }
+
+      setAsNavItem(Component)
     }, [
       ref,
       preSelected,
@@ -117,7 +120,9 @@ export const UnderlineNavItem = forwardRef(
       setChildrenWidth,
       setNoIconChildrenWidth,
       onSelect,
-      selectEvent
+      selectEvent,
+      Component,
+      setAsNavItem
     ])
 
     const keyPressHandler = React.useCallback(