@bigbinary/neeto-molecules 3.10.6 → 3.11.0

package/dist/OptionFields.js

@@ -1,106 +1,26 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useState, useRef, createElement } from 'react';
+import { useState, useRef } from 'react';
 import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
-import { findIndexById, isNotEmpty, noop, slugify } from '@bigbinary/neeto-cist';
+import { useField, FieldArray } from 'formik';
+import { isNotPresent, slugify, isNotEmpty, findIndexById, noop } from '@bigbinary/neeto-cist';
 import Plus from '@bigbinary/neeto-icons/Plus';
 import Button from '@bigbinary/neetoui/Button';
-import Typography from '@bigbinary/neetoui/Typography';
-import { reject, prop, isEmpty, assocPath, remove, move, append, pluck } from 'ramda';
+import { reject, prop, pluck, assocPath, remove, move, append } from 'ramda';
 import { useTranslation, Trans } from 'react-i18next';
+import Modal from '@bigbinary/neetoui/Modal';
+import Textarea from '@bigbinary/neetoui/Textarea';
+import Typography from '@bigbinary/neetoui/Typography';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import i18next from 'i18next';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import { withT } from '@bigbinary/neeto-commons-frontend/react-utils';
 import Delete from '@bigbinary/neeto-icons/Delete';
 import Edit from '@bigbinary/neeto-icons/Edit';
 import Drag from '@bigbinary/neeto-icons/Drag';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import Modal from '@bigbinary/neetoui/Modal';
-import Textarea from '@bigbinary/neetoui/Textarea';
-import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import i18next from 'i18next';
 import ImageUpload from '@bigbinary/neeto-icons/ImageUpload';
-import Input from '@bigbinary/neetoui/Input';
-
-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), !0).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__*/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"
-  }, props), {}, {
-    children: /*#__PURE__*/jsx(Drag, {
-      size: 16,
-      strokeWidth: 2
-    })
-  }));
-};
-
-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), !0).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 = withT(function (_ref) {
-  var t = _ref.t,
-    innerRef = _ref.innerRef,
-    _ref$hideDeleteOption = _ref.hideDeleteOption,
-    hideDeleteOption = _ref$hideDeleteOption === void 0 ? false : _ref$hideDeleteOption,
-    draggableProps = _ref.draggableProps,
-    dragHandleProps = _ref.dragHandleProps,
-    label = _ref.label,
-    index = _ref.index,
-    onEdit = _ref.onEdit,
-    handleDeleteClick = _ref.handleDeleteClick,
-    id = _ref.id;
-  return /*#__PURE__*/jsx("div", _objectSpread$3(_objectSpread$3(_objectSpread$3({
-    ref: innerRef
-  }, draggableProps), dragHandleProps), {}, {
-    children: /*#__PURE__*/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: [/*#__PURE__*/jsx(DragHandle, _objectSpread$3({}, dragHandleProps)), /*#__PURE__*/jsx(Typography, {
-        className: "flex-grow leading-4",
-        "data-cy": "address-text-field",
-        "data-testid": "address-text-field",
-        style: "body2",
-        children: label
-      }), /*#__PURE__*/jsxs("div", {
-        className: "flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100",
-        children: [/*#__PURE__*/jsx(Button, {
-          className: "neeto-ui-rounded hover:neeto-ui-bg-gray-400 p-1",
-          "data-cy": "address-field-edit-button",
-          "data-testid": "address-field-edit-button",
-          icon: Edit,
-          size: "small",
-          style: "text",
-          tooltipProps: {
-            content: t("neetoMolecules.common.actions.edit"),
-            position: "top",
-            touch: ["hold", 500]
-          },
-          onClick: function onClick() {
-            return onEdit(index);
-          }
-        }), !hideDeleteOption && /*#__PURE__*/jsx(Button, {
-          className: "neeto-ui-rounded hover:neeto-ui-bg-gray-400 p-1",
-          "data-cy": "address-field-delete-button",
-          "data-testid": "address-field-delete-button",
-          icon: Delete,
-          size: "small",
-          style: "text",
-          tooltipProps: {
-            content: t("neetoMolecules.common.actions.delete"),
-            position: "top",
-            touch: ["hold", 500]
-          },
-          onClick: function onClick() {
-            return handleDeleteClick({
-              index: index,
-              id: id
-            });
-          }
-        })]
-      })]
-    })
-  }));
-});
+import Input from '@bigbinary/neetoui/formik/Input';
+import Textarea$1 from '@bigbinary/neetoui/formik/Textarea';
 
 var BulkOptionModal = function BulkOptionModal(_ref) {
   var isOpen = _ref.isOpen,
@@ -173,24 +93,56 @@ var BulkOptionModal = function BulkOptionModal(_ref) {
 
 var DEFAULT_OPTION_LABEL = i18next.t("neetoMolecules.optionFields.defaultOption");
 
-var getOrderedVisibleOptions = function getOrderedVisibleOptions() {
+var FormError = function FormError(_ref) {
+  var error = _ref.error;
+  if (isNotPresent(error) || typeof error !== "string") return null;
+  return /*#__PURE__*/jsx(Typography, {
+    className: "neeto-ui-input__error",
+    "data-testid": "validation-error-container",
+    style: "body3",
+    children: error
+  });
+};
+
+var getOrderedOptions = function getOrderedOptions() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  return options.filter(function (option) {
-    return !option.deleted;
-  }).sort(function (a, b) {
+  return options.sort(function (a, b) {
     return a.position - b.position;
   });
 };
-var filterDeletedRecords = reject(prop("deleted"));
+var filterDeletedRecords = function filterDeletedRecords(options, destroyFlagName) {
+  return reject(prop(destroyFlagName), options);
+};
 var randomId = function randomId() {
   return Math.random().toString(36).substring(2, 13);
 };
+var getUniqueOptionId = function getUniqueOptionId(option) {
+  var _option$id, _option$position, _option$label;
+  return option.altId || ((_option$id = option.id) === null || _option$id === void 0 ? void 0 : _option$id.toString()) || ((_option$position = option.position) === null || _option$position === void 0 ? void 0 : _option$position.toString()) || slugify((_option$label = option.label) !== null && _option$label !== void 0 ? _option$label : "");
+};
+var generatePlaceholder = function generatePlaceholder(itemLabel, count) {
+  return "".concat(itemLabel, " ").concat(count + 1);
+};
+var _generateLabel = function generateLabel(itemLabel, options, count) {
+  var labelCount = count || options.length + 1;
+  var tempLabel = "".concat(itemLabel, " ").concat(labelCount);
+  var isDuplicateLabel = pluck("label", options).includes(tempLabel);
+  return isDuplicateLabel ? _generateLabel(itemLabel, options, labelCount + 1) : tempLabel;
+};
+var resolveFormikValue = function resolveFormikValue(path, values) {
+  if (!path || typeof path !== "string") {
+    return [];
+  }
+  return path.replace(/\[|\]/g, ".").split(".").filter(Boolean).reduce(function (acc, key) {
+    return acc && acc[key] !== undefined ? acc[key] : undefined;
+  }, values);
+};
 
-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), !0).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; }
+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), !0).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 attachPosition = function attachPosition(options) {
   return options.map(function (option, index) {
-    return _objectSpread$2(_objectSpread$2({}, option), {}, {
+    return _objectSpread$4(_objectSpread$4({}, option), {}, {
       position: index
     });
   });
@@ -199,8 +151,11 @@ var useOptionFields = function useOptionFields(_ref) {
   var options = _ref.options,
     onChange = _ref.onChange,
     shouldDestroy = _ref.shouldDestroy,
-    _ref$itemLabel = _ref.itemLabel,
-    itemLabel = _ref$itemLabel === void 0 ? DEFAULT_OPTION_LABEL : _ref$itemLabel;
+    itemLabel = _ref.itemLabel,
+    shouldResetEmptyOptionOnBlur = _ref.shouldResetEmptyOptionOnBlur,
+    name = _ref.name,
+    destroyFlagName = _ref.destroyFlagName,
+    isNewItemsPrefilled = _ref.isNewItemsPrefilled;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     shouldFocus = _useState2[0],
@@ -209,11 +164,20 @@ var useOptionFields = function useOptionFields(_ref) {
     id: "",
     value: ""
   });
+  var _useField = useField(name),
+    _useField2 = _slicedToArray(_useField, 3);
+    _useField2[0];
+    _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;
     // Ignores onBlur events if the value in the input field is not cleared.
     // The value will be reset to the initial value if user clicks outside after clearing the value.
-    if (isOnBlur && !isEmpty(value)) return;
+    // This can be controlled using the prop `shouldResetEmptyOptionOnBlur`.
+    if (isOnBlur && (isNotEmpty(value) || !shouldResetEmptyOptionOnBlur)) {
+      return;
+    }
     var index = findIndexById(id, options);
     if (editingOptionDetailsRef.current.id !== id) {
       editingOptionDetailsRef.current = {
@@ -224,49 +188,50 @@ var useOptionFields = function useOptionFields(_ref) {
 
     // Resets the value to initial value if the user cleared and blurred the input field.
     var valueToUpdate = isOnBlur ? editingOptionDetailsRef.current.value : value;
-    onChange(assocPath([index, "label"], valueToUpdate, options));
-  };
-  var _generateLabel = function generateLabel(opts, count) {
-    var labelCount = count || opts.length + 1;
-    var tempLabel = "".concat(itemLabel, " ").concat(labelCount);
-    var isDuplicateLabel = pluck("label", opts).includes(tempLabel);
-    return isDuplicateLabel ? _generateLabel(opts, labelCount + 1) : tempLabel;
+    var nextOptions = assocPath([index, "label"], valueToUpdate, options);
+    setValue(nextOptions);
+    onChange === null || onChange === void 0 ? void 0 : onChange(nextOptions);
   };
-  var handleDelete = function handleDelete(_, id) {
+  var handleDelete = function handleDelete(id, arrayHelpers) {
     var nextOptions;
     var indexToDelete = findIndexById(id, options);
     if (shouldDestroy) {
-      nextOptions = assocPath([indexToDelete, "deleted"], true, options);
+      nextOptions = assocPath([indexToDelete, destroyFlagName], true, options);
+      setValue(nextOptions);
     } else {
+      arrayHelpers.remove(indexToDelete);
       nextOptions = attachPosition(remove(indexToDelete, 1, options));
     }
-    onChange(nextOptions);
+    onChange === null || onChange === void 0 ? void 0 : onChange(nextOptions);
   };
   var handleDragEnd = function handleDragEnd(_ref2) {
     var source = _ref2.source,
       destination = _ref2.destination;
     // When dragged outside of draggable
     if (destination === null) return;
-    var deletedOptions = options.filter(prop("deleted"));
-    var filteredOptions = filterDeletedRecords(options);
+    var deletedOptions = options.filter(prop(destroyFlagName));
+    var filteredOptions = filterDeletedRecords(options, destroyFlagName);
     var nextOptions = move(source.index, destination.index, filteredOptions);
     var finalOptions = attachPosition(nextOptions);
-    onChange([].concat(_toConsumableArray(deletedOptions), _toConsumableArray(finalOptions)));
+    setValue([].concat(_toConsumableArray(deletedOptions), _toConsumableArray(finalOptions)));
+    onChange === null || onChange === void 0 ? void 0 : onChange([].concat(_toConsumableArray(deletedOptions), _toConsumableArray(finalOptions)));
   };
   var handleAddOption = function handleAddOption() {
     var id = randomId();
     var newOption = {
       id: "draft-".concat(id),
       altId: "alt-".concat(id),
-      label: _generateLabel(options, null),
+      label: isNewItemsPrefilled ? _generateLabel(itemLabel, options) : "",
       position: options.length
     };
     setShouldFocus(true);
-    onChange(append(newOption, options));
+    var nextOptions = append(newOption, options);
+    setValue(nextOptions);
+    onChange === null || onChange === void 0 ? void 0 : onChange(nextOptions);
   };
   var handleBulkAddOption = function handleBulkAddOption(optionsString) {
     setShouldFocus(true);
-    var position = filterDeletedRecords(options).length;
+    var position = options.length;
     var newOptions = optionsString.trim().split(/\r?\n|,/).filter(isNotEmpty).map(function (option, index) {
       return {
         id: "draft-".concat(randomId()),
@@ -275,23 +240,23 @@ var useOptionFields = function useOptionFields(_ref) {
         position: position + index
       };
     });
-    onChange([].concat(_toConsumableArray(options), _toConsumableArray(newOptions)));
+    var nextOptions = [].concat(_toConsumableArray(options), _toConsumableArray(newOptions));
+    setValue(nextOptions);
+    onChange === null || onChange === void 0 ? void 0 : onChange(nextOptions);
   };
-  var handleKeyDown = function handleKeyDown() {
-    return function (event) {
-      if (event.key !== "Enter") return;
-      var form = event.target.form;
-      var inputs = Array.from(form.querySelectorAll("input"));
-      var currentInput = inputs.indexOf(event.target);
-      if (currentInput >= inputs.length - 1) {
-        handleAddOption();
-      } else {
-        var _inputs;
-        (_inputs = inputs[currentInput + 1]) === null || _inputs === void 0 ? void 0 : _inputs.focus();
-        event.preventDefault();
-      }
-      event.stopPropagation();
-    };
+  var handleKeyDown = function handleKeyDown(event) {
+    if (event.key !== "Enter") return;
+    var form = event.target.form;
+    var inputs = Array.from(form.querySelectorAll("input"));
+    var currentInput = inputs.indexOf(event.target);
+    if (currentInput >= inputs.length - 1) {
+      handleAddOption();
+    } else {
+      var _inputs;
+      (_inputs = inputs[currentInput + 1]) === null || _inputs === void 0 ? void 0 : _inputs.focus();
+      event.preventDefault();
+    }
+    event.stopPropagation();
   };
   return {
     shouldFocus: shouldFocus,
@@ -304,6 +269,89 @@ var useOptionFields = function useOptionFields(_ref) {
   };
 };
 
+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), !0).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 DragHandle = function DragHandle(props) {
+  return /*#__PURE__*/jsx("div", _objectSpread$3(_objectSpread$3({
+    className: "neeto-ui-text-gray-500 flex h-8 flex-shrink-0 cursor-grab items-center",
+    "data-cy": "drag-handle",
+    "data-testid": "drag-handle"
+  }, props), {}, {
+    children: /*#__PURE__*/jsx(Drag, {
+      size: 16,
+      strokeWidth: 2
+    })
+  }));
+};
+
+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), !0).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 BlockOption = withT(function (_ref) {
+  var t = _ref.t,
+    innerRef = _ref.innerRef,
+    _ref$hideDeleteOption = _ref.hideDeleteOption,
+    hideDeleteOption = _ref$hideDeleteOption === void 0 ? false : _ref$hideDeleteOption,
+    draggableProps = _ref.draggableProps,
+    dragHandleProps = _ref.dragHandleProps,
+    label = _ref.label,
+    onEdit = _ref.onEdit,
+    handleDeleteClick = _ref.handleDeleteClick,
+    id = _ref.id,
+    isDraggable = _ref.isDraggable,
+    optionIndex = _ref.optionIndex,
+    arrayHelpers = _ref.arrayHelpers;
+  return /*#__PURE__*/jsx("div", _objectSpread$2(_objectSpread$2(_objectSpread$2({
+    ref: innerRef
+  }, draggableProps), dragHandleProps), {}, {
+    children: /*#__PURE__*/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__*/jsx(DragHandle, _objectSpread$2(_objectSpread$2({}, dragHandleProps), {}, {
+        "data-testid": "drag-handle-".concat(optionIndex)
+      })), /*#__PURE__*/jsx(Typography, {
+        className: "flex-grow leading-4",
+        "data-cy": "address-text-field",
+        "data-testid": "address-text-field",
+        style: "body2",
+        children: label
+      }), /*#__PURE__*/jsxs("div", {
+        className: "flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100",
+        children: [/*#__PURE__*/jsx(Button, {
+          className: "neeto-ui-rounded hover:neeto-ui-bg-gray-400 p-1",
+          "data-cy": "address-field-edit-button",
+          "data-testid": "address-field-edit-button",
+          icon: Edit,
+          size: "small",
+          style: "text",
+          tooltipProps: {
+            content: t("neetoMolecules.common.actions.edit"),
+            position: "top",
+            touch: ["hold", 500]
+          },
+          onClick: function onClick() {
+            return onEdit(id);
+          }
+        }), !hideDeleteOption && /*#__PURE__*/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);
+          }
+        })]
+      })]
+    })
+  }));
+});
+
 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), !0).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 InputOption = function InputOption(_ref) {
@@ -317,22 +365,31 @@ var InputOption = function InputOption(_ref) {
     onKeyDown = _ref.onKeyDown,
     onDelete = _ref.onDelete,
     _onChange = _ref.onChange,
-    label = _ref.label,
-    index = _ref.index,
+    optionIndex = _ref.optionIndex,
     disabled = _ref.disabled,
     isTextArea = _ref.isTextArea,
-    id = _ref.id;
+    id = _ref.id,
+    isDraggable = _ref.isDraggable,
+    name = _ref.name,
+    placeholder = _ref.placeholder,
+    _onBlur = _ref.onBlur,
+    arrayHelpers = _ref.arrayHelpers;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var Component = isTextArea ? Textarea : Input;
+  var Component = isTextArea ? Textarea$1 : Input;
+  var _useField = useField(name),
+    _useField2 = _slicedToArray(_useField, 1),
+    field = _useField2[0];
   return /*#__PURE__*/jsx("div", _objectSpread$1(_objectSpread$1({
     ref: innerRef
   }, _objectSpread$1(_objectSpread$1({}, draggableProps), dragHandleProps)), {}, {
     "data-cy": "form-block-options",
     children: /*#__PURE__*/jsxs("div", {
       className: "nf-input-options group relative mb-2 flex items-start gap-1",
-      children: [/*#__PURE__*/jsx(DragHandle, _objectSpread$1({}, dragHandleProps)), isPictureChoice && /*#__PURE__*/jsx(Fragment, {
-        children: index === 0 ? /*#__PURE__*/jsx("img", {
+      children: [isDraggable && /*#__PURE__*/jsx(DragHandle, _objectSpread$1(_objectSpread$1({}, dragHandleProps), {}, {
+        "data-testid": "drag-handle-".concat(optionIndex)
+      })), isPictureChoice && /*#__PURE__*/jsx(Fragment, {
+        children: optionIndex === 0 ? /*#__PURE__*/jsx("img", {
           className: "neeto-ui-rounded-sm h-8 w-8 cursor-pointer overflow-hidden object-cover",
           "data-testid": "picture-choice-option",
           src: "https://i.pravatar.cc/300"
@@ -344,16 +401,17 @@ var InputOption = function InputOption(_ref) {
         })
       }), /*#__PURE__*/jsx(Component, {
         disabled: disabled,
+        name: name,
+        onKeyDown: onKeyDown,
+        placeholder: placeholder,
         autoFocus: shouldFocus,
-        "data-cy": "option-input-".concat(index),
-        "data-testid": isTextArea ? "textarea-option" : "input-option",
-        placeholder: t("neetoMolecules.optionFields.optionName"),
-        value: label,
+        "data-cy": "option-input-".concat(optionIndex),
+        "data-testid": "".concat(isTextArea ? "textarea-option" : "input-option", "-").concat(optionIndex),
         suffix: !hideDeleteOption && /*#__PURE__*/jsx(Button, {
           disabled: disabled,
           className: "p-0.5",
-          "data-cy": "delete-option-button-".concat(index),
-          "data-testid": "delete-option-button",
+          "data-cy": "delete-option-button-".concat(optionIndex),
+          "data-testid": "delete-option-button-".concat(optionIndex),
           icon: Delete,
           size: "small",
           style: "text",
@@ -363,39 +421,97 @@ var InputOption = function InputOption(_ref) {
             touch: ["hold", 500]
           },
           onClick: function onClick() {
-            return onDelete({
-              index: index,
-              id: id
-            });
+            return onDelete(id, arrayHelpers);
           }
         }),
-        onBlur: function onBlur(_ref2) {
+        onChange: function onChange(_ref2) {
           var target = _ref2.target;
-          return _onChange(id, target.value, true);
-        },
-        onChange: function onChange(_ref3) {
-          var target = _ref3.target;
           return _onChange(id, target.value);
         },
-        onFocus: function onFocus(_ref4) {
-          var target = _ref4.target;
+        onFocus: function onFocus(_ref3) {
+          var target = _ref3.target;
           return target.select();
         },
-        onKeyDown: onKeyDown(index)
+        onBlur: function onBlur(event) {
+          _onChange(id, event.target.value, true);
+          _onBlur === null || _onBlur === void 0 ? 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));
+        }
       })]
     })
   }));
 };
 
+var OptionField = function OptionField(_ref) {
+  var option = _ref.option,
+    editable = _ref.editable,
+    dragHandleProps = _ref.dragHandleProps,
+    draggableProps = _ref.draggableProps,
+    handleDeleteClick = _ref.handleDeleteClick,
+    hideDeleteOption = _ref.hideDeleteOption,
+    innerRef = _ref.innerRef,
+    onEdit = _ref.onEdit,
+    draggable = _ref.draggable,
+    disabled = _ref.disabled,
+    isPictureChoice = _ref.isPictureChoice,
+    isTextArea = _ref.isTextArea,
+    shouldFocus = _ref.shouldFocus,
+    isEditable = _ref.isEditable,
+    itemLabel = _ref.itemLabel,
+    handleChange = _ref.handleChange,
+    handleKeyDown = _ref.handleKeyDown,
+    name = _ref.name,
+    optionIndex = _ref.optionIndex,
+    onBlur = _ref.onBlur,
+    arrayHelpers = _ref.arrayHelpers;
+  if (!editable) {
+    return /*#__PURE__*/jsx(BlockOption, {
+      arrayHelpers: arrayHelpers,
+      dragHandleProps: dragHandleProps,
+      draggableProps: draggableProps,
+      handleDeleteClick: handleDeleteClick,
+      hideDeleteOption: hideDeleteOption,
+      innerRef: innerRef,
+      onEdit: onEdit,
+      optionIndex: optionIndex,
+      id: option.id,
+      isDraggable: draggable && !disabled,
+      label: option.label
+    });
+  }
+  return /*#__PURE__*/jsx(InputOption, {
+    arrayHelpers: arrayHelpers,
+    dragHandleProps: dragHandleProps,
+    draggableProps: draggableProps,
+    hideDeleteOption: hideDeleteOption,
+    innerRef: innerRef,
+    isPictureChoice: isPictureChoice,
+    isTextArea: isTextArea,
+    name: name,
+    onBlur: onBlur,
+    optionIndex: optionIndex,
+    shouldFocus: shouldFocus,
+    disabled: !isEditable || disabled,
+    id: option.id,
+    isDraggable: draggable && !disabled,
+    placeholder: generatePlaceholder(itemLabel, optionIndex),
+    onChange: handleChange,
+    onDelete: handleDeleteClick,
+    onKeyDown: handleKeyDown
+  });
+};
+
 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) { _defineProperty(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; }
 var OptionFields = function OptionFields(_ref) {
-  var options = _ref.options,
+  var name = _ref.name,
     error = _ref.error,
-    onChange = _ref.onChange,
-    name = _ref.name,
     onDelete = _ref.onDelete,
-    itemLabel = _ref.itemLabel,
+    onChange = _ref.onChange,
+    onBlur = _ref.onBlur,
     _ref$onEdit = _ref.onEdit,
     onEdit = _ref$onEdit === void 0 ? noop : _ref$onEdit,
     _ref$buttonProps = _ref.buttonProps,
@@ -406,12 +522,26 @@ var OptionFields = function OptionFields(_ref) {
     draggable = _ref$draggable === void 0 ? false : _ref$draggable,
     _ref$editable = _ref.editable,
     editable = _ref$editable === void 0 ? true : _ref$editable,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$isAddOptionEnabl = _ref.isAddOptionEnabled,
+    isAddOptionEnabled = _ref$isAddOptionEnabl === void 0 ? true : _ref$isAddOptionEnabl,
+    _ref$isDeleteOptionEn = _ref.isDeleteOptionEnabled,
+    isDeleteOptionEnabled = _ref$isDeleteOptionEn === void 0 ? true : _ref$isDeleteOptionEn,
     _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$shouldDestroy = _ref.shouldDestroy,
     shouldDestroy = _ref$shouldDestroy === void 0 ? false : _ref$shouldDestroy,
+    _ref$destroyFlagName = _ref.destroyFlagName,
+    destroyFlagName = _ref$destroyFlagName === void 0 ? "deleted" : _ref$destroyFlagName,
+    _ref$shouldResetEmpty = _ref.shouldResetEmptyOptionOnBlur,
+    shouldResetEmptyOptionOnBlur = _ref$shouldResetEmpty === void 0 ? true : _ref$shouldResetEmpty,
+    _ref$isNewItemsPrefil = _ref.isNewItemsPrefilled,
+    isNewItemsPrefilled = _ref$isNewItemsPrefil === void 0 ? true : _ref$isNewItemsPrefil,
+    _ref$itemLabel = _ref.itemLabel,
+    itemLabel = _ref$itemLabel === void 0 ? DEFAULT_OPTION_LABEL : _ref$itemLabel,
     _ref$bulkActionProps = _ref.bulkActionProps,
     bulkActionProps = _ref$bulkActionProps === void 0 ? {
       enabled: false,
@@ -423,11 +553,21 @@ var OptionFields = function OptionFields(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isBulkOptionModalOpen = _useState2[0],
     setIsBulkOptionModalOpen = _useState2[1];
+  var _useField = useField(name),
+    _useField2 = _slicedToArray(_useField, 2),
+    field = _useField2[0],
+    meta = _useField2[1];
+  var fieldError = meta.touched ? meta.error : null;
+  var options = field.value;
   var _useOptionFields = useOptionFields({
       options: options,
       onChange: onChange,
       shouldDestroy: shouldDestroy,
-      itemLabel: itemLabel
+      itemLabel: itemLabel,
+      shouldResetEmptyOptionOnBlur: shouldResetEmptyOptionOnBlur,
+      destroyFlagName: destroyFlagName,
+      name: name,
+      isNewItemsPrefilled: isNewItemsPrefilled
     }),
     shouldFocus = _useOptionFields.shouldFocus,
     handleAddOption = _useOptionFields.handleAddOption,
@@ -440,20 +580,49 @@ var OptionFields = function OptionFields(_ref) {
   // Temporarily disables the modifications to options when changed are getting saved to server
   // This condition only needed for server id generated types
   var isEditable = true;
-  if (shouldDestroy) {
-    isEditable = options.every(prop("id") || error) && !options.some(prop("_destroy"));
-  }
-  var handleDeleteClick = function handleDeleteClick(_ref2) {
-    var index = _ref2.index,
-      id = _ref2.id;
-    var deleteFunction = onDelete !== null && onDelete !== void 0 ? onDelete : handleDelete;
-    deleteFunction(index, id);
+  if (shouldDestroy) isEditable = options.every(prop("id") || error);
+  var orderedOptions = getOrderedOptions(options, destroyFlagName);
+  var filteredOptions = orderedOptions.filter(function (_ref2) {
+    var deleted = _ref2[destroyFlagName];
+    return !deleted;
+  });
+  var hideDeleteOption = filteredOptions.length <= minOptions || disabled || !isDeleteOptionEnabled;
+  var optionFieldProps = {
+    disabled: disabled,
+    draggable: draggable,
+    editable: editable,
+    handleChange: handleChange,
+    handleDeleteClick: onDelete !== null && onDelete !== void 0 ? onDelete : handleDelete,
+    handleKeyDown: handleKeyDown,
+    hideDeleteOption: hideDeleteOption,
+    isEditable: isEditable,
+    isPictureChoice: isPictureChoice,
+    isTextArea: isTextArea,
+    itemLabel: itemLabel,
+    onEdit: onEdit,
+    onBlur: onBlur,
+    shouldFocus: shouldFocus
   };
-  var orderedVisibleOptions = getOrderedVisibleOptions(options);
-  var hideDeleteOption = orderedVisibleOptions.length <= minOptions;
-  var getUniqueOptionId = function getUniqueOptionId(option) {
-    var _option$id, _option$position;
-    return option.altId || ((_option$id = option.id) === null || _option$id === void 0 ? void 0 : _option$id.toString()) || ((_option$position = option.position) === null || _option$position === void 0 ? void 0 : _option$position.toString()) || slugify(option.label);
+
+  // To fix the element positioned incorrectly while dragging when in a pane or modal.
+  // https://github.com/hello-pangea/dnd/issues/560#issuecomment-1679201455
+  var renderDragClone = function renderDragClone(provided, _, rubric) {
+    var draggingIndex = rubric["source"].index;
+    var option = filteredOptions[draggingIndex];
+    var formikIndex = findIndexById(option.id, options);
+    return /*#__PURE__*/jsx(OptionField, _objectSpread(_objectSpread({}, _objectSpread(_objectSpread({}, optionFieldProps), {}, {
+      option: option
+    })), {}, {
+      dragHandleProps: provided.dragHandleProps,
+      innerRef: null,
+      name: "".concat(name, ".").concat(formikIndex, ".label"),
+      optionIndex: draggingIndex,
+      draggableProps: _objectSpread(_objectSpread({}, provided.draggableProps), {}, {
+        style: _objectSpread(_objectSpread({}, provided.draggableProps.style), {}, {
+          zIndex: 999999
+        })
+      })
+    }));
   };
   return /*#__PURE__*/jsxs("form", {
     onSubmit: function onSubmit(e) {
@@ -464,6 +633,7 @@ var OptionFields = function OptionFields(_ref) {
       children: [/*#__PURE__*/jsx(Droppable, {
         droppableId: "neeto-molecules-option-fields-".concat(name),
         isDropDisabled: !draggable,
+        renderClone: renderDragClone,
         children: function children(_ref3) {
           var innerRef = _ref3.innerRef,
             droppableProps = _ref3.droppableProps,
@@ -471,56 +641,44 @@ var OptionFields = function OptionFields(_ref) {
           return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
             ref: innerRef
           }, droppableProps), {}, {
-            children: [orderedVisibleOptions.map(function (option, index) {
-              return /*#__PURE__*/createElement(Draggable, {
-                index: index,
-                dataKey: getUniqueOptionId(option),
-                draggableId: getUniqueOptionId(option),
-                isDragDisabled: !draggable,
-                key: getUniqueOptionId(option)
-              }, function (_ref4) {
-                var innerRef = _ref4.innerRef,
-                  draggableProps = _ref4.draggableProps,
-                  dragHandleProps = _ref4.dragHandleProps;
-                return editable ? /*#__PURE__*/jsx(InputOption, {
-                  dragHandleProps: dragHandleProps,
-                  draggableProps: draggableProps,
-                  hideDeleteOption: hideDeleteOption,
-                  index: index,
-                  innerRef: innerRef,
-                  isPictureChoice: isPictureChoice,
-                  isTextArea: isTextArea,
-                  name: name,
-                  shouldFocus: shouldFocus,
-                  disabled: !isEditable,
-                  id: option.id,
-                  label: option.label,
-                  onChange: handleChange,
-                  onDelete: handleDeleteClick,
-                  onKeyDown: handleKeyDown
-                }) : /*#__PURE__*/jsx(BlockOption, {
-                  dragHandleProps: dragHandleProps,
-                  draggableProps: draggableProps,
-                  handleDeleteClick: handleDeleteClick,
-                  hideDeleteOption: hideDeleteOption,
-                  index: index,
-                  innerRef: innerRef,
-                  onEdit: onEdit,
-                  id: option.id,
-                  label: option.label
+            children: [/*#__PURE__*/jsx(FieldArray, {
+              name: name,
+              children: function children(arrayHelpers) {
+                var options = resolveFormikValue(name, arrayHelpers.form.values);
+                return options === null || options === void 0 ? void 0 : options.map(function (option, index) {
+                  if (option !== null && option !== void 0 && option[destroyFlagName]) return null;
+                  var optionIndex = findIndexById(option.id, filteredOptions);
+                  return /*#__PURE__*/jsx(Draggable, {
+                    dataKey: getUniqueOptionId(option),
+                    draggableId: getUniqueOptionId(option),
+                    index: optionIndex,
+                    isDragDisabled: !draggable,
+                    children: function children(_ref4) {
+                      var innerRef = _ref4.innerRef,
+                        draggableProps = _ref4.draggableProps,
+                        dragHandleProps = _ref4.dragHandleProps;
+                      return /*#__PURE__*/jsx(OptionField, _objectSpread(_objectSpread({}, _objectSpread(_objectSpread({}, optionFieldProps), {}, {
+                        arrayHelpers: arrayHelpers,
+                        dragHandleProps: dragHandleProps,
+                        draggableProps: draggableProps,
+                        innerRef: innerRef,
+                        option: option,
+                        optionIndex: optionIndex
+                      })), {}, {
+                        name: "".concat(name, ".").concat(index, ".label")
+                      }));
+                    }
+                  }, getUniqueOptionId(option));
                 });
-              });
-            }), error && /*#__PURE__*/jsx(Typography, {
-              className: "neeto-ui-input__error",
-              "data-testid": "validation-error-container",
-              style: "body3",
-              children: error
-            }), placeholder]
+              }
+            }), placeholder, /*#__PURE__*/jsx(FormError, {
+              error: error !== null && error !== void 0 ? error : fieldError
+            })]
           }));
         }
       }), /*#__PURE__*/jsxs("div", {
         className: "mt-4 flex items-center justify-between",
-        children: [/*#__PURE__*/jsx(Button, _objectSpread({
+        children: [isAddOptionEnabled && /*#__PURE__*/jsx(Button, _objectSpread({
           "data-cy": "add-option-link",
           "data-testid": "add-option-link",
           disabled: !isEditable,