ketcher-react 3.7.0-rc.1 → 3.7.0-rc.2

package/dist/cjs/index.js

@@ -344,6 +344,16 @@ function _isNativeReflectConstruct$g() { try { var t = !Boolean.prototype.valueO
 var ieCb = typeof window !== 'undefined' ? window.clipboardData : {};
 var CLIP_AREA_BASE_CLASS = 'cliparea';
 var needSkipCopyEvent = false;
+var isUserEditing = function isUserEditing() {
+  var el = document.activeElement;
+  if (!el) {
+    return false;
+  }
+  if (el.hasAttribute && el.hasAttribute('data-cliparea')) {
+    return false;
+  }
+  return Boolean(el.tagName === 'TEXTAREA' || el.tagName === 'INPUT' && el.type !== 'button' && el.type !== 'submit' && el.type !== 'reset' || el.contentEditable === 'true');
+};
 var ClipArea = function (_Component) {
   _inherits__default["default"](ClipArea, _Component);
   function ClipArea(props) {
@@ -369,7 +379,7 @@ var ClipArea = function (_Component) {
           if (event.shiftKey && !isActiveElement(event.target)) event.preventDefault();
         },
         copy: function copy(event) {
-          if (!_this2.props.focused()) {
+          if (!_this2.props.focused() || isUserEditing()) {
             return;
           }
           if (ketcherCore.isClipboardAPIAvailable()) {
@@ -406,7 +416,7 @@ var ClipArea = function (_Component) {
             return _regeneratorRuntime__default["default"].wrap(function _callee$(_context) {
               while (1) switch (_context.prev = _context.next) {
                 case 0:
-                  if (_this2.props.focused()) {
+                  if (!(!_this2.props.focused() || isUserEditing())) {
                     _context.next = 2;
                     break;
                   }
@@ -441,7 +451,7 @@ var ClipArea = function (_Component) {
           return cut;
         }(),
         paste: function paste(event) {
-          if (!_this2.props.focused()) {
+          if (!_this2.props.focused() || isUserEditing()) {
             return;
           }
           if (ketcherCore.isClipboardAPIAvailable()) {
@@ -532,6 +542,7 @@ var ClipArea = function (_Component) {
       return jsxRuntime.jsx("textarea", {
         ref: this.textAreaRef,
         className: clsx__default["default"](CLIP_AREA_BASE_CLASS, classes$Q.cliparea),
+        "data-cliparea": true,
         contentEditable: true,
         autoFocus: true
         ,
@@ -3840,7 +3851,7 @@ var zoom = {
 
 var openHelpLink = function openHelpLink() {
   var _window$open;
-  return (_window$open = window.open("https://github.com/epam/ketcher/blob/".concat("v3.7.0-rc.1\n", "/documentation/help.md#ketcher-overview"))) === null || _window$open === void 0 ? void 0 : _window$open.focus();
+  return (_window$open = window.open("https://github.com/epam/ketcher/blob/".concat("v3.7.0-rc.2\n", "/documentation/help.md#ketcher-overview"))) === null || _window$open === void 0 ? void 0 : _window$open.focus();
 };
 var help = {
   help: {
@@ -3867,8 +3878,6 @@ var STRUCT_TYPE = {
 };
 var KETCHER_ROOT_NODE_CLASS_NAME = 'Ketcher-root';
 var KETCHER_ROOT_NODE_CSS_SELECTOR = ".".concat(KETCHER_ROOT_NODE_CLASS_NAME);
-var EditorClassName = 'Ketcher-polymer-editor-root';
-var KETCHER_MACROMOLECULES_ROOT_NODE_SELECTOR = ".".concat(EditorClassName);
 var STRUCT_SERVICE_NO_RENDER_INITIALIZED_EVENT = 'struct-service-no-render-initialized';
 var STRUCT_SERVICE_INITIALIZED_EVENT = 'struct-service-initialized';
 var ACS_STYLE_DEFAULT_SETTINGS = {
@@ -3948,6 +3957,9 @@ var disableIfViewOnly = function disableIfViewOnly(editor) {
 var disableIfMonomerCreationWizardActive = function disableIfMonomerCreationWizardActive(editor) {
   return editor.isMonomerCreationWizardActive;
 };
+var combinedDisable = function combinedDisable(editor) {
+  return disableIfViewOnly(editor) || disableIfMonomerCreationWizardActive(editor);
+};
 var updateConfigItem = function updateConfigItem(item) {
   if (typeof item.disabled === 'boolean' || item.enabledInViewOnly === true) {
     return item;
@@ -3960,7 +3972,7 @@ var updateConfigItem = function updateConfigItem(item) {
     });
   } else {
     return _objectSpread$1p(_objectSpread$1p({}, item), {}, {
-      disabled: disableIfViewOnly || disableIfMonomerCreationWizardActive
+      disabled: combinedDisable
     });
   }
 };
@@ -13432,7 +13444,7 @@ assert.strict.strict = assert.strict;
 var calculateMonomerPreviewTop = createCalculatePreviewTopFunction(preview.height);
 var calculateNucleoElementPreviewTop = createCalculatePreviewTopFunction(preview.heightForNucleotide);
 function calculateTop(target, height) {
-  var ketcherEditorRoot = document.querySelector(KETCHER_MACROMOLECULES_ROOT_NODE_SELECTOR);
+  var ketcherEditorRoot = document.querySelector(ketcherCore.KETCHER_MACROMOLECULES_ROOT_NODE_SELECTOR);
   var ketcherEditorRootBoundingClientRect = ketcherEditorRoot === null || ketcherEditorRoot === void 0 ? void 0 : ketcherEditorRoot.getBoundingClientRect();
   var relativeTargetTop = target.top - ((ketcherEditorRootBoundingClientRect === null || ketcherEditorRootBoundingClientRect === void 0 ? void 0 : ketcherEditorRootBoundingClientRect.top) || 0);
   var relativeTargetBottom = target.bottom - ((ketcherEditorRootBoundingClientRect === null || ketcherEditorRootBoundingClientRect === void 0 ? void 0 : ketcherEditorRootBoundingClientRect.top) || 0);
@@ -13771,9 +13783,11 @@ function usePortalOpening(_ref) {
 }
 
 function usePortalStyle(_ref) {
-  var _ref2 = _slicedToArray__default["default"](_ref, 2),
+  var _ref2 = _slicedToArray__default["default"](_ref, 4),
     ref = _ref2[0],
-    isOpen = _ref2[1];
+    isOpen = _ref2[1],
+    isTop = _ref2[2],
+    rootElementSelector = _ref2[3];
   var _useState = React.useState({}),
     _useState2 = _slicedToArray__default["default"](_useState, 2),
     portalStyle = _useState2[0],
@@ -13783,19 +13797,20 @@ function usePortalStyle(_ref) {
     if (!ref.current) {
       return;
     }
-    var editorRect = ((_document$querySelect = document.querySelector(KETCHER_ROOT_NODE_CSS_SELECTOR)) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.getBoundingClientRect()) || {
+    var editorRect = ((_document$querySelect = document.querySelector(rootElementSelector || KETCHER_ROOT_NODE_CSS_SELECTOR)) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.getBoundingClientRect()) || {
       top: 0,
       left: 0
     };
     var menuItemRect = ref.current.getBoundingClientRect();
-    var top = menuItemRect.top - editorRect.top;
     var spaceBetween = 4;
-    var left = menuItemRect.left - editorRect.left + menuItemRect.width + spaceBetween;
+    var alignmentOffset = 2;
+    var top = menuItemRect.top - editorRect.top + (isTop ? spaceBetween + menuItemRect.height : 0) - (isTop ? 0 : alignmentOffset);
+    var left = menuItemRect.left - editorRect.left + (isTop ? 0 : spaceBetween + menuItemRect.width) - (isTop ? alignmentOffset : 0);
     setPortalStyle({
       top: "".concat(top, "px"),
       left: "".concat(left, "px")
     });
-  }, [ref, isOpen]);
+  }, [ref, isOpen, isTop, rootElementSelector]);
   return [portalStyle];
 }
 
@@ -15135,7 +15150,7 @@ var selectOptions$2 = makeItems(['select-rectangle', 'select-lasso', 'select-fra
 var arrowsOptions = makeItems(['reaction-arrow-open-angle', 'reaction-arrow-filled-triangle', 'reaction-arrow-filled-bow', 'reaction-arrow-dashed-open-angle', 'reaction-arrow-failed', 'reaction-arrow-retrosynthetic', 'reaction-arrow-both-ends-filled-triangle', 'reaction-arrow-equilibrium-filled-half-bow', 'reaction-arrow-equilibrium-filled-triangle', 'reaction-arrow-equilibrium-open-angle', 'reaction-arrow-unbalanced-equilibrium-filled-half-bow', 'reaction-arrow-unbalanced-equilibrium-open-half-angle', 'reaction-arrow-unbalanced-equilibrium-large-filled-half-bow', 'reaction-arrow-unbalanced-equilibrium-filled-half-triangle', 'reaction-arrow-elliptical-arc-arrow-filled-bow', 'reaction-arrow-elliptical-arc-arrow-filled-triangle', 'reaction-arrow-elliptical-arc-arrow-open-angle', 'reaction-arrow-elliptical-arc-arrow-open-half-angle', ketcherCore.MULTITAIL_ARROW_TOOL_NAME]);
 var mappingOptions = makeItems(['reaction-map', 'reaction-unmap', 'reaction-automap']);
 
-var classes$L = {"scroll":"ArrowScroll-module_scroll__h9kCx","button":"ArrowScroll-module_button__ygMgL","down":"ArrowScroll-module_down__yDzZX","up":"ArrowScroll-module_up__Q1ubd"};
+var classes$L = {"scroll":"ArrowScroll-module_scroll__h9kCx","upDown":"ArrowScroll-module_upDown__zT-Uf","button":"ArrowScroll-module_button__ygMgL","down":"ArrowScroll-module_down__yDzZX","up":"ArrowScroll-module_up__Q1ubd","left":"ArrowScroll-module_left__ND2ZB","right":"ArrowScroll-module_right__A3fNm"};
 
 function useSettingsContext() {
   return React__default["default"].useContext(settingsContext);
@@ -15230,8 +15245,9 @@ var useSubscriptionOnEvents = function useSubscriptionOnEvents() {
 var ArrowScroll = function ArrowScroll(_ref) {
   var startInView = _ref.startInView,
     endInView = _ref.endInView,
-    scrollUp = _ref.scrollUp,
-    scrollDown = _ref.scrollDown;
+    scrollForward = _ref.scrollForward,
+    scrollBack = _ref.scrollBack,
+    isLeftRight = _ref.isLeftRight;
   var _useState = React.useState(false),
     _useState2 = _slicedToArray__default["default"](_useState, 2),
     isScrollDown = _useState2[0],
@@ -15240,8 +15256,8 @@ var ArrowScroll = function ArrowScroll(_ref) {
     _useState4 = _slicedToArray__default["default"](_useState3, 2),
     isScrollUp = _useState4[0],
     setScrollUp = _useState4[1];
-  useInterval(scrollDown, isScrollDown ? 100 : null);
-  useInterval(scrollUp, isScrollUp ? 100 : null);
+  useInterval(scrollBack, isScrollDown ? 100 : null);
+  useInterval(scrollForward, isScrollUp ? 100 : null);
   React.useEffect(function () {
     return function () {
       setScrollUp(false);
@@ -15253,31 +15269,27 @@ var ArrowScroll = function ArrowScroll(_ref) {
     };
   }, [endInView]);
   return jsxRuntime.jsxs("div", {
-    className: classes$L.scroll,
+    className: [classes$L.scroll, isLeftRight ? classes$L.leftRight : classes$L.upDown].join(' '),
     children: [endInView ? jsxRuntime.jsx(jsxRuntime.Fragment, {}) : jsxRuntime.jsx("button", {
-      onClick: function onClick() {
-        return scrollDown();
-      },
+      onClick: scrollForward,
       onMouseUp: function onMouseUp() {
         return setScrollDown(false);
       },
       onMouseDown: function onMouseDown() {
         return setScrollDown(true);
       },
-      className: clsx__default["default"](classes$L.button, classes$L.down),
-      children: "\u25BC"
+      className: clsx__default["default"](classes$L.button, isLeftRight ? classes$L.right : classes$L.down),
+      children: isLeftRight ? '►' : '▼'
     }), startInView ? jsxRuntime.jsx(jsxRuntime.Fragment, {}) : jsxRuntime.jsx("button", {
-      onClick: function onClick() {
-        return scrollUp();
-      },
+      onClick: scrollBack,
       onMouseUp: function onMouseUp() {
         return setScrollUp(false);
       },
       onMouseDown: function onMouseDown() {
         return setScrollUp(true);
       },
-      className: clsx__default["default"](classes$L.button, classes$L.up),
-      children: "\u25B2"
+      className: clsx__default["default"](classes$L.button, isLeftRight ? classes$L.left : classes$L.up),
+      children: isLeftRight ? '◄' : '▲'
     })]
   });
 };
@@ -15511,8 +15523,8 @@ var LeftToolbar = function LeftToolbar(props) {
     }), height && (scrollRef === null || scrollRef === void 0 || (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollHeight) > height && jsxRuntime.jsx(ArrowScroll, {
       startInView: startInView,
       endInView: endInView,
-      scrollUp: scrollUp,
-      scrollDown: scrollDown
+      scrollForward: scrollDown,
+      scrollBack: scrollUp
     })]
   });
 };
@@ -15715,8 +15727,8 @@ var RightToolbar = function RightToolbar(props) {
     }), height && (scrollRef === null || scrollRef === void 0 || (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollHeight) > height && jsxRuntime.jsx(ArrowScroll, {
       startInView: startInView,
       endInView: endInView,
-      scrollUp: scrollUp,
-      scrollDown: scrollDown
+      scrollForward: scrollDown,
+      scrollBack: scrollUp
     })]
   });
 };
@@ -16073,7 +16085,7 @@ var ZoomControls = function ZoomControls(_ref) {
       open: isExpanded,
       onClose: onClose,
       anchorEl: containerRef.current,
-      container: document.querySelector(KETCHER_ROOT_NODE_CSS_SELECTOR) || document.querySelector(KETCHER_MACROMOLECULES_ROOT_NODE_SELECTOR),
+      container: document.querySelector(KETCHER_ROOT_NODE_CSS_SELECTOR) || document.querySelector(ketcherCore.KETCHER_MACROMOLECULES_ROOT_NODE_SELECTOR),
       anchorOrigin: {
         vertical: 'bottom',
         horizontal: 'left'
@@ -24136,6 +24148,10 @@ var CreateMonomerTool = function () {
     value: function cancel() {
       this.editor.closeMonomerCreationWizard();
     }
+  }, {
+    key: "mousemove",
+    value: function mousemove() {
+    }
   }]);
   return CreateMonomerTool;
 }();
@@ -25365,13 +25381,27 @@ var Editor$3 = function () {
   }, {
     key: "isMonomerCreationWizardEnabled",
     get: function get() {
-      var _selection$atoms, _selection$bonds;
+      var _selection$atoms,
+        _selection$bonds,
+        _this = this;
       if (this._monomerCreationState) {
         return true;
       }
-      var selection = this.explicitSelected();
+      var selection = this.explicitSelected(false);
       if (selection && (_selection$atoms = selection.atoms) !== null && _selection$atoms !== void 0 && _selection$atoms.length && (_selection$bonds = selection.bonds) !== null && _selection$bonds !== void 0 && _selection$bonds.length) {
         var currentStruct = this.render.ctab.molecule;
+        var selectionInvalid = selection.atoms.some(function (atomId) {
+          var atom = _this.render.ctab.molecule.atoms.get(atomId);
+          if (!atom) {
+            return false;
+          }
+          return atom.sgs.size > 0 || ketcherCore.genericsList.includes(atom.label) || _this.render.ctab.molecule.rgroups.some(function (rgroup) {
+            return rgroup.frags.has(atom.fragment);
+          });
+        });
+        if (selectionInvalid) {
+          return false;
+        }
         var isSelectionContinuous = Editor.isSelectionContinuous(selection, currentStruct);
         if (!isSelectionContinuous) {
           return false;
@@ -25380,9 +25410,12 @@ var Editor$3 = function () {
         var bondsToOutside = currentStruct.bonds.filter(function (_, bond) {
           return selectionAtoms.has(bond.begin) && !selectionAtoms.has(bond.end) || selectionAtoms.has(bond.end) && !selectionAtoms.has(bond.begin);
         });
-        this.singleBondsToOutsideOfSelection = bondsToOutside.filter(function (_, bond) {
-          return bond.type === ketcherCore.Bond.PATTERN.TYPE.SINGLE;
-        });
+        if (bondsToOutside.some(function (bond) {
+          return bond.type !== ketcherCore.Bond.PATTERN.TYPE.SINGLE;
+        })) {
+          return false;
+        }
+        this.singleBondsToOutsideOfSelection = bondsToOutside;
         return this.singleBondsToOutsideOfSelection.size > 0 && this.singleBondsToOutsideOfSelection.size <= 8;
       }
       return false;
@@ -25391,7 +25424,7 @@ var Editor$3 = function () {
     key: "openMonomerCreationWizard",
     value: function openMonomerCreationWizard() {
       var _selection$atoms2,
-        _this = this;
+        _this2 = this;
       var currentStruct = this.render.ctab.molecule;
       var selection = this.explicitSelected();
       this.originalSelection = selection;
@@ -25403,7 +25436,7 @@ var Editor$3 = function () {
         return a - b;
       }).forEach(function (atomId, i) {
         atomIdsMap.set(atomId, i);
-        _this.atomIdsMap.set(i, atomId);
+        _this2.atomIdsMap.set(i, atomId);
       });
       var attachmentPoints = new Map();
       this.singleBondsToOutsideOfSelection.forEach(function (bond) {
@@ -25415,7 +25448,7 @@ var Editor$3 = function () {
           pp: leavingAtom === null || leavingAtom === void 0 ? void 0 : leavingAtom.pp
         });
         var newLeavingAtomId = selectedStruct.atoms.add(newLeavingAtom);
-        _this.atomIdsMap.set(newLeavingAtomId, leavingAtomId);
+        _this2.atomIdsMap.set(newLeavingAtomId, leavingAtomId);
         var bondEdgeForAttachmentAtom = bondEdgeForLeavingAtom === 'end' ? 'begin' : 'end';
         var attachmentAtomId = bond[bondEdgeForAttachmentAtom];
         var attachmentAtomIdInSelectedStruct = atomIdsMap.get(attachmentAtomId);
@@ -25429,10 +25462,10 @@ var Editor$3 = function () {
         });
         selectedStruct.bonds.add(newBond);
         attachmentPoints.set(attachmentAtomIdInSelectedStruct, newLeavingAtomId);
-        _this.atomIdsMap.set(attachmentAtomIdInSelectedStruct, attachmentAtomId);
+        _this2.atomIdsMap.set(attachmentAtomIdInSelectedStruct, attachmentAtomId);
       });
       this._monomerCreationState = {
-        originalStruct: currentStruct.clone(),
+        originalStruct: currentStruct,
         attachmentAtomIdToLeavingAtomId: attachmentPoints
       };
       this.render.monomerCreationRenderState = {
@@ -25454,6 +25487,8 @@ var Editor$3 = function () {
   }, {
     key: "saveNewMonomer",
     value: function saveNewMonomer(data) {
+      var _this$originalSelecti,
+        _this3 = this;
       if (!this._monomerCreationState) {
         throw new Error('Monomer creation wizard is not active, cannot save new monomer');
       }
@@ -25477,6 +25512,7 @@ var Editor$3 = function () {
       var monomerId = "".concat(symbol, "___").concat(name);
       var monomerRef = ketcherCore.setMonomerTemplatePrefix(monomerId);
       var monomerHELMClass = ketcherCore.getHELMClassByKetMonomerClass(type);
+      var naturalAnalogueToUse = ketcherCore.fillNaturalAnalogueForPhosphateAndSugar(naturalAnalogue, type);
       var monomerTemplate = {
         type: ketcherCore.KetTemplateType.MONOMER_TEMPLATE,
         id: monomerId,
@@ -25484,8 +25520,8 @@ var Editor$3 = function () {
         classHELM: monomerHELMClass,
         alias: symbol,
         fullName: name,
-        naturalAnalogShort: naturalAnalogue,
-        atoms: ketMicromolecule.mol0.atoms,
+        naturalAnalogShort: naturalAnalogueToUse,
+        atoms: ketcherCore.normalizeMonomerAtomsPositions(ketMicromolecule.mol0.atoms),
         bonds: ketMicromolecule.mol0.bonds,
         attachmentPoints: attachmentPoints,
         root: {
@@ -25510,9 +25546,24 @@ var Editor$3 = function () {
       var monomerPosition = new ketcherCore.Vec2((this.selectionBBox.min.x + this.selectionBBox.max.x) / 2, (this.selectionBBox.min.y + this.selectionBBox.max.y) / 2);
       var monomer = new Monomer(monomerItem, monomerPosition);
       this.closeMonomerCreationWizard();
+      var sGroupAttachmentPoints = ketcherCore.MacromoleculesConverter.convertMonomerAttachmentPointsToSGroupAttachmentPoints(monomer, this.atomIdsMap);
+      this.singleBondsToOutsideOfSelection.forEach(function (bond) {
+        var attachmentPointToBond = sGroupAttachmentPoints.find(function (point) {
+          return point.atomId === bond.begin || point.atomId === bond.end;
+        });
+        if (attachmentPointToBond) {
+          bond.beginSuperatomAttachmentPointNumber = attachmentPointToBond.attachmentPointNumber;
+        }
+      });
       var action = ketcherCore.fromSgroupAddition(this.render.ctab, ketcherCore.SGroup.TYPES.SUP, this.originalSelection.atoms, {
         expanded: true
-      }, this.render.ctab.molecule.sgroups.newId(), ketcherCore.MacromoleculesConverter.convertMonomerAttachmentPointsToSGroupAttachmentPoints(monomer, this.atomIdsMap), monomer.position, true, monomer.monomerItem.props.MonomerName, null, monomer);
+      }, this.render.ctab.molecule.sgroups.newId(), sGroupAttachmentPoints, monomer.position, true, monomer.monomerItem.props.MonomerName, null, monomer);
+      (_this$originalSelecti = this.originalSelection.atoms) === null || _this$originalSelecti === void 0 || _this$originalSelecti.forEach(function (atomId) {
+        var atom = _this3.render.ctab.molecule.atoms.get(atomId);
+        if (atom) {
+          atom.fragment = -1;
+        }
+      });
       this.update(action);
     }
   }, {
@@ -25700,6 +25751,11 @@ var Editor$3 = function () {
             ketcherCore.ketcherProvider.getKetcher(this.ketcherId).changeEvent.add(subscribeFuncWrapper);
             break;
           }
+        case 'libraryUpdate':
+          {
+            ketcherCore.ketcherProvider.getKetcher(this.ketcherId).libraryUpdateEvent.add(handler);
+            break;
+          }
         default:
           this.event[eventName].add(handler);
       }
@@ -25725,6 +25781,7 @@ var Editor$3 = function () {
   }, {
     key: "explicitSelected",
     value: function explicitSelected() {
+      var autoSelectBonds = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
       var selection = this.selection() || {};
       var res = structObjects.reduce(function (acc, key) {
         acc[key] = selection[key] ? selection[key].slice() : [];
@@ -25745,7 +25802,7 @@ var Editor$3 = function () {
           }
         });
       }
-      if (res.atoms && res.bonds) {
+      if (autoSelectBonds && res.atoms && res.bonds) {
         struct.bonds.forEach(function (bond, bid) {
           if (res.bonds.indexOf(bid) < 0 && res.atoms.indexOf(bond.begin) >= 0 && res.atoms.indexOf(bond.end) >= 0) {
             res.bonds = res.bonds || [];
@@ -27696,6 +27753,47 @@ function getMenuPropsForSelection(selection, selectedFunctionalGroups, ketcherId
   }
 }
 
+var MonomerTypeSelectConfig = [{
+  value: ketcherCore.KetMonomerClass.AminoAcid,
+  label: 'Amino acid',
+  iconName: 'peptide'
+}, {
+  value: ketcherCore.KetMonomerClass.Sugar,
+  label: 'Sugar',
+  iconName: 'sugar'
+}, {
+  value: ketcherCore.KetMonomerClass.Base,
+  label: 'Base',
+  iconName: 'base'
+}, {
+  value: ketcherCore.KetMonomerClass.Phosphate,
+  label: 'Phosphate',
+  iconName: 'phosphate'
+}, {
+  value: ketcherCore.KetMonomerClass.RNA,
+  label: 'Nucleotide',
+  iconName: 'nucleotide'
+}, {
+  value: ketcherCore.KetMonomerClass.CHEM,
+  label: 'CHEM',
+  iconName: 'chem'
+}];
+var NotificationMessages = {
+  defaultAttachmentPoints: 'Attachment points are set by default with hydrogens as leaving groups.',
+  emptyMandatoryFields: 'Mandatory fields must be filled.',
+  invalidSymbol: 'The monomer symbol must consist only of uppercase and lowercase letters, numbers, hyphens (-), underscores (_), and asterisks (*).',
+  symbolExists: 'The symbol must be unique amongst peptide, RNA, or CHEM monomers.',
+  editingIsNotAllowed: 'Editing of the structure is not allowed.'
+};
+var NotificationTypes = {
+  defaultAttachmentPoints: 'info',
+  emptyMandatoryFields: 'error',
+  invalidSymbol: 'error',
+  symbolExists: 'error',
+  editingIsNotAllowed: 'error'
+};
+var MonomerCreationExternalNotificationAction = 'MonomerCreationExternalNotification';
+
 function ownKeys$J(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$J(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$J(Object(t), !0).forEach(function (r) { _defineProperty__default["default"](e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$J(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var ContextMenuTrigger = function ContextMenuTrigger(_ref) {
@@ -27728,6 +27826,12 @@ var ContextMenuTrigger = function ContextMenuTrigger(_ref) {
     event.preventDefault();
     var ketcher = ketcherCore.ketcherProvider.getKetcher(ketcherId);
     var editor = ketcher.editor;
+    if (editor.monomerCreationState !== null) {
+      window.dispatchEvent(new CustomEvent(MonomerCreationExternalNotificationAction, {
+        detail: 'editingIsNotAllowed'
+      }));
+      return;
+    }
     if (editor.render.options.viewOnlyMode) {
       return;
     }
@@ -28161,7 +28265,8 @@ var Select$1 = function Select(_ref2) {
     formName = _ref2.formName,
     name = _ref2.name,
     placeholder = _ref2.placeholder,
-    testId = _ref2['data-testid'];
+    testId = _ref2['data-testid'],
+    error = _ref2.error;
   var _useState = React.useState(),
     _useState2 = _slicedToArray__default["default"](_useState, 2),
     currentValue = _useState2[0],
@@ -28190,6 +28295,7 @@ var Select$1 = function Select(_ref2) {
     },
     IconComponent: ChevronIcon$1,
     "data-testid": testId,
+    error: error,
     children: options && options.map(function (option) {
       var _option$children;
       var isDivider = typeof (option === null || option === void 0 ? void 0 : option.value) === 'string' ? option.value.includes('Divider') : false;
@@ -28360,7 +28466,8 @@ var NaturalAnaloguePicker = function NaturalAnaloguePicker(_ref2) {
   var monomerType = _ref2.monomerType,
     value = _ref2.value,
     onChange = _ref2.onChange,
-    className = _ref2.className;
+    className = _ref2.className,
+    error = _ref2.error;
   var disabled = !isNaturalAnalogueRequired(monomerType);
   var options = monomerType === ketcherCore.KetMonomerClass.AminoAcid ? aminoAcidOptions : rnaOptions;
   var renderValue = React.useCallback(function (selected) {
@@ -28404,6 +28511,7 @@ var NaturalAnaloguePicker = function NaturalAnaloguePicker(_ref2) {
     IconComponent: ChevronIcon,
     "data-testid": "natural-analogue-picker",
     disabled: disabled,
+    error: error,
     children: options.map(function (option) {
       return jsxRuntime.jsx(MenuItem__default["default"], {
         value: option.value,
@@ -28448,7 +28556,7 @@ var AttributeField = function AttributeField(_ref) {
   });
 };
 
-var styles$f = {"notification":"Notification-module_notification__yHqXk","notificationStrip":"Notification-module_notificationStrip__gSCg2","info":"Notification-module_info__M2qqL","infoStrip":"Notification-module_infoStrip__Bkztz","error":"Notification-module_error__I3OUR","errorStrip":"Notification-module_errorStrip__VlAys","notificationIcon":"Notification-module_notificationIcon__weZ-g","notificationText":"Notification-module_notificationText__4-qhV","notificationButton":"Notification-module_notificationButton__Bgw5u"};
+var styles$f = {"notification":"Notification-module_notification__yHqXk","notificationStrip":"Notification-module_notificationStrip__gSCg2","info":"Notification-module_info__M2qqL","error":"Notification-module_error__I3OUR","notificationIcon":"Notification-module_notificationIcon__weZ-g","notificationText":"Notification-module_notificationText__4-qhV","notificationButton":"Notification-module_notificationButton__Bgw5u"};
 
 var iconMap = {
   info: 'checkFilled',
@@ -28485,37 +28593,6 @@ var Notification = function Notification(_ref) {
 
 function ownKeys$H(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$H(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$H(Object(t), !0).forEach(function (r) { _defineProperty__default["default"](e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$H(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var MonomerTypeSelectConfig = [{
-  value: ketcherCore.KetMonomerClass.AminoAcid,
-  label: 'Amino acid',
-  iconName: 'peptide'
-}, {
-  value: ketcherCore.KetMonomerClass.Sugar,
-  label: 'Sugar',
-  iconName: 'sugar'
-}, {
-  value: ketcherCore.KetMonomerClass.Base,
-  label: 'Base',
-  iconName: 'base'
-}, {
-  value: ketcherCore.KetMonomerClass.Phosphate,
-  label: 'Phosphate',
-  iconName: 'phosphate'
-}, {
-  value: ketcherCore.KetMonomerClass.RNA,
-  label: 'Nucleotide',
-  iconName: 'nucleotide'
-}, {
-  value: ketcherCore.KetMonomerClass.CHEM,
-  label: 'CHEM',
-  iconName: 'chem'
-}];
-var notificationMessages = {
-  defaultAttachmentPoints: 'Attachment points are set by default with hydrogens as leaving groups.',
-  emptyMandatoryFields: 'Mandatory fields must be filled.',
-  invalidSymbol: 'The monomer symbol must consist only of uppercase and lowercase letters, numbers, hyphens (-), underscores (_), and asterisks (*).',
-  symbolExists: 'The symbol must be unique amongst peptide, RNA, or CHEM monomers.'
-};
 var initialWizardState = {
   values: {
     type: undefined,
@@ -28526,7 +28603,7 @@ var initialWizardState = {
   errors: {},
   notifications: new Map([['defaultAttachmentPoints', {
     type: 'info',
-    message: notificationMessages.defaultAttachmentPoints
+    message: NotificationMessages.defaultAttachmentPoints
   }]])
 };
 var wizardReducer = function wizardReducer(state, action) {
@@ -28535,8 +28612,12 @@ var wizardReducer = function wizardReducer(state, action) {
       {
         var fieldId = action.fieldId,
           value = action.value;
+        var values = _objectSpread$H(_objectSpread$H({}, state.values), {}, _defineProperty__default["default"]({}, fieldId, value));
+        if (fieldId === 'type') {
+          values.naturalAnalogue = '';
+        }
         return _objectSpread$H(_objectSpread$H({}, state), {}, {
-          values: _objectSpread$H(_objectSpread$H({}, state.values), {}, _defineProperty__default["default"]({}, fieldId, value)),
+          values: values,
           errors: _objectSpread$H(_objectSpread$H({}, state.errors), {}, _defineProperty__default["default"]({}, fieldId, undefined))
         });
       }
@@ -28552,6 +28633,20 @@ var wizardReducer = function wizardReducer(state, action) {
           notifications: new Map([].concat(_toConsumableArray__default["default"](state.notifications), _toConsumableArray__default["default"](action.notifications)))
         });
       }
+    case 'AddNotification':
+      {
+        var notifications = new Map(state.notifications);
+        var id = action.id;
+        if (!notifications.has(id)) {
+          notifications.set(id, {
+            type: NotificationTypes[id],
+            message: NotificationMessages[id]
+          });
+        }
+        return _objectSpread$H(_objectSpread$H({}, state), {}, {
+          notifications: notifications
+        });
+      }
     case 'ResetErrors':
       {
         return _objectSpread$H(_objectSpread$H({}, state), {}, {
@@ -28564,10 +28659,10 @@ var wizardReducer = function wizardReducer(state, action) {
       }
     case 'RemoveNotification':
       {
-        var notifications = new Map(state.notifications);
-        notifications["delete"](action.id);
+        var _notifications = new Map(state.notifications);
+        _notifications["delete"](action.id);
         return _objectSpread$H(_objectSpread$H({}, state), {}, {
-          notifications: notifications
+          notifications: _notifications
         });
       }
     default:
@@ -28586,7 +28681,7 @@ var validateInputs = function validateInputs(values) {
         errors[key] = true;
         notifications.set('emptyMandatoryFields', {
           type: 'error',
-          message: notificationMessages.emptyMandatoryFields
+          message: NotificationMessages.emptyMandatoryFields
         });
       }
       return;
@@ -28597,7 +28692,16 @@ var validateInputs = function validateInputs(values) {
         errors[key] = true;
         notifications.set('invalidSymbol', {
           type: 'error',
-          message: notificationMessages.invalidSymbol
+          message: NotificationMessages.invalidSymbol
+        });
+        return;
+      }
+      var editor = ketcherCore.CoreEditor.provideEditorInstance();
+      if (editor.checkIfMonomerSymbolClassPairExists(value, values.type)) {
+        errors[key] = true;
+        notifications.set('symbolExists', {
+          type: 'error',
+          message: NotificationMessages.symbolExists
         });
       }
     }
@@ -28620,6 +28724,21 @@ var MonomerCreationWizard = function MonomerCreationWizard() {
     symbol = values.symbol,
     name = values.name,
     naturalAnalogue = values.naturalAnalogue;
+  React.useEffect(function () {
+    var externalNotificationEventListener = function externalNotificationEventListener(event) {
+      var notificationId = event.detail;
+      if (notificationId) {
+        wizardStateDispatch({
+          type: 'AddNotification',
+          id: notificationId
+        });
+      }
+    };
+    window.addEventListener(MonomerCreationExternalNotificationAction, externalNotificationEventListener);
+    return function () {
+      window.removeEventListener(MonomerCreationExternalNotificationAction, externalNotificationEventListener);
+    };
+  }, []);
   var handleFieldChange = function handleFieldChange(fieldId, value) {
     if (fieldId === 'type') {
       wizardStateDispatch({
@@ -28724,13 +28843,14 @@ var MonomerCreationWizard = function MonomerCreationWizard() {
           children: [jsxRuntime.jsx(AttributeField, {
             title: "Type",
             control: jsxRuntime.jsx(Select$1, {
-              className: clsx__default["default"](styles$j.input, errors.type && styles$j.error),
+              className: styles$j.input,
               options: monomerTypeSelectOptions,
               placeholder: "Select monomer type",
               value: type,
               onChange: function onChange(value) {
                 return handleFieldChange('type', value);
-              }
+              },
+              error: errors.type
             }),
             required: true
           }), jsxRuntime.jsx(AttributeField, {
@@ -28738,7 +28858,7 @@ var MonomerCreationWizard = function MonomerCreationWizard() {
             control: jsxRuntime.jsx("input", {
               type: "text",
               className: clsx__default["default"](styles$j.input, errors.symbol && styles$j.error),
-              placeholder: "ex.: Azs980uX",
+              placeholder: "e.g. PEG-2",
               value: symbol,
               onChange: function onChange(event) {
                 return handleFieldChange('symbol', event.target.value);
@@ -28750,7 +28870,7 @@ var MonomerCreationWizard = function MonomerCreationWizard() {
             control: jsxRuntime.jsx("input", {
               type: "text",
               className: clsx__default["default"](styles$j.input, errors.name && styles$j.error),
-              placeholder: "ex.: 5-hydroxymethyl dC-12",
+              placeholder: "e.g. Diethylene Glycol",
               value: name,
               onChange: function onChange(event) {
                 return handleFieldChange('name', event.target.value);
@@ -28760,12 +28880,12 @@ var MonomerCreationWizard = function MonomerCreationWizard() {
           }), jsxRuntime.jsx(AttributeField, {
             title: "Natural analogue",
             control: jsxRuntime.jsx(NaturalAnaloguePicker, {
-              className: clsx__default["default"](errors.type && styles$j.error),
               monomerType: type,
               value: naturalAnalogue,
               onChange: function onChange(value) {
                 return handleFieldChange('naturalAnalogue', value);
-              }
+              },
+              error: errors.naturalAnalogue
             }),
             disabled: !isNaturalAnalogueRequired(type),
             required: true
@@ -36795,8 +36915,8 @@ var KetcherBuilder = function () {
                 cleanup = initApp(prevKetcherId, ketcherId, element, appRoot, staticResourcesUrl, {
                   buttons: buttons || {},
                   errorHandler: errorHandler || null,
-                  version: "3.7.0-rc.1" ,
-                  buildDate: "2025-08-04T22:55:26" ,
+                  version: "3.7.0-rc.2" ,
+                  buildDate: "2025-08-20T17:19:11" ,
                   buildNumber: '',
                   customButtons: customButtons || []
                 }, structService, resolve, togglerComponent);
@@ -37091,7 +37211,7 @@ var ModeControl = function ModeControl(_ref3) {
 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__default["default"](e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var MacromoleculesEditorComponent = React.lazy(function () {
-  return Promise.resolve().then(function () { return require('./index.modern-5eda67eb.js'); });
+  return Promise.resolve().then(function () { return require('./index.modern-c52e0e6a.js'); });
 });
 var Editor = function Editor(props) {
   var _useState = React.useState(false),
@@ -37104,12 +37224,16 @@ var Editor = function Editor(props) {
     setMoleculesEditor = _useState4[1];
   var _useState5 = React.useState(),
     _useState6 = _slicedToArray__default["default"](_useState5, 2),
-    macromoleculesEditor = _useState6[0],
-    setMacromoleculesEditor = _useState6[1];
-  var _useState7 = React.useState(''),
+    ketcher = _useState6[0],
+    setKetcher = _useState6[1];
+  var _useState7 = React.useState(),
     _useState8 = _slicedToArray__default["default"](_useState7, 2),
-    ketcherId = _useState8[0],
-    setKetcherId = _useState8[1];
+    macromoleculesEditor = _useState8[0],
+    setMacromoleculesEditor = _useState8[1];
+  var _useState9 = React.useState(''),
+    _useState10 = _slicedToArray__default["default"](_useState9, 2),
+    ketcherId = _useState10[0],
+    setKetcherId = _useState10[1];
   var togglePolymerEditor = function togglePolymerEditor(toggleValue) {
     setShowPolymerEditor(toggleValue);
     window.isPolymerEditorTurnedOn = toggleValue;
@@ -37118,6 +37242,24 @@ var Editor = function Editor(props) {
     toggle: togglePolymerEditor,
     isPolymerEditor: showPolymerEditor
   }) : undefined;
+  React.useEffect(function () {
+    var switchToMacromoleculesModeHandler = function switchToMacromoleculesModeHandler() {
+      togglePolymerEditor(true);
+    };
+    var switchToMoleculesModeHandler = function switchToMoleculesModeHandler() {
+      togglePolymerEditor(false);
+    };
+    if (macromoleculesEditor) {
+      macromoleculesEditor.events.switchToMacromoleculesMode.add(switchToMacromoleculesModeHandler);
+      macromoleculesEditor.events.switchToMoleculesMode.add(switchToMoleculesModeHandler);
+    }
+    return function () {
+      if (macromoleculesEditor) {
+        macromoleculesEditor.events.switchToMacromoleculesMode.remove(switchToMacromoleculesModeHandler);
+        macromoleculesEditor.events.switchToMoleculesMode.remove(switchToMoleculesModeHandler);
+      }
+    };
+  }, [macromoleculesEditor]);
   React.useEffect(function () {
     return function () {
       window.isPolymerEditorTurnedOn = false;
@@ -37133,9 +37275,14 @@ var Editor = function Editor(props) {
       }
     }
   }, [showPolymerEditor]);
+  React.useEffect(function () {
+    if (ketcher && moleculesEditor && (macromoleculesEditor || props.disableMacromoleculesEditor)) {
+      var _props$onInit;
+      (_props$onInit = props.onInit) === null || _props$onInit === void 0 || _props$onInit.call(props, ketcher);
+    }
+  }, [moleculesEditor, macromoleculesEditor]);
   var onInitMoleculesEditor = function onInitMoleculesEditor(ketcher) {
-    var _props$onInit;
-    (_props$onInit = props.onInit) === null || _props$onInit === void 0 || _props$onInit.call(props, ketcher);
+    setKetcher(ketcher);
     setMoleculesEditor(ketcher.editor);
   };
   var onInitMacromoleculesEditor = function onInitMacromoleculesEditor(macromoleculesEditor) {
@@ -37174,17 +37321,25 @@ var Editor = function Editor(props) {
   });
 };
 
+Object.defineProperty(exports, 'EditorClassName', {
+  enumerable: true,
+  get: function () { return ketcherCore.EditorClassName; }
+});
+Object.defineProperty(exports, 'KETCHER_MACROMOLECULES_ROOT_NODE_SELECTOR', {
+  enumerable: true,
+  get: function () { return ketcherCore.KETCHER_MACROMOLECULES_ROOT_NODE_SELECTOR; }
+});
 exports.ACS_STYLE_DEFAULT_SETTINGS = ACS_STYLE_DEFAULT_SETTINGS;
 exports.Accordion = Accordion$1;
 exports.AmbiguousMonomerPreview = AmbiguousMonomerPreview;
 exports.AppContext = appContext;
+exports.ArrowScroll = ArrowScroll;
 exports.Button = Button;
 exports.Container = Container;
 exports.Content = Content;
 exports.ContentLine = ContentLine;
 exports.Dialog = Dialog;
 exports.Editor = Editor;
-exports.EditorClassName = EditorClassName;
 exports.Header = Header$1;
 exports.Icon = Icon;
 exports.IconButton = IconButton;
@@ -37192,7 +37347,6 @@ exports.IconButtonCustomIcon = IconButtonCustomIcon;
 exports.IndigoProvider = IndigoProvider;
 exports.InfoModal = InfoModal$1;
 exports.Input = Input$2;
-exports.KETCHER_MACROMOLECULES_ROOT_NODE_SELECTOR = KETCHER_MACROMOLECULES_ROOT_NODE_SELECTOR;
 exports.KETCHER_ROOT_NODE_CLASS_NAME = KETCHER_ROOT_NODE_CLASS_NAME;
 exports.KETCHER_ROOT_NODE_CSS_SELECTOR = KETCHER_ROOT_NODE_CSS_SELECTOR;
 exports.MODES = MODES;
@@ -37210,4 +37364,5 @@ exports.calculateNucleoElementPreviewTop = calculateNucleoElementPreviewTop;
 exports.getIconName = getIconName;
 exports.ketcherInitEventName = ketcherInitEventName;
 exports.preview = preview;
+exports.usePortalStyle = usePortalStyle;
 //# sourceMappingURL=index.js.map