@ultraviolet/form 2.13.2 → 2.13.4

package/dist/components/TextInputField/index.js

@@ -1,11 +1,7 @@
-import { TextInput } from '@ultraviolet/ui';
-import { useController } from 'react-hook-form';
-import { jsx } from '@emotion/react/jsx-runtime';
-import { useErrors } from '../../providers/ErrorContext/index.js';
-
-/**
- * @deprecated This component is deprecated, please use `TextInputFieldV2` instead
- */
+import { jsx } from "@emotion/react/jsx-runtime";
+import { TextInput } from "@ultraviolet/ui";
+import { useController } from "react-hook-form";
+import { useErrors } from "../../providers/ErrorContext/index.js";
 const TextInputField = ({
   autoCapitalize,
   autoComplete,
@@ -18,7 +14,7 @@ const TextInputField = ({
   fillAvailable,
   generated,
   id,
-  label = '',
+  label = "",
   multiline,
   name,
   noTopLabel,
@@ -52,7 +48,7 @@ const TextInputField = ({
   customError,
   innerRef,
   shouldUnregister = false,
-  'data-testid': dataTestId
+  "data-testid": dataTestId
 }) => {
   const {
     getError
@@ -69,9 +65,9 @@ const TextInputField = ({
     rules: {
       required,
       validate: {
-        ...(regexes ? {
-          pattern: value => regexes.every(regex => value === undefined || value === '' || (Array.isArray(regex) ? regex.some(regexOr => regexOr.test(value)) : regex.test(value)))
-        } : {}),
+        ...regexes ? {
+          pattern: (value) => regexes.every((regex) => value === void 0 || value === "" || (Array.isArray(regex) ? regex.some((regexOr) => regexOr.test(value)) : regex.test(value)))
+        } : {},
         ...validate
       },
       minLength,
@@ -87,67 +83,32 @@ const TextInputField = ({
     }
     return field.value;
   };
-  return jsx(TextInput, {
-    name: field.name,
-    autoCapitalize: autoCapitalize,
-    autoComplete: autoComplete,
-    autoCorrect: autoCorrect,
-    autoFocus: autoFocus,
-    autoSave: autoSave,
-    className: className,
-    cols: cols,
-    disabled: disabled,
-    error: customError ?? getError({
-      regex: regexes,
-      minLength,
-      maxLength,
-      label,
-      min,
-      max,
-      value: field.value
-    }, error),
-    fillAvailable: fillAvailable,
-    generated: generated,
-    id: id,
-    label: label,
-    multiline: multiline,
-    notice: notice,
-    required: required,
-    onBlur: event => {
-      field.onBlur();
-      onBlur?.(event);
-      if (formatOnBlur && format) {
-        field.onChange(format(field.value));
-      }
-    },
-    onChange: event => {
-      if (parse) {
-        field.onChange(parse(event));
-        onChange?.(parse(event));
-      } else {
-        field.onChange(event);
-        onChange?.(event);
-      }
-    },
-    onFocus: event => {
-      onFocus?.(event);
-    },
-    onKeyUp: onKeyUp,
-    onKeyDown: onKeyDown,
-    placeholder: placeholder,
-    random: random,
-    readOnly: readOnly,
-    resizable: resizable,
-    rows: rows,
-    type: type,
-    noTopLabel: noTopLabel,
-    unit: unit,
-    valid: valid,
-    size: size,
-    value: transformedValue(),
-    ref: innerRef,
-    "data-testid": dataTestId
-  });
+  return /* @__PURE__ */ jsx(TextInput, { name: field.name, autoCapitalize, autoComplete, autoCorrect, autoFocus, autoSave, className, cols, disabled, error: customError ?? getError({
+    regex: regexes,
+    minLength,
+    maxLength,
+    label,
+    min,
+    max,
+    value: field.value
+  }, error), fillAvailable, generated, id, label, multiline, notice, required, onBlur: (event) => {
+    field.onBlur();
+    onBlur?.(event);
+    if (formatOnBlur && format) {
+      field.onChange(format(field.value));
+    }
+  }, onChange: (event) => {
+    if (parse) {
+      field.onChange(parse(event));
+      onChange?.(parse(event));
+    } else {
+      field.onChange(event);
+      onChange?.(event);
+    }
+  }, onFocus: (event) => {
+    onFocus?.(event);
+  }, onKeyUp, onKeyDown, placeholder, random, readOnly, resizable, rows, type, noTopLabel, unit, valid, size, value: transformedValue(), ref: innerRef, "data-testid": dataTestId });
+};
+export {
+  TextInputField
 };
-
-export { TextInputField };

package/dist/components/TextInputFieldV2/index.d.ts

@@ -0,0 +1,12 @@
+import { TextInputV2 } from '@ultraviolet/ui';
+import type { ComponentProps } from 'react';
+import type { FieldPath, FieldValues } from 'react-hook-form';
+import type { BaseFieldProps } from '../../types';
+type TextInputFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Omit<ComponentProps<typeof TextInputV2>, 'value' | 'error' | 'name' | 'onChange'> & {
+    regex?: (RegExp | RegExp[])[];
+};
+/**
+ * This component offers a form field based on Ultraviolet UI TextInputV2 component
+ */
+export declare const TextInputField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ validate, regex: regexes, id, className, tabIndex, onChange, placeholder, disabled, readOnly, success, helper, tooltip, label, autoFocus, required, "data-testid": dataTestId, name, onFocus, onBlur, clearable, labelDescription, type, prefix, suffix, size, loading, onRandomize, minLength, maxLength, "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel, autoComplete, }: TextInputFieldProps<TFieldValues, TName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TextInputFieldV2/index.js

@@ -1,11 +1,7 @@
-import { TextInputV2 } from '@ultraviolet/ui';
-import { useController } from 'react-hook-form';
-import { jsx } from '@emotion/react/jsx-runtime';
-import { useErrors } from '../../providers/ErrorContext/index.js';
-
-/**
- * This component offers a form field based on Ultraviolet UI TextInputV2 component
- */
+import { jsx } from "@emotion/react/jsx-runtime";
+import { TextInputV2 } from "@ultraviolet/ui";
+import { useController } from "react-hook-form";
+import { useErrors } from "../../providers/ErrorContext/index.js";
 const TextInputField = ({
   validate,
   regex: regexes,
@@ -22,22 +18,22 @@ const TextInputField = ({
   label,
   autoFocus,
   required = false,
-  'data-testid': dataTestId,
+  "data-testid": dataTestId,
   name,
   onFocus,
   onBlur,
   clearable = false,
   labelDescription,
-  type = 'text',
+  type = "text",
   prefix,
   suffix,
-  size = 'large',
+  size = "large",
   loading,
   onRandomize,
   minLength,
   maxLength,
-  'aria-labelledby': ariaLabelledBy,
-  'aria-label': ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-label": ariaLabel,
   autoComplete
 }) => {
   const {
@@ -53,63 +49,31 @@ const TextInputField = ({
     rules: {
       required,
       validate: {
-        ...(regexes ? {
-          pattern: value => regexes.every(regex => value === undefined || value === '' || (Array.isArray(regex) ? regex.some(regexOr => regexOr.test(value)) : regex.test(value)))
-        } : {}),
+        ...regexes ? {
+          pattern: (value) => regexes.every((regex) => value === void 0 || value === "" || (Array.isArray(regex) ? regex.some((regexOr) => regexOr.test(value)) : regex.test(value)))
+        } : {},
         ...validate
       },
       minLength,
       maxLength
     }
   });
-  return jsx(TextInputV2, {
-    autoFocus: autoFocus,
-    className: className,
-    clearable: clearable,
-    "data-testid": dataTestId,
-    disabled: disabled,
-    error: getError({
-      regex: regexes,
-      // minLength,
-      // maxLength,
-      label: label ?? '',
-      value: field.value
-    }, error),
-    helper: helper,
-    label: label,
-    loading: loading,
-    labelDescription: labelDescription,
-    minLength: minLength,
-    maxLength: maxLength,
-    name: name,
-    onBlur: event => {
-      onBlur?.(event);
-      field.onBlur();
-    },
-    onChange: event => {
-      field.onChange(event);
-      onChange?.(event);
-    },
-    onFocus: event => {
-      onFocus?.(event);
-    },
-    placeholder: placeholder,
-    readOnly: readOnly,
-    required: required,
-    success: success,
-    tabIndex: tabIndex,
-    tooltip: tooltip,
-    type: type,
-    value: field.value,
-    id: id,
-    prefix: prefix,
-    suffix: suffix,
-    size: size,
-    onRandomize: onRandomize,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    autoComplete: autoComplete
-  });
+  return /* @__PURE__ */ jsx(TextInputV2, { autoFocus, className, clearable, "data-testid": dataTestId, disabled, error: getError({
+    regex: regexes,
+    // minLength,
+    // maxLength,
+    label: label ?? "",
+    value: field.value
+  }, error), helper, label, loading, labelDescription, minLength, maxLength, name, onBlur: (event) => {
+    onBlur?.(event);
+    field.onBlur();
+  }, onChange: (event) => {
+    field.onChange(event);
+    onChange?.(event);
+  }, onFocus: (event) => {
+    onFocus?.(event);
+  }, placeholder, readOnly, required, success, tabIndex, tooltip, type, value: field.value, id, prefix, suffix, size, onRandomize, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, autoComplete });
+};
+export {
+  TextInputField
 };
-
-export { TextInputField };

package/dist/components/TimeField/index.d.ts

@@ -0,0 +1,9 @@
+import { TimeInput } from '@ultraviolet/ui';
+import type { ComponentProps } from 'react';
+import type { FieldPath, FieldValues } from 'react-hook-form';
+import type { BaseFieldProps } from '../../types';
+type TimeFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Omit<ComponentProps<typeof TimeInput>, 'onChange'> & {
+    name: string;
+};
+export declare const TimeField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ required, name, schedule, placeholder, disabled, readOnly, onBlur, onFocus, onChange, isLoading, isClearable, inputId, id, animation, animationDuration, animationOnChange, className, isSearchable, rules, options, "data-testid": dataTestId, shouldUnregister, noTopLabel, }: TimeFieldProps<TFieldValues, TName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TimeField/index.js

@@ -1,9 +1,8 @@
-import { TimeInput } from '@ultraviolet/ui';
-import { useController } from 'react-hook-form';
-import { jsx } from '@emotion/react/jsx-runtime';
-
-const parseTime = date => {
-  const timeStr = date && typeof date !== 'string' ? date.toLocaleTimeString().slice(0, -3) : '';
+import { jsx } from "@emotion/react/jsx-runtime";
+import { TimeInput } from "@ultraviolet/ui";
+import { useController } from "react-hook-form";
+const parseTime = (date) => {
+  const timeStr = date && typeof date !== "string" ? date.toLocaleTimeString().slice(0, -3) : "";
   return {
     label: timeStr,
     value: timeStr
@@ -30,7 +29,7 @@ const TimeField = ({
   isSearchable,
   rules,
   options,
-  'data-testid': dataTestId,
+  "data-testid": dataTestId,
   shouldUnregister = false,
   noTopLabel
 }) => {
@@ -47,43 +46,21 @@ const TimeField = ({
       ...rules
     }
   });
-  return jsx(TimeInput, {
-    name: field.name,
-    placeholder: placeholder,
-    schedule: schedule,
-    required: required,
-    value: parseTime(field.value),
-    onChange: val => {
-      if (!val) return;
-      onChange?.(val);
-      const [hours, minutes] = val.value.split(':');
-      const date = field.value ? new Date(field.value) : new Date();
-      date.setHours(Number(hours), Number(minutes), 0);
-      field.onChange(date);
-    },
-    onBlur: event => {
-      field.onBlur();
-      onBlur?.(event);
-    },
-    onFocus: event => {
-      onFocus?.(event);
-    },
-    error: error?.message,
-    disabled: disabled,
-    readOnly: readOnly,
-    animation: animation,
-    animationDuration: animationDuration,
-    animationOnChange: animationOnChange,
-    className: className,
-    isLoading: isLoading,
-    isClearable: isClearable,
-    isSearchable: isSearchable,
-    inputId: inputId,
-    id: id,
-    options: options,
-    "data-testid": dataTestId,
-    noTopLabel: noTopLabel
-  });
+  return /* @__PURE__ */ jsx(TimeInput, { name: field.name, placeholder, schedule, required, value: parseTime(field.value), onChange: (val) => {
+    if (!val)
+      return;
+    onChange?.(val);
+    const [hours, minutes] = val.value.split(":");
+    const date = field.value ? new Date(field.value) : /* @__PURE__ */ new Date();
+    date.setHours(Number(hours), Number(minutes), 0);
+    field.onChange(date);
+  }, onBlur: (event) => {
+    field.onBlur();
+    onBlur?.(event);
+  }, onFocus: (event) => {
+    onFocus?.(event);
+  }, error: error?.message, disabled, readOnly, animation, animationDuration, animationOnChange, className, isLoading, isClearable, isSearchable, inputId, id, options, "data-testid": dataTestId, noTopLabel });
+};
+export {
+  TimeField
 };
-
-export { TimeField };

package/dist/components/ToggleField/index.d.ts

@@ -0,0 +1,10 @@
+import { Toggle } from '@ultraviolet/ui';
+import type { ComponentProps } from 'react';
+import type { FieldPath, FieldValues } from 'react-hook-form';
+import type { BaseFieldProps } from '../../types';
+type ToggleFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TName>, 'label'> & Pick<ComponentProps<typeof Toggle>, 'disabled' | 'label' | 'onChange' | 'size' | 'tooltip' | 'labelPosition' | 'className' | 'data-testid'> & {
+    parse?: (value: boolean) => any;
+    format?: (value: any) => boolean;
+};
+export declare const ToggleField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ className, disabled, label, name, onChange, required, size, tooltip, rules, labelPosition, parse, format, "data-testid": dataTestId, shouldUnregister, }: ToggleFieldProps<TFieldValues, TName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ToggleField/index.js

@@ -1,7 +1,6 @@
-import { Toggle } from '@ultraviolet/ui';
-import { useController } from 'react-hook-form';
-import { jsx } from '@emotion/react/jsx-runtime';
-
+import { jsx } from "@emotion/react/jsx-runtime";
+import { Toggle } from "@ultraviolet/ui";
+import { useController } from "react-hook-form";
 const ToggleField = ({
   className,
   disabled,
@@ -15,7 +14,7 @@ const ToggleField = ({
   labelPosition,
   parse,
   format,
-  'data-testid': dataTestId,
+  "data-testid": dataTestId,
   shouldUnregister = false
 }) => {
   const {
@@ -34,27 +33,15 @@ const ToggleField = ({
     }
     return field.value;
   };
-  return jsx(Toggle, {
-    name: field.name,
-    ref: field.ref,
-    checked: transformedValue(),
-    tooltip: tooltip,
-    onChange: event => {
-      if (parse) {
-        field.onChange(parse(event.target.checked));
-      } else {
-        field.onChange(event);
-      }
-      onChange?.(event);
-    },
-    label: label,
-    size: size,
-    disabled: disabled,
-    labelPosition: labelPosition,
-    className: className,
-    required: required,
-    "data-testid": dataTestId
-  });
+  return /* @__PURE__ */ jsx(Toggle, { name: field.name, ref: field.ref, checked: transformedValue(), tooltip, onChange: (event) => {
+    if (parse) {
+      field.onChange(parse(event.target.checked));
+    } else {
+      field.onChange(event);
+    }
+    onChange?.(event);
+  }, label, size, disabled, labelPosition, className, required, "data-testid": dataTestId });
+};
+export {
+  ToggleField
 };
-
-export { ToggleField };

package/dist/components/ToggleGroupField/index.d.ts

@@ -0,0 +1,26 @@
+import { ToggleGroup } from '@ultraviolet/ui';
+import type { ComponentProps } from 'react';
+import type { FieldPath, FieldValues } from 'react-hook-form';
+import type { BaseFieldProps } from '../../types';
+type ToggleGroupFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Partial<Pick<ComponentProps<typeof ToggleGroup>, 'className' | 'helper' | 'direction' | 'children' | 'error' | 'legend'>> & Required<Pick<ComponentProps<typeof ToggleGroup>, 'legend' | 'name'>>;
+export declare const ToggleGroupField: {
+    <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ legend, className, helper, direction, children, onChange, label, error: customError, name, required, shouldUnregister, }: ToggleGroupFieldProps<TFieldValues, TName>): import("@emotion/react/jsx-runtime").JSX.Element;
+    Toggle: ({ disabled, name, value, label, helper, className, "data-testid": dataTestId, }: Omit<{
+        id?: string | undefined;
+        checked?: boolean | undefined;
+        name: string;
+        tooltip?: string | undefined;
+        onChange?: import("react").ChangeEventHandler<HTMLInputElement> | undefined;
+        size?: "small" | "large" | undefined;
+        labelPosition?: "left" | "right" | undefined;
+        label?: import("react").ReactNode;
+        helper?: import("react").ReactNode;
+        disabled?: boolean | undefined;
+        className?: string | undefined;
+        required?: boolean | undefined;
+        'data-testid'?: string | undefined;
+    } & Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "value"> & import("react").RefAttributes<HTMLInputElement>, "required" | "onChange" | "checked"> & {
+        value: string;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+};
+export {};

package/dist/components/index.d.ts

@@ -0,0 +1,22 @@
+export { CheckboxField } from './CheckboxField';
+export { CheckboxGroupField } from './CheckboxGroupField';
+export { DateField } from './DateField';
+export type { FormProps } from './Form';
+export { Form } from './Form';
+export { RadioField } from './RadioField';
+export { SelectInputField } from './SelectInputField';
+export { SelectableCardField } from './SelectableCardField';
+export { NumberInputField } from './NumberInputField';
+export { NumberInputFieldV2 } from './NumberInputFieldV2';
+export { SubmitErrorAlert } from './SubmitErrorAlert';
+export { TagInputField } from './TagInputField';
+export { TextAreaField } from './TextAreaField';
+export { TextInputField } from './TextInputField';
+export { TextInputField as TextInputFieldV2 } from './TextInputFieldV2';
+export { TimeField } from './TimeField';
+export { ToggleField } from './ToggleField';
+export { Submit } from './Submit';
+export { RadioGroupField } from './RadioGroupField';
+export { KeyValueField } from './KeyValueField';
+export { SelectableCardGroupField } from './SelectableCardGroupField';
+export { SelectInputFieldV2 } from './SelectInputFieldV2';

package/dist/constants.d.ts

@@ -0,0 +1 @@
+export declare const FORM_ERROR = "FINAL_FORM/form-error";

package/dist/constants.js

@@ -1,3 +1,4 @@
-const FORM_ERROR = 'FINAL_FORM/form-error';
-
-export { FORM_ERROR };
+const FORM_ERROR = "FINAL_FORM/form-error";
+export {
+  FORM_ERROR
+};

package/dist/hooks/index.d.ts

@@ -0,0 +1,5 @@
+export { useOnFieldChange } from './useOnFieldChange';
+export { useFormStateDeprecated } from './useFormState';
+export { useFieldDeprecated } from './useField';
+export { useFormDeprecated } from './useForm';
+export { useFieldArrayDeprecated } from './useFieldArray';

package/dist/hooks/useField.d.ts

@@ -0,0 +1,34 @@
+import type { FieldPath, FieldPathValue, FieldValues, Path, Validate } from 'react-hook-form';
+type Options<TFieldValues extends FieldValues> = {
+    subscription?: Record<string, boolean>;
+    validate?: Validate<FieldPathValue<TFieldValues, Path<TFieldValues>>, TFieldValues>;
+};
+/**
+ * @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 username = useWatch({
+ *    name: 'username'
+ *   })
+ *
+ *   const { errors } = useFormState()
+ *
+ *   console.log(errors.username)
+ * }
+ * ```
+ */
+export declare const useFieldDeprecated: <T, TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(name: TFieldName, options?: Options<TFieldValues>) => {
+    input: {
+        value: T;
+        onChange: (...event: any[]) => void;
+    };
+    meta: {
+        error: string | undefined;
+        touched: boolean;
+        invalid: boolean;
+        dirty: boolean;
+    };
+};
+export {};

package/dist/hooks/useField.js

@@ -1,21 +1,4 @@
-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 username = useWatch({
- *    name: 'username'
- *   })
- *
- *   const { errors } = useFormState()
- *
- *   console.log(errors.username)
- * }
- * ```
- */
+import { useFormContext, useController } from "react-hook-form";
 const useFieldDeprecated = (name, options) => {
   const {
     getValues
@@ -42,5 +25,6 @@ const useFieldDeprecated = (name, options) => {
     }
   };
 };
-
-export { useFieldDeprecated };
+export {
+  useFieldDeprecated
+};

package/dist/hooks/useFieldArray.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+import type { ArrayPath, FieldArray, FieldValues, Validate } from 'react-hook-form';
+type Options<TFieldValues extends FieldValues> = {
+    validate?: Validate<FieldArray<TFieldValues>[], TFieldValues>;
+    subscription?: Record<string, boolean>;
+};
+/**
+ * @deprecated Use [useFieldArray](https://www.react-hook-form.com/api/usefieldarray/)
+ */
+export declare const useFieldArrayDeprecated: <T, TFieldValues extends FieldValues = FieldValues>(name: ArrayPath<TFieldValues>, options?: Options<TFieldValues>) => {
+    fields: {
+        push: import("react-hook-form").UseFieldArrayAppend<TFieldValues, ArrayPath<TFieldValues>>;
+        value: T[];
+        remove: import("react-hook-form").UseFieldArrayRemove;
+        update: import("react-hook-form").UseFieldArrayUpdate<TFieldValues, ArrayPath<TFieldValues>>;
+        map: (callback: (name: string, index: number) => ReactNode) => ReactNode[];
+        move: import("react-hook-form").UseFieldArrayMove;
+        length: number;
+    };
+};
+export {};

package/dist/hooks/useFieldArray.js

@@ -1,8 +1,4 @@
-import { useFieldArray, useWatch } from 'react-hook-form';
-
-/**
- * @deprecated Use [useFieldArray](https://www.react-hook-form.com/api/usefieldarray/)
- */
+import { useFieldArray, useWatch } from "react-hook-form";
 const useFieldArrayDeprecated = (name, options) => {
   const {
     fields,
@@ -22,14 +18,15 @@ const useFieldArrayDeprecated = (name, options) => {
   return {
     fields: {
       push: append,
-      value: value,
+      value,
       remove,
       update,
-      map: callback => fields.map((_, index) => callback(`${name}.${index}`, index)),
+      map: (callback) => fields.map((_, index) => callback(`${name}.${index}`, index)),
       move,
       length: fields.length
     }
   };
 };
-
-export { useFieldArrayDeprecated };
+export {
+  useFieldArrayDeprecated
+};