# All files / src/ClickOutside ClickOutside.tsx

23.8% Statements 5/21
0% Branches 0/6
0% Functions 0/2
29.41% Lines 5/17

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
    681x
    1x
    1x

    1x

    1x
     import React from 'react'
    import { useEventListener } from '../_hooks/EventListener'
    import { mergeRefs } from '../_utils/mergeRefs'
    import { Props } from '../_utils/types'

    interface ClickOutsideProps extends Props {
      /**
       * @since 10.19.0
       */
      container?: any
      /**
       * @since 10.19.0
       */
      containerClass?: string
      /**
       * @since 10.19.0
       */
      onClickOutside?: (event: React.MouseEvent<Element, Event>) => any
      /**
       * @since 10.19.0
       */
      tabIndex?: number
    }

    /**
     * @deprecatedSince 11
     * @deprecated Intended for internal library development.
     */
    export const ClickOutside = React.forwardRef<HTMLElement, ClickOutsideProps>(
      function ClickOutside(
        { children, container, containerClass, onClickOutside, ...props },
        ref
      ) {
        const Component = container || 'div'

        const scope = React.useRef<HTMLElement>(null)

        // need useCallback?
        const handler: React.EventHandler<any> = (event) => {
          const current = scope.current as HTMLElement

          Iif (!current) {
            return
          }

          onClickOutside && !current.contains(event.target) && onClickOutside(event)
        }

        const options = { capture: true }

        useEventListener({ event: 'click', handler, options })

        useEventListener({ event: 'touchend', handler, options })

        return (
          <Component
            {...props}
            className={containerClass}
            ref={mergeRefs(ref, scope)}
          >
            {children}
          </Component>
        )
      }
    )

    ClickOutside.displayName = 'ClickOutside'