@vkontakte/vkui 4.30.0 → 4.33.0

package/jest.unit.config.js

@@ -3,7 +3,9 @@ module.exports = {
   displayName: "unit",
   roots: [
     path.join(__dirname, "src"),
+    path.join(__dirname, "tasks"),
     path.join(__dirname, "postcss-plugin-vk-sans"),
+    path.join(__dirname, "postcss-custom-properties-fallback"),
   ],
   setupFilesAfterEnv: [path.join(__dirname, "src/testing/setup.ts")],
   collectCoverage: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui",
-  "version": "4.30.0",
+  "version": "4.33.0",
   "main": "dist/cjs/index.js",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -36,7 +36,7 @@
     "@types/css-font-loading-module": "^0.0.4",
     "@types/jest": "^26.0.15",
     "@types/jest-image-snapshot": "^4.1.3",
-    "@types/node": "^12.7.2",
+    "@types/node": "^14.14.31",
     "@types/react": "^16.14.20",
     "@types/react-dom": "^16.9.14",
     "@types/webpack": "^5.28.0",
@@ -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.7.0",
+    "@vkontakte/vkui-tokens": "4.12.2",
     "autoprefixer": "^10.4.2",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.3",
@@ -82,10 +82,12 @@
     "postcss": "^8.4.5",
     "postcss-cli": "^9.1.0",
     "postcss-csso": "^6.0.0",
-    "postcss-custom-properties": "^12.1.3",
+    "postcss-custom-properties": "^12.1.7",
     "postcss-import": "^14.0.2",
     "postcss-loader": "^6.2.1",
     "postcss-modules": "^4.3.0",
+    "postcss-value-parser": "^4.2.0",
+    "postcss-values-parser": "^6.0.2",
     "prettier": "^2.5.1",
     "process": "^0.11.10",
     "prop-types": "^15.6.2",
@@ -93,7 +95,7 @@
     "react-docgen-typescript": "^2.1.1",
     "react-dom": "^16.8.6",
     "react-frame-component": "^3.0.0",
-    "react-styleguidist": "^11.1.5",
+    "react-styleguidist": "^11.2.0",
     "shx": "^0.3.2",
     "size-limit": "^5.0.5",
     "source-map-loader": "^3.0.1",
@@ -125,8 +127,18 @@
   "size-limit": [
     {
       "name": "JS",
+      "path": "dist/index.js",
+      "gzip": false
+    },
+    {
+      "name": "JS (gzip)",
       "path": "dist/index.js"
     },
+    {
+      "name": "JS (brotli)",
+      "path": "dist/index.js",
+      "brotli": true
+    },
     {
       "name": "JS, unstable",
       "path": "dist/unstable/index.js"
@@ -134,8 +146,20 @@
     {
       "name": "CSS",
       "path": "dist/vkui.css",
+      "webpack": false,
+      "gzip": false
+    },
+    {
+      "name": "CSS (gzip)",
+      "path": "dist/vkui.css",
       "webpack": false
     },
+    {
+      "name": "CSS (brotli)",
+      "path": "dist/vkui.css",
+      "webpack": false,
+      "brotli": true
+    },
     {
       "name": "CSS, unstable",
       "path": "dist/unstable.css",
@@ -211,6 +235,6 @@
     "react-popper": "^2.2.5"
   },
   "engines": {
-    "yarn": ">=1.21.1 <=1.22.18"
+    "yarn": "^1.21.1"
   }
 }

package/postcss-custom-properties-fallback/__tests__/custom_properties.css

@@ -0,0 +1,5 @@
+/* stylelint-disable-next-line vkui/atomic */
+:root {
+  --color: red;
+  --shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+}

package/postcss-custom-properties-fallback/index.js

@@ -0,0 +1,83 @@
+/* stylelint-disable */
+const fs = require("fs");
+const valueParser = require("postcss-value-parser");
+const { nodeToString, parse: parseValues } = require("postcss-values-parser");
+const { parse } = require("postcss");
+
+const isTransformableDecl = (decl) =>
+  /(^|[^\w-])var\([\W\w]+\)/.test(decl.value);
+
+function parseCustomProperties(importFrom) {
+  const customProperties = new Map();
+
+  parse(fs.readFileSync(importFrom, "utf8")).walkRules((rule) => {
+    if (rule.selector === ":root") {
+      rule.walkDecls((decl) => {
+        if (decl.prop.startsWith("--")) {
+          customProperties.set(
+            decl.prop,
+            parseValues(String(decl.value)).nodes
+          );
+        }
+      });
+    }
+  });
+
+  return customProperties;
+}
+
+module.exports = (opts) => {
+  return {
+    postcssPlugin: "custom-properties-fallback",
+    prepare() {
+      const customProperties = parseCustomProperties(opts.importFrom);
+      const shouldTransformableDecl =
+        opts.shouldTransformableDecl || isTransformableDecl;
+
+      return {
+        Declaration(node) {
+          if (shouldTransformableDecl(node)) {
+            const parsed = valueParser(node.value);
+
+            parsed.walk((node) => {
+              if (node.type !== "function" || node.nodes.length !== 1) {
+                return;
+              }
+
+              const firstValue = node.nodes[0].value;
+
+              if (
+                !customProperties.has(firstValue) ||
+                customProperties.get(firstValue).length === 0
+              ) {
+                return;
+              }
+
+              const fallback = customProperties.get(firstValue);
+
+              node.nodes.push(
+                {
+                  type: "divider",
+                  value: ",",
+                },
+                {
+                  type: "word",
+                  value:
+                    fallback.length > 1
+                      ? fallback
+                          .map((fallbackNode) => nodeToString(fallbackNode))
+                          .join(" ")
+                      : fallback,
+                }
+              );
+            });
+
+            node.value = parsed.toString();
+          }
+        },
+      };
+    },
+  };
+};
+
+module.exports.postcss = true;

package/src/components/ActionSheet/ActionSheet.tsx

@@ -1,6 +1,5 @@
 import * as React from "react";
 import { PopoutWrapper } from "../PopoutWrapper/PopoutWrapper";
-import { ViewWidth, ViewHeight } from "../../hoc/withAdaptivity";
 import { IOS } from "../../lib/platform";
 import { ActionSheetDropdownDesktop } from "./ActionSheetDropdownDesktop";
 import { ActionSheetDropdown } from "./ActionSheetDropdown";
@@ -9,7 +8,7 @@ import { ActionSheetContext, ItemClickHandler } from "./ActionSheetContext";
 import { Caption } from "../Typography/Caption/Caption";
 import { usePlatform } from "../../hooks/usePlatform";
 import { useTimeout } from "../../hooks/useTimeout";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { useAdaptivityIsDesktop } from "../../hooks/useAdaptivity";
 import { useObjectMemo } from "../../hooks/useObjectMemo";
 import { warnOnce } from "../../lib/warnOnce";
 import { SharedDropdownProps, PopupDirection, ToggleRef } from "./types";
@@ -41,6 +40,9 @@ export interface ActionSheetProps extends React.HTMLAttributes<HTMLDivElement> {
 
 const warn = warnOnce("ActionSheet");
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/ActionSheet
+ */
 export const ActionSheet: React.FC<ActionSheetProps> = ({
   children,
   className,
@@ -68,10 +70,7 @@ export const ActionSheet: React.FC<ActionSheetProps> = ({
     );
   }
 
-  const { viewWidth, viewHeight, hasMouse } = useAdaptivity();
-  const isDesktop =
-    viewWidth >= ViewWidth.SMALL_TABLET &&
-    (hasMouse || viewHeight >= ViewHeight.MEDIUM);
+  const isDesktop = useAdaptivityIsDesktop();
 
   useScrollLock(!isDesktop);
 

package/src/components/ActionSheetItem/ActionSheetItem.tsx

@@ -1,12 +1,12 @@
 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";
 import { Title } from "../Typography/Title/Title";
-import Text from "../Typography/Text/Text";
+import { Text } from "../Typography/Text/Text";
 import { ANDROID, VKCOM } from "../../lib/platform";
 import { Icon16Done, Icon24Done } from "@vkontakte/icons";
 import {
@@ -14,7 +14,7 @@ import {
   ActionSheetContextType,
 } from "../ActionSheet/ActionSheetContext";
 import { Caption } from "../Typography/Caption/Caption";
-import Headline from "../Typography/Headline/Headline";
+import { Headline } from "../Typography/Headline/Headline";
 import {
   withAdaptivity,
   AdaptivityProps,
@@ -106,21 +106,19 @@ const ActionSheetItemComponent: React.FC<ActionSheetItemProps> = ({
           {sizeY === SizeType.COMPACT ? (
             <React.Fragment>
               <Text
-                weight={mode === "cancel" ? "medium" : "regular"}
+                weight={mode === "cancel" ? "2" : undefined}
                 vkuiClass="ActionSheetItem__children"
               >
                 {children}
               </Text>
               {hasReactNode(meta) && (
-                <Text weight="regular" vkuiClass="ActionSheetItem__meta">
-                  {meta}
-                </Text>
+                <Text vkuiClass="ActionSheetItem__meta">{meta}</Text>
               )}
             </React.Fragment>
           ) : (
             <React.Fragment>
               {platform === ANDROID ? (
-                <Headline weight={mode === "cancel" ? "medium" : "regular"}>
+                <Headline weight={mode === "cancel" ? "2" : "3"}>
                   {children}
                 </Headline>
               ) : (
@@ -134,7 +132,7 @@ const ActionSheetItemComponent: React.FC<ActionSheetItemProps> = ({
               )}
               {hasReactNode(meta) &&
                 (platform === ANDROID ? (
-                  <Headline weight={mode === "cancel" ? "medium" : "regular"}>
+                  <Headline weight={mode === "cancel" ? "2" : "3"}>
                     {children}
                   </Headline>
                 ) : (
@@ -178,6 +176,9 @@ const ActionSheetItemComponent: React.FC<ActionSheetItemProps> = ({
   );
 };
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/ActionSheetItem
+ */
 export const ActionSheetItem = withAdaptivity(ActionSheetItemComponent, {
   sizeY: true,
 });

package/src/components/AdaptivityProvider/AdaptivityProvider.tsx

@@ -21,6 +21,9 @@ export const MOBILE_SIZE = 320;
 export const MOBILE_LANDSCAPE_HEIGHT = 414;
 export const MEDIUM_HEIGHT = 720;
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/AdaptivityProvider
+ */
 const AdaptivityProvider: React.FC<AdaptivityProps> = (props) => {
   const adaptivityRef = React.useRef<ReturnType<
     typeof calculateAdaptivity