@nwon/react-mui-hook-form 1.0.0

package/dist/packageExports.js

@@ -0,0 +1,727 @@
+function ___$insertStyle(css) {
+    if (!css || typeof window === 'undefined') {
+        return;
+    }
+    const style = document.createElement('style');
+    style.setAttribute('type', 'text/css');
+    style.innerHTML = css;
+    document.head.appendChild(style);
+    return css;
+}
+
+import { LoadingButton as LoadingButton$1 } from '@mui/lab';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useFormContext, FormProvider, useFormState, Controller, useForm } from 'react-hook-form';
+import { useFormControl, FormControl, InputLabel, OutlinedInput, FormHelperText, Autocomplete, TextField, FormControlLabel, Checkbox, Box, FormLabel, RadioGroup, Radio, Select, MenuItem, Stack, Tooltip, ListSubheader } from '@mui/material';
+import { uppercaseFirstLetter, assertTruthy, objectHasKey, rethrow } from '@nvon/baseline';
+import { useCallback, useMemo, useState, createElement } from 'react';
+import { t } from 'i18next';
+import { DateTimePicker } from '@mui/x-date-pickers';
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+import { identity } from 'lodash-es';
+
+var LoadingButtonState;
+(function (LoadingButtonState) {
+  LoadingButtonState["Idle"] = "idle";
+  LoadingButtonState["Loading"] = "loading";
+  LoadingButtonState["Success"] = "success";
+})(LoadingButtonState || (LoadingButtonState = {}));
+
+const LoadingButton = ({
+  buttonText,
+  buttonTextSuccess,
+  loadingButtonProps,
+  loadingButtonPropsPropsSuccess,
+  buttonState,
+  successIcon
+}) => {
+  const isSuccess = buttonState === LoadingButtonState.Success;
+  const propsToSpread = isSuccess ? loadingButtonPropsPropsSuccess : loadingButtonProps;
+  return /*#__PURE__*/jsx(LoadingButton$1, {
+    loading: buttonState === LoadingButtonState.Loading,
+    disabled: buttonState !== LoadingButtonState.Idle,
+    ...propsToSpread,
+    children: buttonState === LoadingButtonState.Success ? /*#__PURE__*/jsxs(Fragment, {
+      children: [successIcon ? successIcon : null, buttonTextSuccess ? buttonTextSuccess : buttonText]
+    }) : buttonText
+  });
+};
+
+/**
+ * Get loading button state from react-query mutation status.
+ */
+const loadingButtonStateFromReactQueryMutationStatus = mutationStatus => {
+  const mapStatus = {
+    idle: LoadingButtonState.Idle,
+    error: LoadingButtonState.Idle,
+    success: LoadingButtonState.Success,
+    loading: LoadingButtonState.Loading
+  };
+  return mapStatus[mutationStatus];
+};
+/**
+ * Get loading button state from a react-hook-form context.
+ */
+const useLoadingButtonStateFromFormContext = () => {
+  const formContext = useFormContext();
+  return loadingButtonStateFromFormState(formContext.formState);
+};
+/**
+ * Get loading button state from a react-hook-form state.
+ */
+const loadingButtonStateFromFormState = (
+// we are not interested in the value types FormState holds
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+formState) => {
+  if (formState.isSubmitting) {
+    return LoadingButtonState.Loading;
+  }
+  if (formState.isDirty) {
+    return LoadingButtonState.Idle;
+  }
+  if (formState.isSubmitSuccessful) {
+    return LoadingButtonState.Success;
+  }
+  return LoadingButtonState.Idle;
+};
+
+/**
+ * Reexport of FormProvider.
+ *
+ * This became necessary as context is not available when the FormProvider is initialized outside of the package. Most likely this is some kind of instance mismatch.
+ */
+const HookFormProvider = FormProvider;
+
+const formContextNull = "FormContext is null. This should not happen. You may need to use the HookFormProvider instead of the FormProvider exported by react-hook-form";
+
+/**
+ * Get the field errors for a (possibly nested) field name.
+ *
+ * Checking `formState.errors[fieldName]` only works if fieldName is not a path
+ *  (e.g. Does not include dots).
+ *
+ * Did not find a built-in way to do this … there might be one though.
+ */
+const getFormError = (errors, fieldName) => {
+  const nestedKeys = fieldName.split(".");
+  //
+  // To my best knowledge, this works as expected.
+  //
+  // It recursively walks the error object by the given keys
+  //  until the lowest level is reached, or undefined returned.
+  //
+  // Typescript is just not very happy with the dynamic nature of this,
+  //  hence the errors.
+  //
+  /* eslint-disable @typescript-eslint/ban-ts-comment,@typescript-eslint/no-unsafe-return */
+  // @ts-expect-error
+  return nestedKeys.reduce(
+  // @ts-expect-error
+  (errorObj, pathKey) => errorObj?.[pathKey], errors);
+  /* eslint-enable */
+};
+
+/**
+ * Return a function which turns our TranslatedString into a plain string.
+ *
+ * @throws Error if no t was provided but a translated string.
+ */
+const useTranslateString = () => {
+  if (!t) {
+    throw Error("If you pass in a translated validate function you need to provide a t");
+  }
+  return useCallback(input => {
+    return typeof input === "string" ? input : input(t);
+  }, []);
+};
+
+/**
+ * Merge a form field with defaults.
+ */
+const useMergedFormField = (
+/**
+ * Form fields, typically those passed into a component.
+ *
+ */
+formField, t,
+/**
+ * Additional defaults. Duplicate values will be overridden by the formField.
+ */
+formFieldDefaults) => {
+  const translate = useTranslateString();
+  const merged = useMemo(() => {
+    const builtInDefaults = {
+      label: uppercaseFirstLetter(formField.name),
+      required: false,
+      requiredErrorMessage: "Please fill in required information",
+      validate: undefined
+    };
+    return {
+      ...builtInDefaults,
+      ...formFieldDefaults,
+      ...formField
+    };
+  }, [formField, formFieldDefaults]);
+  const withPlainStrings = useMemo(() => {
+    // Translating the validate function is a bit tricky,
+    //  since it can be an object in both cases.
+    const validate = (() => {
+      if (typeof merged.validate === "object" && typeof merged.validate.translated === "function") {
+        if (!t) {
+          throw Error("If you pass in a translated validate function you need to provide a t");
+        }
+        return merged.validate.translated(t);
+      }
+      return merged.validate;
+    })(); // This should be fine. Not sure why TS is complaining.
+    return {
+      ...merged,
+      label: translate(merged.label, t),
+      requiredErrorMessage: translate(merged.requiredErrorMessage, t),
+      validate
+    };
+  }, [merged, t, translate]);
+  return withPlainStrings;
+};
+
+const InputText = ({
+  formField,
+  textFieldProps
+}) => {
+  const form = useFormContext();
+  const muiFormControl = useFormControl();
+  const {
+    label,
+    name,
+    required,
+    requiredErrorMessage,
+    validate
+  } = useMergedFormField(formField, formField.t);
+  if (!form) {
+    throw Error(formContextNull);
+  }
+  const {
+    register,
+    formState
+  } = form;
+  const error = getFormError(formState.errors, formField.name);
+  return /*#__PURE__*/jsxs(FormControl, {
+    error: !!error,
+    required: required,
+    disabled: muiFormControl?.disabled,
+    children: [/*#__PURE__*/jsx(InputLabel, {
+      required: required,
+      children: label
+    }), /*#__PURE__*/jsx(OutlinedInput, {
+      ...register(name, {
+        required: required ? requiredErrorMessage : false,
+        validate,
+        disabled: muiFormControl?.disabled
+      }),
+      required: required,
+      label: label,
+      ...textFieldProps
+    }), error?.message && /*#__PURE__*/jsx(FormHelperText, {
+      children: error?.message
+    })]
+  });
+};
+
+const InputEmail = props => {
+  const merged = useMergedFormField(props.formField, props.formField.t, formDefaults);
+  return /*#__PURE__*/jsx(InputText, {
+    textFieldProps: {
+      type: "email",
+      ...props.textFieldProps
+    },
+    formField: merged
+  });
+};
+const formDefaults = {
+  required: true,
+  validate: emailInput => {
+    if (emailInput.match(/.@./)) {
+      return true;
+    }
+    return "E-Mail address invalid";
+  }
+};
+
+const InputPasswordSet = ({
+  passwordField,
+  passwordValidationField,
+  doNotMatchError
+}) => {
+  const {
+    watch
+  } = useFormContext();
+  const passwordFieldMerged = useMergedFormField(passwordField, passwordField.t, {
+    required: true
+  });
+  const validationFieldMerged = useMergedFormField(passwordValidationField, passwordValidationField.t, {
+    required: true
+  });
+  const validatePasswordMatch = useCallback(value => {
+    const passwordValue = watch(passwordFieldMerged.name);
+    return value === passwordValue || doNotMatchError;
+  }, [doNotMatchError, passwordFieldMerged.name, watch]);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(InputText, {
+      formField: passwordFieldMerged,
+      textFieldProps: {
+        type: "password"
+      }
+    }), /*#__PURE__*/jsx(InputText, {
+      formField: {
+        ...validationFieldMerged,
+        validate: validatePasswordMatch,
+        t: passwordValidationField.t
+      },
+      textFieldProps: {
+        type: "password"
+      }
+    })]
+  });
+};
+
+const InputAutocomplete = ({
+  formField,
+  selectableOptions,
+  multiSelect,
+  noOptions,
+  autoCompleteProps
+}) => {
+  const form = useFormContext();
+  if (!form) {
+    throw Error(formContextNull);
+  }
+  const {
+    register,
+    watch,
+    formState,
+    setValue
+  } = form;
+  const error = getFormError(formState.errors, formField.name);
+  const muiFormControl = useFormControl();
+  const {
+    label,
+    name,
+    required,
+    requiredErrorMessage,
+    validate
+  } = useMergedFormField(formField, formField.t);
+  const value = watch(name);
+  let valueToUse = value;
+  if (!value) {
+    valueToUse = multiSelect ? [] : "";
+  }
+  assertTruthy(["string", "number", "object"].includes(typeof valueToUse), "Value for select input has unexpected type");
+  const props = register(name, {
+    required: required ? requiredErrorMessage : false,
+    validate,
+    disabled: muiFormControl?.disabled
+  });
+  const currentValue = useMemo(() => multiSelect ? selectableOptions.filter(o => {
+    if (Array.isArray(valueToUse)) {
+      return valueToUse.includes(o.value);
+    }
+    return valueToUse;
+  }) : valueToUse, [multiSelect, selectableOptions, valueToUse]);
+  return /*#__PURE__*/jsxs(FormControl, {
+    error: !!error,
+    required: required,
+    disabled: muiFormControl?.disabled,
+    children: [/*#__PURE__*/jsx(Autocomplete, {
+      options: selectableOptions,
+      multiple: multiSelect,
+      value: currentValue,
+      label: label,
+      ...props,
+      getOptionLabel: o => {
+        if (objectHasKey(o, "label")) {
+          return o.label;
+        }
+        return "";
+      },
+      onChange: (e, selectedOption) => {
+        if (Array.isArray(selectedOption)) {
+          setValue(name, selectedOption.map(o => o.value));
+        } else {
+          setValue(name, selectedOption.value);
+        }
+      },
+      noOptionsText: noOptions,
+      renderInput: params => /*#__PURE__*/jsx(TextField, {
+        ...params,
+        label: label,
+        variant: "outlined"
+      })
+      // need to parse this as any in order to get no typing errors
+      // for multiselect
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ,
+      ...autoCompleteProps
+    }), error?.message && /*#__PURE__*/jsx(FormHelperText, {
+      children: error?.message
+    })]
+  });
+};
+
+const InputCheckbox = ({
+  formField,
+  jsxLabel
+}) => {
+  const {
+    register,
+    watch,
+    setValue
+  } = useFormContext();
+  const {
+    errors
+  } = useFormState();
+  const error = getFormError(errors, formField.name);
+  const muiFormControl = useFormControl();
+  const {
+    label,
+    name,
+    required,
+    requiredErrorMessage,
+    validate
+  } = useMergedFormField(formField);
+  const changeEv = useCallback(e => {
+    setValue(name, e.target.checked, {
+      shouldValidate: true,
+      shouldDirty: true,
+      shouldTouch: true
+    });
+  }, [name, setValue]);
+  const id = `rvo-input-checkbox-${name}`;
+  const registered = register(name, {
+    required: required ? requiredErrorMessage : false,
+    onChange: changeEv,
+    validate,
+    disabled: muiFormControl?.disabled
+  });
+  const value = watch(name, false) ?? false;
+  return /*#__PURE__*/jsxs(FormControl, {
+    error: !!error,
+    disabled: muiFormControl?.disabled,
+    children: [/*#__PURE__*/jsx(FormControlLabel, {
+      required: jsxLabel ? false : required // If jsxLabel is set, we don't want to show the asterisk.
+      ,
+      control: /*#__PURE__*/jsx(Checkbox, {
+        checked: value,
+        "aria-labelledby": id,
+        ...registered
+      }),
+      label: jsxLabel ?? label
+    }), error?.message && /*#__PURE__*/jsx(FormHelperText, {
+      children: error?.message
+    })]
+  });
+};
+
+const InputDateTimePicker = ({
+  formField,
+  dateTimePickerProps
+}) => {
+  const {
+    formState,
+    control
+  } = useFormContext();
+  const error = getFormError(formState.errors, formField.name);
+  const muiFormControl = useFormControl();
+  const {
+    label,
+    name,
+    required
+  } = useMergedFormField(formField);
+  const [date, setDate] = useState(new Date());
+  return /*#__PURE__*/jsx(Box, {
+    children: /*#__PURE__*/jsxs(FormControl, {
+      error: !!error,
+      required: required,
+      disabled: muiFormControl?.disabled,
+      children: [/*#__PURE__*/jsx(Controller, {
+        name: name,
+        defaultValue: date,
+        control: control,
+        render: ({
+          field: {
+            onChange,
+            ...restField
+          }
+        }) => /*#__PURE__*/jsx(DateTimePicker, {
+          label: label,
+          ampm: dateTimePickerProps?.ampm ? dateTimePickerProps.ampm : false,
+          onChange: event => {
+            onChange(event);
+            if (event) {
+              setDate(event);
+            }
+          },
+          disabled: muiFormControl?.disabled,
+          renderInput: params => /*#__PURE__*/jsx(TextField, {
+            required: required,
+            ...params
+          }),
+          ...restField
+        })
+      }), error?.message && /*#__PURE__*/jsx(FormHelperText, {
+        children: error?.message
+      })]
+    })
+  });
+};
+
+const InputRadio = ({
+  formField,
+  selectableOptions
+}) => {
+  const {
+    register,
+    watch,
+    setValue
+  } = useFormContext();
+  const {
+    errors
+  } = useFormState();
+  const error = getFormError(errors, formField.name);
+  const muiFormControl = useFormControl();
+  const {
+    label,
+    name,
+    required,
+    requiredErrorMessage,
+    validate
+  } = useMergedFormField(formField);
+  const changeEv = useCallback(e => {
+    setValue(name, e.target.value, {
+      shouldValidate: true,
+      shouldDirty: true,
+      shouldTouch: true
+    });
+  }, [name, setValue]);
+  const value = watch(name) ?? "";
+  assertTruthy(["string", "number"].includes(typeof value), "Value for select input has unexpected type");
+  const id = `rvo-input-radio-${name}`;
+  const registered = register(name, {
+    required: required ? requiredErrorMessage : false,
+    onChange: changeEv,
+    validate,
+    disabled: muiFormControl?.disabled
+  });
+  return /*#__PURE__*/jsxs(FormControl, {
+    error: !!error,
+    disabled: muiFormControl?.disabled,
+    children: [/*#__PURE__*/jsx(FormLabel, {
+      id: id,
+      required: required,
+      children: label
+    }), /*#__PURE__*/jsx(RadioGroup, {
+      value: value,
+      "aria-labelledby": id,
+      children: selectableOptions?.map(option => {
+        return /*#__PURE__*/createElement(FormControlLabel, {
+          ...registered,
+          key: option.value,
+          value: option.value,
+          control: /*#__PURE__*/jsx(Radio, {}),
+          label: option.label
+        });
+      })
+    }), error?.message && /*#__PURE__*/jsx(FormHelperText, {
+      children: error?.message
+    })]
+  });
+};
+
+/**
+ * Sorts the options by group and value.
+ */
+const useSortedOptionsWithGroup = selectableOptions => {
+  return useMemo(() => selectableOptions.sort((a, b) => {
+    if (a.group == undefined && !!b.group) {
+      return -1;
+    }
+    if (a.group && b.group && a.group < b.group) {
+      return -1;
+    }
+    if (a.group == b.group && b.value > a.value) {
+      return 1;
+    }
+    return 0;
+  }), [selectableOptions]);
+};
+
+const InputSelect = ({
+  formField,
+  selectableOptions,
+  placeholderText,
+  selectComponentProps
+}) => {
+  const form = useFormContext();
+  if (!form) {
+    throw Error(formContextNull);
+  }
+  const {
+    register,
+    watch,
+    formState
+  } = form;
+  const error = getFormError(formState.errors, formField.name);
+  const muiFormControl = useFormControl();
+  const {
+    label,
+    name,
+    required,
+    requiredErrorMessage,
+    validate
+  } = useMergedFormField(formField, formField.t);
+  const value = watch(name) ?? "";
+  assertTruthy(["string", "number"].includes(typeof value), "Value for select input has unexpected type");
+  const id = `input-select-${name}`;
+  const sortedOptions = useSortedOptionsWithGroup(selectableOptions);
+  return /*#__PURE__*/jsxs(FormControl, {
+    error: !!error,
+    required: required,
+    disabled: muiFormControl?.disabled,
+    children: [/*#__PURE__*/jsx(InputLabel, {
+      id: id,
+      required: required,
+      children: label
+    }), /*#__PURE__*/jsxs(Select, {
+      labelId: id,
+      ...selectComponentProps,
+      error: !!formState.errors[name],
+      label: label,
+      value: value,
+      ...register(name, {
+        required: required ? requiredErrorMessage : false,
+        validate,
+        disabled: muiFormControl?.disabled
+      }),
+      children: [/*#__PURE__*/jsx(MenuItem, {
+        value: "",
+        children: /*#__PURE__*/jsx("em", {
+          children: placeholderText
+        })
+      }), sortedOptions?.map((option, index) => {
+        const optionBefore = sortedOptions[index - 1];
+        const showGroup = (optionBefore || index == 0) && option.group && optionBefore?.group !== option.group;
+        const disabledText = typeof option.disabled === "string" ? option.disabled : undefined;
+        const isDisabled = !!disabledText || !!option.disabled;
+        const menuItem = /*#__PURE__*/jsx(MenuItem, {
+          value: option.value,
+          disabled: isDisabled,
+          title: typeof option.disabled === "string" ? option.disabled : undefined,
+          selected: value === option.value,
+          children: option.label
+        }, option.label);
+        const wrappedMenuItem = disabledText ? /*#__PURE__*/jsxs(Box, {
+          sx: {
+            position: "relative"
+          },
+          children: [menuItem, /*#__PURE__*/jsx(Stack, {
+            direction: "column",
+            justifyContent: "center",
+            spacing: 1,
+            sx: {
+              position: "absolute",
+              right: th => th.spacing(0.5),
+              top: 0,
+              bottom: 0
+            },
+            children: /*#__PURE__*/jsx(Tooltip, {
+              title: disabledText,
+              children: /*#__PURE__*/jsx(ErrorOutlineIcon, {})
+            })
+          })]
+        }) : menuItem;
+        return showGroup ? [/*#__PURE__*/jsx(ListSubheader, {
+          children: option.group
+        }, option.group), wrappedMenuItem] : wrappedMenuItem;
+      })]
+    }), error?.message && /*#__PURE__*/jsx(FormHelperText, {
+      children: error?.message
+    })]
+  });
+};
+
+const InputSelectFromEnum = ({
+  enumData,
+  formField,
+  placeholderText
+}) => {
+  const translateFunction = formField.t;
+  const options = useMemo(() => {
+    return Object.entries(enumData.enumToUse).map(([, value]) => {
+      const label = enumData.labelsForEnum[value];
+      assertTruthy(label, "Could not find a label for value" + value);
+      if (typeof label === "string") {
+        return {
+          label,
+          value
+        };
+      }
+      assertTruthy(translateFunction, "If you want to use translated labels you need to provide a translate function in the HookFormProvider.");
+      return {
+        label: label(translateFunction),
+        value
+      };
+    });
+  }, [enumData.enumToUse, enumData.labelsForEnum, translateFunction]);
+  return /*#__PURE__*/jsx(InputSelect, {
+    selectableOptions: options,
+    formField: formField,
+    placeholderText: placeholderText
+  });
+};
+
+/**
+ * Turn an async submitHandler into a synchronous one.
+ *
+ * Reasoning:
+ * - we're often talking to the API during form submission. The onSubmit handler will be returning a Promise in this case.
+ * - the `form` element, per definition, always expects a synchronous function.
+ * - creating on inline function in every form is a bit clumsy, and does not look clean.
+ *
+ * Then/catch cases should be properly handled by the submit handler itself,
+ *  the catch supplied here is only a last safety net against an "unhandled promise rejection" error.
+ */
+const syncSubmit = asyncSubmitHandler => {
+  return e => {
+    asyncSubmitHandler(e).catch(rethrow);
+  };
+};
+
+/**
+ * Wrapper around react-hook-form's useForm.
+ *
+ * Should behave like the original function, only exposing a "fieldName"
+ *  function on top which is used to validate field names.
+ */
+const useHookForm = props => {
+  const form = useForm(props);
+  return {
+    ...form,
+    fieldName: identity
+  };
+};
+
+/**
+ * Wrapper around react-hook-form's useFormContext.
+ *
+ * Should behave like the original function, only exposing a "fieldName"
+ *  function on top which is used to validate field names.
+ */
+const useHookFormContext = () => {
+  const form = useFormContext();
+  return {
+    ...form,
+    fieldName: identity
+  };
+};
+
+export { HookFormProvider, InputAutocomplete, InputCheckbox, InputDateTimePicker, InputEmail, InputPasswordSet, InputRadio, InputSelect, InputSelectFromEnum, InputText, LoadingButton, getFormError, loadingButtonStateFromFormState, loadingButtonStateFromReactQueryMutationStatus, syncSubmit, useHookForm, useHookFormContext, useLoadingButtonStateFromFormContext, useMergedFormField, useSortedOptionsWithGroup, useTranslateString };
+//# sourceMappingURL=packageExports.js.map