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

package/dist/components/TextInputField/index.js

@@ -1,153 +1,143 @@
 import { TextInput } from '@ultraviolet/ui';
 import { forwardRef } from 'react';
+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 TextInputField = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
-    afterSubmit,
-    allowNull,
     autoCapitalize,
     autoComplete,
     autoCorrect,
     autoFocus,
     autoSave,
-    beforeSubmit,
     className,
     cols,
-    'data-testid': dataTestId,
-    defaultValue,
     disabled,
     fillAvailable,
-    format,
-    formatOnBlur,
     generated,
     id,
-    initialValue,
-    isEqual,
     label = '',
-    max,
-    maxLength,
-    min,
-    minLength,
     multiline,
-    multiple,
     name,
     noTopLabel,
     notice,
-    onBlur,
     onChange,
     onFocus,
     onKeyDown,
     onKeyUp,
-    parse,
+    onBlur,
     placeholder,
     random,
     readOnly,
-    regex,
     required,
     resizable,
     rows,
-    subscription,
     type,
     unit,
     size,
-    validate,
-    validateFields,
+    rules,
     valid,
-    value
-  } = _ref;
-  const {
-    getError
-  } = useErrors();
-  const {
-    input,
-    meta
-  } = useFormField(name, {
-    afterSubmit,
-    allowNull,
-    beforeSubmit,
-    defaultValue,
-    disabled,
+    parse,
     format,
-    formatOnBlur,
-    initialValue,
-    isEqual,
-    max,
-    maxLength,
+    regex: regexes,
     min,
-    minLength,
-    multiple,
-    parse,
-    regex,
-    required,
-    subscription,
-    type,
-    validate,
-    validateFields,
-    value
-  });
-  const error = getError({
-    label,
     max,
-    maxLength,
-    meta: meta,
-    min,
     minLength,
-    name,
-    regex,
-    value: input.value
-  });
-  return jsx(TextInput, {
-    autoCapitalize: autoCapitalize,
-    autoComplete: autoComplete,
-    autoCorrect: autoCorrect,
-    autoFocus: autoFocus,
-    autoSave: autoSave,
-    className: className,
-    cols: cols,
-    "data-testid": dataTestId,
-    disabled: disabled,
-    error: error,
-    fillAvailable: fillAvailable,
-    generated: generated,
-    id: id,
-    label: label,
-    max: max,
-    maxLength: maxLength,
-    min: min,
-    minLength: minLength,
-    multiline: multiline,
-    name: input.name,
-    notice: notice,
-    onBlur: event => {
-      input.onBlur(event);
-      onBlur?.(event);
-    },
-    onChange: event => {
-      input.onChange(event);
-      onChange?.(event);
-    },
-    onFocus: event => {
-      input.onFocus(event);
-      onFocus?.(event);
+    maxLength,
+    validate,
+    defaultValue,
+    customError
+  } = _ref;
+  const {
+    getError
+  } = useErrors();
+  return jsx(Controller, {
+    name: name,
+    rules: {
+      required,
+      pattern: regexes && new RegExp(regexes.map(regex => {
+        const newRegex = Array.isArray(regex) ? regex.map(reg => reg.source).join('|') : regex.source;
+        return `(?=${newRegex})`;
+      }).join('')),
+      validate,
+      minLength,
+      maxLength,
+      max,
+      min,
+      ...rules
     },
-    onKeyUp: onKeyUp,
-    onKeyDown: onKeyDown,
-    placeholder: placeholder,
-    random: random,
-    readOnly: readOnly,
-    ref: ref,
-    required: required,
-    resizable: resizable,
-    rows: rows,
-    type: input.type,
-    value: input.value,
-    noTopLabel: noTopLabel,
-    unit: unit,
-    valid: valid,
-    size: size
+    defaultValue: defaultValue,
+    render: _ref2 => {
+      let {
+        field,
+        fieldState: {
+          error
+        }
+      } = _ref2;
+      const transformedValue = () => {
+        if (format) {
+          return format(field.value);
+        }
+        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);
+        },
+        onChange: event => {
+          if (parse) {
+            field.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: ref
+      });
+    }
   });
 });
 

package/dist/components/TimeField/index.js

@@ -1,7 +1,6 @@
 import { TimeInput } from '@ultraviolet/ui';
-import { useMemo } from 'react';
+import { Controller } from 'react-hook-form';
 import { jsx } from '@emotion/react/jsx-runtime';
-import { useFormField } from '../../hooks/useFormField.js';
 
 const parseTime = date => {
   const timeStr = date && typeof date !== 'string' ? date.toLocaleTimeString().slice(0, -3) : '';
@@ -17,73 +16,73 @@ const TimeField = _ref => {
     schedule,
     placeholder,
     disabled,
-    initialValue,
-    validate,
     readOnly,
-    value,
-    onChange,
     onBlur,
     onFocus,
+    onChange,
     isLoading,
     isClearable,
     inputId,
     id,
-    formatOnBlur,
     animation,
     animationDuration,
     animationOnChange,
     className,
     isSearchable,
+    rules,
     options,
     'data-testid': dataTestId
   } = _ref;
-  const {
-    input,
-    meta
-  } = useFormField(name, {
-    disabled,
-    formatOnBlur,
-    initialValue,
-    required,
-    validate,
-    value
-  });
-  const error = useMemo(() => input.value && meta.error ? meta.error : undefined, [input.value, meta.error]);
-  return jsx(TimeInput, {
-    placeholder: placeholder,
-    schedule: schedule,
-    required: required,
-    value: parseTime(input.value),
-    onChange: (val, action) => {
-      if (!val) return;
-      onChange?.(val, action);
-      const [hours, minutes] = val.value.split(':');
-      const date = input.value ? new Date(input.value) : new Date();
-      date.setHours(Number(hours), Number(minutes), 0);
-      input.onChange(date);
-    },
-    onBlur: event => {
-      input.onBlur(event);
-      onBlur?.(event);
-    },
-    onFocus: event => {
-      input.onFocus(event);
-      onFocus?.(event);
+  return jsx(Controller, {
+    name: name,
+    rules: {
+      required,
+      ...rules
     },
-    error: error,
-    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
+    render: _ref2 => {
+      let {
+        field,
+        fieldState: {
+          error
+        }
+      } = _ref2;
+      return jsx(TimeInput, {
+        name: field.name,
+        placeholder: placeholder,
+        schedule: schedule,
+        required: required,
+        value: parseTime(field.value),
+        onChange: (val, action) => {
+          if (!val) return;
+          onChange?.(val, action);
+          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
+      });
+    }
   });
 };
 

package/dist/components/ToggleField/index.js

@@ -1,72 +1,63 @@
 import { Toggle } from '@ultraviolet/ui';
+import { Controller } from 'react-hook-form';
 import { jsx } from '@emotion/react/jsx-runtime';
-import { useFormField } from '../../hooks/useFormField.js';
 
 const ToggleField = _ref => {
   let {
-    afterSubmit,
-    allowNull,
-    beforeSubmit,
     className,
-    data,
-    defaultValue,
     disabled,
-    format,
-    formatOnBlur,
-    initialValue,
-    isEqual,
     label,
-    multiple,
     name,
     onChange,
-    parse,
     required,
     size,
-    subscription,
     tooltip,
-    validate,
-    validateFields,
-    value,
+    rules,
     labelPosition,
+    parse,
+    format,
     'data-testid': dataTestId
   } = _ref;
-  const {
-    input
-  } = useFormField(name, {
-    afterSubmit,
-    allowNull,
-    beforeSubmit,
-    data,
-    defaultValue,
-    disabled,
-    format,
-    formatOnBlur,
-    initialValue,
-    isEqual,
-    multiple,
-    parse,
-    required,
-    subscription,
-    type: 'checkbox',
-    validate,
-    validateFields,
-    value
-  });
-  return jsx(Toggle, {
-    checked: input.checked,
-    tooltip: tooltip,
-    onChange: event => {
-      input.onChange(event);
-      onChange?.(event);
-    },
-    label: label,
-    size: size,
+  return jsx(Controller, {
     name: name,
-    disabled: disabled,
-    labelPosition: labelPosition,
-    className: className,
-    required: required,
-    "data-testid": dataTestId
+    rules: {
+      required,
+      ...rules
+    }
+    // defaultValue={value as any}
+    ,
+    render: _ref2 => {
+      let {
+        field
+      } = _ref2;
+      const transformedValue = () => {
+        if (format) {
+          return format(field.value);
+        }
+        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
+      });
+    }
   });
 };
 

package/dist/hooks/useField.js

@@ -1,7 +1,20 @@
 import { useFormContext, useController } from 'react-hook-form';
 
 /**
- * @deprecated
+ * @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)
+ * }
+ * ```
+
  */
 const useFieldDeprecated = (name, options) => {
   const {

package/dist/hooks/useFieldArray.js

@@ -1,7 +1,7 @@
 import { useFieldArray, useWatch } from 'react-hook-form';
 
 /**
- * @deprecated
+ * @deprecated Use [useFieldArray](https://www.react-hook-form.com/api/usefieldarray/)
  */
 const useFieldArrayDeprecated = (name, options) => {
   const {

package/dist/hooks/useForm.js

@@ -3,7 +3,16 @@ import { useFormContext } from 'react-hook-form';
 import { FormSubmitContext } from '../components/Form/index.js';
 
 /**
- * @deprecated
+ * @deprecated Use [useFormContext](https://www.react-hook-form.com/api/useformcontext/)
+ *
+ * @example
+ * ```tsx
+ * const Input = () {
+ *   const { setValue } = useFormContext()
+ *
+ *   setValue('username', 'John Wick')
+ * }
+ * ```
  */
 const useFormDeprecated = () => {
   const {

package/dist/hooks/useFormState.js

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

package/dist/hooks/useOnFieldChange.js

@@ -1,30 +1,27 @@
 import { useRef, useEffect } from 'react';
-import { useFormState, useField } from 'react-final-form';
+import { useFormContext } from 'react-hook-form';
 
-const useOnFieldChange = function (name, callback, enabled) {
+/**
+ * @deprecated
+ */
+const useOnFieldChange = function (fieldName, callback, enabled) {
   if (enabled === void 0) {
     enabled = true;
   }
   const {
-    values
-  } = useFormState();
-  const {
-    input: {
-      value
-    }
-  } = useField(name, {
-    allowNull: true,
-    subscription: {
-      value: true
-    }
-  });
-  const previousValues = useRef(value);
+    watch,
+    getValues
+  } = useFormContext();
+  const previousValues = useRef(getValues(fieldName));
   useEffect(() => {
-    if (previousValues.current !== value && enabled) {
-      previousValues.current = value;
-      callback(value, values);
-    }
-  }, [value, values, callback, enabled]);
+    const subscription = watch(value => {
+      if (previousValues.current !== value[fieldName] && enabled) {
+        previousValues.current = value[fieldName];
+        callback(value[fieldName], value)?.catch(() => null);
+      }
+    });
+    return () => subscription.unsubscribe();
+  }, [callback, enabled, watch, getValues, fieldName]);
 };
 
 export { useOnFieldChange };