fix(PopoutRoot): use className by props in Popout and Modal sub-cmp (#…

…6276)

h2. Описание

Из-за того, что `PopoutRootPopout` и `PopoutRootModal` не резолвили `className`, `TokensClassProvider` затирал их `className`.

h2. Воспроизведение

Можно воспроизвести на странице https://vkcom.github.io/VKUI/6.0.0-beta.1/#/Group:

1. Прокручиваем до самого конца.
2. Нажимаем "Открыть Group в модальном окне".

packages/vkui/src/components/PopoutRoot/PopoutRoot.test.tsx

@@ -1,6 +1,14 @@
 import { baselineComponent } from '../../testing/utils';
-import { PopoutRoot } from './PopoutRoot';
+import { PopoutRoot, PopoutRootModal, PopoutRootPopout } from './PopoutRoot';
 
-describe('PopoutRoot', () => {
+describe(PopoutRoot, () => {
   baselineComponent(PopoutRoot);
 });
+
+describe(PopoutRootModal, () => {
+  baselineComponent(PopoutRootModal, { getRootRef: false });
+});
+
+describe(PopoutRootPopout, () => {
+  baselineComponent(PopoutRootPopout, { getRootRef: false });
+});

packages/vkui/src/components/PopoutRoot/PopoutRoot.tsx

@@ -1,31 +1,39 @@
 import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
 import { blurActiveElement, useDOM } from '../../lib/dom';
 import { HTMLAttributesWithRootRef } from '../../types';
 import { AppRootPortal } from '../AppRoot/AppRootPortal';
 import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './PopoutRoot.module.css';
 
-interface PopoutRootPopoutProps {
-  children: React.ReactNode;
-}
-
-const PopoutRootPopout = (props: PopoutRootPopoutProps) => (
-  <div className={styles['PopoutRoot__popout']} {...props} />
+/**
+ * @private
+ */
+export const PopoutRootPopout = ({
+  className,
+  ...restProps
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={classNames(styles['PopoutRoot__popout'], className)} {...restProps} />
 );
 
-interface PopoutRootModalProps {
-  children: React.ReactNode;
-}
-
-const PopoutRootModal = (props: PopoutRootModalProps) => (
-  <div className={styles['PopoutRoot__modal']} {...props} />
+/**
+ * @private
+ */
+export const PopoutRootModal = ({
+  className,
+  ...restProps
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={classNames(styles['PopoutRoot__modal'], className)} {...restProps} />
 );
 
 export interface PopoutRootProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
   popout?: React.ReactNode;
   modal?: React.ReactNode;
 }
 
+/**
+ * @private
+ */
 export const PopoutRoot = ({ popout, modal, children, ...restProps }: PopoutRootProps) => {
   const { document } = useDOM();