@vkontakte/vkui 8.1.2 → 8.2.0

package/src/components/Spinner/ExpressiveSpinner/icons.tsx

@@ -0,0 +1,104 @@
+'use client';
+
+import * as React from 'react';
+import { useAnimationFrame } from '../../../hooks/useAnimationFrame';
+import { useReducedMotion } from '../../../lib/animation';
+import * as shapes from '../../../lib/material/shapes/shapes';
+import { interpolate } from '../../../lib/svg/path/interpolate';
+import { svgPathToString } from '../../../lib/svg/path/path';
+import * as operation from '../../../lib/svg/path/transform';
+import { SvgIcon } from '../SvgIcon';
+
+interface IconMaterialProps {
+  /**
+   * Список форм.
+   */
+  polygons: readonly shapes.ShapeParameters[];
+  /**
+   * Размер иконки.
+   */
+  size: number;
+  /**
+   * Отключение анимации.
+   */
+  disableAnimation: boolean;
+}
+
+export function IconMaterial(props: IconMaterialProps) {
+  return (
+    <SvgIcon size={props.size}>
+      <IconMaterialPath {...props} />
+    </SvgIcon>
+  );
+}
+
+const globalRotationDuration = 4666;
+const morphDuration = 200;
+const morphInterval = 650;
+const fullRotation = 360;
+const quarterRotation = fullRotation / 4;
+
+function calcProgress(startTime: number, time: number, duration: number, delay = 0) {
+  const fullDuration = duration + delay;
+
+  const timeProgress = fullDuration * (((time - startTime) % fullDuration) / fullDuration);
+
+  if (timeProgress < delay) {
+    return 0;
+  }
+
+  return (timeProgress - delay) / duration;
+}
+
+function IconMaterialPath({ size, polygons, disableAnimation }: IconMaterialProps) {
+  const ref = React.useRef<SVGPathElement>(null);
+
+  const morphSequence = React.useMemo(() => {
+    function getShape(index: number, size: number) {
+      return shapes.shapeWithRotate(polygons[index], size);
+    }
+
+    return new Array(polygons.length).fill(0).map((_, index) => {
+      return interpolate(getShape(index, size), getShape((index + 1) % polygons.length, size), {
+        maxSegmentLength: 2,
+      });
+    });
+  }, [size, polygons]);
+
+  const initialPath = React.useMemo(() => svgPathToString(morphSequence[0](0)), [morphSequence]);
+
+  const callback = React.useCallback(
+    (time: number) => {
+      const rotationAnimationProgress = calcProgress(0, time, globalRotationDuration);
+      const globalRotation = rotationAnimationProgress * fullRotation;
+
+      // TODO: spring({
+      //   dampingRatio: 0.6,
+      //   stiffness: 200,
+      //   visibilityThreshold: 0.1,
+      // })
+      const morphProgress = calcProgress(0, time, morphDuration, morphInterval);
+
+      const roundMorphIndex = Math.floor(time / (morphDuration + morphInterval));
+
+      const currentMorphIndex = roundMorphIndex % morphSequence.length;
+
+      const morphRotationTargetAngle = (roundMorphIndex * quarterRotation) % fullRotation;
+      const rotation = morphProgress * quarterRotation + morphRotationTargetAngle + globalRotation;
+
+      const morphFn = morphSequence[currentMorphIndex];
+      const morph = morphFn(morphProgress);
+
+      ref.current!.setAttribute(
+        'd',
+        svgPathToString(operation.rotate(morph, size / 2, size / 2, rotation)),
+      );
+    },
+    [morphSequence, size],
+  );
+
+  const isReducedMotion = useReducedMotion();
+  useAnimationFrame(callback, disableAnimation || isReducedMotion);
+
+  return <path ref={ref} fill="currentColor" d={initialPath}></path>;
+}

package/src/components/Spinner/SvgIcon.tsx

@@ -0,0 +1,31 @@
+import { type HasRootRef } from '../../types';
+import { RootComponent } from '../RootComponent/RootComponent';
+
+/**
+ * Возвращает класс для иконки.
+ */
+export function iconClassName(size: number) {
+  return `vkuiIcon vkuiIcon--${size} vkuiIcon--w-${size} vkuiIcon--h-${size}`;
+}
+
+interface SvgIconProps extends React.ComponentProps<'svg'>, HasRootRef<SVGElement> {
+  /**
+   * Размер иконки.
+   */
+  size: number;
+}
+
+export function SvgIcon({ size, children, ...restProps }: SvgIconProps) {
+  return (
+    <RootComponent
+      Component="svg"
+      baseClassName={iconClassName(size)}
+      aria-hidden="true"
+      width={size}
+      height={size}
+      {...restProps}
+    >
+      {children}
+    </RootComponent>
+  );
+}

package/src/components/Spinner/icons.tsx

@@ -1,57 +1,54 @@
-import type * as React from 'react';
-
-function iconClassName(size: number) {
-  return `vkuiIcon vkuiIcon--${size} vkuiIcon--w-${size} vkuiIcon--h-${size}`;
-}
+import * as React from 'react';
+import { SvgIcon } from './SvgIcon';
 
 export function Icon16Spinner({ children }: React.PropsWithChildren) {
   return (
-    <svg className={iconClassName(16)} aria-hidden="true" width="16" height="16">
+    <SvgIcon size={16}>
       <path
         fill="currentColor"
         d="M8 3.25a4.75 4.75 0 0 0-4.149 7.065.75.75 0 1 1-1.31.732A6.25 6.25 0 1 1 8 14.25a.75.75 0 0 1 .001-1.5 4.75 4.75 0 1 0 0-9.5Z"
       >
         {children}
       </path>
-    </svg>
+    </SvgIcon>
   );
 }
 
 export function Icon24Spinner({ children }: React.PropsWithChildren) {
   return (
-    <svg className={iconClassName(24)} aria-hidden="true" width="24" height="24">
+    <SvgIcon size={24}>
       <path
         fill="currentColor"
         d="M16.394 5.077A8.2 8.2 0 0 0 4.58 15.49a.9.9 0 0 1-1.628.767A10 10 0 1 1 12 22a.9.9 0 0 1 0-1.8 8.2 8.2 0 0 0 4.394-15.123"
       >
         {children}
       </path>
-    </svg>
+    </SvgIcon>
   );
 }
 
 export function Icon32Spinner({ children }: React.PropsWithChildren) {
   return (
-    <svg className={iconClassName(32)} aria-hidden="true" width="32" height="32">
+    <SvgIcon size={32}>
       <path
         fill="currentColor"
         d="M16 32a1.5 1.5 0 0 1 0-3c7.18 0 13-5.82 13-13S23.18 3 16 3 3 8.82 3 16c0 1.557.273 3.074.8 4.502A1.5 1.5 0 1 1 .986 21.54 16 16 0 0 1 0 16C0 7.163 7.163 0 16 0s16 7.163 16 16-7.163 16-16 16"
       >
         {children}
       </path>
-    </svg>
+    </SvgIcon>
   );
 }
 
 export function Icon44Spinner({ children }: React.PropsWithChildren) {
   return (
-    <svg className={iconClassName(44)} aria-hidden="true" width="44" height="44">
+    <SvgIcon size={44}>
       <path
         fill="currentColor"
         d="M22 44a1.5 1.5 0 0 1 0-3c10.493 0 19-8.507 19-19S32.493 3 22 3 3 11.507 3 22c0 2.208.376 4.363 1.103 6.397a1.5 1.5 0 1 1-2.825 1.01A22 22 0 0 1 0 22C0 9.85 9.85 0 22 0s22 9.85 22 22-9.85 22-22 22"
       >
         {children}
       </path>
-    </svg>
+    </SvgIcon>
   );
 }

package/src/components/SplitLayout/SplitLayout.tsx

@@ -13,7 +13,7 @@ const warn = warnOnce('SplitLayout');
 
 export interface SplitLayoutProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
   /**
-   * @deprecated Since 7.9.0. Будет удалeно в **VKUI v9**.
+   * @deprecated Since 7.9.0. Будет удалено в **VKUI v9**.
    * Вместо этого используйте `slotProps={ content: { getRootRef: ... } }`.
    */
   getRef?: React.Ref<HTMLDivElement> | undefined;
@@ -35,7 +35,7 @@ export interface SplitLayoutProps extends HTMLAttributesWithRootRef<HTMLDivEleme
   /**
    * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.
    *
-   * @deprecated Since 7.0.0. Будет удалeно в **VKUI v9**.
+   * @deprecated Since 7.0.0. Будет удалено в **VKUI v9**.
    * Начиная с **VKUI v7** компоненты можно располагать в любом
    * месте приложения в пределах `AppRoot`.
    */
@@ -43,7 +43,7 @@ export interface SplitLayoutProps extends HTMLAttributesWithRootRef<HTMLDivEleme
   /**
    * Свойство для отрисовки `ModalRoot`.
    *
-   * @deprecated Since 7.0.0. Будет удалeно в **VKUI v9**.
+   * @deprecated Since 7.0.0. Будет удалено в **VKUI v9**.
    * Начиная с **VKUI v7**  `ModalRoot` можно располагать в любом
    * месте приложения в пределах `AppRoot`.
    */

package/src/components/TabsItem/TabsItem.tsx

@@ -4,7 +4,6 @@ import * as React from 'react';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useExternRef } from '../../hooks/useExternRef';
-import { useDOM } from '../../lib/dom';
 import { warnOnce } from '../../lib/warnOnce';
 import type { AnchorHTMLAttributesOnly, HTMLAttributesWithRootRef } from '../../types';
 import { TabsControllerContext } from '../Tabs/TabsControllerContext';
@@ -147,7 +146,6 @@ export const TabsItem = ({
 
   const prevSelectedRef = React.useRef<boolean | undefined>(undefined);
 
-  const { document } = useDOM();
   React.useEffect(
     function scrollToSelectedItem() {
       const isInitialRender = prevSelectedRef.current === undefined;
@@ -159,13 +157,14 @@ export const TabsItem = ({
 
       prevSelectedRef.current = selected;
 
-      if (!shouldScrollToSelected || !rootRef.current || !document) {
+      if (!shouldScrollToSelected || !rootRef.current) {
         return;
       }
 
       const tabDOMRect = rootRef.current.getBoundingClientRect();
       const isTabVerticallyOutsideOfViewport =
-        tabDOMRect.top < 0 || tabDOMRect.bottom > document.documentElement.clientHeight;
+        tabDOMRect.top < 0 ||
+        tabDOMRect.bottom > rootRef.current.ownerDocument.documentElement.clientHeight;
 
       /* проверяем, возможен ли вертикальный скролл, а он возможен для scrollIntoView если
        * элемент вертикально вне зоны видимости */
@@ -186,7 +185,7 @@ export const TabsItem = ({
          **/
       }
     },
-    [rootRef, document, scrollBehaviorToSelectedTab, withScrollToSelectedTab, selected],
+    [rootRef, scrollBehaviorToSelectedTab, withScrollToSelectedTab, selected],
   );
 
   const _onClick: React.MouseEventHandler<HTMLElement> = React.useCallback(

package/src/components/Tappable/Tappable.tsx

@@ -44,13 +44,13 @@ export interface TappableProps extends ClickableProps, StateProps {
    */
   borderRadiusMode?: 'auto' | 'inherit' | undefined;
   /**
-   * @deprecated Since 7.3.0. Будет удалeно в **VKUI v9**.
+   * @deprecated Since 7.3.0. Будет удалено в **VKUI v9**.
    *
    * Используйте свойство `activeMode`.
    */
   activeClassName?: string | undefined; // TODO [>=9]: удалить неиспользуемое свойство.
   /**
-   * @deprecated Since 7.3.0. Будет удалeно в **VKUI v9**.
+   * @deprecated Since 7.3.0. Будет удалено в **VKUI v9**.
    *
    * Используйте свойство `hoverMode`.
    */

package/src/components/View/View.tsx

@@ -5,7 +5,6 @@ import { classNames } from '@vkontakte/vkjs';
 import { usePlatform } from '../../hooks/usePlatform';
 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';
@@ -457,96 +456,91 @@ export const View = ({
 
   return (
     <NavViewIdContext.Provider value={id}>
-      <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.get(panelId);
-                if (marginTop !== undefined) {
-                  scrollCompensateStyle = { marginTop: -1 * marginTop };
-                }
+      <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.get(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>
-                  </div>
+            }
+
+            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}
+                      animating={swipingBack || animated}
+                    >
+                      {panel}
+                    </NavTransitionProvider>
+                  </NavTransitionDirectionProvider>
                 </div>
-              );
-            })}
-          </div>
-        </Touch>
-      </LockFloatingPositionContext.Provider>
+              </div>
+            );
+          })}
+        </div>
+      </Touch>
     </NavViewIdContext.Provider>
   );
 };

package/src/components/View/ViewInfinite.tsx

@@ -6,7 +6,6 @@ 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';
@@ -601,78 +600,75 @@ class ViewInfiniteComponent extends React.Component<
 
     return (
       <NavViewIdContext.Provider value={id || nav}>
-        <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
+        <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
-            }
-          >
-            <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.get(panelId)) || [];
-                const scroll = scrollList[scrollList.length - 1] || 0;
-
-                return (
+          }
+          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.get(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={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}
+                    className={styles.panelIn}
+                    style={{ marginTop: compensateScroll ? -scroll : undefined }}
                   >
-                    <div
-                      className={styles.panelIn}
-                      style={{ marginTop: compensateScroll ? -scroll : undefined }}
-                    >
-                      <NavTransitionDirectionProvider isBack={swipingBack || isBack}>
-                        <NavTransitionProvider
-                          entering={panelId === nextPanel || panelId === swipeBackNextPanel}
-                        >
-                          {panel}
-                        </NavTransitionProvider>
-                      </NavTransitionDirectionProvider>
-                    </div>
+                    <NavTransitionDirectionProvider isBack={swipingBack || isBack}>
+                      <NavTransitionProvider
+                        entering={panelId === nextPanel || panelId === swipeBackNextPanel}
+                        animating={swipingBack || animated}
+                      >
+                        {panel}
+                      </NavTransitionProvider>
+                    </NavTransitionDirectionProvider>
                   </div>
-                );
-              })}
-            </div>
-          </Touch>
-        </LockFloatingPositionContext.Provider>
+                </div>
+              );
+            })}
+          </div>
+        </Touch>
       </NavViewIdContext.Provider>
     );
   }