react-survey-builder 1.0.41 → 1.0.42

package/lib/preview.js

@@ -22,9 +22,7 @@ var _componentDragLayer = _interopRequireDefault(require("./survey-elements/comp
 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; } } /**
-  * <Preview />
-  */
+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 PlaceHolder = _sortableFormElements["default"].PlaceHolder;
 var Preview = exports["default"] = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2["default"])(Preview, _React$Component);
@@ -60,7 +58,7 @@ var Preview = exports["default"] = /*#__PURE__*/function (_React$Component) {
     };
     _this.seq = 0;
     _this._onUpdate = _this._onChange.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.getDataById = _this.getDataById.bind((0, _assertThisInitialized2["default"])(_this));
+    _this.getItemById = _this.getItemById.bind((0, _assertThisInitialized2["default"])(_this));
     _this.moveCard = _this.moveCard.bind((0, _assertThisInitialized2["default"])(_this));
     _this.insertCard = _this.insertCard.bind((0, _assertThisInitialized2["default"])(_this));
     _this.setAsChild = _this.setAsChild.bind((0, _assertThisInitialized2["default"])(_this));
@@ -136,7 +134,7 @@ var Preview = exports["default"] = /*#__PURE__*/function (_React$Component) {
       var _this4 = this;
       if (item.childItems) {
         item.childItems.forEach(function (childItem) {
-          var child = _this4.getDataById(childItem);
+          var child = _this4.getItemById(childItem);
           if (child) {
             _store["default"].dispatch('delete', child);
           }
@@ -145,8 +143,8 @@ var Preview = exports["default"] = /*#__PURE__*/function (_React$Component) {
       _store["default"].dispatch('delete', item);
     }
   }, {
-    key: "getDataById",
-    value: function getDataById(id) {
+    key: "getItemById",
+    value: function getItemById(id) {
       var items = this.state.items;
       return items.find(function (x) {
         return x && x.id === id;
@@ -163,7 +161,7 @@ var Preview = exports["default"] = /*#__PURE__*/function (_React$Component) {
         return false;
       }
       var oldId = item.childItems[col];
-      var oldItem = this.getDataById(oldId);
+      var oldItem = this.getItemById(oldId);
       var oldCol = child.col;
       // eslint-disable-next-line no-param-reassign
       item.childItems[oldCol] = oldId;
@@ -184,7 +182,7 @@ var Preview = exports["default"] = /*#__PURE__*/function (_React$Component) {
       if (isBusy) {
         return;
       }
-      var oldParent = this.getDataById(child.parentId);
+      var oldParent = this.getItemById(child.parentId);
       var oldCol = child.col;
       // eslint-disable-next-line no-param-reassign
       item.childItems[col] = child.id;
@@ -209,7 +207,7 @@ var Preview = exports["default"] = /*#__PURE__*/function (_React$Component) {
           return toRemove.indexOf(x) === -1;
         });
       }
-      if (!this.getDataById(child.id)) {
+      if (!this.getItemById(child.id)) {
         newData.push(child);
       }
       _store["default"].dispatch('updateOrder', newData);
@@ -219,7 +217,7 @@ var Preview = exports["default"] = /*#__PURE__*/function (_React$Component) {
     value: function removeChild(item, col) {
       var items = this.state.items;
       var oldId = item.childItems[col];
-      var oldItem = this.getDataById(oldId);
+      var oldItem = this.getItemById(oldId);
       if (oldItem) {
         var newData = items.filter(function (x) {
           return x !== oldItem;
@@ -238,8 +236,8 @@ var Preview = exports["default"] = /*#__PURE__*/function (_React$Component) {
     key: "restoreCard",
     value: function restoreCard(item, id) {
       var items = this.state.items;
-      var parent = this.getDataById(item.item.parentId);
-      var oldItem = this.getDataById(id);
+      var parent = this.getItemById(item.item.parentId);
+      var oldItem = this.getItemById(id);
       if (parent && oldItem) {
         var newIndex = items.indexOf(oldItem);
         var newData = (0, _toConsumableArray2["default"])(items); // items.filter(x => x !== oldItem);
@@ -305,6 +303,7 @@ var Preview = exports["default"] = /*#__PURE__*/function (_React$Component) {
           item.component = this.props.registry.get(item.key);
         }
       }
+      console.log('getElement', item);
       var SortableFormElement = _sortableFormElements["default"][item.element];
       if (SortableFormElement === null) {
         return null;
@@ -327,7 +326,7 @@ var Preview = exports["default"] = /*#__PURE__*/function (_React$Component) {
           readOnly: false,
           print: false
         }),
-        getDataById: this.getDataById,
+        getDataById: this.getItemById,
         setAsChild: this.setAsChild,
         removeChild: this.removeChild,
         _onDestroy: this._onDestroy

package/lib/sortable-form-elements.js

@@ -9,37 +9,37 @@ var _sortableElement = _interopRequireDefault(require("./sortable-element"));
 var _surveyPlaceHolder = _interopRequireDefault(require("./survey-place-holder"));
 var _surveyElements = require("./survey-elements");
 var _multiColumn = require("./multi-column");
-var _fieldset = require("./fieldset");
+var _fieldset = _interopRequireDefault(require("./fieldset"));
 var _customElement = _interopRequireDefault(require("./survey-elements/custom-element"));
-var SurveyElements = {};
-SurveyElements.Header = (0, _sortableElement["default"])(_surveyElements.Header);
-SurveyElements.Paragraph = (0, _sortableElement["default"])(_surveyElements.Paragraph);
-SurveyElements.ContentBody = (0, _sortableElement["default"])(_surveyElements.ContentBody);
-SurveyElements.Label = (0, _sortableElement["default"])(_surveyElements.Label);
-SurveyElements.LineBreak = (0, _sortableElement["default"])(_surveyElements.LineBreak);
-SurveyElements.TextInput = (0, _sortableElement["default"])(_surveyElements.TextInput);
-SurveyElements.EmailInput = (0, _sortableElement["default"])(_surveyElements.EmailInput);
-SurveyElements.PhoneNumber = (0, _sortableElement["default"])(_surveyElements.PhoneNumber);
-SurveyElements.NumberInput = (0, _sortableElement["default"])(_surveyElements.NumberInput);
-SurveyElements.TextArea = (0, _sortableElement["default"])(_surveyElements.TextArea);
-SurveyElements.Dropdown = (0, _sortableElement["default"])(_surveyElements.Dropdown);
-SurveyElements.Signature = (0, _sortableElement["default"])(_surveyElements.Signature);
-SurveyElements.Checkboxes = (0, _sortableElement["default"])(_surveyElements.Checkboxes);
-SurveyElements.Checkbox = (0, _sortableElement["default"])(_surveyElements.Checkbox);
-SurveyElements.DatePicker = (0, _sortableElement["default"])(_surveyElements.DatePicker);
-SurveyElements.RadioButtons = (0, _sortableElement["default"])(_surveyElements.RadioButtons);
-SurveyElements.Image = (0, _sortableElement["default"])(_surveyElements.Image);
-SurveyElements.Rating = (0, _sortableElement["default"])(_surveyElements.Rating);
-SurveyElements.Tags = (0, _sortableElement["default"])(_surveyElements.Tags);
-SurveyElements.HyperLink = (0, _sortableElement["default"])(_surveyElements.HyperLink);
-SurveyElements.Download = (0, _sortableElement["default"])(_surveyElements.Download);
-SurveyElements.Camera = (0, _sortableElement["default"])(_surveyElements.Camera);
-SurveyElements.FileUpload = (0, _sortableElement["default"])(_surveyElements.FileUpload);
-SurveyElements.Range = (0, _sortableElement["default"])(_surveyElements.Range);
-SurveyElements.PlaceHolder = (0, _sortableElement["default"])(_surveyPlaceHolder["default"]);
-SurveyElements.FieldSet = (0, _sortableElement["default"])(_fieldset.FieldSet);
-SurveyElements.TwoColumnRow = (0, _sortableElement["default"])(_multiColumn.TwoColumnRow);
-SurveyElements.ThreeColumnRow = (0, _sortableElement["default"])(_multiColumn.ThreeColumnRow);
-SurveyElements.MultiColumnRow = (0, _sortableElement["default"])(_multiColumn.MultiColumnRow);
-SurveyElements.CustomElement = (0, _sortableElement["default"])(_customElement["default"]);
-var _default = exports["default"] = SurveyElements;
+var SortableFormElements = {};
+SortableFormElements.Header = (0, _sortableElement["default"])(_surveyElements.Header);
+SortableFormElements.Paragraph = (0, _sortableElement["default"])(_surveyElements.Paragraph);
+SortableFormElements.ContentBody = (0, _sortableElement["default"])(_surveyElements.ContentBody);
+SortableFormElements.Label = (0, _sortableElement["default"])(_surveyElements.Label);
+SortableFormElements.LineBreak = (0, _sortableElement["default"])(_surveyElements.LineBreak);
+SortableFormElements.TextInput = (0, _sortableElement["default"])(_surveyElements.TextInput);
+SortableFormElements.EmailInput = (0, _sortableElement["default"])(_surveyElements.EmailInput);
+SortableFormElements.PhoneNumber = (0, _sortableElement["default"])(_surveyElements.PhoneNumber);
+SortableFormElements.NumberInput = (0, _sortableElement["default"])(_surveyElements.NumberInput);
+SortableFormElements.TextArea = (0, _sortableElement["default"])(_surveyElements.TextArea);
+SortableFormElements.Dropdown = (0, _sortableElement["default"])(_surveyElements.Dropdown);
+SortableFormElements.Signature = (0, _sortableElement["default"])(_surveyElements.Signature);
+SortableFormElements.Checkboxes = (0, _sortableElement["default"])(_surveyElements.Checkboxes);
+SortableFormElements.Checkbox = (0, _sortableElement["default"])(_surveyElements.Checkbox);
+SortableFormElements.DatePicker = (0, _sortableElement["default"])(_surveyElements.DatePicker);
+SortableFormElements.RadioButtons = (0, _sortableElement["default"])(_surveyElements.RadioButtons);
+SortableFormElements.Image = (0, _sortableElement["default"])(_surveyElements.Image);
+SortableFormElements.Rating = (0, _sortableElement["default"])(_surveyElements.Rating);
+SortableFormElements.Tags = (0, _sortableElement["default"])(_surveyElements.Tags);
+SortableFormElements.HyperLink = (0, _sortableElement["default"])(_surveyElements.HyperLink);
+SortableFormElements.Download = (0, _sortableElement["default"])(_surveyElements.Download);
+SortableFormElements.Camera = (0, _sortableElement["default"])(_surveyElements.Camera);
+SortableFormElements.FileUpload = (0, _sortableElement["default"])(_surveyElements.FileUpload);
+SortableFormElements.Range = (0, _sortableElement["default"])(_surveyElements.Range);
+SortableFormElements.PlaceHolder = (0, _sortableElement["default"])(_surveyPlaceHolder["default"]);
+SortableFormElements.FieldSet = (0, _sortableElement["default"])(_fieldset["default"]);
+SortableFormElements.TwoColumnRow = (0, _sortableElement["default"])(_multiColumn.TwoColumnRow);
+SortableFormElements.ThreeColumnRow = (0, _sortableElement["default"])(_multiColumn.ThreeColumnRow);
+SortableFormElements.MultiColumnRow = (0, _sortableElement["default"])(_multiColumn.MultiColumnRow);
+SortableFormElements.CustomElement = (0, _sortableElement["default"])(_customElement["default"]);
+var _default = exports["default"] = SortableFormElements;

package/lib/survey-elements/component-drag-handle.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,13 +10,11 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _reactDnd = require("react-dnd");
 var _reactDndHtml5Backend = require("react-dnd-html5-backend");
 var _ItemTypes = _interopRequireDefault(require("../ItemTypes"));
 var _fa = require("react-icons/fa");
-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 _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; } }
 var style = {
@@ -33,7 +30,7 @@ var dragHandleSource = {
       index = props.index,
       onDestroy = props.onDestroy,
       setAsChild = props.setAsChild,
-      getDataById = props.getDataById;
+      getItemById = props.getItemById;
     return {
       itemType: _ItemTypes["default"].BOX,
       index: item.parentId ? -1 : index,
@@ -42,13 +39,13 @@ var dragHandleSource = {
       col: item.col,
       onDestroy: onDestroy,
       setAsChild: setAsChild,
-      getDataById: getDataById,
-      data: item
+      getItemById: getItemById,
+      item: item
     };
   }
 };
-var DragHandle = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2["default"])(DragHandle, _PureComponent);
+var DragHandle = /*#__PURE__*/function (_React$PureComponent) {
+  (0, _inherits2["default"])(DragHandle, _React$PureComponent);
   var _super = _createSuper(DragHandle);
   function DragHandle() {
     (0, _classCallCheck2["default"])(this, DragHandle);
@@ -81,7 +78,7 @@ var DragHandle = /*#__PURE__*/function (_PureComponent) {
     }
   }]);
   return DragHandle;
-}(_react.PureComponent);
+}(_react["default"].PureComponent);
 var _default = exports["default"] = (0, _reactDnd.DragSource)(_ItemTypes["default"].BOX, dragHandleSource, function (connect, monitor) {
   return {
     connectDragSource: connect.dragSource(),

package/lib/survey-elements/component-drag-layer.js

@@ -18,7 +18,7 @@ var layerStyles = {
   width: '100%',
   height: '100%'
 };
-function getItemStyles(_ref) {
+var getItemStyles = function getItemStyles(_ref) {
   var initialOffset = _ref.initialOffset,
     currentOffset = _ref.currentOffset;
   if (!initialOffset || !currentOffset) {
@@ -33,22 +33,19 @@ function getItemStyles(_ref) {
     transform: transform,
     WebkitTransform: transform
   };
-}
+};
 var CustomDragLayer = function CustomDragLayer(props) {
-  var item = props.item,
-    itemType = props.itemType,
-    isDragging = props.isDragging;
-  function renderItem() {
-    switch (itemType) {
+  var renderItem = function renderItem() {
+    switch (props.itemType) {
       case _ItemTypes["default"].BOX:
         return /*#__PURE__*/_react["default"].createElement(_componentDragPreview.BoxDragPreview, {
-          item: item
+          item: props.item
         });
       default:
         return null;
     }
-  }
-  if (!isDragging) {
+  };
+  if (!props.isDragging) {
     return null;
   }
   return /*#__PURE__*/_react["default"].createElement("div", {

package/lib/survey-elements/component-drag-preview.js

@@ -36,7 +36,7 @@ var BoxDragPreview = exports.BoxDragPreview = function BoxDragPreview(_ref2) {
     _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
     tickTock = _React$useState2[0],
     setTickTock = _React$useState2[1];
-  var text = item.data.content ? item.data.content : item.data.label ? item.data.label : item.data.text;
+  var text = item.item.content ? item.item.content : item.item.label ? item.item.label : item.item.text;
   var isLongText = text.length > 20;
   var previewText = isLongText ? "".concat(text.slice(0, 20), "...") : text;
 

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

@@ -29,7 +29,6 @@ var getError = exports.getError = function getError(errors, name) {
 var ComponentErrorMessage = function ComponentErrorMessage(_ref) {
   var name = _ref.name;
   var methods = (0, _reactHookForm.useFormContext)();
-  console.log(methods);
   if (!methods) return null;
   if (getError(methods.formState.errors, name) !== undefined) {
     return /*#__PURE__*/_react["default"].createElement(_errorMessage.ErrorMessage, {

package/lib/survey-elements/index.js

@@ -34,8 +34,8 @@ var _componentErrorMessage = _interopRequireDefault(require("./component-error-m
 var _ipUtils = require("../utils/ipUtils");
 var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
 var _ri = require("react-icons/ri");
-var _UUID = _interopRequireDefault(require("../UUID"));
 var _io = require("react-icons/io5");
+var _functions = require("../functions");
 var _excluded = ["onChange"],
   _excluded2 = ["onChange", "formatMask"]; // eslint-disable-next-line max-classes-per-file
 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); }
@@ -350,14 +350,14 @@ var TextInput = exports.TextInput = /*#__PURE__*/function (_React$Component6) {
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
         className: "form-group mb-3"
       }, labelLocation === "FLOATING" ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
-        id: props.name + '-' + _UUID["default"].uuid(),
+        id: props.name + '-' + (0, _functions.generateUUID)(),
         type: "text"
       }, props)), /*#__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, {
         htmlFor: props.name
       })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
-        id: props.name + '-' + _UUID["default"].uuid(),
+        id: props.name + '-' + (0, _functions.generateUUID)(),
         type: "text"
       }, props))), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
         muted: true
@@ -422,14 +422,14 @@ var EmailInput = exports.EmailInput = /*#__PURE__*/function (_React$Component7)
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
         className: "form-group mb-3"
       }, labelLocation === "FLOATING" ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
-        id: props.name + '-' + _UUID["default"].uuid(),
+        id: props.name + '-' + (0, _functions.generateUUID)(),
         type: "text"
       }, props)), /*#__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, {
         htmlFor: props.name
       })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
-        id: props.name + '-' + _UUID["default"].uuid(),
+        id: props.name + '-' + (0, _functions.generateUUID)(),
         type: "text"
       }, props))), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
         muted: true
@@ -494,7 +494,7 @@ var PhoneNumber = exports.PhoneNumber = /*#__PURE__*/function (_React$Component8
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
         className: "form-group mb-3"
       }, labelLocation === "FLOATING" ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
-        id: props.name + '-' + _UUID["default"].uuid(),
+        id: props.name + '-' + (0, _functions.generateUUID)(),
         type: "text"
       }, props, {
         as: CustomPhoneInput
@@ -503,7 +503,7 @@ var PhoneNumber = exports.PhoneNumber = /*#__PURE__*/function (_React$Component8
       }))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
         htmlFor: props.name
       })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
-        id: props.name + '-' + _UUID["default"].uuid(),
+        id: props.name + '-' + (0, _functions.generateUUID)(),
         type: "text"
       }, props, {
         as: CustomPhoneInput
@@ -582,7 +582,7 @@ var DatePicker = exports.DatePicker = /*#__PURE__*/function (_React$Component9)
         }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
           className: "form-group mb-3"
         }, labelLocation === "FLOATING" ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
-          id: props.name + '-' + _UUID["default"].uuid(),
+          id: props.name + '-' + (0, _functions.generateUUID)(),
           type: "text"
         }, props, {
           as: CustomDateInput
@@ -591,7 +591,7 @@ var DatePicker = exports.DatePicker = /*#__PURE__*/function (_React$Component9)
         }))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
           htmlFor: props.name
         })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
-          id: props.name + '-' + _UUID["default"].uuid(),
+          id: props.name + '-' + (0, _functions.generateUUID)(),
           type: "text"
         }, props, {
           as: CustomDateInput
@@ -664,14 +664,14 @@ var NumberInput = exports.NumberInput = /*#__PURE__*/function (_React$Component1
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
         className: "form-group mb-3"
       }, labelLocation === "FLOATING" ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
-        id: props.name + '-' + _UUID["default"].uuid(),
+        id: props.name + '-' + (0, _functions.generateUUID)(),
         type: "number"
       }, props)), /*#__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, {
         htmlFor: props.name
       })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
-        id: props.name + '-' + _UUID["default"].uuid(),
+        id: props.name + '-' + (0, _functions.generateUUID)(),
         type: "number"
       }, props))), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
         muted: true
@@ -737,14 +737,14 @@ var TextArea = exports.TextArea = /*#__PURE__*/function (_React$Component11) {
         className: "form-group mb-3"
       }, labelLocation === "FLOATING" ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
         as: "textarea",
-        id: props.name + '-' + _UUID["default"].uuid()
+        id: props.name + '-' + (0, _functions.generateUUID)()
       }, props)), /*#__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, {
         htmlFor: props.name
       })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
         as: "textarea",
-        id: props.name + '-' + _UUID["default"].uuid()
+        id: props.name + '-' + (0, _functions.generateUUID)()
       }, props))), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
         muted: true
       }, this.props.item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
@@ -811,7 +811,7 @@ var Dropdown = exports.Dropdown = /*#__PURE__*/function (_React$Component12) {
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
         className: "form-group mb-3"
       }, labelLocation === "FLOATING" ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Select, (0, _extends2["default"])({
-        id: props.name + '-' + _UUID["default"].uuid()
+        id: props.name + '-' + (0, _functions.generateUUID)()
       }, props), props.placeholder ? /*#__PURE__*/_react["default"].createElement("option", {
         value: ""
       }, props.placeholder) : null, this.props.item.options.map(function (option) {
@@ -825,7 +825,7 @@ var Dropdown = exports.Dropdown = /*#__PURE__*/function (_React$Component12) {
       }))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
         htmlFor: props.name
       })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Select, (0, _extends2["default"])({
-        id: props.name + '-' + _UUID["default"].uuid()
+        id: props.name + '-' + (0, _functions.generateUUID)()
       }, props), props.placeholder ? /*#__PURE__*/_react["default"].createElement("option", {
         value: ""
       }, props.placeholder) : null, this.props.item.options.map(function (option) {
@@ -1116,7 +1116,7 @@ var Tags = exports.Tags = /*#__PURE__*/function (_React$Component14) {
         labelKey: function labelKey(option) {
           return option.label;
         },
-        id: props.name + '-' + _UUID["default"].uuid()
+        id: props.name + '-' + (0, _functions.generateUUID)()
       }, props)), /*#__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, {
@@ -1125,7 +1125,7 @@ var Tags = exports.Tags = /*#__PURE__*/function (_React$Component14) {
         labelKey: function labelKey(option) {
           return option.label;
         },
-        id: props.name + '-' + _UUID["default"].uuid()
+        id: props.name + '-' + (0, _functions.generateUUID)()
       }, props))), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
         muted: true
       }, this.props.item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
@@ -1202,7 +1202,7 @@ var Checkboxes = exports.Checkboxes = /*#__PURE__*/function (_React$Component15)
           variant: (_this20$props$checkbo = _this20.props.checkboxButtonClassName) !== null && _this20$props$checkbo !== void 0 ? _this20$props$checkbo : "outline-light",
           className: "btn-survey-builder-checkbox",
           key: "preview_".concat(option.key),
-          id: self.props.name + '-' + _UUID["default"].uuid(),
+          id: self.props.name + '-' + (0, _functions.generateUUID)(),
           inputRef: function inputRef(c) {
             if (c && self.props.item.mutable) {
               self.options["child_ref_".concat(option.key)] = c;
@@ -1296,7 +1296,7 @@ var Checkbox = exports.Checkbox = /*#__PURE__*/function (_React$Component16) {
         variant: (_this$props$checkboxB = this.props.checkboxButtonClassName) !== null && _this$props$checkboxB !== void 0 ? _this$props$checkboxB : "outline-light",
         className: "btn-survey-builder-checkbox",
         value: props.name,
-        id: props.name + '-' + _UUID["default"].uuid()
+        id: props.name + '-' + (0, _functions.generateUUID)()
       }, props), /*#__PURE__*/_react["default"].createElement("div", {
         className: "d-flex align-items-center justify-content-between text-black text-survey-builder-checkbox"
       }, props.checked !== true && /*#__PURE__*/_react["default"].createElement(_ri.RiCheckboxBlankLine, {
@@ -1368,7 +1368,7 @@ var RadioButtons = exports.RadioButtons = /*#__PURE__*/function (_React$Componen
           variant: (_self$props$checkboxB = self.props.checkboxButtonClassName) !== null && _self$props$checkboxB !== void 0 ? _self$props$checkboxB : "outline-light",
           className: "btn-survey-builder-checkbox",
           key: "preview_".concat(option.key),
-          id: self.props.name + '-' + _UUID["default"].uuid(),
+          id: self.props.name + '-' + (0, _functions.generateUUID)(),
           inputRef: function inputRef(c) {
             if (c && self.props.item.mutable) {
               self.options["child_ref_".concat(option.key)] = c;