selective-ui 1.2.0 → 1.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "selective-ui",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "An overlay for the HTML select element.",
   "author": "Huỳnh Công Xuân Mai",
   "license": "MIT",

package/src/ts/adapter/mixed-adapter.ts

@@ -6,6 +6,7 @@ import { OptionView } from "../views/option-view";
 import { MixedItem, VisibilityStats } from "../types/core/base/mixed-adapter.type";
 import { IEventCallback } from "../types/utils/ievents.type";
 import { ImagePosition, LabelHalign, LabelValign } from "../types/views/view.option.type";
+import { Libs } from "../utils/libs";
 
 /**
  * @extends {Adapter<GroupModel|OptionModel>}
@@ -25,6 +26,21 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
     constructor(items: MixedItem[] = []) {
         super(items);
         this._buildFlatStructure();
+        
+        Libs.callbackScheduler.on(`sche_vis_${this.adapterKey}`, () => {
+            const visibleCount = this.flatOptions.filter((item) => item.visible).length;
+            const totalCount = this.flatOptions.length;
+
+            this._visibilityChangedCallbacks.forEach((callback) => {
+                callback({
+                    visibleCount,
+                    totalCount,
+                    hasVisible: visibleCount > 0,
+                    isEmpty: totalCount === 0,
+                });
+            });
+            Libs.callbackScheduler.run(`sche_vis_proxy_${this.adapterKey}`);
+        }, {debounce: 10});
     }
 
     /**
@@ -289,17 +305,7 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
      * Computes visible and total counts, then emits aggregated state.
      */
     private _notifyVisibilityChanged(): void {
-        const visibleCount = this.flatOptions.filter((item) => item.visible).length;
-        const totalCount = this.flatOptions.length;
-
-        this._visibilityChangedCallbacks.forEach((callback) => {
-            callback({
-                visibleCount,
-                totalCount,
-                hasVisible: visibleCount > 0,
-                isEmpty: totalCount === 0,
-            });
-        });
+        Libs.callbackScheduler.run(`sche_vis_${this.adapterKey}`);
     }
 
     /**

package/src/ts/components/selectbox.ts

@@ -251,6 +251,7 @@ export class SelectBox {
         }
 
         const optionAdapter = container.popup!.optionAdapter as MixedAdapter;
+        let hightlightTimer : ReturnType<typeof setTimeout> | null = null;
 
         const searchHandle = (keyword: string, isTrigger: boolean) => {
             if (!isTrigger && keyword === "") {
@@ -261,13 +262,17 @@ export class SelectBox {
                 searchController
                     .search(keyword)
                     .then((result: any) => {
-                        container.popup?.triggerResize?.();
-                        if (result?.hasResults) {
-                            setTimeout(() => {
-                                container.popup?.triggerResize?.();
-                                optionAdapter.resetHighlight();
-                            }, options.animationtime ? options.animationtime + 10 : 0);
-                        }
+                        clearTimeout(hightlightTimer!);
+                        Libs.callbackScheduler.on(`sche_vis_proxy_${optionAdapter.adapterKey}`, () => {
+                            container.popup?.triggerResize?.();
+
+                            if (result?.hasResults) {
+                                hightlightTimer = setTimeout(() => {
+                                    optionAdapter.resetHighlight();
+                                    container.popup?.triggerResize?.();
+                                }, options.animationtime ?? 0);
+                            }
+                        }, { debounce: 10 });
                     })
                     .catch((error: unknown) => {
                         console.error("Search error:", error);
@@ -279,15 +284,17 @@ export class SelectBox {
 
         searchbox.onSearch = (keyword: string, isTrigger: boolean) => {
             if (!searchController.compareSearchTrigger(keyword)) return;
+            if (searchHandleTimer) clearTimeout(searchHandleTimer);
 
             if (searchController.isAjax()) {
-                if (searchHandleTimer) clearTimeout(searchHandleTimer);
                 container.popup?.showLoading?.();
                 searchHandleTimer = setTimeout(() => {
                     searchHandle(keyword, isTrigger);
                 }, options.delaysearchtime ?? 0);
             } else {
-                searchHandle(keyword, isTrigger);
+                searchHandleTimer = setTimeout(() => {
+                    searchHandle(keyword, isTrigger);
+                }, 10);
             }
         };
 

package/src/ts/core/base/virtual-recyclerview.ts

@@ -696,6 +696,7 @@ export class VirtualRecyclerView<
         }
 
         const item = this.adapter!.items[index];
+        if (!item) return;
         const existing = this.created.get(index);
 
         if (existing) {

package/src/ts/core/search-controller.ts

@@ -223,10 +223,7 @@ export class SearchController {
         let hasVisibleItems = false;
 
         flatOptions.forEach((opt) => {
-            const text = String(opt.textContent ?? opt.text ?? "").toLowerCase();
-            const textNA = Libs.string2normalize(text);
-
-            const isVisible = lower === "" || text.includes(lower) || textNA.includes(lowerNA);
+            const isVisible = lower === "" || opt.textToFind.includes(lowerNA);
 
             opt.visible = isVisible;
             if (isVisible) hasVisibleItems = true;

package/src/ts/models/option-model.ts

@@ -6,12 +6,12 @@ import { OptionView } from "../views/option-view";
 import type { IEventCallback } from "../types/utils/ievents.type";
 import type { OptionViewTags } from "../types/views/view.option.type";
 import type { GroupModel } from "./group-model";
-import { DefaultConfig } from "../types/utils/istorage.type";
+import { SelectiveOptions } from "../types/utils/selective.type";
 
 /**
- * @extends {Model<HTMLOptionElement, OptionViewTags, OptionView>}
+ * @extends {Model<HTMLOptionElement, OptionViewTags, OptionView, SelectiveOptions>}
  */
-export class OptionModel extends Model<HTMLOptionElement, OptionViewTags, OptionView, DefaultConfig> {
+export class OptionModel extends Model<HTMLOptionElement, OptionViewTags, OptionView, SelectiveOptions> {
     private _privOnSelected: Array<(evtToken: IEventCallback, el: OptionModel, selected: boolean) => void> = [];
 
     private _privOnInternalSelected: Array<(evtToken: IEventCallback, el: OptionModel, selected: boolean) => void> = [];
@@ -24,6 +24,22 @@ export class OptionModel extends Model<HTMLOptionElement, OptionViewTags, Option
 
     group: GroupModel | null = null;
 
+    /**
+     * Constructs a Model instance with configuration options and optional bindings to a target element and view.
+     * Stores references for later updates and rendering.
+     *
+     * @param {SelectiveOptions} options - Configuration options for the model.
+     * @param {HTMLOptionElement|null} [targetElement=null] - The underlying element (e.g., <option> or group node).
+     * @param {OptionView|null} [view=null] - The associated view responsible for rendering the model.
+     */
+    constructor(options: SelectiveOptions, targetElement: HTMLOptionElement | null = null, view: OptionView | null = null) {
+        super(options, targetElement, view);
+        
+        (async () => {
+            this.textToFind = Libs.string2normalize(this.textContent.toLowerCase());
+        })();
+    }
+
     /**
      * Returns the image source from dataset (imgsrc or image), or an empty string if absent.
      *
@@ -149,6 +165,8 @@ export class OptionModel extends Model<HTMLOptionElement, OptionViewTags, Option
         return this.options.allowHtml ? Libs.stripHtml(this.text).trim() : this.text.trim();
     }
 
+    textToFind: string;
+
     /**
      * Returns the dataset object of the underlying <option> element, or an empty object.
      *
@@ -214,6 +232,7 @@ export class OptionModel extends Model<HTMLOptionElement, OptionViewTags, Option
      * and synchronizes initial selected state to the view.
      */
     onTargetChanged(): void {
+        this.textToFind = Libs.string2normalize(this.textContent.toLowerCase());
         if (!this.view) return;
 
         const labelContent = this.view.view.tags.LabelContent;

package/src/ts/services/effector.ts

@@ -301,7 +301,7 @@ class EffectorImpl implements EffectorInterface {
     resize(config: ResizeConfig): this {
         if (!this.element) return this;
 
-        if (this._resizeTimeout) clearTimeout(this._resizeTimeout);
+        this.cancel();
 
         const {
             duration = 200,
@@ -326,7 +326,7 @@ class EffectorImpl implements EffectorInterface {
             this.element.style.transition = `top ${duration}ms ease-out, height ${duration}ms ease-out, max-height ${duration}ms ease-out;`;
         }
 
-        requestAnimationFrame(() => {
+        setTimeout(() => {
             const styles: Partial<CSSStyleDeclaration> & Record<string, string> = {
                 width: `${width}px`,
                 left: `${left}px`,
@@ -343,7 +343,7 @@ class EffectorImpl implements EffectorInterface {
             } else {
                 this._resizeTimeout = setTimeout(() => {
                     if (this.element?.style) {
-                        this.element.style.transition = "none";
+                        this.element.style.transition = null;
                     }
                 }, duration);
             }
@@ -352,7 +352,7 @@ class EffectorImpl implements EffectorInterface {
 
             if (animate && (isPositionChanged || heightDiff > 1)) {
                 this._resizeTimeout = setTimeout(() => {
-                    this.element.style.transition = "none";
+                    this.element.style.transition = null;
                     if (isPositionChanged) delete this.element.style.transition;
                     onComplete?.();
                 }, duration);
@@ -360,7 +360,7 @@ class EffectorImpl implements EffectorInterface {
                 if (isPositionChanged) delete this.element.style.transition;
                 onComplete?.();
             }
-        });
+        }, 20);
 
         return this;
     }