@saas-ui/forms 1.1.0 → 1.2.0

package/src/index.ts

@@ -12,6 +12,115 @@ export * from './display-if'
 export * from './step-form'
 export * from './use-step-form'
 export * from './field-resolver'
+export * from './watch-field'
 export * from '@saas-ui/input-right-button'
 
-export type { FieldErrors } from 'react-hook-form'
+export type {
+  BatchFieldArrayUpdate,
+  ChangeHandler,
+  Control,
+  ControllerFieldState,
+  ControllerProps,
+  ControllerRenderProps,
+  CriteriaMode,
+  CustomElement,
+  DeepMap,
+  DeepPartial,
+  DeepPartialSkipArrayKey,
+  DefaultValues,
+  DelayCallback,
+  EmptyObject,
+  ErrorOption,
+  EventType,
+  Field as FieldDef,
+  FieldArray,
+  FieldArrayMethodProps,
+  FieldArrayWithId,
+  FieldElement,
+  FieldError,
+  FieldErrors,
+  FieldName,
+  FieldNamesMarkedBoolean,
+  FieldRefs,
+  FieldValue,
+  FieldValues,
+  FormProviderProps,
+  FormState,
+  FormStateProxy,
+  FormStateSubjectRef,
+  GetIsDirty,
+  InternalFieldErrors,
+  InternalFieldName,
+  InternalNameSet,
+  IsAny,
+  IsFlatObject,
+  KeepStateOptions,
+  LiteralUnion,
+  Message,
+  Mode,
+  MultipleFieldErrors,
+  Names,
+  NativeFieldValue,
+  NestedValue,
+  NonUndefined,
+  Noop,
+  Primitive,
+  ReadFormState,
+  Ref,
+  RefCallBack,
+  RegisterOptions,
+  Resolver,
+  ResolverError,
+  ResolverOptions,
+  ResolverResult,
+  ResolverSuccess,
+  SetFieldValue,
+  SetValueConfig,
+  Subjects,
+  SubmitErrorHandler,
+  SubmitHandler,
+  TriggerConfig,
+  UnpackNestedValue,
+  UseControllerProps,
+  UseControllerReturn,
+  UseFieldArrayProps,
+  UseFieldArrayReturn,
+  UseFormClearErrors,
+  UseFormGetValues,
+  UseFormHandleSubmit,
+  UseFormProps,
+  UseFormRegister,
+  UseFormRegisterReturn,
+  UseFormReset,
+  UseFormResetField,
+  UseFormReturn,
+  UseFormSetError,
+  UseFormSetFocus,
+  UseFormSetValue,
+  UseFormStateProps,
+  UseFormStateReturn,
+  UseFormTrigger,
+  UseFormUnregister,
+  UseFormWatch,
+  UseWatchProps,
+  Validate,
+  ValidateResult,
+  ValidationMode,
+  ValidationRule,
+  ValidationValue,
+  ValidationValueMessage,
+  WatchInternal,
+  WatchObserver,
+} from 'react-hook-form'
+
+export {
+  appendErrors,
+  useController,
+  useFieldArray,
+  useForm,
+  useFormContext,
+  useFormState,
+  useWatch,
+  Controller,
+  FormProvider,
+} from 'react-hook-form'

package/src/watch-field.tsx

@@ -0,0 +1,39 @@
+import {
+  FieldValues,
+  useFormContext,
+  UseFormReturn,
+  useWatch,
+} from 'react-hook-form'
+
+export interface WatchFieldProps<
+  Value = unknown,
+  TFieldValues extends FieldValues = FieldValues
+> {
+  name: string
+  defaultValue?: Value
+  isDisabled?: boolean
+  isExact?: boolean
+  children: (
+    value: Value,
+    form: UseFormReturn<TFieldValues>
+  ) => React.ReactElement | void
+}
+
+export const WatchField = <
+  Value = unknown,
+  TFieldValues extends FieldValues = FieldValues
+>(
+  props: WatchFieldProps<Value, TFieldValues>
+) => {
+  const { name, defaultValue, isDisabled, isExact } = props
+  const form = useFormContext<TFieldValues>()
+
+  const field = useWatch({
+    name,
+    defaultValue,
+    disabled: isDisabled,
+    exact: isExact,
+  })
+
+  return props.children(field, form) || null
+}