import * as React from 'react' ; import innerText from 'react-innertext' ; import { getTransformFromPlacement , Placement , Popper } from '@workday/canvas-kit-react/popup' ; import { mergeCallback } from '@workday/canvas-kit-react/common' ; import { TooltipContainer } from './TooltipContainer' ; import { useTooltip } from './useTooltip' ; export interface TooltipProps extends Omit < React . HTMLAttributes < HTMLDivElement > , 'title' > { /**
     * This should be a string in most cases. HTML is supported, but only text is understood
     * by assistive technology. This is true for both `label` and `describe` modes.
     */ title : React . ReactNode ; /**
     * The target (anchor element) for the Tooltip.
     *
     * **Note:** This **must** be a single Element, StyledComponent, or any other component that
     * forwards extra props to an Element. Tooltip works running `React.cloneElement` on the children
     * and adds extra properties like aria attributes and event handlers. This is currently a
     * limitation of the Tooltip component. Functionality will not work if this condition isn't met.
     */ children : React . ReactElement < any > ; default placement ? : Placement ; default type ? : 'label' | 'describe' | 'muted' ; /**
     * Amount of time (in ms) to delay before showing the tooltip
     */ showDelay ? : number ; /**
     * Amount of time (in ms) to delay before hiding the tooltip
     */ hideDelay ? : number ; } function mergeCallbacks < T extends { [ key ] : any ; } > ( elemProps , componentProps , keys = Object . keys ( componentProps ) ) { return ( keys as string [ ] ) . reduce ( ( mergedProps , key ) => { if ( typeof elemProps [ key ] === 'function' ) { mergedProps [ key ] = mergeCallback ( componentProps [ key ] , elemProps [ key ] ) ; } else { mergedProps [ key ] = componentProps [ key ] ; } return mergedProps ; } , { } as { [ key ] : any ; } ) ; } export const Tooltip = ( { type = 'label' , placement = 'top' , title , children , showDelay = 300 , hideDelay = 100 , ... elemProps } ) => { const titleText = innerText ( title ) ; const { targetProps , popperProps , tooltipProps } = useTooltip ( { type , titleText , showDelay , hideDelay , } ) ; return ( < React . Fragment > { React . cloneElement ( children , { ... targetProps , ... mergeCallbacks ( children . props , targetProps ) , ... ( type === 'muted' && children . props [ 'aria-label' ] ? { 'aria-label' : children . props [ 'aria-label' ] } : { } ) , } ) } < Popper placement = { placement } { ... popperProps } > { ( { placement } ) => { const transformOrigin = getTransformFromPlacement ( placement ) ; return ( < TooltipContainer transformOrigin = { transformOrigin } { ... elemProps } { ... tooltipProps } > { title } < /TooltipContainer>); } } < /Popper> < /React.Fragment>); } ;