Update search items when item is added or removed to the popover

packages/ui-kit/package.json

@@ -2,7 +2,7 @@
   "name": "@editorjs/ui-kit",
   "description": "UI Components for Editor.js",
   "packageManager": "yarn@4.4.0",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/src/index.d.ts",

packages/ui-kit/src/popover/components/search-input/search-input.ts

@@ -82,6 +82,14 @@ export class SearchInput extends EventsDispatcher<SearchInputEventMap> {
     });
   }
 
+  /**
+   * Update search items in case they have been changed
+   * @param items - new items to set
+   */
+  public updateItems(items: SearchableItem[]): void {
+    this.items = items;
+  }
+
   /**
    * Returns search field element
    */
@@ -131,6 +139,6 @@ export class SearchInput extends EventsDispatcher<SearchInputEventMap> {
     const text = item.title === undefined ? '' : item.title.toLowerCase();
     const query = this.searchQuery?.toLowerCase();
 
-    return query !== undefined && query === '' ? text.includes(query) : false;
+    return query !== undefined ? text.includes(query) : false;
   }
 }

packages/ui-kit/src/popover/popover-desktop.ts

@@ -1,6 +1,6 @@
 import { Flipper } from '@editorjs/dom';
 import { PopoverAbstract } from './popover-abstract';
-import type { PopoverItemRenderParamsMap } from './types';
+import type { PopoverItemParams, PopoverItemRenderParamsMap } from './types';
 import type { PopoverItem } from './components/popover-item';
 import { PopoverItemSeparator, css as popoverItemCls } from './components/popover-item';
 import type { PopoverParams } from './types';
@@ -168,6 +168,30 @@ export class PopoverDesktop extends PopoverAbstract {
     this.previouslyHoveredItem = null;
   };
 
+  /**
+   * Override for addItem method to update search items
+   * @param params - parameters of an item to add
+   */
+  public addItem(params: PopoverItemParams): void {
+    super.addItem(params);
+
+    if (this.search !== undefined) {
+      this.search.updateItems(this.itemsDefault);
+    }
+  }
+
+  /**
+   * Override for addItem method to update search items
+   * @param name - name of the item to be removed
+   */
+  public removeItemByName(name: string): void {
+    super.removeItemByName(name);
+
+    if (this.search !== undefined) {
+      this.search.updateItems(this.itemsDefault);
+    }
+  }
+
   /**
    * Clears memory
    */