import * as React from 'react' ; import { Popper } from '@material-ui/core' ; import { Card } from '../Card' ; import Typography from '../Typography' ; import { IPopoverProps } from './Popover.props' ; import { ActionLink } from './ActionLink' ; import { useStyles } from './Popover.styles' ; /**
 * ## Importing
 *
 * ```
 * import { Popover } from "@naturacosmeticos/natds-web";
 * ```
 *
 */ export const Popover = React . forwardRef < unknown , IPopoverProps > ( ( props , ref ) => { const { actionLink , children , component : Component = Popper , direction = 'bottom' , maxWidth , modifiers , open , ... rest } = props ; const [ arrowRef , setArrowRef ] = React . useState < HTMLSpanElement | null > ( null ) ; const { actionLinkContainer , arrow , container , root } = useStyles ( { children , direction , maxWidth , open } ) ; return ( < Component className = { root } modifiers = { { arrow : { element : arrowRef , enabled : true } , flip : { enabled : true } , preventOverflow : { boundariesElement : 'scrollParent' , enabled : true } } } open = { open } placement = { direction } ref = { ref } { ... rest } > < span aria - hidden className = { arrow } ref = { setArrowRef } / > < Card elevation = { 12 } className = { container } > < Typography variant = "body2" > { children } < /Typography> { actionLink && < ActionLink { ... actionLink } className = { actionLinkContainer } / > } < /Card> < /Component>); } ) ; Popover . displayName = 'Popover' ; export default Popover ;