npm - @vkontakte/vkui - Versions diffs - 4.29.0 → 4.31.0 - Mend

@vkontakte/vkui 4.29.0 → 4.31.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (439) hide show

package/src/components/CalendarRange/CalendarRange.tsx CHANGED Viewed

@@ -32,6 +32,8 @@ export interface CalendarRangeProps
       | "nextMonthAriaLabel"
       | "changeMonthAriaLabel"
       | "changeYearAriaLabel"
+      | "prevMonthIcon"
+      | "nextMonthIcon"
     >,
     HasRootRef<HTMLDivElement> {
   value?: Array<Date | null>;
@@ -70,6 +72,8 @@ export const CalendarRange: React.FC<CalendarRangeProps> = ({
   changeMonthAriaLabel,
   changeYearAriaLabel,
   changeDayAriaLabel = "Изменить день",
+  prevMonthIcon,
+  nextMonthIcon,
   ...props
 }) => {
   const {
@@ -214,6 +218,7 @@ export const CalendarRange: React.FC<CalendarRangeProps> = ({
           nextMonthAriaLabel={nextMonthAriaLabel}
           changeMonthAriaLabel={changeMonthAriaLabel}
           changeYearAriaLabel={changeYearAriaLabel}
+          prevMonthIcon={prevMonthIcon}
         />
         <CalendarDays
           viewDate={viewDate}
@@ -247,6 +252,7 @@ export const CalendarRange: React.FC<CalendarRangeProps> = ({
           nextMonthAriaLabel={nextMonthAriaLabel}
           changeMonthAriaLabel={changeMonthAriaLabel}
           changeYearAriaLabel={changeYearAriaLabel}
+          nextMonthIcon={nextMonthIcon}
         />
         <CalendarDays
           viewDate={secondViewDate}

package/src/components/Card/Card.css CHANGED Viewed

@@ -63,7 +63,8 @@
 }
 .CardScroll--l .Card {
-  width: 100%;
+  width: calc(100% - var(--vkui--size_base_padding_horizontal--regular) * 2);
+  margin-right: var(--vkui--size_base_padding_horizontal--regular);
 }
 /**

package/src/components/Cell/Cell.css CHANGED Viewed

@@ -52,5 +52,5 @@
  * FormItem
  */
 .FormItem > .Cell {
-  margin: 0 calc(-1 * var(--formitem_padding));
+  margin: 0 calc(-1 * var(--vkui--size_base_padding_horizontal--regular));
 }

package/src/components/CellButton/CellButton.css CHANGED Viewed

@@ -14,7 +14,7 @@
 .FormItem .CellButton {
   width: 100%;
   box-sizing: content-box;
-  margin: 0 calc(-1 * var(--formitem_padding));
+  margin: 0 calc(-1 * var(--vkui--size_base_padding_horizontal--regular));
 }
 .CellButton[disabled] {

package/src/components/Checkbox/Checkbox.css CHANGED Viewed

@@ -5,7 +5,7 @@
 .FormItem .Checkbox {
   width: 100%;
   box-sizing: content-box;
-  margin: 0 calc(-1 * var(--formitem_padding));
+  margin: 0 calc(-1 * var(--vkui--size_base_padding_horizontal--regular));
 }
 .Checkbox__input {

package/src/components/ChipsInput/ChipsInput.tsx CHANGED Viewed

@@ -96,6 +96,7 @@ export const ChipsInput = <Option extends ChipsInputOption>(
     getOptionLabel,
     getNewOptionData,
     renderChip,
+    before,
     after,
     inputAriaLabel,
     ...restProps
@@ -186,6 +187,7 @@ export const ChipsInput = <Option extends ChipsInputOption>(
       className={className}
       style={style}
       disabled={restProps.disabled}
+      before={before}
       after={after}
       onClick={handleClick}
       role="application"

package/src/components/ConfigProvider/ConfigProvider.tsx CHANGED Viewed

@@ -96,7 +96,7 @@ const ConfigProvider: React.FC<ConfigProviderProps> = ({
       target?.hasAttribute("scheme")
     ) {
       warn(
-        '<body scheme> was set before VKUI mount - did you forget scheme="inherit"?'
+        '<body scheme> был установлен перед монтированием VKUI - вы не забыли scheme="inherit"?'
       );
     }
     target?.setAttribute("scheme", normalizedScheme);

package/src/components/CustomSelect/CustomSelect.tsx CHANGED Viewed

@@ -56,7 +56,7 @@ const warn = warnOnce("CustomSelect");
 const checkOptionsValueType = (options: CustomSelectOptionInterface[]) => {
   if (new Set(options.map((item) => typeof item.value)).size > 1) {
     warn(
-      "Some values of your options have different types. CustomSelect onChange always returns a string type.",
+      "Некоторые значения ваших опций имеют разные типы. onChange всегда возвращает строковый тип.",
       "error"
     );
   }
@@ -463,8 +463,8 @@ class CustomSelectComponent extends React.Component<
       if (options) {
         if (process.env.NODE_ENV === "development") {
           warn(
-            "This filtration method is deprecated. Return value of onInputChange will" +
-              " be ignored in v5.0.0. For custom filtration please update props.options by yourself or use filterFn property"
+            "Этот метод фильтрации устарел. Возвращаемое значение onInputChange будет " +
+              "проигнорировано в v5.0.0. Для фильтрации обновляйте props.options самостоятельно или используйте свойство filterFn."
           );
         }
         this.setState({
@@ -637,6 +637,7 @@ class CustomSelectComponent extends React.Component<
   render() {
     const { opened, nativeSelectValue, options: stateOptions } = this.state;
     const {
+      before,
       searchable,
       name,
       className,
@@ -715,6 +716,7 @@ class CustomSelectComponent extends React.Component<
             // TODO Нужно перестать пытаться превратить CustomSelect в select. Тогда эта проблема уйдёт.
             // @ts-ignore
             onClick={onClick}
+            before={before}
             after={icon}
             placeholder={restProps.placeholder}
           />
@@ -733,6 +735,7 @@ class CustomSelectComponent extends React.Component<
               (dropdownOffsetDistance as number) > 0 &&
                 "CustomSelect__open--not-adjacent"
             )}
+            before={before}
             after={icon}
             selectType={selectType}
           >

package/src/components/DateInput/DateInput.tsx CHANGED Viewed

@@ -40,6 +40,12 @@ export interface DateInputProps
       | "changeDayAriaLabel"
       | "showNeighboringMonth"
       | "size"
+      | "viewDate"
+      | "onHeaderChange"
+      | "onNextMonth"
+      | "onPrevMonth"
+      | "prevMonthIcon"
+      | "nextMonthIcon"
     >,
     HasRootRef<HTMLDivElement> {
   calendarPlacement?: Placement;
@@ -118,6 +124,12 @@ export const DateInput: React.FC<DateInputProps> = ({
   changeMinutesAriaLabel = "Изменить минуту",
   clearFieldAriaLabel = "Очистить поле",
   showCalendarAriaLabel = "Показать календарь",
+  viewDate,
+  onHeaderChange,
+  onNextMonth,
+  onPrevMonth,
+  prevMonthIcon,
+  nextMonthIcon,
   ...props
 }) => {
   const daysRef = React.useRef<HTMLSpanElement>(null);
@@ -309,6 +321,12 @@ export const DateInput: React.FC<DateInputProps> = ({
             changeDayAriaLabel={changeDayAriaLabel}
             showNeighboringMonth={showNeighboringMonth}
             size={size}
+            viewDate={viewDate}
+            onHeaderChange={onHeaderChange}
+            onNextMonth={onNextMonth}
+            onPrevMonth={onPrevMonth}
+            prevMonthIcon={prevMonthIcon}
+            nextMonthIcon={nextMonthIcon}
           />
         </Popper>
       )}

package/src/components/DateRangeInput/DateRangeInput.tsx CHANGED Viewed

@@ -34,6 +34,8 @@ export interface DateRangeInputProps
       | "changeMonthAriaLabel"
       | "changeYearAriaLabel"
       | "changeDayAriaLabel"
+      | "prevMonthIcon"
+      | "nextMonthIcon"
     >,
     HasRootRef<HTMLDivElement> {
   calendarPlacement?: Placement;
@@ -118,6 +120,8 @@ export const DateRangeInput: React.FC<DateRangeInputProps> = ({
   changeEndYearAriaLabel = "Изменить год окончания",
   clearFieldAriaLabel = "Очистить поле",
   showCalendarAriaLabel = "Показать календарь",
+  prevMonthIcon,
+  nextMonthIcon,
   ...props
 }) => {
   const daysStartRef = React.useRef<HTMLSpanElement>(null);
@@ -342,6 +346,8 @@ export const DateRangeInput: React.FC<DateRangeInputProps> = ({
             changeMonthAriaLabel={changeMonthAriaLabel}
             changeYearAriaLabel={changeYearAriaLabel}
             changeDayAriaLabel={changeDayAriaLabel}
+            prevMonthIcon={prevMonthIcon}
+            nextMonthIcon={nextMonthIcon}
           />
         </Popper>
       )}

package/src/components/Epic/Epic.tsx CHANGED Viewed

@@ -32,7 +32,9 @@ export const Epic: React.FC<EpicProps & AdaptivityContextInterface> = (
     !tabbar &&
     viewWidth < ViewWidth.SMALL_TABLET
   ) {
-    warn("Using Epic without tabbar is not recommended on mobile");
+    warn(
+      `Не рекомендуется использовать Epic без Tabbar при ширине окна меньше ${ViewWidth.SMALL_TABLET}px`
+    );
   }
   const story =
     (React.Children.toArray(children).find(

package/src/components/FixedLayout/FixedLayout.css CHANGED Viewed

@@ -1,6 +1,16 @@
 .FixedLayout {
   position: fixed;
   box-sizing: border-box;
+  /**
+   * ⚠️ WARNING ⚠️
+   * `left: auto` решает следующие задачи:
+   * 1. При фиксированной ширине компонента позиционирует компонент по центру.
+   * 2. При использовании `SplitLayout` позиционирует компонент с права от `<SplitCol fixed />`.
+   *
+   * Подробности можно почитать здесь https://github.com/VKCOM/VKUI/pull/2472
+   *
+   * Единственное, есть проблема при срабатывании insets в landscape ориентации экрана (https://github.com/VKCOM/VKUI/issues/2422).
+   */
   left: auto;
   z-index: 3;
   padding-left: var(--safe-area-inset-left);

package/src/components/FormField/FormField.css CHANGED Viewed

@@ -11,6 +11,7 @@
   border-radius: inherit;
 }
+.FormField__before,
 .FormField__after {
   flex-shrink: 0;
   position: relative;
@@ -25,6 +26,14 @@
   z-index: 2;
 }
+.FormField__before {
+  color: var(--vkui--color_icon_accent);
+}
+.FormField__after {
+  color: var(--icon_secondary, var(--vkui--color_icon_secondary));
+}
 .ChipsInput .FormField__after {
   z-index: 3;
 }
@@ -79,6 +88,7 @@
 /**
  * sizeY COMPACT
  */
+.FormField--sizeY-compact .FormField__before,
 .FormField--sizeY-compact .FormField__after {
   min-width: 36px;
   height: 36px;

package/src/components/FormField/FormField.tsx CHANGED Viewed

@@ -9,7 +9,21 @@ import "./FormField.css";
 export interface FormFieldProps {
   /**
-   * Иконка 12|16|20|24|28 или `IconButton`.
+   * Добавляет иконку слева.
+   *
+   * Рекомендации:
+   *
+   * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.
+   * - Используйте [IconButton](#/IconButton), если вам нужна кликабельная иконка.
+   */
+  before?: React.ReactNode;
+  /**
+   * Добавляет иконку справа.
+   *
+   * Рекомендации:
+   *
+   * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.
+   * - Используйте [IconButton](#/IconButton), если вам нужна кликабельная иконка.
    */
   after?: React.ReactNode;
 }
@@ -26,6 +40,7 @@ export const FormField: React.FC<FormFieldOwnProps> = ({
   Component = "div",
   children,
   getRootRef,
+  before,
   after,
   disabled,
   ...restProps
@@ -57,6 +72,11 @@ export const FormField: React.FC<FormFieldOwnProps> = ({
         disabled && "FormField--disabled"
       )}
     >
+      {hasReactNode(before) && (
+        <div role="presentation" vkuiClass="FormField__before">
+          {before}
+        </div>
+      )}
       {children}
       {hasReactNode(after) && (
         <div role="presentation" vkuiClass="FormField__after">

package/src/components/FormField/Readme.md CHANGED Viewed

@@ -1,6 +1,90 @@
 Компонент-оболочка для элементов форм ([Input](#/Input), [Select](#/Select), [Textarea](#/Textarea) и другие).
-```jsx
+```jsx { "props": { "layout": false, "iframe": false } }
+const Example = () => {
+  const [sizeY, setSizeY] = useState("regular");
+  const [before, setBefore] = useState(<Icon24WalletOutline />);
+  const [after, setAfter] = useState(<Icon24ChevronUp />);
+  const [disabled, setDisabled] = useState(false);
+  return (
+    <div style={rootContainerStyles}>
+      <div style={demoContainerStyles}>
+        <AdaptivityProvider sizeY={sizeY}>
+          <FormLayout>
+            <FormItem>
+              <FormField before={before} after={after} disabled={disabled}>
+                <CustomInput />
+              </FormField>
+            </FormItem>
+          </FormLayout>
+        </AdaptivityProvider>
+      </div>
+      <div style={propsContainerStyles}>
+        <FormItem top="sizeY">
+          <Select
+            value={sizeY}
+            onChange={(e) => setSizeY(e.target.value)}
+            options={[
+              { label: "compact", value: "compact" },
+              { label: "regular", value: "regular" },
+            ]}
+          />
+        </FormItem>
+        <FormItem top="prop[before]">
+          <Checkbox
+            description="Icon24WalletOutline for example"
+            checked={!!before}
+            onChange={(e) =>
+              e.target.checked
+                ? setBefore(<Icon24WalletOutline />)
+                : setBefore(undefined)
+            }
+          >
+            before
+          </Checkbox>
+        </FormItem>
+        <FormItem top="prop[after]">
+          <Checkbox
+            description="Icon24ChevronUp for example"
+            checked={!!after}
+            onChange={(e) =>
+              e.target.checked
+                ? setAfter(<Icon24ChevronUp />)
+                : setAfter(undefined)
+            }
+          >
+            after
+          </Checkbox>
+        </FormItem>
+        <FormItem top="prop[disabled]">
+          <Checkbox
+            checked={disabled}
+            onChange={(e) => setDisabled(e.target.checked)}
+          >
+            disabled
+          </Checkbox>
+        </FormItem>
+      </div>
+    </div>
+  );
+};
+const rootContainerStyles = {
+  display: "flex",
+  flexDirection: "row-reverse",
+  flexWrap: "wrap",
+  justifyContent: "center",
+};
+const demoContainerStyles = {
+  flexGrow: 2,
+  paddingTop: 24,
+  paddingBottom: 24,
+};
+const propsContainerStyles = { minWidth: 200 };
 const CustomInput = () => {
   const style = {
     position: "relative",
@@ -20,23 +104,5 @@ const CustomInput = () => {
   return <input type="text" style={style} placeholder="Кастомный инпут" />;
 };
-const Example = () => (
-  <View activePanel="custom-field">
-    <Panel id="custom-field">
-      <PanelHeader>FormField</PanelHeader>
-      <Group>
-        <FormLayout>
-          <FormItem>
-            <FormField>
-              <CustomInput />
-            </FormField>
-          </FormItem>
-        </FormLayout>
-      </Group>
-    </Panel>
-  </View>
-);
 <Example />;
 ```

package/src/components/FormItem/FormItem.css CHANGED Viewed

@@ -51,6 +51,7 @@
 /**
  * iOS
+ * TODO: v5 удалить
  */
 .FormItem--ios {
   --formitem_padding: 12px;

package/src/components/FormLayoutGroup/FormLayoutGroup.css CHANGED Viewed

@@ -1,6 +1,6 @@
 .FormLayoutGroup--horizontal {
   display: flex;
-  padding: 12px var(--formitem_padding);
+  padding: 12px var(--vkui--size_base_padding_horizontal--regular);
 }
 .FormLayoutGroup__removable {
@@ -11,6 +11,7 @@
 /**
  * iOS
+ * TODO: v5 удалить
  */
 .FormLayoutGroup--ios {
   --formitem_padding: 12px;

package/src/components/Gradient/Gradient.css CHANGED Viewed

@@ -40,7 +40,8 @@
   );
 }
-body[scheme="space_gray"] .Gradient--md-tint.Gradient--to-top {
+body[scheme="space_gray"] .Gradient--md-tint.Gradient--to-top,
+body[scheme="vkcom_dark"] .Gradient--md-tint.Gradient--to-top {
   background: linear-gradient(
     to top,
     #232324,
@@ -61,7 +62,8 @@ body[scheme="space_gray"] .Gradient--md-tint.Gradient--to-top {
   );
 }
-body[scheme="space_gray"] .Gradient--md-tint.Gradient--to-bottom {
+body[scheme="space_gray"] .Gradient--md-tint.Gradient--to-bottom,
+body[scheme="vkcom_dark"] .Gradient--md-tint.Gradient--to-bottom {
   background: linear-gradient(
     to bottom,
     #232324,

package/src/components/HorizontalScroll/HorizontalScroll.tsx CHANGED Viewed

@@ -48,6 +48,12 @@ function now() {
   return performance && performance.now ? performance.now() : Date.now();
 }
+/**
+ * Округляем el.scrollLeft
+ * https://github.com/VKCOM/VKUI/pull/2445
+ */
+const roundUpElementScrollLeft = (el: HTMLElement) => Math.ceil(el.scrollLeft);
 /**
  * Код анимации скрола, на основе полифила: https://github.com/iamdustan/smoothscroll
  * Константа взята из полифила (468), на дизайн-ревью уточнили до 250
@@ -74,7 +80,7 @@ function doScroll({
    */
   const maxLeft = initialScrollWidth - scrollElement.offsetWidth;
-  let startLeft = scrollElement.scrollLeft;
+  let startLeft = roundUpElementScrollLeft(scrollElement);
   let endLeft = getScrollPosition(startLeft);
   onScrollStart();
@@ -100,7 +106,7 @@ function doScroll({
     const currentLeft = startLeft + (endLeft - startLeft) * value;
     scrollElement.scrollLeft = Math.ceil(currentLeft);
-    if (scrollElement.scrollLeft !== Math.max(0, endLeft)) {
+    if (roundUpElementScrollLeft(scrollElement) !== Math.max(0, endLeft)) {
       requestAnimationFrame(scroll);
       return;
     }
@@ -179,7 +185,7 @@ const HorizontalScrollComponent: React.FC<HorizontalScrollProps> = ({
       setCanScrollLeft(scrollElement.scrollLeft > 0);
       setCanScrollRight(
-        scrollElement.scrollLeft + scrollElement.offsetWidth <
+        roundUpElementScrollLeft(scrollElement) + scrollElement.offsetWidth <
           scrollElement.scrollWidth
       );
     }

package/src/components/Input/Input.tsx CHANGED Viewed

@@ -23,6 +23,7 @@ const InputComponent: React.FunctionComponent<InputProps> = ({
   getRootRef,
   sizeY,
   style,
+  before,
   after,
   ...restProps
 }: InputProps) => {
@@ -37,6 +38,7 @@ const InputComponent: React.FunctionComponent<InputProps> = ({
       style={style}
       className={className}
       getRootRef={getRootRef}
+      before={before}
       after={after}
       disabled={restProps.disabled}
     >

package/src/components/ModalCard/ModalCard.css CHANGED Viewed

@@ -2,6 +2,7 @@
   box-sizing: border-box;
   position: absolute;
   top: 0;
+  padding: 8px;
   left: 0;
   width: 100%;
   height: 100%;
@@ -14,7 +15,6 @@
   width: 100%;
   margin-left: auto;
   margin-right: auto;
-  padding: 8px;
   transform: translateY(100%);
 }

package/src/components/ModalCard/ModalCard.tsx CHANGED Viewed

@@ -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
@@ -51,9 +48,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 CHANGED Viewed

@@ -5,18 +5,15 @@ import Headline from "../Typography/Headline/Headline";
 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
@@ -77,12 +74,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 (

package/src/components/ModalPage/ModalPage.tsx CHANGED Viewed

@@ -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
@@ -91,10 +89,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);