ngx-tethys 20.0.0 → 20.0.1

package/select/index.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { OnInit, ElementRef, InjectionToken, AfterViewInit, AfterContentInit, OnDestroy, Signal, TemplateRef, QueryList } from '@angular/core';
+import { OnInit, ElementRef, InjectionToken, AfterViewInit, OnDestroy, Signal, WritableSignal, TemplateRef, QueryList } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import * as i2 from '@angular/forms';
 import { ControlValueAccessor } from '@angular/forms';
@@ -8,15 +8,15 @@ import * as i4 from '@angular/cdk/overlay';
 import { ScrollStrategy, Overlay, ConnectionPositionPair, CdkConnectedOverlay } from '@angular/cdk/overlay';
 import * as i5 from 'ngx-tethys/loading';
 import * as i6 from 'ngx-tethys/shared';
-import { IThyOptionParentComponent, ThyOption, ThyOptionSelectionChangeEvent, SelectControlSize, ThySelectOptionGroup } from 'ngx-tethys/shared';
+import { SelectControlSize, ThyOption, SelectOptionBase, ThyOptionRender } from 'ngx-tethys/shared';
 import * as i7 from 'ngx-tethys/icon';
 import * as i8 from 'ngx-tethys/empty';
 import { TabIndexDisabledControlValueAccessorMixin, ThyPlacement } from 'ngx-tethys/core';
-import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
-import { SelectionModel } from '@angular/cdk/collections';
 import * as i1 from 'ngx-tethys/util';
 import { FunctionProp } from 'ngx-tethys/util';
 import { Observable } from 'rxjs';
+import { SafeAny } from 'ngx-tethys/types';
+import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 
 type InputSize = 'xs' | 'sm' | 'md' | 'lg' | '';
 /**
@@ -84,15 +84,23 @@ interface ThySelectOptionModel {
     icon?: string;
     groupLabel?: string;
 }
-interface ThyOptionGroupModel extends ThySelectOptionModel {
-    children?: ThySelectOptionModel[];
+interface ThySelectFlattedItem {
+    type: 'option' | 'group';
+    value?: string | number;
+    rawValue?: any;
+    label?: string;
+    showOptionCustom?: boolean;
+    template?: TemplateRef<any>;
+    disabled?: boolean;
+    searchKey?: string;
+    groupLabel?: string;
 }
 /**
  * 下拉选择组件
  * @name thy-select,thy-custom-select
  * @order 10
  */
-declare class ThySelect extends TabIndexDisabledControlValueAccessorMixin implements ControlValueAccessor, IThyOptionParentComponent, OnInit, AfterViewInit, AfterContentInit, OnDestroy {
+declare class ThySelect extends TabIndexDisabledControlValueAccessorMixin implements ControlValueAccessor, OnInit, AfterViewInit, OnDestroy {
     private ngZone;
     private elementRef;
     private changeDetectorRef;
@@ -106,32 +114,34 @@ declare class ThySelect extends TabIndexDisabledControlValueAccessorMixin implem
     disabled: boolean;
     mode: SelectMode;
     scrollTop: number;
-    modalValue: any;
     defaultOffset: number;
-    dropDownClass: {
+    readonly dropDownClass: Signal<{
         [key: string]: boolean;
-    };
-    dropDownMinWidth: number | null;
+    }>;
+    readonly dropDownMinWidth: Signal<number>;
     /**
      * 设置下拉框的最小宽度，默认值 `match-select`，表示与输入框的宽度一致；`min-width` 表示最小宽度为200px；支持自定义最小宽度，比如传 `{minWidth: 150}` 表示最小宽度为150px
      * @default match-select
      */
     readonly thyDropdownWidthMode: _angular_core.InputSignal<ThyDropdownWidthMode>;
-    dropDownPositions: ConnectionPositionPair[];
-    selectionModel: SelectionModel<ThyOption>;
-    triggerRectWidth: number;
+    readonly placement: Signal<ThyPlacement>;
+    readonly dropDownPositions: Signal<ConnectionPositionPair[]>;
+    itemSize: number;
+    readonly virtualHeight: Signal<number>;
+    /**
+     * 视觉上能看到的最大选项个数
+     */
+    private maxItemLength;
+    triggerRectWidth: WritableSignal<number>;
     scrollStrategy: ScrollStrategy;
     private resizeSubscription;
-    private selectionModelSubscription;
     /**
      * 手动聚焦中的标识
      */
     private manualFocusing;
     private config;
-    private readonly destroy$;
-    readonly optionSelectionChanges: Observable<ThyOptionSelectionChangeEvent>;
+    private destroyRef;
     readonly cdkConnectedOverlay: Signal<CdkConnectedOverlay>;
-    keyManager: ActiveDescendantKeyManager<ThyOption>;
     panelOpen: boolean;
     /**
      * 搜索时回调
@@ -239,86 +249,91 @@ declare class ThySelect extends TabIndexDisabledControlValueAccessorMixin implem
      * 是否隐藏选择框边框
      */
     readonly thyBorderless: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    isReactiveDriven: boolean;
-    innerOptions: ThySelectOptionModel[];
-    optionGroups: ThyOptionGroupModel[];
+    private scrolledIndex;
+    readonly cdkVirtualScrollViewport: Signal<CdkVirtualScrollViewport>;
+    private shouldActivateOption;
     /**
      * option 列表
      */
     readonly thyOptions: _angular_core.InputSignalWithTransform<ThySelectOptionModel[], ThySelectOptionModel[]>;
-    options: QueryList<ThyOption>;
+    readonly keywords: WritableSignal<string>;
     /**
      * 目前只支持多选选中项的展示，默认为空，渲染文字模板，传入tag，渲染展示模板,
      * @default ''｜tag
      */
     readonly thyPreset: _angular_core.InputSignal<string>;
     trigger: ElementRef<HTMLElement>;
-    readonly panel: Signal<ElementRef<HTMLElement>>;
+    private readonly options;
+    private readonly groups;
     /**
-     * @private
+     * 所有分组和选项
      */
-    contentOptions: QueryList<ThyOption>;
-    viewOptions: QueryList<ThyOption>;
+    private readonly allGroupsAndOptions;
     /**
-     * @private
+     * 渲染的分组和选项，基于 keywords 过滤后
      */
-    readonly contentGroups: Signal<readonly ThySelectOptionGroup[]>;
-    readonly viewGroups: Signal<readonly ThySelectOptionGroup[]>;
-    handleKeydown(event: KeyboardEvent): void;
-    get optionsChanges$(): Observable<ThyOption[]>;
+    readonly filteredGroupsAndOptions: Signal<ThySelectFlattedItem[]>;
+    /**
+     * 渲染的选项
+     */
+    private readonly filteredOptions;
+    private readonly filteredOptionsMap;
+    /**
+     * 当前选中的值
+     */
+    readonly selectedValues: WritableSignal<any[]>;
+    readonly selectedValuesMap: Signal<Map<any, boolean>>;
+    /**
+     * 传给 selectControl 指令的选中值
+     */
+    readonly selectedOptions: WritableSignal<SelectOptionBase | SelectOptionBase[]>;
+    optionRenders: QueryList<ThyOptionRender>;
+    keydown(event: KeyboardEvent): void;
+    get optionsChanges$(): Observable<ThyOptionRender[]>;
     private buildScrollStrategy;
-    private isSearching;
-    groupBy: (item: ThySelectOptionModel) => string;
-    get placement(): ThyPlacement;
     constructor();
-    writeValue(value: any): void;
+    writeValue(value: SafeAny): void;
     ngOnInit(): void;
-    buildOptionGroups(options: ThySelectOptionModel[]): ThyOptionGroupModel[];
-    buildReactiveOptions(): void;
-    getDropdownMinWidth(): number | null;
     ngAfterViewInit(): void;
-    ngAfterContentInit(): void;
-    setup(): void;
-    get isHiddenOptions(): boolean;
-    onAttached(): void;
-    dropDownMouseMove(event: MouseEvent): void;
-    onOptionsScrolled(elementRef: ElementRef): void;
-    onSearchFilter(searchText: string): void;
+    private setup;
+    private buildAllGroupsAndOptions;
+    private allGroupsAndOptionsByReactive;
+    private allGroupsAndOptionsByTemplate;
+    private buildFilteredGroupsAndOptions;
+    private updateSelectedOptions;
+    optionsScrolled(index: number): void;
+    search(keywords: string): void;
     onBlur(event?: FocusEvent): void;
     onFocus(event?: FocusEvent): void;
     focus(options?: FocusOptions): void;
     remove($event: {
-        item: ThyOption;
+        item: SelectOptionBase;
         $eventOrigin: Event;
     }): void;
     clearSelectValue(event?: Event): void;
     updateCdkConnectedOverlayPositions(): void;
-    get selected(): ThyOption | ThyOption[];
-    get isMultiple(): boolean;
-    get empty(): boolean;
-    getItemCount(): number;
+    readonly isMultiple: Signal<boolean>;
+    readonly empty: Signal<boolean>;
+    activatedValue: WritableSignal<any>;
     toggle(event: MouseEvent): void;
     open(): void;
     close(): void;
     private emitModelValueChange;
-    private highlightCorrectOption;
-    private initKeyManager;
-    private handleClosedKeydown;
-    private handleOpenKeydown;
-    private getPositions;
-    private instanceSelectionModel;
-    private resetOptions;
-    private initializeSelection;
-    private setDropDownClass;
-    private setSelectionByModelValue;
-    private onSelect;
-    private sortValues;
+    private scrollToActivatedOption;
+    private handleKeydown;
+    optionClick(event: {
+        value: SafeAny;
+        isUserInput: boolean;
+    }): void;
+    optionHover(value: SafeAny): void;
+    mouseLeaveOptions(): void;
     private getOriginRectWidth;
     private subscribeTriggerResize;
     private unsubscribeTriggerResize;
+    trackByFn(index: number, item: ThySelectFlattedItem): SafeAny;
     ngOnDestroy(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ThySelect, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ThySelect, "thy-select,thy-custom-select", ["thySelect"], { "thyDropdownWidthMode": { "alias": "thyDropdownWidthMode"; "required": false; "isSignal": true; }; "thyShowSearch": { "alias": "thyShowSearch"; "required": false; "isSignal": true; }; "thyPlaceHolder": { "alias": "thyPlaceHolder"; "required": false; "isSignal": true; }; "thyServerSearch": { "alias": "thyServerSearch"; "required": false; "isSignal": true; }; "thyLoadState": { "alias": "thyLoadState"; "required": false; "isSignal": true; }; "thyAutoActiveFirstItem": { "alias": "thyAutoActiveFirstItem"; "required": false; "isSignal": true; }; "thyMode": { "alias": "thyMode"; "required": false; "isSignal": true; }; "thySize": { "alias": "thySize"; "required": false; "isSignal": true; }; "thyEmptyStateText": { "alias": "thyEmptyStateText"; "required": false; "isSignal": true; }; "thyEmptySearchMessageText": { "alias": "thyEmptySearchMessageText"; "required": false; "isSignal": true; }; "thyEnableScrollLoad": { "alias": "thyEnableScrollLoad"; "required": false; "isSignal": true; }; "thyAllowClear": { "alias": "thyAllowClear"; "required": false; "isSignal": true; }; "thyDisabled": { "alias": "thyDisabled"; "required": false; }; "thySortComparator": { "alias": "thySortComparator"; "required": false; "isSignal": true; }; "thyFooterTemplate": { "alias": "thyFooterTemplate"; "required": false; "isSignal": true; }; "thyPlacement": { "alias": "thyPlacement"; "required": false; "isSignal": true; }; "thyOrigin": { "alias": "thyOrigin"; "required": false; "isSignal": true; }; "thyFooterClass": { "alias": "thyFooterClass"; "required": false; "isSignal": true; }; "thyAutoExpand": { "alias": "thyAutoExpand"; "required": false; "isSignal": true; }; "thyHasBackdrop": { "alias": "thyHasBackdrop"; "required": false; "isSignal": true; }; "thyMaxTagCount": { "alias": "thyMaxTagCount"; "required": false; "isSignal": true; }; "thyBorderless": { "alias": "thyBorderless"; "required": false; "isSignal": true; }; "thyOptions": { "alias": "thyOptions"; "required": false; "isSignal": true; }; "thyPreset": { "alias": "thyPreset"; "required": false; "isSignal": true; }; }, { "thyOnSearch": "thyOnSearch"; "thyOnScrollToBottom": "thyOnScrollToBottom"; "thyOnExpandStatusChange": "thyOnExpandStatusChange"; }, ["selectedValueDisplayRef", "contentGroups", "contentOptions"], ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ThySelect, "thy-select,thy-custom-select", ["thySelect"], { "thyDropdownWidthMode": { "alias": "thyDropdownWidthMode"; "required": false; "isSignal": true; }; "thyShowSearch": { "alias": "thyShowSearch"; "required": false; "isSignal": true; }; "thyPlaceHolder": { "alias": "thyPlaceHolder"; "required": false; "isSignal": true; }; "thyServerSearch": { "alias": "thyServerSearch"; "required": false; "isSignal": true; }; "thyLoadState": { "alias": "thyLoadState"; "required": false; "isSignal": true; }; "thyAutoActiveFirstItem": { "alias": "thyAutoActiveFirstItem"; "required": false; "isSignal": true; }; "thyMode": { "alias": "thyMode"; "required": false; "isSignal": true; }; "thySize": { "alias": "thySize"; "required": false; "isSignal": true; }; "thyEmptyStateText": { "alias": "thyEmptyStateText"; "required": false; "isSignal": true; }; "thyEmptySearchMessageText": { "alias": "thyEmptySearchMessageText"; "required": false; "isSignal": true; }; "thyEnableScrollLoad": { "alias": "thyEnableScrollLoad"; "required": false; "isSignal": true; }; "thyAllowClear": { "alias": "thyAllowClear"; "required": false; "isSignal": true; }; "thyDisabled": { "alias": "thyDisabled"; "required": false; }; "thySortComparator": { "alias": "thySortComparator"; "required": false; "isSignal": true; }; "thyFooterTemplate": { "alias": "thyFooterTemplate"; "required": false; "isSignal": true; }; "thyPlacement": { "alias": "thyPlacement"; "required": false; "isSignal": true; }; "thyOrigin": { "alias": "thyOrigin"; "required": false; "isSignal": true; }; "thyFooterClass": { "alias": "thyFooterClass"; "required": false; "isSignal": true; }; "thyAutoExpand": { "alias": "thyAutoExpand"; "required": false; "isSignal": true; }; "thyHasBackdrop": { "alias": "thyHasBackdrop"; "required": false; "isSignal": true; }; "thyMaxTagCount": { "alias": "thyMaxTagCount"; "required": false; "isSignal": true; }; "thyBorderless": { "alias": "thyBorderless"; "required": false; "isSignal": true; }; "thyOptions": { "alias": "thyOptions"; "required": false; "isSignal": true; }; "thyPreset": { "alias": "thyPreset"; "required": false; "isSignal": true; }; }, { "thyOnSearch": "thyOnSearch"; "thyOnScrollToBottom": "thyOnScrollToBottom"; "thyOnExpandStatusChange": "thyOnExpandStatusChange"; }, ["selectedValueDisplayRef", "options", "groups"], ["*"], true, never>;
     static ngAcceptInputType_thyDisabled: i1.ThyBooleanInput;
 }
 

package/shared/index.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { Type, TemplateRef, ViewContainerRef, OnInit, OnDestroy, ElementRef, AfterContentInit, QueryList, ChangeDetectorRef, AfterViewInit, Signal, InputSignal, InjectionToken, WritableSignal } from '@angular/core';
+import { Type, TemplateRef, ViewContainerRef, OnInit, OnDestroy, ElementRef, AfterContentInit, QueryList, ChangeDetectorRef, AfterViewInit, Signal, InputSignal, InjectionToken } from '@angular/core';
 import { CdkDrag } from '@angular/cdk/drag-drop';
 import * as i2 from '@angular/forms';
 import { ControlValueAccessor } from '@angular/forms';
@@ -13,7 +13,7 @@ import { ThyTagSize } from 'ngx-tethys/tag';
 import { ThySharedLocale } from 'ngx-tethys/i18n';
 import * as ngx_tethys_shared from 'ngx-tethys/shared';
 import { Highlightable } from '@angular/cdk/a11y';
-import { Subject, Observable } from 'rxjs';
+import { SafeAny } from 'ngx-tethys/types';
 
 /**
  * 视图 Outlet 组件，取代 NgComponentOutlet 和 NgTemplateOutlet
@@ -364,9 +364,6 @@ declare class ThySelectCommonModule {
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<ThySelectCommonModule>;
 }
 
-interface IThyOptionParentComponent {
-    isMultiple: boolean;
-}
 interface IThyOptionGroupComponent {
     hidden: boolean;
 }
@@ -383,10 +380,6 @@ interface IThyListOptionParentComponent {
     scrollIntoView(option: IThyOptionComponent): void;
     isSelected(option: IThyOptionComponent): boolean;
 }
-/**
- * Injection token used to provide the parent component to options.
- */
-declare const THY_OPTION_PARENT_COMPONENT: InjectionToken<IThyOptionParentComponent>;
 /**
  * Injection token used to provide the parent component to options.
  */
@@ -436,81 +429,159 @@ declare class ThyOptionSelectionChangeEvent {
     isUserInput: boolean;
     constructor(option: ThyOption, isUserInput?: boolean);
 }
-declare class ThyOptionVisibleChangeEvent {
-    option: ThyOption;
+/**
+ * 选项组件
+ * @name thy-option
+ */
+declare class ThyOption {
+    /**
+     * 选项的值，具有唯一性
+     */
+    readonly thyValue: _angular_core.InputSignal<any>;
+    /**
+     * 选项的原始值
+     */
+    readonly thyRawValue: _angular_core.InputSignal<any>;
+    /**
+     * 选项的文本
+     */
+    readonly thyLabelText: _angular_core.InputSignal<string>;
+    /**
+     * 是否显示自定义模板
+     */
+    readonly thyShowOptionCustom: _angular_core.InputSignal<boolean>;
+    /**
+     * 搜索关键字
+     */
+    readonly thySearchKey: _angular_core.InputSignal<string>;
+    /**
+     * 是否禁用
+     */
+    readonly thyDisabled: _angular_core.InputSignal<boolean>;
+    /**
+     * 是否选中，会跟随 ThyOptionSelectionChangeEvent 抛出去
+     */
+    readonly selected: _angular_core.WritableSignal<boolean>;
+    /**
+     * 选项被选中时的回调
+     */
+    readonly selectionChange: _angular_core.OutputEmitterRef<ThyOptionSelectionChangeEvent>;
+    /**
+     * 模板
+     */
+    readonly template: _angular_core.Signal<TemplateRef<any>>;
+    private readonly optionGroupComponent;
+    get groupLabel(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ThyOption, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ThyOption, "thy-option", never, { "thyValue": { "alias": "thyValue"; "required": false; "isSignal": true; }; "thyRawValue": { "alias": "thyRawValue"; "required": false; "isSignal": true; }; "thyLabelText": { "alias": "thyLabelText"; "required": false; "isSignal": true; }; "thyShowOptionCustom": { "alias": "thyShowOptionCustom"; "required": false; "isSignal": true; }; "thySearchKey": { "alias": "thySearchKey"; "required": false; "isSignal": true; }; "thyDisabled": { "alias": "thyDisabled"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; }, never, ["*"], true, never>;
 }
+
 /**
+ * 选项渲染组件
  * @private
- * @order 20
+ * @name thy-option-render
  */
-declare class ThyOption extends SelectOptionBase implements OnDestroy, Highlightable {
+declare class ThyOptionRender implements Highlightable {
     element: ElementRef<HTMLElement>;
-    parent: ngx_tethys_shared.IThyOptionParentComponent;
-    private cdr;
-    thyValue: any;
-    thyRawValue: any;
-    thyLabelText: string;
-    readonly thyShowOptionCustom: _angular_core.InputSignal<boolean>;
+    private hostRenderer;
+    /**
+     * 选项的值，具有唯一性
+     */
+    readonly thyValue: _angular_core.InputSignal<any>;
+    /**
+     * 选项的原始值
+     */
+    readonly thyRawValue: _angular_core.InputSignal<any>;
+    /**
+     * 选项的文本
+     */
+    readonly thyLabelText: _angular_core.InputSignal<string>;
+    /**
+     * 搜索关键字
+     */
     readonly thySearchKey: _angular_core.InputSignal<string>;
-    readonly template: _angular_core.Signal<TemplateRef<any>>;
+    /**
+     * 是否禁用
+     */
     readonly thyDisabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    readonly hidden: WritableSignal<boolean>;
-    get disabled(): boolean;
-    get tabIndex(): string;
-    readonly selected: WritableSignal<boolean>;
-    readonly selectionChange: _angular_core.OutputEmitterRef<ThyOptionSelectionChangeEvent>;
-    readonly visibleChange: _angular_core.OutputEmitterRef<ThyOptionVisibleChangeEvent>;
+    /**
+     * 是否显示自定义模板
+     */
+    readonly thyShowOptionCustom: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * 模板
+     */
+    readonly thyTemplate: _angular_core.InputSignal<TemplateRef<any>>;
+    /**
+     * 模板上下文
+     */
+    readonly thyTemplateContext: _angular_core.InputSignal<any>;
+    /**
+     * 被选中时，是否显示勾选图标
+     */
+    readonly thyShowCheckedIcon: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Select 组件选中的值
+     */
+    readonly thySelectedValuesMap: _angular_core.InputSignal<Map<any, boolean>>;
+    /**
+     * 当前高亮选项的值
+     */
+    readonly thyActivatedValue: _angular_core.InputSignal<any>;
+    /**
+     * 点击选项时的回调
+     */
+    readonly optionClick: _angular_core.OutputEmitterRef<{
+        value: SafeAny;
+        isUserInput?: boolean;
+    }>;
+    /**
+     * 鼠标悬浮时的回调
+     */
+    readonly optionHover: _angular_core.OutputEmitterRef<any>;
+    /**
+     * 是否被选中
+     */
+    readonly selected: _angular_core.Signal<boolean>;
+    /**
+     * 是否高亮
+     */
+    readonly activated: _angular_core.Signal<boolean>;
+    readonly tabIndex: _angular_core.Signal<"0" | "-1">;
     constructor();
-    getHostElement(): HTMLElement;
-    onClick(event: Event): void;
+    mouseEnter(): void;
     handleKeydown(event: KeyboardEvent): void;
     selectViaInteraction(): void;
-    select(event?: Event): void;
+    select(): void;
     deselect(): void;
-    hideOption(): void;
-    showOption(): void;
-    matchSearchText(searchText: string): boolean;
     setActiveStyles(): void;
     setInactiveStyles(): void;
-    getLabel(): string;
-    private emitSelectionChangeEvent;
-    ngOnDestroy(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ThyOption, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ThyOption, "thy-option", never, { "thyValue": { "alias": "thyValue"; "required": false; }; "thyRawValue": { "alias": "thyRawValue"; "required": false; }; "thyLabelText": { "alias": "thyLabelText"; "required": false; }; "thyShowOptionCustom": { "alias": "thyShowOptionCustom"; "required": false; "isSignal": true; }; "thySearchKey": { "alias": "thySearchKey"; "required": false; "isSignal": true; }; "thyDisabled": { "alias": "thyDisabled"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; "visibleChange": "visibleChange"; }, never, ["*"], true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ThyOptionRender, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ThyOptionRender, "thy-option-render", never, { "thyValue": { "alias": "thyValue"; "required": false; "isSignal": true; }; "thyRawValue": { "alias": "thyRawValue"; "required": false; "isSignal": true; }; "thyLabelText": { "alias": "thyLabelText"; "required": false; "isSignal": true; }; "thySearchKey": { "alias": "thySearchKey"; "required": false; "isSignal": true; }; "thyDisabled": { "alias": "thyDisabled"; "required": false; "isSignal": true; }; "thyShowOptionCustom": { "alias": "thyShowOptionCustom"; "required": false; "isSignal": true; }; "thyTemplate": { "alias": "thyTemplate"; "required": false; "isSignal": true; }; "thyTemplateContext": { "alias": "thyTemplateContext"; "required": false; "isSignal": true; }; "thyShowCheckedIcon": { "alias": "thyShowCheckedIcon"; "required": false; "isSignal": true; }; "thySelectedValuesMap": { "alias": "thySelectedValuesMap"; "required": false; "isSignal": true; }; "thyActivatedValue": { "alias": "thyActivatedValue"; "required": false; "isSignal": true; }; }, { "optionClick": "optionClick"; "optionHover": "optionHover"; }, never, never, true, never>;
 }
 
-/**
- * @private
- */
-declare class ThySelectOptionGroup implements OnDestroy, AfterContentInit {
-    private _ngZone;
-    private cdr;
-    readonly thyDisabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    readonly hidden: WritableSignal<boolean>;
+declare class ThySelectOptionGroup {
     readonly thyGroupLabel: _angular_core.InputSignal<string>;
-    options: QueryList<ThyOption>;
-    _destroy$: Subject<void>;
-    optionVisibleChanges: Observable<ThyOptionVisibleChangeEvent>;
-    ngAfterContentInit(): void;
-    _resetOptions(): void;
-    ngOnDestroy(): void;
+    readonly thyDisabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ThySelectOptionGroup, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ThySelectOptionGroup, "thy-option-group", never, { "thyDisabled": { "alias": "thyDisabled"; "required": false; "isSignal": true; }; "thyGroupLabel": { "alias": "thyGroupLabel"; "required": false; "isSignal": true; }; }, {}, ["options"], ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ThySelectOptionGroup, "thy-option-group", never, { "thyGroupLabel": { "alias": "thyGroupLabel"; "required": false; "isSignal": true; }; "thyDisabled": { "alias": "thyDisabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-declare class ThyOptionsContainer implements OnInit {
-    readonly optionsTemplate: _angular_core.Signal<TemplateRef<any>>;
-    constructor();
-    ngOnInit(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ThyOptionsContainer, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ThyOptionsContainer, "thy-options-container", never, {}, {}, never, ["*"], true, never>;
+/**
+ * @private
+ */
+declare class ThyOptionGroupRender {
+    readonly thyGroupLabel: _angular_core.InputSignal<string>;
+    readonly thyDisabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ThyOptionGroupRender, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ThyOptionGroupRender, "thy-option-group-render", never, { "thyGroupLabel": { "alias": "thyGroupLabel"; "required": false; "isSignal": true; }; "thyDisabled": { "alias": "thyDisabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare class ThyOptionModule {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ThyOptionModule, never>;
-    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<ThyOptionModule, never, [typeof i1$1.CommonModule, typeof i3.ThyIconModule, typeof ThyListOption, typeof ThyOptionGroup, typeof ThyOption, typeof ThySelectOptionGroup, typeof ThyOptionsContainer], [typeof ThyListOption, typeof ThyOptionGroup, typeof ThyOption, typeof ThySelectOptionGroup, typeof ThyOptionsContainer]>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<ThyOptionModule, never, [typeof i1$1.CommonModule, typeof i3.ThyIconModule, typeof ThyListOption, typeof ThyOptionGroup, typeof ThyOption, typeof ThyOptionRender, typeof ThySelectOptionGroup, typeof ThyOptionGroupRender], [typeof ThyListOption, typeof ThyOptionGroup, typeof ThyOption, typeof ThyOptionRender, typeof ThySelectOptionGroup, typeof ThyOptionGroupRender]>;
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<ThyOptionModule>;
 }
 
-export { SelectOptionBase, THY_LIST_OPTION_PARENT_COMPONENT, THY_OPTION_PARENT_COMPONENT, ThyAutofocusDirective, ThyContextMenuDirective, ThyCtrlEnterDirective, ThyDragDropDirective, ThyEnterDirective, ThyFormCheckBaseComponent, ThyListOption, ThyOption, ThyOptionGroup, ThyOptionModule, ThyOptionSelectionChangeEvent, ThyOptionVisibleChangeEvent, ThyOptionsContainer, ThyScrollDirective, ThySelectCommonModule, ThySelectControl, ThySelectOptionGroup, ThySharedModule, ThyShowDirective, ThyStopPropagationDirective, ThyStringOrTemplateOutletDirective, ThyTranscludeDirective, ThyViewOutletDirective };
-export type { IThyListOptionParentComponent, IThyOptionComponent, IThyOptionGroupComponent, IThyOptionParentComponent, SelectControlSize, ThyListLayout };
+export { SelectOptionBase, THY_LIST_OPTION_PARENT_COMPONENT, ThyAutofocusDirective, ThyContextMenuDirective, ThyCtrlEnterDirective, ThyDragDropDirective, ThyEnterDirective, ThyFormCheckBaseComponent, ThyListOption, ThyOption, ThyOptionGroup, ThyOptionGroupRender, ThyOptionModule, ThyOptionRender, ThyOptionSelectionChangeEvent, ThyScrollDirective, ThySelectCommonModule, ThySelectControl, ThySelectOptionGroup, ThySharedModule, ThyShowDirective, ThyStopPropagationDirective, ThyStringOrTemplateOutletDirective, ThyTranscludeDirective, ThyViewOutletDirective };
+export type { IThyListOptionParentComponent, IThyOptionComponent, IThyOptionGroupComponent, SelectControlSize, ThyListLayout };

package/shared/option/styles/option.mixin.scss

@@ -57,16 +57,6 @@
             background: rgba(variables.$primary, 0.1);
             color: variables.$primary;
 
-            // &.hover,
-            // &:hover {
-            // background: $hover-bg-color;
-            // color: $body-color;
-
-            // .prefix-icon {
-            //     color: $gray-300;
-            // }
-            // }
-
             .prefix-icon {
                 color: variables.$primary;
             }

package/shared/option/styles/select-dropdown.scss

@@ -6,29 +6,30 @@ $optionsSize: 'sm', 'default', 'md', 'lg';
 
 .thy-select-dropdown-options {
     @include select.thy-select-options-container();
+    &-with-virtual-scroll {
+        overflow-y: hidden;
+        .cdk-virtual-scroll-content-wrapper {
+            width: 100%;
+        }
+    }
 
     .loading-more {
         min-height: auto;
         text-align: center;
     }
 
-    .thy-option-item-group {
+    .thy-option-group-render {
         @include option.thy-option-common-layout();
     }
 
     .thy-option-item {
         @include option.thy-option();
-        &.hidden {
-            display: none;
-        }
     }
 
-    .thy-option-item-group {
+    .thy-option-group-render {
         flex-direction: column;
-
-        &.thy-select-option-group-hidden {
-            display: none;
-        }
+        height: 40px;
+        padding: 5px 0;
 
         .group-name {
             width: 100%;