@vkontakte/vkui 6.2.1 → 6.3.0

package/src/lib/calendar.ts

@@ -20,7 +20,13 @@ export const DEFAULT_MAX_YEAR = 9999;
 // 100 - из-за ограничений dayjs https://github.com/iamkun/dayjs/issues/2591
 export const DEFAULT_MIN_YEAR = 100;
 
-export const getYears = (currentYear: number, range: number) => {
+export const getYears = (
+  currentYear: number,
+  range: number,
+): Array<{
+  value: number;
+  label: string;
+}> => {
   const years: Array<{
     value: number;
     label: string;
@@ -36,7 +42,12 @@ export const getYears = (currentYear: number, range: number) => {
   return years;
 };
 
-export const getMonths = (locale?: string) => {
+export const getMonths = (
+  locale?: string,
+): Array<{
+  value: number;
+  label: string;
+}> => {
   const months: Array<{
     value: number;
     label: string;
@@ -59,7 +70,7 @@ export const getDaysNames = (
   now: Date,
   weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6,
   locale?: string,
-) => {
+): string[] => {
   const formatter = new Intl.DateTimeFormat(locale, {
     weekday: 'short',
   });
@@ -68,7 +79,7 @@ export const getDaysNames = (
   );
 };
 
-export const navigateDate = (date?: Date | null, key?: string) => {
+export const navigateDate = (date?: Date | null, key?: string): Date => {
   let newDate = date ?? new Date();
 
   switch (key) {
@@ -89,7 +100,7 @@ export const navigateDate = (date?: Date | null, key?: string) => {
   return newDate;
 };
 
-export const getWeeks = (viewDate: Date, weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6) => {
+export const getWeeks = (viewDate: Date, weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6): Date[][] => {
   const start = startOfWeek(startOfMonth(viewDate), weekStartsOn);
   const end = endOfWeek(endOfMonth(viewDate), weekStartsOn);
 
@@ -111,7 +122,7 @@ export const getWeeks = (viewDate: Date, weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6
   return nestedWeeks;
 };
 
-export const setTimeEqual = (to: Date, from?: Date | null) => {
+export const setTimeEqual = (to: Date, from?: Date | null): Date => {
   if (from) {
     to.setHours(from.getHours());
     to.setMinutes(from.getMinutes());
@@ -122,15 +133,16 @@ export const setTimeEqual = (to: Date, from?: Date | null) => {
   return to;
 };
 
-export const isFirstDay = (day: Date, dayOfWeek: number) =>
+export const isFirstDay = (day: Date, dayOfWeek: number): boolean =>
   dayOfWeek === 0 || isFirstDayOfMonth(day);
 
-export const isLastDay = (day: Date, dayOfWeek: number) => dayOfWeek === 6 || isLastDayOfMonth(day);
+export const isLastDay = (day: Date, dayOfWeek: number): boolean =>
+  dayOfWeek === 6 || isLastDayOfMonth(day);
 
 /**
  * Возвращает дату, ограниченную `min` и/или `max` значениями
  */
-export function clamp(day: Date, options: { min?: Date; max?: Date } = {}) {
+export function clamp(day: Date, options: { min?: Date; max?: Date } = {}): Date {
   const { min, max } = options;
   if (min && isBefore(day, min)) {
     return min;
@@ -147,7 +159,7 @@ export function clamp(day: Date, options: { min?: Date; max?: Date } = {}) {
 export function isDayMinMaxRestricted(
   day: Date,
   options: { min?: Date; max?: Date; withTime?: boolean } = {},
-) {
+): boolean {
   const { min, max, withTime = false } = options;
   if (!withTime && ((min && isSameDay(day, min)) || (max && isSameDay(day, max)))) {
     return false;

package/src/lib/callMultiple.ts

@@ -1,4 +1,4 @@
 export const callMultiple =
   (...fns: any[]) =>
-  (...args: any[]) =>
+  (...args: any[]): void =>
     fns.filter((f) => typeof f === 'function').forEach((f) => f(...args));

package/src/lib/date.ts

@@ -3,15 +3,15 @@ import dayjs from 'dayjs';
 // Using date-fns-like type for migration
 type DirtyDate = Date | number;
 
-export function startOfDay(date: DirtyDate) {
+export function startOfDay(date: DirtyDate): Date {
   return dayjs(date).startOf('day').toDate();
 }
 
-export function endOfDay(date: DirtyDate) {
+export function endOfDay(date: DirtyDate): Date {
   return dayjs(date).endOf('day').toDate();
 }
 
-export function startOfWeek(date: DirtyDate, weekStart = 0) {
+export function startOfWeek(date: DirtyDate, weekStart = 0): Date {
   weekStart = weekStart % 7;
 
   const day = dayjs(date);
@@ -21,99 +21,99 @@ export function startOfWeek(date: DirtyDate, weekStart = 0) {
   return day.date(day.date() - diff).toDate();
 }
 
-export function endOfWeek(date: DirtyDate, weekStart = 0) {
+export function endOfWeek(date: DirtyDate, weekStart = 0): Date {
   const day = dayjs(startOfWeek(date, weekStart));
 
   return day.date(day.date() + 6).toDate();
 }
 
-export function startOfMonth(date: DirtyDate) {
+export function startOfMonth(date: DirtyDate): Date {
   return dayjs(date).startOf('month').toDate();
 }
 
-export function endOfMonth(date: DirtyDate) {
+export function endOfMonth(date: DirtyDate): Date {
   return dayjs(date).endOf('month').toDate();
 }
 
-export function isFirstDayOfMonth(date: DirtyDate) {
+export function isFirstDayOfMonth(date: DirtyDate): boolean {
   return dayjs(date).date() === 1;
 }
 
-export function isLastDayOfMonth(date: DirtyDate) {
+export function isLastDayOfMonth(date: DirtyDate): boolean {
   // isSameDay -- shorter, but not exact with date-fns behavior
   // return isSameDay(date, dayjs(date).endOf("month"));
   return dayjs(date).endOf('day').isSame(dayjs(date).endOf('month'));
 }
 
-export function format(date: DirtyDate, format: string) {
+export function format(date: DirtyDate, format: string): string {
   return dayjs(date).format(format);
 }
 
-export function isBefore(date1: DirtyDate, date2: DirtyDate) {
+export function isBefore(date1: DirtyDate, date2: DirtyDate): boolean {
   // Exactly as date-fns does
   // dayjs().isBefore() for slightly different approach
   return dayjs(date1) < dayjs(date2);
 }
 
-export function isAfter(date1: DirtyDate, date2: DirtyDate) {
+export function isAfter(date1: DirtyDate, date2: DirtyDate): boolean {
   return dayjs(date1) > dayjs(date2);
 }
 
-export function isSameDay(date1: DirtyDate, date2: DirtyDate) {
+export function isSameDay(date1: DirtyDate, date2: DirtyDate): boolean {
   return dayjs(date1).isSame(date2, 'day');
 }
 
-export function isSameMonth(date1: DirtyDate, date2: DirtyDate) {
+export function isSameMonth(date1: DirtyDate, date2: DirtyDate): boolean {
   return dayjs(date1).isSame(date2, 'month');
 }
 
-export function isWithinInterval(date: DirtyDate, start: DirtyDate, end: DirtyDate) {
+export function isWithinInterval(date: DirtyDate, start: DirtyDate, end: DirtyDate): boolean {
   const day = dayjs(date);
   return day >= dayjs(start) && day <= dayjs(end);
 }
 
-export function setMinutes(date: DirtyDate, minute: number) {
+export function setMinutes(date: DirtyDate, minute: number): Date {
   return dayjs(date).set('minute', minute).toDate();
 }
 
-export function setHours(date: DirtyDate, hour: number) {
+export function setHours(date: DirtyDate, hour: number): Date {
   return dayjs(date).set('hour', hour).toDate();
 }
 
-export function setMonth(date: DirtyDate, month: number) {
+export function setMonth(date: DirtyDate, month: number): Date {
   return dayjs(date).set('month', month).toDate();
 }
 
-export function setYear(date: DirtyDate, year: number) {
+export function setYear(date: DirtyDate, year: number): Date {
   return dayjs(date).set('year', year).toDate();
 }
 
-export function addDays(date: DirtyDate, day: number) {
+export function addDays(date: DirtyDate, day: number): Date {
   return dayjs(date).add(day, 'day').toDate();
 }
 
-export function subDays(date: DirtyDate, day: number) {
+export function subDays(date: DirtyDate, day: number): Date {
   return dayjs(date).subtract(day, 'day').toDate();
 }
 
-export function addWeeks(date: DirtyDate, week: number) {
+export function addWeeks(date: DirtyDate, week: number): Date {
   return dayjs(date).add(week, 'week').toDate();
 }
 
-export function subWeeks(date: DirtyDate, week: number) {
+export function subWeeks(date: DirtyDate, week: number): Date {
   return dayjs(date).subtract(week, 'week').toDate();
 }
 
-export function addMonths(date: DirtyDate, month: number) {
+export function addMonths(date: DirtyDate, month: number): Date {
   return dayjs(date).add(month, 'month').toDate();
 }
 
-export function subMonths(date: DirtyDate, month: number) {
+export function subMonths(date: DirtyDate, month: number): Date {
   return dayjs(date).subtract(month, 'month').toDate();
 }
 
 // Rip off date-fns
-export function eachDayOfInterval(start: DirtyDate, end: DirtyDate) {
+export function eachDayOfInterval(start: DirtyDate, end: DirtyDate): Date[] {
   const dates: Date[] = [];
   const startDate = dayjs(start).toDate();
   const endDate = dayjs(end).toDate();
@@ -131,7 +131,7 @@ export function eachDayOfInterval(start: DirtyDate, end: DirtyDate) {
   return dates;
 }
 
-export function parse(input: string, format: string, referenceDate: Date = new Date()) {
+export function parse(input: string, format: string, referenceDate: Date = new Date()): Date {
   const match2 = /^\d\d/; // 00 - 99
   const match4 = /^\d{4}/; // 0000 - 9999
 
@@ -243,10 +243,10 @@ export function parse(input: string, format: string, referenceDate: Date = new D
   return date;
 }
 
-export function isMatch(input: string, format: string) {
+export function isMatch(input: string, format: string): boolean {
   return !isNaN(+parse(input, format));
 }
 
-export function getMillisecondsToTomorrow(date: DirtyDate) {
+export function getMillisecondsToTomorrow(date: DirtyDate): number {
   return dayjs(endOfDay(date)).diff(dayjs(date), 'ms');
 }

package/src/lib/dom.tsx

@@ -30,15 +30,16 @@ export interface DOMContextInterface {
 export type DOMProps = DOMContextInterface;
 
 /* eslint-disable no-restricted-globals */
-export const getDOM = () => ({
+export const getDOM = (): DOMContextInterface => ({
   window: canUseDOM ? window : undefined,
   document: canUseDOM ? document : undefined,
 });
 /* eslint-enable no-restricted-globals */
 
-export const DOMContext = React.createContext<DOMContextInterface>(getDOM());
+export const DOMContext: React.Context<DOMContextInterface> =
+  React.createContext<DOMContextInterface>(getDOM());
 
-export const useDOM = () => {
+export const useDOM = (): DOMContextInterface => {
   return React.useContext(DOMContext);
 };
 
@@ -74,15 +75,18 @@ export function withDOM<Props>(
   return WithDOM;
 }
 
-export function blurActiveElement(document: Document | undefined) {
+export function blurActiveElement(document: Document | undefined): void {
   if (document && document.activeElement) {
     (document.activeElement as HTMLElement).blur();
   }
 }
 
-export const TRANSFORM_DEFAULT_VALUES = ['none', 'initial', 'inherit', 'unset'];
-export const WILL_CHANGE_DEFAULT_VALUES = ['auto', 'initial', 'inherit', 'unset'];
-export function getTransformedParentCoords(element: Element) {
+export const TRANSFORM_DEFAULT_VALUES: string[] = ['none', 'initial', 'inherit', 'unset'];
+export const WILL_CHANGE_DEFAULT_VALUES: string[] = ['auto', 'initial', 'inherit', 'unset'];
+export function getTransformedParentCoords(element: Element): {
+  x: number;
+  y: number;
+} {
   let parentNode = element.parentNode;
   while (parentNode !== null) {
     if (isHTMLElement(parentNode)) {
@@ -155,11 +159,18 @@ export const getNearestOverflowAncestor = (childEl: Node): HTMLElement | Window
       : null;
 };
 
-export const getScrollHeight = (node: Element | Window) => {
+export const getScrollHeight = (node: Element | Window): number => {
   return isWindow(node) ? node.document.documentElement.scrollHeight : node.scrollHeight;
 };
 
-export const getScrollRect = (node: Element | Window) => {
+export const getScrollRect = (
+  node: Element | Window,
+): {
+  relative: DOMRect;
+  edges: {
+    y: [number, number];
+  };
+} => {
   const window = isElement(node) ? getWindow(node) : node;
   const scrollElRect = getBoundingClientRect(node);
 
@@ -173,16 +184,25 @@ export const getScrollRect = (node: Element | Window) => {
   };
 };
 
-export const getDocumentBody = (node?: any) => getWindow(node).document.body;
+export const getDocumentBody = (node?: any): HTMLElement => getWindow(node).document.body;
 
-export const getActiveElementByAnotherElement = (el: Element | null) =>
+export const getActiveElementByAnotherElement = (el: Element | null): Element | null =>
   el ? el.ownerDocument.activeElement : null;
 
-export const contains = (parent?: Element | null, child?: Element | null) => {
+export const contains = (parent?: Element | null, child?: Element | null): boolean => {
   return parent && child ? parent.contains(child) : false;
 };
 
-export const getFirstTouchEventData = (event: UIEvent | React.UIEvent<HTMLElement>) => {
+export const getFirstTouchEventData = (
+  event: UIEvent | React.UIEvent<HTMLElement>,
+): {
+  screenX: number;
+  screenY: number;
+  clientX: number;
+  clientY: number;
+  pageX: number;
+  pageY: number;
+} => {
   let dataRaw = (function resolveData() {
     switch (event.type) {
       case 'touchend':
@@ -215,3 +235,26 @@ export const getFirstTouchEventData = (event: UIEvent | React.UIEvent<HTMLElemen
     pageY: dataRaw.pageY || 0,
   };
 };
+
+/**
+ * ⚠️ В частности, необходимо для iOS 15. Начиная с этой версии в Safari добавили
+ * pull-to-refresh. CSS св-во `overflow-behavior` появился только с iOS 16.
+ *
+ * Во вторую очередь, полезна блокированием скролла, чтобы пользователь дождался обновления
+ * данных.
+ */
+export const initializeBrowserGesturePreventionEffect = (window: Window): VoidFunction => {
+  const options: AddEventListenerOptions & EventListenerOptions = { passive: false };
+  const handleWindowTouchMove = (event: TouchEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+
+  window.document.documentElement.classList.add('vkui--disable-overscroll-behavior'); // eslint-disable-line no-restricted-properties
+  window.addEventListener('touchmove', handleWindowTouchMove, options);
+
+  return function dispose() {
+    window.document.documentElement.classList.remove('vkui--disable-overscroll-behavior'); // eslint-disable-line no-restricted-properties
+    window.removeEventListener('touchmove', handleWindowTouchMove, options);
+  };
+};

package/src/lib/floating/customResizeObserver.ts

@@ -47,14 +47,14 @@ export class CustomResizeObserver {
     this.updateFunction = updateFunction;
   }
 
-  observe(element: HTMLElement) {
+  observe(element: HTMLElement): void {
     if (isPositioned(element)) {
       return this.observeUsingIframe(element);
     }
     return this.observeUsingMutationObserver(element);
   }
 
-  appendToTheDOM() {
+  appendToTheDOM(): void {
     for (let record of this.records) {
       record.target.appendChild(record.iframe);
     }
@@ -66,7 +66,7 @@ export class CustomResizeObserver {
     }
   }
 
-  observeUsingIframe(element: HTMLElement) {
+  observeUsingIframe(element: HTMLElement): void {
     const iframe = element.ownerDocument.createElement('iframe');
     iframe.src = 'javascript:void(0)';
     iframe.ariaHidden = 'true';
@@ -76,7 +76,7 @@ export class CustomResizeObserver {
     this.records.push({ target: element, iframe });
   }
 
-  observeUsingMutationObserver(element: HTMLElement) {
+  observeUsingMutationObserver(element: HTMLElement): void {
     if (!this.mutationObserverFallback) {
       this.mutationObserverFallback = new MutationObserver(this.updateFunction);
     }
@@ -87,7 +87,7 @@ export class CustomResizeObserver {
     });
   }
 
-  disconnect() {
+  disconnect(): void {
     this.records.map(({ target, iframe }) => {
       if (iframe.contentWindow) {
         iframe.contentWindow.removeEventListener('resize', this.updateFunction);

package/src/lib/floating/functions.ts

@@ -49,7 +49,10 @@ export function convertFloatingDataToReactCSSProperties(
 
 export const getArrowCoordsByMiddlewareData = (
   middlewareData: UseFloatingData['middlewareData'],
-) => {
+): {
+  x: number;
+  y: number;
+} => {
   const coords = { x: 0, y: 0 };
   if (middlewareData.arrow) {
     const { x = 0, y = 0 } = middlewareData.arrow;

package/src/lib/floating/useFloatingMiddlewaresBootstrap/index.ts

@@ -9,7 +9,12 @@ import {
   sizeMiddleware,
 } from '../adapters';
 import { checkIsNotAutoPlacement, getAutoPlacementAlign } from '../functions';
-import type { ArrowOptions, PlacementWithAuto, UseFloatingMiddleware } from '../types/common';
+import type {
+  ArrowOptions,
+  Placement,
+  PlacementWithAuto,
+  UseFloatingMiddleware,
+} from '../types/common';
 
 export interface UseFloatingMiddlewaresBootstrapOptions {
   /**
@@ -68,7 +73,10 @@ export const useFloatingMiddlewaresBootstrap = ({
   customMiddlewares,
   hideWhenReferenceHidden,
   disableFlipMiddleware = false,
-}: UseFloatingMiddlewaresBootstrapOptions) => {
+}: UseFloatingMiddlewaresBootstrapOptions): {
+  middlewares: UseFloatingMiddleware[];
+  strictPlacement: Placement | undefined;
+} => {
   return React.useMemo(() => {
     const isAutoPlacement = !checkIsNotAutoPlacement(placement);
     const middlewares: UseFloatingMiddleware[] = [

package/src/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.ts

@@ -176,7 +176,11 @@ export const useFloatingWithInteractions = <T extends HTMLElement = HTMLElement>
     commitShownLocalState(false, 'click');
   });
 
-  const handleMouseEnterOnBoth = useStableCallback(() => {
+  const handleMouseEnterOnBoth = useStableCallback((event: React.MouseEvent<HTMLElement>) => {
+    if (willBeHide && event.currentTarget === refs.floating.current) {
+      return;
+    }
+
     showWithDelay.cancel();
     hideWithDelay.cancel();
 
@@ -185,19 +189,23 @@ export const useFloatingWithInteractions = <T extends HTMLElement = HTMLElement>
     }
   });
 
-  const handleMouseLeaveOnBothForHoverAndFocusStates = useStableCallback(() => {
-    blockFocusRef.current = false;
-    blockMouseEnterRef.current = false;
+  const handleMouseLeaveOnBothForHoverAndFocusStates = useStableCallback(
+    (event: React.MouseEvent<HTMLElement>) => {
+      if (willBeHide && event.currentTarget === refs.floating.current) {
+        return;
+      }
 
-    if (triggerOnHover) {
-      showWithDelay.cancel();
-      hideWithDelay.cancel();
+      blockFocusRef.current = false;
+      blockMouseEnterRef.current = false;
+
+      if (triggerOnHover) {
+        showWithDelay.cancel();
+        hideWithDelay.cancel();
 
-      if (shownLocalState.reason !== 'focus' && shownLocalState.reason !== 'click') {
         hideWithDelay();
       }
-    }
-  });
+    },
+  );
 
   const handleFloatingAnimationStart = () => {
     hasCSSAnimation.current = true;

package/src/lib/floating/useFloatingWithInteractions/useResolveTriggerType.ts

@@ -1,6 +1,12 @@
 import type { TriggerType } from './types';
 
-export const useResolveTriggerType = (triggerProp: TriggerType) =>
+export const useResolveTriggerType = (
+  triggerProp: TriggerType,
+): {
+  triggerOnFocus: boolean;
+  triggerOnClick: boolean;
+  triggerOnHover: boolean;
+} =>
   (typeof triggerProp === 'string' ? [triggerProp] : triggerProp).reduce(
     (result, trigger) => {
       switch (trigger) {
@@ -18,8 +24,8 @@ export const useResolveTriggerType = (triggerProp: TriggerType) =>
       }
     },
     {
-      triggerOnFocus: false,
-      triggerOnClick: false,
-      triggerOnHover: false,
+      triggerOnFocus: false as boolean,
+      triggerOnClick: false as boolean,
+      triggerOnHover: false as boolean,
     },
   );

package/src/lib/fx.ts

@@ -2,12 +2,12 @@
  * ease function
  * @param x absolute progress of the animation in bounds 0 (beginning) and 1 (end)
  */
-export function easeInOutSine(x: number) {
+export function easeInOutSine(x: number): number {
   return 0.5 * (1 - Math.cos(Math.PI * x));
 }
 
 export function cubicBezier(x1: number, x2: number) {
-  return function (progress: number) {
+  return function (progress: number): number {
     const t = progress;
     const cx = 3 * x1;
     const bx = 3 * (x2 - x1) - cx;

package/src/lib/getNavId.ts

@@ -6,7 +6,7 @@ export interface NavIdProps {
   id?: string;
 }
 
-export function getNavId(props: NavIdProps, warn?: WarnOnceHandler) {
+export function getNavId(props: NavIdProps, warn?: WarnOnceHandler): string | undefined {
   const id = props.nav || props.id;
   if (process.env.NODE_ENV === 'development' && !id && warn) {
     warn('Навигационный элемент должен иметь свойство "nav" или "id"', 'error');

package/src/lib/layouts/gaps.ts

@@ -3,7 +3,7 @@ import styles from '../../styles/gaps.module.css';
 
 type GapPresets = '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl';
 
-export const columnGapClassNames = {
+export const columnGapClassNames: Record<GapPresets, string> = {
   '2xs': styles['-column-gap--2xs'],
   'xs': styles['-column-gap--xs'],
   's': styles['-column-gap--s'],
@@ -15,7 +15,7 @@ export const columnGapClassNames = {
   '4xl': styles['-column-gap--4xl'],
 };
 
-export const rowGapClassNames = {
+export const rowGapClassNames: Record<GapPresets, string> = {
   '2xs': styles['-row-gap--2xs'],
   'xs': styles['-row-gap--xs'],
   's': styles['-row-gap--s'],

package/src/lib/matchMedia.ts

@@ -1,7 +1,7 @@
 export function matchMediaListAddListener(
   mediaQueryList: MediaQueryList,
   listener: (this: MediaQueryList, ev: MediaQueryListEvent) => any,
-) {
+): void {
   mediaQueryList.addEventListener
     ? mediaQueryList.addEventListener('change', listener)
     : mediaQueryList.addListener(listener);
@@ -10,7 +10,7 @@ export function matchMediaListAddListener(
 export function matchMediaListRemoveListener(
   mediaQueryList: MediaQueryList,
   listener: (this: MediaQueryList, ev: MediaQueryListEvent) => any,
-) {
+): void {
   mediaQueryList.removeEventListener
     ? mediaQueryList.removeEventListener('change', listener)
     : mediaQueryList.removeListener(listener);

package/src/lib/react/simulateReactInput.ts

@@ -16,7 +16,7 @@ export interface SimulateReactInputTargetState {
 export const simulateReactInput = (
   target: HTMLInputElement & SimulateReactInputTargetState,
   nextValue = '',
-) => {
+): void => {
   try {
     const prevValue = target.value;
     target.value = nextValue;

package/src/lib/select.ts

@@ -63,6 +63,8 @@ export function defaultFilterFn<O extends Option>(
   return false;
 }
 
-export const getFormFieldModeFromSelectType = (selectType: SelectType = 'default') => {
+export const getFormFieldModeFromSelectType = (
+  selectType: SelectType = 'default',
+): 'default' | 'plain' => {
   return selectType === 'default' ? 'default' : 'plain';
 };

package/src/lib/testing.ts

@@ -1,4 +1,4 @@
 import { canUseDOM } from './dom';
 
-// eslint-disable-next-line no-restricted-globals
-export const isTesting = Boolean(canUseDOM && (window as any).__isVkuiTesting);
+// eslint-disable-next-line no-restricted-globals, @typescript-eslint/no-inferrable-types
+export const isTesting: boolean = Boolean(canUseDOM && (window as any).__isVkuiTesting);

package/src/lib/tokens/TokensClassProvider.tsx

@@ -27,7 +27,7 @@ export interface TokensClassProviderProps {
   children: React.ReactNode;
 }
 
-export const TokensClassProvider = ({ children }: TokensClassProviderProps) => {
+export const TokensClassProvider: React.FC<TokensClassProviderProps> = ({ children }) => {
   return React.Children.map(children, (child) => {
     if (React.isValidElement<ProvidedChildProps>(child)) {
       return <InjectTokenClassNameToChild>{child}</InjectTokenClassNameToChild>;

package/src/lib/tokens/useTokenClassName.ts

@@ -29,7 +29,7 @@ const getAppearanceTokenClassNameByPlatform = (
 /**
  * @private
  */
-export const useTokensClassName = () => {
+export const useTokensClassName = (): string => {
   const {
     platform,
     appearance = DEFAULT_APPEARANCE,