function SelectSingleInput()

in export-templates/target-identification/src/common/select/index.tsx [168:301]
134 lines of code
14 McCabe index (conditional complexity)

function SelectSingleInput<Item>(props: SelectInputProps<Item>) {
  const {
    className,
    style,
    children,
    removable,
    values,
    filter,
    open,
    onClick,
    onBlur,
    onRemove,
    onRemoveAll,
    onChangeFilter,
    onEnter,
    onDownKey,
    onUpKey,
  } = props;
  const value = values.length > 0 ? values[0] : undefined;
  const input = useRef<HTMLInputElement | null>(null);
  useEffect(() => {
    if (input.current && open) {
      input.current.focus();
    } else if (input.current) {
      input.current.blur();
    }
  }, [input, open]);
  const displayValue = useMemo(() => {
    const p = getSelectOptionProps(children, value);
    if (p) {
      return p.children;
    }
    return undefined;
  }, [children, value, onRemove]);
  const onKey = useCallback((event: KeyboardEvent) => {
    switch ((event.key ?? '').toLowerCase()) {
      case 'escape':
        (event.target as HTMLInputElement).blur();
        break;
      case 'enter':
        onEnter();
        break;
      case 'arrowup':
        if (typeof onUpKey === 'function') {
          event.preventDefault();
          event.stopPropagation();
          onUpKey();
        }
        break;
      case 'arrowdown':
        if (typeof onDownKey === 'function') {
          event.preventDefault();
          event.stopPropagation();
          onDownKey();
        }
        break;
      default:
        break;
    }
  }, [
    onBlur,
    onEnter,
    onDownKey,
    onUpKey,
    values,
    filter
  ]);
  const onInputChange = useCallback((event: TargetedEvent<HTMLInputElement, Event>) => {
    onChangeFilter((event.target as HTMLInputElement).value);
  }, [onChangeFilter]);
  return (
    <div className={classNames('flex items-center justify-start', className)} style={style}>
      <div
        className={
          classNames(
            'absolute',
            'select-none',
            'w-full',
            'outline-0',
            'border-0',
            'h-full',
            'px-1',
            'flex',
            'items-center',
            'z-0',
            {
              'opacity-50': open,
              hidden: filter.length > 0
            }
          )
        }
      >
        <p className="truncate">{displayValue}</p>
      </div>
      <div className="flex-1 z-10 basis-1/2">
        <input
          className="w-full outline-0 border-0 h-6 px-1 bg-transparent"
          ref={input}
          onClick={onClick}
          onBlur={onBlur}
          onKeyDown={onKey}
          value={filter}
          onChange={onInputChange}
          style={{minWidth: '50%'}}
        />
      </div>
      {
        removable && (
          <XMarkIcon
            className={classNames(
              'mx-1',
              'w-4',
              'h-4',
              'z-10',
              {
                'cursor-pointer': value,
                'opacity-25': !value
              }
            )}
            onClick={onRemoveAll}
          />
        )
      }
      {
        !removable && (
          <ChevronDownIcon className={classNames('mx-1', 'w-3', 'h-3', 'z-10', 'transition-transform', {
            'rotate-180': open,
            transform: open,
          })} />
        )
      }
    </div>
  );
}