@vkontakte/vkui 6.2.1 → 6.3.0

package/src/components/ModalDismissButton/ModalDismissButton.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { Icon20Cancel } from '@vkontakte/icons';
 import { classNames } from '@vkontakte/vkjs';
 import { Tappable, type TappableProps } from '../Tappable/Tappable';
@@ -13,7 +14,7 @@ export const ModalDismissButton = ({
   children = 'Закрыть',
   className,
   ...restProps
-}: ModalDismissButtonProps) => {
+}: ModalDismissButtonProps): React.ReactNode => {
   return (
     <Tappable
       className={classNames(styles['ModalDismissButton'], className)}

package/src/components/ModalPage/ModalPage.tsx

@@ -102,7 +102,7 @@ export const ModalPage = ({
   getRootRef,
   preventClose,
   ...restProps
-}: ModalPageProps) => {
+}: ModalPageProps): React.ReactNode => {
   const generatingId = React.useId();
   const id = idProp || generatingId;
 

package/src/components/ModalPage/ModalPageContext.tsx

@@ -4,4 +4,5 @@ export interface ModalPageContextInterface {
   labelId?: string;
 }
 
-export const ModalPageContext = React.createContext<ModalPageContextInterface>({});
+export const ModalPageContext: React.Context<ModalPageContextInterface> =
+  React.createContext<ModalPageContextInterface>({});

package/src/components/ModalPageHeader/ModalPageHeader.tsx

@@ -26,7 +26,7 @@ export const ModalPageHeader = ({
   className,
   typographyProps,
   ...restProps
-}: ModalPageHeaderProps) => {
+}: ModalPageHeaderProps): React.ReactNode => {
   const platform = usePlatform();
   const { isDesktop, sizeX } = useAdaptivityWithJSMediaQueries();
   const { labelId } = React.useContext(ModalPageContext);

package/src/components/ModalRoot/ModalRoot.module.css

@@ -13,7 +13,7 @@
   background: rgba(0, 0, 0, 0.4);
   user-select: none;
   transition: opacity 167ms ease-out;
-  animation: animation-fade-in 0.32s ease;
+  animation: animation-modalroot-fade-in 0.32s ease;
 }
 
 .ModalRoot--touched .ModalRoot__mask {
@@ -48,7 +48,7 @@
   box-sizing: border-box;
 }
 
-@keyframes animation-fade-in {
+@keyframes animation-modalroot-fade-in {
   from {
     opacity: 0;
   }

package/src/components/ModalRoot/ModalRoot.tsx

@@ -632,7 +632,7 @@ class ModalRootTouchComponent extends React.Component<
   }
 }
 
-export const ModalRootTouch = withContext(
+export const ModalRootTouch: React.FC<ModalRootWithDOMProps> = withContext(
   withPlatform(
     withDOM<ModalRootWithDOMProps>(withModalManager(initModal)(ModalRootTouchComponent)),
   ),

package/src/components/ModalRoot/ModalRootAdaptive.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
 import { useScrollLock } from '../AppRoot/ScrollContext';
 import { ModalRootTouch } from './ModalRoot';
@@ -7,7 +8,7 @@ import { ModalRootProps } from './types';
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalRoot
  */
-export const ModalRoot = (props: ModalRootProps) => {
+export const ModalRoot = (props: ModalRootProps): React.ReactNode => {
   const { isDesktop } = useAdaptivityWithJSMediaQueries();
 
   useScrollLock(!!props.activeModal);

package/src/components/ModalRoot/ModalRootContext.tsx

@@ -12,16 +12,22 @@ export interface ModalRootContextInterface {
   isInsideModal: boolean;
 }
 
-export const ModalRootContext = React.createContext<ModalRootContextInterface>({
-  updateModalHeight: () => undefined,
-  registerModal: () => undefined,
-  isInsideModal: false,
-});
+export const ModalRootContext: React.Context<ModalRootContextInterface> =
+  React.createContext<ModalRootContextInterface>({
+    updateModalHeight: () => undefined,
+    registerModal: () => undefined,
+    isInsideModal: false,
+  });
 
 /**
  * All referenced elements must be static
  */
-export function useModalRegistry(id: string | undefined, type: ModalType) {
+export function useModalRegistry(
+  id: string | undefined,
+  type: ModalType,
+): {
+  refs: Required<ModalRefs>;
+} {
   const modalContext = React.useContext(ModalRootContext);
   const elements = React.useRef<ModalElements>({}).current;
   useIsomorphicLayoutEffect(() => {

package/src/components/ModalRoot/ModalRootDesktop.tsx

@@ -25,7 +25,7 @@ export const ModalRootDesktop = ({
   onClose,
   onClosed,
   modalOverlayTestId,
-}: ModalRootWithDOMProps) => {
+}: ModalRootWithDOMProps): React.ReactNode => {
   const maskElementRef = React.useRef<HTMLDivElement>(null);
   const maskAnimationFrame = React.useRef<number | undefined>(undefined);
   const restoreFocusTo = React.useRef<HTMLElement | undefined>(undefined);

package/src/components/ModalRoot/useModalRootContext.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
-import { ModalRootContext } from './ModalRootContext';
+import { ModalRootContext, ModalRootContextInterface } from './ModalRootContext';
 
-export const useModalRootContext = () => React.useContext(ModalRootContext);
+export const useModalRootContext = (): ModalRootContextInterface =>
+  React.useContext(ModalRootContext);

package/src/components/NativeSelect/NativeSelect.tsx

@@ -57,7 +57,7 @@ const NativeSelect = ({
   before,
   onChange,
   ...restProps
-}: NativeSelectProps) => {
+}: NativeSelectProps): React.ReactNode => {
   const [title, setTitle] = React.useState('');
   const [empty, setEmpty] = React.useState(false);
   const selectRef = useExternRef(getRef);

package/src/components/NavIdContext/NavIdContext.tsx

@@ -1,4 +1,8 @@
 import * as React from 'react';
 
-export const NavViewIdContext = React.createContext<string | undefined>(undefined);
-export const NavPanelIdContext = React.createContext<string | undefined>(undefined);
+export const NavViewIdContext: React.Context<string | undefined> = React.createContext<
+  string | undefined
+>(undefined);
+export const NavPanelIdContext: React.Context<string | undefined> = React.createContext<
+  string | undefined
+>(undefined);

package/src/components/NavIdContext/useNavId.ts

@@ -1,7 +1,10 @@
 import * as React from 'react';
 import { NavPanelIdContext, NavViewIdContext } from './NavIdContext';
 
-export const useNavId = () => ({
+export const useNavId = (): {
+  view: string | undefined;
+  panel: string | undefined;
+} => ({
   view: React.useContext(NavViewIdContext),
   panel: React.useContext(NavPanelIdContext),
 });

package/src/components/NavTransitionContext/NavTransitionContext.tsx

@@ -7,12 +7,12 @@ export interface TransitionContextProps {
 const TransitionContext = React.createContext<TransitionContextProps>({
   entering: false,
 });
-export const useNavTransition = () => React.useContext(TransitionContext);
+export const useNavTransition = (): TransitionContextProps => React.useContext(TransitionContext);
 
 export const NavTransitionProvider = ({
   children,
   entering,
-}: React.PropsWithChildren<TransitionContextProps>) => {
+}: React.PropsWithChildren<TransitionContextProps>): React.ReactNode => {
   const parentContext = useNavTransition();
   const contextValue = useObjectMemo({
     entering: parentContext.entering || entering,

package/src/components/NavTransitionDirectionContext/NavTransitionDirectionContext.tsx

@@ -7,7 +7,7 @@ const TransitionDirectionContext = React.createContext<DirectionContextType>(und
 export const NavTransitionDirectionProvider = ({
   children,
   isBack: isBackProp,
-}: React.PropsWithChildren<{ isBack: DirectionContextType }>) => {
+}: React.PropsWithChildren<{ isBack: DirectionContextType }>): React.ReactNode => {
   const parentIsBack = React.useContext(TransitionDirectionContext);
   // if local isBack is undefined then transition happend on the parent side (probably Root)
   const isBack = isBackProp !== undefined ? isBackProp : parentIsBack;

package/src/components/OnboardingTooltip/OnboardingTooltip.tsx

@@ -85,7 +85,7 @@ export const OnboardingTooltip = ({
   onPlacementChange,
   disableFlipMiddleware = false,
   ...restProps
-}: OnboardingTooltipProps) => {
+}: OnboardingTooltipProps): React.ReactNode => {
   const generatedId = React.useId();
   const tooltipId = idProp || generatedId;
   const { entering } = useNavTransition();

package/src/components/OnboardingTooltip/OnboardingTooltipContainer.tsx

@@ -8,12 +8,13 @@ type OnboardingTooltipContainerProps = React.HTMLAttributes<HTMLDivElement> &
     fixed?: boolean;
   };
 
-export const OnboardingTooltipContainer = React.forwardRef<
-  HTMLDivElement,
-  OnboardingTooltipContainerProps
->(({ fixed = false, ...props }, ref) => {
-  props[onboardingTooltipContainerAttr] = fixed ? 'fixed' : 'true';
-  return <div {...props} ref={ref} />;
-});
+export const OnboardingTooltipContainer: React.ForwardRefExoticComponent<
+  React.PropsWithoutRef<OnboardingTooltipContainerProps> & React.RefAttributes<HTMLDivElement>
+> = React.forwardRef<HTMLDivElement, OnboardingTooltipContainerProps>(
+  ({ fixed = false, ...props }, ref) => {
+    props[onboardingTooltipContainerAttr] = fixed ? 'fixed' : 'true';
+    return <div {...props} ref={ref} />;
+  },
+);
 
 OnboardingTooltipContainer.displayName = 'OnboardingTooltipContainer';

package/src/components/Pagination/Pagination.tsx

@@ -112,7 +112,7 @@ export const Pagination = ({
   renderPageButton,
   renderNavigationButton,
   ...resetProps
-}: PaginationProps) => {
+}: PaginationProps): React.ReactNode => {
   const pages = usePagination({
     currentPage,
     totalPages,

package/src/components/Pagination/PaginationNavigationButton/PaginationNavigationButton.tsx

@@ -22,7 +22,7 @@ export interface PaginationNavigationButtonProps extends PaginationNavigationBut
  */
 export const getButtonPropsFromPaginationNavigationButton = (
   opts: PaginationNavigationButtonOpts,
-) => {
+): ButtonProps & { 'data-page': number | undefined } => {
   const icon: React.ReactElement | null =
     opts.style !== 'caption' ? (
       <>
@@ -66,7 +66,7 @@ export type CustomPaginationNavigationButton = ReturnType<
 export const PaginationNavigationButton = ({
   renderNavigationButton,
   ...restProps
-}: PaginationNavigationButtonProps) => {
+}: PaginationNavigationButtonProps): React.ReactNode => {
   const buttonProps = getButtonPropsFromPaginationNavigationButton(restProps);
 
   if (typeof renderNavigationButton === 'function') {

package/src/components/Pagination/PaginationPage/PaginationPageButton.tsx

@@ -21,7 +21,9 @@ export interface PaginationPageButtonProps extends PaginationPageButtonOpts {
   renderPageButton?: (props: CustomPaginationPageButtonProps) => React.ReactNode;
 }
 
-export const getTappablePropsFromPaginationPage = (opts: PaginationPageButtonOpts) => {
+export const getTappablePropsFromPaginationPage = (
+  opts: PaginationPageButtonOpts,
+): TappableProps & { 'data-page': number } => {
   const {
     isCurrent = false,
     getPageLabel = getPageLabelDefault,
@@ -53,7 +55,7 @@ export const getTappablePropsFromPaginationPage = (opts: PaginationPageButtonOpt
     ),
     'data-page': children,
     ...restProps,
-  } satisfies TappableProps & { 'data-page': number };
+  };
 };
 
 export type CustomPaginationPageButtonProps = ReturnType<typeof getTappablePropsFromPaginationPage>;
@@ -61,7 +63,7 @@ export type CustomPaginationPageButtonProps = ReturnType<typeof getTappableProps
 export const PaginationPageButton = ({
   renderPageButton,
   ...restProps
-}: PaginationPageButtonProps) => {
+}: PaginationPageButtonProps): React.ReactNode => {
   const tappableProps = getTappablePropsFromPaginationPage(restProps);
 
   if (typeof renderPageButton === 'function') {

package/src/components/Pagination/PaginationPage/PaginationPageEllipsis.tsx

@@ -15,7 +15,7 @@ export const PaginationPageEllipsis = ({
   className,
   disabled,
   ...restProps
-}: PaginationPageEllipsisProps) => {
+}: PaginationPageEllipsisProps): React.ReactNode => {
   const paginationClassNames = usePaginationPageClassNames({ isCurrent: false, disabled });
 
   return (

package/src/components/Pagination/PaginationPage/usePaginationPageClasses.ts

@@ -10,7 +10,7 @@ export interface UsePaginationPageClassNamesProps {
 
 export const getPaginationPageClassNames = (
   opts: UsePaginationPageClassNamesProps & { sizeY?: SizeTypeValues },
-) => {
+): string => {
   return classNames(
     styles['PaginationPage'],
     opts.sizeY == null && styles['PaginationPage--sizeY-none'],
@@ -23,7 +23,7 @@ export const getPaginationPageClassNames = (
 export function usePaginationPageClassNames({
   isCurrent,
   disabled,
-}: UsePaginationPageClassNamesProps) {
+}: UsePaginationPageClassNamesProps): string {
   const { sizeY } = useAdaptivity();
   return getPaginationPageClassNames({
     isCurrent,

package/src/components/Panel/Panel.module.css

@@ -102,3 +102,7 @@
     background: var(--vkui--color_background);
   }
 }
+
+.Panel--disableBackground .Panel__in {
+  background: transparent;
+}

package/src/components/Panel/Panel.tsx

@@ -37,6 +37,10 @@ export interface PanelProps extends HTMLAttributesWithRootRef<HTMLDivElement>, N
    * Тип `plain` — соответствует фону по умолчанию.
    */
   mode?: 'plain' | 'card';
+  /**
+   * Отключает задний фон
+   */
+  disableBackground?: boolean;
 }
 
 /**
@@ -47,8 +51,9 @@ export const Panel = ({
   children,
   nav,
   mode: modeProp,
+  disableBackground,
   ...restProps
-}: PanelProps) => {
+}: PanelProps): React.ReactNode => {
   const { sizeX = 'none' } = useAdaptivity();
 
   const mode = usePanelMode(modeProp, sizeX);
@@ -61,6 +66,7 @@ export const Panel = ({
           styles['Panel'],
           sizeXClassNames[sizeX],
           centered && 'vkuiInternalPanel--centered',
+          disableBackground && styles['Panel--disableBackground'],
           stylesMode[mode],
         )}
       >

package/src/components/PanelHeader/PanelHeader.module.css

@@ -92,7 +92,7 @@
   flex-grow: 1;
   opacity: 1;
   transition: opacity 0.3s var(--vkui--animation_easing_platform);
-  padding-block: 4px 4px;
+  padding-block: 4px;
   padding-inline: 4px 0;
 }
 
@@ -136,7 +136,7 @@
   flex-grow: 1;
   opacity: 1;
   transition: opacity 0.3s var(--vkui--animation_easing_platform);
-  padding-block: 4px 4px;
+  padding-block: 4px;
   padding-inline: 0 4px;
 }
 
@@ -150,7 +150,7 @@
  * Android
  */
 .PanelHeader--android .PanelHeader__before:not(:empty) {
-  padding-block: 4px 4px;
+  padding-block: 4px;
   padding-inline: 4px 0;
   margin-inline-end: -8px;
 }
@@ -237,7 +237,7 @@
 
 .PanelHeader--android .PanelHeader__after:not(:empty),
 .PanelHeader--vkcom .PanelHeader__after:not(:empty) {
-  padding-block: 4px 4px;
+  padding-block: 4px;
   padding-inline: 0 4px;
 }
 
@@ -302,7 +302,7 @@
 }
 
 .PanelHeader--vkcom .PanelHeader__before:not(:empty) {
-  padding-block: 0 0;
+  padding-block: 0;
   padding-inline: 4px 0;
 }
 

package/src/components/PanelHeader/PanelHeader.tsx

@@ -129,7 +129,7 @@ export const PanelHeader = ({
   fixed,
   typographyProps,
   ...restProps
-}: PanelHeaderProps) => {
+}: PanelHeaderProps): React.ReactNode => {
   const platform = usePlatform();
   const { sizeX = 'none', sizeY = 'none' } = useAdaptivity();
   const { sizeX: adaptiveSizeX } = useAdaptivityConditionalRender();

package/src/components/PanelHeaderBack/PanelHeaderBack.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import {
   Icon20ChevronLeftOutline,
   Icon24ArrowLeftOutline,
@@ -47,7 +48,7 @@ export const PanelHeaderBack = ({
   className,
   children = 'Назад',
   ...restProps
-}: PanelHeaderButtonProps) => {
+}: PanelHeaderButtonProps): React.ReactNode => {
   const platform = usePlatform();
   const { sizeX = 'none' } = useAdaptivity();
   // также label нужно скрывать при platform === 'ios' && sizeX === regular

package/src/components/PanelHeaderButton/PanelHeaderButton.tsx

@@ -48,7 +48,7 @@ export const PanelHeaderButton = ({
   label,
   className,
   ...restProps
-}: PanelHeaderButtonProps) => {
+}: PanelHeaderButtonProps): React.ReactNode => {
   const isPrimitive = isPrimitiveReactNode(children);
   const isPrimitiveLabel = isPrimitiveReactNode(label);
   const platform = usePlatform();

package/src/components/PanelHeaderClose/PanelHeaderClose.tsx

@@ -7,7 +7,10 @@ import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton
  */
-export const PanelHeaderClose = ({ children = 'Отмена', ...restProps }: PanelHeaderButtonProps) => {
+export const PanelHeaderClose = ({
+  children = 'Отмена',
+  ...restProps
+}: PanelHeaderButtonProps): React.ReactNode => {
   const platform = usePlatform();
 
   return (

package/src/components/PanelHeaderContent/PanelHeaderContent.tsx

@@ -57,7 +57,7 @@ export const PanelHeaderContent = ({
   children,
   onClick,
   ...restProps
-}: PanelHeaderContentProps) => {
+}: PanelHeaderContentProps): React.ReactNode => {
   const { sizeY = 'none' } = useAdaptivity();
   const InComponent = onClick ? Tappable : 'div';
   const rootProps = onClick ? {} : restProps;

package/src/components/PanelHeaderContext/PanelHeaderContext.tsx

@@ -29,12 +29,14 @@ export const PanelHeaderContext = ({
   className,
   onClose,
   ...restProps
-}: PanelHeaderContextProps) => {
+}: PanelHeaderContextProps): React.ReactNode => {
   const platform = usePlatform();
   const { sizeX = 'none' } = useAdaptivity();
   const elementRef = React.useRef<HTMLDivElement>(null);
   const [animationState, animationHandlers] = useCSSKeyframesAnimationController(
     opened ? 'enter' : 'exit',
+    undefined,
+    true,
   );
   const visible = animationState !== 'exited';
 

package/src/components/PanelHeaderEdit/PanelHeaderEdit.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import {
   Icon24DoneOutline,
   Icon24PenOutline,
@@ -32,7 +33,7 @@ export const PanelHeaderEdit = ({
   editLabel = 'Редактировать',
   doneLabel = 'Готово',
   ...restProps
-}: PanelHeaderEditProps) => {
+}: PanelHeaderEditProps): React.ReactNode => {
   const platform = usePlatform();
   const label = isActive ? doneLabel : editLabel;
 

package/src/components/PanelHeaderSubmit/PanelHeaderSubmit.tsx

@@ -10,7 +10,7 @@ import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 export const PanelHeaderSubmit = ({
   children = 'Готово',
   ...restProps
-}: PanelHeaderButtonProps) => {
+}: PanelHeaderButtonProps): React.ReactNode => {
   const platform = usePlatform();
 
   return (

package/src/components/PanelSpinner/PanelSpinner.tsx

@@ -8,7 +8,7 @@ export interface PanelSpinnerProps extends SpinnerProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelSpinner
  */
-export const PanelSpinner = React.memo(
+export const PanelSpinner: React.FC<PanelSpinnerProps> = React.memo(
   ({ height = 96, style, ...restProps }: PanelSpinnerProps) => (
     <Spinner size="regular" {...restProps} style={{ height, ...style }} />
   ),

package/src/components/Placeholder/Placeholder.tsx

@@ -21,7 +21,7 @@ const PlaceholderContainer = ({
   stretched,
   noPadding = false,
   ...restProps
-}: PlaceholderContainerProps) => (
+}: PlaceholderContainerProps): React.ReactNode => (
   <RootComponent
     baseClassName={classNames(
       styles['Placeholder'],
@@ -34,13 +34,16 @@ const PlaceholderContainer = ({
 
 export type PlaceholderIconProps = HTMLAttributesWithRootRef<HTMLDivElement>;
 
-const PlaceholderIcon = (props: PlaceholderIconProps) => (
+const PlaceholderIcon = (props: PlaceholderIconProps): React.ReactNode => (
   <RootComponent baseClassName={styles['Placeholder__icon']} {...props} />
 );
 
 export type PlaceholderHeaderProps = HTMLAttributesWithRootRef<HTMLElement> & HasComponent;
 
-const PlaceholderHeader = ({ className, ...restProps }: PlaceholderHeaderProps) => (
+const PlaceholderHeader = ({
+  className,
+  ...restProps
+}: PlaceholderHeaderProps): React.ReactNode => (
   <Title
     level="2"
     weight="2"
@@ -51,7 +54,7 @@ const PlaceholderHeader = ({ className, ...restProps }: PlaceholderHeaderProps)
 
 export type PlaceholderTextProps = HTMLAttributesWithRootRef<HTMLElement> & HasComponent;
 
-const PlaceholderText = ({ className, ...restProps }: PlaceholderTextProps) => (
+const PlaceholderText = ({ className, ...restProps }: PlaceholderTextProps): React.ReactNode => (
   <Headline
     weight="3"
     className={classNames(className, styles['Placeholder__text'])}
@@ -61,7 +64,7 @@ const PlaceholderText = ({ className, ...restProps }: PlaceholderTextProps) => (
 
 export type PlaceholderActionsProps = HTMLAttributesWithRootRef<HTMLDivElement>;
 
-const PlaceholderActions = (props: PlaceholderActionsProps) => (
+const PlaceholderActions = (props: PlaceholderActionsProps): React.ReactNode => (
   <RootComponent baseClassName={styles['Placeholder__action']} {...props} />
 );
 
@@ -83,14 +86,13 @@ export interface PlaceholderProps extends PlaceholderContainerProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/Placeholder
  */
-export const Placeholder = ({
-  icon,
-  header,
-  children,
-  action,
-  noPadding = false,
-  ...restProps
-}: PlaceholderProps) => (
+export const Placeholder: React.FC<PlaceholderProps> & {
+  Container: typeof PlaceholderContainer;
+  Icon: typeof PlaceholderIcon;
+  Header: typeof PlaceholderHeader;
+  Text: typeof PlaceholderText;
+  Actions: typeof PlaceholderActions;
+} = ({ icon, header, children, action, noPadding = false, ...restProps }: PlaceholderProps) => (
   <PlaceholderContainer noPadding={noPadding} {...restProps}>
     {hasReactNode(icon) && <PlaceholderIcon>{icon}</PlaceholderIcon>}
     {hasReactNode(header) && <PlaceholderHeader>{header}</PlaceholderHeader>}

package/src/components/PlatformProvider/PlatformProvider.tsx

@@ -17,7 +17,7 @@ export interface PlatformProviderProps {
  * @since 5.1.0
  * @see https://vkcom.github.io/VKUI/#/PlatformProvider
  */
-export function PlatformProvider({ value, children }: PlatformProviderProps) {
+export function PlatformProvider({ value, children }: PlatformProviderProps): React.ReactNode {
   return (
     <ConfigProviderOverride platform={value}>
       <TokensClassProvider>{children}</TokensClassProvider>

package/src/components/PopoutRoot/PopoutRoot.tsx

@@ -11,7 +11,7 @@ import styles from './PopoutRoot.module.css';
 export const PopoutRootPopout = ({
   className,
   ...restProps
-}: React.HTMLAttributes<HTMLDivElement>) => (
+}: React.HTMLAttributes<HTMLDivElement>): React.ReactNode => (
   <div className={classNames(styles['PopoutRoot__popout'], className)} {...restProps} />
 );
 
@@ -21,7 +21,7 @@ export const PopoutRootPopout = ({
 export const PopoutRootModal = ({
   className,
   ...restProps
-}: React.HTMLAttributes<HTMLDivElement>) => (
+}: React.HTMLAttributes<HTMLDivElement>): React.ReactNode => (
   <div className={classNames(styles['PopoutRoot__modal'], className)} {...restProps} />
 );
 
@@ -33,7 +33,12 @@ export interface PopoutRootProps extends HTMLAttributesWithRootRef<HTMLDivElemen
 /**
  * @private
  */
-export const PopoutRoot = ({ popout, modal, children, ...restProps }: PopoutRootProps) => {
+export const PopoutRoot = ({
+  popout,
+  modal,
+  children,
+  ...restProps
+}: PopoutRootProps): React.ReactNode => {
   return (
     <RootComponent {...restProps} baseClassName={styles['PopoutRoot']}>
       {children}

package/src/components/PopoutWrapper/PopoutWrapper.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { HTMLAttributesWithRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
@@ -52,7 +53,7 @@ export const PopoutWrapper = ({
   children,
   onClick,
   ...restProps
-}: PopoutWrapperProps) => {
+}: PopoutWrapperProps): React.ReactNode => {
   return (
     <RootComponent
       {...restProps}

package/src/components/Popover/Popover.tsx

@@ -170,7 +170,7 @@ export const Popover = ({
   // a11y
   role = 'dialog',
   ...restPopoverProps
-}: PopoverProps) => {
+}: PopoverProps): React.ReactNode => {
   const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);
   const { middlewares, strictPlacement } = useFloatingMiddlewaresBootstrap({
     arrow: withArrow,