@vkontakte/vkui 8.1.1 → 8.1.3

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/components/Flex/FlexItem/FlexItem.module.css

@@ -1,17 +0,0 @@
-/* flex */
-
-.flexGrow {
-  flex: 1 0 auto;
-}
-
-.flexShrink {
-  flex: 0 1 auto;
-}
-
-.flexContent {
-  flex: 1 1 auto;
-}
-
-.flexFixed {
-  flex: 0 0 auto;
-}

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/components/Flex/FlexItem/FlexItem.module.css

@@ -1,17 +0,0 @@
-/* flex */
-
-.flexGrow {
-  flex: 1 0 auto;
-}
-
-.flexShrink {
-  flex: 0 1 auto;
-}
-
-.flexContent {
-  flex: 1 1 auto;
-}
-
-.flexFixed {
-  flex: 0 0 auto;
-}

package/src/components/Flex/FlexItem/FlexItem.module.css.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"sources":["./FlexItem.module.css"],"names":["flexGrow","flexShrink","flexContent","flexFixed"],"mappings":"AAAA;AAAA,E,aAEAA,U,WAFA;AAAA,E,aAMAC,Y,WANA;AAAA,E,aAUAC,a,WAVA;AAAA,E,aAcAC,W,WAdA;AAAA;AAAA","file":"FlexItem.module.css.d.ts","sourceRoot":""}

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