selective-ui 1.2.2 → 1.2.4

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);
@@ -218,7 +220,7 @@ export class ModelManager<
                     // Label is used as key; keep original behavior.
                     const hasLabelChange = existingGroup.label !== dataVset.label;
                     if (hasLabelChange) {
-                        existingGroup.update(dataVset)
+                        existingGroup.updateTarget(dataVset)
                     }
 
                     existingGroup.position = position;
@@ -240,7 +242,7 @@ export class ModelManager<
                 const existingOption = oldOptionMap.get(key);
 
                 if (existingOption) {
-                    existingOption.update(dataVset);
+                    existingOption.updateTarget(dataVset);
                     existingOption.position = position;
 
                     const parentGroup = dataVset["__parentGroup"] as HTMLOptGroupElement | undefined;
@@ -273,14 +275,19 @@ export class ModelManager<
         });
 
         let isUpdate = true;
+        if (this.oldPosition == 0) {
+            isUpdate = false;
+        }
+        this.oldPosition = position;
+
         oldGroupMap.forEach((removedGroup) => {
             isUpdate = false;
-            removedGroup.remove();
+            removedGroup.destroy();
         });
 
         oldOptionMap.forEach((removedOption) => {
             isUpdate = false;
-            removedOption.remove();
+            removedOption.destroy();
         });
 
         this.privModelList = newModels;
@@ -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

@@ -1,26 +1,51 @@
-
-import { Popup } from "../components/popup";
+import { Popup } from "../components/popup/popup";
 import { SelectBox } from "../components/selectbox";
 import { GroupModel } from "../models/group-model";
 import { OptionModel } from "../models/option-model";
+import { LifecycleState } from "../types/core/base/lifecycle.type";
 import { MixedItem } from "../types/core/base/mixed-adapter.type";
 import { AjaxConfig, NormalizedAjaxItem, PaginationState, ParseResponseResult } from "../types/core/search-controller.type";
 import { Libs } from "../utils/libs";
+import { Lifecycle } from "./base/lifecycle";
 import { ModelManager } from "./model-manager";
 
-export class SearchController {
+/**
+ * Controller responsible for orchestrating search behavior across the Select UI.
+ *
+ * Responsibilities:
+ * - Manage local (in-memory) filtering and remote (AJAX) searching
+ * - Normalize heterogeneous server responses into a common structure
+ * - Maintain pagination state (page, totals, loading, hasMore)
+ * - Apply remote results back to the underlying <select> element
+ * - Coordinate UI updates via Popup (loading indicator, resize, empty/not-found states)
+ *
+ * Lifecycle:
+ * - Constructed with references to the native <select>, ModelManager, and SelectBox
+ * - `init()` runs immediately via `initialize()`
+ * - Methods `search()`, `loadMore()`, `clear()` are invoked by higher-level components
+ *
+ * @extends Lifecycle
+ */
+export class SearchController extends Lifecycle {
+    /** Backing native <select> element providing context and initial options. */
     private select: HTMLSelectElement;
 
+    /** Model manager providing access to model resources (items, adapter, recycler). */
     private modelManager: ModelManager<MixedItem, any>;
 
+    /** Current AJAX configuration; when absent, local search is used. */
     private ajaxConfig: AjaxConfig | null = null;
 
+    /** Used to cancel in-flight AJAX requests when a new search starts. */
     private abortController: AbortController | null = null;
 
+    /** Popup instance to reflect UI states (loading, empty/not-found), and sizing. */
     private popup: Popup | null = null;
 
+    /** SelectBox handle (used by custom data builders). */
     private selectBox: SelectBox = null;
 
+    /** Current pagination and loading state for remote searches. */
     private paginationState: PaginationState = {
         currentPage: 0,
         totalPages: 1,
@@ -34,29 +59,49 @@ export class SearchController {
      * Initializes the SearchController with a source <select> element and a ModelManager
      * to manage option models and search results.
      *
-     * @param {HTMLSelectElement} selectElement - The native select element that provides context and data source.
-     * @param {ModelManager<MixedItem, any>} modelManager - Manager responsible for models and rendering updates.
-     * @param {SelectBox} selectBox - SelectBox handle.
+     * @param selectElement - The native select element that provides context and data source.
+     * @param modelManager - Manager responsible for models and rendering updates.
+     * @param selectBox - SelectBox handle.
      */
     public constructor(selectElement: HTMLSelectElement, modelManager: ModelManager<MixedItem, any>, selectBox: SelectBox) {
+        super();
+        this.initialize(selectElement, modelManager, selectBox);
+    }
+
+    /**
+     * Internal initializer that captures dependencies and starts the lifecycle.
+     *
+     * @param selectElement - The native select element that provides context and data source.
+     * @param modelManager - Manager responsible for models and rendering updates.
+     * @param selectBox - SelectBox handle.
+     */
+    private initialize(selectElement: HTMLSelectElement, modelManager: ModelManager<MixedItem, any>, selectBox: SelectBox): void {
         this.select = selectElement;
         this.modelManager = modelManager;
         this.selectBox = selectBox;
+
+        this.init();
     }
 
     /**
      * Indicates whether AJAX-based search is configured.
      *
-     * @returns {boolean} - True if AJAX config is present; false otherwise.
+     * @returns True if AJAX config is present; false otherwise.
      */
     public isAjax(): boolean {
         return !!this.ajaxConfig;
     }
 
     /**
-     * Load specific options by their values from server
-     * @param {string|string[]} values - Values to load
-     * @returns {Promise<{success: boolean, items: Array, message?: string}>}
+     * Loads specific options by their values from the server.
+     *
+     * Behavior:
+     * - Uses `ajaxConfig.dataByValues` if provided; otherwise builds a default payload.
+     * - Supports GET/POST according to `ajaxConfig.method` (defaults to GET).
+     * - Normalizes the response via `parseResponse()` and returns normalized items.
+     *
+     * @param values - Value or list of values to load.
+     * @returns Promise resolving with `{ success, items, message? }`.
      */
     async loadByValues(values: string | string[]): Promise<{ success: boolean; items: NormalizedAjaxItem[]; message?: string }> {
         if (!this.ajaxConfig) {
@@ -76,7 +121,9 @@ export class SearchController {
                 payload = {
                     values: valuesArray.join(","),
                     load_by_values: "1",
-                    ...(typeof cfg.data === "function" ? cfg.data.bind(this.selectBox.Selective.find(this.selectBox.container.targetElement))("", 0) : cfg.data ?? {}),
+                    ...(typeof cfg.data === "function"
+                        ? cfg.data.bind(this.selectBox.Selective.find(this.selectBox.container.targetElement))("", 0)
+                        : cfg.data ?? {}),
                 };
             }
 
@@ -100,6 +147,8 @@ export class SearchController {
             const data = await response.json();
             const result = this.parseResponse(data);
 
+            this.update();
+
             return { success: true, items: result.items };
         } catch (error: any) {
             console.error("Load by values error:", error);
@@ -108,9 +157,10 @@ export class SearchController {
     }
 
     /**
-     * Check if values exist in current options
-     * @param {string[]} values - Values to check
-     * @returns {{existing: string[], missing: string[]}}
+     * Checks whether the provided values already exist in the current <select> options.
+     *
+     * @param values - Values to check for presence.
+     * @returns Partitioned result: `{ existing, missing }`.
      */
     public checkMissingValues(values: string[]): { existing: string[]; missing: string[] } {
         const allOptions = Array.from(this.select.options);
@@ -125,7 +175,7 @@ export class SearchController {
     /**
      * Configures AJAX settings used for remote searching and pagination.
      *
-     * @param {object} config - AJAX configuration object (e.g., endpoint, headers, query params).
+     * @param config - AJAX configuration (endpoint, method, data builders, etc.).
      */
     public setAjax(config: AjaxConfig | null): void {
         this.ajaxConfig = config;
@@ -134,7 +184,7 @@ export class SearchController {
     /**
      * Attaches a Popup instance to allow UI updates during search (e.g., loading, resize).
      *
-     * @param {Popup} popupInstance - The popup used to display search results and loading state.
+     * @param popupInstance - The popup used to display search results and loading state.
      */
     public setPopup(popupInstance: Popup): void {
         this.popup = popupInstance;
@@ -142,6 +192,8 @@ export class SearchController {
 
     /**
      * Returns a shallow copy of the current pagination state used for search/infinite scroll.
+     *
+     * @returns Pagination state snapshot.
      */
     public getPaginationState(): PaginationState {
         return { ...this.paginationState };
@@ -164,6 +216,8 @@ export class SearchController {
 
     /**
      * Clears the current keyword and makes all options visible (local reset).
+     *
+     * No network requests are made; operates on the current model set.
      */
     public clear(): void {
         this.paginationState.currentKeyword = "";
@@ -183,14 +237,20 @@ export class SearchController {
 
     /**
      * Performs a search with either AJAX or local filtering depending on configuration.
+     *
+     * @param keyword - The search term to apply.
+     * @param append - For AJAX mode: whether to append results (next page). Defaults to false.
+     * @returns An implementation-specific result object.
      */
     public async search(keyword: string, append: boolean = false): Promise<any> {
-        if (this.ajaxConfig) return this._ajaxSearch(keyword, append);
-        return this._localSearch(keyword);
+        if (this.ajaxConfig) return this.ajaxSearch(keyword, append);
+        return this.localSearch(keyword);
     }
 
     /**
      * Loads the next page for AJAX pagination if enabled and not already loading.
+     *
+     * @returns Result of the paginated AJAX request, or an error when not applicable.
      */
     public async loadMore(): Promise<any> {
         if (!this.ajaxConfig) return { success: false, message: "Ajax not enabled" };
@@ -199,14 +259,17 @@ export class SearchController {
         if (!this.paginationState.hasMore) return { success: false, message: "No more data" };
 
         this.paginationState.currentPage++;
-        return this._ajaxSearch(this.paginationState.currentKeyword, true);
+        return this.ajaxSearch(this.paginationState.currentKeyword, true);
     }
 
     /**
      * Executes a local (in-memory) search by normalizing the keyword (lowercase, non-accent)
-     * and toggling each option's visibility based on text match. Returns summary flags.
+     * and toggling each option's visibility based on text match.
+     *
+     * @param keyword - Keyword to filter against local options.
+     * @returns Summary flags: `{ success, hasResults, isEmpty }`.
      */
-    private async _localSearch(keyword: string): Promise<{ success: boolean; hasResults: boolean; isEmpty: boolean }> {
+    private async localSearch(keyword: string): Promise<{ success: boolean; hasResults: boolean; isEmpty: boolean }> {
         if (this.compareSearchTrigger(keyword)) this.paginationState.currentKeyword = keyword;
 
         const lower = String(keyword ?? "").toLowerCase();
@@ -229,6 +292,8 @@ export class SearchController {
             if (isVisible) hasVisibleItems = true;
         });
 
+        this.update();
+
         return {
             success: true,
             hasResults: hasVisibleItems,
@@ -239,6 +304,9 @@ export class SearchController {
     /**
      * Checks whether the provided keyword differs from the current one,
      * to determine if a new search should be triggered.
+     *
+     * @param keyword - The keyword to compare with the current search term.
+     * @returns True if a new search should be triggered; otherwise false.
      */
     public compareSearchTrigger(keyword: string): boolean {
         return keyword !== this.paginationState.currentKeyword;
@@ -246,8 +314,19 @@ export class SearchController {
 
     /**
      * Executes an AJAX-based search with optional appending.
+     *
+     * Behavior:
+     * - Aborts any in-flight request before starting a new search
+     * - Shows loading in the popup (if available)
+     * - Supports GET/POST with data built from config or function
+     * - Applies normalized results to the <select>, respecting `keepSelected`
+     * - Updates pagination state when server response includes pagination info
+     *
+     * @param keyword - Search keyword.
+     * @param append - Whether to append results (true = next page); defaults to false.
+     * @returns An implementation-specific result object with success and pagination flags.
      */
-    private async _ajaxSearch(keyword: string, append: boolean = false): Promise<any> {
+    private async ajaxSearch(keyword: string, append: boolean = false): Promise<any> {
         const cfg = this.ajaxConfig!;
         if (this.compareSearchTrigger(keyword)) {
             this.resetPagination();
@@ -309,6 +388,8 @@ export class SearchController {
             this.paginationState.isLoading = false;
             this.popup?.hideLoading();
 
+            this.update();
+
             return {
                 success: true,
                 hasResults: result.items.length > 0,
@@ -330,7 +411,20 @@ export class SearchController {
     }
 
     /**
-     * Parses various server response shapes into a normalized structure for options and groups.
+     * Normalizes various server response shapes into a standard structure for options and groups.
+     *
+     * Supported shapes (examples):
+     * - `{ object: [...], page?, totalPages?, hasMore? }`
+     * - `{ data: [...], page?, totalPages?, hasMore? }`
+     * - `{ items: [...], pagination: { page, totalPages, hasMore } }`
+     * - `[...]` (array of items)
+     *
+     * Each item can represent either:
+     * - An option: `{ type: "option", value, text, selected?, data? }`
+     * - A group: `{ type: "optgroup", label, data?, options: [...] }`
+     *
+     * @param data - Server response (any shape).
+     * @returns `{ items, hasPagination, page, totalPages, hasMore }`
      */
     private parseResponse(data: any): ParseResponseResult {
         let items: any[] = [];
@@ -400,6 +494,15 @@ export class SearchController {
 
     /**
      * Applies normalized AJAX results to the underlying <select> element.
+     *
+     * Behavior:
+     * - Optionally preserves existing selections (`keepSelected`)
+     * - Clears existing children unless `append` is true
+     * - Supports adding either normalized items or raw HTMLOption/HTMLOptGroup elements
+     *
+     * @param items - Normalized items (or raw HTMLOption/HTMLOptGroup).
+     * @param keepSelected - Preserve previously selected options.
+     * @param append - Append to existing options instead of replacing.
      */
     public applyAjaxResult(items: NormalizedAjaxItem[], keepSelected: boolean, append: boolean = false): void {
         const select = this.select;
@@ -410,7 +513,7 @@ export class SearchController {
         if (!append) select.innerHTML = "";
 
         items.forEach((item: any) => {
-            // Skip empty item
+            // Skip empty item (defensive guard)
             if ((item["type"] === "option" || !item["type"]) && item["value"] === "" && item["text"] === "") return;
 
             if (item instanceof HTMLOptionElement || item instanceof HTMLOptGroupElement) {
@@ -467,7 +570,27 @@ export class SearchController {
                 select.appendChild(option);
             }
         });
+    }
+
+    /**
+     * Destroys the controller and clears references.
+     *
+     * Notes:
+     * - In-flight requests are not aborted here; consumers should abort if needed before destroy.
+     * - The linked Popup/ModelManager exist outside this controller and are not destroyed here.
+     */
+    public override destroy(): void {
+        if (this.is(LifecycleState.DESTROYED)) {
+            return;
+        }
+
+        this.select = null;
+        this.modelManager = null;
+        this.ajaxConfig = null;
+        this.abortController = null;
+        this.popup = null;
+        this.selectBox = null;
 
-        select.dispatchEvent(new CustomEvent("options:changed"));
+        super.destroy();
     }
 }

package/src/ts/global.ts

@@ -18,13 +18,13 @@ import "../css/index.css";
 import "../css/components/selectbox.css";
 import "../css/components/placeholder.css";
 import "../css/components/directive.css";
-import "../css/components/empty-state.css";
-import "../css/components/loading-state.css";
-import "../css/components/optgroup.css";
-import "../css/components/popup.css";
+import "../css/components/popup/empty-state.css";
+import "../css/components/popup/loading-state.css";
+import "../css/views/group-view.css";
+import "../css/components/popup/popup.css";
 import "../css/components/searchbox.css";
 import "../css/components/option-handle.css";
-import "../css/components/option.css";
+import "../css/views/option-view.css";
 import "../css/components/accessorybox.css";
 
 import { Selective } from "./utils/selective";

package/src/ts/index.ts

@@ -18,13 +18,13 @@ import "../css/index.css";
 import "../css/components/selectbox.css";
 import "../css/components/placeholder.css";
 import "../css/components/directive.css";
-import "../css/components/empty-state.css";
-import "../css/components/loading-state.css";
-import "../css/components/optgroup.css";
-import "../css/components/popup.css";
+import "../css/components/popup/empty-state.css";
+import "../css/components/popup/loading-state.css";
+import "../css/views/group-view.css";
+import "../css/components/popup/popup.css";
 import "../css/components/searchbox.css";
 import "../css/components/option-handle.css";
-import "../css/components/option.css";
+import "../css/views/option-view.css";
 import "../css/components/accessorybox.css";
 
 import { Selective } from "./utils/selective";

package/src/ts/models/group-model.ts

@@ -6,6 +6,7 @@ import { GroupView } from "../views/group-view";
 import { OptionModel } from "./option-model";
 import type { IEventCallback } from "../types/utils/ievents.type";
 import { SelectiveOptions } from "../types/utils/selective.type";
+import { LifecycleState } from "../types/core/base/lifecycle.type";
 
 /**
  * @extends {Model<HTMLOptGroupElement, GroupViewTags, GroupView>}
@@ -28,11 +29,16 @@ export class GroupModel extends Model<HTMLOptGroupElement, GroupViewTags, GroupV
      */
     public constructor(options: SelectiveOptions, targetElement?: HTMLOptGroupElement) {
         super(options, targetElement ?? null, null);
-
-        if (targetElement) {
-            this.label = targetElement.label;
-            this.collapsed = Libs.string2Boolean(targetElement.dataset?.collapsed);
+    }
+    
+    public override init() {
+        if (this.targetElement) {
+            this.label = this.targetElement.label;
+            this.collapsed = Libs.string2Boolean(this.targetElement.dataset?.collapsed);
         }
+
+        super.init();
+        this.mount();
     }
 
     /**
@@ -76,20 +82,35 @@ export class GroupModel extends Model<HTMLOptGroupElement, GroupViewTags, GroupV
      *
      * @param {HTMLOptGroupElement} targetElement - The updated <optgroup> element.
      */
-    public update(targetElement: HTMLOptGroupElement): void {
+    public updateTarget(targetElement: HTMLOptGroupElement): void {
         this.label = targetElement.label;
         this.view?.updateLabel(this.label);
+        this.update();
     }
 
     /**
      * Hook invoked when the target element reference changes.
      * Updates the view's label and collapsed state to keep UI in sync.
      */
-    public onTargetChanged(): void {
+    public override update(): void {
         if (this.view) {
             this.view.updateLabel(this.label);
             this.view.setCollapsed(this.collapsed);
         }
+        super.update();
+    }
+
+    public override destroy(): void {
+        if (this.is(LifecycleState.DESTROYED)) {
+            return;
+        }
+
+        this.items.forEach(item => {
+            item.destroy();
+        });
+
+        this.items = [];
+        super.destroy();
     }
 
     /**

package/src/ts/models/option-model.ts

@@ -7,6 +7,7 @@ import type { IEventCallback } from "../types/utils/ievents.type";
 import type { OptionViewTags } from "../types/views/view.option.type";
 import type { GroupModel } from "./group-model";
 import { SelectiveOptions } from "../types/utils/selective.type";
+import { LifecycleState } from "../types/core/base/lifecycle.type";
 
 /**
  * @extends {Model<HTMLOptionElement, OptionViewTags, OptionView, SelectiveOptions>}
@@ -34,10 +35,13 @@ export class OptionModel extends Model<HTMLOptionElement, OptionViewTags, Option
      */
     public constructor(options: SelectiveOptions, targetElement: HTMLOptionElement | null = null, view: OptionView | null = null) {
         super(options, targetElement, view);
-        
-        (async () => {
-            this.textToFind = Libs.string2normalize(this.textContent.toLowerCase());
-        })();
+    }
+
+    public override init(): void {
+        this.textToFind = Libs.string2normalize(this.textContent.toLowerCase());
+
+        super.init();
+        this.mount();
     }
 
     /**
@@ -231,9 +235,12 @@ export class OptionModel extends Model<HTMLOptionElement, OptionViewTags, Option
      * Updates label content (HTML or text), image src/alt if present,
      * and synchronizes initial selected state to the view.
      */
-    public onTargetChanged(): void {
+    public override update(): void {
         this.textToFind = Libs.string2normalize(this.textContent.toLowerCase());
-        if (!this.view) return;
+        if (!this.view) {
+            super.update();
+            return;
+        }
 
         const labelContent = this.view.view.tags.LabelContent;
         if (labelContent) {
@@ -251,5 +258,21 @@ export class OptionModel extends Model<HTMLOptionElement, OptionViewTags, Option
         }
 
         if (this.targetElement) this.selectedNonTrigger = this.targetElement.selected;
+
+        super.update();
+    }
+
+    public override destroy(): void {
+        if (this.is(LifecycleState.DESTROYED)) {
+            return;
+        }
+
+        this.privOnSelected = [];
+        this.privOnInternalSelected = [];
+        this.privOnVisibilityChanged = [];
+        this.group = null;
+        this.textToFind = null;
+        
+        super.destroy();
     }
 }

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

@@ -25,12 +25,12 @@ export class ElementAdditionObserver<T extends Element = Element> {
     }
 
     /**
-     * Starts observing the document for additions of elements matching the given tag.
+     * connect observing the document for additions of elements matching the given tag.
      * Detects both direct additions and nested matches within added subtrees.
      *
      * @param {string} tag - The tag name to watch for (e.g., "select", "div").
      */
-    public start(tag: string): void {
+    public connect(tag: string): void {
         if (this.isActive) return;
 
         this.isActive = true;
@@ -43,14 +43,14 @@ export class ElementAdditionObserver<T extends Element = Element> {
                 mutation.addedNodes.forEach((node) => {
                     if (node.nodeType !== 1) return;
 
-                    const subnode = node as HTMLElement;
+                    const subnode = node as T;
 
                     if (subnode.tagName === upperTag) {
-                        this.handle(subnode as unknown as T);
+                        this.handle(subnode as T);
                     }
 
                     const matches = subnode.querySelectorAll(lowerTag);
-                    matches.forEach((el) => this.handle(el as unknown as T));
+                    matches.forEach((el) => this.handle(el as T));
                 });
             }
         });
@@ -65,7 +65,7 @@ export class ElementAdditionObserver<T extends Element = Element> {
      * Stops observing for element additions and releases internal resources.
      * No-ops if the observer is not active.
      */
-    public stop(): void {
+    public disconnect(): void {
         if (!this.isActive) return;
 
         this.isActive = false;

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;
     }