selective-ui 1.2.0 → 1.2.1

package/dist/selective-ui.esm.js

@@ -1,4 +1,4 @@
-/*! Selective UI v1.2.0 | MIT License */
+/*! Selective UI v1.2.1 | MIT License */
 /**
  * @class
  */
@@ -2079,8 +2079,7 @@ class EffectorImpl {
     resize(config) {
         if (!this.element)
             return this;
-        if (this._resizeTimeout)
-            clearTimeout(this._resizeTimeout);
+        this.cancel();
         const { duration = 200, width, left, top, maxHeight, realHeight, position = "bottom", animate = true, onComplete, } = config;
         const currentPosition = this.element.classList.contains("position-top") ? "top" : "bottom";
         const isPositionChanged = currentPosition !== position;
@@ -2090,7 +2089,7 @@ class EffectorImpl {
         if (isPositionChanged) {
             this.element.style.transition = `top ${duration}ms ease-out, height ${duration}ms ease-out, max-height ${duration}ms ease-out;`;
         }
-        requestAnimationFrame(() => {
+        setTimeout(() => {
             const styles = {
                 width: `${width}px`,
                 left: `${left}px`,
@@ -2106,14 +2105,14 @@ class EffectorImpl {
             else {
                 this._resizeTimeout = setTimeout(() => {
                     if (this.element?.style) {
-                        this.element.style.transition = "none";
+                        this.element.style.transition = null;
                     }
                 }, duration);
             }
             Object.assign(this.element.style, styles);
             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?.();
@@ -2124,7 +2123,7 @@ class EffectorImpl {
                     delete this.element.style.transition;
                 onComplete?.();
             }
-        });
+        }, 20);
         return this;
     }
     /**
@@ -2319,17 +2318,28 @@ class GroupModel extends Model {
 }
 
 /**
- * @extends {Model<HTMLOptionElement, OptionViewTags, OptionView>}
+ * @extends {Model<HTMLOptionElement, OptionViewTags, OptionView, SelectiveOptions>}
  */
 class OptionModel extends Model {
-    constructor() {
-        super(...arguments);
+    /**
+     * 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, targetElement = null, view = null) {
+        super(options, targetElement, view);
         this._privOnSelected = [];
         this._privOnInternalSelected = [];
         this._privOnVisibilityChanged = [];
         this._visible = true;
         this._highlighted = false;
         this.group = null;
+        (async () => {
+            this.textToFind = Libs.string2normalize(this.textContent.toLowerCase());
+        })();
     }
     /**
      * Returns the image source from dataset (imgsrc or image), or an empty string if absent.
@@ -2503,6 +2513,7 @@ class OptionModel extends Model {
      * and synchronizes initial selected state to the view.
      */
     onTargetChanged() {
+        this.textToFind = Libs.string2normalize(this.textContent.toLowerCase());
         if (!this.view)
             return;
         const labelContent = this.view.view.tags.LabelContent;
@@ -3200,9 +3211,7 @@ 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;
@@ -4172,6 +4181,19 @@ class MixedAdapter extends Adapter {
         this.groups = [];
         this.flatOptions = [];
         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 });
     }
     /**
      * Build flat list of all options for navigation
@@ -4407,16 +4429,7 @@ class MixedAdapter extends Adapter {
      * Computes visible and total counts, then emits aggregated state.
      */
     _notifyVisibilityChanged() {
-        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}`);
     }
     /**
      * Computes and returns current visibility statistics for options.
@@ -5128,6 +5141,8 @@ class VirtualRecyclerView extends RecyclerView {
             return;
         }
         const item = this.adapter.items[index];
+        if (!item)
+            return;
         const existing = this.created.get(index);
         if (existing) {
             if (!item?.view) {
@@ -5385,6 +5400,7 @@ class SelectBox {
             searchController.setAjax(options.ajax);
         }
         const optionAdapter = container.popup.optionAdapter;
+        let hightlightTimer = null;
         const searchHandle = (keyword, isTrigger) => {
             if (!isTrigger && keyword === "") {
                 searchController.clear();
@@ -5395,13 +5411,16 @@ class SelectBox {
                 searchController
                     .search(keyword)
                     .then((result) => {
-                    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) => {
                     console.error("Search error:", error);
@@ -5412,16 +5431,18 @@ class SelectBox {
         searchbox.onSearch = (keyword, isTrigger) => {
             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);
             }
         };
         searchController.setPopup(container.popup);
@@ -6232,7 +6253,7 @@ const SECLASS = new Selective();
  *
  * Declared as `const` literal type to enable strict typing and easy tree-shaking.
  */
-const version = "1.2.0";
+const version = "1.2.1";
 /**
  * Library name identifier.
  *