import * as React from 'react' ; import * as PropTypes from 'prop-types' ; import { useUID } from '@twilio-paste/uid-library' ; import { Box , safelySpreadBoxProps } from '@twilio-paste/box' ; import type { BoxProps } from '@twilio-paste/box' ; import { StyledBase } from '@twilio-paste/theme' ; import { Text } from '@twilio-paste/text' ; import { useTooltipPrimitiveState , TooltipPrimitive , TooltipPrimitiveReference } from '@twilio-paste/tooltip-primitive' ; import type { TooltipPrimitiveInitialState , TooltipPrimitiveStateReturn } from '@twilio-paste/tooltip-primitive' ; import { TooltipArrow } from './TooltipArrow' ; const StyledTooltip = React . forwardRef < HTMLDivElement , BoxProps > ( ( { style , element , ... props } , ref ) => { return ( < Box { ... safelySpreadBoxProps ( props ) } backgroundColor = "colorBackgroundBodyInverse" borderColor = "colorBorderStrong" borderRadius = "borderRadius20" borderStyle = "solid" borderWidth = "borderWidth10" boxShadow = "shadow" element = { element } maxWidth = "size30" padding = "space30" paddingBottom = "space20" paddingTop = "space20" zIndex = "zIndex90" _focus = { { outline : 'none' } } style = { style } ref = { ref } / > ) ; } ) ; StyledTooltip . displayName = 'StyledTooltip' ; export interface TooltipStateReturn extends TooltipPrimitiveStateReturn { [ key ] : any ; } export interface TooltipProps extends TooltipPrimitiveInitialState , Pick < BoxProps , 'element' > { children : NonNullable < React . ReactElement > ; state ? : TooltipStateReturn ; text : string ; } const Tooltip = React . forwardRef < HTMLDivElement , TooltipProps > ( ( { baseId , children , element = 'TOOLTIP' , state , text , ... props } , ref ) => { const tooltip = state || useTooltipPrimitiveState ( { baseId : `paste-tooltip-${ useUID ( ) }` , ... props } ) ; return ( < > { React . Children . only ( < TooltipPrimitiveReference { ... tooltip } ref = { ref } { ... children . props } > { ( referenceProps ) => React . cloneElement ( children , referenceProps ) } < /TooltipPrimitiveReference>)} < TooltipPrimitive element = { element } { ... tooltip } { ... props } as = { StyledTooltip } > { } < StyledBase > < TooltipArrow { ... tooltip } / > < Text element = { `${ element }_TEXT` } as = "span" color = "colorTextInverse" > { text } < /Text> < /StyledBase> < /TooltipPrimitive> < />); } ) ; if ( process . env . NODE_ENV === 'development' ) { Tooltip . propTypes = { children : PropTypes . element . isRequired , text : PropTypes . string . isRequired , element : PropTypes . string , } ; } Tooltip . displayName = 'Tooltip' ; export { Tooltip } ; export { useTooltipPrimitiveState as useTooltipState } ;