@bigbinary/neeto-molecules 3.15.43 → 3.15.45

package/dist/OptionFields.js

@@ -0,0 +1,717 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useState, useRef } from 'react';
+import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
+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 { 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 ImageUpload from '@bigbinary/neeto-icons/ImageUpload';
+import Input from '@bigbinary/neetoui/formik/Input';
+import Textarea$1 from '@bigbinary/neetoui/formik/Textarea';
+
+var BulkOptionModal = function BulkOptionModal(_ref) {
+  var isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    handleBulkAdd = _ref.handleBulkAdd,
+    bulkAddHelpDocUrl = _ref.bulkAddHelpDocUrl;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    optionsString = _useState2[0],
+    setOptionsString = _useState2[1];
+  var handleSave = function handleSave() {
+    handleBulkAdd(optionsString);
+    handleClose();
+  };
+  var handleClose = function handleClose() {
+    setOptionsString("");
+    onClose();
+  };
+  return /*#__PURE__*/jsxs(Modal, {
+    isOpen: isOpen,
+    onClose: handleClose,
+    children: [/*#__PURE__*/jsx(Modal.Header, {
+      children: /*#__PURE__*/jsx(Typography, {
+        style: "h3",
+        children: t("neetoMolecules.optionFields.bulkOption.title")
+      })
+    }), /*#__PURE__*/jsx(Modal.Body, {
+      children: /*#__PURE__*/jsx(Textarea, {
+        className: "my-2",
+        "data-cy": "bulk-add-options-textarea",
+        "data-testid": "bulk-add-options-textarea",
+        label: t("neetoMolecules.optionFields.bulkOption.label"),
+        placeholder: t("neetoMolecules.optionFields.bulkOption.label"),
+        rows: 8,
+        value: optionsString,
+        helpText: /*#__PURE__*/jsx(Trans, {
+          i18nKey: "neetoMolecules.optionFields.bulkOption.helpText",
+          components: {
+            Link: /*#__PURE__*/jsx(Button, {
+              className: "text-xs",
+              href: bulkAddHelpDocUrl,
+              style: "link",
+              target: "_blank"
+            })
+          }
+        }),
+        onChange: function onChange(e) {
+          return setOptionsString(e.target.value);
+        }
+      })
+    }), /*#__PURE__*/jsxs(Modal.Footer, {
+      className: "gap-x-2",
+      children: [/*#__PURE__*/jsx(Button, {
+        "data-cy": "bulk-add-options-done-button",
+        "data-testid": "bulk-add-options-done-button",
+        label: t("neetoMolecules.common.actions.submit"),
+        onClick: handleSave
+      }), /*#__PURE__*/jsx(Button, {
+        "data-cy": "bulk-add-options-cancel-button",
+        "data-testid": "bulk-add-options-cancel-button",
+        label: t("neetoMolecules.common.actions.cancel"),
+        style: "text",
+        onClick: handleClose
+      })]
+    })]
+  });
+};
+
+var DEFAULT_OPTION_LABEL = i18next.t("neetoMolecules.optionFields.defaultOption");
+
+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.sort(function (a, b) {
+    return a.position - b.position;
+  });
+};
+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$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$4(_objectSpread$4({}, option), {}, {
+      position: index
+    });
+  });
+};
+var useOptionFields = function useOptionFields(_ref) {
+  var options = _ref.options,
+    onChange = _ref.onChange,
+    shouldDestroy = _ref.shouldDestroy,
+    itemLabel = _ref.itemLabel,
+    shouldResetEmptyOptionOnBlur = _ref.shouldResetEmptyOptionOnBlur,
+    name = _ref.name,
+    destroyFlagName = _ref.destroyFlagName,
+    isNewItemsPrefilled = _ref.isNewItemsPrefilled,
+    isAddOptionEnabled = _ref.isAddOptionEnabled;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    shouldFocus = _useState2[0],
+    setShouldFocus = _useState2[1];
+  var editingOptionDetailsRef = useRef({
+    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.
+    // 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 = {
+        id: id,
+        value: options[index].label
+      };
+    }
+
+    // Resets the value to initial value if the user cleared and blurred the input field.
+    var valueToUpdate = isOnBlur ? editingOptionDetailsRef.current.value : value;
+    var nextOptions = assocPath([index, "label"], valueToUpdate, options);
+    setValue(nextOptions);
+    onChange === null || onChange === void 0 || onChange(nextOptions);
+  };
+  var handleDelete = function handleDelete(id, arrayHelpers) {
+    var nextOptions;
+    var indexToDelete = findIndexById(id, options);
+    if (shouldDestroy) {
+      nextOptions = assocPath([indexToDelete, destroyFlagName], true, options);
+      setValue(nextOptions);
+    } else {
+      arrayHelpers.remove(indexToDelete);
+      nextOptions = attachPosition(remove(indexToDelete, 1, options));
+    }
+    onChange === null || onChange === 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(destroyFlagName));
+    var filteredOptions = filterDeletedRecords(options, destroyFlagName);
+    var nextOptions = 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)));
+  };
+  var handleAddOption = function handleAddOption() {
+    var id = randomId();
+    var newOption = {
+      id: "draft-".concat(id),
+      altId: "alt-".concat(id),
+      label: isNewItemsPrefilled ? _generateLabel(itemLabel, options) : "",
+      position: options.length
+    };
+    setShouldFocus(true);
+    var nextOptions = append(newOption, options);
+    setValue(nextOptions);
+    onChange === null || onChange === void 0 || onChange(nextOptions);
+  };
+  var handleBulkAddOption = function handleBulkAddOption(optionsString) {
+    setShouldFocus(true);
+    var position = options.length;
+    var newOptions = optionsString.trim().split(/\r?\n|,/).filter(isNotEmpty).map(function (option, index) {
+      return {
+        id: "draft-".concat(randomId()),
+        altId: "alt-".concat(randomId()),
+        label: option.trim(),
+        position: position + index
+      };
+    });
+    var nextOptions = [].concat(_toConsumableArray(options), _toConsumableArray(newOptions));
+    setValue(nextOptions);
+    onChange === null || onChange === void 0 || onChange(nextOptions);
+  };
+  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) {
+      isAddOptionEnabled && handleAddOption();
+    } else {
+      var _inputs;
+      (_inputs = inputs[currentInput + 1]) === null || _inputs === void 0 || _inputs.focus();
+      event.preventDefault();
+    }
+    event.stopPropagation();
+  };
+  return {
+    shouldFocus: shouldFocus,
+    handleAddOption: handleAddOption,
+    handleBulkAddOption: handleBulkAddOption,
+    handleChange: handleChange,
+    handleKeyDown: handleKeyDown,
+    handleDelete: handleDelete,
+    handleDragEnd: handleDragEnd
+  };
+};
+
+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) {
+  var shouldFocus = _ref.shouldFocus,
+    _ref$hideDeleteOption = _ref.hideDeleteOption,
+    hideDeleteOption = _ref$hideDeleteOption === void 0 ? false : _ref$hideDeleteOption,
+    innerRef = _ref.innerRef,
+    draggableProps = _ref.draggableProps,
+    dragHandleProps = _ref.dragHandleProps,
+    isPictureChoice = _ref.isPictureChoice,
+    onKeyDown = _ref.onKeyDown,
+    onDelete = _ref.onDelete,
+    _onChange = _ref.onChange,
+    optionIndex = _ref.optionIndex,
+    disabled = _ref.disabled,
+    isTextArea = _ref.isTextArea,
+    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$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: [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"
+        }) : /*#__PURE__*/jsx("div", {
+          className: "hover:neeto-ui-bg-gray-100 neeto-ui-border-primary-600 neeto-ui-text-primary-800 neeto-ui-rounded-sm flex h-8 w-8 cursor-pointer items-center justify-center border border-dashed transition-all duration-300 ease-in-out",
+          children: /*#__PURE__*/jsx(ImageUpload, {
+            size: 16
+          })
+        })
+      }), /*#__PURE__*/jsx(Component, {
+        disabled: disabled,
+        name: name,
+        onKeyDown: onKeyDown,
+        placeholder: placeholder,
+        autoFocus: shouldFocus,
+        "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(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);
+          }
+        }),
+        onChange: function onChange(_ref2) {
+          var target = _ref2.target;
+          return _onChange(id, target.value);
+        },
+        onFocus: function onFocus(_ref3) {
+          var target = _ref3.target;
+          return target.select();
+        },
+        onBlur: function onBlur(event) {
+          _onChange(id, event.target.value, 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));
+        }
+      })]
+    })
+  }));
+};
+
+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 name = _ref.name,
+    error = _ref.error,
+    onDelete = _ref.onDelete,
+    onChange = _ref.onChange,
+    onBlur = _ref.onBlur,
+    _ref$onEdit = _ref.onEdit,
+    onEdit = _ref$onEdit === void 0 ? noop : _ref$onEdit,
+    _ref$buttonProps = _ref.buttonProps,
+    buttonProps = _ref$buttonProps === void 0 ? {} : _ref$buttonProps,
+    _ref$minOptions = _ref.minOptions,
+    minOptions = _ref$minOptions === void 0 ? 0 : _ref$minOptions,
+    _ref$draggable = _ref.draggable,
+    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,
+      bulkAddHelpDocUrl: ""
+    } : _ref$bulkActionProps;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = useState(false),
+    _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,
+      shouldResetEmptyOptionOnBlur: shouldResetEmptyOptionOnBlur,
+      destroyFlagName: destroyFlagName,
+      name: name,
+      isNewItemsPrefilled: isNewItemsPrefilled,
+      isAddOptionEnabled: isAddOptionEnabled
+    }),
+    shouldFocus = _useOptionFields.shouldFocus,
+    handleAddOption = _useOptionFields.handleAddOption,
+    handleBulkAddOption = _useOptionFields.handleBulkAddOption,
+    handleChange = _useOptionFields.handleChange,
+    handleKeyDown = _useOptionFields.handleKeyDown,
+    handleDelete = _useOptionFields.handleDelete,
+    handleDragEnd = _useOptionFields.handleDragEnd;
+
+  // 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);
+  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
+  };
+
+  // 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) {
+      return e.preventDefault();
+    },
+    children: [/*#__PURE__*/jsxs(DragDropContext, {
+      onDragEnd: handleDragEnd,
+      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,
+            placeholder = _ref3.placeholder;
+          return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
+            ref: innerRef
+          }, droppableProps), {}, {
+            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));
+                });
+              }
+            }), placeholder, /*#__PURE__*/jsx(FormError, {
+              error: error !== null && error !== void 0 ? error : fieldError
+            })]
+          }));
+        }
+      }), /*#__PURE__*/jsxs("div", {
+        className: "mt-4 flex items-center justify-between",
+        children: [isAddOptionEnabled && /*#__PURE__*/jsx(Button, _objectSpread({
+          "data-cy": "add-option-link",
+          "data-testid": "add-option-link",
+          disabled: !isEditable,
+          icon: Plus,
+          iconPosition: "left",
+          label: t("neetoMolecules.optionFields.addOption"),
+          size: "small",
+          style: "link",
+          onClick: handleAddOption
+        }, buttonProps)), bulkActionProps.enabled && /*#__PURE__*/jsx(Button, {
+          "data-cy": "add-bulk-option-link",
+          "data-testid": "add-bulk-option-link",
+          disabled: !isEditable,
+          label: t("neetoMolecules.optionFields.addBulk"),
+          size: "small",
+          style: "text",
+          onClick: function onClick() {
+            return setIsBulkOptionModalOpen(true);
+          }
+        })]
+      })]
+    }), /*#__PURE__*/jsx(BulkOptionModal, {
+      bulkAddHelpDocUrl: bulkActionProps.bulkAddHelpDocUrl,
+      handleBulkAdd: handleBulkAddOption,
+      isOpen: isBulkOptionModalOpen,
+      onClose: function onClose() {
+        return setIsBulkOptionModalOpen(false);
+      }
+    })]
+  });
+};
+
+export { OptionFields as default };
+//# sourceMappingURL=OptionFields.js.map