fix(core): fix custom position accessors (#7151)

projects/core/abstract/accessors.ts

@@ -0,0 +1,8 @@
+// TODO: Drop any
+export function tuiFallbackAccessor<T extends {type: string} = any>(
+    type: string,
+): (accessors: readonly T[] | null, fallback: T) => T {
+    return (accessors, fallback) =>
+        accessors?.find(accessor => accessor !== fallback && accessor.type === type) ||
+        fallback;
+}

projects/core/abstract/index.ts

@@ -1,5 +1,6 @@
 export * from './abstract-driver.directive';
 export * from './abstract-textfield-host';
+export * from './accessors';
 export * from './driver';
 export * from './position-accessor';
 export * from './rect-accessor';

projects/core/abstract/position-accessor.ts

@@ -1,18 +1,25 @@
-import {ExistingProvider, FactoryProvider, SkipSelf, Type} from '@angular/core';
+import {ExistingProvider, FactoryProvider, Optional, SkipSelf, Type} from '@angular/core';
 import {TuiPoint} from '@taiga-ui/core/types';
 
+import {tuiFallbackAccessor} from './accessors';
+
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export abstract class TuiPositionAccessor {
     abstract readonly type: string;
     abstract getPosition(rect: ClientRect): TuiPoint;
 }
 
-export function tuiPositionAccessorFor(type: string): FactoryProvider {
+// TODO: Make fallback required
+export function tuiPositionAccessorFor(
+    type: string,
+    fallback?: Type<TuiPositionAccessor>,
+): FactoryProvider {
     return {
         provide: TuiPositionAccessor,
-        deps: [[new SkipSelf(), TuiPositionAccessor]],
-        useFactory: (accessors: readonly TuiPositionAccessor[]) =>
-            accessors.find(accessor => accessor.type === type),
+        deps: fallback
+            ? [[new SkipSelf(), new Optional(), TuiPositionAccessor], fallback]
+            : [[new SkipSelf(), new Optional(), TuiPositionAccessor]],
+        useFactory: tuiFallbackAccessor<TuiPositionAccessor>(type),
     };
 }
 

projects/core/abstract/rect-accessor.ts

@@ -1,4 +1,6 @@
-import {ExistingProvider, FactoryProvider, SkipSelf, Type} from '@angular/core';
+import {ExistingProvider, FactoryProvider, Optional, SkipSelf, Type} from '@angular/core';
+
+import {tuiFallbackAccessor} from './accessors';
 
 // TODO: Rename to getBoundingClientRect to match the DOM API
 // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -13,18 +15,12 @@ export function tuiRectAccessorFor(
 ): FactoryProvider {
     return {
         provide: TuiRectAccessor,
-        deps: [[new SkipSelf(), TuiRectAccessor], fallback],
-        useFactory: tuiFallbackRectAccessor(type),
+        deps: [[new SkipSelf(), new Optional(), TuiRectAccessor], fallback],
+        useFactory: tuiFallbackAccessor<TuiRectAccessor>(type),
     };
 }
 
-export function tuiFallbackRectAccessor(
-    type: string,
-): (accessors: readonly TuiRectAccessor[], fallback: TuiRectAccessor) => TuiRectAccessor {
-    return (accessors, fallback) =>
-        accessors.find(accessor => accessor !== fallback && accessor.type === type) ||
-        fallback;
-}
+export const tuiFallbackRectAccessor = tuiFallbackAccessor;
 
 export function tuiAsRectAccessor(useExisting: Type<TuiRectAccessor>): ExistingProvider {
     return {

projects/core/directives/dropdown/dropdown-position.directive.ts

@@ -1,7 +1,6 @@
 import {Directive, Inject} from '@angular/core';
 import {EMPTY_CLIENT_RECT, tuiPure} from '@taiga-ui/cdk';
 import {
-    tuiAsPositionAccessor,
     tuiFallbackRectAccessor,
     TuiPositionAccessor,
     TuiRectAccessor,
@@ -13,8 +12,7 @@ import {TuiDropdownDirective} from './dropdown.directive';
 import {TUI_DROPDOWN_OPTIONS, TuiDropdownOptions} from './dropdown-options.directive';
 
 @Directive({
-    selector: '[tuiDropdown]:not([tuiDropdownCustomPosition]):not([tuiDropdownSided])',
-    providers: [tuiAsPositionAccessor(TuiDropdownPositionDirective)],
+    selector: '[tuiDropdown]',
 })
 export class TuiDropdownPositionDirective extends TuiPositionAccessor {
     private previous?: TuiVerticalDirection;
@@ -78,6 +76,9 @@ export class TuiDropdownPositionDirective extends TuiPositionAccessor {
 
     @tuiPure
     get accessor(): TuiRectAccessor {
-        return tuiFallbackRectAccessor('dropdown')(this.accessors, this.directive);
+        return tuiFallbackRectAccessor<TuiRectAccessor>('dropdown')(
+            this.accessors,
+            this.directive,
+        );
     }
 }

projects/core/directives/dropdown/dropdown.component.ts

@@ -25,6 +25,7 @@ import {map, takeUntil} from 'rxjs/operators';
 import {TuiDropdownDirective} from './dropdown.directive';
 import {TuiDropdownHoverDirective} from './dropdown-hover.directive';
 import {TUI_DROPDOWN_OPTIONS, TuiDropdownOptions} from './dropdown-options.directive';
+import {TuiDropdownPositionDirective} from './dropdown-position.directive';
 
 /**
  * @description:
@@ -41,7 +42,7 @@ import {TUI_DROPDOWN_OPTIONS, TuiDropdownOptions} from './dropdown-options.direc
     providers: [
         TuiDestroyService,
         TuiPositionService,
-        tuiPositionAccessorFor('dropdown'),
+        tuiPositionAccessorFor('dropdown', TuiDropdownPositionDirective),
         tuiRectAccessorFor('dropdown', TuiDropdownDirective),
         MODE_PROVIDER,
     ],

projects/core/directives/hint/hint-position.directive.ts

@@ -1,7 +1,6 @@
 import {Directive, Inject, Input} from '@angular/core';
 import {EMPTY_CLIENT_RECT, tuiPure} from '@taiga-ui/cdk';
 import {
-    tuiAsPositionAccessor,
     tuiFallbackRectAccessor,
     TuiPositionAccessor,
     TuiRectAccessor,
@@ -19,8 +18,7 @@ const TOP = 0;
 const LEFT = 1;
 
 @Directive({
-    selector: '[tuiHint]:not([tuiHintCustomPosition]):not(ng-container):not(ng-template)',
-    providers: [tuiAsPositionAccessor(TuiHintPositionDirective)],
+    selector: '[tuiHint]:not(ng-container):not(ng-template)',
 })
 export class TuiHintPositionDirective extends TuiPositionAccessor {
     private readonly points: Record<TuiHintDirection, [number, number]> =
@@ -89,7 +87,10 @@ export class TuiHintPositionDirective extends TuiPositionAccessor {
 
     @tuiPure
     private get accessor(): TuiRectAccessor | undefined {
-        return tuiFallbackRectAccessor('hint')(this.accessors, this.directive);
+        return tuiFallbackRectAccessor<TuiRectAccessor>('hint')(
+            this.accessors,
+            this.directive,
+        );
     }
 
     private get fallback(): TuiHintDirection {

projects/core/directives/hint/hint.component.ts

@@ -37,6 +37,7 @@ import {map, takeUntil} from 'rxjs/operators';
 import {TuiHintDirective} from './hint.directive';
 import {TuiHintHoverDirective} from './hint-hover.directive';
 import {TuiHintPointerDirective} from './hint-pointer.directive';
+import {TuiHintPositionDirective} from './hint-position.directive';
 
 const GAP = 4;
 
@@ -55,7 +56,7 @@ const GAP = 4;
         TuiDestroyService,
         TuiPositionService,
         TuiHoveredService,
-        tuiPositionAccessorFor('hint'),
+        tuiPositionAccessorFor('hint', TuiHintPositionDirective),
         tuiRectAccessorFor('hint', TuiHintDirective),
     ],
     animations: [tuiFadeIn],

projects/kit/components/line-clamp/line-clamp-box.component.ts

@@ -4,6 +4,7 @@ import {
     tuiFadeIn,
     TuiHintComponent,
     TuiHintDirective,
+    TuiHintPositionDirective,
     tuiPositionAccessorFor,
     TuiPositionService,
     tuiRectAccessorFor,
@@ -20,7 +21,7 @@ import {
         TuiDestroyService,
         TuiPositionService,
         TuiHoveredService,
-        tuiPositionAccessorFor('hint'),
+        tuiPositionAccessorFor('hint', TuiHintPositionDirective),
         tuiRectAccessorFor('hint', TuiHintDirective),
     ],
     animations: [tuiFadeIn],

projects/kit/components/line-clamp/line-clamp-position.directive.ts

@@ -8,7 +8,7 @@ import {
 } from '@taiga-ui/core';
 
 @Directive({
-    selector: '[tuiHintCustomPosition]',
+    selector: '[tuiLineClamp]',
     providers: [tuiAsPositionAccessor(TuiLineClampPositionDirective)],
 })
 export class TuiLineClampPositionDirective extends TuiPositionAccessor {

projects/kit/components/line-clamp/line-clamp.template.html

@@ -1,6 +1,6 @@
 <div
     *tuiLet="lineClamp$ | async as lineClamp"
-    tuiHintCustomPosition
+    tuiLineClamp
     class="t-wrapper"
     [style.-webkit-line-clamp]="lineClamp"
     [style.word-break]="(lineClamp || 0) > 1 ? 'break-word' : 'break-all'"