diff --git a/components/ui/form.tsx b/components/ui/form.tsx index b0d5561f..c93555c2 100644 --- a/components/ui/form.tsx +++ b/components/ui/form.tsx @@ -1,7 +1,17 @@ +'use client'; + import * as React from 'react'; import * as LabelPrimitive from '@radix-ui/react-label'; import { Slot } from '@radix-ui/react-slot'; -import { Controller, ControllerProps, FieldPath, FieldValues, FormProvider, useFormContext } from 'react-hook-form'; +import { + Controller, + FormProvider, + useFormContext, + useFormState, + type ControllerProps, + type FieldPath, + type FieldValues, +} from 'react-hook-form'; import { cn } from '@/lib/utils'; import { Label } from '@/components/ui/label'; @@ -33,8 +43,8 @@ const FormField = < const useFormField = () => { const fieldContext = React.useContext(FormFieldContext); const itemContext = React.useContext(FormItemContext); - const { getFieldState, formState } = useFormContext(); - + const { getFieldState } = useFormContext(); + const formState = useFormState({ name: fieldContext.name }); const fieldState = getFieldState(fieldContext.name, formState); if (!fieldContext) { @@ -59,77 +69,70 @@ type FormItemContextValue = { const FormItemContext = React.createContext({} as FormItemContextValue); -const FormItem = React.forwardRef>( - ({ className, ...props }, ref) => { - const id = React.useId(); +function FormItem({ className, ...props }: React.ComponentProps<'div'>) { + const id = React.useId(); - return ( - -
- - ); - } -); -FormItem.displayName = 'FormItem'; + return ( + +
+ + ); +} -const FormLabel = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => { +function FormLabel({ className, ...props }: React.ComponentProps) { const { error, formItemId } = useFormField(); - return