fix(core): Dialogs fix page scrolling under dialogs (#7384)

Signed-off-by: waterplea <[email protected]>
Co-authored-by: taiga-family-bot <[email protected]>

projects/addon-mobile/components/sheet-dialog/sheet-dialog.style.less

@@ -1,12 +1,13 @@
 @import '@taiga-ui/core/styles/taiga-ui-local';
 
 :host {
-    .fullsize(fixed, inset);
+    .scrollbar-hidden();
 
-    right: -1rem;
     display: flex;
+    width: 100%;
+    height: 100%;
     flex-direction: column;
-    clip-path: inset(0 1rem 0 0 round 0.75rem 0.75rem 0 0);
+    clip-path: inset(0 0 0 0 round 0.75rem 0.75rem 0 0);
     font: var(--tui-font-text-m);
     overflow-y: scroll;
     scroll-snap-type: y mandatory;
@@ -38,7 +39,6 @@
 
 .t-sheet {
     box-shadow: var(--tui-shadow);
-    width: calc(100% - 1rem);
     border-radius: 0.75rem 0.75rem 0 0;
     padding: 0 1rem;
     margin-top: auto;

projects/addon-mobile/components/sheet/components/sheet/sheet.style.less

@@ -16,6 +16,7 @@
     margin-left: -1rem;
     transform: scaleX(-1);
     clip-path: inset(0 1rem 0 0 round 0.75rem 0.75rem 0 0);
+    overscroll-behavior: none;
 
     &._stuck {
         scroll-snap-type: none;

projects/addon-mobile/components/sheet/components/sheets-host/sheets-host.template.html

@@ -12,7 +12,6 @@
     (click.self)="close(item)"
 >
     <tui-sheet
-        tuiOverscroll="all"
         tuiScrollRef
         [item]="item"
         [style.height.px]="((height$ | async) || 0) - item.offset"

projects/addon-mobile/components/sheet/sheet.module.ts

@@ -1,6 +1,6 @@
 import {CommonModule} from '@angular/common';
 import {NgModule, NO_ERRORS_SCHEMA} from '@angular/core';
-import {TuiLetDirective, TuiOverscrollModule} from '@taiga-ui/cdk';
+import {TuiLetDirective} from '@taiga-ui/cdk';
 import {TuiButtonDirective, TuiScrollbarComponent} from '@taiga-ui/core';
 import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
 
@@ -24,7 +24,6 @@ import {TuiSheetDirective} from './sheet.directive';
         PolymorpheusModule,
         TuiLetDirective,
         TuiButtonDirective,
-        TuiOverscrollModule,
         TuiScrollbarComponent,
     ],
     declarations: [

projects/addon-preview/components/preview-dialog/preview-dialog.component.ts

@@ -1,27 +1,42 @@
 import {
     ChangeDetectionStrategy,
     Component,
-    HostListener,
     inject,
     ViewEncapsulation,
 } from '@angular/core';
 import type {TuiPopover} from '@taiga-ui/cdk';
-import {tuiSlideInTop} from '@taiga-ui/core';
+import {
+    TUI_ANIMATIONS_SPEED,
+    tuiFadeIn,
+    tuiGetDuration,
+    tuiSlideInTop,
+} from '@taiga-ui/core';
 import {POLYMORPHEUS_CONTEXT} from '@tinkoff/ng-polymorpheus';
 
 @Component({
     selector: 'tui-preview-dialog',
-    templateUrl: './preview-dialog.template.html',
+    template: `
+        <ng-container *polymorpheusOutlet="context.content as text; context: context">
+            {{ text }}
+        </ng-container>
+    `,
     styleUrls: ['./preview-dialog.style.less'],
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
-    animations: [tuiSlideInTop],
+    animations: [tuiSlideInTop, tuiFadeIn],
+    host: {
+        '(document:keydown.esc)': 'context.$implicit.complete()',
+        '[@tuiSlideInTop]': 'animation',
+        '[@tuiFadeIn]': 'animation',
+    },
 })
 export class TuiPreviewDialogComponent {
     protected readonly context = inject<TuiPopover<void, void>>(POLYMORPHEUS_CONTEXT);
-
-    @HostListener('document:keydown.esc')
-    protected onKeyDownEsc(): void {
-        this.context.$implicit.complete();
-    }
+    protected readonly animation = {
+        value: '',
+        params: {
+            start: '100vh',
+            duration: tuiGetDuration(inject(TUI_ANIMATIONS_SPEED)),
+        },
+    };
 }

projects/addon-preview/components/preview-dialog/preview-dialog.style.less

@@ -1,7 +1,6 @@
 @import '@taiga-ui/core/styles/taiga-ui-local';
 
-.t-dialog-content {
-    position: fixed;
+tui-preview-dialog {
     width: 100%;
     height: 100%;
 }

projects/addon-preview/components/preview/preview-action/preview-action.directive.ts

@@ -10,7 +10,7 @@ import {tuiButtonOptionsProvider} from '@taiga-ui/core';
         }),
     ],
     host: {
-        '[style.border-radius.%]': '100',
+        '[style.border-radius.rem]': '100',
     },
 })
 export class TuiPreviewActionDirective {}

projects/cdk/directives/focus-trap/focus-trap.directive.ts

@@ -1,6 +1,6 @@
 import {DOCUMENT} from '@angular/common';
 import type {OnDestroy} from '@angular/core';
-import {Directive, ElementRef, HostListener, inject, Renderer2} from '@angular/core';
+import {Directive, ElementRef, HostListener, inject} from '@angular/core';
 import {tuiContainsOrAfter, tuiIsHTMLElement} from '@taiga-ui/cdk/utils/dom';
 import {
     tuiBlurNativeFocused,
@@ -9,6 +9,7 @@ import {
 } from '@taiga-ui/cdk/utils/focus';
 
 @Directive({
+    standalone: true,
     selector: '[tuiFocusTrap]',
     host: {
         tabIndex: '0',
@@ -17,7 +18,6 @@ import {
 export class TuiFocusTrapDirective implements OnDestroy {
     private readonly doc = inject(DOCUMENT);
     private readonly el: HTMLElement = inject(ElementRef).nativeElement;
-    private readonly renderer = inject(Renderer2);
     private readonly activeElement = tuiGetNativeFocused(this.doc);
 
     constructor() {
@@ -48,22 +48,16 @@ export class TuiFocusTrapDirective implements OnDestroy {
 
     @HostListener('blur')
     protected onBlur(): void {
-        this.renderer.removeAttribute(this.el, 'tabIndex');
+        this.el.removeAttribute('tabIndex');
     }
 
     @HostListener('window:focusin.silent', ['$event.target'])
     protected onFocusIn(node: Node): void {
-        if (tuiContainsOrAfter(this.el, node)) {
-            return;
-        }
-
-        const focusable = tuiGetClosestFocusable({
-            initial: this.el,
-            root: this.el,
-        });
-
-        if (focusable) {
-            focusable.focus();
+        if (!tuiContainsOrAfter(this.el, node)) {
+            tuiGetClosestFocusable({
+                initial: this.el,
+                root: this.el,
+            })?.focus();
         }
     }
 }

projects/cdk/directives/focus-trap/index.ts

@@ -1,2 +1 @@
 export * from './focus-trap.directive';
-export * from './focus-trap.module';

projects/cdk/directives/index.ts

@@ -16,7 +16,6 @@ export * from '@taiga-ui/cdk/directives/let';
 export * from '@taiga-ui/cdk/directives/media';
 export * from '@taiga-ui/cdk/directives/native-validator';
 export * from '@taiga-ui/cdk/directives/obscured';
-export * from '@taiga-ui/cdk/directives/overscroll';
 export * from '@taiga-ui/cdk/directives/pan';
 export * from '@taiga-ui/cdk/directives/platform';
 export * from '@taiga-ui/cdk/directives/popover';

projects/cdk/schematics/ng-update/v4/steps/constants/identifiers-to-replace.ts

@@ -9,6 +9,10 @@ export const IDENTIFIERS_TO_REPLACE: ReplacementIdentifierMulti[] = [
         from: {name: 'TuiAutoFocusModule', moduleSpecifier: '@taiga-ui/cdk'},
         to: {name: 'TuiAutoFocusDirective', moduleSpecifier: '@taiga-ui/cdk'},
     },
+    {
+        from: {name: 'TuiFocusTrapModule', moduleSpecifier: '@taiga-ui/cdk'},
+        to: {name: 'TuiFocusTrapDirective', moduleSpecifier: '@taiga-ui/cdk'},
+    },
     {
         from: {name: 'ALWAYS_TRUE_HANDLER', moduleSpecifier: '@taiga-ui/cdk'},
         to: {name: 'TUI_TRUE_HANDLER', moduleSpecifier: '@taiga-ui/cdk'},

projects/cdk/types/index.ts

@@ -8,7 +8,6 @@ export * from './input-mode';
 export * from './input-type';
 export * from './mapper';
 export * from './matcher';
-export * from './overscroll-mode';
 export * from './platform';
 export * from './rounding';
 export * from './safe-html';