@opengeoweb/form-fields 4.7.1 → 4.9.1

package/index.umd.js

@@ -110,6 +110,9 @@
      * 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',
@@ -125,7 +128,6 @@
       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'
     };
@@ -328,23 +330,16 @@
       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
@@ -366,6 +361,17 @@
         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,
@@ -403,7 +409,7 @@
         }), sx)
       }, props), children, errors && /*#__PURE__*/React__namespace.createElement(material.FormHelperText, {
         variant: "filled"
-      }, errors.message || errorMessages[errors.type]));
+      }, getErrorMessage(errors)));
     };
 
     function getDeepProperty(p, o) {
@@ -432,11 +438,19 @@
           otherProps = __rest(_a, ["name", "label", "defaultValue", "children", "rules", "onChange", "disabled", "className", "sx", "isReadOnly"]);
 
       var labelId = name + "-label";
-      var inputRef = React__namespace.useRef(null);
+      var control = reactHookForm.useFormContext().control;
 
-      var _d = reactHookForm.useFormContext(),
-          control = _d.control,
-          formErrors = _d.errors;
+      var _d = reactHookForm.useController(__assign({
+        name: name,
+        control: control,
+        rules: rules,
+        defaultValue: defaultValue
+      }, defaultProps)),
+          _e = _d.field,
+          onChangeField = _e.onChange,
+          value = _e.value,
+          ref = _e.ref,
+          formErrors = _d.formState.errors;
 
       var errors = getErrors(name, formErrors);
       return /*#__PURE__*/React__namespace.createElement(ReactHookFormFormControl, {
@@ -448,34 +462,19 @@
       }, /*#__PURE__*/React__namespace.createElement(material.InputLabel, {
         variant: "filled",
         id: labelId
-      }, label), /*#__PURE__*/React__namespace.createElement(reactHookForm.Controller, {
-        render: function render(_props) {
-          return /*#__PURE__*/React__namespace.createElement(material.Select, __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__namespace.createElement(material.Select, __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) {
@@ -493,46 +492,51 @@
           otherProps = __rest(_a, ["name", "label", "defaultValue", "children", "rules", "disabled", "onChange", "isReadOnly"]);
 
       var labelId = name + "-label";
-      var inputRef = React__namespace.useRef(null);
+      var control = reactHookForm.useFormContext().control;
 
-      var _e = reactHookForm.useFormContext(),
-          control = _e.control,
-          formErrors = _e.errors;
+      var _e = reactHookForm.useController(__assign({
+        name: name,
+        control: control,
+        rules: rules,
+        defaultValue: defaultValue
+      }, defaultProps)),
+          _f = _e.field,
+          onChangeField = _f.onChange,
+          value = _f.value,
+          ref = _f.ref,
+          formErrors = _e.formState.errors;
 
       var errors = getErrors(name, formErrors);
+      React__namespace.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=\"" + name + "\"]");
+
+            if (inputNode !== null) {
+              inputNode.focus();
+            }
+          }
+        }
+      }, [errors, formErrors, name]);
       return /*#__PURE__*/React__namespace.createElement(ReactHookFormFormControl, {
         disabled: disabled,
         errors: errors,
         isReadOnly: isReadOnly
       }, /*#__PURE__*/React__namespace.createElement(material.InputLabel, {
         id: labelId
-      }, label), /*#__PURE__*/React__namespace.createElement(reactHookForm.Controller, {
-        render: function render(_props) {
-          return /*#__PURE__*/React__namespace.createElement(material.RadioGroup, __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__namespace.createElement(material.RadioGroup, __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) {
@@ -559,11 +563,19 @@
           InputProps = _a.InputProps,
           otherProps = __rest(_a, ["name", "label", "defaultValue", "rules", "disabled", "upperCase", "helperText", "className", "sx", "onChange", "isReadOnly", "InputProps"]);
 
-      var inputRef = React__namespace.useRef(null);
+      var control = reactHookForm.useFormContext().control;
 
-      var _g = reactHookForm.useFormContext(),
-          control = _g.control,
-          formErrors = _g.errors;
+      var _g = reactHookForm.useController(__assign({
+        name: name,
+        control: control,
+        rules: rules,
+        defaultValue: defaultValue
+      }, defaultProps)),
+          _h = _g.field,
+          onChangeField = _h.onChange,
+          value = _h.value,
+          ref = _h.ref,
+          formErrors = _g.formState.errors;
 
       var errors = getErrors(name, formErrors);
       return /*#__PURE__*/React__namespace.createElement(ReactHookFormFormControl, {
@@ -572,71 +584,35 @@
         disabled: disabled,
         errors: errors,
         isReadOnly: isReadOnly
-      }, /*#__PURE__*/React__namespace.createElement(reactHookForm.Controller, {
-        render: function render(_props) {
-          return /*#__PURE__*/React__namespace.createElement(material.TextField, __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__namespace.createElement(material.TextField, __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: __assign(__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: __assign(__assign({}, InputProps), isReadOnly && {
+          readOnly: true
+        })
+      }, otherProps)));
     };
 
     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 inputMode === 'numeric' ? parseInt(value, 10) : parseFloat(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 value == null || isNaN(value) ? '' : value.toString();
+      return null;
     };
     var getAllowedKeys = function getAllowedKeys(inputMode) {
       if (inputMode === void 0) {
@@ -652,7 +628,7 @@
       var name = _a.name,
           label = _a.label,
           _b = _a.defaultValue,
-          defaultValue = _b === void 0 ? '' : _b,
+          defaultValue = _b === void 0 ? null : _b,
           rules = _a.rules,
           _c = _a.disabled,
           disabled = _c === void 0 ? false : _c,
@@ -667,20 +643,21 @@
           isReadOnly = _a.isReadOnly,
           otherProps = __rest(_a, ["name", "label", "defaultValue", "rules", "disabled", "inputMode", "helperText", "className", "sx", "onChange", "isReadOnly"]);
 
-      var inputRef = React__namespace.useRef(null);
+      var control = reactHookForm.useFormContext().control;
 
-      var _g = reactHookForm.useFormContext(),
-          control = _g.control,
-          formErrors = _g.errors;
+      var _g = reactHookForm.useController(__assign({
+        name: name,
+        control: control,
+        rules: rules,
+        defaultValue: defaultValue
+      }, defaultProps)),
+          _h = _g.field,
+          onChangeField = _h.onChange,
+          value = _h.value,
+          ref = _h.ref,
+          formErrors = _g.formState.errors;
 
       var errors = getErrors(name, formErrors);
-
-      var validationRules = __assign(__assign({}, rules), {
-        setValueAs: function setValueAs(value) {
-          return parseFloat(value);
-        }
-      });
-
       var allowedKeyes = getAllowedKeys(inputMode);
 
       var onKeyDown = function onKeyDown(event) {
@@ -691,52 +668,43 @@
         }
       };
 
+      var _j = __read(React__namespace.useState(value === null || isNaN(value) ? '' : value), 2),
+          displayValue = _j[0],
+          setDisplayValue = _j[1];
+
       return /*#__PURE__*/React__namespace.createElement(ReactHookFormFormControl, {
         className: className,
         sx: sx,
         disabled: disabled,
         errors: errors,
         isReadOnly: isReadOnly
-      }, /*#__PURE__*/React__namespace.createElement(reactHookForm.Controller, {
-        render: function render(_props) {
-          return /*#__PURE__*/React__namespace.createElement(material.TextField, __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: __assign(__assign({}, isReadOnly && {
-              readOnly: true
-            }), otherProps.InputProps)
-          }, otherProps));
+      }, /*#__PURE__*/React__namespace.createElement(material.TextField, __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: __assign(__assign({}, isReadOnly && {
+          readOnly: true
+        }), otherProps.InputProps)
+      }, otherProps)));
     };
 
     moment__default$1["default"].tz.setDefault('Etc/GMT-0');
@@ -766,12 +734,19 @@
           isReadOnly = _a.isReadOnly,
           otherProps = __rest(_a, ["name", "rules", "disabled", "label", "format", "openTo", "defaultNullValue", "helperText", "onChange", "className", "sx", "isReadOnly"]);
 
-      var inputRef = React__namespace.useRef(null);
+      var control = reactHookForm.useFormContext().control;
 
-      var _h = reactHookForm.useFormContext(),
-          control = _h.control,
-          formErrors = _h.errors,
-          getValues = _h.getValues;
+      var _h = reactHookForm.useController(__assign({
+        name: name,
+        control: control,
+        rules: rules,
+        defaultValue: defaultNullValue
+      }, defaultProps)),
+          _j = _h.field,
+          onChangeField = _j.onChange,
+          value = _j.value,
+          ref = _j.ref,
+          formErrors = _h.formState.errors;
 
       var errors = getErrors(name, formErrors);
       return /*#__PURE__*/React__namespace.createElement(ReactHookFormFormControl, {
@@ -780,74 +755,58 @@
         className: className,
         sx: sx,
         isReadOnly: isReadOnly
-      }, /*#__PURE__*/React__namespace.createElement(reactHookForm.Controller, {
-        render: function render(_props) {
-          return /*#__PURE__*/React__namespace.createElement(xDatePickers.DateTimePicker, __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: __assign(__assign({
-              endAdornment: /*#__PURE__*/React__namespace.createElement(material.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__namespace.createElement(material.TextField, __assign({
-                helperText: helperText,
-                error: !!errors,
-                name: name,
-                "data-testid": otherProps['data-testid'],
-                variant: "filled"
-              }, props));
-            }
-          }, otherProps));
+      }, /*#__PURE__*/React__namespace.createElement(xDatePickers.DateTimePicker, __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: __assign(__assign({
+          endAdornment: /*#__PURE__*/React__namespace.createElement(material.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__namespace.createElement(material.TextField, __assign({
+            helperText: helperText,
+            error: !!errors,
+            name: name,
+            "data-testid": otherProps['data-testid'],
+            variant: "filled"
+          }, props));
         }
-      }));
+      }, otherProps)));
     };
 
     var defaultFormOptions = {
@@ -859,7 +818,10 @@
       var children = _a.children,
           _b = _a.options,
           options = _b === void 0 ? defaultFormOptions : _b;
-      var formMethods = reactHookForm.useForm(options);
+      var formMethods = reactHookForm.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["default"].createElement(reactHookForm.FormProvider, __assign({}, formMethods), children);
     };
 
@@ -880,17 +842,15 @@
           defaultValue = _b === void 0 ? null : _b,
           rules = _a.rules;
       var control = reactHookForm.useFormContext().control;
-      return /*#__PURE__*/React__namespace.createElement(reactHookForm.Controller, {
-        render: function render(field) {
-          return field.value !== null ? /*#__PURE__*/React__namespace.createElement("input", __assign({}, field, {
-            type: "hidden"
-          })) : null;
-        },
+      var field = reactHookForm.useController(__assign({
         name: name,
         control: control,
-        defaultValue: defaultValue,
-        rules: rules
-      });
+        rules: rules,
+        defaultValue: defaultValue
+      }, defaultProps)).field;
+      return field.value !== null ? /*#__PURE__*/React__namespace.createElement("input", __assign({}, field, {
+        type: "hidden"
+      })) : null;
     };
 
     exports.ReactHookFormDateTime = ReactHookKeyboardDateTimePicker;
@@ -901,7 +861,6 @@
     exports.ReactHookFormRadioGroup = ReactHookFormRadioGroup;
     exports.ReactHookFormSelect = ReactHookFormSelect;
     exports.ReactHookFormTextField = ReactHookFormTextField;
-    exports.containsNoCommas = containsNoCommas;
     exports.defaultFormOptions = defaultFormOptions;
     exports.errorMessages = errorMessages;
     exports.getDeepProperty = getDeepProperty;

package/lib/components/Providers.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { UseFormOptions } from 'react-hook-form';
+import { UseFormProps } from 'react-hook-form';
 export declare const zeplinLinks: {
     name: string;
     link: string;
@@ -9,13 +9,13 @@ export interface StoryLayoutProps {
 }
 export interface FormFieldsWrapperProps {
     children?: React.ReactNode;
-    options?: UseFormOptions;
+    options?: UseFormProps;
     isDarkTheme?: boolean;
 }
 export declare const FormFieldsWrapper: React.FC<FormFieldsWrapperProps>;
 interface FormFieldsWrapperOldThemeProps {
     children: React.ReactNode;
-    options?: UseFormOptions;
+    options?: UseFormProps;
 }
 export declare const FormFieldsWrapperOldTheme: React.FC<FormFieldsWrapperOldThemeProps>;
 export {};