@opengeoweb/form-fields 4.7.1 → 4.9.1

package/index.esm.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import React__default from 'react';
 import { FormControl, FormHelperText, InputLabel, Select, RadioGroup, TextField, InputAdornment } from '@mui/material';
-import { useFormContext, Controller, useForm, FormProvider } from 'react-hook-form';
+import { useFormContext, useController, useForm, FormProvider } from 'react-hook-form';
 import moment from 'moment';
 import { isEqual } from 'lodash';
 import moment$1 from 'moment-timezone';
@@ -52,6 +52,9 @@ function __rest(s, e) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
+var defaultProps = {
+  shouldUnregister: true
+};
 var errorMessages = {
   required: 'This field is required',
   isValidDate: 'Not a valid date',
@@ -67,7 +70,6 @@ var errorMessages = {
   isNonOrBothCoordinates: 'Please enter both coordinates',
   isInteger: 'Invalid entry, enter a non-decimal number',
   isNumeric: 'Invalid entry, enter a numeric value',
-  containsNoCommas: 'Please use a dot (.) as decimal separator',
   minVisibility: 'The minimum visibility is 0',
   maxVisibility: 'The maximum visibility is 4900'
 };
@@ -263,23 +265,16 @@ var isInteger = function isInteger(value) {
   return Number.isInteger(value);
 }; // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
 var isNonOrBothCoordinates = function isNonOrBothCoordinates(coordinate, otherCoordinate) {
-  if (coordinate && otherCoordinate || !coordinate && !otherCoordinate) {
+  if (typeof coordinate === 'number' && typeof otherCoordinate === 'number' || coordinate === null && otherCoordinate === null || coordinate === undefined && otherCoordinate === undefined) {
     return true;
   }
 
-  if (coordinate) {
+  if (typeof coordinate === 'number') {
     return true;
   }
 
   return false;
 };
-var containsNoCommas = function containsNoCommas(val) {
-  if (typeof val === 'string' && val.includes(',')) {
-    return false;
-  }
-
-  return true;
-};
 
 var radioCheckboxStyle = {
   // hides unchecked values
@@ -301,6 +296,17 @@ var radioCheckboxStyle = {
     color: 'geowebColors.typographyAndIcons.iconLinkActive'
   }
 };
+var getErrorMessage = function getErrorMessage(errors) {
+  if (errors && errors.message && typeof errors.message === 'string') {
+    return errors.message;
+  }
+
+  if (errors && errors.type && typeof errors.type === 'string') {
+    return errorMessages[errors.type];
+  }
+
+  return '';
+};
 
 var ReactHookFormFormControl = function ReactHookFormFormControl(_a) {
   var children = _a.children,
@@ -338,7 +344,7 @@ var ReactHookFormFormControl = function ReactHookFormFormControl(_a) {
     }), sx)
   }, props), children, errors && /*#__PURE__*/React.createElement(FormHelperText, {
     variant: "filled"
-  }, errors.message || errorMessages[errors.type]));
+  }, getErrorMessage(errors)));
 };
 
 function getDeepProperty(p, o) {
@@ -367,11 +373,21 @@ var ReactHookFormSelect = function ReactHookFormSelect(_a) {
       otherProps = __rest(_a, ["name", "label", "defaultValue", "children", "rules", "onChange", "disabled", "className", "sx", "isReadOnly"]);
 
   var labelId = "".concat(name, "-label");
-  var inputRef = React.useRef(null);
 
   var _useFormContext = useFormContext(),
-      control = _useFormContext.control,
-      formErrors = _useFormContext.errors;
+      control = _useFormContext.control;
+
+  var _useController = useController(Object.assign({
+    name: name,
+    control: control,
+    rules: rules,
+    defaultValue: defaultValue
+  }, defaultProps)),
+      _useController$field = _useController.field,
+      onChangeField = _useController$field.onChange,
+      value = _useController$field.value,
+      ref = _useController$field.ref,
+      formErrors = _useController.formState.errors;
 
   var errors = getErrors(name, formErrors);
   return /*#__PURE__*/React.createElement(ReactHookFormFormControl, {
@@ -383,34 +399,19 @@ var ReactHookFormSelect = function ReactHookFormSelect(_a) {
   }, /*#__PURE__*/React.createElement(InputLabel, {
     variant: "filled",
     id: labelId
-  }, label), /*#__PURE__*/React.createElement(Controller, {
-    render: function render(_props) {
-      return /*#__PURE__*/React.createElement(Select, Object.assign({
-        labelId: labelId,
-        label: label,
-        inputRef: inputRef,
-        name: name,
-        onChange: function onChange(changeEvent) {
-          _props.onChange(changeEvent.target.value); // default props
-
-
-          _onChange(changeEvent);
-        },
-        value: _props.value,
-        variant: "filled"
-      }, otherProps), children);
-    },
+  }, label), /*#__PURE__*/React.createElement(Select, Object.assign({
+    labelId: labelId,
+    label: label,
+    inputRef: ref,
     name: name,
-    control: control,
-    defaultValue: defaultValue,
-    rules: rules,
-    onFocus: function onFocus() {
-      var _a;
+    onChange: function onChange(changeEvent) {
+      onChangeField(changeEvent.target.value); // default props
 
-      inputRef.current.disabled = false;
-      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-  }));
+      _onChange(changeEvent);
+    },
+    value: value || '',
+    variant: "filled"
+  }, otherProps), children));
 };
 
 var ReactHookFormRadioGroup = function ReactHookFormRadioGroup(_a) {
@@ -428,46 +429,53 @@ var ReactHookFormRadioGroup = function ReactHookFormRadioGroup(_a) {
       otherProps = __rest(_a, ["name", "label", "defaultValue", "children", "rules", "disabled", "onChange", "isReadOnly"]);
 
   var labelId = "".concat(name, "-label");
-  var inputRef = React.useRef(null);
 
   var _useFormContext = useFormContext(),
-      control = _useFormContext.control,
-      formErrors = _useFormContext.errors;
+      control = _useFormContext.control;
+
+  var _useController = useController(Object.assign({
+    name: name,
+    control: control,
+    rules: rules,
+    defaultValue: defaultValue
+  }, defaultProps)),
+      _useController$field = _useController.field,
+      onChangeField = _useController$field.onChange,
+      value = _useController$field.value,
+      ref = _useController$field.ref,
+      formErrors = _useController.formState.errors;
 
   var errors = getErrors(name, formErrors);
+  React.useEffect(function () {
+    if (errors) {
+      var firstError = Object.keys(formErrors)[0];
+
+      if (firstError === name) {
+        // if first error in form is same, focus on that input
+        var inputNode = document.querySelector("[name=\"".concat(name, "\"]"));
+
+        if (inputNode !== null) {
+          inputNode.focus();
+        }
+      }
+    }
+  }, [errors, formErrors, name]);
   return /*#__PURE__*/React.createElement(ReactHookFormFormControl, {
     disabled: disabled,
     errors: errors,
     isReadOnly: isReadOnly
   }, /*#__PURE__*/React.createElement(InputLabel, {
     id: labelId
-  }, label), /*#__PURE__*/React.createElement(Controller, {
-    render: function render(_props) {
-      return /*#__PURE__*/React.createElement(RadioGroup, Object.assign({
-        value: _props.value,
-        onChange: function onChange(changeEvent) {
-          _props.onChange(changeEvent.target.value);
-
-          _onChange(changeEvent, changeEvent.target.value);
-        },
-        ref: inputRef,
-        name: name
-      }, otherProps), children);
-    },
-    name: name,
-    control: control,
-    defaultValue: defaultValue,
-    rules: rules,
-    onFocus: function onFocus() {
-      // move focus to first radio on error
-      var firstElement = inputRef.current.querySelector('input');
+  }, label), /*#__PURE__*/React.createElement(RadioGroup, Object.assign({
+    value: value,
+    onChange: function onChange(changeEvent) {
+      onChangeField(changeEvent.target.value);
 
-      if (firstElement) {
-        firstElement.disabled = false;
-        firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
-      }
-    }
-  }));
+      _onChange(changeEvent, changeEvent.target.value);
+    },
+    ref: ref,
+    name: name
+  }, otherProps), children));
 };
 
 var convertTextInputValue = function convertTextInputValue(value, inCapitals) {
@@ -494,11 +502,20 @@ var ReactHookFormTextField = function ReactHookFormTextField(_a) {
       InputProps = _a.InputProps,
       otherProps = __rest(_a, ["name", "label", "defaultValue", "rules", "disabled", "upperCase", "helperText", "className", "sx", "onChange", "isReadOnly", "InputProps"]);
 
-  var inputRef = React.useRef(null);
-
   var _useFormContext = useFormContext(),
-      control = _useFormContext.control,
-      formErrors = _useFormContext.errors;
+      control = _useFormContext.control;
+
+  var _useController = useController(Object.assign({
+    name: name,
+    control: control,
+    rules: rules,
+    defaultValue: defaultValue
+  }, defaultProps)),
+      _useController$field = _useController.field,
+      onChangeField = _useController$field.onChange,
+      value = _useController$field.value,
+      ref = _useController$field.ref,
+      formErrors = _useController.formState.errors;
 
   var errors = getErrors(name, formErrors);
   return /*#__PURE__*/React.createElement(ReactHookFormFormControl, {
@@ -507,45 +524,33 @@ var ReactHookFormTextField = function ReactHookFormTextField(_a) {
     disabled: disabled,
     errors: errors,
     isReadOnly: isReadOnly
-  }, /*#__PURE__*/React.createElement(Controller, {
-    render: function render(_props) {
-      return /*#__PURE__*/React.createElement(TextField, Object.assign({
-        label: label,
-        error: !!errors,
-        helperText: helperText,
-        value: _props.value,
-        variant: "filled",
-        type: "text",
-        name: name,
-        onChange: function onChange(evt) {
-          var value = evt.target.value;
-          var convertedValue = convertTextInputValue(value, upperCase);
-
-          _props.onChange(convertedValue);
+  }, /*#__PURE__*/React.createElement(TextField, Object.assign({
+    label: label,
+    error: !!errors,
+    helperText: helperText,
+    value: value,
+    variant: "filled",
+    type: "text",
+    name: name,
+    onChange: function onChange(evt) {
+      var value = evt.target.value;
+      var convertedValue = convertTextInputValue(value, upperCase);
+      onChangeField(convertedValue);
 
-          _onChange(null);
-        },
-        disabled: disabled,
-        inputRef: inputRef,
-        InputProps: Object.assign(Object.assign({}, InputProps), isReadOnly && {
-          readOnly: true
-        })
-      }, otherProps));
+      _onChange(null);
     },
-    name: name,
-    control: control,
-    defaultValue: defaultValue,
-    rules: rules,
     disabled: disabled,
-    onFocus: function onFocus() {
-      var _a;
-
-      inputRef.current.disabled = false;
-      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-  }));
+    inputRef: ref,
+    InputProps: Object.assign(Object.assign({}, InputProps), isReadOnly && {
+      readOnly: true
+    })
+  }, otherProps)));
 };
 
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+
 function _toConsumableArray(arr) {
   return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
 }
@@ -554,10 +559,41 @@ function _arrayWithoutHoles(arr) {
   if (Array.isArray(arr)) return _arrayLikeToArray(arr);
 }
 
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
 function _iterableToArray(iter) {
   if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
 }
 
+function _iterableToArrayLimit(arr, i) {
+  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
+  var _arr = [];
+  var _n = true;
+  var _d = false;
+  var _e = undefined;
+
+  try {
+    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
+
+      if (i && _arr.length === i) break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
+    try {
+      if (!_n && _i["return"] != null) _i["return"]();
+    } finally {
+      if (_d) throw _e;
+    }
+  }
+
+  return _arr;
+}
+
 function _unsupportedIterableToArray(o, minLen) {
   if (!o) return;
   if (typeof o === "string") return _arrayLikeToArray(o, minLen);
@@ -579,32 +615,16 @@ function _nonIterableSpread() {
   throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
 var convertNumericInputValue = function convertNumericInputValue(value, inputMode) {
   if (value !== '' && !isNaN(parseFloat(value))) {
-    // float is returned as string, option 'valueAsNumber: true' will take care of the parsing
-    return inputMode === 'numeric' ? parseInt(value, 10) : value;
-  }
-
-  return value;
-};
-var parseInput = function parseInput(value) {
-  // allow '-' at the start of the value
-  if (typeof value === 'string' && value.includes('-')) {
-    return value.split('-').reduce(function (list, el) {
-      if (!el.length && !list.length) {
-        return '-';
-      }
-
-      return list.concat(el);
-    }, '');
-  } // return value when '.' is given
-
-
-  if (typeof value === 'string' && value.includes('.')) {
-    return value;
+    return inputMode === 'numeric' ? parseInt(value, 10) : parseFloat(value);
   }
 
-  return value == null || isNaN(value) ? '' : value.toString();
+  return null;
 };
 var getAllowedKeys = function getAllowedKeys() {
   var inputMode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'numeric';
@@ -616,7 +636,7 @@ var ReactHookFormNumberField = function ReactHookFormNumberField(_a) {
   var name = _a.name,
       label = _a.label,
       _a$defaultValue = _a.defaultValue,
-      defaultValue = _a$defaultValue === void 0 ? '' : _a$defaultValue,
+      defaultValue = _a$defaultValue === void 0 ? null : _a$defaultValue,
       rules = _a.rules,
       _a$disabled = _a.disabled,
       disabled = _a$disabled === void 0 ? false : _a$disabled,
@@ -631,18 +651,22 @@ var ReactHookFormNumberField = function ReactHookFormNumberField(_a) {
       isReadOnly = _a.isReadOnly,
       otherProps = __rest(_a, ["name", "label", "defaultValue", "rules", "disabled", "inputMode", "helperText", "className", "sx", "onChange", "isReadOnly"]);
 
-  var inputRef = React.useRef(null);
-
   var _useFormContext = useFormContext(),
-      control = _useFormContext.control,
-      formErrors = _useFormContext.errors;
+      control = _useFormContext.control;
+
+  var _useController = useController(Object.assign({
+    name: name,
+    control: control,
+    rules: rules,
+    defaultValue: defaultValue
+  }, defaultProps)),
+      _useController$field = _useController.field,
+      onChangeField = _useController$field.onChange,
+      value = _useController$field.value,
+      ref = _useController$field.ref,
+      formErrors = _useController.formState.errors;
 
   var errors = getErrors(name, formErrors);
-  var validationRules = Object.assign(Object.assign({}, rules), {
-    setValueAs: function setValueAs(value) {
-      return parseFloat(value);
-    }
-  });
   var allowedKeyes = getAllowedKeys(inputMode);
 
   var onKeyDown = function onKeyDown(event) {
@@ -653,52 +677,44 @@ var ReactHookFormNumberField = function ReactHookFormNumberField(_a) {
     }
   };
 
+  var _React$useState = React.useState(value === null || isNaN(value) ? '' : value),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      displayValue = _React$useState2[0],
+      setDisplayValue = _React$useState2[1];
+
   return /*#__PURE__*/React.createElement(ReactHookFormFormControl, {
     className: className,
     sx: sx,
     disabled: disabled,
     errors: errors,
     isReadOnly: isReadOnly
-  }, /*#__PURE__*/React.createElement(Controller, {
-    render: function render(_props) {
-      return /*#__PURE__*/React.createElement(TextField, Object.assign({
-        label: label,
-        error: !!errors,
-        helperText: helperText,
-        inputMode: inputMode,
-        value: parseInput(_props.value),
-        variant: "filled",
-        type: "text",
-        inputProps: {
-          inputMode: inputMode
-        },
-        name: name,
-        onChange: function onChange(evt) {
-          _props.onChange(convertNumericInputValue(evt.target.value, inputMode));
-
-          _onChange(null);
-        },
-        onKeyDown: onKeyDown,
-        disabled: disabled,
-        inputRef: inputRef,
-        // eslint-disable-next-line react/jsx-no-duplicate-props
-        InputProps: Object.assign(Object.assign({}, isReadOnly && {
-          readOnly: true
-        }), otherProps.InputProps)
-      }, otherProps));
+  }, /*#__PURE__*/React.createElement(TextField, Object.assign({
+    label: label,
+    error: !!errors,
+    helperText: helperText,
+    inputMode: inputMode,
+    value: displayValue,
+    variant: "filled",
+    type: "text",
+    inputProps: {
+      inputMode: inputMode
     },
     name: name,
-    control: control,
-    defaultValue: defaultValue,
-    rules: validationRules,
-    disabled: disabled,
-    onFocus: function onFocus() {
-      var _a;
+    onChange: function onChange(evt) {
+      var value = evt.target.value;
+      setDisplayValue(value);
+      onChangeField(convertNumericInputValue(value, inputMode));
 
-      inputRef.current.disabled = false;
-      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-  }));
+      _onChange(null);
+    },
+    onKeyDown: onKeyDown,
+    disabled: disabled,
+    inputRef: ref,
+    // eslint-disable-next-line react/jsx-no-duplicate-props
+    InputProps: Object.assign(Object.assign({}, isReadOnly && {
+      readOnly: true
+    }), otherProps.InputProps)
+  }, otherProps)));
 };
 
 moment$1.tz.setDefault('Etc/GMT-0');
@@ -728,12 +744,20 @@ var ReactHookKeyboardDateTimePicker = function ReactHookKeyboardDateTimePicker(_
       isReadOnly = _a.isReadOnly,
       otherProps = __rest(_a, ["name", "rules", "disabled", "label", "format", "openTo", "defaultNullValue", "helperText", "onChange", "className", "sx", "isReadOnly"]);
 
-  var inputRef = React.useRef(null);
-
   var _useFormContext = useFormContext(),
-      control = _useFormContext.control,
-      formErrors = _useFormContext.errors,
-      getValues = _useFormContext.getValues;
+      control = _useFormContext.control;
+
+  var _useController = useController(Object.assign({
+    name: name,
+    control: control,
+    rules: rules,
+    defaultValue: defaultNullValue
+  }, defaultProps)),
+      _useController$field = _useController.field,
+      onChangeField = _useController$field.onChange,
+      value = _useController$field.value,
+      ref = _useController$field.ref,
+      formErrors = _useController.formState.errors;
 
   var errors = getErrors(name, formErrors);
   return /*#__PURE__*/React.createElement(ReactHookFormFormControl, {
@@ -742,74 +766,58 @@ var ReactHookKeyboardDateTimePicker = function ReactHookKeyboardDateTimePicker(_
     className: className,
     sx: sx,
     isReadOnly: isReadOnly
-  }, /*#__PURE__*/React.createElement(Controller, {
-    render: function render(_props) {
-      return /*#__PURE__*/React.createElement(DateTimePicker, Object.assign({
-        desktopModeMediaQuery: "@media (min-width: 720px)",
-        ampm: false,
-        mask: "____/__/__ __:__",
-        inputFormat: format,
-        label: label,
-        value: _props.value,
-        openTo: openTo,
-        disabled: disabled,
-        onChange: function onChange(value) {
-          _props.onChange(getFormattedValue(value));
-
-          _onChange(getFormattedValue(value));
-        },
-        // if focusedView is removed, it will throw an error when switching day to month mode
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        focusedView: "month",
-        inputRef: inputRef,
-        InputAdornmentProps: {
-          position: 'start'
-        },
-        InputProps: Object.assign(Object.assign({
-          endAdornment: /*#__PURE__*/React.createElement(InputAdornment, {
-            style: {
-              paddingTop: '16px'
-            },
-            position: "end"
-          }, "UTC")
-        }, isReadOnly && {
-          readOnly: true
-        }), otherProps.InputProps),
-        hideTabs: false,
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        // eslint-disable-next-line react/jsx-no-duplicate-props
-        inputProps: disabled ? {
-          placeholder: ''
-        } : undefined,
-        renderInput: function renderInput(_a) {
-          _a.error;
-              var props = __rest(_a, ["error"]);
-
-          return /*#__PURE__*/React.createElement(TextField, Object.assign({
-            helperText: helperText,
-            error: !!errors,
-            name: name,
-            "data-testid": otherProps['data-testid'],
-            variant: "filled"
-          }, props));
-        }
-      }, otherProps));
+  }, /*#__PURE__*/React.createElement(DateTimePicker, Object.assign({
+    desktopModeMediaQuery: "@media (min-width: 720px)",
+    ampm: false,
+    mask: "____/__/__ __:__",
+    inputFormat: format,
+    label: label,
+    value: value,
+    openTo: openTo,
+    disabled: disabled,
+    onChange: function onChange(value) {
+      onChangeField(getFormattedValue(value));
+
+      _onChange(getFormattedValue(value));
     },
-    name: name,
-    control: control,
-    rules: rules,
-    defaultValue: getValues(name) || defaultNullValue,
-    onFocus: function onFocus() {
-      var _a;
+    // if focusedView is removed, it will throw an error when switching day to month mode
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    focusedView: "month",
+    inputRef: ref,
+    InputAdornmentProps: {
+      position: 'start'
+    },
+    InputProps: Object.assign(Object.assign({
+      endAdornment: /*#__PURE__*/React.createElement(InputAdornment, {
+        style: {
+          paddingTop: '16px'
+        },
+        position: "end"
+      }, "UTC")
+    }, isReadOnly && {
+      readOnly: true
+    }), otherProps.InputProps),
+    hideTabs: false,
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    // eslint-disable-next-line react/jsx-no-duplicate-props
+    inputProps: disabled ? {
+      placeholder: ''
+    } : undefined,
+    renderInput: function renderInput(_a) {
+      _a.error;
+          var props = __rest(_a, ["error"]);
 
-      if (inputRef.current) {
-        inputRef.current.disabled = false;
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-      }
+      return /*#__PURE__*/React.createElement(TextField, Object.assign({
+        helperText: helperText,
+        error: !!errors,
+        name: name,
+        "data-testid": otherProps['data-testid'],
+        variant: "filled"
+      }, props));
     }
-  }));
+  }, otherProps)));
 };
 
 /* *
@@ -837,7 +845,10 @@ var ReactHookFormProvider = function ReactHookFormProvider(_ref) {
   var children = _ref.children,
       _ref$options = _ref.options,
       options = _ref$options === void 0 ? defaultFormOptions : _ref$options;
-  var formMethods = useForm(options);
+  var formMethods = useForm(options); // added this ignore as the build is failing otherwise on: Type instantiation is excessively deep and possibly infinite.
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+
   return /*#__PURE__*/React__default.createElement(FormProvider, Object.assign({}, formMethods), children);
 };
 
@@ -878,17 +889,17 @@ var ReactHookFormHiddenInput = function ReactHookFormHiddenInput(_ref) {
   var _useFormContext = useFormContext(),
       control = _useFormContext.control;
 
-  return /*#__PURE__*/React.createElement(Controller, {
-    render: function render(field) {
-      return field.value !== null ? /*#__PURE__*/React.createElement("input", Object.assign({}, field, {
-        type: "hidden"
-      })) : null;
-    },
+  var _useController = useController(Object.assign({
     name: name,
     control: control,
-    defaultValue: defaultValue,
-    rules: rules
-  });
+    rules: rules,
+    defaultValue: defaultValue
+  }, defaultProps)),
+      field = _useController.field;
+
+  return field.value !== null ? /*#__PURE__*/React.createElement("input", Object.assign({}, field, {
+    type: "hidden"
+  })) : null;
 };
 
-export { ReactHookKeyboardDateTimePicker as ReactHookFormDateTime, ReactHookFormFormControl, ReactHookFormHiddenInput, ReactHookFormNumberField, ReactHookFormProviderWrapper as ReactHookFormProvider, ReactHookFormRadioGroup, ReactHookFormSelect, ReactHookFormTextField, containsNoCommas, defaultFormOptions, errorMessages, getDeepProperty, hasIntersectionWithFIR, hasMaxFeaturePoints, hasMulitpleIntersections, isAfter, isBefore, isBetween, isEmpty, isGeometryDirty, isInteger, isLatitude, isLongitude, isMaximumOneDrawing, isNonOrBothCoordinates, isValidDate, isValidGeoJsonCoordinates, isValidMax, isValidMin, isXHoursAfter, isXHoursBefore };
+export { ReactHookKeyboardDateTimePicker as ReactHookFormDateTime, ReactHookFormFormControl, ReactHookFormHiddenInput, ReactHookFormNumberField, ReactHookFormProviderWrapper as ReactHookFormProvider, ReactHookFormRadioGroup, ReactHookFormSelect, ReactHookFormTextField, defaultFormOptions, errorMessages, getDeepProperty, hasIntersectionWithFIR, hasMaxFeaturePoints, hasMulitpleIntersections, isAfter, isBefore, isBetween, isEmpty, isGeometryDirty, isInteger, isLatitude, isLongitude, isMaximumOneDrawing, isNonOrBothCoordinates, isValidDate, isValidGeoJsonCoordinates, isValidMax, isValidMin, isXHoursAfter, isXHoursBefore };