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

package/dist/components/CheckboxField/index.js

@@ -1,12 +1,14 @@
 import { Checkbox } from '@ultraviolet/ui';
-import { useController } from 'react-hook-form';
+import { forwardRef } from 'react';
 import { jsx } from '@emotion/react/jsx-runtime';
 import { useErrors } from '../../providers/ErrorContext/index.js';
+import { useFormField } from '../../hooks/useFormField.js';
 
-const CheckboxField = _ref => {
+const CheckboxField = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
+    validate,
     name,
-    label,
+    label = '',
     size,
     progress,
     disabled,
@@ -16,55 +18,58 @@ const CheckboxField = _ref => {
     onChange,
     onBlur,
     onFocus,
-    rules,
+    value,
     helper,
     tooltip,
-    'data-testid': dataTestId,
-    value
+    'data-testid': dataTestId
   } = _ref;
   const {
     getError
   } = useErrors();
   const {
-    field,
-    fieldState: {
-      error
-    }
-  } = useController({
-    name,
+    input,
+    meta
+  } = useFormField(name, {
     disabled,
-    rules: {
-      required,
-      ...rules
-    }
+    required,
+    type: 'checkbox',
+    validate,
+    value
+  });
+  const error = getError({
+    label,
+    meta: meta,
+    name,
+    value: input.value ?? input.checked
   });
   return jsx(Checkbox, {
-    name: field.name,
+    name: input.name,
     onChange: event => {
-      field.onChange(value ? [...(field.value ?? []), value] : event.target.checked);
-      onChange?.(event.target.checked);
+      input.onChange(event);
+      onChange?.(event);
     },
     onBlur: event => {
-      field.onBlur();
+      input.onBlur(event);
       onBlur?.(event);
     },
-    onFocus: onFocus,
+    onFocus: event => {
+      input.onFocus(event);
+      onFocus?.(event);
+    },
     size: size,
     progress: progress,
-    disabled: field.disabled,
-    checked: Array.isArray(field.value) ? field.value.includes(value) : !!field.value,
-    error: getError({
-      label: label ?? ''
-    }, error),
-    ref: field.ref,
+    disabled: disabled,
+    checked: input.checked,
+    error: error,
+    helper: helper,
+    ref: ref,
     className: className,
+    value: input.value,
     required: required,
     "data-testid": dataTestId,
-    helper: helper,
     tooltip: tooltip,
-    value: value,
     children: children
   });
-};
+});
 
 export { CheckboxField };

package/dist/components/CheckboxGroupField/index.js

@@ -1,17 +1,17 @@
 import { CheckboxGroup } from '@ultraviolet/ui';
-import { useController } from 'react-hook-form';
+import { useFieldArray } from 'react-final-form-arrays';
 import { jsx } from '@emotion/react/jsx-runtime';
 import { useErrors } from '../../providers/ErrorContext/index.js';
 
 const CheckboxGroupField = _ref => {
   let {
     legend,
+    value,
     className,
     helper,
     direction,
     children,
     onChange,
-    label = '',
     error: customError,
     name,
     required = false
@@ -20,29 +20,32 @@ const CheckboxGroupField = _ref => {
     getError
   } = useErrors();
   const {
-    field,
-    fieldState: {
-      error
-    }
-  } = useController({
+    fields,
+    meta
+  } = useFieldArray(name, {
+    type: 'checkbox',
+    value,
+    validate: localValue => required && localValue?.length === 0 ? 'Required' : undefined
+  });
+  const error = getError({
+    label: legend,
+    meta,
+    value: fields.value,
     name
   });
   return jsx(CheckboxGroup, {
     legend: legend,
-    name: name,
-    value: field.value,
+    name: fields.name,
+    value: fields.value,
     onChange: event => {
-      const fieldValue = field.value;
-      if (fieldValue?.includes(event.currentTarget.value)) {
-        field.onChange(fieldValue?.filter(currentValue => currentValue !== event.currentTarget.value));
+      if (fields.value?.includes(event.currentTarget.value)) {
+        fields.remove(fields.value.indexOf(event.currentTarget?.value));
       } else {
-        field.onChange([...field.value, event.currentTarget.value]);
+        fields.push(event.currentTarget.value);
       }
-      onChange?.(event.currentTarget.value);
+      onChange?.(event);
     },
-    error: getError({
-      label
-    }, error) ?? customError,
+    error: error ?? customError,
     className: className,
     direction: direction,
     helper: helper,

package/dist/components/DateField/index.js

@@ -1,9 +1,7 @@
 import { DateInput } from '@ultraviolet/ui';
-import { useController } from 'react-hook-form';
-import { maxDateValidator } from '../../validators/maxDate.js';
-import { minDateValidator } from '../../validators/minDate.js';
 import { jsx } from '@emotion/react/jsx-runtime';
 import { useErrors } from '../../providers/ErrorContext/index.js';
+import { useFormField } from '../../hooks/useFormField.js';
 
 const parseDate = value => typeof value === 'string' ? new Date(value) : value;
 const isEmpty = value => typeof value === 'string' ? value === '' : value === undefined;
@@ -12,15 +10,18 @@ const DateField = _ref => {
     required,
     name,
     label = '',
+    validate,
     format,
     locale,
     maxDate,
     minDate,
+    initialValue,
     disabled,
+    value: inputVal,
     onChange,
     onBlur,
     onFocus,
-    rules,
+    formatOnBlur,
     autoFocus = false,
     excludeDates,
     selectsRange,
@@ -30,63 +31,66 @@ const DateField = _ref => {
     getError
   } = useErrors();
   const {
-    field,
-    fieldState: {
-      error
-    }
-  } = useController({
+    input,
+    meta
+  } = useFormField(name, {
+    disabled,
+    formatOnBlur,
+    initialValue,
+    maxDate,
+    minDate,
+    required,
+    validate,
+    value: inputVal
+  });
+  const error = getError({
+    label,
+    maxDate,
+    meta: meta,
+    minDate,
     name,
-    rules: {
-      ...rules,
-      validate: {
-        ...rules?.validate,
-        minDate: minDateValidator(minDate),
-        maxDate: maxDateValidator(maxDate)
-      },
-      required
-    }
+    value: input.value
   });
   return jsx(DateInput, {
-    name: field.name,
     label: label,
-    value: field.value,
     format: format || (value => value ? parseDate(value).toLocaleDateString() : ''),
     locale: locale,
     required: required,
+    value: input.value,
     onChange: val => {
       if (val && val instanceof Date) {
         onChange?.(val);
         const newDate = parseDate(val);
-        if (isEmpty(field.value)) {
-          field.onChange(newDate);
+        if (isEmpty(input.value)) {
+          input.onChange(newDate);
           return;
         }
-        const currentDate = parseDate(field.value);
+        const currentDate = parseDate(input.value);
         newDate.setHours(currentDate.getHours(), currentDate.getMinutes());
-        field.onChange(newDate);
+        input.onChange(newDate);
       } else if (Array.isArray(val)) {
-        field.onChange(val);
+        input.onChange(val);
       }
     },
     onBlur: e => {
-      field.onBlur();
+      input.onBlur(e);
       onBlur?.(e);
     },
-    onFocus: onFocus,
+    onFocus: e => {
+      input.onFocus(e);
+      onFocus?.(e);
+    },
     maxDate: maxDate,
     minDate: minDate,
-    error: getError({
-      minDate,
-      maxDate,
-      label
-    }, error),
+    startDate: selectsRange ? input.value[0] : undefined,
+    endDate: selectsRange ? input.value[1] : undefined,
+    error: error,
     disabled: disabled,
     autoFocus: autoFocus,
-    excludeDates: excludeDates,
-    selectsRange: selectsRange,
+    name: input.name,
     "data-testid": dataTestId,
-    startDate: selectsRange && Array.isArray(field.value) ? field.value[0] : undefined,
-    endDate: selectsRange && Array.isArray(field.value) ? field.value[1] : undefined
+    excludeDates: excludeDates,
+    selectsRange: selectsRange
   });
 };
 

package/dist/components/Form/index.js

@@ -1,83 +1,43 @@
-import React, { useMemo } from 'react';
-import { useForm, FormProvider } from 'react-hook-form';
-import { FORM_ERROR } from '../../constants.js';
-import { defaultErrors } from './defaultErrors.js';
+import arrayMutators from 'final-form-arrays';
+import { Form as Form$1 } from 'react-final-form';
 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
+    errors,
+    initialValues,
+    validateOnBlur,
+    validate,
+    name,
+    render,
+    mutators,
+    keepDirtyOnReinitialize,
+    className
   } = _ref;
-  const methodsHook = useForm({
-    defaultValues: initialValues,
-    mode: 'onChange'
-  });
-  const methods = !methodsProp ? methodsHook : methodsProp;
-  const handleSubmit = methods.handleSubmit(async values => {
-    const result = await onRawSubmit(values, {
-      reset: methods.reset,
-      resetFieldState: methods.resetField,
-      restart: () => methods.reset(initialValues),
-      change: methods.setValue
-    });
-    if (result === null) {
-      methods.setError('root.submit', {
-        type: 'custom'
-      });
-      return;
-    }
-    if (result && typeof result !== 'boolean' && typeof result !== 'number') {
-      methods.setError('root.submit', {
-        type: 'custom',
-        message: typeof result === 'object' ? result[FORM_ERROR] : result
-      });
-    }
-  });
-  const formSubmitContextValue = useMemo(() => ({
-    handleSubmit
-  }), [handleSubmit]);
-  return jsx(FormProvider, {
-    ...methods,
-    children: jsx(FormSubmitContext.Provider, {
-      value: formSubmitContextValue,
-      children: jsx(ErrorProvider, {
-        errors: {
-          ...defaultErrors,
-          ...errors
-        },
-        children: jsx("form", {
-          onSubmit: async e => {
-            e.preventDefault();
-            e.stopPropagation();
-            await handleSubmit(e);
-          },
-          name: name,
-          children: typeof children === 'function' ? children({
-            values: methods.watch(),
-            hasValidationErrors: !methods.formState.isValid,
-            errors: methods.formState.errors,
-            submitting: methods.formState.isSubmitting,
-            pristine: !methods.formState.isDirty,
-            handleSubmit,
-            submitError: !!methods.formState.errors?.root?.['submit'],
-            valid: methods.formState.isValid,
-            form: {
-              change: methods.setValue,
-              reset: methods.reset,
-              submit: handleSubmit
-            }
-          }) : children
-        })
+  return jsx(Form$1, {
+    initialValues: initialValues,
+    validateOnBlur: validateOnBlur,
+    validate: validate,
+    mutators: {
+      ...arrayMutators,
+      ...mutators
+    },
+    onSubmit: onRawSubmit,
+    render: render ?? (renderProps => jsx(ErrorProvider, {
+      errors: errors,
+      children: jsx("form", {
+        noValidate: true,
+        name: name,
+        onSubmit: renderProps.handleSubmit,
+        className: className,
+        children: typeof children === 'function' ? children(renderProps) : children
       })
-    })
+    })),
+    keepDirtyOnReinitialize: keepDirtyOnReinitialize
   });
 };
 
-export { Form, FormSubmitContext };
+export { Form };

package/dist/components/NumberInputField/index.js

@@ -1,7 +1,6 @@
 import { NumberInput } from '@ultraviolet/ui';
-import { useController } from 'react-hook-form';
 import { jsx } from '@emotion/react/jsx-runtime';
-import { useErrors } from '../../providers/ErrorContext/index.js';
+import { useFormField } from '../../hooks/useFormField.js';
 
 const NumberInputField = _ref => {
   let {
@@ -18,41 +17,38 @@ const NumberInputField = _ref => {
     size,
     step,
     text,
-    rules,
+    validate,
+    value,
     className,
-    label
+    'data-testid': dataTestId
   } = _ref;
   const {
-    getError
-  } = useErrors();
-  const {
-    field,
-    fieldState: {
-      error
-    }
-  } = useController({
-    name,
-    rules: {
-      max: maxValue,
-      min: minValue,
-      required,
-      ...rules
-    }
+    input
+  } = useFormField(name, {
+    disabled,
+    required,
+    type: 'number',
+    validate,
+    value,
+    defaultValue: 0,
+    max: maxValue,
+    min: minValue
   });
   return jsx(NumberInput, {
-    name: field.name,
-    value: field.value,
+    name: name,
     disabled: disabled,
     onBlur: event => {
-      field.onBlur();
+      input.onBlur(event);
       onBlur?.(event);
     },
     onChange: event => {
-      // React hook form doesnt allow undefined values after definition https://react-hook-form.com/docs/usecontroller/controller (that make sense)
-      field.onChange(event ?? null);
+      input.onChange(event);
       onChange?.(event);
     },
-    onFocus: onFocus,
+    onFocus: event => {
+      input.onFocus(event);
+      onFocus?.(event);
+    },
     maxValue: maxValue,
     minValue: minValue,
     onMinCrossed: onMinCrossed,
@@ -60,13 +56,9 @@ const NumberInputField = _ref => {
     size: size,
     step: step,
     text: text,
+    value: input.value,
     className: className,
-    label: label,
-    error: getError({
-      label: label ?? '',
-      max: maxValue,
-      min: minValue
-    }, error)
+    "data-testid": dataTestId
   });
 };
 

package/dist/components/RadioField/index.js

@@ -1,7 +1,7 @@
 import { Radio } from '@ultraviolet/ui';
-import { useController } from 'react-hook-form';
 import { jsx } from '@emotion/react/jsx-runtime';
 import { useErrors } from '../../providers/ErrorContext/index.js';
+import { useFormField } from '../../hooks/useFormField.js';
 
 const RadioField = _ref => {
   let {
@@ -9,52 +9,57 @@ const RadioField = _ref => {
     'data-testid': dataTestId,
     disabled,
     id,
+    label = '',
     name,
     onBlur,
-    label = '',
     onChange,
     onFocus,
     required,
+    validate,
     value,
-    rules,
     tooltip
   } = _ref;
   const {
     getError
   } = useErrors();
   const {
-    field,
-    fieldState: {
-      error
-    }
-  } = useController({
+    input,
+    meta
+  } = useFormField(name, {
+    required,
+    type: 'radio',
+    validate,
+    value
+  });
+  const error = getError({
+    disabled,
+    label: label,
+    meta: meta,
     name,
-    rules: {
-      required,
-      ...rules
-    }
+    value: input.value
   });
   return jsx(Radio, {
-    name: field.name,
-    checked: field.value === value,
+    checked: input.checked,
     className: className,
     "data-testid": dataTestId,
     disabled: disabled,
-    error: getError({
-      label: typeof label === 'string' ? label : ''
-    }, error),
+    error: error,
     id: id,
-    onChange: () => {
-      field.onChange(value);
-      onChange?.(value);
+    name: input.name,
+    onChange: event => {
+      input.onChange(event);
+      onChange?.(event);
     },
     onBlur: event => {
-      field.onBlur();
+      input.onBlur(event);
       onBlur?.(event);
     },
-    onFocus: onFocus,
+    onFocus: event => {
+      input.onFocus(event);
+      onFocus?.(event);
+    },
     required: required,
-    value: value ?? '',
+    value: input.value,
     label: label,
     tooltip: tooltip
   });

package/dist/components/RadioGroupField/index.js

@@ -1,7 +1,7 @@
 import { RadioGroup } from '@ultraviolet/ui';
-import { useController } from 'react-hook-form';
 import { jsx } from '@emotion/react/jsx-runtime';
 import { useErrors } from '../../providers/ErrorContext/index.js';
+import { useFormField } from '../../hooks/useFormField.js';
 
 const RadioGroupField = _ref => {
   let {
@@ -10,9 +10,9 @@ const RadioGroupField = _ref => {
     name,
     onChange,
     required,
-    rules,
+    validate,
+    value,
     children,
-    label = '',
     error: customError,
     helper,
     direction
@@ -21,27 +21,30 @@ const RadioGroupField = _ref => {
     getError
   } = useErrors();
   const {
-    field,
-    fieldState: {
-      error
-    }
-  } = useController({
+    input,
+    meta
+  } = useFormField(name, {
+    required,
+    validate,
+    value
+  });
+  const error = getError({
+    label: legend,
+    meta: meta,
     name,
-    rules
+    value: input.value
   });
   return jsx(RadioGroup, {
     className: className,
-    name: field.name,
+    name: input.name,
     onChange: event => {
-      field.onChange(event);
-      onChange?.(event.target.value);
+      input.onChange(event);
+      onChange?.(event);
     },
     required: required,
-    value: field.value,
+    value: input.value,
     legend: legend,
-    error: getError({
-      label
-    }, error) ?? customError,
+    error: error ?? customError,
     helper: helper,
     direction: direction,
     children: children