ketcher-react 2.18.0-rc.4 → 2.18.0-rc.5

package/dist/index.modern.js

@@ -40,7 +40,7 @@ import styled from '@emotion/styled';
 import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
 import * as KN from 'w3c-keyname';
 import _slicedToArray$1 from '@babel/runtime/helpers/slicedToArray';
-import ReactDOM from 'react-dom';
+import ReactDOM, { createPortal } from 'react-dom';
 import { connect, useDispatch, useSelector, Provider } from 'react-redux';
 import { combineReducers, createStore as createStore$1, applyMiddleware } from 'redux';
 import _, { throttle as throttle$1, intersection, difference, debounce as debounce$1, cloneDeep, isEqual as isEqual$1, capitalize as capitalize$1, range as range$2, isEmpty as isEmpty$1, uniqBy } from 'lodash';
@@ -3595,7 +3595,7 @@ var zoom = {
 
 var openHelpLink = function openHelpLink() {
   var _window$open;
-  return (_window$open = window.open("https://github.com/epam/ketcher/blob/".concat("v2.18.0-rc.4\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("v2.18.0-rc.5\n", "/documentation/help.md#ketcher-overview"))) === null || _window$open === void 0 ? void 0 : _window$open.focus();
 };
 var help = {
   help: {
@@ -24524,14 +24524,32 @@ var props = {
 var ContextMenu = function ContextMenu() {
   var _useAppContext = useAppContext(),
     getKetcherInstance = _useAppContext.getKetcherInstance;
+  var resetMenuPosition = function resetMenuPosition() {
+    var contextMenuElement = document.querySelector('.contexify:last-of-type');
+    var ketcherRootElement = document.querySelector(KETCHER_ROOT_NODE_CSS_SELECTOR);
+    if (!contextMenuElement || !ketcherRootElement) {
+      return;
+    }
+    var contextMenuElementBoundingBox = contextMenuElement.getBoundingClientRect();
+    var ketcherRootElementBoundingBox = ketcherRootElement.getBoundingClientRect();
+    if (!contextMenuElementBoundingBox || !ketcherRootElementBoundingBox) {
+      return;
+    }
+    var left = contextMenuElementBoundingBox.right > ketcherRootElementBoundingBox.right ? contextMenuElementBoundingBox.x - (contextMenuElementBoundingBox.right - ketcherRootElementBoundingBox.right) : contextMenuElementBoundingBox.x;
+    var top = contextMenuElementBoundingBox.bottom > ketcherRootElementBoundingBox.bottom ? contextMenuElementBoundingBox.y - (contextMenuElementBoundingBox.bottom - ketcherRootElementBoundingBox.bottom) : contextMenuElementBoundingBox.y;
+    contextMenuElement.style.left = "".concat(left, "px");
+    contextMenuElement.style.top = "".concat(top, "px");
+  };
   var trackVisibility = useCallback(function (id, visible) {
     var editor = getKetcherInstance().editor;
     if (visible) {
       editor.hoverIcon.hide();
+      resetMenuPosition();
     }
     editor.contextMenu[id] = visible;
   }, [getKetcherInstance]);
-  return jsxs(Fragment, {
+  var ketcherEditorRootElement = document.querySelector(KETCHER_ROOT_NODE_CSS_SELECTOR);
+  return ketcherEditorRootElement ? createPortal(jsxs(Fragment, {
     children: [jsx(Menu, _objectSpread$H(_objectSpread$H({}, props), {}, {
       id: CONTEXT_MENU_ID.FOR_BONDS,
       onVisibilityChange: function onVisibilityChange(visible) {
@@ -24563,7 +24581,7 @@ var ContextMenu = function ContextMenu() {
       },
       children: jsx(RGroupAttachmentPointMenuItems, {})
     }))]
-  });
+  }), ketcherEditorRootElement) : null;
 };
 
 var getIsItemInSelection = function getIsItemInSelection(_ref) {
@@ -32417,8 +32435,7 @@ var AbbreviationLookup = function AbbreviationLookup(_ref) {
     loweredLookupValue = _useState6[0],
     setLoweredLookupValue = _useState6[1];
   useLayoutEffect(function () {
-    var _inputRef$current, _autocompleteRef$curr, _autocompleteRef$curr2, _autocompleteRef$curr3, _autocompleteRef$curr4;
-    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+    var _autocompleteRef$curr, _autocompleteRef$curr2, _autocompleteRef$curr3, _autocompleteRef$curr4, _inputRef$current;
     var containerHeight = (_autocompleteRef$curr = (_autocompleteRef$curr2 = autocompleteRef.current) === null || _autocompleteRef$curr2 === void 0 ? void 0 : _autocompleteRef$curr2.offsetHeight) !== null && _autocompleteRef$curr !== void 0 ? _autocompleteRef$curr : 0;
     var containerWidth = (_autocompleteRef$curr3 = (_autocompleteRef$curr4 = autocompleteRef.current) === null || _autocompleteRef$curr4 === void 0 ? void 0 : _autocompleteRef$curr4.offsetWidth) !== null && _autocompleteRef$curr3 !== void 0 ? _autocompleteRef$curr3 : 0;
     var parentNode = document.querySelector(KETCHER_ROOT_NODE_CSS_SELECTOR);
@@ -32434,6 +32451,7 @@ var AbbreviationLookup = function AbbreviationLookup(_ref) {
       left: "".concat(left, "px"),
       top: "".concat(top, "px")
     });
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
     return function () {
       var _inputRef$current2;
       (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || (_inputRef$current2 = _inputRef$current2.closest(KETCHER_ROOT_NODE_CSS_SELECTOR)) === null || _inputRef$current2 === void 0 || _inputRef$current2.getElementsByClassName(CLIP_AREA_BASE_CLASS)[0].focus();
@@ -32748,8 +32766,8 @@ var KetcherBuilder = function () {
                 initApp(element, appRoot, staticResourcesUrl, {
                   buttons: buttons || {},
                   errorHandler: errorHandler || null,
-                  version: "2.18.0-rc.4" ,
-                  buildDate: "2024-02-06T12:50:19" ,
+                  version: "2.18.0-rc.5" ,
+                  buildDate: "2024-02-09T16:22:25" ,
                   buildNumber: ''
                 }, structService, resolve, togglerComponent);
               });