{"name":"rhf-select-field","title":"RHF Select Field","description":"Select field with React Hook Form integration.","type":"registry:ui","docs":"/components/rhf-select-field","categories":["forms"],"registryDependencies":["https://pb-ui-five.vercel.app/registry/rhf-base-controller","https://pb-ui-five.vercel.app/registry/select"],"dependencies":["react-hook-form"],"files":[{"path":"components/ui/rhf-inputs/select-field.tsx","target":"components/ui/rhf-inputs/select-field.tsx","type":"registry:ui","content":"import { ReactNode, RefAttributes } from \"react\";\nimport { FieldValues } from \"react-hook-form\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"../select\";\nimport { BaseController, BaseControllerProps } from \"./base-controller\";\n\nconst EMPTY_SELECT_VALUE = \"\";\n\ntype SelectOption = {\n  value: string;\n  label: string;\n  leading?: ReactNode;\n};\n\ntype FieldSelectProps<T extends FieldValues> = {\n  placeholder?: string;\n  onValueChange?: (value: string | null) => void;\n  selectProps?: React.ComponentProps<typeof Select>;\n  triggerProps?: React.ComponentProps<typeof SelectTrigger> &\n    RefAttributes<HTMLButtonElement> & {\n      size?: \"sm\" | \"default\";\n    };\n} & Omit<BaseControllerProps<T>, \"children\"> &\n  (\n    | {\n        options: SelectOption[];\n        children?: never;\n      }\n    | {\n        options?: never;\n        children: ReactNode;\n      }\n  );\n\nexport function SelectField<T extends FieldValues>({\n  control,\n  name,\n  label,\n  description,\n  disableFieldError = false,\n  options,\n  placeholder,\n  onValueChange,\n  triggerProps,\n  children,\n  required,\n  ...selectProps\n}: FieldSelectProps<T>) {\n  return (\n    <BaseController\n      control={control}\n      name={name}\n      label={label}\n      required={required}\n      description={description}\n      disableFieldError={disableFieldError}\n    >\n      {({ field, fieldState, ariaDescribedBy }) => {\n        return (\n          <Select\n            value={field.value ?? EMPTY_SELECT_VALUE}\n            onValueChange={(value) => {\n              field.onChange(value);\n              onValueChange?.(value);\n            }}\n            {...selectProps}\n          >\n            <SelectTrigger\n              id={field.name}\n              aria-required={required}\n              aria-invalid={!!fieldState.error}\n              aria-describedby={ariaDescribedBy}\n              data-invalid={!!fieldState.error}\n              {...triggerProps}\n            >\n              {placeholder &&\n              (field.value === EMPTY_SELECT_VALUE ||\n                field.value === undefined ||\n                field.value === null) ? (\n                <SelectValue>{placeholder}</SelectValue>\n              ) : (\n                <SelectValue />\n              )}\n            </SelectTrigger>\n            <SelectContent>\n              {placeholder && (\n                <SelectItem value={null} key=\"placeholder\">\n                  {placeholder}\n                </SelectItem>\n              )}\n              {options\n                ? options.map((option) => {\n                    return (\n                      <SelectItem key={option.value} value={option.value}>\n                        {option.leading ? (\n                          <span className=\"flex items-center gap-2\">\n                            {option.leading}\n                            <span>{option.label}</span>\n                          </span>\n                        ) : (\n                          option.label\n                        )}\n                      </SelectItem>\n                    );\n                  })\n                : children}\n            </SelectContent>\n          </Select>\n        );\n      }}\n    </BaseController>\n  );\n}\n"}]}