{"version":3,"file":"static/js/SearchField.40a65161.js","mappings":"iSAQO,MAAMA,EAAaC,EAAAA,OAAOC,KAAIC,WAAA,CAAAC,YAAA,gBAAXH,CAAW,iXAC/BI,EAAAA,GAUAC,EAAAA,GAAGC,OAOHD,EAAAA,GAAGE,SAOIC,GAAaR,EAAAA,EAAAA,QAAOS,EAAAA,GAAUP,WAAA,CAAAC,YAAA,gBAAjBH,CAAiB,oJAIzBU,EAAAA,GAIAL,EAAAA,GAAGC,OAKHD,EAAAA,GAAGE,SAYRI,GAAeX,EAAAA,EAAAA,QAAOY,EAAAA,GAAOV,WAAA,CAAAC,YAAA,gBAAdH,CAAc,iCACpCK,EAAAA,GAAGE,S,eC5CT,MAAMM,EAAcA,EAChBC,gBACAC,kBACAC,YACAC,iBAAgB,EAChBC,eAAc,EACdC,YAAW,EACXC,KACAC,cACAC,oBACAC,YACAC,iBACAC,iBAEA,MAAM,QAAEC,EAAO,aAAEC,EAAY,MAAEC,EAAK,SAAEC,EAAQ,SAAEC,IAAaC,EAAAA,EAAAA,MACvDC,GAAUC,EAAAA,EAAAA,OACV,qBAAEC,IAAyBC,EAAAA,EAAAA,OAC1BC,EAAYC,IAAiBC,EAAAA,EAAAA,YAC9BC,GAAsBC,EAAAA,EAAAA,IACxBJ,EACA,KAEEK,EAGAC,IAAU,IAADC,EACA,QAAPA,EAACD,EAAKE,SAAC,IAAAD,GAANA,EAAQE,SACbb,EAAQc,KAAK,CAAEC,SAAUjC,EAAekC,OAAS,MAAKN,EAAKE,MACvDF,EAAKO,WAAWrB,IAAO,EAqB/B,IAAIsB,EACJ,QAfAC,EAAAA,EAAAA,YAAU,MACDjB,GAAwBhB,GAAaU,GAAO,GAClD,CAACM,EAAsBhB,EAAaU,KAEvCuB,EAAAA,EAAAA,YAAU,KACFjB,GACAJ,EAAS,IACb,GACD,CAACI,EAAsBJ,KAE1BsB,EAAAA,EAAAA,KAA0B,UACMC,IAAxBd,GAAqCpB,GAdzCsB,EAAe,CAAEG,EAAGR,EAAYa,WAAW,GAcuB,GACnE,CAAC9B,EAAUoB,KAGNe,EAAAA,EAAAA,OACJ,IAAK,KAGL,IAAK,IAGL,IAAK,IACDJ,EAAa,UACb,MACJ,QACIA,EAAa,WAGrBE,EAAAA,EAAAA,KAA0B,KACtBrC,GAAmBc,EAAS,IAAKd,EAAgB,GAClD,CAACA,EAAiBc,IAErB,MAAM0B,GACFC,EAAAA,EAAAA,KAACC,EAAAA,EAAc,CAACC,SAAS,MAAKC,UAC1BH,EAAAA,EAAAA,KAAC7C,EAAY,CAETiD,KAAMV,EACNW,MAAM,EACNC,UAAU,EACVC,KAAK,SACLC,UAAW5B,EAAWuB,SAErBtC,GAAe,IAPV,gBAAe6B,OAYjC,OACIM,EAAAA,EAAAA,KAACzD,EAAU,CACPiB,UAAWA,EACXiD,SAAUtC,GAAce,GACpBD,EAAe,IAAKC,EAAMO,UAAWhC,MAEzCiD,OAAO,MACP9C,GAAIA,EAAGuC,UAEPH,EAAAA,EAAAA,KAAChD,EAAU,CACPkB,QAASA,EACTyC,YAAY,IACZpD,gBAAiBA,EACjBqD,YAAa9C,GAAqB,GAClC+C,UAAU,SACVC,UAAUC,EAAAA,EAAAA,cAEN,CAACC,EAAQC,IACLpC,EAAcqC,OAAOD,IAAU,KACnC,CAACpC,IAELkB,aAAcA,EACdhC,UAAWA,EACXC,eAAgBA,EAChBC,WAAYA,KAEP,EAIrB,MAAekD,EAAAA,KAAW9D,E","sources":["components/SearchField/SearchField.styled.ts","components/SearchField/SearchField.tsx"],"sourcesContent":["import { styled } from \"styled-components\";\n\nimport Button from \"components/Button\";\nimport TextField from \"components/TextField\";\nimport { styleHeadingXL } from \"style/components/Typography\";\nimport { columnGap } from \"style/grid\";\nimport { MQ } from \"style/mediaQueries\";\n\nexport const SearchForm = styled.form`\n    ${columnGap};\n    display: grid;\n    grid-column: col-start 1 / span 4;\n    grid-template-columns: repeat(2, [col-start] 1fr);\n    grid-template-rows: auto 1fr;\n    margin-top: 7rem;\n    padding-bottom: 1.75rem;\n    position: relative;\n    row-gap: 2.1875rem;\n\n    ${MQ.FROM_M} {\n        grid-column: col-start 1 / span 12;\n        margin-top: 9.625rem;\n        padding-bottom: 2.625rem;\n        row-gap: 2.625rem;\n    }\n\n    ${MQ.FROM_XL} {\n        margin-top: 13.125rem;\n        padding-bottom: 3.5rem;\n        row-gap: 3.5rem;\n    }\n`;\n\nexport const InputField = styled(TextField)`\n    &&& {\n        .MuiInputBase {\n            &-input {\n                ${styleHeadingXL}\n                height: 2.625rem;\n                padding: 0.875rem;\n\n                ${MQ.FROM_M} {\n                    height: 4.375rem;\n                    padding: 1.3125rem;\n                }\n\n                ${MQ.FROM_XL} {\n                    height: 7rem;\n                }\n            }\n\n            &-root {\n                margin-top: 0;\n            }\n        }\n    }\n`;\n\nexport const SearchButton = styled(Button)`\n    ${MQ.FROM_XL} {\n        margin-right: 0.1875rem;\n    }\n`;\n","import { InputAdornment } from \"@mui/material\";\nimport React, { ReactElement, useCallback, useEffect, useState } from \"react\";\nimport { SubmitHandler, useForm } from \"react-hook-form\";\nimport { useHistory } from \"react-router\";\n\nimport {\n    useBreakpoint,\n    useDebounce,\n    useHeader,\n    useIsomorphicLayoutEffect,\n} from \"hooks\";\n\nimport { SearchButton, SearchForm, InputField } from \"./SearchField.styled\";\nimport SearchFieldProps from \"./SearchFieldProps\";\n\nconst SearchField = ({\n    searchPageUrl,\n    predefinedValue,\n    className,\n    resetOnSubmit = false,\n    resetOnHide = false,\n    debounce = false,\n    id,\n    searchLabel,\n    searchPlaceholder,\n    component,\n    displayOptions,\n    identifier,\n}: SearchFieldProps): ReactElement => {\n    const { control, handleSubmit, reset, setValue, setFocus } = useForm();\n    const history = useHistory();\n    const { searchOverlayVisible } = useHeader();\n    const [searchTerm, setSearchTerm] = useState<string | undefined>();\n    const debouncedSearchTerm = useDebounce<string | undefined>(\n        searchTerm,\n        2000,\n    );\n    const handleOnSubmit: SubmitHandler<{\n        q?: string;\n        resetForm?: boolean;\n    }> = (data) => {\n        if (!data.q?.trim()) return;\n        history.push({ pathname: searchPageUrl, search: `?q=${data.q}` });\n        if (data.resetForm) reset();\n    };\n\n    const triggerSubmit = () => {\n        handleOnSubmit({ q: searchTerm, resetForm: false });\n    };\n\n    useEffect(() => {\n        if (!searchOverlayVisible && resetOnHide) reset();\n    }, [searchOverlayVisible, resetOnHide, reset]);\n\n    useEffect(() => {\n        if (searchOverlayVisible) {\n            setFocus(\"q\");\n        }\n    }, [searchOverlayVisible, setFocus]);\n\n    useIsomorphicLayoutEffect(() => {\n        if (debouncedSearchTerm !== undefined && debounce) triggerSubmit();\n    }, [debounce, debouncedSearchTerm]); // eslint-disable-line react-hooks/exhaustive-deps\n\n    let searchIcon: string;\n    switch (useBreakpoint()) {\n        case \"XL\":\n            searchIcon = \"enter56\";\n            break;\n        case \"L\":\n            searchIcon = \"enter56\";\n            break;\n        case \"M\":\n            searchIcon = \"enter56\";\n            break;\n        default:\n            searchIcon = \"enter42\";\n    }\n\n    useIsomorphicLayoutEffect(() => {\n        predefinedValue && setValue(\"q\", predefinedValue);\n    }, [predefinedValue, setValue]);\n\n    const endAdornment = (\n        <InputAdornment position=\"end\">\n            <SearchButton\n                key={`SearchButton-${searchIcon}`}\n                icon={searchIcon}\n                a11y={true}\n                iconOnly={true}\n                type=\"submit\"\n                disabled={!searchTerm}\n            >\n                {searchLabel || \"\"}\n            </SearchButton>\n        </InputAdornment>\n    );\n\n    return (\n        <SearchForm\n            className={className}\n            onSubmit={handleSubmit((data) =>\n                handleOnSubmit({ ...data, resetForm: resetOnSubmit }),\n            )}\n            method=\"get\"\n            id={id}\n        >\n            <InputField\n                control={control}\n                elementName=\"q\"\n                predefinedValue={predefinedValue}\n                placeHolder={searchPlaceholder || \"\"}\n                inputMode=\"search\"\n                onChange={useCallback(\n                    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n                    (_: any, value: string | number) =>\n                        setSearchTerm(String(value) || \"\"),\n                    [setSearchTerm],\n                )}\n                endAdornment={endAdornment}\n                component={component}\n                displayOptions={displayOptions}\n                identifier={identifier}\n            />\n        </SearchForm>\n    );\n};\n\nexport default React.memo(SearchField);\n"],"names":["SearchForm","styled","form","withConfig","componentId","columnGap","MQ","FROM_M","FROM_XL","InputField","TextField","styleHeadingXL","SearchButton","Button","SearchField","searchPageUrl","predefinedValue","className","resetOnSubmit","resetOnHide","debounce","id","searchLabel","searchPlaceholder","component","displayOptions","identifier","control","handleSubmit","reset","setValue","setFocus","useForm","history","useHistory","searchOverlayVisible","useHeader","searchTerm","setSearchTerm","useState","debouncedSearchTerm","useDebounce","handleOnSubmit","data","_data$q","q","trim","push","pathname","search","resetForm","searchIcon","useEffect","useIsomorphicLayoutEffect","undefined","useBreakpoint","endAdornment","_jsx","InputAdornment","position","children","icon","a11y","iconOnly","type","disabled","onSubmit","method","elementName","placeHolder","inputMode","onChange","useCallback","_","value","String","React"],"sourceRoot":""}