selective-ui 1.2.2 → 1.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "selective-ui",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "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

@@ -180,23 +180,19 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
         optionViewer.view.tags.LabelContent.innerHTML = optionModel.text;
 
         if (!optionModel.isInit) {
-            optionViewer.view.tags.OptionView.addEventListener("click", (ev: MouseEvent) => {
+            optionViewer.view.tags.OptionView.addEventListener("click", async (ev: MouseEvent) => {
                 ev.stopPropagation();
                 ev.preventDefault();
 
                 if (this.isSkipEvent) return;
 
                 if (this.isMultiple) {
-                    this.changingProp("select");
-                    setTimeout(() => {
-                        optionModel.selected = !optionModel.selected;
-                    }, 5);
+                    await this.changingProp("select");
+                    optionModel.selected = !optionModel.selected;
                 } else if (optionModel.selected !== true) {
-                    this.changingProp("select");
-                    setTimeout(() => {
-                        if (this.selectedItemSingle) this.selectedItemSingle.selected = false;
-                        optionModel.selected = true;
-                    }, 5);
+                    await this.changingProp("select");
+                    if (this.selectedItemSingle) this.selectedItemSingle.selected = false;
+                    optionModel.selected = true;
                 }
             });
 
@@ -233,11 +229,11 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
      *
      * @param {Array<GroupModel|OptionModel>} items - The new collection of items to be displayed.
      */
-    override setItems(items: MixedItem[]): void {
-        this.changingProp("items", items);
+    override async setItems(items: MixedItem[]): Promise<void> {
+        await this.changingProp("items", items);
         this.items = items;
         this.buildFlatStructure();
-        this.changeProp("items", items);
+        await this.changeProp("items", items);
     }
 
     /**
@@ -245,8 +241,8 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
      *
      * @param {Array<GroupModel|OptionModel>} items - The new collection of items to sync.
      */
-    override syncFromSource(items: MixedItem[]): void {
-        this.setItems(items);
+    override async syncFromSource(items: MixedItem[]): Promise<void> {
+        await this.setItems(items);
     }
 
     /**

package/src/ts/components/accessorybox.ts

@@ -125,14 +125,12 @@ export class AccessoryBox {
                                         role: "button",
                                         ariaLabel: `${this.options!.textAccessoryDeselect}${modelData.textContent}`,
                                         title: `${this.options!.textAccessoryDeselect}${modelData.textContent}`,
-                                        onclick: (evt: MouseEvent) => {
+                                        onclick: async (evt: MouseEvent) => {
                                             evt.preventDefault();
-                                            this.modelManager?.triggerChanging?.(
+                                            await this.modelManager?.triggerChanging?.(
                                                 "select",
                                             );
-                                            setTimeout(() => {
-                                                modelData.selected = false;
-                                            }, 10);
+                                            modelData.selected = false;
                                         },
                                     },
                                 },

package/src/ts/components/popup.ts

@@ -187,7 +187,7 @@ export class Popup {
             this.updateEmptyState(stats ?? undefined);
 
             this.triggerResize();
-        }, 200);
+        }, this.options.animationtime);
     }
 
     /**

package/src/ts/components/selectbox.ts

@@ -240,13 +240,6 @@ export class SelectBox {
             }
         };
 
-        // Custom event (manual refresh)
-        select.addEventListener("options:changed", () => {
-            optionModelManager.update(Libs.parseSelectToArray(select));
-            this.getAction()?.refreshMask();
-            container.popup?.triggerResize?.();
-        });
-
         // AJAX setup (if provided)
         if (options.ajax) {
             searchController.setAjax(options.ajax);

package/src/ts/core/base/adapter.ts

@@ -64,7 +64,7 @@ export class Adapter<
      * @param {Function} callback - Function to execute before the property changes.
      */
     public onPropChanging(propName: string, callback: (...args: unknown[]) => void): void {
-        Libs.callbackScheduler.on(`${propName}ing_${this.adapterKey}`, callback, { debounce: 1 });
+        Libs.callbackScheduler.on(`${propName}ing_${this.adapterKey}`, callback, { debounce: 0 });
     }
 
     /**
@@ -75,7 +75,7 @@ export class Adapter<
      * @param {Function} callback - Function to execute after the property changes.
      */
     public onPropChanged(propName: string, callback: (...args: unknown[]) => void): void {
-        Libs.callbackScheduler.on(`${propName}_${this.adapterKey}`, callback);
+        Libs.callbackScheduler.on(`${propName}_${this.adapterKey}`, callback, { debounce: 0 });
     }
 
     /**
@@ -85,8 +85,8 @@ export class Adapter<
      * @param {string} propName - The property name to emit (e.g., "items").
      * @param {...any} params - Parameters forwarded to the callbacks.
      */
-    public changeProp(propName: string, ...params: unknown[]): void {
-        Libs.callbackScheduler.run(`${propName}_${this.adapterKey}`, ...params);
+    public changeProp(propName: string, ...params: unknown[]): Promise<void> {
+        return Libs.callbackScheduler.run(`${propName}_${this.adapterKey}`, ...params) as Promise<void>;
     }
 
     /**
@@ -96,8 +96,8 @@ export class Adapter<
      * @param {string} propName - The property name to emit (e.g., "items").
      * @param {...any} params - Parameters forwarded to the callbacks.
      */
-    public changingProp(propName: string, ...params: unknown[]): void {
-        Libs.callbackScheduler.run(`${propName}ing_${this.adapterKey}`, ...params);
+    public changingProp(propName: string, ...params: unknown[]): Promise<void> {
+        return Libs.callbackScheduler.run(`${propName}ing_${this.adapterKey}`, ...params) as Promise<void>;
     }
 
     /**
@@ -129,10 +129,10 @@ export class Adapter<
      *
      * @param {TItem[]} items - The new list of items to set.
      */
-    public setItems(items: TItem[]): void {
-        this.changingProp("items", items);
+    public async setItems(items: TItem[]): Promise<void> {
+        await this.changingProp("items", items);
         this.items = items;
-        this.changeProp("items", items);
+        await this.changeProp("items", items);
     }
 
     /**
@@ -141,8 +141,8 @@ export class Adapter<
      *
      * @param {TItem[]} items - The source list of items to synchronize.
      */
-    public syncFromSource(items: TItem[]): void {
-        this.setItems(items);
+    public async syncFromSource(items: TItem[]): Promise<void> {
+        await this.setItems(items);
     }
 
     /**

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

@@ -384,7 +384,7 @@ export class VirtualRecyclerView<
     private containerTopInScroll(): number {
         const a = this.viewElement!.getBoundingClientRect();
         const b = this.scrollEl.getBoundingClientRect();
-        return a.top - b.top + this.scrollEl.scrollTop;
+        return Math.max(0, a.top - b.top + this.scrollEl.scrollTop);
     }
 
     /** 
@@ -670,7 +670,10 @@ export class VirtualRecyclerView<
             const maxScroll = Math.max(0, this.scrollEl.scrollHeight - this.scrollEl.clientHeight);
             const clamped = Math.min(Math.max(0, targetScroll), maxScroll);
 
-            if (Math.abs(this.scrollEl.scrollTop - clamped) > 0.5) {
+            const heightChanged = Math.abs(anchorTopNew - anchorTop) > 1;
+            const scrollDiff = Math.abs(this.scrollEl.scrollTop - clamped);
+
+            if (heightChanged && scrollDiff > 0.5 && scrollDiff < 100) {
                 this.scrollEl.scrollTop = clamped;
             }
         } finally {

package/src/ts/core/model-manager.ts

@@ -29,6 +29,8 @@ export class ModelManager<
 
     private options: SelectiveOptions = null;
 
+    private oldPosition = 0;
+
     /**
      * Constructs a ModelManager with configuration options used by created models and components.
      *
@@ -142,13 +144,13 @@ export class ModelManager<
      *
      * @param {Array<HTMLOptGroupElement|HTMLOptionElement>} modelData - New source elements to rebuild models from.
      */
-    public replace(modelData: Array<HTMLOptGroupElement | HTMLOptionElement>): void {
+    public async replace(modelData: Array<HTMLOptGroupElement | HTMLOptionElement>): Promise<void> {
         this.lastFingerprint = null;
         this.createModelResources(modelData);
 
         if (this.privAdapterHandle) {
             // Adapter expects TModel[], but this manager's list is GroupModel|OptionModel.
-            this.privAdapterHandle.syncFromSource(this.privModelList as unknown as TModel[]);
+            await this.privAdapterHandle.syncFromSource(this.privModelList as unknown as TModel[]);
         }
 
         this.refresh(false);
@@ -273,6 +275,11 @@ export class ModelManager<
         });
 
         let isUpdate = true;
+        if (this.oldPosition == 0) {
+            isUpdate = false;
+        }
+        this.oldPosition = position;
+
         oldGroupMap.forEach((removedGroup) => {
             isUpdate = false;
             removedGroup.remove();
@@ -289,7 +296,7 @@ export class ModelManager<
             this.privAdapterHandle.updateData(this.privModelList as unknown as TModel[]);
         }
 
-        this.onUpdated();
+        // this.onUpdated();
         this.refresh(isUpdate);
     }
 
@@ -340,15 +347,15 @@ export class ModelManager<
      * Triggers the adapter's pre-change pipeline for a named event,
      * enabling observers to react before a change is applied.
      */
-    public triggerChanging(event_name: string): void {
-        this.privAdapterHandle?.changingProp(event_name);
+    public triggerChanging(event_name: string): Promise<void> {
+        return this.privAdapterHandle?.changingProp(event_name);
     }
 
     /**
      * Triggers the adapter's post-change pipeline for a named event,
      * notifying observers after a change has been applied.
      */
-    public triggerChanged(event_name: string): void {
-        this.privAdapterHandle?.changeProp(event_name);
+    public triggerChanged(event_name: string): Promise<void> {
+        return this.privAdapterHandle?.changeProp(event_name);
     }
 }

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

@@ -467,7 +467,5 @@ export class SearchController {
                 select.appendChild(option);
             }
         });
-
-        select.dispatchEvent(new CustomEvent("options:changed"));
     }
 }

package/src/ts/services/effector.ts

@@ -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;`;
         }
 
-        setTimeout(() => {
+        requestAnimationFrame(() => {
             const styles: Partial<CSSStyleDeclaration> & Record<string, string> = {
                 width: `${width}px`,
                 left: `${left}px`,
@@ -360,7 +360,7 @@ class EffectorImpl implements EffectorInterface {
                 if (isPositionChanged) delete this.element.style.transition;
                 onComplete?.();
             }
-        }, 20);
+        });
 
         return this;
     }

package/src/ts/services/select-observer.ts

@@ -16,7 +16,7 @@ export class SelectObserver {
 
     /**
      * Initializes the SelectObserver for a given <select> element.
-     * Captures the initial snapshot, sets up a MutationObserver, and listens for custom "options:changed" events.
+     * Captures the initial snapshot, sets up a MutationObserver.
      * Changes are debounced to prevent excessive calls.
      *
      * @param {HTMLSelectElement} select - The <select> element to observe.
@@ -31,13 +31,6 @@ export class SelectObserver {
                 this.handleChange();
             }, this._DEBOUNCE_DELAY);
         });
-
-        select.addEventListener("options:changed", () => {
-            if (this.debounceTimer) clearTimeout(this.debounceTimer);
-            this.debounceTimer = setTimeout(() => {
-                this.handleChange();
-            }, this._DEBOUNCE_DELAY);
-        });
     }
 
     /**

package/src/ts/utils/callback-scheduler.ts

@@ -84,12 +84,18 @@ export class CallbackScheduler {
      * - If an entry has `once = true`, it is removed after execution by setting its slot to `undefined`.
      *   (The list is not spliced to preserve indices.)
      */
-    public run(key: TimerKey, ...params: any[]): void {
+    public run(key: TimerKey, ...params: any[]): Promise<void> | void {
         const executes = this.executeStored.get(key);
-        if (!executes) return;
+        if (!executes || executes.length === 0) {
+            return Promise.resolve();
+        }
+
+        if (!this.timerRunner.has(key)) {
+            this.timerRunner.set(key, new Map());
+        }
 
-        if (!this.timerRunner.has(key)) this.timerRunner.set(key, new Map());
         const runner = this.timerRunner.get(key)!;
+        const tasks: Promise<void>[] = [];
 
         for (let i = 0; i < executes.length; i++) {
             const entry = executes[i];
@@ -98,22 +104,36 @@ export class CallbackScheduler {
             const prev = runner.get(i);
             if (prev) clearTimeout(prev);
 
-            const timer = setTimeout(() => {
-                entry.callback(params.length > 0 ? params : null);
-
-                if (entry.once) {
-                    // Preserve index stability by leaving an empty slot.
-                    executes[i] = undefined;
-
-                    // Cleanup the timer handle for this index.
-                    const current = runner.get(i);
-                    if (current) clearTimeout(current);
-                    runner.delete(i);
-                }
-            }, entry.timeout);
-
-            runner.set(i, timer);
+            const task = new Promise<void>((resolve) => {
+                const timer = setTimeout(async () => {
+                    try {
+                        const resp = entry.callback(
+                            params.length > 0 ? params : null
+                        ) as any;
+
+                        if (resp instanceof Promise) {
+                            await resp;
+                        }
+                    } catch {} finally {
+                        if (entry.once) {
+                            executes[i] = undefined;
+
+                            const current = runner.get(i);
+                            if (current) clearTimeout(current);
+                            runner.delete(i);
+                        }
+
+                        resolve();
+                    }
+                }, entry.timeout);
+
+                runner.set(i, timer);
+            });
+
+            tasks.push(task);
         }
+
+        return Promise.all(tasks).then(() => void 0);
     }
 
     /**