import React , { forwardRef } from 'react' ; import { styled } from '@workday/canvas-kit-react/common' ; import { colors , commonColors , type , typeColors , space } from '@workday/canvas-kit-react/tokens' ; interface DropdownMenuItemLinkProps extends React . HTMLAttributes < HTMLAnchorElement > { /**
     * The href url of the anchor tag
     */ href : string ; /**
     * A handler function for overriding hard-redirects with links
     */ onAction ? : ( href : string ) => void ; } const MenuItemLink = styled ( 'a' ) ( { ... type . levels . subtext . large , boxSizing : 'border-box' , textAlign : 'left' , color : colors . blackPepper300 , cursor : 'pointer' , display : 'block' , outline : 'none' , padding : `${ space . xxs } ${ space . s }` , textDecoration : 'none' , transition : 'background-color color 80ms' , '&:hover' : { backgroundColor : commonColors . hoverBackground , } , '&:focus' : { backgroundColor : commonColors . focusBackground , color : typeColors . inverse , outline : 'none' , } , } ) ; export const DropdownMenuItemLink = forwardRef ( ( { children , href , onAction , onClick , ... elemProps } , ref ) => { const handleClick = ( event ) => { event . preventDefault ( ) ; if ( onAction ) { onAction ( href ) ; } else { window . location . href = href ; } if ( onClick ) { onClick ( event ) ; } } ; return ( < MenuItemLink ref = { ref } href = { href } role = "menuitem" onClick = { handleClick } { ... elemProps } > { children } < /MenuItemLink>); } ) ;