selective-ui 1.4.0 → 1.4.2

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,37 @@ 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,
+        );
+    }
+
+    /**
+     * 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.
+     */
+    public get mask(): string {
+        const raw = this.dataset?.mask ?? this.targetElement?.text ?? "";
+        const translated = Libs.tagTranslate(raw);
+        return this.options.allowHtml ? translated : Libs.stripHtml(translated);
     }
 
     /**
@@ -259,7 +306,7 @@ export class OptionModel extends Model<HTMLOptionElement, OptionViewTags, Option
      * @returns {string}
      */
     public get text(): string {
-        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);
     }
@@ -273,7 +320,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 +372,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 +388,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 +404,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 +456,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 +484,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

@@ -36,8 +36,13 @@ 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.
+     * @param isWidthOnly - If true, only the width will be updated; height will be left unchanged.
      */
-    public static resizeBox(select: HTMLSelectElement, view: HTMLElement): void {
+    public static resizeBox(
+        select: HTMLSelectElement,
+        view: HTMLElement,
+        isWidthOnly = false,
+    ): void {
         const bindedMap = Libs.getBinderMap<BinderMap>(select);
         if (!bindedMap?.options) return;
 
@@ -55,11 +60,16 @@ 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 });
+        if (isWidthOnly) {
+            Object.assign(view.style, { width, maxWidth: width, minWidth });
+        } else {
+            Object.assign(view.style, { width, height, maxWidth: width, 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 };
+}

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

@@ -14,8 +14,8 @@ import { OptionModel } from "src/ts/models/option-model";
  * Represents the DOM elements used in the SearchBox component.
  */
 export type SearchBoxTags = {
-    SearchBox: HTMLDivElement;      // Container for the search box
-    SearchInput: HTMLInputElement;  // Input field for search queries
+    SearchBox: HTMLDivElement; // Container for the search box
+    SearchInput: HTMLInputElement; // Input field for search queries
 };
 
 /**
@@ -35,7 +35,7 @@ export type NavigateHandler = (direction: 1 | -1) => void;
  * Represents the DOM elements used in the SelectBox component.
  */
 export type SelectBoxTags = {
-    ViewPanel: HTMLDivElement;  // Panel that displays selectable options
+    ViewPanel: HTMLDivElement; // Panel that displays selectable options
 };
 
 /**
@@ -43,46 +43,46 @@ export type SelectBoxTags = {
  * Combines mounted view result with additional services and components.
  */
 export type ContainerRuntime = MountViewResult<SelectBoxTags> & {
-    placeholder: PlaceHolder;           // Placeholder manager
-    directive: Directive;               // Directive handler for dynamic behavior
-    searchbox: SearchBox;               // Search box component
-    popup: Popup;                       // Popup component for dropdown
-    effector: EffectorInterface;        // Effector for state management
-    targetElement: HTMLSelectElement;   // Original select element
-    accessorybox: AccessoryBox;         // Accessory box for extra UI elements
+    placeholder: PlaceHolder; // Placeholder manager
+    directive: Directive; // Directive handler for dynamic behavior
+    searchbox: SearchBox; // Search box component
+    popup: Popup; // Popup component for dropdown
+    effector: EffectorInterface; // Effector for state management
+    targetElement: HTMLSelectElement; // Original select element
+    accessorybox: AccessoryBox; // Accessory box for extra UI elements
     searchController: SearchController; // Controller for search logic
-    selectObserver: SelectObserver;     // Observer for selection changes
-    datasetObserver: DatasetObserver;   // Observer for dataset updates
+    selectObserver: SelectObserver; // Observer for selection changes
+    datasetObserver: DatasetObserver; // Observer for dataset updates
 };
 
 /**
  * Interface defining actions and properties for the SelectBox component.
  */
 export interface SelectBoxAction {
-    targetElement: HTMLSelectElement;     // Target Select element
+    targetElement: HTMLSelectElement; // Target Select element
 
-    placeholder: string;           // Placeholder text
-    oldValue: unknown;             // Previous value before change
+    placeholder: string; // Placeholder text
+    oldValue: unknown; // Previous value before change
 
-    value: string | string[];      // Current selected value(s)
-    valueArray: string[];          // Selected values as an array
-    valueString: string;           // Selected values as a single string
+    value: string | string[]; // Current selected value(s)
+    valueArray: string[]; // Selected values as an array
+    valueString: string; // Selected values as a single string
 
-    valueOptions: OptionModel[];   // Selected option models
-    mask: string[];                // Masked values for filtering
-    valueText: string | string[];  // Display text for selected values
+    valueOptions: OptionModel[]; // Selected option models
+    mask: string[]; // Masked values for filtering
+    valueText: string | string[]; // Display text for selected values
 
-    isOpen: boolean;               // Indicates if the dropdown is open
+    isOpen: boolean; // Indicates if the dropdown is open
 
-    disabled: boolean;             // Indicates if the component is disabled
-    readonly: boolean;             // Indicates if the component is read-only
-    visible: boolean;              // Indicates if the component is visible
+    disabled: boolean; // Indicates if the component is disabled
+    readonly: boolean; // Indicates if the component is read-only
+    visible: boolean; // Indicates if the component is visible
 
     /**
      * Get parent of self
      * @param evtToken - Optional event token for tracking.
      */
-    getParent(evtToken?: unknown): HTMLElement
+    getParent(evtToken?: unknown): HTMLElement;
 
     /**
      * Get dataset from selected options
@@ -90,7 +90,11 @@ export interface SelectBoxAction {
      * @param strDataset - Property to find
      * @param isArray - Keep array or return once
      */
-    valueDataset(evtToken?: unknown, strDataset?: string, isArray?: boolean): any[] | string
+    valueDataset(
+        evtToken?: unknown,
+        strDataset?: string,
+        isArray?: boolean,
+    ): any[] | string;
 
     /**
      * Select all available options.
@@ -113,7 +117,12 @@ export interface SelectBoxAction {
      * @param trigger - Whether to trigger change events.
      * @param force - Whether to force the update.
      */
-    setValue(evtToken: unknown | null, value: unknown, trigger?: boolean, force?: boolean): void;
+    setValue(
+        evtToken?: unknown,
+        value?: unknown,
+        trigger?: boolean,
+        force?: boolean,
+    ): void;
 
     /**
      * Load options for the SelectBox, typically from an AJAX source.
@@ -156,7 +165,11 @@ export interface SelectBoxAction {
      * @param evtName - Name of the event.
      * @param handle - Callback function for the event.
      */
-    on(evtToken: unknown, evtName: string, handle: (...args: any[]) => any): void;
+    on(
+        evtToken: unknown,
+        evtName: string,
+        handle: (...args: any[]) => any,
+    ): void;
 
     /**
      * Perform an AJAX request.
@@ -170,4 +183,4 @@ export interface SelectBoxAction {
      * @param evtToken - Event token for tracking.
      */
     loadAjax(evtToken: unknown, obj: unknown): void;
-}
+}

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

@@ -3,4 +3,4 @@
  * - "notfound": No matching results found.
  * - "nodata": No data available to display.
  */
-export type EmptyStateType = "notfound" | "nodata";
+export type EmptyStateType = "notfound" | "nodata";