@vkontakte/vkui 4.30.0 → 4.31.0

package/jest.unit.config.js

@@ -4,6 +4,7 @@ module.exports = {
   roots: [
     path.join(__dirname, "src"),
     path.join(__dirname, "postcss-plugin-vk-sans"),
+    path.join(__dirname, "postcss-custom-properties-fallback"),
   ],
   setupFilesAfterEnv: [path.join(__dirname, "src/testing/setup.ts")],
   collectCoverage: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui",
-  "version": "4.30.0",
+  "version": "4.31.0",
   "main": "dist/cjs/index.js",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -47,7 +47,7 @@
     "@vkontakte/eslint-config": "2.5.0",
     "@vkontakte/icons": "^1.145.1",
     "@vkontakte/vk-bridge": "^2.1.3",
-    "@vkontakte/vkui-tokens": "4.7.0",
+    "@vkontakte/vkui-tokens": "4.10.0",
     "autoprefixer": "^10.4.2",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.3",
@@ -86,6 +86,8 @@
     "postcss-import": "^14.0.2",
     "postcss-loader": "^6.2.1",
     "postcss-modules": "^4.3.0",
+    "postcss-value-parser": "^4.2.0",
+    "postcss-values-parser": "^6.0.2",
     "prettier": "^2.5.1",
     "process": "^0.11.10",
     "prop-types": "^15.6.2",

package/postcss-custom-properties-fallback/__tests__/custom_properties.css

@@ -0,0 +1,5 @@
+/* stylelint-disable-next-line vkui/atomic */
+:root {
+  --color: red;
+  --shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+}

package/postcss-custom-properties-fallback/index.js

@@ -0,0 +1,83 @@
+/* stylelint-disable */
+const fs = require("fs");
+const valueParser = require("postcss-value-parser");
+const { nodeToString, parse: parseValues } = require("postcss-values-parser");
+const { parse } = require("postcss");
+
+const isTransformableDecl = (decl) =>
+  /(^|[^\w-])var\([\W\w]+\)/.test(decl.value);
+
+function parseCustomProperties(importFrom) {
+  const customProperties = new Map();
+
+  parse(fs.readFileSync(importFrom, "utf8")).walkRules((rule) => {
+    if (rule.selector === ":root") {
+      rule.walkDecls((decl) => {
+        if (decl.prop.startsWith("--")) {
+          customProperties.set(
+            decl.prop,
+            parseValues(String(decl.value)).nodes
+          );
+        }
+      });
+    }
+  });
+
+  return customProperties;
+}
+
+module.exports = (opts) => {
+  return {
+    postcssPlugin: "custom-properties-fallback",
+    prepare() {
+      const customProperties = parseCustomProperties(opts.importFrom);
+      const shouldTransformableDecl =
+        opts.shouldTransformableDecl || isTransformableDecl;
+
+      return {
+        Declaration(node) {
+          if (shouldTransformableDecl(node)) {
+            const parsed = valueParser(node.value);
+
+            parsed.walk((node) => {
+              if (node.type !== "function" || node.nodes.length !== 1) {
+                return;
+              }
+
+              const firstValue = node.nodes[0].value;
+
+              if (
+                !customProperties.has(firstValue) ||
+                customProperties.get(firstValue).length === 0
+              ) {
+                return;
+              }
+
+              const fallback = customProperties.get(firstValue);
+
+              node.nodes.push(
+                {
+                  type: "divider",
+                  value: ",",
+                },
+                {
+                  type: "word",
+                  value:
+                    fallback.length > 1
+                      ? fallback
+                          .map((fallbackNode) => nodeToString(fallbackNode))
+                          .join(" ")
+                      : fallback,
+                }
+              );
+            });
+
+            node.value = parsed.toString();
+          }
+        },
+      };
+    },
+  };
+};
+
+module.exports.postcss = true;

package/src/components/ActionSheet/ActionSheet.tsx

@@ -1,6 +1,5 @@
 import * as React from "react";
 import { PopoutWrapper } from "../PopoutWrapper/PopoutWrapper";
-import { ViewWidth, ViewHeight } from "../../hoc/withAdaptivity";
 import { IOS } from "../../lib/platform";
 import { ActionSheetDropdownDesktop } from "./ActionSheetDropdownDesktop";
 import { ActionSheetDropdown } from "./ActionSheetDropdown";
@@ -9,7 +8,7 @@ import { ActionSheetContext, ItemClickHandler } from "./ActionSheetContext";
 import { Caption } from "../Typography/Caption/Caption";
 import { usePlatform } from "../../hooks/usePlatform";
 import { useTimeout } from "../../hooks/useTimeout";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { useAdaptivityIsDesktop } from "../../hooks/useAdaptivity";
 import { useObjectMemo } from "../../hooks/useObjectMemo";
 import { warnOnce } from "../../lib/warnOnce";
 import { SharedDropdownProps, PopupDirection, ToggleRef } from "./types";
@@ -68,10 +67,7 @@ export const ActionSheet: React.FC<ActionSheetProps> = ({
     );
   }
 
-  const { viewWidth, viewHeight, hasMouse } = useAdaptivity();
-  const isDesktop =
-    viewWidth >= ViewWidth.SMALL_TABLET &&
-    (hasMouse || viewHeight >= ViewHeight.MEDIUM);
+  const isDesktop = useAdaptivityIsDesktop();
 
   useScrollLock(!isDesktop);
 

package/src/components/Calendar/Calendar.tsx

@@ -30,6 +30,8 @@ export interface CalendarProps
       | "changeYearAriaLabel"
       | "onNextMonth"
       | "onPrevMonth"
+      | "prevMonthIcon"
+      | "nextMonthIcon"
     >,
     HasRootRef<HTMLDivElement> {
   value?: Date;
@@ -83,6 +85,8 @@ export const Calendar: React.FC<CalendarProps> = ({
   onHeaderChange,
   onNextMonth,
   onPrevMonth,
+  prevMonthIcon,
+  nextMonthIcon,
   ...props
 }) => {
   const {
@@ -173,6 +177,8 @@ export const Calendar: React.FC<CalendarProps> = ({
         nextMonthAriaLabel={nextMonthAriaLabel}
         changeMonthAriaLabel={changeMonthAriaLabel}
         changeYearAriaLabel={changeYearAriaLabel}
+        prevMonthIcon={prevMonthIcon}
+        nextMonthIcon={nextMonthIcon}
       />
       <CalendarDays
         viewDate={externalViewDate || viewDate}

package/src/components/CalendarHeader/CalendarHeader.css

@@ -21,6 +21,9 @@
   justify-content: center;
   align-items: center;
   padding: 3px;
+}
+
+.CalendarHeader__nav-icon--accent {
   color: var(--vkui--color_icon_accent);
 }
 

package/src/components/CalendarHeader/CalendarHeader.tsx

@@ -29,6 +29,8 @@ export interface CalendarHeaderProps
   nextMonthAriaLabel?: string;
   changeMonthAriaLabel?: string;
   changeYearAriaLabel?: string;
+  prevMonthIcon?: React.ReactNode;
+  nextMonthIcon?: React.ReactNode;
   onChange(viewDate: Date): void;
   /**
    * Нажатие на кнопку переключения на следующий месяц.
@@ -65,6 +67,20 @@ export const CalendarHeader: React.FC<CalendarHeaderProps> = ({
   nextMonthAriaLabel = "Следующий месяц",
   changeMonthAriaLabel = "Изменить месяц",
   changeYearAriaLabel = "Изменить год",
+  prevMonthIcon = (
+    <Icon20ChevronLeftOutline
+      vkuiClass="CalendarHeader__nav-icon--accent"
+      width={30}
+      height={30}
+    />
+  ),
+  nextMonthIcon = (
+    <Icon20ChevronRightOutline
+      vkuiClass="CalendarHeader__nav-icon--accent"
+      width={30}
+      height={30}
+    />
+  ),
 }) => {
   const locale = React.useContext(LocaleProviderContext);
   const onMonthsChange = React.useCallback(
@@ -102,7 +118,7 @@ export const CalendarHeader: React.FC<CalendarHeaderProps> = ({
             subMonths(viewDate, 1)
           )}`}
         >
-          <Icon20ChevronLeftOutline width={30} height={30} />
+          {prevMonthIcon}
         </Tappable>
       )}
       <div vkuiClass="CalendarHeader__pickers">
@@ -166,7 +182,7 @@ export const CalendarHeader: React.FC<CalendarHeaderProps> = ({
             addMonths(viewDate, 1)
           )}`}
         >
-          <Icon20ChevronRightOutline width={30} height={30} />
+          {nextMonthIcon}
         </Tappable>
       )}
     </div>

package/src/components/CalendarRange/CalendarRange.tsx

@@ -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/Cell/Cell.css

@@ -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

@@ -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

@@ -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/DateInput/DateInput.tsx

@@ -44,6 +44,8 @@ export interface DateInputProps
       | "onHeaderChange"
       | "onNextMonth"
       | "onPrevMonth"
+      | "prevMonthIcon"
+      | "nextMonthIcon"
     >,
     HasRootRef<HTMLDivElement> {
   calendarPlacement?: Placement;
@@ -126,6 +128,8 @@ export const DateInput: React.FC<DateInputProps> = ({
   onHeaderChange,
   onNextMonth,
   onPrevMonth,
+  prevMonthIcon,
+  nextMonthIcon,
   ...props
 }) => {
   const daysRef = React.useRef<HTMLSpanElement>(null);
@@ -318,9 +322,11 @@ export const DateInput: React.FC<DateInputProps> = ({
             showNeighboringMonth={showNeighboringMonth}
             size={size}
             viewDate={viewDate}
-            onHeaderChange={onCalendarChange}
+            onHeaderChange={onHeaderChange}
             onNextMonth={onNextMonth}
             onPrevMonth={onPrevMonth}
+            prevMonthIcon={prevMonthIcon}
+            nextMonthIcon={nextMonthIcon}
           />
         </Popper>
       )}

package/src/components/DateRangeInput/DateRangeInput.tsx

@@ -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/FixedLayout/FixedLayout.css

@@ -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);
@@ -14,12 +24,10 @@
 .FixedLayout--top {
   width: 100%;
   top: 0;
-  left: 0;
 }
 
 .FixedLayout--bottom {
   width: 100%;
-  left: 0;
   bottom: 0;
   padding-bottom: var(--safe-area-inset-bottom);
 }

package/src/components/FormItem/FormItem.css

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

package/src/components/FormLayoutGroup/FormLayoutGroup.css

@@ -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/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
@@ -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

@@ -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

@@ -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);

package/src/components/ModalPageHeader/ModalPageHeader.tsx

@@ -4,10 +4,9 @@ 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 { useAdaptivityIsDesktop } from "../../hooks/useAdaptivity";
 import { classNames } from "../../lib/classNames";
 import { getClassName } from "../../helpers/getClassName";
-import { ViewHeight, ViewWidth } from "../AdaptivityProvider/AdaptivityContext";
 import "./ModalPageHeader.css";
 
 export interface ModalPageHeaderProps
@@ -22,11 +21,8 @@ const ModalPageHeader: React.FunctionComponent<ModalPageHeaderProps> = ({
   ...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

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);
 

package/src/components/ModalRoot/Readme.md

@@ -39,7 +39,7 @@ class App extends Component {
 либо идентификатор предыдущей модалки, либо `null` для скрытия.
 Каждой конкретной `ModalPage` или `ModalCard` можно передать свой обработчик `onClose`, если нужно переопределить поведение.
 
-```jsx { "props": { "layout": false, "adaptivity": true } }
+```jsx { "props": { "layout": false, "adaptivity": true, "webviewType": true } }
 const MODAL_PAGE_FILTERS = "filters";
 const MODAL_PAGE_COUNTRIES = "countries";
 const MODAL_PAGE_STORY_FEEDBACK = "story-feedback";

package/src/components/PanelHeader/PanelHeader.tsx

@@ -44,25 +44,29 @@ const PanelHeaderIn: React.FC<PanelHeaderProps> = ({
   children,
   left,
   right,
+  separator,
 }) => {
   const { webviewType } = React.useContext(ConfigProviderContext);
   const { isInsideModal } = React.useContext(ModalRootContext);
   const platform = usePlatform();
 
   return (
-    <TooltipContainer fixed vkuiClass="PanelHeader__in">
-      <div vkuiClass="PanelHeader__left">{left}</div>
-      <div vkuiClass="PanelHeader__content">
-        {platform === VKCOM ? (
-          <Text weight="medium">{children}</Text>
-        ) : (
-          <span vkuiClass="PanelHeader__content-in">{children}</span>
-        )}
-      </div>
-      <div vkuiClass="PanelHeader__right">
-        {(webviewType === WebviewType.INTERNAL || isInsideModal) && right}
-      </div>
-    </TooltipContainer>
+    <React.Fragment>
+      <TooltipContainer fixed vkuiClass="PanelHeader__in">
+        <div vkuiClass="PanelHeader__left">{left}</div>
+        <div vkuiClass="PanelHeader__content">
+          {platform === VKCOM ? (
+            <Text weight="medium">{children}</Text>
+          ) : (
+            <span vkuiClass="PanelHeader__content-in">{children}</span>
+          )}
+        </div>
+        <div vkuiClass="PanelHeader__right">
+          {(webviewType === WebviewType.INTERNAL || isInsideModal) && right}
+        </div>
+      </TooltipContainer>
+      {separator && platform === VKCOM && <Separator wide />}
+    </React.Fragment>
   );
 };
 
@@ -120,11 +124,8 @@ const PanelHeader: React.FC<PanelHeaderProps> = (props: PanelHeaderProps) => {
       ) : (
         <PanelHeaderIn {...props} />
       )}
-      {separator && visor && (
-        <Separator
-          expanded={sizeX === SizeType.REGULAR && platform !== VKCOM}
-          wide={platform === VKCOM}
-        />
+      {separator && visor && platform !== VKCOM && (
+        <Separator expanded={sizeX === SizeType.REGULAR} />
       )}
     </div>
   );

package/src/components/PanelHeader/Readme.md

@@ -11,9 +11,9 @@
 
 > **Важно**
 >
-> Правая часть шапки будет скрыта, если в [`ConfigProvider`](#/ConfigProvider) передан `webviewType={WebviewType.VKAPPS}`.
+> Правая часть шапки скрыта по умолчанию, если требуется показать её, передайте в [`ConfigProvider`](#/ConfigProvider) свойство `webviewType={WebviewType.INTERNAL}`.
 
-```jsx
+```jsx { "props": { "webviewType": true } }
 class Example extends React.Component {
   constructor(props) {
     super(props);