import React from 'react' ; import { styled } from '@workday/canvas-kit-react/common' ; import { Hyperlink } from '@workday/canvas-kit-react/button' ; import { type } from '@workday/canvas-kit-react/tokens' ; import { TooltipContainer } from '@workday/canvas-kit-react/tooltip' ; import { Popper } from '@workday/canvas-kit-react/popup' ; import { useTruncateTooltip } from './hooks' ; import { truncateStyles } from './styles' ; export interface BreadcrumbLinkProps extends React . AnchorHTMLAttributes < HTMLAnchorElement > { /**
     * The href url of the anchor tag
     */ href : string ; default maxWidth ? : number ; /**
     * A handler function for overriding hard-redirects with links
     */ onAction ? : ( href : string ) => void ; } type StyledLinkProps = Pick < BreadcrumbLinkProps , 'maxWidth' | 'href' > ; const { color , ... subtextLargeStyles } = type . levels . subtext . large ; const StyledLink = styled ( Hyperlink ) ( { ... subtextLargeStyles , } , ( { maxWidth } ) => ( { ... truncateStyles ( maxWidth ) , } ) ) ; export const BreadcrumbLink = ( { maxWidth , onAction , onClick , href , children , ... props } ) => { const ref = React . useRef < HTMLAnchorElement > ( null ) ; const { isTooltipOpen , openTooltip , closeTooltip , tooltipProps } = useTruncateTooltip ( ref ) ; const handleClick = ( event ) => { event . preventDefault ( ) ; if ( onAction ) { onAction ( href ) ; } else { window . location . href = href ; } if ( onClick ) { onClick ( event ) ; } } ; return ( < React . Fragment > < StyledLink ref = { ref } maxWidth = { maxWidth } onMouseEnter = { openTooltip } onMouseLeave = { closeTooltip } onFocus = { openTooltip } onBlur = { closeTooltip } href = { href } role = "link" onClick = { handleClick } { ... props } > { children } < /StyledLink> < Popper open = { isTooltipOpen } anchorElement = { ref } placement = "top" > < TooltipContainer { ... tooltipProps } > { children } < /TooltipContainer> < /Popper> < /React.Fragment>); } ;