Function MaxRowCountSelect

frontend/src/react/components/MaxRowCountSelect.tsx:22–103

({
  value,
  onChange,
  maximum,
  quaternary = false,
  className,
}: MaxRowCountSelectProps)

};

export function MaxRowCountSelect({
  value,
  onChange,
  maximum,
  quaternary = false,
  className,
}: MaxRowCountSelectProps) {
  const { t } = useTranslation();
  const [open, setOpen] = useState(false);

  const rowCountOptions = useMemo(() => {
    const list = [1, 100, 500, 1000, 5000, 10000, 100000].filter(
      (num) => num <= maximum
    );
    if (maximum !== Number.MAX_VALUE && !list.includes(maximum)) {
      list.push(maximum);
    }
    return list;
  }, [maximum]);

  const handlePresetClick = (n: number) => {
    onChange(n);
    setOpen(false);
  };

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const rawValue = Number(e.target.value);
    const clamped = minmax(
      Number.isNaN(rawValue) ? 0 : rawValue,
      first(rowCountOptions) ?? 1,
      last(rowCountOptions) ?? 100000
    );
    onChange(clamped);
  };

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger
        render={
          <Button
            variant={quaternary ? "ghost" : "outline"}
            size="sm"
            className={cn("justify-start", className)}
          />
        }
      >
        {t("sql-editor.result-limit.self")}{" "}
        {t("common.rows.n-rows", { n: value })}
        <ChevronRight className="size-4 ml-1" />
      </PopoverTrigger>
      <PopoverContent side="bottom" align="start" className="p-1 min-w-32">
        <div className="flex flex-col">
          {rowCountOptions.map((n) => (
            <button
              key={n}
              type="button"
              className={cn(
                "px-3 py-1.5 text-sm text-left rounded-xs cursor-pointer",