@vkontakte/vkui 6.2.1 → 6.3.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "6.2.1",
+  "version": "6.3.0",
   "name": "@vkontakte/vkui",
   "description": "VKUI library",
   "main": "dist/cjs/index.js",
@@ -39,7 +39,7 @@
     "build:types": "yarn run -T concurrently 'yarn:tsc:*'",
     "build:no-types": "yarn run -T concurrently 'yarn:swc:*' 'yarn:postcss'",
     "clear": "yarn run -T shx rm -rf dist/*",
-    "docker:clear-playwright-cache": "./scripts/generate_env_docker.sh && docker compose --env-file=./.env.docker rm -f && docker volume rm vkui_package_vkui_playwright_cache",
+    "docker:clear-playwright-cache": "../../scripts/generate_env_docker.sh && docker compose --env-file=./.env.docker rm -f && docker volume rm vkui_package_vkui_playwright_cache",
     "postcss": "yarn run -T cross-env NODE_ENV=production concurrently 'yarn:postcss:*'",
     "postcss:bundle": "yarn run -T webpack --config webpack.styles.config.js",
     "postcss:modules": "yarn run -T postcss './src/**/*.css' --base ./src --dir ./dist/cssm --config ./cssm",
@@ -52,29 +52,29 @@
     "tsc:cjs": "yarn run -T cross-env NODE_ENV=production tsc --emitDeclarationOnly --declaration --outDir dist/cjs/ -p tsconfig.dist.json",
     "test": "yarn run -T jest",
     "test:ci": "yarn test --ci --silent --outputFile ../../test-results.json --json --coverage --coverageReporters='json' --coverageDirectory='../../.nyc_output'",
-    "test:e2e": "./scripts/generate_env_docker.sh && docker compose --env-file=./.env.docker up --abort-on-container-exit",
-    "test:e2e-update": "./scripts/generate_env_docker.sh -u && docker compose --env-file=./.env.docker up --abort-on-container-exit",
+    "test:e2e": "../../scripts/generate_env_docker.sh && docker compose --env-file=./.env.docker up --abort-on-container-exit",
+    "test:e2e-update": "../../scripts/generate_env_docker.sh -u && docker compose --env-file=./.env.docker up --abort-on-container-exit",
     "test:e2e:ci": "yarn run -T playwright test --config playwright-ct.config.ts",
     "test:e2e-update:ci": "yarn run test:e2e:ci --update-snapshots",
-    "lint:generated-files": "yarn run generate:css-custom-medias && git diff --exit-code src/styles/customMedias.generated.css",
+    "lint:generated-files": "yarn run -T tsc scripts/generateCSSCustomMedias.mjs --checkJs --module ESNext --moduleResolution node --resolveJsonModule --allowSyntheticDefaultImports --noEmit && yarn run generate:css-custom-medias && git diff --exit-code src/styles/customMedias.generated.css",
     "storybook": "bash -c 'source .env && yarn run -T cross-env SANDBOX=\\.storybook storybook dev -p ${STORYBOOK_DEV_PORT:=6006}'",
     "storybook:build": "yarn run -T cross-env SANDBOX=\\.storybook FROM_STORYBOOK=1 storybook build",
-    "generate:css-custom-medias": "node scripts/generateCSSCustomMedias.js"
+    "generate:css-custom-medias": "node scripts/generateCSSCustomMedias.mjs"
   },
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@swc/helpers": "^0.5.11",
+    "@swc/helpers": "^0.5.12",
     "@vkontakte/icons": "^2.115.0",
-    "@vkontakte/vkjs": "^1.2.0",
+    "@vkontakte/vkjs": "^1.2.1",
     "@vkontakte/vkui-floating-ui": "^0.2.1",
-    "dayjs": "^1.11.11",
+    "dayjs": "^1.11.12",
     "mitt": "^3.0.1"
   },
   "devDependencies": {
-    "storybook": "8.1.10"
+    "storybook": "8.2.5"
   },
   "size-limit": [
     {

package/src/components/Accordion/Accordion.module.css

@@ -22,12 +22,12 @@
 }
 
 .AccordionContent__in--enter {
-  animation-name: animation-expand;
+  animation-name: animation-accordion-expand;
 }
 
 @media (--reduce-motion) {
   .AccordionContent__in--enter {
-    animation-name: animation-fade-in;
+    animation-name: animation-accordion-fade-in;
   }
 }
 
@@ -36,12 +36,12 @@
 }
 
 .AccordionContent__in--exit {
-  animation-name: animation-collapse;
+  animation-name: animation-accordion-collapse;
 }
 
 @media (--reduce-motion) {
   .AccordionContent__in--exit {
-    animation-name: animation-fade-out;
+    animation-name: animation-accordion-fade-out;
   }
 }
 
@@ -49,7 +49,7 @@
   block-size: 0;
 }
 
-@keyframes animation-expand {
+@keyframes animation-accordion-expand {
   0% {
     block-size: 0;
   }
@@ -58,7 +58,7 @@
     block-size: var(--vkui_internal--AccordionContent_height);
   }
 }
-@keyframes animation-collapse {
+@keyframes animation-accordion-collapse {
   0% {
     block-size: var(--vkui_internal--AccordionContent_height);
   }
@@ -67,7 +67,7 @@
     block-size: 0;
   }
 }
-@keyframes animation-fade-in {
+@keyframes animation-accordion-fade-in {
   0% {
     opacity: 0;
     block-size: var(--vkui_internal--AccordionContent_height);
@@ -83,7 +83,7 @@
     block-size: var(--vkui_internal--AccordionContent_height);
   }
 }
-@keyframes animation-fade-out {
+@keyframes animation-accordion-fade-out {
   0% {
     opacity: 1;
     block-size: var(--vkui_internal--AccordionContent_height);

package/src/components/Accordion/Accordion.tsx

@@ -31,7 +31,10 @@ export interface AccordionProps extends HasChildren {
   disabled?: boolean;
 }
 
-export const Accordion = ({
+export const Accordion: React.FC<AccordionProps> & {
+  Summary: typeof AccordionSummary;
+  Content: typeof AccordionContent;
+} = ({
   id,
   expanded: expandedProp,
   defaultExpanded = false,

package/src/components/Accordion/AccordionContent.tsx

@@ -23,13 +23,13 @@ export interface AccordionContentProps
     HasRef<HTMLDivElement>,
     React.HTMLAttributes<HTMLDivElement> {}
 
-export const AccordionContent = ({
+export const AccordionContent: React.FC<AccordionContentProps> = ({
   getRootRef,
   getRef,
   className,
   children,
   ...restProps
-}: AccordionContentProps) => {
+}) => {
   const { expanded, labelId, contentId } = React.useContext(AccordionContext);
 
   const inRef = useExternRef(getRef);

package/src/components/Accordion/AccordionContext.tsx

@@ -8,9 +8,10 @@ export interface AccordionContextProps {
   onChange: (e: boolean) => void;
 }
 
-export const AccordionContext = React.createContext<AccordionContextProps>({
-  labelId: '',
-  contentId: '',
-  expanded: false,
-  onChange: noop,
-});
+export const AccordionContext: React.Context<AccordionContextProps> =
+  React.createContext<AccordionContextProps>({
+    labelId: '',
+    contentId: '',
+    expanded: false,
+    onChange: noop,
+  });

package/src/components/Accordion/AccordionSummary.tsx

@@ -20,7 +20,7 @@ export interface AccordionSummaryProps extends Omit<SimpleCellProps, 'expandable
   iconPosition?: 'before' | 'after';
 }
 
-export const AccordionSummary = ({
+export const AccordionSummary: React.FC<AccordionSummaryProps> = ({
   after,
   before,
   ExpandIcon = Icon24ChevronDown,

package/src/components/ActionSheet/ActionSheet.tsx

@@ -50,7 +50,7 @@ export const ActionSheet = ({
   mode: modeProp,
   onClose,
   ...restProps
-}: ActionSheetProps) => {
+}: ActionSheetProps): React.ReactNode => {
   const platform = usePlatform();
   const [closingBy, setClosingBy] = React.useState<undefined | CloseInitiators>(undefined);
   const onCloseWithOther = () => setClosingBy('other');

package/src/components/ActionSheet/ActionSheetContext.ts

@@ -14,4 +14,6 @@ export type ActionSheetContextType<T extends Element = Element> = {
   mode?: 'sheet' | 'menu';
 };
 
-export const ActionSheetContext = React.createContext<ActionSheetContextType<any>>({});
+export const ActionSheetContext: React.Context<ActionSheetContextType<any>> = React.createContext(
+  {},
+);

package/src/components/ActionSheet/ActionSheetDefaultIosCloseItem.tsx

@@ -1,6 +1,6 @@
 import { ActionSheetItem, ActionSheetItemProps } from '../ActionSheetItem/ActionSheetItem';
 
-export const ActionSheetDefaultIosCloseItem = (props: ActionSheetItemProps) => {
+export const ActionSheetDefaultIosCloseItem = (props: ActionSheetItemProps): React.ReactNode => {
   return (
     <ActionSheetItem mode="cancel" isCancelItem {...props}>
       Отмена

package/src/components/ActionSheet/ActionSheetDropdownMenu.tsx

@@ -29,7 +29,7 @@ export const ActionSheetDropdownMenu = ({
   onAnimationStart,
   onAnimationEnd,
   ...restProps
-}: SharedDropdownProps) => {
+}: SharedDropdownProps): React.ReactNode => {
   const { document } = useDOM();
   const platform = usePlatform();
   const { sizeY } = useAdaptivityWithJSMediaQueries();

package/src/components/ActionSheet/ActionSheetDropdownSheet.tsx

@@ -20,7 +20,7 @@ export const ActionSheetDropdownSheet = ({
   toggleRef,
   className,
   ...restProps
-}: SharedDropdownProps) => {
+}: SharedDropdownProps): React.ReactNode => {
   const { sizeY } = useAdaptivityWithJSMediaQueries();
   const platform = usePlatform();
 

package/src/components/ActionSheetItem/ActionSheetItem.module.css

@@ -217,7 +217,7 @@
 
 .ActionSheetItem--sizeY-compact.ActionSheetItem--ios {
   min-block-size: 36px;
-  padding-block: 4px 4px;
+  padding-block: 4px;
   padding-inline: 18px 20px;
 }
 

package/src/components/ActionSheetItem/ActionSheetItem.tsx

@@ -72,7 +72,7 @@ export const ActionSheetItem = ({
   className,
   isCancelItem,
   ...restProps
-}: ActionSheetItemProps) => {
+}: ActionSheetItemProps): React.ReactNode => {
   const platform = usePlatform();
   const { onItemClick = () => noop, mode: actionSheetMode } =
     React.useContext<ActionSheetContextType<HTMLElement>>(ActionSheetContext);

package/src/components/ActionSheetItem/subcomponents/Radio/Radio.tsx

@@ -27,7 +27,7 @@ export const Radio = ({
   className,
   style,
   ...restProps
-}: ActionSheetItemCheckedProps) => {
+}: ActionSheetItemCheckedProps): React.ReactNode => {
   return (
     <RootComponent getRootRef={getRootRef} className={className} style={style}>
       <VisuallyHidden

package/src/components/AdaptiveIconRenderer/AdaptiveIconRenderer.tsx

@@ -10,7 +10,10 @@ export interface AdaptiveIconRendererProps {
  * @since 5.4.0
  * @see https://vkcom.github.io/VKUI/#/AdaptiveIconRenderer
  */
-export const AdaptiveIconRenderer = ({ IconCompact, IconRegular }: AdaptiveIconRendererProps) => {
+export const AdaptiveIconRenderer = ({
+  IconCompact,
+  IconRegular,
+}: AdaptiveIconRendererProps): React.ReactNode => {
   const { sizeY } = useAdaptivityConditionalRender();
 
   return (

package/src/components/AdaptivityProvider/AdaptivityContext.tsx

@@ -25,4 +25,5 @@ export interface AdaptivityProps extends SizeProps {
   hasHover?: boolean;
 }
 
-export const AdaptivityContext = React.createContext<AdaptivityProps>({});
+export const AdaptivityContext: React.Context<AdaptivityProps> =
+  React.createContext<AdaptivityProps>({});

package/src/components/AdaptivityProvider/AdaptivityProvider.tsx

@@ -16,7 +16,7 @@ export const AdaptivityProvider = ({
   hasPointer,
   hasHover,
   children,
-}: AdaptivityProviderProps) => {
+}: AdaptivityProviderProps): React.ReactNode => {
   const adaptivity = React.useMemo(() => {
     const nextProps: AdaptivityProps = {
       viewWidth,

package/src/components/Alert/Alert.tsx

@@ -80,7 +80,7 @@ export const Alert = ({
   dismissButtonTestId,
   getRootRef,
   ...restProps
-}: AlertProps) => {
+}: AlertProps): React.ReactNode => {
   const generatedId = React.useId();
 
   const headerId = `vkui-alert-${generatedId}-header`;

package/src/components/Alert/AlertAction.tsx

@@ -50,7 +50,7 @@ const AlertActionBase = ({ mode, ...restProps }: AlertActionProps) => {
   );
 };
 
-export const AlertAction = (props: AlertActionProps) => {
+export const AlertAction = (props: AlertActionProps): React.ReactNode => {
   const platform = usePlatform();
 
   if (platform === 'ios') {

package/src/components/Alert/AlertActions.tsx

@@ -27,7 +27,7 @@ export const AlertActions = ({
   onItemClick,
   actionsAlign,
   actionsLayout,
-}: AlertActionsProps) => {
+}: AlertActionsProps): React.ReactNode => {
   const platform = usePlatform();
 
   const direction: AlertProps['actionsLayout'] =

package/src/components/Alert/AlertTypography.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { usePlatform } from '../../hooks/usePlatform';
 import { HasChildren } from '../../types';
 import { Caption } from '../Typography/Caption/Caption';
@@ -9,7 +10,7 @@ import styles from './Alert.module.css';
 interface AlertTypography extends HasChildren {
   id: string;
 }
-export const AlertHeader = (props: AlertTypography) => {
+export const AlertHeader = (props: AlertTypography): React.ReactNode => {
   const platform = usePlatform();
 
   switch (platform) {
@@ -19,7 +20,7 @@ export const AlertHeader = (props: AlertTypography) => {
       return <Title className={styles['Alert__header']} weight="2" level="2" {...props} />;
   }
 };
-export const AlertText = (props: AlertTypography) => {
+export const AlertText = (props: AlertTypography): React.ReactNode => {
   const platform = usePlatform();
 
   switch (platform) {

package/src/components/AppRoot/AppRoot.tsx

@@ -88,7 +88,7 @@ export const AppRoot = ({
   layout,
   userSelectMode,
   ...props
-}: AppRootProps) => {
+}: AppRootProps): React.ReactNode => {
   const { hasPointer, sizeX = 'none', sizeY = 'none' } = useAdaptivity();
   const tokensClassName = useTokensClassName();
 

package/src/components/AppRoot/AppRootContext.ts

@@ -24,6 +24,5 @@ export const DEFAULT_APP_ROOT_CONTEXT_VALUE: AppRootContextInterface = {
   disablePortal: false,
 };
 
-export const AppRootContext = React.createContext<AppRootContextInterface>(
-  DEFAULT_APP_ROOT_CONTEXT_VALUE,
-);
+export const AppRootContext: React.Context<AppRootContextInterface> =
+  React.createContext<AppRootContextInterface>(DEFAULT_APP_ROOT_CONTEXT_VALUE);

package/src/components/AppRoot/AppRootPortal.tsx

@@ -15,7 +15,7 @@ export interface AppRootPortalProps extends HasChildren {
   usePortal?: boolean | HTMLElement | React.RefObject<HTMLElement> | null;
 }
 
-export const AppRootPortal = ({ children, usePortal }: AppRootPortalProps) => {
+export const AppRootPortal = ({ children, usePortal }: AppRootPortalProps): React.ReactNode => {
   const { portalRoot, mode, disablePortal } = React.useContext(AppRootContext);
   const appearance = useAppearance();
 

package/src/components/AppRoot/ScrollContext.tsx

@@ -25,8 +25,12 @@ const getPageYOffsetWithoutKeyboardHeight = (window: Window) => {
   return window.pageYOffset - diffOfClientHeightAndViewportHeight;
 };
 
+export type GetScrollOptions = {
+  compensateKeyboardHeight?: boolean;
+};
+
 export interface ScrollContextInterface {
-  getScroll: (this: void) => { x: number; y: number };
+  getScroll: (this: void, options?: GetScrollOptions) => { x: number; y: number };
   scrollTo: (this: void, x?: number, y?: number) => void;
   isScrollLock: boolean;
   enableScrollLock: (this: void) => void;
@@ -34,29 +38,32 @@ export interface ScrollContextInterface {
   beforeScrollLockFnSetRef?: React.RefObject<Set<() => void>>;
 }
 
-export const ScrollContext = React.createContext<ScrollContextInterface>({
-  getScroll: () => ({ x: 0, y: 0 }),
-  scrollTo: noop,
-  isScrollLock: false,
-  enableScrollLock: noop,
-  disableScrollLock: noop,
-});
+export const ScrollContext: React.Context<ScrollContextInterface> =
+  React.createContext<ScrollContextInterface>({
+    getScroll: () => ({ x: 0, y: 0 }),
+    scrollTo: noop,
+    isScrollLock: false,
+    enableScrollLock: noop,
+    disableScrollLock: noop,
+  });
 
-export const useScroll = () => React.useContext(ScrollContext);
+export const useScroll = (): ScrollContextInterface => React.useContext(ScrollContext);
 
 export interface ScrollControllerProps extends HasChildren {
   elRef: React.RefObject<HTMLElement>;
 }
 
-export const GlobalScrollController = ({ children }: ScrollControllerProps) => {
+export const GlobalScrollController = ({ children }: ScrollControllerProps): React.ReactNode => {
   const { window, document } = useDOM();
   const [isScrollLock, setScrollLock] = React.useState(false);
   const beforeScrollLockFnSetRef = React.useRef<Set<() => void>>(new Set());
 
   const getScroll = React.useCallback<ScrollContextInterface['getScroll']>(
-    () => ({
+    (options = { compensateKeyboardHeight: true }) => ({
       x: window!.pageXOffset,
-      y: getPageYOffsetWithoutKeyboardHeight(window!),
+      y: options.compensateKeyboardHeight
+        ? getPageYOffsetWithoutKeyboardHeight(window!)
+        : window!.pageYOffset,
     }),
     [window],
   );
@@ -117,7 +124,10 @@ export const GlobalScrollController = ({ children }: ScrollControllerProps) => {
   return <ScrollContext.Provider value={scrollController}>{children}</ScrollContext.Provider>;
 };
 
-export const ElementScrollController = ({ elRef, children }: ScrollControllerProps) => {
+export const ElementScrollController = ({
+  elRef,
+  children,
+}: ScrollControllerProps): React.ReactNode => {
   const [isScrollLock, setScrollLock] = React.useState(false);
   const beforeScrollLockFnSetRef = React.useRef<Set<() => void>>(new Set());
 
@@ -199,7 +209,10 @@ export const ElementScrollController = ({ elRef, children }: ScrollControllerPro
  * @param effect функция, которая может возвращать функцию очистки
  * @param deps effect обновится только при изменении значений в списке.
  */
-export const useScrollLockEffect = (effect: React.EffectCallback, deps: React.DependencyList) => {
+export const useScrollLockEffect = (
+  effect: React.EffectCallback,
+  deps: React.DependencyList,
+): void => {
   const destructorRef = React.useRef<ReturnType<React.EffectCallback>>(noop);
   const { isScrollLock, beforeScrollLockFnSetRef } = useScroll();
 
@@ -232,7 +245,7 @@ export const useScrollLockEffect = (effect: React.EffectCallback, deps: React.De
   }, [isScrollLock]);
 };
 
-export const useScrollLock = (enabled = true) => {
+export const useScrollLock = (enabled = true): void => {
   const { enableScrollLock, disableScrollLock, isScrollLock } = useScroll();
   useIsomorphicLayoutEffect(() => {
     if (enabled && !isScrollLock) {

package/src/components/AppRoot/helpers.ts

@@ -45,11 +45,12 @@ export function getClassNamesByMode({
   return [baseClassNames, stylesClassNames];
 }
 
-export const getParentElement = (el: HTMLElement | null) => (el ? el.parentElement : null);
+export const getParentElement = (el: HTMLElement | null): HTMLElement | null =>
+  el ? el.parentElement : null;
 
 export const extractPortalRootByProp = (
   portalRootProp: HTMLElement | React.RefObject<HTMLElement>,
-) => (isRefObject(portalRootProp) ? portalRootProp.current : portalRootProp);
+): HTMLElement | null => (isRefObject(portalRootProp) ? portalRootProp.current : portalRootProp);
 
 export const CUSTOM_PROPERTY_INSET_PREFIX = `--vkui_internal--safe_area_inset_`;
 
@@ -57,7 +58,7 @@ export const setSafeAreaInsets = (
   safeAreaInsets: SafeAreaInsets | undefined,
   rootContainer: HTMLElement,
   portalContainer?: HTMLElement,
-) => {
+): (() => void) => {
   if (!safeAreaInsets) {
     return () => void 0;
   }

package/src/components/AppearanceProvider/AppearanceProvider.tsx

@@ -12,7 +12,10 @@ export interface AppearanceProviderProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/AppearanceProvider
  */
-export const AppearanceProvider = ({ value, children }: AppearanceProviderProps) => {
+export const AppearanceProvider = ({
+  value,
+  children,
+}: AppearanceProviderProps): React.ReactNode => {
   return (
     <ConfigProviderOverride appearance={value}>
       <IconAppearanceProvider value={value}>

package/src/components/AspectRatio/AspectRatio.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';
-import { RootComponent } from '../RootComponent/RootComponent';
+import { CSSCustomProperties } from '../../types';
+import { RootComponent, RootComponentProps } from '../RootComponent/RootComponent';
 import styles from './AspectRatio.module.css';
 
-export interface AspectRatioProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
+export interface AspectRatioProps extends Omit<RootComponentProps<HTMLElement>, 'baseClassName'> {
   className?: string;
   /**
    * По умолчанию, вложенный контент будет растягиваться и заполнять весь блок.

package/src/components/Avatar/Avatar.tsx

@@ -75,7 +75,12 @@ export interface AvatarProps extends Omit<ImageBaseProps, 'widthSize' | 'heightS
 /**
  * @see https://vkcom.github.io/VKUI/#/Avatar
  */
-export const Avatar = ({
+export const Avatar: React.FC<AvatarProps> & {
+  Badge: typeof AvatarBadge;
+  BadgeWithPreset: typeof AvatarBadgeWithPreset;
+  Overlay: typeof ImageBase.Overlay;
+  getInitialsFontSize: typeof getInitialsFontSize;
+} = ({
   size = AVATAR_DEFAULT_SIZE,
   className,
   gradientColor,

package/src/components/Avatar/AvatarBadge/AvatarBadge.tsx

@@ -5,7 +5,10 @@ import styles from './AvatarBadge.module.css';
 
 export type AvatarBadgeProps = ImageBaseBadgeProps;
 
-export const AvatarBadge = ({ className, ...restProps }: AvatarBadgeProps) => {
+export const AvatarBadge: React.FC<AvatarBadgeProps> = ({
+  className,
+  ...restProps
+}: AvatarBadgeProps) => {
   const { size } = React.useContext(ImageBaseContext);
   return (
     <ImageBase.Badge

package/src/components/Avatar/AvatarBadge/AvatarBadgeWithPreset.tsx

@@ -19,7 +19,7 @@ export interface AvatarBadgeWithPresetProps
   preset?: 'online' | 'online-mobile';
 }
 
-export const AvatarBadgeWithPreset = ({
+export const AvatarBadgeWithPreset: React.FC<AvatarBadgeWithPresetProps> = ({
   preset = 'online',
   className,
   ...restProps

package/src/components/Avatar/AvatarBadge/icons.tsx

@@ -8,7 +8,7 @@ export const Icon12Circle = ({
   width = 12,
   height = 12,
   ...restProps
-}: React.ComponentProps<typeof Icon12CircleLib>) => {
+}: React.ComponentProps<typeof Icon12CircleLib>): React.ReactNode => {
   return (
     <Icon12CircleLib {...restProps} width={width >= 24 ? 15 : 12} height={height >= 24 ? 15 : 12} />
   );
@@ -18,7 +18,7 @@ export const Icon12OnlineMobile = ({
   width = 8,
   height = 12,
   ...restProps
-}: React.ComponentProps<typeof Icon12OnlineMobileLib>) => {
+}: React.ComponentProps<typeof Icon12OnlineMobileLib>): React.ReactNode => {
   return (
     <Icon12OnlineMobileLib
       {...restProps}

package/src/components/Badge/Badge.tsx

@@ -17,7 +17,7 @@ export interface BadgeProps extends RootComponentProps<HTMLSpanElement> {
  *
  * TODO [>=7]: переименовать в Dot
  */
-export const Badge = ({ mode = 'new', children, ...restProps }: BadgeProps) => (
+export const Badge = ({ mode = 'new', children, ...restProps }: BadgeProps): React.ReactNode => (
   <RootComponent
     Component="span"
     baseClassName={classNames(styles['Badge'], stylesMode[mode])}

package/src/components/Banner/Banner.tsx

@@ -97,7 +97,7 @@ export const Banner = ({
   onDismiss,
   dismissLabel = 'Скрыть',
   ...restProps
-}: BannerProps) => {
+}: BannerProps): React.ReactNode => {
   const platform = usePlatform();
 
   const HeaderTypography = size === 'm' ? Title : Headline;

package/src/components/BaseGallery/BaseGallery.tsx

@@ -53,7 +53,7 @@ export const BaseGallery = ({
   getRef,
   arrowSize = 'l',
   ...restProps
-}: BaseGalleryProps) => {
+}: BaseGalleryProps): React.ReactNode => {
   const slidesStore = React.useRef<Record<string, HTMLDivElement | null>>({});
   const layoutState = React.useRef<LayoutState>(LAYOUT_DEFAULT_STATE);
   const [shiftState, setShiftState] = React.useState<ShiftingState>(SHIFT_DEFAULT_STATE);

package/src/components/BaseGallery/CarouselBase/CarouselBase.tsx

@@ -40,7 +40,7 @@ export const CarouselBase = ({
   getRef,
   arrowSize = 'l',
   ...restProps
-}: BaseGalleryProps) => {
+}: BaseGalleryProps): React.ReactNode => {
   const slidesStore = React.useRef<Record<string, HTMLDivElement | null>>({});
   const slidesManager = React.useRef<SlidesManagerState>(SLIDES_MANAGER_STATE);