@ultraviolet/form 2.0.0-next.6 → 2.0.0-next.8

package/dist/components/CheckboxField/index.js

@@ -20,7 +20,8 @@ const CheckboxField = _ref => {
     helper,
     tooltip,
     'data-testid': dataTestId,
-    value
+    value,
+    shouldUnregister = false
   } = _ref;
   const {
     getError
@@ -33,6 +34,7 @@ const CheckboxField = _ref => {
   } = useController({
     name,
     disabled,
+    shouldUnregister,
     rules: {
       required,
       ...rules

package/dist/components/CheckboxGroupField/index.js

@@ -14,7 +14,8 @@ const CheckboxGroupField = _ref => {
     label = '',
     error: customError,
     name,
-    required = false
+    required = false,
+    shouldUnregister = false
   } = _ref;
   const {
     getError
@@ -25,7 +26,8 @@ const CheckboxGroupField = _ref => {
       error
     }
   } = useController({
-    name
+    name,
+    shouldUnregister
   });
   return jsx(CheckboxGroup, {
     legend: legend,

package/dist/components/DateField/index.js

@@ -24,7 +24,8 @@ const DateField = _ref => {
     autoFocus = false,
     excludeDates,
     selectsRange,
-    'data-testid': dataTestId
+    'data-testid': dataTestId,
+    shouldUnregister = false
   } = _ref;
   const {
     getError
@@ -36,6 +37,7 @@ const DateField = _ref => {
     }
   } = useController({
     name,
+    shouldUnregister,
     rules: {
       ...rules,
       validate: {

package/dist/components/NumberInputField/index.js

@@ -20,7 +20,8 @@ const NumberInputField = _ref => {
     text,
     rules,
     className,
-    label
+    label,
+    shouldUnregister = false
   } = _ref;
   const {
     getError
@@ -32,6 +33,7 @@ const NumberInputField = _ref => {
     }
   } = useController({
     name,
+    shouldUnregister,
     rules: {
       max: maxValue,
       min: minValue,

package/dist/components/RadioField/index.js

@@ -17,7 +17,8 @@ const RadioField = _ref => {
     required,
     value,
     rules,
-    tooltip
+    tooltip,
+    shouldUnregister = false
   } = _ref;
   const {
     getError
@@ -29,6 +30,7 @@ const RadioField = _ref => {
     }
   } = useController({
     name,
+    shouldUnregister,
     rules: {
       required,
       ...rules

package/dist/components/RadioGroupField/index.js

@@ -15,7 +15,8 @@ const RadioGroupField = _ref => {
     label = '',
     error: customError,
     helper,
-    direction
+    direction,
+    shouldUnregister = false
   } = _ref;
   const {
     getError
@@ -27,7 +28,11 @@ const RadioGroupField = _ref => {
     }
   } = useController({
     name,
-    rules
+    shouldUnregister,
+    rules: {
+      required,
+      ...rules
+    }
   });
   return jsx(RadioGroup, {
     className: className,

package/dist/components/SelectInputField/index.js

@@ -40,7 +40,8 @@ const SelectInputField = _ref => {
     rules,
     noTopLabel,
     noOptionsMessage,
-    customStyle
+    customStyle,
+    shouldUnregister = false
   } = _ref;
   const options = useMemo(() => optionsProp || Children.toArray(children).flat().filter(Boolean).map(_ref2 => {
     let {
@@ -81,6 +82,7 @@ const SelectInputField = _ref => {
     }
   } = useController({
     name,
+    shouldUnregister,
     rules: {
       required,
       minLength: minLength || required ? 1 : undefined,

package/dist/components/SelectableCardField/index.js

@@ -18,7 +18,8 @@ const SelectableCardField = _ref => {
     tooltip,
     id,
     label,
-    rules
+    rules,
+    shouldUnregister = false
   } = _ref;
   const {
     field,
@@ -27,6 +28,7 @@ const SelectableCardField = _ref => {
     }
   } = useController({
     name,
+    shouldUnregister,
     rules: {
       required,
       ...rules

package/dist/components/TagInputField/index.js

@@ -12,7 +12,8 @@ const TagInputField = _ref => {
     placeholder,
     required,
     rules,
-    variant
+    variant,
+    shouldUnregister = false
   } = _ref;
   const {
     field
@@ -20,6 +21,7 @@ const TagInputField = _ref => {
     name,
     rules: {
       required,
+      shouldUnregister,
       ...rules
     }
   });

package/dist/components/TextInputField/index.js

@@ -48,7 +48,8 @@ const TextInputField = _ref => {
     validate,
     defaultValue,
     customError,
-    innerRef
+    innerRef,
+    shouldUnregister = false
   } = _ref;
   const {
     getError
@@ -61,6 +62,7 @@ const TextInputField = _ref => {
   } = useController({
     name,
     defaultValue,
+    shouldUnregister,
     rules: {
       required,
       validate: {

package/dist/components/TimeField/index.js

@@ -31,7 +31,8 @@ const TimeField = _ref => {
     isSearchable,
     rules,
     options,
-    'data-testid': dataTestId
+    'data-testid': dataTestId,
+    shouldUnregister = false
   } = _ref;
   const {
     field,
@@ -40,6 +41,7 @@ const TimeField = _ref => {
     }
   } = useController({
     name,
+    shouldUnregister,
     rules: {
       required,
       ...rules

package/dist/components/ToggleField/index.js

@@ -16,12 +16,14 @@ const ToggleField = _ref => {
     labelPosition,
     parse,
     format,
-    'data-testid': dataTestId
+    'data-testid': dataTestId,
+    shouldUnregister = false
   } = _ref;
   const {
     field
   } = useController({
     name,
+    shouldUnregister,
     rules: {
       required,
       ...rules

package/dist/hooks/useField.js

@@ -2,9 +2,10 @@ import { useFormContext, useController } from 'react-hook-form';
 
 /**
  * @deprecated Use [useForm](https://www.react-hook-form.com/api/useform/), [useFormContext](https://www.react-hook-form.com/api/useformcontext/) or [useWatch](https://www.react-hook-form.com/api/usewatch/) to get values. Use [useFormState](https://www.react-hook-form.com/api/useformstate/) to get fields states.
+ *
  * @example
  * ```tsx
- * const Input = () {
+ *  const Input = () {
  *   const username = useWatch({
  *    name: 'username'
  *   })
@@ -14,7 +15,6 @@ import { useFormContext, useController } from 'react-hook-form';
  *   console.log(errors.username)
  * }
  * ```
-
  */
 const useFieldDeprecated = (name, options) => {
   const {

package/dist/hooks/useFormState.js

@@ -2,6 +2,7 @@ import { useFormContext, useWatch } from 'react-hook-form';
 
 /**
  * @deprecated Use [useForm](https://www.react-hook-form.com/api/useform/), [useFormContext](https://www.react-hook-form.com/api/useformcontext/) or [useWatch](https://www.react-hook-form.com/api/usewatch/) to get values. Use [useFormState](https://www.react-hook-form.com/api/useformstate/) to get form states.
+ *
  * @example
  * ```tsx
  * const Input = () {

package/dist/hooks/useOnFieldChange.js

@@ -1,9 +1,6 @@
 import { useRef, useEffect } from 'react';
 import { useFormContext } from 'react-hook-form';
 
-/**
- * @deprecated
- */
 const useOnFieldChange = function (fieldName, callback, enabled) {
   if (enabled === void 0) {
     enabled = true;

package/dist/index.d.ts

@@ -27,8 +27,8 @@ type RequiredErrors = {
 type FormErrors = {
     [key in 'required' | 'min' | 'max' | 'minLength' | 'maxLength' | 'pattern' | 'minDate' | 'maxDate']: RequiredErrors[key];
 };
-type BaseFieldProps<TFieldValues extends FieldValues = FieldValues> = {
-    name: FieldPath<TFieldValues>;
+type BaseFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
+    name: TName;
     required?: boolean;
     /**
      * @deprecated use rules props instead
@@ -38,18 +38,19 @@ type BaseFieldProps<TFieldValues extends FieldValues = FieldValues> = {
     defaultValue?: PathValue<TFieldValues, Path<TFieldValues>>;
     label?: string;
     value?: PathValue<TFieldValues, Path<TFieldValues>>;
-    onChange?: (value?: PathValue<TFieldValues, Path<TFieldValues>>) => void;
+    onChange?: (value?: PathValue<TFieldValues, TName>) => void;
+    shouldUnregister?: UseControllerProps<TFieldValues, TName>['shouldUnregister'];
 };
 
 type CheckboxFieldProps<TFieldValues extends FieldValues> = BaseFieldProps<TFieldValues> & Partial<Pick<ComponentProps<typeof Checkbox>, 'disabled' | 'onBlur' | 'onFocus' | 'progress' | 'size' | 'data-testid' | 'helper' | 'tooltip'>> & {
     className?: string;
     children?: ReactNode;
 };
-declare const CheckboxField: <TFieldValues extends FieldValues>({ name, label, size, progress, disabled, required, className, children, onChange, onBlur, onFocus, rules, helper, tooltip, "data-testid": dataTestId, value, }: CheckboxFieldProps<TFieldValues>) => _emotion_react_jsx_runtime.JSX.Element;
+declare const CheckboxField: <TFieldValues extends FieldValues>({ name, label, size, progress, disabled, required, className, children, onChange, onBlur, onFocus, rules, helper, tooltip, "data-testid": dataTestId, value, shouldUnregister, }: CheckboxFieldProps<TFieldValues>) => _emotion_react_jsx_runtime.JSX.Element;
 
 type CheckboxGroupFieldProps<TFieldValues extends FieldValues> = BaseFieldProps<TFieldValues> & Partial<Pick<ComponentProps<typeof CheckboxGroup>, 'className' | 'helper' | 'required' | 'direction' | 'children' | 'error' | 'legend'>> & Required<Pick<ComponentProps<typeof CheckboxGroup>, 'legend'>>;
 declare const CheckboxGroupField: {
-    <TFieldValues extends FieldValues>({ legend, className, helper, direction, children, onChange, label, error: customError, name, required, }: CheckboxGroupFieldProps<TFieldValues>): _emotion_react_jsx_runtime.JSX.Element;
+    <TFieldValues extends FieldValues>({ legend, className, helper, direction, children, onChange, label, error: customError, name, required, shouldUnregister, }: CheckboxGroupFieldProps<TFieldValues>): _emotion_react_jsx_runtime.JSX.Element;
     Checkbox: ({ onFocus, onBlur, disabled, error, name, value, children, helper, className, autoFocus, "data-testid": dataTestId, }: Omit<({
         error?: react.ReactNode;
         size?: number | undefined;
@@ -85,7 +86,7 @@ type DateFieldProps<TFieldValues extends FieldValues> = BaseFieldProps<TFieldVal
     onFocus?: (value: FocusEvent<HTMLElement>) => void;
     autoFocus?: boolean;
 };
-declare const DateField: <TFieldValues extends FieldValues>({ required, name, label, format, locale, maxDate, minDate, disabled, onChange, onBlur, onFocus, rules, autoFocus, excludeDates, selectsRange, "data-testid": dataTestId, }: DateFieldProps<TFieldValues>) => _emotion_react_jsx_runtime.JSX.Element;
+declare const DateField: <TFieldValues extends FieldValues>({ required, name, label, format, locale, maxDate, minDate, disabled, onChange, onBlur, onFocus, rules, autoFocus, excludeDates, selectsRange, "data-testid": dataTestId, shouldUnregister, }: DateFieldProps<TFieldValues>) => _emotion_react_jsx_runtime.JSX.Element;
 
 type Without<T, U> = {
     [P in Exclude<keyof T, keyof U>]?: never;
@@ -123,7 +124,21 @@ type FormProps<TFormValues extends FieldValues = FieldValues> = {
 } & XOR<[
     {
         /**
-         * @deprecated
+         * @deprecated Use the `methods` prop with [useForm](https://www.react-hook-form.com/api/useform/) instead.
+         *
+         * @example
+         * ```tsx
+         *  const methods = useForm({
+         *    defaultValues,
+         *    mode: 'onChange'
+         *  })
+         *
+         *  return (
+         *    <Form methods={methods} onRawSubmit={handleSubmit} errors={formErrors}>
+         *      // ...
+         *    </Form>
+         *  )
+         * ```
          */
         initialValues?: DefaultValues<TFormValues>;
     },
@@ -136,7 +151,7 @@ declare const Form: <TFormValues extends FieldValues>({ children, methods: metho
 type RadioFieldProps<TFieldValues extends FieldValues> = Omit<BaseFieldProps<TFieldValues>, 'label'> & Partial<Pick<ComponentProps<typeof Radio>, 'disabled' | 'id' | 'onBlur' | 'onFocus' | 'data-testid' | 'tooltip' | 'label'>> & {
     className?: string;
 };
-declare const RadioField: <TFieldValues extends FieldValues>({ className, "data-testid": dataTestId, disabled, id, name, onBlur, label, onChange, onFocus, required, value, rules, tooltip, }: RadioFieldProps<TFieldValues>) => _emotion_react_jsx_runtime.JSX.Element;
+declare const RadioField: <TFieldValues extends FieldValues>({ className, "data-testid": dataTestId, disabled, id, name, onBlur, label, onChange, onFocus, required, value, rules, tooltip, shouldUnregister, }: RadioFieldProps<TFieldValues>) => _emotion_react_jsx_runtime.JSX.Element;
 
 type SelectOption = {
     value: string;
@@ -205,7 +220,7 @@ type SelectInputFieldProps<TFieldValues extends FieldValues = FieldValues> = Omi
     minLength?: number;
 };
 declare const SelectInputField: {
-    <TFieldValues extends FieldValues>({ animation, animationDuration, animationOnChange, children, className, disabled, format: formatProp, id, inputId, isClearable, isLoading, isSearchable, label, maxLength, menuPortalTarget, minLength, multiple, name, onBlur, onChange, onFocus, options: optionsProp, parse: parseProp, placeholder, readOnly, required, rules, noTopLabel, noOptionsMessage, customStyle, }: SelectInputFieldProps<TFieldValues>): _emotion_react_jsx_runtime.JSX.Element;
+    <TFieldValues extends FieldValues>({ animation, animationDuration, animationOnChange, children, className, disabled, format: formatProp, id, inputId, isClearable, isLoading, isSearchable, label, maxLength, menuPortalTarget, minLength, multiple, name, onBlur, onChange, onFocus, options: optionsProp, parse: parseProp, placeholder, readOnly, required, rules, noTopLabel, noOptionsMessage, customStyle, shouldUnregister, }: SelectInputFieldProps<TFieldValues>): _emotion_react_jsx_runtime.JSX.Element;
     Option: (props: Partial<OptionProps<{
         value: string;
         label: ReactNode;
@@ -230,26 +245,23 @@ declare const SelectInputField: {
 type SelectableCardFieldProps<TFieldValues extends FieldValues> = Omit<BaseFieldProps<TFieldValues>, 'label' | 'onChange'> & Partial<Pick<ComponentProps<typeof SelectableCard>, 'disabled' | 'onBlur' | 'onChange' | 'onFocus' | 'showTick' | 'type' | 'id' | 'children' | 'tooltip' | 'label'>> & {
     className?: string;
 };
-declare const SelectableCardField: <TFieldValues extends FieldValues>({ name, value, onChange, showTick, type, disabled, children, className, onFocus, onBlur, required, tooltip, id, label, rules, }: SelectableCardFieldProps<TFieldValues>) => _emotion_react_jsx_runtime.JSX.Element;
+declare const SelectableCardField: <TFieldValues extends FieldValues>({ name, value, onChange, showTick, type, disabled, children, className, onFocus, onBlur, required, tooltip, id, label, rules, shouldUnregister, }: SelectableCardFieldProps<TFieldValues>) => _emotion_react_jsx_runtime.JSX.Element;
 
 type NumberInputValueFieldProps<TFieldValues extends FieldValues> = BaseFieldProps<TFieldValues> & Partial<Pick<ComponentProps<typeof NumberInput>, 'disabled' | 'maxValue' | 'minValue' | 'onMaxCrossed' | 'onMinCrossed' | 'size' | 'step' | 'text' | 'className'>> & {
     onBlur?: FocusEventHandler<HTMLInputElement>;
     onFocus?: FocusEventHandler<HTMLInputElement>;
 };
-declare const NumberInputField: <TFieldValues extends FieldValues>({ disabled, maxValue, minValue, name, onChange, onBlur, onFocus, onMaxCrossed, onMinCrossed, required, size, step, text, rules, className, label, }: NumberInputValueFieldProps<TFieldValues>) => _emotion_react_jsx_runtime.JSX.Element;
+declare const NumberInputField: <TFieldValues extends FieldValues>({ disabled, maxValue, minValue, name, onChange, onBlur, onFocus, onMaxCrossed, onMinCrossed, required, size, step, text, rules, className, label, shouldUnregister, }: NumberInputValueFieldProps<TFieldValues>) => _emotion_react_jsx_runtime.JSX.Element;
 
 declare const SubmitErrorAlert: ({ className }: {
     className?: string | undefined;
 }) => _emotion_react_jsx_runtime.JSX.Element | null;
 
 type TagInputFieldProps<TFieldValues extends FieldValues = FieldValues> = BaseFieldProps<TFieldValues> & Partial<Pick<ComponentProps<typeof TagInput>, 'tags' | 'variant' | 'placeholder' | 'disabled' | 'className' | 'id'>>;
-declare const TagInputField: <TFieldValues extends FieldValues>({ className, disabled, id, name, onChange, placeholder, required, rules, variant, }: TagInputFieldProps<TFieldValues>) => _emotion_react_jsx_runtime.JSX.Element;
+declare const TagInputField: <TFieldValues extends FieldValues>({ className, disabled, id, name, onChange, placeholder, required, rules, variant, shouldUnregister, }: TagInputFieldProps<TFieldValues>) => _emotion_react_jsx_runtime.JSX.Element;
 
-type TextInputFieldProps<TFieldValues extends FieldValues> = BaseFieldProps<TFieldValues> & Partial<Pick<ComponentProps<typeof TextInput>, 'autoCapitalize' | 'autoComplete' | 'autoCorrect' | 'autoFocus' | 'autoSave' | 'cols' | 'disabled' | 'fillAvailable' | 'generated' | 'id' | 'multiline' | 'notice' | 'onBlur' | 'onFocus' | 'onKeyDown' | 'onKeyUp' | 'placeholder' | 'random' | 'readOnly' | 'resizable' | 'rows' | 'type' | 'noTopLabel' | 'unit' | 'valid' | 'size' | 'maxLength' | 'minLength' | 'min' | 'max'>> & {
+type TextInputFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Partial<Pick<ComponentProps<typeof TextInput>, 'autoCapitalize' | 'autoComplete' | 'autoCorrect' | 'autoFocus' | 'autoSave' | 'cols' | 'disabled' | 'fillAvailable' | 'generated' | 'id' | 'multiline' | 'notice' | 'onBlur' | 'onFocus' | 'onKeyDown' | 'onKeyUp' | 'placeholder' | 'random' | 'readOnly' | 'resizable' | 'rows' | 'type' | 'noTopLabel' | 'unit' | 'valid' | 'size' | 'maxLength' | 'minLength' | 'min' | 'max'>> & {
     className?: string;
-    /**
-     * @deprecated Use rules instead
-     */
     regex?: (RegExp | RegExp[])[];
     format?: (value: unknown) => PathValue<TFieldValues, Path<TFieldValues>>;
     parse?: (value: string) => PathValue<TFieldValues, Path<TFieldValues>>;
@@ -257,18 +269,18 @@ type TextInputFieldProps<TFieldValues extends FieldValues> = BaseFieldProps<TFie
     formatOnBlur?: boolean;
     innerRef?: Ref<HTMLInputElement>;
 };
-declare const TextInputField: <TFieldValues extends FieldValues>({ autoCapitalize, autoComplete, autoCorrect, autoFocus, autoSave, className, cols, disabled, fillAvailable, generated, id, label, multiline, name, noTopLabel, notice, onChange, onFocus, onKeyDown, onKeyUp, onBlur, placeholder, random, readOnly, required, resizable, rows, type, unit, size, rules, valid, parse, format, formatOnBlur, regex: regexes, min, max, minLength, maxLength, validate, defaultValue, customError, innerRef, }: TextInputFieldProps<TFieldValues>) => _emotion_react_jsx_runtime.JSX.Element;
+declare const TextInputField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ autoCapitalize, autoComplete, autoCorrect, autoFocus, autoSave, className, cols, disabled, fillAvailable, generated, id, label, multiline, name, noTopLabel, notice, onChange, onFocus, onKeyDown, onKeyUp, onBlur, placeholder, random, readOnly, required, resizable, rows, type, unit, size, rules, valid, parse, format, formatOnBlur, regex: regexes, min, max, minLength, maxLength, validate, defaultValue, customError, innerRef, shouldUnregister, }: TextInputFieldProps<TFieldValues, TName>) => _emotion_react_jsx_runtime.JSX.Element;
 
 type TimeFieldProps<TFieldValues extends FieldValues> = BaseFieldProps<TFieldValues> & Omit<ComponentProps<typeof TimeInput>, 'onChange'> & {
     name: string;
 };
-declare const TimeField: <TFieldValues extends FieldValues>({ required, name, schedule, placeholder, disabled, readOnly, onBlur, onFocus, onChange, isLoading, isClearable, inputId, id, animation, animationDuration, animationOnChange, className, isSearchable, rules, options, "data-testid": dataTestId, }: TimeFieldProps<TFieldValues>) => _emotion_react_jsx_runtime.JSX.Element;
+declare const TimeField: <TFieldValues extends FieldValues>({ required, name, schedule, placeholder, disabled, readOnly, onBlur, onFocus, onChange, isLoading, isClearable, inputId, id, animation, animationDuration, animationOnChange, className, isSearchable, rules, options, "data-testid": dataTestId, shouldUnregister, }: TimeFieldProps<TFieldValues>) => _emotion_react_jsx_runtime.JSX.Element;
 
 type ToggleFieldProps<TFieldValues extends FieldValues> = Omit<BaseFieldProps<TFieldValues>, 'label'> & Pick<ComponentProps<typeof Toggle>, 'disabled' | 'label' | 'onChange' | 'size' | 'tooltip' | 'labelPosition' | 'className' | 'data-testid'> & {
     parse?: (value: boolean) => any;
     format?: (value: any) => boolean;
 };
-declare const ToggleField: <TFieldValues extends FieldValues>({ className, disabled, label, name, onChange, required, size, tooltip, rules, labelPosition, parse, format, "data-testid": dataTestId, }: ToggleFieldProps<TFieldValues>) => _emotion_react_jsx_runtime.JSX.Element;
+declare const ToggleField: <TFieldValues extends FieldValues>({ className, disabled, label, name, onChange, required, size, tooltip, rules, labelPosition, parse, format, "data-testid": dataTestId, shouldUnregister, }: ToggleFieldProps<TFieldValues>) => _emotion_react_jsx_runtime.JSX.Element;
 
 type SubmitProps = {
     children?: ReactNode;
@@ -289,19 +301,19 @@ type RadioGroupFieldProps<TFieldValues extends FieldValues> = BaseFieldProps<TFi
     className?: string;
 };
 declare const RadioGroupField: {
-    <TFieldValues extends FieldValues>({ className, legend, name, onChange, required, rules, children, label, error: customError, helper, direction, }: RadioGroupFieldProps<TFieldValues>): JSX.Element;
+    <TFieldValues extends FieldValues>({ className, legend, name, onChange, required, rules, children, label, error: customError, helper, direction, shouldUnregister, }: RadioGroupFieldProps<TFieldValues>): JSX.Element;
     Radio: ({ onFocus, onBlur, disabled, error, name, value, label, helper, className, autoFocus, onKeyDown, "data-testid": dataTestId, }: {
         value: string | number;
         onBlur?: react.FocusEventHandler<HTMLInputElement> | undefined;
         disabled?: boolean | undefined;
         className?: string | undefined;
         ref?: react.Ref<HTMLInputElement> | undefined;
-        label?: react.ReactNode;
         onFocus?: react.FocusEventHandler<HTMLInputElement> | undefined;
         name?: string | undefined;
         autoFocus?: boolean | undefined;
         id?: string | undefined;
         'aria-label'?: string | undefined;
+        label?: react.ReactNode;
         'data-testid'?: string | undefined;
         helper?: react.ReactNode;
         tooltip?: string | undefined;
@@ -323,9 +335,6 @@ declare const ErrorProvider: ({ children, errors }: ErrorProviderProps) => _emot
 declare const useErrors: () => ErrorContextValue;
 
 type CallbackFn<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = (value: FieldPathValue<TFieldValues, TFieldName>, values: DeepPartial<TFieldValues>) => void | Promise<void>;
-/**
- * @deprecated
- */
 declare const useOnFieldChange: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>>(fieldName: TFieldName, callback: CallbackFn<TFieldValues, TFieldName>, enabled?: boolean) => void;
 
 type UseFormStateParams = {
@@ -333,6 +342,7 @@ type UseFormStateParams = {
 };
 /**
  * @deprecated Use [useForm](https://www.react-hook-form.com/api/useform/), [useFormContext](https://www.react-hook-form.com/api/useformcontext/) or [useWatch](https://www.react-hook-form.com/api/usewatch/) to get values. Use [useFormState](https://www.react-hook-form.com/api/useformstate/) to get form states.
+ *
  * @example
  * ```tsx
  * const Input = () {
@@ -371,9 +381,10 @@ type Options$1<TFieldValues extends FieldValues> = {
 };
 /**
  * @deprecated Use [useForm](https://www.react-hook-form.com/api/useform/), [useFormContext](https://www.react-hook-form.com/api/useformcontext/) or [useWatch](https://www.react-hook-form.com/api/usewatch/) to get values. Use [useFormState](https://www.react-hook-form.com/api/useformstate/) to get fields states.
+ *
  * @example
  * ```tsx
- * const Input = () {
+ *  const Input = () {
  *   const username = useWatch({
  *    name: 'username'
  *   })
@@ -383,7 +394,6 @@ type Options$1<TFieldValues extends FieldValues> = {
  *   console.log(errors.username)
  * }
  * ```
-
  */
 declare const useFieldDeprecated: <T, TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(name: TFieldName, options?: Options$1<TFieldValues> | undefined) => {
     input: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/form",
-  "version": "2.0.0-next.6",
+  "version": "2.0.0-next.8",
   "description": "Ultraviolet Form",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -39,21 +39,21 @@
     "react-hook-form": "7.47.0"
   },
   "devDependencies": {
-    "@babel/core": "7.23.3",
+    "@babel/core": "7.23.5",
     "@types/final-form-focus": "1.1.7",
-    "@types/react": "18.2.37",
-    "@types/react-dom": "18.2.15",
+    "@types/react": "18.2.43",
+    "@types/react-dom": "18.2.17",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
   "dependencies": {
-    "@babel/runtime": "7.23.4",
+    "@babel/runtime": "7.23.5",
     "@emotion/babel-plugin": "11.11.0",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "react-select": "5.8.0",
     "react-hook-form": "^7.47.0",
-    "@ultraviolet/ui": "1.27.3"
+    "@ultraviolet/ui": "1.28.0"
   },
   "scripts": {
     "build": "rollup -c ../../rollup.config.mjs"