@vkontakte/vkui 8.1.2 → 8.1.3

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

package/src/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.ts

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { debounce, noop } from '@vkontakte/vkjs';
 import { getWindow, isHTMLElement } from '@vkontakte/vkui-floating-ui/utils/dom';
+import { useNavTransition } from '../../../components/NavTransitionContext/NavTransitionContext';
 import { useCustomEnsuredControl } from '../../../hooks/useEnsuredControl';
 import { useGlobalOnClickOutside } from '../../../hooks/useGlobalOnClickOutside';
 import { useStableCallback } from '../../../hooks/useStableCallback';
 import { contains, getActiveElementByAnotherElement } from '../../dom';
 import { useIsomorphicLayoutEffect } from '../../useIsomorphicLayoutEffect';
-import { LockFloatingPositionContext } from '../LockFloatingPosition/LockFloatingPosition';
 import { autoUpdateFloatingElement, useFloating } from '../adapters';
 import { convertFloatingDataToReactCSSProperties } from '../functions';
 import type { UseFloatingOptions } from '../types/common';
@@ -57,6 +57,7 @@ export const useFloatingWithInteractions = <T extends HTMLElement = HTMLElement>
     () => (shownProp !== undefined ? { shown: shownProp } : undefined),
     [shownProp],
   );
+  const { entering, animating } = useNavTransition();
   const [shownLocalState, setShownLocalState] = useCustomEnsuredControl<LocalState>({
     value: memoizedValue,
     disabled,
@@ -84,14 +85,12 @@ export const useFloatingWithInteractions = <T extends HTMLElement = HTMLElement>
 
   const { triggerOnFocus, triggerOnClick, triggerOnHover } = useResolveTriggerType(trigger);
 
-  const isLock = React.useContext(LockFloatingPositionContext);
-
   // Библиотека `floating-ui`
   const { placement, x, y, strategy, refs, middlewareData } = useFloating<T>({
     strategy: strategyProp,
     placement: placementProp,
     ...(middlewares !== undefined ? { middleware: middlewares } : {}),
-    ...(!isLock && { whileElementsMounted }),
+    ...(!animating && { whileElementsMounted }),
   });
 
   const commitShownLocalState = React.useCallback(
@@ -376,7 +375,7 @@ export const useFloatingWithInteractions = <T extends HTMLElement = HTMLElement>
 
   return {
     placement,
-    shown: shownFinalState,
+    shown: shownFinalState && !entering,
     willBeHide,
     refs,
     referenceProps,

package/dist/cssm/lib/floating/LockFloatingPosition/LockFloatingPosition.js

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

package/dist/cssm/lib/floating/LockFloatingPosition/LockFloatingPosition.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../../src/lib/floating/LockFloatingPosition/LockFloatingPosition.tsx"],"sourcesContent":["import * as React from 'react';\n\n/**\n * @see https://github.com/VKCOM/VKUI/pull/9603\n */\nexport const LockFloatingPositionContext = React.createContext(false);\n"],"names":["React","LockFloatingPositionContext","createContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B;;CAEC,GACD,OAAO,MAAMC,4CAA8BD,MAAME,aAAa,CAAC,OAAO"}

package/dist/lib/floating/LockFloatingPosition/LockFloatingPosition.d.ts

@@ -1,6 +0,0 @@
-import * as React from 'react';
-/**
- * @see https://github.com/VKCOM/VKUI/pull/9603
- */
-export declare const LockFloatingPositionContext: React.Context<boolean>;
-//# sourceMappingURL=LockFloatingPosition.d.ts.map

package/dist/lib/floating/LockFloatingPosition/LockFloatingPosition.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"LockFloatingPosition.d.ts","sourceRoot":"","sources":["../../../../src/lib/floating/LockFloatingPosition/LockFloatingPosition.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;GAEG;AACH,eAAO,MAAM,2BAA2B,wBAA6B,CAAC"}

package/dist/lib/floating/LockFloatingPosition/LockFloatingPosition.js

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

package/dist/lib/floating/LockFloatingPosition/LockFloatingPosition.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/lib/floating/LockFloatingPosition/LockFloatingPosition.tsx"],"sourcesContent":["import * as React from 'react';\n\n/**\n * @see https://github.com/VKCOM/VKUI/pull/9603\n */\nexport const LockFloatingPositionContext = React.createContext(false);\n"],"names":["React","LockFloatingPositionContext","createContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B;;CAEC,GACD,OAAO,MAAMC,4CAA8BD,MAAME,aAAa,CAAC,OAAO"}

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

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