function MobileSearch()

in theme/src/components/mobile-search.js [28:116]
83 lines of code
6 McCabe index (conditional complexity)

function MobileSearch({isOpen, onDismiss}) {
  const [query, setQuery] = React.useState('')
  const results = useSearch(query)

  function handleDismiss() {
    setQuery('')
    onDismiss()
  }

  return (
    <AnimatePresence>
      {isOpen ? (
        <FocusOn returnFocus={true} onEscapeKey={() => handleDismiss()}>
          <Fixed sx={{top: 0, left: 0, right: 0, bottom: 0, zIndex: 1}}>
            <Absolute
              as={motion.div}
              initial={{opacity: 0}}
              animate={{opacity: 1}}
              exit={{opacity: 0}}
              onClick={handleDismiss}
              sx={{top: 0, left: 0, right: 0, bottom: 0, bg: 'primer.canvas.backdrop', zIndex: -1}}
            />
            <Downshift
              inputValue={query}
              onInputValueChange={inputValue => setQuery(inputValue)}
              selectedItem={null}
              onSelect={item => {
                if (item) {
                  navigate(item.path)
                  handleDismiss()
                }
              }}
              itemToString={item => (item ? item.title : '')}
              stateReducer={stateReducer}
            >
              {({getInputProps, getItemProps, getMenuProps, getRootProps, isOpen: isMenuOpen, highlightedIndex}) => (
                <Flex
                  {...getRootProps({
                    flexDirection: 'column',
                    height: isMenuOpen ? '100%' : 'auto'
                  })}
                >
                  <Flex sx={{bg: 'canvas.default', color: 'fg.default', p: 3, flex: '0 0 auto'}}>
                    <motion.div
                      initial={{scaleX: 0.1}}
                      animate={{scaleX: 1}}
                      exit={{scaleX: 0.1, transition: {duration: 0.1}}}
                      transition={{type: 'tween', duration: 0.2}}
                      style={{width: '100%', originX: '100%'}}
                    >
                      <TextInput
                        {...getInputProps({
                          placeholder: `Search`,
                          sx: {width: '100%'}
                        })}
                      />
                    </motion.div>
                    <Button aria-label="Cancel" onClick={handleDismiss} sx={{ml: 3}}>
                      <XIcon />
                    </Button>
                  </Flex>
                  {isMenuOpen ? (
                    <Box
                      {...getMenuProps({
                        display: 'flex',
                        bg: 'canvas.default',
                        py: 1,
                        px: 2,
                        flexDirection: 'column',
                        flex: '1 1 auto',
                        style: {
                          overflow: 'auto',
                          WebkitOverflowScrolling: 'touch'
                        }
                      })}
                    >
                      <SearchResults
                        results={results}
                        getItemProps={getItemProps}
                        highlightedIndex={highlightedIndex}
                      />
                    </Box>
                  ) : null}
                </Flex>
              )}
            </Downshift>
          </Fixed>
        </FocusOn>
      ) : null}