mobx-view-model-devtools 0.0.19 → 0.0.20

package/index.d.ts

@@ -78,7 +78,6 @@ declare class ViewModelDevtools {
     vmStore: ViewModelStoreBase;
     projectVmStore?: Maybe<ViewModelStoreBase<AnyViewModel>>;
     extras: Maybe<AnyObject>;
-    isAllVmsExpandedByDefault: boolean;
     expandedVmItemsPaths: ObservableSet<string>;
     logoUrl: string;
     inputRef: FocusableRef<HTMLInputElement>;
@@ -86,11 +85,12 @@ declare class ViewModelDevtools {
     keyboardHandler: KeyboardHandler;
     searchEngine: SearchEngine;
     presentationMode: 'tree' | 'list';
-    private expandedVmsSet;
+    private expandedVmsMap;
     scrollListRef: Ref<VListHandle>;
     private autoscrollTimeout;
     get allVms(): AnyVM[];
     get rootVms(): AnyVM[];
+    private get vmsData();
     get vmTree(): VmTreeItem[];
     get isActive(): boolean;
     private get containerId();
@@ -105,6 +105,10 @@ declare class ViewModelDevtools {
     setStore(viewModels: ViewModelStoreBase<AnyViewModel> | undefined): void;
     setExtras(extras: Maybe<AnyObject>): void;
     handleChangePresentationMode: (mode: string) => void;
+    expandAllVMs(): void;
+    collapseAllVms(): void;
+    showPopup(): void;
+    hidePopup(): void;
     private init;
     render(): void;
     private static _instance;

package/index.js

@@ -1,4 +1,4 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var t=document.createElement("style");t.appendChild(document.createTextNode(".root_Xsw1F{display:contents}.root_Xsw1F *{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:14px}.vmButton_Xr1Q6{position:fixed;z-index:999999;width:36px;height:36px;cursor:pointer;border-radius:8px;transition:all .15s ease-in-out}.vmButton_Xr1Q6[data-position=top-right],.vmButton_Xr1Q6[data-position=undefined]{top:12px;right:12px}.vmButton_Xr1Q6[data-position=top-right].opened_gewqL,.vmButton_Xr1Q6[data-position=undefined].opened_gewqL{top:-40px}.vmButton_Xr1Q6[data-position=top-left]{top:12px;left:12px}.vmButton_Xr1Q6[data-position=top-left].opened_gewqL{top:-40px}.vmButton_Xr1Q6[data-position=bottom-left]{bottom:12px;left:12px}.vmButton_Xr1Q6[data-position=bottom-left].opened_gewqL{bottom:-40px}.vmButton_Xr1Q6[data-position=bottom-right]{bottom:12px;right:12px}.vmButton_Xr1Q6[data-position=bottom-right].opened_gewqL{bottom:-40px}.vmButton_Xr1Q6>img{pointer-events:none;position:absolute;inset:0;border-radius:8px}.vmButton_Xr1Q6>div{transition:all .15s ease-in-out;position:absolute;inset:0;border-radius:8px;border:2px solid #00000057}.vmButton_Xr1Q6>span{left:-4px;top:-4px;pointer-events:none;position:absolute;display:flex;border-radius:8px;background:#005c26cf;padding:2px;font-weight:600;font-size:12px;line-height:12px;color:#2aff0a}.vmButton_Xr1Q6.opened_gewqL{pointer-events:none}.vmButton_Xr1Q6:not(.isConnected_tjs3F){filter:grayscale(1)}.closePopupButton_-08HG{width:28px;padding:6px}.hierarchyButton_h3FD7{width:18px;height:18px;padding:2px;border-radius:6px}.hierarchyButton_h3FD7.active_4JTx5{background:#f0f0f01f}.vmPopup_Q4l4j{position:fixed;z-index:999999;width:520px;border-radius:8px;height:calc(100vh - 24px);width:calc(100vw - 34px);max-width:520px}.vmPopup_Q4l4j[data-position=top-right],.vmPopup_Q4l4j[data-position=undefined]{top:12px;right:12px}.vmPopup_Q4l4j[data-position=top-left]{top:12px;left:12px}.vmPopup_Q4l4j[data-position=bottom-left]{bottom:12px;left:12px}.vmPopup_Q4l4j[data-position=bottom-right]{bottom:12px;right:12px}.treeItemHeader_9gR6Q{display:flex;align-items:center;gap:4px;margin:auto 0;cursor:pointer;background:#1e1e1e;z-index:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.treeItemLabel_eiMgP{padding:0 4px;border-radius:4px}.treeItemMetaText_cmfX0{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.treeItem_sRXPA{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:pre;background:#1e1e1e;height:22px;display:flex;flex-direction:row;align-items:center;padding-left:calc(0px + (var(--level) * 20px));position:sticky;top:-8px;z-index:1}.treeItem_sRXPA:not([data-fitted=true])>header{opacity:.6}.vmTreeItem_t-7jc .treeItemLabel_eiMgP{background:#0f6013}.vmTreeItem_t-7jc .treeItemMetaText_cmfX0{color:#5ab65e}.extrasItem_MI9Fa .treeItemLabel_eiMgP{background:#6b6902}.expandButton_EObqt{color:#a0a0a0;opacity:1!important;width:16px;height:16px;font-weight:700;cursor:pointer}.expandButton_EObqt.expanded_uFpb7{color:#b8b8b8;transform:rotate(90deg)}.expandButton_EObqt.disabled_IDojS{opacity:.35!important}.iconToggleButton_R48wm{display:flex;align-items:center;gap:2px;position:relative;height:20px;outline:none}.activePosition_IXsRn{position:absolute;height:16px;width:16px;padding:1px;box-sizing:content-box;background:#515151;border-radius:4px;transition:all 149ms ease;transform:translate(calc(20px * var(--index)))}.option_a5IcR{padding:1px;z-index:1;width:18px;height:18px;display:flex;align-items:center;justify-content:center}.option_a5IcR>svg{width:14px;height:14px}.property_tyrFk{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:pre;background:#1e1e1e;height:22px;display:flex;flex-direction:row;align-items:center;position:relative;color:#616161;padding-left:calc(28px + (var(--level) * 15px))}.property_tyrFk.expandable_ZtNTw{cursor:pointer}.property_tyrFk[data-fitted=false]{opacity:.5}.property_tyrFk.instance_aPKFv{--value-color: rgb(186 130 190)}.property_tyrFk.primitive_mOPtu.boolean_H-c-u,.property_tyrFk.primitive_mOPtu.number_Mk-lR,.property_tyrFk.primitive_mOPtu.object_rbtD2,.property_tyrFk.primitive_mOPtu.undefined_xHzJR,.property_tyrFk.primitive_mOPtu.bigint_vEvWZ,.property_tyrFk.primitive_mOPtu.symbol_izwyn{--value-color: rgb(89, 153, 205)}.primitive_mOPtu.string_qjuUu{--value-color: #af7249}.propertyName_gpj0H{color:#ccc}.propertyMeta_xSfkm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.propertyValue_QT-FH{color:var(--value-color, #616161);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.propertyValue_QT-FH:has(+.propertyName_gpj0H){margin-right:4px}.vmContent_TIK57{color:#ccc;background:#1e1e1e;overflow:auto;display:flex;flex-direction:column}.vmContentHeader_M1JNM{display:flex;justify-content:space-between;align-items:center;height:32px;padding-left:8px;font-weight:600}.vmContentHeaderLogo_FRJDO{width:16px;margin-right:6px}.vmContentHeaderTitle_lYmde{font-size:16px;margin-right:auto}.vmContentControlPanel_CgUN9{padding:0 8px;width:100%;background:#1e1e1e;display:flex;flex-direction:row;gap:4px}.vmContentControlPanelActions_lONbA{display:flex;flex-direction:row;align-items:center}.hiearchyToggleButton_0FTG-{display:flex}.vmContentHeaderBaseActions_qc7CI{display:flex;flex-direction:row;gap:4px;height:16px;align-items:center;margin-left:6px;margin-right:auto}.vmContentInput_29GM1{display:flex;position:relative;flex:1}.vmContentInput_29GM1>svg{position:absolute;width:16px;inset:50% 0;transform:translate(6px,-50%);pointer-events:none;opacity:.7}.vmContentInput_29GM1>input{background:#343434;border-radius:4px;outline:0;width:100%;padding:3px 26px;font-size:14px;text-overflow:ellipsis}.vmContentInput_29GM1>button{position:absolute;right:6px;width:16px;transform:translate(4px,-50%);top:50%;opacity:.6;display:none}.vmContentInput_29GM1.filled_6JZa0>svg{opacity:.9}.vmContentInput_29GM1.filled_6JZa0>button{display:block}.vmContentTree_BETR6{display:flex;flex-direction:column;padding:8px;overflow:auto;scrollbar-width:thin;scrollbar-color:#81818170 #1e1e1e}.vmContentTree_BETR6:hover{scrollbar-color:#818181 #1e1e1e}")),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}}();
+!function(){"use strict";try{if("undefined"!=typeof document){var t=document.createElement("style");t.appendChild(document.createTextNode(".root_Xsw1F{display:contents}.root_Xsw1F *{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:14px}.vmButton_Xr1Q6{position:fixed;z-index:999999;width:36px;height:36px;cursor:pointer;border-radius:8px;outline:0;transition:all .15s ease-in-out}.vmButton_Xr1Q6[data-position=top-right],.vmButton_Xr1Q6[data-position=undefined]{top:12px;right:12px}.vmButton_Xr1Q6[data-position=top-right].opened_gewqL,.vmButton_Xr1Q6[data-position=undefined].opened_gewqL{top:-40px}.vmButton_Xr1Q6[data-position=top-left]{top:12px;left:12px}.vmButton_Xr1Q6[data-position=top-left].opened_gewqL{top:-40px}.vmButton_Xr1Q6[data-position=bottom-left]{bottom:12px;left:12px}.vmButton_Xr1Q6[data-position=bottom-left].opened_gewqL{bottom:-40px}.vmButton_Xr1Q6[data-position=bottom-right]{bottom:12px;right:12px}.vmButton_Xr1Q6[data-position=bottom-right].opened_gewqL{bottom:-40px}.vmButton_Xr1Q6>img{pointer-events:none;position:absolute;inset:0;border-radius:8px}.vmButton_Xr1Q6>div{transition:all .15s ease-in-out;position:absolute;inset:0;border-radius:8px;border:2px solid #00000057}.vmButton_Xr1Q6>span{left:-4px;top:-4px;pointer-events:none;position:absolute;display:flex;border-radius:8px;background:#005c26cf;padding:2px;font-weight:600;font-size:12px;line-height:12px;color:#2aff0a}.vmButton_Xr1Q6.opened_gewqL{pointer-events:none}.vmButton_Xr1Q6:not(.isConnected_tjs3F){filter:grayscale(1)}.closePopupButton_-08HG{width:28px;padding:6px}.hierarchyButton_h3FD7{width:18px;height:18px;padding:2px;border-radius:6px}.hierarchyButton_h3FD7.active_4JTx5{background:#f0f0f01f}.vmPopup_Q4l4j{position:fixed;z-index:999999;width:520px;border-radius:8px;height:calc(100vh - 24px);width:calc(100vw - 34px);max-width:520px}.vmPopup_Q4l4j[data-position=top-right],.vmPopup_Q4l4j[data-position=undefined]{top:12px;right:12px}.vmPopup_Q4l4j[data-position=top-left]{top:12px;left:12px}.vmPopup_Q4l4j[data-position=bottom-left]{bottom:12px;left:12px}.vmPopup_Q4l4j[data-position=bottom-right]{bottom:12px;right:12px}.treeItemHeader_9gR6Q{display:flex;align-items:center;gap:4px;margin:auto 0;cursor:pointer;background:#1e1e1e;z-index:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.treeItemLabel_eiMgP{padding:0 4px;border-radius:4px}.treeItemMetaText_cmfX0{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.treeItem_sRXPA{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:pre;background:#1e1e1e;height:22px;display:flex;flex-direction:row;align-items:center;padding-left:calc(0px + (var(--level) * 20px));position:sticky;top:-8px;z-index:1}.treeItem_sRXPA:not([data-fitted=true])>header{opacity:.6}.vmTreeItem_t-7jc .treeItemLabel_eiMgP{background:#0f6013}.vmTreeItem_t-7jc .treeItemMetaText_cmfX0{color:#5ab65e}.extrasItem_MI9Fa .treeItemLabel_eiMgP{background:#6b6902}.expandButton_EObqt{color:#a0a0a0;opacity:1!important;width:16px;height:16px;font-weight:700;cursor:pointer}.expandButton_EObqt.expanded_uFpb7{color:#b8b8b8;transform:rotate(90deg)}.expandButton_EObqt.disabled_IDojS{opacity:.35!important}.iconToggleButton_R48wm{display:flex;align-items:center;gap:2px;position:relative;height:20px;outline:none}.activePosition_IXsRn{position:absolute;height:16px;width:16px;padding:1px;box-sizing:content-box;background:#515151;border-radius:4px;transition:all 149ms ease;transform:translate(calc(20px * var(--index)))}.option_a5IcR{padding:1px;z-index:1;width:18px;height:18px;display:flex;align-items:center;justify-content:center}.option_a5IcR>svg{width:14px;height:14px}.property_tyrFk{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:pre;background:#1e1e1e;height:22px;display:flex;flex-direction:row;align-items:center;position:relative;color:#616161;padding-left:calc(28px + (var(--level) * 15px))}.property_tyrFk.expandable_ZtNTw{cursor:pointer}.property_tyrFk[data-fitted=false]{opacity:.5}.property_tyrFk.instance_aPKFv{--value-color: rgb(186 130 190)}.property_tyrFk.primitive_mOPtu.boolean_H-c-u,.property_tyrFk.primitive_mOPtu.number_Mk-lR,.property_tyrFk.primitive_mOPtu.object_rbtD2,.property_tyrFk.primitive_mOPtu.undefined_xHzJR,.property_tyrFk.primitive_mOPtu.bigint_vEvWZ,.property_tyrFk.primitive_mOPtu.symbol_izwyn{--value-color: rgb(89, 153, 205)}.primitive_mOPtu.string_qjuUu{--value-color: #af7249}.propertyName_gpj0H{color:#ccc}.propertyMeta_xSfkm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.propertyValue_QT-FH{color:var(--value-color, #616161);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.propertyValue_QT-FH:has(+.propertyName_gpj0H){margin-right:4px}.vmContent_TIK57{color:#ccc;background:#1e1e1e;overflow:auto;display:flex;flex-direction:column}.vmContentHeader_M1JNM{display:flex;justify-content:space-between;align-items:center;height:32px;padding-left:8px;font-weight:600}.vmContentHeaderLogo_FRJDO{width:16px;margin-right:6px}.vmContentHeaderTitle_lYmde{font-size:16px;margin-right:auto}.vmContentControlPanel_CgUN9{padding:0 8px;width:100%;background:#1e1e1e;display:flex;flex-direction:row;gap:4px}.vmContentControlPanelActions_lONbA{display:flex;flex-direction:row;align-items:center}.hiearchyToggleButton_0FTG-{display:flex}.vmContentHeaderBaseActions_qc7CI{display:flex;flex-direction:row;gap:4px;height:16px;align-items:center;margin-left:6px;margin-right:auto}.vmContentInput_29GM1{display:flex;position:relative;flex:1}.vmContentInput_29GM1>svg{position:absolute;width:16px;inset:50% 0;transform:translate(6px,-50%);pointer-events:none;opacity:.7}.vmContentInput_29GM1>input{background:#343434;border-radius:4px;outline:0;width:100%;padding:3px 26px;font-size:14px;text-overflow:ellipsis}.vmContentInput_29GM1>button{position:absolute;right:6px;width:16px;transform:translate(4px,-50%);top:50%;opacity:.6;display:none}.vmContentInput_29GM1.filled_6JZa0>svg{opacity:.9}.vmContentInput_29GM1.filled_6JZa0>button{display:block}.vmContentTree_BETR6{display:flex;flex-direction:column;padding:8px;overflow:auto;scrollbar-width:thin;scrollbar-color:#81818170 #1e1e1e}.vmContentTree_BETR6:hover{scrollbar-color:#818181 #1e1e1e}")),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}}();
 function getDefaultExportFromCjs(x2) {
   return x2 && x2.__esModule && Object.prototype.hasOwnProperty.call(x2, "default") ? x2["default"] : x2;
 }
@@ -31321,10 +31321,14 @@ class ExtrasItemRenderVM extends ViewModelImpl {
 class DevtoolsClientVM extends ViewModelImpl {
   devtools = this.payload.devtools;
   handleToggleOpen = () => {
-    this.devtools.isPopupOpened = !this.devtools.isPopupOpened;
+    if (this.devtools.isPopupOpened) {
+      this.devtools.hidePopup();
+    } else {
+      this.devtools.showPopup();
+    }
   };
   handleClosePopupClick = () => {
-    this.devtools.isPopupOpened = false;
+    this.devtools.hidePopup();
   };
   willMount() {
     makeObservable(this, {
@@ -36937,25 +36941,29 @@ class KeyboardHandler2 extends KeyboardHandler$1 {
         {
           shortcuts: ["Ctrl+F12"],
           action: () => {
-            devtools.isPopupOpened = !devtools.isPopupOpened;
+            if (devtools.isPopupOpened) {
+              devtools.hidePopup();
+            } else {
+              devtools.showPopup();
+            }
           }
         },
         {
           shortcuts: ["Escape"],
           action: () => {
-            devtools.isPopupOpened = false;
+            devtools.hidePopup();
           }
         },
         {
           shortcuts: ["Ctrl+ArrowLeft"],
           action: () => {
-            devtools.isAllVmsExpandedByDefault = false;
+            devtools.collapseAllVms();
           }
         },
         {
           shortcuts: ["Ctrl+ArrowRight"],
           action: () => {
-            devtools.isAllVmsExpandedByDefault = true;
+            devtools.expandAllVMs();
           }
         },
         {
@@ -37212,11 +37220,10 @@ class ViewModelDevtools {
     this.config = config;
     this.isPopupOpened = !!this.config.defaultIsOpened;
     this.displayType = "popup";
-    this.extras = this.config.extras;
     this.vmStore = new ViewModelStoreImpl();
-    this.projectVmStore = this.config.viewModels;
-    this.expandedVmsSet = observable.set();
-    this.isAllVmsExpandedByDefault = true;
+    this.setExtras(this.config.extras);
+    this.setStore(this.config.viewModels);
+    this.expandedVmsMap = observable.map();
     this.presentationMode = "tree";
     this.expandedVmItemsPaths = observable.set();
     this.logoUrl = "data:image/png;base64,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";
@@ -37227,18 +37234,21 @@ class ViewModelDevtools {
     this.searchEngine = new SearchEngine();
     makeObservable(this, {
       isPopupOpened: observable.ref,
-      isAllVmsExpandedByDefault: observable,
       projectVmStore: observable.ref,
       presentationMode: observable.ref,
       extras: observable.ref,
       setStore: action,
       setExtras: action,
+      showPopup: action,
+      hidePopup: action,
       handleChangePresentationMode: action,
       handleExpandVmPropertyClick: action,
+      expandAllVMs: action,
+      collapseAllVms: action,
       handleExpandExtraPropertyClick: action,
       allVms: computed.struct,
       isActive: computed,
-      vmTree: computed.struct,
+      vmsData: computed.struct,
       rootVms: computed.struct
     });
     this.render();
@@ -37248,7 +37258,6 @@ class ViewModelDevtools {
   vmStore;
   projectVmStore;
   extras;
-  isAllVmsExpandedByDefault;
   expandedVmItemsPaths;
   logoUrl;
   inputRef;
@@ -37256,7 +37265,7 @@ class ViewModelDevtools {
   keyboardHandler;
   searchEngine;
   presentationMode;
-  expandedVmsSet;
+  expandedVmsMap;
   scrollListRef;
   autoscrollTimeout;
   get allVms() {
@@ -37272,14 +37281,12 @@ class ViewModelDevtools {
       return !vmParams || vmParams.parentViewModel == null;
     });
   }
-  get vmTree() {
-    const flattenTreeItems = [];
-    const result = [];
+  get vmsData() {
+    const flatten = [];
+    const tree = [];
     const createTreeItem = (vm, inputDepth) => {
       const depth = this.presentationMode === "list" ? 0 : inputDepth;
-      const alreadyExistVmTreeItem = flattenTreeItems.find(
-        (it) => it.vm === vm
-      );
+      const alreadyExistVmTreeItem = flatten.find((it) => it.vm === vm);
       if (alreadyExistVmTreeItem) {
         return alreadyExistVmTreeItem;
       }
@@ -37299,7 +37306,14 @@ class ViewModelDevtools {
           id: (vm.id || "").toLowerCase().trim()
         }
       };
-      flattenTreeItems.push(treeItem2);
+      untracked(() => {
+        if (!this.expandedVmsMap.has(treeItem2.key)) {
+          runInAction(() => {
+            this.expandedVmsMap.set(treeItem2.key, true);
+          });
+        }
+      });
+      flatten.push(treeItem2);
       const collectedChildren = this.allVms.filter((maybeChildVm) => {
         const params = this.getVmParams(maybeChildVm);
         return params?.parentViewModel && params.parentViewModel === vm;
@@ -37310,10 +37324,16 @@ class ViewModelDevtools {
     this.rootVms.forEach((vm) => {
       const item = createTreeItem(vm, 0);
       if (item) {
-        result.push(item);
+        tree.push(item);
       }
     });
-    return result;
+    return {
+      flatten,
+      tree
+    };
+  }
+  get vmTree() {
+    return this.vmsData.tree;
   }
   get isActive() {
     return !!this.projectVmStore || Object.keys(this.extras || {}).length > 0;
@@ -37322,7 +37342,7 @@ class ViewModelDevtools {
     return this.config.containerId ?? "view-model-devtools";
   }
   isExpanded(vmItem) {
-    return this.expandedVmsSet.has(vmItem.key) || this.searchEngine.isActive || this.isAllVmsExpandedByDefault;
+    return this.expandedVmsMap.get(vmItem.key) || this.searchEngine.isActive;
   }
   checkIsVmPathExpanded(vmItem, path) {
     const searchResult = this.searchEngine.getSearchResult({
@@ -37363,11 +37383,7 @@ class ViewModelDevtools {
     }
   }
   handleVmItemHeaderClick(vmItem) {
-    if (this.isExpanded(vmItem)) {
-      this.expandedVmsSet.delete(vmItem.key);
-    } else {
-      this.expandedVmsSet.add(vmItem.key);
-    }
+    this.expandedVmsMap.set(vmItem.key, !this.isExpanded(vmItem));
   }
   isExpandable(vmItem) {
     return vmItem.children.length > 0 && this.presentationMode !== "list";
@@ -37386,10 +37402,24 @@ class ViewModelDevtools {
   }
   handleChangePresentationMode = (mode) => {
     this.presentationMode = mode === "list" ? "list" : "tree";
-    this.isAllVmsExpandedByDefault = true;
     this.expandedVmItemsPaths.clear();
-    this.expandedVmsSet.clear();
+    this.expandedVmsMap.clear();
   };
+  expandAllVMs() {
+    this.expandedVmsMap.replace(
+      this.vmsData.flatten.map((it) => [it.key, true])
+    );
+  }
+  collapseAllVms() {
+    this.expandedVmsMap.clear();
+  }
+  showPopup() {
+    this.isPopupOpened = true;
+    this.expandAllVMs();
+  }
+  hidePopup() {
+    this.isPopupOpened = false;
+  }
   init() {
     reaction(
       () => this.searchEngine.formattedSearchText,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mobx-view-model-devtools",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "description": "",
   "keywords": [],
   "author": "js2me",