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

package/dist/components/CheckboxField/index.js

@@ -1,5 +1,5 @@
 import { Checkbox } from '@ultraviolet/ui';
-import { Controller } from 'react-hook-form';
+import { useController } from 'react-hook-form';
 import { jsx } from '@emotion/react/jsx-runtime';
 import { useErrors } from '../../providers/ErrorContext/index.js';
 
@@ -25,49 +25,46 @@ const CheckboxField = _ref => {
   const {
     getError
   } = useErrors();
-  return jsx(Controller, {
-    name: name,
-    disabled: disabled,
+  const {
+    field,
+    fieldState: {
+      error
+    }
+  } = useController({
+    name,
+    disabled,
     rules: {
       required,
       ...rules
-    },
-    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
-      });
     }
   });
+  return jsx(Checkbox, {
+    name: field.name,
+    onChange: event => {
+      field.onChange(value ? [...(field.value ?? []), value] : event.target.checked);
+      onChange?.(event.target.checked);
+    },
+    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
+  });
 };
 
 export { CheckboxField };

package/dist/components/CheckboxGroupField/index.js

@@ -1,5 +1,5 @@
 import { CheckboxGroup } from '@ultraviolet/ui';
-import { Controller } from 'react-hook-form';
+import { useController } from 'react-hook-form';
 import { jsx } from '@emotion/react/jsx-runtime';
 import { useErrors } from '../../providers/ErrorContext/index.js';
 
@@ -19,38 +19,35 @@ 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 {
+    field,
+    fieldState: {
+      error
     }
+  } = useController({
+    name
+  });
+  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.currentTarget.value);
+    },
+    error: getError({
+      label
+    }, error) ?? customError,
+    className: className,
+    direction: direction,
+    helper: helper,
+    required: required,
+    children: children
   });
 };
 CheckboxGroupField.Checkbox = CheckboxGroup.Checkbox;

package/dist/components/DateField/index.js

@@ -1,5 +1,5 @@
 import { DateInput } from '@ultraviolet/ui';
-import { Controller } from 'react-hook-form';
+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';
@@ -29,8 +29,13 @@ const DateField = _ref => {
   const {
     getError
   } = useErrors();
-  return jsx(Controller, {
-    name: name,
+  const {
+    field,
+    fieldState: {
+      error
+    }
+  } = useController({
+    name,
     rules: {
       ...rules,
       validate: {
@@ -39,55 +44,50 @@ const DateField = _ref => {
         maxDate: maxDateValidator(maxDate)
       },
       required
-    },
-    render: _ref2 => {
-      let {
-        field,
-        fieldState: {
-          error
-        }
-      } = _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
-      });
     }
   });
+  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);
+      } else if (Array.isArray(val)) {
+        field.onChange(val);
+      }
+    },
+    onBlur: e => {
+      field.onBlur();
+      onBlur?.(e);
+    },
+    onFocus: onFocus,
+    maxDate: maxDate,
+    minDate: minDate,
+    error: getError({
+      minDate,
+      maxDate,
+      label
+    }, error),
+    disabled: disabled,
+    autoFocus: autoFocus,
+    excludeDates: excludeDates,
+    selectsRange: selectsRange,
+    "data-testid": dataTestId,
+    startDate: selectsRange && Array.isArray(field.value) ? field.value[0] : undefined,
+    endDate: selectsRange && Array.isArray(field.value) ? field.value[1] : undefined
+  });
 };
 
 export { DateField };

package/dist/components/NumberInputField/index.js

@@ -1,5 +1,5 @@
 import { NumberInput } from '@ultraviolet/ui';
-import { Controller } from 'react-hook-form';
+import { useController } from 'react-hook-form';
 import { jsx } from '@emotion/react/jsx-runtime';
 import { useErrors } from '../../providers/ErrorContext/index.js';
 
@@ -25,52 +25,49 @@ const NumberInputField = _ref => {
   const {
     getError
   } = useErrors();
-  return jsx(Controller, {
-    name: name,
+  const {
+    field,
+    fieldState: {
+      error
+    }
+  } = useController({
+    name,
     rules: {
-      required,
       max: maxValue,
       min: minValue,
+      required,
       ...rules
-    },
-    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)
-      });
     }
   });
+  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)
+  });
 };
 
 export { NumberInputField };

package/dist/components/RadioField/index.js

@@ -1,5 +1,5 @@
 import { Radio } from '@ultraviolet/ui';
-import { Controller } from 'react-hook-form';
+import { useController } from 'react-hook-form';
 import { jsx } from '@emotion/react/jsx-runtime';
 import { useErrors } from '../../providers/ErrorContext/index.js';
 
@@ -22,45 +22,42 @@ const RadioField = _ref => {
   const {
     getError
   } = useErrors();
-  return jsx(Controller, {
-    name: name,
+  const {
+    field,
+    fieldState: {
+      error
+    }
+  } = useController({
+    name,
     rules: {
       required,
       ...rules
-    },
-    render: _ref2 => {
-      let {
-        field,
-        fieldState: {
-          error
-        }
-      } = _ref2;
-      return jsx(Radio, {
-        name: field.name,
-        checked: field.value === value,
-        className: className,
-        "data-testid": dataTestId,
-        disabled: disabled,
-        error: getError({
-          label: typeof label === 'string' ? label : ''
-        }, error),
-        id: id,
-        onChange: event => {
-          field.onChange(value);
-          onChange?.(event);
-        },
-        onBlur: event => {
-          field.onBlur();
-          onBlur?.(event);
-        },
-        onFocus: onFocus,
-        required: required,
-        value: value ?? '',
-        label: label,
-        tooltip: tooltip
-      });
     }
   });
+  return jsx(Radio, {
+    name: field.name,
+    checked: field.value === value,
+    className: className,
+    "data-testid": dataTestId,
+    disabled: disabled,
+    error: getError({
+      label: typeof label === 'string' ? label : ''
+    }, error),
+    id: id,
+    onChange: () => {
+      field.onChange(value);
+      onChange?.(value);
+    },
+    onBlur: event => {
+      field.onBlur();
+      onBlur?.(event);
+    },
+    onFocus: onFocus,
+    required: required,
+    value: value ?? '',
+    label: label,
+    tooltip: tooltip
+  });
 };
 
 export { RadioField };

package/dist/components/RadioGroupField/index.js

@@ -1,5 +1,5 @@
 import { RadioGroup } from '@ultraviolet/ui';
-import { Controller } from 'react-hook-form';
+import { useController } from 'react-hook-form';
 import { jsx } from '@emotion/react/jsx-runtime';
 import { useErrors } from '../../providers/ErrorContext/index.js';
 
@@ -20,34 +20,31 @@ const RadioGroupField = _ref => {
   const {
     getError
   } = useErrors();
-  return jsx(Controller, {
-    name: name,
-    rules: rules,
-    render: _ref2 => {
-      let {
-        field,
-        fieldState: {
-          error
-        }
-      } = _ref2;
-      return jsx(RadioGroup, {
-        className: className,
-        name: field.name,
-        onChange: event => {
-          field.onChange(event);
-          onChange?.(event);
-        },
-        required: required,
-        value: field.value,
-        legend: legend,
-        error: getError({
-          label
-        }, error) ?? customError,
-        helper: helper,
-        direction: direction,
-        children: children
-      });
+  const {
+    field,
+    fieldState: {
+      error
     }
+  } = useController({
+    name,
+    rules
+  });
+  return jsx(RadioGroup, {
+    className: className,
+    name: field.name,
+    onChange: event => {
+      field.onChange(event);
+      onChange?.(event.target.value);
+    },
+    required: required,
+    value: field.value,
+    legend: legend,
+    error: getError({
+      label
+    }, error) ?? customError,
+    helper: helper,
+    direction: direction,
+    children: children
   });
 };
 RadioGroupField.Radio = RadioGroup.Radio;

package/dist/components/SelectInputField/index.js

@@ -1,6 +1,6 @@
 import { SelectInput } from '@ultraviolet/ui';
 import { useMemo, Children, useCallback } from 'react';
-import { Controller } from 'react-hook-form';
+import { useController } from 'react-hook-form';
 import { jsx } from '@emotion/react/jsx-runtime';
 import { useErrors } from '../../providers/ErrorContext/index.js';
 
@@ -74,61 +74,58 @@ const SelectInputField = _ref => {
   const {
     getError
   } = useErrors();
-  return jsx(Controller, {
-    name: name,
+  const {
+    field,
+    fieldState: {
+      error
+    }
+  } = useController({
+    name,
     rules: {
       required,
       minLength: minLength || required ? 1 : undefined,
       maxLength,
       ...rules
-    },
-    render: _ref3 => {
-      let {
-        field,
-        fieldState: {
-          error
-        }
-      } = _ref3;
-      return jsx(SelectInput, {
-        name: field.name,
-        animation: animation,
-        animationDuration: animationDuration,
-        animationOnChange: animationOnChange,
-        className: className,
-        disabled: disabled,
-        error: getError({
-          label,
-          minLength,
-          maxLength
-        }, error),
-        id: id,
-        inputId: inputId,
-        isClearable: isClearable,
-        isLoading: isLoading,
-        isMulti: multiple,
-        customStyle: customStyle,
-        isSearchable: isSearchable,
-        menuPortalTarget: menuPortalTarget,
-        onBlur: event => {
-          field.onBlur();
-          onBlur?.(event);
-        },
-        onChange: (event, action) => {
-          field.onChange(parse(event));
-          onChange?.(event, action);
-        },
-        onFocus: onFocus,
-        options: options,
-        placeholder: placeholder,
-        readOnly: readOnly,
-        noTopLabel: noTopLabel,
-        required: required,
-        value: format(field.value),
-        noOptionsMessage: noOptionsMessage,
-        children: children
-      });
     }
   });
+  return jsx(SelectInput, {
+    name: field.name,
+    animation: animation,
+    animationDuration: animationDuration,
+    animationOnChange: animationOnChange,
+    className: className,
+    disabled: disabled,
+    error: getError({
+      label,
+      minLength,
+      maxLength
+    }, error),
+    id: id,
+    inputId: inputId,
+    isClearable: isClearable,
+    isLoading: isLoading,
+    isMulti: multiple,
+    customStyle: customStyle,
+    isSearchable: isSearchable,
+    menuPortalTarget: menuPortalTarget,
+    onBlur: event => {
+      field.onBlur();
+      onBlur?.(event);
+    },
+    onChange: (event, action) => {
+      field.onChange(parse(event));
+      onChange?.(event, action);
+    },
+    onFocus: onFocus,
+    options: options,
+    placeholder: placeholder,
+    readOnly: readOnly,
+    noTopLabel: noTopLabel,
+    required: required,
+    value: format(field.value),
+    noOptionsMessage: noOptionsMessage,
+    children: children
+  });
 };
 SelectInputField.Option = SelectInput.Option;