ketcher-react 2.9.0-rc.3 → 2.9.0-rc.5

package/dist/index.modern.js

@@ -2956,7 +2956,7 @@ var templates = templates$1.reduce(function (res, struct, i) {
 var zoomList = [0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1, 1.1, 1.2, 1.3, 1.4, 1.5, 1.7, 2, 2.5, 3, 3.5, 4];
 var zoom = {
   zoom: {
-    shortcut: ['Ctrl+Shift+0'],
+    shortcut: ['Mod+Shift+0'],
     selected: function selected(editor) {
       return editor.zoom();
     },
@@ -3010,7 +3010,7 @@ var zoom = {
 
 var openHelpLink = function openHelpLink() {
   var _window$open;
-  return (_window$open = window.open("https://github.com/epam/ketcher/blob/".concat("v2.9.0-rc.3\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.9.0-rc.5\n", "/documentation/help.md#ketcher-overview"))) === null || _window$open === void 0 ? void 0 : _window$open.focus();
 };
 var help = {
   help: {
@@ -10352,6 +10352,7 @@ function _checkPrivateRedeclaration$2(obj, privateCollection) { if (privateColle
 var _bondProps = new WeakMap();
 var AtomTool = function () {
   function AtomTool(editor, atomProps) {
+    var _ElementColor$atomPro;
     _classCallCheck(this, AtomTool);
     _classPrivateFieldInitSpec$2(this, _bondProps, {
       writable: true,
@@ -10363,8 +10364,10 @@ var AtomTool = function () {
       type: 1,
       stereo: Bond$2.PATTERN.STEREO.NONE
     });
-    this.editor.hoverIcon.show().attr('text', "".concat(atomProps.label)).attr('fill', "".concat(ElementColor[atomProps.label]));
-    this.editor.updateHoverIconPosition();
+    this.editor.hoverIcon.show();
+    this.editor.hoverIcon.label = atomProps.label;
+    this.editor.hoverIcon.fill = (_ElementColor$atomPro = ElementColor[atomProps.label]) !== null && _ElementColor$atomPro !== void 0 ? _ElementColor$atomPro : '#000000';
+    this.editor.hoverIcon.updatePosition();
     if (editor.selection()) {
       var _editor$selection;
       if ((_editor$selection = editor.selection()) !== null && _editor$selection !== void 0 && _editor$selection.atoms) {
@@ -10448,32 +10451,13 @@ var AtomTool = function () {
         };
       }
     }
-  }, {
-    key: "mouseleave",
-    value: function mouseleave() {
-      this.editor.hoverIcon.hide();
-    }
-  }, {
-    key: "mouseover",
-    value: function mouseover() {
-      this.editor.hoverIcon.show();
-      this.editor.updateHoverIconPosition();
-    }
   }, {
     key: "mousemove",
     value: function mousemove(event) {
       this.editor.hoverIcon.show();
       var rnd = this.editor.render;
-      var layerX = event.layerX,
-          layerY = event.layerY;
       if (!this.dragCtx || !this.dragCtx.item) {
-        var _this$editor$hoverIco = this.editor.hoverIcon.getBBox(),
-            height = _this$editor$hoverIco.height,
-            width = _this$editor$hoverIco.width;
-        this.editor.hoverIcon.attr({
-          x: layerX - width / 2,
-          y: layerY - height / 2
-        });
+        this.editor.hoverIcon.updatePosition();
         this.editor.hover(this.editor.findItem(event, ['atoms', 'functionalGroups']), null, event);
         return;
       }
@@ -12223,16 +12207,15 @@ function updateOnlyChangedProperties(atomId, userChangedAtom, molecule) {
   }, {});
 }
 function updateSelectedAtoms(_ref) {
-  var selection = _ref.selection,
+  var atoms = _ref.atoms,
       changeAtomPromise = _ref.changeAtomPromise,
       editor = _ref.editor;
   var action = new Action();
   var struct = editor.render.ctab;
   var molecule = struct.molecule;
-  if (selection !== null && selection !== void 0 && selection.atoms) {
-    var selectionAtoms = selection.atoms;
+  if (atoms) {
     Promise.resolve(changeAtomPromise).then(function (userChangedAtom) {
-      selectionAtoms.forEach(function (atomId) {
+      atoms.forEach(function (atomId) {
         var atomWithChangedProperties = updateOnlyChangedProperties(atomId, userChangedAtom, molecule);
         action.mergeWith(fromAtomsAttrs(struct, atomId, atomWithChangedProperties, false));
       });
@@ -12564,7 +12547,7 @@ var SelectTool = function () {
         var atoms = getSelectedAtoms(selection, molecule);
         var changeAtomPromise = editor.event.elementEdit.dispatch(atoms);
         updateSelectedAtoms({
-          selection: selection,
+          atoms: (selection === null || selection === void 0 ? void 0 : selection.atoms) || [],
           editor: editor,
           changeAtomPromise: changeAtomPromise
         });
@@ -13142,11 +13125,12 @@ function ownKeys$O(object, enumerableOnly) { var keys = Object.keys(object); if
 function _objectSpread$O(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$O(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$O(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var PasteTool = function () {
   function PasteTool(editor, struct) {
+    var _struct$functionalGro;
     _classCallCheck(this, PasteTool);
     this.editor = editor;
     this.editor.selection(null);
     this.struct = struct;
-    this.isSingleContractedGroup = struct.isSingleGroup() && !struct.functionalGroups.get(0).isExpanded;
+    this.isSingleContractedGroup = struct.isSingleGroup() && !((_struct$functionalGro = struct.functionalGroups.get(0)) !== null && _struct$functionalGro !== void 0 && _struct$functionalGro.isExpanded);
     var rnd = this.editor.render;
     var _rnd$clientArea = rnd.clientArea,
         clientHeight = _rnd$clientArea.clientHeight,
@@ -13177,7 +13161,7 @@ var PasteTool = function () {
         (_this$action = this.action) === null || _this$action === void 0 ? void 0 : _this$action.perform(this.editor.render.ctab);
       }
       var closestGroupItem = this.editor.findItem(event, ['functionalGroups']);
-      var closestGroup = this.editor.struct().sgroups.get(closestGroupItem.id);
+      var closestGroup = this.editor.struct().sgroups.get(closestGroupItem === null || closestGroupItem === void 0 ? void 0 : closestGroupItem.id);
       if (!closestGroupItem || SGroup$1.isSaltOrSolvent(closestGroup === null || closestGroup === void 0 ? void 0 : closestGroup.data.name)) {
         var _fromPaste3 = fromPaste(this.editor.render.ctab, this.struct, this.editor.render.page2obj(event)),
             _fromPaste4 = _slicedToArray(_fromPaste3, 1),
@@ -13229,7 +13213,9 @@ var PasteTool = function () {
             _action = _fromPaste6[0],
             pasteItems = _fromPaste6[1];
         this.action = _action;
-        this.editor.update(this.action, true);
+        this.editor.update(this.action, true, {
+          extendCanvas: false
+        });
         this.mergeItems = getMergeItems(this.editor, pasteItems);
         this.editor.hover(getHoverToFuse(this.mergeItems));
       }
@@ -14117,14 +14103,14 @@ var TemplateTool = function () {
     if (sgroup) {
       this.findItems.push('functionalGroups');
     }
+    editor.hoverIcon.label = tmpl.struct.name;
+    editor.hoverIcon.fill = '#000000';
+    editor.hoverIcon.show();
+    editor.hoverIcon.updatePosition();
   }
   _createClass(TemplateTool, [{
     key: "mousedown",
     value: function mousedown(event) {
-      if (this.followAction) {
-        this.followAction.perform(this.editor.render.ctab);
-        delete this.followAction;
-      }
       var closestItem = this.editor.findItem(event, ['atoms', 'bonds', 'sgroups', 'functionalGroups']);
       var ctab = this.editor.render.ctab;
       var struct = ctab.molecule;
@@ -14139,10 +14125,9 @@ var TemplateTool = function () {
         }
       }
       this.editor.hover(null);
-      var dragCtxItem = getDragCtxItem(this.editor, event, this.mode, this.mergeItems, this.findItems);
       this.dragCtx = {
         xy0: this.editor.render.page2obj(event),
-        item: dragCtxItem
+        item: this.editor.findItem(event, this.findItems)
       };
       var dragCtx = this.dragCtx;
       var ci = dragCtx.item;
@@ -14195,24 +14180,10 @@ var TemplateTool = function () {
     key: "mousemove",
     value: function mousemove(event) {
       if (!this.dragCtx) {
-        if (this.followAction) {
-          this.followAction.perform(this.editor.render.ctab);
-        }
-        var _fromPaste = fromPaste(this.editor.render.ctab, this.template.molecule, this.editor.render.page2obj(event)),
-            _fromPaste2 = _slicedToArray(_fromPaste, 2),
-            followAction = _fromPaste2[0],
-            _pasteItems = _fromPaste2[1];
-        this.followAction = followAction;
-        this.editor.update(followAction, true);
-        if (this.mode === 'fg') {
-          var skip = getIgnoredGroupItem(this.editor.struct(), _pasteItems);
-          var _ci = this.editor.findItem(event, this.findItems, skip);
-          this.editor.hover(_ci !== null && _ci !== void 0 ? _ci : null, null, event);
-        } else {
-          this.mergeItems = getMergeItems(this.editor, _pasteItems);
-          this.editor.hover(getHoverToFuse(this.mergeItems));
-        }
-        return;
+        this.editor.hoverIcon.show();
+        this.editor.hoverIcon.updatePosition();
+        this.editor.hover(this.editor.findItem(event, this.findItems), null, event);
+        return true;
       }
       var dragCtx = this.dragCtx;
       var ci = dragCtx.item;
@@ -14233,10 +14204,10 @@ var TemplateTool = function () {
           var _fromTemplateOnBondAc = fromTemplateOnBondAction(this.editor.render.ctab, this.template, ci.id, this.editor.event, dragCtx.sign1 * dragCtx.sign2 > 0, false),
               _fromTemplateOnBondAc2 = _slicedToArray(_fromTemplateOnBondAc, 2),
               _action = _fromTemplateOnBondAc2[0],
-              _pasteItems2 = _fromTemplateOnBondAc2[1];
+              _pasteItems = _fromTemplateOnBondAc2[1];
           dragCtx.action = _action;
           this.editor.update(dragCtx.action, true);
-          dragCtx.mergeItems = getItemsToFuse(this.editor, _pasteItems2);
+          dragCtx.mergeItems = getItemsToFuse(this.editor, _pasteItems);
           this.editor.hover(getHoverToFuse(dragCtx.mergeItems));
         }
         return true;
@@ -14307,7 +14278,7 @@ var TemplateTool = function () {
     key: "mouseup",
     value: function mouseup(event) {
       var _this = this,
-          _ci2;
+          _ci;
       var dragCtx = this.dragCtx;
       if (this.targetGroupsIds.length && this.mode !== 'fg') {
         this.editor.event.removeFG.dispatch({
@@ -14341,7 +14312,7 @@ var TemplateTool = function () {
       if (this.isSaltOrSolvent) {
         addSaltsAndSolventsOnCanvasWithoutMerge(restruct, this.template, dragCtx, this.editor);
         return true;
-      } else if (((_ci2 = ci) === null || _ci2 === void 0 ? void 0 : _ci2.map) === 'functionalGroups' && FunctionalGroup.isContractedFunctionalGroup(ci.id, functionalGroups) && this.mode === 'fg' && this.targetGroupsIds.length) {
+      } else if (((_ci = ci) === null || _ci === void 0 ? void 0 : _ci.map) === 'functionalGroups' && FunctionalGroup.isContractedFunctionalGroup(ci.id, functionalGroups) && this.mode === 'fg' && this.targetGroupsIds.length) {
         functionalGroupRemoveAction = new Action();
         var _struct = this.editor.struct();
         var _restruct = this.editor.render.ctab;
@@ -14381,7 +14352,7 @@ var TemplateTool = function () {
           } else {
             angle = 0;
           }
-          var _fromTemplateOnAtom3 = fromTemplateOnAtom(restruct, this.template, ci.id, angle, this.mode === 'fg');
+          var _fromTemplateOnAtom3 = fromTemplateOnAtom(restruct, this.template, ci.id, angle, false);
           var _fromTemplateOnAtom4 = _slicedToArray(_fromTemplateOnAtom3, 2);
           action = _fromTemplateOnAtom4[0];
           pasteItems = _fromTemplateOnAtom4[1];
@@ -14423,10 +14394,6 @@ var TemplateTool = function () {
   }, {
     key: "cancel",
     value: function cancel(e) {
-      if (this.followAction) {
-        this.followAction.perform(this.editor.render.ctab);
-        delete this.followAction;
-      }
       this.mouseup(e);
     }
   }, {
@@ -14475,23 +14442,6 @@ function getTargetAtomId(struct, ci) {
     return group === null || group === void 0 ? void 0 : group.getAttAtomId(struct);
   }
 }
-function getIgnoredGroupItem(struct, pasteItems) {
-  var groupId = struct.getGroupIdFromAtomId(pasteItems.atoms[0]);
-  return {
-    map: 'functionalGroups',
-    id: groupId
-  };
-}
-function getDragCtxItem(editor, event, mode, mergeItems, findItems) {
-  if (mode === 'fg') return editor.findItem(event, findItems);
-  if ((mergeItems === null || mergeItems === void 0 ? void 0 : mergeItems.atoms.size) === 1 && mergeItems.bonds.size === 0) {
-    return {
-      map: 'atoms',
-      id: mergeItems.atoms.values().next().value
-    };
-  }
-  return null;
-}
 
 var TextTool = function () {
   function TextTool(editor) {
@@ -14676,7 +14626,7 @@ function handleAtomPropsDialog(_ref3) {
     var atoms = getSelectedAtoms(selection, restruct.molecule);
     var changeAtomPromise = editor.event.elementEdit.dispatch(atoms);
     updateSelectedAtoms({
-      selection: selection,
+      atoms: selection.atoms || [],
       editor: editor,
       changeAtomPromise: changeAtomPromise
     });
@@ -15933,13 +15883,126 @@ function getValidInputOnly(struct, atoms, bonds) {
   };
 }
 
+var HOVER_ICON_OPACITY = 0.7;
+var HoverIcon = function () {
+  function HoverIcon(editor) {
+    _classCallCheck(this, HoverIcon);
+    this.editor = editor;
+    var icon = this.initialize();
+    this.element = icon.element;
+    this._fill = icon.fill;
+    this._label = icon.label;
+    this.isShown = true;
+    this.shouldBeShownWhenMouseBack = false;
+    this.updatePosition();
+    var clientArea = this.editor.render.clientArea;
+    this.onMouseMove = this.onMouseMove.bind(this);
+    this.onMouseLeave = this.onMouseLeave.bind(this);
+    document.addEventListener('mousemove', this.onMouseMove);
+    clientArea.addEventListener('mouseover', this.onMouseMove);
+    clientArea.addEventListener('mouseleave', this.onMouseLeave);
+  }
+  _createClass(HoverIcon, [{
+    key: "fill",
+    get: function get() {
+      return this._fill;
+    },
+    set: function set(fillColor) {
+      this._fill = fillColor;
+      this.element.attr('fill', fillColor);
+    }
+  }, {
+    key: "label",
+    get: function get() {
+      return this._label;
+    },
+    set: function set(label) {
+      this._label = label;
+      this.element.attr('text', label);
+    }
+  }, {
+    key: "isOverLoader",
+    value: function isOverLoader(event) {
+      var target = (event === null || event === void 0 ? void 0 : event.relatedTarget) || event.target;
+      return target === null || target === void 0 ? void 0 : target.classList.contains('loading-spinner');
+    }
+  }, {
+    key: "onMouseMove",
+    value: function onMouseMove(event) {
+      if (this.isShown || this.isOverLoader(event) && this.shouldBeShownWhenMouseBack) {
+        this.show();
+        this.updatePosition();
+      }
+    }
+  }, {
+    key: "onMouseLeave",
+    value: function onMouseLeave(event) {
+      if (!this.isOverLoader(event)) {
+        this.shouldBeShownWhenMouseBack = true;
+        this.hide();
+      }
+    }
+  }, {
+    key: "updatePosition",
+    value: function updatePosition() {
+      var _this$editor$lastCurs = this.editor.lastCursorPosition,
+          x = _this$editor$lastCurs.x,
+          y = _this$editor$lastCurs.y;
+      this.element.attr({
+        x: x,
+        y: y
+      });
+    }
+  }, {
+    key: "show",
+    value: function show() {
+      this.element.show();
+      this.isShown = true;
+      this.shouldBeShownWhenMouseBack = false;
+    }
+  }, {
+    key: "hide",
+    value: function hide() {
+      this.element.hide();
+      this.isShown = false;
+    }
+  }, {
+    key: "initialize",
+    value: function initialize() {
+      var _this$fill;
+      var render = this.editor.render;
+      var fillColor = (_this$fill = this.fill) !== null && _this$fill !== void 0 ? _this$fill : '#000000';
+      var element = render.paper.text(0, 0, this.label || '');
+      element.attr('fill', fillColor);
+      element.attr('font-size', this.editor.options().fontsz);
+      element.attr('opacity', HOVER_ICON_OPACITY);
+      return {
+        element: element,
+        fill: fillColor,
+        label: (this === null || this === void 0 ? void 0 : this.label) || ''
+      };
+    }
+  }, {
+    key: "create",
+    value: function create() {
+      var icon = this.initialize();
+      this.element = icon.element;
+      this._fill = icon.fill;
+      this._label = icon.label;
+      this.isShown = true;
+      this.shouldBeShownWhenMouseBack = false;
+      this.updatePosition();
+    }
+  }]);
+  return HoverIcon;
+}();
+
 function ownKeys$J(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$J(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$J(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$J(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
 var SCALE = 40;
 var HISTORY_SIZE = 32;
-var HOVER_ICON_OPACITY = 0.7;
 var structObjects = ['atoms', 'bonds', 'frags', 'sgroups', 'sgroupData', 'rgroups', 'rxnArrows', 'rxnPluses', 'enhancedFlags', 'simpleObjects', 'texts'];
 var highlightTargets = ['atoms', 'bonds', 'rxnArrows', 'rxnPluses', 'functionalGroups', 'frags', 'merge', 'rgroups', 'sgroups', 'sgroupData', 'enhancedFlags', 'simpleObjects', 'texts'];
 function selectStereoFlagsIfNecessary(atoms, expAtoms) {
@@ -15980,7 +16043,8 @@ var Editor$3 = function () {
       x: 0,
       y: 0
     };
-    this.createHoverIcon();
+    this.hoverIcon = new HoverIcon(this);
+    this.hoverIcon.updatePosition();
     this.contextMenu = {};
     this.event = {
       message: new Subscription(),
@@ -16040,26 +16104,6 @@ var Editor$3 = function () {
       this._tool = tool;
       return this._tool;
     }
-  }, {
-    key: "updateHoverIconPosition",
-    value: function updateHoverIconPosition() {
-      var _this$lastCursorPosit = this.lastCursorPosition,
-          x = _this$lastCursorPosit.x,
-          y = _this$lastCursorPosit.y;
-      var _this$hoverIcon$getBB = this.hoverIcon.getBBox(),
-          height = _this$hoverIcon$getBB.height,
-          width = _this$hoverIcon$getBB.width;
-      this.hoverIcon.attr({
-        x: x - width / 2,
-        y: y - height / 2
-      });
-    }
-  }, {
-    key: "createHoverIcon",
-    value: function createHoverIcon() {
-      this.hoverIcon = this.render.paper.text(0, 0, '').attr('font-size', this.options().fontsz).attr('opacity', HOVER_ICON_OPACITY);
-      this.updateHoverIconPosition();
-    }
   }, {
     key: "clear",
     value: function clear() {
@@ -16083,7 +16127,7 @@ var Editor$3 = function () {
       this.selection(null);
       var struct = value || new Struct();
       var molecule = this.renderAndRecoordinateStruct(struct);
-      this.createHoverIcon();
+      this.hoverIcon.create();
       return molecule;
     }
   }, {
@@ -16183,8 +16227,11 @@ var Editor$3 = function () {
   }, {
     key: "update",
     value: function update(action, ignoreHistory) {
+      var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
+        extendCanvas: true
+      };
       if (action === true) {
-        this.render.update(true);
+        this.render.update(true, null, options);
       } else {
         if (!ignoreHistory && !action.isDummy()) {
           this.historyStack.splice(this.historyPtr, HISTORY_SIZE + 1, action);
@@ -16194,7 +16241,7 @@ var Editor$3 = function () {
           this.historyPtr = this.historyStack.length;
           this.event.change.dispatch(action);
         }
-        this.render.update();
+        this.render.update(false, null, options);
       }
     }
   }, {
@@ -16572,9 +16619,7 @@ var useAtomEdit = function useAtomEdit() {
               atoms = mapAtomIdsToAtoms(atomIds, molecule);
               newAtom = editor.event.elementEdit.dispatch(atoms);
               updateSelectedAtoms({
-                selection: {
-                  atoms: atoms
-                },
+                atoms: atomIds,
                 changeAtomPromise: newAtom,
                 editor: editor
               });
@@ -17138,6 +17183,9 @@ var ContextMenuTrigger = function ContextMenuTrigger(_ref) {
     var selection = editor.selection();
     var functionalGroupsInSelection = getSelectedFunctionalGroups();
     var showProps = null;
+    if (selection && !selection.bonds && !selection.atoms) {
+      return;
+    }
     if (selection) {
       if (functionalGroupsInSelection.size > 0) {
         var functionalGroups = Array.from(functionalGroupsInSelection.values());
@@ -17332,6 +17380,9 @@ function getPanelPositionRelativeToRect(clientX, clientY, sGroup, render, width,
   var viewportLeftLimit = BAR_PANEL_SIZE * LEFT_PADDING_MULTIPLIER + width;
   var viewportBottomLimit = (render === null || render === void 0 ? void 0 : (_render$clientArea = render.clientArea) === null || _render$clientArea === void 0 ? void 0 : _render$clientArea.clientHeight) - BAR_PANEL_SIZE - height;
   var viewportRightLimit = (render === null || render === void 0 ? void 0 : (_render$clientArea2 = render.clientArea) === null || _render$clientArea2 === void 0 ? void 0 : _render$clientArea2.clientWidth) - BAR_PANEL_SIZE - width;
+  if (!sGroup.hovering) {
+    return null;
+  }
   var rectCoords = (_sGroup$hovering$attr = sGroup.hovering.attrs) === null || _sGroup$hovering$attr === void 0 ? void 0 : (_sGroup$hovering$attr2 = _sGroup$hovering$attr.path) === null || _sGroup$hovering$attr2 === void 0 ? void 0 : _sGroup$hovering$attr2.map(function (line) {
     return line.slice(1);
   });
@@ -17724,7 +17775,7 @@ var StructEditor = function (_Component) {
           className: classes$D.measureLog,
           ref: this.logRef
         }), indigoVerification && jsx("div", {
-          className: classes$D.spinnerOverlay,
+          className: "".concat(classes$D.spinnerOverlay, " loading-spinner"),
           children: jsx(LoadingCircles, {})
         }), jsx(InfoPanel$1, {
           clientX: clientX,
@@ -24004,8 +24055,8 @@ var KetcherBuilder = function () {
                   initApp(element, staticResourcesUrl, {
                     buttons: buttons || {},
                     errorHandler: errorHandler || null,
-                    version: "2.9.0-rc.3" ,
-                    buildDate: "2023-03-11T13:55:42" ,
+                    version: "2.9.0-rc.5" ,
+                    buildDate: "2023-03-27T12:30:17" ,
                     buildNumber: ''
                   }, structService, resolve);
                 });