\n \n\n\n \n setFilter('')}>\n \n \n \n \n );\n};\n\nSearchFilterBalloon.propTypes = {\n filter: PropTypes.object.isRequired,\n schema: PropTypes.object.isRequired,\n setFilter: PropTypes.func.isRequired,\n};\n\n\n/*\n * Public Elements\n */\nconst SearchBar = ({filters, setFilters, filtersSchema, ignore = null, allowText = false, gaCategory = null}) => {\n const {t} = useTranslation();\n const searchInput = useRef(null);\n const filterItems = useRef(null);\n const [showAvailableFilters, setShowAvailableFilters] = useState(false);\n const [activeEditingFilter, setActiveEditingFilter] = useState(null);\n const [availableFiltersCss, setAvailableFiltersCss] = useState({});\n const [filterItemsCss, setFilterItemsCss] = useState({});\n const [searchInputCss, setSearchInputCss] = useState({});\n\n const inputPlaceHolder = allowText ? t('Search') : t('Select filter options');\n\n /**\n * Set a search filter\n * This method returns a function that takes a value parameter to set the value for the previously defined filter\n *\n * @param {string} filterKey - the name of the filter we want to set\n * @returns {function(*): *} function that takes a value parameter to set the filter's value\n */\n const setSearchFilter = filterKey => value => {\n setFilters({...filters, ...{[filterKey]: value}});\n\n // Send custom event to Google Analytics\n if (gaCategory && filterKey && value) {\n /* eslint-disable-next-line i18next/no-literal-string */\n sendGoogleAnalyticsEvent(gaCategory, `filter-${filterKey}`, value);\n }\n };\n\n\n\n // Generate the applied filters to show in the search input, filtering out any empty filters\n const currentFilterElements = Object.keys(filters).filter(key => {\n if (key === 'search') {\n return false;\n }\n\n if (!ignore) {\n return true;\n }\n\n return !ignore.includes(key) && filters[key];\n }).map(key => {\n const filter = {key, value: filters[key]};\n return (\n \n );\n });\n\n // Depending on the number of filters, update the input's height and filter's container width, as to have them\n // always inside the input.\n useEffect(() => {\n const filtersCss = {\n maxWidth: searchInput.current.scrollWidth - searchInputPadding.left - searchInputPadding.right,\n };\n const searchCss = {\n height: filterItems.current.scrollHeight + searchInputPadding.top + searchInputPadding.bottom,\n };\n const availableFiltCss = {\n height: '100%',\n };\n\n // Place the available filters stuff in the next line\n if (searchCss.height > baseInputHeight) {\n /* eslint-disable i18next/no-literal-string */\n availableFiltCss.height = 'auto';\n availableFiltCss.right = '100%';\n availableFiltCss['.available-filters-inner'] = {\n position: 'relative',\n };\n /* eslint-enable i18next/no-literal-string */\n }\n\n setAvailableFiltersCss(availableFiltCss);\n setFilterItemsCss(filtersCss);\n setSearchInputCss(searchCss);\n }, [currentFilterElements.length]);\n\n // Get all the available filters that can be set to display in the search bar (with exception of the ignored\n // filters, show all that exist in the filters schema but don't have any values set).\n // eslint-disable-next-line no-unused-vars\n const availableFiltersOptions = Object.entries(filtersSchema).filter(([key, _]) => {\n if (!ignore) {\n return true;\n }\n\n return !ignore.includes(key) && !filters[key];\n }).map(([key, value]) => ({key, name: value.name}));\n\n let availableFiltersToDisplay = null;\n\n // If the current state is for selecting the filter to apply, show that list\n if (showAvailableFilters) {\n availableFiltersToDisplay = (\n \n );\n }\n\n // Otherwise, check if we have an active editing filter (which is a filter that was JUST selected in the previous\n // dropdown), and display the available options for it.\n else if (activeEditingFilter) {\n const availableValuesOptions = filtersSchema[activeEditingFilter].options;\n availableFiltersToDisplay = (\n \n );\n }\n\n // Only show the \"clear all filters\" icon if there are filters applied\n const clearAllFilters = currentFilterElements.length || filters.search\n ? (\n