@ultraviolet/form 2.0.0-next.2 → 2.0.0-next.4

package/dist/components/CheckboxField/index.js

@@ -1,12 +1,14 @@
 import { Checkbox } from '@ultraviolet/ui';
-import { Controller } 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,58 +18,58 @@ const CheckboxField = _ref => {
     onChange,
     onBlur,
     onFocus,
-    rules,
+    value,
     helper,
     tooltip,
-    'data-testid': dataTestId,
-    value
+    'data-testid': dataTestId
   } = _ref;
   const {
     getError
   } = useErrors();
-  return jsx(Controller, {
-    name: name,
-    disabled: disabled,
-    rules: {
-      required,
-      ...rules
+  const {
+    input,
+    meta
+  } = useFormField(name, {
+    disabled,
+    required,
+    type: 'checkbox',
+    validate,
+    value
+  });
+  const error = getError({
+    label,
+    meta: meta,
+    name,
+    value: input.value ?? input.checked
+  });
+  return jsx(Checkbox, {
+    name: input.name,
+    onChange: event => {
+      input.onChange(event);
+      onChange?.(event);
     },
-    render: _ref2 => {
-      let {
-        field,
-        fieldState: {
-          error
-        }
-      } = _ref2;
-      return jsx(Checkbox, {
-        name: field.name,
-        onChange: event => {
-          field.onChange(value ? [...(field.value ?? []), value] : event.target.checked);
-          onChange?.(event);
-        },
-        onBlur: event => {
-          field.onBlur();
-          onBlur?.(event);
-        },
-        onFocus: onFocus,
-        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,
-        className: className,
-        required: required,
-        "data-testid": dataTestId,
-        helper: helper,
-        tooltip: tooltip,
-        value: value,
-        children: children
-      });
-    }
+    onBlur: event => {
+      input.onBlur(event);
+      onBlur?.(event);
+    },
+    onFocus: event => {
+      input.onFocus(event);
+      onFocus?.(event);
+    },
+    size: size,
+    progress: progress,
+    disabled: disabled,
+    checked: input.checked,
+    error: error,
+    helper: helper,
+    ref: ref,
+    className: className,
+    value: input.value,
+    required: required,
+    "data-testid": dataTestId,
+    tooltip: tooltip,
+    children: children
   });
-};
+});
 
 export { CheckboxField };

package/dist/components/CheckboxGroupField/index.js

@@ -1,17 +1,17 @@
 import { CheckboxGroup } from '@ultraviolet/ui';
-import { Controller } 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
@@ -19,38 +19,38 @@ const CheckboxGroupField = _ref => {
   const {
     getError
   } = useErrors();
-  return jsx(Controller, {
-    name: name,
-    render: _ref2 => {
-      let {
-        field,
-        fieldState: {
-          error
-        }
-      } = _ref2;
-      return jsx(CheckboxGroup, {
-        legend: legend,
-        name: name,
-        value: field.value,
-        onChange: event => {
-          const fieldValue = field.value;
-          if (fieldValue?.includes(event.currentTarget.value)) {
-            field.onChange(fieldValue?.filter(currentValue => currentValue !== event.currentTarget.value));
-          } else {
-            field.onChange([...field.value, event.currentTarget.value]);
-          }
-          onChange?.(event);
-        },
-        error: getError({
-          label
-        }, error) ?? customError,
-        className: className,
-        direction: direction,
-        helper: helper,
-        required: required,
-        children: children
-      });
-    }
+  const {
+    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: fields.name,
+    value: fields.value,
+    onChange: event => {
+      if (fields.value?.includes(event.currentTarget.value)) {
+        fields.remove(fields.value.indexOf(event.currentTarget?.value));
+      } else {
+        fields.push(event.currentTarget.value);
+      }
+      onChange?.(event);
+    },
+    error: error ?? customError,
+    className: className,
+    direction: direction,
+    helper: helper,
+    required: required,
+    children: children
   });
 };
 CheckboxGroupField.Checkbox = CheckboxGroup.Checkbox;

package/dist/components/DateField/index.js

@@ -1,9 +1,7 @@
 import { DateInput } from '@ultraviolet/ui';
-import { Controller } 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,
@@ -29,64 +30,67 @@ const DateField = _ref => {
   const {
     getError
   } = useErrors();
-  return jsx(Controller, {
-    name: name,
-    rules: {
-      ...rules,
-      validate: {
-        ...rules?.validate,
-        minDate: minDateValidator(minDate),
-        maxDate: maxDateValidator(maxDate)
-      },
-      required
-    },
-    render: _ref2 => {
-      let {
-        field,
-        fieldState: {
-          error
+  const {
+    input,
+    meta
+  } = useFormField(name, {
+    disabled,
+    formatOnBlur,
+    initialValue,
+    maxDate,
+    minDate,
+    required,
+    validate,
+    value: inputVal
+  });
+  const error = getError({
+    label,
+    maxDate,
+    meta: meta,
+    minDate,
+    name,
+    value: input.value
+  });
+  return jsx(DateInput, {
+    label: label,
+    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(input.value)) {
+          input.onChange(newDate);
+          return;
         }
-      } = _ref2;
-      return jsx(DateInput, {
-        name: field.name,
-        label: label,
-        value: field.value,
-        format: format || (value => value ? parseDate(value).toLocaleDateString() : ''),
-        locale: locale,
-        required: required,
-        onChange: val => {
-          if (val && val instanceof Date) {
-            onChange?.(val);
-            const newDate = parseDate(val);
-            if (isEmpty(field.value)) {
-              field.onChange(newDate);
-              return;
-            }
-            const currentDate = parseDate(field.value);
-            newDate.setHours(currentDate.getHours(), currentDate.getMinutes());
-            field.onChange(newDate);
-          }
-        },
-        onBlur: e => {
-          field.onBlur();
-          onBlur?.(e);
-        },
-        onFocus: onFocus,
-        maxDate: maxDate,
-        minDate: minDate,
-        error: getError({
-          minDate,
-          maxDate,
-          label
-        }, error),
-        disabled: disabled,
-        autoFocus: autoFocus,
-        excludeDates: excludeDates,
-        "data-testid": dataTestId,
-        startDate: selectsRange ? field.value[0] : undefined,
-        endDate: selectsRange ? field.value[1] : undefined
-      });
-    }
+        const currentDate = parseDate(input.value);
+        newDate.setHours(currentDate.getHours(), currentDate.getMinutes());
+        input.onChange(newDate);
+      } else if (Array.isArray(val)) {
+        input.onChange(val);
+      }
+    },
+    onBlur: e => {
+      input.onBlur(e);
+      onBlur?.(e);
+    },
+    onFocus: e => {
+      input.onFocus(e);
+      onFocus?.(e);
+    },
+    maxDate: maxDate,
+    minDate: minDate,
+    startDate: selectsRange ? input.value[0] : undefined,
+    endDate: selectsRange ? input.value[1] : undefined,
+    error: error,
+    disabled: disabled,
+    autoFocus: autoFocus,
+    name: input.name,
+    "data-testid": dataTestId,
+    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 { Controller } 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,58 +17,48 @@ const NumberInputField = _ref => {
     size,
     step,
     text,
-    rules,
+    validate,
+    value,
     className,
-    label
+    'data-testid': dataTestId
   } = _ref;
   const {
-    getError
-  } = useErrors();
-  return jsx(Controller, {
+    input
+  } = useFormField(name, {
+    disabled,
+    required,
+    type: 'number',
+    validate,
+    value,
+    defaultValue: 0,
+    max: maxValue,
+    min: minValue
+  });
+  return jsx(NumberInput, {
     name: name,
-    rules: {
-      required,
-      max: maxValue,
-      min: minValue,
-      ...rules
+    disabled: disabled,
+    onBlur: event => {
+      input.onBlur(event);
+      onBlur?.(event);
+    },
+    onChange: event => {
+      input.onChange(event);
+      onChange?.(event);
+    },
+    onFocus: event => {
+      input.onFocus(event);
+      onFocus?.(event);
     },
-    render: _ref2 => {
-      let {
-        field,
-        fieldState: {
-          error
-        }
-      } = _ref2;
-      return jsx(NumberInput, {
-        name: field.name,
-        value: field.value,
-        disabled: disabled,
-        onBlur: event => {
-          field.onBlur();
-          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);
-          onChange?.(event);
-        },
-        onFocus: onFocus,
-        maxValue: maxValue,
-        minValue: minValue,
-        onMinCrossed: onMinCrossed,
-        onMaxCrossed: onMaxCrossed,
-        size: size,
-        step: step,
-        text: text,
-        className: className,
-        label: label,
-        error: getError({
-          label: label ?? '',
-          max: maxValue,
-          min: minValue
-        }, error)
-      });
-    }
+    maxValue: maxValue,
+    minValue: minValue,
+    onMinCrossed: onMinCrossed,
+    onMaxCrossed: onMaxCrossed,
+    size: size,
+    step: step,
+    text: text,
+    value: input.value,
+    className: className,
+    "data-testid": dataTestId
   });
 };