@vkontakte/vkui 6.2.1 → 6.3.0

package/src/components/SimpleGrid/SimpleGrid.module.css

@@ -0,0 +1,45 @@
+.SimpleGrid {
+  --vkui_internal--grid_columns: 1;
+  --vkui_internal--min_col_width: 0;
+
+  display: grid;
+  gap: var(--vkui_internal--row_gap) var(--vkui_internal--column_gap);
+  grid-template-columns: repeat(var(--vkui_internal--grid_columns), minmax(0, 1fr));
+}
+
+.SimpleGrid--margin-auto {
+  margin-inline: var(--vkui--size_base_padding_horizontal--regular);
+  margin-block: var(--vkui--size_base_padding_vertical--regular);
+}
+
+.SimpleGrid--margin-auto-inline {
+  margin-inline: var(--vkui--size_base_padding_horizontal--regular);
+}
+
+.SimpleGrid--margin-auto-block {
+  margin-block: var(--vkui--size_base_padding_vertical--regular);
+}
+
+.SimpleGrid--with-min-width {
+  grid-template-columns: repeat(auto-fit, minmax(var(--vkui_internal--min_col_width), 1fr));
+}
+
+.SimpleGrid--align-start {
+  align-items: flex-start;
+}
+
+.SimpleGrid--align-end {
+  align-items: flex-end;
+}
+
+.SimpleGrid--align-center {
+  align-items: center;
+}
+
+.SimpleGrid--align-stretch {
+  align-items: stretch;
+}
+
+.SimpleGrid--align-baseline {
+  align-items: baseline;
+}

package/src/components/SimpleGrid/SimpleGrid.tsx

@@ -0,0 +1,93 @@
+import { classNames } from '@vkontakte/vkjs';
+import {
+  calculateGap,
+  columnGapClassNames,
+  type GapsProp,
+  rowGapClassNames,
+} from '../../lib/layouts';
+import { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';
+import { RootComponent } from '../RootComponent/RootComponent';
+import styles from './SimpleGrid.module.css';
+
+const marginClassNames = {
+  'auto': styles['SimpleGrid--margin-auto'],
+  'auto-inline': styles['SimpleGrid--margin-auto-inline'],
+  'auto-block': styles['SimpleGrid--margin-auto-block'],
+};
+
+const alignClassNames = {
+  start: styles['SimpleGrid--align-start'],
+  end: styles['SimpleGrid--align-end'],
+  center: styles['SimpleGrid--align-center'],
+  stretch: styles['SimpleGrid--align-stretch'],
+  baseline: styles['SimpleGrid--align-baseline'],
+};
+
+export interface SimpleGridProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
+  /**
+   * Количество колонок
+   */
+  columns?: number;
+  /**
+   * Отступы между элементами.
+   * Значение из списка предопределённых пресетов или число, которое будет приведено к пикселям.
+   * Через массив можно задать отступ между столбцами и строками [column, row], если они отличаются.
+   *
+   * TODO [>=7]: порядок следования будет [row, column]
+   */
+  gap?: GapsProp;
+  /**
+   * Управляет отступами вокруг контейнера
+   * Значение `none` позволяет отключить отступы
+   * Значение `auto` позволяет задать платформенные отступы
+   * Значение `auto-inline` позволяет задать платформенные inline-отступы
+   * Значение `auto-block` позволяет задать платформенные block-отступы
+   */
+  margin?: 'none' | 'auto' | 'auto-inline' | 'auto-block';
+  /**
+   * Вместо задания количества колонок, можно указать минимальную ширину элементов
+   */
+  minColWidth?: number;
+  /**
+   * Выравнивание элементов по вспомогательной оси, эквивалентно `align-items`
+   */
+  align?: 'start' | 'end' | 'center' | 'stretch' | 'baseline';
+}
+
+export const SimpleGrid = ({
+  columns = 1,
+  gap,
+  style: styleProp,
+  margin = 'none',
+  minColWidth,
+  align = 'stretch',
+  ...props
+}: SimpleGridProps) => {
+  const style: CSSCustomProperties = {};
+  const [columnGap, rowGap] = calculateGap(gap);
+  if (typeof rowGap === 'number') {
+    style['--vkui_internal--row_gap'] = `${rowGap}px`;
+  }
+  if (typeof columnGap === 'number') {
+    style['--vkui_internal--column_gap'] = `${columnGap}px`;
+  }
+  style['--vkui_internal--grid_columns'] = `${columns}`;
+  if (minColWidth) {
+    style['--vkui_internal--min_col_width'] = `${minColWidth}px`;
+  }
+
+  return (
+    <RootComponent
+      {...props}
+      baseClassName={classNames(
+        styles.SimpleGrid,
+        margin !== 'none' && marginClassNames[margin],
+        alignClassNames[align],
+        minColWidth && styles['SimpleGrid--with-min-width'],
+        typeof columnGap === 'string' && columnGapClassNames[columnGap],
+        typeof rowGap === 'string' && rowGapClassNames[rowGap],
+      )}
+      style={{ ...style, ...styleProp }}
+    />
+  );
+};

package/src/components/Skeleton/Skeleton.tsx

@@ -65,7 +65,7 @@ export const Skeleton = ({
   duration,
   margin,
   ...restProps
-}: SkeletonProps) => {
+}: SkeletonProps): React.ReactNode => {
   const skeletonStyle: React.CSSProperties & CSSCustomProperties = {
     width,
     height,

package/src/components/Slider/Slider.tsx

@@ -90,7 +90,7 @@ export const Slider = ({
   withTooltip,
   size = 'l',
   ...restProps
-}: SliderProps | SliderMultipleProps) => {
+}: SliderProps | SliderMultipleProps): React.ReactNode => {
   const { sizeY = 'none' } = useAdaptivity();
 
   const isControlled = valueProp !== undefined;

package/src/components/Slider/SliderThumb/SliderThumb.tsx

@@ -33,7 +33,7 @@ export const SliderThumb = ({
   withTooltip,
   isActive,
   ...restProps
-}: SliderThumbProps) => {
+}: SliderThumbProps): React.ReactNode => {
   const { focusVisible, onBlur, onFocus } = useFocusVisible();
   const focusVisibleClassNames = useFocusVisibleClassName({
     focusVisible,

package/src/components/Slider/helpers.ts

@@ -2,7 +2,8 @@ import * as React from 'react';
 import { rescale } from '../../helpers/math';
 import type { InternalDraggingType, InternalValueState } from './types';
 
-export const toPercent = (v: number, min: number, max: number) => ((v - min) / (max - min)) * 100;
+export const toPercent = (v: number, min: number, max: number): number =>
+  ((v - min) / (max - min)) * 100;
 
 export const offsetToValue = (
   startX: number,
@@ -10,7 +11,7 @@ export const offsetToValue = (
   min: number,
   max: number,
   step?: number,
-) => {
+): number => {
   return rescale(startX, [0, width], [min, max], { step });
 };
 
@@ -77,7 +78,7 @@ export const snapDirection = (
   prevValue: InternalValueState,
   nextValue: number,
   type: InternalDraggingType | null,
-) => {
+): 'start' | 'end' => {
   if (type === 'start') {
     return 'start';
   }
@@ -95,7 +96,7 @@ export const snapDirection = (
 
 export const getDraggingTypeByTargetDataset = <T extends (EventTarget & HTMLElement) | null>(
   target: T,
-) => {
+): 'start' | 'end' | null => {
   if (target) {
     if (target.dataset.type === 'start') {
       return 'start';
@@ -115,7 +116,11 @@ const resetProps = {
 
 export const extractSliderAriaAttributesFromRestProps = <T extends React.AriaAttributes>(
   restProps: T,
-) => {
+): T & {
+  ariaLabel: string | undefined;
+  ariaValueText: string | undefined;
+  ariaLabelledBy: string | undefined;
+} => {
   const ariaLabel = restProps['aria-label'];
   const ariaValueText = restProps['aria-valuetext'];
   const ariaLabelledBy = restProps['aria-labelledby'];

package/src/components/Snackbar/Snackbar.module.css

@@ -4,7 +4,7 @@
   --vkui_internal--snackbar_shift_x: 0;
   --vkui_internal--snackbar_shift_y: 0;
   --vkui_internal--snackbar_animation_from: translate3d(0, 0, 0);
-  --vkui_internal--snackbar_animation_to: translate3d(0, var(--vkui_internal--snackbar_shift_y), 0);
+  --vkui_internal--snackbar_animation_to: translate3d(0, 0, 0);
   --vkui_internal--snackbar_animation_duration: 340ms;
 
   position: fixed;
@@ -22,6 +22,7 @@
 .Snackbar--placement-top,
 .Snackbar--placement-top-end {
   --vkui_internal--snackbar_animation_from: translate3d(0, -100%, 0);
+  --vkui_internal--snackbar_animation_to: translate3d(0, var(--vkui_internal--snackbar_shift_y), 0);
 
   inset-block-start: var(--vkui_internal--safe_area_inset_top);
 }
@@ -29,7 +30,8 @@
 .Snackbar--placement-bottom-start,
 .Snackbar--placement-bottom,
 .Snackbar--placement-bottom-end {
-  --vkui_internal--snackbar_animation_from: translate3d(0, 100%, 0);
+  --vkui_internal--snackbar_animation_from: translate3d(-100%, 0, 0);
+  --vkui_internal--snackbar_animation_to: translate3d(var(--vkui_internal--snackbar_shift_x), 0, 0);
 
   inset-block-end: var(--vkui_internal--snackbar_safe_area_inset_bottom);
 }
@@ -42,23 +44,26 @@
 
   .Snackbar--placement-top,
   .Snackbar--placement-bottom {
-    inset-inline: 0;
     margin-inline: auto;
   }
 
-  .Snackbar--placement-top-start,
-  .Snackbar--placement-top-end {
-    inset-block-start: var(--vkui_internal--safe_area_inset_top);
-  }
-
-  .Snackbar--placement-bottom-start,
-  .Snackbar--placement-bottom-end {
-    inset-block-end: var(--vkui_internal--snackbar_safe_area_inset_bottom);
+  .Snackbar--placement-bottom {
+    --vkui_internal--snackbar_animation_from: translate3d(0, 100%, 0);
+    --vkui_internal--snackbar_animation_to: translate3d(
+      0,
+      var(--vkui_internal--snackbar_shift_y),
+      0
+    );
   }
 
   .Snackbar--placement-top-start,
   .Snackbar--placement-bottom-start {
     --vkui_internal--snackbar_animation_from: translate3d(-100%, 0, 0);
+    --vkui_internal--snackbar_animation_to: translate3d(
+      var(--vkui_internal--snackbar_shift_x),
+      0,
+      0
+    );
 
     inset-inline-start: var(--vkui_internal--safe_area_inset_left);
     inset-inline-end: auto;
@@ -67,20 +72,14 @@
   .Snackbar--placement-top-end,
   .Snackbar--placement-bottom-end {
     --vkui_internal--snackbar_animation_from: translate3d(100%, 0, 0);
-
-    inset-inline-start: auto;
-    inset-inline-end: var(--vkui_internal--safe_area_inset_right);
-  }
-
-  .Snackbar--placement-top-start,
-  .Snackbar--placement-bottom-start,
-  .Snackbar--placement-top-end,
-  .Snackbar--placement-bottom-end {
     --vkui_internal--snackbar_animation_to: translate3d(
       var(--vkui_internal--snackbar_shift_x),
       0,
       0
     );
+
+    inset-inline-start: auto;
+    inset-inline-end: var(--vkui_internal--safe_area_inset_right);
   }
 }
 
@@ -89,9 +88,37 @@
   animation-duration: var(--vkui_internal--snackbar_animation_duration);
   animation-timing-function: var(--vkui--animation_easing_platform);
   animation-fill-mode: both;
+}
+
+.Snackbar--placement-top-start .Snackbar__in,
+.Snackbar--placement-top .Snackbar__in,
+.Snackbar--placement-top-end .Snackbar__in {
   transform: translate3d(0, var(--vkui_internal--snackbar_shift_y), 0);
 }
 
+.Snackbar--placement-bottom-start .Snackbar__in,
+.Snackbar--placement-bottom .Snackbar__in,
+.Snackbar--placement-bottom-end .Snackbar__in {
+  transform: translate3d(var(--vkui_internal--snackbar_shift_x), 0, 0);
+}
+
+@media (--desktop) {
+  .Snackbar__in {
+    --vkui_internal--snackbar_in_padding: 12px;
+  }
+
+  .Snackbar--placement-top-start .Snackbar__in,
+  .Snackbar--placement-bottom-start .Snackbar__in,
+  .Snackbar--placement-top-end .Snackbar__in,
+  .Snackbar--placement-bottom-end .Snackbar__in {
+    transform: translate3d(var(--vkui_internal--snackbar_shift_x), 0, 0);
+  }
+
+  .Snackbar--placement-bottom .Snackbar__in {
+    transform: translate3d(0, var(--vkui_internal--snackbar_shift_y), 0);
+  }
+}
+
 .Snackbar--state-enter .Snackbar__in,
 .Snackbar--state-entering .Snackbar__in {
   animation-name: animation-snackbar-slide-in;
@@ -126,19 +153,6 @@
   }
 } /* stylelint-disable-next-line at-rule-empty-line-before */
 
-@media (--desktop) {
-  .Snackbar__in {
-    --vkui_internal--snackbar_in_padding: 12px;
-  }
-
-  .Snackbar--placement-top-start .Snackbar__in,
-  .Snackbar--placement-bottom-start .Snackbar__in,
-  .Snackbar--placement-top-end .Snackbar__in,
-  .Snackbar--placement-bottom-end .Snackbar__in {
-    transform: translate3d(var(--vkui_internal--snackbar_shift_x), 0, 0);
-  }
-}
-
 @keyframes animation-snackbar-slide-in {
   from {
     opacity: 0;

package/src/components/Snackbar/Snackbar.tsx

@@ -3,6 +3,7 @@ import { classNames, noop } from '@vkontakte/vkjs';
 import { useExternRef } from '../../hooks/useExternRef';
 import { useFocusWithin } from '../../hooks/useFocusWithin';
 import { useGlobalEscKeyDown } from '../../hooks/useGlobalEscKeyDown';
+import { useMediaQueries } from '../../hooks/useMediaQueries';
 import { usePlatform } from '../../hooks/usePlatform';
 import { useCSSKeyframesAnimationController } from '../../lib/animation';
 import { getRelativeBoundingClientRect } from '../../lib/dom';
@@ -44,6 +45,12 @@ export interface SnackbarProps
     BasicProps {
   /**
    * Задаёт расположение компонента.
+   *
+   * > Note: в мобильном режиме:
+   * > - `"top-start"`/`"top-end"` перебивается на `"top"`, чтобы поведение было схожим с нативными
+   * >   уведомлениями;
+   * > - `"bottom"`/`"bottom-end"` перебивается на "bottom-start", чтобы избежать вызова системных
+   * >   функций, таких как **Pull To Refresh** и **Режим управления одной рукой**.
    */
   placement?: SnackbarPlacement;
   /**
@@ -72,7 +79,7 @@ export interface SnackbarProps
 /**
  * @see https://vkcom.github.io/VKUI/#/Snackbar
  */
-export const Snackbar = ({
+export const Snackbar: React.FC<SnackbarProps> & { Basic: typeof Basic } = ({
   placement = 'bottom-start',
   children,
   layout,
@@ -103,6 +110,7 @@ export const Snackbar = ({
 
   const rafRef = React.useRef<ReturnType<typeof requestAnimationFrame> | null>(null);
   const closeTimeoutIdRef = React.useRef<ReturnType<typeof setTimeout>>();
+  const mediaQueries = useMediaQueries();
   const [animationState, animationHandlers] = useCSSKeyframesAnimationController(
     open ? 'enter' : 'exit',
     {
@@ -150,6 +158,7 @@ export const Snackbar = ({
     shiftDataRef.current = getInitialShiftData(
       rootRef.current!.offsetWidth,
       rootRef.current!.offsetHeight,
+      mediaQueries,
     );
     setTouched(true);
   };

package/src/components/Snackbar/subcomponents/Basic/Basic.module.css

@@ -11,7 +11,7 @@
   min-block-size: 56px;
   display: flex;
   align-items: center;
-  background: var(--vkui--color_background_modal);
+  background: var(--vkui--color_background_contrast_themed);
   box-shadow: var(--vkui--elevation4);
   border-radius: var(--vkui--size_card_border_radius--regular);
 }

package/src/components/Snackbar/subcomponents/Basic/Basic.tsx

@@ -68,7 +68,7 @@ export function Basic({
   subtitle,
   children,
   ...restProps
-}: SnackbarBasicProps) {
+}: SnackbarBasicProps): React.ReactNode {
   const { sizeY = 'none' } = useAdaptivity();
   const layout = after || subtitle ? 'vertical' : 'none';
 

package/src/components/Snackbar/types.ts

@@ -6,4 +6,11 @@ export type SnackbarPlacement =
   | 'bottom'
   | 'bottom-end';
 
-export type ShiftData = { x: number; y: number; width: number; height: number; shifted: boolean };
+export type ShiftData = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  shifted: boolean;
+  isDesktop: boolean;
+};

package/src/components/Snackbar/utils.ts

@@ -1,3 +1,5 @@
+import * as React from 'react';
+import type { MediaQueries } from '../../lib/adaptivity';
 import { rubberbandIfOutOfBounds } from '../../lib/animation';
 import type { ShiftData, SnackbarPlacement } from './types';
 
@@ -5,7 +7,7 @@ export function resolveOffsetYCssStyle(
   placement: SnackbarPlacement,
   style?: React.CSSProperties,
   offsetY?: React.CSSProperties['inset'],
-) {
+): React.CSSProperties | undefined {
   if (offsetY === undefined) {
     return style;
   }
@@ -21,9 +23,14 @@ export function resolveOffsetYCssStyle(
   }
 }
 
-export function getInitialShiftData(width: number, height: number) {
+export function getInitialShiftData(
+  width: number,
+  height: number,
+  mediaQueries: MediaQueries,
+): ShiftData {
   return {
     shifted: false,
+    isDesktop: mediaQueries.smallTabletPlus.matches, // eslint-disable-line no-restricted-properties
     x: 0,
     y: 0,
     width,
@@ -35,29 +42,24 @@ export function getMovedShiftData(
   placement: SnackbarPlacement,
   shiftData: ShiftData,
   nextShift: { x: number; y: number },
-) {
-  switch (placement) {
-    case 'top-start':
-    case 'bottom-start':
+): ShiftData {
+  /* istanbul ignore else: TODO чтобы протестировать кейс в блоке else, нужно мокать useMediaQueries(), чтобы перебивать mediaQueries.smallTabletPlus.matches */
+  if (shiftData.isDesktop) {
+    if (placement.endsWith('start')) {
       shiftData.x = rubberbandIfOutOfBounds(nextShift.x, -shiftData.width, 0);
-      break;
-    case 'top-end':
-    case 'bottom-end':
+    } else if (placement.endsWith('end')) {
       shiftData.x = rubberbandIfOutOfBounds(nextShift.x, 0, shiftData.width);
-      break;
-  }
+    }
 
-  switch (placement) {
-    case 'top-start':
-    case 'top':
-    case 'top-end':
-      shiftData.y = rubberbandIfOutOfBounds(nextShift.y, -shiftData.height, 0);
-      break;
-    case 'bottom-start':
-    case 'bottom':
-    case 'bottom-end':
+    if (placement.startsWith('bottom')) {
       shiftData.y = rubberbandIfOutOfBounds(nextShift.y, 0, shiftData.height);
-      break;
+    }
+  } else if (placement.startsWith('bottom')) {
+    shiftData.x = rubberbandIfOutOfBounds(nextShift.x, -shiftData.width, 0);
+  }
+
+  if (placement.startsWith('top')) {
+    shiftData.y = rubberbandIfOutOfBounds(nextShift.y, -shiftData.height, 0);
   }
 
   shiftData.shifted = true;
@@ -72,39 +74,41 @@ export function shouldBeClosedByShiftData(
   shiftData: ShiftData,
   relativeClientRect: DOMRect,
   velocity: { x: number; y: number },
-) {
+): boolean {
   if (!shiftData.shifted) {
     return false;
   }
+
   const shouldBeClosedThreshold = { x: false, y: false };
   const shouldBeClosedByVelocity = { x: false, y: false };
 
-  switch (placement) {
-    case 'top-start':
-    case 'bottom-start':
+  /* istanbul ignore else: TODO чтобы протестировать кейс в блоке else, нужно мокать useMediaQueries(), чтобы перебивать mediaQueries.smallTabletPlus.matches */
+  if (shiftData.isDesktop) {
+    if (placement.endsWith('start')) {
       shouldBeClosedThreshold.x = relativeClientRect.x < -relativeClientRect.width / 2;
-      shouldBeClosedByVelocity.x = velocity.x < -MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE;
-      break;
-    case 'top-end':
-    case 'bottom-end':
+      shouldBeClosedByVelocity.x =
+        relativeClientRect.x < 0 ? velocity.x < -MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;
+    } else if (placement.endsWith('end')) {
       shouldBeClosedThreshold.x = relativeClientRect.x > relativeClientRect.width / 2;
-      shouldBeClosedByVelocity.x = velocity.x > MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE;
-      break;
-  }
+      shouldBeClosedByVelocity.x =
+        relativeClientRect.x > 0 ? velocity.x > MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;
+    }
 
-  switch (placement) {
-    case 'top-start':
-    case 'top':
-    case 'top-end':
-      shouldBeClosedThreshold.y = relativeClientRect.y < -relativeClientRect.height / 2;
-      shouldBeClosedByVelocity.y = velocity.y < -MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE;
-      break;
-    case 'bottom-start':
-    case 'bottom':
-    case 'bottom-end':
+    if (placement.startsWith('bottom')) {
       shouldBeClosedThreshold.y = relativeClientRect.y > relativeClientRect.height / 2;
-      shouldBeClosedByVelocity.y = velocity.y > MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE;
-      break;
+      shouldBeClosedByVelocity.y =
+        relativeClientRect.y > 0 ? velocity.y > MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;
+    }
+  } else if (placement.startsWith('bottom')) {
+    shouldBeClosedThreshold.x = relativeClientRect.x < -relativeClientRect.width / 2;
+    shouldBeClosedByVelocity.x =
+      relativeClientRect.x < 0 ? velocity.x < -MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;
+  }
+
+  if (placement.startsWith('top')) {
+    shouldBeClosedThreshold.y = relativeClientRect.y < -relativeClientRect.height / 2;
+    shouldBeClosedByVelocity.y =
+      relativeClientRect.y < 0 ? velocity.y < -MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;
   }
 
   return (

package/src/components/Spacing/Spacing.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { HTMLAttributesWithRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
@@ -5,7 +6,7 @@ import styles from './Spacing.module.css';
 
 export const CUSTOM_CSS_TOKEN_FOR_USER_GAP = '--vkui_internal--Spacing_gap';
 
-export const sizesClassNames = {
+export const sizesClassNames: Record<SpacingSize, string> = {
   '3xs': styles['Spacing--3xs'],
   '2xs': styles['Spacing--2xs'],
   'xs': styles['Spacing--xs'],
@@ -18,7 +19,7 @@ export const sizesClassNames = {
   '4xl': styles['Spacing--4xl'],
 };
 
-export type SpacingSize = keyof typeof sizesClassNames;
+export type SpacingSize = 's' | 'm' | 'l' | '3xs' | '2xs' | 'xs' | 'xl' | '2xl' | '3xl' | '4xl';
 
 export interface SpacingProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
   /**
@@ -29,7 +30,12 @@ export interface SpacingProps extends HTMLAttributesWithRootRef<HTMLDivElement>
 /**
  * @see https://vkcom.github.io/VKUI/#/Spacing
  */
-export const Spacing = ({ size = 'm', style, className, ...restProps }: SpacingProps) => {
+export const Spacing = ({
+  size = 'm',
+  style,
+  className,
+  ...restProps
+}: SpacingProps): React.ReactNode => {
   if (typeof size === 'string') {
     className = className ? classNames(sizesClassNames[size], className) : sizesClassNames[size];
   } else {

package/src/components/Spinner/Spinner.tsx

@@ -15,7 +15,7 @@ export interface SpinnerProps extends HTMLAttributesWithRootRef<HTMLSpanElement>
 /**
  * @see https://vkcom.github.io/VKUI/#/Spinner
  */
-export const Spinner = React.memo(
+export const Spinner: React.FC<SpinnerProps> = React.memo(
   ({
     size = 'regular',
     children = 'Загружается...',

package/src/components/SplitCol/SplitCol.tsx

@@ -69,7 +69,7 @@ export interface SplitColProps extends HTMLAttributesWithRootRef<HTMLDivElement>
 /**
  * @see https://vkcom.github.io/VKUI/#/SplitCol
  */
-export const SplitCol = (props: SplitColProps) => {
+export const SplitCol = (props: SplitColProps): React.ReactNode => {
   const {
     children,
     width,

package/src/components/SplitCol/SplitColContext.tsx

@@ -5,9 +5,10 @@ export interface SplitColContextProps {
   animate: boolean;
 }
 
-export const SplitColContext = React.createContext<SplitColContextProps>({
-  colRef: null,
-  animate: true,
-});
+export const SplitColContext: React.Context<SplitColContextProps> =
+  React.createContext<SplitColContextProps>({
+    colRef: null,
+    animate: true,
+  });
 
-export const useSplitCol = () => React.useContext(SplitColContext);
+export const useSplitCol = (): SplitColContextProps => React.useContext(SplitColContext);

package/src/components/SplitLayout/SplitLayout.tsx

@@ -36,7 +36,7 @@ export const SplitLayout = ({
   className,
   center,
   ...restProps
-}: SplitLayoutProps) => {
+}: SplitLayoutProps): React.ReactNode => {
   const platform = usePlatform();
 
   return (

package/src/components/SubnavigationBar/SubnavigationBar.tsx

@@ -33,7 +33,7 @@ export const SubnavigationBar = ({
   getScrollToRight = defaultScrollToRight,
   scrollAnimationDuration,
   ...restProps
-}: SubnavigationBarProps) => {
+}: SubnavigationBarProps): React.ReactNode => {
   let ScrollWrapper: React.ElementType;
   let scrollWrapperProps = {};