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

package/dist/components/CheckboxField/index.js

@@ -3,26 +3,25 @@ import { useController } from 'react-hook-form';
 import { jsx } from '@emotion/react/jsx-runtime';
 import { useErrors } from '../../providers/ErrorContext/index.js';
 
-const CheckboxField = _ref => {
-  let {
-    name,
-    label,
-    size,
-    progress,
-    disabled,
-    required,
-    className,
-    children,
-    onChange,
-    onBlur,
-    onFocus,
-    rules,
-    helper,
-    tooltip,
-    'data-testid': dataTestId,
-    value,
-    shouldUnregister = false
-  } = _ref;
+const CheckboxField = ({
+  name,
+  label,
+  size,
+  progress,
+  disabled,
+  required,
+  className,
+  children,
+  onChange,
+  onBlur,
+  onFocus,
+  rules,
+  helper,
+  tooltip,
+  'data-testid': dataTestId,
+  value,
+  shouldUnregister = false
+}) => {
   const {
     getError
   } = useErrors();

package/dist/components/CheckboxGroupField/index.js

@@ -3,20 +3,19 @@ import { useController } from 'react-hook-form';
 import { jsx } from '@emotion/react/jsx-runtime';
 import { useErrors } from '../../providers/ErrorContext/index.js';
 
-const CheckboxGroupField = _ref => {
-  let {
-    legend,
-    className,
-    helper,
-    direction,
-    children,
-    onChange,
-    label = '',
-    error: customError,
-    name,
-    required = false,
-    shouldUnregister = false
-  } = _ref;
+const CheckboxGroupField = ({
+  legend,
+  className,
+  helper,
+  direction,
+  children,
+  onChange,
+  label = '',
+  error: customError,
+  name,
+  required = false,
+  shouldUnregister = false
+}) => {
   const {
     getError
   } = useErrors();

package/dist/components/DateField/index.js

@@ -7,26 +7,25 @@ import { useErrors } from '../../providers/ErrorContext/index.js';
 
 const parseDate = value => typeof value === 'string' ? new Date(value) : value;
 const isEmpty = value => typeof value === 'string' ? value === '' : value === undefined;
-const DateField = _ref => {
-  let {
-    required,
-    name,
-    label = '',
-    format,
-    locale,
-    maxDate,
-    minDate,
-    disabled,
-    onChange,
-    onBlur,
-    onFocus,
-    rules,
-    autoFocus = false,
-    excludeDates,
-    selectsRange,
-    'data-testid': dataTestId,
-    shouldUnregister = false
-  } = _ref;
+const DateField = ({
+  required,
+  name,
+  label = '',
+  format,
+  locale,
+  maxDate,
+  minDate,
+  disabled,
+  onChange,
+  onBlur,
+  onFocus,
+  rules,
+  autoFocus = false,
+  excludeDates,
+  selectsRange,
+  'data-testid': dataTestId,
+  shouldUnregister = false
+}) => {
   const {
     getError
   } = useErrors();

package/dist/components/Form/index.js

@@ -6,15 +6,14 @@ import { jsx } from '@emotion/react/jsx-runtime';
 import { ErrorProvider } from '../../providers/ErrorContext/index.js';
 
 const FormSubmitContext = /*#__PURE__*/React.createContext({});
-const Form = _ref => {
-  let {
-    children,
-    methods: methodsProp,
-    initialValues,
-    errors,
-    onRawSubmit,
-    name
-  } = _ref;
+const Form = ({
+  children,
+  methods: methodsProp,
+  initialValues,
+  errors,
+  onRawSubmit,
+  name
+}) => {
   const methodsHook = useForm({
     defaultValues: initialValues,
     mode: 'onChange'

package/dist/components/NumberInputField/index.js

@@ -3,26 +3,25 @@ import { useController } from 'react-hook-form';
 import { jsx } from '@emotion/react/jsx-runtime';
 import { useErrors } from '../../providers/ErrorContext/index.js';
 
-const NumberInputField = _ref => {
-  let {
-    disabled,
-    maxValue,
-    minValue,
-    name,
-    onChange,
-    onBlur,
-    onFocus,
-    onMaxCrossed,
-    onMinCrossed,
-    required,
-    size,
-    step,
-    text,
-    rules,
-    className,
-    label,
-    shouldUnregister = false
-  } = _ref;
+const NumberInputField = ({
+  disabled,
+  maxValue,
+  minValue,
+  name,
+  onChange,
+  onBlur,
+  onFocus,
+  onMaxCrossed,
+  onMinCrossed,
+  required,
+  size,
+  step,
+  text,
+  rules,
+  className,
+  label,
+  shouldUnregister = false
+}) => {
   const {
     getError
   } = useErrors();

package/dist/components/RadioField/index.js

@@ -3,23 +3,22 @@ import { useController } from 'react-hook-form';
 import { jsx } from '@emotion/react/jsx-runtime';
 import { useErrors } from '../../providers/ErrorContext/index.js';
 
-const RadioField = _ref => {
-  let {
-    className,
-    'data-testid': dataTestId,
-    disabled,
-    id,
-    name,
-    onBlur,
-    label = '',
-    onChange,
-    onFocus,
-    required,
-    value,
-    rules,
-    tooltip,
-    shouldUnregister = false
-  } = _ref;
+const RadioField = ({
+  className,
+  'data-testid': dataTestId,
+  disabled,
+  id,
+  name,
+  onBlur,
+  label = '',
+  onChange,
+  onFocus,
+  required,
+  value,
+  rules,
+  tooltip,
+  shouldUnregister = false
+}) => {
   const {
     getError
   } = useErrors();

package/dist/components/RadioGroupField/index.js

@@ -3,21 +3,20 @@ import { useController } from 'react-hook-form';
 import { jsx } from '@emotion/react/jsx-runtime';
 import { useErrors } from '../../providers/ErrorContext/index.js';
 
-const RadioGroupField = _ref => {
-  let {
-    className,
-    legend = '',
-    name,
-    onChange,
-    required,
-    rules,
-    children,
-    label = '',
-    error: customError,
-    helper,
-    direction,
-    shouldUnregister = false
-  } = _ref;
+const RadioGroupField = ({
+  className,
+  legend = '',
+  name,
+  onChange,
+  required,
+  rules,
+  children,
+  label = '',
+  error: customError,
+  helper,
+  direction,
+  shouldUnregister = false
+}) => {
   const {
     getError
   } = useErrors();

package/dist/components/SelectInputField/index.js

@@ -7,54 +7,51 @@ import { useErrors } from '../../providers/ErrorContext/index.js';
 const identity = x => x;
 // const identity = <T,>(x: T) => x
 
-const SelectInputField = _ref => {
-  let {
-    animation,
-    animationDuration,
-    animationOnChange,
-    children,
-    className,
-    disabled,
-    // error: errorProp,
-    format: formatProp = identity,
-    // formatOnBlur,
-    id,
-    inputId,
-    isClearable,
-    isLoading,
-    isSearchable,
-    label = '',
-    maxLength,
-    menuPortalTarget,
-    minLength,
-    multiple,
-    name,
-    onBlur,
-    onChange,
-    onFocus,
-    options: optionsProp,
-    parse: parseProp = identity,
-    placeholder,
-    readOnly,
-    required,
-    rules,
-    noTopLabel,
-    noOptionsMessage,
-    customStyle,
-    shouldUnregister = false
-  } = _ref;
-  const options = useMemo(() => optionsProp || Children.toArray(children).flat().filter(Boolean).map(_ref2 => {
-    let {
-      props: {
-        children: labelChild,
-        ...option
-      }
-    } = _ref2;
-    return {
-      ...option,
-      label: labelChild
-    };
-  }), [optionsProp, children]);
+const SelectInputField = ({
+  animation,
+  animationDuration,
+  animationOnChange,
+  children,
+  className,
+  disabled,
+  // error: errorProp,
+  format: formatProp = identity,
+  // formatOnBlur,
+  id,
+  inputId,
+  isClearable,
+  isLoading,
+  isSearchable,
+  label = '',
+  maxLength,
+  menuPortalTarget,
+  minLength,
+  multiple,
+  name,
+  onBlur,
+  onChange,
+  onFocus,
+  options: optionsProp,
+  parse: parseProp = identity,
+  placeholder,
+  readOnly,
+  required,
+  rules,
+  noTopLabel,
+  noOptionsMessage,
+  customStyle,
+  shouldUnregister = false,
+  'data-testid': dataTestId
+}) => {
+  const options = useMemo(() => optionsProp || Children.toArray(children).flat().filter(Boolean).map(({
+    props: {
+      children: labelChild,
+      ...option
+    }
+  }) => ({
+    ...option,
+    label: labelChild
+  })), [optionsProp, children]);
   const parse = useMemo(() => multiple ? parseProp : option => parseProp(option?.value ?? null, name), [multiple, parseProp, name]);
   const format = useCallback(val => {
     if (multiple) return formatProp(val, name);
@@ -126,6 +123,7 @@ const SelectInputField = _ref => {
     required: required,
     value: format(field.value),
     noOptionsMessage: noOptionsMessage,
+    "data-testid": dataTestId,
     children: children
   });
 };

package/dist/components/SelectableCardField/index.js

@@ -2,25 +2,25 @@ import { SelectableCard } from '@ultraviolet/ui';
 import { useController } from 'react-hook-form';
 import { jsx } from '@emotion/react/jsx-runtime';
 
-const SelectableCardField = _ref => {
-  let {
-    name,
-    value,
-    onChange,
-    showTick,
-    type,
-    disabled,
-    children,
-    className,
-    onFocus,
-    onBlur,
-    required,
-    tooltip,
-    id,
-    label,
-    rules,
-    shouldUnregister = false
-  } = _ref;
+const SelectableCardField = ({
+  name,
+  value,
+  onChange,
+  showTick,
+  type,
+  disabled,
+  children,
+  className,
+  onFocus,
+  onBlur,
+  required,
+  tooltip,
+  id,
+  label,
+  rules,
+  shouldUnregister = false,
+  'data-testid': dataTestId
+}) => {
   const {
     field,
     fieldState: {
@@ -57,6 +57,7 @@ const SelectableCardField = _ref => {
     label: label,
     value: value ?? '',
     name: field.name,
+    "data-testid": dataTestId,
     children: children
   });
 };

package/dist/components/Submit/index.js

@@ -2,20 +2,19 @@ import { Button } from '@ultraviolet/ui';
 import { useFormState } from 'react-hook-form';
 import { jsx } from '@emotion/react/jsx-runtime';
 
-const Submit = _ref => {
-  let {
-    children,
-    className,
-    disabled = false,
-    icon,
-    iconPosition,
-    size,
-    variant = 'filled',
-    sentiment = 'primary',
-    tooltip,
-    fullWidth,
-    onClick
-  } = _ref;
+const Submit = ({
+  children,
+  className,
+  disabled = false,
+  icon,
+  iconPosition,
+  size,
+  variant = 'filled',
+  sentiment = 'primary',
+  tooltip,
+  fullWidth,
+  onClick
+}) => {
   const {
     isSubmitting,
     isValid

package/dist/components/SubmitErrorAlert/index.js

@@ -2,10 +2,9 @@ import { Alert } from '@ultraviolet/ui';
 import { useFormState } from 'react-hook-form';
 import { jsx } from '@emotion/react/jsx-runtime';
 
-const SubmitErrorAlert = _ref => {
-  let {
-    className
-  } = _ref;
+const SubmitErrorAlert = ({
+  className
+}) => {
   const {
     errors
   } = useFormState();

package/dist/components/TagInputField/index.js

@@ -2,19 +2,19 @@ import { TagInput } from '@ultraviolet/ui';
 import { useController } from 'react-hook-form';
 import { jsx } from '@emotion/react/jsx-runtime';
 
-const TagInputField = _ref => {
-  let {
-    className,
-    disabled,
-    id,
-    name,
-    onChange,
-    placeholder,
-    required,
-    rules,
-    variant,
-    shouldUnregister = false
-  } = _ref;
+const TagInputField = ({
+  className,
+  disabled,
+  id,
+  name,
+  onChange,
+  placeholder,
+  required,
+  rules,
+  variant,
+  shouldUnregister = false,
+  'data-testid': dataTestId
+}) => {
   const {
     field
   } = useController({
@@ -36,7 +36,8 @@ const TagInputField = _ref => {
     },
     placeholder: placeholder,
     variant: variant,
-    tags: field.value
+    tags: field.value,
+    "data-testid": dataTestId
   });
 };
 

package/dist/components/TextInputField/index.js

@@ -3,54 +3,54 @@ import { useController } from 'react-hook-form';
 import { jsx } from '@emotion/react/jsx-runtime';
 import { useErrors } from '../../providers/ErrorContext/index.js';
 
-const TextInputField = _ref => {
-  let {
-    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 = false,
-    regex: regexes,
-    min,
-    max,
-    minLength,
-    maxLength,
-    validate,
-    defaultValue,
-    customError,
-    innerRef,
-    shouldUnregister = false
-  } = _ref;
+const TextInputField = ({
+  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 = false,
+  regex: regexes,
+  min,
+  max,
+  minLength,
+  maxLength,
+  validate,
+  defaultValue,
+  customError,
+  innerRef,
+  shouldUnregister = false,
+  'data-testid': dataTestId
+}) => {
   const {
     getError
   } = useErrors();
@@ -142,7 +142,8 @@ const TextInputField = _ref => {
     valid: valid,
     size: size,
     value: transformedValue(),
-    ref: innerRef
+    ref: innerRef,
+    "data-testid": dataTestId
   });
 };
 

package/dist/components/TimeField/index.js

@@ -9,31 +9,30 @@ const parseTime = date => {
     value: timeStr
   };
 };
-const TimeField = _ref => {
-  let {
-    required,
-    name,
-    schedule,
-    placeholder,
-    disabled,
-    readOnly,
-    onBlur,
-    onFocus,
-    onChange,
-    isLoading,
-    isClearable,
-    inputId,
-    id,
-    animation,
-    animationDuration,
-    animationOnChange,
-    className,
-    isSearchable,
-    rules,
-    options,
-    'data-testid': dataTestId,
-    shouldUnregister = false
-  } = _ref;
+const TimeField = ({
+  required,
+  name,
+  schedule,
+  placeholder,
+  disabled,
+  readOnly,
+  onBlur,
+  onFocus,
+  onChange,
+  isLoading,
+  isClearable,
+  inputId,
+  id,
+  animation,
+  animationDuration,
+  animationOnChange,
+  className,
+  isSearchable,
+  rules,
+  options,
+  'data-testid': dataTestId,
+  shouldUnregister = false
+}) => {
   const {
     field,
     fieldState: {

package/dist/components/ToggleField/index.js

@@ -2,23 +2,22 @@ import { Toggle } from '@ultraviolet/ui';
 import { useController } from 'react-hook-form';
 import { jsx } from '@emotion/react/jsx-runtime';
 
-const ToggleField = _ref => {
-  let {
-    className,
-    disabled,
-    label,
-    name,
-    onChange,
-    required,
-    size,
-    tooltip,
-    rules,
-    labelPosition,
-    parse,
-    format,
-    'data-testid': dataTestId,
-    shouldUnregister = false
-  } = _ref;
+const ToggleField = ({
+  className,
+  disabled,
+  label,
+  name,
+  onChange,
+  required,
+  size,
+  tooltip,
+  rules,
+  labelPosition,
+  parse,
+  format,
+  'data-testid': dataTestId,
+  shouldUnregister = false
+}) => {
   const {
     field
   } = useController({

package/dist/helpers/pickValidators.js

@@ -1,8 +1,5 @@
 import validators from '../validators/index.js';
 
-const pickValidators = args => Object.entries(args).map(_ref => {
-  let [key, value] = _ref;
-  return value !== undefined ? validators[key]?.(value) : undefined;
-}).filter(validator => !!validator);
+const pickValidators = args => Object.entries(args).map(([key, value]) => value !== undefined ? validators[key]?.(value) : undefined).filter(validator => !!validator);
 
 export { pickValidators };

package/dist/hooks/useFormField.js

@@ -3,33 +3,32 @@ import { useField } from 'react-final-form';
 import { useValidation } from './useValidation.js';
 import { pickValidators } from '../helpers/pickValidators.js';
 
-const useFormField = (name, _ref) => {
-  let {
-    afterSubmit,
-    disabled,
-    allowNull,
-    beforeSubmit,
-    defaultValue,
-    format,
-    formatOnBlur,
-    initialValue,
-    isEqual,
-    multiple,
-    parse,
-    subscription,
-    type,
-    validate,
-    validateFields,
-    value,
-    max,
-    maxLength,
-    min,
-    minLength,
-    regex,
-    required,
-    maxDate,
-    minDate
-  } = _ref;
+const useFormField = (name, {
+  afterSubmit,
+  disabled,
+  allowNull,
+  beforeSubmit,
+  defaultValue,
+  format,
+  formatOnBlur,
+  initialValue,
+  isEqual,
+  multiple,
+  parse,
+  subscription,
+  type,
+  validate,
+  validateFields,
+  value,
+  max,
+  maxLength,
+  min,
+  minLength,
+  regex,
+  required,
+  maxDate,
+  minDate
+}) => {
   const serializedRegex = useMemo(() => regex?.toString(), [regex]);
   const validators = useMemo(() => pickValidators({
     max,

package/dist/hooks/useOnFieldChange.js

@@ -1,10 +1,7 @@
 import { useRef, useEffect } from 'react';
 import { useFormContext } from 'react-hook-form';
 
-const useOnFieldChange = function (fieldName, callback, enabled) {
-  if (enabled === void 0) {
-    enabled = true;
-  }
+const useOnFieldChange = (fieldName, callback, enabled = true) => {
   const {
     watch,
     getValues

package/dist/hooks/useValidation.js

@@ -1,25 +1,19 @@
 import { useCallback } from 'react';
 
-const useValidation = _ref => {
-  let {
-    validators,
-    validate
-  } = _ref;
-  return useCallback((value, allValues, meta) => {
-    if (validate) {
-      const validateErr = validate(value, allValues, meta);
-      if (validateErr !== undefined && validateErr !== true) {
-        return validateErr;
-      }
+const useValidation = ({
+  validators,
+  validate
+}) => useCallback((value, allValues, meta) => {
+  if (validate) {
+    const validateErr = validate(value, allValues, meta);
+    if (validateErr !== undefined && validateErr !== true) {
+      return validateErr;
     }
-    const errors = validators.filter(validator => !validator.validate(value, allValues, meta)).map(_ref2 => {
-      let {
-        error
-      } = _ref2;
-      return error;
-    });
-    return errors.length > 0 ? errors : undefined;
-  }, [validate, validators]);
-};
+  }
+  const errors = validators.filter(validator => !validator.validate(value, allValues, meta)).map(({
+    error
+  }) => error);
+  return errors.length > 0 ? errors : undefined;
+}, [validate, validators]);
 
 export { useValidation };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
-import { Checkbox, CheckboxGroup, DateInput, Radio, SelectableCard, NumberInput, TagInput, TextInput, TimeInput, Toggle, Button, RadioGroup } from '@ultraviolet/ui';
+import { Checkbox, CheckboxGroup, DateInput, Radio, SelectInput, SelectableCard, NumberInput, TagInput, TextInput, TimeInput, Toggle, Button, RadioGroup } from '@ultraviolet/ui';
 import * as react from 'react';
 import { ComponentProps, ReactNode, FocusEvent, ForwardedRef, FocusEventHandler, Ref, JSX } from 'react';
 import * as react_hook_form from 'react-hook-form';
@@ -27,7 +27,7 @@ type RequiredErrors = {
 type FormErrors = {
     [key in 'required' | 'min' | 'max' | 'minLength' | 'maxLength' | 'pattern' | 'minDate' | 'maxDate']: RequiredErrors[key];
 };
-type BaseFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
+type BaseFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = {
     name: TName;
     required?: boolean;
     /**
@@ -42,15 +42,15 @@ type BaseFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TF
     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'>> & {
+type CheckboxFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & 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, shouldUnregister, }: CheckboxFieldProps<TFieldValues>) => _emotion_react_jsx_runtime.JSX.Element;
+declare const CheckboxField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, label, size, progress, disabled, required, className, children, onChange, onBlur, onFocus, rules, helper, tooltip, "data-testid": dataTestId, value, shouldUnregister, }: CheckboxFieldProps<TFieldValues, TName>) => _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'>>;
+type CheckboxGroupFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & 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, shouldUnregister, }: CheckboxGroupFieldProps<TFieldValues>): _emotion_react_jsx_runtime.JSX.Element;
+    <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ legend, className, helper, direction, children, onChange, label, error: customError, name, required, shouldUnregister, }: CheckboxGroupFieldProps<TFieldValues, TName>): _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;
@@ -76,7 +76,7 @@ declare const CheckboxGroupField: {
     }) => _emotion_react_jsx_runtime.JSX.Element;
 };
 
-type DateFieldProps<TFieldValues extends FieldValues> = BaseFieldProps<TFieldValues> & Omit<ComponentProps<typeof DateInput>, 'maxDate' | 'minDate' | 'disabled' | 'required' | 'locale' | 'name' | 'onChange' | 'onFocus' | 'onBlur' | 'autoFocus' | 'stardDate' | 'endDate'> & {
+type DateFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Omit<ComponentProps<typeof DateInput>, 'maxDate' | 'minDate' | 'disabled' | 'required' | 'locale' | 'name' | 'onChange' | 'onFocus' | 'onBlur' | 'autoFocus' | 'stardDate' | 'endDate'> & {
     maxDate?: Date;
     minDate?: Date;
     disabled?: boolean;
@@ -86,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, shouldUnregister, }: DateFieldProps<TFieldValues>) => _emotion_react_jsx_runtime.JSX.Element;
+declare const DateField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ required, name, label, format, locale, maxDate, minDate, disabled, onChange, onBlur, onFocus, rules, autoFocus, excludeDates, selectsRange, "data-testid": dataTestId, shouldUnregister, }: DateFieldProps<TFieldValues, TName>) => _emotion_react_jsx_runtime.JSX.Element;
 
 type Without<T, U> = {
     [P in Exclude<keyof T, keyof U>]?: never;
@@ -148,10 +148,10 @@ type FormProps<TFormValues extends FieldValues = FieldValues> = {
 ]>;
 declare const Form: <TFormValues extends FieldValues>({ children, methods: methodsProp, initialValues, errors, onRawSubmit, name, }: FormProps<TFormValues>) => _emotion_react_jsx_runtime.JSX.Element;
 
-type RadioFieldProps<TFieldValues extends FieldValues> = Omit<BaseFieldProps<TFieldValues>, 'label'> & Partial<Pick<ComponentProps<typeof Radio>, 'disabled' | 'id' | 'onBlur' | 'onFocus' | 'data-testid' | 'tooltip' | 'label'>> & {
+type RadioFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TName>, '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, shouldUnregister, }: RadioFieldProps<TFieldValues>) => _emotion_react_jsx_runtime.JSX.Element;
+declare const RadioField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ className, "data-testid": dataTestId, disabled, id, name, onBlur, label, onChange, onFocus, required, value, rules, tooltip, shouldUnregister, }: RadioFieldProps<TFieldValues, TName>) => _emotion_react_jsx_runtime.JSX.Element;
 
 type SelectOption = {
     value: string;
@@ -193,7 +193,7 @@ type SelectProps = StyledContainerProps & Omit<Props<SelectOption>, 'value'> & C
     time?: boolean;
 };
 type StateManagedSelect = typeof Select;
-type SelectInputProps = Partial<SelectProps & SelectStyleProps & {
+type SelectInputProps = Partial<SelectProps & SelectStyleProps & Pick<ComponentProps<typeof SelectInput>, 'data-testid'> & {
     /**
      * Name of the animation
      */
@@ -212,7 +212,7 @@ type SelectInputProps = Partial<SelectProps & SelectStyleProps & {
     children: ReactNode;
     emptyState?: ComponentProps<Select>['noOptionsMessage'];
 }>;
-type SelectInputFieldProps<TFieldValues extends FieldValues = FieldValues> = Omit<BaseFieldProps<TFieldValues>, 'onChange'> & Partial<Pick<SelectInputProps, 'animation' | 'animationDuration' | 'animationOnChange' | 'children' | 'className' | 'disabled' | 'error' | 'id' | 'inputId' | 'isClearable' | 'isLoading' | 'isSearchable' | 'menuPortalTarget' | 'onBlur' | 'onChange' | 'onFocus' | 'options' | 'placeholder' | 'readOnly' | 'required' | 'value' | 'noTopLabel' | 'noOptionsMessage' | 'customStyle'>> & {
+type SelectInputFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TName>, 'onChange'> & Partial<Pick<SelectInputProps, 'animation' | 'animationDuration' | 'animationOnChange' | 'children' | 'className' | 'disabled' | 'error' | 'id' | 'inputId' | 'isClearable' | 'isLoading' | 'isSearchable' | 'menuPortalTarget' | 'onBlur' | 'onChange' | 'onFocus' | 'options' | 'placeholder' | 'readOnly' | 'required' | 'value' | 'noTopLabel' | 'noOptionsMessage' | 'customStyle' | 'data-testid'>> & {
     multiple?: boolean;
     parse?: (value: unknown, name?: string) => unknown;
     format?: (value: unknown, name: string) => unknown;
@@ -220,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, shouldUnregister, }: SelectInputFieldProps<TFieldValues>): _emotion_react_jsx_runtime.JSX.Element;
+    <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ 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, "data-testid": dataTestId, }: SelectInputFieldProps<TFieldValues, TName>): _emotion_react_jsx_runtime.JSX.Element;
     Option: (props: Partial<OptionProps<{
         value: string;
         label: ReactNode;
@@ -242,25 +242,25 @@ declare const SelectInputField: {
     }>) => react.JSX.Element;
 };
 
-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'>> & {
+type SelectableCardFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TName>, 'label' | 'onChange'> & Partial<Pick<ComponentProps<typeof SelectableCard>, 'disabled' | 'onBlur' | 'onChange' | 'onFocus' | 'showTick' | 'type' | 'id' | 'children' | 'tooltip' | 'label' | 'data-testid'>> & {
     className?: string;
 };
-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;
+declare const SelectableCardField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, value, onChange, showTick, type, disabled, children, className, onFocus, onBlur, required, tooltip, id, label, rules, shouldUnregister, "data-testid": dataTestId, }: SelectableCardFieldProps<TFieldValues, TName>) => _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'>> & {
+type NumberInputValueFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & 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, shouldUnregister, }: NumberInputValueFieldProps<TFieldValues>) => _emotion_react_jsx_runtime.JSX.Element;
+declare const NumberInputField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ disabled, maxValue, minValue, name, onChange, onBlur, onFocus, onMaxCrossed, onMinCrossed, required, size, step, text, rules, className, label, shouldUnregister, }: NumberInputValueFieldProps<TFieldValues, TName>) => _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, shouldUnregister, }: TagInputFieldProps<TFieldValues>) => _emotion_react_jsx_runtime.JSX.Element;
+type TagInputFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Partial<Pick<ComponentProps<typeof TagInput>, 'tags' | 'variant' | 'placeholder' | 'disabled' | 'className' | 'id' | 'data-testid'>>;
+declare const TagInputField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ className, disabled, id, name, onChange, placeholder, required, rules, variant, shouldUnregister, "data-testid": dataTestId, }: TagInputFieldProps<TFieldValues, TName>) => _emotion_react_jsx_runtime.JSX.Element;
 
-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'>> & {
+type TextInputFieldProps<TFieldValues extends FieldValues, TName extends 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' | 'data-testid'>> & {
     className?: string;
     regex?: (RegExp | RegExp[])[];
     format?: (value: unknown) => PathValue<TFieldValues, Path<TFieldValues>>;
@@ -269,18 +269,18 @@ type TextInputFieldProps<TFieldValues extends FieldValues, TName extends FieldPa
     formatOnBlur?: boolean;
     innerRef?: Ref<HTMLInputElement>;
 };
-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;
+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, "data-testid": dataTestId, }: TextInputFieldProps<TFieldValues, TName>) => _emotion_react_jsx_runtime.JSX.Element;
 
-type TimeFieldProps<TFieldValues extends FieldValues> = BaseFieldProps<TFieldValues> & Omit<ComponentProps<typeof TimeInput>, 'onChange'> & {
+type TimeFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & 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, shouldUnregister, }: TimeFieldProps<TFieldValues>) => _emotion_react_jsx_runtime.JSX.Element;
+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, }: TimeFieldProps<TFieldValues, TName>) => _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'> & {
+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;
 };
-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;
+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>) => _emotion_react_jsx_runtime.JSX.Element;
 
 type SubmitProps = {
     children?: ReactNode;
@@ -297,11 +297,11 @@ type SubmitProps = {
 };
 declare const Submit: ({ children, className, disabled, icon, iconPosition, size, variant, sentiment, tooltip, fullWidth, onClick, }: SubmitProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-type RadioGroupFieldProps<TFieldValues extends FieldValues> = BaseFieldProps<TFieldValues> & Partial<Pick<ComponentProps<typeof RadioGroup>, 'legend' | 'children' | 'error' | 'helper' | 'direction'>> & {
+type RadioGroupFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Partial<Pick<ComponentProps<typeof RadioGroup>, 'legend' | 'children' | 'error' | 'helper' | 'direction'>> & {
     className?: string;
 };
 declare const RadioGroupField: {
-    <TFieldValues extends FieldValues>({ className, legend, name, onChange, required, rules, children, label, error: customError, helper, direction, shouldUnregister, }: RadioGroupFieldProps<TFieldValues>): JSX.Element;
+    <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ className, legend, name, onChange, required, rules, children, label, error: customError, helper, direction, shouldUnregister, }: RadioGroupFieldProps<TFieldValues, TName>): 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;

package/dist/providers/ErrorContext/index.js

@@ -2,11 +2,10 @@ import { useCallback, useMemo, useContext, createContext } from 'react';
 import { jsx } from '@emotion/react/jsx-runtime';
 
 const ErrorContext = /*#__PURE__*/createContext(undefined);
-const ErrorProvider = _ref => {
-  let {
-    children,
-    errors
-  } = _ref;
+const ErrorProvider = ({
+  children,
+  errors
+}) => {
   const getError = useCallback((meta, error) => {
     if (!error) {
       return undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/form",
-  "version": "2.0.0-next.8",
+  "version": "2.0.0-next.9",
   "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.5",
+    "@babel/core": "7.23.6",
     "@types/final-form-focus": "1.1.7",
-    "@types/react": "18.2.43",
-    "@types/react-dom": "18.2.17",
+    "@types/react": "18.2.45",
+    "@types/react-dom": "18.2.18",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
   "dependencies": {
-    "@babel/runtime": "7.23.5",
+    "@babel/runtime": "7.23.6",
     "@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.28.0"
+    "@ultraviolet/ui": "1.29.1"
   },
   "scripts": {
     "build": "rollup -c ../../rollup.config.mjs"