Function MultiCheckSelect

frontend/src/react/components/ExprEditor.tsx:723–839

({
  value,
  options,
  renderValue,
  disabled,
  placeholder,
  onChange,
}: {
  value: string[];
  options: { label: string; value: string }[];
  renderValue?: (value: string, fallbackLabel?: string) => ReactNode;
  disabled?: boolean;
  placeholder?: string;
  onChange: (value: string[]) => void;
})

// ============================================================

function MultiCheckSelect({
  value,
  options,
  renderValue,
  disabled,
  placeholder,
  onChange,
}: {
  value: string[];
  options: { label: string; value: string }[];
  renderValue?: (value: string, fallbackLabel?: string) => ReactNode;
  disabled?: boolean;
  placeholder?: string;
  onChange: (value: string[]) => void;
}) {
  const { t } = useTranslation();
  const [open, setOpen] = useState(false);
  const triggerRef = useRef<HTMLButtonElement>(null);
  const dropdownRef = useRef<HTMLDivElement>(null);

  const allValues = options.map((o) => o.value);
  const allSelected =
    allValues.length > 0 && allValues.every((v) => value.includes(v));
  const anySelected = value.length > 0;

  const getLabelForValue = (v: string) =>
    options.find((o) => o.value === v)?.label ?? v;

  const toggleValue = (v: string) => {
    if (value.includes(v)) {
      onChange(value.filter((x) => x !== v));
    } else {
      onChange([...value, v]);
    }
  };

  const close = useCallback(() => setOpen(false), []);
  useClickOutside([triggerRef, dropdownRef], open, close);

  return (
    <div className="min-w-32">
      <button
        ref={triggerRef}
        type="button"
        className={cn(
          VALUE_MULTI_FIELD_CLASS,
          "inline-flex w-full flex-wrap items-center gap-1 text-left hover:bg-control-bg disabled:pointer-events-none disabled:opacity-50"
        )}
        disabled={disabled}
        onClick={() => setOpen(!open)}
      >
        {value.length === 0 && (
          <span className="text-control-placeholder">{placeholder}</span>
        )}
        {value.map((v) => (
          <span
            key={v}
            className="inline-flex items-center gap-1 bg-control-bg text-xs px-1.5 py-0.5 rounded-xs"