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

package/dist/components/SelectInputField/index.js

@@ -1,10 +1,12 @@
 import { SelectInput } from '@ultraviolet/ui';
 import { useMemo, Children, useCallback } from 'react';
+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 identity = x => x;
+// const identity = <T,>(x: T) => x
+
 const SelectInputField = _ref => {
   let {
     animation,
@@ -13,9 +15,9 @@ const SelectInputField = _ref => {
     children,
     className,
     disabled,
-    error: errorProp,
+    // error: errorProp,
     format: formatProp = identity,
-    formatOnBlur,
+    // formatOnBlur,
     id,
     inputId,
     isClearable,
@@ -35,16 +37,12 @@ const SelectInputField = _ref => {
     placeholder,
     readOnly,
     required,
-    value,
+    rules,
     noTopLabel,
     noOptionsMessage,
     customStyle,
-    validate,
-    'data-testid': dataTestId
+    shouldUnregister = false
   } = _ref;
-  const {
-    getError
-  } = useErrors();
   const options = useMemo(() => optionsProp || Children.toArray(children).flat().filter(Boolean).map(_ref2 => {
     let {
       props: {
@@ -75,63 +73,59 @@ const SelectInputField = _ref => {
     return formatProp(selected, name);
   }, [formatProp, multiple, name, options]);
   const {
-    input,
-    meta
-  } = useFormField(name, {
-    disabled,
-    format,
-    formatOnBlur,
-    maxLength,
-    minLength: minLength || required ? 1 : undefined,
-    multiple,
-    parse,
-    required,
-    value,
-    validate
-  });
-  const error = getError({
-    errorProp,
-    label,
-    meta: meta,
+    getError
+  } = useErrors();
+  const {
+    field,
+    fieldState: {
+      error
+    }
+  } = useController({
     name,
-    value: input.value
+    shouldUnregister,
+    rules: {
+      required,
+      minLength: minLength || required ? 1 : undefined,
+      maxLength,
+      ...rules
+    }
   });
   return jsx(SelectInput, {
+    name: field.name,
     animation: animation,
     animationDuration: animationDuration,
     animationOnChange: animationOnChange,
     className: className,
     disabled: disabled,
-    error: error,
+    error: getError({
+      label,
+      minLength,
+      maxLength
+    }, error),
     id: id,
     inputId: inputId,
     isClearable: isClearable,
     isLoading: isLoading,
-    isMulti: input.multiple,
+    isMulti: multiple,
     customStyle: customStyle,
     isSearchable: isSearchable,
     menuPortalTarget: menuPortalTarget,
-    name: name,
     onBlur: event => {
-      input.onBlur(event);
+      field.onBlur();
       onBlur?.(event);
     },
     onChange: (event, action) => {
-      input.onChange(event);
+      field.onChange(parse(event));
       onChange?.(event, action);
     },
-    onFocus: event => {
-      input.onFocus(event);
-      onFocus?.(event);
-    },
+    onFocus: onFocus,
     options: options,
     placeholder: placeholder,
     readOnly: readOnly,
-    value: input.value,
     noTopLabel: noTopLabel,
     required: required,
+    value: format(field.value),
     noOptionsMessage: noOptionsMessage,
-    "data-testid": dataTestId,
     children: children
   });
 };

package/dist/components/SelectableCardField/index.js

@@ -1,7 +1,6 @@
 import { SelectableCard } 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 SelectableCardField = _ref => {
   let {
@@ -16,56 +15,48 @@ const SelectableCardField = _ref => {
     onFocus,
     onBlur,
     required,
-    validate,
     tooltip,
     id,
     label,
-    'data-testid': dataTestId
+    rules,
+    shouldUnregister = false
   } = _ref;
   const {
-    getError
-  } = useErrors();
-  const {
-    input,
-    meta
-  } = useFormField(name, {
-    disabled,
-    required,
-    type: type ?? 'radio',
-    validate,
-    value
-  });
-  const error = getError({
-    label: name,
-    meta: meta,
+    field,
+    fieldState: {
+      error
+    }
+  } = useController({
     name,
-    value: input.value
+    shouldUnregister,
+    rules: {
+      required,
+      ...rules
+    }
   });
   return jsx(SelectableCard, {
     isError: !!error,
     showTick: showTick,
-    checked: input.checked,
+    checked: field.value === value,
     className: className,
     disabled: disabled,
-    name: input.name,
     onChange: event => {
-      input.onChange(event);
+      field.onChange(event);
       onChange?.(event);
     },
     onBlur: event => {
-      input.onBlur(event);
+      field.onBlur();
       onBlur?.(event);
     },
     onFocus: event => {
-      input.onFocus(event);
       onFocus?.(event);
     },
     type: type,
-    value: input.value,
     id: id,
     tooltip: tooltip,
     label: label,
-    "data-testid": dataTestId,
+    value: value ?? '',
+    name: field.name,
     children: children
   });
 };

package/dist/components/Submit/index.js

@@ -1,6 +1,5 @@
 import { Button } from '@ultraviolet/ui';
-import { useState, useEffect } from 'react';
-import { useFormState } from 'react-final-form';
+import { useFormState } from 'react-hook-form';
 import { jsx } from '@emotion/react/jsx-runtime';
 
 const Submit = _ref => {
@@ -18,27 +17,16 @@ const Submit = _ref => {
     onClick
   } = _ref;
   const {
-    invalid,
-    submitting,
-    hasValidationErrors,
-    dirtySinceLastSubmit
-  } = useFormState({
-    subscription: {
-      dirtySinceLastSubmit: true,
-      hasValidationErrors: true,
-      invalid: true,
-      submitting: true
-    }
-  });
-  const [isLoading, setIsLoading] = useState(true);
-  const isDisabled = disabled || submitting || isLoading || invalid && hasValidationErrors && !dirtySinceLastSubmit;
-  useEffect(() => setIsLoading(false), []);
+    isSubmitting,
+    isValid
+  } = useFormState();
+  const isDisabled = disabled || isSubmitting || !isValid;
   return jsx(Button, {
     className: className,
     disabled: isDisabled,
     icon: icon,
     iconPosition: iconPosition,
-    isLoading: submitting,
+    isLoading: isSubmitting,
     size: size,
     type: "submit",
     variant: variant,

package/dist/components/SubmitErrorAlert/index.js

@@ -1,26 +1,19 @@
 import { Alert } from '@ultraviolet/ui';
-import { FormSpy } from 'react-final-form';
+import { useFormState } from 'react-hook-form';
 import { jsx } from '@emotion/react/jsx-runtime';
 
 const SubmitErrorAlert = _ref => {
   let {
     className
   } = _ref;
-  return jsx(FormSpy, {
-    subscription: {
-      submitError: true
-    },
-    children: _ref2 => {
-      let {
-        submitError
-      } = _ref2;
-      return submitError ? jsx(Alert, {
-        className: className,
-        sentiment: "danger",
-        children: submitError
-      }) : null;
-    }
-  });
+  const {
+    errors
+  } = useFormState();
+  return errors?.root?.['submit']?.message ? jsx(Alert, {
+    className: className,
+    sentiment: "danger",
+    children: errors.root['submit'].message
+  }) : null;
 };
 
 export { SubmitErrorAlert };

package/dist/components/TagInputField/index.js

@@ -1,44 +1,42 @@
 import { TagInput } from '@ultraviolet/ui';
+import { useController } from 'react-hook-form';
 import { jsx } from '@emotion/react/jsx-runtime';
-import { useFormField } from '../../hooks/useFormField.js';
 
 const TagInputField = _ref => {
   let {
     className,
-    'data-testid': dataTestId,
     disabled,
     id,
     name,
     onChange,
     placeholder,
     required,
-    tags,
-    validate,
-    variant
+    rules,
+    variant,
+    shouldUnregister = false
   } = _ref;
   const {
-    input
-  } = useFormField(name, {
-    disabled,
-    required,
-    initialValue: tags,
-    type: 'text',
-    validate,
-    value: tags
+    field
+  } = useController({
+    name,
+    rules: {
+      required,
+      shouldUnregister,
+      ...rules
+    }
   });
   return jsx(TagInput, {
+    name: field.name,
     className: className,
     disabled: disabled,
     id: id,
-    name: name,
     onChange: event => {
+      field.onChange(event);
       onChange?.(event);
-      input.onChange(event);
     },
     placeholder: placeholder,
     variant: variant,
-    tags: input.value,
-    "data-testid": dataTestId
+    tags: field.value
   });
 };
 

package/dist/components/TextInputField/index.js

@@ -1,105 +1,91 @@
 import { TextInput } from '@ultraviolet/ui';
-import { forwardRef } from 'react';
+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 TextInputField = /*#__PURE__*/forwardRef((_ref, ref) => {
+const TextInputField = _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
+    parse,
+    format,
+    formatOnBlur = false,
+    regex: regexes,
+    min,
+    max,
+    minLength,
+    maxLength,
+    validate,
+    defaultValue,
+    customError,
+    innerRef,
+    shouldUnregister = false
   } = _ref;
   const {
     getError
   } = useErrors();
   const {
-    input,
-    meta
-  } = useFormField(name, {
-    afterSubmit,
-    allowNull,
-    beforeSubmit,
-    defaultValue,
-    disabled,
-    format,
-    formatOnBlur,
-    initialValue,
-    isEqual,
-    max,
-    maxLength,
-    min,
-    minLength,
-    multiple,
-    parse,
-    regex,
-    required,
-    subscription,
-    type,
-    validate,
-    validateFields,
-    value
-  });
-  const error = getError({
-    label,
-    max,
-    maxLength,
-    meta: meta,
-    min,
-    minLength,
+    field,
+    fieldState: {
+      error
+    }
+  } = useController({
     name,
-    regex,
-    value: input.value
+    defaultValue,
+    shouldUnregister,
+    rules: {
+      required,
+      validate: {
+        ...(regexes ? {
+          pattern: value => regexes.every(regex => value === undefined || value === '' || (Array.isArray(regex) ? regex.some(regexOr => regexOr.test(value)) : regex.test(value)))
+        } : {}),
+        ...validate
+      },
+      minLength,
+      maxLength,
+      max,
+      min,
+      ...rules
+    }
   });
+  const transformedValue = () => {
+    if (format && !formatOnBlur) {
+      return format(field.value);
+    }
+    return field.value;
+  };
   return jsx(TextInput, {
+    name: field.name,
     autoCapitalize: autoCapitalize,
     autoComplete: autoComplete,
     autoCorrect: autoCorrect,
@@ -107,30 +93,40 @@ const TextInputField = /*#__PURE__*/forwardRef((_ref, ref) => {
     autoSave: autoSave,
     className: className,
     cols: cols,
-    "data-testid": dataTestId,
     disabled: disabled,
-    error: error,
+    error: customError ?? getError({
+      regex: regexes,
+      minLength,
+      maxLength,
+      label,
+      min,
+      max,
+      value: field.value
+    }, error),
     fillAvailable: fillAvailable,
     generated: generated,
     id: id,
     label: label,
-    max: max,
-    maxLength: maxLength,
-    min: min,
-    minLength: minLength,
     multiline: multiline,
-    name: input.name,
     notice: notice,
+    required: required,
     onBlur: event => {
-      input.onBlur(event);
+      field.onBlur();
       onBlur?.(event);
+      if (formatOnBlur && format) {
+        field.onChange(format(field.value));
+      }
     },
     onChange: event => {
-      input.onChange(event);
-      onChange?.(event);
+      if (parse) {
+        field.onChange(parse(event));
+        onChange?.(parse(event));
+      } else {
+        field.onChange(event);
+        onChange?.(event);
+      }
     },
     onFocus: event => {
-      input.onFocus(event);
       onFocus?.(event);
     },
     onKeyUp: onKeyUp,
@@ -138,17 +134,16 @@ const TextInputField = /*#__PURE__*/forwardRef((_ref, ref) => {
     placeholder: placeholder,
     random: random,
     readOnly: readOnly,
-    ref: ref,
-    required: required,
     resizable: resizable,
     rows: rows,
-    type: input.type,
-    value: input.value,
+    type: type,
     noTopLabel: noTopLabel,
     unit: unit,
     valid: valid,
-    size: size
+    size: size,
+    value: transformedValue(),
+    ref: innerRef
   });
-});
+};
 
 export { TextInputField };

package/dist/components/TimeField/index.js

@@ -1,7 +1,6 @@
 import { TimeInput } from '@ultraviolet/ui';
-import { useMemo } from 'react';
+import { useController } 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,60 +16,59 @@ 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
+    'data-testid': dataTestId,
+    shouldUnregister = false
   } = _ref;
   const {
-    input,
-    meta
-  } = useFormField(name, {
-    disabled,
-    formatOnBlur,
-    initialValue,
-    required,
-    validate,
-    value
+    field,
+    fieldState: {
+      error
+    }
+  } = useController({
+    name,
+    shouldUnregister,
+    rules: {
+      required,
+      ...rules
+    }
   });
-  const error = useMemo(() => input.value && meta.error ? meta.error : undefined, [input.value, meta.error]);
   return jsx(TimeInput, {
+    name: field.name,
     placeholder: placeholder,
     schedule: schedule,
     required: required,
-    value: parseTime(input.value),
-    onChange: (val, action) => {
+    value: parseTime(field.value),
+    onChange: val => {
       if (!val) return;
-      onChange?.(val, action);
+      onChange?.(val);
       const [hours, minutes] = val.value.split(':');
-      const date = input.value ? new Date(input.value) : new Date();
+      const date = field.value ? new Date(field.value) : new Date();
       date.setHours(Number(hours), Number(minutes), 0);
-      input.onChange(date);
+      field.onChange(date);
     },
     onBlur: event => {
-      input.onBlur(event);
+      field.onBlur();
       onBlur?.(event);
     },
     onFocus: event => {
-      input.onFocus(event);
       onFocus?.(event);
     },
-    error: error,
+    error: error?.message,
     disabled: disabled,
     readOnly: readOnly,
     animation: animation,