@itcase/forms 1.0.63 → 1.0.65

package/dist/itcase-forms.cjs.js

@@ -33,6 +33,7 @@ var Select = require('@itcase/ui/components/Select');
 var Switch = require('@itcase/ui/components/Switch');
 var Textarea = require('@itcase/ui/components/Textarea');
 var reactImask = require('react-imask');
+var Chips = require('@itcase/ui/components/Chips');
 var Button = require('@itcase/ui/components/Button');
 var Group$1 = require('@itcase/ui/components/Group');
 var Notification = require('@itcase/ui/components/Notification');
@@ -154,9 +155,11 @@ function FieldWrapperBase(props) {
     labelHidden,
     labelTextColor,
     labelTextSize,
+    labelTextSizeMobile,
     labelTextWeight,
     helpText,
     helpTextSize,
+    helpTextSizeMobile,
     helpTextWeight,
     helpTextColor,
     isErrorState,
@@ -223,6 +226,7 @@ function FieldWrapperBase(props) {
     htmlFor: id
   }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
     size: labelTextSize,
+    sizeMobile: labelTextSizeMobile,
     textColor: labelTextColor,
     textWeight: labelTextWeight
   }, label, labelHidden && '\u00A0')), desc && /*#__PURE__*/React__default.default.createElement("div", {
@@ -256,6 +260,7 @@ function FieldWrapperBase(props) {
     className: "form-field__message-item form-field__message-item_type_help-text",
     dataTestId: `${inputName}FieldMessageHelpText`,
     size: helpTextSize,
+    sizeMobile: helpTextSizeMobile,
     textColor: helpTextColor,
     textWeight: helpTextWeight
   }, helpText), (!isErrorState && !helpText || isErrorState && !helpText && !errorMessage) && /*#__PURE__*/React__default.default.createElement(Text.Text, {
@@ -2371,120 +2376,112 @@ MaskedInputField.propTypes = {
   unmasked: PropTypes__default.default.string
 };
 
-const focusOnError = (formElementsList, errors) => {
-  const selectsIds = Object.keys(errors).map(fieldName => {
-    if (fieldName === finalForm.FORM_ERROR) {
-      // TODO: get from somewhere
-      return 'notification__item_status_error';
-    }
-    return `react-select-id_${fieldName}-input`;
-  });
-  const errorFieldElement = formElementsList.find(element => {
-    if (element.name) {
-      return finalForm.getIn(errors, element.name);
-    } else {
-      return selectsIds.includes(element.id);
-    }
-  });
-  const errorsList = Object.keys(errors);
-  if (!errorFieldElement && errorsList.length) {
-    let errorElement;
-    try {
-      const fieldName = errorsList[0];
-      if (fieldName === finalForm.FORM_ERROR) {
-        errorElement = document.querySelector('notification__item_status_error');
-      } else {
-        errorElement = document.querySelector(`#${fieldName}-error`);
-        if (!errorElement) {
-          errorElement = document.querySelector(`#id_${fieldName}`);
-        }
-      }
-    } catch (err) {
-      console.warn(err);
-    }
-    if (errorElement) {
-      errorElement.scrollIntoView({
-        block: 'center'
-      }); // , behavior: 'smooth'
-    }
-  }
+function ChipsField(props) {
+  const {
+    classNameGroupItem,
+    fieldProps,
+    initialValue,
+    inputProps,
+    isDisabled,
+    isRequired,
+    name,
+    options,
+    showMessage,
+    onChange
+  } = props;
+  const {
+    change
+  } = reactFinalForm.useForm();
 
-  // The field is covered by the header because header is "sticky",
-  // that's we scroll manually so that the field falls into the center of the visible area
-  if (errorFieldElement) {
-    errorFieldElement.scrollIntoView({
-      block: 'center'
+  // Callback for value changes
+  const onChangeSomeInput = React.useCallback((inputValue, newOptionValue) => {
+    const updatedValues = inputValue.includes(newOptionValue) ? inputValue.filter(selectedValue => selectedValue !== newOptionValue) : [...inputValue, newOptionValue];
+    change(name, updatedValues);
+    onChange && onChange(updatedValues);
+  }, [change, name, onChange]);
+  React.useEffect(() => {
+    initialValue && change(name, initialValue);
+    // update the form value only when the initialValue changes, so use disable eslint to ignore the warning
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initialValue]);
+  return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
+    initialValue: initialValue,
+    name: name
+  }, function Render({
+    input,
+    meta
+  }) {
+    const {
+      isErrorState,
+      isValidState,
+      errorKey,
+      errorMessage
+    } = useFieldValidationState({
+      fieldProps: fieldProps,
+      input: input,
+      meta: meta
     });
-  }
-  return null;
-};
-const focusOnErrorDecorator = createDecorator__default.default(null, focusOnError);
-const setErrorsMutator = (args, state) => {
-  const [fieldName, data] = args;
-  const submitError = data.submitError;
-  const fieldError = data.error;
-  if (fieldName === 'non_field_errors') {
-    // state.formState.invalid = true
-    // state.formState.valid = false
-    state.formState.error = fieldError;
-    state.formState.submitError = submitError;
-  } else if (fieldName in state.fields) {
-    if (fieldError) {
-      const errorsState = Object.assign({}, state.formState.errors, {
-        [fieldName]: fieldError
-      });
-      state.fields[fieldName].touched = true;
-      state.fields[fieldName].error = fieldError;
-      state.formState.errors = errorsState;
-    }
-    if (submitError) {
-      const submitErrorsState = Object.assign({}, state.formState.submitErrors, {
-        [fieldName]: submitError
-      });
-
-      // state.fields[fieldName].submitFailed = true
-      // state.fields[fieldName].submitSucceeded = false
-      state.fields[fieldName].submitError = submitError;
-      state.formState.submitErrors = submitErrorsState;
-      state.formState.submitFailed = true;
-      state.formState.submitSucceeded = false;
-      state.formState.lastSubmittedValues = state.formState.values;
-    }
-  }
-};
-const sendFormDataToServer = async (url, data) => {
-  try {
-    const response = await axios__default.default({
-      url: url,
-      method: 'POST',
-      data: data
+    const updatedInputProps = useValidationAppearanceInputProps({
+      validationStateKey: isErrorState ? errorKey : 'success',
+      inputProps: inputProps
     });
-    return {
-      success: true,
-      response
-    };
-  } catch (error) {
-    const formErrors = {};
-    if (typeof error.response?.data === 'string') {
-      formErrors[finalForm.FORM_ERROR] = 'Something went wrong';
-    }
-    if (typeof error.response?.data === 'object') {
-      Object.entries(error.response.data).forEach(([fieldName, errorsList]) => {
-        formErrors[fieldName] = errorsList[0];
-      });
-    }
-    return {
-      success: false,
-      formErrors,
-      error
-    };
-  }
+    const activeOptionsList = React.useMemo(() => {
+      const emptyOptionsList = [{
+        value: null,
+        label: null
+      }];
+      if (input?.value) {
+        const currentOptions = options.filter(option => input.value?.includes(option.value));
+        return currentOptions || emptyOptionsList;
+      }
+      return emptyOptionsList;
+    }, [input.value]);
+    return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
+      className: clsx__default.default('form-field_type_chips', 'form__item_type_chips', classNameGroupItem),
+      errorKey: errorKey,
+      errorMessage: errorMessage,
+      fieldClassName: 'form-chips',
+      inputName: input.name,
+      inputValue: input.value,
+      isDisabled: isDisabled,
+      isErrorState: isErrorState,
+      isRequired: isRequired,
+      isValidState: isValidState,
+      metaActive: meta.active,
+      metaError: meta.error,
+      showMessage: showMessage
+    }, fieldProps), options.map(option => /*#__PURE__*/React__default.default.createElement(Chips.Chips, Object.assign({
+      isActive: activeOptionsList.includes(option),
+      className: clsx__default.default(meta.active && 'form-chips_state_focus', meta.error && meta.touched && `form-chips_state_${errorKey}`),
+      key: option.value,
+      label: option.label,
+      value: option.value,
+      onClick: () => onChangeSomeInput(input.value, option.value)
+    }, updatedInputProps))));
+  });
+}
+ChipsField.propTypes = {
+  classNameGroupItem: PropTypes__default.default.string,
+  fieldProps: PropTypes__default.default.object,
+  initialValue: PropTypes__default.default.array,
+  input: PropTypes__default.default.object,
+  inputProps: PropTypes__default.default.object,
+  isDisabled: PropTypes__default.default.bool,
+  isRequired: PropTypes__default.default.bool,
+  name: PropTypes__default.default.string,
+  options: PropTypes__default.default.arrayOf(PropTypes__default.default.shape({
+    value: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number, PropTypes__default.default.bool]),
+    label: PropTypes__default.default.string
+  })),
+  showMessage: PropTypes__default.default.bool,
+  onChange: PropTypes__default.default.func
 };
 
 const formTypes = {
   checkbox: 'checkbox',
   custom: 'custom',
   choice: 'choice',
+  chips: 'chips',
   code: 'code',
   datePicker: 'datePicker',
   dateRangePicker: 'dateRangePicker',
@@ -2512,6 +2509,12 @@ function generateField(field, config, props) {
           key: config.key
         }, field, props));
       }
+    case formTypes.chips:
+      {
+        return /*#__PURE__*/React__default.default.createElement(ChipsField, Object.assign({
+          key: config.key
+        }, field, props));
+      }
     case formTypes.code:
       {
         return /*#__PURE__*/React__default.default.createElement(CodeField, Object.assign({
@@ -2596,8 +2599,119 @@ function generateField(field, config, props) {
   }
 }
 
+const focusOnError = (formElementsList, errors) => {
+  const selectsIds = Object.keys(errors).map(fieldName => {
+    if (fieldName === finalForm.FORM_ERROR) {
+      // TODO: get from somewhere
+      return 'notification__item_status_error';
+    }
+    return `react-select-id_${fieldName}-input`;
+  });
+  const errorFieldElement = formElementsList.find(element => {
+    if (element.name) {
+      return finalForm.getIn(errors, element.name);
+    } else {
+      return selectsIds.includes(element.id);
+    }
+  });
+  const errorsList = Object.keys(errors);
+  if (!errorFieldElement && errorsList.length) {
+    let errorElement;
+    try {
+      const fieldName = errorsList[0];
+      if (fieldName === finalForm.FORM_ERROR) {
+        errorElement = document.querySelector('notification__item_status_error');
+      } else {
+        errorElement = document.querySelector(`#${fieldName}-error`);
+        if (!errorElement) {
+          errorElement = document.querySelector(`#id_${fieldName}`);
+        }
+      }
+    } catch (err) {
+      console.warn(err);
+    }
+    if (errorElement) {
+      errorElement.scrollIntoView({
+        block: 'center'
+      }); // , behavior: 'smooth'
+    }
+  }
+
+  // The field is covered by the header because header is "sticky",
+  // that's we scroll manually so that the field falls into the center of the visible area
+  if (errorFieldElement) {
+    errorFieldElement.scrollIntoView({
+      block: 'center'
+    });
+  }
+  return null;
+};
+const focusOnErrorDecorator = createDecorator__default.default(null, focusOnError);
+const setErrorsMutator = (args, state) => {
+  const [fieldName, data] = args;
+  const submitError = data.submitError;
+  const fieldError = data.error;
+  if (fieldName === 'non_field_errors') {
+    // state.formState.invalid = true
+    // state.formState.valid = false
+    state.formState.error = fieldError;
+    state.formState.submitError = submitError;
+  } else if (fieldName in state.fields) {
+    if (fieldError) {
+      const errorsState = Object.assign({}, state.formState.errors, {
+        [fieldName]: fieldError
+      });
+      state.fields[fieldName].touched = true;
+      state.fields[fieldName].error = fieldError;
+      state.formState.errors = errorsState;
+    }
+    if (submitError) {
+      const submitErrorsState = Object.assign({}, state.formState.submitErrors, {
+        [fieldName]: submitError
+      });
+
+      // state.fields[fieldName].submitFailed = true
+      // state.fields[fieldName].submitSucceeded = false
+      state.fields[fieldName].submitError = submitError;
+      state.formState.submitErrors = submitErrorsState;
+      state.formState.submitFailed = true;
+      state.formState.submitSucceeded = false;
+      state.formState.lastSubmittedValues = state.formState.values;
+    }
+  }
+};
+const sendFormDataToServer = async (url, data) => {
+  try {
+    const response = await axios__default.default({
+      url: url,
+      method: 'POST',
+      data: data
+    });
+    return {
+      success: true,
+      response
+    };
+  } catch (error) {
+    const formErrors = {};
+    if (typeof error.response?.data === 'string') {
+      formErrors[finalForm.FORM_ERROR] = 'Something went wrong';
+    }
+    if (typeof error.response?.data === 'object') {
+      Object.entries(error.response.data).forEach(([fieldName, errorsList]) => {
+        formErrors[fieldName] = errorsList[0];
+      });
+    }
+    return {
+      success: false,
+      formErrors,
+      error
+    };
+  }
+};
+
 const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalForm(props, ref) {
   const {
+    isLoading,
     additionalProps,
     after,
     before,
@@ -2608,13 +2722,13 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     buttonPadding,
     className,
     config,
-    dataTour,
     dataTestId,
-    dataTourButtons,
     dataTestIdButtons,
     dataTestIdPrimaryButton,
     dataTestIdSecondaryButton,
     dataTestIdTertiaryButton,
+    dataTour,
+    dataTourButtons,
     dataTourPrimaryButton,
     dataTourSecondaryButton,
     dataTourTertiaryButton,
@@ -2628,7 +2742,6 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     groupGap,
     initialValues,
     initialValuesEqual,
-    isLoading,
     language,
     loader,
     loaderFill,
@@ -2638,10 +2751,6 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     mutators,
     notificationCloseButton,
     notificationType,
-    onChangeFormValues,
-    onClickSecondaryButton,
-    onClickTertiaryButton,
-    onSubmit,
     primaryButton,
     primaryButtonFill,
     primaryButtonFillHover,
@@ -2650,6 +2759,7 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     primaryButtonLabelTextColor,
     primaryButtonLabelTextWeight,
     primaryButtonSize,
+    renderFieldsWrapper = wrapperChildren => wrapperChildren,
     secondaryButton,
     secondaryButtonFill,
     secondaryButtonFillHover,
@@ -2672,7 +2782,11 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     titleTextSize,
     titleTextWeight,
     type,
-    validationSchema
+    validationSchema,
+    onChangeFormValues,
+    onClickSecondaryButton,
+    onClickTertiaryButton,
+    onSubmit
   } = props;
   const validate = useYupValidationSchema(validationSchema, language);
   const onRefFormInstance = React.useCallback(formInstance => {
@@ -2704,26 +2818,27 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     initialValues: initialValues,
     initialValuesEqual: initialValuesEqual,
     mutators: mutators,
+    validate: validate,
     render: ({
+      form,
       handleSubmit,
-      submitError,
       modifiedSinceLastSubmit,
-      form
+      submitError
     }) => {
       return /*#__PURE__*/React__default.default.createElement("form", {
-        style: formStyles,
-        className: clsx__default.default(className, 'form', set && `form_set_${set}`, type && `form_type_${type}`, directionClass, fillClass, shapeClass, elevationClass),
-        name: formName,
-        "data-tour": dataTour,
-        "data-test-id": dataTestId
+        className: clsx__default.default(className, 'form', set && `form_set_${set}`, type && `form_type_${type}`, directionClass, fillClass, shapeClass, elevationClass)
         // We no need set reference to html element, we need reference to "final-form" instance
         ,
         ref: () => onRefFormInstance(form),
-        onSubmit: handleSubmit,
+        name: formName,
+        autoCapitalize: disableFieldsAutoComplete ? 'off' : undefined,
         autoComplete: disableFieldsAutoComplete ? 'off' : undefined,
         autoCorrect: disableFieldsAutoComplete ? 'off' : undefined,
-        autoCapitalize: disableFieldsAutoComplete ? 'off' : undefined,
-        spellCheck: disableFieldsAutoComplete ? 'false' : undefined
+        "data-test-id": dataTestId,
+        "data-tour": dataTour,
+        spellCheck: disableFieldsAutoComplete ? 'false' : undefined,
+        style: formStyles,
+        onSubmit: handleSubmit
       }, before, title && /*#__PURE__*/React__default.default.createElement(Title.Title, {
         className: "form__title",
         size: titleTextSize,
@@ -2738,88 +2853,88 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
         className: clsx__default.default('notification', 'form-notification', notificationType ? `form-notification_type_${notificationType}` : 'form-notification_type_global')
       }, /*#__PURE__*/React__default.default.createElement(Notification.NotificationItem, {
         className: "form-notification__item",
-        titleTextSize: "h6",
         closeButton: notificationCloseButton,
+        status: "error",
         title: form.getState().submitError,
-        set: "form",
-        status: "error"
+        titleTextSize: "h6",
+        set: "form"
       })), onChangeFormValues && /*#__PURE__*/React__default.default.createElement(reactFinalForm.FormSpy, {
         subscription: {
           values: true
         },
         onChange: onChangeFormValues
-      }), Boolean(Object.keys(config).length) && /*#__PURE__*/React__default.default.createElement(Group$1.Group, {
+      }), Boolean(Object.keys(config).length) && /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, renderFieldsWrapper( /*#__PURE__*/React__default.default.createElement(Group$1.Group, {
+        className: "form__wrapper",
         direction: "vertical",
-        gap: fieldsGap || groupGap,
-        className: "form__wrapper"
+        gap: fieldsGap || groupGap
       }, Object.keys(config).map(key => generateField(config[key], {
         key
       }, additionalProps[config[key].name])), isLoading && (loader || /*#__PURE__*/React__default.default.createElement(Loader.Loader, {
         className: "form__loader",
-        set: loaderSet,
         fill: loaderFill,
         itemFill: loaderItemFill,
-        text: loaderText
-      }))), (primaryButtonLabel || primaryButton || secondaryButtonLabel || secondaryButton || tertiaryButton || tertiaryButtonLabel) && /*#__PURE__*/React__default.default.createElement(Group$1.Group, {
+        text: loaderText,
+        set: loaderSet
+      }))))), (primaryButtonLabel || primaryButton || secondaryButtonLabel || secondaryButton || tertiaryButton || tertiaryButtonLabel) && /*#__PURE__*/React__default.default.createElement(Group$1.Group, {
+        className: "form__button",
         fill: buttonFill,
-        justifyContent: buttonJustifyContent,
-        direction: buttonDirection,
         padding: buttonPadding,
-        gap: buttonGap,
-        className: "form__button",
+        dataTestId: dataTestIdButtons,
         dataTour: dataTourButtons,
-        dataTestId: dataTestIdButtons
+        direction: buttonDirection,
+        gap: buttonGap,
+        justifyContent: buttonJustifyContent
       }, primaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(Button.Button, {
-        width: "fill",
         className: "form__button-item",
+        width: "fill",
+        labelTextColor: primaryButtonLabelTextColor,
+        labelTextSize: primaryButtonLabelSize,
         fill: primaryButtonFill,
         fillHover: primaryButtonFillHover,
-        size: primaryButtonSize,
-        labelTextColor: primaryButtonLabelTextColor,
-        labelSize: primaryButtonLabelSize,
-        labelTextWeight: primaryButtonLabelTextWeight,
-        label: primaryButtonLabel,
+        dataTestId: dataTestIdPrimaryButton,
         dataTour: dataTourPrimaryButton,
-        dataTestId: dataTestIdPrimaryButton
+        label: primaryButtonLabel,
+        labelTextWeight: primaryButtonLabelTextWeight,
+        size: primaryButtonSize
       }) : primaryButton, secondaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(Button.Button, {
-        width: "fill",
         className: "form__button-item",
+        width: "fill",
+        labelTextColor: secondaryButtonLabelTextColor,
+        labelTextSize: secondaryButtonLabelSize,
         fill: secondaryButtonFill,
         fillHover: secondaryButtonFillHover,
-        size: secondaryButtonSize,
-        labelTextColor: secondaryButtonLabelTextColor,
-        labelSize: secondaryButtonLabelSize,
-        labelTextWeight: secondaryButtonLabelTextWeight,
-        label: secondaryButtonLabel,
-        onClick: onClickSecondaryButton,
+        dataTestId: dataTestIdSecondaryButton,
         dataTour: dataTourSecondaryButton,
-        dataTestId: dataTestIdSecondaryButton
+        label: secondaryButtonLabel,
+        labelTextWeight: secondaryButtonLabelTextWeight,
+        size: secondaryButtonSize,
+        onClick: onClickSecondaryButton
       }) : secondaryButton, tertiaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(Button.Button, {
-        width: "fill",
         className: "form__button-item",
+        width: "fill",
+        labelTextColor: tertiaryButtonLabelTextColor,
+        labelTextSize: tertiaryButtonLabelSize,
         fill: tertiaryButtonFill,
         fillHover: tertiaryButtonFillHover,
-        size: tertiaryButtonSize,
-        labelTextColor: tertiaryButtonLabelTextColor,
-        labelSize: tertiaryButtonLabelSize,
-        labelTextWeight: tertiaryButtonLabelTextWeight,
-        label: tertiaryButtonLabel,
-        onClick: onClickTertiaryButton,
+        dataTestId: dataTestIdTertiaryButton,
         dataTour: dataTourTertiaryButton,
-        dataTestId: dataTestIdTertiaryButton
+        label: tertiaryButtonLabel,
+        labelTextWeight: tertiaryButtonLabelTextWeight,
+        size: tertiaryButtonSize,
+        onClick: onClickTertiaryButton
       }) : tertiaryButton), after);
     },
     subscription: {
-      submitting: true,
-      pristine: true,
       modifiedSinceLastSubmit: true,
-      submitError: true
+      pristine: true,
+      submitError: true,
+      submitting: true
     },
-    validate: validate,
     onSubmit: onSubmit
   });
 });
 FinalForm.propTypes = {
+  isLoading: PropTypes__default.default.bool,
   additionalProps: PropTypes__default.default.object,
   after: PropTypes__default.default.any,
   before: PropTypes__default.default.any,
@@ -2845,7 +2960,6 @@ FinalForm.propTypes = {
   groupGap: PropTypes__default.default.string,
   initialValues: PropTypes__default.default.any,
   initialValuesEqual: PropTypes__default.default.any,
-  isLoading: PropTypes__default.default.bool,
   language: PropTypes__default.default.string,
   loader: PropTypes__default.default.element,
   loaderFill: PropTypes__default.default.string,
@@ -2893,16 +3007,16 @@ FinalForm.propTypes = {
   onSubmit: PropTypes__default.default.func
 };
 FinalForm.defaultProps = {
-  additionalProps: {},
+  direction: 'vertical',
   isLoading: false,
-  loaderSet: 'simple',
+  additionalProps: {},
+  buttonDirection: 'vertical',
+  disableFieldsAutoComplete: false,
+  language: 'en',
   loaderFill: 'surfacePrimary',
   loaderItemFill: 'surfaceItemAccent',
-  language: 'en',
-  titleSize: 'h1',
-  buttonDirection: 'vertical',
-  direction: 'vertical',
-  disableFieldsAutoComplete: false
+  loaderSet: 'simple',
+  titleSize: 'h1'
 };
 
 const DEFAULT_MESSAGES_FIELDS = {
@@ -3030,6 +3144,7 @@ Object.defineProperty(exports, "useFormState", {
   get: function () { return reactFinalForm.useFormState; }
 });
 exports.Checkbox = CheckboxField;
+exports.ChipsField = ChipsField;
 exports.ChoiceField = ChoiceField;
 exports.CodeField = CodeField;
 exports.CustomField = CustomField;