Uecko_ERP/packages/rdx-ui/src/components/form/select-field.tsx

import {
  Field,
  FieldDescription,
  FieldError,
  FormControl,
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@repo/shadcn-ui/components";
import { cn } from "@repo/shadcn-ui/lib/utils";
import React from "react";
import { Controller, type FieldPath, type FieldValues, useFormContext } from "react-hook-form";

import { FormFieldLabel } from "./form-field-label.tsx";

interface SelectFieldItem {
  value: string;
  label: string;
}

type SelectFieldProps<TFormValues extends FieldValues> = {
  name: FieldPath<TFormValues>;

  label?: string;
  description?: string;

  disabled?: boolean;
  required?: boolean;
  readOnly?: boolean;

  placeholder?: string;
  items: SelectFieldItem[];

  orientation?: "vertical" | "horizontal" | "responsive";

  className?: string;
  inputClassName?: string;
};

export function SelectField<TFormValues extends FieldValues>({
  name,

  label,
  description,

  disabled = false,
  required = false,
  readOnly = false,

  placeholder,
  items,

  orientation = "vertical",

  className,
  inputClassName,
}: SelectFieldProps<TFormValues>) {
  const triggerId = React.useId();
  const { control, formState } = useFormContext<TFormValues>();
  const isDisabled = Boolean(disabled || readOnly || formState.isSubmitting);

  return (
    <Controller
      control={control}
      name={name}
      render={({ field, fieldState }) => {
        return (
          <Field
            className={cn("gap-1", className)}
            data-invalid={fieldState.invalid}
            orientation={orientation}
          >
            {label ? (
              <FormFieldLabel htmlFor={triggerId} required={required}>
                {label}
              </FormFieldLabel>
            ) : null}

            <Select
              disabled={isDisabled}
              onValueChange={field.onChange}
              value={field.value ?? undefined}
            >
              <FormControl>
                <SelectTrigger
                  aria-invalid={fieldState.invalid}
                  aria-required={required}
                  className={cn(
                    "bg-muted/50 font-medium",
                    "hover:border-ring hover:ring-ring/20 hover:ring-[3px]",
                    "focus-visible:border-ring focus-visible:ring-ring/60 focus-visible:ring-[3px]",
                    "placeholder:text-muted-foreground/50",
                    inputClassName
                  )}
                  id={triggerId}
                >
                  <SelectValue
                    className={"placeholder:font-normal placeholder:italic"}
                    placeholder={placeholder}
                  />
                </SelectTrigger>
              </FormControl>
              <SelectContent>
                {items.map((item) => (
                  <SelectItem key={`key-${item.value}`} value={item.value}>
                    {item.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>

            {description ? (
              <FieldDescription>{description}</FieldDescription>
            ) : (
              <div aria-hidden="true" className="min-h-5" />
            )}
            <FieldError errors={[fieldState.error]} />
          </Field>
        );
      }}
    />
  );
}