selective-ui 1.1.0 → 1.1.2

package/dist/selective-ui.umd.js

@@ -1,4 +1,4 @@
-/*! Selective UI v1.1.0 | MIT License */
+/*! Selective UI v1.1.2 | MIT License */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
     typeof define === 'function' && define.amd ? define(['exports'], factory) :
@@ -72,6 +72,126 @@
         }
     }
 
+    class CallbackScheduler {
+        constructor() {
+            /**
+             * Stores callbacks by key in registration order.
+             *
+             * Notes:
+             * - Entries may become `undefined` after execution when `once` is enabled.
+             *   This preserves indices so timer bookkeeping remains stable.
+             */
+            this.executeStored = new Map();
+            /**
+             * Per-key timer registry.
+             *
+             * - Outer Map: groups timers by `TimerKey`
+             * - Inner Map: maps callback index -> active timeout handle
+             *
+             * Each callback index has its own debounce timer, allowing independent scheduling.
+             */
+            this.timerRunner = new Map();
+        }
+        /**
+         * Registers a callback under a key.
+         *
+         * @param key - Group identifier for callbacks.
+         * @param callback - Function to execute after the debounce timeout.
+         * @param options - Scheduling options.
+         * @returns The index of the registered callback within its key bucket.
+         *
+         * Behavior:
+         * - Callbacks are stored in registration order.
+         * - `options.debounce` is treated as a per-callback delay (milliseconds).
+         * - `options.once` removes the entry after its first execution (index is preserved).
+         */
+        on(key, callback, options = {}) {
+            const timeout = options.debounce ?? 50;
+            const once = options.once ?? false;
+            if (!this.executeStored.has(key))
+                this.executeStored.set(key, []);
+            const bucket = this.executeStored.get(key);
+            bucket.push({ callback, timeout, once });
+        }
+        /**
+         * Removes all callbacks associated with a key and clears any active timers.
+         *
+         * @param key - Key whose callbacks and timers will be removed.
+         */
+        off(key) {
+            const runner = this.timerRunner.get(key);
+            if (runner) {
+                for (const t of runner.values())
+                    clearTimeout(t);
+                runner.clear();
+                this.timerRunner.delete(key);
+            }
+            this.executeStored.delete(key);
+        }
+        /**
+         * Schedules execution for all callbacks registered under a key.
+         *
+         * @param key - Key whose callbacks will be scheduled.
+         * @param params - Parameters collected and passed as a single payload.
+         *
+         * Payload rules:
+         * - If `run(key)` is called without params, callbacks receive `null`.
+         * - If `run(key, ...params)` is called with params, callbacks receive `params` as an array.
+         *
+         * Debounce rules:
+         * - Each callback has its own timer (by index).
+         * - Calling `run()` again before the timeout clears the previous timer for that callback.
+         *
+         * Once rules:
+         * - 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.)
+         */
+        run(key, ...params) {
+            const executes = this.executeStored.get(key);
+            if (!executes)
+                return;
+            if (!this.timerRunner.has(key))
+                this.timerRunner.set(key, new Map());
+            const runner = this.timerRunner.get(key);
+            for (let i = 0; i < executes.length; i++) {
+                const entry = executes[i];
+                if (!entry)
+                    continue;
+                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);
+            }
+        }
+        /**
+         * Clears callbacks and timers.
+         *
+         * @param key - When provided, clears only that key; otherwise clears all keys.
+         */
+        clear(key) {
+            if (key !== undefined) {
+                this.off(key);
+                return;
+            }
+            // Iterate over a snapshot of keys because `off()` mutates the maps.
+            for (const k of Array.from(this.executeStored.keys())) {
+                this.off(k);
+            }
+        }
+    }
+
     /**
      * @class
      */
@@ -86,18 +206,6 @@
                 this._iStorage = new iStorage();
             return this._iStorage;
         }
-        /**
-         * Checks whether a value is null/undefined/empty-string/"0"/0.
-         * Booleans are always considered non-empty.
-         *
-         * @param {unknown} value - The value to test.
-         * @returns {boolean} - True if considered empty; otherwise false.
-         */
-        static isNullOrEmpty(value) {
-            if (typeof value === "boolean")
-                return false;
-            return value == null || value === "" || value === 0 || value === "0";
-        }
         /**
          * Deep-copies plain objects/arrays recursively. Returns primitives as-is.
          *
@@ -295,23 +403,6 @@
             }
             return recursiveTemp;
         }
-        /**
-         * Applies inline CSS styles to all matched elements. Accepts either a style
-         * object or a single property + value pair.
-         *
-         * @param {string|NodeListOf<HTMLElement>|HTMLElement} queryCommon - Selector or element(s).
-         * @param {Record<string, string>|string} styles - Style object or a single property name.
-         * @param {string|null} [value=null] - Value for the single property form.
-         */
-        static setStyle(queryCommon, styles, value = null) {
-            const apply_styles = typeof styles === "string" ? { [styles]: value } : { ...styles };
-            const queryItems = this.getElements(queryCommon);
-            for (let i = 0; i < queryItems.length; i++) {
-                const item = queryItems[i];
-                if (item)
-                    Object.assign(item.style, apply_styles);
-            }
-        }
         /**
          * Builds a configuration object by copying defaults and then overriding with
          * matching element properties or data-* attributes when present.
@@ -596,41 +687,7 @@
      * Schedules and batches function executions keyed by name, with debounced timers.
      * Provides setExecute(), clearExecute(), and run() to manage deferred callbacks.
      */
-    Libs.timerProcess = {
-        executeStored: {},
-        timerRunner: {},
-        setExecute(keyExecute, execute, timeout = 50, once = false) {
-            if (!this.executeStored[keyExecute])
-                this.executeStored[keyExecute] = [];
-            this.executeStored[keyExecute].push({ execute, timeout, once });
-        },
-        clearExecute(keyExecute) {
-            delete this.executeStored[keyExecute];
-        },
-        run(keyExecute, ...params) {
-            const executes = this.executeStored[keyExecute];
-            if (!executes)
-                return;
-            if (!this.timerRunner[keyExecute])
-                this.timerRunner[keyExecute] = {};
-            for (const key in executes) {
-                const entry = executes[Number(key)];
-                if (!entry)
-                    continue;
-                if (!this.timerRunner[keyExecute][key]) {
-                    // placeholder, will be overwritten by setTimeout
-                    this.timerRunner[keyExecute][key] = setTimeout(() => { }, 0);
-                    clearTimeout(this.timerRunner[keyExecute][key]);
-                }
-                clearTimeout(this.timerRunner[keyExecute][key]);
-                this.timerRunner[keyExecute][key] = setTimeout(() => {
-                    entry.execute(params.length > 0 ? params : null);
-                    if (entry.once)
-                        delete this.executeStored[keyExecute][Number(key)];
-                }, entry.timeout);
-            }
-        },
-    };
+    Libs.callbackScheduler = new CallbackScheduler();
 
     /**
      * Provides a lightweight event utility with cancel/continue control:
@@ -749,7 +806,7 @@
                 width = options.width;
             if (cfgHeight > 0)
                 height = options.height;
-            Libs.setStyle(view, { width, height, minWidth, minHeight });
+            Object.assign(view.style, { width, height, minWidth, minHeight });
         }
     }
 
@@ -762,9 +819,6 @@
          * Supports HTML content based on configuration and provides methods to get or set the placeholder value.
          */
         constructor(options) {
-            /**
-             * @type {HTMLElement | null}
-             */
             this.node = null;
             this._options = null;
             if (options)
@@ -849,14 +903,9 @@
          */
         constructor(options = null) {
             this.nodeMounted = null;
-            /**
-             * @type {HTMLDivElement | null}
-             */
             this.node = null;
             this.options = null;
-            /** @type {Function[]} */
             this._ActionOnSelectAll = [];
-            /** @type {Function[]} */
             this._ActionOnDeSelectAll = [];
             if (options)
                 this.init(options);
@@ -965,9 +1014,6 @@
          * Provides methods to show/hide the state and check its visibility.
          */
         constructor(options = null) {
-            /**
-             * @type {HTMLDivElement | null}
-             */
             this.node = null;
             this.options = null;
             if (options)
@@ -1018,13 +1064,15 @@
         }
     }
 
+    /**
+     * @class
+     */
     class LoadingState {
         /**
          * Represents a loading state component that displays a loading message during data fetch or processing.
          * Provides methods to show/hide the state and check its visibility.
          */
         constructor(options = null) {
-            /** @type {HTMLDivElement | null} */
             this.node = null;
             this.options = null;
             if (options)
@@ -1086,7 +1134,6 @@
         constructor() {
             this.isInit = false;
             this.element = null;
-            /** @type {ResizeObserver|null} */
             this._resizeObserver = null;
             this._mutationObserver = null;
             this.isInit = true;
@@ -1216,27 +1263,17 @@
         constructor(select = null, options = null, modelManager = null) {
             this.options = null;
             this.isCreated = false;
-            /** @type {MixedAdapter | null} */
             this.optionAdapter = null;
-            /** @type {HTMLDivElement | null} */
             this.node = null;
-            /** @type {EffectorInterface | null} */
             this._effSvc = null;
-            /** @type {ResizeObserverService | null} */
             this._resizeObser = null;
             this._parent = null;
-            /** @type {OptionHandle | null} */
             this.optionHandle = null;
-            /** @type {EmptyState | null} */
             this.emptyState = null;
-            /** @type {LoadingState | null} */
             this.loadingState = null;
-            /** @type {RecyclerViewContract<MixedAdapter> | null} */
             this.recyclerView = null;
-            /** @type {HTMLDivElement | null} */
             this._optionsContainer = null;
             this._scrollListener = null;
-            /** @type {ReturnType<typeof setTimeout> | null} */
             this._hideLoadHandle = null;
             this._modelManager = modelManager;
             if (select && options) {
@@ -1455,6 +1492,9 @@
         /**
          * Enables infinite scroll by listening to container scroll events and loading more data
          * when nearing the bottom, respecting pagination state (enabled/loading/hasMore).
+         *
+         * @param searchController - Provides pagination state and a method to load more items.
+         * @param _options - Optional SelectiveOptions (reserved for future behavior tuning).
          */
         setupInfiniteScroll(searchController, _options) {
             if (!this.node)
@@ -1479,6 +1519,65 @@
             };
             this.node.addEventListener("scroll", this._scrollListener);
         }
+        /**
+         * Completely tear down the popup instance and release all resources.
+         *
+         * Responsibilities:
+         *  - Clear any pending timeouts and cancel animations/effects.
+         *  - Remove event listeners (scroll, mousedown) and disconnect ResizeObserver.
+         *  - Unmount and remove the DOM node; sever references to Effector/ModelManager.
+         *  - Dispose adapter/recycler and child components (OptionHandle, EmptyState, LoadingState).
+         *  - Reset flags and null out references to avoid memory leaks.
+         *
+         * Safe to call multiple times; all operations are guarded via optional chaining.
+         */
+        detroy() {
+            if (this._hideLoadHandle) {
+                clearTimeout(this._hideLoadHandle);
+                this._hideLoadHandle = null;
+            }
+            if (this.node && this._scrollListener) {
+                this.node.removeEventListener("scroll", this._scrollListener);
+                this._scrollListener = null;
+            }
+            try {
+                this._resizeObser?.disconnect();
+            }
+            catch (_) { }
+            this._resizeObser = null;
+            try {
+                this._effSvc?.setElement?.(null);
+            }
+            catch (_) { }
+            this._effSvc = null;
+            if (this.node) {
+                try {
+                    const clone = this.node.cloneNode(true);
+                    this.node.replaceWith(clone);
+                    clone.remove();
+                }
+                catch (_) {
+                    this.node.remove();
+                }
+            }
+            this.node = null;
+            this._optionsContainer = null;
+            try {
+                this._modelManager?.skipEvent?.(false);
+                this.recyclerView?.clear?.();
+                this.recyclerView = null;
+                this.optionAdapter = null;
+                this.node.remove();
+            }
+            catch (_) { }
+            this._modelManager = null;
+            this.optionHandle = null;
+            this.emptyState = null;
+            this.loadingState = null;
+            this._parent = null;
+            this.options = null;
+            this.isCreated = false;
+        }
         /**
          * Computes the parent panel's location and box metrics, including size, position,
          * padding, and border, accounting for iOS visual viewport offsets.
@@ -1584,21 +1683,9 @@
          * @param {object|null} [options=null] - Configuration (e.g., placeholder, accessibility IDs).
          */
         constructor(options = null) {
-            /**
-             * @type {MountViewResult<any> | null}
-             */
             this.nodeMounted = null;
-            /**
-             * @type {HTMLDivElement | null}
-             */
             this.node = null;
-            /**
-             * @type {HTMLInputElement | null}
-             */
             this.SearchInput = null;
-            /**
-             * @type {Function|null}
-             */
             this.onSearch = null;
             this.options = null;
             this.onNavigate = null;
@@ -2005,7 +2092,9 @@
                 }
                 else {
                     this._resizeTimeout = setTimeout(() => {
-                        this.element.style.transition = "none";
+                        if (this.element?.style) {
+                            this.element.style.transition = "none";
+                        }
                     }, duration);
                 }
                 Object.assign(this.element.style, styles);
@@ -2059,7 +2148,6 @@
         constructor(options, targetElement = null, view = null) {
             /** @type {TTarget | null} */
             this.targetElement = null;
-            /** @type {TView | null} */
             this.view = null;
             this.position = -1;
             this.isInit = false;
@@ -2097,7 +2185,6 @@
         constructor(options, targetElement) {
             super(options, targetElement ?? null, null);
             this.label = "";
-            /** @type {OptionModel[]} */
             this.items = [];
             this.collapsed = false;
             this._privOnCollapsedChanged = [];
@@ -2295,7 +2382,7 @@
          * @type {boolean}
          */
         set selectedNonTrigger(value) {
-            const input = this.view?.getTag?.("OptionInput");
+            const input = this.view?.view?.tags?.OptionInput;
             const viewEl = this.view?.getView?.();
             if (input)
                 input.checked = value;
@@ -2390,7 +2477,7 @@
         onTargetChanged() {
             if (!this.view)
                 return;
-            const labelContent = this.view.getTag("LabelContent");
+            const labelContent = this.view.view.tags.LabelContent;
             if (labelContent) {
                 if (this.options.allowHtml) {
                     labelContent.innerHTML = this.text;
@@ -2399,7 +2486,7 @@
                     labelContent.textContent = this.textContent;
                 }
             }
-            const imageTag = this.view.getTag("OptionImage");
+            const imageTag = this.view.view.tags.OptionImage;
             if (imageTag && this.hasImage) {
                 imageTag.src = this.imageSrc;
                 imageTag.alt = this.text;
@@ -2576,7 +2663,6 @@
             });
             let currentGroup = null;
             let position = 0;
-            const changesToApply = [];
             modelData.forEach((data) => {
                 if (data.tagName === "OPTGROUP") {
                     const dataVset = data;
@@ -2585,7 +2671,7 @@
                         // Label is used as key; keep original behavior.
                         const hasLabelChange = existingGroup.label !== dataVset.label;
                         if (hasLabelChange) {
-                            changesToApply.push(() => existingGroup.update(dataVset));
+                            existingGroup.update(dataVset);
                         }
                         existingGroup.position = position;
                         existingGroup.items = [];
@@ -2605,17 +2691,8 @@
                     const key = `${dataVset.value}::${dataVset.text}`;
                     const existingOption = oldOptionMap.get(key);
                     if (existingOption) {
-                        const hasSelectedChange = existingOption.selected !== dataVset.selected;
-                        const hasPositionChange = existingOption.position !== position;
-                        if (hasSelectedChange || hasPositionChange) {
-                            changesToApply.push(() => {
-                                existingOption.update(dataVset);
-                                existingOption.position = position;
-                            });
-                        }
-                        else {
-                            existingOption.position = position;
-                        }
+                        existingOption.update(dataVset);
+                        existingOption.position = position;
                         const parentGroup = dataVset["__parentGroup"];
                         if (parentGroup && currentGroup) {
                             currentGroup.addItem(existingOption);
@@ -2642,11 +2719,6 @@
                     position++;
                 }
             });
-            if (changesToApply.length > 0) {
-                requestAnimationFrame(() => {
-                    changesToApply.forEach((change) => change());
-                });
-            }
             oldGroupMap.forEach((removedGroup) => {
                 removedGroup.view?.getView?.()?.remove?.();
             });
@@ -2689,9 +2761,6 @@
          * adapter instance, and recycler view instance.
          */
         getResources() {
-            if (!this._privAdapterHandle || !this._privRecyclerViewHandle) {
-                throw new Error("ModelManager resources not loaded. Call load() first.");
-            }
             return {
                 modelList: this._privModelList,
                 adapter: this._privAdapterHandle,
@@ -2726,13 +2795,7 @@
          * @param {HTMLDivElement|null} [viewElement=null] - The root element where the adapter will render items.
          */
         constructor(viewElement = null) {
-            /**
-             * @type {HTMLDivElement|null}
-             */
             this.viewElement = null;
-            /**
-             * @type {TAdapter|null}
-             */
             this.adapter = null;
             this.viewElement = viewElement;
         }
@@ -2799,20 +2862,11 @@
          * @param {object|null} options - Configuration options for the accessory box (e.g., layout and behavior).
          */
         constructor(options = null) {
-            /**
-             * @type {MountViewResult<any> | null}
-             */
             this.nodeMounted = null;
-            /**
-             * @type {HTMLDivElement | null}
-             */
             this.node = null;
             this.options = null;
-            /** @type {HTMLDivElement | null} */
             this.selectUIMask = null;
-            /** @type {HTMLDivElement | null} */
             this.parentMask = null;
-            /** @type {ModelManager<MixedItem> | null} */
             this.modelManager = null;
             if (options)
                 this.init(options);
@@ -3513,7 +3567,6 @@
          * @param {TItem[]} [items=[]] - Initial items to be managed by the adapter.
          */
         constructor(items = []) {
-            /** @type {TItem[]} */
             this.items = [];
             this.adapterKey = Libs.randomString(12);
             this.isSkipEvent = false;
@@ -3550,7 +3603,7 @@
          * @param {Function} callback - Function to execute before the property changes.
          */
         onPropChanging(propName, callback) {
-            Libs.timerProcess.setExecute(`${propName}ing_${this.adapterKey}`, callback, 1);
+            Libs.callbackScheduler.on(`${propName}ing_${this.adapterKey}`, callback, { debounce: 1 });
         }
         /**
          * Registers a post-change callback for a property change pipeline.
@@ -3560,7 +3613,7 @@
          * @param {Function} callback - Function to execute after the property changes.
          */
         onPropChanged(propName, callback) {
-            Libs.timerProcess.setExecute(`${propName}_${this.adapterKey}`, callback);
+            Libs.callbackScheduler.on(`${propName}_${this.adapterKey}`, callback);
         }
         /**
          * Triggers the post-change pipeline for a given property, passing optional parameters
@@ -3570,7 +3623,7 @@
          * @param {...any} params - Parameters forwarded to the callbacks.
          */
         changeProp(propName, ...params) {
-            Libs.timerProcess.run(`${propName}_${this.adapterKey}`, ...params);
+            Libs.callbackScheduler.run(`${propName}_${this.adapterKey}`, ...params);
         }
         /**
          * Triggers the pre-change pipeline for a given property, passing optional parameters
@@ -3580,7 +3633,7 @@
          * @param {...any} params - Parameters forwarded to the callbacks.
          */
         changingProp(propName, ...params) {
-            Libs.timerProcess.run(`${propName}ing_${this.adapterKey}`, ...params);
+            Libs.callbackScheduler.run(`${propName}ing_${this.adapterKey}`, ...params);
         }
         /**
          * Creates and returns a viewer instance for the given item within the specified parent container.
@@ -3660,9 +3713,7 @@
          * @param {HTMLElement} parent - The parent element into which this view will render.
          */
         constructor(parent) {
-            /** @type {HTMLElement|null} */
             this.parent = null;
-            /** @type {MountViewResult<TTags> | null} */
             this.view = null;
             this.parent = parent;
         }
@@ -3686,28 +3737,6 @@
                 throw new Error("View is not mounted. Did you forget to set this.view?");
             return this.view.view;
         }
-        /**
-         * Retrieves a single tagged element from the mounted view.
-         *
-         * @template K
-         * @param {K} tag - The tag key corresponding to the desired element.
-         * @returns {TTags[K]} - The element associated with the provided tag key.
-         */
-        getTag(tag) {
-            if (!this.view)
-                throw new Error("View is not mounted. Did you forget to set this.view?");
-            return this.view.tags[tag];
-        }
-        /**
-         * Retrieves the full tag map for the mounted view.
-         *
-         * @returns {TTags} - An object map of all tagged elements.
-         */
-        getTags() {
-            if (!this.view)
-                throw new Error("View is not mounted. Did you forget to set this.view?");
-            return this.view.tags;
-        }
     }
 
     /**
@@ -3716,7 +3745,6 @@
     class GroupView extends View {
         constructor() {
             super(...arguments);
-            /** @type {GroupViewResult} */
             this.view = null;
         }
         /**
@@ -4164,7 +4192,7 @@
         _handleGroupView(groupModel, groupView, position) {
             super.onViewHolder(groupModel, groupView, position);
             groupModel.view = groupView;
-            const header = groupView.getTag("GroupHeader");
+            const header = groupView.view.tags.GroupHeader;
             header.textContent = groupModel.label;
             if (!groupModel.isInit) {
                 header.style.cursor = "pointer";
@@ -4216,7 +4244,7 @@
             }
             optionModel.view = optionViewer;
             if (optionModel.hasImage) {
-                const imageTag = optionViewer.getTag("OptionImage");
+                const imageTag = optionViewer.view.tags.OptionImage;
                 if (imageTag) {
                     if (imageTag.src !== optionModel.imageSrc)
                         imageTag.src = optionModel.imageSrc;
@@ -4224,9 +4252,9 @@
                         imageTag.alt = optionModel.text;
                 }
             }
-            optionViewer.getTag("LabelContent").innerHTML = optionModel.text;
+            optionViewer.view.tags.LabelContent.innerHTML = optionModel.text;
             if (!optionModel.isInit) {
-                optionViewer.getTag("OptionView").addEventListener("click", (ev) => {
+                optionViewer.view.tags.OptionView.addEventListener("click", (ev) => {
                     ev.stopPropagation();
                     ev.preventDefault();
                     if (this.isSkipEvent)
@@ -4246,8 +4274,8 @@
                         }, 5);
                     }
                 });
-                optionViewer.getTag("OptionView").title = optionModel.textContent;
-                optionViewer.getTag("OptionView").addEventListener("mouseenter", () => {
+                optionViewer.view.tags.OptionView.title = optionModel.textContent;
+                optionViewer.view.tags.OptionView.addEventListener("mouseenter", () => {
                     if (this.isSkipEvent)
                         return;
                     this.setHighlight(this.flatOptions.indexOf(optionModel), false);
@@ -4470,10 +4498,8 @@
         constructor(select = null, Selective = null) {
             this.container = {};
             this.oldValue = null;
-            /** @type {HTMLDivElement|null} */
             this.node = null;
             this.options = null;
-            /** @type {ModelManager<MixedItem, MixedAdapter> | null} */
             this.optionModelManager = null;
             this.isOpen = false;
             this.hasLoadedOnce = false;
@@ -5050,6 +5076,9 @@
             }
             return flatOptions;
         }
+        detroy() {
+            this.container.popup.detroy();
+        }
     }
 
     /**
@@ -5058,9 +5087,7 @@
     class ElementAdditionObserver {
         constructor() {
             this._isActive = false;
-            /** @type {MutationObserver|null} */
             this._observer = null;
-            /** @type {Array<(el: T) => void>} */
             this._actions = [];
         }
         /**
@@ -5145,9 +5172,9 @@
             merged.on.load = (merged.on.load ?? []);
             this.bindedQueries.set(query, merged);
             const doneToken = Libs.randomString();
-            Libs.timerProcess.setExecute(doneToken, () => {
+            Libs.callbackScheduler.on(doneToken, () => {
                 iEvents.callEvent([this.find(query)], ...merged.on.load);
-                Libs.timerProcess.clearExecute(doneToken);
+                Libs.callbackScheduler.clear(doneToken);
                 merged.on.load = [];
             });
             const selectElements = Libs.getElements(query);
@@ -5156,7 +5183,7 @@
                     if (item.tagName === "SELECT") {
                         Libs.removeUnbinderMap(item);
                         if (this.applySelectBox(item, merged)) {
-                            Libs.timerProcess.run(doneToken);
+                            Libs.callbackScheduler.run(doneToken);
                         }
                     }
                 })();
@@ -5281,6 +5308,8 @@
             const bindMap = Libs.getBinderMap(selectElement);
             if (!bindMap)
                 return;
+            const popup = bindMap.container?.popup;
+            popup?.detroy();
             Libs.setUnbinderMap(selectElement, bindMap);
             const wasObserving = !!this.EAObserver;
             if (wasObserving)
@@ -5421,7 +5450,6 @@
 
     /**
      * Checks for a previously loaded global library instance by name.
-     * If found (with `__loaded` flag), logs a warning and returns true; otherwise
      * initializes a loading placeholder on `window[name]` and returns false.
      *
      * @param {string} LIB_NAME - The global namespace key to check on `window`.
@@ -5431,13 +5459,12 @@
         if (typeof window === "undefined")
             return false;
         const existing = window[LIB_NAME];
-        if (existing && existing.__loaded) {
-            console.warn(`[${LIB_NAME}] Already loaded (v${existing.__version}). ` +
+        if (existing) {
+            console.warn(`[${LIB_NAME}] Already loaded (v${existing.version}). ` +
                 `Using existing instance. Please remove duplicate <script> tags.`);
             return true;
         }
         const base = existing ?? {};
-        base.__loading = true;
         window[LIB_NAME] = base;
         return false;
     }
@@ -5455,16 +5482,14 @@
         if (typeof window === "undefined")
             return;
         const ns = (window[name] ?? {});
-        ns.__loaded = true;
-        ns.__loading = false;
-        ns.__version = version;
+        ns.version = version;
         Object.assign(ns, api);
         Object.freeze(ns);
         window[name] = ns;
         console.log(`[${name}] v${version} loaded successfully`);
     }
 
-    const version = "1.1.0";
+    const version = "1.1.2";
     const name = "SelectiveUI";
     const alreadyLoaded = checkDuplicate(name);
     function getGlobal() {
@@ -5496,7 +5521,7 @@
      * Destroys Selective instances associated with the given query.
      * Proxies to a global loaded instance if available; otherwise uses local Selective.destroy.
      */
-    function destroy(query) {
+    function destroy(query = null) {
         const global = getGlobal();
         if (alreadyLoaded && global)
             return global.destroy(query);
@@ -5523,11 +5548,13 @@
         return Effector(element);
     }
     if (!alreadyLoaded) {
-        let initialized = false;
+        const api = { bind, find, destroy, rebind, effector, version };
+        markLoaded(name, version, api);
+        let domInitialized = false;
         function init() {
-            if (initialized)
+            if (domInitialized)
                 return;
-            initialized = true;
+            domInitialized = true;
             document.addEventListener("mousedown", () => {
                 const sels = Libs.getBindedCommand();
                 if (sels.length > 0) {
@@ -5537,8 +5564,6 @@
                 }
             });
             Selective.Observer();
-            const api = { bind, find, destroy, rebind, effector, version };
-            markLoaded(name, version, api);
         }
         if (document.readyState === "loading") {
             document.addEventListener("DOMContentLoaded", init);