@vkontakte/vkui 4.32.0 → 4.33.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui",
-  "version": "4.32.0",
+  "version": "4.33.0",
   "main": "dist/cjs/index.js",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -47,7 +47,7 @@
     "@vkontakte/eslint-config": "2.5.0",
     "@vkontakte/icons": "^1.145.1",
     "@vkontakte/vk-bridge": "^2.1.3",
-    "@vkontakte/vkui-tokens": "4.12.0",
+    "@vkontakte/vkui-tokens": "4.12.2",
     "autoprefixer": "^10.4.2",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.3",
@@ -235,6 +235,6 @@
     "react-popper": "^2.2.5"
   },
   "engines": {
-    "yarn": ">=1.21.1 <=1.22.18"
+    "yarn": "^1.21.1"
   }
 }

package/src/components/ActionSheetItem/ActionSheetItem.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
 import { getClassName } from "../../helpers/getClassName";
-import Tappable from "../Tappable/Tappable";
+import { Tappable } from "../Tappable/Tappable";
 import { usePlatform } from "../../hooks/usePlatform";
 import { hasReactNode, noop } from "../../lib/utils";
 import { Subhead } from "../Typography/Subhead/Subhead";

package/src/components/Alert/Alert.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import Tappable from "../Tappable/Tappable";
+import { Tappable } from "../Tappable/Tappable";
 import { PopoutWrapper } from "../PopoutWrapper/PopoutWrapper";
 import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
@@ -10,7 +10,7 @@ import { hasReactNode, stopPropagation } from "../../lib/utils";
 import { Title } from "../Typography/Title/Title";
 import { Caption } from "../Typography/Caption/Caption";
 import { Text } from "../Typography/Text/Text";
-import ModalDismissButton from "../ModalDismissButton/ModalDismissButton";
+import { ModalDismissButton } from "../ModalDismissButton/ModalDismissButton";
 import { FocusTrap } from "../FocusTrap/FocusTrap";
 import { useScrollLock } from "../AppRoot/ScrollContext";
 import { useWaitTransitionFinish } from "../../hooks/useWaitTransitionFinish";
@@ -172,8 +172,10 @@ export const Alert: React.FC<AlertProps> = ({
     setClosing(true);
     waitTransitionFinish(
       elementRef.current,
-      () => {
-        onClose && onClose();
+      (e?: TransitionEvent) => {
+        if (!e || e.propertyName === "opacity") {
+          onClose && onClose();
+        }
       },
       timeout
     );

package/src/components/Avatar/Avatar.css

@@ -1,7 +1,7 @@
 .Avatar {
   flex-shrink: 0;
   box-sizing: border-box;
-  color: var(--placeholder_icon_background);
+  color: var(--placeholder_icon_background, var(--vkui--color_background));
   background: currentColor;
   background-size: cover;
   position: relative;
@@ -21,7 +21,8 @@
 }
 
 .Avatar__children,
-.Avatar--shadow::after {
+.Avatar--shadow::after,
+.Avatar__badge--shadow::before {
   position: absolute;
   left: 0;
   top: 0;
@@ -32,7 +33,8 @@
 
 .Avatar--shadow::after {
   content: "";
-  box-shadow: inset 0 0 0 var(--thin-border) var(--image_border);
+  box-shadow: inset 0 0 0 var(--thin-border)
+    var(--image_border, var(--vkui--color_image_border_alpha));
 }
 
 .Avatar__overlay {
@@ -52,11 +54,13 @@
 }
 
 .Avatar__overlay--light {
-  background-color: rgba(255, 255, 255, 0.85);
+  color: var(--accent, var(--vkui--color_icon_accent));
+  background-color: var(--vkui--color_avatar_overlay_inverse_alpha);
 }
 
 .Avatar__overlay--dark {
-  background-color: rgba(0, 0, 0, 0.6);
+  color: var(--button_commerce_foreground, var(--vkui--color_icon_contrast));
+  background-color: var(--vkui--color_avatar_overlay);
 }
 
 .Avatar__overlay--visible {
@@ -65,14 +69,14 @@
 
 .Avatar__overlay--focus-visible {
   opacity: 1;
-  box-shadow: 0 0 0 2px var(--accent);
+  box-shadow: 0 0 0 2px var(--accent, var(--vkui--color_stroke_accent));
 }
 
 .Avatar__children {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--icon_secondary);
+  color: var(--icon_secondary, var(--vkui--color_icon_secondary));
 }
 
 .Avatar__badge {
@@ -88,20 +92,27 @@
   right: 14%;
 }
 
-.Avatar__badge--shadow {
-  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.04))
-    drop-shadow(0 4px 4px rgba(0, 0, 0, 0.08));
+.Avatar__badge--shadow::before {
+  content: "";
+  border-radius: 50%;
+  box-shadow: var(--vkui--elevation1);
 }
 
 .Avatar__badge-online {
-  color: #4bb34b;
-  background-color: var(--background_content);
+  color: var(--button_commerce_background, var(--vkui--color_accent_green));
+  background-color: var(
+    --background_content,
+    var(--vkui--color_background_content)
+  );
   border-radius: 50%;
 }
 
 .Avatar__badge-online-mobile {
-  color: #4bb34b;
-  background-color: var(--background_content);
+  color: var(--button_commerce_background, var(--vkui--color_accent_green));
+  background-color: var(
+    --background_content,
+    var(--vkui--color_background_content)
+  );
   border-radius: 3px;
   padding: 2px;
 }
@@ -109,16 +120,12 @@
 /**
  * .CellButton
  */
-.CellButton > .Avatar {
-  color: var(--button_muted_background);
-}
-
 .CellButton > .Avatar .Icon {
-  color: var(--accent);
+  color: var(--accent, var(--vkui--color_icon_accent));
 }
 
 .CellButton--danger > .Avatar .Icon {
-  color: var(--destructive);
+  color: var(--destructive, var(--vkui--color_icon_negative));
 }
 
 /**

package/src/components/Avatar/Avatar.tsx

@@ -1,10 +1,8 @@
 import * as React from "react";
 import { Icon12Circle, Icon12OnlineMobile } from "@vkontakte/icons";
-import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
-import { usePlatform } from "../../hooks/usePlatform";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
-import Tappable from "../Tappable/Tappable";
+import { Tappable } from "../Tappable/Tappable";
 import { HasRef, HasRootRef } from "../../types";
 import "./Avatar.css";
 
@@ -33,7 +31,7 @@ export const AVATAR_DEFAULT_SHADOW = true;
 /**
  * @see https://vkcom.github.io/VKUI/#/Avatar
  */
-const Avatar: React.FC<AvatarProps> = ({
+export const Avatar: React.FC<AvatarProps> = ({
   alt,
   crossOrigin,
   decoding,
@@ -61,7 +59,6 @@ const Avatar: React.FC<AvatarProps> = ({
   onClick,
   ...restProps
 }: AvatarProps) => {
-  const platform = usePlatform();
   const { hasMouse } = useAdaptivity();
   const [failedImage, setFailedImage] = React.useState(false);
 
@@ -101,7 +98,7 @@ const Avatar: React.FC<AvatarProps> = ({
       {...restProps}
       // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
-        getClassName("Avatar", platform),
+        "Avatar",
         `Avatar--type-${mode}`,
         `Avatar--sz-${size}`,
         {
@@ -184,6 +181,3 @@ const Avatar: React.FC<AvatarProps> = ({
     </div>
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default Avatar;