+
+ onChange(e.target.value)} placeholder={placeholderText} aria-label={placeholderText} style={{
+ width: '100%',
+ padding: '8px 56px 8px 12px',
+ borderRadius: '8px',
+ border: '1px solid var(--sf-border)',
+ background: 'var(--sf-bg)',
+ color: 'var(--sf-text)',
+ fontSize: '14px',
+ outline: 'none',
+ boxSizing: 'border-box'
+ }} />
+ {q ? :
+ /
+ }
+
+ {facetList.map(f => {
+ const cur = sel[f.name] || 'All';
+ const isOpen = menuOpen === f.name;
+ return
{
+ menuRef.current[f.name] = el;
+ }} style={{
+ position: 'relative'
+ }}>
+
+ {cur !== 'All' &&
}
+ {isOpen &&
{
+ const items = [...e.currentTarget.querySelectorAll('button')];
+ const idx = items.indexOf(document.activeElement);
+ if (e.key === 'ArrowDown') {
+ e.preventDefault();
+ (items[idx + 1] || items[0]).focus();
+ } else if (e.key === 'ArrowUp') {
+ e.preventDefault();
+ (items[idx - 1] || items[items.length - 1]).focus();
+ } else if (e.key === 'Home') {
+ e.preventDefault();
+ if (items[0]) items[0].focus();
+ } else if (e.key === 'End') {
+ e.preventDefault();
+ if (items[items.length - 1]) items[items.length - 1].focus();
+ } else if (e.key === 'Tab') {
+ closeMenu(f.name);
+ }
+ }} style={{
+ position: 'absolute',
+ top: 'calc(100% + 6px)',
+ left: 0,
+ zIndex: 1000,
+ minWidth: '260px',
+ maxHeight: '340px',
+ overflowY: 'auto',
+ background: 'var(--sf-bg)',
+ border: '1px solid var(--sf-border)',
+ borderRadius: '10px',
+ boxShadow: '0 8px 24px rgba(0,0,0,0.12)',
+ padding: '5px'
+ }}>
+ {['All'].concat(f.values).map(c => {
+ const selected = cur === c;
+ return ;
+ })}
+
}
+
;
+ })}
+ {sortOptions.length > 1 &&
+ Sort by
+ {sortOptions.map(o => {
+ const on = sortBy === o;
+ return ;
+ })}
+
}
+
+ {q.trim() === '' && !facetActive ? <>{counts.total} {nounText}> : counts.shown === 0 ? <>
+ {q.trim() === '' ? 'No ' + nounText + ' match the selected filters.' : facetActive ? 'No ' + nounText + ' match \u201c' + q + '\u201d with the selected filters.' : 'No ' + nounText + ' match \u201c' + q + '\u201d.'}{' '}
+
+ {children ? <> {children}> : null}
+ > : <>
+ Showing {counts.shown} of {counts.total} {nounText}
+ >}
+