padding: '0.7rem 1rem',
border: ({ theme }) => `1px solid ${theme.greyScale5}`,
width: '25.375rem',
borderRadius: '4px',
outline: 'none',
transition: 'all 0.2s ease',
marginTop: -10,
marginBottom: -10,
':focus': {
borderColor: 'rgb(18, 141, 219) !important',
boxShadow: '0px 0px 22px 0px rgba(18, 147, 219, 0.75)',
},
});
export default compose(
namespace('search', withSearch()),
namespace(
'selectableList',
withSelectableList(
{
keyHandlerName: 'handleKeyDown',
listSourcePropPath: 'search.state.results',
},
{
onSelectItem: (item, { search }) => item && search.selectItem(item),
},
),
),
)(
({
search: { state, setQuery, reset },
const SuggestionFacet = compose(
withDropdown,
withState('inputValue', 'setInputValue', ''),
withState('isLoading', 'setIsLoading', false),
renameProp('hits', 'results'),
withHandlers({
// TODO: use router push
handleSelectItem: () => item =>
document.querySelector(`[data-link-id="${item.id}"]`).click(),
}),
namespace(
'selectableList',
withSelectableList(
{
keyHandlerName: 'handleKeyEvent',
listSourcePropPath: 'results',
},
{
onSelectItem: (item, { handleSelectItem }) => handleSelectItem(item),
},
),
),
pure,
)(
({
isLoading,
setIsLoading,
selectableList,
dropdownItem,
title,
doctype,
fieldNoDoctype,