selective-ui 1.3.1 → 1.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "selective-ui",
-  "version": "1.3.1",
+  "version": "1.4.1",
   "description": "An overlay for the HTML select element.",
   "author": "Huỳnh Công Xuân Mai",
   "license": "MIT",
@@ -37,28 +37,28 @@
     "typecheck": "tsc -p tsconfig.json --noEmit"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-commonjs": "^29.0.2",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-replace": "^6.0.3",
-    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-terser": "^1.0.0",
     "@rollup/plugin-typescript": "^12.3.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@types/jest": "^30.0.0",
-    "autoprefixer": "^10.4.24",
-    "cssnano": "^7.1.2",
-    "jest": "^30.2.0",
-    "jest-environment-jsdom": "^30.2.0",
+    "autoprefixer": "^10.4.27",
+    "cssnano": "^7.1.4",
+    "jest": "^30.3.0",
+    "jest-environment-jsdom": "^30.3.0",
     "mutation-observer": "^1.0.3",
-    "postcss": "^8.5.6",
-    "rimraf": "^6.1.2",
-    "rollup": "^4.57.1",
+    "postcss": "^8.5.8",
+    "rimraf": "^6.1.3",
+    "rollup": "^4.60.1",
     "rollup-plugin-brotli": "^3.1.0",
     "rollup-plugin-postcss": "^4.0.2",
-    "ts-jest": "^29.4.6",
+    "ts-jest": "^29.4.9",
     "ts-node": "^10.9.2",
     "tslib": "^2.8.1",
-    "typescript": "^5.9.3"
+    "typescript": "^6.0.2"
   },
   "keywords": [
     "select",

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

@@ -3,9 +3,16 @@ import { GroupModel } from "../models/group-model";
 import { OptionModel } from "../models/option-model";
 import { GroupView } from "../views/group-view";
 import { OptionView } from "../views/option-view";
-import { MixedItem, VisibilityStats } from "../types/core/base/mixed-adapter.type";
+import {
+    MixedItem,
+    VisibilityStats,
+} from "../types/core/base/mixed-adapter.type";
 import { IEventCallback } from "../types/utils/ievents.type";
-import { ImagePosition, LabelHalign, LabelValign } from "../types/views/view.option.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";
@@ -72,25 +79,27 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
      *
      * @internal
      */
-    public options: SelectiveOptions | null = null;
+    public options?: SelectiveOptions;
 
     /**
      * Subscribers for aggregated visibility statistics.
      * Fired via a debounced scheduler to avoid repeated recomputation during batch updates.
      */
-    private visibilityChangedCallbacks: Array<(stats: VisibilityStats) => void> = [];
+    private visibilityChangedCallbacks: Array<
+        (stats: VisibilityStats) => void
+    > = [];
 
     /**
      * Flat index of the currently highlighted option.
      * `-1` indicates "no highlight".
      */
-    private currentHighlightIndex = -1;
+    private currentHighlightIndex: number = -1;
 
     /**
      * Cached pointer to the selected option in single-select mode.
      * Used to efficiently clear previous selection when selecting a new option.
      */
-    private selectedItemSingle: OptionModel | null = null;
+    private selectedItemSingle?: OptionModel;
 
     /** Top-level group models (if any). */
     public groups: GroupModel[] = [];
@@ -127,11 +136,13 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
      * @returns {void}
      * @override
      */
-    public override init() {
+    public override init(): void {
         Libs.callbackScheduler.on(
             `sche_vis_${this.adapterKey}`,
             () => {
-                const visibleCount = this.flatOptions.filter((item) => item.visible).length;
+                const visibleCount = this.flatOptions.filter(
+                    (item) => item.visible,
+                ).length;
                 const totalCount = this.flatOptions.length;
 
                 this.visibilityChangedCallbacks.forEach((callback) => {
@@ -146,7 +157,7 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
                 // Proxy hook; allows other listeners to chain after visibility aggregation.
                 Libs.callbackScheduler.run(`sche_vis_proxy_${this.adapterKey}`);
             },
-            { debounce: 10 }
+            { debounce: 10 },
         );
 
         super.init();
@@ -187,8 +198,12 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
      * @returns {GroupView | OptionView} A view instance matching the item type.
      * @override
      */
-    override viewHolder(parent: HTMLElement, item: MixedItem): GroupView | OptionView {
-        if (item instanceof GroupModel) return new GroupView(parent, this.options);
+    override viewHolder(
+        parent: HTMLElement,
+        item: MixedItem,
+    ): GroupView | OptionView {
+        if (item instanceof GroupModel)
+            return new GroupView(parent, this.options);
         return new OptionView(parent, this.options);
     }
 
@@ -200,12 +215,16 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
      * - Performs one-time listener binding guarded by `item.isInit`.
      *
      * @param {MixedItem} item - {@link GroupModel} or {@link OptionModel}.
-     * @param {GroupView | OptionView | null} viewer - The view instance that will render the model.
+     * @param {GroupView | OptionView} viewer - The view instance that will render the model.
      * @param {number} position - Position in the top-level mixed list.
      * @returns {void}
      * @override
      */
-    override onViewHolder(item: MixedItem, viewer: GroupView | OptionView | null, position: number): void {
+    override onViewHolder(
+        item: MixedItem,
+        viewer?: GroupView | OptionView,
+        position?: number,
+    ): void {
         item.position = position;
 
         if (item instanceof GroupModel) {
@@ -237,7 +256,11 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
      * @param {number} position - Group index in the top-level list.
      * @returns {void}
      */
-    private handleGroupView(groupModel: GroupModel, groupView: GroupView, position: number): void {
+    private handleGroupView(
+        groupModel: GroupModel,
+        groupView: GroupView,
+        position: number,
+    ): void {
         super.onViewHolder(groupModel, groupView, position);
         groupModel.view = groupView;
 
@@ -251,16 +274,23 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
                 groupModel.toggleCollapse();
             });
 
-            groupModel.onCollapsedChanged((evtToken: IEventCallback, model: GroupModel, collapsed: boolean) => {
-                void evtToken;
-
-                model.items.forEach((optItem) => {
-                    const optView = optItem.view?.getView?.();
-                    if (optView) optView.style.display = collapsed ? "none" : "";
-                });
+            groupModel.onCollapsedChanged(
+                (
+                    evtToken: IEventCallback,
+                    model: GroupModel,
+                    collapsed: boolean,
+                ) => {
+                    void evtToken;
+
+                    model.items.forEach((optItem) => {
+                        const optView = optItem.view?.getView?.();
+                        if (optView)
+                            optView.style.display = collapsed ? "none" : "";
+                    });
 
-                this.onCollapsedChange(model, collapsed);
-            });
+                    this.onCollapsedChange(model, collapsed);
+                },
+            );
         }
 
         const itemsContainer = groupView.getItemsContainer();
@@ -307,7 +337,11 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
      * @param {number} position - Option index within its group list (or rendering context).
      * @returns {void}
      */
-    private handleOptionView(optionModel: OptionModel, optionViewer: OptionView, position: number): void {
+    private handleOptionView(
+        optionModel: OptionModel,
+        optionViewer: OptionView,
+        position: number,
+    ): void {
         optionViewer.isMultiple = this.isMultiple;
         optionViewer.hasImage = optionModel.hasImage;
 
@@ -329,8 +363,10 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
         if (optionModel.hasImage) {
             const imageTag = optionViewer.view.tags.OptionImage;
             if (imageTag) {
-                if (imageTag.src !== optionModel.imageSrc) imageTag.src = optionModel.imageSrc;
-                if (imageTag.alt !== optionModel.text) imageTag.alt = optionModel.text;
+                if (imageTag.src !== optionModel.imageSrc)
+                    imageTag.src = optionModel.imageSrc;
+                if (imageTag.alt !== optionModel.text)
+                    imageTag.alt = optionModel.text;
             }
         }
 
@@ -338,45 +374,73 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
         optionViewer.view.tags.LabelContent.innerHTML = optionModel.text;
 
         if (!optionModel.isInit) {
-            optionViewer.view.tags.OptionView.addEventListener("click", async (ev: MouseEvent) => {
-                ev.stopPropagation();
-                ev.preventDefault();
-
-                if (this.isSkipEvent) return;
-
-                if (this.isMultiple) {
-                    await this.changingProp("select");
-                    optionModel.selected = !optionModel.selected;
-                } else if (optionModel.selected !== true) {
-                    await this.changingProp("select");
-                    if (this.selectedItemSingle) this.selectedItemSingle.selected = false;
-                    optionModel.selected = true;
-                }
-            });
+            optionViewer.view.tags.OptionView.addEventListener(
+                "click",
+                async (ev: MouseEvent) => {
+                    ev.stopPropagation();
+                    ev.preventDefault();
+
+                    if (this.isSkipEvent) return;
+
+                    if (this.isMultiple) {
+                        await this.changingProp("select");
+                        optionModel.selected = !optionModel.selected;
+                    } else if (optionModel.selected !== true) {
+                        await this.changingProp("select");
+                        if (this.selectedItemSingle)
+                            this.selectedItemSingle.selected = false;
+                        optionModel.selected = true;
+                    }
+                },
+            );
 
             optionViewer.view.tags.OptionView.title = optionModel.textContent;
 
-            optionViewer.view.tags.OptionView.addEventListener("mouseenter", () => {
-                if (this.isSkipEvent) return;
-                this.setHighlight(this.flatOptions.indexOf(optionModel), false);
-            });
+            optionViewer.view.tags.OptionView.addEventListener(
+                "mouseenter",
+                () => {
+                    if (this.isSkipEvent) return;
+                    this.setHighlight(
+                        this.flatOptions.indexOf(optionModel),
+                        false,
+                    );
+                },
+            );
 
             // External selection notification (user-facing semantics).
-            optionModel.onSelected((_evtToken: IEventCallback, _el: OptionModel, _selected: boolean) => {
-                this.changeProp("selected");
-            });
+            optionModel.onSelected(
+                (
+                    _evtToken: IEventCallback,
+                    _el: OptionModel,
+                    _selected: boolean,
+                ) => {
+                    this.changeProp("selected");
+                },
+            );
 
             // Internal selection notification (non-trigger semantics).
-            optionModel.onInternalSelected((_evtToken: IEventCallback, _el: OptionModel, selected: boolean) => {
-                if (selected) this.selectedItemSingle = optionModel;
-                this.changeProp("selected_internal");
-            });
+            optionModel.onInternalSelected(
+                (
+                    _evtToken: IEventCallback,
+                    _el: OptionModel,
+                    selected: boolean,
+                ) => {
+                    if (selected) this.selectedItemSingle = optionModel;
+                    this.changeProp("selected_internal");
+                },
+            );
 
             // Visibility changes affect group visibility and aggregated visibility stats.
-            optionModel.onVisibilityChanged((_evtToken: IEventCallback, model: OptionModel, _visible: boolean) => {
-                model.group?.updateVisibility();
-                this.notifyVisibilityChanged();
-            });
+            optionModel.onVisibilityChanged(
+                (
+                    _evtToken: IEventCallback,
+                    model: OptionModel,
+                    _visible: boolean,
+                ) => {
+                    model.group?.updateVisibility();
+                    this.notifyVisibilityChanged();
+                },
+            );
         }
 
         // Ensure single-select cache and suppress re-trigger when model is already selected.
@@ -453,7 +517,7 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
 
         Libs.callbackScheduler.clear(`sche_vis_${this.adapterKey}`);
 
-        this.groups.forEach(group => {
+        this.groups.forEach((group) => {
             group.destroy();
         });
 
@@ -506,7 +570,9 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
      * @param {(stats: VisibilityStats) => void} callback - Invoked with `{ visibleCount, totalCount, hasVisible, isEmpty }`.
      * @returns {void}
      */
-    public onVisibilityChanged(callback: (stats: VisibilityStats) => void): void {
+    public onVisibilityChanged(
+        callback: (stats: VisibilityStats) => void,
+    ): void {
         this.visibilityChangedCallbacks.push(callback);
     }
 
@@ -525,7 +591,9 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
      * @returns {VisibilityStats} Aggregated stats: `{ visibleCount, totalCount, hasVisible, isEmpty }`.
      */
     public getVisibilityStats(): VisibilityStats {
-        const visibleCount = this.flatOptions.filter((item) => item.visible).length;
+        const visibleCount = this.flatOptions.filter(
+            (item) => item.visible,
+        ).length;
         const totalCount = this.flatOptions.length;
 
         return {
@@ -560,7 +628,7 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
         if (visibleOptions.length === 0) return;
 
         let currentVisibleIndex = visibleOptions.findIndex(
-            (opt) => opt === this.flatOptions[this.currentHighlightIndex]
+            (opt) => opt === this.flatOptions[this.currentHighlightIndex],
         );
         if (currentVisibleIndex === -1) currentVisibleIndex = -1;
 
@@ -589,7 +657,10 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
      * @returns {void}
      */
     public selectHighlighted(): void {
-        if (this.currentHighlightIndex > -1 && this.flatOptions[this.currentHighlightIndex]) {
+        if (
+            this.currentHighlightIndex > -1 &&
+            this.flatOptions[this.currentHighlightIndex]
+        ) {
             const item = this.flatOptions[this.currentHighlightIndex];
             if (item.visible) {
                 const viewEl = item.view?.getView?.();
@@ -614,7 +685,10 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
      * @param {boolean} [isScrollToView=true] - Whether to scroll the highlighted item into view.
      * @returns {void}
      */
-    public setHighlight(target: number | OptionModel, isScrollToView: boolean = true): void {
+    public setHighlight(
+        target: number | OptionModel,
+        isScrollToView: boolean = true,
+    ): void {
         let index = 0;
 
         if (typeof target === "number") {
@@ -626,7 +700,10 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
             index = 0;
         }
 
-        if (this.currentHighlightIndex > -1 && this.flatOptions[this.currentHighlightIndex]) {
+        if (
+            this.currentHighlightIndex > -1 &&
+            this.flatOptions[this.currentHighlightIndex]
+        ) {
             this.flatOptions[this.currentHighlightIndex].highlighted = false;
         }
 
@@ -640,10 +717,12 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
             if (isScrollToView) {
                 const el = item.view?.getView?.();
                 if (el) {
-                    el.scrollIntoView({ block: 'center', behavior: 'smooth' });
+                    el.scrollIntoView({ block: "center", behavior: "smooth" });
                 } else {
                     // If virtualized, ensure the item is rendered before trying to scroll.
-                    this.recyclerView?.ensureRendered?.(i, { scrollIntoView: true });
+                    this.recyclerView?.ensureRendered?.(i, {
+                        scrollIntoView: true,
+                    });
                 }
             }
 
@@ -664,7 +743,7 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
      * @param {string} [id] - Optional DOM id of the highlighted view element (when available).
      * @returns {void}
      */
-    public onHighlightChange(index: number, id?: string): void { }
+    public onHighlightChange(index: number, id?: string): void {}
 
     /**
      * Hook called whenever a group's collapsed state changes.
@@ -678,5 +757,5 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
      * @param {boolean} collapsed - New collapsed state.
      * @returns {void}
      */
-    public onCollapsedChange(model: GroupModel, collapsed: boolean): void { }
-}
+    public onCollapsedChange(model: GroupModel, collapsed: boolean): void {}
+}

package/src/ts/components/accessorybox.ts

@@ -61,13 +61,13 @@ export class AccessoryBox extends Lifecycle {
      * Mounted structure returned by the node mounting helper.
      * Contains the root element (`view`) and any tag handles (if present).
      */
-    private nodeMounted: MountViewResult | null = null;
+    private nodeMounted?: MountViewResult;
 
     /**
      * Root DOM element of the accessory box (hidden by default).
      * Created during {@link init} and removed during {@link destroy}.
      */
-    private node: HTMLDivElement | null = null;
+    private node?: HTMLDivElement;
 
     /**
      * Component configuration (texts, behavior, placement).
@@ -77,25 +77,25 @@ export class AccessoryBox extends Lifecycle {
      * - `multiple` (multi-select mode)
      * - `textAccessoryDeselect` (a11y label prefix)
      */
-    private options: SelectiveOptions | null = null;
+    private options?: SelectiveOptions;
 
     /**
      * The Select UI mask element used as the positioning reference.
      * Provided by {@link setRoot}.
      */
-    private selectUIMask: HTMLDivElement | null = null;
+    private selectUIMask?: HTMLDivElement;
 
     /**
      * Parent container that hosts both the Select UI mask and the accessory box.
      * Computed from `selectUIMask.parentElement`.
      */
-    private parentMask: HTMLDivElement | null = null;
+    private parentMask?: HTMLDivElement;
 
     /**
      * ModelManager used to run selection pipelines and coordinate state updates.
      * This component does not own selection state; it delegates to the model layer.
      */
-    private modelManager: ModelManager<MixedItem, MixedAdapter> | null = null;
+    private modelManager?: ModelManager<MixedItem, MixedAdapter>;
 
     /**
      * Current selected option models rendered as chips.
@@ -106,9 +106,9 @@ export class AccessoryBox extends Lifecycle {
     /**
      * Creates an AccessoryBox and optionally initializes it with configuration.
      *
-     * @param {SelectiveOptions | null} [options=null] - Configuration controlling placement/visibility and texts.
+     * @param {SelectiveOptions} [options=null] - Configuration controlling placement/visibility and texts.
      */
-    public constructor(options: SelectiveOptions | null = null) {
+    public constructor(options?: SelectiveOptions) {
         super();
         if (options) this.initialize(options);
     }
@@ -211,7 +211,8 @@ export class AccessoryBox extends Lifecycle {
             !this.node ||
             !this.selectUIMask ||
             !this.options
-        ) return;
+        )
+            return;
 
         const ref =
             this.options.accessoryStyle === "top"
@@ -281,7 +282,9 @@ export class AccessoryBox extends Lifecycle {
                                         title: `${this.options!.textAccessoryDeselect}${modelData.textContent}`,
                                         onclick: async (evt: MouseEvent) => {
                                             evt.preventDefault();
-                                            await this.modelManager?.triggerChanging?.("select");
+                                            await this.modelManager?.triggerChanging?.(
+                                                "select",
+                                            );
                                             modelData.selected = false;
                                         },
                                     },
@@ -392,4 +395,4 @@ export class AccessoryBox extends Lifecycle {
 
         super.destroy();
     }
-}
+}

package/src/ts/components/directive.ts

@@ -113,4 +113,4 @@ export class Directive extends Lifecycle {
 
         super.destroy();
     }
-}
+}

package/src/ts/components/option-handle.ts

@@ -49,7 +49,7 @@ export class OptionHandle extends Lifecycle {
      *
      * @internal
      */
-    private nodeMounted: MountViewResult | null = null;
+    private nodeMounted?: MountViewResult;
 
     /**
      * Root element of this control.
@@ -57,7 +57,7 @@ export class OptionHandle extends Lifecycle {
      * Created during {@link initialize}. This node is used by {@link show}/{@link hide}
      * and removed during {@link destroy}.
      */
-    public node: HTMLDivElement | null = null;
+    public node?: HTMLDivElement;
 
     /**
      * Configuration snapshot used for:
@@ -68,7 +68,7 @@ export class OptionHandle extends Lifecycle {
      *
      * @internal
      */
-    private options: SelectiveOptions | null = null;
+    private options?: SelectiveOptions;
 
     /**
      * Callback list invoked when the "Select all" control is activated.
@@ -99,7 +99,7 @@ export class OptionHandle extends Lifecycle {
      *
      * @param options - Feature flags and labels for the two actions.
      */
-    public constructor(options: SelectiveOptions | null = null) {
+    public constructor(options?: SelectiveOptions) {
         super();
         if (options) this.initialize(options);
     }
@@ -172,7 +172,10 @@ export class OptionHandle extends Lifecycle {
      */
     private available(): boolean {
         if (!this.options) return false;
-        return Libs.string2Boolean(this.options.multiple) && Libs.string2Boolean(this.options.selectall);
+        return (
+            Libs.string2Boolean(this.options.multiple) &&
+            Libs.string2Boolean(this.options.selectall)
+        );
     }
 
     /**
@@ -231,7 +234,7 @@ export class OptionHandle extends Lifecycle {
      *
      * @param action - Callback invoked on activation; ignored when not a function.
      */
-    public onSelectAll(action: ((...args: unknown[]) => unknown) | null = null): void {
+    public onSelectAll(action?: (...args: unknown[]) => unknown): void {
         if (typeof action === "function") {
             this.actionOnSelectAll.push(action);
         }
@@ -248,7 +251,7 @@ export class OptionHandle extends Lifecycle {
      *
      * @param action - Callback invoked on activation; ignored when not a function.
      */
-    public onDeSelectAll(action: ((...args: unknown[]) => unknown) | null = null): void {
+    public onDeSelectAll(action?: (...args: unknown[]) => unknown): void {
         if (typeof action === "function") {
             this.actionOnDeSelectAll.push(action);
         }
@@ -277,8 +280,8 @@ export class OptionHandle extends Lifecycle {
         this.options = null;
         this.actionOnSelectAll = null;
         this.actionOnDeSelectAll = null;
-        this.node = null
+        this.node = null;
 
         super.destroy();
     }
-}
+}

package/src/ts/components/placeholder.ts

@@ -38,7 +38,7 @@ export class PlaceHolder extends Lifecycle {
      * Created during {@link initialize}. Removed from the DOM during {@link destroy}.
      * `null` before initialization and after destruction.
      */
-    public node: HTMLElement | null = null;
+    public node?: HTMLElement;
 
     /**
      * Configuration snapshot used to render and optionally persist placeholder content.
@@ -51,7 +51,7 @@ export class PlaceHolder extends Lifecycle {
      *
      * @internal
      */
-    private options: SelectiveOptions | null = null;
+    private options?: SelectiveOptions;
 
     /**
      * Creates a new {@link PlaceHolder}.
@@ -62,7 +62,7 @@ export class PlaceHolder extends Lifecycle {
      *
      * @param options - Select UI options containing placeholder content and rendering flags.
      */
-    constructor(options: SelectiveOptions | null) {
+    constructor(options?: SelectiveOptions) {
         super();
         if (options) this.initialize(options);
     }
@@ -144,11 +144,11 @@ export class PlaceHolder extends Lifecycle {
         if (this.is(LifecycleState.DESTROYED)) {
             return;
         }
-        
+
         this.node?.remove();
         this.node = null;
         this.options = null;
 
         super.destroy();
     }
-}
+}