react-survey-builder 1.0.7 → 1.0.9

package/lib/survey-validator.js

@@ -14,6 +14,7 @@ var _react = _interopRequireDefault(require("react"));
 var _xss = _interopRequireDefault(require("xss"));
 var _IntlMessages = _interopRequireDefault(require("./language-provider/IntlMessages"));
 var _fa = require("react-icons/fa");
+var _reactBootstrap = require("react-bootstrap");
 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; } } /**
   * <SurveyValidator />
@@ -82,18 +83,17 @@ var SurveyValidator = exports["default"] = /*#__PURE__*/function (_React$Compone
           }
         });
       });
-      return /*#__PURE__*/_react["default"].createElement("div", null, this.state.errors.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "alert alert-danger validation-error"
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "clearfix"
-      }, /*#__PURE__*/_react["default"].createElement(_fa.FaExclamationTriangle, {
+      return /*#__PURE__*/_react["default"].createElement("div", null, this.state.errors.length > 0 && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Alert, {
+        variant: "danger",
+        className: "validation-error d-flex-inline justify-content-between"
+      }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_fa.FaExclamationTriangle, {
         className: "float-start"
       }), /*#__PURE__*/_react["default"].createElement("ul", {
         className: "float-start"
-      }, errors)), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "clearfix"
-      }, /*#__PURE__*/_react["default"].createElement("a", {
-        className: "float-end btn btn-default btn-sm btn-danger",
+      }, errors)), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
+        variant: "danger",
+        size: "sm",
+        className: "float-end",
         onClick: this.dismissModal.bind(this)
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "dismiss"

package/lib/toolbar-group-item.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _reactBootstrap = require("react-bootstrap");
 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; }
 /**
@@ -28,8 +29,9 @@ function ToolbarGroupItem(props) {
   var classShow = 'collapse' + (show ? ' show' : '');
   return /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("div", {
     className: "toolbar-group-item"
-  }, /*#__PURE__*/_react["default"].createElement("button", {
-    className: "btn btn-link btn-block text-left",
+  }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
+    variant: "link",
+    className: "btn-block text-left",
     type: "button",
     onClick: onClick
   }, name), /*#__PURE__*/_react["default"].createElement("div", {

package/lib/toolbar.js

@@ -20,6 +20,7 @@ var _UUID = _interopRequireDefault(require("./UUID"));
 var _store = _interopRequireDefault(require("./stores/store"));
 var _functions = require("./functions");
 var _fa = require("react-icons/fa");
+var _reactBootstrap = require("react-bootstrap");
 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; } }
 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; }
@@ -28,7 +29,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
   */
 // function isDefaultItem(item) {
 //   const keys = Object.keys(item);
-//   return keys.filter(x => x !== 'element' && x !== 'key' && x !== 'group_name').length === 0;
+//   return keys.filter(x => x !== 'element' && x !== 'key' && x !== 'groupName').length === 0;
 // }
 
 function buildItems(items, defaultItems) {
@@ -47,8 +48,8 @@ function buildItems(items, defaultItems) {
     if (found) {
       if (x.inherited !== false) {
         found = _objectSpread(_objectSpread({}, found), x);
-      } else if (x.group_name) {
-        found.group_name = x.group_name;
+      } else if (x.groupName) {
+        found.groupName = x.groupName;
       }
     }
     return found || x;
@@ -56,16 +57,16 @@ function buildItems(items, defaultItems) {
 }
 function buildGroupItems(allItems) {
   var items = allItems.filter(function (x) {
-    return !x.group_name;
+    return !x.groupName;
   });
   var gItems = allItems.filter(function (x) {
-    return !!x.group_name;
+    return !!x.groupName;
   });
   var grouped = (0, _functions.groupBy)(gItems, function (x) {
-    return x.group_name;
+    return x.groupName;
   });
   var groupKeys = gItems.map(function (x) {
-    return x.group_name;
+    return x.groupName;
   }).filter(function (v, i, self) {
     return self.indexOf(v) === i;
   });
@@ -158,11 +159,14 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         label: intl.formatMessage({
           id: 'place-holder-label'
         }),
-        field_name: 'dropdown_',
+        fieldName: 'dropdown_',
         showCustomName: true,
         showDescription: true,
         showHelp: true,
-        options: []
+        options: [],
+        placeholder: 'Select One',
+        hideRequiredAlert: true,
+        showLabelLocationPicker: true
       }, {
         key: 'Tags',
         canHaveAnswer: true,
@@ -173,11 +177,12 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         label: intl.formatMessage({
           id: 'place-holder-label'
         }),
-        field_name: 'tags_',
+        fieldName: 'tags_',
         showCustomName: true,
         showDescription: true,
         showHelp: true,
-        options: []
+        options: [],
+        hideRequiredAlert: true
       }, {
         key: 'Checkboxes',
         canHaveAnswer: true,
@@ -188,11 +193,12 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         label: intl.formatMessage({
           id: 'place-holder-label'
         }),
-        field_name: 'checkboxes_',
+        fieldName: 'checkboxes_',
         showCustomName: true,
         showDescription: true,
         showHelp: true,
-        options: []
+        options: [],
+        hideRequiredAlert: true
       }, {
         key: 'Checkbox',
         canHaveAnswer: true,
@@ -203,11 +209,12 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         label: intl.formatMessage({
           id: 'place-holder-label'
         }),
-        field_name: 'checkbox_',
+        fieldName: 'checkbox_',
         showCustomName: true,
         showDescription: true,
         showHelp: true,
-        boxLabel: 'Agree To Rules & Regs'
+        boxLabel: 'Agree To Rules & Regs',
+        hideRequiredAlert: true
       }, {
         key: 'RadioButtons',
         canHaveAnswer: true,
@@ -218,11 +225,12 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         label: intl.formatMessage({
           id: 'place-holder-label'
         }),
-        field_name: 'radiobuttons_',
+        fieldName: 'radiobuttons_',
         showCustomName: true,
         showDescription: true,
         showHelp: true,
-        options: []
+        options: [],
+        hideRequiredAlert: true
       }, {
         key: 'TextInput',
         canHaveAnswer: true,
@@ -233,10 +241,15 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
           id: 'place-holder-label'
         }),
         icon: _fa.FaFont,
-        field_name: 'text_input_',
+        fieldName: 'text_input_',
         showCustomName: true,
         showDescription: true,
-        showHelp: true
+        showHelp: true,
+        placeholder: intl.formatMessage({
+          id: 'place-holder-label'
+        }),
+        hideRequiredAlert: true,
+        showLabelLocationPicker: true
       }, {
         key: 'EmailInput',
         canHaveAnswer: true,
@@ -247,11 +260,15 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
           id: 'place-holder-email'
         }),
         icon: _fa.FaEnvelope,
-        field_name: 'email_input_',
+        fieldName: 'email_input_',
         showCustomName: true,
         showDescription: true,
         showHelp: true,
-        placeholder: ''
+        placeholder: intl.formatMessage({
+          id: 'place-holder-email'
+        }),
+        hideRequiredAlert: true,
+        showLabelLocationPicker: true
       }, {
         key: 'NumberInput',
         canHaveAnswer: true,
@@ -262,13 +279,15 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
           id: 'place-holder-label'
         }),
         icon: _fa.FaPlus,
-        field_name: 'number_input_',
+        fieldName: 'number_input_',
         showCustomName: true,
         showDescription: true,
         showHelp: true,
         step: 1,
-        min_value: 0,
-        max_value: 5
+        minValue: 0,
+        maxValue: 5,
+        hideRequiredAlert: true,
+        showLabelLocationPicker: true
       }, {
         key: 'PhoneNumber',
         canHaveAnswer: true,
@@ -279,10 +298,12 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
           id: 'place-holder-phone-number'
         }),
         icon: _fa.FaPhone,
-        field_name: 'phone_input_',
+        fieldName: 'phone_input_',
         showCustomName: true,
         showDescription: true,
-        showHelp: true
+        showHelp: true,
+        hideRequiredAlert: true,
+        showLabelLocationPicker: true
       }, {
         key: 'TextArea',
         canHaveAnswer: true,
@@ -293,10 +314,12 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
           id: 'place-holder-label'
         }),
         icon: _fa.FaTextHeight,
-        field_name: 'text_area_',
+        fieldName: 'text_area_',
         showCustomName: true,
         showDescription: true,
-        showHelp: true
+        showHelp: true,
+        hideRequiredAlert: true,
+        showLabelLocationPicker: true
       }, {
         key: 'FieldSet',
         canHaveAnswer: false,
@@ -307,7 +330,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
           id: 'fieldset'
         }),
         icon: _fa.FaBars,
-        field_name: 'fieldset-element'
+        fieldName: 'fieldset-element'
       }, {
         key: 'TwoColumnRow',
         canHaveAnswer: false,
@@ -316,7 +339,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         }),
         label: '',
         icon: _fa.FaColumns,
-        field_name: 'two_col_row_'
+        fieldName: 'two_col_row_'
       }, {
         key: 'ThreeColumnRow',
         canHaveAnswer: false,
@@ -325,7 +348,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         }),
         label: '',
         icon: _fa.FaColumns,
-        field_name: 'three_col_row_'
+        fieldName: 'three_col_row_'
       }, {
         key: 'FourColumnRow',
         element: 'MultiColumnRow',
@@ -335,9 +358,9 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         }),
         label: '',
         icon: _fa.FaColumns,
-        field_name: 'four_col_row_',
-        col_count: 4,
-        class_name: 'col-md-3'
+        fieldName: 'four_col_row_',
+        colCount: 4,
+        className: 'col-md-3'
       }, {
         key: 'FiveColumnRow',
         element: 'MultiColumnRow',
@@ -347,9 +370,9 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         }),
         label: '',
         icon: _fa.FaColumns,
-        field_name: 'five_col_row_',
-        col_count: 5,
-        class_name: 'col'
+        fieldName: 'five_col_row_',
+        colCount: 5,
+        className: 'col'
       }, {
         key: 'SixColumnRow',
         element: 'MultiColumnRow',
@@ -359,9 +382,9 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         }),
         label: '',
         icon: _fa.FaColumns,
-        field_name: 'six_col_row_',
-        col_count: 6,
-        class_name: 'col-md-2'
+        fieldName: 'six_col_row_',
+        colCount: 6,
+        className: 'col-md-2'
       }, {
         key: 'Image',
         name: intl.formatMessage({
@@ -369,7 +392,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         }),
         label: '',
         icon: _fa.FaRegImage,
-        field_name: 'image_',
+        fieldName: 'image_',
         src: ''
       }, {
         key: 'Rating',
@@ -381,7 +404,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
           id: 'place-holder-label'
         }),
         icon: _fa.FaStar,
-        field_name: 'rating_',
+        fieldName: 'rating_',
         showCustomName: true,
         showDescription: true,
         showHelp: true
@@ -401,10 +424,11 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         label: intl.formatMessage({
           id: 'place-holder-label'
         }),
-        field_name: 'date_picker_',
+        fieldName: 'date_picker_',
         showCustomName: true,
         showDescription: true,
-        showHelp: true
+        showHelp: true,
+        hideRequiredAlert: true
       }, {
         key: 'Signature',
         canReadOnly: true,
@@ -415,7 +439,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         label: intl.formatMessage({
           id: 'signature'
         }),
-        field_name: 'signature_'
+        fieldName: 'signature_'
       }, {
         key: 'HyperLink',
         name: intl.formatMessage({
@@ -437,8 +461,8 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         content: intl.formatMessage({
           id: 'place-holder-file-name'
         }),
-        field_name: 'download_',
-        file_path: '',
+        fieldName: 'download_',
+        filePath: '',
         _href: ''
       }, {
         key: 'Range',
@@ -449,20 +473,21 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         label: intl.formatMessage({
           id: 'place-holder-label'
         }),
-        field_name: 'range_',
+        fieldName: 'range_',
         step: 1,
-        default_value: 3,
-        min_value: 1,
-        max_value: 5,
-        min_label: intl.formatMessage({
+        defaultValue: 3,
+        minValue: 1,
+        maxValue: 5,
+        minLabel: intl.formatMessage({
           id: 'easy'
         }),
-        max_label: intl.formatMessage({
+        maxLabel: intl.formatMessage({
           id: 'difficult'
         }),
         showCustomName: true,
         showDescription: true,
-        showHelp: true
+        showHelp: true,
+        hideRequiredAlert: true
       }, {
         key: 'Camera',
         name: intl.formatMessage({
@@ -472,7 +497,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         label: intl.formatMessage({
           id: 'place-holder-label'
         }),
-        field_name: 'camera_'
+        fieldName: 'camera_'
       }, {
         key: 'FileUpload',
         name: intl.formatMessage({
@@ -482,7 +507,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         label: intl.formatMessage({
           id: 'place-holder-label'
         }),
-        field_name: 'file_upload_'
+        fieldName: 'file_upload_'
       }];
     }
   }, {
@@ -492,7 +517,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         var customOptions = _objectSpread(_objectSpread({}, item), elementOptions);
         customOptions.custom = true;
         customOptions.component = item.component || null;
-        customOptions.custom_options = item.custom_options || [];
+        customOptions.customOptions = item.customOptions || [];
         return customOptions;
       }
       return elementOptions;
@@ -506,19 +531,21 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         id: _UUID["default"].uuid(),
         element: element,
         text: item.name,
-        group_name: item.group_name,
+        groupName: item.groupName,
         "static": item["static"],
         required: false,
-        showDescription: item.showDescription
+        showDescription: item.showDescription,
+        hideRequiredAlert: item.hideRequiredAlert
       });
       if (this.props.showDescription === true && !item["static"]) {
         elementOptions.showDescription = true;
       }
 
       // add placeholder to form input
-      if (['NumberInput', 'EmailInput', 'TextInput', 'PhoneNumber', 'TextArea', 'DatePicker'].indexOf(element) !== -1) {
+      if (['NumberInput', 'EmailInput', 'TextInput', 'PhoneNumber', 'TextArea', 'DatePicker', 'Dropdown'].indexOf(element) !== -1) {
         elementOptions.showPlaceholder = true;
       }
+      elementOptions.placeholder = item.placeholder;
       if (item.type === 'custom') {
         elementOptions.key = item.key;
         elementOptions.custom = true;
@@ -526,16 +553,19 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         elementOptions.bare = item.bare;
         elementOptions.props = item.props;
         elementOptions.component = item.component || null;
-        elementOptions.custom_options = item.custom_options || [];
+        elementOptions.customOptions = item.customOptions || [];
       }
       if (item["static"]) {
         elementOptions.bold = false;
         elementOptions.italic = false;
       }
       elementOptions.showCustomName = item.showCustomName;
-      elementOptions.custom_name = item.custom_name;
+      elementOptions.customName = item.customName;
+      elementOptions.showLabelLocationPicker = item.showLabelLocationPicker;
+      elementOptions.labelLocation = item.labelLocation;
       elementOptions.showHelp = item.showHelp;
       elementOptions.help = item.help;
+      elementOptions.hideRequiredAlert = item.hideRequiredAlert;
       if (item.canHaveAnswer) {
         elementOptions.canHaveAnswer = item.canHaveAnswer;
       }
@@ -563,8 +593,8 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
       elementOptions.canHaveOptionCorrect = item.canHaveOptionCorrect !== false;
       elementOptions.canHaveOptionValue = item.canHaveOptionValue !== false;
       elementOptions.canPopulateFromApi = item.canPopulateFromApi !== false;
-      if (item.class_name) {
-        elementOptions.class_name = item.class_name;
+      if (item.className) {
+        elementOptions.className = item.className;
       }
       if (element === 'Image') {
         elementOptions.src = item.src;
@@ -578,32 +608,35 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
       }
       if (element === 'Download') {
         elementOptions._href = item._href;
-        elementOptions.file_path = item.file_path;
+        elementOptions.filePath = item.filePath;
       }
       if (element === 'NumberInput') {
         elementOptions.step = item.step;
-        elementOptions.min_value = item.min_value;
-        elementOptions.max_value = item.max_value;
+        elementOptions.minValue = item.minValue;
+        elementOptions.maxValue = item.maxValue;
       }
       if (element === 'Range') {
         elementOptions.step = item.step;
-        elementOptions.default_value = item.default_value;
-        elementOptions.min_value = item.min_value;
-        elementOptions.max_value = item.max_value;
-        elementOptions.min_label = item.min_label;
-        elementOptions.max_label = item.max_label;
+        elementOptions.defaultValue = item.defaultValue;
+        elementOptions.minValue = item.minValue;
+        elementOptions.maxValue = item.maxValue;
+        elementOptions.minLabel = item.minLabel;
+        elementOptions.maxLabel = item.maxLabel;
       }
       if (element === 'MultiColumnRow') {
-        elementOptions.col_count = item.col_count;
+        elementOptions.colCount = item.colCount;
       }
       if (item.defaultValue) {
         elementOptions.defaultValue = item.defaultValue;
       }
-      if (item.field_name) {
-        elementOptions.field_name = item.field_name + _UUID["default"].uuid();
+      if (item.fieldName) {
+        elementOptions.fieldName = item.fieldName + _UUID["default"].uuid();
+      }
+      if (item.customName) {
+        elementOptions.fieldName = item.customName;
       }
       if (item.label) {
-        elementOptions.label = item.label;
+        elementOptions.label = item.label.trim();
       }
       if (item.options) {
         if (item.options.length > 0) {
@@ -632,8 +665,9 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         items = _buildGroupItems.items,
         grouped = _buildGroupItems.grouped,
         groupKeys = _buildGroupItems.groupKeys;
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "col-md-3 react-survey-builder-toolbar float-end"
+      return /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Col, {
+        md: 3,
+        className: "react-survey-builder-toolbar"
       }, /*#__PURE__*/_react["default"].createElement("h4", null, this.props.intl.formatMessage({
         id: 'toolbox'
       })), /*#__PURE__*/_react["default"].createElement("ul", null, items.map(this.renderItem), groupKeys.map(function (k) {
@@ -696,10 +730,19 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
               id: 'place-holder-option-1'
             }),
             key: "checkboxes_option_".concat(_UUID["default"].uuid())
-          }
-          // { value: 'place_holder_option_2', text: intl.formatMessage({ id: 'place-holder-option-2' }), key: `checkboxes_option_${ID.uuid()}` },
-          // { value: 'place_holder_option_3', text: intl.formatMessage({ id: 'place-holder-option-3' }), key: `checkboxes_option_${ID.uuid()}` },
-          ];
+          }, {
+            value: 'place_holder_option_2',
+            text: intl.formatMessage({
+              id: 'place-holder-option-2'
+            }),
+            key: "checkboxes_option_".concat(_UUID["default"].uuid())
+          }, {
+            value: 'place_holder_option_3',
+            text: intl.formatMessage({
+              id: 'place-holder-option-3'
+            }),
+            key: "checkboxes_option_".concat(_UUID["default"].uuid())
+          }];
         case 'RadioButtons':
           return [{
             value: 'place_holder_option_1',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-survey-builder",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "A complete survey builder for react.",
   "main": "lib/index.js",
   "types": "types/index.d.ts",
@@ -28,7 +28,6 @@
   },
   "author": "Garrett Lang",
   "dependencies": {
-    "@fortawesome/react-fontawesome": "^0.2.0",
     "beedle": "^0.8.1",
     "classnames": "^2.2.6",
     "date-fns": "^2.16.1",
@@ -47,6 +46,7 @@
     "react-dnd-html5-backend": "^11.1.3",
     "react-draft-wysiwyg": "^1.15.0",
     "react-icons": "^5.0.1",
+    "react-imask": "^7.0.1",
     "react-intl": "^5.24.3",
     "react-select": "^5.8.0",
     "react-signature-canvas": "^1.0.3",
@@ -55,7 +55,10 @@
   },
   "peerDependencies": {
     "react": ">=18.2.0",
-    "react-dom": ">=18.2.0"
+    "react-bootstrap": ">=2.9.2",
+    "react-dom": ">=18.2.0",
+    "react-icons": ">=5.0.1",
+    "react-imask": ">=7.0.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.12.10",
@@ -82,6 +85,7 @@
     "express": "^4.17.1",
     "multer": "^1.4.2",
     "react": "^18.2.0",
+    "react-bootstrap": "^2.9.2",
     "react-dom": "^18.2.0",
     "rimraf": "^3.0.2",
     "sass": "^1.69.7",