@vkontakte/vkui 7.11.5 → 7.11.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "type": "module",
-  "version": "7.11.5",
+  "version": "7.11.7",
   "name": "@vkontakte/vkui",
   "description": "VKUI library",
   "module": "./dist/index.js",

package/src/components/CustomScrollView/CustomScrollView.module.css

@@ -20,33 +20,39 @@
   }
 }
 @supports not (scrollbar-color: auto) {
-  .scrollbarHidden::-webkit-scrollbar {
-    display: none;
-  }
+  /**
+   * Android WebView не поддерживает scrollbar-color, поэтому отрисовываем
+   * полосы прокрутки только если основное указательное устройство мышь
+   */
+  @media (--pointer-has) {
+    .scrollbarHidden::-webkit-scrollbar {
+      display: none;
+    }
 
-  .host::-webkit-scrollbar {
-    inline-size: 12px;
-    block-size: 12px;
-    background: 0 0;
-  }
+    .host::-webkit-scrollbar {
+      inline-size: 12px;
+      block-size: 12px;
+      background: 0 0;
+    }
 
-  .host::-webkit-scrollbar-track,
-  .host::-webkit-scrollbar-corner {
-    background: transparent;
-  }
+    .host::-webkit-scrollbar-track,
+    .host::-webkit-scrollbar-corner {
+      background: transparent;
+    }
 
-  .host::-webkit-scrollbar-thumb,
-  .host::-webkit-scrollbar-thumb {
-    background-color: var(--vkui--color_icon_tertiary_alpha);
-    background-clip: padding-box, content-box;
-    border: 3px solid transparent;
-    border-radius: 6px;
-  }
+    .host::-webkit-scrollbar-thumb,
+    .host::-webkit-scrollbar-thumb {
+      background-color: var(--vkui--color_icon_tertiary_alpha);
+      background-clip: padding-box, content-box;
+      border: 3px solid transparent;
+      border-radius: 6px;
+    }
 
-  .host::-webkit-scrollbar-thumb:hover,
-  .host::-webkit-scrollbar-thumb:active {
-    background-color: var(--vkui--color_icon_tertiary_alpha--hover);
-    border: 2px solid transparent;
+    .host::-webkit-scrollbar-thumb:hover,
+    .host::-webkit-scrollbar-thumb:active {
+      background-color: var(--vkui--color_icon_tertiary_alpha--hover);
+      border: 2px solid transparent;
+    }
   }
 }
 

package/src/components/CustomScrollView/CustomScrollView.module.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["./CustomScrollView.module.css"],"names":["host","scrollbarHidden","overscrollBehaviorContain","overscrollBehaviorNone","scrollBehaviorSmooth","horizontalScrollEnabled"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAQEA,M,WARF;AAAA,E,aAaEC,iB,WAbF;AAAA,E,aAsBEA,iB,WAtBF;AAAA,E,aA0BED,M,WA1BF;AAAA,E,aAgCEA,M,WAhCF;AAAA,E,aAiCIA,M,WAjCJ;AAAA,E,aAqCEA,M,WArCF;AAAA,E,aAsCIA,M,WAtCJ;AAAA,E,aA6CEA,M,WA7CF;AAAA,E,aA8CIA,M,WA9CJ;AAAA,E,aAoDAE,2B,WApDA;AAAA,E,aAwDAC,wB,WAxDA;AAAA,E,aA4DAC,sB,WA5DA;AAAA,E,aAgEAC,yB,WAhEA;AAAA;AAAA","file":"CustomScrollView.module.css.d.ts","sourceRoot":""}
+{"version":3,"sources":["./CustomScrollView.module.css"],"names":["host","scrollbarHidden","overscrollBehaviorContain","overscrollBehaviorNone","scrollBehaviorSmooth","horizontalScrollEnabled"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAQEA,M,WARF;AAAA,E,aAaEC,iB,WAbF;AAAA,E,aA2BIA,iB,WA3BJ;AAAA,E,aA+BID,M,WA/BJ;AAAA,E,aAqCIA,M,WArCJ;AAAA,E,aAsCQA,M,WAtCR;AAAA,E,aA0CIA,M,WA1CJ;AAAA,E,aA2CQA,M,WA3CR;AAAA,E,aAkDIA,M,WAlDJ;AAAA,E,aAmDQA,M,WAnDR;AAAA,E,aA0DAE,2B,WA1DA;AAAA,E,aA8DAC,wB,WA9DA;AAAA,E,aAkEAC,sB,WAlEA;AAAA,E,aAsEAC,yB,WAtEA;AAAA;AAAA","file":"CustomScrollView.module.css.d.ts","sourceRoot":""}

package/src/components/OnboardingTooltip/OnboardingTooltip.tsx

@@ -15,6 +15,7 @@ import {
   useFloatingMiddlewaresBootstrap,
   usePlacementChangeCallback,
 } from '../../lib/floating';
+import { LockFloatingPositionContext } from '../../lib/floating/LockFloatingPosition/LockFloatingPosition';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { warnOnce } from '../../lib/warnOnce';
 import { DEFAULT_ARROW_HEIGHT, DEFAULT_ARROW_PADDING } from '../FloatingArrow/DefaultIcon';
@@ -131,6 +132,9 @@ export const OnboardingTooltip = ({
     disableShiftMiddleware,
     overflowPadding,
   });
+
+  const isLock = React.useContext(LockFloatingPositionContext);
+
   const {
     x: floatingDataX,
     y: floatingDataY,
@@ -141,8 +145,9 @@ export const OnboardingTooltip = ({
     strategy: positionStrategy,
     placement: strictPlacement,
     middleware: middlewares,
-    whileElementsMounted: autoUpdateFloatingElement,
+    whileElementsMounted: isLock ? undefined : autoUpdateFloatingElement,
   });
+
   const tooltipRef = useExternRef<HTMLDivElement>(getRootRef, refs.setFloating);
   const [childRef, child] = usePatchChildren(children, {
     'aria-describedby': shown ? tooltipId : undefined,

package/src/components/Popper/Popper.tsx

@@ -12,6 +12,7 @@ import {
   usePlacementChangeCallback,
   type VirtualElement,
 } from '../../lib/floating';
+import { LockFloatingPositionContext } from '../../lib/floating/LockFloatingPosition/LockFloatingPosition';
 import { useReferenceHiddenChangeCallback } from '../../lib/floating/useReferenceHiddenChangeCallback';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import type { HTMLAttributesWithRootRef } from '../../types';
@@ -156,6 +157,8 @@ export const Popper = ({
     overflowPadding,
   });
 
+  const isLock = React.useContext(LockFloatingPositionContext);
+
   const {
     x: floatingDataX,
     y: floatingDataY,
@@ -167,13 +170,15 @@ export const Popper = ({
     placement: strictPlacement,
     strategy: strategyProp,
     middleware: middlewares,
-    whileElementsMounted(...args) {
-      /* istanbul ignore next: не знаю как проверить */
-      return autoUpdateFloatingElement(...args, {
-        elementResize: autoUpdateOnTargetResize,
-        animationFrame: autoUpdateOnAnimationFrame,
-      });
-    },
+    whileElementsMounted: isLock
+      ? undefined
+      : (...args) => {
+          /* istanbul ignore next: не знаю как проверить */
+          return autoUpdateFloatingElement(...args, {
+            elementResize: autoUpdateOnTargetResize,
+            animationFrame: autoUpdateOnAnimationFrame,
+          });
+        },
   });
 
   usePlacementChangeCallback(placementProp, resolvedPlacement, onPlacementChange);

package/src/components/Root/Root.tsx

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { usePlatform } from '../../hooks/usePlatform';
 import { useDOM } from '../../lib/dom';
+import { LockFloatingPositionContext } from '../../lib/floating/LockFloatingPosition/LockFloatingPosition';
 import { getNavId, type NavIdProps } from '../../lib/getNavId';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { warnOnce } from '../../lib/warnOnce';
@@ -114,57 +115,63 @@ export const Root = ({
     [transition, disableAnimation, finishTransition],
   );
 
-  const onAnimationEnd = () => {
+  const onAnimationEnd: React.AnimationEventHandler<HTMLElement> = (e) => {
+    if (e.target !== e.currentTarget) {
+      return;
+    }
+
     finishTransition();
   };
 
   return (
-    <RootComponent
-      {...restProps}
-      baseClassName={classNames(
-        styles.host,
-        platform === 'ios' && styles.ios,
-        transition && styles.transition,
-      )}
-    >
-      {views.map((view) => {
-        const viewId = getNavId(view.props, warn);
-        if (viewId !== activeView && !(transition && viewId === prevView)) {
-          return null;
-        }
-        const isTransitionTarget = transition && viewId === (isBack ? prevView : activeView);
-        const compensateScroll =
-          transition && (viewId === prevView || (isBack && viewId === activeView));
-        return (
-          <div
-            key={viewId}
-            ref={(e) => {
-              viewId && (viewNodes[viewId] = e);
-            }}
-            onAnimationEnd={isTransitionTarget ? onAnimationEnd : undefined}
-            className={classNames(
-              styles.view,
-              transition && viewId === prevView && isBack && styles.viewHideBack,
-              transition && viewId === prevView && !isBack && styles.viewHideForward,
-              transition && viewId === activeView && isBack && styles.viewShowBack,
-              transition && viewId === activeView && !isBack && styles.viewShowForward,
-            )}
-          >
-            <NavTransitionDirectionProvider isBack={isBack}>
-              <NavTransitionProvider entering={transition && viewId === activeView}>
-                <div
-                  className={styles.scrollCompensation}
-                  style={{
-                    marginTop: compensateScroll ? viewId && -(scrolls[viewId] ?? 0) : undefined,
-                  }}
-                >
-                  {view}
-                </div>
-              </NavTransitionProvider>
-            </NavTransitionDirectionProvider>
-          </div>
-        );
-      })}
-    </RootComponent>
+    <LockFloatingPositionContext.Provider value={transition}>
+      <RootComponent
+        {...restProps}
+        baseClassName={classNames(
+          styles.host,
+          platform === 'ios' && styles.ios,
+          transition && styles.transition,
+        )}
+      >
+        {views.map((view) => {
+          const viewId = getNavId(view.props, warn);
+          if (viewId !== activeView && !(transition && viewId === prevView)) {
+            return null;
+          }
+          const isTransitionTarget = transition && viewId === (isBack ? prevView : activeView);
+          const compensateScroll =
+            transition && (viewId === prevView || (isBack && viewId === activeView));
+          return (
+            <div
+              key={viewId}
+              ref={(e) => {
+                viewId && (viewNodes[viewId] = e);
+              }}
+              onAnimationEnd={isTransitionTarget ? onAnimationEnd : undefined}
+              className={classNames(
+                styles.view,
+                transition && viewId === prevView && isBack && styles.viewHideBack,
+                transition && viewId === prevView && !isBack && styles.viewHideForward,
+                transition && viewId === activeView && isBack && styles.viewShowBack,
+                transition && viewId === activeView && !isBack && styles.viewShowForward,
+              )}
+            >
+              <NavTransitionDirectionProvider isBack={isBack}>
+                <NavTransitionProvider entering={transition && viewId === activeView}>
+                  <div
+                    className={styles.scrollCompensation}
+                    style={{
+                      marginTop: compensateScroll ? viewId && -(scrolls[viewId] ?? 0) : undefined,
+                    }}
+                  >
+                    {view}
+                  </div>
+                </NavTransitionProvider>
+              </NavTransitionDirectionProvider>
+            </div>
+          );
+        })}
+      </RootComponent>
+    </LockFloatingPositionContext.Provider>
   );
 };

package/src/components/View/View.tsx

@@ -6,6 +6,7 @@ import { usePlatform } from '../../hooks/usePlatform';
 import { usePrevious } from '../../hooks/usePrevious';
 import { millisecondsInSecond } from '../../lib/date';
 import { blurActiveElement, useDOM } from '../../lib/dom';
+import { LockFloatingPositionContext } from '../../lib/floating/LockFloatingPosition/LockFloatingPosition';
 import { getNavId, type NavIdProps } from '../../lib/getNavId';
 import { warnOnce } from '../../lib/warnOnce';
 import type { HTMLAttributesWithRootRef } from '../../types';
@@ -170,7 +171,11 @@ export const View = ({
     [activePanelProp, layoutEffectCall, onTransition, scroll],
   );
 
-  const handleAnimatedTargetAnimationEnd = () => {
+  const handleAnimatedTargetAnimationEnd: React.AnimationEventHandler<HTMLDivElement> = (e) => {
+    if (e.target !== e.currentTarget) {
+      return;
+    }
+
     if (prevPanel !== null) {
       flushTransition(prevPanel, Boolean(isBack));
     }
@@ -452,90 +457,96 @@ export const View = ({
 
   return (
     <NavViewIdContext.Provider value={id}>
-      <Touch
-        Component="section"
-        {...restProps}
-        className={classNames(
-          styles.host,
-          platform === 'ios' && classNames(styles.ios, 'vkuiInternalView--ios'),
-          !disableAnimation && animated && styles.animated,
-          !disableAnimation && swipingBack && styles.swipingBack,
-          disableAnimation && styles.noMotion,
-          className,
-        )}
-        onMoveX={
-          iOSSwipeBackSimulationEnabled
-            ? handleTouchMoveXForIOSSwipeBackSimulation
-            : platform === 'ios'
-              ? handleTouchMoveXForNativeIOSSwipeBackOrSwipeNext
-              : undefined
-        }
-        onEnd={iOSSwipeBackSimulationEnabled ? handleTouchEndForIOSSwipeBackSimulation : undefined}
-      >
-        <div className={styles.panels}>
-          {panels.map((panel) => {
-            const panelId = getNavId(panel.props, warn);
-
-            const isPanelActive = panelId === activePanel;
-            const isPanelPrev = panelId === prevPanel;
-            const isPanelNext = panelId === nextPanel;
-            const isAnimatedTarget = animated && (isBack ? isPanelPrev : isPanelNext);
-
-            const isSwipeBackPrev = panelId === swipeBackPrevPanel;
-            const isSwipeBackNext = panelId === swipeBackNextPanel;
-            const isSwipeBackTarget = swipeBackResult && isSwipeBackPrev;
-
-            let scrollCompensateStyle: React.CSSProperties | undefined = undefined;
-
-            if (isPanelPrev || (isPanelNext && isBack) || isSwipeBackPrev || isSwipeBackNext) {
-              const marginTop = scrolls.current[panelId];
-              if (marginTop !== undefined) {
-                scrollCompensateStyle = { marginTop: -1 * marginTop };
+      <LockFloatingPositionContext.Provider value={swipingBack || animated}>
+        <Touch
+          Component="section"
+          {...restProps}
+          className={classNames(
+            styles.host,
+            platform === 'ios' && classNames(styles.ios, 'vkuiInternalView--ios'),
+            !disableAnimation && animated && styles.animated,
+            !disableAnimation && swipingBack && styles.swipingBack,
+            disableAnimation && styles.noMotion,
+            className,
+          )}
+          onMoveX={
+            iOSSwipeBackSimulationEnabled
+              ? handleTouchMoveXForIOSSwipeBackSimulation
+              : platform === 'ios'
+                ? handleTouchMoveXForNativeIOSSwipeBackOrSwipeNext
+                : undefined
+          }
+          onEnd={
+            iOSSwipeBackSimulationEnabled ? handleTouchEndForIOSSwipeBackSimulation : undefined
+          }
+        >
+          <div className={styles.panels}>
+            {panels.map((panel) => {
+              const panelId = getNavId(panel.props, warn);
+
+              const isPanelActive = panelId === activePanel;
+              const isPanelPrev = panelId === prevPanel;
+              const isPanelNext = panelId === nextPanel;
+              const isAnimatedTarget = animated && (isBack ? isPanelPrev : isPanelNext);
+
+              const isSwipeBackPrev = panelId === swipeBackPrevPanel;
+              const isSwipeBackNext = panelId === swipeBackNextPanel;
+              const isSwipeBackTarget = swipeBackResult && isSwipeBackPrev;
+
+              let scrollCompensateStyle: React.CSSProperties | undefined = undefined;
+
+              if (isPanelPrev || (isPanelNext && isBack) || isSwipeBackPrev || isSwipeBackNext) {
+                const marginTop = scrolls.current[panelId];
+                if (marginTop !== undefined) {
+                  scrollCompensateStyle = { marginTop: -1 * marginTop };
+                }
               }
-            }
-
-            return (
-              <div
-                className={classNames(
-                  styles.panel,
-
-                  isPanelActive && styles.panelActive,
-                  isPanelPrev && styles.panelPrev,
-                  isPanelNext && styles.panelNext,
-
-                  isSwipeBackPrev && styles.panelSwipeBackPrev,
-                  isSwipeBackNext && styles.panelSwipeBackNext,
-                  swipeBackResult === 'success' && styles.panelSwipeBackSuccess,
-                  swipeBackResult === 'fail' && styles.panelSwipeBackFailed,
-                )}
-                onTransitionEnd={isSwipeBackTarget ? handleSwipeBackTargetTransitionEnd : undefined}
-                onAnimationEnd={isAnimatedTarget ? handleAnimatedTargetAnimationEnd : undefined}
-                ref={(el) => {
-                  panelId !== undefined && (panelNodes.current[panelId] = el);
-                }}
-                style={calcPanelSwipeStyles(isSwipeBackPrev, isSwipeBackNext)}
-                key={panelId}
-              >
-                {platform === 'ios' && (
-                  <div
-                    className={styles.panelOverlay}
-                    style={calcPanelSwipeBackOverlayStyles(isSwipeBackNext)}
-                  />
-                )}
-                <div className={styles.panelIn} style={scrollCompensateStyle}>
-                  <NavTransitionDirectionProvider isBack={swipingBack || isBack}>
-                    <NavTransitionProvider
-                      entering={panelId === nextPanel || panelId === swipeBackNextPanel}
-                    >
-                      {panel}
-                    </NavTransitionProvider>
-                  </NavTransitionDirectionProvider>
+
+              return (
+                <div
+                  className={classNames(
+                    styles.panel,
+
+                    isPanelActive && styles.panelActive,
+                    isPanelPrev && styles.panelPrev,
+                    isPanelNext && styles.panelNext,
+
+                    isSwipeBackPrev && styles.panelSwipeBackPrev,
+                    isSwipeBackNext && styles.panelSwipeBackNext,
+                    swipeBackResult === 'success' && styles.panelSwipeBackSuccess,
+                    swipeBackResult === 'fail' && styles.panelSwipeBackFailed,
+                  )}
+                  onTransitionEnd={
+                    isSwipeBackTarget ? handleSwipeBackTargetTransitionEnd : undefined
+                  }
+                  onAnimationEnd={isAnimatedTarget ? handleAnimatedTargetAnimationEnd : undefined}
+                  ref={(el) => {
+                    panelId !== undefined && (panelNodes.current[panelId] = el);
+                  }}
+                  style={calcPanelSwipeStyles(isSwipeBackPrev, isSwipeBackNext)}
+                  key={panelId}
+                >
+                  {platform === 'ios' && (
+                    <div
+                      className={styles.panelOverlay}
+                      style={calcPanelSwipeBackOverlayStyles(isSwipeBackNext)}
+                    />
+                  )}
+                  <div className={styles.panelIn} style={scrollCompensateStyle}>
+                    <NavTransitionDirectionProvider isBack={swipingBack || isBack}>
+                      <NavTransitionProvider
+                        entering={panelId === nextPanel || panelId === swipeBackNextPanel}
+                      >
+                        {panel}
+                      </NavTransitionProvider>
+                    </NavTransitionDirectionProvider>
+                  </div>
                 </div>
-              </div>
-            );
-          })}
-        </div>
-      </Touch>
+              );
+            })}
+          </div>
+        </Touch>
+      </LockFloatingPositionContext.Provider>
     </NavViewIdContext.Provider>
   );
 };

package/src/components/View/ViewInfinite.tsx

@@ -6,6 +6,7 @@ import { withContext } from '../../hoc/withContext';
 import { withPlatform } from '../../hoc/withPlatform';
 import { millisecondsInSecond } from '../../lib/date';
 import { canUseDOM, type DOMProps, withDOM } from '../../lib/dom';
+import { LockFloatingPositionContext } from '../../lib/floating/LockFloatingPosition/LockFloatingPosition';
 import { getNavId, type NavIdProps } from '../../lib/getNavId';
 import { warnOnce } from '../../lib/warnOnce';
 import type { HasPlatform, HTMLAttributesWithRootRef } from '../../types';
@@ -380,7 +381,11 @@ class ViewInfiniteComponent extends React.Component<
     );
   }
 
-  transitionEndHandler = (): void => {
+  transitionEndHandler: React.AnimationEventHandler<HTMLDivElement> = (e): void => {
+    if (e.target !== e.currentTarget) {
+      return;
+    }
+
     if (this.state.prevPanel !== null) {
       this.flushTransition(this.state.prevPanel, Boolean(this.state.isBack));
     }
@@ -617,74 +622,78 @@ class ViewInfiniteComponent extends React.Component<
 
     return (
       <NavViewIdContext.Provider value={id || nav}>
-        <Touch
-          Component="section"
-          {...restProps}
-          className={classNames(
-            styles.host,
-            platform === 'ios' && classNames(styles.ios, 'vkuiInternalView--ios'),
-            !disableAnimation && this.state.animated && styles.animated,
-            !disableAnimation && this.state.swipingBack && styles.swipingBack,
-            disableAnimation && styles.noMotion,
-            className,
-          )}
-          onMoveX={
-            iOSSwipeBackSimulationEnabled
-              ? this.handleTouchMoveXForIOSSwipeBackSimulation
-              : platform === 'ios'
-                ? this.handleTouchMoveXForNativeIOSSwipeBackOrSwipeNext
+        <LockFloatingPositionContext.Provider value={swipingBack || animated}>
+          <Touch
+            Component="section"
+            {...restProps}
+            className={classNames(
+              styles.host,
+              platform === 'ios' && classNames(styles.ios, 'vkuiInternalView--ios'),
+              !disableAnimation && this.state.animated && styles.animated,
+              !disableAnimation && this.state.swipingBack && styles.swipingBack,
+              disableAnimation && styles.noMotion,
+              className,
+            )}
+            onMoveX={
+              iOSSwipeBackSimulationEnabled
+                ? this.handleTouchMoveXForIOSSwipeBackSimulation
+                : platform === 'ios'
+                  ? this.handleTouchMoveXForNativeIOSSwipeBackOrSwipeNext
+                  : undefined
+            }
+            onEnd={
+              iOSSwipeBackSimulationEnabled
+                ? this.handleTouchEndForIOSSwipeBackSimulation
                 : undefined
-          }
-          onEnd={
-            iOSSwipeBackSimulationEnabled ? this.handleTouchEndForIOSSwipeBackSimulation : undefined
-          }
-        >
-          <div className={styles.panels}>
-            {panels.map((panel) => {
-              const panelId = getNavId(panel.props, warn);
-              const isPrev = panelId === prevPanel || panelId === swipeBackPrevPanel;
-              const compensateScroll =
-                isPrev || panelId === swipeBackNextPanel || (panelId === nextPanel && isBack);
-              const isTransitionTarget = animated && panelId === (isBack ? prevPanel : nextPanel);
-              const scrollList = (panelId && this.scrolls[panelId]) || [];
-              const scroll = scrollList[scrollList.length - 1] || 0;
-
-              return (
-                <div
-                  className={classNames(
-                    styles.panel,
-                    panelId === activePanel && styles.panelActive,
-                    panelId === prevPanel && styles.panelPrev,
-                    panelId === nextPanel && styles.panelNext,
-                    panelId === swipeBackPrevPanel && styles.panelSwipeBackPrev,
-                    panelId === swipeBackNextPanel && styles.panelSwipeBackNext,
-                    swipeBackResult === 'success' && styles.panelSwipeBackSuccess,
-                    swipeBackResult === 'fail' && styles.panelSwipeBackFailed,
-                  )}
-                  onAnimationEnd={isTransitionTarget ? this.transitionEndHandler : undefined}
-                  ref={(el) => {
-                    panelId !== undefined && (this.panelNodes[panelId] = el);
-                  }}
-                  style={this.calcPanelSwipeStyles(panelId)}
-                  key={panelId}
-                >
+            }
+          >
+            <div className={styles.panels}>
+              {panels.map((panel) => {
+                const panelId = getNavId(panel.props, warn);
+                const isPrev = panelId === prevPanel || panelId === swipeBackPrevPanel;
+                const compensateScroll =
+                  isPrev || panelId === swipeBackNextPanel || (panelId === nextPanel && isBack);
+                const isTransitionTarget = animated && panelId === (isBack ? prevPanel : nextPanel);
+                const scrollList = (panelId && this.scrolls[panelId]) || [];
+                const scroll = scrollList[scrollList.length - 1] || 0;
+
+                return (
                   <div
-                    className={styles.panelIn}
-                    style={{ marginTop: compensateScroll ? -scroll : undefined }}
+                    className={classNames(
+                      styles.panel,
+                      panelId === activePanel && styles.panelActive,
+                      panelId === prevPanel && styles.panelPrev,
+                      panelId === nextPanel && styles.panelNext,
+                      panelId === swipeBackPrevPanel && styles.panelSwipeBackPrev,
+                      panelId === swipeBackNextPanel && styles.panelSwipeBackNext,
+                      swipeBackResult === 'success' && styles.panelSwipeBackSuccess,
+                      swipeBackResult === 'fail' && styles.panelSwipeBackFailed,
+                    )}
+                    onAnimationEnd={isTransitionTarget ? this.transitionEndHandler : undefined}
+                    ref={(el) => {
+                      panelId !== undefined && (this.panelNodes[panelId] = el);
+                    }}
+                    style={this.calcPanelSwipeStyles(panelId)}
+                    key={panelId}
                   >
-                    <NavTransitionDirectionProvider isBack={swipingBack || isBack}>
-                      <NavTransitionProvider
-                        entering={panelId === nextPanel || panelId === swipeBackNextPanel}
-                      >
-                        {panel}
-                      </NavTransitionProvider>
-                    </NavTransitionDirectionProvider>
+                    <div
+                      className={styles.panelIn}
+                      style={{ marginTop: compensateScroll ? -scroll : undefined }}
+                    >
+                      <NavTransitionDirectionProvider isBack={swipingBack || isBack}>
+                        <NavTransitionProvider
+                          entering={panelId === nextPanel || panelId === swipeBackNextPanel}
+                        >
+                          {panel}
+                        </NavTransitionProvider>
+                      </NavTransitionDirectionProvider>
+                    </div>
                   </div>
-                </div>
-              );
-            })}
-          </div>
-        </Touch>
+                );
+              })}
+            </div>
+          </Touch>
+        </LockFloatingPositionContext.Provider>
       </NavViewIdContext.Provider>
     );
   }

package/src/lib/floating/LockFloatingPosition/LockFloatingPosition.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react';
+
+/**
+ * @see https://github.com/VKCOM/VKUI/pull/9603
+ */
+export const LockFloatingPositionContext = React.createContext(false);