@vkontakte/vkui 6.1.2 → 6.2.0

package/src/components/ModalRoot/ModalRoot.tsx

@@ -6,7 +6,6 @@ import { withPlatform } from '../../hoc/withPlatform';
 import { DOMProps, withDOM } from '../../lib/dom';
 import { getNavId } from '../../lib/getNavId';
 import { setTransformStyle } from '../../lib/styles';
-import { transitionEvent } from '../../lib/supportEvents';
 import { rubber } from '../../lib/touch';
 import { warnOnce } from '../../lib/warnOnce';
 import { ConfigProviderContext } from '../ConfigProvider/ConfigProviderContext';
@@ -515,13 +514,9 @@ class ModalRootTouchComponent extends React.Component<
   };
 
   waitTransitionFinish(modalState: ModalsStateEntry | undefined, eventHandler: () => void) {
-    if (transitionEvent.supported) {
-      const onceHandler = () => {
-        modalState?.innerElement?.removeEventListener(transitionEvent.name as string, onceHandler);
-        eventHandler();
-      };
-
-      modalState?.innerElement?.addEventListener(transitionEvent.name as string, onceHandler);
+    const el = modalState ? modalState.innerElement : null;
+    if (el) {
+      el.addEventListener('transitionend', eventHandler, { once: true });
     } else {
       setTimeout(eventHandler, this.timeout);
     }
@@ -622,6 +617,7 @@ class ModalRootTouchComponent extends React.Component<
                       isPage && modalState.expandable && 'vkuiInternalModalRoot__modal--expandable',
                       isPage && modalState.collapsed && 'vkuiInternalModalRoot__modal--collapsed',
                     )}
+                    autoFocus={false}
                     restoreFocus={false}
                   >
                     {Modal}

package/src/components/ModalRoot/ModalRootDesktop.tsx

@@ -45,7 +45,7 @@ export const ModalRootDesktop = ({
     delayEnter,
   } = useModalManager(activeModalProp, children, onOpen, onOpened, onClose, onClosed, noop);
 
-  const { waitTransitionFinish } = useWaitTransitionFinish();
+  const waitTransitionFinish = useWaitTransitionFinish();
   const prevProps = usePrevious({
     exitingModal,
     enteringModal,
@@ -211,6 +211,7 @@ export const ModalRootDesktop = ({
 
             return (
               <FocusTrap
+                autoFocus={false}
                 restoreFocus={false}
                 onClose={onExit}
                 timeout={timeout}

package/src/components/PanelHeaderContext/PanelHeaderContext.module.css

@@ -1,37 +1,38 @@
 .PanelHeaderContext {
+  --vkui_internal--PanelHeaderContext__fade_display: none;
+
   z-index: var(--vkui_internal--z_index_panel_header_context);
+  inline-size: 100%;
+  block-size: auto;
 }
 
-.PanelHeaderContext--opened,
-.PanelHeaderContext--closing {
-  inline-size: 100%;
+.PanelHeaderContext--sizeX-compact {
+  --vkui_internal--PanelHeaderContext__fade_display: block;
+
   block-size: 100%;
 }
 
-.PanelHeaderContext--sizeX-regular.PanelHeaderContext--opened,
-.PanelHeaderContext--sizeX-regular.PanelHeaderContext--closing {
-  block-size: auto;
-}
+@media (--sizeX-compact) {
+  .PanelHeaderContext--sizeX-none {
+    --vkui_internal--PanelHeaderContext__fade_display: block;
 
-@media (--sizeX-regular) {
-  .PanelHeaderContext--sizeX-none.PanelHeaderContext--opened,
-  .PanelHeaderContext--sizeX-none.PanelHeaderContext--closing {
-    block-size: auto;
+    block-size: 100%;
   }
 }
 
 .PanelHeaderContext__in {
   position: absolute;
+  z-index: 1;
   inset-inline-start: 0;
   inline-size: 100%;
   padding: 8px;
   box-sizing: border-box;
-  pointer-events: none;
 }
 
 .PanelHeaderContext__fade {
-  display: none;
+  display: var(--vkui_internal--PanelHeaderContext__fade_display);
   position: absolute;
+  z-index: 0;
   inline-size: 100%;
   block-size: 100%;
   inset-inline-start: 0;
@@ -39,31 +40,30 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
-.PanelHeaderContext--sizeX-compact .PanelHeaderContext__fade {
-  display: block;
-}
-
-@media (--sizeX-compact) {
-  .PanelHeaderContext--sizeX-none .PanelHeaderContext__fade {
-    display: block;
-  }
-}
-
 .PanelHeaderContext--opened .PanelHeaderContext__fade {
-  animation: animation-panelheadercontext-fade-in 0.2s ease;
+  animation: animation-panelheadercontext-fade-in var(--vkui--animation_duration_m) ease both;
 }
 
 .PanelHeaderContext--closing .PanelHeaderContext__fade {
-  animation: animation-panelheadercontext-fade-out 0.2s ease;
+  animation: animation-panelheadercontext-fade-out var(--vkui--animation_duration_m) ease both;
 }
 
 .PanelHeaderContext--opened .PanelHeaderContext__in {
-  pointer-events: auto;
-  animation: animation-panelheadercontext-translate-in 0.2s ease;
+  animation: animation-panelheadercontext-translate-in var(--vkui--animation_duration_m) ease both;
 }
 
 .PanelHeaderContext--closing .PanelHeaderContext__in {
-  animation: animation-panelheadercontext-translate-out 0.2s ease;
+  animation: animation-panelheadercontext-translate-out var(--vkui--animation_duration_m) ease both;
+}
+
+@media (--reduce-motion) {
+  .PanelHeaderContext--opened .PanelHeaderContext__in {
+    animation-name: animation-panelheadercontext-fade-in;
+  }
+
+  .PanelHeaderContext--closing .PanelHeaderContext__in {
+    animation-name: animation-panelheadercontext-fade-out;
+  }
 }
 
 .PanelHeaderContext__content {
@@ -109,7 +109,9 @@
 }
 
 .PanelHeaderContext--sizeX-regular .PanelHeaderContext__content {
-  box-shadow: 0 0 4px rgba(0, 0, 0, 0.08), 0 8px 8px rgba(0, 0, 0, 0.16);
+  box-shadow:
+    0 0 4px rgba(0, 0, 0, 0.08),
+    0 8px 8px rgba(0, 0, 0, 0.16);
 }
 
 @media (--sizeX-regular) {
@@ -123,7 +125,9 @@
   }
 
   .PanelHeaderContext--sizeX-none .PanelHeaderContext__content {
-    box-shadow: 0 0 4px rgba(0, 0, 0, 0.08), 0 8px 8px rgba(0, 0, 0, 0.16);
+    box-shadow:
+      0 0 4px rgba(0, 0, 0, 0.08),
+      0 8px 8px rgba(0, 0, 0, 0.16);
   }
 }
 

package/src/components/PanelHeaderContext/PanelHeaderContext.tsx

@@ -1,20 +1,18 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
-import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
+import { useGlobalOnClickOutside } from '../../hooks/useGlobalOnClickOutside';
 import { usePlatform } from '../../hooks/usePlatform';
-import { useTimeout } from '../../hooks/useTimeout';
-import { useDOM } from '../../lib/dom';
-import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
-import { HTMLAttributesWithRootRef } from '../../types';
+import { useCSSKeyframesAnimationController } from '../../lib/animation';
+import type { HTMLAttributesWithRootRef } from '../../types';
 import { useScrollLock } from '../AppRoot/ScrollContext';
 import { FixedLayout } from '../FixedLayout/FixedLayout';
 import styles from './PanelHeaderContext.module.css';
 
 const sizeXClassNames = {
   none: styles['PanelHeaderContext--sizeX-none'],
-  ['compact']: styles['PanelHeaderContext--sizeX-compact'],
-  ['regular']: styles['PanelHeaderContext--sizeX-regular'],
+  compact: styles['PanelHeaderContext--sizeX-compact'],
+  regular: styles['PanelHeaderContext--sizeX-regular'],
 };
 
 export interface PanelHeaderContextProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
@@ -27,46 +25,36 @@ export interface PanelHeaderContextProps extends HTMLAttributesWithRootRef<HTMLD
  */
 export const PanelHeaderContext = ({
   children,
-  onClose,
   opened = false,
   className,
+  onClose,
   ...restProps
 }: PanelHeaderContextProps) => {
-  const { document } = useDOM();
   const platform = usePlatform();
-  const [visible, setVisible] = React.useState(opened);
-  const closing = visible && !opened;
   const { sizeX = 'none' } = useAdaptivity();
   const elementRef = React.useRef<HTMLDivElement>(null);
+  const [animationState, animationHandlers] = useCSSKeyframesAnimationController(
+    opened ? 'enter' : 'exit',
+  );
+  const visible = animationState !== 'exited';
 
-  useIsomorphicLayoutEffect(() => {
-    opened && setVisible(true);
-  }, [opened]);
-
-  useScrollLock(platform !== 'vkcom' && opened);
+  useScrollLock(platform !== 'vkcom' && visible);
 
-  // start closing on outer click
-  useGlobalEventListener(
-    document,
-    'click',
-    opened &&
-      !closing &&
-      ((event) => {
-        if (elementRef.current && !elementRef.current.contains(event.target as Node)) {
-          event.stopPropagation();
-          onClose();
-        }
-      }),
-    { capture: true },
+  const handleGlobalOnClickOutside = React.useCallback(
+    (event: MouseEvent) => {
+      if (opened) {
+        event.stopPropagation();
+        onClose();
+      }
+    },
+    [opened, onClose],
   );
 
-  // fallback onAnimationEnd when animationend not supported
-  const onAnimationEnd = () => setVisible(false);
-  const animationFallback = useTimeout(onAnimationEnd, 200);
-  React.useEffect(
-    () => (closing ? animationFallback.set() : animationFallback.clear()),
-    [animationFallback, closing],
-  );
+  useGlobalOnClickOutside(handleGlobalOnClickOutside, visible ? elementRef : null);
+
+  if (!visible) {
+    return null;
+  }
 
   return (
     <FixedLayout
@@ -74,28 +62,26 @@ export const PanelHeaderContext = ({
       className={classNames(
         styles['PanelHeaderContext'],
         platform === 'ios' && styles['PanelHeaderContext--ios'],
-        opened && styles['PanelHeaderContext--opened'],
-        closing && styles['PanelHeaderContext--closing'],
+        opened ? styles['PanelHeaderContext--opened'] : styles['PanelHeaderContext--closing'],
         sizeXClassNames[sizeX],
         className,
       )}
       vertical="top"
     >
-      {visible && (
-        <div
-          onClick={(event) => {
-            event.stopPropagation();
-            onClose();
-          }}
-          className={styles['PanelHeaderContext__fade']}
-        />
-      )}
       <div
+        onClick={(event) => {
+          event.stopPropagation();
+          onClose();
+        }}
+        className={styles['PanelHeaderContext__fade']}
+      />
+      <div
+        data-testid={process.env.NODE_ENV === 'test' ? 'content' : undefined}
         className={styles['PanelHeaderContext__in']}
         ref={elementRef}
-        onAnimationEnd={closing ? onAnimationEnd : undefined}
+        {...animationHandlers}
       >
-        {visible && <div className={styles['PanelHeaderContext__content']}>{children}</div>}
+        <div className={styles['PanelHeaderContext__content']}>{children}</div>
       </div>
     </FixedLayout>
   );

package/src/components/PopoutRoot/PopoutRoot.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { blurActiveElement, useDOM } from '../../lib/dom';
 import { HTMLAttributesWithRootRef } from '../../types';
 import { AppRootPortal } from '../AppRoot/AppRootPortal';
 import { RootComponent } from '../RootComponent/RootComponent';
@@ -35,12 +34,6 @@ export interface PopoutRootProps extends HTMLAttributesWithRootRef<HTMLDivElemen
  * @private
  */
 export const PopoutRoot = ({ popout, modal, children, ...restProps }: PopoutRootProps) => {
-  const { document } = useDOM();
-
-  React.useEffect(() => {
-    popout && blurActiveElement(document);
-  }, [document, popout]);
-
   return (
     <RootComponent {...restProps} baseClassName={styles['PopoutRoot']}>
       {children}

package/src/components/PopoutWrapper/PopoutWrapper.module.css

@@ -26,12 +26,16 @@
   inline-size: 100%;
   block-size: 100%;
   opacity: 1;
-  animation: animation-full-fade-in var(--vkui--animation_duration_m) ease;
+}
+
+.PopoutWrapper--opened .PopoutWrapper__overlay {
+  animation: animation-full-fade-in var(--vkui--animation_duration_m) ease both;
 }
 
 .PopoutWrapper--closing .PopoutWrapper__overlay {
   opacity: 0;
-  transition: opacity var(--vkui--animation_duration_m) var(--vkui--animation_easing_default);
+  /* prettier-ignore */
+  animation: animation-full-fade-out var(--vkui--animation_duration_m) var(--vkui--animation_easing_default) both;
 }
 
 .PopoutWrapper--masked .PopoutWrapper__overlay {
@@ -96,3 +100,12 @@
     opacity: 1;
   }
 }
+@keyframes animation-full-fade-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}

package/src/components/PopoutWrapper/PopoutWrapper.tsx

@@ -1,7 +1,4 @@
-import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { usePlatform } from '../../hooks/usePlatform';
-import { useTimeout } from '../../hooks/useTimeout';
 import { HTMLAttributesWithRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './PopoutWrapper.module.css';
@@ -56,19 +53,6 @@ export const PopoutWrapper = ({
   onClick,
   ...restProps
 }: PopoutWrapperProps) => {
-  const platform = usePlatform();
-  const [opened, setOpened] = React.useState(noBackground);
-
-  const onFadeInEnd = (e?: React.AnimationEvent) => {
-    if (!e || e.animationName === styles['animation-full-fade-in']) {
-      setOpened(true);
-    }
-  };
-  const animationFinishFallback = useTimeout(onFadeInEnd, platform === 'ios' ? 300 : 200);
-  React.useEffect(() => {
-    !opened && animationFinishFallback.set();
-  }, [animationFinishFallback, opened]);
-
   return (
     <RootComponent
       {...restProps}
@@ -76,12 +60,10 @@ export const PopoutWrapper = ({
         styles['PopoutWrapper'],
         stylesAlignY[alignY],
         stylesAlignX[alignX],
-        closing && styles['PopoutWrapper--closing'],
-        opened && styles['PopoutWrapper--opened'],
+        closing ? styles['PopoutWrapper--closing'] : styles['PopoutWrapper--opened'],
         fixed && styles['PopoutWrapper--fixed'],
         !noBackground && styles['PopoutWrapper--masked'],
       )}
-      onAnimationEnd={opened ? undefined : onFadeInEnd}
     >
       <div className={styles['PopoutWrapper__container']}>
         <div className={styles['PopoutWrapper__overlay']} onClick={onClick} />

package/src/components/Popover/Popover.module.css

@@ -14,11 +14,15 @@
 }
 
 .Popover__in--withStyling {
-  background-color: var(--vkui--color_background_modal);
+  background-color: var(--vkui--color_background_contrast_themed);
   border-radius: var(--vkui--size_border_radius--regular);
   box-shadow: var(--vkui--elevation3);
 }
 
 .Popover__arrow {
-  color: var(--vkui--color_background_modal);
+  color: var(--vkui--color_background_contrast_themed);
+}
+
+.Popover--hidden {
+  display: none;
 }

package/src/components/Popover/Popover.tsx

@@ -115,6 +115,10 @@ export interface PopoverProps
    * 5. Убедитесь, что SVG и её элементы наследует цвет через `fill="currentColor"`.
    */
   ArrowIcon?: FloatingArrowPropsPrivate['Icon'];
+  /**
+   * Используется для того, чтобы не удалять поповер из DOM дерева при скрытии.
+   */
+  keepMounted?: boolean;
 }
 
 /**
@@ -140,6 +144,7 @@ export const Popover = ({
   disableInteractive,
   disableCloseOnClickOutside,
   disableCloseOnEscKey,
+  keepMounted = false,
   // uncontrolled
   defaultShown = false,
   // controlled
@@ -161,7 +166,7 @@ export const Popover = ({
   noStyling = false,
   zIndex = 'var(--vkui--z_index_popout)',
   // a11y
-  role,
+  role = 'dialog',
   ...restPopoverProps
 }: PopoverProps) => {
   const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);
@@ -212,8 +217,11 @@ export const Popover = ({
   );
 
   let popover: React.ReactNode = null;
-  if (shown) {
-    floatingProps.style.zIndex = String(zIndex);
+  if (shown || keepMounted) {
+    const hidden = keepMounted && !shown;
+    if (!hidden) {
+      floatingProps.style.zIndex = String(zIndex);
+    }
 
     let arrow: React.ReactElement | null = null;
     if (withArrow) {
@@ -232,7 +240,11 @@ export const Popover = ({
 
     popover = (
       <AppRootPortal usePortal={usePortal}>
-        <div ref={refs.setFloating} className={styles['Popover']} {...floatingProps}>
+        <div
+          ref={refs.setFloating}
+          className={classNames(styles['Popover'], hidden && styles['Popover--hidden'])}
+          {...floatingProps}
+        >
           <FocusTrap
             {...restPopoverProps}
             role={role}
@@ -243,6 +255,8 @@ export const Popover = ({
               transformOriginClassNames[resolvedPlacement],
               className,
             )}
+            mount={!hidden}
+            disabled={hidden}
             autoFocus={disableInteractive ? false : autoFocus}
             restoreFocus={restoreFocus ? onRestoreFocus : false}
             onClose={onEscapeKeyDown}

package/src/components/PullToRefresh/PullToRefresh.module.css

@@ -26,7 +26,9 @@
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  transition: transform 300ms cubic-bezier(0.1, 0, 0.25, 1), opacity 220ms ease-out;
+  transition:
+    transform 300ms cubic-bezier(0.1, 0, 0.25, 1),
+    opacity 220ms ease-out;
   opacity: 0;
   background: var(--vkui--color_background_modal);
   border-radius: 50%;

package/src/components/Removable/Removable.module.css

@@ -47,12 +47,6 @@
   block-size: 100%;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .Removable--ios .Removable__content {
-    transition: transform 0.6s var(--vkui--animation_easing_platform);
-  }
-}
-
 .Removable__toggle {
   display: block;
   inline-size: 44px;
@@ -92,6 +86,7 @@
 
 .Removable--ios .Removable__content {
   padding-inline: 0 var(--vkui--size_base_padding_horizontal--regular);
+  transition: transform 0.6s var(--vkui--animation_easing_platform);
 }
 
 .Removable--indent .Removable__action {

package/src/components/Root/Root.module.css

@@ -1,9 +1,19 @@
 .Root {
+  --vkui_internal--root_animation_opacity_initial: 0;
+  --vkui_internal--root_animation_transform_initial: scale(1.05);
+  --vkui_internal--root_animation_duration: 0.3s;
+
   inline-size: 100%;
   block-size: 100%;
   position: relative;
 }
 
+.Root--ios {
+  --vkui_internal--root_animation_opacity_initial: 1;
+  --vkui_internal--root_animation_transform_initial: translate3d(0, 100%, 0);
+  --vkui_internal--root_animation_duration: 0.6s;
+}
+
 .Root--transition {
   pointer-events: none;
 }
@@ -14,6 +24,16 @@
   position: relative;
 }
 
+.Root__view--show-forward {
+  /* prettier-ignore */
+  animation: root-animation-show-forward var(--vkui_internal--root_animation_duration) var(--vkui--animation_easing_platform);
+}
+
+.Root__view--hide-back {
+  /* prettier-ignore */
+  animation: root-animation-hide-back var(--vkui_internal--root_animation_duration) var(--vkui--animation_easing_platform) forwards;
+}
+
 .Root--transition .Root__view {
   position: fixed;
   inset-inline-start: 0;
@@ -26,14 +46,6 @@
   block-size: 100%;
 }
 
-.Root__view--show-forward {
-  animation: root-android-animation-show-forward 0.3s var(--vkui--animation_easing_platform);
-}
-
-.Root__view--hide-back {
-  animation: root-android-animation-hide-back 0.3s var(--vkui--animation_easing_platform) forwards;
-}
-
 /**
  * iOS
  */
@@ -51,81 +63,63 @@
 }
 
 .Root--ios .Root__view--show-back::after {
-  animation: root-ios-animation-show-back 0.6s var(--vkui--animation_easing_platform) forwards;
+  /* prettier-ignore */
+  animation: root-ios-overlay-animation-show-back var(--vkui_internal--root_animation_duration) var(--vkui--animation_easing_platform) forwards;
 }
 
 .Root--ios .Root__view--hide-forward::after {
-  animation: root-ios-animation-hide-forward 0.6s var(--vkui--animation_easing_platform);
+  /* prettier-ignore */
+  animation: root-ios-overlay-animation-hide-forward var(--vkui_internal--root_animation_duration) var(--vkui--animation_easing_platform);
 }
 
-.Root--ios .Root__view--show-forward {
-  animation: root-ios-animation-show-forward 0.6s var(--vkui--animation_easing_platform);
-}
-
-.Root--ios .Root__view--hide-back {
-  animation: root-ios-animation-hide-back 0.6s var(--vkui--animation_easing_platform) forwards;
-}
-
-@keyframes root-ios-animation-show-back {
-  from {
-    opacity: 0.3;
+@media (--reduce-motion) {
+  .Root {
+    --vkui_internal--root_animation_transform_initial: 1;
   }
 
-  to {
-    opacity: 0;
+  .Root--ios {
+    --vkui_internal--root_animation_opacity_initial: 0;
+    --vkui_internal--root_animation_transform_initial: 1;
   }
 }
-@keyframes root-ios-animation-hide-forward {
-  from {
-    opacity: 0;
-  }
 
-  to {
-    opacity: 0.3;
-  }
-}
-@keyframes root-ios-animation-hide-back {
+@keyframes root-animation-hide-back {
   from {
-    transform: translate3d(0, 0, 0);
+    transform: none;
+    opacity: 1;
   }
 
   to {
-    transform: translate3d(0, 100%, 0);
+    transform: var(--vkui_internal--root_animation_transform_initial);
+    opacity: var(--vkui_internal--root_animation_opacity_initial);
   }
 }
-@keyframes root-ios-animation-show-forward {
+@keyframes root-animation-show-forward {
   from {
-    transform: translate3d(0, 100%, 0);
+    transform: var(--vkui_internal--root_animation_transform_initial);
+    opacity: var(--vkui_internal--root_animation_opacity_initial);
   }
 
   to {
-    transform: translate3d(0, 0, 0);
+    transform: none;
+    opacity: 1;
   }
 }
-
-/**
- * Android
- */
-
-@keyframes root-android-animation-hide-back {
+@keyframes root-ios-overlay-animation-show-back {
   from {
-    transform: scale(1);
-    opacity: 1;
+    opacity: 0.3;
   }
 
   to {
-    transform: scale(1.05);
     opacity: 0;
   }
 }
-@keyframes root-android-animation-show-forward {
+@keyframes root-ios-overlay-animation-hide-forward {
   from {
-    transform: scale(1.05);
     opacity: 0;
   }
 
   to {
-    transform: scale(1);
-    opacity: 1;
+    opacity: 0.3;
   }
 }