selective-ui 1.4.1 → 1.4.2

package/dist/selective-ui.umd.js

@@ -1,4 +1,4 @@
-/*! Selective UI v1.4.1 | MIT License */
+/*! Selective UI v1.4.2 | MIT License */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
     typeof define === 'function' && define.amd ? define(['exports'], factory) :
@@ -978,8 +978,9 @@
          *
          * @param select - Native `<select>` element used as the sizing reference and option source.
          * @param view - View panel element whose inline styles will be updated.
+         * @param isWidthOnly - If true, only the width will be updated; height will be left unchanged.
          */
-        static resizeBox(select, view) {
+        static resizeBox(select, view, isWidthOnly = false) {
             const bindedMap = Libs.getBinderMap(select);
             if (!bindedMap?.options)
                 return;
@@ -999,7 +1000,12 @@
                 width = options.width;
             if (cfgHeight > 0)
                 height = options.height;
-            Object.assign(view.style, { width, height, minWidth, minHeight });
+            if (isWidthOnly) {
+                Object.assign(view.style, { width, maxWidth: width, minWidth });
+            }
+            else {
+                Object.assign(view.style, { width, height, maxWidth: width, minWidth, minHeight });
+            }
         }
     }
 
@@ -4023,6 +4029,32 @@
             }
             iEvents.callEvent([this, value], ...this.privOnInternalSelected);
         }
+        /**
+         * Resolved display mask for this option.
+         *
+         * The mask is the primary render label used by the UI layer and supports
+         * optional inline tag translation / rich HTML rendering.
+         *
+         * Source priority:
+         * 1. `data-mask` (`dataset.mask`)
+         * 2. Native `<option>` text content (`targetElement.text`)
+         *
+         * Processing pipeline:
+         * - Raw content is first passed through {@link Libs.tagTranslate}.
+         * - When `options.allowHtml === true`, translated HTML is preserved.
+         * - Otherwise, all markup is stripped via {@link Libs.stripHtml}.
+         *
+         * Unlike {@link text}, this getter prioritizes the custom dataset mask,
+         * making it suitable for display overrides without mutating the native
+         * `<option>` label.
+         *
+         * @returns {string} Render-ready option label.
+         */
+        get mask() {
+            const raw = this.dataset?.mask ?? this.targetElement?.text ?? "";
+            const translated = Libs.tagTranslate(raw);
+            return this.options.allowHtml ? translated : Libs.stripHtml(translated);
+        }
         /**
          * Display label for rendering (with tag translation and HTML policy).
          *
@@ -4036,7 +4068,7 @@
          * @returns {string}
          */
         get text() {
-            const raw = this.dataset?.mask ?? this.targetElement?.text ?? "";
+            const raw = this.targetElement?.text ?? this.dataset?.mask ?? "";
             const translated = Libs.tagTranslate(raw);
             return this.options.allowHtml ? translated : Libs.stripHtml(translated);
         }
@@ -5944,6 +5976,16 @@
              * This flag is intentionally generic and is coordinated by higher-level components.
              */
             this.isSkipEvent = false;
+            /**
+             * Tracks all scheduler keys registered by this adapter instance via
+             * {@link onPropChanging} and {@link onPropChanged}.
+             *
+             * Used during {@link destroy} to clean up all associated pipelines
+             * from the global {@link Libs.callbackScheduler}.
+             *
+             * Keys are deduplicated automatically by Set semantics.
+             */
+            this.callbackSchedulerList = new Set();
             this.items = items;
             this.init();
         }
@@ -5985,7 +6027,9 @@
          * @see {@link changingProp}
          */
         onPropChanging(propName, callback) {
-            Libs.callbackScheduler.on(`${propName}ing_${this.adapterKey}`, callback, { debounce: 0 });
+            const key = `${propName}ing_${this.adapterKey}`;
+            Libs.callbackScheduler.on(key, callback, { debounce: 0 });
+            this.callbackSchedulerList.add(key);
         }
         /**
          * Registers a **post-change** callback for a property pipeline.
@@ -6001,9 +6045,11 @@
          * @see {@link changeProp}
          */
         onPropChanged(propName, callback) {
-            Libs.callbackScheduler.on(`${propName}_${this.adapterKey}`, callback, {
+            const key = `${propName}_${this.adapterKey}`;
+            Libs.callbackScheduler.on(key, callback, {
                 debounce: 0,
             });
+            this.callbackSchedulerList.add(key);
         }
         /**
          * Triggers the **post-change** pipeline for a given property.
@@ -6144,11 +6190,16 @@
             if (this.is(LifecycleState.DESTROYED)) {
                 return;
             }
+            this.callbackSchedulerList.forEach((key) => {
+                Libs.callbackScheduler.off(key);
+            });
+            this.callbackSchedulerList.clear();
             this.recyclerView = null;
             this.items.forEach((item) => {
                 item?.destroy?.();
             });
             this.items = [];
+            super.destroy();
         }
     }
 
@@ -7448,7 +7499,7 @@
          * @returns {void}
          */
         resetHighlight() {
-            this.setHighlight(0);
+            this.setHighlight(0, false);
         }
         /**
          * Moves highlight among **visible** options and optionally scrolls the new target into view.
@@ -7541,11 +7592,10 @@
                 this.currentHighlightIndex = i;
                 if (isScrollToView) {
                     const el = item.view?.getView?.();
-                    if (el) {
+                    if (el?.isConnected) {
                         el.scrollIntoView({ block: "center", behavior: "smooth" });
                     }
                     else {
-                        // If virtualized, ensure the item is rendered before trying to scroll.
                         this.recyclerView?.ensureRendered?.(i, {
                             scrollIntoView: true,
                         });
@@ -7821,6 +7871,12 @@
             this.lastRenderCount = 0;
             this.suspended = false;
             this.resumeResizeAfter = false;
+            /**
+             * When set, scrollToIndex() will be called after the next measureVisibleAndUpdate()
+             * completes and Fenwick has been updated with real heights.
+             * Set by ensureRendered() and cleared after the corrective scroll fires.
+             */
+            this.pendingScrollToIndex = null;
             /** Small cache for sticky header height (≈16ms TTL) to limit layout reads. */
             this.stickyCacheTick = 0;
             this.stickyCacheVal = 0;
@@ -7987,9 +8043,19 @@
          * @returns {void}
          */
         ensureRendered(index, opt) {
-            this.mountRange(index, index);
-            if (opt?.scrollIntoView)
-                this.scrollToIndex(index);
+            if (!opt?.scrollIntoView) {
+                // No scroll requested — mount only (legacy path, used by probes).
+                this.mountRange(index, index);
+                return;
+            }
+            // Pass 1: instant — brings window to vicinity, triggers measure.
+            // Must be instant so Pass 2 smooth scroll isn't interrupted mid-animation.
+            this.scrollToIndex(index, "instant");
+            // Pass 2: measureVisibleAndUpdate() will consume this and fire a corrective
+            // smooth scroll after Fenwick has been updated with real heights.
+            // rv.resume() is guaranteed to run before this callback (popup.open onComplete
+            // calls rv.resume() first), so the window is already rendered when we arrive here.
+            this.pendingScrollToIndex = index;
         }
         /**
          * Scrolls the scroll container to align the item at `index` into view.
@@ -8003,15 +8069,25 @@
          * @param {number} index - Item index to bring into view.
          * @returns {void}
          */
-        scrollToIndex(index) {
+        scrollToIndex(index, behavior = "smooth") {
             const count = this.adapter?.itemCount?.() ?? 0;
             if (count <= 0)
                 return;
             const topInContainer = this.offsetTopOf(index);
             const containerTop = this.containerTopInScroll();
-            const target = containerTop + topInContainer;
+            const stickyH = this.stickyTopHeight();
+            const viewportH = Math.max(0, this.scrollEl.clientHeight - stickyH);
+            // item height from cache, or current estimate for unmeasured items
+            const est = this.getEstimate();
+            const itemH = this.heightCache[index] ?? est;
+            // Align item center to viewport center (below any sticky header).
+            // viewportH already excludes stickyH, so no further offset needed.
+            // Equivalent to scrollIntoView({ block: "center" }).
+            const centeredTarget = containerTop + topInContainer
+                - (viewportH - itemH) / 3;
             const maxScroll = Math.max(0, this.scrollEl.scrollHeight - this.scrollEl.clientHeight);
-            this.scrollEl.scrollTop = Math.min(Math.max(0, target), maxScroll);
+            const clamped = Math.min(Math.max(0, centeredTarget), maxScroll);
+            this.scrollEl.scrollTo({ top: clamped, behavior });
         }
         /**
          * Disposes runtime resources without destroying the instance.
@@ -8078,9 +8154,22 @@
             if (count <= 0)
                 return;
             this.suspend();
-            this.resetState();
+            this.pendingScrollToIndex = null;
+            // When visibility changes (search filter applied or cleared), heightCache may
+            // contain heights measured while only a subset of items was visible. Re-using
+            // these partial measurements in rebuildFenwick() causes incorrect prefix sums
+            // (e.g. items measured while scrolled into a filtered window have real heights,
+            // while surrounding items still use estimates — creating an uneven Fenwick).
+            //
+            // Safe fix: clear heightCache entirely on visibility change. The adaptive
+            // estimator will re-seed from probeInitialHeight() on the next render, and
+            // items will be re-measured as they scroll into view.
+            this.heightCache = [];
+            this.measuredSum = 0;
+            this.measuredCount = 0;
+            this.firstMeasured = false;
+            this.resetDOM();
             this.cleanupInvisibleItems();
-            this.recomputeMeasuredStats(count);
             this.rebuildFenwick(count);
             this.start = 0;
             this.end = -1;
@@ -8098,7 +8187,30 @@
             }
         }
         /**
-         * Resets internal state: mounted elements, caches, Fenwick sums, padding, and estimator stats.
+         * Resets DOM nodes, Fenwick sums, padding, and estimator stats — but preserves {@link heightCache}.
+         *
+         * Use this inside {@link refreshItem} so that {@link recomputeMeasuredStats} can still
+         * read previously measured heights before the Fenwick tree is rebuilt.
+         *
+         * DOM side effects:
+         * - Removes all currently mounted item elements tracked in {@link created}.
+         * - Resets pad heights to `0px`.
+         *
+         * @returns {void}
+         */
+        resetDOM() {
+            this.created.forEach((el) => el.remove());
+            this.created.clear();
+            this.fenwick.reset(0);
+            this.PadTop.style.height = "0px";
+            this.PadBottom.style.height = "0px";
+            this.firstMeasured = false;
+        }
+        /**
+         * Full reset: clears DOM nodes, Fenwick sums, padding, estimator stats, AND {@link heightCache}.
+         *
+         * Use this for complete teardown (e.g., adapter swap, destroy sequence) where all
+         * cached measurements should be discarded.
          *
          * DOM side effects:
          * - Removes all currently mounted item elements tracked in {@link created}.
@@ -8452,6 +8564,15 @@
                     this.rebuildFenwick(count);
                 this.scheduleUpdateWindow();
             }
+            // Corrective scroll: if ensureRendered() registered a target index, fire
+            // scrollToIndex() now that real heights are in Fenwick. Clear the target
+            // first to prevent infinite re-triggering (scrollToIndex may cause another
+            // measure cycle, but heights won't change so changed === false next time).
+            if (this.pendingScrollToIndex !== null) {
+                const target = this.pendingScrollToIndex;
+                this.pendingScrollToIndex = null;
+                this.scrollToIndex(target, "smooth");
+            }
         }
         /**
          * Scroll event handler. Schedules a window update on the next frame.
@@ -9007,6 +9128,7 @@
                 e.preventDefault();
             });
             Refresher.resizeBox(select, container.tags.ViewPanel);
+            Refresher.resizeBox(select, this.node, true);
             select.classList.add("init");
             // initial mask
             const action = this.getAction();
@@ -9322,7 +9444,7 @@
                 get mask() {
                     const item_list = [];
                     superThis.getModelOption(true).forEach((m) => {
-                        item_list.push(m.text);
+                        item_list.push(m.mask);
                     });
                     return item_list;
                 },
@@ -9429,13 +9551,14 @@
                         return;
                     // AJAX: load missing values
                     if (container.searchController?.isAjax?.()) {
+                        container.searchController.resetPagination();
+                        superThis.hasLoadedOnce = false;
                         const { missing } = container.searchController.checkMissingValues(value);
                         if (missing.length > 0) {
                             (async () => {
                                 if (bindedOptions.loadingfield)
                                     container.popup?.showLoading?.();
                                 try {
-                                    container.searchController.resetPagination();
                                     const result = await container.searchController.loadByValues(missing);
                                     if (result.success && result.items.length > 0) {
                                         result.items.forEach((it) => {
@@ -9451,6 +9574,10 @@
                                     }
                                     else if (missing.length > 0) {
                                         console.warn(`Could not load ${missing.length} values:`, missing);
+                                        setTimeout(() => {
+                                            container.searchController.resetPagination();
+                                            this.change(false, trigger);
+                                        }, 200);
                                     }
                                 }
                                 catch (error) {
@@ -9526,7 +9653,13 @@
                         adapter.resetHighlight();
                     }
                     this.load();
-                    container.popup.open(null, !container.popup.loadingState.isVisible);
+                    container.popup.open(() => {
+                        setTimeout(() => {
+                            if (selectedOption) {
+                                adapter.setHighlight(selectedOption, bindedOptions.autoscroll);
+                            }
+                        }, 100);
+                    }, !container.popup.loadingState.isVisible);
                     container.searchbox.show();
                     const ViewPanel = container.tags.ViewPanel;
                     ViewPanel.setAttribute("aria-expanded", "true");
@@ -9638,7 +9771,9 @@
                                 .search("")
                                 .then(() => {
                                 container.popup?.triggerResize?.();
-                                resove(getInstance());
+                                setTimeout(() => {
+                                    resove(getInstance());
+                                }, 60);
                             })
                                 .catch((err) => {
                                 console.error("Initial ajax load error:", err);
@@ -10607,7 +10742,7 @@
     if (typeof globalThis.GLOBAL_SEUI == "undefined") {
         const SECLASS = new Selective();
         globalThis.GLOBAL_SEUI = {
-            version: "1.4.1",
+            version: "1.4.2",
             name: "SelectiveUI",
             bind: SECLASS.bind.bind(SECLASS),
             find: SECLASS.find.bind(SECLASS),
@@ -10640,7 +10775,7 @@
                 init();
             }
         }
-        console.log(`[${"SelectiveUI"}] v${"1.4.1"} loaded successfully`);
+        console.log(`[${"SelectiveUI"}] v${"1.4.2"} loaded successfully`);
     }
     else {
         console.warn(`[${globalThis.GLOBAL_SEUI.name}] Already loaded (v${globalThis.GLOBAL_SEUI.version}). ` +