render ActionList.Item as NavItem and wrap with li

Author: broccolinisoup

src/UnderlineNav2/UnderlineNav.tsx

@@ -12,7 +12,15 @@ import CounterLabel from '../CounterLabel'
 import {useTheme} from '../ThemeProvider'
 import {ChildWidthArray, ResponsiveProps, OnScrollWithButtonEventType} from './types'
 
-import {moreBtnStyles, getDividerStyle, getNavStyles, ulStyles, scrollStyles, moreMenuStyles} from './styles'
+import {
+  moreBtnStyles,
+  getDividerStyle,
+  getNavStyles,
+  ulStyles,
+  scrollStyles,
+  moreMenuStyles,
+  menuItemStyles
+} from './styles'
 import {ArrowButton} from './UnderlineNavArrowButton'
 import styled from 'styled-components'
 import {LoadingCounter} from './LoadingCounter'
@@ -216,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)
@@ -339,6 +349,7 @@ export const UnderlineNav = forwardRef(
           selectedLinkText,
           setSelectedLinkText,
           setFocusedLink,
+          setAsNavItem,
           selectEvent,
           afterSelect: afterSelectHandler,
           variant,
@@ -375,29 +386,32 @@ export const UnderlineNav = forwardRef(
                         {actions.map((action, index) => {
                           const {children: actionElementChildren, ...actionElementProps} = action.props
                           return (
-                            <ActionList.Item
-                              key={index}
-                              {...actionElementProps}
-                              onSelect={(
-                                event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>
-                              ) => {
-                                swapMenuItemWithListItem(action, index, event, updateListAndMenu)
-                                setSelectEvent(event)
-                              }}
-                            >
-                              <Box
-                                as="span"
-                                sx={{display: 'flex', alignItems: 'center', justifyContent: 'space-between'}}
+                            <Box key={index} as="li">
+                              <ActionList.Item
+                                as={asNavItem}
+                                sx={menuItemStyles}
+                                {...actionElementProps}
+                                onSelect={(
+                                  event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>
+                                ) => {
+                                  swapMenuItemWithListItem(action, index, event, updateListAndMenu)
+                                  setSelectEvent(event)
+                                }}
                               >
-                                {actionElementChildren}
-
-                                {loadingCounters ? (
-                                  <LoadingCounter />
-                                ) : (
-                                  <CounterLabel>{actionElementProps.counter}</CounterLabel>
-                                )}
-                              </Box>
-                            </ActionList.Item>
+                                <Box
+                                  as="span"
+                                  sx={{display: 'flex', alignItems: 'center', justifyContent: 'space-between'}}
+                                >
+                                  {actionElementChildren}
+
+                                  {loadingCounters ? (
+                                    <LoadingCounter />
+                                  ) : (
+                                    <CounterLabel>{actionElementProps.counter}</CounterLabel>
+                                  )}
+                                </Box>
+                              </ActionList.Item>
+                            </Box>
                           )
                         })}
                       </ActionList>

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(

src/UnderlineNav2/styles.ts

@@ -200,5 +200,7 @@ export const menuItemStyles = {
   // This is needed to hide the selected check icon on the menu item. https://github.com/primer/react/blob/main/src/ActionList/Selection.tsx#L32
   '& > span': {
     display: 'none'
-  }
+  },
+  // To reset the style when the menu items are rendered as react router links
+  textDecoration: 'none'
 }