selective-ui 1.1.6 → 1.2.1

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

@@ -3,6 +3,7 @@ import { GroupModel } from "../models/group-model";
 import { OptionModel } from "../models/option-model";
 import { ModelContract } from "../types/core/base/model.type";
 import { RecyclerViewContract } from "../types/core/base/recyclerview.type";
+import { ViewContract } from "../types/core/base/view.type";
 import { SelectiveOptions } from "../types/utils/selective.type";
 import { Adapter } from "./base/adapter";
 
@@ -12,7 +13,7 @@ import { Adapter } from "./base/adapter";
  */
 export class ModelManager<
     TModel extends ModelContract<any, any>,
-    TAdapter extends Adapter<TModel>
+    TAdapter extends Adapter<TModel, ViewContract<any>>
 > {
     private _privModelList: Array<GroupModel | OptionModel> = [];
 
@@ -120,7 +121,7 @@ export class ModelManager<
                 const optionEl = data as HTMLOptionElement;
                 const optionModel = new OptionModel(this.options, optionEl);
 
-                const parentGroup = (optionEl as any)["__parentGroup"] as HTMLOptGroupElement | undefined;
+                const parentGroup = optionEl["__parentGroup"] as HTMLOptGroupElement | undefined;
 
                 if (parentGroup && currentGroup && parentGroup === currentGroup.targetElement) {
                     currentGroup.addItem(optionModel);
@@ -150,7 +151,7 @@ export class ModelManager<
             this._privAdapterHandle.syncFromSource(this._privModelList as unknown as TModel[]);
         }
 
-        this.refresh();
+        this.refresh(false);
     }
 
     /**
@@ -159,25 +160,27 @@ export class ModelManager<
      */
     notify(): void {
         if (!this._privAdapterHandle) return;
-        this.refresh();
+        this.refresh(false);
     }
 
     /**
      * Initializes adapter and recycler view instances, attaches them to a container element,
      * and applies optional configuration overrides for adapter and recyclerView.
      */
-    load(
+    
+    load<TExtra extends object = {}>(
         viewElement: HTMLElement,
         adapterOpt: Partial<TAdapter> = {},
-        recyclerViewOpt: Partial<RecyclerViewContract<TAdapter>> = {}
+        recyclerViewOpt: Partial<RecyclerViewContract<TAdapter>> & TExtra = {} as any
     ): void {
+
         this._privAdapterHandle = new this._privAdapter(this._privModelList as unknown as TModel[]);
         Object.assign(this._privAdapterHandle, adapterOpt);
 
         this._privRecyclerViewHandle = new this._privRecyclerView(viewElement);
-        this._privRecyclerViewHandle.setAdapter(this._privAdapterHandle);
-
         Object.assign(this._privRecyclerViewHandle, recyclerViewOpt);
+
+        this._privRecyclerViewHandle.setAdapter(this._privAdapterHandle);
     }
 
     /**
@@ -240,7 +243,7 @@ export class ModelManager<
                     existingOption.update(dataVset);
                     existingOption.position = position;
 
-                    const parentGroup = (dataVset as any)["__parentGroup"] as HTMLOptGroupElement | undefined;
+                    const parentGroup = dataVset["__parentGroup"] as HTMLOptGroupElement | undefined;
 
                     if (parentGroup && currentGroup) {
                         currentGroup.addItem(existingOption);
@@ -255,7 +258,7 @@ export class ModelManager<
                     const newOption = new OptionModel(this.options, dataVset);
                     newOption.position = position;
 
-                    const parentGroup = (dataVset as any)["__parentGroup"] as HTMLOptGroupElement | undefined;
+                    const parentGroup = dataVset["__parentGroup"] as HTMLOptGroupElement | undefined;
 
                     if (parentGroup && currentGroup) {
                         currentGroup.addItem(newOption);
@@ -269,12 +272,15 @@ export class ModelManager<
             }
         });
 
+        let isUpdate = true;
         oldGroupMap.forEach((removedGroup) => {
-            removedGroup.view?.getView?.()?.remove?.();
+            isUpdate = false;
+            removedGroup.remove();
         });
 
         oldOptionMap.forEach((removedOption) => {
-            removedOption.view?.getView?.()?.remove?.();
+            isUpdate = false;
+            removedOption.remove();
         });
 
         this._privModelList = newModels;
@@ -284,7 +290,7 @@ export class ModelManager<
         }
 
         this.onUpdated();
-        this.refresh();
+        this.refresh(isUpdate);
     }
 
     /**
@@ -299,16 +305,18 @@ export class ModelManager<
      * @param {boolean} value - True to skip events; false to restore normal behavior.
      */
     skipEvent(value: boolean): void {
-        if (this._privAdapterHandle) (this._privAdapterHandle as any).isSkipEvent = value;
+        if (this._privAdapterHandle) this._privAdapterHandle.isSkipEvent = value;
     }
 
     /**
      * Re-renders the recycler view if present and invokes the post-refresh hook.
      * No-op if the recycler view is not initialized.
+     * 
+     * @param isUpdate - Indicates if this refresh is due to an update operation.
      */
-    refresh(): void {
+    refresh(isUpdate: boolean): void {
         if (!this._privRecyclerViewHandle) return;
-        this._privRecyclerViewHandle.refresh();
+        this._privRecyclerViewHandle.refresh(isUpdate);
         this.onUpdated();
     }
 

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

@@ -91,7 +91,7 @@ export class SearchController {
                     headers: { "Content-Type": "application/x-www-form-urlencoded" },
                 });
             } else {
-                const params = new URLSearchParams(payload as any).toString();
+                const params = new URLSearchParams(payload).toString();
                 response = await fetch(`${cfg.url}?${params}`);
             }
 
@@ -168,7 +168,7 @@ export class SearchController {
     clear(): void {
         this._paginationState.currentKeyword = "";
 
-        const { modelList } = this._modelManager.getResources() as any;
+        const { modelList } = this._modelManager.getResources();
         const flatOptions: OptionModel[] = [];
 
         for (const m of modelList as MixedItem[]) {
@@ -212,7 +212,7 @@ export class SearchController {
         const lower = String(keyword ?? "").toLowerCase();
         const lowerNA = Libs.string2normalize(lower);
 
-        const { modelList } = this._modelManager.getResources() as any;
+        const { modelList } = this._modelManager.getResources();
 
         const flatOptions: OptionModel[] = [];
         for (const m of modelList as MixedItem[]) {
@@ -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;
@@ -291,7 +288,7 @@ export class SearchController {
                     signal: this._abortController.signal,
                 });
             } else {
-                const params = new URLSearchParams(payload as any).toString();
+                const params = new URLSearchParams(payload).toString();
                 response = await fetch(`${cfg.url}?${params}`, { signal: this._abortController.signal });
             }
 

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,15 +352,15 @@ class EffectorImpl implements EffectorInterface {
 
             if (animate && (isPositionChanged || heightDiff > 1)) {
                 this._resizeTimeout = setTimeout(() => {
-                    this.element.style.transition = "none";
-                    if (isPositionChanged) delete (this.element.style as any).transition;
+                    this.element.style.transition = null;
+                    if (isPositionChanged) delete this.element.style.transition;
                     onComplete?.();
                 }, duration);
             } else {
-                if (isPositionChanged) delete (this.element.style as any).transition;
+                if (isPositionChanged) delete this.element.style.transition;
                 onComplete?.();
             }
-        });
+        }, 20);
 
         return this;
     }

package/src/ts/types/components/state.box.type.ts

@@ -3,21 +3,4 @@
  * - "notfound": No matching results found.
  * - "nodata": No data available to display.
  */
-export type EmptyStateType = "notfound" | "nodata";
-
-/**
- * Configuration options for displaying empty states.
- */
-export interface EmptyStateOptions {
-    textNoData: string;      // Text to display when there is no data
-    textNotFound: string;    // Text to display when no results are found
-    [key: string]: unknown;  // Allows additional custom properties
-}
-
-/**
- * Configuration options for displaying loading state.
- */
-export interface LoadingStateOptions {
-    textLoading: string;     // Text to display while data is loading
-    [key: string]: unknown;  // Allows additional custom properties
-}
+export type EmptyStateType = "notfound" | "nodata";

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

@@ -18,6 +18,20 @@ export interface AdapterContract<TItem extends ModelContract<any, any>> {
      */
     adapterKey: string;
 
+    /**
+     * Reference to the associated RecyclerView instance.
+     *
+     * Acts as the rendering host and lifecycle coordinator for this adapter.
+     * The adapter uses this reference to:
+     * - Access recycler-level configuration and state
+     * - Request layout, rebind, or invalidation operations
+     * - Coordinate virtual scrolling, recycling, or view reuse strategies
+     *
+     * The concrete type is intentionally left open to avoid tight coupling
+     * between the adapter contract and a specific RecyclerView implementation.
+     */
+    recyclerView: any;
+
     /**
      * Replace the current list of items with a new list.
      * Implementations should also trigger a re-render when appropriate.

package/src/ts/types/core/base/model.type.ts

@@ -32,4 +32,9 @@ export interface ModelContract<TTarget, TView> {
      * Indicates whether the model has been initialized.
      */
     isInit: boolean;
+
+    /**
+     * Indicates whether the model has been vissibly.
+     */
+    visible?: boolean;
 }

package/src/ts/types/core/base/recyclerview.type.ts

@@ -48,6 +48,8 @@ export interface RecyclerViewContract<TAdapter extends AdapterContract<any>> {
     /**
      * Refresh the rendered views to reflect current adapter data/state.
      * May perform diffing, partial updates, or full re-binding.
+     * 
+     * @param isUpdate - Indicates if this refresh is due to an update operation.
      */
-    refresh(): void;
+    refresh(isUpdate: boolean): void;
 }

package/src/ts/types/core/base/view.type.ts

@@ -27,6 +27,12 @@ export interface ViewContract<TTags extends Record<string, HTMLElement>> {
      */
     render(): void;
 
+    /**
+     * Update the view.
+     * Implementations typically refresh displayed data without a full re-render.
+     */
+    update(): void;
+
     /**
      * Get the root HTMLElement for the mounted view.
      *

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

@@ -0,0 +1,66 @@
+
+/**
+ * Configuration options for the virtualized recycler view.
+ * Controls which element is used for scrolling, sizing heuristics, and how many
+ * extra items are rendered outside the viewport to reduce popping.
+ */
+export type VirtualOptions = {
+  /**
+   * The scroll container element used to measure scroll position and viewport.
+   * If omitted, the implementation may default to the nearest scrollable parent
+   * or the window (depending on your mount strategy).
+   */
+  scrollEl?: HTMLElement;
+
+  /**
+   * Estimated height (in pixels) for a single item.
+   * Used as a heuristic before real measurements are available (especially when
+   * `dynamicHeights` is enabled) to compute the total scrollable size.
+   */
+  estimateItemHeight?: number;
+
+  /**
+   * Number of extra items to render above and below the visible range.
+   * Higher values reduce blanking during fast scroll at the cost of more DOM work.
+   */
+  overscan?: number;
+
+  /**
+   * Enables measuring and caching actual item heights.
+   * When `true`, the recycler view supports variable-height items instead of
+   * assuming a fixed height for all items.
+   */
+  dynamicHeights?: boolean;
+
+  /**
+   * Enables adaptive estimation based on observed item measurements.
+   * When `true`, `estimateItemHeight` may be refined over time to improve
+   * scrollbar accuracy and reduce layout jumps.
+   */
+  adaptiveEstimate?: boolean;
+};
+
+/**
+ * Tag map for the virtual recycler view DOM structure.
+ * These nodes are typically produced by `mountView`/`mountNode` and used to
+ * manipulate padding and host the rendered item elements.
+ */
+export type VirtualRecyclerViewTags = {
+  /**
+   * Top spacer element that simulates the height of items scrolled past.
+   * Its height is adjusted to keep the visible items aligned with the scroll offset.
+   */
+  PadTop: HTMLDivElement;
+
+  /**
+   * Container that hosts the currently rendered (visible + overscan) item elements.
+   * Items are inserted/updated within this element during virtualization.
+   */
+  ItemsHost: HTMLDivElement;
+
+  /**
+   * Bottom spacer element that simulates the height of items not yet rendered.
+   * Its height is adjusted to represent remaining content below the visible range.
+   */
+  PadBottom: HTMLDivElement;
+};

package/src/ts/types/utils/istorage.type.ts

@@ -21,6 +21,7 @@ export type StorageEvents = {
  */
 export interface DefaultConfig {
     showPanel?: boolean;             // Whether to show the panel initially
+    virtualScroll?: boolean;         // Enable virtual scroll
     accessoryStyle?: string;         // CSS style for accessory elements
     multiple?: boolean;              // Enable multiple selection
     minWidth?: string;               // Minimum width of the component

package/src/ts/utils/istorage.ts

@@ -6,6 +6,7 @@ import { BinderMap, DefaultConfig } from "../types/utils/istorage.type";
 export class iStorage {
     defaultConfig: DefaultConfig = {
         showPanel: true,
+        virtualScroll: true,
         accessoryStyle: "top",
         multiple: false,
         minWidth: "50px",
@@ -59,10 +60,10 @@ export class iStorage {
     };
 
     /** Bound instance map (keyed by select element). */
-    bindedMap: Map<HTMLSelectElement, BinderMap> = new Map();
+    bindedMap: Map<HTMLSelectElement|HTMLElement, BinderMap> = new Map();
 
     /** Unbind cache map (keyed by select element). */
-    unbindedMap: Map<HTMLSelectElement, BinderMap> = new Map();
+    unbindedMap: Map<HTMLSelectElement|HTMLElement, BinderMap> = new Map();
 
     /** List of bound selectors/commands. */
     bindedCommand: string[] = [];

package/src/ts/utils/libs.ts

@@ -2,6 +2,7 @@ import { BinderMap } from "../types/utils/istorage.type";
 import { MountViewResult, NodeSpec } from "../types/utils/libs.type";
 import { iStorage } from "./istorage";
 import { CallbackScheduler } from "./callback-scheduler";
+import { SelectiveOptions } from "../types/utils/selective.type";
 
 /**
  * @class
@@ -88,8 +89,8 @@ export class Libs {
         }
 
         // NodeList or array-like
-        if ((queryCommon as any) instanceof NodeList || Array.isArray(queryCommon)) {
-            return Array.from(queryCommon as any);
+        if (queryCommon instanceof NodeList || Array.isArray(queryCommon)) {
+            return Array.from(queryCommon);
         }
 
         return [];
@@ -131,7 +132,7 @@ export class Libs {
         (["style", "dataset"] as const).forEach((property) => {
             const value = nodeOption[property];
             if (value && typeof value === "object") {
-                Object.assign((element_creation as any)[property], value);
+                Object.assign(element_creation[property], value);
             }
             delete nodeOption[property];
         });
@@ -176,7 +177,7 @@ export class Libs {
             if (value === null) {
                 element_creation.removeAttribute(key);
             } else {
-                (element_creation as any)[key] = value;
+                element_creation[key] = value;
             }
         });
 
@@ -260,18 +261,18 @@ export class Libs {
      * matching element properties or data-* attributes when present.
      *
      * @param {HTMLElement} element - Source element providing overrides.
-     * @param {object} options - Default configuration to be merged.
-     * @returns {object} - Final configuration after element overrides.
+     * @param {SelectiveOptions} options - Default configuration to be merged.
+     * @returns {SelectiveOptions} - Final configuration after element overrides.
      */
-    static buildConfig<T extends Record<string, any>>(element: HTMLElement, options: T): T {
-        const myOptions = this.jsCopyObject(options);
+    static buildConfig(element: HTMLElement, options: SelectiveOptions): SelectiveOptions {
+        const myOptions = this.jsCopyObject<SelectiveOptions>(options);
 
         for (const optionKey in myOptions) {
-            const propValue = (element as any)[optionKey];
+            const propValue = element[optionKey];
             if (propValue) {
-                (myOptions as any)[optionKey] = propValue;
+                myOptions[optionKey] = propValue;
             } else if (typeof element?.dataset?.[optionKey] !== "undefined") {
-                (myOptions as any)[optionKey] = element.dataset[optionKey];
+                myOptions[optionKey] = element.dataset[optionKey];
             }
         }
 
@@ -298,10 +299,10 @@ export class Libs {
                     const cfgVar = cfg[optionKey];
                     for (const actKey in cfgVar) {
                         // Keep original behavior (push), do not change semantics.
-                        (level0 as any)[optionKey][actKey].push((cfgVar as any)[actKey]);
+                        level0[optionKey][actKey].push(cfgVar[actKey]);
                     }
                 } else {
-                    (level0 as any)[optionKey] = (cfg as any)[optionKey];
+                    level0[optionKey] = cfg[optionKey];
                 }
             }
         }
@@ -343,7 +344,7 @@ export class Libs {
      * @returns {boolean} - True if an entry existed and was removed.
      */
     static removeBinderMap(element: HTMLElement): boolean {
-        return this.iStorage.bindedMap.delete(element as any);
+        return this.iStorage.bindedMap.delete(element);
     }
 
     /**
@@ -353,17 +354,17 @@ export class Libs {
      * @returns {BinderMap | null} - The stored binder map value or undefined if absent.
      */
     static getBinderMap(item: HTMLElement): BinderMap | null {
-        return this.iStorage.bindedMap.get(item as any);
+        return this.iStorage.bindedMap.get(item);
     }
 
     /**
      * Sets or updates the binder map entry for a given element.
      *
      * @param {HTMLElement} item - Element key to associate with the binder map.
-     * @param {unknown} bindMap - Value to store in the binder map.
+     * @param {BinderMap} bindMap - Value to store in the binder map.
      */
-    static setBinderMap(item: HTMLElement, bindMap: unknown): void {
-        this.iStorage.bindedMap.set(item as any, bindMap as any);
+    static setBinderMap(item: HTMLElement, bindMap: BinderMap): void {
+        this.iStorage.bindedMap.set(item, bindMap);
     }
 
     /**
@@ -373,7 +374,7 @@ export class Libs {
      * @returns {boolean} - True if an entry existed and was removed.
      */
     static removeUnbinderMap(element: HTMLElement): boolean {
-        return this.iStorage.unbindedMap.delete(element as any);
+        return this.iStorage.unbindedMap.delete(element);
     }
 
     /**
@@ -383,17 +384,17 @@ export class Libs {
      * @returns {unknown} - The stored unbinder map value or undefined if absent.
      */
     static getUnbinderMap(item: HTMLElement): unknown {
-        return this.iStorage.unbindedMap.get(item as any);
+        return this.iStorage.unbindedMap.get(item);
     }
 
     /**
      * Sets or updates the unbinder map entry for a given element.
      *
      * @param {HTMLElement} item - Element key to associate with the unbinder map.
-     * @param {unknown} bindMap - Value to store in the unbinder map.
+     * @param {BinderMap} bindMap - Value to store in the unbinder map.
      */
-    static setUnbinderMap(item: HTMLElement, bindMap: unknown): void {
-        this.iStorage.unbindedMap.set(item as any, bindMap as any);
+    static setUnbinderMap(item: HTMLElement, bindMap: BinderMap): void {
+        this.iStorage.unbindedMap.set(item, bindMap);
     }
 
     /**
@@ -430,7 +431,7 @@ export class Libs {
             .replace(/\`\>/g, ">")
             .trim();
 
-        const doc = (globalThis as any)?.document as Document | undefined;
+        const doc = globalThis?.document as Document | undefined;
 
         if (!doc || typeof doc.createElement !== "function") {
             s = s
@@ -510,7 +511,7 @@ export class Libs {
                 result.push(group);
 
                 Array.from(group.children).forEach((option) => {
-                    (option as any).__parentGroup = group;
+                    option["__parentGroup"] = group;
                     result.push(option as HTMLOptionElement);
                 });
             } else if (child.tagName === "OPTION") {

package/src/ts/utils/selective.ts

@@ -30,7 +30,7 @@ export class Selective {
 
         const doneToken = Libs.randomString();
         Libs.callbackScheduler.on(doneToken, () => {
-            iEvents.callEvent([this.find(query)], ...(merged.on!.load as any[]));
+            iEvents.callEvent([this.find(query)], ...(merged.on!.load));
             Libs.callbackScheduler.clear(doneToken);
             merged.on!.load = [];
         });
@@ -194,7 +194,7 @@ export class Selective {
         selectElement.style.display = "";
         selectElement.style.visibility = "";
         selectElement.disabled = false;
-        delete (selectElement as any).dataset.selectiveId;
+        delete selectElement.dataset.selectiveId;
 
         if (wrapper && wrapper.parentNode) {
             wrapper.parentNode.replaceChild(selectElement, wrapper);
@@ -245,12 +245,12 @@ export class Selective {
         const bindMap: BinderMap = { options: options_cfg };
         Libs.setBinderMap(selectElement, bindMap);
 
-        const selectBox = new SelectBox(selectElement, this as any);
-        bindMap.container = (selectBox as any).container;
-        bindMap.action = (selectBox as any).getAction();
-        bindMap.self = selectBox as any;
+        const selectBox = new SelectBox(selectElement, this);
+        bindMap.container = selectBox.container;
+        bindMap.action = selectBox.getAction();
+        bindMap.self = selectBox;
 
-        (selectBox as any).container.view.addEventListener("mouseup", () => {
+        selectBox.container.view.addEventListener("mouseup", () => {
             bindMap.action?.toggle?.();
         });