@vkontakte/vkui 4.19.0 → 4.22.0

package/src/components/Switch/Switch.css

@@ -1,9 +1,19 @@
 .Switch {
+  position: relative;
   display: block;
+  cursor: pointer;
 }
 
 .Switch__self {
-  display: none;
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  overflow: hidden;
+  opacity: 0;
 }
 
 .Switch__pseudo {
@@ -17,6 +27,8 @@
 .Switch__pseudo::before {
   position: absolute;
   content: '';
+  top: -3px;
+  left: -3px;
   border-radius: 50%;
   box-sizing: border-box;
 }
@@ -38,9 +50,6 @@
   border: 2px solid transparent;
   background: var(--placeholder_icon_background);
   border-radius: 15px;
-  transition:
-    background-color .2s ease,
-    border-color .2s ease;
 }
 
 .Switch--ios.Switch--sizeY-compact .Switch__pseudo {
@@ -63,7 +72,6 @@
     0 3px 8px rgba(0, 0, 0, .15),
     0 3px 1px rgba(0, 0, 0, .06),
     inset 0 0 0 .5px rgba(0, 0, 0, .04);
-  transition: transform .2s cubic-bezier(.36, -.24, .26, 1.32);
 }
 
 .Switch--ios.Switch--sizeY-compact .Switch__pseudo::before {
@@ -71,10 +79,6 @@
   height: 23px;
 }
 
-.Switch--ios .Switch__self:checked + .Switch__pseudo::before {
-  transform: translateX(20px);
-}
-
 /**
  * Android & VKCOM
  */
@@ -89,7 +93,6 @@
   display: block;
   width: 100%;
   height: 100%;
-  transition: background-color .1s ease;
 }
 
 .Switch--android .Switch__self:checked + .Switch__pseudo::after,
@@ -121,13 +124,10 @@
 }
 
 .Switch--android .Switch__pseudo::before {
-  top: -3px;
-  left: -3px;
   width: 20px;
   height: 20px;
   background: #f1f1f1; /* todo: 1077 replace w/ a proper variable */
   box-shadow: 0 0 2px 0 rgba(0, 0, 0, .12), 0 2px 2px 0 rgba(0, 0, 0, .24);
-  transition: transform .1s ease;
 }
 
 .Switch--android.Switch--sizeY-compact .Switch__pseudo::before {
@@ -158,13 +158,11 @@
 }
 
 .Switch--vkcom .Switch__pseudo::before {
-  top: -3px;
   left: -2px;
   width: 16px;
   height: 16px;
   background: var(--background_light);
   border: 1px solid var(--icon_tertiary);
-  transition: transform .1s ease;
   z-index: 1;
 }
 
@@ -173,3 +171,36 @@
   border: none;
   transform: translateX(16px);
 }
+
+/**
+ * [a11y]
+ * add animation for browsers that support prefers-reduced-motion
+ * so that users with vestibular motion disorders have no problem
+ * navigating accessible vkui apps via keyboard
+ */
+@media (prefers-reduced-motion: no-preference) {
+  .Switch__pseudo::before {
+    transition: transform .1s ease;
+  }
+
+  .Switch--ios .Switch__pseudo {
+    transition: background-color .2s ease, border-color .2s ease;
+  }
+
+  .Switch--ios .Switch__pseudo::before {
+    transition: transform .2s cubic-bezier(.36, -.24, .26, 1.32);
+  }
+
+  .Switch--android .Switch__pseudo::after,
+  .Switch--vkcom .Switch__pseudo::after {
+    transition: background-color .1s ease;
+  }
+}
+
+/**
+ * CMP:
+ * SimpleCell
+ */
+.SimpleCell .Switch {
+  margin-left: 10px;
+}

package/src/components/Switch/Switch.tsx

@@ -3,31 +3,39 @@ import { getClassName } from '../../helpers/getClassName';
 import { classNames } from '../../lib/classNames';
 import { usePlatform } from '../../hooks/usePlatform';
 import { HasRef, HasRootRef } from '../../types';
-import { withAdaptivity, AdaptivityProps } from '../../hoc/withAdaptivity';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useExternRef } from '../../hooks/useExternRef';
+import { FocusVisible } from '../FocusVisible/FocusVisible';
 import './Switch.css';
 
 export interface SwitchProps extends
   React.InputHTMLAttributes<HTMLInputElement>,
   HasRootRef<HTMLLabelElement>,
-  HasRef<HTMLInputElement>,
-  AdaptivityProps { }
+  HasRef<HTMLInputElement> {};
 
-export const Switch: React.FunctionComponent<SwitchProps> = withAdaptivity(({
+export const Switch: React.FC<SwitchProps> = ({
   style,
   className,
   getRef,
   getRootRef,
-  sizeY,
   ...restProps
 }: SwitchProps) => {
   const platform = usePlatform();
+  const { sizeY } = useAdaptivity();
+
   const inputRef = useExternRef(getRef);
 
   return (
-    <label vkuiClass={classNames(getClassName('Switch', platform), `Switch--sizeY-${sizeY}`)} className={className} style={style} ref={getRootRef}>
+    <label
+      vkuiClass={classNames(getClassName('Switch', platform), `Switch--sizeY-${sizeY}`)}
+      className={className}
+      style={style}
+      ref={getRootRef}
+      role="presentation"
+    >
       <input {...restProps} type="checkbox" vkuiClass="Switch__self" ref={inputRef} />
-      <span vkuiClass="Switch__pseudo" />
+      <span role="presentation" vkuiClass="Switch__pseudo" />
+      <FocusVisible mode="outside" />
     </label>
   );
-}, { sizeY: true });
+};

package/src/components/Tappable/Tappable.tsx

@@ -8,7 +8,7 @@ import { getClassName } from '../../helpers/getClassName';
 import { ANDROID } from '../../lib/platform';
 import { getOffsetRect } from '../../lib/offset';
 import { coordX, coordY } from '../../lib/touch';
-import { HasRootRef } from '../../types';
+import { HasComponent, HasRootRef } from '../../types';
 import { withAdaptivity, AdaptivityProps } from '../../hoc/withAdaptivity';
 import { shouldTriggerClickOnEnterOrSpace } from '../../lib/accessibility';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
@@ -18,8 +18,7 @@ import { useExternRef } from '../../hooks/useExternRef';
 import { usePlatform } from '../../hooks/usePlatform';
 import './Tappable.css';
 
-export interface TappableProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement>, AdaptivityProps {
-  Component?: React.ElementType;
+export interface TappableProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement>, AdaptivityProps, HasComponent {
   /**
    * Длительность показа active-состояния
    */

package/src/components/Textarea/Readme.md

@@ -10,6 +10,9 @@
         <FormItem top="Любимая музыка">
           <Textarea placeholder="Группы, исполнители, продюсеры" />
         </FormItem>
+        <FormItem top="Увлечения">
+          <Textarea cols={4} placeholder="Музыка, спорт" defaultValue="Музыка\nСпорт\nФотография\nПлавание\nПрограммирование" />
+        </FormItem>
         <FormItem top="Прикидываемся Input">
           <Textarea rows={1} placeholder="Once upon a time" />
         </FormItem>

package/src/components/Textarea/Textarea.tsx

@@ -7,7 +7,6 @@ import { getClassName } from '../../helpers/getClassName';
 import { useEnsuredControl } from '../../hooks/useEnsuredControl';
 import { useExternRef } from '../../hooks/useExternRef';
 import { usePlatform } from '../../hooks/usePlatform';
-import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import './Textarea.css';
 
 export interface TextareaProps extends
@@ -33,19 +32,24 @@ const Textarea: React.FC<TextareaProps> = React.memo(({
   ...restProps
 }: TextareaProps) => {
   const [value, onChange] = useEnsuredControl(restProps, { defaultValue });
+  const currentScrollHeight = React.useRef<number>();
   const elementRef = useExternRef(getRef);
   const platform = usePlatform();
 
   // autosize input
-  useIsomorphicLayoutEffect(() => {
+  React.useEffect(() => {
     const el = elementRef.current;
-    if (grow) {
+
+    if (grow && el.offsetParent) {
       el.style.height = null;
       el.style.height = `${el.scrollHeight}px`;
-      // TODO: call only when height changed?
-      onResize && onResize(el);
+
+      if (el.scrollHeight !== currentScrollHeight.current && onResize) {
+        onResize(el);
+        currentScrollHeight.current = el.scrollHeight;
+      }
     }
-  }, [grow, value]);
+  }, [grow, value, sizeY]);
 
   return (
     <FormField

package/src/components/Touch/Touch.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { getSupportedEvents, coordX, coordY, touchEnabled, VKUITouchEvent } from '../../lib/touch';
-import { HasRootRef } from '../../types';
+import { HasComponent, HasRootRef } from '../../types';
 import { useDOM } from '../../lib/dom';
 import { useExternRef } from '../../hooks/useExternRef';
 import { useEventListener } from '../../hooks/useEventListener';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 
-export interface TouchProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement> {
+export interface TouchProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement>, HasComponent {
   /**
    * Привязать onEnter и onLeave через pointer-events - работает на disabled-инпутах
    */
@@ -14,7 +14,6 @@ export interface TouchProps extends React.AllHTMLAttributes<HTMLElement>, HasRoo
   useCapture?: boolean;
   slideThreshold?: number;
   noSlideClick?: boolean;
-  Component?: React.ElementType;
   onEnter?: HoverHandler;
   onLeave?: HoverHandler;
   onStart?: TouchEventHandler;
@@ -30,20 +29,20 @@ export interface TouchProps extends React.AllHTMLAttributes<HTMLElement>, HasRoo
 }
 
 export interface Gesture {
-  startX?: number;
-  startY?: number;
-  startT?: Date;
-  duration?: number;
-  isPressed?: boolean;
-  isY?: boolean;
-  isX?: boolean;
-  isSlideX?: boolean;
-  isSlideY?: boolean;
-  isSlide?: boolean;
-  shiftX?: number;
-  shiftY?: number;
-  shiftXAbs?: number;
-  shiftYAbs?: number;
+  startX: number;
+  startY: number;
+  startT: Date;
+  duration: number;
+  isPressed: boolean;
+  isY: boolean;
+  isX: boolean;
+  isSlideX: boolean;
+  isSlideY: boolean;
+  isSlide: boolean;
+  shiftX: number;
+  shiftY: number;
+  shiftXAbs: number;
+  shiftYAbs: number;
 }
 
 export interface TouchEvent extends Gesture {
@@ -80,27 +79,30 @@ export const Touch: React.FC<TouchProps> = ({
   const { document } = useDOM();
   const events = React.useMemo(getSupportedEvents, []);
   const didSlide = React.useRef(false);
-  const gesture = React.useRef<Partial<Gesture>>({});
+  const gesture = React.useRef<Partial<Gesture>>(null);
   const handle = (e: VKUITouchEvent, handers: TouchEventHandler[]) => {
     stopPropagation && e.stopPropagation();
     handers.forEach((cb) => {
       const duration = Date.now() - gesture.current.startT.getTime();
-      cb && cb({ ...gesture.current, duration, originalEvent: e });
+      cb && cb({ ...gesture.current as Gesture, duration, originalEvent: e });
     });
   };
 
   const enterHandler = useEventListener(usePointerHover ? 'pointerenter' : 'mouseenter', onEnter);
   const leaveHandler = useEventListener(usePointerHover ? 'pointerleave' : 'mouseleave', onLeave);
   const startHandler = useEventListener(events[0], (e: VKUITouchEvent) => {
-    gesture.current = {
-      startX: coordX(e),
-      startY: coordY(e),
-      startT: new Date(),
-      isPressed: true,
-    };
+    gesture.current = initGesture(coordX(e), coordY(e));
 
     handle(e, [onStart, onStartX, onStartY]);
-    !touchEnabled() && subscribe(document);
+    // 1 line, 2 bad specs, 2 workarounds:
+    subscribe(touchEnabled()
+      // Touch events fire on initial target, and won't bubble if its removed
+      // see: #235, #1968, https://stackoverflow.com/a/45760014
+      ? e.target as HTMLElement
+      // Mouse events fire on the element under pointer, so we lose move / end
+      // if pointer goes outside container.
+      // Can be fixed by PointerEvents' setPointerCapture later
+      : document);
   }, { capture: useCapture, passive: false });
   const containerRef = useExternRef(getRootRef);
 
@@ -109,7 +111,6 @@ export const Touch: React.FC<TouchProps> = ({
     enterHandler.add(el);
     leaveHandler.add(el);
     startHandler.add(el);
-    touchEnabled() && subscribe(el);
   }, [Component]);
 
   function onMove(e: VKUITouchEvent) {
@@ -169,11 +170,10 @@ export const Touch: React.FC<TouchProps> = ({
     gesture.current = {};
 
     // Если это был тач-евент, симулируем отмену hover
-    if (e.type === 'touchend' || e.type === 'touchcancel') {
+    if (touchEnabled()) {
       onLeave && onLeave(e);
     }
-
-    !touchEnabled() && subscribe(null);
+    subscribe(null);
   }
 
   const listenerParams = { capture: useCapture, passive: false };
@@ -205,7 +205,8 @@ export const Touch: React.FC<TouchProps> = ({
     if (!didSlide.current) {
       return onClickCapture && onClickCapture(e);
     }
-    if ((e.target as HTMLElement).tagName === 'A') {
+    // eslint-disable-next-line no-restricted-properties
+    if ((e.target as HTMLElement).closest('a')) {
       e.preventDefault();
     }
     if (noSlideClick) {
@@ -225,3 +226,22 @@ export const Touch: React.FC<TouchProps> = ({
     />
   );
 };
+
+function initGesture(startX: number, startY: number): Gesture {
+  return {
+    startX,
+    startY,
+    startT: new Date(),
+    duration: 0,
+    isPressed: true,
+    isY: false,
+    isX: false,
+    isSlideX: false,
+    isSlideY: false,
+    isSlide: false,
+    shiftX: 0,
+    shiftY: 0,
+    shiftXAbs: 0,
+    shiftYAbs: 0,
+  };
+}

package/src/components/Typography/Caption/Caption.tsx

@@ -1,20 +1,20 @@
 import * as React from 'react';
+import { HasComponent } from '../../../types';
 import { usePlatform } from '../../../hooks/usePlatform';
 import { classNames } from '../../../lib/classNames';
 import { getClassName } from '../../../helpers/getClassName';
 import './Caption.css';
 
-export interface CaptionProps extends React.AllHTMLAttributes<HTMLElement> {
+export interface CaptionProps extends React.AllHTMLAttributes<HTMLElement>, HasComponent {
   weight: 'regular' | 'medium' | 'semibold' | 'bold';
   level: '1' | '2' | '3' | '4';
   caps?: boolean;
-  Component?: React.ElementType;
 }
 
 const Caption: React.FC<CaptionProps> = ({
   children,
-  weight,
-  level,
+  weight = 'regular',
+  level = '1',
   caps,
   Component = 'span',
   ...restProps

package/src/components/Typography/Headline/Headline.tsx

@@ -1,17 +1,17 @@
 import * as React from 'react';
+import { HasComponent } from '../../../types';
 import { usePlatform } from '../../../hooks/usePlatform';
 import { classNames } from '../../../lib/classNames';
 import { getClassName } from '../../../helpers/getClassName';
 import './Headline.css';
 
-export interface HeadlineProps extends React.AllHTMLAttributes<HTMLElement> {
+export interface HeadlineProps extends React.AllHTMLAttributes<HTMLElement>, HasComponent {
   weight: 'regular' | 'medium' | 'semibold';
-  Component?: React.ElementType;
 }
 
 const Headline: React.FC<HeadlineProps> = ({
   children,
-  weight,
+  weight = 'regular',
   Component = 'h3',
   ...restProps
 }: HeadlineProps) => {

package/src/components/Typography/Subhead/Subhead.tsx

@@ -1,17 +1,17 @@
 import * as React from 'react';
+import { HasComponent } from '../../../types';
 import { usePlatform } from '../../../hooks/usePlatform';
 import { classNames } from '../../../lib/classNames';
 import { getClassName } from '../../../helpers/getClassName';
 import './Subhead.css';
 
-export interface SubheadProps extends React.AllHTMLAttributes<HTMLElement> {
+export interface SubheadProps extends React.AllHTMLAttributes<HTMLElement>, HasComponent {
   weight: 'regular' | 'medium' | 'semibold' | 'bold';
-  Component?: React.ElementType;
 }
 
 const Subhead: React.FC<SubheadProps> = ({
   children,
-  weight,
+  weight = 'regular',
   Component = 'h4',
   ...restProps
 }: SubheadProps) => {

package/src/components/Typography/Text/Text.tsx

@@ -2,19 +2,18 @@ import * as React from 'react';
 import { usePlatform } from '../../../hooks/usePlatform';
 import { classNames } from '../../../lib/classNames';
 import { getClassName } from '../../../helpers/getClassName';
-import { HasRootRef } from '../../../types';
+import { HasComponent, HasRootRef } from '../../../types';
 import { warnOnce } from '../../../lib/warnOnce';
 import './Text.css';
 
-export interface TextProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLDivElement> {
+export interface TextProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement>, HasComponent {
   weight: 'regular' | 'medium' | 'semibold';
-  Component?: React.ElementType;
 }
 
 const warn = warnOnce('Text');
 const Text: React.FC<TextProps> = ({
   children,
-  weight,
+  weight = 'regular',
   Component = 'span',
   getRootRef,
   ...restProps

package/src/components/Typography/Title/Title.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { HasComponent } from '../../../types';
 import { usePlatform } from '../../../hooks/usePlatform';
 import { classNames } from '../../../lib/classNames';
 import { getClassName } from '../../../helpers/getClassName';
@@ -6,21 +7,24 @@ import { ANDROID } from '../../../lib/platform';
 import Headline, { HeadlineProps } from '../Headline/Headline';
 import './Title.css';
 
-export interface TitleProps extends React.AllHTMLAttributes<HTMLElement> {
+export interface TitleProps extends React.AllHTMLAttributes<HTMLElement>, HasComponent {
   weight: 'heavy' | 'bold' | 'semibold' | 'medium' | 'regular';
   level: '1' | '2' | '3';
-  Component?: React.ElementType;
 }
 
 const Title: React.FC<TitleProps> = ({
   children,
-  weight,
-  level,
-  Component = ('h' + level) as React.ElementType,
+  weight = 'regular',
+  level = '1',
+  Component,
   ...restProps
 }: TitleProps) => {
   const platform = usePlatform();
 
+  if (!Component) {
+    Component = ('h' + level) as React.ElementType;
+  }
+
   if (platform === ANDROID && level === '3') {
     const headlineWeight: HeadlineProps['weight'] = weight === 'regular' ? weight : 'medium';
 

package/src/components/View/Readme.md

@@ -46,66 +46,52 @@ const [activePanel, setActivePanel] = useState('panel1');
 В iOS есть возможность свайпнуть от левого края назад, чтобы перейти на предыдущую панель. Для того, чтобы
 повторить такое поведение в VKUI нужно:
 
-- Передать во `View` свойство `onSwipeBack`. Это callback, срабатывающий при завершении анимации свайпа.
-Как правило в нём прописывают логику, которая выставит нужный `activePanel` и обновит свойство `history`.
-- Передать во `View` свойство `history`. Это массив, состоящий из id панелей, которые были открыты на текущий момент.
-Например, если пользователь из `main` перешел в `profile`, а оттуда попал в `education`, то
-`history=['main', 'profile', 'education']`.
-- Убедиться, что приложение открыто внутри webview (так как внутри обычного мобильного браузера
-как правило есть свой swipe back). Для этого достаточно обернуть ваше приложение компонентом `ConfigProvider`.
-Он внутри себя определяет, открыто приложение внутри webview или в мобильном браузере. Для тестов в браузере
-можно явно передать в `СonfigProvider` свойство `isWebView={true}`.
-- При попадании на первую панель слать `vk-bridge` событие `VKWebAppEnableSwipeBack`. При уходе с первой панели –
-слать `VKWebAppDisableSwipeBack`. Таким образом VKUI свайп не будет конфликтовать со свайпом нативного клиента.
+- Передать во `View` коллбек `onSwipeBack` — он сработает при завершении анимации свайпа. Поменяйте в нем `activePanel` и обновите `history`.
+- Передать во `View` проп `history` — массив из id панелей в порядке открытия. Например, если пользователь из `main` перешел в `profile`, а оттуда попал в `education`, то `history=['main', 'profile', 'education']`.
+- Обернуть ваше приложение в `ConfigProvider` — он определит, открыто приложение в webview клиента VK или в браузере (там есть свой swipe back, который будет конфликтовать с нашим). Для проверки в браузере форсируйте определение webview: `<СonfigProvider isWebView>`.
+- На первой панели должен включаться свайпбек нативного клиента, чтобы пользователь смог выйти из приложения — для этого используют `vk-bridge`. __Если вы не из ВК,__ при переходах отправляйте [событие `VKWebAppSetSwipeSettings`](https://vk.com/dev.php?method=vk_bridge_events_10&f=Включение%20swipe%20как%20в%20браузере) с `history: true` на первой панели или `history: false` на других. __Если вы из ВК,__ при переходе на первую панель отправляйте событие `VKWebAppEnableSwipeBack`, на любую другую — `VKWebAppDisableSwipeBack`.
+- Компоненты, которые сами обрабатывают жесты (например, карта), могут конфликтовать со свайпбеком — повесьте на них свойство `data-vkui-swipe-back={false}`
 
-Пример:
-
-```jsx static
-import React from 'react';
-import { View, Panel, ConfigProvider } from '@vkontakte/vkui';
+```jsx
 import vkBridge from '@vkontakte/vk-bridge';
 
-class App extends React.Component {
-
-  state = {
-    activePanel: 'main',
-    history: ['main']
-  }
-
-  goBack = () => {
-    const history = [...this.state.history];
-    history.pop();
-    const activePanel = history[history.length - 1];
-    if (activePanel === 'main') {
-      vkBridge.send('VKWebAppEnableSwipeBack');
-    }
-    this.setState({ history, activePanel });
-  }
+const [history, setHistory] = useState(['main']);
+const activePanel = history[history.length - 1];
+const isFirst = history.length === 1;
 
-  goForward = (activePanel) => {
-    const history = [...this.state.history];
-    history.push(activePanel);
-    if (this.state.activePanel === 'main') {
-      vkBridge.send('VKWebAppDisableSwipeBack');
-    }
-    this.setState({ history, activePanel });
-  }
+React.useEffect(() => {
+  // Если вы из ВК, делайте так
+  vkBridge.send(isFirst
+    ? 'VKWebAppEnableSwipeBack'
+    : 'VKWebAppDisableSwipeBack');
+  // Если вы не из ВК, то так:
+  vkBridge.send('VKWebAppSetSwipeSettings', { history: isFirst });
+}, [isFirst]);
 
-  render () {
-    return (
-      <ConfigProvider isWebView={true}>
-        <View
-          onSwipeBack={this.goBack}
-          history={this.state.history}
-          activePanel={this.state.activePanel}
-        >
-          <Panel id="main"/>
-          <Panel id="profile"/>
-          <Panel id="education"/>
-        </View>
-      </ConfigProvider>
-    )
-  }
-}
+const goBack = () => setHistory(history.slice(0, -1));
+const go = (panel) => setHistory([...history, panel]);
 
+<ConfigProvider platform={IOS} isWebView>
+  <View
+    onSwipeBack={goBack}
+    history={history}
+    activePanel={activePanel}
+  >
+    <Panel id="main">
+      <PanelHeader>Main</PanelHeader>
+      <Group>
+        <CellButton onClick={() => go('profile')}>profile</CellButton>
+      </Group>
+    </Panel>
+    <Panel id="profile">
+      <PanelHeader>Профиль</PanelHeader>
+      <Group>
+        <Placeholder>Теперь свайпните от левого края направо, чтобы вернуться</Placeholder>
+        <Div style={{ height: 50, background: '#eee' }} data-vkui-swipe-back={false}>
+          Здесь свайпбек отключен
+        </Div>
+      </Group>
+    </Panel>
+  </View>
+</ConfigProvider>
 ```