# All files / src/Search Search.tsx

100% Statements 30/30
81.81% Branches 9/11
85.71% Functions 6/7
100% Lines 26/26

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
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    1055x
    5x
    5x
    5x
    5x
    5x
    5x

    5x

    11x
    11x
    11x
    11x
    11x
    11x

    11x
    11x

    11x

    11x
    2x
    2x

    11x

    1x

    1x

    1x

    1x

    5x
     import { Clear, Search as SearchIcon } from '@procore/core-icons/dist'
    import React from 'react'
    import { useI18nContext } from '../_hooks/I18n'
    import { mergeRefs } from '../_utils/mergeRefs'
    import { usingHookOrDefault } from '../_utils/usingHookOrDefault'
    import { useSearch } from './Search.hooks'
    import {
      StyledClearButton,
      StyledInput,
      StyledSearch,
      StyledSearchButton,
    } from './Search.styles'
    import { SearchProps } from './Search.types'

    /**

     Our users use search to find items on a tool’s landing page or, in forms, users
     use a search typeahead to find information to associate with the form.

     @since 10.19.0

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

     @see [Design Guidelines](https://design.procore.com/search-component)

     */
    export const Search = React.forwardRef<HTMLInputElement, SearchProps>(
      function Search(
        {
          onChange = () => {},
          onClear = () => {},
          onSubmit = () => {},
          usingHook,
          value = '',
          ...props
        },
        ref
      ) {
        const i18n = useI18nContext()
        const search = usingHookOrDefault(
          usingHook,
          useSearch
        )({
          initialValue: value,
          onChange,
          onClear,
          onSubmit,
        })

        const inputRef = React.useRef<HTMLInputElement>(null)

        const setFocusToInput = () => {
          if (inputRef.current) {
            inputRef.current.focus()
          }
        }

        return (
          <StyledSearch>
            <StyledInput
              {...props}
              {...search.domHandlers}
              data-qa="core-search-input"
              ref={mergeRefs(ref, inputRef)}
              value={search.value}
            />
            {!search.isEmpty && (
              <StyledClearButton
                aria-label={i18n.t('core.search.clear')}
                data-qa="core-search-clear-icon"
                icon={<Clear />}
                size="sm"
                variant="tertiary"
                disabled={props.disabled}
                onClick={() => {
                  search.clear()

                  setFocusToInput()
                }}
                tabIndex={-1} // TODO revisit this accessibility
              />
            )}
            {
              <StyledSearchButton
                aria-label={i18n.t('core.search.goSearch')}
                data-qa="core-search-search-icon"
                icon={<SearchIcon />}
                size="sm"
                variant="tertiary"
                disabled={props.disabled}
                onClick={() => {
                  search.submit()

                  setFocusToInput()
                }}
                tabIndex={-1} // TODO revisit this accessibility
              />
            }
          </StyledSearch>
        )
      }
    )

    Search.displayName = 'Search'