selective-ui 1.2.6 → 1.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "selective-ui",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "description": "An overlay for the HTML select element.",
   "author": "Huỳnh Công Xuân Mai",
   "license": "MIT",
@@ -49,6 +49,7 @@
     "cssnano": "^7.1.2",
     "jest": "^30.2.0",
     "jest-environment-jsdom": "^30.2.0",
+    "mutation-observer": "^1.0.3",
     "postcss": "^8.5.6",
     "rimraf": "^6.1.2",
     "rollup": "^4.57.1",
@@ -70,5 +71,13 @@
   "browserslist": [
     ">0.25%",
     "not dead"
-  ]
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/maihcx/selective-ui"
+  },
+  "bugs": {
+    "url": "https://github.com/maihcx/selective-ui/issues"
+  },
+  "homepage": "https://github.com/maihcx/selective-ui"
 }

package/src/ts/adapter/mixed-adapter.ts

@@ -8,6 +8,7 @@ import { IEventCallback } from "../types/utils/ievents.type";
 import { ImagePosition, LabelHalign, LabelValign } from "../types/views/view.option.type";
 import { Libs } from "../utils/libs";
 import { LifecycleState } from "../types/core/base/lifecycle.type";
+import { Lifecycle } from "../core/base/lifecycle";
 
 /**
  * Mixed (heterogeneous) adapter for rendering and interacting with a list that contains

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

@@ -410,7 +410,8 @@ export class SearchController extends Lifecycle {
 
         let payload: Record<string, any>;
         if (typeof cfg.data === "function") {
-            payload = cfg.data.bind(this.selectBox.Selective.find(this.selectBox.container.targetElement))(keyword, page);
+            const selectiveInstance = this.selectBox?.Selective?.find(this.selectBox?.container?.targetElement);
+            payload = cfg.data.call(selectiveInstance, keyword, page);
             if (payload && typeof payload.selectedValue === "undefined") payload.selectedValue = selectedValues;
         } else {
             payload = { search: keyword, page, selectedValue: selectedValues, ...(cfg.data ?? {}) };

package/src/ts/global.ts

@@ -39,8 +39,8 @@ import type { SelectivePlugin } from "./types/plugins/plugin.type";
 import type { EffectorInterface } from "./types/services/effector.type";
 import { Libs } from "./utils/libs";
 
-declare const __LIB_VERSION__: string;
-declare const __LIB_NAME__: string;
+const __LIB_VERSION__ = "LIB_VERSION";
+const __LIB_NAME__ = "LIB_NAME";
 
 declare global {
     var GLOBAL_SEUI: SelectiveUIGlobal;

package/src/ts/index.ts

@@ -38,8 +38,8 @@ import type { SelectivePlugin } from "./types/plugins/plugin.type";
 import type { EffectorInterface } from "./types/services/effector.type";
 import { Libs } from "./utils/libs";
 
-declare const __LIB_VERSION__: string;
-declare const __LIB_NAME__: string;
+const __LIB_VERSION__ = "LIB_VERSION";
+const __LIB_NAME__ = "LIB_NAME";
 
 const SECLASS = new Selective();
 

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

@@ -78,6 +78,7 @@ export class GroupModel extends Model<HTMLOptGroupElement, GroupViewTags, GroupV
     public constructor(options: SelectiveOptions, targetElement?: HTMLOptGroupElement) {
         super(options, targetElement ?? null, null);
         this.label = this.targetElement.label;
+        this.collapsed = Libs.string2Boolean(this.targetElement.dataset?.collapsed);
     }
 
     /**
@@ -95,8 +96,6 @@ export class GroupModel extends Model<HTMLOptGroupElement, GroupViewTags, GroupV
      * @override
      */
     public override init(): void {
-        this.collapsed = Libs.string2Boolean(this.targetElement.dataset?.collapsed);
-
         super.init();
         this.mount();
     }

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

@@ -52,7 +52,7 @@ export class ElementAdditionObserver<T extends Element = Element> {
      *
      * @internal
      */
-    private actions: Array<(el: T) => void> = [];
+    private actions: Set<(el: T) => void> = new Set();
 
     /**
      * Registers a callback invoked whenever a matching element is detected as added to the DOM.
@@ -64,7 +64,7 @@ export class ElementAdditionObserver<T extends Element = Element> {
      * @param action - Function executed with the newly detected element.
      */
     public onDetect(action: (el: T) => void): void {
-        this.actions.push(action);
+        this.actions.add(action);
     }
 
     /**
@@ -74,7 +74,7 @@ export class ElementAdditionObserver<T extends Element = Element> {
      * to scan mutations but will not invoke any listeners until new callbacks are registered.
      */
     public clearDetect(): void {
-        this.actions = [];
+        this.actions.clear();
     }
 
     /**
@@ -156,6 +156,8 @@ export class ElementAdditionObserver<T extends Element = Element> {
      * @internal
      */
     private handle(element: T): void {
-        this.actions.forEach((action) => action(element));
+        for (const action of this.actions) {
+            action(element);
+        }
     }
-}
+}

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

@@ -11,8 +11,12 @@ export type MixedItem = GroupModel | OptionModel;
  * Statistics about the visibility state of items in a list or container.
  */
 export type VisibilityStats = {
-    visibleCount?: number;  // Number of items currently visible
-    totalCount?: number;    // Total number of items in the collection
-    hasVisible?: boolean;   // Indicates if there is at least one visible item
-    isEmpty?: boolean;      // Indicates if the collection is empty
-};
+    /** Number of items currently visible after filters are applied. */
+    visibleCount?: number;
+    /** Total number of items tracked by the adapter. */
+    totalCount?: number;
+    /** Convenience flag indicating whether at least one item is visible. */
+    hasVisible?: boolean;
+    /** Convenience flag indicating whether the collection has no items. */
+    isEmpty?: boolean;
+};

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

@@ -2,29 +2,46 @@
  * Represents the state of pagination for AJAX-based data loading.
  */
 export type PaginationState = {
-    currentPage: number;           // Current page number
-    totalPages: number;            // Total number of pages available
-    hasMore: boolean;              // Indicates if more pages are available
-    isLoading: boolean;            // Indicates if data is currently being loaded
-    currentKeyword: string;        // Current search keyword used for filtering
-    isPaginationEnabled: boolean;  // Indicates if pagination is enabled
+    /** Current 1-based page index. */
+    currentPage: number;
+    /** Total number of pages available for the current query. */
+    totalPages: number;
+    /** Whether another page can be requested. */
+    hasMore: boolean;
+    /** Whether a request is currently in flight. */
+    isLoading: boolean;
+    /** Keyword currently used to fetch/filter data. */
+    currentKeyword: string;
+    /** Whether pagination behavior is enabled for this datasource. */
+    isPaginationEnabled: boolean;
 };
 
 /**
  * Represents an individual option item returned from an AJAX request.
  */
 export type AjaxOptionItem = {
-    type?: "option";               // Type identifier (optional, defaults to "option")
-    value: string;                 // The value of the option
-    text: string;                  // Display text for the option
-    selected?: boolean;            // Indicates if the option is selected
-    data?: Record<string, any>;    // Additional custom data associated with the option
-    imgsrc?: string;               // Optional image source for the option
-    id?: string;                   // Optional unique identifier
-    key?: string;                  // Optional key for internal mapping
-    label?: string;                // Optional label for accessibility or grouping
-    name?: string;                 // Optional name attribute
-    title?: string;                // Optional title attribute
+    /** Type discriminator; defaults to `"option"` when omitted. */
+    type?: "option";
+    /** Serialized option value submitted to forms / APIs. */
+    value: string;
+    /** Display text shown in the UI. */
+    text: string;
+    /** Whether the option should start in selected state. */
+    selected?: boolean;
+    /** Arbitrary metadata preserved through normalization. */
+    data?: Record<string, any>;
+    /** Optional image source for custom rendering. */
+    imgsrc?: string;
+    /** Optional unique identifier from backend data. */
+    id?: string;
+    /** Optional stable key for mapping or diffing. */
+    key?: string;
+    /** Optional label override (e.g. accessibility/grouping use-cases). */
+    label?: string;
+    /** Optional name attribute for compatibility with legacy payloads. */
+    name?: string;
+    /** Optional title attribute for tooltip/semantics. */
+    title?: string;
 };
 
 /**
@@ -32,10 +49,14 @@ export type AjaxOptionItem = {
  * Contains a label and a list of options.
  */
 export type AjaxOptGroupItem = {
-    type: "optgroup";              // Type identifier for option groups
-    label: string;                 // Display label for the group
-    data?: Record<string, any>;    // Additional custom data for the group
-    options?: Array<{              // List of options within the group
+    /** Type discriminator for grouped entries. */
+    type: "optgroup";
+    /** Human-readable label for the group. */
+    label: string;
+    /** Group-level metadata from the datasource. */
+    data?: Record<string, any>;
+    /** Option children when backend uses `options` as group payload key. */
+    options?: Array<{
         value: string;
         text: string;
         selected?: boolean;
@@ -47,11 +68,16 @@ export type AjaxOptGroupItem = {
         name?: string;
         title?: string;
     }>;
-    items?: any[];                 // Optional raw items for flexibility
-    isGroup?: boolean;             // Indicates if this is treated as a group
-    group?: boolean;               // Alternative flag for grouping
-    name?: string;                 // Optional name attribute
-    title?: string;                // Optional title attribute
+    /** Raw child payload when backend uses non-standard item structures. */
+    items?: any[];
+    /** Compatibility flag used by some APIs to mark grouped entries. */
+    isGroup?: boolean;
+    /** Legacy alias of `isGroup`. */
+    group?: boolean;
+    /** Optional name attribute for compatibility with legacy payloads. */
+    name?: string;
+    /** Optional title attribute for tooltip/semantics. */
+    title?: string;
 };
 
 /**
@@ -68,20 +94,28 @@ export type NormalizedAjaxItem =
  * Represents the result of parsing an AJAX response.
  */
 export type ParseResponseResult = {
-    items: NormalizedAjaxItem[];   // List of normalized items
-    hasPagination: boolean;        // Indicates if pagination is supported
-    page: number;                  // Current page number
-    totalPages: number;            // Total number of pages
-    hasMore: boolean;              // Indicates if more data is available
+    /** Normalized items ready to be consumed by the adapter layer. */
+    items: NormalizedAjaxItem[];
+    /** Whether pagination metadata is present and should be honored. */
+    hasPagination: boolean;
+    /** Current 1-based page index returned from the server. */
+    page: number;
+    /** Total number of pages for the current query. */
+    totalPages: number;
+    /** Whether another page can be fetched. */
+    hasMore: boolean;
 };
 
 /**
  * Configuration for making AJAX requests to fetch options or groups.
  */
 export type AjaxConfig = {
-    url: string;                   // Endpoint URL for the AJAX request
-    method?: "GET" | "POST";       // HTTP method (default: GET)
-    keepSelected?: boolean;        // Whether to keep previously selected items after refresh
+    /** Endpoint URL used for remote search/pagination requests. */
+    url: string;
+    /** HTTP method used by requests (defaults to `GET`). */
+    method?: "GET" | "POST";
+    /** Preserve selected options when replacing remote results. */
+    keepSelected?: boolean;
 
     /**
      * Data payload for the request.
@@ -96,4 +130,4 @@ export type AjaxConfig = {
      * Function to generate request data based on selected values.
      */
     dataByValues?: (values: string[]) => Record<string, any>;
-};
+};

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

@@ -2,8 +2,12 @@
  * Represents a snapshot of the current selection state in a select component.
  */
 export type SelectSnapshot = {
-    length: number;   // Total number of selected items
-    values: string;   // Comma-separated string of selected values
-    texts: string;    // Comma-separated string of selected display texts
-    selected: string; // Raw representation of selected items (could be IDs or combined keys)
-};
+    /** Total number of selected options. */
+    length: number;
+    /** Comma-separated list of selected option values. */
+    values: string;
+    /** Comma-separated list of selected option display texts. */
+    texts: string;
+    /** Raw serialized representation of selected entries. */
+    selected: string;
+};