selective-ui 1.3.1 → 1.4.1

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

@@ -43,7 +43,12 @@ import { LifecycleState } from "../types/core/base/lifecycle.type";
  * @see {@link OptionModel}
  * @see {@link GroupView}
  */
-export class GroupModel extends Model<HTMLOptGroupElement, GroupViewTags, GroupView, SelectiveOptions> {
+export class GroupModel extends Model<
+    HTMLOptGroupElement,
+    GroupViewTags,
+    GroupView,
+    SelectiveOptions
+> {
     /** Group label (mirrors `HTMLSelectOptGroupElement.label`). */
     public label = "";
 
@@ -67,7 +72,13 @@ export class GroupModel extends Model<HTMLOptGroupElement, GroupViewTags, GroupV
      * Subscribers invoked when collapsed state changes.
      * Callbacks are invoked through {@link iEvents.callEvent}.
      */
-    private privOnCollapsedChanged: Array<(evtToken: IEventCallback, model: GroupModel, collapsed: boolean) => void> = [];
+    private privOnCollapsedChanged: Array<
+        (
+            evtToken: IEventCallback,
+            model: GroupModel,
+            collapsed: boolean,
+        ) => void
+    > = [];
 
     /**
      * Creates a group model from configuration and an optional `<optgroup>` element.
@@ -75,10 +86,15 @@ export class GroupModel extends Model<HTMLOptGroupElement, GroupViewTags, GroupV
      * @param {SelectiveOptions} options - Shared configuration for models/views.
      * @param {HTMLOptGroupElement} [targetElement] - Backing `<optgroup>` element (when available).
      */
-    public constructor(options: SelectiveOptions, targetElement?: HTMLOptGroupElement) {
+    public constructor(
+        options: SelectiveOptions,
+        targetElement?: HTMLOptGroupElement,
+    ) {
         super(options, targetElement ?? null, null);
         this.label = this.targetElement.label;
-        this.collapsed = Libs.string2Boolean(this.targetElement.dataset?.collapsed);
+        this.collapsed = Libs.string2Boolean(
+            this.targetElement.dataset?.collapsed,
+        );
     }
 
     /**
@@ -189,7 +205,7 @@ export class GroupModel extends Model<HTMLOptGroupElement, GroupViewTags, GroupV
             return;
         }
 
-        this.items.forEach(item => {
+        this.items.forEach((item) => {
             item.destroy();
         });
 
@@ -206,7 +222,13 @@ export class GroupModel extends Model<HTMLOptGroupElement, GroupViewTags, GroupV
      * Listener invoked with `(evtToken, model, collapsed)`.
      * @returns {void}
      */
-    public onCollapsedChanged(callback: (evtToken: IEventCallback, model: GroupModel, collapsed: boolean) => void): void {
+    public onCollapsedChanged(
+        callback: (
+            evtToken: IEventCallback,
+            model: GroupModel,
+            collapsed: boolean,
+        ) => void,
+    ): void {
         this.privOnCollapsedChanged.push(callback);
     }
 
@@ -224,7 +246,10 @@ export class GroupModel extends Model<HTMLOptGroupElement, GroupViewTags, GroupV
         this.collapsed = !this.collapsed;
         this.view?.setCollapsed(this.collapsed);
 
-        iEvents.callEvent<[GroupModel, boolean]>([this, this.collapsed], ...this.privOnCollapsedChanged);
+        iEvents.callEvent<[GroupModel, boolean]>(
+            [this, this.collapsed],
+            ...this.privOnCollapsedChanged,
+        );
     }
 
     /**
@@ -267,4 +292,4 @@ export class GroupModel extends Model<HTMLOptGroupElement, GroupViewTags, GroupV
     public updateVisibility(): void {
         this.view?.updateVisibility();
     }
-}
+}

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

@@ -55,24 +55,35 @@ import { LifecycleState } from "../types/core/base/lifecycle.type";
  * @see {@link GroupModel}
  * @see {@link OptionView}
  */
-export class OptionModel extends Model<HTMLOptionElement, OptionViewTags, OptionView, SelectiveOptions> {
+export class OptionModel extends Model<
+    HTMLOptionElement,
+    OptionViewTags,
+    OptionView,
+    SelectiveOptions
+> {
     /**
      * External selection subscribers (emitted by the {@link selected} setter).
      * Use this for user-facing selection flows.
      */
-    private privOnSelected: Array<(evtToken: IEventCallback, el: OptionModel, selected: boolean) => void> = [];
+    private privOnSelected: Array<
+        (evtToken: IEventCallback, el: OptionModel, selected: boolean) => void
+    > = [];
 
     /**
      * Internal selection subscribers (emitted by the {@link selectedNonTrigger} setter).
      * Use this for silent synchronization flows.
      */
-    private privOnInternalSelected: Array<(evtToken: IEventCallback, el: OptionModel, selected: boolean) => void> = [];
+    private privOnInternalSelected: Array<
+        (evtToken: IEventCallback, el: OptionModel, selected: boolean) => void
+    > = [];
 
     /**
      * Visibility subscribers (emitted by the {@link visible} setter).
      * Commonly used to recompute group visibility and update aggregated visibility stats.
      */
-    private privOnVisibilityChanged: Array<(evtToken: IEventCallback, model: OptionModel, visible: boolean) => void> = [];
+    private privOnVisibilityChanged: Array<
+        (evtToken: IEventCallback, model: OptionModel, visible: boolean) => void
+    > = [];
 
     /**
      * Visibility flag used for filtering/search.
@@ -87,19 +98,19 @@ export class OptionModel extends Model<HTMLOptionElement, OptionViewTags, Option
      * Parent group model (if this option belongs to a group).
      * Assigned by grouping logic (e.g., GroupModel/MixedAdapter).
      */
-    public group: GroupModel | null = null;
+    public group?: GroupModel;
 
     /**
      * Creates an option model.
      *
      * @param {SelectiveOptions} options - Shared configuration for models/views.
-     * @param {HTMLOptionElement | null} [targetElement=null] - Backing `<option>` element.
-     * @param {OptionView | null} [view=null] - Optional view used to render this model.
+     * @param {HTMLOptionElement} [targetElement=null] - Backing `<option>` element.
+     * @param {OptionView} [view=null] - Optional view used to render this model.
      */
     public constructor(
         options: SelectiveOptions,
-        targetElement: HTMLOptionElement | null = null,
-        view: OptionView | null = null
+        targetElement?: HTMLOptionElement,
+        view?: OptionView,
     ) {
         super(options, targetElement, view);
     }
@@ -168,7 +179,10 @@ export class OptionModel extends Model<HTMLOptionElement, OptionViewTags, Option
      */
     public set selected(value: boolean) {
         this.selectedNonTrigger = value;
-        iEvents.callEvent<[OptionModel, boolean]>([this, value], ...this.privOnSelected);
+        iEvents.callEvent<[OptionModel, boolean]>(
+            [this, value],
+            ...this.privOnSelected,
+        );
     }
 
     /**
@@ -199,7 +213,10 @@ export class OptionModel extends Model<HTMLOptionElement, OptionViewTags, Option
         const viewEl = this.view?.getView?.();
         if (viewEl) viewEl.classList.toggle("hide", !value);
 
-        iEvents.callEvent<[OptionModel, boolean]>([this, value], ...this.privOnVisibilityChanged);
+        iEvents.callEvent<[OptionModel, boolean]>(
+            [this, value],
+            ...this.privOnVisibilityChanged,
+        );
     }
 
     /**
@@ -243,7 +260,10 @@ export class OptionModel extends Model<HTMLOptionElement, OptionViewTags, Option
             this.targetElement.selected = value;
         }
 
-        iEvents.callEvent<[OptionModel, boolean]>([this, value], ...this.privOnInternalSelected);
+        iEvents.callEvent<[OptionModel, boolean]>(
+            [this, value],
+            ...this.privOnInternalSelected,
+        );
     }
 
     /**
@@ -273,7 +293,9 @@ export class OptionModel extends Model<HTMLOptionElement, OptionViewTags, Option
      * @returns {string}
      */
     public get textContent(): string {
-        return this.options.allowHtml ? Libs.stripHtml(this.text).trim() : this.text.trim();
+        return this.options.allowHtml
+            ? Libs.stripHtml(this.text).trim()
+            : this.text.trim();
     }
 
     /**
@@ -323,7 +345,13 @@ export class OptionModel extends Model<HTMLOptionElement, OptionViewTags, Option
      * @param {(evtToken: IEventCallback, el: OptionModel, selected: boolean) => void} callback - Listener callback.
      * @returns {void}
      */
-    public onSelected(callback: (evtToken: IEventCallback, el: OptionModel, selected: boolean) => void): void {
+    public onSelected(
+        callback: (
+            evtToken: IEventCallback,
+            el: OptionModel,
+            selected: boolean,
+        ) => void,
+    ): void {
         this.privOnSelected.push(callback);
     }
 
@@ -333,7 +361,13 @@ export class OptionModel extends Model<HTMLOptionElement, OptionViewTags, Option
      * @param {(evtToken: IEventCallback, el: OptionModel, selected: boolean) => void} callback - Listener callback.
      * @returns {void}
      */
-    public onInternalSelected(callback: (evtToken: IEventCallback, el: OptionModel, selected: boolean) => void): void {
+    public onInternalSelected(
+        callback: (
+            evtToken: IEventCallback,
+            el: OptionModel,
+            selected: boolean,
+        ) => void,
+    ): void {
         this.privOnInternalSelected.push(callback);
     }
 
@@ -343,7 +377,13 @@ export class OptionModel extends Model<HTMLOptionElement, OptionViewTags, Option
      * @param {(evtToken: IEventCallback, model: OptionModel, visible: boolean) => void} callback - Listener callback.
      * @returns {void}
      */
-    public onVisibilityChanged(callback: (evtToken: IEventCallback, model: OptionModel, visible: boolean) => void): void {
+    public onVisibilityChanged(
+        callback: (
+            evtToken: IEventCallback,
+            model: OptionModel,
+            visible: boolean,
+        ) => void,
+    ): void {
         this.privOnVisibilityChanged.push(callback);
     }
 
@@ -389,7 +429,8 @@ export class OptionModel extends Model<HTMLOptionElement, OptionViewTags, Option
             }
         }
 
-        if (this.targetElement) this.selectedNonTrigger = this.targetElement.selected;
+        if (this.targetElement)
+            this.selectedNonTrigger = this.targetElement.selected;
 
         super.update();
     }
@@ -416,7 +457,7 @@ export class OptionModel extends Model<HTMLOptionElement, OptionViewTags, Option
         this.privOnVisibilityChanged = [];
         this.group = null;
         this.textToFind = null;
-        
+
         super.destroy();
     }
-}
+}

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

@@ -38,7 +38,7 @@ export class DatasetObserver {
      * Debounce timer handle for coalescing rapid attribute mutations.
      * Cleared/replaced whenever a new relevant mutation arrives within the debounce window.
      */
-    private debounceTimer: ReturnType<typeof setTimeout> | null = null;
+    private debounceTimer?: NodeJS.Timeout;
 
     /**
      * Creates a {@link DatasetObserver} for the given element.
@@ -62,7 +62,10 @@ export class DatasetObserver {
             let datasetChanged = false;
 
             for (const mutation of mutations) {
-                if (mutation.type === "attributes" && mutation.attributeName?.startsWith("data-")) {
+                if (
+                    mutation.type === "attributes" &&
+                    mutation.attributeName?.startsWith("data-")
+                ) {
                     datasetChanged = true;
                     break;
                 }
@@ -132,4 +135,4 @@ export class DatasetObserver {
         this.debounceTimer = null;
         this.observer.disconnect();
     }
-}
+}

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

@@ -43,7 +43,7 @@ export class ElementAdditionObserver<T extends Element = Element> {
      *
      * @internal
      */
-    private observer: MutationObserver | null = null;
+    private observer?: MutationObserver;
 
     /**
      * Registered detection callbacks.

package/src/ts/services/effector.ts

@@ -27,7 +27,7 @@ import type {
  * @param query - CSS selector or element to control. When `null`, the effector is unbound.
  * @returns An effector instance implementing {@link EffectorInterface}.
  */
-export function Effector(query?: string | HTMLElement | null): EffectorInterface {
+export function Effector(query?: string | HTMLElement): EffectorInterface {
     return new EffectorImpl(query ?? null);
 }
 
@@ -57,13 +57,13 @@ class EffectorImpl implements EffectorInterface {
      * Timeout used to finalize expand/collapse/swipe animations.
      * Cleared by {@link cancel}.
      */
-    private timeOut: ReturnType<typeof setTimeout> | null = null;
+    private timeOut?: NodeJS.Timeout;
 
     /**
      * Timeout used to clear transitions after resize in non-animated scenarios.
      * Cleared by {@link cancel}.
      */
-    private resizeTimeout: ReturnType<typeof setTimeout> | null = null;
+    private resizeTimeout?: NodeJS.Timeout;
 
     /**
      * Internal animation flag set while a timed animation is in-flight.
@@ -80,7 +80,7 @@ class EffectorImpl implements EffectorInterface {
      *
      * @param query - CSS selector or element to control. When `null`, instance starts unbound.
      */
-    public constructor(query: string | HTMLElement | null = null) {
+    public constructor(query?: string | HTMLElement) {
         if (query) this.setElement(query);
     }
 
@@ -145,7 +145,9 @@ class EffectorImpl implements EffectorInterface {
      * @param display - The display style to use for measurement (defaults to `"flex"`).
      * @returns A dimension snapshot including `scrollHeight` adjusted for vertical borders.
      */
-    public getHiddenDimensions(display: "flex" | string = "flex"): DimensionObject {
+    public getHiddenDimensions(
+        display: "flex" | string = "flex",
+    ): DimensionObject {
         // Guard: element may not be set yet.
         if (!this.element) return { width: 0, height: 0, scrollHeight: 0 };
 
@@ -169,7 +171,8 @@ class EffectorImpl implements EffectorInterface {
         const borderTopWidth = parseFloat(cs.borderTopWidth);
         const borderBottomWidth = parseFloat(cs.borderBottomWidth);
 
-        const scrollHeight = this.element.scrollHeight + borderTopWidth + borderBottomWidth;
+        const scrollHeight =
+            this.element.scrollHeight + borderTopWidth + borderBottomWidth;
         const rect = this.element.getBoundingClientRect();
 
         const dimensions: DimensionObject = {
@@ -286,10 +289,14 @@ class EffectorImpl implements EffectorInterface {
 
         const currentHeight = this.element.offsetHeight;
         const currentTop = this.element.offsetTop;
-        const position = this.element.classList.contains("position-top") ? "top" : "bottom";
-        const isScrollable = this.element.scrollHeight - this.element.offsetHeight > 0;
+        const position = this.element.classList.contains("position-top")
+            ? "top"
+            : "bottom";
+        const isScrollable =
+            this.element.scrollHeight - this.element.offsetHeight > 0;
 
-        const finalTop = position === "top" ? currentTop + currentHeight : currentTop;
+        const finalTop =
+            position === "top" ? currentTop + currentHeight : currentTop;
 
         requestAnimationFrame(() => {
             Object.assign(this.element.style, {
@@ -459,7 +466,9 @@ class EffectorImpl implements EffectorInterface {
             onComplete,
         } = config;
 
-        const currentPosition = this.element.classList.contains("position-top") ? "top" : "bottom";
+        const currentPosition = this.element.classList.contains("position-top")
+            ? "top"
+            : "bottom";
         const isPositionChanged = currentPosition !== position;
         const isScrollable = this.element.scrollHeight > maxHeight;
 
@@ -471,7 +480,8 @@ class EffectorImpl implements EffectorInterface {
         }
 
         requestAnimationFrame(() => {
-            const styles: Partial<CSSStyleDeclaration> & Record<string, string> = {
+            const styles: Partial<CSSStyleDeclaration> &
+                Record<string, string> = {
                 width: `${width}px`,
                 left: `${left}px`,
                 top: `${top}px`,
@@ -521,4 +531,4 @@ class EffectorImpl implements EffectorInterface {
     public get isAnimating(): boolean {
         return this._isAnimating;
     }
-}
+}

package/src/ts/services/refresher.ts

@@ -37,7 +37,10 @@ export class Refresher {
      * @param select - Native `<select>` element used as the sizing reference and option source.
      * @param view - View panel element whose inline styles will be updated.
      */
-    public static resizeBox(select: HTMLSelectElement, view: HTMLElement): void {
+    public static resizeBox(
+        select: HTMLSelectElement,
+        view: HTMLElement,
+    ): void {
         const bindedMap = Libs.getBinderMap<BinderMap>(select);
         if (!bindedMap?.options) return;
 
@@ -55,11 +58,12 @@ export class Refresher {
         const cstyle = getComputedStyle(select);
 
         if (width === "0px" && cstyle.width !== "auto") width = cstyle.width;
-        if (height === "0px" && cstyle.height !== "auto") height = cstyle.height;
+        if (height === "0px" && cstyle.height !== "auto")
+            height = cstyle.height;
 
         if (cfgWidth > 0) width = options.width;
         if (cfgHeight > 0) height = options.height;
 
         Object.assign(view.style, { width, height, minWidth, minHeight });
     }
-}
+}

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

@@ -63,7 +63,7 @@ export class ResizeObserverService {
      * @remarks
      * Set by {@link connect} and cleared by {@link disconnect}.
      */
-    public element: HTMLElement | null = null;
+    public element?: HTMLElement;
 
     /**
      * Underlying `ResizeObserver` instance.
@@ -71,7 +71,7 @@ export class ResizeObserverService {
      * @remarks
      * Allocated on {@link connect}. Disconnected and nulled on {@link disconnect}.
      */
-    private resizeObserver: ResizeObserver | null = null;
+    private resizeObserver?: ResizeObserver;
 
     /**
      * Underlying `MutationObserver` instance watching `style` and `class` attribute changes.
@@ -79,7 +79,7 @@ export class ResizeObserverService {
      * @remarks
      * Allocated on {@link connect}. Disconnected and nulled on {@link disconnect}.
      */
-    private mutationObserver: MutationObserver | null = null;
+    private mutationObserver?: MutationObserver;
 
     /**
      * Stable, `this`-bound handler shared by observers and global event listeners.
@@ -115,7 +115,7 @@ export class ResizeObserverService {
      * @param metrics - Snapshot of geometry and box edges (padding/border/margin).
      */
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    public onChanged(metrics: ElementMetrics): void { }
+    public onChanged(metrics: ElementMetrics): void {}
 
     /**
      * Computes metrics for the current {@link element} and forwards them to {@link onChanged}.
@@ -150,7 +150,8 @@ export class ResizeObserverService {
 
         const rect = el.getBoundingClientRect();
         const style =
-            typeof window !== "undefined" && typeof window.getComputedStyle === "function"
+            typeof window !== "undefined" &&
+            typeof window.getComputedStyle === "function"
                 ? window.getComputedStyle(el)
                 : null;
 
@@ -233,8 +234,14 @@ export class ResizeObserverService {
         window.addEventListener("resize", this.boundUpdateChanged);
 
         if (window.visualViewport) {
-            window.visualViewport.addEventListener("resize", this.boundUpdateChanged);
-            window.visualViewport.addEventListener("scroll", this.boundUpdateChanged);
+            window.visualViewport.addEventListener(
+                "resize",
+                this.boundUpdateChanged,
+            );
+            window.visualViewport.addEventListener(
+                "scroll",
+                this.boundUpdateChanged,
+            );
         }
     }
 
@@ -254,18 +261,24 @@ export class ResizeObserverService {
         this.resizeObserver?.disconnect();
         this.mutationObserver?.disconnect();
 
-        this.onChanged = (_metrics: ElementMetrics) => { };
+        this.onChanged = (_metrics: ElementMetrics) => {};
 
         window.removeEventListener("scroll", this.boundUpdateChanged, true);
         window.removeEventListener("resize", this.boundUpdateChanged);
 
         if (window.visualViewport) {
-            window.visualViewport.removeEventListener("resize", this.boundUpdateChanged);
-            window.visualViewport.removeEventListener("scroll", this.boundUpdateChanged);
+            window.visualViewport.removeEventListener(
+                "resize",
+                this.boundUpdateChanged,
+            );
+            window.visualViewport.removeEventListener(
+                "scroll",
+                this.boundUpdateChanged,
+            );
         }
 
         this.resizeObserver = null;
         this.mutationObserver = null;
         this.element = null;
     }
-}
+}

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

@@ -62,7 +62,7 @@ export class SelectObserver {
      *
      * @private
      */
-    private debounceTimer: ReturnType<typeof setTimeout> | null = null;
+    private debounceTimer?: NodeJS.Timeout;
 
     /**
      * Debounce delay in milliseconds.
@@ -171,4 +171,4 @@ export class SelectObserver {
         this.debounceTimer = null;
         this.observer.disconnect();
     }
-}
+}

package/src/ts/types/components/popup.type.ts

@@ -12,4 +12,21 @@ export interface VirtualRecyclerOptions {
     estimateItemHeight?: number;
     overscan?: number;
     dynamicHeights?: boolean;
-}
+}
+
+export interface PopupPosition {
+    position: "top" | "bottom";
+    top: number;
+    maxHeight: number;
+    realHeight: number;
+    contentHeight: number;
+}
+
+export interface PopupLocaltion {
+    width: number;
+    height: number;
+    top: number;
+    left: number;
+    padding: { top: number; right: number; bottom: number; left: number };
+    border: { top: number; right: number; bottom: number; left: number };
+}