# All files / src/Popover Popover.tsx

100% Statements 30/30
66.66% Branches 8/12
100% Functions 2/2
100% Lines 22/22

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    957x
    7x
    7x
    7x

    7x

    7x

    30x

    30x

    43x
    41x
    41x
    41x
    41x
    41x
    41x
    41x

    41x

    41x

    7x

    7x

    7x

    7x
     import React from 'react'
    import { OverlayTrigger } from '../OverlayTrigger/OverlayTrigger'
    import { addSubcomponents } from '../_utils/addSubcomponents'
    import { isReactElement } from '../_utils/isReactElement'
    import { DivAttributes } from '../_utils/types'
    import { StyledPopover, StyledPopoverContent } from './Popover.styles'
    import { PopoverContentProps, PopoverProps, PopoverRole } from './Popover.types'

    const Content = React.forwardRef<
      HTMLDivElement,
      DivAttributes & PopoverContentProps
    >(function Content(
      { children, fluid = false, placement = 'top', ...props },
      ref
    ) {
      return (
        <StyledPopover ref={ref}>
          <StyledPopoverContent {...props} $fluid={fluid} $placement={placement}>
            {children}
          </StyledPopoverContent>
        </StyledPopover>
      )
    })

    /**

     We use popovers to display more of an item’s information or details on hover.
     This may be used to show additional fields in an item’s form that aren’t shown
     by default in the UI. Oftentimes, there will be a visual queue to indicate that
     more information is available.

     Do not use popovers to display large amounts of information, perform data
     entry, or use as a replacement for an overflow, menu, or modal.

     If you want to show descriptive / educational information about an item,
     use a tooltip.

     @since 10.19.0

     @see [Storybook](https://procore.github.io/core/core-react/latest/?path=/story/demos-popover--demo)

     @see [Design Guidelines](https://design.procore.com/popover)

     */

    function PopoverInner<Role extends PopoverRole>(
      {
        children,
        initialIsVisible = false,
        restoreFocusOnHide = false,
        placement = 'top',
        overlay,
        overlayRef,
        role,
        ...props
      }: PopoverProps<Role>,
      ref: React.ForwardedRef<HTMLElement>
    ) {
      const overlayNode = isReactElement(overlay) ? (
        React.cloneElement(overlay, { placement })
      ) : (
        <React.Fragment />
      )

      return (
        <OverlayTrigger
          {...{
            ...props,
            initialIsVisible,
            overlay: overlayNode,
            placement,
            role,
            ref,
            restoreFocusOnHide,
            shrinkOverlay: true,
            arrow: true,
            overlayRef,
          }}
        >
          {children}
        </OverlayTrigger>
      )
    }

    const Popover_ = React.forwardRef(PopoverInner) as <Role extends PopoverRole>(
      props: PopoverProps<Role>
    ) => ReturnType<typeof PopoverInner>

    // @ts-expect-error
    Popover_.displayName = 'Popover'

    Content.displayName = 'Popover.Content'

    export const Popover = addSubcomponents({ Content }, Popover_)