@vkontakte/vkui 4.24.0 → 4.26.0

package/src/components/Touch/Touch.tsx

@@ -88,11 +88,14 @@ export const Touch: React.FC<TouchProps> = ({
   const { document } = useDOM();
   const events = React.useMemo(getSupportedEvents, []);
   const didSlide = React.useRef(false);
-  const gesture = React.useRef<Partial<Gesture>>(null);
-  const handle = (e: VKUITouchEvent, handers: TouchEventHandler[]) => {
+  const gesture = React.useRef<Partial<Gesture> | null>(null);
+  const handle = (
+    e: VKUITouchEvent,
+    handers: Array<TouchEventHandler | undefined | false>
+  ) => {
     stopPropagation && e.stopPropagation();
     handers.forEach((cb) => {
-      const duration = Date.now() - gesture.current.startT.getTime();
+      const duration = Date.now() - (gesture.current?.startT?.getTime() ?? 0);
       cb && cb({ ...(gesture.current as Gesture), duration, originalEvent: e });
     });
   };
@@ -129,13 +132,21 @@ export const Touch: React.FC<TouchProps> = ({
 
   useIsomorphicLayoutEffect(() => {
     const el = containerRef.current;
-    enterHandler.add(el);
-    leaveHandler.add(el);
-    startHandler.add(el);
+    if (el) {
+      enterHandler.add(el);
+      leaveHandler.add(el);
+      startHandler.add(el);
+    }
   }, [Component]);
 
   function onMove(e: VKUITouchEvent) {
-    const { isPressed, isX, isY, startX, startY } = gesture.current;
+    const {
+      isPressed,
+      isX,
+      isY,
+      startX = 0,
+      startY = 0,
+    } = gesture.current ?? {};
 
     if (isPressed) {
       // смещения
@@ -167,7 +178,7 @@ export const Touch: React.FC<TouchProps> = ({
         });
       }
 
-      if (gesture.current.isSlide) {
+      if (gesture.current?.isSlide) {
         Object.assign(gesture.current, {
           shiftX,
           shiftY,
@@ -185,13 +196,13 @@ export const Touch: React.FC<TouchProps> = ({
   }
 
   function onEnd(e: VKUITouchEvent) {
-    const { isPressed, isSlide, isSlideX, isSlideY } = gesture.current;
+    const { isPressed, isSlide, isSlideX, isSlideY } = gesture.current ?? {};
 
     if (isPressed) {
       handle(e, [_onEnd, isSlideY && onEndY, isSlideX && onEndX]);
     }
 
-    didSlide.current = isSlide;
+    didSlide.current = Boolean(isSlide);
     gesture.current = {};
 
     // Если это был тач-евент, симулируем отмену hover
@@ -207,8 +218,10 @@ export const Touch: React.FC<TouchProps> = ({
     useEventListener(events[2], onEnd, listenerParams),
     useEventListener(events[3], onEnd, listenerParams),
   ];
-  function subscribe(el: HTMLElement | Document | null) {
-    listeners.forEach((l) => l.add(el));
+  function subscribe(el: HTMLElement | Document | null | undefined) {
+    if (el) {
+      listeners.forEach((l) => l.add(el));
+    }
   }
 
   /**

package/src/components/Touch/TouchContext.ts

@@ -7,4 +7,5 @@ import * as React from "react";
 const TouchRootContext: React.Context<boolean> =
   React.createContext<boolean>(false);
 
+// eslint-disable-next-line import/no-default-export
 export default TouchRootContext;

package/src/components/Typography/Caption/Caption.tsx

@@ -40,4 +40,5 @@ const Caption: React.FC<CaptionProps> = ({
   );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default Caption;

package/src/components/Typography/Headline/Headline.tsx

@@ -32,4 +32,5 @@ const Headline: React.FC<HeadlineProps> = ({
   );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default Headline;

package/src/components/Typography/Subhead/Subhead.tsx

@@ -32,4 +32,5 @@ const Subhead: React.FC<SubheadProps> = ({
   );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default Subhead;

package/src/components/Typography/Text/Text.tsx

@@ -45,4 +45,5 @@ const Text: React.FC<TextProps> = ({
   );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default Text;

package/src/components/Typography/Title/Title.tsx

@@ -52,4 +52,5 @@ const Title: React.FC<TitleProps> = ({
   );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default Title;

package/src/components/UsersStack/UsersStack.tsx

@@ -32,7 +32,14 @@ export interface UsersStackProps extends React.HTMLAttributes<HTMLDivElement> {
 
 const UsersStack: React.FC<UsersStackProps> = (props: UsersStackProps) => {
   const platform = usePlatform();
-  const { photos, visibleCount, size, layout, children, ...restProps } = props;
+  const {
+    photos = [],
+    visibleCount = 0,
+    size,
+    layout,
+    children,
+    ...restProps
+  } = props;
   const { document } = useDOM();
 
   useIsomorphicLayoutEffect(() => {
@@ -92,4 +99,5 @@ UsersStack.defaultProps = {
   layout: "horizontal",
 };
 
+// eslint-disable-next-line import/no-default-export
 export default React.memo(UsersStack);

package/src/components/UsersStack/masks.tsx

@@ -2,8 +2,8 @@ import { canUseDOM } from "../../lib/dom";
 
 const masksCreated: Document[] = [];
 
-export function createMasks(document: Document): void {
-  if (!canUseDOM || masksCreated.includes(document)) {
+export function createMasks(document?: Document): void {
+  if (!canUseDOM || !document || masksCreated.includes(document)) {
     return;
   }
 

package/src/components/View/View.tsx

@@ -24,15 +24,13 @@ import { warnOnce } from "../../lib/warnOnce";
 import { swipeBackExcluded } from "./utils";
 import "./View.css";
 
-const warn = warnOnce("View");
-
 enum SwipeBackResults {
   fail = 1,
   success,
 }
 
 interface Scrolls {
-  [index: string]: number;
+  [index: string]: number | undefined;
 }
 
 interface ViewsScrolls {
@@ -92,21 +90,22 @@ export interface ViewState {
   animated: boolean;
 
   visiblePanels: string[];
-  activePanel: string;
-  isBack: boolean;
-  prevPanel: string;
-  nextPanel: string;
+  activePanel: string | null;
+  isBack: boolean | undefined;
+  prevPanel: string | null;
+  nextPanel: string | null;
 
   swipingBack: boolean;
   swipebackStartX: number;
   swipeBackShift: number;
-  swipeBackNextPanel: string;
-  swipeBackPrevPanel: string;
-  swipeBackResult: SwipeBackResults;
+  swipeBackNextPanel: string | null;
+  swipeBackPrevPanel: string | null;
+  swipeBackResult: SwipeBackResults | null;
 
   browserSwipe: boolean;
 }
 
+const warn = warnOnce("View");
 class View extends React.Component<ViewProps & DOMProps, ViewState> {
   constructor(props: ViewProps) {
     super(props);
@@ -135,9 +134,9 @@ class View extends React.Component<ViewProps & DOMProps, ViewState> {
     history: [],
   };
 
-  private readonly scrolls = scrollsCache[getNavId(this.props)] || {};
-  private transitionFinishTimeout: ReturnType<typeof setTimeout>;
-  private animationFinishTimeout: ReturnType<typeof setTimeout>;
+  private readonly scrolls = scrollsCache[getNavId(this.props) as string] || {};
+  private transitionFinishTimeout: number | undefined = undefined;
+  private animationFinishTimeout: number | undefined = undefined;
 
   get document() {
     return this.props.document;
@@ -151,7 +150,21 @@ class View extends React.Component<ViewProps & DOMProps, ViewState> {
     return React.Children.toArray(this.props.children) as React.ReactElement[];
   }
 
-  panelNodes: { [id: string]: HTMLDivElement } = {};
+  panelNodes: { [id: string]: HTMLDivElement | null } = {};
+
+  componentDidMount() {
+    if (process.env.NODE_ENV === "development") {
+      const { popout, modal } = this.props;
+      popout &&
+        warn(
+          "Свойство popout устарело и будет удалено в 5.0.0. Используйте одноименное свойство у SplitLayout."
+        );
+      modal &&
+        warn(
+          "Свойство modal устарело и будет удалено в 5.0.0. Используйте одноименное свойство у SplitLayout."
+        );
+    }
+  }
 
   componentWillUnmount() {
     const id = getNavId(this.props);
@@ -177,7 +190,7 @@ class View extends React.Component<ViewProps & DOMProps, ViewState> {
         );
 
       const isBack = firstLayerId === this.props.activePanel;
-      this.scrolls[prevProps.activePanel] = this.props.scroll.getScroll().y;
+      this.scrolls[prevProps.activePanel] = this.props.scroll?.getScroll().y;
 
       if (this.shouldDisableTransitionMotion()) {
         this.flushTransition(prevProps.activePanel, isBack);
@@ -195,7 +208,9 @@ class View extends React.Component<ViewProps & DOMProps, ViewState> {
 
         // Фолбек анимации перехода
         if (!animationEvent.supported) {
-          clearTimeout(this.animationFinishTimeout);
+          if (this.animationFinishTimeout) {
+            clearTimeout(this.animationFinishTimeout);
+          }
           this.animationFinishTimeout = setTimeout(
             this.transitionEndHandler,
             this.props.platform === ANDROID || this.props.platform === VKCOM
@@ -213,7 +228,9 @@ class View extends React.Component<ViewProps & DOMProps, ViewState> {
     ) {
       const nextPanel = this.props.activePanel;
       const prevPanel = prevProps.activePanel;
-      this.scrolls[prevState.swipeBackPrevPanel] = 0;
+      if (prevState.swipeBackPrevPanel !== null) {
+        this.scrolls[prevState.swipeBackPrevPanel] = 0;
+      }
       this.setState(
         {
           swipeBackPrevPanel: null,
@@ -226,7 +243,12 @@ class View extends React.Component<ViewProps & DOMProps, ViewState> {
           visiblePanels: [nextPanel],
         },
         () => {
-          this.props.scroll.scrollTo(0, this.scrolls[this.state.activePanel]);
+          if (this.state.activePanel !== null) {
+            this.props.scroll?.scrollTo(
+              0,
+              this.scrolls[this.state.activePanel]
+            );
+          }
           prevProps.onTransition &&
             prevProps.onTransition({
               isBack: true,
@@ -253,9 +275,10 @@ class View extends React.Component<ViewProps & DOMProps, ViewState> {
     // Если свайп назад отменился (когда пользователь недостаточно сильно свайпнул)
     if (
       prevState.swipeBackResult === SwipeBackResults.fail &&
-      !this.state.swipeBackResult
+      !this.state.swipeBackResult &&
+      this.state.activePanel !== null
     ) {
-      this.props.scroll.scrollTo(0, this.scrolls[this.state.activePanel]);
+      this.props.scroll?.scrollTo(0, this.scrolls[this.state.activePanel]);
     }
 
     // Закончился Safari свайп
@@ -276,20 +299,28 @@ class View extends React.Component<ViewProps & DOMProps, ViewState> {
 
   shouldDisableTransitionMotion(): boolean {
     return (
-      this.props.configProvider.transitionMotionEnabled === false ||
-      !this.props.splitCol.animate
+      this.props.configProvider?.transitionMotionEnabled === false ||
+      !this.props.splitCol?.animate
     );
   }
 
   waitTransitionFinish(
-    elem: HTMLElement,
+    elem: HTMLElement | null | undefined,
     eventHandler: TransitionEventHandler
   ): void {
-    if (transitionEvent.supported) {
-      elem.removeEventListener(transitionEvent.name, eventHandler);
-      elem.addEventListener(transitionEvent.name, eventHandler);
+    if (transitionEvent.supported && transitionEvent.name && elem) {
+      elem.removeEventListener(
+        transitionEvent.name as keyof HTMLElementEventMap,
+        eventHandler as EventListener
+      );
+      elem.addEventListener(
+        transitionEvent.name as keyof HTMLElementEventMap,
+        eventHandler as EventListener
+      );
     } else {
-      clearTimeout(this.transitionFinishTimeout);
+      if (this.transitionFinishTimeout) {
+        clearTimeout(this.transitionFinishTimeout);
+      }
       this.transitionFinishTimeout = setTimeout(
         eventHandler,
         this.props.platform === ANDROID || this.props.platform === VKCOM
@@ -300,12 +331,15 @@ class View extends React.Component<ViewProps & DOMProps, ViewState> {
   }
 
   blurActiveElement(): void {
-    if (typeof this.window !== "undefined" && this.document.activeElement) {
+    if (typeof this.window !== "undefined" && this.document?.activeElement) {
       (this.document.activeElement as HTMLElement).blur();
     }
   }
 
-  pickPanel(id: string) {
+  pickPanel(id: string | null) {
+    if (id === null) {
+      return undefined;
+    }
     return this.panelNodes[id];
   }
 
@@ -324,7 +358,7 @@ class View extends React.Component<ViewProps & DOMProps, ViewState> {
         isBack: undefined,
       },
       () => {
-        this.props.scroll.scrollTo(0, isBack ? this.scrolls[activePanel] : 0);
+        this.props.scroll?.scrollTo(0, isBack ? this.scrolls[activePanel] : 0);
         this.props.onTransition &&
           this.props.onTransition({ isBack, from: prevPanel, to: activePanel });
       }
@@ -333,15 +367,16 @@ class View extends React.Component<ViewProps & DOMProps, ViewState> {
 
   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)
+      (!e ||
+        [
+          "vkui-animation-ios-next-forward",
+          "vkui-animation-ios-prev-back",
+          "vkui-animation-view-next-forward",
+          "vkui-animation-view-prev-back",
+        ].includes(e.animationName)) &&
+      this.state.prevPanel !== null
     ) {
-      this.flushTransition(this.state.prevPanel, this.state.isBack);
+      this.flushTransition(this.state.prevPanel, Boolean(this.state.isBack));
     }
   };
 
@@ -387,8 +422,8 @@ class View extends React.Component<ViewProps & DOMProps, ViewState> {
 
     if (
       platform === IOS &&
-      !configProvider.isWebView &&
-      (e.startX <= 70 || e.startX >= this.window.innerWidth - 70) &&
+      !configProvider?.isWebView &&
+      (e.startX <= 70 || e.startX >= this.window!.innerWidth - 70) &&
       !this.state.browserSwipe
     ) {
       this.setState({ browserSwipe: true });
@@ -396,35 +431,38 @@ class View extends React.Component<ViewProps & DOMProps, ViewState> {
 
     if (
       platform === IOS &&
-      configProvider.isWebView &&
+      configProvider?.isWebView &&
       this.props.onSwipeBack
     ) {
-      if (this.state.animated && e.startX <= 70) {
+      if ((this.state.animated && e.startX <= 70) || !this.window) {
         return;
       }
 
       if (
         e.startX <= 70 &&
         !this.state.swipingBack &&
-        this.props.history.length > 1
+        (this.props.history?.length ?? 0) > 1
       ) {
-        this.scrolls[this.state.activePanel] = this.props.scroll.getScroll().y;
+        if (this.state.activePanel !== null) {
+          this.scrolls[this.state.activePanel] =
+            this.props.scroll?.getScroll().y;
+        }
         this.setState({
           swipingBack: true,
           swipebackStartX: e.startX,
           swipeBackPrevPanel: this.state.activePanel,
-          swipeBackNextPanel: this.props.history.slice(-2)[0],
+          swipeBackNextPanel: this.props.history!.slice(-2)[0],
         });
       }
       if (this.state.swipingBack) {
-        let swipeBackShift;
+        let swipeBackShift = 0;
         if (e.shiftX < 0) {
           swipeBackShift = 0;
         } else if (
           e.shiftX >
           this.window.innerWidth - this.state.swipebackStartX
         ) {
-          swipeBackShift = this.window.innerWidth;
+          swipeBackShift = this.window?.innerWidth;
         } else {
           swipeBackShift = e.shiftX;
         }
@@ -434,11 +472,11 @@ class View extends React.Component<ViewProps & DOMProps, ViewState> {
   };
 
   onEnd = (e: TouchEvent): void => {
-    if (this.state.swipingBack) {
+    if (this.state.swipingBack && this.window) {
       const speed = (this.state.swipeBackShift / e.duration) * 1000;
       if (this.state.swipeBackShift === 0) {
         this.onSwipeBackCancel();
-      } else if (this.state.swipeBackShift >= this.window.innerWidth) {
+      } else if (this.state.swipeBackShift >= (this.window?.innerWidth ?? 0)) {
         this.onSwipeBackSuccess();
       } else if (
         speed > 250 ||
@@ -452,8 +490,8 @@ class View extends React.Component<ViewProps & DOMProps, ViewState> {
     }
   };
 
-  calcPanelSwipeStyles(panelId: string): React.CSSProperties {
-    if (!canUseDOM) {
+  calcPanelSwipeStyles(panelId: string | undefined): React.CSSProperties {
+    if (!canUseDOM || !this.window) {
       return {};
     }
 
@@ -532,7 +570,7 @@ class View extends React.Component<ViewProps & DOMProps, ViewState> {
       const panelId = getNavId(panel.props, warn);
 
       return (
-        this.state.visiblePanels.includes(panelId) ||
+        (panelId !== undefined && this.state.visiblePanels.includes(panelId)) ||
         panelId === swipeBackPrevPanel ||
         panelId === swipeBackNextPanel
       );
@@ -582,16 +620,20 @@ class View extends React.Component<ViewProps & DOMProps, ViewState> {
                     swipeBackResult === SwipeBackResults.fail,
                 })}
                 onAnimationEnd={
-                  isTransitionTarget ? this.transitionEndHandler : null
+                  isTransitionTarget ? this.transitionEndHandler : undefined
+                }
+                ref={(el) =>
+                  panelId !== undefined && (this.panelNodes[panelId] = el)
                 }
-                ref={(el) => (this.panelNodes[panelId] = el)}
                 style={this.calcPanelSwipeStyles(panelId)}
                 key={panelId}
               >
                 <div
                   vkuiClass="View__panel-in"
                   style={{
-                    marginTop: compensateScroll ? -this.scrolls[panelId] : null,
+                    marginTop: compensateScroll
+                      ? -(this.scrolls[panelId as string] ?? 0)
+                      : undefined,
                   }}
                 >
                   <NavTransitionProvider
@@ -615,6 +657,7 @@ class View extends React.Component<ViewProps & DOMProps, ViewState> {
   }
 }
 
+// eslint-disable-next-line import/no-default-export
 export default withContext(
   withContext(
     withContext(