"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

export interface AddressResult {
  id: string;
  label: string;
  street: string;
  city: string;
  state: string;
  postalCode: string;
  country: string;
}

export interface AutocompleteAddressProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "onSelect"> {
  value?: string;
  onChange?: (value: string) => void;
  onSelect?: (address: AddressResult) => void;
  placeholder?: string;
  emptyMessage?: string;
}

const SearchIcon = (props: React.SVGProps<SVGSVGElement>) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" {...props}>
    <circle cx="11" cy="11" r="8" strokeWidth="1.5" />
    <path
      d="M21 21l-4.35-4.35"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);

const LocationIcon = (props: React.SVGProps<SVGSVGElement>) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" {...props}>
    <path
      d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <circle cx="12" cy="9" r="2.5" strokeWidth="1.5" />
  </svg>
);

const mockAddresses: AddressResult[] = [
  {
    id: "1",
    label: "123 Main Street, San Francisco, CA 94102",
    street: "123 Main Street",
    city: "San Francisco",
    state: "CA",
    postalCode: "94102",
    country: "United States",
  },
  {
    id: "2",
    label: "456 Oak Avenue, Los Angeles, CA 90001",
    street: "456 Oak Avenue",
    city: "Los Angeles",
    state: "CA",
    postalCode: "90001",
    country: "United States",
  },
  {
    id: "3",
    label: "789 Pine Road, New York, NY 10001",
    street: "789 Pine Road",
    city: "New York",
    state: "NY",
    postalCode: "10001",
    country: "United States",
  },
  {
    id: "4",
    label: "321 Maple Drive, Seattle, WA 98101",
    street: "321 Maple Drive",
    city: "Seattle",
    state: "WA",
    postalCode: "98101",
    country: "United States",
  },
  {
    id: "5",
    label: "555 Cedar Lane, Austin, TX 78701",
    street: "555 Cedar Lane",
    city: "Austin",
    state: "TX",
    postalCode: "78701",
    country: "United States",
  },
];

export const AutocompleteAddress = React.forwardRef<
  HTMLDivElement,
  AutocompleteAddressProps
>(
  (
    {
      className,
      value,
      onChange,
      onSelect,
      placeholder = "Start typing an address",
      emptyMessage = "No addresses found",
      ...props
    },
    ref
  ) => {
    const [internalValue, setInternalValue] = React.useState("");
    const [isOpen, setIsOpen] = React.useState(false);
    const [highlightedIndex, setHighlightedIndex] = React.useState(-1);
    const [selectedAddress, setSelectedAddress] = React.useState<AddressResult | null>(null);
    const containerRef = React.useRef<HTMLDivElement>(null);
    const inputRef = React.useRef<HTMLInputElement>(null);

    const searchValue = value !== undefined ? value : internalValue;

    const updateValue = (nextValue: string) => {
      if (value === undefined) {
        setInternalValue(nextValue);
      }
      onChange?.(nextValue);
    };

    React.useEffect(() => {
      const handleClickOutside = (event: MouseEvent) => {
        if (
          containerRef.current &&
          !containerRef.current.contains(event.target as Node)
        ) {
          setIsOpen(false);
          setHighlightedIndex(-1);
        }
      };

      document.addEventListener("mousedown", handleClickOutside);
      return () => document.removeEventListener("mousedown", handleClickOutside);
    }, []);

    const filteredAddresses = searchValue.length > 0
      ? mockAddresses.filter((address) =>
          address.label.toLowerCase().includes(searchValue.toLowerCase())
        )
      : [];

    const handleSelect = (address: AddressResult) => {
      updateValue(address.label);
      setSelectedAddress(address);
      onSelect?.(address);
      setIsOpen(false);
      setHighlightedIndex(-1);
      inputRef.current?.blur();
    };

    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
      if (!isOpen && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
        setIsOpen(true);
        return;
      }

      switch (event.key) {
        case "ArrowDown":
          event.preventDefault();
          setHighlightedIndex((prev) =>
            prev < filteredAddresses.length - 1 ? prev + 1 : 0
          );
          break;
        case "ArrowUp":
          event.preventDefault();
          setHighlightedIndex((prev) =>
            prev > 0 ? prev - 1 : filteredAddresses.length - 1
          );
          break;
        case "Enter":
          event.preventDefault();
          if (filteredAddresses[highlightedIndex]) {
            handleSelect(filteredAddresses[highlightedIndex]);
          }
          break;
        case "Escape":
          setIsOpen(false);
          setHighlightedIndex(-1);
          break;
      }
    };

    const showDropdown = isOpen && searchValue.length > 0;

    return (
      <div
        ref={(node) => {
          containerRef.current = node;
          if (typeof ref === "function") {
            ref(node);
          } else if (ref) {
            ref.current = node;
          }
        }}
        className={cn("w-full max-w-lg", className)}
        {...props}
      >
        <div className="relative">
          <SearchIcon className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
          <input
            ref={inputRef}
            value={searchValue}
            onChange={(event) => {
              updateValue(event.target.value);
              setSelectedAddress(null);
              setIsOpen(true);
              setHighlightedIndex(0);
            }}
            onFocus={() => setIsOpen(true)}
            onKeyDown={handleKeyDown}
            placeholder={placeholder}
            role="combobox"
            aria-expanded={showDropdown}
            aria-controls="address-suggestions"
            aria-autocomplete="list"
            className={cn(
              "w-full rounded-lg border border-border bg-background py-2.5 pl-10 pr-3 text-sm text-foreground",
              "placeholder:text-muted-foreground",
              "transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
            )}
          />
        </div>

        {showDropdown ? (
          <div className="absolute z-20 mt-2 w-full max-w-lg rounded-lg border border-border bg-card p-2 shadow-lg">
            {filteredAddresses.length === 0 ? (
              <div className="px-3 py-2 text-sm text-muted-foreground">
                {emptyMessage}
              </div>
            ) : (
              <ul role="listbox" id="address-suggestions" className="max-h-56 overflow-y-auto">
                {filteredAddresses.map((address, index) => (
                  <li key={address.id}>
                    <button
                      type="button"
                      onMouseDown={(event) => event.preventDefault()}
                      onClick={() => handleSelect(address)}
                      className={cn(
                        "flex w-full items-start gap-2 rounded-md px-3 py-2 text-left text-sm",
                        index === highlightedIndex
                          ? "bg-muted text-foreground"
                          : "text-foreground",
                        "transition focus-visible:outline-none"
                      )}
                    >
                      <LocationIcon className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
                      <span>{address.label}</span>
                    </button>
                  </li>
                ))}
              </ul>
            )}
          </div>
        ) : null}

        {selectedAddress ? (
          <div className="mt-3 rounded-lg border border-border bg-card p-3">
            <div className="mb-2 text-xs font-semibold text-muted-foreground">
              Selected Address
            </div>
            <div className="grid gap-1 text-sm text-foreground">
              <div>
                <span className="font-medium">Street:</span> {selectedAddress.street}
              </div>
              <div>
                <span className="font-medium">City:</span> {selectedAddress.city}
              </div>
              <div>
                <span className="font-medium">State:</span> {selectedAddress.state}
              </div>
              <div>
                <span className="font-medium">Postal Code:</span> {selectedAddress.postalCode}
              </div>
              <div>
                <span className="font-medium">Country:</span> {selectedAddress.country}
              </div>
            </div>
          </div>
        ) : null}
      </div>
    );
  }
);

AutocompleteAddress.displayName = "AutocompleteAddress";
Autocomplete Address

Dependencies

Files

Installation
