@vkontakte/vkui 4.35.4 → 4.37.0

package/src/components/SubnavigationButton/SubnavigationButton.tsx

@@ -1,17 +1,17 @@
 import * as React from "react";
 import { HasComponent, HasChildren } from "../../types";
 import { classNames } from "../../lib/classNames";
-import { getClassName } from "../../helpers/getClassName";
-import { getTitleFromChildren, hasReactNode } from "../../lib/utils";
+import { getTitleFromChildren } from "../../lib/utils";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { TappableProps, Tappable } from "../Tappable/Tappable";
 import { Icon16Dropdown } from "@vkontakte/icons";
-import { usePlatform } from "../../hooks/usePlatform";
 import { Caption } from "../Typography/Caption/Caption";
 import { Subhead } from "../Typography/Subhead/Subhead";
 import "./SubnavigationButton.css";
 
 export interface SubnavigationButtonProps extends Omit<TappableProps, "size"> {
-  size?: "m" | "l";
+  mode?: "primary" | "outline" | "tertiary";
+  size?: "s" | "m" | "l";
   selected?: boolean;
   /**
    * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar mode="fixed" />`
@@ -28,25 +28,29 @@ export interface SubnavigationButtonProps extends Omit<TappableProps, "size"> {
   expandable?: boolean;
 }
 
-type SubnavButtonTypographyProps = Pick<SubnavigationButtonProps, "textLevel"> &
+type SubnavigationButtonTypographyProps = Pick<
+  SubnavigationButtonProps,
+  "textLevel"
+> &
   HasComponent &
   HasChildren;
 
 const SubnavigationButtonTypography = ({
   textLevel,
   ...restProps
-}: SubnavButtonTypographyProps) => {
+}: SubnavigationButtonTypographyProps) => {
   if (textLevel === 1) {
     return <Subhead {...restProps} />;
   }
 
-  return <Caption level={textLevel === 2 ? "1" : "2"} {...restProps} />;
+  return <Caption level={textLevel === 2 ? "2" : "3"} {...restProps} />;
 };
 
 /**
  * @see https://vkcom.github.io/VKUI/#/SubnavigationButton
  */
 export const SubnavigationButton = ({
+  mode = "primary",
   size = "m",
   selected,
   textLevel = 1,
@@ -56,25 +60,24 @@ export const SubnavigationButton = ({
   children,
   ...restProps
 }: SubnavigationButtonProps) => {
-  const platform = usePlatform();
+  const { sizeY } = useAdaptivity();
 
   return (
     <Tappable
       {...restProps}
       hasActive={false}
       focusVisibleMode="outside"
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
-        getClassName("SubnavigationButton", platform),
+        "SubnavigationButton",
         `SubnavigationButton--${size}`,
-        {
-          "SubnavigationButton--selected": selected,
-        }
+        `SubnavigationButton--mode-${mode}`,
+        selected && "SubnavigationButton--selected",
+        `SubnavigationButton--sizeY-${sizeY}`
       )}
       aria-label={getTitleFromChildren(children)}
     >
       <span vkuiClass="SubnavigationButton__in">
-        {hasReactNode(before) && (
+        {before && (
           <span vkuiClass="SubnavigationButton__before">{before}</span>
         )}
         <SubnavigationButtonTypography
@@ -84,11 +87,12 @@ export const SubnavigationButton = ({
         >
           {children}
         </SubnavigationButtonTypography>
-        {hasReactNode(after) && (
-          <span vkuiClass="SubnavigationButton__after">{after}</span>
-        )}
+        {after && <span vkuiClass="SubnavigationButton__after">{after}</span>}
         {expandable && (
-          <Icon16Dropdown vkuiClass="SubnavigationButton__expandableIcon" />
+          <Icon16Dropdown
+            vkuiClass="SubnavigationButton__expandableIcon"
+            aria-hidden
+          />
         )}
       </span>
     </Tappable>

package/src/components/TabbarItem/Readme.md

@@ -6,7 +6,12 @@ const [text, setText] = useState("one");
 const [horizontalText, setHorizontalText] = useState("one");
 const [indicator, setIndicator] = useState("one");
 
-<div style={{ background: "var(--background_page)", padding: "10px 0" }}>
+<div
+  style={{
+    background: "var(--vkui--color_background)",
+    padding: "10px 0",
+  }}
+>
   <div style={{ maxWidth: 768, margin: "auto" }}>
     <Tabbar style={{ position: "static", margin: "0 0 10px" }}>
       <TabbarItem selected={simple === "one"} onClick={() => setSimple("one")}>

package/src/components/Tabs/Readme.md

@@ -38,14 +38,22 @@ const Example = ({ sizeX }) => {
           <List>
             <Cell
               before={<Icon28UsersOutline />}
-              after={mode === "all" && <Icon24Done fill="var(--accent)" />}
+              after={
+                mode === "all" && (
+                  <Icon24Done fill="var(--vkui--color_icon_accent)" />
+                )
+              }
               onClick={() => setMode("all")}
             >
               Communities
             </Cell>
             <Cell
               before={<Icon28SettingsOutline />}
-              after={mode === "managed" && <Icon24Done fill="var(--accent)" />}
+              after={
+                mode === "managed" && (
+                  <Icon24Done fill="var(--vkui--color_icon_accent)" />
+                )
+              }
               onClick={() => setMode("managed")}
             >
               Managed Communities

package/src/components/TabsItem/TabsItem.css

@@ -102,11 +102,14 @@
 }
 
 .TabsItem--selected .TabsItem__before {
-  color: var(--text_primary, var(--vkui--color_icon_primary));
+  color: var(--vkui--color_icon_primary);
 }
 
 .TabsItem--selected.TabsItem--accent .TabsItem__before {
-  color: var(--header_tint_alternate, var(--vkui--color_icon_accent_themed));
+  color: var(
+    --button_secondary_foreground,
+    var(--vkui--color_icon_accent_themed)
+  );
 }
 
 .TabsItem--selected.TabsItem--secondary .TabsItem__before {
@@ -129,7 +132,10 @@
 }
 
 .TabsItem--selected.TabsItem--accent .TabsItem__label {
-  color: var(--header_tint_alternate, var(--vkui--color_text_accent_themed));
+  color: var(
+    --button_secondary_foreground,
+    var(--vkui--color_text_accent_themed)
+  );
 }
 
 .TabsItem--selected.TabsItem--secondary .TabsItem__label {

package/src/components/Tappable/Tappable.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import mitt from "mitt";
-import { noop } from "@vkontakte/vkjs";
+import { noop } from "../../lib/utils";
 import { Touch, TouchEvent, TouchProps } from "../Touch/Touch";
 import TouchRootContext from "../Touch/TouchContext";
 import { classNames } from "../../lib/classNames";
@@ -22,18 +22,20 @@ import "./Tappable.css";
 
 const WAVE_LIVE = 225;
 
+export type TappableElementProps = Omit<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "onTouchStart"
+  | "onTouchMove"
+  | "onTouchEnd"
+  | "onTouchCancel"
+  | "onMouseDown"
+  | "onMouseMove"
+  | "onMouseUp"
+  | "onMouseLeave"
+>;
+
 export interface TappableProps
-  extends Omit<
-      React.AllHTMLAttributes<HTMLElement>,
-      | "onTouchStart"
-      | "onTouchMove"
-      | "onTouchEnd"
-      | "onTouchCancel"
-      | "onMouseDown"
-      | "onMouseMove"
-      | "onMouseUp"
-      | "onMouseLeave"
-    >,
+  extends TappableElementProps,
     HasRootRef<HTMLElement>,
     AdaptivityProps,
     HasComponent,
@@ -284,7 +286,6 @@ const TappableComponent = ({
     stop(activeDuration >= 100 ? 0 : activeEffectDelay - activeDuration);
   }
 
-  // eslint-disable-next-line vkui/no-object-expression-in-arguments
   const classes = classNames(
     "Tappable",
     platform === IOS && "Tappable--ios",
@@ -294,15 +295,14 @@ const TappableComponent = ({
     hasHover && hovered && !isPresetHoverMode && hoverMode,
     hasActive && active && !isPresetActiveMode && activeMode,
     focusVisible && !isPresetFocusVisibleMode && focusVisibleMode,
-    {
-      "Tappable--active": hasActive && active,
-      "Tappable--mouse": hasMouse,
-      [`Tappable--hover-${hoverMode}`]:
-        hasHover && hovered && isPresetHoverMode,
-      [`Tappable--active-${activeMode}`]:
-        hasActive && active && isPresetActiveMode,
-      "Tappable--focus-visible": focusVisible,
-    }
+    hasActive && active && "Tappable--active",
+    hasMouse && "Tappable--mouse",
+    hasHover && hovered && isPresetHoverMode && `Tappable--hover-${hoverMode}`,
+    hasActive &&
+      active &&
+      isPresetActiveMode &&
+      `Tappable--active-${activeMode}`,
+    focusVisible && "Tappable--focus-visible"
   );
 
   const handlers: RootComponentProps = {

package/src/components/Textarea/Textarea.css

@@ -16,7 +16,7 @@
   padding: 12px;
   max-height: 204px;
   border: none;
-  z-index: 2;
+  z-index: 6;
   position: relative;
   background: transparent;
 }

package/src/components/Textarea/Textarea.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
-import { FormField } from "../FormField/FormField";
+import { FormField, FormFieldProps } from "../FormField/FormField";
 import { HasRef, HasRootRef } from "../../types";
 import { withAdaptivity, AdaptivityProps } from "../../hoc/withAdaptivity";
 import { useEnsuredControl } from "../../hooks/useEnsuredControl";
@@ -12,7 +12,8 @@ export interface TextareaProps
     HasRef<HTMLTextAreaElement>,
     HasRootRef<HTMLElement>,
     AdaptivityProps,
-    Pick<React.CSSProperties, "maxHeight"> {
+    Pick<React.CSSProperties, "maxHeight">,
+    Pick<FormFieldProps, "status"> {
   grow?: boolean;
   onResize?(el: HTMLTextAreaElement): void;
   defaultValue?: string;
@@ -29,6 +30,7 @@ const TextareaComponent = ({
   sizeY,
   rows = 2,
   maxHeight,
+  status,
   ...restProps
 }: TextareaProps) => {
   const [value, onChange] = useEnsuredControl(restProps, { defaultValue });
@@ -61,6 +63,7 @@ const TextareaComponent = ({
       style={style}
       getRootRef={getRootRef}
       disabled={restProps.disabled}
+      status={status}
     >
       <textarea
         {...restProps}

package/src/components/Tooltip/Readme.md

@@ -97,26 +97,26 @@ const Example = () => {
                   <Avatar />
                 </Tooltip>
               }
-              description="Веб-сайт"
+              subtitle="Веб-сайт"
             >
               Команда ВКонтакте
             </SimpleCell>
-            <SimpleCell before={<Avatar />} description="Музыкант">
+            <SimpleCell before={<Avatar />} subtitle="Музыкант">
               Robbie Williams
             </SimpleCell>
-            <SimpleCell before={<Avatar />} description="Издательский дом">
+            <SimpleCell before={<Avatar />} subtitle="Издательский дом">
               ПостНаука
             </SimpleCell>
-            <SimpleCell before={<Avatar />} description="Издательский дом">
+            <SimpleCell before={<Avatar />} subtitle="Издательский дом">
               ПостНаука
             </SimpleCell>
-            <SimpleCell before={<Avatar />} description="Издательский дом">
+            <SimpleCell before={<Avatar />} subtitle="Издательский дом">
               ПостНаука
             </SimpleCell>
-            <SimpleCell before={<Avatar />} description="Издательский дом">
+            <SimpleCell before={<Avatar />} subtitle="Издательский дом">
               ПостНаука
             </SimpleCell>
-            <SimpleCell before={<Avatar />} description="Издательский дом">
+            <SimpleCell before={<Avatar />} subtitle="Издательский дом">
               ПостНаука
             </SimpleCell>
           </List>
@@ -159,7 +159,7 @@ const ExampleWithPlatform = withPlatform(Example);
       border: "1px solid",
       margin: "100px 100px 0",
       position: "relative",
-      background: "var(--background_content)",
+      background: "var(--vkui--color_background_content)",
       zIndex: 1,
     }}
   >
@@ -175,7 +175,7 @@ const ExampleWithPlatform = withPlatform(Example);
       border: "1px solid",
       margin: "64px 100px 100px",
       position: "relative",
-      background: "var(--background_content)",
+      background: "var(--vkui--color_background_content)",
       zIndex: 1,
     }}
   >

package/src/components/Touch/Readme.md

@@ -9,7 +9,7 @@ const circleStyle = {
   width: 40,
   height: 40,
   borderRadius: "50%",
-  background: "var(--accent)",
+  background: "var(--vkui--color_background_accent)",
   position: "absolute",
   left: "50%",
   top: "50%",
@@ -19,7 +19,7 @@ const circleStyle = {
 
 const containerStyle = {
   height: 200,
-  border: "8px solid var(--icon_secondary)",
+  border: "8px solid var(--vkui--color_icon_secondary)",
   position: "relative",
 };
 
@@ -91,8 +91,8 @@ class Example extends React.Component {
               style={{
                 ...containerStyle,
                 borderColor: this.limitExceeded
-                  ? "var(--destructive)"
-                  : "var(--icon_secondary)",
+                  ? "var(--vkui--color_icon_negative)"
+                  : "var(--vkui--color_icon_secondary)",
               }}
             >
               <Touch

package/src/components/UsersStack/UsersStack.css

@@ -71,3 +71,45 @@
 .ModalCardBase .UsersStack {
   margin-top: 20px;
 }
+
+.UsersStack__mask--16-left {
+  clip-path: path(
+    "M2,13.285A8 8 0 0 0 8 16A8 8 0 0 0 8 0A8 8 0 0 0 2 2.715A8 8 0 0 1 2,13.285"
+  );
+}
+
+.UsersStack__mask--16-circle {
+  clip-path: circle(8px);
+}
+
+.UsersStack__mask--24-left {
+  clip-path: path(
+    "M2,18.625A12 12 0 0 0 12 24A12 12 0 0 0 12 0A12 12 0 0 0 2 5.375A12 12 0 0 1 2,18.625"
+  );
+}
+
+.UsersStack__mask--24-circle {
+  clip-path: circle(12px);
+}
+
+.UsersStack__mask--24-right {
+  clip-path: path(
+    "M22,18.625A12 12 0 0 1 12 24A12 12 0 0 1 12 0A12 12 0 0 1 22 5.375A12 12 0 0 0 22,18.625"
+  );
+}
+
+.UsersStack__mask--32-left {
+  clip-path: path(
+    "M2,23.75A16 16 0 0 0 16 32A16 16 0 0 0 16 0A16 16 0 0 0 2 8.25A16 16 0 0 1 2,23.75"
+  );
+}
+
+.UsersStack__mask--32-circle {
+  clip-path: circle(16px);
+}
+
+.UsersStack__mask--32-right {
+  clip-path: path(
+    "M30,23.75A16 16 0 0 1 16 32A16 16 0 0 1 16 0A16 16 0 0 1 30 8.25A16 16 0 0 0 30,23.75"
+  );
+}

package/src/components/UsersStack/UsersStack.tsx

@@ -1,11 +1,8 @@
 import * as React from "react";
 import { hasReactNode } from "../../lib/utils";
 import { classNames } from "../../lib/classNames";
-import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
 import { Footnote } from "../Typography/Footnote/Footnote";
 import { Caption } from "../Typography/Caption/Caption";
-import { createMasks } from "./masks";
-import { useDOM } from "../../lib/dom";
 import "./UsersStack.css";
 
 export interface UsersStackProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -26,6 +23,71 @@ export interface UsersStackProps extends React.HTMLAttributes<HTMLDivElement> {
    * Если в массиве `photos` больше элементов и используется размер `m`, то будет показано количество остальных элементов
    */
   visibleCount?: number;
+  /**
+   * Число, которое будет указано в счетчике.
+   * По умолчанию высчитывается по формуле `photos.length - visibleCount`.
+   * Если число больше 99, то счетчик скроется.
+   */
+  count?: number;
+}
+
+interface PathElementProps extends React.SVGAttributes<SVGElement> {
+  photoSize: number;
+  direction: "circle" | "right" | "left";
+}
+
+function PathElement({ photoSize, direction, ...props }: PathElementProps) {
+  switch (direction) {
+    case "circle":
+      const radius = photoSize / 2;
+
+      return <circle cx={radius} cy={radius} r={radius} {...props} />;
+
+    case "right":
+      switch (photoSize) {
+        case 24:
+          return (
+            <path
+              d="M22,18.625A12 12 0 0 1 12 24A12 12 0 0 1 12 0A12 12 0 0 1 22 5.375A12 12 0 0 0 22,18.625"
+              {...props}
+            />
+          );
+
+        default:
+          return (
+            <path
+              d="M30,23.75A16 16 0 0 1 16 32A16 16 0 0 1 16 0A16 16 0 0 1 30 8.25A16 16 0 0 0 30,23.75"
+              {...props}
+            />
+          );
+      }
+
+    default:
+      switch (photoSize) {
+        case 16:
+          return (
+            <path
+              d="M2,13.285A8 8 0 0 0 8 16A8 8 0 0 0 8 0A8 8 0 0 0 2 2.715A8 8 0 0 1 2,13.285"
+              {...props}
+            />
+          );
+        case 24:
+          return (
+            <path
+              d="M2,18.625A12 12 0 0 0 12 24A12 12 0 0 0 12 0A12 12 0 0 0 2 5.375A12 12 0 0 1 2,18.625"
+              {...props}
+            />
+          );
+
+        default:
+          return (
+            <path
+              d="M2,23.75A16 16 0 0 0 16 32A16 16 0 0 0 16 0A16 16 0 0 0 2 8.25A16 16 0 0 1 2,23.75"
+              {...props}
+            />
+          );
+      }
+  }
 }
 
 /**
@@ -34,19 +96,13 @@ export interface UsersStackProps extends React.HTMLAttributes<HTMLDivElement> {
 export const UsersStack = ({
   photos = [],
   visibleCount = 3,
+  count = Math.max(0, photos.length - visibleCount),
   size = "s",
   layout = "horizontal",
   children,
   ...restProps
 }: UsersStackProps) => {
-  const { document } = useDOM();
-
-  useIsomorphicLayoutEffect(() => {
-    createMasks(document);
-  }, [document]);
-
-  const othersCount = Math.max(0, photos.length - visibleCount);
-  const canShowOthers = othersCount > 0 && size !== "xs";
+  const canShowOthers = count > 0 && size !== "xs";
   const CounterTypography = size === "m" ? Footnote : Caption;
 
   const photoSize = {
@@ -73,9 +129,6 @@ export const UsersStack = ({
           const direction =
             i === 0 && !canShowOthers ? "circle" : directionClip;
 
-          const pathHref = `#users_stack_${photoSize}_${direction}`;
-          const clipPathHref = `url(#users_stack_mask_${photoSize}_${direction})`;
-
           return (
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -83,10 +136,19 @@ export const UsersStack = ({
               key={i}
               aria-hidden
             >
-              <g clipPath={clipPathHref}>
-                <use vkuiClass="UsersStack__fill" href={pathHref} />
+              <g vkuiClass={`UsersStack__mask--${photoSize}-${direction}`}>
+                <PathElement
+                  direction={direction}
+                  photoSize={photoSize}
+                  vkuiClass="UsersStack__fill"
+                />
                 <image href={photo} width={photoSize} height={photoSize} />
-                <use href={pathHref} fill="none" stroke="rgba(0, 0, 0, 0.08)" />
+                <PathElement
+                  direction={direction}
+                  photoSize={photoSize}
+                  fill="none"
+                  stroke="rgba(0, 0, 0, 0.08)"
+                />
               </g>
             </svg>
           );
@@ -100,7 +162,7 @@ export const UsersStack = ({
             vkuiClass="UsersStack__photo UsersStack__photo--others"
             aria-hidden
           >
-            <span>+{othersCount}</span>
+            <span>+{count}</span>
           </CounterTypography>
         )}
       </div>

package/src/components/View/Readme.md

@@ -44,12 +44,12 @@ const [activePanel, setActivePanel] = useState("panel1");
 ### <a id="/View?id=iosswipeback"></a>[iOS Swipe Back](https://vkcom.github.io/VKUI/#/View?id=iosswipeback)
 
 В iOS есть возможность свайпнуть от левого края назад, чтобы перейти на предыдущую панель. Для того, чтобы
-повторить такое поведение в VKUI нужно:
+повторить такое поведение в VKUI, нужно:
 
 - Передать во `View` коллбек `onSwipeBack` — он сработает при завершении анимации свайпа. Поменяйте в нем `activePanel` и обновите `history`.
 - Передать во `View` проп `history` — массив из id панелей в порядке открытия. Например, если пользователь из `main` перешел в `profile`, а оттуда попал в `education`, то `history=['main', 'profile', 'education']`.
 - Обернуть ваше приложение в `ConfigProvider` — он определит, открыто приложение в webview клиента VK или в браузере (там есть свой swipe back, который будет конфликтовать с нашим). Для проверки в браузере форсируйте определение webview: `<ConfigProvider isWebView>`.
-- На первой панели должен включаться свайпбек нативного клиента, чтобы пользователь смог выйти из приложения — для этого используют `vk-bridge`. **Если вы не из ВК,** при переходах отправляйте [событие `VKWebAppSetSwipeSettings`](https://dev.vk.com/bridge/VKWebAppSetSwipeSettings) с `history: true` на первой панели или `history: false` на других. **Если вы из ВК,** при переходе на первую панель отправляйте событие `VKWebAppEnableSwipeBack`, на любую другую — `VKWebAppDisableSwipeBack`.
+- На первой панели должен включаться свайпбек нативного клиента, чтобы пользователь смог выйти из приложения — для этого используют `vk-bridge`. **Если вы делаете стандартное мини-приложение ВКонтакте,** при переходах отправляйте [событие `VKWebAppSetSwipeSettings`](https://dev.vk.com/bridge/VKWebAppSetSwipeSettings) с `history: true` на первой панели или `history: false` на других. **Если тип вашего мини-приложения — `WebviewType.INTERNAL`,** отправляйте событие `VKWebAppEnableSwipeBack` при переходе на первую панель и событие `VKWebAppDisableSwipeBack` при переходе на любую другух.
 - Компоненты, которые сами обрабатывают жесты (например, карта), могут конфликтовать со свайпбеком — повесьте на них свойство `data-vkui-swipe-back={false}`
 
 ```jsx
@@ -60,12 +60,12 @@ const activePanel = history[history.length - 1];
 const isFirst = history.length === 1;
 
 React.useEffect(() => {
-  // Если вы из ВК, делайте так
+  // В стандартных мини-приложениях делайте так:
+  vkBridge.send("VKWebAppSetSwipeSettings", { history: isFirst });
+  // В мини-приложениях `WebviewType.INTERNAL` делайте так:
   vkBridge.send(
     isFirst ? "VKWebAppEnableSwipeBack" : "VKWebAppDisableSwipeBack"
   );
-  // Если вы не из ВК, то так:
-  vkBridge.send("VKWebAppSetSwipeSettings", { history: isFirst });
 }, [isFirst]);
 
 const goBack = () => setHistory(history.slice(0, -1));

package/src/components/View/View.tsx

@@ -167,9 +167,6 @@ export const View = ({
   const prevSwipeBackPrevPanel = usePrevious(swipeBackPrevPanel);
   const prevOnTransition = usePrevious(onTransition);
 
-  const hasPopout = !!popout;
-  const hasModal = !!modal;
-
   const panels = (
     React.Children.toArray(children) as React.ReactElement[]
   ).filter((panel: React.ReactElement) => {
@@ -402,10 +399,6 @@ export const View = ({
     popout && blurActiveElement(document);
   }, [document, popout]);
 
-  React.useEffect(() => {
-    modal && blurActiveElement(document);
-  }, [document, modal]);
-
   React.useEffect(() => {
     // Нужен переход
     if (
@@ -606,8 +599,8 @@ export const View = ({
         })}
       </div>
       <AppRootPortal>
-        {hasPopout && <div vkuiClass="View__popout">{popout}</div>}
-        {hasModal && <div vkuiClass="View__modal">{modal}</div>}
+        {!!popout && <div vkuiClass="View__popout">{popout}</div>}
+        {!!modal && <div vkuiClass="View__modal">{modal}</div>}
       </AppRootPortal>
     </Touch>
   );

package/src/components/View/ViewInfinite.tsx

@@ -672,20 +672,20 @@ class ViewInfiniteComponent extends React.Component<
 
             return (
               <div
-                // eslint-disable-next-line vkui/no-object-expression-in-arguments
-                vkuiClass={classNames("View__panel", {
-                  "View__panel--active": panelId === activePanel,
-                  "View__panel--prev": panelId === prevPanel,
-                  "View__panel--next": panelId === nextPanel,
-                  "View__panel--swipe-back-prev":
-                    panelId === swipeBackPrevPanel,
-                  "View__panel--swipe-back-next":
-                    panelId === swipeBackNextPanel,
-                  "View__panel--swipe-back-success":
-                    swipeBackResult === SwipeBackResults.success,
-                  "View__panel--swipe-back-failed":
-                    swipeBackResult === SwipeBackResults.fail,
-                })}
+                vkuiClass={classNames(
+                  "View__panel",
+                  panelId === activePanel && "View__panel--active",
+                  panelId === prevPanel && "View__panel--prev",
+                  panelId === nextPanel && "View__panel--next",
+                  panelId === swipeBackPrevPanel &&
+                    "View__panel--swipe-back-prev",
+                  panelId === swipeBackNextPanel &&
+                    "View__panel--swipe-back-next",
+                  swipeBackResult === SwipeBackResults.success &&
+                    "View__panel--swipe-back-success",
+                  swipeBackResult === SwipeBackResults.fail &&
+                    "View__panel--swipe-back-failed"
+                )}
                 onAnimationEnd={
                   isTransitionTarget ? this.transitionEndHandler : undefined
                 }