@bigbinary/neeto-molecules 4.0.30 → 4.0.31

package/dist/cjs/OptionFields.js

@@ -18,9 +18,10 @@ var i18next = require('i18next');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var injectCss = require('./inject-css-B6qYtOJe.js');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
-var Delete = require('@bigbinary/neeto-icons/Delete');
 var Edit = require('@bigbinary/neeto-icons/Edit');
 var Drag = require('@bigbinary/neeto-icons/Drag');
+var Copy = require('@bigbinary/neeto-icons/Copy');
+var Delete = require('@bigbinary/neeto-icons/Delete');
 var Input = require('@bigbinary/neetoui/formik/Input');
 var Textarea$1 = require('@bigbinary/neetoui/formik/Textarea');
 var ImageUploader = require('@bigbinary/neeto-image-uploader-frontend/ImageUploader');
@@ -104,6 +105,20 @@ var IMAGE_UPLOAD_CONFIG = {
     "image/svg": [".svg"]
   }
 };
+var INPUT_TYPES = {
+  TEXT: "text",
+  NUMBER: "number"
+};
+var OPTION_ACTIONS = {
+  UPDATE_IMAGE: "update_image",
+  UPDATE_VALUES: "update_values",
+  UPDATE_LABEL: "update_label",
+  DELETE: "delete",
+  REORDER: "reorder",
+  ADD: "add",
+  BULK_ADD: "bulk_add",
+  CLONE: "clone"
+};
 
 var FormError = function FormError(_ref) {
   var error = _ref.error;
@@ -149,12 +164,53 @@ var resolveFormikValue = function resolveFormikValue(path, values) {
     return acc && acc[key] !== undefined ? acc[key] : undefined;
   }, values);
 };
+var handleNumberKeyDown = function handleNumberKeyDown(event, onKeyDown) {
+  var allowedKeys = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", ".", "-"];
+  var controlKeys = ["Backspace", "Delete", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Tab", "Enter"];
+  if ((event.ctrlKey || event.metaKey) && ["a", "c", "v", "x", "z"].includes(event.key.toLowerCase())) {
+    return;
+  }
+  if (![].concat(allowedKeys, controlKeys).includes(event.key)) {
+    event.preventDefault();
+  }
+  onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);
+};
+var handleInputBlur = function handleInputBlur(event, _ref) {
+  var id = _ref.id,
+    inputIndex = _ref.inputIndex,
+    onChange = _ref.onChange,
+    onBlur = _ref.onBlur,
+    field = _ref.field,
+    config = _ref.config;
+  var value = event.target.value;
+  var finalValue = !value && config !== null && config !== void 0 && config.defaultValue ? config.defaultValue : value;
+  onChange({
+    id: id,
+    value: finalValue,
+    inputIndex: inputIndex,
+    isOnBlur: true
+  });
+  onBlur === null || onBlur === void 0 || onBlur(id, finalValue, inputIndex);
+  field.onBlur(event);
+};
+var getMultiInputError = function getMultiInputError(isMultiInput, meta) {
+  if (!isMultiInput || !meta.error) return null;
+  if (Array.isArray(meta.error)) {
+    var hasValuesError = meta.error.some(function (optionError) {
+      return Array.isArray(optionError.values) && optionError.values.some(ramda.identity);
+    });
+    if (hasValuesError) {
+      return i18next.t("neetoMolecules.optionFields.allFieldsRequired");
+    }
+  }
+  return null;
+};
 
-function ownKeys$4(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$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$5(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$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var attachPosition = function attachPosition(options) {
   return options.map(function (option, index) {
-    return _objectSpread$4(_objectSpread$4({}, option), {}, {
+    return _objectSpread$5(_objectSpread$5({}, option), {}, {
       position: index
     });
   });
@@ -169,7 +225,11 @@ var useOptionFields = function useOptionFields(_ref) {
     destroyFlagName = _ref.destroyFlagName,
     isNewItemsPrefilled = _ref.isNewItemsPrefilled,
     isAddOptionEnabled = _ref.isAddOptionEnabled,
-    isPictureChoice = _ref.isPictureChoice;
+    isPictureChoice = _ref.isPictureChoice,
+    isMultiInput = _ref.isMultiInput,
+    inputConfig = _ref.inputConfig;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     shouldFocus = _useState2[0],
@@ -184,9 +244,15 @@ var useOptionFields = function useOptionFields(_ref) {
     _useField2[1];
     var helpers = _useField2[2];
   var setValue = helpers.setValue;
-  var handleChange = function handleChange(id, value) {
-    var isOnBlur = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-    var fieldType = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "label";
+  var handleChange = function handleChange(_ref2) {
+    var id = _ref2.id,
+      value = _ref2.value,
+      _ref2$inputIndex = _ref2.inputIndex,
+      inputIndex = _ref2$inputIndex === void 0 ? 0 : _ref2$inputIndex,
+      _ref2$isOnBlur = _ref2.isOnBlur,
+      isOnBlur = _ref2$isOnBlur === void 0 ? false : _ref2$isOnBlur,
+      _ref2$fieldType = _ref2.fieldType,
+      fieldType = _ref2$fieldType === void 0 ? "label" : _ref2$fieldType;
     var index = neetoCist.findIndexById(id, options);
     var currentOption = options[index];
 
@@ -194,7 +260,18 @@ var useOptionFields = function useOptionFields(_ref) {
     if (isPictureChoice && fieldType === "image") {
       var _nextOptions = ramda.assocPath([index, "image"], value, options);
       setValue(_nextOptions);
-      onChange === null || onChange === void 0 || onChange(_nextOptions);
+      onChange === null || onChange === void 0 || onChange(_nextOptions, OPTION_ACTIONS.UPDATE_IMAGE);
+      return;
+    }
+
+    // Handle multi-input changes
+    if (isMultiInput && typeof inputIndex === "number") {
+      var currentValues = currentOption.values || [];
+      var newValues = ramda.clone(currentValues);
+      newValues[inputIndex] = value;
+      var _nextOptions2 = ramda.assocPath([index, "values"], newValues, options);
+      setValue(_nextOptions2);
+      onChange === null || onChange === void 0 || onChange(_nextOptions2, OPTION_ACTIONS.UPDATE_VALUES);
       return;
     }
 
@@ -214,7 +291,7 @@ var useOptionFields = function useOptionFields(_ref) {
     // Update options with the determined value (always updating label field)
     var nextOptions = ramda.assocPath([index, "label"], valueToUpdate, options);
     setValue(nextOptions);
-    onChange === null || onChange === void 0 || onChange(nextOptions);
+    onChange === null || onChange === void 0 || onChange(nextOptions, OPTION_ACTIONS.UPDATE_LABEL);
   };
   var handleDelete = function handleDelete(id, arrayHelpers) {
     var nextOptions;
@@ -226,11 +303,11 @@ var useOptionFields = function useOptionFields(_ref) {
       arrayHelpers.remove(indexToDelete);
       nextOptions = attachPosition(ramda.remove(indexToDelete, 1, options));
     }
-    onChange === null || onChange === void 0 || onChange(nextOptions);
+    onChange === null || onChange === void 0 || onChange(nextOptions, OPTION_ACTIONS.DELETE);
   };
-  var handleDragEnd = function handleDragEnd(_ref2) {
-    var source = _ref2.source,
-      destination = _ref2.destination;
+  var handleDragEnd = function handleDragEnd(_ref3) {
+    var source = _ref3.source,
+      destination = _ref3.destination;
     // When dragged outside of draggable
     if (destination === null) return;
     var deletedOptions = options.filter(ramda.prop(destroyFlagName));
@@ -238,22 +315,26 @@ var useOptionFields = function useOptionFields(_ref) {
     var nextOptions = ramda.move(source.index, destination.index, filteredOptions);
     var finalOptions = attachPosition(nextOptions);
     setValue([].concat(_toConsumableArray(deletedOptions), _toConsumableArray(finalOptions)));
-    onChange === null || onChange === void 0 || onChange([].concat(_toConsumableArray(deletedOptions), _toConsumableArray(finalOptions)));
+    onChange === null || onChange === void 0 || onChange([].concat(_toConsumableArray(deletedOptions), _toConsumableArray(finalOptions)), OPTION_ACTIONS.REORDER);
   };
   var handleAddOption = function handleAddOption() {
     var id = randomId();
-    var newOption = _objectSpread$4({
+    var newOption = _objectSpread$5(_objectSpread$5({
       id: "draft-".concat(id),
       altId: "alt-".concat(id),
       label: isNewItemsPrefilled ? _generateLabel(itemLabel, options) : "",
       position: options.length
     }, isPictureChoice && {
       image: null
+    }), isMultiInput && {
+      values: inputConfig.map(function (config) {
+        return config.defaultValue || "";
+      })
     });
     setShouldFocus(true);
     var nextOptions = ramda.append(newOption, options);
     setValue(nextOptions);
-    onChange === null || onChange === void 0 || onChange(nextOptions);
+    onChange === null || onChange === void 0 || onChange(nextOptions, OPTION_ACTIONS.ADD);
   };
   var handleBulkAddOption = function handleBulkAddOption(optionsString) {
     setShouldFocus(true);
@@ -268,7 +349,27 @@ var useOptionFields = function useOptionFields(_ref) {
     });
     var nextOptions = [].concat(_toConsumableArray(options), _toConsumableArray(newOptions));
     setValue(nextOptions);
-    onChange === null || onChange === void 0 || onChange(nextOptions);
+    onChange === null || onChange === void 0 || onChange(nextOptions, OPTION_ACTIONS.BULK_ADD);
+  };
+  var handleClone = function handleClone(id) {
+    var index = neetoCist.findIndexById(id, options);
+    var optionToClone = options[index];
+    if (!optionToClone) return;
+    var newId = randomId();
+    var clonedOption = _objectSpread$5(_objectSpread$5({}, optionToClone), {}, {
+      id: "draft-".concat(newId),
+      altId: "alt-".concat(newId),
+      label: isMultiInput ? optionToClone.label : t("neetoMolecules.optionFields.clonedOption", {
+        originalLabel: optionToClone.label
+      })
+    }, isMultiInput && optionToClone.values && {
+      values: ramda.clone(optionToClone.values)
+    });
+    setShouldFocus(true);
+    var nextOptions = ramda.insert(index + 1, clonedOption, options);
+    var optionsWithUpdatedPositions = attachPosition(nextOptions);
+    setValue(optionsWithUpdatedPositions);
+    onChange === null || onChange === void 0 || onChange(optionsWithUpdatedPositions, OPTION_ACTIONS.CLONE);
   };
   var handleKeyDown = function handleKeyDown(event) {
     if (event.key !== "Enter") return;
@@ -291,17 +392,18 @@ var useOptionFields = function useOptionFields(_ref) {
     handleChange: handleChange,
     handleKeyDown: handleKeyDown,
     handleDelete: handleDelete,
-    handleDragEnd: handleDragEnd
+    handleDragEnd: handleDragEnd,
+    handleClone: handleClone
   };
 };
 
 var css = ".neeto-molecules-option-fields__image-uploader img{max-height:100px}";
 injectCss.n(css,{});
 
-function ownKeys$3(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$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$4(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$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var DragHandle = function DragHandle(props) {
-  return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread$3(_objectSpread$3({
+  return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread$4(_objectSpread$4({
     className: "neeto-ui-text-gray-500 flex h-8 flex-shrink-0 cursor-grab items-center",
     "data-cy": "drag-handle",
     "data-testid": "drag-handle"
@@ -313,29 +415,84 @@ var DragHandle = function DragHandle(props) {
   }));
 };
 
-function ownKeys$2(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$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var OptionActions = reactUtils.withT(function (_ref) {
+  var t = _ref.t,
+    disabled = _ref.disabled,
+    _ref$hideCloneOption = _ref.hideCloneOption,
+    hideCloneOption = _ref$hideCloneOption === void 0 ? false : _ref$hideCloneOption,
+    _ref$hideDeleteOption = _ref.hideDeleteOption,
+    hideDeleteOption = _ref$hideDeleteOption === void 0 ? false : _ref$hideDeleteOption,
+    optionIndex = _ref.optionIndex,
+    id = _ref.id,
+    arrayHelpers = _ref.arrayHelpers,
+    onClone = _ref.onClone,
+    onDelete = _ref.onDelete,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex items-center gap-1 ".concat(className),
+    children: [!hideCloneOption && /*#__PURE__*/jsxRuntime.jsx(Button, {
+      disabled: disabled,
+      className: "p-0.5",
+      "data-cy": "clone-option-button-".concat(optionIndex),
+      "data-testid": "clone-option-button-".concat(optionIndex),
+      icon: Copy,
+      size: "small",
+      style: "text",
+      tooltipProps: {
+        content: t("neetoMolecules.common.actions.clone"),
+        position: "top",
+        touch: ["hold", 500]
+      },
+      onClick: function onClick() {
+        return onClone(id);
+      }
+    }), !hideDeleteOption && /*#__PURE__*/jsxRuntime.jsx(Button, {
+      disabled: disabled,
+      className: "p-0.5",
+      "data-cy": "delete-option-button-".concat(optionIndex),
+      "data-testid": "delete-option-button-".concat(optionIndex),
+      icon: Delete,
+      size: "small",
+      style: "text",
+      tooltipProps: {
+        content: t("neetoMolecules.common.actions.delete"),
+        position: "top",
+        touch: ["hold", 500]
+      },
+      onClick: function onClick() {
+        return onDelete(id, arrayHelpers);
+      }
+    })]
+  });
+});
+
+function ownKeys$3(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$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var BlockOption = reactUtils.withT(function (_ref) {
   var t = _ref.t,
     innerRef = _ref.innerRef,
     _ref$hideDeleteOption = _ref.hideDeleteOption,
     hideDeleteOption = _ref$hideDeleteOption === void 0 ? false : _ref$hideDeleteOption,
+    _ref$hideCloneOption = _ref.hideCloneOption,
+    hideCloneOption = _ref$hideCloneOption === void 0 ? false : _ref$hideCloneOption,
     draggableProps = _ref.draggableProps,
     dragHandleProps = _ref.dragHandleProps,
     label = _ref.label,
     onEdit = _ref.onEdit,
+    onClone = _ref.onClone,
     handleDeleteClick = _ref.handleDeleteClick,
     id = _ref.id,
     isDraggable = _ref.isDraggable,
     optionIndex = _ref.optionIndex,
     arrayHelpers = _ref.arrayHelpers;
-  return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread$2(_objectSpread$2(_objectSpread$2({
+  return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread$3(_objectSpread$3(_objectSpread$3({
     ref: innerRef
   }, draggableProps), dragHandleProps), {}, {
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "neeto-ui-border-gray-400 hover:neeto-ui-bg-gray-200 neeto-ui-rounded-sm shadow-xs group relative mb-2 flex h-10 cursor-pointer items-center gap-2 border p-3 transition-colors duration-300 ease-in-out",
       "data-cy": "address-field-block",
-      children: [isDraggable && /*#__PURE__*/jsxRuntime.jsx(DragHandle, _objectSpread$2(_objectSpread$2({}, dragHandleProps), {}, {
+      children: [isDraggable && /*#__PURE__*/jsxRuntime.jsx(DragHandle, _objectSpread$3(_objectSpread$3({}, dragHandleProps), {}, {
         "data-testid": "drag-handle-".concat(optionIndex)
       })), /*#__PURE__*/jsxRuntime.jsx(Typography, {
         className: "flex-grow truncate leading-4",
@@ -360,21 +517,15 @@ var BlockOption = reactUtils.withT(function (_ref) {
           onClick: function onClick() {
             return onEdit(id);
           }
-        }), !hideDeleteOption && /*#__PURE__*/jsxRuntime.jsx(Button, {
-          className: "neeto-ui-rounded hover:neeto-ui-bg-gray-400 p-1",
-          "data-cy": "address-field-delete-button",
-          "data-testid": "delete-option-button-".concat(optionIndex),
-          icon: Delete,
-          size: "small",
-          style: "text",
-          tooltipProps: {
-            content: t("neetoMolecules.common.actions.delete"),
-            position: "top",
-            touch: ["hold", 500]
-          },
-          onClick: function onClick() {
-            return handleDeleteClick(id, arrayHelpers);
-          }
+        }), /*#__PURE__*/jsxRuntime.jsx(OptionActions, {
+          arrayHelpers: arrayHelpers,
+          hideCloneOption: hideCloneOption,
+          hideDeleteOption: hideDeleteOption,
+          id: id,
+          onClone: onClone,
+          optionIndex: optionIndex,
+          className: "flex items-center gap-2",
+          onDelete: handleDeleteClick
         })]
       })]
     })
@@ -393,11 +544,12 @@ var ImageOption = function ImageOption(_ref) {
     _onChange = _ref.onChange,
     _onBlur = _ref.onBlur,
     onDelete = _ref.onDelete,
+    onClone = _ref.onClone,
     arrayHelpers = _ref.arrayHelpers,
     _ref$hideDeleteOption = _ref.hideDeleteOption,
-    hideDeleteOption = _ref$hideDeleteOption === void 0 ? false : _ref$hideDeleteOption;
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
+    hideDeleteOption = _ref$hideDeleteOption === void 0 ? false : _ref$hideDeleteOption,
+    _ref$hideCloneOption = _ref.hideCloneOption,
+    hideCloneOption = _ref$hideCloneOption === void 0 ? false : _ref$hideCloneOption;
   var imageFieldName = name.replace(".label", ".image");
   var _useField = formik.useField(imageFieldName),
     _useField2 = _slicedToArray(_useField, 3);
@@ -407,7 +559,12 @@ var ImageOption = function ImageOption(_ref) {
   var handleImageChange = function handleImageChange(changedImage) {
     var imageValue = ramda.isEmpty(changedImage === null || changedImage === void 0 ? void 0 : changedImage.url) ? null : changedImage;
     setValue(imageValue, false);
-    _onChange(id, imageValue, false, "image");
+    _onChange({
+      id: id,
+      value: imageValue,
+      isOnBlur: false,
+      fieldType: "image"
+    });
   };
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: classnames("flex w-full items-center justify-center", {
@@ -438,56 +595,59 @@ var ImageOption = function ImageOption(_ref) {
           "data-testid": "input-option-".concat(optionIndex),
           onChange: function onChange(_ref2) {
             var target = _ref2.target;
-            return _onChange(id, target.value);
+            return _onChange({
+              id: id,
+              value: target.value
+            });
           },
           onFocus: function onFocus(_ref3) {
             var target = _ref3.target;
             return target.select();
           }
         }, "onBlur", function onBlur(event) {
-          _onChange(id, event.target.value, true);
+          _onChange({
+            id: id,
+            value: event.target.value,
+            isOnBlur: true
+          });
           _onBlur === null || _onBlur === void 0 || _onBlur(id, event.target.value);
           for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
             args[_key - 1] = arguments[_key];
           }
           field.onBlur.apply(field, [event].concat(args));
         }))
-      }), !hideDeleteOption && /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "absolute right-2 top-2 opacity-0 transition-opacity duration-200 group-hover:opacity-100",
-        children: /*#__PURE__*/jsxRuntime.jsx(Button, {
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "absolute right-3 top-1/2 flex -translate-y-1/2 items-center gap-1 opacity-0 transition-opacity duration-200 group-hover:opacity-100",
+        children: /*#__PURE__*/jsxRuntime.jsx(OptionActions, {
+          arrayHelpers: arrayHelpers,
           disabled: disabled,
-          className: "p-0.5",
-          "data-cy": "delete-option-button-".concat(optionIndex),
-          "data-testid": "delete-option-button-".concat(optionIndex),
-          icon: Delete,
-          size: "small",
-          style: "text",
-          tooltipProps: {
-            content: t("neetoMolecules.common.actions.delete"),
-            position: "top",
-            touch: ["hold", 500]
-          },
-          onClick: function onClick() {
-            return onDelete(id, arrayHelpers);
-          }
+          hideCloneOption: hideCloneOption,
+          hideDeleteOption: hideDeleteOption,
+          id: id,
+          onClone: onClone,
+          onDelete: onDelete,
+          optionIndex: optionIndex
         })
       })]
     })
   });
 };
 
-function ownKeys$1(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$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$2(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$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var InputOption = function InputOption(_ref) {
   var shouldFocus = _ref.shouldFocus,
     _ref$hideDeleteOption = _ref.hideDeleteOption,
     hideDeleteOption = _ref$hideDeleteOption === void 0 ? false : _ref$hideDeleteOption,
+    _ref$hideCloneOption = _ref.hideCloneOption,
+    hideCloneOption = _ref$hideCloneOption === void 0 ? false : _ref$hideCloneOption,
     innerRef = _ref.innerRef,
     draggableProps = _ref.draggableProps,
     dragHandleProps = _ref.dragHandleProps,
     isPictureChoice = _ref.isPictureChoice,
     onKeyDown = _ref.onKeyDown,
     onDelete = _ref.onDelete,
+    onClone = _ref.onClone,
     _onChange = _ref.onChange,
     optionIndex = _ref.optionIndex,
     disabled = _ref.disabled,
@@ -498,29 +658,29 @@ var InputOption = function InputOption(_ref) {
     placeholder = _ref.placeholder,
     _onBlur = _ref.onBlur,
     arrayHelpers = _ref.arrayHelpers;
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
   var Component = isTextArea ? Textarea$1 : Input;
   var _useField = formik.useField(name),
     _useField2 = _slicedToArray(_useField, 1),
     field = _useField2[0];
-  return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread$1(_objectSpread$1({
+  return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread$2(_objectSpread$2({
     ref: innerRef
-  }, _objectSpread$1(_objectSpread$1({}, draggableProps), dragHandleProps)), {}, {
+  }, _objectSpread$2(_objectSpread$2({}, draggableProps), dragHandleProps)), {}, {
     "data-cy": "form-block-options",
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "nf-input-options group relative mb-2 flex items-start gap-1",
-      children: [isDraggable && /*#__PURE__*/jsxRuntime.jsx(DragHandle, _objectSpread$1(_objectSpread$1({}, dragHandleProps), {}, {
+      children: [isDraggable && /*#__PURE__*/jsxRuntime.jsx(DragHandle, _objectSpread$2(_objectSpread$2({}, dragHandleProps), {}, {
         "data-testid": "drag-handle-".concat(optionIndex)
       })), isPictureChoice ? /*#__PURE__*/jsxRuntime.jsx(ImageOption, {
         arrayHelpers: arrayHelpers,
         disabled: disabled,
         field: field,
+        hideCloneOption: hideCloneOption,
         hideDeleteOption: hideDeleteOption,
         id: id,
         name: name,
         onBlur: _onBlur,
         onChange: _onChange,
+        onClone: onClone,
         onDelete: onDelete,
         onKeyDown: onKeyDown,
         optionIndex: optionIndex,
@@ -534,33 +694,33 @@ var InputOption = function InputOption(_ref) {
         autoFocus: shouldFocus,
         "data-cy": "option-input-".concat(optionIndex),
         "data-testid": "".concat(isTextArea ? "textarea-option" : "input-option", "-").concat(optionIndex),
-        suffix: !hideDeleteOption && /*#__PURE__*/jsxRuntime.jsx(Button, {
+        suffix: /*#__PURE__*/jsxRuntime.jsx(OptionActions, {
+          arrayHelpers: arrayHelpers,
           disabled: disabled,
-          className: "p-0.5",
-          "data-cy": "delete-option-button-".concat(optionIndex),
-          "data-testid": "delete-option-button-".concat(optionIndex),
-          icon: Delete,
-          size: "small",
-          style: "text",
-          tooltipProps: {
-            content: t("neetoMolecules.common.actions.delete"),
-            position: "top",
-            touch: ["hold", 500]
-          },
-          onClick: function onClick() {
-            return onDelete(id, arrayHelpers);
-          }
+          hideCloneOption: hideCloneOption,
+          hideDeleteOption: hideDeleteOption,
+          id: id,
+          onClone: onClone,
+          onDelete: onDelete,
+          optionIndex: optionIndex
         }),
         onChange: function onChange(_ref2) {
           var target = _ref2.target;
-          return _onChange(id, target.value);
+          return _onChange({
+            id: id,
+            value: target.value
+          });
         },
         onFocus: function onFocus(_ref3) {
           var target = _ref3.target;
           return target.select();
         },
         onBlur: function onBlur(event) {
-          _onChange(id, event.target.value, true);
+          _onChange({
+            id: id,
+            value: event.target.value,
+            isOnBlur: true
+          });
           _onBlur === null || _onBlur === void 0 || _onBlur(id, event.target.value);
           for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
             args[_key - 1] = arguments[_key];
@@ -572,19 +732,127 @@ var InputOption = function InputOption(_ref) {
   }));
 };
 
+function ownKeys$1(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$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var MultiInputOption = reactUtils.withT(function (_ref) {
+  var shouldFocus = _ref.shouldFocus,
+    _ref$hideDeleteOption = _ref.hideDeleteOption,
+    hideDeleteOption = _ref$hideDeleteOption === void 0 ? false : _ref$hideDeleteOption,
+    _ref$hideCloneOption = _ref.hideCloneOption,
+    hideCloneOption = _ref$hideCloneOption === void 0 ? false : _ref$hideCloneOption,
+    innerRef = _ref.innerRef,
+    draggableProps = _ref.draggableProps,
+    dragHandleProps = _ref.dragHandleProps,
+    _onKeyDown = _ref.onKeyDown,
+    onDelete = _ref.onDelete,
+    onClone = _ref.onClone,
+    _onChange = _ref.onChange,
+    optionIndex = _ref.optionIndex,
+    disabled = _ref.disabled,
+    id = _ref.id,
+    isDraggable = _ref.isDraggable,
+    name = _ref.name,
+    placeholder = _ref.placeholder,
+    _onBlur = _ref.onBlur,
+    arrayHelpers = _ref.arrayHelpers,
+    _ref$inputConfig = _ref.inputConfig,
+    inputConfig = _ref$inputConfig === void 0 ? [] : _ref$inputConfig;
+  return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread$1(_objectSpread$1({
+    ref: innerRef
+  }, _objectSpread$1(_objectSpread$1({}, draggableProps), dragHandleProps)), {}, {
+    "data-cy": "form-block-multi-options",
+    "data-testid": "form-block-multi-options",
+    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "nf-multi-input-options group relative mb-2 flex items-center gap-1",
+      children: [isDraggable && /*#__PURE__*/jsxRuntime.jsx(DragHandle, _objectSpread$1(_objectSpread$1({}, dragHandleProps), {}, {
+        "data-testid": "drag-handle-".concat(optionIndex)
+      })), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex flex-1 flex-col gap-2",
+        children: /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "flex gap-2",
+          children: inputConfig.map(function (config, inputIndex) {
+            var _field$value;
+            var inputName = "".concat(name.replace(".label", ""), ".values.").concat(inputIndex);
+            var inputType = config.type || INPUT_TYPES.TEXT;
+            var isNumberType = inputType === INPUT_TYPES.NUMBER;
+            var _useField = formik.useField(inputName),
+              _useField2 = _slicedToArray(_useField, 1),
+              field = _useField2[0];
+            return /*#__PURE__*/jsxRuntime.jsx("div", {
+              className: "flex-1",
+              children: /*#__PURE__*/jsxRuntime.jsx(Input, _objectSpread$1(_objectSpread$1({
+                disabled: disabled,
+                autoFocus: shouldFocus && inputIndex === 0,
+                "data-cy": "multi-option-input-".concat(optionIndex, "-").concat(inputIndex),
+                "data-testid": "multi-option-input-".concat(optionIndex, "-").concat(inputIndex)
+              }, isNumberType && {
+                min: config.min,
+                max: config.max
+              }), {}, {
+                name: inputName,
+                type: inputType,
+                value: (_field$value = field.value) !== null && _field$value !== void 0 ? _field$value : config.defaultValue,
+                placeholder: config.placeholder || "".concat(placeholder, " ").concat(inputIndex + 1),
+                onFocus: function onFocus(_ref2) {
+                  var target = _ref2.target;
+                  return target.select();
+                },
+                onBlur: function onBlur(event) {
+                  return handleInputBlur(event, {
+                    id: id,
+                    inputIndex: inputIndex,
+                    onChange: _onChange,
+                    onBlur: _onBlur,
+                    field: field,
+                    config: config
+                  });
+                },
+                onChange: function onChange(_ref3) {
+                  var target = _ref3.target;
+                  return _onChange({
+                    id: id,
+                    value: target.value,
+                    inputIndex: inputIndex
+                  });
+                },
+                onKeyDown: function onKeyDown(event) {
+                  return isNumberType ? handleNumberKeyDown(event, _onKeyDown) : _onKeyDown === null || _onKeyDown === void 0 ? void 0 : _onKeyDown(event);
+                }
+              }))
+            }, inputIndex);
+          })
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(OptionActions, {
+        arrayHelpers: arrayHelpers,
+        disabled: disabled,
+        hideCloneOption: hideCloneOption,
+        hideDeleteOption: hideDeleteOption,
+        id: id,
+        onClone: onClone,
+        onDelete: onDelete,
+        optionIndex: optionIndex
+      })]
+    })
+  }));
+});
+
 var OptionField = function OptionField(_ref) {
   var option = _ref.option,
     editable = _ref.editable,
     dragHandleProps = _ref.dragHandleProps,
     draggableProps = _ref.draggableProps,
     handleDeleteClick = _ref.handleDeleteClick,
+    handleCloneClick = _ref.handleCloneClick,
     hideDeleteOption = _ref.hideDeleteOption,
+    hideCloneOption = _ref.hideCloneOption,
     innerRef = _ref.innerRef,
     onEdit = _ref.onEdit,
     draggable = _ref.draggable,
     disabled = _ref.disabled,
     isPictureChoice = _ref.isPictureChoice,
     isTextArea = _ref.isTextArea,
+    isMultiInput = _ref.isMultiInput,
+    inputConfig = _ref.inputConfig,
     shouldFocus = _ref.shouldFocus,
     isEditable = _ref.isEditable,
     itemLabel = _ref.itemLabel,
@@ -600,19 +868,46 @@ var OptionField = function OptionField(_ref) {
       dragHandleProps: dragHandleProps,
       draggableProps: draggableProps,
       handleDeleteClick: handleDeleteClick,
+      hideCloneOption: hideCloneOption,
       hideDeleteOption: hideDeleteOption,
       innerRef: innerRef,
       onEdit: onEdit,
       optionIndex: optionIndex,
       id: option.id,
       isDraggable: draggable && !disabled,
-      label: option.label
+      label: option.label,
+      onClone: handleCloneClick
+    });
+  }
+  if (isMultiInput) {
+    return /*#__PURE__*/jsxRuntime.jsx(MultiInputOption, {
+      arrayHelpers: arrayHelpers,
+      dragHandleProps: dragHandleProps,
+      draggableProps: draggableProps,
+      hideCloneOption: hideCloneOption,
+      hideDeleteOption: hideDeleteOption,
+      innerRef: innerRef,
+      inputConfig: inputConfig,
+      name: name,
+      onBlur: onBlur,
+      option: option,
+      optionIndex: optionIndex,
+      shouldFocus: shouldFocus,
+      disabled: !isEditable || disabled,
+      id: option.id,
+      isDraggable: draggable && !disabled,
+      placeholder: generatePlaceholder(itemLabel, optionIndex),
+      onChange: handleChange,
+      onClone: handleCloneClick,
+      onDelete: handleDeleteClick,
+      onKeyDown: handleKeyDown
     });
   }
   return /*#__PURE__*/jsxRuntime.jsx(InputOption, {
     arrayHelpers: arrayHelpers,
     dragHandleProps: dragHandleProps,
     draggableProps: draggableProps,
+    hideCloneOption: hideCloneOption,
     hideDeleteOption: hideDeleteOption,
     innerRef: innerRef,
     isPictureChoice: isPictureChoice,
@@ -626,6 +921,7 @@ var OptionField = function OptionField(_ref) {
     isDraggable: draggable && !disabled,
     placeholder: generatePlaceholder(itemLabel, optionIndex),
     onChange: handleChange,
+    onClone: handleCloneClick,
     onDelete: handleDeleteClick,
     onKeyDown: handleKeyDown
   });
@@ -638,6 +934,7 @@ var OptionFields = function OptionFields(_ref) {
   var name = _ref.name,
     error = _ref.error,
     onDelete = _ref.onDelete,
+    onClone = _ref.onClone,
     onChange = _ref.onChange,
     onBlur = _ref.onBlur,
     _ref$onEdit = _ref.onEdit,
@@ -656,10 +953,16 @@ var OptionFields = function OptionFields(_ref) {
     isAddOptionEnabled = _ref$isAddOptionEnabl === void 0 ? true : _ref$isAddOptionEnabl,
     _ref$isDeleteOptionEn = _ref.isDeleteOptionEnabled,
     isDeleteOptionEnabled = _ref$isDeleteOptionEn === void 0 ? true : _ref$isDeleteOptionEn,
+    _ref$isCloneOptionEna = _ref.isCloneOptionEnabled,
+    isCloneOptionEnabled = _ref$isCloneOptionEna === void 0 ? true : _ref$isCloneOptionEna,
     _ref$isPictureChoice = _ref.isPictureChoice,
     isPictureChoice = _ref$isPictureChoice === void 0 ? false : _ref$isPictureChoice,
     _ref$isTextArea = _ref.isTextArea,
     isTextArea = _ref$isTextArea === void 0 ? false : _ref$isTextArea,
+    _ref$isMultiInput = _ref.isMultiInput,
+    isMultiInput = _ref$isMultiInput === void 0 ? false : _ref$isMultiInput,
+    _ref$inputConfig = _ref.inputConfig,
+    inputConfig = _ref$inputConfig === void 0 ? [] : _ref$inputConfig,
     _ref$shouldDestroy = _ref.shouldDestroy,
     shouldDestroy = _ref$shouldDestroy === void 0 ? false : _ref$shouldDestroy,
     _ref$destroyFlagName = _ref.destroyFlagName,
@@ -686,6 +989,7 @@ var OptionFields = function OptionFields(_ref) {
     field = _useField2[0],
     meta = _useField2[1];
   var fieldError = meta.touched ? meta.error : null;
+  var multiInputError = getMultiInputError(isMultiInput, meta);
   var options = (_field$value = field.value) !== null && _field$value !== void 0 ? _field$value : [];
   var _useOptionFields = useOptionFields({
       options: options,
@@ -697,7 +1001,9 @@ var OptionFields = function OptionFields(_ref) {
       name: name,
       isNewItemsPrefilled: isNewItemsPrefilled,
       isAddOptionEnabled: isAddOptionEnabled,
-      isPictureChoice: isPictureChoice
+      isPictureChoice: isPictureChoice,
+      isMultiInput: isMultiInput,
+      inputConfig: inputConfig
     }),
     shouldFocus = _useOptionFields.shouldFocus,
     handleAddOption = _useOptionFields.handleAddOption,
@@ -705,7 +1011,8 @@ var OptionFields = function OptionFields(_ref) {
     handleChange = _useOptionFields.handleChange,
     handleKeyDown = _useOptionFields.handleKeyDown,
     handleDelete = _useOptionFields.handleDelete,
-    handleDragEnd = _useOptionFields.handleDragEnd;
+    handleDragEnd = _useOptionFields.handleDragEnd,
+    handleClone = _useOptionFields.handleClone;
 
   // Temporarily disables the modifications to options when changed are getting saved to server
   // This condition only needed for server id generated types
@@ -717,15 +1024,20 @@ var OptionFields = function OptionFields(_ref) {
     return !deleted;
   });
   var hideDeleteOption = filteredOptions.length <= minOptions || disabled || !isDeleteOptionEnabled;
+  var hideCloneOption = disabled || !isCloneOptionEnabled;
   var optionFieldProps = {
     disabled: disabled,
     draggable: draggable,
     editable: editable,
     handleChange: handleChange,
     handleDeleteClick: onDelete !== null && onDelete !== void 0 ? onDelete : handleDelete,
+    handleCloneClick: onClone !== null && onClone !== void 0 ? onClone : handleClone,
     handleKeyDown: handleKeyDown,
     hideDeleteOption: hideDeleteOption,
+    hideCloneOption: hideCloneOption,
+    inputConfig: inputConfig,
     isEditable: isEditable,
+    isMultiInput: isMultiInput,
     isPictureChoice: isPictureChoice,
     isTextArea: isTextArea,
     itemLabel: itemLabel,
@@ -765,6 +1077,7 @@ var OptionFields = function OptionFields(_ref) {
         isDropDisabled: !draggable || disabled,
         renderClone: renderDragClone,
         children: function children(_ref3) {
+          var _ref5;
           var innerRef = _ref3.innerRef,
             droppableProps = _ref3.droppableProps,
             placeholder = _ref3.placeholder;
@@ -802,7 +1115,7 @@ var OptionFields = function OptionFields(_ref) {
                 });
               }
             }), placeholder, /*#__PURE__*/jsxRuntime.jsx(FormError, {
-              error: error !== null && error !== void 0 ? error : fieldError
+              error: (_ref5 = error !== null && error !== void 0 ? error : multiInputError) !== null && _ref5 !== void 0 ? _ref5 : fieldError
             })]
           }));
         }
@@ -818,7 +1131,7 @@ var OptionFields = function OptionFields(_ref) {
           size: "small",
           style: "link",
           onClick: handleAddOption
-        }, buttonProps)), bulkActionProps.enabled && !isPictureChoice && /*#__PURE__*/jsxRuntime.jsx(Button, {
+        }, buttonProps)), bulkActionProps.enabled && !isPictureChoice && !isMultiInput && /*#__PURE__*/jsxRuntime.jsx(Button, {
           "data-cy": "add-bulk-option-link",
           "data-testid": "add-bulk-option-link",
           disabled: !isEditable,