feat(core): introduces TypedTuiMapper

projects/addon-charts/components/bar-chart/bar-chart.component.ts

@@ -11,9 +11,9 @@ import {
     EMPTY_QUERY,
     TuiContextWithImplicit,
     TuiIdService,
-    TuiMapper,
     tuiPure,
     tuiSum,
+    TypedTuiMapper,
 } from '@taiga-ui/cdk';
 import {
     TuiHintHoverDirective,
@@ -71,11 +71,9 @@ export class TuiBarChartComponent {
         return this.max || this.getMax(this.value, this.collapsed);
     }
 
-    readonly percentMapper: TuiMapper<[readonly number[], boolean, number], number> = (
-        set,
-        collapsed,
-        max,
-    ) => (100 * (collapsed ? tuiSum(...set) : Math.max(...set))) / max;
+    readonly percentMapper: TypedTuiMapper<[readonly number[], boolean, number], number> =
+        (set, collapsed, max) =>
+            (100 * (collapsed ? tuiSum(...set) : Math.max(...set))) / max;
 
     getHintId(index: number): string {
         return `${this.autoIdString}_${index}`;

projects/addon-doc/components/documentation/documentation.component.ts

@@ -18,9 +18,9 @@ import {
     EMPTY_QUERY,
     TuiDestroyService,
     tuiHexToRgb,
-    TuiMatcher,
     tuiQueryListChanges,
     tuiWatch,
+    TypedTuiMatcher,
 } from '@taiga-ui/cdk';
 import {merge} from 'rxjs';
 import {switchMap, takeUntil} from 'rxjs/operators';
@@ -88,7 +88,7 @@ export class TuiDocDocumentationComponent implements AfterContentInit {
         return this.isAPI ? this.texts[0] : this.texts[1];
     }
 
-    matcher: TuiMatcher<
+    matcher: TypedTuiMatcher<
         [TuiDocDocumentationPropertyConnectorDirective<any>, Set<string>]
     > = (item, exclusions) => !exclusions.has(item.documentationPropertyName);
 

projects/addon-mobile/components/mobile-calendar/mobile-calendar.component.ts

@@ -23,9 +23,9 @@ import {
     TuiDayRange,
     TuiDestroyService,
     TuiInjectionTokenType,
-    TuiMapper,
     TuiMonth,
     tuiTypedFromEvent,
+    TypedTuiMapper,
 } from '@taiga-ui/cdk';
 import {
     TUI_ANIMATIONS_DURATION,
@@ -225,7 +225,7 @@ export class TuiMobileCalendarComponent implements AfterViewInit {
         });
     }
 
-    readonly disabledItemHandlerMapper: TuiMapper<
+    readonly disabledItemHandlerMapper: TypedTuiMapper<
         [TuiBooleanHandler<TuiDay>, TuiDay, TuiDay],
         TuiBooleanHandler<TuiDay>
     > = (disabledItemHandler, min, max) => item =>

projects/cdk/components/alert-host/alert-host.component.ts

@@ -13,7 +13,7 @@ import {
 import {TUI_PARENT_ANIMATION} from '@taiga-ui/cdk/constants';
 import {TuiDestroyService} from '@taiga-ui/cdk/services';
 import {TUI_ALERTS} from '@taiga-ui/cdk/tokens';
-import {TuiDialog, TuiMapper} from '@taiga-ui/cdk/types';
+import {TuiDialog, TypedTuiMapper} from '@taiga-ui/cdk/types';
 import {POLYMORPHEUS_CONTEXT} from '@tinkoff/ng-polymorpheus';
 import {combineLatest, Observable} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
@@ -54,7 +54,7 @@ export class TuiAlertHostComponent<T extends TuiDialog<unknown, unknown>>
             });
     }
 
-    readonly mapper: TuiMapper<[unknown], Injector> = useValue =>
+    readonly mapper: TypedTuiMapper<[unknown], Injector> = useValue =>
         Injector.create({
             providers: [
                 {

projects/cdk/pipes/filter/filter.pipe.ts

@@ -1,5 +1,5 @@
 import {Pipe, PipeTransform} from '@angular/core';
-import {TuiMatcher} from '@taiga-ui/cdk/types';
+import {TuiMatcher, TypedTuiMatcher} from '@taiga-ui/cdk/types';
 
 @Pipe({name: `tuiFilter`})
 export class TuiFilterPipe implements PipeTransform {
@@ -10,9 +10,10 @@ export class TuiFilterPipe implements PipeTransform {
      * @param matcher method for filtering
      * @param args arbitrary number of additional arguments
      */
+    transform<T>(items: readonly T[], matcher: TuiMatcher<T>, ...args: any[]): T[];
     transform<T, U extends unknown[]>(
         items: readonly T[],
-        matcher: TuiMatcher<[T, ...U]>,
+        matcher: TypedTuiMatcher<[T, ...U]>,
         ...args: U
     ): T[] {
         return items.filter(item => matcher(item, ...args));

projects/cdk/pipes/filter/test/filter.pipe.spec.ts

@@ -1,11 +1,14 @@
-import {TuiFilterPipe, TuiMatcher} from '@taiga-ui/cdk';
+import {TuiFilterPipe, TypedTuiMatcher} from '@taiga-ui/cdk';
 
 describe(`TuiFilter pipe`, () => {
     let pipe: TuiFilterPipe;
     const data = [`two`, `eleven`];
     const args = [`two`, `four`];
-    const matcher: TuiMatcher<[string, number, ...string[]]> = (item, search, ...rest) =>
-        item.length === search || rest.includes(item);
+    const matcher: TypedTuiMatcher<[string, number, ...string[]]> = (
+        item,
+        search,
+        ...rest
+    ) => item.length === search || rest.includes(item);
 
     beforeEach(() => {
         pipe = new TuiFilterPipe();

projects/cdk/pipes/mapper/mapper.pipe.ts

@@ -1,5 +1,5 @@
 import {Pipe, PipeTransform} from '@angular/core';
-import {TuiMapper} from '@taiga-ui/cdk/types';
+import {TuiMapper, TypedTuiMapper} from '@taiga-ui/cdk/types';
 
 @Pipe({name: `tuiMapper`})
 export class TuiMapperPipe implements PipeTransform {
@@ -10,9 +10,10 @@ export class TuiMapperPipe implements PipeTransform {
      * @param mapper a mapping function
      * @param args arbitrary number of additional arguments
      */
+    transform<T, G>(value: T, mapper: TuiMapper<T, G>, ...args: any[]): G;
     transform<T extends unknown[], U, G>(
         value: U,
-        mapper: TuiMapper<[U, ...T], G>,
+        mapper: TypedTuiMapper<[U, ...T], G>,
         ...args: T
     ): G {
         return mapper(value, ...args);

projects/cdk/pipes/mapper/test/mapper.pipe.spec.ts

@@ -1,10 +1,10 @@
-import {TuiMapper, TuiMapperPipe} from '@taiga-ui/cdk';
+import {TuiMapperPipe, TypedTuiMapper} from '@taiga-ui/cdk';
 
 describe(`TuiMapper pipe`, () => {
     let pipe: TuiMapperPipe;
     const data = `test`;
     const args = [`three`, `eleven`];
-    const mapper: TuiMapper<[string, ...string[]], string> = (item, ...rest) =>
+    const mapper: TypedTuiMapper<[string, ...string[]], string> = (item, ...rest) =>
         item.toUpperCase() + rest.join(` `);
 
     beforeEach(() => {

projects/cdk/types/mapper.ts

@@ -1,4 +1,11 @@
 /**
  * Typed mapping function.
+ *
+ * @deprecated Will be removed in v4.0. Use `TypedTuiMapper` instead.
  */
-export type TuiMapper<T extends unknown[], G> = (...args: T) => G;
+export type TuiMapper<T, G> = (item: T, ...args: any[]) => G;
+
+/**
+ * Typed mapping function.
+ */
+export type TypedTuiMapper<T extends unknown[], G> = (...args: T) => G;

projects/cdk/types/matcher.ts

@@ -1,10 +1,17 @@
 import {TuiStringHandler} from './handler';
-import {TuiMapper} from './mapper';
+import {TuiMapper, TypedTuiMapper} from './mapper';
 
 /**
  * A matcher function to test items against with extra arguments.
+ *
+ * @deprecated Will be removed in v4.0. Use `TypedTuiMatcher` instead.
  */
-export type TuiMatcher<I extends unknown[]> = TuiMapper<I, boolean>;
+export type TuiMatcher<I> = TuiMapper<I, boolean>;
+
+/**
+ * A matcher function to test items against with extra arguments.
+ */
+export type TypedTuiMatcher<I extends unknown[]> = TypedTuiMapper<I, boolean>;
 
 export type TuiStringMatcher<I> = (
     item: I,

projects/core/components/calendar/calendar.component.ts

@@ -12,10 +12,10 @@ import {
     TuiBooleanHandler,
     TuiDay,
     TuiDayRange,
-    TuiMapper,
     TuiMonth,
     tuiNullableSame,
     TuiYear,
+    TypedTuiMapper,
 } from '@taiga-ui/cdk';
 import {TUI_DEFAULT_MARKER_HANDLER} from '@taiga-ui/core/constants';
 import {TuiWithOptionalMinMax} from '@taiga-ui/core/interfaces';
@@ -81,7 +81,7 @@ export class TuiCalendarComponent implements TuiWithOptionalMinMax<TuiDay> {
 
     year: TuiYear | null = null;
 
-    readonly disabledItemHandlerMapper: TuiMapper<
+    readonly disabledItemHandlerMapper: TypedTuiMapper<
         [TuiBooleanHandler<TuiDay>, TuiDay, TuiDay],
         TuiBooleanHandler<TuiDay>
     > = (disabledItemHandler, min, max) => item =>

projects/demo/src/modules/charts/line-days-chart/examples/2/index.ts

@@ -5,9 +5,9 @@ import {
     TuiDay,
     TuiDayLike,
     TuiDayRange,
-    TuiMapper,
-    TuiMatcher,
     tuiPure,
+    TypedTuiMapper,
+    TypedTuiMatcher,
 } from '@taiga-ui/cdk';
 import {TuiPoint} from '@taiga-ui/core';
 
@@ -45,12 +45,12 @@ export class TuiLineDaysChartExample2 {
         return day instanceof TuiDay ? day : date.append({day});
     }
 
-    readonly filter: TuiMatcher<[readonly [TuiDay, number], TuiDayRange]> = (
+    readonly filter: TypedTuiMatcher<[readonly [TuiDay, number], TuiDayRange]> = (
         [day],
         {from, to},
     ) => day.daySameOrAfter(from) && day.daySameOrBefore(to);
 
-    readonly toNumbers: TuiMapper<
+    readonly toNumbers: TypedTuiMapper<
         [ReadonlyArray<readonly [TuiDay, number]>, TuiDayRange],
         readonly TuiPoint[]
     > = (days, {from}) =>

projects/demo/src/modules/pipes/mapper/examples/2/component.ts

@@ -1,7 +1,7 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiMapper} from '@taiga-ui/cdk';
+import {TypedTuiMapper} from '@taiga-ui/cdk';
 
 @Component({
     selector: `tui-mapper-example2`,
@@ -12,7 +12,7 @@ import {TuiMapper} from '@taiga-ui/cdk';
 export class TuiMapperExample2 {
     numbers = [1, 2, 3, 4, 5] as const;
 
-    readonly mapper: TuiMapper<[readonly number[], number], number[]> = (
+    readonly mapper: TypedTuiMapper<[readonly number[], number], number[]> = (
         numbers,
         multiplier,
     ) => numbers.map(number => number * multiplier);

projects/kit/components/calendar-range/calendar-range.component.ts

@@ -20,12 +20,12 @@ import {
     TuiDayRange,
     TuiDestroyService,
     tuiIsString,
-    TuiMapper,
     TuiMonth,
     tuiNullableSame,
     tuiObjectFromEntries,
     tuiPure,
     tuiWatch,
+    TypedTuiMapper,
 } from '@taiga-ui/cdk';
 import {
     TUI_COMMON_ICONS,
@@ -118,7 +118,7 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax<TuiDay>
         this.value = this.previousValue;
     }
 
-    readonly mapper: TuiMapper<
+    readonly mapper: TypedTuiMapper<
         [
             readonly TuiDayRangePeriod[],
             TuiDay | null,

projects/kit/components/input-date-range/input-date-range.component.ts

@@ -37,10 +37,10 @@ import {
     TuiDayRange,
     TuiFocusableElementAccessor,
     tuiIsPresent,
-    TuiMapper,
     TuiMonth,
     tuiNullableSame,
     tuiPure,
+    TypedTuiMapper,
 } from '@taiga-ui/cdk';
 import {
     TUI_DEFAULT_MARKER_HANDLER,
@@ -114,7 +114,7 @@ export class TuiInputDateRangeComponent
 
     open = false;
 
-    readonly maxLengthMapper: TuiMapper<
+    readonly maxLengthMapper: TypedTuiMapper<
         [TuiDay, TuiDayRange | null, TuiDayLike | null, boolean],
         TuiDay
     > = MAX_DAY_RANGE_LENGTH_MAPPER;

projects/kit/components/input-phone-international/input-phone-international.component.ts

@@ -20,8 +20,8 @@ import {
     tuiAsFocusableItemAccessor,
     TuiContextWithImplicit,
     TuiFocusableElementAccessor,
-    TuiMapper,
     tuiPure,
+    TypedTuiMapper,
 } from '@taiga-ui/cdk';
 import {
     TUI_MASK_SYMBOLS_REGEXP,
@@ -187,7 +187,7 @@ export class TuiInputPhoneInternationalComponent
         this.value = `${CHAR_PLUS}${value}`;
     }
 
-    readonly isoToCountryCodeMapper: TuiMapper<[TuiCountryIsoCode], string> = item =>
+    readonly isoToCountryCodeMapper: TypedTuiMapper<[TuiCountryIsoCode], string> = item =>
         tuiIsoToCountryCode(this.countriesMasks, item);
 
     /**

projects/kit/components/multi-select/multi-select.component.ts

@@ -28,9 +28,9 @@ import {
     TuiFocusableElementAccessor,
     tuiIsNativeFocused,
     tuiIsString,
-    TuiMapper,
     tuiPure,
     TuiStringHandler,
+    TypedTuiMapper,
 } from '@taiga-ui/cdk';
 import {
     TEXTFIELD_CONTROLLER_PROVIDER,
@@ -199,15 +199,15 @@ export class TuiMultiSelectComponent<T>
         return ({$implicit}) => stringify($implicit);
     }
 
-    readonly valueMapper: TuiMapper<
+    readonly valueMapper: TypedTuiMapper<
         [readonly T[], TuiStringHandler<T>, boolean?],
         ReadonlyArray<TuiStringifiableItem<T>>
     > = (value, stringify, group) =>
         group
             ? EMPTY_ARRAY
             : value.map(item => new TuiStringifiableItem(item, stringify));
 
-    readonly disabledItemHandlerWrapper: TuiMapper<
+    readonly disabledItemHandlerWrapper: TypedTuiMapper<
         [TuiBooleanHandler<T>],
         TuiBooleanHandler<TuiStringifiableItem<T> | string>
     > = handler => stringifiable =>

projects/kit/components/multi-select/native-multi-select/native-multi-select.ts

@@ -1,5 +1,5 @@
 import {Directive} from '@angular/core';
-import {TuiMapper} from '@taiga-ui/cdk';
+import {TypedTuiMapper} from '@taiga-ui/cdk';
 import {AbstractTuiNativeSelect} from '@taiga-ui/kit/abstract';
 import {TuiItemsHandlers} from '@taiga-ui/kit/tokens';
 
@@ -10,7 +10,7 @@ export abstract class AbstractTuiNativeMultiSelect<T> extends AbstractTuiNativeS
     TuiMultiSelectDirective<T>,
     T
 > {
-    selectedMapper: TuiMapper<[T, ...any[]], boolean> = (option, value) =>
+    selectedMapper: TypedTuiMapper<[T, ...any[]], boolean> = (option, value) =>
         value.includes(option);
 
     get stringify(): TuiItemsHandlers<T>['stringify'] {

projects/kit/constants/max-day-range-length-mapper.ts

@@ -2,11 +2,11 @@ import {
     TuiDay,
     TuiDayLike,
     TuiDayRange,
-    TuiMapper,
     tuiObjectFromEntries,
+    TypedTuiMapper,
 } from '@taiga-ui/cdk';
 
-export const MAX_DAY_RANGE_LENGTH_MAPPER: TuiMapper<
+export const MAX_DAY_RANGE_LENGTH_MAPPER: TypedTuiMapper<
     [TuiDay, TuiDayRange | null, TuiDayLike | null, boolean],
     TuiDay
 > = (min, value, maxLength, backwards) => {

projects/kit/internal/primitive-calendar-range/primitive-calendar-range.component.ts

@@ -18,9 +18,9 @@ import {
     TuiDay,
     TuiDayRange,
     TuiDestroyService,
-    TuiMapper,
     TuiMonth,
     tuiWatch,
+    TypedTuiMapper,
 } from '@taiga-ui/cdk';
 import {TUI_DEFAULT_MARKER_HANDLER, TuiMarkerHandler} from '@taiga-ui/core';
 import {TUI_CALENDAR_DATE_STREAM} from '@taiga-ui/kit/tokens';
@@ -96,7 +96,7 @@ export class TuiPrimitiveCalendarRangeComponent implements OnInit {
             : this.userViewedMonthSecond;
     }
 
-    monthOffset: TuiMapper<[TuiMonth, number], TuiMonth> = (value, offset) =>
+    monthOffset: TypedTuiMapper<[TuiMonth, number], TuiMonth> = (value, offset) =>
         value.append({month: offset});
 
     ngOnInit(): void {