{"version":3,"file":"4bbf9bf0-da6fcfc211629e481c7f.js","mappings":"6SAkBA,IAAMA,EAAa,2EAKbC,EAAoB,+EAMpBC,EAAmB,2FAOnBC,EAAY,8FAMZC,EAAa,2HASbC,EAAc,sHASdC,EAAoB,iCAIpBC,EAAQ,0VA2BRC,EAAc,+MAkBdC,EAAqB,2CAIrBC,EAAU,8LAaVC,EAAgB,wEAMhBC,EAAY,wDAKZC,EAAgB,4DAKhBC,EAAgB,8EAMhBC,EAAiB,yCAIjBC,EAAmB,kDAKnBC,EAAe,0aA0BfC,EAAqB,kGASrBC,EAAqB,KAAkC,SAACC,QAAC,IAADA,IAAAA,EAAI,IAChE,IAAMC,EAAaD,EAAEE,OAAOC,UAAU,EAAG,KACrCF,GAAcG,OAAOC,WACvBD,OAAOC,UAAU,SAAU,CAACC,MAAO,CAACC,MAAON,KAGzCA,GAAcG,OAAOI,MACvBJ,OAAOI,KAAK,QAAS,SAAU,CAC7BD,MAAON,GAGb,GAAG,KAEY,SAASQ,EAAU,GAGM,IAAD,IAFrCC,WAAAA,OAAU,MAAG,GAAE,MACfC,QAAAA,OAAO,MAAG,GAAE,EAEZ,GAAsDC,EAAAA,EAAAA,WAAS,GAAxDC,EAAmB,KAAEC,EAAsB,KAClD,GAAsCF,EAAAA,EAAAA,WAAS,GAAxCG,EAAW,KAAEC,EAAc,KAC5BC,GAA8BC,EAAAA,EAAAA,IAAgB,kBAAMJ,GAAuB,EAAM,IACjFK,GAAkBD,EAAAA,EAAAA,IAAgB,kBAAMF,GAAe,EAAM,IAC7DI,GAAwBF,EAAAA,EAAAA,IAAgB,kBAAMF,GAAe,EAAM,IAEzE,GAAsCJ,EAAAA,EAAAA,UAAS,GAAxCS,EAAW,KAAEC,EAAc,KAClC,GAA0BV,EAAAA,EAAAA,UAAS,IAA5BL,EAAK,KAAEgB,EAAQ,KACtB,GAA8BX,EAAAA,EAAAA,UAAmC,IAA1DY,EAAO,KAAEC,EAAU,KAC1B,GAMIC,EAAAA,EAAAA,GAAoB,CACtBf,QAAAA,IANAgB,GAAgB,EAAhBA,iBACiBC,GAAgB,EAAjCC,gBACAC,GAAO,EAAPA,QACAC,GAAM,EAANA,OACAC,GAAK,EAALA,MAKIH,IAAkBI,EAAAA,EAAAA,cAAY,WAC5BH,IAAWC,IAASH,IAC5B,GAAG,CAACE,GAASC,GAAQH,MAErBM,EAAAA,EAAAA,YAAU,WACRnC,EAAmBQ,EACrB,GAAG,CAACA,KAEJ2B,EAAAA,EAAAA,YAAU,WAER,GADAZ,EAAe,IACVf,IAAUoB,GAGb,OAFAF,EAAW,SACXT,GAAe,GAGjB,IAAMmB,EAAgBR,GAAiBS,OAAO7B,GAC9CkB,EAAWU,EAAcE,MAAM,EAAG,KAClCrB,GAAe,EACjB,GAAG,CAACT,EAAOoB,KAEX,IAAMW,IAAWL,EAAAA,EAAAA,cACf,YAAiC,IAAD,IAA9BM,MAAQC,EAAG,EAAHA,IAAKC,EAAU,EAAVA,WACblB,EAAS,KACTmB,EAAAA,EAAAA,WAASC,EAAAA,EAAAA,GAAc,KAAkB,IAAfF,EAAuB,GAAK/B,GAAa8B,GACrE,GACA,CAAC9B,IAEGkC,IAAYX,EAAAA,EAAAA,cAChB,SAACY,GACC,GAAI9B,GAAeS,EAAQsB,OACzB,OAAQD,EAAME,KACZ,IAAK,QACHT,GAASd,EAAQH,IACjB,MACF,IAAK,YACHC,GAAe,SAAC0B,GAAe,OAAKC,KAAKC,IAAI1B,EAAQsB,OAAS,EAAGE,EAAkB,EAAE,IACrF,MACF,IAAK,UACH1B,GAAe,SAAC0B,GAAe,OAAKC,KAAKE,IAAI,EAAGH,EAAkB,EAAE,IACpE,MACF,IAAK,SACHhC,GAAe,GAKvB,GACA,CAACK,EAAaiB,GAAUd,EAAST,IAGnC,OAAKJ,EAAQmC,QAGX,QAAC,IAAO,CACNxD,WAAYA,EACZ8D,OAAQrC,EACRsC,QACE,eAAKC,IAAK1E,EAAe,cAAY,kBACnC,eAAK2E,IAAKtC,EAA6BqC,IAAKxE,IAC1C,kBACE0E,QAAS,kBAAM1C,GAAuB,SAAC2C,GAAI,OAAMA,CAAI,GAAC,EACtDC,KAAK,SACLJ,IAAG,CAAGzD,EAAiBgB,GAAuBf,EAAqB,SAEnE,QAAC,IAAU,CAACwD,IAAKtE,KAElB6B,IACC,eAAKyC,IAAKjE,IACR,iBAEEsE,WAAS,EACTJ,IAAKnC,EACLkC,IAAG,CAAGnE,EAAUC,EAAc,OAC9BsE,KAAK,OACLE,YAAY,UACZC,MAAOtD,EACPuD,QAASjC,GACTkC,SAAU,SAAClB,GAAK,OAAKtB,EAASsB,EAAMQ,OAAOQ,OAAS,GAAG,EACvDjB,UAAWA,OAEVrC,IACD,QAAC,IAAU,CACT+C,IAAG,CAAGrE,EAAgBC,EAAoB,OAC1C8E,KAAM,GACNR,QAAS,kBAAMjC,EAAS,GAAG,OAMrC,eAAK0C,UAAU,oBAAoBX,IAAKzE,IACtC,QAAC,IAAU,CAACyE,IAAKvE,KACjB,iBACE,cAAY,eACZwE,IAAKpC,EACLmC,IAAKnE,EACLuE,KAAK,OACLE,YAAY,UACZC,MAAOtD,EACPuD,QAASjC,GACTkC,SAAU,SAAClB,GAAK,OAAKtB,EAASsB,EAAMQ,OAAOQ,OAAS,GAAG,EACvDjB,UAAWA,OAEVrC,IAAS,QAAC,IAAU,CAAC+C,IAAKrE,EAAgB+E,KAAM,GAAIR,QAAS,kBAAMjC,EAAS,GAAG,OAKvFC,EAAQsB,QACP,cAAIQ,IAAK/D,IACLyC,IACAR,EAAQ0C,KAAI,SAACC,EAAQC,GAAC,OACpB,QAAC,IAAY,CACXrB,IAAKoB,EAAOZ,IACZc,OAAQhD,IAAgB+C,EACxBD,OAAQA,EACR7B,SAAUA,GACVgC,aAAc,kBAAMhD,EAAe8C,EAAE,GACrC,MAIR,eAAKd,IAAK9D,IACR,QAAC,IAAU,CAAC8D,IAAK7D,EAAkBuE,KAAM,MACzC,eAAKV,IAAK5D,IACR,kBAAQ4D,IAAK3D,GAAkB,yBAA2BY,EAAK,MAC/D,aAAG+C,IAAK1D,GAAoB,iEA5EV,IAoF9B,C","sources":["webpack://@kensho/public-api-docs/./src/components/SearchBar.tsx"],"sourcesContent":["import React, {useState, useEffect, useCallback} from 'react'\nimport {css} from '@emotion/react'\nimport {IconSearch, IconXSmall} from '@kensho/icons'\nimport {navigate} from 'gatsby'\nimport {debounce} from 'lodash'\n\nimport useMultiSearchIndex, {MultiSearchIndexResult, Indices} from '../hooks/useMultiSearchIndex'\nimport useClickOutside from '../hooks/useClickOutside'\nimport normalizePath from '../utils/normalizePath'\n\nimport Popover from './Popover'\nimport SearchResult from './SearchResult'\n\ninterface SearchBarProps {\n  pathPrefix?: string\n  indices?: Indices\n}\n\nconst inputGroupCss = css`\n  position: relative;\n  color: rgba(255, 255, 255, 0.54);\n`\n\nconst desktopInputGroupCss = css`\n  @media screen and (max-width: 1024px) {\n    display: none;\n  }\n`\n\nconst mobileInputGroupCss = css`\n  height: 50px;\n  @media screen and (min-width: 1024px) {\n    display: none;\n  }\n`\n\nconst inputIconCss = css`\n  color: rgba(255, 255, 255, 0.54);\n  position: absolute;\n  top: 10px;\n  left: 12px;\n`\nconst mobileIconCss = css`\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 50px;\n  padding: 0 8px;\n`\n\nconst closeButtonCss = css`\n  color: rgba(255, 255, 255, 0.54);\n  position: absolute;\n  top: 0;\n  right: 4px;\n  cursor: pointer;\n  padding: 6px;\n`\n\nconst mobileCloseButtonCss = css`\n  top: 4px;\n`\n\nconst inputCss = css`\n  min-width: 360px;\n  line-height: 34px;\n  height: 36px;\n  background: #41474b;\n  color: #ffffff;\n  font-size: 16px;\n  padding: 0 36px 0 42px;\n  box-sizing: border-box;\n  border-radius: 2px;\n  outline: none;\n  border: 1px solid transparent;\n\n  &::placeholder {\n    color: rgba(255, 255, 255, 0.54);\n    font-style: italic;\n  }\n\n  &:focus {\n    border-color: #50afc6;\n  }\n\n  &::-ms-clear {\n    display: none;\n  }\n`\n\nconst inputMobileCss = css`\n  min-width: 400px;\n  height: 50px;\n  border-radius: 0px;\n  position: absolute;\n  top: 0px;\n  right: 0px;\n\n  @media screen and (max-width: 600px) {\n    min-width: auto;\n    width: 100vw;\n  }\n\n  &:focus {\n    border-color: transparent;\n  }\n`\n\nconst mobileInputWrapperCss = css`\n  position: relative;\n`\n\nconst popoverCss = css`\n  @media screen and (max-width: 1024px) {\n    margin-top: 50px;\n    width: 400px;\n  }\n  @media screen and (max-width: 600px) {\n    width: 100vw;\n  }\n  max-height: 400px;\n  min-width: 400px;\n  overflow: auto;\n`\n\nconst searchResultsCss = css`\n  margin: 0;\n  list-style-type: none;\n  max-width: 900px;\n`\n\nconst noResultsCss = css`\n  display: flex;\n  margin: 10px 14px;\n`\n\nconst noResultsIconCss = css`\n  color: #50afc6;\n  margin: 10px 14px 0 0;\n`\n\nconst noResultsTextCss = css`\n  margin-top: 12px;\n  max-width: 400px;\n  word-break: break-all;\n`\n\nconst noResultsFoundCss = css`\n  font-size: 16px;\n`\n\nconst noResultsSubTextCss = css`\n  margin: 0;\n  font-size: 12px;\n`\n\nconst searchButtonCss = css`\n  display: flex;\n  align-items: center;\n  position: relative;\n  background-color: transparent;\n  color: rgba(255, 255, 255, 0.72);\n  outline: none;\n  text-decoration: none;\n  font-size: 16px;\n  height: 100%;\n  overflow: hidden;\n  white-space: nowrap;\n  transition: 0.1s linear;\n  border: none;\n  border-left: 1px solid black;\n\n  cursor: pointer;\n  &:hover {\n    background-color: rgba(255, 255, 255, 0.05);\n    color: white;\n    &:after {\n      background-color: rgba(255, 255, 255, 0.54);\n    }\n  }\n`\n\nconst activeSearchButtonCss = css`\n  background-color: #41474b;\n  color: white;\n\n  &:hover {\n    background-color: #41474b;\n  }\n`\n\nconst sendQueryAnalytics = debounce<(query: string) => void>((q = '') => {\n  const queryValue = q.trim().substring(0, 100)\n  if (queryValue && window.plausible) {\n    window.plausible('Search', {props: {query: queryValue}})\n  }\n\n  if (queryValue && window.gtag) {\n    window.gtag('event', 'search', {\n      query: queryValue,\n    })\n  }\n}, 2000)\n\nexport default function SearchBar({\n  pathPrefix = '',\n  indices = [],\n}: SearchBarProps): JSX.Element | null {\n  const [mobileSearchbarOpen, setMobileSearchbarOpen] = useState(false)\n  const [resultsOpen, setResultsOpen] = useState(false)\n  const clickOutsideMobileSearchRef = useClickOutside(() => setMobileSearchbarOpen(false))\n  const clickOutsideRef = useClickOutside(() => setResultsOpen(false))\n  const clickOutsideMobileRef = useClickOutside(() => setResultsOpen(false))\n\n  const [activeIndex, setActiveIndex] = useState(0)\n  const [query, setQuery] = useState('')\n  const [results, setResults] = useState<MultiSearchIndexResult[]>([])\n  const {\n    multiSearchIndex,\n    loadSearchIndex: _loadSearchIndex,\n    loading,\n    loaded,\n    error,\n  } = useMultiSearchIndex({\n    indices,\n  })\n\n  const loadSearchIndex = useCallback(() => {\n    if (!(loading || loaded)) _loadSearchIndex()\n  }, [loading, loaded, _loadSearchIndex])\n\n  useEffect(() => {\n    sendQueryAnalytics(query)\n  }, [query])\n\n  useEffect(() => {\n    setActiveIndex(0)\n    if (!query || !multiSearchIndex) {\n      setResults([])\n      setResultsOpen(false)\n      return\n    }\n    const searchResults = multiSearchIndex.search(query)\n    setResults(searchResults.slice(0, 10))\n    setResultsOpen(true)\n  }, [query, multiSearchIndex])\n\n  const onSelect = useCallback(\n    ({store: {url, prefixPath}}) => {\n      setQuery('')\n      navigate(normalizePath(`${prefixPath === false ? '' : pathPrefix}${url}`))\n    },\n    [pathPrefix]\n  )\n  const onKeyDown = useCallback(\n    (event) => {\n      if (resultsOpen && results.length) {\n        switch (event.key) {\n          case 'Enter':\n            onSelect(results[activeIndex])\n            break\n          case 'ArrowDown':\n            setActiveIndex((prevActiveIndex) => Math.min(results.length - 1, prevActiveIndex + 1))\n            break\n          case 'ArrowUp':\n            setActiveIndex((prevActiveIndex) => Math.max(0, prevActiveIndex - 1))\n            break\n          case 'Escape':\n            setResultsOpen(false)\n            break\n          default:\n        }\n      }\n    },\n    [activeIndex, onSelect, results, resultsOpen]\n  )\n\n  if (!indices.length) return null\n\n  return (\n    <Popover\n      popoverCss={popoverCss}\n      isOpen={resultsOpen}\n      target={\n        <div css={inputGroupCss} data-testid=\"mobile-search\">\n          <div ref={clickOutsideMobileSearchRef} css={mobileInputGroupCss}>\n            <button\n              onClick={() => setMobileSearchbarOpen((prev) => !prev)}\n              type=\"button\"\n              css={[searchButtonCss, mobileSearchbarOpen && activeSearchButtonCss]}\n            >\n              <IconSearch css={mobileIconCss} />\n            </button>\n            {mobileSearchbarOpen && (\n              <div css={mobileInputWrapperCss}>\n                <input\n                  // eslint-disable-next-line jsx-a11y/no-autofocus\n                  autoFocus\n                  ref={clickOutsideMobileRef}\n                  css={[inputCss, inputMobileCss]}\n                  type=\"text\"\n                  placeholder=\"Search…\"\n                  value={query}\n                  onFocus={loadSearchIndex}\n                  onChange={(event) => setQuery(event.target.value || '')}\n                  onKeyDown={onKeyDown}\n                />\n                {!!query && (\n                  <IconXSmall\n                    css={[closeButtonCss, mobileCloseButtonCss]}\n                    size={36}\n                    onClick={() => setQuery('')}\n                  />\n                )}\n              </div>\n            )}\n          </div>\n          <div className=\"desktopInputGroup\" css={desktopInputGroupCss}>\n            <IconSearch css={inputIconCss} />\n            <input\n              data-testid=\"search-input\"\n              ref={clickOutsideRef}\n              css={inputCss}\n              type=\"text\"\n              placeholder=\"Search…\"\n              value={query}\n              onFocus={loadSearchIndex}\n              onChange={(event) => setQuery(event.target.value || '')}\n              onKeyDown={onKeyDown}\n            />\n            {!!query && <IconXSmall css={closeButtonCss} size={36} onClick={() => setQuery('')} />}\n          </div>\n        </div>\n      }\n    >\n      {results.length ? (\n        <ul css={searchResultsCss}>\n          {!error &&\n            results.map((result, i) => (\n              <SearchResult\n                key={result.ref}\n                active={activeIndex === i}\n                result={result}\n                onSelect={onSelect}\n                onMouseEnter={() => setActiveIndex(i)}\n              />\n            ))}\n        </ul>\n      ) : (\n        <div css={noResultsCss}>\n          <IconSearch css={noResultsIconCss} size={30} />\n          <div css={noResultsTextCss}>\n            <strong css={noResultsFoundCss}>{`No results found for \"${query}\"`}</strong>\n            <p css={noResultsSubTextCss}>\n              You may want to try different keywords or check for typos.\n            </p>\n          </div>\n        </div>\n      )}\n    </Popover>\n  )\n}\n"],"names":["inputGroupCss","desktopInputGroupCss","mobileInputGroupCss","inputIconCss","mobileIconCss","closeButtonCss","mobileCloseButtonCss","inputCss","inputMobileCss","mobileInputWrapperCss","popoverCss","searchResultsCss","noResultsCss","noResultsIconCss","noResultsTextCss","noResultsFoundCss","noResultsSubTextCss","searchButtonCss","activeSearchButtonCss","sendQueryAnalytics","q","queryValue","trim","substring","window","plausible","props","query","gtag","SearchBar","pathPrefix","indices","useState","mobileSearchbarOpen","setMobileSearchbarOpen","resultsOpen","setResultsOpen","clickOutsideMobileSearchRef","useClickOutside","clickOutsideRef","clickOutsideMobileRef","activeIndex","setActiveIndex","setQuery","results","setResults","useMultiSearchIndex","multiSearchIndex","_loadSearchIndex","loadSearchIndex","loading","loaded","error","useCallback","useEffect","searchResults","search","slice","onSelect","store","url","prefixPath","navigate","normalizePath","onKeyDown","event","length","key","prevActiveIndex","Math","min","max","isOpen","target","css","ref","onClick","prev","type","autoFocus","placeholder","value","onFocus","onChange","size","className","map","result","i","active","onMouseEnter"],"sourceRoot":""}