@vkontakte/vkui 6.1.2 → 6.2.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "6.1.2",
+  "version": "6.2.0",
   "name": "@vkontakte/vkui",
   "description": "VKUI library",
   "main": "dist/cjs/index.js",
@@ -68,13 +68,13 @@
   "dependencies": {
     "@swc/helpers": "^0.5.11",
     "@vkontakte/icons": "^2.115.0",
-    "@vkontakte/vkjs": "^1.1.2",
+    "@vkontakte/vkjs": "^1.2.0",
     "@vkontakte/vkui-floating-ui": "^0.2.1",
     "dayjs": "^1.11.11",
     "mitt": "^3.0.1"
   },
   "devDependencies": {
-    "storybook": "8.1.3"
+    "storybook": "8.1.10"
   },
   "size-limit": [
     {

package/src/components/Accordion/Accordion.module.css

@@ -7,6 +7,95 @@
 }
 
 .AccordionContent__in {
-  max-block-size: 0;
-  transition: max-height 100ms ease-in-out;
+  --vkui_internal--AccordionContent_height: initial;
+
+  animation-duration: 100ms;
+  animation-timing-function: ease-in-out;
+  animation-fill-mode: forwards;
+}
+
+@media (--reduce-motion) {
+  .AccordionContent__in {
+    animation-duration: 300ms;
+    animation-timing-function: linear;
+  }
+}
+
+.AccordionContent__in--enter {
+  animation-name: animation-expand;
+}
+
+@media (--reduce-motion) {
+  .AccordionContent__in--enter {
+    animation-name: animation-fade-in;
+  }
+}
+
+.AccordionContent__in--entered {
+  block-size: var(--vkui_internal--AccordionContent_height);
+}
+
+.AccordionContent__in--exit {
+  animation-name: animation-collapse;
+}
+
+@media (--reduce-motion) {
+  .AccordionContent__in--exit {
+    animation-name: animation-fade-out;
+  }
+}
+
+.AccordionContent__in--exited {
+  block-size: 0;
+}
+
+@keyframes animation-expand {
+  0% {
+    block-size: 0;
+  }
+
+  100% {
+    block-size: var(--vkui_internal--AccordionContent_height);
+  }
+}
+@keyframes animation-collapse {
+  0% {
+    block-size: var(--vkui_internal--AccordionContent_height);
+  }
+
+  100% {
+    block-size: 0;
+  }
+}
+@keyframes animation-fade-in {
+  0% {
+    opacity: 0;
+    block-size: var(--vkui_internal--AccordionContent_height);
+  }
+
+  50% {
+    opacity: 0;
+    block-size: var(--vkui_internal--AccordionContent_height);
+  }
+
+  100% {
+    opacity: 1;
+    block-size: var(--vkui_internal--AccordionContent_height);
+  }
+}
+@keyframes animation-fade-out {
+  0% {
+    opacity: 1;
+    block-size: var(--vkui_internal--AccordionContent_height);
+  }
+
+  50% {
+    opacity: 0;
+    block-size: var(--vkui_internal--AccordionContent_height);
+  }
+
+  100% {
+    opacity: 0;
+    block-size: var(--vkui_internal--AccordionContent_height);
+  }
 }

package/src/components/Accordion/AccordionContent.tsx

@@ -1,55 +1,22 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useExternRef } from '../../hooks/useExternRef';
-import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
-import { useDOM } from '../../lib/dom';
+import { useCSSKeyframesAnimationController } from '../../lib/animation';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { HasRef, HasRootRef } from '../../types';
 import { AccordionContext } from './AccordionContext';
 import styles from './Accordion.module.css';
 
-/**
- * Функция расчета max-height, для скрытия или раскрытия контента.
- */
-function calcMaxHeight(expanded: boolean, el: HTMLElement | null): string {
-  if (!expanded) {
-    return '0px';
-  }
+const CUSTOM_PROPERTY_ACCORDION_CONTENT_HEIGHT = '--vkui_internal--AccordionContent_height';
 
-  // В первый рендеринг нельзя узнать высоту элемента
-  if (el === null) {
-    return 'inherit';
-  }
-
-  return `${el.scrollHeight}px`;
-}
-
-/**
- * Хук для отслеживания изменения высоты контента.
- */
-function useResizeContent(expanded: boolean, inRef: React.MutableRefObject<HTMLDivElement | null>) {
-  const resize = () => {
-    inRef.current!.style.maxHeight = calcMaxHeight(expanded, inRef.current);
-  };
-
-  const { window } = useDOM();
-  useGlobalEventListener(window, 'resize', resize);
-  useIsomorphicLayoutEffect(resize, []);
-}
-
-/**
- * Хук для скрывания или раскрывания контента. Возвращает стили для in элемента.
- */
-function useAccordionContent(
-  expanded: boolean,
-  inRef: React.MutableRefObject<HTMLDivElement | null>,
-) {
-  const maxHeight = calcMaxHeight(expanded, inRef.current);
-
-  useResizeContent(expanded, inRef);
-
-  return { maxHeight };
-}
+const stateClassNames = {
+  enter: styles['AccordionContent__in--enter'],
+  entering: styles['AccordionContent__in--enter'],
+  entered: styles['AccordionContent__in--entered'],
+  exit: styles['AccordionContent__in--exit'],
+  exiting: styles['AccordionContent__in--exit'],
+  exited: styles['AccordionContent__in--exited'],
+};
 
 export interface AccordionContentProps
   extends HasRootRef<HTMLDivElement>,
@@ -63,10 +30,34 @@ export const AccordionContent = ({
   children,
   ...restProps
 }: AccordionContentProps) => {
-  const inRef = useExternRef(getRef);
   const { expanded, labelId, contentId } = React.useContext(AccordionContext);
 
-  const inStyle = useAccordionContent(expanded, inRef);
+  const inRef = useExternRef(getRef);
+  const [animationState, animationHandlers] = useCSSKeyframesAnimationController(
+    expanded ? 'enter' : 'exit',
+    undefined,
+    true,
+  );
+
+  useIsomorphicLayoutEffect(() => {
+    const inEl = inRef.current;
+
+    /* istanbul ignore if: невозможный кейс (в SSR вызова этой функции не будет) */
+    if (!inEl) {
+      return;
+    }
+
+    switch (animationState) {
+      case 'enter':
+      case 'exit':
+        inEl.style.setProperty(CUSTOM_PROPERTY_ACCORDION_CONTENT_HEIGHT, `${inEl.scrollHeight}px`);
+        break;
+      case 'entered':
+      case 'exited':
+        inEl.style.removeProperty(CUSTOM_PROPERTY_ACCORDION_CONTENT_HEIGHT);
+        break;
+    }
+  }, [animationState, inRef]);
 
   return (
     <div
@@ -78,7 +69,11 @@ export const AccordionContent = ({
       className={classNames(styles['AccordionContent'], className)}
       {...restProps}
     >
-      <div ref={inRef} className={styles['AccordionContent__in']} style={inStyle}>
+      <div
+        ref={inRef}
+        className={classNames(styles['AccordionContent__in'], stateClassNames[animationState])}
+        {...animationHandlers}
+      >
         {children}
       </div>
     </div>

package/src/components/ActionSheet/ActionSheet.module.css

@@ -1,9 +1,18 @@
 .ActionSheet {
+  --vkui_internal--actionsheet_animation_opacity_initial: 1;
+  --vkui_internal--actionsheet_animation_translateY_initial: 100%;
+
   inline-size: 100%;
   max-inline-size: var(--vkui--size_popup_small--regular);
   padding: 10px;
   box-sizing: border-box;
-  animation: animation-actionsheet-intro 0.2s var(--vkui--animation_easing_platform);
+}
+
+@media (--reduce-motion) {
+  .ActionSheet {
+    --vkui_internal--actionsheet_animation_opacity_initial: 0;
+    --vkui_internal--actionsheet_animation_translateY_initial: 0%;
+  }
 }
 
 .ActionSheet__content-wrapper {
@@ -21,9 +30,15 @@
   padding-inline: 16px;
 }
 
+.ActionSheet--opening {
+  /* prettier-ignore */
+  animation: animation-actionsheet-slide-up var(--vkui--animation_duration_m) var(--vkui--animation_easing_platform);
+}
+
 .ActionSheet--closing {
-  transform: translateY(calc(100% + 20px));
-  transition: transform 0.2s var(--vkui--animation_easing_platform);
+  opacity: 0;
+  /* prettier-ignore */
+  animation: animation-actionsheet-slide-down var(--vkui--animation_duration_m) var(--vkui--animation_easing_platform);
 }
 
 .ActionSheet__title + .ActionSheet__text {
@@ -35,7 +50,6 @@
  */
 .ActionSheet--ios {
   padding: 8px;
-  animation: animation-actionsheet-intro 0.3s var(--vkui--animation_easing_platform);
   background: transparent;
 }
 
@@ -54,7 +68,6 @@
 
 .ActionSheet--ios.ActionSheet--closing {
   transform: translateY(100%);
-  transition: transform 0.3s var(--vkui--animation_easing_platform);
 }
 
 .ActionSheet--ios .ActionSheet__header {
@@ -93,9 +106,11 @@
  */
 
 .ActionSheet--menu {
+  --vkui_internal--actionsheet_animation_opacity_initial: 0;
+  --vkui_internal--actionsheet_animation_translateY_initial: 5%;
+
   inline-size: auto;
   block-size: auto;
-  animation: none;
   padding: 0;
   max-inline-size: 100%;
 }
@@ -105,15 +120,31 @@
   padding: 0;
 }
 
-/**
-* Animations
-*/
-@keyframes animation-actionsheet-intro {
+@media (--reduce-motion) {
+  .ActionSheet--menu {
+    --vkui_internal--actionsheet_animation_translateY_initial: 0%;
+  }
+}
+
+@keyframes animation-actionsheet-slide-up {
   from {
-    transform: translateY(100%);
+    opacity: var(--vkui_internal--actionsheet_animation_opacity_initial);
+    transform: translateY(var(--vkui_internal--actionsheet_animation_translateY_initial));
   }
 
   to {
+    opacity: 1;
     transform: translateY(0);
   }
 }
+@keyframes animation-actionsheet-slide-down {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  to {
+    opacity: var(--vkui_internal--actionsheet_animation_opacity_initial);
+    transform: translateY(var(--vkui_internal--actionsheet_animation_translateY_initial));
+  }
+}

package/src/components/ActionSheet/ActionSheet.tsx

@@ -3,7 +3,7 @@ import { noop } from '@vkontakte/vkjs';
 import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
 import { useObjectMemo } from '../../hooks/useObjectMemo';
 import { usePlatform } from '../../hooks/usePlatform';
-import { useTimeout } from '../../hooks/useTimeout';
+import { useCSSKeyframesAnimationController } from '../../lib/animation';
 import { useScrollLock } from '../AppRoot/ScrollContext';
 import { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';
 import { Footnote } from '../Typography/Footnote/Footnote';
@@ -48,46 +48,39 @@ export const ActionSheet = ({
   popupOffsetDistance,
   placement,
   mode: modeProp,
+  onClose,
   ...restProps
 }: ActionSheetProps) => {
   const platform = usePlatform();
   const [closingBy, setClosingBy] = React.useState<undefined | CloseInitiators>(undefined);
-  const onClose = () => setClosingBy('other');
-  const _action = React.useRef(noop);
+  const onCloseWithOther = () => setClosingBy('other');
+  const actionCallbackRef = React.useRef(noop);
 
-  const afterClose = () => {
-    restProps.onClose({ closedBy: closingBy || 'other' });
-    _action.current();
-    _action.current = noop;
-  };
+  const [animationState, animationHandlers] = useCSSKeyframesAnimationController(
+    closingBy !== undefined ? 'exit' : 'enter',
+    {
+      onExited() {
+        onClose({ closedBy: closingBy || 'other' });
+        actionCallbackRef.current();
+        actionCallbackRef.current = noop;
+      },
+    },
+  );
 
   const { isDesktop } = useAdaptivityWithJSMediaQueries();
   const mode = modeProp ?? (isDesktop ? 'menu' : 'sheet');
 
   useScrollLock(mode === 'sheet');
 
-  let timeout = platform === 'ios' ? 300 : 200;
-
-  if (mode === 'menu') {
-    timeout = 0;
-  }
-
-  const fallbackTransitionFinish = useTimeout(afterClose, timeout);
-  React.useEffect(() => {
-    if (closingBy) {
-      fallbackTransitionFinish.set();
-    } else {
-      fallbackTransitionFinish.clear();
-    }
-  }, [closingBy, fallbackTransitionFinish]);
-
   const onItemClick = React.useCallback<ItemClickHandler>(
     ({ action, immediateAction, autoClose, isCancelItem }) =>
       (event) => {
         event.persist();
         immediateAction && immediateAction(event);
         if (autoClose) {
-          _action.current = () => action && action(event);
+          if (action) {
+            actionCallbackRef.current = () => action(event);
+          }
           setClosingBy(isCancelItem ? 'cancel-item' : 'action-item');
         } else {
           action && action(event);
@@ -106,9 +99,12 @@ export const ActionSheet = ({
     <ActionSheetContext.Provider value={contextValue}>
       <DropdownComponent
         closing={Boolean(closingBy)}
-        timeout={timeout}
+        role="dialog"
+        aria-modal="true"
+        autoFocus={animationState === 'entered'}
         {...dropdownProps}
-        onClose={onClose}
+        {...animationHandlers}
+        onClose={onCloseWithOther}
         className={mode === 'menu' ? className : undefined}
         style={mode === 'menu' ? style : undefined}
       >
@@ -144,7 +140,7 @@ export const ActionSheet = ({
       alignY="bottom"
       className={className}
       style={style}
-      onClick={onClose}
+      onClick={onCloseWithOther}
       fixed
     >
       {actionSheet}

package/src/components/ActionSheet/ActionSheetDropdownMenu.tsx

@@ -26,6 +26,8 @@ export const ActionSheetDropdownMenu = ({
   style,
   popupOffsetDistance = 0,
   placement,
+  onAnimationStart,
+  onAnimationEnd,
   ...restProps
 }: SharedDropdownProps) => {
   const { document } = useDOM();
@@ -72,12 +74,15 @@ export const ActionSheetDropdownMenu = ({
         styles['ActionSheet'],
         platform === 'ios' && styles['ActionSheet--ios'],
         styles['ActionSheet--menu'],
+        closing ? styles['ActionSheet--closing'] : styles['ActionSheet--opening'],
         sizeY === 'compact' && styles['ActionSheet--sizeY-compact'],
         className,
       )}
       style={style}
       getRootRef={elementRef}
       usePortal={false}
+      onAnimationStart={onAnimationStart}
+      onAnimationEnd={onAnimationEnd}
     >
       <FocusTrap onClose={onClose} {...restProps} onClick={onClick}>
         {children}

package/src/components/ActionSheet/ActionSheetDropdownSheet.tsx

@@ -31,7 +31,7 @@ export const ActionSheetDropdownSheet = ({
       className={classNames(
         styles['ActionSheet'],
         platform === 'ios' && styles['ActionSheet--ios'],
-        closing && styles['ActionSheet--closing'],
+        closing ? styles['ActionSheet--closing'] : styles['ActionSheet--opening'],
         sizeY === 'compact' && styles['ActionSheet--sizeY-compact'],
         className,
       )}

package/src/components/ActionSheetItem/ActionSheetItem.module.css

@@ -131,7 +131,9 @@
   block-size: 100%;
   background-color: var(--vkui--color_background_modal);
   content: '';
-  transition: opacity 0.15s ease-out, background-color 0.15s ease-out;
+  transition:
+    opacity 0.15s ease-out,
+    background-color 0.15s ease-out;
 }
 
 .ActionSheetItem--ios::after {

package/src/components/Alert/Alert.module.css

@@ -1,4 +1,6 @@
 .Alert {
+  --vkui_internal--alert_animation_scale_initial: 0.95;
+
   user-select: none;
   color: var(--vkui--color_text_primary);
   position: relative;
@@ -8,18 +10,21 @@
   margin-inline: 24px;
   box-shadow: var(--vkui--elevation4);
   border-radius: var(--vkui--size_border_radius_paper--regular);
-  animation: animation-android-alert-intro 0.2s var(--vkui--animation_easing_platform);
 }
 
 .Alert--desktop {
   inline-size: 100%;
 }
 
+.Alert--opening {
+  /* prettier-ignore */
+  animation: animation-alert-scale-up var(--vkui--animation_duration_m) var(--vkui--animation_easing_platform);
+}
+
 .Alert--closing {
-  transform: scale(0.95);
   opacity: 0;
-  transition: transform 0.2s var(--vkui--animation_easing_platform),
-    opacity 0.2s var(--vkui--animation_easing_platform);
+  /* prettier-ignore */
+  animation: animation-alert-scale-down var(--vkui--animation_duration_m) var(--vkui--animation_easing_platform);
 }
 
 .Alert::before {
@@ -102,17 +107,16 @@
  * iOS version
  */
 .Alert--ios {
+  --vkui_internal--alert_animation_scale_initial: 1.05;
+
   inline-size: 270px;
   min-inline-size: 270px;
   overflow: hidden;
-  animation: animation-ios-alert-intro 0.3s var(--vkui--animation_easing_platform);
   box-shadow: none;
 }
 
 .Alert--ios.Alert--closing {
-  transform: none;
-  opacity: 0;
-  transition: opacity 0.3s var(--vkui--animation_easing_platform);
+  --vkui_internal--alert_animation_scale_initial: 1;
 }
 
 .Alert--ios .Alert__content {
@@ -252,7 +256,9 @@
  */
 
 .Alert--vkcom {
-  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 0 96px rgba(0, 0, 0, 0.16);
+  box-shadow:
+    0 0 2px rgba(0, 0, 0, 0.12),
+    0 0 96px rgba(0, 0, 0, 0.16);
   inline-size: 400px;
 }
 
@@ -280,13 +286,17 @@
   inset-inline-end: 8px;
 }
 
-/**
- * Animations
- */
-@keyframes animation-ios-alert-intro {
+@media (--reduce-motion) {
+  .Alert,
+  .Alert--ios {
+    --vkui_internal--alert_animation_scale_initial: 1;
+  }
+}
+
+@keyframes animation-alert-scale-up {
   from {
     opacity: 0;
-    transform: scale(1.05);
+    transform: scale(var(--vkui_internal--alert_animation_scale_initial));
   }
 
   to {
@@ -294,14 +304,14 @@
     transform: scale(1);
   }
 }
-@keyframes animation-android-alert-intro {
+@keyframes animation-alert-scale-down {
   from {
-    opacity: 0;
-    transform: scale(0.95);
+    opacity: 1;
+    transform: scale(1);
   }
 
   to {
-    opacity: 1;
-    transform: scale(1);
+    opacity: 0;
+    transform: scale(var(--vkui_internal--alert_animation_scale_initial));
   }
 }

package/src/components/Alert/Alert.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { Icon20Cancel } from '@vkontakte/icons';
-import { classNames, hasReactNode } from '@vkontakte/vkjs';
+import { classNames, hasReactNode, noop } from '@vkontakte/vkjs';
 import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
 import { usePlatform } from '../../hooks/usePlatform';
-import { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';
+import { useCSSKeyframesAnimationController } from '../../lib/animation';
 import { stopPropagation } from '../../lib/utils';
 import { AlignType, AnchorHTMLAttributesOnly, HasDataAttribute, HasRootRef } from '../../types';
 import { useScrollLock } from '../AppRoot/ScrollContext';
@@ -88,49 +88,40 @@ export const Alert = ({
 
   const platform = usePlatform();
   const { isDesktop } = useAdaptivityWithJSMediaQueries();
-  const { waitTransitionFinish } = useWaitTransitionFinish();
 
   const [closing, setClosing] = React.useState(false);
+  const itemActionCallbackRef = React.useRef(noop);
+  const [animationState, animationHandlers] = useCSSKeyframesAnimationController(
+    closing ? 'exit' : 'enter',
+    {
+      onExited() {
+        onClose();
+        itemActionCallbackRef.current();
+        itemActionCallbackRef.current = noop;
+      },
+    },
+  );
   const isDismissButtonVisible = isDesktop && platform !== 'ios';
-
   const elementRef = React.useRef<HTMLDivElement>(null);
 
-  const timeout = platform === 'ios' ? 300 : 200;
-
   const close = React.useCallback(() => {
     setClosing(true);
-    waitTransitionFinish(
-      elementRef.current,
-      (e?: TransitionEvent) => {
-        if (!e || e.propertyName === 'opacity') {
-          onClose();
-        }
-      },
-      timeout,
-    );
-  }, [elementRef, waitTransitionFinish, onClose, timeout]);
+  }, []);
 
   const onItemClick = React.useCallback(
     (item: AlertActionInterface) => {
-      const { action, autoCloseDisabled = false } = item;
+      const { action: itemAction, autoCloseDisabled = false } = item;
 
-      if (!autoCloseDisabled) {
-        setClosing(true);
-        waitTransitionFinish(
-          elementRef.current,
-          (e?: TransitionEvent) => {
-            if (!e || e.propertyName === 'opacity') {
-              onClose();
-              action && action();
-            }
-          },
-          timeout,
-        );
+      if (autoCloseDisabled) {
+        itemAction && itemAction({ close });
       } else {
-        action && action({ close });
+        if (itemAction) {
+          itemActionCallbackRef.current = itemAction;
+        }
+        setClosing(true);
       }
     },
-    [elementRef, waitTransitionFinish, onClose, close, timeout],
+    [close],
   );
 
   useScrollLock();
@@ -145,15 +136,16 @@ export const Alert = ({
     >
       <FocusTrap
         {...restProps}
+        {...animationHandlers}
         getRootRef={elementRef}
         onClick={stopPropagation}
         onClose={close}
-        timeout={timeout}
+        autoFocus={animationState === 'entered'}
         className={classNames(
           styles['Alert'],
           platform === 'ios' && styles['Alert--ios'],
           platform === 'vkcom' && styles['Alert--vkcom'],
-          closing && styles['Alert--closing'],
+          closing ? styles['Alert--closing'] : styles['Alert--opening'],
           isDesktop && styles['Alert--desktop'],
         )}
         role="alertdialog"