function SingleSelectFacet()

in packages/react-search-ui-views/src/SingleSelectFacet.tsx [39:79]


function SingleSelectFacet({
  className,
  label,
  onChange,
  options
}: FacetViewProps) {
  let selectedSelectBoxOption;
  let isSelectedSelectBoxOptionSet = false;

  const selectBoxOptions = options.map((option) => {
    const selectBoxOption = toSelectBoxOption(option);
    // There should never be multiple filters set for this facet because it is single select,
    // but if there is, we use the first value.
    if (option.selected && !isSelectedSelectBoxOptionSet) {
      selectedSelectBoxOption = selectBoxOption;
      isSelectedSelectBoxOptionSet = true;
    }
    return selectBoxOption;
  });

  return (
    <div className={appendClassName("sui-facet", className)}>
      <div className="sui-facet__title">{label}</div>
      <Select
        className="sui-select"
        classNamePrefix="sui-select"
        components={{
          Option: (props) => {
            props.innerProps["data-transaction-name"] = `facet - ${label}`;
            return Option(props);
          }
        }}
        value={selectedSelectBoxOption}
        onChange={(o) => onChange(o.value)}
        options={selectBoxOptions}
        isSearchable={false}
        styles={setDefaultStyle}
      />
    </div>
  );
}