@vkontakte/vkui 6.1.2 → 6.2.0

package/src/components/View/View.tsx

@@ -2,11 +2,8 @@ import * as React from 'react';
 import { classNames, noop } from '@vkontakte/vkjs';
 import { usePlatform } from '../../hooks/usePlatform';
 import { usePrevious } from '../../hooks/usePrevious';
-import { useTimeout } from '../../hooks/useTimeout';
-import { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';
 import { blurActiveElement, canUseDOM, useDOM } from '../../lib/dom';
 import { getNavId, NavIdProps } from '../../lib/getNavId';
-import { animationEvent } from '../../lib/supportEvents';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { warnOnce } from '../../lib/warnOnce';
 import { HTMLAttributesWithRootRef } from '../../types';
@@ -134,13 +131,6 @@ export const View = ({
   const iOSSwipeBackSimulationEnabled =
     !disableAnimation && platform === 'ios' && configProvider.isWebView && Boolean(onSwipeBack);
 
-  const pickPanel = (id: string | null) => {
-    if (id === null) {
-      return null;
-    }
-    return panelNodes.current[id];
-  };
-
   const flushTransition = React.useCallback(
     (prevPanel: string, isBackTransition: boolean) => {
       if (isBackTransition) {
@@ -171,26 +161,11 @@ export const View = ({
     afterTransition.current = noop;
   }, [afterTransition.current]);
 
-  const transitionEndHandler = React.useCallback(
-    (e?: React.AnimationEvent): void => {
-      if (
-        (!e ||
-          [
-            styles['animation-ios-next-forward'],
-            styles['animation-ios-prev-back'],
-            styles['animation-view-next-forward'],
-            styles['animation-view-prev-back'],
-          ].includes(e.animationName)) &&
-        prevPanel !== null
-      ) {
-        flushTransition(prevPanel, Boolean(isBack));
-      }
-    },
-    [flushTransition, isBack, prevPanel],
-  );
-
-  const { waitTransitionFinish } = useWaitTransitionFinish();
-  const animationFinishTimeout = useTimeout(transitionEndHandler, platform === 'ios' ? 600 : 300);
+  const onAnimationEnd = React.useCallback(() => {
+    if (prevPanel !== null) {
+      flushTransition(prevPanel, Boolean(isBack));
+    }
+  }, [flushTransition, isBack, prevPanel]);
 
   const onSwipeBackSuccess = React.useCallback(() => {
     onSwipeBack && onSwipeBack();
@@ -206,24 +181,15 @@ export const View = ({
     setSwipeBackShift(0);
   }, [onSwipeBackCancelProp]);
 
-  const swipingBackTransitionEndHandler = React.useCallback(
-    (e?: TransitionEvent): void => {
-      // indexOf because of vendor prefixes in old browsers
-      if (
-        !e ||
-        (e?.propertyName.includes('transform') && e?.target === pickPanel(swipeBackNextPanel))
-      ) {
-        switch (swipeBackResult) {
-          case 'fail':
-            onSwipeBackCancel();
-            break;
-          case 'success':
-            onSwipeBackSuccess();
-        }
-      }
-    },
-    [onSwipeBackCancel, onSwipeBackSuccess, swipeBackNextPanel, swipeBackResult],
-  );
+  const swipingBackTransitionEndHandler = React.useCallback(() => {
+    switch (swipeBackResult) {
+      case 'fail':
+        onSwipeBackCancel();
+        break;
+      case 'success':
+        onSwipeBackSuccess();
+    }
+  }, [onSwipeBackCancel, onSwipeBackSuccess, swipeBackResult]);
 
   const handleTouchMoveXForNativeIOSSwipeBackOrSwipeNext = (event: TouchEvent) => {
     if (browserSwipe) {
@@ -300,7 +266,6 @@ export const View = ({
 
   const handleTouchEndForIOSSwipeBackSimulation = (event: TouchEvent) => {
     swipeBackPrevented.current = false;
-
     if (swipingBack) {
       const speed = (swipeBackShift / event.duration) * 1000;
       if (swipeBackShift === 0) {
@@ -366,6 +331,12 @@ export const View = ({
     };
   };
 
+  const onTransitionEnd = (event: React.TransitionEvent<HTMLDivElement>) => {
+    if (event.propertyName.includes('transform')) {
+      swipingBackTransitionEndHandler();
+    }
+  };
+
   React.useEffect(() => {
     // Нужен переход
     if (
@@ -392,11 +363,6 @@ export const View = ({
         setActivePanel(null);
         setAnimated(true);
         setIsBack(isBackTransition);
-
-        // Фолбек анимации перехода
-        if (!animationEvent.supported) {
-          animationFinishTimeout.set();
-        }
       }
     }
 
@@ -432,13 +398,7 @@ export const View = ({
     }
 
     // Началась анимация завершения свайпа назад.
-    if (!prevSwipeBackResult && swipeBackResult) {
-      waitTransitionFinish(
-        pickPanel(swipeBackNextPanel),
-        swipingBackTransitionEndHandler,
-        platform === 'ios' ? 600 : 300,
-      );
-    }
+    // см. `onTransitionEnd()`
 
     // Закончился Safari свайп
     if (prevActivePanel !== activePanelProp && browserSwipe) {
@@ -452,13 +412,11 @@ export const View = ({
   }, [
     activePanelProp,
     activePanel,
-    animationFinishTimeout,
     browserSwipe,
     children,
     disableAnimation,
     document,
     flushTransition,
-    platform,
     prevActivePanel,
     prevBrowserSwipe,
     prevOnTransition,
@@ -468,8 +426,6 @@ export const View = ({
     scroll,
     swipeBackNextPanel,
     swipeBackResult,
-    swipingBackTransitionEndHandler,
-    waitTransitionFinish,
   ]);
 
   React.useEffect(
@@ -516,32 +472,49 @@ export const View = ({
           iOSSwipeBackSimulationEnabled
             ? handleTouchMoveXForIOSSwipeBackSimulation
             : platform === 'ios'
-            ? handleTouchMoveXForNativeIOSSwipeBackOrSwipeNext
-            : undefined
+              ? handleTouchMoveXForNativeIOSSwipeBackOrSwipeNext
+              : undefined
         }
         onEnd={iOSSwipeBackSimulationEnabled ? handleTouchEndForIOSSwipeBackSimulation : undefined}
       >
         <div className={styles['View__panels']}>
           {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);
+
+            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 = !prevSwipeBackResult && swipeBackResult && isSwipeBackNext;
+
+            let scrollCompensateStyle: React.CSSProperties | undefined = undefined;
+
+            if (isPanelPrev || (isPanelNext && isBack) || isSwipeBackPrev || isSwipeBackNext) {
+              const marginTop = scrolls.current[panelId];
+              if (marginTop !== undefined) {
+                scrollCompensateStyle = { marginTop: -1 * marginTop };
+              }
+            }
 
             return (
               <div
                 className={classNames(
                   styles['View__panel'],
-                  panelId === activePanel && styles['View__panel--active'],
-                  panelId === prevPanel && styles['View__panel--prev'],
-                  panelId === nextPanel && styles['View__panel--next'],
-                  panelId === swipeBackPrevPanel && styles['View__panel--swipe-back-prev'],
-                  panelId === swipeBackNextPanel && styles['View__panel--swipe-back-next'],
+
+                  isPanelActive && styles['View__panel--active'],
+                  isPanelPrev && styles['View__panel--prev'],
+                  isPanelNext && styles['View__panel--next'],
+
+                  isSwipeBackPrev && styles['View__panel--swipe-back-prev'],
+                  isSwipeBackNext && styles['View__panel--swipe-back-next'],
                   swipeBackResult === 'success' && styles['View__panel--swipe-back-success'],
                   swipeBackResult === 'fail' && styles['View__panel--swipe-back-failed'],
                 )}
-                onAnimationEnd={isTransitionTarget ? transitionEndHandler : undefined}
+                onTransitionEnd={isSwipeBackTarget ? onTransitionEnd : undefined}
+                onAnimationEnd={isAnimatedTarget ? onAnimationEnd : undefined}
                 ref={(el) => panelId !== undefined && (panelNodes.current[panelId] = el)}
                 style={calcPanelSwipeStyles(panelId)}
                 key={panelId}
@@ -552,12 +525,7 @@ export const View = ({
                     style={calcPanelSwipeBackOverlayStyles(panelId)}
                   />
                 )}
-                <div
-                  className={styles['View__panel-in']}
-                  style={{
-                    marginTop: compensateScroll ? -(scrolls.current[panelId] ?? 0) : undefined,
-                  }}
-                >
+                <div className={styles['View__panel-in']} style={scrollCompensateStyle}>
                   <NavTransitionDirectionProvider isBack={swipingBack || isBack}>
                     <NavTransitionProvider
                       entering={panelId === nextPanel || panelId === swipeBackNextPanel}

package/src/components/View/ViewInfinite.tsx

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { classNames } from '@vkontakte/vkjs';
+import { classNames, noop } from '@vkontakte/vkjs';
 import { withContext } from '../../hoc/withContext';
 import { withPlatform } from '../../hoc/withPlatform';
 import { canUseDOM, DOMProps, withDOM } from '../../lib/dom';
 import { getNavId, NavIdProps } from '../../lib/getNavId';
-import { animationEvent, transitionEvent } from '../../lib/supportEvents';
 import { warnOnce } from '../../lib/warnOnce';
 import { HasPlatform, HTMLAttributesWithRootRef } from '../../types';
 import { ScrollContext, ScrollContextInterface } from '../AppRoot/ScrollContext';
@@ -127,7 +126,7 @@ class ViewInfiniteComponent extends React.Component<
   private swipeBackPrevented = false;
   private scrolls = scrollsCache[getNavId(this.props, warn) as string] || {};
   private transitionFinishTimeout: ReturnType<typeof setTimeout> | undefined = undefined;
-  private animationFinishTimeout: ReturnType<typeof setTimeout> | undefined = undefined;
+  private readonly animationFinishTimeout: ReturnType<typeof setTimeout> | undefined = undefined;
 
   get document() {
     return this.props.document;
@@ -194,17 +193,6 @@ class ViewInfiniteComponent extends React.Component<
           animated: true,
           isBack,
         });
-
-        // Фолбек анимации перехода
-        if (!animationEvent.supported) {
-          if (this.animationFinishTimeout) {
-            clearTimeout(this.animationFinishTimeout);
-          }
-          this.animationFinishTimeout = setTimeout(
-            this.transitionEndHandler,
-            this.props.platform === 'android' || this.props.platform === 'vkcom' ? 300 : 600,
-          );
-        }
       }
     }
 
@@ -296,24 +284,30 @@ class ViewInfiniteComponent extends React.Component<
     );
   }
 
+  private transitionDisposer = noop;
+
+  private disposeTransition() {
+    this.transitionDisposer();
+    this.transitionDisposer = noop;
+  }
+
   waitTransitionFinish(
     elem: HTMLElement | null | undefined,
     eventHandler: TransitionEventHandler,
   ): void {
-    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,
-      );
+    if (this.shouldDisableTransitionMotion()) {
+      this.disposeTransition();
+      this.transitionFinishTimeout = setTimeout(eventHandler);
+    } else if (elem) {
+      this.disposeTransition();
+      elem.addEventListener('transitionend', eventHandler);
+      this.transitionDisposer = () => {
+        elem.removeEventListener('transitionend', eventHandler);
+      };
     } else {
       if (this.transitionFinishTimeout) {
         clearTimeout(this.transitionFinishTimeout);
       }
-
       this.transitionFinishTimeout = setTimeout(
         eventHandler,
         this.props.platform === 'android' || this.props.platform === 'vkcom' ? 300 : 600,
@@ -365,17 +359,8 @@ class ViewInfiniteComponent extends React.Component<
     );
   }
 
-  transitionEndHandler = (e?: React.AnimationEvent): void => {
-    if (
-      (!e ||
-        [
-          styles['animation-ios-next-forward'],
-          styles['animation-ios-prev-back'],
-          styles['animation-view-next-forward'],
-          styles['animation-view-prev-back'],
-        ].includes(e.animationName)) &&
-      this.state.prevPanel !== null
-    ) {
+  transitionEndHandler = (): void => {
+    if (this.state.prevPanel !== null) {
       this.flushTransition(this.state.prevPanel, Boolean(this.state.isBack));
     }
   };
@@ -628,8 +613,8 @@ class ViewInfiniteComponent extends React.Component<
             iOSSwipeBackSimulationEnabled
               ? this.handleTouchMoveXForIOSSwipeBackSimulation
               : platform === 'ios'
-              ? this.handleTouchMoveXForNativeIOSSwipeBackOrSwipeNext
-              : undefined
+                ? this.handleTouchMoveXForNativeIOSSwipeBackOrSwipeNext
+                : undefined
           }
           onEnd={
             iOSSwipeBackSimulationEnabled ? this.handleTouchEndForIOSSwipeBackSimulation : undefined

package/src/components/WriteBar/WriteBar.module.css

@@ -1,5 +1,5 @@
 .WriteBar {
-  background: var(--vkui--color_background_modal);
+  background: var(--vkui--color_background_contrast_themed);
 }
 
 .WriteBar--shadow {

package/src/components/WriteBar/WriteBar.tsx

@@ -4,6 +4,7 @@ import { useExternRef } from '../../hooks/useExternRef';
 import { usePlatform } from '../../hooks/usePlatform';
 import { callMultiple } from '../../lib/callMultiple';
 import { HasRef, HasRootRef } from '../../types';
+import { useResizeTextarea } from '../Textarea/useResizeTextarea';
 import { Headline } from '../Typography/Headline/Headline';
 import { Title } from '../Typography/Title/Title';
 import { TypographyProps } from '../Typography/Typography';
@@ -65,25 +66,8 @@ export const WriteBar = ({
 }: WriteBarProps) => {
   const platform = usePlatform();
 
-  const textareaRef = useExternRef(getRef);
-  const currentScrollHeight = React.useRef<number>();
-
-  const resize = React.useCallback(() => {
-    const textareaEl = textareaRef.current;
-    if (!textareaEl) {
-      return;
-    }
-
-    if (textareaEl.offsetParent) {
-      textareaEl.style.height = '';
-      textareaEl.style.height = `${textareaEl.scrollHeight}px`;
-
-      if (textareaEl.scrollHeight !== currentScrollHeight.current && onHeightChange) {
-        onHeightChange();
-        currentScrollHeight.current = textareaEl.scrollHeight;
-      }
-    }
-  }, [onHeightChange, textareaRef]);
+  const [refResizeTextarea, resize] = useResizeTextarea(onHeightChange, true);
+  const textareaRef = useExternRef(getRef, refResizeTextarea);
 
   React.useEffect(resize, [resize, platform]);
 

package/src/hooks/useAdaptivityConditionalRender/helpers.ts

@@ -25,14 +25,14 @@ export const getAdaptiveSizeType = (
       type === undefined
         ? compactClassNames.mq
         : type === 'compact'
-        ? compactClassNames[type]
-        : false,
+          ? compactClassNames[type]
+          : false,
     regular:
       type === undefined
         ? regularClassNames.mq
         : type === 'regular'
-        ? regularClassNames[type]
-        : false,
+          ? regularClassNames[type]
+          : false,
   };
 };
 
@@ -45,14 +45,14 @@ export const getAdaptiveViewWidth = (
       viewWidth === undefined
         ? viewWidthClassNames.tabletMinus.mq
         : viewWidth < ViewWidth.TABLET
-        ? viewWidthClassNames.tabletMinus.forced
-        : false,
+          ? viewWidthClassNames.tabletMinus.forced
+          : false,
     tabletPlus:
       viewWidth === undefined
         ? viewWidthClassNames.tabletPlus.mq
         : viewWidth >= ViewWidth.TABLET
-        ? viewWidthClassNames.tabletPlus.forced
-        : false,
+          ? viewWidthClassNames.tabletPlus.forced
+          : false,
   };
 };
 

package/src/hooks/useCalendar.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { CalendarProps } from '../components/Calendar/Calendar';
-import { isDayMinMaxRestricted } from '../lib/calendar';
+import { DEFAULT_MAX_YEAR, DEFAULT_MIN_YEAR, isDayMinMaxRestricted } from '../lib/calendar';
 import {
   addMonths,
   endOfDay,
@@ -85,6 +85,55 @@ export function useCalendar({
     [disableFuture, disablePast, shouldDisableDate, minDateTime, maxDateTime],
   );
 
+  const isMonthDisabled = React.useCallback(
+    (month: number, year?: number): boolean => {
+      const now = new Date();
+      year = year || viewDate.getFullYear();
+      const minMonth = minDateTime ? minDateTime.getMonth() : 0;
+      const maxMonth = maxDateTime ? maxDateTime.getMonth() : 11;
+      const minYear = minDateTime?.getFullYear() || DEFAULT_MIN_YEAR;
+      const maxYear = maxDateTime?.getFullYear() || DEFAULT_MAX_YEAR;
+
+      let isDisabled =
+        year >= minYear && year <= maxYear
+          ? (year === minYear && minMonth > month) || (year === maxYear && month > maxMonth)
+          : true;
+
+      if (disableFuture) {
+        isDisabled =
+          isDisabled ||
+          (year === now.getFullYear() ? month > now.getMonth() : year > now.getFullYear());
+      }
+      if (disablePast) {
+        isDisabled =
+          isDisabled ||
+          (year === now.getFullYear() ? month < now.getMonth() : year < now.getFullYear());
+      }
+
+      return isDisabled;
+    },
+    [disableFuture, disablePast, viewDate, minDateTime, maxDateTime],
+  );
+
+  const isYearDisabled = React.useCallback(
+    (year: number): boolean => {
+      const now = new Date();
+      const minYear = minDateTime?.getFullYear() || DEFAULT_MIN_YEAR;
+      const maxYear = maxDateTime?.getFullYear() || DEFAULT_MAX_YEAR;
+
+      let isDisabled = minYear > year || year > maxYear;
+      if (disableFuture) {
+        isDisabled = isDisabled || year > now.getFullYear();
+      }
+      if (disablePast) {
+        isDisabled = isDisabled || year < now.getFullYear();
+      }
+
+      return isDisabled;
+    },
+    [disableFuture, disablePast, minDateTime, maxDateTime],
+  );
+
   const resetSelectedDay = React.useCallback(() => {
     setFocusedDay(undefined);
   }, [setFocusedDay]);
@@ -99,5 +148,7 @@ export function useCalendar({
     isDayFocused,
     isDayDisabled,
     resetSelectedDay,
+    isMonthDisabled,
+    isYearDisabled,
   };
 }

package/src/hooks/useMediaQueries.ts

@@ -3,31 +3,19 @@ import { MEDIA_QUERIES, type MediaQueries } from '../lib/adaptivity';
 import { mediaQueryNull } from '../lib/browser';
 import { useDOM } from '../lib/dom';
 
-interface StoredMediaQueries {
-  /**
-   * Постоянная ссылка на окно. Это необходима, чтобы пересоздать медиа выражение если окно вдруг измениться.
-   *
-   * > `styleguide`
-   * >
-   * > В данный момент изменения окна существует в рамках песочницы. По сути мы храним ссылку на окно ради этого кейса
-   * > в песочнице.
-   */
-  window: Window | undefined;
-  /**
-   * Хранит созданные медиа выражения.
-   *
-   * Достаточно единожды создать экземпляры `MediaQueryList`, а дальше подписываться на события
-   * через метод `addEventListener(type, listener)`.
-   *
-   * {@link https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList}
-   */
-  mediaQueries: MediaQueries | null;
-}
+const mediaQueriesCache = new WeakMap<Window, MediaQueries>();
 
-const storedMediaQueries: StoredMediaQueries = {
-  window: undefined,
-  mediaQueries: null,
-};
+function getMediaQueries(matchMedia: (query: string) => MediaQueryList): MediaQueries {
+  return {
+    desktopPlus: matchMedia(MEDIA_QUERIES.DESKTOP_PLUS),
+    smallTabletPlus: matchMedia(MEDIA_QUERIES.SMALL_TABLET_PLUS),
+    tablet: matchMedia(MEDIA_QUERIES.TABLET),
+    smallTablet: matchMedia(MEDIA_QUERIES.SMALL_TABLET),
+    mobile: matchMedia(MEDIA_QUERIES.MOBILE),
+    mediumHeight: matchMedia(MEDIA_QUERIES.MEDIUM_HEIGHT),
+    mobileLandscapeHeight: matchMedia(MEDIA_QUERIES.MOBILE_LANDSCAPE_HEIGHT),
+  };
+}
 
 /**
  * Возвращает медиа выражения определенные дизайн-системой.
@@ -35,26 +23,22 @@ const storedMediaQueries: StoredMediaQueries = {
 export const useMediaQueries = () => {
   const { window } = useDOM();
 
-  return React.useMemo(
+  return React.useMemo<MediaQueries>(
     function initializeStoreOrUpdateStoreIfWindowChanges() {
-      if (storedMediaQueries.window === window && storedMediaQueries.mediaQueries !== null) {
-        return storedMediaQueries.mediaQueries;
+      if (!window) {
+        return getMediaQueries(mediaQueryNull);
+      }
+
+      const storedMediaQueries = mediaQueriesCache.get(window);
+      if (storedMediaQueries) {
+        return storedMediaQueries;
       }
 
-      const matchMedia = window ? window.matchMedia.bind(window) : mediaQueryNull;
+      const mediaQueries = getMediaQueries(window.matchMedia.bind(window));
 
-      storedMediaQueries.window = window;
-      storedMediaQueries.mediaQueries = {
-        desktopPlus: matchMedia(MEDIA_QUERIES.DESKTOP_PLUS),
-        smallTabletPlus: matchMedia(MEDIA_QUERIES.SMALL_TABLET_PLUS),
-        tablet: matchMedia(MEDIA_QUERIES.TABLET),
-        smallTablet: matchMedia(MEDIA_QUERIES.SMALL_TABLET),
-        mobile: matchMedia(MEDIA_QUERIES.MOBILE),
-        mediumHeight: matchMedia(MEDIA_QUERIES.MEDIUM_HEIGHT),
-        mobileLandscapeHeight: matchMedia(MEDIA_QUERIES.MOBILE_LANDSCAPE_HEIGHT),
-      };
+      mediaQueriesCache.set(window, mediaQueries);
 
-      return storedMediaQueries.mediaQueries;
+      return mediaQueries;
     },
     [window],
   );

package/src/hooks/usePatchChildren.ts

@@ -82,8 +82,8 @@ export const usePatchChildren = <ElementType extends HTMLElement = HTMLElement>(
   const props = shouldUseRef
     ? { ref: childRef, ...injectProps, ...mergedEventsByInjectProps }
     : isValidElementResult
-    ? { getRootRef: childRef, ...injectProps, ...mergedEventsByInjectProps }
-    : undefined;
+      ? { getRootRef: childRef, ...injectProps, ...mergedEventsByInjectProps }
+      : undefined;
 
   useEffectDev(() => {
     if (!childRef.current) {

package/src/hooks/useResizeObserver.ts

@@ -1,21 +1,21 @@
+import { useEffect } from 'react';
 import * as React from 'react';
 import { CustomResizeObserver } from '../lib/floating/customResizeObserver';
-import { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';
 import { useStableCallback } from './useStableCallback';
 
 /**
  * Хук вызывает переданный коллбэк при изменении размеров элемента.
  */
 export function useResizeObserver(
-  ref: React.MutableRefObject<HTMLElement | null>,
+  ref: React.MutableRefObject<HTMLElement | null> | React.RefObject<HTMLElement | null> | null,
   callback: (element: HTMLElement) => void,
 ) {
   const stableCallback = useStableCallback(callback);
 
-  useIsomorphicLayoutEffect(
+  useEffect(
     function addResizeObserverHandler() {
       /* istanbul ignore if: невозможный кейс (в SSR вызова этой функции не будет) */
-      if (!ref.current) {
+      if (!ref || !ref.current) {
         return;
       }
       const element = ref.current;
@@ -25,6 +25,6 @@ export function useResizeObserver(
 
       return () => observer.disconnect();
     },
-    [ref],
+    [ref, stableCallback],
   );
 }

package/src/hooks/useWaitTransitionFinish.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { noop } from '@vkontakte/vkjs';
 import { useDOM } from '../lib/dom';
-import { transitionEvent } from '../lib/supportEvents';
 
 export const useWaitTransitionFinish = () => {
   const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -20,13 +19,11 @@ export const useWaitTransitionFinish = () => {
       durationFallback: number,
     ) => {
       if (element) {
-        if (!document?.hidden && transitionEvent.supported && transitionEvent.name) {
+        if (!document?.hidden) {
           remove();
-          element.addEventListener(transitionEvent.name, eventHandler);
+          element.addEventListener('transitionend', eventHandler);
           detach.current = () => {
-            if (transitionEvent.name) {
-              element.removeEventListener(transitionEvent.name, eventHandler);
-            }
+            element.removeEventListener('transitionend', eventHandler);
           };
         } else {
           if (timeoutRef?.current) {
@@ -39,7 +36,5 @@ export const useWaitTransitionFinish = () => {
     [document, remove, timeoutRef],
   );
 
-  return {
-    waitTransitionFinish,
-  };
+  return waitTransitionFinish;
 };