@vkontakte/vkui 4.29.1 → 4.32.0

package/src/components/Gradient/Gradient.tsx

@@ -7,6 +7,9 @@ export interface GradientProps extends React.HTMLAttributes<HTMLDivElement> {
   to?: "top" | "bottom";
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/Gradient
+ */
 export const Gradient: React.FC<GradientProps> = ({
   mode = "tint",
   children,

package/src/components/GridAvatar/GridAvatar.tsx

@@ -15,6 +15,10 @@ export interface GridAvatarProps
 export const MAX_GRID_LENGTH = 4;
 
 const warn = warnOnce("GridAvatar");
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/GridAvatar
+ */
 export const GridAvatar: React.FC<GridAvatarProps> = ({
   src = [],
   ...restProps

package/src/components/Group/Group.tsx

@@ -3,7 +3,7 @@ import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
 import { HasRootRef } from "../../types";
 import { usePlatform } from "../../hooks/usePlatform";
-import Separator from "../Separator/Separator";
+import { Separator } from "../Separator/Separator";
 import { hasReactNode } from "../../lib/utils";
 import { Caption } from "../Typography/Caption/Caption";
 import {
@@ -35,6 +35,9 @@ export interface GroupProps
   mode?: "plain" | "card";
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/Group
+ */
 const Group: React.FC<GroupProps> = (props: GroupProps) => {
   const {
     header,

package/src/components/Group/Readme.md

@@ -96,14 +96,14 @@ class App extends React.Component {
           onClose={() => this.setState({ isModalOpened: false })}
           header={
             <ModalPageHeader
-              left={
+              before={
                 this.props.platform !== IOS && (
                   <PanelHeaderClose
                     onClick={() => this.setState({ isModalOpened: false })}
                   />
                 )
               }
-              right={
+              after={
                 this.props.platform === IOS && (
                   <PanelHeaderButton
                     onClick={() => this.setState({ isModalOpened: false })}

package/src/components/Header/Header.tsx

@@ -5,10 +5,10 @@ import { usePlatform } from "../../hooks/usePlatform";
 import { HasComponent, HasPlatform, HasRootRef } from "../../types";
 import { hasReactNode, isPrimitiveReactNode } from "../../lib/utils";
 import { Platform } from "../../lib/platform";
-import Headline from "../Typography/Headline/Headline";
+import { Headline } from "../Typography/Headline/Headline";
 import { Caption } from "../Typography/Caption/Caption";
 import { Title } from "../Typography/Title/Title";
-import Text from "../Typography/Text/Text";
+import { Text } from "../Typography/Text/Text";
 import { Subhead } from "../Typography/Subhead/Subhead";
 import "./Header.css";
 
@@ -50,7 +50,7 @@ const HeaderContent: React.FC<HeaderContentProps> = ({
   if (platform === Platform.VKCOM) {
     switch (mode) {
       case "primary":
-        return <Headline weight="regular" {...restProps} />;
+        return <Headline weight="3" {...restProps} />;
       case "secondary":
       case "tertiary":
         return <Caption {...restProps} />;
@@ -60,7 +60,7 @@ const HeaderContent: React.FC<HeaderContentProps> = ({
   switch (mode) {
     case "primary":
     case "tertiary":
-      return <Headline weight="medium" {...restProps} />;
+      return <Headline weight="2" {...restProps} />;
     case "secondary":
       return <Caption weight="1" caps {...restProps} />;
   }
@@ -68,33 +68,9 @@ const HeaderContent: React.FC<HeaderContentProps> = ({
   return null;
 };
 
-type HeaderAsideProps = Pick<HeaderProps, "aside"> & HasPlatform & HasComponent;
-
-const HeaderAside: React.FC<HeaderAsideProps> = ({
-  platform,
-  ...restProps
-}) => {
-  return platform === Platform.VKCOM ? (
-    <Subhead {...restProps} />
-  ) : (
-    <Text weight="regular" {...restProps} />
-  );
-};
-
-type HeaderSubtitleProps = Pick<HeaderProps, "subtitle" | "mode"> &
-  HasComponent;
-
-const HeaderSubtitle: React.FC<HeaderSubtitleProps> = ({
-  mode,
-  ...restProps
-}) => {
-  return mode === "secondary" ? (
-    <Subhead {...restProps} />
-  ) : (
-    <Caption {...restProps} />
-  );
-};
-
+/**
+ * @see https://vkcom.github.io/VKUI/#/Header
+ */
 const Header: React.FC<HeaderProps> = ({
   mode,
   children,
@@ -107,6 +83,9 @@ const Header: React.FC<HeaderProps> = ({
 }: HeaderProps) => {
   const platform = usePlatform();
 
+  const AsideTypography = platform === Platform.VKCOM ? Subhead : Text;
+  const SubtitleTypography = mode === "secondary" ? Subhead : Caption;
+
   return (
     <header
       {...restProps}
@@ -146,24 +125,16 @@ const Header: React.FC<HeaderProps> = ({
         </HeaderContent>
 
         {hasReactNode(subtitle) && (
-          <HeaderSubtitle
-            vkuiClass="Header__subtitle"
-            Component="span"
-            mode={mode}
-          >
+          <SubtitleTypography vkuiClass="Header__subtitle" Component="span">
             {subtitle}
-          </HeaderSubtitle>
+          </SubtitleTypography>
         )}
       </div>
 
       {hasReactNode(aside) && (
-        <HeaderAside
-          vkuiClass="Header__aside"
-          Component="span"
-          platform={platform}
-        >
+        <AsideTypography vkuiClass="Header__aside" Component="span">
           {aside}
-        </HeaderAside>
+        </AsideTypography>
       )}
     </header>
   );

package/src/components/HorizontalCell/HorizontalCell.tsx

@@ -39,6 +39,9 @@ export interface HorizontalCellProps
   disabled?: boolean;
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/HorizontalCell
+ */
 export const HorizontalCell: React.FC<HorizontalCellProps> = ({
   className,
   header,

package/src/components/HorizontalScroll/HorizontalScroll.tsx

@@ -220,6 +220,9 @@ const HorizontalScrollComponent: React.FC<HorizontalScrollProps> = ({
   );
 };
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/HorizontalScroll
+ */
 export const HorizontalScroll = withAdaptivity(HorizontalScrollComponent, {
   hasMouse: true,
 });

package/src/components/IconButton/IconButton.tsx

@@ -16,6 +16,10 @@ export interface IconButtonProps extends TappableProps {
 }
 
 const warn = warnOnce("IconButton");
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/IconButton
+ */
 const IconButton: React.FC<IconButtonProps> = ({
   icon,
   sizeY,

package/src/components/InfoRow/InfoRow.css

@@ -7,7 +7,7 @@
 .InfoRow__header {
   display: block;
   margin-bottom: 2px;
-  color: var(--text_subhead);
+  color: var(--text_subhead, var(--vkui--color_text_subhead));
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

package/src/components/InfoRow/InfoRow.tsx

@@ -1,8 +1,6 @@
 import * as React from "react";
 import { Subhead } from "../Typography/Subhead/Subhead";
-import { getClassName } from "../../helpers/getClassName";
-import { usePlatform } from "../../hooks/usePlatform";
-import Headline from "../Typography/Headline/Headline";
+import { Headline } from "../Typography/Headline/Headline";
 import { hasReactNode } from "../../lib/utils";
 import "./InfoRow.css";
 
@@ -10,28 +8,20 @@ export interface InfoRowProps extends React.HTMLAttributes<HTMLDivElement> {
   header: React.ReactNode;
 }
 
-const InfoRow: React.FunctionComponent<InfoRowProps> = ({
+/**
+ * @see https://vkcom.github.io/VKUI/#/InfoRow
+ */
+export const InfoRow: React.FunctionComponent<InfoRowProps> = ({
   header,
   children,
   ...restProps
-}: InfoRowProps) => {
-  const platform = usePlatform();
-
-  return (
-    <Headline
-      {...restProps}
-      vkuiClass={getClassName("InfoRow", platform)}
-      weight="regular"
-    >
-      {hasReactNode(header) && (
-        <Subhead Component="span" vkuiClass="InfoRow__header">
-          {header}
-        </Subhead>
-      )}
-      {children}
-    </Headline>
-  );
-};
-
-// eslint-disable-next-line import/no-default-export
-export default InfoRow;
+}: InfoRowProps) => (
+  <Headline {...restProps} vkuiClass="InfoRow" weight="3">
+    {hasReactNode(header) && (
+      <Subhead Component="span" vkuiClass="InfoRow__header">
+        {header}
+      </Subhead>
+    )}
+    {children}
+  </Headline>
+);

package/src/components/InitialsAvatar/InitialsAvatar.tsx

@@ -62,6 +62,9 @@ function getInitialsFontSize(avatarSize: number) {
   return calculatedFontSize + evenFix;
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/InitialsAvatar
+ */
 export const InitialsAvatar: React.FC<InitialsAvatarProps> = ({
   size = AVATAR_DEFAULT_SIZE,
   children,

package/src/components/Input/Input.tsx

@@ -47,6 +47,9 @@ const InputComponent: React.FunctionComponent<InputProps> = ({
   );
 };
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/Input
+ */
 export const Input = withAdaptivity(InputComponent, {
   sizeY: true,
 });

package/src/components/Link/Link.tsx

@@ -6,6 +6,9 @@ import "./Link.css";
 
 export type LinkProps = TappableProps;
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/Link
+ */
 const Link: React.FC<LinkProps> = ({ children, ...restProps }: LinkProps) => {
   const platform = usePlatform();
 

package/src/components/List/List.tsx

@@ -5,6 +5,9 @@ import { usePlatform } from "../../hooks/usePlatform";
 import { ListContext } from "./ListContext";
 import "./List.css";
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/List
+ */
 const List: React.FunctionComponent<React.HTMLAttributes<HTMLDivElement>> = ({
   children,
   ...restProps

package/src/components/MiniInfoCell/MiniInfoCell.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { classNames } from "../../lib/classNames";
 import { usePlatform } from "../../hooks/usePlatform";
 import { getClassName } from "../../helpers/getClassName";
-import Text from "../Typography/Text/Text";
+import { Text } from "../Typography/Text/Text";
 import Tappable from "../../components/Tappable/Tappable";
 import { hasReactNode } from "../../lib/utils";
 import "./MiniInfoCell.css";
@@ -49,6 +49,9 @@ export interface MiniInfoCellProps
   textLevel?: "primary" | "secondary";
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/MiniInfoCell
+ */
 export const MiniInfoCell: React.FC<MiniInfoCellProps> = (
   props: MiniInfoCellProps
 ) => {
@@ -77,7 +80,7 @@ export const MiniInfoCell: React.FC<MiniInfoCellProps> = (
       <span vkuiClass="MiniInfoCell__icon">{before}</span>
       <Text
         vkuiClass="MiniInfoCell__content"
-        weight={mode === "more" ? "medium" : "regular"}
+        weight={mode === "more" ? "2" : undefined}
       >
         {children}
       </Text>

package/src/components/MiniInfoCell/Readme.md

@@ -16,14 +16,14 @@ function MiniInfoCellExample() {
       <ModalPage
         header={
           <ModalPageHeader
-            left={
+            before={
               (platform === ANDROID || platform === VKCOM) && (
                 <PanelHeaderButton onClick={closeModal}>
                   <Icon24Cancel />
                 </PanelHeaderButton>
               )
             }
-            right={
+            after={
               platform === IOS && (
                 <PanelHeaderButton onClick={closeModal}>
                   <Icon24Dismiss />

package/src/components/ModalCard/ModalCard.tsx

@@ -3,11 +3,7 @@ import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
 import { withPlatform } from "../../hoc/withPlatform";
 import { HasPlatform } from "../../types";
-import {
-  withAdaptivity,
-  ViewHeight,
-  ViewWidth,
-} from "../../hoc/withAdaptivity";
+import { withAdaptivity } from "../../hoc/withAdaptivity";
 import ModalRootContext, {
   useModalRegistry,
 } from "../ModalRoot/ModalRootContext";
@@ -22,6 +18,7 @@ import {
   AdaptivityContextInterface,
   AdaptivityProps,
 } from "../AdaptivityProvider/AdaptivityContext";
+import { useAdaptivityIsDesktop } from "../../hooks/useAdaptivity";
 import "./ModalCard.css";
 
 export interface ModalCardProps
@@ -32,6 +29,9 @@ export interface ModalCardProps
 
 const warn = warnOnce("ModalCard");
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/ModalCard
+ */
 const ModalCard: React.FC<ModalCardProps & AdaptivityContextInterface> = (
   props
 ) => {
@@ -51,9 +51,7 @@ const ModalCard: React.FC<ModalCardProps & AdaptivityContextInterface> = (
     ...restProps
   } = props;
 
-  const isDesktop =
-    viewWidth >= ViewWidth.SMALL_TABLET &&
-    (hasMouse || viewHeight >= ViewHeight.MEDIUM);
+  const isDesktop = useAdaptivityIsDesktop();
 
   const modalContext = React.useContext(ModalRootContext);
   const { refs } = useModalRegistry(getNavId(props, warn), ModalType.CARD);

package/src/components/ModalCardBase/ModalCardBase.tsx

@@ -1,22 +1,19 @@
 import * as React from "react";
 import { hasReactNode } from "../../lib/utils";
 import { Title } from "../Typography/Title/Title";
-import Headline from "../Typography/Headline/Headline";
+import { Subhead } from "../Typography/Subhead/Subhead";
 import { classNames } from "../../lib/classNames";
 import { getClassName } from "../../helpers/getClassName";
 import { usePlatform } from "../../hooks/usePlatform";
-import {
-  ViewHeight,
-  ViewWidth,
-  withAdaptivity,
-} from "../../hoc/withAdaptivity";
+import { ViewWidth, withAdaptivity } from "../../hoc/withAdaptivity";
 import { HasRootRef } from "../../types";
 import { PanelHeaderButton } from "../PanelHeaderButton/PanelHeaderButton";
-import { ANDROID, IOS } from "../../lib/platform";
+import { ANDROID, IOS, Platform } from "../../lib/platform";
 import ModalDismissButton from "../ModalDismissButton/ModalDismissButton";
 import { Icon24Dismiss } from "@vkontakte/icons";
 import { useKeyboard } from "../../hooks/useKeyboard";
 import { AdaptivityContextInterface } from "../AdaptivityProvider/AdaptivityContext";
+import { useAdaptivityIsDesktop } from "../../hooks/useAdaptivity";
 import "./ModalCardBase.css";
 
 export interface ModalCardBaseProps
@@ -58,6 +55,9 @@ export interface ModalCardBaseProps
   dismissLabel?: string;
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/ModalCardBase
+ */
 export const ModalCardBase = withAdaptivity<
   ModalCardBaseProps & AdaptivityContextInterface
 >(
@@ -77,12 +77,11 @@ export const ModalCardBase = withAdaptivity<
     ...restProps
   }) => {
     const platform = usePlatform();
-    const isDesktop =
-      viewWidth >= ViewWidth.SMALL_TABLET &&
-      (hasMouse || viewHeight >= ViewHeight.MEDIUM);
+    const isDesktop = useAdaptivityIsDesktop();
     const isSoftwareKeyboardOpened = useKeyboard().isOpened;
 
-    const canShowCloseBtn = viewWidth >= ViewWidth.SMALL_TABLET;
+    const canShowCloseBtn =
+      viewWidth >= ViewWidth.SMALL_TABLET || platform === Platform.VKCOM;
     const canShowCloseBtnIos = platform === IOS && !canShowCloseBtn;
 
     return (
@@ -114,9 +113,7 @@ export const ModalCardBase = withAdaptivity<
             </Title>
           )}
           {hasReactNode(subheader) && (
-            <Headline weight="regular" vkuiClass="ModalCardBase__subheader">
-              {subheader}
-            </Headline>
+            <Subhead vkuiClass="ModalCardBase__subheader">{subheader}</Subhead>
           )}
 
           {children}

package/src/components/ModalDismissButton/ModalDismissButton.tsx

@@ -7,6 +7,9 @@ import "./ModalDismissButton.css";
 
 export type ModalDismissButtonProps = React.HTMLAttributes<HTMLButtonElement>;
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/ModalDismissButton
+ */
 const ModalDismissButton: React.FC<ModalDismissButtonProps> = (
   props: ModalDismissButtonProps
 ) => {

package/src/components/ModalPage/ModalPage.tsx

@@ -7,11 +7,7 @@ import {
 } from "../ModalRoot/ModalRootContext";
 import { usePlatform } from "../../hooks/usePlatform";
 import { useOrientationChange } from "../../hooks/useOrientationChange";
-import {
-  withAdaptivity,
-  ViewHeight,
-  ViewWidth,
-} from "../../hoc/withAdaptivity";
+import { withAdaptivity, ViewWidth } from "../../hoc/withAdaptivity";
 import {
   AdaptivityContextInterface,
   AdaptivityProps,
@@ -21,6 +17,8 @@ import { multiRef } from "../../lib/utils";
 import { ModalType } from "../ModalRoot/types";
 import { getNavId, NavIdProps } from "../../lib/getNavId";
 import { warnOnce } from "../../lib/warnOnce";
+import { Platform } from "../../lib/platform";
+import { useAdaptivityIsDesktop } from "../../hooks/useAdaptivity";
 import "./ModalPage.css";
 
 export interface ModalPageProps
@@ -59,6 +57,10 @@ export interface ModalPageProps
 }
 
 const warn = warnOnce("ModalPage");
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/ModalPage
+ */
 const ModalPage: React.FC<ModalPageProps & AdaptivityContextInterface> = (
   props
 ) => {
@@ -91,10 +93,9 @@ const ModalPage: React.FC<ModalPageProps & AdaptivityContextInterface> = (
     updateModalHeight,
   ]);
 
-  const isDesktop =
-    viewWidth >= ViewWidth.SMALL_TABLET &&
-    (hasMouse || viewHeight >= ViewHeight.MEDIUM);
-  const canShowCloseBtn = viewWidth >= ViewWidth.SMALL_TABLET;
+  const isDesktop = useAdaptivityIsDesktop();
+  const canShowCloseBtn =
+    viewWidth >= ViewWidth.SMALL_TABLET || platform === Platform.VKCOM;
 
   const modalContext = React.useContext(ModalRootContext);
   const { refs } = useModalRegistry(getNavId(props, warn), ModalType.PAGE);

package/src/components/ModalPageHeader/ModalPageHeader.tsx

@@ -1,13 +1,12 @@
 import * as React from "react";
 import { usePlatform } from "../../hooks/usePlatform";
+import { useAdaptivityIsDesktop } from "../../hooks/useAdaptivity";
 import { HasRef } from "../../types";
 import { VKCOM } from "../../lib/platform";
-import PanelHeader, { PanelHeaderProps } from "../PanelHeader/PanelHeader";
-import Separator from "../Separator/Separator";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { Separator } from "../Separator/Separator";
+import { PanelHeader, PanelHeaderProps } from "../PanelHeader/PanelHeader";
 import { classNames } from "../../lib/classNames";
 import { getClassName } from "../../helpers/getClassName";
-import { ViewHeight, ViewWidth } from "../AdaptivityProvider/AdaptivityContext";
 import "./ModalPageHeader.css";
 
 export interface ModalPageHeaderProps
@@ -15,25 +14,25 @@ export interface ModalPageHeaderProps
     Omit<PanelHeaderProps, "fixed" | "shadow">,
     HasRef<HTMLDivElement> {}
 
-const ModalPageHeader: React.FunctionComponent<ModalPageHeaderProps> = ({
+/**
+ * @see https://vkcom.github.io/VKUI/#/ModalPageHeader
+ */
+export const ModalPageHeader = ({
   children,
-  separator,
+  separator = true,
   getRef,
   ...restProps
 }: ModalPageHeaderProps) => {
   const platform = usePlatform();
-  const { viewWidth, viewHeight, hasMouse } = useAdaptivity();
   const hasSeparator = separator && platform === VKCOM;
-  const isDesktop =
-    viewWidth >= ViewWidth.SMALL_TABLET &&
-    (hasMouse || viewHeight >= ViewHeight.MEDIUM);
+  const isDesktop = useAdaptivityIsDesktop();
 
   return (
     <div
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
-      vkuiClass={classNames(getClassName("ModalPageHeader", platform), {
-        "ModalPageHeader--desktop": isDesktop,
-      })}
+      vkuiClass={classNames(
+        getClassName("ModalPageHeader", platform),
+        isDesktop && "ModalPageHeader--desktop"
+      )}
       ref={getRef}
     >
       <PanelHeader
@@ -49,10 +48,3 @@ const ModalPageHeader: React.FunctionComponent<ModalPageHeaderProps> = ({
     </div>
   );
 };
-
-ModalPageHeader.defaultProps = {
-  separator: true,
-};
-
-// eslint-disable-next-line import/no-default-export
-export default ModalPageHeader;

package/src/components/ModalPageHeader/Readme.md

@@ -1,5 +1,5 @@
 Шапка в модальных страницах.
-Имеет очень похожую логику на [`PanelHeader`](#!/PanelHeader): два свойства `left` и `right` для иконок и название модальной страницы, передаваемое как `children`.
+Имеет очень похожую логику на [`PanelHeader`](#!/PanelHeader): два свойства `before` и `after` для иконок и название модальной страницы, передаваемое как `children`.
 
 ### Требования по расположению кнопок
 
@@ -16,7 +16,7 @@ const platform = usePlatform();
 
 return (
   <ModalPageHeader
-    left={
+    before={
       <Fragment>
         {(platform === ANDROID || platform === VKCOM) && (
           <PanelHeaderButton onClick={this.backModal}>
@@ -25,7 +25,7 @@ return (
         )}
       </Fragment>
     }
-    right={
+    after={
       <Fragment>
         {(platform === ANDROID || platform === VKCOM) && (
           <PanelHeaderButton onClick={this.backModal}>

package/src/components/ModalRoot/ModalRoot.css

@@ -41,7 +41,7 @@
 
 :not(.ModalRoot--desktop).ModalRoot--vkapps.ModalRoot--android
   .ModalRoot__viewport {
-  top: calc(var(--safe-area-inset-top) + var(--panelheader_height_android));
+  top: calc(var(--safe-area-inset-top) + var(--panelheader_height));
 }
 
 :not(.ModalRoot--desktop).ModalRoot--vkapps.ModalRoot--ios

package/src/components/ModalRoot/ModalRootAdaptive.tsx

@@ -1,9 +1,5 @@
 import * as React from "react";
-import {
-  withAdaptivity,
-  ViewHeight,
-  ViewWidth,
-} from "../../hoc/withAdaptivity";
+import { withAdaptivity } from "../../hoc/withAdaptivity";
 import { ModalRootTouch } from "./ModalRoot";
 import { ModalRootDesktop } from "./ModalRootDesktop";
 import {
@@ -11,6 +7,7 @@ import {
   AdaptivityProps,
 } from "../AdaptivityProvider/AdaptivityContext";
 import { useScrollLock } from "../AppRoot/ScrollContext";
+import { useAdaptivityIsDesktop } from "../../hooks/useAdaptivity";
 
 export interface ModalRootProps extends AdaptivityProps {
   activeModal?: string | null;
@@ -39,10 +36,7 @@ export interface ModalRootProps extends AdaptivityProps {
 const ModalRootComponent: React.FC<
   ModalRootProps & AdaptivityContextInterface
 > = (props) => {
-  const { viewWidth, viewHeight, hasMouse } = props;
-  const isDesktop =
-    viewWidth >= ViewWidth.SMALL_TABLET &&
-    (hasMouse || viewHeight >= ViewHeight.MEDIUM);
+  const isDesktop = useAdaptivityIsDesktop();
 
   useScrollLock(!!props.activeModal);
 
@@ -53,6 +47,9 @@ const ModalRootComponent: React.FC<
 
 ModalRootComponent.displayName = "ModalRoot";
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/ModalRoot
+ */
 export const ModalRoot = withAdaptivity(ModalRootComponent, {
   viewWidth: true,
   viewHeight: true,