@vkontakte/vkui 6.1.2 → 6.2.0

package/src/components/Root/Root.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { usePlatform } from '../../hooks/usePlatform';
-import { useTimeout } from '../../hooks/useTimeout';
 import { useDOM } from '../../lib/dom';
 import { getNavId, NavIdProps } from '../../lib/getNavId';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
@@ -93,26 +92,17 @@ export const Root = ({
     }
   }, [transition, prevView]);
 
-  const fallbackTransition = useTimeout(finishTransition, platform === 'ios' ? 600 : 300);
-  React.useEffect(() => {
-    if (!transition) {
-      fallbackTransition.clear();
-      return;
-    }
-    fallbackTransition.set();
-  }, [fallbackTransition, transition]);
+  React.useEffect(
+    function onAnimationEndFallback() {
+      if (transition && disableAnimation) {
+        finishTransition();
+      }
+    },
+    [transition, disableAnimation, finishTransition],
+  );
 
-  const onAnimationEnd = (e: React.AnimationEvent) => {
-    if (
-      [
-        styles['root-android-animation-hide-back'],
-        styles['root-android-animation-show-forward'],
-        styles['root-ios-animation-hide-back'],
-        styles['root-ios-animation-show-forward'],
-      ].includes(e.animationName)
-    ) {
-      finishTransition();
-    }
+  const onAnimationEnd = () => {
+    finishTransition();
   };
 
   return (

package/src/components/ScreenSpinner/ScreenSpinner.module.css

@@ -19,7 +19,7 @@
   position: relative;
   inline-size: 88px;
   block-size: 88px;
-  background: var(--vkui--color_background_modal);
+  background: var(--vkui--color_background_contrast_themed);
   box-shadow: var(--vkui--elevation4);
   border-radius: var(--vkui--size_border_radius--regular);
   color: var(--vkui--color_icon_medium);

package/src/components/ScrollArrow/ScrollArrow.module.css

@@ -24,7 +24,7 @@
 
 .ScrollArrow__icon {
   position: relative;
-  background-color: var(--vkui--color_background_modal);
+  background-color: var(--vkui--color_background_contrast_themed);
   color: var(--vkui--color_icon_secondary);
   box-shadow: var(--vkui--elevation3);
   display: flex;

package/src/components/Search/Search.module.css

@@ -164,7 +164,8 @@
   min-inline-size: initial;
   max-inline-size: min-content;
   pointer-events: none;
-  transition: flex 0.3s var(--vkui--animation_easing_platform),
+  transition:
+    flex 0.3s var(--vkui--animation_easing_platform),
     transform 0.3s var(--vkui--animation_easing_platform);
   overflow: hidden;
 }
@@ -190,6 +191,7 @@
   inline-size: initial;
 }
 
+/* FIXME поменять на `:global(.vkuiInternalGroup--mode-plain)` */
 .Group--mode-plain .Search {
   padding-block-start: 4px;
 }

package/src/components/SegmentedControl/SegmentedControl.module.css

@@ -28,7 +28,9 @@
   transition: transform 150ms;
   transform-origin: 0 0;
   border-radius: inherit;
-  box-shadow: inset 0 0 0 0.5px var(--vkui--color_image_border_alpha), 0 3px 8px rgba(0, 0, 0, 0.12),
+  box-shadow:
+    inset 0 0 0 0.5px var(--vkui--color_image_border_alpha),
+    0 3px 8px rgba(0, 0, 0, 0.12),
     0 3px 1px rgba(0, 0, 0, 0.04);
 }
 

package/src/components/Skeleton/Skeleton.module.css

@@ -62,3 +62,10 @@
   animation-name: none;
   background-image: none;
 }
+
+@media (--reduce-motion) {
+  .Skeleton {
+    animation-name: none;
+    background-image: none;
+  }
+}

package/src/components/Slider/Slider.tsx

@@ -16,7 +16,7 @@ import {
   updateInternalStateValue,
   updateInternalStateValueByNativeChange,
 } from './helpers';
-import type { InternalGestureRef, InternalValueState } from './types';
+import type { InternalDraggingType, InternalGestureRef, InternalValueState } from './types';
 import styles from './Slider.module.css';
 
 const sizeYClassNames = {
@@ -107,6 +107,7 @@ export const Slider = ({
   const multiple = multipleProp && endValue !== null;
   const startValueInPercent = toPercent(startValue, min, max);
   const endReversedValueInPercent = multiple ? toPercent(endValue, min, max) : 0;
+  const [activeThumb, setActiveThumb] = React.useState<InternalDraggingType | null>(null);
 
   const gesture = React.useRef<InternalGestureRef>({
     dragging: null,
@@ -182,6 +183,7 @@ export const Slider = ({
     changeValue(updatedInternalStateValue, event);
 
     event.originalEvent.stopPropagation();
+    setActiveThumb(gesture.dragging);
   };
 
   const handlePointerMove: TouchEventHandler = (event: TouchEvent) => {
@@ -200,6 +202,7 @@ export const Slider = ({
   const handlePointerEnd: TouchEventHandler = (event) => {
     gesture.dragging = null;
     event.originalEvent.stopPropagation();
+    setActiveThumb(null);
   };
 
   const handleChangeByNativeInput = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -260,6 +263,7 @@ export const Slider = ({
             'aria-labelledby': ariaLabelledBy,
             'onChange': handleChangeByNativeInput,
           }}
+          isActive={activeThumb === 'start'}
         />
         {multiple && (
           <SliderThumb
@@ -280,6 +284,7 @@ export const Slider = ({
               'aria-labelledby': ariaLabelledBy,
               'onChange': handleChangeByNativeInput,
             }}
+            isActive={activeThumb === 'end'}
           />
         )}
       </div>

package/src/components/Slider/SliderThumb/SliderThumb.module.css

@@ -6,15 +6,23 @@
   block-size: var(--vkui_internal--slider_thumb_size);
   border-radius: 50%;
   border: var(--vkui--size_border--regular) solid var(--vkui--color_separator_primary_alpha);
-  background: var(--vkui--color_background_contrast);
+  background-color: var(--vkui--color_background_contrast);
   box-shadow: var(--vkui--elevation3);
   user-select: none;
+  transition: background-color 0.15s ease-out;
 }
 
 .SliderThumb--focus-visible {
   outline: var(--vkui_internal--outline);
   outline-offset: calc(-1 * var(--vkui--size_border--regular));
-  z-index: 2;
+}
+
+.SliderThumb--hover {
+  background-color: var(--vkui--color_background_contrast--hover);
+}
+
+.SliderThumb--active {
+  background-color: var(--vkui--color_background_contrast--active);
 }
 
 /**

package/src/components/Slider/SliderThumb/SliderThumb.tsx

@@ -23,6 +23,7 @@ interface SliderThumbProps extends HasRootRef<HTMLSpanElement>, HasDataAttribute
     React.RefAttributes<HTMLInputElement> &
     HasDataAttribute;
   withTooltip?: boolean;
+  isActive?: boolean;
 }
 
 export const SliderThumb = ({
@@ -30,9 +31,10 @@ export const SliderThumb = ({
   getRootRef,
   inputProps,
   withTooltip,
+  isActive,
   ...restProps
 }: SliderThumbProps) => {
-  const { focusVisible, onBlur, onFocus } = useFocusVisible(false);
+  const { focusVisible, onBlur, onFocus } = useFocusVisible();
   const focusVisibleClassNames = useFocusVisibleClassName({
     focusVisible,
     mode: styles['SliderThumb--focus-visible'],
@@ -74,7 +76,7 @@ export const SliderThumb = ({
 
   const handleRootRef = useExternRef<HTMLSpanElement>(getRootRef, refs.setReference);
 
-  const shouldShowTooltip = withTooltip && (focusVisible || isHovered);
+  const shouldShowTooltip = withTooltip && (focusVisible || isHovered || isActive);
 
   const inputValue = inputProps && inputProps.value;
   React.useEffect(
@@ -93,7 +95,13 @@ export const SliderThumb = ({
         ref={handleRootRef}
         onMouseEnter={setHoveredTrue}
         onMouseLeave={setHoveredFalse}
-        className={classNames(styles['SliderThumb'], focusVisibleClassNames, className)}
+        className={classNames(
+          styles['SliderThumb'],
+          focusVisibleClassNames,
+          isActive && styles['SliderThumb--active'],
+          isHovered && styles['SliderThumb--hover'],
+          className,
+        )}
       >
         <input
           {...inputProps}

package/src/components/Snackbar/Snackbar.module.css

@@ -1,6 +1,11 @@
 .Snackbar {
   --vkui_internal--snackbar_safe_area_inset_bottom: var(--vkui_internal--safe_area_inset_bottom);
   --vkui_internal--snackbar_in_padding: 8px;
+  --vkui_internal--snackbar_shift_x: 0;
+  --vkui_internal--snackbar_shift_y: 0;
+  --vkui_internal--snackbar_animation_from: translate3d(0, 0, 0);
+  --vkui_internal--snackbar_animation_to: translate3d(0, var(--vkui_internal--snackbar_shift_y), 0);
+  --vkui_internal--snackbar_animation_duration: 340ms;
 
   position: fixed;
   inset-inline: var(--vkui_internal--safe_area_inset_left)
@@ -9,20 +14,24 @@
   user-select: none;
 }
 
+.Snackbar--ios {
+  --vkui_internal--snackbar_animation_duration: 400ms;
+}
+
 .Snackbar--placement-top-start,
 .Snackbar--placement-top,
 .Snackbar--placement-top-end {
+  --vkui_internal--snackbar_animation_from: translate3d(0, -100%, 0);
+
   inset-block-start: var(--vkui_internal--safe_area_inset_top);
 }
 
 .Snackbar--placement-bottom-start,
 .Snackbar--placement-bottom,
 .Snackbar--placement-bottom-end {
-  inset-block-end: var(--vkui_internal--snackbar_safe_area_inset_bottom);
-}
+  --vkui_internal--snackbar_animation_from: translate3d(0, 100%, 0);
 
-.Snackbar__in {
-  padding: var(--vkui_internal--snackbar_in_padding);
+  inset-block-end: var(--vkui_internal--snackbar_safe_area_inset_bottom);
 }
 
 @media (--desktop) {
@@ -49,106 +58,75 @@
 
   .Snackbar--placement-top-start,
   .Snackbar--placement-bottom-start {
+    --vkui_internal--snackbar_animation_from: translate3d(-100%, 0, 0);
+
     inset-inline-start: var(--vkui_internal--safe_area_inset_left);
     inset-inline-end: auto;
   }
 
   .Snackbar--placement-top-end,
   .Snackbar--placement-bottom-end {
+    --vkui_internal--snackbar_animation_from: translate3d(100%, 0, 0);
+
     inset-inline-start: auto;
     inset-inline-end: var(--vkui_internal--safe_area_inset_right);
   }
 
-  .Snackbar__in {
-    --vkui_internal--snackbar_in_padding: 12px;
-  }
-}
-
-/* Анимации */
-@media (prefers-reduced-motion: no-preference) {
-  .Snackbar {
-    --vkui_internal--snackbar_shift_x: 0;
-    --vkui_internal--snackbar_shift_y: 0;
-    --vkui_internal--snackbar_animation_from: translate3d(0, 0, 0);
+  .Snackbar--placement-top-start,
+  .Snackbar--placement-bottom-start,
+  .Snackbar--placement-top-end,
+  .Snackbar--placement-bottom-end {
     --vkui_internal--snackbar_animation_to: translate3d(
+      var(--vkui_internal--snackbar_shift_x),
       0,
-      var(--vkui_internal--snackbar_shift_y),
       0
     );
-    --vkui_internal--snackbar_animation_duration: 340ms;
-  }
-
-  .Snackbar--ios {
-    --vkui_internal--snackbar_animation_duration: 400ms;
-  }
-
-  .Snackbar--placement-top-start,
-  .Snackbar--placement-top,
-  .Snackbar--placement-top-end {
-    --vkui_internal--snackbar_animation_from: translate3d(0, -100%, 0);
   }
+}
 
-  .Snackbar--placement-bottom-start,
-  .Snackbar--placement-bottom,
-  .Snackbar--placement-bottom-end {
-    --vkui_internal--snackbar_animation_from: translate3d(0, 100%, 0);
-  }
+.Snackbar__in {
+  padding: var(--vkui_internal--snackbar_in_padding);
+  animation-duration: var(--vkui_internal--snackbar_animation_duration);
+  animation-timing-function: var(--vkui--animation_easing_platform);
+  animation-fill-mode: both;
+  transform: translate3d(0, var(--vkui_internal--snackbar_shift_y), 0);
+}
 
-  .Snackbar__in {
-    animation-duration: var(--vkui_internal--snackbar_animation_duration);
-    animation-timing-function: var(--vkui--animation_easing_platform);
-    animation-fill-mode: both;
-    transform: translate3d(0, var(--vkui_internal--snackbar_shift_y), 0);
-  }
+.Snackbar--state-enter .Snackbar__in,
+.Snackbar--state-entering .Snackbar__in {
+  animation-name: animation-snackbar-slide-in;
+}
 
+@media (--reduce-motion) {
   .Snackbar--state-enter .Snackbar__in,
   .Snackbar--state-entering .Snackbar__in {
-    animation-name: animation-snackbar-slide-in;
-  }
-
-  .Snackbar--state-entered .Snackbar__in {
-    transition-property: transform;
-    transition-duration: var(--vkui_internal--snackbar_animation_duration);
-    transition-timing-function: var(--vkui--animation_easing_platform);
-  }
-
-  .Snackbar--touched .Snackbar__in {
-    transition-property: none;
-  }
-
-  .Snackbar--state-exit .Snackbar__in,
-  .Snackbar--state-exiting .Snackbar__in {
-    animation-name: animation-snackbar-slide-out;
+    animation-name: animation-snackbar-fade-in;
   }
 }
 
-/* Выносим из @media, т.к. иначе элемент не скроется, если пользователь не удаляет Snackbar из DOM. */
-.Snackbar--state-exited .Snackbar__in {
-  transform: var(--vkui_internal--snackbar_animation_from);
+.Snackbar--state-entered .Snackbar__in {
+  transition-property: transform;
+  transition-duration: var(--vkui_internal--snackbar_animation_duration);
+  transition-timing-function: var(--vkui--animation_easing_platform);
 }
 
-@media (--desktop) and (prefers-reduced-motion: no-preference) {
-  .Snackbar--placement-top-start,
-  .Snackbar--placement-bottom-start {
-    --vkui_internal--snackbar_animation_from: translate3d(-100%, 0, 0);
-  }
+.Snackbar--touched .Snackbar__in {
+  transition-property: none;
+}
 
-  .Snackbar--placement-top-end,
-  .Snackbar--placement-bottom-end {
-    --vkui_internal--snackbar_animation_from: translate3d(100%, 0, 0);
-  }
+.Snackbar--state-exit .Snackbar__in,
+.Snackbar--state-exiting .Snackbar__in {
+  animation-name: animation-snackbar-slide-out;
+}
 
-  .Snackbar--placement-top-start,
-  .Snackbar--placement-bottom-start,
-  .Snackbar--placement-top-end,
-  .Snackbar--placement-bottom-end {
-    --vkui_internal--snackbar_animation_to: translate3d(
-      var(--vkui_internal--snackbar_shift_x),
-      0,
-      0
-    );
+@media (--reduce-motion) {
+  .Snackbar--state-exit .Snackbar__in,
+  .Snackbar--state-exiting .Snackbar__in {
+    animation-name: animation-snackbar-fade-out;
   }
+} /* stylelint-disable-next-line at-rule-empty-line-before */
 
+@media (--desktop) {
   .Snackbar__in {
     --vkui_internal--snackbar_in_padding: 12px;
   }
@@ -183,3 +161,23 @@
     transform: var(--vkui_internal--snackbar_animation_from);
   }
 }
+
+/* Анимации при (prefers-reduced-motion: reduce) */
+@keyframes animation-snackbar-fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+@keyframes animation-snackbar-fade-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}

package/src/components/Snackbar/Snackbar.tsx

@@ -5,7 +5,6 @@ import { useFocusWithin } from '../../hooks/useFocusWithin';
 import { useGlobalEscKeyDown } from '../../hooks/useGlobalEscKeyDown';
 import { usePlatform } from '../../hooks/usePlatform';
 import { useCSSKeyframesAnimationController } from '../../lib/animation';
-import { useReducedMotion } from '../../lib/animation/useReducedMotion';
 import { getRelativeBoundingClientRect } from '../../lib/dom';
 import { UIPanGestureRecognizer } from '../../lib/touch';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
@@ -37,7 +36,7 @@ const animationStateClassNames = {
   entered: styles['Snackbar--state-entered'],
   exit: styles['Snackbar--state-exit'],
   exiting: styles['Snackbar--state-exiting'],
-  exited: styles['Snackbar--state-exited'],
+  exited: undefined,
 };
 
 export interface SnackbarProps
@@ -90,7 +89,6 @@ export const Snackbar = ({
   getRootRef,
   ...restProps
 }: SnackbarProps) => {
-  const isReducedMotion = useReducedMotion();
   const platform = usePlatform();
 
   const [open, setOpen] = React.useState(true);
@@ -222,6 +220,10 @@ export const Snackbar = ({
 
   useGlobalEscKeyDown(open, close);
 
+  if (animationState === 'exited') {
+    return null;
+  }
+
   return (
     <RootComponent
       {...restProps}
@@ -241,14 +243,14 @@ export const Snackbar = ({
         className={styles['Snackbar__in']}
         ref={inRef}
         // mobile
-        onTouchStart={isReducedMotion ? undefined : handleTouchStart}
-        onTouchMove={isReducedMotion ? undefined : handleTouchMove}
-        onTouchEnd={isReducedMotion ? undefined : handleTouchEnd}
+        onTouchStart={handleTouchStart}
+        onTouchMove={handleTouchMove}
+        onTouchEnd={handleTouchEnd}
         // desktop
-        onMouseDown={isReducedMotion ? undefined : handleTouchStart}
-        onMouseMove={isReducedMotion ? undefined : handleTouchMove}
-        onMouseUp={isReducedMotion ? undefined : handleTouchEnd}
-        onMouseLeave={isReducedMotion ? undefined : handleTouchEnd}
+        onMouseDown={handleTouchStart}
+        onMouseMove={handleTouchMove}
+        onMouseUp={handleTouchEnd}
+        onMouseLeave={handleTouchEnd}
         {...animationHandlers}
       >
         <Basic

package/src/components/Spacing/Spacing.module.css

@@ -8,6 +8,7 @@
 }
 
 .Spacing--3xs {
+  /* TODO [>=7]: удалить deprecated токен */
   --vkui_internal--Spacing_gap: var(--vkui--spacing_size_3xs);
 }
 

package/src/components/Spinner/Spinner.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from '@vkontakte/icons';
 import { hasReactNode } from '@vkontakte/vkjs';
+import { useReducedMotion } from '../../lib/animation';
 import { HTMLAttributesWithRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
@@ -18,22 +19,53 @@ export const Spinner = React.memo(
   ({
     size = 'regular',
     children = 'Загружается...',
-    disableAnimation,
+    disableAnimation = false,
     ...restProps
   }: SpinnerProps) => {
+    const isReducedMotion = useReducedMotion();
     const SpinnerIcon = {
       small: Icon16Spinner,
       regular: Icon24Spinner,
       medium: Icon32Spinner,
       large: Icon44Spinner,
     }[size];
+    let svgAnimateElement: React.ReactNode = null;
 
-    const center = {
-      small: 8,
-      regular: 12,
-      medium: 16,
-      large: 22,
-    }[size];
+    const [isReadyForSetSVGAnimateElement, setIsReadyForSetSVGAnimateElement] = React.useState(
+      disableAnimation ? true : false,
+    );
+
+    React.useEffect(function waitReactHydrationBeforeSetSVGAnimateElement() {
+      setIsReadyForSetSVGAnimateElement(true);
+    }, []);
+
+    if (isReadyForSetSVGAnimateElement && !disableAnimation) {
+      if (isReducedMotion) {
+        svgAnimateElement = (
+          <animate
+            attributeName="opacity"
+            keyTimes="0; 0.5; 1"
+            values="1; 0.1; 1"
+            begin="0s"
+            dur="2s"
+            repeatCount="indefinite"
+          />
+        );
+      } else {
+        const center = { small: 8, regular: 12, medium: 16, large: 22 }[size];
+        svgAnimateElement = (
+          <animateTransform
+            attributeType="XML"
+            attributeName="transform"
+            type="rotate"
+            from={`0 ${center} ${center}`}
+            to={`360 ${center} ${center}`}
+            dur="0.7s"
+            repeatCount="indefinite"
+          />
+        );
+      }
+    }
 
     return (
       <RootComponent
@@ -42,21 +74,7 @@ export const Spinner = React.memo(
         {...restProps}
         baseClassName={styles['Spinner']}
       >
-        <SpinnerIcon>
-          {!disableAnimation && (
-            // TODO [a11y]: use reduced motion hook?
-            //              https://github.com/VKCOM/VKUI/pull/4673
-            <animateTransform
-              attributeName="transform"
-              attributeType="XML"
-              type="rotate"
-              from={`0 ${center} ${center}`}
-              to={`360 ${center} ${center}`}
-              dur="0.7s"
-              repeatCount="indefinite"
-            />
-          )}
-        </SpinnerIcon>
+        <SpinnerIcon>{svgAnimateElement}</SpinnerIcon>
         {hasReactNode(children) && <VisuallyHidden>{children}</VisuallyHidden>}
       </RootComponent>
     );

package/src/components/SubnavigationButton/SubnavigationButton.module.css

@@ -101,7 +101,7 @@
  */
 
 .SubnavigationButton--mode-primary {
-  background-color: var(--vkui--color_background_modal);
+  background-color: var(--vkui--color_background_contrast_themed);
   box-shadow: var(--vkui--elevation3);
 }