@vkontakte/vkui 4.35.4 → 4.37.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui",
-  "version": "4.35.4",
+  "version": "4.37.0",
   "main": "dist/cjs/index.js",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -30,10 +30,10 @@
     "@babel/preset-typescript": "^7.16.7",
     "@size-limit/preset-small-lib": "^5.0.5",
     "@testing-library/jest-dom": "^5.11.6",
-    "@testing-library/react": "^11.2.1",
-    "@testing-library/react-hooks": "^5.1.2",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^13.2.1",
-    "@types/css-font-loading-module": "^0.0.4",
+    "@types/css-font-loading-module": "^0.0.7",
     "@types/jest": "^26.0.15",
     "@types/jest-image-snapshot": "^4.1.3",
     "@types/node": "^14.14.31",
@@ -43,11 +43,11 @@
     "@types/webpack-dev-server": "^3.11.2",
     "@typescript-eslint/eslint-plugin": "^4.22.0",
     "@typescript-eslint/parser": "^4.0.0",
-    "@vkontakte/appearance": "https://github.com/VKCOM/Appearance#v9.46.3",
+    "@vkontakte/appearance": "https://github.com/VKCOM/Appearance#v9.40.4",
     "@vkontakte/eslint-config": "3.1.0",
-    "@vkontakte/icons": "^1.145.1",
+    "@vkontakte/icons": "^1.184.0",
     "@vkontakte/vk-bridge": "^2.1.3",
-    "@vkontakte/vkui-tokens": "4.14.3",
+    "@vkontakte/vkui-tokens": "4.17.0",
     "autoprefixer": "^10.4.2",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.3",
@@ -56,9 +56,7 @@
     "babel-plugin-module-resolver": "^4.1.0",
     "babel-plugin-transform-remove-imports": "^1.7.0",
     "chalk": "^4.1.0",
-    "classnames": "^2.2.6",
-    "clean-webpack-plugin": "^4.0.0",
-    "concurrently": "^4.1.2",
+    "concurrently": "^7.3.0",
     "cross-env": "^7.0.2",
     "css-loader": "^6.5.1",
     "cssnano": "^5.1.12",
@@ -66,28 +64,29 @@
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-compat": "^4.0.2",
     "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-jest-playwright": "^0.2.1",
-    "eslint-plugin-prettier": "^3.4.1",
-    "eslint-plugin-react": "7.30.1",
+    "eslint-plugin-jest": "^27.0.1",
+    "eslint-plugin-jest-playwright": "^0.9.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "7.31.6",
     "eslint-plugin-react-hooks": "^4.3.0",
     "eslint-plugin-vkui": "file:./eslint-plugin-vkui",
     "expect-playwright": "^0.2.6",
-    "husky": "^7.0.4",
+    "husky": "^8.0.1",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
     "jest-image-snapshot": "^4.2.0",
     "jest-playwright-preset": "^1.4.1",
     "jest-preset-stylelint": "^5.0.4",
-    "lint-staged": "^12.1.2",
+    "lint-staged": "^13.0.3",
     "mini-css-extract-plugin": "^2.5.2",
     "playwright": "1.17.2",
     "playwright-chromium": "1.17.2",
     "postcss": "^8.4.5",
-    "postcss-cli": "^9.1.0",
+    "postcss-cli": "^10.0.0",
     "postcss-custom-properties": "^12.1.7",
-    "postcss-import": "^14.0.2",
-    "postcss-loader": "^6.2.1",
-    "postcss-modules": "^4.3.0",
+    "postcss-import": "^15.0.0",
+    "postcss-loader": "^7.0.1",
+    "postcss-modules": "^5.0.0",
     "postcss-value-parser": "^4.2.0",
     "postcss-values-parser": "^6.0.2",
     "prettier": "^2.5.1",
@@ -96,7 +95,7 @@
     "react": "^16.8.6",
     "react-docgen-typescript": "^2.1.1",
     "react-dom": "^16.8.6",
-    "react-frame-component": "^3.0.0",
+    "react-frame-component": "^5.2.3",
     "react-styleguidist": "^11.2.0",
     "semver": "^7.3.5",
     "shx": "^0.3.2",
@@ -105,14 +104,14 @@
     "style-loader": "^3.3.1",
     "stylelint": "^14.9.1",
     "stylelint-config-prettier": "^9.0.3",
-    "stylelint-config-standard": "^26.0.0",
+    "stylelint-config-standard": "^28.0.0",
     "stylelint-value-no-unknown-custom-properties": "^4.0.0",
     "typescript": "3.8",
     "wait-port": "^0.2.9",
     "webpack": "^5.66.0",
     "webpack-cli": "^4.9.1",
     "webpack-merge": "^5.8.0",
-    "yargs": "^15.4.1"
+    "yargs": "^17.5.1"
   },
   "resolutions": {
     "@types/react": "^16.14.20",
@@ -122,10 +121,10 @@
     "generate_scheme": "./tasks/generate_scheme.js"
   },
   "peerDependencies": {
-    "@vkontakte/icons": "^1.136.0",
+    "@vkontakte/icons": "^1.184.0",
     "@vkontakte/vk-bridge": "^2.0.2",
-    "react": "^16.8.6 || ^17.0.0",
-    "react-dom": "^16.8.6 || ^17.0.0"
+    "react": "^16.8.6 || ^17.0.0 || ^18.1.0",
+    "react-dom": "^16.8.6 || ^17.0.0 || ^18.1.0"
   },
   "size-limit": [
     {

package/src/components/ActionSheet/ActionSheet.css

@@ -1,10 +1,31 @@
 .ActionSheet {
   position: relative;
   overflow: hidden;
+  box-shadow: var(--vkui--elevation3);
+  width: calc(100% - 20px);
+  align-items: stretch;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  animation: vkui-animation-actionsheet-intro 0.2s var(--android-easing);
+  padding: 8px 0;
+  margin: 10px;
+  border-radius: 12px;
+  background: var(--modal_card_background, var(--vkui--color_background_modal));
 }
 
 .ActionSheet__header {
-  color: var(--text_secondary);
+  color: var(--text_secondary, var(--vkui--color_text_subhead));
+  padding: 16px 20px;
+}
+
+.ActionSheet--closing {
+  transform: translateY(calc(100% + 20px));
+  transition: transform 0.2s var(--android-easing);
+}
+
+.ActionSheet__title + .ActionSheet__text {
+  margin-top: 8px;
 }
 
 /**
@@ -14,10 +35,8 @@
   width: 100%;
   animation: vkui-animation-actionsheet-intro 0.3s var(--ios-easing);
   padding: 10px;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
+  margin: unset;
+  background: transparent;
 }
 
 .ActionSheet--ios.ActionSheet--closing {
@@ -26,7 +45,6 @@
 }
 
 .ActionSheet--ios .ActionSheet__header {
-  padding: 15px 10px;
   position: relative;
   overflow: hidden;
   border-radius: 14px 14px 0 0;
@@ -53,42 +71,20 @@
   top: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--modal_card_background);
+  background-color: var(
+    --modal_card_background,
+    var(--vkui--color_background_modal)
+  );
   z-index: 1;
   content: "";
 }
 
 /**
- * Android
+ * Compact
  */
-.ActionSheet--android,
-.ActionSheet--vkcom {
-  width: calc(100% - 20px);
-  margin: 10px;
-  animation: vkui-animation-actionsheet-intro 0.2s var(--android-easing);
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  border-radius: 12px;
-  box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.16), 0 0 4px 0 rgba(0, 0, 0, 0.08);
-  padding: 8px 0;
-  background: var(--modal_card_background);
-}
 
-.ActionSheet--android.ActionSheet--closing {
-  transform: translateY(calc(100% + 20px));
-  transition: transform 0.2s var(--android-easing);
-}
-
-.ActionSheet--android .ActionSheet__header,
-.ActionSheet--vkcom .ActionSheet__header {
-  padding: 16px 20px;
-}
-
-.ActionSheet--android .ActionSheet__title + .ActionSheet__text,
-.ActionSheet--vkcom .ActionSheet__title + .ActionSheet__text {
-  margin-top: 8px;
+.ActionSheet--sizeY-compact .ActionSheet__header {
+  padding: 12px 20px;
 }
 
 /**
@@ -98,39 +94,15 @@
 .ActionSheet--desktop {
   width: auto;
   height: auto;
-  background: var(--modal_card_background);
   animation: none;
-  padding: 0;
   margin: 0;
 }
 
-.ActionSheet--desktop.ActionSheet--sizeY-compact {
-  padding-top: 8px;
-  padding-bottom: 8px;
-}
-
 .ActionSheet--desktop.ActionSheet--ios {
   border-radius: 14px;
-  box-shadow: 0 0 96px rgba(0, 0, 0, 0.16), 0 0 2px rgba(0, 0, 0, 0.12);
   padding: 0;
 }
 
-.ActionSheet--desktop.ActionSheet--android {
-  min-width: 112px;
-  border-radius: 12px;
-  padding: 8px 0;
-  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.16), 0 0 4px rgba(0, 0, 0, 0.08);
-}
-
-.ActionSheet--desktop.ActionSheet--vkcom {
-  border-radius: 12px;
-  box-shadow: 0 0 2px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.08);
-}
-
-.ActionSheet--desktop.ActionSheet--vkcom .ActionSheet__header {
-  padding: 14px 20px;
-}
-
 /**
 * Animations
 */

package/src/components/ActionSheet/ActionSheet.tsx

@@ -5,7 +5,7 @@ import { ActionSheetDropdownDesktop } from "./ActionSheetDropdownDesktop";
 import { ActionSheetDropdown } from "./ActionSheetDropdown";
 import { hasReactNode, noop } from "../../lib/utils";
 import { ActionSheetContext, ItemClickHandler } from "./ActionSheetContext";
-import { Caption } from "../Typography/Caption/Caption";
+import { Footnote } from "../Typography/Footnote/Footnote";
 import { usePlatform } from "../../hooks/usePlatform";
 import { useTimeout } from "../../hooks/useTimeout";
 import { useAdaptivityIsDesktop } from "../../hooks/useAdaptivity";
@@ -123,15 +123,12 @@ export const ActionSheet = ({
         {(hasReactNode(header) || hasReactNode(text)) && (
           <header vkuiClass="ActionSheet__header">
             {hasReactNode(header) && (
-              <Caption
-                weight={platform === IOS ? "1" : "2"}
-                vkuiClass="ActionSheet__title"
-              >
+              <Footnote weight="2" vkuiClass="ActionSheet__title">
                 {header}
-              </Caption>
+              </Footnote>
             )}
             {hasReactNode(text) && (
-              <Caption vkuiClass="ActionSheet__text">{text}</Caption>
+              <Footnote vkuiClass="ActionSheet__text">{text}</Footnote>
             )}
           </header>
         )}

package/src/components/ActionSheet/ActionSheetDefaultIosCloseItem.tsx

@@ -0,0 +1,12 @@
+import {
+  ActionSheetItem,
+  ActionSheetItemProps,
+} from "../ActionSheetItem/ActionSheetItem";
+
+export const ActionSheetDefaultIosCloseItem = (props: ActionSheetItemProps) => {
+  return (
+    <ActionSheetItem autoclose mode="cancel" {...props}>
+      Отменить
+    </ActionSheetItem>
+  );
+};

package/src/components/ActionSheet/ActionSheetDropdown.tsx

@@ -1,7 +1,8 @@
 import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
+import { Platform } from "../../lib/platform";
 import { usePlatform } from "../../hooks/usePlatform";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { SharedDropdownProps } from "./types";
 import { FocusTrap } from "../FocusTrap/FocusTrap";
 import "./ActionSheet.css";
@@ -16,17 +17,19 @@ export const ActionSheetDropdown = ({
   popupDirection,
   ...restProps
 }: SharedDropdownProps) => {
+  const { sizeY } = useAdaptivity();
   const platform = usePlatform();
-  const baseClaseName = getClassName("ActionSheet", platform);
 
   return (
     <FocusTrap
       {...restProps}
       onClick={stopPropagation}
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
-      vkuiClass={classNames(baseClaseName, {
-        "ActionSheet--closing": closing,
-      })}
+      vkuiClass={classNames(
+        "ActionSheet",
+        platform === Platform.IOS && "ActionSheet--ios",
+        closing && "ActionSheet--closing",
+        `ActionSheet--sizeY-${sizeY}`
+      )}
     >
       {children}
     </FocusTrap>

package/src/components/ActionSheet/ActionSheetDropdownDesktop.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
 import { useDOM } from "../../lib/dom";
 import { usePlatform } from "../../hooks/usePlatform";
@@ -7,6 +6,7 @@ import { useEffectDev } from "../../hooks/useEffectDev";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { isRefObject } from "../../lib/isRefObject";
 import { warnOnce } from "../../lib/warnOnce";
+import { Platform } from "../../lib/platform";
 import { useEventListener } from "../../hooks/useEventListener";
 import { SharedDropdownProps } from "./types";
 import { FocusTrap } from "../FocusTrap/FocusTrap";
@@ -72,9 +72,8 @@ export const ActionSheetDropdownDesktop = ({
     if (isRefObject<SharedDropdownProps["toggleRef"], HTMLElement>(toggleRef)) {
       return toggleRef;
     }
-    const refObject = { current: toggleRef as HTMLElement };
 
-    return refObject;
+    return { current: toggleRef as HTMLElement };
   }, [toggleRef]);
 
   return (
@@ -83,7 +82,8 @@ export const ActionSheetDropdownDesktop = ({
       offsetDistance={0}
       placement={isPopupDirectionTop ? "top-end" : "bottom-end"}
       vkuiClass={classNames(
-        getClassName("ActionSheet", platform),
+        "ActionSheet",
+        platform === Platform.IOS && "ActionSheet--ios",
         "ActionSheet--desktop",
         `ActionSheet--sizeY-${sizeY}`
       )}

package/src/components/ActionSheet/Readme.md

@@ -28,11 +28,7 @@ const openBase = () =>
   setPopout(
     <ActionSheet
       onClose={onClose}
-      iosCloseItem={
-        <ActionSheetItem autoclose mode="cancel">
-          Отменить
-        </ActionSheetItem>
-      }
+      iosCloseItem={<ActionSheetDefaultIosCloseItem />}
       toggleRef={baseTargetRef}
     >
       <ActionSheetItem autoclose>Сохранить в закладках</ActionSheetItem>
@@ -49,11 +45,7 @@ const openIcons = () =>
   setPopout(
     <ActionSheet
       onClose={onClose}
-      iosCloseItem={
-        <ActionSheetItem autoclose mode="cancel">
-          Отменить
-        </ActionSheetItem>
-      }
+      iosCloseItem={<ActionSheetDefaultIosCloseItem />}
       toggleRef={iconsTargetRef}
     >
       <ActionSheetItem autoclose before={<Icon28EditOutline />}>
@@ -88,11 +80,7 @@ const openSubtitle = () =>
   setPopout(
     <ActionSheet
       onClose={onClose}
-      iosCloseItem={
-        <ActionSheetItem autoclose mode="cancel">
-          Отменить
-        </ActionSheetItem>
-      }
+      iosCloseItem={<ActionSheetDefaultIosCloseItem />}
       toggleRef={subtitleTargetRef}
     >
       <ActionSheetItem
@@ -124,11 +112,7 @@ const openSelectable = () =>
   setPopout(
     <ActionSheet
       onClose={onClose}
-      iosCloseItem={
-        <ActionSheetItem autoclose mode="cancel">
-          Отменить
-        </ActionSheetItem>
-      }
+      iosCloseItem={<ActionSheetDefaultIosCloseItem />}
       toggleRef={selectableTargetRef}
     >
       <ActionSheetItem
@@ -188,11 +172,7 @@ const openTitle = () =>
   setPopout(
     <ActionSheet
       onClose={onClose}
-      iosCloseItem={
-        <ActionSheetItem autoclose mode="cancel">
-          Отменить
-        </ActionSheetItem>
-      }
+      iosCloseItem={<ActionSheetDefaultIosCloseItem />}
       header="Вы действительно хотите удалить это видео из Ваших видео?"
       toggleRef={titleTargetRef}
     >
@@ -206,11 +186,7 @@ const openBaseTop = () =>
   setPopout(
     <ActionSheet
       onClose={onClose}
-      iosCloseItem={
-        <ActionSheetItem autoclose mode="cancel">
-          Отменить
-        </ActionSheetItem>
-      }
+      iosCloseItem={<ActionSheetDefaultIosCloseItem />}
       toggleRef={baseTopTargetRef}
     >
       <ActionSheetItem autoclose>Сохранить в закладках</ActionSheetItem>