"use client";

import { useState, useRef, useCallback } from "react";
import { Popover, PopoverTrigger, PopoverContent } from "@/registry/ui/popover";
import { Input } from "@/registry/ui/input";
import { Button } from "@/registry/ui/button";
import { cn } from "@/registry/lib/utils";

interface TextField {
  key: string;
  type: "text";
  label: string;
  placeholder?: string;
}

interface ColorField {
  key: string;
  type: "color";
  label: string;
  colors: string[];
}

type Field = TextField | ColorField;

interface EditPopoverProps {
  fields: Field[];
  values: Record<string, string>;
  onSave: (values: Record<string, string>) => Promise<void>;
  trigger: React.ReactNode;
  align?: "start" | "center" | "end";
  className?: string;
}

export function EditPopover({ fields, values, onSave, trigger, align = "end", className }: EditPopoverProps) {
  const [open, setOpen] = useState(false);
  const [localValues, setLocalValues] = useState<Record<string, string>>(values);
  const [saving, setSaving] = useState(false);
  const firstInputRef = useRef<HTMLInputElement>(null);

  const handleOpenChange = useCallback((nextOpen: boolean) => {
    if (nextOpen) {
      setLocalValues(values);
    }
    setOpen(nextOpen);
  }, [values]);

  const handleSave = useCallback(async () => {
    if (saving) return;
    setSaving(true);
    try {
      await onSave(localValues);
      setOpen(false);
    } catch (error) {
      console.error("EditPopover save failed:", error);
    } finally {
      setSaving(false);
    }
  }, [saving, onSave, localValues]);

  const setValue = useCallback((key: string, value: string) => {
    setLocalValues((prev) => ({ ...prev, [key]: value }));
  }, []);

  return (
    <Popover open={open} onOpenChange={handleOpenChange}>
      <PopoverTrigger asChild>{trigger}</PopoverTrigger>
      <PopoverContent
        align={align}
        className={cn("w-56 p-3 space-y-3", className)}
        onOpenAutoFocus={(e) => {
          e.preventDefault();
          firstInputRef.current?.focus();
        }}
      >
        {fields.map((field, i) => {
          if (field.type === "text") {
            return (
              <div key={field.key} className="space-y-1">
                <label className="text-xs font-medium text-muted-foreground">{field.label}</label>
                <Input
                  ref={i === 0 ? firstInputRef : undefined}
                  value={localValues[field.key] ?? ""}
                  onChange={(e) => setValue(field.key, e.target.value)}
                  placeholder={field.placeholder}
                  className="h-8"
                  onKeyDown={(e) => {
                    if (e.key === "Enter") handleSave();
                  }}
                />
              </div>
            );
          }

          if (field.type === "color") {
            return (
              <div key={field.key} className="space-y-1">
                <label className="text-xs font-medium text-muted-foreground">{field.label}</label>
                <div className="flex items-center gap-1.5 flex-wrap">
                  {field.colors.map((color) => (
                    <button
                      key={color}
                      type="button"
                      aria-label={`Color ${color}`}
                      aria-pressed={localValues[field.key] === color}
                      onClick={() => setValue(field.key, color)}
                      className={cn(
                        "size-3.5 p-0 border-0 rounded-full transition-shadow duration-150 cursor-pointer ring-offset-1 ring-offset-popover",
                        localValues[field.key] === color
                          ? "ring-2 ring-foreground"
                          : "hover:ring-2 hover:ring-ring-focus"
                      )}
                      style={{ backgroundColor: color }}
                    />
                  ))}
                </div>
              </div>
            );
          }

          return null;
        })}

        <div className="flex justify-end">
          <Button size="sm" onClick={handleSave} disabled={saving}>
            {saving ? "Saving..." : "Save"}
          </Button>
        </div>
      </PopoverContent>
    </Popover>
  );
}
Search documentation

Edit Popover

Installation

Usage

Examples

Default
