mobx-view-model-devtools 0.0.43 → 0.0.44

package/index.d.ts

@@ -101,6 +101,7 @@ interface SearchSuggestion {
     value: string;
     suffix: string;
     vmName: string;
+    ownerKey: string;
 }
 declare class SearchEngine {
     private config;
@@ -110,6 +111,8 @@ declare class SearchEngine {
     selectedSuggestionIndex: number;
     isSearchInputFocused: boolean;
     isSuggestionsDismissed: boolean;
+    selectedPathOwnerKey: string | null;
+    selectedPathSegment: string | null;
     searchCacheKey: string;
     isSearching: boolean;
     private searchTextToSearchTimeout;
@@ -128,6 +131,8 @@ declare class SearchEngine {
     get isSearchTextDebouncing(): boolean;
     get shouldShowSuggestions(): boolean;
     get suggestionItems(): SearchSuggestion[];
+    private getActiveSearchText;
+    private buildSuggestionItemsForText;
     get selectedSuggestion(): SearchSuggestion | null;
     /**
      * Суффикс выбранного свойства, которое начинается с последнего сегмента.
@@ -135,11 +140,25 @@ declare class SearchEngine {
      * Например: ввод "_pay" → suggestionSuffix = "load" (от "_payload")
      */
     get suggestionSuffix(): string;
-    applySuggestion: (suggestion: SearchSuggestion) => void;
+    selectSuggestionAtIndex: (index: number) => void;
+    applySuggestion: (suggestion: SearchSuggestion, options?: {
+        commitOwner?: boolean;
+        dismissSuggestions?: boolean;
+    }) => void;
+    applySuggestionFromClick: (suggestion: SearchSuggestion, index: number) => void;
     handleSearchInput: (e: ChangeEvent<HTMLInputElement>) => void;
     handleSearchInputFocus: (_e: FocusEvent<HTMLInputElement>) => void;
     handleSearchInputBlur: (_e: FocusEvent<HTMLInputElement>) => void;
     handleKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void;
+    private commitSuggestionOwner;
+    private handlePathOwnerSelectionFromInput;
+    /**
+     * При вводе точки debounce ещё не применил searchTextToSearch,
+     * поэтому owner берём из подсказок предыдущего сегмента.
+     * Если пользователь явно не выбирал — берём exact-match `service`, иначе первый в списке.
+     */
+    private getFirstPathSegment;
+    private resolvePathOwnerSuggestion;
     private clearSearchDebounce;
     private scheduleSearchTextDebounce;
     private scheduleScrollToFirstSearchMatch;
@@ -157,6 +176,8 @@ declare class SearchEngine {
     private getOwnerMatchedPathCandidates;
     private getPropertyPathCandidates;
     private getDirectPropertyChildren;
+    private isOwnerAllowedForFirstPathSegment;
+    private isPathOwnerLockedToAnotherOwner;
     /**
      * Уже введённый path-сегмент должен совпадать строго:
      * `product.` заходит только в `product`, а не в `productAsyncTasks`
@@ -164,6 +185,7 @@ declare class SearchEngine {
      */
     private getPathMatchingProps;
     private getOwnerVMName;
+    private getOwnerKey;
     /**
      * Навигация вглубь по цепочке свойств.
      * Возвращает свойства на нужной глубине.

package/index.js

@@ -38024,7 +38024,7 @@ function getAllKeys(instance2) {
     }
     currentPrototype = nextPrototype;
   }
-  return Array.from(keysSet);
+  return [...keysSet];
 }
 class MetaListItem extends ListItem {
   constructor(devtools, key, content, _depth) {
@@ -39747,14 +39747,13 @@ const skipEvent = (e) => {
 };
 const FunctionPropertyContent = observer(
   ({ item }) => {
-    const argLabels = Array.from(
-      { length: item.data.length },
+    const argLabels = [...Array(item.data.length)].map(
       (_14, i) => `arg${i + 1}`
     );
     return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(jsxDevRuntimeExports.Fragment, { children: [
       /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css$1.propertyName, children: item.property }, void 0, false, {
         fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/list-items/property-list-item-render/function.tsx",
-        lineNumber: 15,
+        lineNumber: 14,
         columnNumber: 9
       }, void 0),
       item.isEditMode ? /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(jsxDevRuntimeExports.Fragment, { children: [
@@ -39772,7 +39771,7 @@ const FunctionPropertyContent = observer(
           false,
           {
             fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/list-items/property-list-item-render/function.tsx",
-            lineNumber: 19,
+            lineNumber: 18,
             columnNumber: 13
           },
           void 0
@@ -39780,12 +39779,12 @@ const FunctionPropertyContent = observer(
         `)`
       ] }, void 0, true, {
         fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/list-items/property-list-item-render/function.tsx",
-        lineNumber: 17,
+        lineNumber: 16,
         columnNumber: 11
       }, void 0) : `(${argLabels.join(", ")})`
     ] }, void 0, true, {
       fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/list-items/property-list-item-render/function.tsx",
-      lineNumber: 14,
+      lineNumber: 13,
       columnNumber: 7
     }, void 0);
   }
@@ -40193,7 +40192,7 @@ const Notifications = withViewModel(NotificationsVM, ({ model }) => {
   if (!model.items.size) {
     return null;
   }
-  return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { className: css.notifications, children: Array.from(model.items.values()).map((item) => /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { className: css.notification, children: item.title }, item.id, false, {
+  return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { className: css.notifications, children: [...model.items.values()].map((item) => /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { className: css.notification, children: item.title }, item.id, false, {
     fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/notifications/index.tsx",
     lineNumber: 13,
     columnNumber: 9
@@ -40387,9 +40386,15 @@ const VmDevtoolsContent = withViewModel(
                 /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { className: css$2.inputSuggestionsList, children: devtools.searchEngine.suggestionItems.map((suggestion, index) => /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
                   "div",
                   {
-                    onClick: (e) => {
+                    onMouseEnter: () => {
+                      devtools.searchEngine.selectSuggestionAtIndex(index);
+                    },
+                    onMouseDown: (e) => {
                       e.preventDefault();
-                      devtools.searchEngine.applySuggestion(suggestion);
+                      devtools.searchEngine.applySuggestionFromClick(
+                        suggestion,
+                        index
+                      );
                     },
                     className: cx(
                       css$2.inputSuggestionItem,
@@ -40398,17 +40403,17 @@ const VmDevtoolsContent = withViewModel(
                     children: [
                       !devtools.searchEngine.isNestedSearch && /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css$2.inputSuggestionOwner, children: suggestion.vmName }, void 0, false, {
                         fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
-                        lineNumber: 132,
+                        lineNumber: 138,
                         columnNumber: 27
                       }, void 0),
                       /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css$2.inputSuggestionValue, children: suggestion.value }, void 0, false, {
                         fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
-                        lineNumber: 136,
+                        lineNumber: 142,
                         columnNumber: 25
                       }, void 0)
                     ]
                   },
-                  `${suggestion.vmName}/${suggestion.value}`,
+                  `${suggestion.ownerKey}/${suggestion.value}`,
                   true,
                   {
                     fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
@@ -40451,7 +40456,7 @@ const VmDevtoolsContent = withViewModel(
                 false,
                 {
                   fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
-                  lineNumber: 150,
+                  lineNumber: 156,
                   columnNumber: 11
                 },
                 void 0
@@ -40461,7 +40466,7 @@ const VmDevtoolsContent = withViewModel(
             false,
             {
               fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
-              lineNumber: 146,
+              lineNumber: 152,
               columnNumber: 9
             },
             void 0
@@ -40685,6 +40690,8 @@ class SearchEngine {
       selectedSuggestionIndex: observable.ref,
       isSearchInputFocused: observable.ref,
       isSuggestionsDismissed: observable.ref,
+      selectedPathOwnerKey: observable.ref,
+      selectedPathSegment: observable.ref,
       formattedSearchText: computed,
       segments: computed.struct,
       endsWithDot: computed,
@@ -40695,7 +40702,9 @@ class SearchEngine {
       suggestionItems: computed.struct,
       selectedSuggestion: computed,
       suggestionSuffix: computed,
+      selectSuggestionAtIndex: action,
       applySuggestion: action,
+      applySuggestionFromClick: action,
       handleSearchInput: action,
       handleSearchInputFocus: action,
       handleSearchInputBlur: action,
@@ -40709,6 +40718,8 @@ class SearchEngine {
   selectedSuggestionIndex = 0;
   isSearchInputFocused = false;
   isSuggestionsDismissed = false;
+  selectedPathOwnerKey = null;
+  selectedPathSegment = null;
   searchCacheKey = "";
   isSearching = false;
   searchTextToSearchTimeout = null;
@@ -40743,14 +40754,26 @@ class SearchEngine {
     return this.isSearchInputFocused && !this.isSuggestionsDismissed && this.suggestionItems.length > 0;
   }
   get suggestionItems() {
-    if (this.isSearchTextDebouncing) return [];
-    if (!this.isActive) return [];
-    const { segments } = this;
+    if (this.isSearchTextDebouncing && !this.searchText.includes(".")) return [];
+    return this.buildSuggestionItemsForText(this.getActiveSearchText());
+  }
+  getActiveSearchText() {
+    if (this.searchText.includes(".")) {
+      return this.searchText;
+    }
+    return this.searchTextToSearch;
+  }
+  buildSuggestionItemsForText(text2) {
+    const formatted = text2.toLowerCase().trim();
+    if (!formatted) return [];
+    const all = formatted.split(".");
+    const segments = all[all.length - 1] === "" ? all.slice(0, -1) : all;
     if (segments.length === 0) return [];
-    const completingSegment = this.endsWithDot ? "" : segments[segments.length - 1];
-    if (!this.endsWithDot && !completingSegment) return [];
+    const endsWithDot = text2.trim().endsWith(".");
+    const completingSegment = endsWithDot ? "" : segments[segments.length - 1];
+    if (!endsWithDot && !completingSegment) return [];
     const rootItems = this.config.getRootItems();
-    const pathSegments = this.endsWithDot ? segments : segments.slice(0, -1);
+    const pathSegments = endsWithDot ? segments : segments.slice(0, -1);
     const candidates = this.getCandidatePropsAtDepth(rootItems, pathSegments);
     const suggestionsByVM = /* @__PURE__ */ new Map();
     const seen = /* @__PURE__ */ new Set();
@@ -40758,7 +40781,8 @@ class SearchEngine {
       const nameLower = prop.searchData.property;
       const nameOriginal = prop.property ?? "";
       const vmName = this.getOwnerVMName(prop);
-      const uniqueKey = `${vmName}/${nameLower}`;
+      const ownerKey = this.getOwnerKey(prop);
+      const uniqueKey = `${ownerKey}/${nameLower}`;
       if (nameLower.startsWith(completingSegment) && nameLower.length >= completingSegment.length) {
         if (seen.has(uniqueKey)) continue;
         seen.add(uniqueKey);
@@ -40766,7 +40790,8 @@ class SearchEngine {
         suggestions.push({
           value: nameOriginal,
           suffix: nameOriginal.slice(completingSegment.length),
-          vmName
+          vmName,
+          ownerKey
         });
         suggestionsByVM.set(vmName, suggestions);
       }
@@ -40806,20 +40831,45 @@ class SearchEngine {
   get suggestionSuffix() {
     return this.selectedSuggestion?.suffix ?? "";
   }
-  applySuggestion = (suggestion) => {
+  selectSuggestionAtIndex = (index) => {
+    if (index < 0 || index >= this.suggestionItems.length) return;
+    this.selectedSuggestionIndex = index;
+    this.isSuggestionsDismissed = false;
+  };
+  applySuggestion = (suggestion, options) => {
     this.clearSearchDebounce();
+    const hadPathSyntax = this.searchText.includes(".");
     const nextSearchText = this.searchText + suggestion.suffix;
     this.searchText = nextSearchText;
     this.searchTextToSearch = nextSearchText;
     this.selectedSuggestionIndex = 0;
-    this.isSuggestionsDismissed = false;
+    this.isSuggestionsDismissed = options?.dismissSuggestions ?? false;
+    const lockedSegment = hadPathSyntax ? this.getFirstPathSegment(nextSearchText) : void 0;
+    if (options?.commitOwner) {
+      this.commitSuggestionOwner(suggestion, lockedSegment);
+    } else if (!hadPathSyntax) {
+      this.commitSuggestionOwner(suggestion);
+    } else if (!this.selectedPathOwnerKey) {
+      this.commitSuggestionOwner(suggestion, lockedSegment);
+    }
     this.searchInputRef.current?.focus();
     this.scheduleScrollToFirstSearchMatch();
   };
+  applySuggestionFromClick = (suggestion, index) => {
+    this.selectSuggestionAtIndex(index);
+    this.applySuggestion(suggestion, { commitOwner: true });
+  };
   handleSearchInput = (e) => {
+    const previousSearchText = this.searchText;
+    const previousSelectedSuggestion = this.selectedSuggestion;
     this.searchText = e.target.value;
-    this.selectedSuggestionIndex = 0;
     this.isSuggestionsDismissed = false;
+    this.handlePathOwnerSelectionFromInput(
+      previousSearchText,
+      this.searchText,
+      previousSelectedSuggestion
+    );
+    this.selectedSuggestionIndex = 0;
     this.scheduleSearchTextDebounce();
   };
   handleSearchInputFocus = (_e) => {
@@ -40846,11 +40896,66 @@ class SearchEngine {
       this.selectedSuggestionIndex = (this.selectedSuggestionIndex - 1 + this.suggestionItems.length) % this.suggestionItems.length;
       return;
     }
-    if (e.key === "Tab" && this.suggestionSuffix) {
+    if ((e.key === "Tab" || e.key === "Enter") && this.selectedSuggestion) {
       e.preventDefault();
-      this.applySuggestion(this.selectedSuggestion);
+      this.applySuggestion(this.selectedSuggestion, {
+        dismissSuggestions: e.key === "Enter"
+      });
     }
   };
+  commitSuggestionOwner(suggestion, lockedSegment) {
+    this.selectedPathOwnerKey = suggestion.ownerKey;
+    this.selectedPathSegment = lockedSegment ?? suggestion.value.toLowerCase().trim();
+  }
+  handlePathOwnerSelectionFromInput(previousSearchText, nextSearchText, previousSelectedSuggestion) {
+    const addedDot = nextSearchText.endsWith(".") && nextSearchText === `${previousSearchText}.`;
+    const enteredPathSyntax = nextSearchText.includes(".") && !previousSearchText.includes(".");
+    if (addedDot || enteredPathSyntax) {
+      const pathSegment = this.getFirstPathSegment(
+        addedDot ? previousSearchText : nextSearchText
+      );
+      if (this.selectedPathOwnerKey && this.selectedPathSegment === pathSegment) {
+        this.searchTextToSearch = nextSearchText;
+        this.clearSearchDebounce();
+        return;
+      }
+      const suggestion = addedDot && previousSelectedSuggestion && previousSelectedSuggestion.value.toLowerCase() === pathSegment ? previousSelectedSuggestion : this.resolvePathOwnerSuggestion(
+        pathSegment,
+        this.selectedSuggestionIndex
+      );
+      if (suggestion) {
+        this.commitSuggestionOwner(suggestion, pathSegment);
+      }
+      this.searchTextToSearch = nextSearchText;
+      this.clearSearchDebounce();
+      return;
+    }
+    const firstSegment = nextSearchText.toLowerCase().trim().split(".")[0] ?? "";
+    if (!nextSearchText.includes(".") || !firstSegment || firstSegment !== this.selectedPathSegment) {
+      this.selectedPathOwnerKey = null;
+      this.selectedPathSegment = null;
+    }
+  }
+  /**
+   * При вводе точки debounce ещё не применил searchTextToSearch,
+   * поэтому owner берём из подсказок предыдущего сегмента.
+   * Если пользователь явно не выбирал — берём exact-match `service`, иначе первый в списке.
+   */
+  getFirstPathSegment(text2) {
+    return text2.toLowerCase().trim().split(".")[0] ?? "";
+  }
+  resolvePathOwnerSuggestion(pathSegment, selectedIndex) {
+    if (!pathSegment) return null;
+    const items = this.buildSuggestionItemsForText(pathSegment);
+    if (items.length === 0) return null;
+    const exactMatches = items.filter(
+      (item) => item.value.toLowerCase() === pathSegment
+    );
+    if (exactMatches.length > 0) {
+      return exactMatches[Math.min(selectedIndex, exactMatches.length - 1)] ?? exactMatches[0];
+    }
+    return items[Math.min(selectedIndex, items.length - 1)] ?? items[0];
+  }
   clearSearchDebounce() {
     if (this.searchTextToSearchTimeout) {
       clearTimeout(this.searchTextToSearchTimeout);
@@ -40933,6 +41038,7 @@ class SearchEngine {
     const firstSeg = pathSegments[0];
     const result = [];
     for (const vm of allVMs) {
+      if (!this.isOwnerAllowedForFirstPathSegment(vm, firstSeg)) continue;
       const directProps = this.getDirectPropertyChildren(vm);
       const firstSegmentIsExactProperty = directProps.some(
         (prop) => prop.searchData.property === firstSeg
@@ -40945,6 +41051,7 @@ class SearchEngine {
       }
     }
     for (const extra of extras) {
+      if (!this.isOwnerAllowedForFirstPathSegment(extra, firstSeg)) continue;
       const directProps = this.getDirectPropertyChildren(extra);
       const firstSegmentIsExactProperty = directProps.some(
         (prop) => prop.searchData.property === firstSeg
@@ -40975,6 +41082,15 @@ class SearchEngine {
       (child) => child instanceof PropertyListItem
     );
   }
+  isOwnerAllowedForFirstPathSegment(owner, firstSegment) {
+    if (!this.selectedPathOwnerKey || this.selectedPathSegment !== firstSegment) {
+      return true;
+    }
+    return owner.key === this.selectedPathOwnerKey;
+  }
+  isPathOwnerLockedToAnotherOwner(owner, firstSegment) {
+    return !this.isOwnerAllowedForFirstPathSegment(owner, firstSegment);
+  }
   /**
    * Уже введённый path-сегмент должен совпадать строго:
    * `product.` заходит только в `product`, а не в `productAsyncTasks`
@@ -40996,6 +41112,13 @@ class SearchEngine {
     }
     return "";
   }
+  getOwnerKey(item) {
+    let parent = item.parentListItem;
+    while (parent instanceof PropertyListItem) {
+      parent = parent.parentListItem;
+    }
+    return parent.key;
+  }
   /**
    * Навигация вглубь по цепочке свойств.
    * Возвращает свойства на нужной глубине.
@@ -41069,6 +41192,9 @@ class SearchEngine {
     return [item];
   }
   getExtraSearchItems(item) {
+    if (this.isPathOwnerLockedToAnotherOwner(item, this.segments[0] ?? "")) {
+      return [];
+    }
     const directProps = this.getDirectPropertyChildren(item);
     const matchesByProperty = directProps.some(
       (prop) => prop.searchData.property.includes(this.segments[0] ?? "")
@@ -41078,6 +41204,15 @@ class SearchEngine {
   }
   getVMSearchItems(vmItem) {
     const result = [];
+    const firstSeg = this.segments[0] ?? "";
+    if (this.isPathOwnerLockedToAnotherOwner(vmItem, firstSeg)) {
+      for (const child of vmItem.children) {
+        if (child instanceof VMListItem) {
+          result.push(...this.getVMSearchItems(child));
+        }
+      }
+      return result;
+    }
     if (!this.vmMatchesSearch(vmItem)) {
       for (const child of vmItem.children) {
         if (child instanceof VMListItem) {
@@ -41088,7 +41223,6 @@ class SearchEngine {
     }
     result.push(vmItem);
     const { segments } = this;
-    const firstSeg = segments[0] ?? "";
     const directProps = vmItem.children.filter(
       (c) => c instanceof PropertyListItem
     );
@@ -41144,6 +41278,9 @@ class SearchEngine {
     const { segments } = this;
     if (segments.length === 0) return true;
     const firstSegment = segments[0];
+    if (this.isPathOwnerLockedToAnotherOwner(item, firstSegment)) {
+      return false;
+    }
     if (item.searchData.name.includes(firstSegment) || item.searchData.id.includes(firstSegment)) {
       return true;
     }
@@ -41174,6 +41311,7 @@ class SearchEngine {
     const { segments } = this;
     if (segments.length === 0) return false;
     const firstSeg = segments[0];
+    if (this.isPathOwnerLockedToAnotherOwner(item, firstSeg)) return false;
     const hasPathSyntax = this.endsWithDot || segments.length > 1;
     const firstSegmentIsExactProperty = hasPathSyntax && item.children.some(
       (child) => child instanceof PropertyListItem && child.searchData.property === firstSeg
@@ -41195,6 +41333,7 @@ class SearchEngine {
       return false;
     }
     const firstSeg = segments[0];
+    if (this.isPathOwnerLockedToAnotherOwner(parent, firstSeg)) return false;
     const hasPathSyntax = this.endsWithDot || segments.length > 1;
     const parentDirectProps = this.getDirectPropertyChildren(parent);
     const firstSegmentIsExactProperty = hasPathSyntax && parentDirectProps.some((prop) => prop.searchData.property === firstSeg);
@@ -41244,6 +41383,7 @@ class SearchEngine {
         return true;
       }
       const firstSeg = segments[0];
+      if (this.isPathOwnerLockedToAnotherOwner(parent, firstSeg)) return false;
       const hasPathSyntax = this.endsWithDot || segments.length > 1;
       const parentDirectProps = this.getDirectPropertyChildren(parent);
       const firstSegmentIsExactProperty = hasPathSyntax && parentDirectProps.some((prop) => prop.searchData.property === firstSeg);
@@ -41286,6 +41426,8 @@ class SearchEngine {
     this.searchTextToSearch = "";
     this.selectedSuggestionIndex = 0;
     this.isSuggestionsDismissed = false;
+    this.selectedPathOwnerKey = null;
+    this.selectedPathSegment = null;
     this.focusInput();
   };
   focusInput = () => {

package/package.json

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