@vkontakte/vkui 4.20.0 → 4.22.1

package/src/components/View/View.tsx

@@ -15,6 +15,7 @@ import { ScrollContext, ScrollContextInterface } from '../AppRoot/ScrollContext'
 import { NavTransitionProvider } from '../NavTransitionContext/NavTransitionContext';
 import { getNavId, NavIdProps } from '../../lib/getNavId';
 import { warnOnce } from '../../lib/warnOnce';
+import { swipeBackExcluded } from './utils';
 import './View.css';
 
 const warn = warnOnce('View');
@@ -29,14 +30,10 @@ interface ViewsScrolls {
   [index: string]: Scrolls;
 }
 
-type AnimationEventHandler = (e?: AnimationEvent) => void;
-
 type TransitionEventHandler = (e?: TransitionEvent) => void;
 
 export let scrollsCache: ViewsScrolls = {};
 
-const swipeBackExcludedTags = ['input', 'textarea'];
-
 export interface ViewProps extends React.HTMLAttributes<HTMLElement>, HasPlatform, NavIdProps {
   activePanel: string;
   /**
@@ -162,18 +159,28 @@ class View extends React.Component<ViewProps & DOMProps, ViewState> {
         .find((id) => id === prevProps.activePanel || id === this.props.activePanel);
 
       const isBack = firstLayerId === this.props.activePanel;
+      this.scrolls[prevProps.activePanel] = this.props.scroll.getScroll().y;
 
-      this.blurActiveElement();
+      if (this.shouldDisableTransitionMotion()) {
+        this.flushTransition(prevProps.activePanel, isBack);
+      } else {
+        this.blurActiveElement();
 
-      this.scrolls[prevProps.activePanel] = this.props.scroll.getScroll().y;
-      this.setState({
-        visiblePanels: [prevProps.activePanel, this.props.activePanel],
-        prevPanel: prevProps.activePanel,
-        nextPanel: this.props.activePanel,
-        activePanel: null,
-        animated: true,
-        isBack,
-      });
+        this.setState({
+          visiblePanels: [prevProps.activePanel, this.props.activePanel],
+          prevPanel: prevProps.activePanel,
+          nextPanel: this.props.activePanel,
+          activePanel: null,
+          animated: true,
+          isBack,
+        });
+
+        // Фолбек анимации перехода
+        if (!animationEvent.supported) {
+          clearTimeout(this.animationFinishTimeout);
+          this.animationFinishTimeout = setTimeout(this.transitionEndHandler, this.props.platform === ANDROID || this.props.platform === VKCOM ? 300 : 600);
+        }
+      }
     }
 
     // Закончилась анимация свайпа назад
@@ -196,12 +203,6 @@ class View extends React.Component<ViewProps & DOMProps, ViewState> {
       });
     }
 
-    // Начался переход
-    if (!prevState.animated && this.state.animated) {
-      const { prevPanel, nextPanel, isBack } = this.state;
-      this.waitAnimationFinish(this.pickPanel(isBack ? prevPanel : nextPanel), this.transitionEndHandler);
-    }
-
     // Начался свайп назад
     if (!prevState.swipingBack && this.state.swipingBack) {
       this.props.onSwipeBackStart && this.props.onSwipeBackStart();
@@ -245,21 +246,6 @@ class View extends React.Component<ViewProps & DOMProps, ViewState> {
     }
   }
 
-  waitAnimationFinish(elem: HTMLElement, eventHandler: AnimationEventHandler): void {
-    if (this.shouldDisableTransitionMotion()) {
-      eventHandler();
-      return;
-    }
-
-    if (animationEvent.supported) {
-      elem.removeEventListener(animationEvent.name, eventHandler);
-      elem.addEventListener(animationEvent.name, eventHandler);
-    } else {
-      clearTimeout(this.animationFinishTimeout);
-      this.animationFinishTimeout = setTimeout(eventHandler, this.props.platform === ANDROID || this.props.platform === VKCOM ? 300 : 600);
-    }
-  }
-
   blurActiveElement(): void {
     if (typeof this.window !== 'undefined' && this.document.activeElement) {
       (this.document.activeElement as HTMLElement).blur();
@@ -270,30 +256,32 @@ class View extends React.Component<ViewProps & DOMProps, ViewState> {
     return this.panelNodes[id];
   }
 
-  transitionEndHandler = (e?: AnimationEvent): void => {
+  flushTransition(prevPanel: string, isBack: boolean) {
+    const activePanel = this.props.activePanel;
+    if (isBack) {
+      this.scrolls[prevPanel] = 0;
+    }
+    this.setState({
+      prevPanel: null,
+      nextPanel: null,
+      visiblePanels: [activePanel],
+      activePanel,
+      animated: false,
+      isBack: undefined,
+    }, () => {
+      this.props.scroll.scrollTo(0, isBack ? this.scrolls[activePanel] : 0);
+      this.props.onTransition && this.props.onTransition({ isBack, from: prevPanel, to: activePanel });
+    });
+  }
+
+  transitionEndHandler = (e?: React.AnimationEvent): void => {
     if (!e || [
       'vkui-animation-ios-next-forward',
       'vkui-animation-ios-prev-back',
       'vkui-animation-view-next-forward',
       'vkui-animation-view-prev-back',
     ].includes(e.animationName)) {
-      const activePanel = this.props.activePanel;
-      const isBack = this.state.isBack;
-      const prevPanel = this.state.prevPanel;
-      if (isBack) {
-        this.scrolls[prevPanel] = 0;
-      }
-      this.setState({
-        prevPanel: null,
-        nextPanel: null,
-        visiblePanels: [activePanel],
-        activePanel: activePanel,
-        animated: false,
-        isBack: undefined,
-      }, () => {
-        isBack && this.props.scroll.scrollTo(0, this.scrolls[activePanel]);
-        this.props.onTransition && this.props.onTransition({ isBack, from: prevPanel, to: activePanel });
-      });
+      this.flushTransition(this.state.prevPanel, this.state.isBack);
     }
   };
 
@@ -327,12 +315,7 @@ class View extends React.Component<ViewProps & DOMProps, ViewState> {
   }
 
   onMoveX = (e: TouchEvent): void => {
-    const target = e.originalEvent.target as HTMLElement;
-    if (
-      target &&
-      typeof target.tagName === 'string' &&
-      swipeBackExcludedTags.includes(target.tagName.toLowerCase())
-    ) {
+    if (swipeBackExcluded(e)) {
       return;
     }
 
@@ -432,7 +415,7 @@ class View extends React.Component<ViewProps & DOMProps, ViewState> {
     } = this.props;
     const {
       prevPanel, nextPanel, activePanel, swipeBackPrevPanel, swipeBackNextPanel,
-      swipeBackResult, isBack,
+      swipeBackResult, isBack, animated,
     } = this.state;
 
     const hasPopout = !!popout;
@@ -449,7 +432,7 @@ class View extends React.Component<ViewProps & DOMProps, ViewState> {
     const disableAnimation = this.shouldDisableTransitionMotion();
 
     const modifiers = {
-      'View--animated': !disableAnimation && this.state.animated,
+      'View--animated': !disableAnimation && animated,
       'View--swiping-back': !disableAnimation && this.state.swipingBack,
       'View--no-motion': disableAnimation,
     };
@@ -466,6 +449,7 @@ class View extends React.Component<ViewProps & DOMProps, ViewState> {
           {panels.map((panel: React.ReactElement) => {
             const panelId = getNavId(panel.props, warn);
             const isPrev = panelId === prevPanel || panelId === swipeBackPrevPanel;
+            const isTransitionTarget = animated && panelId === (isBack ? prevPanel : nextPanel);
             const compensateScroll = isPrev || panelId === swipeBackNextPanel || panelId === nextPanel && isBack;
 
             return (
@@ -479,6 +463,7 @@ class View extends React.Component<ViewProps & DOMProps, ViewState> {
                   'View__panel--swipe-back-success': swipeBackResult === SwipeBackResults.success,
                   'View__panel--swipe-back-failed': swipeBackResult === SwipeBackResults.fail,
                 })}
+                onAnimationEnd={isTransitionTarget ? this.transitionEndHandler : null}
                 ref={(el) => this.panelNodes[panelId] = el}
                 style={this.calcPanelSwipeStyles(panelId)}
                 key={panelId}

package/src/components/View/ViewInfinite.tsx

@@ -15,6 +15,7 @@ import { ScrollContext, ScrollContextInterface } from '../AppRoot/ScrollContext'
 import { NavTransitionProvider } from '../NavTransitionContext/NavTransitionContext';
 import { getNavId, NavIdProps } from '../../lib/getNavId';
 import { warnOnce } from '../../lib/warnOnce';
+import { swipeBackExcluded } from './utils';
 import './View.css';
 
 const warn = warnOnce('ViewInfinite');
@@ -29,14 +30,10 @@ interface ViewsScrolls {
   [index: string]: Scrolls;
 }
 
-type AnimationEventHandler = (e?: AnimationEvent) => void;
-
 type TransitionEventHandler = (e?: TransitionEvent) => void;
 
 let scrollsCache: ViewsScrolls = {};
 
-const swipeBackExcludedTags = ['input', 'textarea'];
-
 export type TransitionParams = { from: string; to: string };
 
 export interface ViewInfiniteProps extends React.HTMLAttributes<HTMLElement>, HasPlatform, NavIdProps {
@@ -170,14 +167,24 @@ class ViewInfinite extends React.Component<ViewInfiniteProps & DOMProps, ViewInf
       };
       this.scrolls = scrolls;
 
-      this.setState({
-        visiblePanels: [prevProps.activePanel, this.props.activePanel],
-        prevPanel: prevProps.activePanel,
-        nextPanel: this.props.activePanel,
-        activePanel: null,
-        animated: true,
-        isBack,
-      });
+      if (this.shouldDisableTransitionMotion()) {
+        this.flushTransition(prevProps.activePanel, isBack);
+      } else {
+        this.setState({
+          visiblePanels: [prevProps.activePanel, this.props.activePanel],
+          prevPanel: prevProps.activePanel,
+          nextPanel: this.props.activePanel,
+          activePanel: null,
+          animated: true,
+          isBack,
+        });
+
+        // Фолбек анимации перехода
+        if (!animationEvent.supported) {
+          clearTimeout(this.animationFinishTimeout);
+          this.animationFinishTimeout = setTimeout(this.transitionEndHandler, this.props.platform === ANDROID || this.props.platform === VKCOM ? 300 : 600);
+        }
+      }
     }
 
     // Закончилась анимация свайпа назад
@@ -209,12 +216,6 @@ class ViewInfinite extends React.Component<ViewInfiniteProps & DOMProps, ViewInf
       });
     }
 
-    // Начался переход
-    if (!prevState.animated && this.state.animated) {
-      const { prevPanel, nextPanel, isBack } = this.state;
-      this.waitAnimationFinish(this.pickPanel(isBack ? prevPanel : nextPanel), this.transitionEndHandler);
-    }
-
     // Начался свайп назад
     if (!prevState.swipingBack && this.state.swipingBack) {
       this.props.onSwipeBackStart && this.props.onSwipeBackStart();
@@ -265,21 +266,6 @@ class ViewInfinite extends React.Component<ViewInfiniteProps & DOMProps, ViewInf
     }
   }
 
-  waitAnimationFinish(elem: HTMLElement, eventHandler: AnimationEventHandler): void {
-    if (this.shouldDisableTransitionMotion()) {
-      eventHandler();
-      return;
-    }
-
-    if (animationEvent.supported) {
-      elem.removeEventListener(animationEvent.name, eventHandler);
-      elem.addEventListener(animationEvent.name, eventHandler);
-    } else {
-      clearTimeout(this.animationFinishTimeout);
-      this.animationFinishTimeout = setTimeout(eventHandler, this.props.platform === ANDROID || this.props.platform === VKCOM ? 300 : 600);
-    }
-  }
-
   blurActiveElement(): void {
     if (typeof this.window !== 'undefined' && this.document.activeElement) {
       (this.document.activeElement as HTMLElement).blur();
@@ -290,39 +276,41 @@ class ViewInfinite extends React.Component<ViewInfiniteProps & DOMProps, ViewInf
     return this.panelNodes[id];
   }
 
-  transitionEndHandler = (e?: AnimationEvent): void => {
+  flushTransition(prevPanel: string, isBack: boolean) {
+    const activePanel = this.props.activePanel;
+
+    const prevPanelScrolls = [...this.scrolls[prevPanel] || []].slice(0, -1);
+    const newPanelScrolls = [...this.scrolls[activePanel] || []];
+    const scrollPosition = isBack ? newPanelScrolls.pop() : 0;
+    if (isBack) {
+      this.scrolls = {
+        ...this.scrolls,
+        [prevPanel]: prevPanelScrolls,
+        [activePanel]: newPanelScrolls,
+      };
+    }
+
+    this.setState({
+      prevPanel: null,
+      nextPanel: null,
+      visiblePanels: [activePanel],
+      activePanel: activePanel,
+      animated: false,
+      isBack: undefined,
+    }, () => {
+      this.props.scroll.scrollTo(0, isBack ? scrollPosition : 0);
+      this.props.onTransition && this.props.onTransition({ isBack, from: prevPanel, to: activePanel });
+    });
+  }
+
+  transitionEndHandler = (e?: React.AnimationEvent): void => {
     if (!e || [
       'vkui-animation-ios-next-forward',
       'vkui-animation-ios-prev-back',
       'vkui-animation-view-next-forward',
       'vkui-animation-view-prev-back',
     ].includes(e.animationName)) {
-      const activePanel = this.props.activePanel;
-      const prevPanel = this.state.prevPanel;
-      const isBack = this.state.isBack;
-
-      const prevPanelScrolls = [...this.scrolls[prevPanel] || []].slice(0, -1);
-      const newPanelScrolls = [...this.scrolls[activePanel] || []];
-      const scrollPosition = isBack ? newPanelScrolls.pop() : 0;
-      if (isBack) {
-        this.scrolls = {
-          ...this.scrolls,
-          [prevPanel]: prevPanelScrolls,
-          [activePanel]: newPanelScrolls,
-        };
-      }
-
-      this.setState({
-        prevPanel: null,
-        nextPanel: null,
-        visiblePanels: [activePanel],
-        activePanel: activePanel,
-        animated: false,
-        isBack: undefined,
-      }, () => {
-        isBack && this.props.scroll.scrollTo(0, scrollPosition);
-        this.props.onTransition && this.props.onTransition({ isBack, from: prevPanel, to: activePanel });
-      });
+      this.flushTransition(this.state.prevPanel, this.state.isBack);
     }
   };
 
@@ -356,12 +344,7 @@ class ViewInfinite extends React.Component<ViewInfiniteProps & DOMProps, ViewInf
   }
 
   onMoveX = (e: TouchEvent): void => {
-    const target = e.originalEvent.target as HTMLElement;
-    if (
-      target &&
-      typeof target.tagName === 'string' &&
-      swipeBackExcludedTags.includes(target.tagName.toLowerCase())
-    ) {
+    if (swipeBackExcluded(e)) {
       return;
     }
 
@@ -465,7 +448,7 @@ class ViewInfinite extends React.Component<ViewInfiniteProps & DOMProps, ViewInf
       ...restProps
     } = this.props;
     const {
-      prevPanel, nextPanel, activePanel, isBack,
+      prevPanel, nextPanel, activePanel, isBack, animated,
       swipeBackPrevPanel, swipeBackNextPanel, swipeBackResult, swipingBack,
     } = this.state;
 
@@ -517,6 +500,7 @@ class ViewInfinite extends React.Component<ViewInfiniteProps & DOMProps, ViewInf
             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 = this.scrolls[panelId] || [];
             const scroll = scrollList[scrollList.length - 1] || 0;
 
@@ -531,6 +515,7 @@ class ViewInfinite extends React.Component<ViewInfiniteProps & DOMProps, ViewInf
                   'View__panel--swipe-back-success': swipeBackResult === SwipeBackResults.success,
                   'View__panel--swipe-back-failed': swipeBackResult === SwipeBackResults.fail,
                 })}
+                onAnimationEnd={isTransitionTarget ? this.transitionEndHandler : null}
                 ref={(el) => this.panelNodes[panelId] = el}
                 style={this.calcPanelSwipeStyles(panelId)}
                 key={panelId}

package/src/components/View/utils.ts

@@ -0,0 +1,8 @@
+import { TouchEvent } from '../Touch/Touch';
+
+const swipeBackExcludedSelector = 'input, textarea, [data-vkui-swipe-back=false]';
+
+export function swipeBackExcluded(e: TouchEvent) {
+  const target = e.originalEvent.target as HTMLElement;
+  return Boolean(target?.closest(swipeBackExcludedSelector));
+}

package/src/index.ts

@@ -109,6 +109,10 @@ export { default as Gallery } from './components/Gallery/Gallery';
 export type { GalleryProps } from './components/Gallery/Gallery';
 export { default as Avatar } from './components/Avatar/Avatar';
 export type { AvatarProps } from './components/Avatar/Avatar';
+export { GridAvatar } from './components/GridAvatar/GridAvatar';
+export type { GridAvatarProps } from './components/GridAvatar/GridAvatar';
+export { InitialsAvatar } from './components/InitialsAvatar/InitialsAvatar';
+export type { InitialsAvatarProps } from './components/InitialsAvatar/InitialsAvatar';
 export { default as Progress } from './components/Progress/Progress';
 export type { ProgressProps } from './components/Progress/Progress';
 export { default as Search } from './components/Search/Search';

package/src/lib/accessibility.ts

@@ -50,7 +50,7 @@ const ACCESSIBLE_KEYS: AccessibleKey[] = [
   },
 ];
 
-export function pressedKey(e: KeyboardEvent): Keys {
+export function pressedKey(e: KeyboardEvent | React.KeyboardEvent<HTMLElement>): Keys {
   return ACCESSIBLE_KEYS.find(({ key, keyCode }) => key.includes(e.key) || keyCode === e.keyCode)?.code || null;
 }
 
@@ -66,7 +66,7 @@ export function shouldTriggerClickOnEnterOrSpace(e: KeyboardEvent | React.Keyboa
     && (role === 'button' || role === 'link');
 
   const isNativeAnchorEl = tagName === 'A' && el.hasAttribute('href');
-  const keyPressed = pressedKey(e as KeyboardEvent);
+  const keyPressed = pressedKey(e);
 
   return isValidKeyboardEventTarget && (
     // trigger buttons on Space

package/src/lib/prefixClass.ts

@@ -16,13 +16,16 @@ function prefixSingle(scopedStyle: string): string {
 }
 
 export function prefixClass(scopedStyle?: string | string[]) {
-  let resolved = '';
   if (typeof scopedStyle === 'string') {
-    resolved = prefixSingle(scopedStyle);
-  } else {
-    for (let i = 0; i < scopedStyle.length; i++) {
-      resolved += ' ' + prefixSingle(scopedStyle[i]);
-    }
+    return prefixSingle(scopedStyle);
+  }
+
+  let resolved = '';
+  for (let i = 0; i < scopedStyle.length; i++) {
+    const separator = resolved ? ' ' : '';
+
+    resolved += separator + prefixSingle(scopedStyle[i]);
   }
+
   return resolved;
 }

package/src/lib/supportEvents.ts

@@ -10,9 +10,8 @@ export type VKUISupportEvents = {
 declare const WebKitAnimationEvent: AnimationEvent;
 declare const WebKitTransitionEvent: TransitionEvent;
 
-const animationEvent: VKUISupportEvents = {
+const animationEvent = {
   supported: false,
-  name: null,
 };
 
 const transitionEvent: VKUISupportEvents = {
@@ -23,10 +22,8 @@ const transitionEvent: VKUISupportEvents = {
 if (canUseDOM && !isTesting) {
   if (typeof AnimationEvent !== 'undefined') {
     animationEvent.supported = true;
-    animationEvent.name = 'animationend';
   } else if (typeof WebKitAnimationEvent !== 'undefined') {
     animationEvent.supported = true;
-    animationEvent.name = 'webkitAnimationEnd';
   }
 
   if (typeof TransitionEvent !== 'undefined') {

package/src/styles/components.css

@@ -71,6 +71,8 @@
 @import '../components/Gradient/Gradient.css';
 @import '../components/SimpleCell/SimpleCell.css';
 @import '../components/Cell/Cell.css';
+@import '../components/Cell/CellCheckbox/CellCheckbox.css';
+@import '../components/Cell/CellDragger/CellDragger.css';
 @import '../components/CellButton/CellButton.css';
 @import '../components/RichCell/RichCell.css';
 @import '../components/HorizontalCell/HorizontalCell.css';
@@ -80,6 +82,8 @@
 @import '../components/Switch/Switch.css';
 @import '../components/InfoRow/InfoRow.css';
 @import '../components/Avatar/Avatar.css';
+@import '../components/InitialsAvatar/InitialsAvatar.css';
+@import '../components/GridAvatar/GridAvatar.css';
 @import '../components/Gallery/Gallery.css';
 @import '../components/Progress/Progress.css';
 @import '../components/Search/Search.css';

package/src/styles/vkcom_light.css

@@ -4,7 +4,7 @@
 */
 body[scheme="vkcom_light"], [scheme="vkcom_light"] {
   --accent: #5181b8;
-  --accent_alternate: #2787f5;
+  --accent_alternate: #0077ff;
   --action_sheet_action_foreground: #5181b8;
   --action_sheet_separator: rgba(0, 0, 0, 0.12);
   --activity_indicator_tint: #aeb7c2;
@@ -71,7 +71,7 @@ body[scheme="vkcom_light"], [scheme="vkcom_light"] {
   --feed_recommended_friend_promo_background: #5181b8;
   --field_background: #f7f8fa;
   --field_border: #dce1e6;
-  --field_error_background: #ff5c5c;
+  --field_error_background: #faebeb;
   --field_error_border: #e64646;
   --field_text_placeholder: #818c99;
   --field_valid_border: #4bb34b;
@@ -96,7 +96,7 @@ body[scheme="vkcom_light"], [scheme="vkcom_light"] {
   --header_text_alternate: #000000;
   --header_text_secondary: #818c99;
   --header_tint: #aeb7c2;
-  --header_tint_alternate: #2787f5;
+  --header_tint_alternate: #0077ff;
   --icon_alpha_placeholder: #ffffff;
   --icon_medium: #6f7985;
   --icon_medium_alpha: rgba(0, 0, 0, 0.48);

package/src/testing/utils.tsx

@@ -10,7 +10,9 @@ export function fakeTimers() {
   afterEach(() => jest.useRealTimers());
 }
 
-export const runAllTimers = () => act(() => jest.runAllTimers());
+export const runAllTimers = () => act(() => {
+  jest.runAllTimers();
+});
 
 export const imgOnlyAttributes: ImgOnlyAttributes = {
   alt: 'test',
@@ -123,3 +125,34 @@ export const mockScrollContext = (getY: () => number): [React.FC, jest.Mock] =>
     scrollTo,
   ];
 };
+
+const isNullOrUndefined = (val: any) => val === null || val === undefined;
+
+// Согласно спеке, offsetParent в ряде случаев будет null
+Object.defineProperty(HTMLElement.prototype, 'offsetParent', {
+  get() {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    let element: HTMLElement = this;
+    while (!isNullOrUndefined(element) &&
+    (isNullOrUndefined(element.style) ||
+      isNullOrUndefined(element.style.display) ||
+      element.style.display.toLowerCase() !== 'none')) {
+      // @ts-ignore
+      element = element.parentNode;
+    }
+
+    if (!isNullOrUndefined(element)) {
+      return null;
+    }
+
+    if (!isNullOrUndefined(this.style) && !isNullOrUndefined(this.style.position) && this.style.position.toLowerCase() === 'fixed') {
+      return null;
+    }
+
+    if (this.tagName.toLowerCase() === 'html' || this.tagName.toLowerCase() === 'body') {
+      return null;
+    }
+
+    return this.parentNode;
+  },
+});

package/src/types.ts

@@ -14,6 +14,10 @@ export interface HasRef<T> {
   getRef?: React.Ref<T>;
 }
 
+export interface HasComponent {
+  Component?: React.ElementType;
+}
+
 export interface HasAlign {
   align?: AlignType;
 }