@vkontakte/vkui 8.1.1 → 8.1.3

package/package.json

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

package/src/components/Flex/FlexItem/FlexItem.tsx

@@ -1,15 +1,8 @@
+import { getRequiredValueByKey } from '../../../helpers/getValueByKey';
 import { type LayoutProps, resolveLayoutProps } from '../../../lib/layouts';
 import { warnOnce } from '../../../lib/warnOnce';
 import { RootComponent } from '../../RootComponent/RootComponent';
 import type { RootComponentProps } from '../../RootComponent/RootComponent';
-import styles from './FlexItem.module.css';
-
-const flexClassNames = {
-  grow: styles.flexGrow,
-  shrink: styles.flexShrink,
-  content: styles.flexContent,
-  fixed: styles.flexFixed,
-};
 
 export type FlexItemProps = RootComponentProps<HTMLElement> &
   Pick<LayoutProps, 'alignSelf' | 'justifySelf' | 'flexBasis'> & {
@@ -24,14 +17,48 @@ export type FlexItemProps = RootComponentProps<HTMLElement> &
     flex?: 'grow' | 'shrink' | 'content' | 'fixed' | undefined;
   };
 
+const resolveFlexProps = (flex: FlexItemProps['flex'], flexBasis: FlexItemProps['flexBasis']) => {
+  const overrideProps = flexBasis !== undefined ? { flexBasis } : {};
+  if (!flex) {
+    return overrideProps;
+  }
+  return {
+    ...getRequiredValueByKey<Pick<LayoutProps, 'flexGrow' | 'flexShrink' | 'flexBasis'>>(flex, {
+      grow: {
+        flexGrow: 1,
+        flexShrink: 0,
+        flexBasis: 'auto',
+      },
+      shrink: {
+        flexGrow: 0,
+        flexShrink: 1,
+        flexBasis: 'auto',
+      },
+      content: {
+        flexGrow: 1,
+        flexShrink: 1,
+        flexBasis: 'auto',
+      },
+      fixed: {
+        flexGrow: 0,
+        flexShrink: 0,
+        flexBasis: 'auto',
+      },
+    }),
+    ...overrideProps,
+  };
+};
+
 const warn = warnOnce('Flex.Item');
 
-export const FlexItem = ({ flex, ...restProps }: FlexItemProps): React.ReactNode => {
+export const FlexItem = ({ flex, flexBasis, ...restProps }: FlexItemProps): React.ReactNode => {
   if (process.env.NODE_ENV === 'development') {
     warn('Компонент Flex.Item устарел, используйте компонент Box в качестве альтернативы.');
   }
 
-  const resolvedProps = resolveLayoutProps(restProps);
+  const flexProps = resolveFlexProps(flex, flexBasis);
+
+  const resolvedProps = resolveLayoutProps({ ...restProps, ...flexProps });
 
-  return <RootComponent baseClassName={flex && flexClassNames[flex]} {...resolvedProps} />;
+  return <RootComponent {...resolvedProps} />;
 };

package/src/components/NavTransitionContext/NavTransitionContext.tsx

@@ -5,22 +5,26 @@ import * as React from 'react';
 
 export interface TransitionContextProps {
   entering: boolean;
+  animating: boolean;
 }
 const TransitionContext = React.createContext<TransitionContextProps>({
   entering: false,
+  animating: false,
 });
 export const useNavTransition = (): TransitionContextProps => React.useContext(TransitionContext);
 
 export const NavTransitionProvider = ({
   children,
   entering,
+  animating,
 }: React.PropsWithChildren<TransitionContextProps>): React.ReactNode => {
   const parentContext = useNavTransition();
   const contextValue = React.useMemo(
     () => ({
       entering: parentContext.entering || entering,
+      animating: parentContext.animating || animating,
     }),
-    [entering, parentContext.entering],
+    [entering, animating, parentContext.entering, parentContext.animating],
   );
 
   return <TransitionContext.Provider value={contextValue}>{children}</TransitionContext.Provider>;

package/src/components/OnboardingTooltip/OnboardingTooltip.tsx

@@ -15,7 +15,6 @@ 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';
@@ -118,7 +117,7 @@ export const OnboardingTooltip = ({
 }: OnboardingTooltipProps): React.ReactNode => {
   const generatedId = React.useId();
   const tooltipId = idProp || generatedId;
-  const { entering } = useNavTransition();
+  const { entering, animating } = useNavTransition();
 
   const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);
   const [tooltipContainer, setTooltipContainer] = React.useState<HTMLElement | null>(null);
@@ -138,8 +137,6 @@ export const OnboardingTooltip = ({
     overflowPadding,
   });
 
-  const isLock = React.useContext(LockFloatingPositionContext);
-
   const {
     x: floatingDataX,
     y: floatingDataY,
@@ -151,7 +148,7 @@ export const OnboardingTooltip = ({
     strategy: positionStrategy,
     ...(strictPlacement !== undefined && { placement: strictPlacement }),
     middleware: middlewares,
-    ...(!isLock && {
+    ...(!animating && {
       whileElementsMounted: (...args) =>
         autoUpdateFloatingElement(...args, { elementResize: true }),
     }),

package/src/components/Popper/Popper.tsx

@@ -12,7 +12,6 @@ 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';
@@ -26,6 +25,7 @@ import {
   FloatingArrow,
   type FloatingArrowProps as FloatingArrowPropsPrivate,
 } from '../FloatingArrow/FloatingArrow';
+import { useNavTransition } from '../NavTransitionContext/NavTransitionContext';
 import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './Popper.module.css';
 
@@ -138,6 +138,7 @@ export const Popper = ({
   style,
   ...restProps
 }: PopperProps): React.ReactNode => {
+  const { entering, animating } = useNavTransition();
   const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);
 
   const { strictPlacement, middlewares } = useFloatingMiddlewaresBootstrap({
@@ -157,8 +158,6 @@ export const Popper = ({
     overflowPadding,
   });
 
-  const isLock = React.useContext(LockFloatingPositionContext);
-
   const {
     x: floatingDataX,
     y: floatingDataY,
@@ -170,7 +169,7 @@ export const Popper = ({
     ...(strictPlacement !== undefined && { placement: strictPlacement }),
     ...(strategyProp !== undefined && { strategy: strategyProp }),
     middleware: middlewares,
-    ...(isLock
+    ...(animating
       ? {}
       : {
           whileElementsMounted: (...args) => {
@@ -229,5 +228,9 @@ export const Popper = ({
     </RootComponent>
   );
 
+  if (entering) {
+    return null;
+  }
+
   return <AppRootPortal usePortal={usePortal}>{dropdown}</AppRootPortal>;
 };

package/src/components/Root/Root.tsx

@@ -4,7 +4,6 @@ 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';
@@ -124,56 +123,55 @@ export const Root = ({
   };
 
   return (
-    <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.set(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.get(viewId) ?? 0)
-                        : undefined,
-                    }}
-                  >
-                    {view}
-                  </div>
-                </NavTransitionProvider>
-              </NavTransitionDirectionProvider>
-            </div>
-          );
-        })}
-      </RootComponent>
-    </LockFloatingPositionContext.Provider>
+    <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.set(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}
+                animating={transition}
+              >
+                <div
+                  className={styles.scrollCompensation}
+                  style={{
+                    marginTop: compensateScroll ? viewId && -(scrolls.get(viewId) ?? 0) : undefined,
+                  }}
+                >
+                  {view}
+                </div>
+              </NavTransitionProvider>
+            </NavTransitionDirectionProvider>
+          </div>
+        );
+      })}
+    </RootComponent>
   );
 };

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