Input with action

"use client";

import * as React from "react";
import { Loader2Icon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { cn } from "@/lib/utils";

type InputActionProps = Omit<React.ComponentProps<typeof Input>, "className"> & {
  /** Text on the button. With actionIcon it becomes the accessible name. */
  actionLabel: string;
  /** Called with the field's current value on click and on Enter. */
  onAction?: (value: string) => void;
  /** Shows a spinner on the button and disables it. */
  pending?: boolean;
  /** Button variant. Default is the solid pill. */
  actionVariant?: "default" | "outline" | "secondary" | "ghost";
  /** Replace the label with an icon. The label becomes the aria-label. */
  actionIcon?: React.ReactNode;
  /** Classes for the outer field. Use inputClassName for the input itself. */
  className?: string;
  /** Classes for the inner input. */
  inputClassName?: string;
};

/**
 * An input with a small button inside the same bordered field.
 * Enter in the input presses the button. The button sits 2px inside the border.
 */
export function InputAction({
  actionLabel,
  onAction,
  pending = false,
  actionVariant = "default",
  actionIcon,
  className,
  inputClassName,
  disabled,
  onKeyDown,
  ...props
}: InputActionProps) {
  const inputRef = React.useRef<HTMLInputElement>(null);

  const fire = () => {
    if (pending || disabled) return;
    onAction?.(inputRef.current?.value ?? "");
  };

  return (
    <div
      data-slot="input-action"
      data-pending={pending || undefined}
      className={cn(
        "flex h-8 w-full min-w-0 items-center rounded-lg border border-input bg-transparent pr-0.5 transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-disabled:pointer-events-none has-disabled:opacity-50 dark:bg-input/30",
        className,
      )}
    >
      <Input
        ref={inputRef}
        disabled={disabled}
        aria-busy={pending || undefined}
        onKeyDown={(e) => {
          onKeyDown?.(e);
          if (e.key === "Enter" && !e.defaultPrevented) {
            e.preventDefault();
            fire();
          }
        }}
        className={cn(
          "h-full flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:border-transparent focus-visible:ring-0 disabled:bg-transparent dark:bg-transparent dark:disabled:bg-transparent",
          inputClassName,
        )}
        {...props}
      />
      <Button
        type="button"
        variant={actionVariant}
        size={actionIcon ? "icon-sm" : "sm"}
        disabled={disabled || pending}
        aria-label={actionIcon ? actionLabel : undefined}
        onClick={fire}
        className="shrink-0 rounded-full"
      >
        {pending ? (
          <Loader2Icon
            data-icon={actionIcon ? undefined : "inline-start"}
            aria-hidden="true"
            className="animate-spin motion-reduce:animate-none"
          />
        ) : (
          actionIcon
        )}
        {actionIcon ? null : <span>{actionLabel}</span>}
      </Button>
      <span className="sr-only" aria-live="polite">
        {pending ? "Working" : ""}
      </span>
    </div>
  );
}