react-survey-builder 1.0.43 → 1.0.45

package/lib/dynamic-option-list.js

@@ -12,7 +12,7 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _react = _interopRequireDefault(require("react"));
 var _fa = require("react-icons/fa");
-var _reactBootstrap = require("react-bootstrap");
+var _esm = require("react-bootstrap/esm");
 var _functions = require("./functions");
 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; } }
@@ -113,11 +113,11 @@ var DynamicOptionList = exports["default"] = /*#__PURE__*/function (_React$Compo
       }
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "dynamic-option-list"
-      }, /*#__PURE__*/_react["default"].createElement("ul", null, /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Row, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Col, {
+      }, /*#__PURE__*/_react["default"].createElement("ul", null, /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement(_esm.Row, null, /*#__PURE__*/_react["default"].createElement(_esm.Col, {
         sm: 6
-      }, /*#__PURE__*/_react["default"].createElement("b", null, "Options")), this.props.canHaveOptionValue && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Col, {
+      }, /*#__PURE__*/_react["default"].createElement("b", null, "Options")), this.props.canHaveOptionValue && /*#__PURE__*/_react["default"].createElement(_esm.Col, {
         sm: 2
-      }, /*#__PURE__*/_react["default"].createElement("b", null, "Value")), this.props.canHaveOptionValue && this.props.canHaveOptionCorrect && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Col, {
+      }, /*#__PURE__*/_react["default"].createElement("b", null, "Value")), this.props.canHaveOptionValue && this.props.canHaveOptionCorrect && /*#__PURE__*/_react["default"].createElement(_esm.Col, {
         sm: 4
       }, /*#__PURE__*/_react["default"].createElement("b", null, "Correct")))), this.props.element.options.map(function (option, index) {
         var thisKey = "edit_".concat(option.key);
@@ -125,9 +125,9 @@ var DynamicOptionList = exports["default"] = /*#__PURE__*/function (_React$Compo
         return /*#__PURE__*/_react["default"].createElement("li", {
           className: "clearfix",
           key: thisKey
-        }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Row, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Col, {
+        }, /*#__PURE__*/_react["default"].createElement(_esm.Row, null, /*#__PURE__*/_react["default"].createElement(_esm.Col, {
           sm: 6
-        }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
+        }, /*#__PURE__*/_react["default"].createElement(_esm.Form.Control, {
           tabIndex: index + 1,
           style: {
             width: '100%'
@@ -138,28 +138,28 @@ var DynamicOptionList = exports["default"] = /*#__PURE__*/function (_React$Compo
           value: option.text,
           onBlur: _this2.updateOption.bind(_this2),
           onChange: _this2.editOption.bind(_this2, index)
-        })), _this2.props.canHaveOptionValue && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Col, {
+        })), _this2.props.canHaveOptionValue && /*#__PURE__*/_react["default"].createElement(_esm.Col, {
           sm: 2
-        }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
+        }, /*#__PURE__*/_react["default"].createElement(_esm.Form.Control, {
           type: "text",
           name: "value_".concat(index),
           value: val,
           onChange: _this2.editValue.bind(_this2, index)
-        })), _this2.props.canHaveOptionValue && _this2.props.canHaveOptionCorrect && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Col, {
+        })), _this2.props.canHaveOptionValue && _this2.props.canHaveOptionCorrect && /*#__PURE__*/_react["default"].createElement(_esm.Col, {
           sm: 1
-        }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Check, {
+        }, /*#__PURE__*/_react["default"].createElement(_esm.Form.Check, {
           type: "checkbox",
           value: "1",
           onChange: _this2.editOptionCorrect.bind(_this2, index),
           checked: option.hasOwnProperty('correct')
-        })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Col, {
+        })), /*#__PURE__*/_react["default"].createElement(_esm.Col, {
           sm: 3
         }, /*#__PURE__*/_react["default"].createElement("div", {
           className: "dynamic-options-actions-buttons"
-        }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
+        }, /*#__PURE__*/_react["default"].createElement(_esm.Button, {
           variant: "success",
           onClick: _this2.addOption.bind(_this2, index)
-        }, /*#__PURE__*/_react["default"].createElement(_fa.FaPlusCircle, null)), index > 0 && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
+        }, /*#__PURE__*/_react["default"].createElement(_fa.FaPlusCircle, null)), index > 0 && /*#__PURE__*/_react["default"].createElement(_esm.Button, {
           variant: "danger",
           onClick: _this2.removeOption.bind(_this2, index)
         }, /*#__PURE__*/_react["default"].createElement(_fa.FaMinusCircle, null))))));

package/lib/fieldset/index.js

@@ -13,7 +13,7 @@ var _react = _interopRequireDefault(require("react"));
 var _componentHeader = _interopRequireDefault(require("../survey-elements/component-header"));
 var _dustbin = _interopRequireDefault(require("../multi-column/dustbin"));
 var _ItemTypes = _interopRequireDefault(require("../ItemTypes"));
-var _reactBootstrap = require("react-bootstrap");
+var _esm = require("react-bootstrap/esm");
 var _myxss = _interopRequireDefault(require("../survey-elements/myxss"));
 var _excluded = ["item", "className"]; // import FieldSet from './FieldSet';
 // export { FieldSet };
@@ -98,10 +98,10 @@ var FieldSet = function FieldSet(props) {
     className: baseClasses
   }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], (0, _extends2["default"])({}, props, {
     isFieldSet: true
-  })), /*#__PURE__*/_react["default"].createElement("fieldset", null, /*#__PURE__*/_react["default"].createElement(ComponentLegend, props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Container, {
+  })), /*#__PURE__*/_react["default"].createElement("fieldset", null, /*#__PURE__*/_react["default"].createElement(ComponentLegend, props), /*#__PURE__*/_react["default"].createElement(_esm.Container, {
     fluid: true
-  }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Row, null, childItems === null || childItems === void 0 ? void 0 : childItems.map(function (x, i) {
-    return /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Col, {
+  }, /*#__PURE__*/_react["default"].createElement(_esm.Row, null, childItems === null || childItems === void 0 ? void 0 : childItems.map(function (x, i) {
+    return /*#__PURE__*/_react["default"].createElement(_esm.Col, {
       key: "".concat(i, "_").concat(x || "_"),
       md: 12
     }, controls ? controls[i] : /*#__PURE__*/_react["default"].createElement(_dustbin["default"], {

package/lib/form-fields.js

@@ -16,11 +16,11 @@ var _multiColumn = require("./multi-column");
 var _fieldset = _interopRequireDefault(require("./fieldset"));
 var _customElement = _interopRequireDefault(require("./survey-elements/custom-element"));
 var _registry = _interopRequireDefault(require("./stores/registry"));
-var _reactBootstrap = require("react-bootstrap");
+var _esm = require("react-bootstrap/esm");
 var _reactHookForm = require("react-hook-form");
 var _lodash = require("lodash");
 var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
-var _reactPhoneNumberInput = require("react-phone-number-input");
+var _validators = require("./utils/validators");
 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; }
@@ -298,80 +298,6 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
     });
     return hasErrors;
   };
-  var validateEmail = function validateEmail(email) {
-    return email.match(
-    // eslint-disable-next-line no-useless-escape
-    /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
-  };
-  var toE164PhoneNumber = function toE164PhoneNumber(phoneNumberValue) {
-    if (phoneNumberValue !== undefined && phoneNumberValue !== null) {
-      //Filter only numbers from the input
-      var cleaned = ('' + phoneNumberValue).replace(/\D/g, '');
-
-      //Check if the input is of correct
-      var match = cleaned.match(/^(1|)?(\d{3})(\d{3})(\d{4})$/);
-      if (match) {
-        //Remove the matched extension code
-        //Change this to format for any country code.
-        var intlCode = match[1] ? '+1' : '+1';
-        return [intlCode, match[2], match[3], match[4]].join('');
-      }
-      return '';
-    } else {
-      return '';
-    }
-  };
-  var validatePhone = function validatePhone(phone) {
-    return (0, _reactPhoneNumberInput.isValidPhoneNumber)(toE164PhoneNumber(phone), 'US');
-  };
-  var validateDate = function validateDate(dateString) {
-    if (dateString !== undefined && dateString !== null && dateString !== "") {
-      var dateformat = /^(0?[1-9]|1[0-2])[\/](0?[1-9]|[1-2][0-9]|3[01])[\/]\d{4}$/;
-
-      // Matching the date through regular expression      
-      if (dateString.match(dateformat)) {
-        var operator = dateString.split('/');
-
-        // Extract the string into month, date and year      
-        var datepart = [];
-        if (operator.length > 1) {
-          datepart = dateString.split('/');
-        }
-        var month = parseInt(datepart[0]);
-        var day = parseInt(datepart[1]);
-        var year = parseInt(datepart[2]);
-        if (day > 31 || day < 1) {
-          return false;
-        }
-        var currentYear = new Date().getFullYear();
-        if (year < 1900 || year > currentYear + 5) {
-          return false;
-        }
-
-        // Create a list of days of a month      
-        var ListofDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
-        if (month === 1 || month > 2) {
-          if (day > ListofDays[month - 1]) {
-            // to check if the date is out of range     
-            return false;
-          }
-        } else if (month === 2) {
-          var leapYear = false;
-          if (!(year % 4) && year % 100 || !(year % 400)) leapYear = true;
-          if (leapYear === false && day >= 29) return false;else if (leapYear === true && day > 29) {
-            // console.log('Invalid date format!');
-            return false;
-          }
-        } else if (month > 12 || month < 1) {
-          return false;
-        }
-      } else {
-        // console.log("Invalid date format!");
-        return false;
-      }
-    }
-    return true;
-  };
   var getDataItemById = function getDataItemById(id) {
     var $dataItem = items.find(function (x) {
       return x.id === id;
@@ -512,17 +438,17 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
           message: "".concat(item.label, " must be at least 4 characters long")
         };
         fieldRules.validate = function (value) {
-          return validateEmail(value) || "".concat(item.label, " field requires valid email address");
+          return (0, _validators.validateEmail)(value) || "".concat(item.label, " field requires valid email address");
         };
         break;
       case 'PhoneNumber':
         fieldRules.validate = function (value) {
-          return validatePhone(value) || "".concat(item.label, " field requires a valid phone number");
+          return (0, _validators.validatePhone)(value) || "".concat(item.label, " field requires a valid phone number");
         };
         break;
       case 'DatePicker':
         fieldRules.validate = function (value) {
-          return validateDate(value) || "".concat(item.label, " field requires a valid date in the format MM/DD/YYYY");
+          return (0, _validators.validateDate)(value) || "".concat(item.label, " field requires a valid date in the format MM/DD/YYYY");
         };
         break;
       default:
@@ -536,14 +462,14 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
     if (formId) {
       buttonProps.form = formId;
     }
-    return submitButton || /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
+    return submitButton || /*#__PURE__*/_react["default"].createElement(_esm.Button, {
       variant: "primary",
       type: "submit"
     }, actionName);
   };
   var handleRenderBack = function handleRenderBack() {
     var backName = backName || 'Cancel';
-    return backButton || /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
+    return backButton || /*#__PURE__*/_react["default"].createElement(_esm.Button, {
       variant: "secondary",
       onClick: backAction,
       className: "btn-cancel"
@@ -576,17 +502,35 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
     switch (item.element) {
       case 'TextInput':
       case 'EmailInput':
-      case 'PhoneNumber':
       case 'NumberInput':
       case 'TextArea':
       case 'Dropdown':
-      case 'DatePicker':
       case 'RadioButtons':
       case 'Rating':
       case 'Tags':
       case 'Range':
       case 'Checkbox':
         return getInputElement(item);
+      case 'PhoneNumber':
+        return /*#__PURE__*/_react["default"].createElement(_surveyElements.PhoneNumber, {
+          name: item.fieldName,
+          ref: function ref(c) {
+            return inputs.current[item.fieldName] = c;
+          },
+          key: "form_".concat(item.id),
+          item: item,
+          value: _getDefaultValue(item)
+        });
+      case 'DatePicker':
+        return /*#__PURE__*/_react["default"].createElement(_surveyElements.DatePicker, {
+          name: item.fieldName,
+          ref: function ref(c) {
+            return inputs.current[item.fieldName] = c;
+          },
+          key: "form_".concat(item.id),
+          item: item,
+          value: _getDefaultValue(item)
+        });
       case 'CustomElement':
         return getCustomElement(item);
       case 'MultiColumnRow':
@@ -774,7 +718,7 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
   }
   return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
     className: "react-survey-builder-form"
-  }, /*#__PURE__*/_react["default"].createElement(_reactHookForm.FormProvider, methods, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form, (0, _extends2["default"])({
+  }, /*#__PURE__*/_react["default"].createElement(_reactHookForm.FormProvider, methods, /*#__PURE__*/_react["default"].createElement(_esm.Form, (0, _extends2["default"])({
     onSubmit: methods.handleSubmit(handleSubmit)
   }, formProps), fieldItems, /*#__PURE__*/_react["default"].createElement("div", {
     className: buttonClassName ? buttonClassName : 'btn-toolbar'

package/lib/form.js

@@ -16,11 +16,11 @@ var _multiColumn = require("./multi-column");
 var _fieldset = _interopRequireDefault(require("./fieldset"));
 var _customElement = _interopRequireDefault(require("./survey-elements/custom-element"));
 var _registry = _interopRequireDefault(require("./stores/registry"));
-var _reactBootstrap = require("react-bootstrap");
+var _esm = require("react-bootstrap/esm");
 var _reactHookForm = require("react-hook-form");
 var _lodash = require("lodash");
 var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
-var _reactPhoneNumberInput = require("react-phone-number-input");
+var _validators = require("./utils/validators");
 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; }
@@ -306,80 +306,6 @@ var ReactSurvey = function ReactSurvey(_ref) {
     });
     return hasErrors;
   };
-  var validateEmail = function validateEmail(email) {
-    return email.match(
-    // eslint-disable-next-line no-useless-escape
-    /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
-  };
-  var toE164PhoneNumber = function toE164PhoneNumber(phoneNumberValue) {
-    if (phoneNumberValue !== undefined && phoneNumberValue !== null) {
-      //Filter only numbers from the input
-      var cleaned = ('' + phoneNumberValue).replace(/\D/g, '');
-
-      //Check if the input is of correct
-      var match = cleaned.match(/^(1|)?(\d{3})(\d{3})(\d{4})$/);
-      if (match) {
-        //Remove the matched extension code
-        //Change this to format for any country code.
-        var intlCode = match[1] ? '+1' : '+1';
-        return [intlCode, match[2], match[3], match[4]].join('');
-      }
-      return '';
-    } else {
-      return '';
-    }
-  };
-  var validatePhone = function validatePhone(phone) {
-    return (0, _reactPhoneNumberInput.isValidPhoneNumber)(toE164PhoneNumber(phone), 'US');
-  };
-  var validateDate = function validateDate(dateString) {
-    if (dateString !== undefined && dateString !== null && dateString !== "") {
-      var dateformat = /^(0?[1-9]|1[0-2])[\/](0?[1-9]|[1-2][0-9]|3[01])[\/]\d{4}$/;
-
-      // Matching the date through regular expression      
-      if (dateString.match(dateformat)) {
-        var operator = dateString.split('/');
-
-        // Extract the string into month, date and year      
-        var datepart = [];
-        if (operator.length > 1) {
-          datepart = dateString.split('/');
-        }
-        var month = parseInt(datepart[0]);
-        var day = parseInt(datepart[1]);
-        var year = parseInt(datepart[2]);
-        if (day > 31 || day < 1) {
-          return false;
-        }
-        var currentYear = new Date().getFullYear();
-        if (year < 1900 || year > currentYear + 5) {
-          return false;
-        }
-
-        // Create a list of days of a month      
-        var ListofDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
-        if (month === 1 || month > 2) {
-          if (day > ListofDays[month - 1]) {
-            // to check if the date is out of range     
-            return false;
-          }
-        } else if (month === 2) {
-          var leapYear = false;
-          if (!(year % 4) && year % 100 || !(year % 400)) leapYear = true;
-          if (leapYear === false && day >= 29) return false;else if (leapYear === true && day > 29) {
-            // console.log('Invalid date format!');
-            return false;
-          }
-        } else if (month > 12 || month < 1) {
-          return false;
-        }
-      } else {
-        // console.log("Invalid date format!");
-        return false;
-      }
-    }
-    return true;
-  };
   var getDataItemById = function getDataItemById(id) {
     var $dataItem = items.find(function (x) {
       return x.id === id;
@@ -520,17 +446,17 @@ var ReactSurvey = function ReactSurvey(_ref) {
           message: "".concat(item.label, " must be at least 4 characters long")
         };
         fieldRules.validate = function (value) {
-          return validateEmail(value) || "".concat(item.label, " field requires valid email address");
+          return (0, _validators.validateEmail)(value) || "".concat(item.label, " field requires valid email address");
         };
         break;
       case 'PhoneNumber':
         fieldRules.validate = function (value) {
-          return validatePhone(value) || "".concat(item.label, " field requires a valid phone number");
+          return (0, _validators.validatePhone)(value) || "".concat(item.label, " field requires a valid phone number");
         };
         break;
       case 'DatePicker':
         fieldRules.validate = function (value) {
-          return validateDate(value) || "".concat(item.label, " field requires a valid date in the format MM/DD/YYYY");
+          return (0, _validators.validateDate)(value) || "".concat(item.label, " field requires a valid date in the format MM/DD/YYYY");
         };
         break;
       default:
@@ -544,14 +470,14 @@ var ReactSurvey = function ReactSurvey(_ref) {
     if (formId) {
       buttonProps.form = formId;
     }
-    return submitButton || /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
+    return submitButton || /*#__PURE__*/_react["default"].createElement(_esm.Button, {
       variant: "primary",
       type: "submit"
     }, actionName);
   };
   var handleRenderBack = function handleRenderBack() {
     var backName = backName || 'Cancel';
-    return backButton || /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
+    return backButton || /*#__PURE__*/_react["default"].createElement(_esm.Button, {
       variant: "secondary",
       onClick: backAction,
       className: "btn-cancel"
@@ -584,17 +510,35 @@ var ReactSurvey = function ReactSurvey(_ref) {
     switch (item.element) {
       case 'TextInput':
       case 'EmailInput':
-      case 'PhoneNumber':
       case 'NumberInput':
       case 'TextArea':
       case 'Dropdown':
-      case 'DatePicker':
       case 'RadioButtons':
       case 'Rating':
       case 'Tags':
       case 'Range':
       case 'Checkbox':
         return getInputElement(item);
+      case 'PhoneNumber':
+        return /*#__PURE__*/_react["default"].createElement(_surveyElements.PhoneNumber, {
+          name: item.fieldName,
+          ref: function ref(c) {
+            return inputs.current[item.fieldName] = c;
+          },
+          key: "form_".concat(item.id),
+          item: item,
+          value: _getDefaultValue(item)
+        });
+      case 'DatePicker':
+        return /*#__PURE__*/_react["default"].createElement(_surveyElements.DatePicker, {
+          name: item.fieldName,
+          ref: function ref(c) {
+            return inputs.current[item.fieldName] = c;
+          },
+          key: "form_".concat(item.id),
+          item: item,
+          value: _getDefaultValue(item)
+        });
       case 'CustomElement':
         return getCustomElement(item);
       case 'MultiColumnRow':
@@ -782,7 +726,7 @@ var ReactSurvey = function ReactSurvey(_ref) {
   }
   return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
     className: "react-survey-builder-form"
-  }, /*#__PURE__*/_react["default"].createElement(_reactHookForm.FormProvider, methods, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form, (0, _extends2["default"])({
+  }, /*#__PURE__*/_react["default"].createElement(_reactHookForm.FormProvider, methods, /*#__PURE__*/_react["default"].createElement(_esm.Form, (0, _extends2["default"])({
     onSubmit: methods.handleSubmit(handleSubmit)
   }, formProps), fieldItems, /*#__PURE__*/_react["default"].createElement("div", {
     className: buttonClassName ? buttonClassName : 'btn-toolbar'

package/lib/index.js

@@ -36,11 +36,9 @@ var _form = _interopRequireDefault(require("./form"));
 var _formFields = _interopRequireDefault(require("./form-fields"));
 var _store = _interopRequireDefault(require("./stores/store"));
 var _registry = _interopRequireDefault(require("./stores/registry"));
-var _reactBootstrap = require("react-bootstrap");
+var _esm = require("react-bootstrap/esm");
 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; } } /**
-  * <ReactSurveyBuilder />
-*/
+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; } }
 var ReactSurveyBuilder = exports.ReactSurveyBuilder = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2["default"])(ReactSurveyBuilder, _React$Component);
   var _super = _createSuper(ReactSurveyBuilder);
@@ -101,10 +99,10 @@ var ReactSurveyBuilder = exports.ReactSurveyBuilder = /*#__PURE__*/function (_Re
       }
       return /*#__PURE__*/_react["default"].createElement(_reactDnd.DndProvider, {
         backend: _reactDndHtml5Backend.HTML5Backend
-      }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Container, {
+      }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_esm.Container, {
         fluid: true,
         className: "react-survey-builder"
-      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Row, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Col, {
+      }, /*#__PURE__*/_react["default"].createElement(_esm.Row, null, /*#__PURE__*/_react["default"].createElement(_esm.Col, {
         md: 9
       }, /*#__PURE__*/_react["default"].createElement(_preview["default"], {
         files: this.props.files,
@@ -123,13 +121,13 @@ var ReactSurveyBuilder = exports.ReactSurveyBuilder = /*#__PURE__*/function (_Re
         editElement: this.state.editElement,
         renderEditForm: this.props.renderEditForm,
         saveAlways: this.props.saveAlways
-      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Col, {
+      })), /*#__PURE__*/_react["default"].createElement(_esm.Col, {
         md: 3
       }, (!!!this.props.saveAlways || this.props.editSurveyBlock || this.props.previewSurveyBlock || this.props.surveyName) && /*#__PURE__*/_react["default"].createElement("div", {
         className: this.props.surveyToolbarClassName
       }, (!!!this.props.saveAlways || this.props.editSurveyBlock || this.props.surveyName) && /*#__PURE__*/_react["default"].createElement("div", {
         className: "border border-light border-3 p-3 d-grid gap-1 mb-3"
-      }, (_this$props$editSurve = this.props.editSurveyBlock) !== null && _this$props$editSurve !== void 0 ? _this$props$editSurve : this.props.surveyName ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("h4", null, this.props.surveyName)) : null, !!!this.props.saveAlways && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
+      }, (_this$props$editSurve = this.props.editSurveyBlock) !== null && _this$props$editSurve !== void 0 ? _this$props$editSurve : this.props.surveyName ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("h4", null, this.props.surveyName)) : null, !!!this.props.saveAlways && /*#__PURE__*/_react["default"].createElement(_esm.Button, {
         variant: "primary",
         onClick: function onClick() {
           _this2.saveFormData();

package/lib/multi-column/MultiColumnRow.js

@@ -18,7 +18,7 @@ var _componentHeader = _interopRequireDefault(require("../survey-elements/compon
 var _componentLabel = _interopRequireDefault(require("../survey-elements/component-label"));
 var _dustbin = _interopRequireDefault(require("./dustbin"));
 var _ItemTypes = _interopRequireDefault(require("../ItemTypes"));
-var _reactBootstrap = require("react-bootstrap");
+var _esm = require("react-bootstrap/esm");
 var _excluded = ["item", "className"],
   _excluded2 = ["item", "className"],
   _excluded3 = ["item"];
@@ -56,7 +56,7 @@ var MultiColumnRowBase = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
-      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Row, null, childItems.map(function (x, i) {
+      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement(_esm.Row, null, childItems.map(function (x, i) {
         return /*#__PURE__*/_react["default"].createElement("div", {
           key: "".concat(i, "_").concat(x || '_'),
           className: className

package/lib/survey-elements/component-error-message.js

@@ -9,7 +9,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireDefault(require("react"));
 var _reactHookForm = require("react-hook-form");
 var _errorMessage = require("@hookform/error-message");
-var _reactBootstrap = require("react-bootstrap");
+var _esm = require("react-bootstrap/esm");
 var getError = exports.getError = function getError(errors, name) {
   if (name !== undefined && errors !== undefined) {
     var obj = errors;
@@ -42,14 +42,14 @@ var ComponentErrorMessage = function ComponentErrorMessage(_ref) {
             var _ref4 = (0, _slicedToArray2["default"])(_ref3, 2),
               type = _ref4[0],
               message = _ref4[1];
-            return /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Alert, {
+            return /*#__PURE__*/_react["default"].createElement(_esm.Alert, {
               key: "".concat(name, "-").concat(type),
               variant: "danger",
               className: "form-error"
             }, message);
           });
         } else if (message !== undefined && message !== null && message !== '') {
-          return /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Alert, {
+          return /*#__PURE__*/_react["default"].createElement(_esm.Alert, {
             variant: "danger",
             className: "form-error"
           }, message);

package/lib/survey-elements/component-header.js

@@ -5,25 +5,29 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _headerBar = _interopRequireDefault(require("./header-bar"));
-var ComponentHeader = function ComponentHeader(props) {
-  if (props.item.mutable) {
+var _excluded = ["item"];
+var ComponentHeader = function ComponentHeader(_ref) {
+  var item = _ref.item,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  if (item !== null && item !== void 0 && item.mutable) {
     return null;
   }
-  return /*#__PURE__*/_react["default"].createElement("div", null, props.item.pageBreakBefore && /*#__PURE__*/_react["default"].createElement("div", {
+  return /*#__PURE__*/_react["default"].createElement("div", null, (item === null || item === void 0 ? void 0 : item.pageBreakBefore) && /*#__PURE__*/_react["default"].createElement("div", {
     className: "preview-page-break"
   }, "Page Break"), /*#__PURE__*/_react["default"].createElement(_headerBar["default"], {
     isFieldSet: props.isFieldSet,
     parent: props.parent,
     editModeOn: props.editModeOn,
-    item: props.item,
+    item: item,
     index: props.index,
     setAsChild: props.setAsChild,
     onDestroy: props._onDestroy,
     onEdit: props.onEdit,
-    "static": props.item["static"],
-    required: props.item.required
+    "static": item === null || item === void 0 ? void 0 : item["static"],
+    required: item === null || item === void 0 ? void 0 : item.required
   }));
 };
 var _default = exports["default"] = ComponentHeader;

package/lib/survey-elements/custom-element.js

@@ -15,7 +15,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _react = _interopRequireDefault(require("react"));
 var _componentHeader = _interopRequireDefault(require("./component-header"));
 var _componentLabel = _interopRequireDefault(require("./component-label"));
-var _reactBootstrap = require("react-bootstrap");
+var _esm = require("react-bootstrap/esm");
 var _componentErrorMessage = _interopRequireDefault(require("./component-error-message"));
 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; }
@@ -58,7 +58,7 @@ var CustomElement = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), bare ? /*#__PURE__*/_react["default"].createElement(Element, (0, _extends2["default"])({
         id: props.name,
         item: this.props.item
-      }, this.props.item.props, props)) : /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+      }, this.props.item.props, props)) : /*#__PURE__*/_react["default"].createElement(_esm.Form.Group, {
         className: "form-group mb-3"
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({
         className: "form-label"
@@ -67,7 +67,7 @@ var CustomElement = /*#__PURE__*/function (_React$Component) {
       })), /*#__PURE__*/_react["default"].createElement(Element, (0, _extends2["default"])({
         id: props.name,
         item: this.props.item
-      }, this.props.item.props, props)), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+      }, this.props.item.props, props)), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_esm.Form.Text, {
         muted: true
       }, this.props.item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
         name: props.name