@nwon/react-mui-hook-form 1.0.2 → 1.0.3

package/dist/packageExports.js

@@ -1,731 +0,0 @@
-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 { 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,
-  checkboxProps,
-  formControlLabelProps
-}) => {
-  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,
-        ...checkboxProps
-      }),
-      label: jsxLabel ?? label,
-      ...formControlLabelProps
-    }), 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,
-  tooltipHolder
-}) => {
-  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: tooltipHolder ? /*#__PURE__*/jsx(Tooltip, {
-              title: disabledText,
-              children: tooltipHolder
-            }) : null
-          })]
-        }) : 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, LoadingButtonState, getFormError, loadingButtonStateFromFormState, loadingButtonStateFromReactQueryMutationStatus, syncSubmit, useHookForm, useHookFormContext, useLoadingButtonStateFromFormContext, useMergedFormField, useSortedOptionsWithGroup, useTranslateString };
-//# sourceMappingURL=packageExports.js.map