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

package/dist/components/RadioField/index.js

@@ -1,65 +1,61 @@
 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 {
-    className,
-    'data-testid': dataTestId,
-    disabled,
-    id,
-    label = '',
-    name,
-    onBlur,
-    onChange,
-    onFocus,
-    required,
-    validate,
-    value,
-    tooltip
-  } = _ref;
+const RadioField = ({
+  className,
+  'data-testid': dataTestId,
+  disabled,
+  id,
+  name,
+  onBlur,
+  label = '',
+  onChange,
+  onFocus,
+  required,
+  value,
+  rules,
+  tooltip,
+  shouldUnregister = false
+}) => {
   const {
     getError
   } = useErrors();
   const {
-    input,
-    meta
-  } = useFormField(name, {
-    required,
-    type: 'radio',
-    validate,
-    value
-  });
-  const error = getError({
-    disabled,
-    label: label,
-    meta: meta,
+    field,
+    fieldState: {
+      error
+    }
+  } = useController({
     name,
-    value: input.value
+    shouldUnregister,
+    rules: {
+      required,
+      ...rules
+    }
   });
   return jsx(Radio, {
-    checked: input.checked,
+    name: field.name,
+    checked: field.value === value,
     className: className,
     "data-testid": dataTestId,
     disabled: disabled,
-    error: error,
+    error: getError({
+      label: typeof label === 'string' ? label : ''
+    }, error),
     id: id,
-    name: input.name,
-    onChange: event => {
-      input.onChange(event);
-      onChange?.(event);
+    onChange: () => {
+      field.onChange(value);
+      onChange?.(value);
     },
     onBlur: event => {
-      input.onBlur(event);
+      field.onBlur();
       onBlur?.(event);
     },
-    onFocus: event => {
-      input.onFocus(event);
-      onFocus?.(event);
-    },
+    onFocus: onFocus,
     required: required,
-    value: input.value,
+    value: value ?? '',
     label: label,
     tooltip: tooltip
   });

package/dist/components/RadioGroupField/index.js

@@ -1,50 +1,51 @@
 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 {
-    className,
-    legend = '',
-    name,
-    onChange,
-    required,
-    validate,
-    value,
-    children,
-    error: customError,
-    helper,
-    direction
-  } = _ref;
+const RadioGroupField = ({
+  className,
+  legend = '',
+  name,
+  onChange,
+  required,
+  rules,
+  children,
+  label = '',
+  error: customError,
+  helper,
+  direction,
+  shouldUnregister = false
+}) => {
   const {
     getError
   } = useErrors();
   const {
-    input,
-    meta
-  } = useFormField(name, {
-    required,
-    validate,
-    value
-  });
-  const error = getError({
-    label: legend,
-    meta: meta,
+    field,
+    fieldState: {
+      error
+    }
+  } = useController({
     name,
-    value: input.value
+    shouldUnregister,
+    rules: {
+      required,
+      ...rules
+    }
   });
   return jsx(RadioGroup, {
     className: className,
-    name: input.name,
+    name: field.name,
     onChange: event => {
-      input.onChange(event);
-      onChange?.(event);
+      field.onChange(event);
+      onChange?.(event.target.value);
     },
     required: required,
-    value: input.value,
+    value: field.value,
     legend: legend,
-    error: error ?? customError,
+    error: getError({
+      label
+    }, error) ?? customError,
     helper: helper,
     direction: direction,
     children: children

package/dist/components/SelectInputField/index.js

@@ -1,62 +1,57 @@
 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 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,
-    value,
-    noTopLabel,
-    noOptionsMessage,
-    customStyle,
-    validate,
-    'data-testid': dataTestId
-  } = _ref;
-  const {
-    getError
-  } = useErrors();
-  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 identity = <T,>(x: T) => x
+
+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);
@@ -75,61 +70,58 @@ 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,70 +1,62 @@
 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 {
-    name,
-    value,
-    onChange,
-    showTick,
-    type,
-    disabled,
-    children,
-    className,
-    onFocus,
-    onBlur,
-    required,
-    validate,
-    tooltip,
-    id,
-    label,
-    'data-testid': dataTestId
-  } = _ref;
-  const {
-    getError
-  } = useErrors();
+const SelectableCardField = ({
+  name,
+  value,
+  onChange,
+  showTick,
+  type,
+  disabled,
+  children,
+  className,
+  onFocus,
+  onBlur,
+  required,
+  tooltip,
+  id,
+  label,
+  rules,
+  shouldUnregister = false,
+  'data-testid': dataTestId
+}) => {
   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,
+    value: value ?? '',
+    name: field.name,
     "data-testid": dataTestId,
     children: children
   });

package/dist/components/Submit/index.js

@@ -1,44 +1,31 @@
 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 => {
-  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 {
-    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,18 @@
 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 SubmitErrorAlert = ({
+  className
+}) => {
+  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,43 +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
-  } = _ref;
+const TagInputField = ({
+  className,
+  disabled,
+  id,
+  name,
+  onChange,
+  placeholder,
+  required,
+  rules,
+  variant,
+  shouldUnregister = false,
+  'data-testid': dataTestId
+}) => {
   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,
+    tags: field.value,
     "data-testid": dataTestId
   });
 };