react-survey-builder 1.0.46 → 1.0.48

package/lib/survey-elements/index.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.TextInput2 = exports.TextInput = exports.TextArea2 = exports.TextArea = exports.Tags = exports.Signature = exports.Rating = exports.Range = exports.RadioButtons = exports.PhoneNumber2 = exports.PhoneNumber = exports.Paragraph = exports.NumberInput2 = exports.NumberInput = exports.LineBreak = exports.Label = exports.Image = exports.HyperLink = exports.Header = exports.FileUpload = exports.EmailInput2 = exports.EmailInput = exports.Dropdown = exports.Download = exports.DatePicker = exports.CustomPhoneInput = exports.CustomDateInput = exports.ContentBody = exports.Checkboxes = exports.Checkbox = exports.Camera = void 0;
+exports["default"] = exports.TextInput2 = exports.TextInput = exports.TextArea2 = exports.TextArea = exports.Tags = exports.Signature = exports.Rating = exports.Range = exports.RadioButtons = exports.PhoneNumber2 = exports.PhoneNumber = exports.Paragraph = exports.NumberInput2 = exports.NumberInput = exports.LineBreak = exports.Label = exports.Image = exports.HyperLink = exports.Header = exports.FileUpload = exports.EmailInput2 = exports.EmailInput = exports.Dropdown2 = exports.Dropdown = exports.Download = exports.DatePicker = exports.ContentBody = exports.Checkboxes = exports.Checkbox = exports.Camera = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
@@ -27,7 +27,6 @@ var _componentHeader = _interopRequireDefault(require("./component-header"));
 var _componentLabel = _interopRequireDefault(require("./component-label"));
 var _myxss = _interopRequireWildcard(require("./myxss"));
 var _fa = require("react-icons/fa");
-var _reactImask = require("react-imask");
 var _reactBootstrapTypeahead = require("react-bootstrap-typeahead");
 var _componentErrorMessage = _interopRequireDefault(require("./component-error-message"));
 var _ipUtils = require("../utils/ipUtils");
@@ -38,140 +37,20 @@ var _functions = require("../functions");
 var _esm = require("react-bootstrap/esm");
 var _validators = require("../utils/validators");
 var _reactHookForm = require("react-hook-form");
+var _masks = require("../utils/masks");
 var _excluded = ["name", "onChange", "value", "style", "item"],
   _excluded2 = ["name", "onChange", "value", "style", "item"],
   _excluded3 = ["name", "onChange", "value", "style", "item"],
   _excluded4 = ["name", "onChange", "value", "style", "item"],
   _excluded5 = ["name", "onChange", "value", "style", "item"],
-  _excluded6 = ["name", "onChange", "value", "style", "item"];
+  _excluded6 = ["name", "onChange", "value", "style", "item"],
+  _excluded7 = ["name", "onChange", "value", "style", "item"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } // eslint-disable-next-line max-classes-per-file
-var CustomPhoneInput = exports.CustomPhoneInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
-  var id = _ref.id,
-    name = _ref.name,
-    onChange = _ref.onChange,
-    className = _ref.className,
-    onBlur = _ref.onBlur,
-    autoComplete = _ref.autoComplete,
-    required = _ref.required,
-    disabled = _ref.disabled;
-  return /*#__PURE__*/_react["default"].createElement(_reactImask.IMaskInput, {
-    required: required !== null && required !== void 0 ? required : false,
-    disabled: disabled !== null && disabled !== void 0 ? disabled : false,
-    id: id,
-    name: name,
-    autoComplete: autoComplete,
-    onBlur: onBlur,
-    className: className,
-    mask: '{+1} (#00) 000-0000',
-    lazy: false,
-    overwrite: true,
-    definitions: {
-      '#': /[1-9]/
-    },
-    unmask: true // true|false|'typed'
-    ,
-    inputRef: ref
-    // inputRef={inputRef}  // access to nested input
-    // DO NOT USE onChange TO HANDLE CHANGES!
-    // USE onAccept INSTEAD
-    ,
-    onAccept:
-    // depending on prop above first argument is
-    // `value` if `unmask=false`,
-    // `unmaskedValue` if `unmask=true`,
-    // `typedValue` if `unmask='typed'`
-    function onAccept(value, mask) {
-      if (onChange !== undefined) {
-        onChange(value);
-      }
-    }
-  });
-});
-var CustomDateInput = exports.CustomDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
-  var id = _ref2.id,
-    name = _ref2.name,
-    onChange = _ref2.onChange,
-    className = _ref2.className,
-    onBlur = _ref2.onBlur,
-    autoComplete = _ref2.autoComplete,
-    _ref2$formatMask = _ref2.formatMask,
-    formatMask = _ref2$formatMask === void 0 ? 'MM/DD/YYYY' : _ref2$formatMask,
-    required = _ref2.required,
-    disabled = _ref2.disabled;
-  return /*#__PURE__*/_react["default"].createElement(_reactImask.IMaskInput, {
-    required: required !== null && required !== void 0 ? required : false,
-    disabled: disabled !== null && disabled !== void 0 ? disabled : false,
-    id: id,
-    name: name,
-    autoComplete: autoComplete,
-    onBlur: onBlur,
-    className: className,
-    mask: Date,
-    lazy: false,
-    overwrite: true,
-    pattern: formatMask !== null && formatMask !== void 0 ? formatMask : 'MM/DD/YYYY',
-    format: function format(date) {
-      var day = date.getDate();
-      var month = date.getMonth() + 1;
-      var year = date.getFullYear();
-      if (day < 10) day = "0" + day;
-      if (month < 10) month = "0" + month;
-      return [month, day, year].join('/');
-    },
-    autofix: true
-    // min={new Date(1900, 0, 1)}
-    // max={new Date()}
-    ,
-    blocks: {
-      DD: {
-        mask: IMask.MaskedRange,
-        from: 1,
-        to: 31,
-        maxLength: 2,
-        placeholderChar: 'D'
-      },
-      MM: {
-        mask: IMask.MaskedRange,
-        from: 1,
-        to: 12,
-        maxLength: 2,
-        placeholderChar: 'M'
-      },
-      YYYY: {
-        mask: IMask.MaskedRange,
-        from: 1900,
-        to: new Date().getFullYear() + 5,
-        placeholderChar: 'Y'
-      }
-    },
-    parse: function parse(str) {
-      var monthDayYear = str.split('/');
-      return new Date(monthDayYear[2], monthDayYear[0] - 1, monthDayYear[1]);
-    },
-    unmask: false // true|false|'typed'
-    ,
-    inputRef: ref
-    // inputRef={inputRef}  // access to nested input
-    // DO NOT USE onChange TO HANDLE CHANGES!
-    // USE onAccept INSTEAD
-    ,
-    onAccept:
-    // depending on prop above first argument is
-    // `value` if `unmask=false`,
-    // `unmaskedValue` if `unmask=true`,
-    // `typedValue` if `unmask='typed'`
-    function onAccept(value, mask) {
-      if (onChange !== undefined) {
-        onChange(value);
-      }
-    }
-  });
-});
 var SurveyElements = {};
 var Header = exports.Header = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2["default"])(Header, _React$Component);
@@ -325,14 +204,14 @@ var LineBreak = exports.LineBreak = /*#__PURE__*/function (_React$Component5) {
   }]);
   return LineBreak;
 }(_react["default"].Component);
-var TextInput = exports.TextInput = function TextInput(_ref3) {
+var TextInput = exports.TextInput = function TextInput(_ref) {
   var _item$required, _item$disabled, _item$required2;
-  var name = _ref3.name,
-    onChange = _ref3.onChange,
-    value = _ref3.value,
-    style = _ref3.style,
-    item = _ref3.item,
-    props = (0, _objectWithoutProperties2["default"])(_ref3, _excluded);
+  var name = _ref.name,
+    onChange = _ref.onChange,
+    value = _ref.value,
+    style = _ref.style,
+    item = _ref.item,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var methods = (0, _reactHookForm.useFormContext)();
   var inputField = _react["default"].useRef(null);
   var onChangeHandler = function onChangeHandler(value) {
@@ -344,9 +223,7 @@ var TextInput = exports.TextInput = function TextInput(_ref3) {
     type: 'text',
     required: (_item$required = item === null || item === void 0 ? void 0 : item.required) !== null && _item$required !== void 0 ? _item$required : false,
     disabled: (_item$disabled = item === null || item === void 0 ? void 0 : item.disabled) !== null && _item$disabled !== void 0 ? _item$disabled : false,
-    autoComplete: 'new-password',
-    // hack to prevent auto-complete for form fields
-    formatMask: (item === null || item === void 0 ? void 0 : item.formatMask) || 'MM/DD/YYYY'
+    autoComplete: 'new-password' // hack to prevent auto-complete for form fields
   };
   if (item !== null && item !== void 0 && item.label) {
     inputProps.label = item === null || item === void 0 ? void 0 : item.label;
@@ -367,24 +244,24 @@ var TextInput = exports.TextInput = function TextInput(_ref3) {
     name: name,
     rules: fieldRules
   };
-  controllerProps.render = function (_ref4) {
-    var _ref4$field = _ref4.field,
-      _onChange = _ref4$field.onChange,
-      onBlur = _ref4$field.onBlur,
-      value = _ref4$field.value,
-      name = _ref4$field.name,
-      ref = _ref4$field.ref,
-      _ref4$fieldState = _ref4.fieldState,
-      invalid = _ref4$fieldState.invalid,
-      isTouched = _ref4$fieldState.isTouched,
-      isDirty = _ref4$fieldState.isDirty,
-      error = _ref4$fieldState.error,
-      formState = _ref4.formState;
+  controllerProps.render = function (_ref2) {
+    var _ref2$field = _ref2.field,
+      _onChange = _ref2$field.onChange,
+      onBlur = _ref2$field.onBlur,
+      value = _ref2$field.value,
+      name = _ref2$field.name,
+      ref = _ref2$field.ref,
+      _ref2$fieldState = _ref2.fieldState,
+      invalid = _ref2$fieldState.invalid,
+      isTouched = _ref2$fieldState.isTouched,
+      isDirty = _ref2$fieldState.isDirty,
+      error = _ref2$fieldState.error,
+      formState = _ref2.formState;
     return /*#__PURE__*/_react["default"].createElement(_esm.Form.Control, (0, _extends2["default"])({
       onBlur: onBlur,
       onChange: function onChange(e) {
-        _onChange(e);
-        onChangeHandler(e);
+        _onChange(e.target.value);
+        onChangeHandler(e.target.value);
       },
       value: value,
       name: name,
@@ -555,14 +432,14 @@ var TextInput2 = exports.TextInput2 = /*#__PURE__*/function (_React$Component6)
   }]);
   return TextInput2;
 }(_react["default"].Component);
-var EmailInput = exports.EmailInput = function EmailInput(_ref5) {
+var EmailInput = exports.EmailInput = function EmailInput(_ref3) {
   var _item$required4, _item$disabled3, _item$required5;
-  var name = _ref5.name,
-    onChange = _ref5.onChange,
-    value = _ref5.value,
-    style = _ref5.style,
-    item = _ref5.item,
-    props = (0, _objectWithoutProperties2["default"])(_ref5, _excluded2);
+  var name = _ref3.name,
+    onChange = _ref3.onChange,
+    value = _ref3.value,
+    style = _ref3.style,
+    item = _ref3.item,
+    props = (0, _objectWithoutProperties2["default"])(_ref3, _excluded2);
   var methods = (0, _reactHookForm.useFormContext)();
   var inputField = _react["default"].useRef(null);
   var onChangeHandler = function onChangeHandler(value) {
@@ -603,24 +480,24 @@ var EmailInput = exports.EmailInput = function EmailInput(_ref5) {
     name: name,
     rules: fieldRules
   };
-  controllerProps.render = function (_ref6) {
-    var _ref6$field = _ref6.field,
-      _onChange2 = _ref6$field.onChange,
-      onBlur = _ref6$field.onBlur,
-      value = _ref6$field.value,
-      name = _ref6$field.name,
-      ref = _ref6$field.ref,
-      _ref6$fieldState = _ref6.fieldState,
-      invalid = _ref6$fieldState.invalid,
-      isTouched = _ref6$fieldState.isTouched,
-      isDirty = _ref6$fieldState.isDirty,
-      error = _ref6$fieldState.error,
-      formState = _ref6.formState;
+  controllerProps.render = function (_ref4) {
+    var _ref4$field = _ref4.field,
+      _onChange2 = _ref4$field.onChange,
+      onBlur = _ref4$field.onBlur,
+      value = _ref4$field.value,
+      name = _ref4$field.name,
+      ref = _ref4$field.ref,
+      _ref4$fieldState = _ref4.fieldState,
+      invalid = _ref4$fieldState.invalid,
+      isTouched = _ref4$fieldState.isTouched,
+      isDirty = _ref4$fieldState.isDirty,
+      error = _ref4$fieldState.error,
+      formState = _ref4.formState;
     return /*#__PURE__*/_react["default"].createElement(_esm.Form.Control, (0, _extends2["default"])({
       onBlur: onBlur,
       onChange: function onChange(e) {
-        _onChange2(e);
-        onChangeHandler(e);
+        _onChange2(e.target.value);
+        onChangeHandler(e.target.value);
       },
       value: value,
       name: name,
@@ -870,7 +747,7 @@ var PhoneNumber2 = exports.PhoneNumber2 = /*#__PURE__*/function (_React$Componen
       }, labelLocation === "FLOATING" ? /*#__PURE__*/_react["default"].createElement(_esm.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_esm.Form.Control, (0, _extends2["default"])({
         id: props.name + '-' + (0, _functions.generateUUID)()
       }, props, {
-        as: CustomPhoneInput
+        as: _masks.CustomPhoneInput
       })), /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
         htmlFor: props.name
       }))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
@@ -878,7 +755,7 @@ var PhoneNumber2 = exports.PhoneNumber2 = /*#__PURE__*/function (_React$Componen
       })), /*#__PURE__*/_react["default"].createElement(_esm.Form.Control, (0, _extends2["default"])({
         id: props.name + '-' + (0, _functions.generateUUID)()
       }, props, {
-        as: CustomPhoneInput
+        as: _masks.CustomPhoneInput
       }))), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_esm.Form.Text, {
         muted: true
       }, this.props.item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
@@ -888,14 +765,14 @@ var PhoneNumber2 = exports.PhoneNumber2 = /*#__PURE__*/function (_React$Componen
   }]);
   return PhoneNumber2;
 }(_react["default"].Component);
-var PhoneNumber = exports.PhoneNumber = function PhoneNumber(_ref7) {
+var PhoneNumber = exports.PhoneNumber = function PhoneNumber(_ref5) {
   var _item$required7, _item$disabled5, _item$required8;
-  var name = _ref7.name,
-    onChange = _ref7.onChange,
-    value = _ref7.value,
-    style = _ref7.style,
-    item = _ref7.item,
-    props = (0, _objectWithoutProperties2["default"])(_ref7, _excluded3);
+  var name = _ref5.name,
+    onChange = _ref5.onChange,
+    value = _ref5.value,
+    style = _ref5.style,
+    item = _ref5.item,
+    props = (0, _objectWithoutProperties2["default"])(_ref5, _excluded3);
   var methods = (0, _reactHookForm.useFormContext)();
   var inputField = _react["default"].useRef(null);
   var onChangeHandler = function onChangeHandler(value) {
@@ -930,23 +807,26 @@ var PhoneNumber = exports.PhoneNumber = function PhoneNumber(_ref7) {
   if ((_item$required8 = item === null || item === void 0 ? void 0 : item.required) !== null && _item$required8 !== void 0 ? _item$required8 : false) {
     fieldRules.required = 'Required Field';
   }
+  if (_masks.CustomPhoneInput !== undefined) {
+    inputProps.as = _masks.CustomPhoneInput;
+  }
   var controllerProps = {
     name: name,
     rules: fieldRules
   };
-  controllerProps.render = function (_ref8) {
-    var _ref8$field = _ref8.field,
-      _onChange3 = _ref8$field.onChange,
-      onBlur = _ref8$field.onBlur,
-      value = _ref8$field.value,
-      name = _ref8$field.name,
-      ref = _ref8$field.ref,
-      _ref8$fieldState = _ref8.fieldState,
-      invalid = _ref8$fieldState.invalid,
-      isTouched = _ref8$fieldState.isTouched,
-      isDirty = _ref8$fieldState.isDirty,
-      error = _ref8$fieldState.error,
-      formState = _ref8.formState;
+  controllerProps.render = function (_ref6) {
+    var _ref6$field = _ref6.field,
+      _onChange3 = _ref6$field.onChange,
+      onBlur = _ref6$field.onBlur,
+      value = _ref6$field.value,
+      name = _ref6$field.name,
+      ref = _ref6$field.ref,
+      _ref6$fieldState = _ref6.fieldState,
+      invalid = _ref6$fieldState.invalid,
+      isTouched = _ref6$fieldState.isTouched,
+      isDirty = _ref6$fieldState.isDirty,
+      error = _ref6$fieldState.error,
+      formState = _ref6.formState;
     return /*#__PURE__*/_react["default"].createElement(_esm.Form.Control, (0, _extends2["default"])({
       onBlur: onBlur,
       onChange: function onChange(e) {
@@ -957,8 +837,7 @@ var PhoneNumber = exports.PhoneNumber = function PhoneNumber(_ref7) {
       name: name,
       ref: ref,
       isInvalid: invalid,
-      id: name + '-' + (0, _functions.generateUUID)(),
-      as: CustomPhoneInput
+      id: name + '-' + (0, _functions.generateUUID)()
     }, inputProps));
   };
   if (value !== undefined) {
@@ -992,8 +871,7 @@ var PhoneNumber = exports.PhoneNumber = function PhoneNumber(_ref7) {
       value: value,
       name: name,
       ref: inputField,
-      id: name + '-2-' + (0, _functions.generateUUID)(),
-      as: CustomPhoneInput
+      id: name + '-2-' + (0, _functions.generateUUID)()
     }, inputProps)), /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], {
       item: item,
       className: item === null || item === void 0 ? void 0 : item.labelClassName,
@@ -1006,8 +884,7 @@ var PhoneNumber = exports.PhoneNumber = function PhoneNumber(_ref7) {
       value: value,
       name: name,
       ref: inputField,
-      id: name + '-2-' + (0, _functions.generateUUID)(),
-      as: CustomPhoneInput
+      id: name + '-2-' + (0, _functions.generateUUID)()
     }, inputProps))), item !== null && item !== void 0 && item.help ? /*#__PURE__*/_react["default"].createElement(_esm.Form.Text, {
       muted: true
     }, item === null || item === void 0 ? void 0 : item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
@@ -1051,14 +928,14 @@ var PhoneNumber = exports.PhoneNumber = function PhoneNumber(_ref7) {
     name: name
   })));
 };
-var DatePicker = exports.DatePicker = function DatePicker(_ref9) {
+var DatePicker = exports.DatePicker = function DatePicker(_ref7) {
   var _item$required10, _item$disabled7, _item$required11;
-  var name = _ref9.name,
-    onChange = _ref9.onChange,
-    value = _ref9.value,
-    style = _ref9.style,
-    item = _ref9.item,
-    props = (0, _objectWithoutProperties2["default"])(_ref9, _excluded4);
+  var name = _ref7.name,
+    onChange = _ref7.onChange,
+    value = _ref7.value,
+    style = _ref7.style,
+    item = _ref7.item,
+    props = (0, _objectWithoutProperties2["default"])(_ref7, _excluded4);
   var methods = (0, _reactHookForm.useFormContext)();
   var inputField = _react["default"].useRef(null);
   var onChangeHandler = function onChangeHandler(value) {
@@ -1093,23 +970,26 @@ var DatePicker = exports.DatePicker = function DatePicker(_ref9) {
   if ((_item$required11 = item === null || item === void 0 ? void 0 : item.required) !== null && _item$required11 !== void 0 ? _item$required11 : false) {
     fieldRules.required = 'Required Field';
   }
+  if (_masks.CustomDateInput !== undefined) {
+    inputProps.as = _masks.CustomDateInput;
+  }
   var controllerProps = {
     name: name,
     rules: fieldRules
   };
-  controllerProps.render = function (_ref10) {
-    var _ref10$field = _ref10.field,
-      _onChange4 = _ref10$field.onChange,
-      onBlur = _ref10$field.onBlur,
-      value = _ref10$field.value,
-      name = _ref10$field.name,
-      ref = _ref10$field.ref,
-      _ref10$fieldState = _ref10.fieldState,
-      invalid = _ref10$fieldState.invalid,
-      isTouched = _ref10$fieldState.isTouched,
-      isDirty = _ref10$fieldState.isDirty,
-      error = _ref10$fieldState.error,
-      formState = _ref10.formState;
+  controllerProps.render = function (_ref8) {
+    var _ref8$field = _ref8.field,
+      _onChange4 = _ref8$field.onChange,
+      onBlur = _ref8$field.onBlur,
+      value = _ref8$field.value,
+      name = _ref8$field.name,
+      ref = _ref8$field.ref,
+      _ref8$fieldState = _ref8.fieldState,
+      invalid = _ref8$fieldState.invalid,
+      isTouched = _ref8$fieldState.isTouched,
+      isDirty = _ref8$fieldState.isDirty,
+      error = _ref8$fieldState.error,
+      formState = _ref8.formState;
     return /*#__PURE__*/_react["default"].createElement(_esm.Form.Control, (0, _extends2["default"])({
       onBlur: onBlur,
       onChange: function onChange(e) {
@@ -1120,8 +1000,7 @@ var DatePicker = exports.DatePicker = function DatePicker(_ref9) {
       name: name,
       ref: ref,
       isInvalid: invalid,
-      id: name + '-' + (0, _functions.generateUUID)(),
-      as: CustomDateInput
+      id: name + '-' + (0, _functions.generateUUID)()
     }, inputProps));
   };
   if (value !== undefined) {
@@ -1155,8 +1034,7 @@ var DatePicker = exports.DatePicker = function DatePicker(_ref9) {
       value: value,
       name: name,
       ref: inputField,
-      id: name + '-2-' + (0, _functions.generateUUID)(),
-      as: CustomDateInput
+      id: name + '-2-' + (0, _functions.generateUUID)()
     }, inputProps)), /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], {
       item: item,
       className: item === null || item === void 0 ? void 0 : item.labelClassName,
@@ -1169,8 +1047,7 @@ var DatePicker = exports.DatePicker = function DatePicker(_ref9) {
       value: value,
       name: name,
       ref: inputField,
-      id: name + '-2-' + (0, _functions.generateUUID)(),
-      as: CustomDateInput
+      id: name + '-2-' + (0, _functions.generateUUID)()
     }, inputProps))), item !== null && item !== void 0 && item.help ? /*#__PURE__*/_react["default"].createElement(_esm.Form.Text, {
       muted: true
     }, item === null || item === void 0 ? void 0 : item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
@@ -1214,14 +1091,14 @@ var DatePicker = exports.DatePicker = function DatePicker(_ref9) {
     name: name
   })));
 };
-var NumberInput = exports.NumberInput = function NumberInput(_ref11) {
+var NumberInput = exports.NumberInput = function NumberInput(_ref9) {
   var _item$required13, _item$disabled9, _item$required14;
-  var name = _ref11.name,
-    onChange = _ref11.onChange,
-    value = _ref11.value,
-    style = _ref11.style,
-    item = _ref11.item,
-    props = (0, _objectWithoutProperties2["default"])(_ref11, _excluded5);
+  var name = _ref9.name,
+    onChange = _ref9.onChange,
+    value = _ref9.value,
+    style = _ref9.style,
+    item = _ref9.item,
+    props = (0, _objectWithoutProperties2["default"])(_ref9, _excluded5);
   var methods = (0, _reactHookForm.useFormContext)();
   var inputField = _react["default"].useRef(null);
   var onChangeHandler = function onChangeHandler(value) {
@@ -1233,9 +1110,7 @@ var NumberInput = exports.NumberInput = function NumberInput(_ref11) {
     type: 'number',
     required: (_item$required13 = item === null || item === void 0 ? void 0 : item.required) !== null && _item$required13 !== void 0 ? _item$required13 : false,
     disabled: (_item$disabled9 = item === null || item === void 0 ? void 0 : item.disabled) !== null && _item$disabled9 !== void 0 ? _item$disabled9 : false,
-    autoComplete: 'new-password',
-    // hack to prevent auto-complete for form fields
-    formatMask: (item === null || item === void 0 ? void 0 : item.formatMask) || 'MM/DD/YYYY'
+    autoComplete: 'new-password' // hack to prevent auto-complete for form fields
   };
   if (item !== null && item !== void 0 && item.label) {
     inputProps.label = item === null || item === void 0 ? void 0 : item.label;
@@ -1256,24 +1131,24 @@ var NumberInput = exports.NumberInput = function NumberInput(_ref11) {
     name: name,
     rules: fieldRules
   };
-  controllerProps.render = function (_ref12) {
-    var _ref12$field = _ref12.field,
-      _onChange5 = _ref12$field.onChange,
-      onBlur = _ref12$field.onBlur,
-      value = _ref12$field.value,
-      name = _ref12$field.name,
-      ref = _ref12$field.ref,
-      _ref12$fieldState = _ref12.fieldState,
-      invalid = _ref12$fieldState.invalid,
-      isTouched = _ref12$fieldState.isTouched,
-      isDirty = _ref12$fieldState.isDirty,
-      error = _ref12$fieldState.error,
-      formState = _ref12.formState;
+  controllerProps.render = function (_ref10) {
+    var _ref10$field = _ref10.field,
+      _onChange5 = _ref10$field.onChange,
+      onBlur = _ref10$field.onBlur,
+      value = _ref10$field.value,
+      name = _ref10$field.name,
+      ref = _ref10$field.ref,
+      _ref10$fieldState = _ref10.fieldState,
+      invalid = _ref10$fieldState.invalid,
+      isTouched = _ref10$fieldState.isTouched,
+      isDirty = _ref10$fieldState.isDirty,
+      error = _ref10$fieldState.error,
+      formState = _ref10.formState;
     return /*#__PURE__*/_react["default"].createElement(_esm.Form.Control, (0, _extends2["default"])({
       onBlur: onBlur,
       onChange: function onChange(e) {
-        _onChange5(e);
-        onChangeHandler(e);
+        _onChange5(e.target.value);
+        onChangeHandler(e.target.value);
       },
       value: value,
       name: name,
@@ -1447,14 +1322,14 @@ var NumberInput2 = exports.NumberInput2 = /*#__PURE__*/function (_React$Componen
   }]);
   return NumberInput2;
 }(_react["default"].Component);
-var TextArea = exports.TextArea = function TextArea(_ref13) {
+var TextArea = exports.TextArea = function TextArea(_ref11) {
   var _item$required16, _item$disabled11, _item$required17;
-  var name = _ref13.name,
-    onChange = _ref13.onChange,
-    value = _ref13.value,
-    style = _ref13.style,
-    item = _ref13.item,
-    props = (0, _objectWithoutProperties2["default"])(_ref13, _excluded6);
+  var name = _ref11.name,
+    onChange = _ref11.onChange,
+    value = _ref11.value,
+    style = _ref11.style,
+    item = _ref11.item,
+    props = (0, _objectWithoutProperties2["default"])(_ref11, _excluded6);
   var methods = (0, _reactHookForm.useFormContext)();
   var inputField = _react["default"].useRef(null);
   var onChangeHandler = function onChangeHandler(value) {
@@ -1466,9 +1341,7 @@ var TextArea = exports.TextArea = function TextArea(_ref13) {
     type: 'number',
     required: (_item$required16 = item === null || item === void 0 ? void 0 : item.required) !== null && _item$required16 !== void 0 ? _item$required16 : false,
     disabled: (_item$disabled11 = item === null || item === void 0 ? void 0 : item.disabled) !== null && _item$disabled11 !== void 0 ? _item$disabled11 : false,
-    autoComplete: 'new-password',
-    // hack to prevent auto-complete for form fields
-    formatMask: (item === null || item === void 0 ? void 0 : item.formatMask) || 'MM/DD/YYYY'
+    autoComplete: 'new-password' // hack to prevent auto-complete for form fields
   };
   if (item !== null && item !== void 0 && item.label) {
     inputProps.label = item === null || item === void 0 ? void 0 : item.label;
@@ -1489,24 +1362,24 @@ var TextArea = exports.TextArea = function TextArea(_ref13) {
     name: name,
     rules: fieldRules
   };
-  controllerProps.render = function (_ref14) {
-    var _ref14$field = _ref14.field,
-      _onChange6 = _ref14$field.onChange,
-      onBlur = _ref14$field.onBlur,
-      value = _ref14$field.value,
-      name = _ref14$field.name,
-      ref = _ref14$field.ref,
-      _ref14$fieldState = _ref14.fieldState,
-      invalid = _ref14$fieldState.invalid,
-      isTouched = _ref14$fieldState.isTouched,
-      isDirty = _ref14$fieldState.isDirty,
-      error = _ref14$fieldState.error,
-      formState = _ref14.formState;
+  controllerProps.render = function (_ref12) {
+    var _ref12$field = _ref12.field,
+      _onChange6 = _ref12$field.onChange,
+      onBlur = _ref12$field.onBlur,
+      value = _ref12$field.value,
+      name = _ref12$field.name,
+      ref = _ref12$field.ref,
+      _ref12$fieldState = _ref12.fieldState,
+      invalid = _ref12$fieldState.invalid,
+      isTouched = _ref12$fieldState.isTouched,
+      isDirty = _ref12$fieldState.isDirty,
+      error = _ref12$fieldState.error,
+      formState = _ref12.formState;
     return /*#__PURE__*/_react["default"].createElement(_esm.Form.Control, (0, _extends2["default"])({
       onBlur: onBlur,
       onChange: function onChange(e) {
-        _onChange6(e);
-        onChangeHandler(e);
+        _onChange6(e.target.value);
+        onChangeHandler(e.target.value);
       },
       value: value,
       name: name,
@@ -1680,17 +1553,198 @@ var TextArea2 = exports.TextArea2 = /*#__PURE__*/function (_React$Component10) {
   }]);
   return TextArea2;
 }(_react["default"].Component);
-var Dropdown = exports.Dropdown = /*#__PURE__*/function (_React$Component11) {
-  (0, _inherits2["default"])(Dropdown, _React$Component11);
-  var _super11 = _createSuper(Dropdown);
-  function Dropdown(props) {
+var Dropdown = exports.Dropdown = function Dropdown(_ref13) {
+  var _item$required19, _item$disabled13, _item$required20;
+  var name = _ref13.name,
+    onChange = _ref13.onChange,
+    value = _ref13.value,
+    style = _ref13.style,
+    item = _ref13.item,
+    props = (0, _objectWithoutProperties2["default"])(_ref13, _excluded7);
+  var methods = (0, _reactHookForm.useFormContext)();
+  var inputField = _react["default"].useRef(null);
+  var onChangeHandler = function onChangeHandler(value) {
+    if (onChange !== undefined) {
+      onChange(value);
+    }
+  };
+  var inputProps = {
+    type: 'text',
+    required: (_item$required19 = item === null || item === void 0 ? void 0 : item.required) !== null && _item$required19 !== void 0 ? _item$required19 : false,
+    disabled: (_item$disabled13 = item === null || item === void 0 ? void 0 : item.disabled) !== null && _item$disabled13 !== void 0 ? _item$disabled13 : false,
+    autoComplete: 'new-password' // hack to prevent auto-complete for form fields
+  };
+  if (item !== null && item !== void 0 && item.label) {
+    inputProps.label = item === null || item === void 0 ? void 0 : item.label;
+  }
+  if (item !== null && item !== void 0 && item.placeholder) {
+    inputProps.placeholder = item === null || item === void 0 ? void 0 : item.placeholder;
+  } else if (item !== null && item !== void 0 && item.label) {
+    inputProps.placeholder = item === null || item === void 0 ? void 0 : item.label;
+  }
+  if (item !== null && item !== void 0 && item.mutable) {
+    inputProps.ref = inputField;
+  }
+  var fieldRules = {};
+  if ((_item$required20 = item === null || item === void 0 ? void 0 : item.required) !== null && _item$required20 !== void 0 ? _item$required20 : false) {
+    fieldRules.required = 'Required Field';
+  }
+  var controllerProps = {
+    name: name,
+    rules: fieldRules
+  };
+  controllerProps.render = function (_ref14) {
+    var _ref14$field = _ref14.field,
+      _onChange7 = _ref14$field.onChange,
+      onBlur = _ref14$field.onBlur,
+      value = _ref14$field.value,
+      name = _ref14$field.name,
+      ref = _ref14$field.ref,
+      _ref14$fieldState = _ref14.fieldState,
+      invalid = _ref14$fieldState.invalid,
+      isTouched = _ref14$fieldState.isTouched,
+      isDirty = _ref14$fieldState.isDirty,
+      error = _ref14$fieldState.error,
+      formState = _ref14.formState;
+    return /*#__PURE__*/_react["default"].createElement(_esm.Form.Select, (0, _extends2["default"])({
+      onBlur: onBlur,
+      onChange: function onChange(e) {
+        _onChange7(e.target.value);
+        onChangeHandler(e.target.value);
+      },
+      value: value,
+      name: name,
+      ref: ref,
+      isInvalid: invalid,
+      id: name + '-' + (0, _functions.generateUUID)()
+    }, inputProps), inputProps.placeholder ? /*#__PURE__*/_react["default"].createElement("option", {
+      value: ""
+    }, inputProps.placeholder) : null, item === null || item === void 0 ? void 0 : item.options.map(function (option) {
+      var thisKey = "preview_".concat(option.key);
+      return /*#__PURE__*/_react["default"].createElement("option", {
+        value: option.value,
+        key: thisKey
+      }, option.text);
+    }));
+  };
+  if (value !== undefined) {
+    controllerProps.defaultValue = value;
+  }
+  if ((item === null || item === void 0 ? void 0 : item.disabled) !== undefined) {
+    var _item$disabled14;
+    controllerProps.disabled = (_item$disabled14 = item === null || item === void 0 ? void 0 : item.disabled) !== null && _item$disabled14 !== void 0 ? _item$disabled14 : false;
+  }
+  if ((item === null || item === void 0 ? void 0 : item.required) !== undefined) {
+    var _item$required21;
+    controllerProps.required = (_item$required21 = item === null || item === void 0 ? void 0 : item.required) !== null && _item$required21 !== void 0 ? _item$required21 : false;
+  }
+  var labelLocation = 'ABOVE';
+  if (item !== null && item !== void 0 && item.labelLocation) {
+    labelLocation = item === null || item === void 0 ? void 0 : item.labelLocation;
+  }
+  var baseClasses = 'SortableItem rfb-item';
+  if (item !== null && item !== void 0 && item.pageBreakBefore) {
+    baseClasses += ' alwaysbreak';
+  }
+  if (!methods) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: _objectSpread({}, style),
+      className: baseClasses
+    }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], (0, _extends2["default"])({
+      item: item
+    }, props)), /*#__PURE__*/_react["default"].createElement(_esm.Form.Group, {
+      className: "form-group mb-3"
+    }, labelLocation === "FLOATING" ? /*#__PURE__*/_react["default"].createElement(_esm.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_esm.Form.Select, (0, _extends2["default"])({
+      id: name + '-' + (0, _functions.generateUUID)(),
+      value: value,
+      name: name,
+      ref: inputField
+    }, inputProps), inputProps.placeholder ? /*#__PURE__*/_react["default"].createElement("option", {
+      value: ""
+    }, inputProps.placeholder) : null, item === null || item === void 0 ? void 0 : item.options.map(function (option) {
+      var thisKey = "preview_".concat(option.key);
+      return /*#__PURE__*/_react["default"].createElement("option", {
+        value: option.value,
+        key: thisKey
+      }, option.text);
+    })), /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], {
+      item: item,
+      className: item === null || item === void 0 ? void 0 : item.labelClassName,
+      htmlFor: name
+    })) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], {
+      item: item,
+      className: item === null || item === void 0 ? void 0 : item.labelClassName,
+      htmlFor: name
+    }), /*#__PURE__*/_react["default"].createElement(_esm.Form.Select, (0, _extends2["default"])({
+      id: name + '-' + (0, _functions.generateUUID)(),
+      value: value,
+      name: name,
+      ref: inputField
+    }, inputProps), inputProps.placeholder ? /*#__PURE__*/_react["default"].createElement("option", {
+      value: ""
+    }, inputProps.placeholder) : null, item === null || item === void 0 ? void 0 : item.options.map(function (option) {
+      var thisKey = "preview_".concat(option.key);
+      return /*#__PURE__*/_react["default"].createElement("option", {
+        value: option.value,
+        key: thisKey
+      }, option.text);
+    }))), item !== null && item !== void 0 && item.help ? /*#__PURE__*/_react["default"].createElement(_esm.Form.Text, {
+      muted: true
+    }, item === null || item === void 0 ? void 0 : item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
+      name: name
+    })));
+  }
+  if ((item === null || item === void 0 ? void 0 : item.print) === true) {
+    var _item$options$find;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: _objectSpread({}, style),
+      className: baseClasses
+    }, /*#__PURE__*/_react["default"].createElement(_esm.Form.Group, {
+      className: "form-group mb-3"
+    }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], {
+      item: item,
+      className: item === null || item === void 0 ? void 0 : item.labelClassName,
+      htmlFor: name
+    }), /*#__PURE__*/_react["default"].createElement("div", null, item === null || item === void 0 || (_item$options$find = item.options.find(function (option) {
+      return option.value === value;
+    })) === null || _item$options$find === void 0 ? void 0 : _item$options$find.text)));
+  }
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: _objectSpread({}, style),
+    className: baseClasses
+  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], (0, _extends2["default"])({
+    item: item
+  }, props)), /*#__PURE__*/_react["default"].createElement(_esm.Form.Group, {
+    className: "form-group mb-3"
+  }, labelLocation === "FLOATING" ? /*#__PURE__*/_react["default"].createElement(_esm.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, (0, _extends2["default"])({
+    control: methods.control
+  }, controllerProps)), /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], {
+    item: item,
+    className: item === null || item === void 0 ? void 0 : item.labelClassName,
+    htmlFor: name
+  })) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], {
+    item: item,
+    className: item === null || item === void 0 ? void 0 : item.labelClassName,
+    htmlFor: name
+  }), /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, (0, _extends2["default"])({
+    control: methods.control
+  }, controllerProps))), item !== null && item !== void 0 && item.help ? /*#__PURE__*/_react["default"].createElement(_esm.Form.Text, {
+    muted: true
+  }, item === null || item === void 0 ? void 0 : item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
+    name: name
+  })));
+};
+var Dropdown2 = exports.Dropdown2 = /*#__PURE__*/function (_React$Component11) {
+  (0, _inherits2["default"])(Dropdown2, _React$Component11);
+  var _super11 = _createSuper(Dropdown2);
+  function Dropdown2(props) {
     var _this11;
-    (0, _classCallCheck2["default"])(this, Dropdown);
+    (0, _classCallCheck2["default"])(this, Dropdown2);
     _this11 = _super11.call(this, props);
     _this11.inputField = /*#__PURE__*/_react["default"].createRef();
     return _this11;
   }
-  (0, _createClass2["default"])(Dropdown, [{
+  (0, _createClass2["default"])(Dropdown2, [{
     key: "render",
     value: function render() {
       var _this12 = this;
@@ -1769,7 +1823,7 @@ var Dropdown = exports.Dropdown = /*#__PURE__*/function (_React$Component11) {
       })));
     }
   }]);
-  return Dropdown;
+  return Dropdown2;
 }(_react["default"].Component);
 var Signature = exports.Signature = /*#__PURE__*/function (_React$Component12) {
   (0, _inherits2["default"])(Signature, _React$Component12);