@taiga-ui/core 5.0.0-rc.3 → 5.0.0-rc.4

package/fesm2022/taiga-ui-core-portals-dropdown.mjs

@@ -1,14 +1,14 @@
 import * as i0 from '@angular/core';
-import { Injectable, Directive, InjectionToken, Optional, Self, SkipSelf, inject, ChangeDetectorRef, effect, signal, INJECTOR, input, computed, TemplateRef, forwardRef, ChangeDetectionStrategy, Component, PLATFORM_ID, contentChild, ElementRef, model, ViewContainerRef } from '@angular/core';
+import { Injectable, Directive, InjectionToken, Optional, Self, SkipSelf, inject, ChangeDetectorRef, effect, signal, INJECTOR, input, TemplateRef, computed, forwardRef, ChangeDetectionStrategy, Component, contentChild, ElementRef, model, PLATFORM_ID, ViewContainerRef } from '@angular/core';
 import { outputFromObservable, takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import { EMPTY_CLIENT_RECT, TUI_TRUE_HANDLER, CHAR_ZERO_WIDTH_SPACE, CHAR_NO_BREAK_SPACE } from '@taiga-ui/cdk/constants';
 import * as i1 from '@taiga-ui/cdk/directives/active-zone';
 import { TuiActiveZone } from '@taiga-ui/cdk/directives/active-zone';
 import * as i2 from '@taiga-ui/cdk/directives/animated';
 import { TuiAnimated } from '@taiga-ui/cdk/directives/animated';
-import { tuiInjectElement, tuiGetActualTarget, tuiPointToClientRect, tuiIsElement, tuiIsElementEditable, tuiIsHTMLElement, tuiIsTextNode, tuiIsTextfield } from '@taiga-ui/cdk/utils/dom';
+import { tuiInjectElement, tuiGetActualTarget, tuiIsElement, tuiIsElementEditable, tuiIsHTMLElement, tuiPointToClientRect, tuiIsTextNode, tuiIsTextfield } from '@taiga-ui/cdk/utils/dom';
 import { tuiClamp } from '@taiga-ui/cdk/utils/math';
-import { tuiPx, tuiSetSignal, tuiIsString } from '@taiga-ui/cdk/utils/miscellaneous';
+import { tuiGenerateId, tuiPx, tuiSetSignal, tuiIsString } from '@taiga-ui/cdk/utils/miscellaneous';
 import { TuiDriverDirective, TuiPositionAccessor, tuiFallbackAccessor, TuiRectAccessor, tuiAsVehicle, tuiPositionAccessorFor, tuiRectAccessorFor, tuiAsDriver, tuiAsRectAccessor, TuiDriver, tuiAsPositionAccessor } from '@taiga-ui/core/classes';
 import { TuiScrollbar } from '@taiga-ui/core/components/scrollbar';
 import { TuiVisualViewportService, TuiPositionService } from '@taiga-ui/core/services';
@@ -16,16 +16,16 @@ import { TUI_VIEWPORT, TUI_DARK_MODE, TUI_SELECTION_STREAM } from '@taiga-ui/cor
 import { PolymorpheusComponent, PolymorpheusTemplate, PolymorpheusOutlet } from '@taiga-ui/polymorpheus';
 import { BehaviorSubject, Subject, distinctUntilChanged, throttleTime, takeWhile, map, merge, filter, EMPTY, switchMap, delay, startWith, takeUntil, fromEvent, of, tap, share, combineLatest } from 'rxjs';
 import { coerceArray } from '@angular/cdk/coercion';
-import { tuiZonefreeScheduler, tuiTypedFromEvent, tuiZoneOptimized, tuiIfMap, tuiCloseWatcher, tuiStopPropagation } from '@taiga-ui/cdk/observables';
+import { tuiZonefreeScheduler, tuiIfMap, tuiCloseWatcher, tuiTypedFromEvent, tuiStopPropagation, tuiZoneOptimized } from '@taiga-ui/cdk/observables';
 import { TuiPopupService } from '@taiga-ui/core/portals/popup';
 import { tuiCheckFixedPosition, tuiGetWordRange } from '@taiga-ui/core/utils/dom';
 import { tuiProvide, tuiCreateOptions, tuiDirectiveBinding } from '@taiga-ui/cdk/utils/di';
 import { tuiOverrideOptions, tuiIsEditingKey } from '@taiga-ui/core/utils/miscellaneous';
-import { isPlatformBrowser, DOCUMENT } from '@angular/common';
-import { WA_IS_TOUCH } from '@ng-web-apis/platform';
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
 import * as i1$1 from '@taiga-ui/cdk/directives/obscured';
 import { TuiObscured } from '@taiga-ui/cdk/directives/obscured';
 import { tuiIsFocusable, tuiGetClosestFocusable, tuiIsFocusedIn, tuiGetFocused } from '@taiga-ui/cdk/utils/focus';
+import { WA_IS_TOUCH } from '@ng-web-apis/platform';
 
 class TuiDropdownDriver extends BehaviorSubject {
     constructor() {
@@ -194,22 +194,25 @@ class TuiDropdownDirective {
                 this.toggle(false);
             }
         });
+        this.id = tuiGenerateId();
         this.ref = signal(null);
         this.el = tuiInjectElement();
         this.type = 'dropdown';
         this.component = new PolymorpheusComponent(inject(TUI_DROPDOWN_COMPONENT), inject(INJECTOR));
-        this.tuiDropdown = input();
-        this.content = computed((content = this.tuiDropdown()) => {
-            return content instanceof TemplateRef
+        this.content = input(null, {
+            alias: 'tuiDropdown',
+            transform: (content) => content instanceof TemplateRef
                 ? new PolymorpheusTemplate(content, this.cdr)
-                : content;
+                : content,
         });
     }
     get position() {
         return tuiCheckFixedPosition(this.el) ? 'fixed' : 'absolute';
     }
     ngAfterViewChecked() {
-        this.refresh$.next();
+        if (this.ref()) {
+            this.refresh$.next();
+        }
     }
     ngOnDestroy() {
         this.toggle(false);
@@ -226,12 +229,11 @@ class TuiDropdownDirective {
             this.ref.set(null);
             ref.destroy();
         }
-        // TODO: Remove in v5, only needed in Angular 16
-        this.cdr.markForCheck();
+        this.ref()?.location.nativeElement.setAttribute('id', this.id);
         this.drivers.forEach((driver) => driver?.next(show));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDropdownDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.18", type: TuiDropdownDirective, isStandalone: true, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: { tuiDropdown: { classPropertyName: "tuiDropdown", publicName: "tuiDropdown", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tui-dropdown-open": "ref()" } }, providers: [tuiAsVehicle(TuiDropdownDirective)], exportAs: ["tuiDropdown"], hostDirectives: [{ directive: TuiDropdownDriverDirective }, { directive: TuiDropdownPosition, outputs: ["tuiDropdownDirectionChange", "tuiDropdownDirectionChange"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.18", type: TuiDropdownDirective, isStandalone: true, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: { content: { classPropertyName: "content", publicName: "tuiDropdown", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tui-dropdown-open": "ref()" } }, providers: [tuiAsVehicle(TuiDropdownDirective)], exportAs: ["tuiDropdown"], hostDirectives: [{ directive: TuiDropdownDriverDirective }, { directive: TuiDropdownPosition, outputs: ["tuiDropdownDirectionChange", "tuiDropdownDirectionChange"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDropdownDirective, decorators: [{
             type: Directive,
@@ -250,6 +252,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 }]
         }] });
 
+const MAX_WIDTH_GAP = 16; // 8px min gap from each side
 /**
  * @description:
  * This component is used to show template in a portal
@@ -283,6 +286,7 @@ class TuiDropdownComponent {
         const { left = 0, top = 0 } = this.position === 'fixed' ? {} : parent;
         const rect = this.accessor.getClientRect();
         const viewport = this.viewport.getClientRect();
+        const zoom = this.directive.el.currentCSSZoom || 1;
         const above = rect.top - viewport.top - 2 * offset;
         const below = viewport.top + viewport.height - y - offset;
         const available = y > rect.bottom ? below : above;
@@ -293,12 +297,12 @@ class TuiDropdownComponent {
         x -= left;
         return {
             position: this.position,
-            top: tuiPx(Math.round(Math.max(y, offset - top))),
-            left: tuiPx(Math.round(x)),
-            maxHeight: tuiPx(Math.round(height)),
-            width: limitWidth === 'fixed' ? tuiPx(Math.round(rect.width)) : '',
-            minWidth: limitWidth === 'min' ? tuiPx(Math.round(rect.width)) : '',
-            maxWidth: tuiPx(Math.round(viewport.width) - 16), // 8px min gap from each side
+            top: tuiPx(Math.round(Math.max(y, offset - top) / zoom)),
+            left: tuiPx(Math.round(x / zoom)),
+            maxHeight: tuiPx(Math.round(height / zoom)),
+            width: limitWidth === 'fixed' ? tuiPx(Math.round(rect.width / zoom)) : '',
+            minWidth: limitWidth === 'min' ? tuiPx(Math.round(rect.width / zoom)) : '',
+            maxWidth: tuiPx(Math.round(viewport.width / zoom) - MAX_WIDTH_GAP),
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -320,88 +324,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                     }, template: "<tui-scrollbar class=\"t-scroll\">\n    <div\n        *polymorpheusOutlet=\"directive.content() as text; context: {$implicit: close}\"\n        class=\"t-primitive\"\n    >\n        {{ text }}\n    </div>\n</tui-scrollbar>\n", styles: [":host{position:absolute;display:flex;box-shadow:var(--tui-shadow-medium);color:var(--tui-text-primary);background:var(--tui-background-elevation-3);border-radius:var(--tui-radius-m);overflow:hidden;border:1px solid var(--tui-border-normal);box-sizing:border-box;isolation:isolate;pointer-events:auto;--tui-from: translateY(-1rem)}:host:has(tui-data-list[data-size=l]){border-radius:var(--tui-radius-l)}:host.tui-enter,:host.tui-leave{animation-name:tuiFade,tuiSlide}:host:not([style*=top]){visibility:hidden}.t-scroll{flex-grow:1;max-inline-size:calc(100% + 2px);inline-size:max-content;overscroll-behavior:none;margin:-1px}.t-primitive{padding:1rem}\n"] }]
         }] });
 
-class TuiDropdownContent {
-    constructor() {
-        this.directive = inject(TuiDropdownDirective);
-        tuiSetSignal(this.directive.tuiDropdown, inject(TemplateRef));
-        if (isPlatformBrowser(inject(PLATFORM_ID)) &&
-            this.directive.el.matches(':focus-within')) {
-            this.directive.toggle(true);
-        }
-    }
-    ngOnDestroy() {
-        tuiSetSignal(this.directive.tuiDropdown, null);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDropdownContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: TuiDropdownContent, isStandalone: true, selector: "ng-template[tuiDropdown]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDropdownContent, decorators: [{
-            type: Directive,
-            args: [{ selector: 'ng-template[tuiDropdown]' }]
-        }], ctorParameters: () => [] });
-
-class TuiDropdownContext extends TuiRectAccessor {
-    constructor() {
-        super(...arguments);
-        this.isTouch = inject(WA_IS_TOUCH);
-        this.currentRect = EMPTY_CLIENT_RECT;
-        this.userSelect = computed(() => (this.isTouch() ? 'none' : null));
-        this.activeZone = inject(TuiActiveZone);
-        this.driver = inject(TuiDropdownDriver);
-        this.doc = inject(DOCUMENT);
-        this.sub = merge(tuiTypedFromEvent(this.doc, 'pointerdown'), tuiTypedFromEvent(this.doc, 'keydown').pipe(filter(({ key }) => key === 'Escape')), tuiTypedFromEvent(this.doc, 'contextmenu', { capture: true }))
-            .pipe(filter((event) => this.driver.value &&
-            !this.activeZone.contains(tuiGetActualTarget(event))), tuiZoneOptimized(), takeUntilDestroyed())
-            .subscribe(() => {
-            this.driver.next(false);
-            this.currentRect = EMPTY_CLIENT_RECT;
-        });
-        this.type = 'dropdown';
-    }
-    getClientRect() {
-        return this.currentRect;
-    }
-    onContextMenu(x, y) {
-        this.currentRect = tuiPointToClientRect(x, y);
-        this.driver.next(true);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDropdownContext, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: TuiDropdownContext, isStandalone: true, selector: "[tuiDropdownContext]", host: { listeners: { "longtap": "onContextMenu($event.detail.clientX, $event.detail.clientY)" }, properties: { "style.user-select": "userSelect()", "style.-webkit-user-select": "userSelect()", "style.-webkit-touch-callout": "userSelect()" } }, providers: [
-            TuiActiveZone,
-            TuiDropdownDriver,
-            tuiAsDriver(TuiDropdownDriver),
-            tuiAsRectAccessor(TuiDropdownContext),
-        ], usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDropdownContext, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[tuiDropdownContext]',
-                    providers: [
-                        TuiActiveZone,
-                        TuiDropdownDriver,
-                        tuiAsDriver(TuiDropdownDriver),
-                        tuiAsRectAccessor(TuiDropdownContext),
-                    ],
-                    host: {
-                        '[style.user-select]': 'userSelect()',
-                        '[style.-webkit-user-select]': 'userSelect()',
-                        '[style.-webkit-touch-callout]': 'userSelect()',
-                        '(longtap)': 'onContextMenu($event.detail.clientX, $event.detail.clientY)',
-                    },
-                }]
-        }] });
-
-/** Default values for hint options */
-const TUI_DROPDOWN_HOVER_DEFAULT_OPTIONS = {
-    showDelay: 200,
-    hideDelay: 500,
-};
-/**
- * Default parameters for dropdown hover directive
- */
-const [TUI_DROPDOWN_HOVER_OPTIONS, tuiDropdownHoverOptionsProvider] = tuiCreateOptions(TUI_DROPDOWN_HOVER_DEFAULT_OPTIONS);
-
 class TuiDropdownClose {
     constructor() {
         this.el = tuiInjectElement();
@@ -516,7 +438,7 @@ class TuiDropdownOpen {
         focusable?.focus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDropdownOpen, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.18", type: TuiDropdownOpen, isStandalone: true, selector: "[tuiDropdown][tuiDropdownAuto],[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: { enabled: { classPropertyName: "enabled", publicName: "tuiDropdownEnabled", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "tuiDropdownOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "tuiDropdownOpenChange" }, host: { listeners: { "click": "onClick($event.target)", "keydown.arrowDown": "onArrow($event, false)", "keydown.arrowUp": "onArrow($event, true)", "tuiActiveZoneChange": "0", "tuiDropdownClose": "toggle(false)" } }, providers: [TuiDropdownDriver, tuiAsDriver(TuiDropdownDriver)], queries: [{ propertyName: "dropdownHost", first: true, predicate: ["tuiDropdownHost"], descendants: true, read: ElementRef, isSignal: true }], hostDirectives: [{ directive: i1$1.TuiObscured }, { directive: TuiDropdownClose, outputs: ["tuiDropdownClose", "tuiDropdownClose"] }, { directive: i1.TuiActiveZone, inputs: ["tuiActiveZoneParent", "tuiActiveZoneParent"], outputs: ["tuiActiveZoneChange", "tuiActiveZoneChange"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.18", type: TuiDropdownOpen, isStandalone: true, selector: "[tuiDropdown][tuiDropdownAuto],[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: { enabled: { classPropertyName: "enabled", publicName: "tuiDropdownEnabled", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "tuiDropdownOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "tuiDropdownOpenChange" }, host: { listeners: { "click": "onClick($event.target)", "keydown.arrowDown": "onArrow($event, false)", "keydown.arrowUp": "onArrow($event, true)", "tuiActiveZoneChange": "0", "tuiDropdownClose": "toggle(false)" } }, providers: [TuiDropdownDriver, tuiAsDriver(TuiDropdownDriver)], queries: [{ propertyName: "dropdownHost", first: true, predicate: ["tuiDropdownHost"], descendants: true, read: ElementRef, isSignal: true }], hostDirectives: [{ directive: i1$1.TuiObscured }, { directive: i0.forwardRef(() => TuiDropdownA11y), inputs: ["tuiDropdownRole", "tuiDropdownRole"] }, { directive: TuiDropdownClose, outputs: ["tuiDropdownClose", "tuiDropdownClose"] }, { directive: i1.TuiActiveZone, inputs: ["tuiActiveZoneParent", "tuiActiveZoneParent"], outputs: ["tuiActiveZoneChange", "tuiActiveZoneChange"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDropdownOpen, decorators: [{
             type: Directive,
@@ -525,10 +447,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                     providers: [TuiDropdownDriver, tuiAsDriver(TuiDropdownDriver)],
                     hostDirectives: [
                         TuiObscured,
-                        {
-                            directive: TuiDropdownClose,
-                            outputs: ['tuiDropdownClose'],
-                        },
+                        { directive: forwardRef(() => TuiDropdownA11y), inputs: ['tuiDropdownRole'] },
+                        { directive: TuiDropdownClose, outputs: ['tuiDropdownClose'] },
                         {
                             directive: TuiActiveZone,
                             inputs: ['tuiActiveZoneParent'],
@@ -546,6 +466,118 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 }]
         }] });
 
+class TuiDropdownA11y {
+    constructor() {
+        this.el = tuiInjectElement();
+        this.dropdown = inject(TuiDropdownDirective);
+        this.open = inject(forwardRef(() => TuiDropdownOpen), { self: true, optional: true });
+        this.tuiDropdownRole = input('listbox');
+        this.sync = effect(() => {
+            const content = this.dropdown.content();
+            const dropdown = this.dropdown.ref();
+            const host = this.open?.host || this.el;
+            host.setAttribute('aria-expanded', String(!!dropdown));
+            host.setAttribute('aria-controls', this.dropdown.id);
+            host.setAttribute('aria-haspopup', this.tuiDropdownRole());
+            dropdown?.location.nativeElement.setAttribute('role', this.tuiDropdownRole());
+            if (content) {
+                return;
+            }
+            host.removeAttribute('aria-expanded');
+            host.removeAttribute('aria-controls');
+            host.removeAttribute('aria-haspopup');
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDropdownA11y, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.18", type: TuiDropdownA11y, isStandalone: true, selector: "[tuiDropdownA11y]", inputs: { tuiDropdownRole: { classPropertyName: "tuiDropdownRole", publicName: "tuiDropdownRole", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDropdownA11y, decorators: [{
+            type: Directive,
+            args: [{ selector: '[tuiDropdownA11y]' }]
+        }] });
+
+class TuiDropdownContent {
+    constructor() {
+        this.directive = inject(TuiDropdownDirective);
+        tuiSetSignal(this.directive.content, inject(TemplateRef));
+        if (isPlatformBrowser(inject(PLATFORM_ID)) &&
+            this.directive.el.matches(':focus-within')) {
+            this.directive.toggle(true);
+        }
+    }
+    ngOnDestroy() {
+        tuiSetSignal(this.directive.content, null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDropdownContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: TuiDropdownContent, isStandalone: true, selector: "ng-template[tuiDropdown]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDropdownContent, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[tuiDropdown]' }]
+        }], ctorParameters: () => [] });
+
+class TuiDropdownContext extends TuiRectAccessor {
+    constructor() {
+        super(...arguments);
+        this.isTouch = inject(WA_IS_TOUCH);
+        this.currentRect = EMPTY_CLIENT_RECT;
+        this.userSelect = computed(() => (this.isTouch() ? 'none' : null));
+        this.activeZone = inject(TuiActiveZone);
+        this.driver = inject(TuiDropdownDriver);
+        this.doc = inject(DOCUMENT);
+        this.sub = merge(tuiTypedFromEvent(this.doc, 'pointerdown'), tuiTypedFromEvent(this.doc, 'keydown').pipe(filter(({ key }) => key === 'Escape')), tuiTypedFromEvent(this.doc, 'contextmenu', { capture: true }))
+            .pipe(filter((event) => this.driver.value &&
+            !this.activeZone.contains(tuiGetActualTarget(event))), tuiZoneOptimized(), takeUntilDestroyed())
+            .subscribe(() => {
+            this.driver.next(false);
+            this.currentRect = EMPTY_CLIENT_RECT;
+        });
+        this.type = 'dropdown';
+    }
+    getClientRect() {
+        return this.currentRect;
+    }
+    onContextMenu(x, y) {
+        this.currentRect = tuiPointToClientRect(x, y);
+        this.driver.next(true);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDropdownContext, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: TuiDropdownContext, isStandalone: true, selector: "[tuiDropdownContext]", host: { listeners: { "longtap": "onContextMenu($event.detail.clientX, $event.detail.clientY)" }, properties: { "style.user-select": "userSelect()", "style.-webkit-user-select": "userSelect()", "style.-webkit-touch-callout": "userSelect()" } }, providers: [
+            TuiActiveZone,
+            TuiDropdownDriver,
+            tuiAsDriver(TuiDropdownDriver),
+            tuiAsRectAccessor(TuiDropdownContext),
+        ], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDropdownContext, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tuiDropdownContext]',
+                    providers: [
+                        TuiActiveZone,
+                        TuiDropdownDriver,
+                        tuiAsDriver(TuiDropdownDriver),
+                        tuiAsRectAccessor(TuiDropdownContext),
+                    ],
+                    host: {
+                        '[style.user-select]': 'userSelect()',
+                        '[style.-webkit-user-select]': 'userSelect()',
+                        '[style.-webkit-touch-callout]': 'userSelect()',
+                        '(longtap)': 'onContextMenu($event.detail.clientX, $event.detail.clientY)',
+                    },
+                }]
+        }] });
+
+/** Default values for hint options */
+const TUI_DROPDOWN_HOVER_DEFAULT_OPTIONS = {
+    showDelay: 200,
+    hideDelay: 500,
+};
+/**
+ * Default parameters for dropdown hover directive
+ */
+const [TUI_DROPDOWN_HOVER_OPTIONS, tuiDropdownHoverOptionsProvider] = tuiCreateOptions(TUI_DROPDOWN_HOVER_DEFAULT_OPTIONS);
+
 class TuiDropdownHover extends TuiDriver {
     constructor() {
         super((subscriber) => this.stream$.subscribe(subscriber));
@@ -683,13 +715,20 @@ class TuiDropdownSelection extends TuiDriver {
             inject(TUI_SELECTION_STREAM).pipe(map(() => this.getRange()), filter((range) => this.isValid(range)), distinctUntilChanged((x, y) => x.startOffset === y.startOffset &&
                 x.endOffset === y.endOffset &&
                 x.commonAncestorContainer === y.commonAncestorContainer)),
-        ]).pipe(map(([handler, range]) => {
-            const contained = this.el.contains(range.commonAncestorContainer);
+            merge(fromEvent(this.el, 'scroll', { passive: true, capture: true })).pipe(throttleTime(16, undefined, { leading: false, trailing: true }), startWith(0)),
+        ]).pipe(tap(([, range]) => {
             this.range =
-                contained && tuiIsTextNode(range.commonAncestorContainer)
+                this.el.contains(range.commonAncestorContainer) &&
+                    tuiIsTextNode(range.commonAncestorContainer)
                     ? range
                     : this.range;
-            return (contained && handler(this.range)) || this.inDropdown(range);
+        }), map(([handler, range]) => {
+            const contained = this.el.contains(range.commonAncestorContainer);
+            const valid = contained && handler(this.range);
+            const visible = valid || this.inDropdown(range);
+            const active = tuiGetFocused(this.doc);
+            const textfield = active && tuiIsTextfield(active) && this.el.contains(active);
+            return visible && textfield ? this.isCaretVisible(this.range) : visible;
         }));
         this.range = isPlatformBrowser(inject(PLATFORM_ID))
             ? new Range()
@@ -790,6 +829,18 @@ class TuiDropdownSelection extends TuiDriver {
         this.ghost = ghost;
         return ghost;
     }
+    isCaretVisible(range) {
+        const caret = range.getBoundingClientRect();
+        const host = this.ghostHost.getBoundingClientRect();
+        const styles = getComputedStyle(this.ghostHost);
+        const fontSize = parseFloat(styles.fontSize) || 16;
+        const lineHeight = parseFloat(styles.lineHeight) || fontSize * 1.2;
+        const visibleTop = Math.max(caret.top, host.top);
+        const visibleBottom = Math.min(caret.bottom, host.bottom);
+        const visibleHeight = Math.max(0, visibleBottom - visibleTop);
+        const threshold = lineHeight * 0.5;
+        return visibleHeight >= threshold;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDropdownSelection, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.18", type: TuiDropdownSelection, isStandalone: true, selector: "[tuiDropdownSelection]", inputs: { tuiDropdownSelection: { classPropertyName: "tuiDropdownSelection", publicName: "tuiDropdownSelection", isSignal: true, isRequired: false, transformFunction: null }, tuiDropdownSelectionPosition: { classPropertyName: "tuiDropdownSelectionPosition", publicName: "tuiDropdownSelectionPosition", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             tuiAsDriver(TuiDropdownSelection),
@@ -812,6 +863,7 @@ const TuiDropdown = [
     TuiDropdownDriverDirective,
     TuiDropdownDirective,
     TuiDropdownComponent,
+    TuiDropdownA11y,
     TuiDropdownOpen,
     TuiDropdownManual,
     TuiDropdownHover,
@@ -823,7 +875,7 @@ const TuiDropdown = [
 ];
 
 function tuiDropdown(value) {
-    return tuiDirectiveBinding(TuiDropdownDirective, 'tuiDropdown', value, {});
+    return tuiDirectiveBinding(TuiDropdownDirective, 'content', value, {});
 }
 function tuiDropdownEnabled(value) {
     return tuiDirectiveBinding(TuiDropdownOpen, 'enabled', value, {});
@@ -877,5 +929,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { TUI_DROPDOWN_COMPONENT, TUI_DROPDOWN_CONTEXT, TUI_DROPDOWN_DEFAULT_OPTIONS, TUI_DROPDOWN_HOVER_DEFAULT_OPTIONS, TUI_DROPDOWN_HOVER_OPTIONS, TUI_DROPDOWN_OPTIONS, TuiDropdown, TuiDropdownAuto, TuiDropdownClose, TuiDropdownComponent, TuiDropdownContent, TuiDropdownContext, TuiDropdownDirective, TuiDropdownDriver, TuiDropdownDriverDirective, TuiDropdownFixed, TuiDropdownHover, TuiDropdownManual, TuiDropdownOpen, TuiDropdownOptionsDirective, TuiDropdownPosition, TuiDropdownPositionSided, TuiDropdownSelection, TuiWithDropdownOpen, tuiDropdown, tuiDropdownEnabled, tuiDropdownHoverOptionsProvider, tuiDropdownOptionsProvider };
+export { TUI_DROPDOWN_COMPONENT, TUI_DROPDOWN_CONTEXT, TUI_DROPDOWN_DEFAULT_OPTIONS, TUI_DROPDOWN_HOVER_DEFAULT_OPTIONS, TUI_DROPDOWN_HOVER_OPTIONS, TUI_DROPDOWN_OPTIONS, TuiDropdown, TuiDropdownA11y, TuiDropdownAuto, TuiDropdownClose, TuiDropdownComponent, TuiDropdownContent, TuiDropdownContext, TuiDropdownDirective, TuiDropdownDriver, TuiDropdownDriverDirective, TuiDropdownFixed, TuiDropdownHover, TuiDropdownManual, TuiDropdownOpen, TuiDropdownOptionsDirective, TuiDropdownPosition, TuiDropdownPositionSided, TuiDropdownSelection, TuiWithDropdownOpen, tuiDropdown, tuiDropdownEnabled, tuiDropdownHoverOptionsProvider, tuiDropdownOptionsProvider };
 //# sourceMappingURL=taiga-ui-core-portals-dropdown.mjs.map