@goldenpine/react-form-builder2 0.20.3-build.2 → 0.20.3-build.20

package/lib/form-elements-edit.js

@@ -125,6 +125,7 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
   }, {
     key: "render",
     value: function render() {
+      var _this$props$element$c;
       if (this.state.dirty) {
         this.props.element.dirty = true;
       }
@@ -164,12 +165,12 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
       return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
         className: "clearfix"
       }, /*#__PURE__*/_react["default"].createElement("h4", {
-        className: "float-left"
+        className: "float-start"
       }, this.props.element.text), /*#__PURE__*/_react["default"].createElement("i", {
-        className: "float-right fas fa-times dismiss-edit",
+        className: "float-end fas fa-times dismiss-edit",
         onClick: this.props.manualEditModeOff
       })), this.props.element.hasOwnProperty('content') && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("label", {
         className: "control-label"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
@@ -181,7 +182,7 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
         onEditorStateChange: this.onEditorStateChange.bind(this, 0, 'content'),
         stripPastedStyles: true
       })), this.props.element.hasOwnProperty('file_path') && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("label", {
         className: "control-label",
         htmlFor: "fileSelect"
@@ -200,7 +201,7 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
           key: this_key
         }, file.file_name);
       }))), this.props.element.hasOwnProperty('href') && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement(_reactTextareaAutosize["default"], {
         type: "text",
         className: "form-control",
@@ -208,7 +209,7 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'href', 'value')
       })), this.props.element.hasOwnProperty('label') && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("label", null, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "display-label"
       })), /*#__PURE__*/_react["default"].createElement(_reactDraftWysiwyg.Editor, {
@@ -218,105 +219,123 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
         onEditorStateChange: this.onEditorStateChange.bind(this, 0, 'label'),
         stripPastedStyles: true
       }), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "custom-control custom-checkbox"
+        className: "form-check"
       }, /*#__PURE__*/_react["default"].createElement("input", {
         id: "is-required",
-        className: "custom-control-input",
+        className: "form-check-input",
         type: "checkbox",
         checked: this_checked,
         value: true,
         onChange: this.editElementProp.bind(this, 'required', 'checked')
       }), /*#__PURE__*/_react["default"].createElement("label", {
-        className: "custom-control-label",
+        className: "form-check-label",
         htmlFor: "is-required"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "required"
-      }))), this.props.element.hasOwnProperty('readOnly') && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "custom-control custom-checkbox"
+      }))), this_checked && this.state.element.element === 'Checkboxes' && /*#__PURE__*/_react["default"].createElement("div", {
+        className: "d-flex align-items-center gap-2"
+      }, /*#__PURE__*/_react["default"].createElement("label", {
+        className: "form-label mb-0",
+        htmlFor: "checkbox-required-checks"
+      }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+        id: "minimum-number-of-selections"
+      }), ":"), /*#__PURE__*/_react["default"].createElement("input", {
+        id: "checkbox-required-checks",
+        type: "number",
+        min: "1",
+        className: "form-control d-inline-block",
+        style: {
+          width: '8ch'
+        },
+        value: (_this$props$element$c = this.props.element.checkbox_required_checks) !== null && _this$props$element$c !== void 0 ? _this$props$element$c : '1',
+        onBlur: this.updateElement.bind(this),
+        onChange: this.editElementProp.bind(this, 'checkbox_required_checks', 'value')
+      })), this.props.element.hasOwnProperty('readOnly') && /*#__PURE__*/_react["default"].createElement("div", {
+        className: "form-check"
       }, /*#__PURE__*/_react["default"].createElement("input", {
         id: "is-read-only",
-        className: "custom-control-input",
+        className: "form-check-input",
         type: "checkbox",
         checked: this_read_only,
         value: true,
         onChange: this.editElementProp.bind(this, 'readOnly', 'checked')
       }), /*#__PURE__*/_react["default"].createElement("label", {
-        className: "custom-control-label",
+        className: "form-check-label",
         htmlFor: "is-read-only"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "read-only"
       }))), this.props.element.hasOwnProperty('defaultToday') && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "custom-control custom-checkbox"
+        className: "form-check"
       }, /*#__PURE__*/_react["default"].createElement("input", {
         id: "is-default-to-today",
-        className: "custom-control-input",
+        className: "form-check-input",
         type: "checkbox",
         checked: this_default_today,
         value: true,
         onChange: this.editElementProp.bind(this, 'defaultToday', 'checked')
       }), /*#__PURE__*/_react["default"].createElement("label", {
-        className: "custom-control-label",
+        className: "form-check-label",
         htmlFor: "is-default-to-today"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "default-to-today"
       }), "?")), this.props.element.hasOwnProperty('showTimeSelect') && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "custom-control custom-checkbox"
+        className: "form-check"
       }, /*#__PURE__*/_react["default"].createElement("input", {
         id: "show-time-select",
-        className: "custom-control-input",
+        className: "form-check-input",
         type: "checkbox",
         checked: this_show_time_select,
         value: true,
         onChange: this.editElementProp.bind(this, 'showTimeSelect', 'checked')
       }), /*#__PURE__*/_react["default"].createElement("label", {
-        className: "custom-control-label",
+        className: "form-check-label",
         htmlFor: "show-time-select"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "show-time-select"
       }), "?")), this_show_time_select && this.props.element.hasOwnProperty('showTimeSelectOnly') && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "custom-control custom-checkbox"
+        className: "form-check"
       }, /*#__PURE__*/_react["default"].createElement("input", {
         id: "show-time-select-only",
-        className: "custom-control-input",
+        className: "form-check-input",
         type: "checkbox",
         checked: this_show_time_select_only,
         value: true,
         onChange: this.editElementProp.bind(this, 'showTimeSelectOnly', 'checked')
       }), /*#__PURE__*/_react["default"].createElement("label", {
-        className: "custom-control-label",
+        className: "form-check-label",
         htmlFor: "show-time-select-only"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "show-time-select-only"
       }), "?")), this.props.element.hasOwnProperty('showTimeInput') && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "custom-control custom-checkbox"
+        className: "form-check"
       }, /*#__PURE__*/_react["default"].createElement("input", {
         id: "show-time-input",
-        className: "custom-control-input",
+        className: "form-check-input",
         type: "checkbox",
         checked: this_show_time_input,
         value: true,
         onChange: this.editElementProp.bind(this, 'showTimeInput', 'checked')
       }), /*#__PURE__*/_react["default"].createElement("label", {
-        className: "custom-control-label",
+        className: "form-check-label",
         htmlFor: "show-time-input"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "show-time-input"
       }), "?")), (this.state.element.element === 'RadioButtons' || this.state.element.element === 'Checkboxes') && canHaveDisplayHorizontal && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "custom-control custom-checkbox"
+        className: "form-check"
       }, /*#__PURE__*/_react["default"].createElement("input", {
         id: "display-horizontal",
-        className: "custom-control-input",
+        className: "form-check-input",
         type: "checkbox",
         checked: this_checked_inline,
         value: true,
         onChange: this.editElementProp.bind(this, 'inline', 'checked')
       }), /*#__PURE__*/_react["default"].createElement("label", {
-        className: "custom-control-label",
+        className: "form-check-label",
         htmlFor: "display-horizontal"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "display-horizontal"
       })))), this.props.element.hasOwnProperty('src') && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("label", {
         className: "control-label",
         htmlFor: "srcInput"
@@ -330,18 +349,18 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'src', 'value')
       }))), canHaveImageSize && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "custom-control custom-checkbox"
+        className: "form-check"
       }, /*#__PURE__*/_react["default"].createElement("input", {
         id: "do-center",
-        className: "custom-control-input",
+        className: "form-check-input",
         type: "checkbox",
         checked: this_checked_center,
         value: true,
         onChange: this.editElementProp.bind(this, 'center', 'checked')
       }), /*#__PURE__*/_react["default"].createElement("label", {
-        className: "custom-control-label",
+        className: "form-check-label",
         htmlFor: "do-center"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "center"
@@ -376,7 +395,7 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'height', 'value')
       })))), this.state.element.element === 'Camera' && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("label", {
         className: "control-label",
         htmlFor: "LabelAfterCameraIcon"
@@ -390,7 +409,7 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'label_after_camera_icon', 'value')
       })), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("label", {
         className: "control-label",
         htmlFor: "MessageUnderCameraIcon"
@@ -404,7 +423,7 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'message_under_camera_icon', 'value')
       })), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("label", {
         className: "control-label",
         htmlFor: "LabelAfterPhotoClearIcon"
@@ -418,7 +437,7 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'label_after_photo_clear_icon', 'value')
       }))), this.state.element.element === 'FileUpload' && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("label", {
         className: "control-label",
         htmlFor: "LabelAfterFileIcon"
@@ -432,7 +451,7 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'label_after_file_icon', 'value')
       })), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("label", {
         className: "control-label",
         htmlFor: "MessageUnderFileIcon"
@@ -446,7 +465,7 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'message_under_file_icon', 'value')
       })), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("label", {
         className: "control-label",
         htmlFor: "LabelAfterFileClearIcon"
@@ -460,7 +479,7 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'label_after_file_clear_icon', 'value')
       })), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("label", {
         className: "control-label",
         htmlFor: "fileType"
@@ -498,7 +517,7 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
           key: index
         }, file.typeName);
       })))), this.state.element.element === 'Signature' && this.props.element.readOnly ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("label", {
         className: "control-label",
         htmlFor: "variableKey"
@@ -516,47 +535,47 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "variable-key-desc"
       }), ".")) : /*#__PURE__*/_react["default"].createElement("div", null), canHavePageBreakBefore && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("label", {
         className: "control-label"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "print-options"
       })), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "custom-control custom-checkbox"
+        className: "form-check"
       }, /*#__PURE__*/_react["default"].createElement("input", {
         id: "page-break-before-element",
-        className: "custom-control-input",
+        className: "form-check-input",
         type: "checkbox",
         checked: this_checked_page_break,
         value: true,
         onChange: this.editElementProp.bind(this, 'pageBreakBefore', 'checked')
       }), /*#__PURE__*/_react["default"].createElement("label", {
-        className: "custom-control-label",
+        className: "form-check-label",
         htmlFor: "page-break-before-element"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "page-break-before-elements"
       }), "?"))), canHaveAlternateForm && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("label", {
         className: "control-label"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "alternate-signature-page"
       })), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "custom-control custom-checkbox"
+        className: "form-check"
       }, /*#__PURE__*/_react["default"].createElement("input", {
         id: "display-on-alternate",
-        className: "custom-control-input",
+        className: "form-check-input",
         type: "checkbox",
         checked: this_checked_alternate_form,
         value: true,
         onChange: this.editElementProp.bind(this, 'alternateForm', 'checked')
       }), /*#__PURE__*/_react["default"].createElement("label", {
-        className: "custom-control-label",
+        className: "form-check-label",
         htmlFor: "display-on-alternate"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "display-on-alternate-signature-page"
       }), "?"))), this.props.element.hasOwnProperty('step') && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "form-group-range"
       }, /*#__PURE__*/_react["default"].createElement("label", {
@@ -572,7 +591,7 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'step', 'value')
       }))), this.props.element.hasOwnProperty('min_value') && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "form-group-range"
       }, /*#__PURE__*/_react["default"].createElement("label", {
@@ -594,7 +613,7 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'min_label', 'value')
       }))), this.props.element.hasOwnProperty('max_value') && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "form-group-range"
       }, /*#__PURE__*/_react["default"].createElement("label", {
@@ -616,7 +635,7 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'max_label', 'value')
       }))), this.props.element.hasOwnProperty('default_value') && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "form-group-range"
       }, /*#__PURE__*/_react["default"].createElement("label", {
@@ -632,41 +651,41 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'default_value', 'value')
       }))), this.props.element.hasOwnProperty('static') && this.props.element["static"] && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("label", {
         className: "control-label"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "text-style"
       })), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "custom-control custom-checkbox"
+        className: "form-check"
       }, /*#__PURE__*/_react["default"].createElement("input", {
         id: "do-bold",
-        className: "custom-control-input",
+        className: "form-check-input",
         type: "checkbox",
         checked: this_checked_bold,
         value: true,
         onChange: this.editElementProp.bind(this, 'bold', 'checked')
       }), /*#__PURE__*/_react["default"].createElement("label", {
-        className: "custom-control-label",
+        className: "form-check-label",
         htmlFor: "do-bold"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "bold"
       }))), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "custom-control custom-checkbox"
+        className: "form-check"
       }, /*#__PURE__*/_react["default"].createElement("input", {
         id: "do-italic",
-        className: "custom-control-input",
+        className: "form-check-input",
         type: "checkbox",
         checked: this_checked_italic,
         value: true,
         onChange: this.editElementProp.bind(this, 'italic', 'checked')
       }), /*#__PURE__*/_react["default"].createElement("label", {
-        className: "custom-control-label",
+        className: "form-check-label",
         htmlFor: "do-italic"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "italic"
       })))), this.props.element.showDescription && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("label", {
         className: "control-label",
         htmlFor: "questionDescription"
@@ -680,7 +699,7 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'description', 'value')
       })), this.props.showCorrectColumn && this.props.element.canHaveAnswer && !this.props.element.hasOwnProperty('options') && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("label", {
         className: "control-label",
         htmlFor: "correctAnswer"
@@ -694,7 +713,7 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'correct', 'value')
       })), this.props.element.canPopulateFromApi && this.props.element.hasOwnProperty('options') && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("label", {
         className: "control-label",
         htmlFor: "optionsApiUrl"

package/lib/form-validator.js

@@ -85,13 +85,13 @@ var FormValidator = exports["default"] = /*#__PURE__*/function (_React$Component
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "clearfix"
       }, /*#__PURE__*/_react["default"].createElement("i", {
-        className: "fas fa-exclamation-triangle float-left"
+        className: "fas fa-exclamation-triangle float-start"
       }), /*#__PURE__*/_react["default"].createElement("ul", {
-        className: "float-left"
+        className: "float-start"
       }, errors)), /*#__PURE__*/_react["default"].createElement("div", {
         className: "clearfix"
       }, /*#__PURE__*/_react["default"].createElement("a", {
-        className: "float-right btn btn-default btn-sm btn-danger",
+        className: "float-end btn btn-secondary btn-sm btn-danger",
         onClick: this.dismissModal.bind(this)
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "dismiss"

package/lib/form.js

@@ -60,7 +60,7 @@ var ReactForm = /*#__PURE__*/function (_React$Component) {
         backButton = _this$props$backButto === void 0 ? false : _this$props$backButto;
       return backButton || /*#__PURE__*/_react["default"].createElement("a", {
         href: _this.props.back_action,
-        className: "btn btn-default btn-cancel btn-big"
+        className: "btn btn-secondary btn-cancel btn-big"
       }, backName);
     });
     _this.answerData = _this._convert(props.answer_data);

package/lib/language-provider/locales/en-us.json

@@ -31,6 +31,7 @@
   "description": "Description",
   "correct-answer" : "Correct Answer",
   "populate-options-from-api" : "Populate Options from API",
+  "minimum-number-of-selections" : "The minimum number of options a customer must select",
   "populate" : "Populate",
   "pdf" : "PDF",
   "word" : "Word",

package/lib/language-provider/locales/fa-ir.json

@@ -31,6 +31,7 @@
   "description": "توضیحات",
   "correct-answer": "پاسخ صحیح",
   "populate-options-from-api": "پر کردن گزینه‌ها از API",
+  "minimum-number-of-selections" : "حداقل تعداد گزینه‌هایی که مشتری باید انتخاب کند",
   "populate": "پر کردن",
   "pdf": "PDF",
   "word": "Word",

package/lib/language-provider/locales/it-it.json

@@ -31,6 +31,7 @@
   "description": "Descrizione",
   "correct-answer" : "Risposta corretta",
   "populate-options-from-api" : "Popola opzione da API",
+  "minimum-number-of-selections" : "Il numero minimo di opzioni che un cliente deve selezionare",
   "populate" : "Popola",
   "pdf" : "PDF",
   "word" : "Word",

package/lib/language-provider/locales/vi-vn.json

@@ -29,6 +29,7 @@
   "description": "Mô tả",
   "correct-answer": "Lựa chọn đúng",
   "populate-options-from-api": "Lấy dữ liệu từ API",
+  "minimum-number-of-selections" : "Số lượng lựa chọn tối thiểu mà khách hàng phải chọn",
   "populate": "Thực hiện",
   "display-label-after-camera-icon" : "Hiển thị nhãn sau biểu tượng máy ảnh",
   "place-holder-display-label-after-camera-icon" : "Tải ảnh lên",

package/lib/multi-column/dustbin.js

@@ -61,7 +61,9 @@ function isContainer(item) {
         return true;
       }
       if (data.field_name) {
-        return data.field_name.indexOf('_col_row') > -1;
+        // Check if the field name indicates a container
+        // Fix a runtime error when dropping a fieldset inside a multi-column row - which dropping seems not supported
+        return data.field_name.indexOf('_col_row') > -1 || data.field_name.indexOf('fieldset') > -1;
       }
     }
   }

package/lib/preview.js

@@ -381,7 +381,7 @@ Preview.defaultProps = {
   files: [],
   editMode: false,
   editElement: null,
-  className: 'col-md-9 react-form-builder-preview float-left',
+  className: 'col-md-9 react-form-builder-preview float-start',
   renderEditForm: function renderEditForm(props) {
     return /*#__PURE__*/_react["default"].createElement(_formDynamicEdit["default"], props);
   }

package/lib/sortable-element.js

@@ -14,7 +14,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactDnd = require("react-dnd");
 var _ItemTypes = _interopRequireDefault(require("./ItemTypes"));
-var _excluded = ["index", "id", "moveCard", "seq"];
+var _excluded = ["index", "id", "moveCard", "seq", "component"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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; }
@@ -153,20 +153,19 @@ var useDragAndDrop = function useDragAndDrop(props) {
 
 // Modern approach using a functional component wrapper instead of HOC
 var DraggableCard = function DraggableCard(props) {
+  // ✅ Move the default value directly into destructuring
   var index = props.index,
     id = props.id,
     moveCard = props.moveCard,
     _props$seq = props.seq,
     seq = _props$seq === void 0 ? -1 : _props$seq,
+    ComposedComponent = props.component,
     restProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var _useDragAndDrop = useDragAndDrop(props),
     ref = _useDragAndDrop.ref,
     previewRef = _useDragAndDrop.previewRef,
     isDragging = _useDragAndDrop.isDragging;
   var opacity = isDragging ? 0 : 1;
-
-  // Use the ComposedComponent passed in props
-  var ComposedComponent = props.component;
   return /*#__PURE__*/_react["default"].createElement("div", {
     ref: previewRef
   }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -189,9 +188,11 @@ DraggableCard.propTypes = {
   moveCard: _propTypes["default"].func.isRequired,
   seq: _propTypes["default"].number
 };
-DraggableCard.defaultProps = {
-  seq: -1
-};
+
+// ❌ REMOVE THIS BLOCK ENTIRELY
+// DraggableCard.defaultProps = {
+//   seq: -1,
+// };
 
 // This replaces the HOC pattern with a component that takes the component as a prop
 function createDraggableCard(ComposedComponent) {

package/lib/toolbar.js

@@ -588,7 +588,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         grouped = _buildGroupItems.grouped,
         groupKeys = _buildGroupItems.groupKeys;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "col-md-3 react-form-builder-toolbar float-right",
+        className: "col-md-3 react-form-builder-toolbar float-end",
         style: {
           position: this.state.isPinned ? 'fixed' : '',
           // set up the vertical boundary by top/bottom,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@goldenpine/react-form-builder2",
-  "version": "0.20.3-build.2",
+  "version": "0.20.3-build.20",
   "description": "A complete form builder for react.",
   "main": "lib/index.js",
   "types": "types/index.d.ts",
@@ -29,7 +29,7 @@
   "engines": {
     "node": ">=18.0.0"
   },
-  "author": "Kiho Chang",
+  "author": "Golden Pine",
   "dependencies": {
     "beedle": "^0.8.1",
     "classnames": "^2.2.6",
@@ -43,7 +43,7 @@
     "immutability-helper": "^3.1.1",
     "isomorphic-fetch": "^3.0.0",
     "prop-types": "^15.7.2",
-    "react-bootstrap-slider": "^3.0.0",
+    "@goldenpine/react-bootstrap-slider": "^3.0.1",
     "react-datepicker": "^8.3.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",