@nwon/react-mui-hook-form 1.3.0 → 1.3.2

package/dist/packageExports.js

@@ -1,7 +1,7 @@
 import { CheckBoxOutlineBlank, CheckBox } from '@mui/icons-material';
 import { FormHelperText, useFormControl, Checkbox, FormControl, Autocomplete, TextField, FormControlLabel, Box, InputLabel, OutlinedInput, FormLabel, RadioGroup, Radio, Select, MenuItem, Stack, Tooltip, ListSubheader, Slider, Switch, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';
 import { filterNoUndefinedNoNull, uppercaseFirstLetter, assertTruthy, objectHasKey, rethrow } from '@nvon/baseline';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useMemo, useState, useEffect } from 'react';
 import { useFormContext, useWatch, Controller, useForm, FormProvider } from 'react-hook-form';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { identity } from 'lodash-es';
@@ -173,6 +173,38 @@ formFieldDefaults) => {
   return withPlainStrings;
 };
 
+/**
+ * An effect that unregisters a field from the form when the component unmounts.
+ *
+ * @throws Error when FormContext is null.
+ */
+const useEffectFieldUnregisterOnUnmount = ({
+  name,
+  unregisterOptions,
+  isUnregisteringOnUnmount
+}) => {
+  const form = useHookFormContext();
+  /**
+   * Default options for unregistering the field.
+   *
+   * Needed to wrap this in a state in order to prevent infinite rerenders.
+   */
+  const [options] = useState(unregisterOptions);
+  if (!form) {
+    throw Error(formContextNull);
+  }
+  const {
+    unregister
+  } = form;
+  useEffect(() => {
+    return () => {
+      if (isUnregisteringOnUnmount) {
+        unregister(name, options);
+      }
+    };
+  }, [isUnregisteringOnUnmount, name, unregister, options]);
+};
+
 var GroupLabelSorting;
 (function (GroupLabelSorting) {
   GroupLabelSorting["Alphabetical"] = "alphabetical";
@@ -234,6 +266,7 @@ const icon = /*#__PURE__*/jsx(CheckBoxOutlineBlank, {
 const checkedIcon = /*#__PURE__*/jsx(CheckBox, {
   fontSize: "small"
 });
+const defaultNonMultiselectValue = "";
 /**
  * Renders a MUI autocomplete input that is embedded in a react hook form context.
  *
@@ -246,7 +279,9 @@ const InputAutocomplete = ({
   autoCompleteProps,
   checkboxesForMultiselect: renderCheckboxes,
   groupSorting,
-  inputTextFieldProps
+  inputTextFieldProps,
+  unregisterOptions,
+  isUnregisteringOnUnmount
 }) => {
   const form = useHookFormContext();
   if (!form) {
@@ -266,16 +301,42 @@ const InputAutocomplete = ({
     requiredErrorMessage,
     validate
   } = useMergedFormField(formField, formField.t);
-  const sortedOptions = useSortedOptionsWithGroup$1(selectableOptions, groupSorting);
-  const value = useWatch({
+  useEffectFieldUnregisterOnUnmount({
     name,
-    control
+    unregisterOptions,
+    isUnregisteringOnUnmount
   });
   const multiSelect = !!autoCompleteProps?.multiple;
-  let valueToUse = value;
-  if (!value) {
-    valueToUse = multiSelect ? [] : "";
-  }
+  const value = useWatch({
+    name,
+    control,
+    exact: true
+  });
+  const {
+    value: valueToUse,
+    hasValue
+  } = useMemo(() => {
+    if (value) {
+      return {
+        value,
+        hasValue: true
+      };
+    }
+    return {
+      value: multiSelect ? [] : defaultNonMultiselectValue,
+      hasValue: false
+    };
+  }, [multiSelect, value]);
+  const adjustedSelectableOptions = useMemo(() => {
+    if (hasValue || multiSelect) {
+      return selectableOptions;
+    }
+    return [...selectableOptions, {
+      value: defaultNonMultiselectValue,
+      label: ""
+    }];
+  }, [hasValue, multiSelect, selectableOptions]);
+  const sortedOptions = useSortedOptionsWithGroup$1(adjustedSelectableOptions, groupSorting);
   assertTruthy(["string", "number", "object"].includes(typeof valueToUse), `Value (Field: ${name}, value: ${valueToUse?.toString() || "undefined"}) for select input has unexpected type`);
   const isRequired = required || muiFormControl?.required;
   const isDisabled = muiFormControl?.disabled || autoCompleteProps?.disabled;
@@ -285,28 +346,30 @@ const InputAutocomplete = ({
     disabled: isDisabled
   });
   const currentValue = useMemo(() => {
-    return multiSelect ? selectableOptions.filter(o => {
+    return multiSelect ? adjustedSelectableOptions.filter(o => {
       if (Array.isArray(valueToUse)) {
         return valueToUse.includes(o.value);
       }
-      return selectableOptions.find(option => option.value === valueToUse);
-    }) : selectableOptions.find(option => option.value === valueToUse);
-  }, [multiSelect, selectableOptions, valueToUse]);
+      return adjustedSelectableOptions.find(option => option.value === valueToUse);
+    }) : adjustedSelectableOptions.find(option => option.value === valueToUse);
+  }, [multiSelect, adjustedSelectableOptions, valueToUse]);
   const renderOption = useMemo(() => {
     if (autoCompleteProps?.renderOption) {
       return autoCompleteProps.renderOption;
     }
-    return multiSelect && renderCheckboxes ? (liProps, option) => /*#__PURE__*/jsxs("li", {
-      ...liProps,
-      children: [/*#__PURE__*/jsx(Checkbox, {
-        icon: icon,
-        checkedIcon: checkedIcon,
-        sx: {
-          mr: 2
-        },
-        checked: Array.isArray(currentValue) ? !!currentValue.find(item => item.value === option.value) : false
-      }), option.label]
-    }) : undefined;
+    return multiSelect && renderCheckboxes ? (liProps, option) => {
+      return /*#__PURE__*/jsxs("li", {
+        ...liProps,
+        children: [/*#__PURE__*/jsx(Checkbox, {
+          icon: icon,
+          checkedIcon: checkedIcon,
+          sx: {
+            mr: 2
+          },
+          checked: Array.isArray(currentValue) ? !!currentValue.find(item => item.value === option.value) : false
+        }), option.label]
+      });
+    } : undefined;
   }, [autoCompleteProps?.renderOption, currentValue, multiSelect, renderCheckboxes]);
   return /*#__PURE__*/jsxs(FormControl, {
     error: hasError,
@@ -314,7 +377,7 @@ const InputAutocomplete = ({
     disabled: isDisabled,
     children: [/*#__PURE__*/jsx(Autocomplete, {
       options: sortedOptions,
-      value: currentValue || "",
+      value: currentValue,
       ...props,
       required: isRequired,
       label: label,
@@ -342,15 +405,20 @@ const InputAutocomplete = ({
         }
       },
       noOptionsText: noOptions,
-      renderInput: params => /*#__PURE__*/jsx(TextField, {
-        ...params,
-        label: label,
-        variant: "outlined",
-        ...inputTextFieldProps,
-        required: isRequired,
-        disabled: isDisabled,
-        error: hasError
-      }),
+      filterOptions: options => {
+        return options.filter(o => o.value !== defaultNonMultiselectValue);
+      },
+      renderInput: params => {
+        return /*#__PURE__*/jsx(TextField, {
+          ...params,
+          label: label,
+          variant: "outlined",
+          ...inputTextFieldProps,
+          required: isRequired,
+          disabled: isDisabled,
+          error: hasError
+        });
+      },
       groupBy: option => option.group || "Choose"
       // need to parse this as any in order to get no typing errors
       // for multiselect
@@ -367,7 +435,9 @@ const InputCheckbox = ({
   formField,
   jsxLabel,
   checkboxProps,
-  formControlLabelProps
+  formControlLabelProps,
+  unregisterOptions,
+  isUnregisteringOnUnmount
 }) => {
   const {
     control,
@@ -382,6 +452,11 @@ const InputCheckbox = ({
     requiredErrorMessage,
     validate
   } = useMergedFormField(formField);
+  useEffectFieldUnregisterOnUnmount({
+    name,
+    unregisterOptions,
+    isUnregisteringOnUnmount
+  });
   const id = `hook-form-input-checkbox-${name}`;
   const disabled = muiFormControl?.disabled || checkboxProps?.disabled;
   const isRequired = required || muiFormControl?.required;
@@ -433,7 +508,9 @@ const InputCheckbox = ({
 
 const InputDatePicker = ({
   formField,
-  datePickerProps
+  datePickerProps,
+  unregisterOptions,
+  isUnregisteringOnUnmount
 }) => {
   const {
     control
@@ -446,6 +523,11 @@ const InputDatePicker = ({
     required,
     requiredErrorMessage
   } = useMergedFormField(formField);
+  useEffectFieldUnregisterOnUnmount({
+    name,
+    unregisterOptions,
+    isUnregisteringOnUnmount
+  });
   const [date, setDate] = useState(dayjs());
   const isRequired = required || muiFormControl?.required;
   const isDisabled = muiFormControl?.disabled || datePickerProps?.disabled;
@@ -494,7 +576,9 @@ const InputDatePicker = ({
 
 const InputDateTimePicker = ({
   formField,
-  dateTimePickerProps
+  dateTimePickerProps,
+  unregisterOptions,
+  isUnregisteringOnUnmount
 }) => {
   const {
     control
@@ -507,6 +591,11 @@ const InputDateTimePicker = ({
     required,
     requiredErrorMessage
   } = useMergedFormField(formField);
+  useEffectFieldUnregisterOnUnmount({
+    name,
+    unregisterOptions,
+    isUnregisteringOnUnmount
+  });
   const [date, setDate] = useState(dayjs());
   const isRequired = required || muiFormControl?.required;
   const isDisabled = muiFormControl?.disabled || dateTimePickerProps?.disabled;
@@ -558,7 +647,9 @@ const InputDateTimePicker = ({
 const InputNumber = ({
   formField,
   textFieldProps,
-  numericFormatProps
+  numericFormatProps,
+  unregisterOptions,
+  isUnregisteringOnUnmount
 }) => {
   const form = useHookFormContext();
   const {
@@ -572,6 +663,11 @@ const InputNumber = ({
     requiredErrorMessage,
     validate
   } = useMergedFormField(formField, formField.t);
+  useEffectFieldUnregisterOnUnmount({
+    name,
+    unregisterOptions,
+    isUnregisteringOnUnmount
+  });
   if (!form) {
     throw Error(formContextNull);
   }
@@ -622,7 +718,9 @@ const InputNumber = ({
 
 const InputOutlinedInput = ({
   formField,
-  outlinedInputProps
+  outlinedInputProps,
+  unregisterOptions,
+  isUnregisteringOnUnmount
 }) => {
   const form = useHookFormContext();
   const muiFormControl = useFormControl();
@@ -633,6 +731,11 @@ const InputOutlinedInput = ({
     requiredErrorMessage,
     validate
   } = useMergedFormField(formField, formField.t);
+  useEffectFieldUnregisterOnUnmount({
+    name,
+    unregisterOptions,
+    isUnregisteringOnUnmount
+  });
   if (!form) {
     throw Error(formContextNull);
   }
@@ -684,7 +787,9 @@ const InputRadio = ({
   formField,
   selectableOptions,
   formControlLabelProps,
-  radioGroupProps
+  radioGroupProps,
+  unregisterOptions,
+  isUnregisteringOnUnmount
 }) => {
   const {
     control
@@ -698,6 +803,11 @@ const InputRadio = ({
     requiredErrorMessage,
     validate
   } = useMergedFormField(formField);
+  useEffectFieldUnregisterOnUnmount({
+    name,
+    unregisterOptions,
+    isUnregisteringOnUnmount
+  });
   const id = `hook-form-input-radio-${name}`;
   const isRequired = required || muiFormControl?.required;
   const isDisabled = muiFormControl?.disabled || formControlLabelProps?.disabled;
@@ -740,7 +850,7 @@ const InputRadio = ({
               label: option.label,
               ...formControlLabelProps,
               disabled: isDisabled
-            }, option.value);
+            }, typeof option.value === "boolean" ? option.value.toString() : option.value);
           })
         });
       }
@@ -773,7 +883,9 @@ const InputSelect = ({
   selectableOptions,
   optionsTitle,
   selectComponentProps,
-  tooltipHolder
+  tooltipHolder,
+  unregisterOptions,
+  isUnregisteringOnUnmount
 }) => {
   const form = useHookFormContext();
   if (!form) {
@@ -790,19 +902,18 @@ const InputSelect = ({
     requiredErrorMessage,
     validate
   } = useMergedFormField(formField, formField.t);
-  const defaultValue = selectComponentProps?.multiple ? [] : "";
-  const valueFromForm = useWatch({
+  useEffectFieldUnregisterOnUnmount({
     name,
-    control,
-    defaultValue
+    unregisterOptions,
+    isUnregisteringOnUnmount
   });
-  if (selectComponentProps?.multiple && valueFromForm) {
-    assertTruthy(Array.isArray(valueFromForm), `Value (Field: ${name}, value: ${valueFromForm?.toString() || "undefined"}) for multiple select need to be an array or undefined`);
-  } else if (valueFromForm) {
-    assertTruthy(["string", "number"].includes(typeof valueFromForm), `Value (Field: ${name}, value: ${valueFromForm?.toString() || "undefined"}) for select input has unexpected type`);
-  }
+  const defaultValue = useMemo(() => selectComponentProps?.multiple ? [] : "", [selectComponentProps?.multiple]);
   const id = `input-select-${name}`;
-  const sortedOptions = useSortedOptionsWithGroup(selectableOptions);
+  const adjustedOptions = useMemo(() => selectComponentProps?.multiple || Array.isArray(defaultValue) ? selectableOptions : [...selectableOptions, {
+    value: defaultValue,
+    label: ""
+  }], [defaultValue, selectComponentProps?.multiple, selectableOptions]);
+  const sortedOptions = useSortedOptionsWithGroup(adjustedOptions);
   const hasErrors = useFormFieldHasError(formField.name);
   const isRequired = required || muiFormControl?.required;
   const isDisabled = muiFormControl?.disabled || selectComponentProps?.disabled;
@@ -850,16 +961,16 @@ const InputSelect = ({
             children: /*#__PURE__*/jsx("em", {
               children: optionsTitle
             })
-          }), sortedOptions?.map((option, index) => {
+          }), sortedOptions?.filter(o => o.value !== "").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 isDisabledToUse = !!disabledText || !!option.disabled || isDisabled;
             const menuItem = /*#__PURE__*/jsx(MenuItem, {
-              value: option.value,
+              value: typeof option.value === "boolean" ? option.value.toString() : option.value,
               disabled: isDisabledToUse,
               title: typeof option.disabled === "string" ? option.disabled : undefined,
-              selected: value === option.value,
+              selected: typeof option.value === "boolean" ? option.value.toString() === value : value === option.value,
               children: option.label
             }, option.label);
             const wrappedMenuItem = disabledText ? /*#__PURE__*/jsxs(Box, {
@@ -901,8 +1012,8 @@ const InputSelectFromEnum = props => {
   } = props;
   const translateFunction = formField.t;
   const options = useMemo(() => {
-    return Object.entries(enumData.enumToUse).map(([, value]) => {
-      const label = enumData.labelsForEnum[value];
+    return Object.entries(enumData.enumToUse).map(([key, value]) => {
+      const label = enumData.labelsForEnum[key];
       assertTruthy(label, "Could not find a label for value: " + value + " in Field " + formField.name);
       if (typeof label === "string") {
         return {
@@ -926,7 +1037,9 @@ const InputSelectFromEnum = props => {
 
 const InputSlider = ({
   formField,
-  sliderProps
+  sliderProps,
+  unregisterOptions,
+  isUnregisteringOnUnmount
 }) => {
   const form = useHookFormContext();
   const muiFormControl = useFormControl();
@@ -937,6 +1050,11 @@ const InputSlider = ({
     requiredErrorMessage,
     validate
   } = useMergedFormField(formField, formField.t);
+  useEffectFieldUnregisterOnUnmount({
+    name,
+    unregisterOptions,
+    isUnregisteringOnUnmount
+  });
   if (!form) {
     throw Error(formContextNull);
   }
@@ -987,7 +1105,9 @@ const InputSlider = ({
 const InputSwitch = ({
   formField,
   switchProps,
-  formControlLabelProps
+  formControlLabelProps,
+  unregisterOptions,
+  isUnregisteringOnUnmount
 }) => {
   const {
     control,
@@ -1001,6 +1121,11 @@ const InputSwitch = ({
     requiredErrorMessage,
     validate
   } = useMergedFormField(formField);
+  useEffectFieldUnregisterOnUnmount({
+    name,
+    unregisterOptions,
+    isUnregisteringOnUnmount
+  });
   const isRequired = required || muiFormControl?.required;
   const isDisabled = muiFormControl?.disabled || switchProps?.disabled;
   return /*#__PURE__*/jsxs(FormControl, {
@@ -1048,7 +1173,9 @@ const InputSwitch = ({
 
 const InputTextField = ({
   formField,
-  textFieldProps
+  textFieldProps,
+  unregisterOptions,
+  isUnregisteringOnUnmount
 }) => {
   const form = useHookFormContext();
   const {
@@ -1062,6 +1189,11 @@ const InputTextField = ({
     requiredErrorMessage,
     validate
   } = useMergedFormField(formField, formField.t);
+  useEffectFieldUnregisterOnUnmount({
+    name,
+    unregisterOptions,
+    isUnregisteringOnUnmount
+  });
   if (!form) {
     throw Error(formContextNull);
   }
@@ -1107,7 +1239,9 @@ const InputTextField = ({
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const InputTimePicker = ({
   formField,
-  timePickerProps
+  timePickerProps,
+  unregisterOptions,
+  isUnregisteringOnUnmount
 }) => {
   const {
     control
@@ -1120,6 +1254,11 @@ const InputTimePicker = ({
     required,
     requiredErrorMessage
   } = useMergedFormField(formField);
+  useEffectFieldUnregisterOnUnmount({
+    name,
+    unregisterOptions,
+    isUnregisteringOnUnmount
+  });
   const [date, setDate] = useState(dayjs());
   const isRequired = required || muiFormControl?.required;
   const isDisabled = muiFormControl?.disabled || timePickerProps?.disabled;
@@ -1171,7 +1310,9 @@ const InputToggleButton = ({
   formField,
   toggleButtonProps,
   formControlLabelProps,
-  children
+  children,
+  unregisterOptions,
+  isUnregisteringOnUnmount
 }) => {
   const {
     register,
@@ -1186,10 +1327,16 @@ const InputToggleButton = ({
     requiredErrorMessage,
     validate
   } = useMergedFormField(formField);
+  useEffectFieldUnregisterOnUnmount({
+    name,
+    unregisterOptions,
+    isUnregisteringOnUnmount
+  });
   const id = `hook-form-input-toggle-button-${name}`;
   const valueToUse = !!useWatch({
     name: name,
-    control: control
+    control: control,
+    exact: true
   });
   assertTruthy(typeof valueToUse === "boolean", `Value (Field: ${name}, value: ${valueToUse?.toString() || "undefined"}) for a InputToggleButton should be undefined or boolean`);
   const onClick = useCallback(
@@ -1245,7 +1392,9 @@ const InputToggleButtonGroup = ({
   stackProps,
   typographyProps,
   buttons,
-  enforceValueSelected = false
+  enforceValueSelected = false,
+  unregisterOptions,
+  isUnregisteringOnUnmount
 }) => {
   const {
     register,
@@ -1260,6 +1409,11 @@ const InputToggleButtonGroup = ({
     requiredErrorMessage,
     validate
   } = useMergedFormField(formField);
+  useEffectFieldUnregisterOnUnmount({
+    name,
+    unregisterOptions,
+    isUnregisteringOnUnmount
+  });
   const changeEv = useCallback((_, value) => {
     const onSetValue = () => setValue(name, value, {
       shouldValidate: true,
@@ -1285,7 +1439,8 @@ const InputToggleButtonGroup = ({
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
   const valueFromForm = useWatch({
     name: name,
-    control: control
+    control: control,
+    exact: true
   });
   const isRequired = required || muiFormControl?.required;
   const isDisabled = muiFormControl?.disabled || toggleButtonGroupProps?.disabled;
@@ -1386,13 +1541,21 @@ const HookFormProvider = FormProvider;
 
 const InputEmail = props => {
   const merged = useMergedFormField(props.formField, props.formField.t, formDefaults);
-  return /*#__PURE__*/jsx(InputTextField, {
+  const commonProps = useMemo(() => ({
     textFieldProps: {
       type: "email",
       autoComplete: "email",
       ...props.textFieldProps
     },
     formField: merged
+  }), [merged, props.textFieldProps]);
+  return props.isUnregisteringOnUnmount ? /*#__PURE__*/jsx(InputTextField, {
+    ...commonProps,
+    isUnregisteringOnUnmount: props.isUnregisteringOnUnmount,
+    unregisterOptions: props.unregisterOptions
+  }) : /*#__PURE__*/jsx(InputTextField, {
+    ...commonProps,
+    isUnregisteringOnUnmount: props.isUnregisteringOnUnmount
   });
 };
 const formDefaults = {