@bigbinary/neeto-molecules 3.15.42 → 3.15.43

package/dist/OptionFields.js

@@ -1,717 +0,0 @@
-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