SearchBar SearchOverlay.tsx

0% Statements 0/3

0% Branches 0/4

0% Functions 0/1

0% Lines 0/3

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  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { Box, BoxProps, forwardRef } from "@chakra-ui/react";
import { useSearchBarState } from "./SearchBar";
import testIds from "./testIds";
import { eventName } from "../../contexts/Analytics/util";
 
/**
 * An overlay component which can be used to extend the `<SearchBar />` presentational behavior
 * ```tsx
 * import { SearchBar, SearchOverlay } from "components/SearchBar";
 *
 * <SearchBar>
 *   <SearchOverlay />
 * </SearchBar>
 * ```
 */
export const SearchOverlay = forwardRef<BoxProps, "div">((props, ref) => {
  const { dataEvent, isOpen } = useSearchBarState();
 
  return (
    <Box
      bg="gray.700"
      data-event={dataEvent ? eventName(dataEvent, "Overlay") : undefined}
      data-testid={testIds.overlay}
      display={isOpen ? "initial" : "none"}
      inset="0"
      opacity="0.5"
      pos="fixed"
      ref={ref}
      zIndex="1"
      {...props}
    />
  );
});